sit-onyx 1.2.0-dev-20251016073921 → 1.2.0-dev-20251016153744

package/dist/components/OnyxDataGrid/types.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'vue';
 import { SkeletonInjected } from '../../composables/useSkeletonState.js';
-import { IfExtends, IfNotEmpty, MaybePick, RecordValues, UnionByKey } from '../../types/index.js';
+import { IfExtends, IfNotEmpty, MaybeUnwrap, RecordValues, UnionByKey } from '../../types/index.js';
 import { OnyxHeadlineProps } from '../OnyxHeadline/types.js';
 import { OnyxTableProps } from '../OnyxTable/types.js';
 import { BASE_FEATURE } from './features/base/base.js';
@@ -21,7 +21,7 @@ export type MaybeArray<T> = T | Array<T>;
  * Unwraps the typeRenderers from the given feature(s).
  *
  */
-export type ColumnTypesFromFeatures<TFeatures extends MaybeArray<DataGridFeature<any, any, any>>> = IfExtends<RecordValues<MapTypeRenderOptions<IfNotEmpty<MaybePick<UnionByKey<ReturnType<TFeatures extends any[] ? TFeatures[number] : TFeatures>>, "typeRenderer">>>>, ColumnConfigTypeOption<PropertyKey, unknown>>;
+export type ColumnTypesFromFeatures<TFeatures extends MaybeArray<DataGridFeature<any, any, any>>> = IfExtends<RecordValues<MapTypeRenderOptions<IfNotEmpty<MaybeUnwrap<UnionByKey<ReturnType<TFeatures extends any[] ? TFeatures[number] : TFeatures>>, "typeRenderer">>>>, ColumnConfigTypeOption<PropertyKey, unknown>>;
 /**
  * @experimental The DataGrid is still working in progress and the props will change in the future.
  */

package/dist/components/OnyxDatePicker/types.d.ts

@@ -2,9 +2,11 @@ import { Nullable } from '../../types/index.js';
 import { OnyxInputProps } from '../OnyxInput/types.js';
 export type OnyxDatePickerProps = Omit<OnyxInputProps, "type" | "modelValue" | "autocapitalize" | "maxlength" | "minlength" | "pattern" | "withCounter" | "placeholder" | "autocomplete"> & {
     /**
-     * Current date value. Supports all data types that are parsable by `new Date()`.
+     * A date string compliant with [ISO8601](https://en.wikipedia.org/wiki/ISO_8601).
+     * @example "date.toISOString()"
+     * @example "2011-10-31"
      */
-    modelValue?: Nullable<DateValue>;
+    modelValue?: Nullable<string>;
     /**
      * Whether the user should be able to select only date or date + time.
      */

package/dist/components/OnyxLink/OnyxLink.d.vue.ts

@@ -17,7 +17,7 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<OnyxLinkProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<OnyxLinkProps> & Readonly<{}>, {
-    target: import('../../index.js', { with: { "resolution-mode": "import" } }).LinkTarget;
+    target: import('../OnyxRouterLink/types.js', { with: { "resolution-mode": "import" } }).LinkTarget;
     withExternalIcon: boolean | "auto";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLAnchorElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

package/dist/index.esm-bundler.js

@@ -468,6 +468,17 @@ const replacePlaceholders = (message, placeholders) => {
   replacedMessage = replacedMessage.replace(/{'(.*?)'}/g, "$1");
   return replacedMessage.replace(/{.*}\s?/gi, "");
 };
+const useForwardProps = (props, target) => {
+  const keys = new Set(Object.keys(target.props ?? {}));
+  if (!target.props) {
+    userConsole?.error(
+      `The provided component does not have props. Please ensure that the target component is a valid Vue component. Functional components without defined properties are not supported.`
+    );
+  }
+  return computed(
+    () => Object.fromEntries(Object.entries(props).filter(([key]) => keys.has(key)))
+  );
+};
 const createBuilder = (builder) => builder;
 function createElRef() {
   const elementRef = shallowRef();
@@ -1941,8 +1952,9 @@ const _sfc_main$1w = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose }) {
     __expose();
     const props = __props;
+    const buttonOrLinkLayoutProps = useForwardProps(props, ButtonOrLinkLayout);
     const skeleton = useSkeletonContext(props);
-    const __returned__ = { props, skeleton, ButtonOrLinkLayout, OnyxIcon, OnyxSkeleton };
+    const __returned__ = { props, buttonOrLinkLayoutProps, skeleton, ButtonOrLinkLayout, OnyxIcon, OnyxSkeleton };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -1951,7 +1963,7 @@ function _sfc_render$1w(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
     key: 0,
     class: normalizeClass(["onyx-system-button-skeleton", $setup.props.icon ? "" : "onyx-system-button-skeleton--text"])
-  }, null, 8, ["class"])) : (openBlock(), createBlock($setup["ButtonOrLinkLayout"], mergeProps({ key: 1 }, $setup.props, {
+  }, null, 8, ["class"])) : (openBlock(), createBlock($setup["ButtonOrLinkLayout"], mergeProps({ key: 1 }, $setup.buttonOrLinkLayoutProps, {
     type: "button",
     class: ["onyx-system-button", "onyx-text--small", `onyx-system-button--${$setup.props.color}`],
     "aria-label": $setup.props.label,
@@ -1993,11 +2005,12 @@ const _sfc_main$1v = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose, emit: __emit }) {
     __expose();
     const props = __props;
+    const dialogProps = useForwardProps(props, OnyxBasicDialog);
     const emit = __emit;
     const { t } = injectI18n();
     const { densityClass } = useDensity(props);
     const describedById = useId();
-    const __returned__ = { props, emit, t, densityClass, describedById, get iconXSmall() {
+    const __returned__ = { props, dialogProps, emit, t, densityClass, describedById, get iconXSmall() {
       return iconXSmall;
     }, OnyxBasicDialog, OnyxHeadline, OnyxIcon, OnyxSystemButton };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
@@ -2011,7 +2024,7 @@ const _hoisted_4$l = { class: "onyx-alert-modal__actions" };
 function _sfc_render$1v(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["OnyxBasicDialog"], mergeProps({
     class: ["onyx-alert-modal", $setup.densityClass]
-  }, $setup.props, {
+  }, $setup.dialogProps, {
     "aria-describedby": $setup.describedById,
     modal: "",
     alert: "",
@@ -2807,6 +2820,7 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
     const slots = useSlots();
     const { densityClass } = useDensity(props);
     const skeleton = useSkeletonContext(props);
+    const fabButtonProps = useForwardProps(props, OnyxFABButton);
     const isExpanded = useVModel({
       props,
       emit,
@@ -2818,7 +2832,7 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
       if (!hasOptions.value) return props.icon;
       return isExpanded.value ? iconX : iconMoreHorizontalSmall;
     });
-    const __returned__ = { props, emit, slots, densityClass, skeleton, isExpanded, hasOptions, triggerIcon, get mergeVueProps() {
+    const __returned__ = { props, emit, slots, densityClass, skeleton, fabButtonProps, isExpanded, hasOptions, triggerIcon, get mergeVueProps() {
       return mergeVueProps;
     }, OnyxFABButton, OnyxFlyoutMenu };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
@@ -2829,7 +2843,7 @@ function _sfc_render$1r(_ctx, _cache, $props, $setup, $data, $options) {
   return !$setup.hasOptions || $setup.skeleton ? (openBlock(), createBlock($setup["OnyxFABButton"], mergeProps({
     key: 0,
     class: ["onyx-fab", `onyx-fab--${$setup.props.alignment}`]
-  }, $setup.props, {
+  }, $setup.fabButtonProps, {
     icon: $setup.triggerIcon,
     skeleton: $setup.skeleton
   }), null, 16, ["class", "icon", "skeleton"])) : (openBlock(), createBlock($setup["OnyxFlyoutMenu"], {
@@ -3147,12 +3161,13 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose }) {
     __expose();
     const props = __props;
+    const forwardProps = useForwardProps(props, ButtonOrLinkLayout);
     const { densityClass } = useDensity(props);
     const { disabled } = useFormContext(props);
     const skeleton = useSkeletonContext(props);
     const ripple = useTemplateRef("rippleRef");
     const rippleEvents = computed(() => ripple.value?.events ?? {});
-    const __returned__ = { props, densityClass, disabled, skeleton, ripple, rippleEvents, OnyxIcon, OnyxLoadingIndicator, OnyxRipple, OnyxSkeleton, ButtonOrLinkLayout };
+    const __returned__ = { props, forwardProps, densityClass, disabled, skeleton, ripple, rippleEvents, OnyxIcon, OnyxLoadingIndicator, OnyxRipple, OnyxSkeleton, ButtonOrLinkLayout };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -3162,7 +3177,7 @@ function _sfc_render$1k(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
     key: 0,
     class: normalizeClass(["onyx-button-skeleton", $setup.densityClass])
-  }, null, 8, ["class"])) : (openBlock(), createBlock($setup["ButtonOrLinkLayout"], mergeProps({ key: 1 }, $setup.props, {
+  }, null, 8, ["class"])) : (openBlock(), createBlock($setup["ButtonOrLinkLayout"], mergeProps({ key: 1 }, $setup.forwardProps, {
     class: [
       "onyx-component",
       "onyx-button",
@@ -4669,7 +4684,8 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
     const props = __props;
     const { densityClass } = useDensity(props);
     const skeleton = useSkeletonContext(props);
-    const __returned__ = { props, densityClass, skeleton, ButtonOrLinkLayout, OnyxIcon, OnyxLoadingIndicator, OnyxSkeleton };
+    const forwardProps = useForwardProps(props, ButtonOrLinkLayout);
+    const __returned__ = { props, densityClass, skeleton, forwardProps, ButtonOrLinkLayout, OnyxIcon, OnyxLoadingIndicator, OnyxSkeleton };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -4678,7 +4694,7 @@ 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, {
+  }, null, 8, ["class"])) : (openBlock(), createBlock($setup["ButtonOrLinkLayout"], mergeProps({ key: 1 }, $setup.forwardProps, {
     "aria-label": $setup.props.label,
     title: $setup.props.label,
     class: [
@@ -5258,8 +5274,22 @@ const useRequired = (props, requiredMarker) => ({
     "onyx-optional-marker": !props.required
   }))
 });
-const isValidDate = (date) => {
-  return date instanceof Date && !isNaN(date);
+const isValidDate = (date) => date instanceof Date && !isNaN(date.getTime());
+const dateToISOString = (date, type) => {
+  if (!isValidDate(date)) {
+    return void 0;
+  }
+  const dateString = date.toISOString();
+  if (type === "datetime-utc") {
+    return dateString;
+  }
+  const dateOnlyString = dateString.split("T")[0];
+  if (type === "date") {
+    return dateOnlyString;
+  }
+  const hours = date.getHours().toString().padStart(2, "0");
+  const minutes = date.getMinutes().toString().padStart(2, "0");
+  return `${dateOnlyString}T${hours}:${minutes}`;
 };
 const getValidityStateProperties = () => Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([_, value]) => value.enumerable).map(([key]) => key);
 const transformValidityStateToObject = (validityState) => {
@@ -5700,11 +5730,12 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
       emit,
       key: "open"
     });
+    const tooltipProps = useForwardProps(props, OnyxTooltip);
     const triggerType = computed(() => {
       if (typeof props.trigger === "object") return props.trigger.type;
       return props.trigger;
     });
-    const __returned__ = { props, emit, isVisible, triggerType, get iconCircleInformation() {
+    const __returned__ = { props, emit, isVisible, tooltipProps, triggerType, get iconCircleInformation() {
       return iconCircleInformation;
     }, OnyxIcon, OnyxSystemButton, OnyxTooltip, OnyxVisuallyHidden };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
@@ -5714,7 +5745,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
 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, {
+    $setup.triggerType === "click" ? (openBlock(), createBlock($setup["OnyxTooltip"], mergeProps({ key: 0 }, $setup.tooltipProps, {
       open: $setup.isVisible,
       "onUpdate:open": _cache[0] || (_cache[0] = ($event) => $setup.isVisible = $event)
     }), {
@@ -5735,7 +5766,7 @@ function _sfc_render$X(_ctx, _cache, $props, $setup, $data, $options) {
       Fragment,
       { key: 1 },
       [
-        createVNode($setup["OnyxTooltip"], mergeProps($setup.props, {
+        createVNode($setup["OnyxTooltip"], mergeProps($setup.tooltipProps, {
           open: $setup.isVisible,
           "onUpdate:open": _cache[1] || (_cache[1] = ($event) => $setup.isVisible = $event),
           "aria-hidden": "true"
@@ -6148,6 +6179,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     __expose();
     const props = __props;
     const slots = useSlots();
+    const tableProps = useForwardProps(props, OnyxTable);
     const columnStyle = computed(() => {
       return {
         "--onyx-data-grid-column-count": props.columns.length,
@@ -6159,7 +6191,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
         }).join(" ")
       };
     });
-    const __returned__ = { props, slots, columnStyle, get mergeVueProps() {
+    const __returned__ = { props, slots, tableProps, columnStyle, get mergeVueProps() {
       return mergeVueProps;
     }, OnyxTable };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
@@ -6167,7 +6199,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
   }
 });
 function _sfc_render$T(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createBlock($setup["OnyxTable"], mergeProps({ class: "onyx-data-grid" }, $setup.props, {
+  return openBlock(), createBlock($setup["OnyxTable"], mergeProps({ class: "onyx-data-grid" }, $setup.tableProps, {
     "scroll-container-attrs": $setup.mergeVueProps($setup.props.scrollContainerAttrs, { style: $setup.columnStyle })
   }), createSlots({
     head: withCtx(() => [
@@ -7151,6 +7183,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
     const { disabled, showError } = useFormContext(props);
     const skeleton = useSkeletonContext(props);
     const errorClass = useErrorClass(showError);
+    const formElementProps = useForwardProps(props, OnyxFormElement);
     const selectionCount = computed(() => {
       return props.modelValue ? props.modelValue.length : 0;
     });
@@ -7185,7 +7218,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
       event.preventDefault();
     };
     useAutofocus(input2, props);
-    const __returned__ = { rootAttrs, restAttrs, props, emit, t, vCustomValidity, errorMessages, successMessages, messages, disabled, showError, skeleton, errorClass, selectionCount, selectionText, wasTouched, densityClass, input: input2, navigationalKeys, blockTyping, get iconCheckSmall() {
+    const __returned__ = { rootAttrs, restAttrs, props, emit, t, vCustomValidity, errorMessages, successMessages, messages, disabled, showError, skeleton, errorClass, formElementProps, selectionCount, selectionText, wasTouched, densityClass, input: input2, navigationalKeys, blockTyping, get iconCheckSmall() {
       return iconCheckSmall;
     }, get iconChevronDownUp() {
       return iconChevronDownUp;
@@ -7225,7 +7258,7 @@ function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
       ]
     }, $setup.rootAttrs),
     [
-      createVNode($setup["OnyxFormElement"], mergeProps($setup.props, {
+      createVNode($setup["OnyxFormElement"], mergeProps($setup.formElementProps, {
         message: $setup.messages,
         "success-messages": $setup.successMessages,
         "error-messages": $setup.errorMessages
@@ -7331,14 +7364,15 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose }) {
     __expose();
     const props = __props;
-    const __returned__ = { props, OnyxIcon, OnyxListItem };
+    const listItemProps = useForwardProps(props, OnyxListItem);
+    const __returned__ = { props, listItemProps, OnyxIcon, OnyxListItem };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
 });
 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, {
+  return openBlock(), createBlock($setup["OnyxListItem"], mergeProps({ class: "onyx-component onyx-select-option" }, $setup.listItemProps, {
     checked: !!_ctx.$attrs["aria-checked"],
     selected: !!_ctx.$attrs["aria-selected"],
     disabled: !!_ctx.$attrs["aria-disabled"]
@@ -8000,7 +8034,8 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
     __expose();
     const props = __props;
     const emit = __emit;
-    const __returned__ = { props, emit, OnyxSelectPagination };
+    const selectPaginationProps = useForwardProps(props, OnyxSelectPagination);
+    const __returned__ = { props, emit, selectPaginationProps, OnyxSelectPagination };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -8008,7 +8043,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
 function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(
     $setup["OnyxSelectPagination"],
-    mergeProps($setup.props, {
+    mergeProps($setup.selectPaginationProps, {
       "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $setup.emit("update:modelValue", $event))
     }),
     null,
@@ -9079,15 +9114,11 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     const { disabled, showError } = useFormContext(props);
     const skeleton = useSkeletonContext(props);
     const errorClass = useErrorClass(showError);
+    const formElementProps = useForwardProps(props, OnyxFormElement);
     const getNormalizedDate = computed(() => {
       return (value2) => {
         const date = value2 != void 0 && value2 != null ? new Date(value2) : void 0;
-        if (!isValidDate(date)) return;
-        const dateString = date.toISOString().split("T")[0];
-        if (props.type === "date") return dateString;
-        const hours = date.getHours().toString().padStart(2, "0");
-        const minutes = date.getMinutes().toString().padStart(2, "0");
-        return `${dateString}T${hours}:${minutes}`;
+        return dateToISOString(date, props.type);
       };
     });
     const modelValue = useVModel({
@@ -9099,12 +9130,11 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
       get: () => getNormalizedDate.value(modelValue.value),
       set: (value2) => {
         const newDate = new Date(value2 ?? "");
-        modelValue.value = isValidDate(newDate) ? newDate.toISOString() : void 0;
+        modelValue.value = dateToISOString(newDate, props.type === "date" ? "date" : "datetime-utc");
       }
     });
-    const input2 = useTemplateRef("inputRef");
-    useAutofocus(input2, props);
-    const __returned__ = { props, emit, rootAttrs, restAttrs, vCustomValidity, errorMessages, successMessages, messages, densityClass, disabled, showError, skeleton, errorClass, getNormalizedDate, modelValue, value, input: input2, OnyxFormElement, OnyxLoadingIndicator, OnyxSkeleton };
+    useAutofocus(useTemplateRef("inputRef"), props);
+    const __returned__ = { props, emit, rootAttrs, restAttrs, vCustomValidity, errorMessages, successMessages, messages, densityClass, disabled, showError, skeleton, errorClass, formElementProps, getNormalizedDate, modelValue, value, OnyxFormElement, OnyxLoadingIndicator, OnyxSkeleton };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -9134,7 +9164,7 @@ function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
       class: ["onyx-component", "onyx-datepicker", $setup.densityClass, $setup.errorClass]
     }, $setup.rootAttrs),
     [
-      createVNode($setup["OnyxFormElement"], mergeProps($setup.props, {
+      createVNode($setup["OnyxFormElement"], mergeProps($setup.formElementProps, {
         "error-messages": $setup.errorMessages,
         "success-messages": $setup.successMessages,
         message: $setup.messages
@@ -9198,13 +9228,14 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
     const slots = useSlots();
     const { t } = injectI18n();
     const { densityClass } = useDensity(props);
+    const basicPopoverProps = useForwardProps(props, OnyxBasicPopover);
     const isExpanded = useVModel({
       props,
       emit,
       key: "open",
       default: false
     });
-    const __returned__ = { props, emit, slots, t, densityClass, isExpanded, get iconXSmall() {
+    const __returned__ = { props, emit, slots, t, densityClass, basicPopoverProps, isExpanded, get iconXSmall() {
       return iconXSmall;
     }, OnyxBasicPopover, OnyxHeadline, OnyxSystemButton };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
@@ -9220,7 +9251,7 @@ const _hoisted_5$a = {
   class: "onyx-dialog__footer"
 };
 function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createBlock($setup["OnyxBasicPopover"], mergeProps($setup.props, {
+  return openBlock(), createBlock($setup["OnyxBasicPopover"], mergeProps($setup.basicPopoverProps, {
     open: $setup.isExpanded,
     "onUpdate:open": _cache[1] || (_cache[1] = ($event) => $setup.isExpanded = $event),
     class: ["onyx-dialog", $setup.densityClass]
@@ -9530,6 +9561,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
       default: ""
     });
     const { rootAttrs, restAttrs } = useRootAttrs();
+    const formElementProps = useForwardProps(props, OnyxFormElement);
     const { t } = injectI18n();
     const { maxLength, maxLengthError } = useLenientMaxLengthValidation({ modelValue, props });
     const error = computed(() => props.error ?? maxLengthError.value);
@@ -9559,7 +9591,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
       }
       return props.type;
     });
-    const __returned__ = { props, emit, slots, modelValue, rootAttrs, restAttrs, t, maxLength, maxLengthError, error, vCustomValidity, errorMessages, successMessages, messages, densityClass, patternSource, input: input2, disabled, showError, skeleton, errorClass, showPassword, displayType, get iconCheckSmall() {
+    const __returned__ = { props, emit, slots, modelValue, rootAttrs, restAttrs, formElementProps, t, maxLength, maxLengthError, error, vCustomValidity, errorMessages, successMessages, messages, densityClass, patternSource, input: input2, disabled, showError, skeleton, errorClass, showPassword, displayType, get iconCheckSmall() {
       return iconCheckSmall;
     }, get iconEye() {
       return iconEye;
@@ -9598,7 +9630,7 @@ function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
       class: ["onyx-component", "onyx-input", $setup.densityClass, $setup.errorClass]
     }, $setup.rootAttrs),
     [
-      createVNode($setup["OnyxFormElement"], mergeProps($setup.props, {
+      createVNode($setup["OnyxFormElement"], mergeProps($setup.formElementProps, {
         "error-messages": $setup.errorMessages,
         "success-messages": $setup.successMessages,
         message: $setup.messages
@@ -9693,7 +9725,9 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose }) {
     __expose();
     const props = __props;
-    const __returned__ = { props, OnyxExternalLinkIcon, OnyxRouterLink };
+    const routerLinkProps = useForwardProps(props, OnyxRouterLink);
+    const externalLinkIconProps = useForwardProps(props, OnyxExternalLinkIcon);
+    const __returned__ = { props, routerLinkProps, externalLinkIconProps, OnyxExternalLinkIcon, OnyxRouterLink };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -9701,13 +9735,13 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
 function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(
     $setup["OnyxRouterLink"],
-    mergeProps({ class: "onyx-component onyx-link" }, $setup.props),
+    mergeProps({ class: "onyx-component onyx-link" }, $setup.routerLinkProps),
     {
       default: withCtx(() => [
         renderSlot(_ctx.$slots, "default"),
         createVNode(
           $setup["OnyxExternalLinkIcon"],
-          normalizeProps(guardReactiveProps($setup.props)),
+          normalizeProps(guardReactiveProps($setup.externalLinkIconProps)),
           null,
           16
           /* FULL_PROPS */
@@ -9814,9 +9848,10 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     const slots = useSlots();
     const { t } = injectI18n();
     const { densityClass } = useDensity(props);
+    const basicDialogProps = useForwardProps(props, OnyxBasicDialog);
     const descriptionId = useId();
     const hasDescription = computed(() => !!slots.description);
-    const __returned__ = { props, emit, slots, t, densityClass, descriptionId, hasDescription, get iconXSmall() {
+    const __returned__ = { props, emit, slots, t, densityClass, basicDialogProps, descriptionId, hasDescription, get iconXSmall() {
       return iconXSmall;
     }, OnyxBasicDialog, OnyxHeadline, OnyxSystemButton };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
@@ -9833,7 +9868,7 @@ const _hoisted_6$7 = {
   class: "onyx-modal__footer"
 };
 function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createBlock($setup["OnyxBasicDialog"], mergeProps($setup.props, {
+  return openBlock(), createBlock($setup["OnyxBasicDialog"], mergeProps($setup.basicDialogProps, {
     modal: "",
     class: ["onyx-modal", $setup.densityClass],
     "aria-describedby": $setup.hasDescription ? $setup.descriptionId : void 0,
@@ -9955,6 +9990,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const slots = useSlots();
+    const modalProps = useForwardProps(props, OnyxModal);
     const currentValue = ref();
     watchEffect(() => currentValue.value = props.modelValue);
     const { t } = injectI18n();
@@ -9968,7 +10004,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
       emit("update:modelValue", currentValue.value);
       emit("update:open", false);
     };
-    const __returned__ = { props, emit, slots, currentValue, t, formId, handleChange, handleApply, OnyxBottomBar, OnyxButton, OnyxCard, OnyxIcon, OnyxModal, OnyxVisuallyHidden };
+    const __returned__ = { props, emit, slots, modalProps, currentValue, t, formId, handleChange, handleApply, OnyxBottomBar, OnyxButton, OnyxCard, OnyxIcon, OnyxModal, OnyxVisuallyHidden };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -9981,7 +10017,7 @@ const _hoisted_4$a = {
   class: "onyx-text--small"
 };
 function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createBlock($setup["OnyxModal"], mergeProps($setup.props, {
+  return openBlock(), createBlock($setup["OnyxModal"], mergeProps($setup.modalProps, {
     open: $setup.props.open,
     class: "onyx-select-dialog",
     label: $setup.props.label,
@@ -10120,6 +10156,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const { t } = injectI18n();
+    const selectDialogProps = useForwardProps(props, OnyxSelectDialog);
     const options = computed(() => {
       return [
         {
@@ -10142,13 +10179,13 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
         }
       ];
     });
-    const __returned__ = { props, emit, t, options, OnyxSelectDialog };
+    const __returned__ = { props, emit, t, selectDialogProps, options, OnyxSelectDialog };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
 });
 function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createBlock($setup["OnyxSelectDialog"], mergeProps({ class: "onyx-color-scheme-dialog" }, $setup.props, {
+  return openBlock(), createBlock($setup["OnyxSelectDialog"], mergeProps({ class: "onyx-color-scheme-dialog" }, $setup.selectDialogProps, {
     label: $setup.t("colorScheme.headline"),
     options: $setup.options,
     open: $setup.props.open,
@@ -10310,14 +10347,15 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     __expose();
     const props = __props;
     const slots = useSlots();
+    const menuItemProps = useForwardProps(props, OnyxMenuItem);
     const hasChildren = computed(() => !!slots.children);
-    const __returned__ = { props, slots, hasChildren, OnyxMenuItem };
+    const __returned__ = { props, slots, menuItemProps, hasChildren, OnyxMenuItem };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
 });
 function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createBlock($setup["OnyxMenuItem"], mergeProps($setup.props, {
+  return openBlock(), createBlock($setup["OnyxMenuItem"], mergeProps($setup.menuItemProps, {
     link: $setup.hasChildren && $setup.props.context !== "navbar" ? void 0 : $setup.props.link,
     class: {
       "onyx-nav-item": true,
@@ -12245,6 +12283,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     const { vCustomValidity, errorMessages } = useFormElementError({ props, emit });
     const successMessages = computed(() => getFormMessages(props.success));
     const messages = computed(() => getFormMessages(props.message));
+    const formElementProps = useForwardProps(props, OnyxFormElement);
     const { rootAttrs, restAttrs } = useRootAttrs();
     const wasTouched = ref(false);
     const modelValue = useVModel({
@@ -12308,7 +12347,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     const decrementLabel = computed(() => t.value("stepper.decrement", { stepSize: props.stepSize }));
     __expose({ input: input2 });
     useAutofocus(input2, props);
-    const __returned__ = { props, emit, t, locale, input: input2, disabled, showError, skeleton, errorClass, densityClass, vCustomValidity, errorMessages, successMessages, messages, rootAttrs, restAttrs, wasTouched, modelValue, inputValue, displayValue, getFormattedValue, getDisplayValue, handleClick, handleChange, incrementLabel, decrementLabel, get iconMinus() {
+    const __returned__ = { props, emit, t, locale, input: input2, disabled, showError, skeleton, errorClass, densityClass, vCustomValidity, errorMessages, successMessages, messages, formElementProps, rootAttrs, restAttrs, wasTouched, modelValue, inputValue, displayValue, getFormattedValue, getDisplayValue, handleClick, handleChange, incrementLabel, decrementLabel, get iconMinus() {
       return iconMinus;
     }, get iconPlus() {
       return iconPlus;
@@ -12348,7 +12387,7 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
       class: ["onyx-component", "onyx-stepper", $setup.densityClass, $setup.errorClass]
     }, $setup.rootAttrs),
     [
-      createVNode($setup["OnyxFormElement"], mergeProps($setup.props, {
+      createVNode($setup["OnyxFormElement"], mergeProps($setup.formElementProps, {
         message: $setup.messages,
         "success-messages": $setup.successMessages,
         "error-messages": $setup.errorMessages
@@ -12754,6 +12793,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose }) {
     __expose();
     const props = __props;
+    const iconProps = useForwardProps(props, OnyxIcon);
     const FALLBACK_ICON = iconFile;
     const icon = computed(() => {
       if (!props.type) return FALLBACK_ICON;
@@ -12793,13 +12833,13 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       if (props.type.startsWith("text/")) return iconFileText;
       return FALLBACK_ICON;
     });
-    const __returned__ = { props, FALLBACK_ICON, icon, OnyxIcon };
+    const __returned__ = { props, iconProps, FALLBACK_ICON, icon, OnyxIcon };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
 });
 function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createBlock($setup["OnyxIcon"], mergeProps($setup.props, { icon: $setup.icon }), null, 16, ["icon"]);
+  return openBlock(), createBlock($setup["OnyxIcon"], mergeProps($setup.iconProps, { icon: $setup.icon }), null, 16, ["icon"]);
 }
 const OnyxFileTypeIcon = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7], ["__file", "/home/runner/work/onyx/onyx/packages/sit-onyx/src/components/OnyxFileTypeIcon/OnyxFileTypeIcon.vue"]]);
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({
@@ -13476,6 +13516,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const { t } = injectI18n();
+    const tagProps = useForwardProps(props, OnyxTag);
     const active = useVModel({
       props,
       emit,
@@ -13486,7 +13527,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       () => active.value ? t.value("filterTag.clickToRemove", { label: props.label }) : t.value("filterTag.clickToAdd", { label: props.label })
     );
     const skeleton = useSkeletonContext(props);
-    const __returned__ = { props, emit, t, active, tooltipLabel, skeleton, get iconXSmall() {
+    const __returned__ = { props, emit, t, tagProps, active, tooltipLabel, skeleton, get iconXSmall() {
       return iconXSmall;
     }, OnyxTag };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
@@ -13494,7 +13535,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   }
 });
 function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createBlock($setup["OnyxTag"], mergeProps($setup.props, {
+  return openBlock(), createBlock($setup["OnyxTag"], mergeProps($setup.tagProps, {
     clickable: { label: $setup.tooltipLabel, actionIcon: $setup.active ? $setup.iconXSmall : void 0 },
     class: "onyx-filter-tag",
     skeleton: $setup.skeleton,
@@ -13543,6 +13584,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       default: ""
     });
     const { rootAttrs, restAttrs } = useRootAttrs();
+    const formElementProps = useForwardProps(props, OnyxFormElement);
     const { maxLength, maxLengthError } = useLenientMaxLengthValidation({ props, modelValue });
     const error = computed(() => props.error ?? maxLengthError.value);
     const { vCustomValidity, errorMessages } = useFormElementError({ props, emit, error });
@@ -13565,7 +13607,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const input2 = useTemplateRef("inputRef");
     __expose({ input: input2 });
     useAutofocus(input2, props);
-    const __returned__ = { props, emit, modelValue, rootAttrs, restAttrs, maxLength, maxLengthError, error, vCustomValidity, errorMessages, densityClass, successMessages, messages, autosizeMinMaxStyles, handleInput, disabled, showError, skeleton, errorClass, input: input2, OnyxFormElement, OnyxSkeleton };
+    const __returned__ = { props, emit, modelValue, rootAttrs, restAttrs, formElementProps, maxLength, maxLengthError, error, vCustomValidity, errorMessages, densityClass, successMessages, messages, autosizeMinMaxStyles, handleInput, disabled, showError, skeleton, errorClass, input: input2, OnyxFormElement, OnyxSkeleton };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -13597,7 +13639,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
       style: $setup.autosizeMinMaxStyles
     }, $setup.rootAttrs),
     [
-      createVNode($setup["OnyxFormElement"], mergeProps($setup.props, {
+      createVNode($setup["OnyxFormElement"], mergeProps($setup.formElementProps, {
         message: $setup.messages,
         "success-messages": $setup.successMessages,
         "error-messages": $setup.errorMessages