sit-onyx 1.1.0-dev-20250930120837 → 1.2.0-dev-20251008133229

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

@@ -49,9 +49,9 @@ declare const __VLS_component: import('vue').DefineComponent<OnyxBasicPopoverPro
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     role: "menu" | "listbox" | "tree" | "grid" | "dialog";
+    sticky: boolean;
     alignment: import('../../composables/useOpenAlignment.js', { with: { "resolution-mode": "import" } }).OpenAlignment | "auto";
     position: import('../../composables/useAnchorPositionPolyfill.js', { with: { "resolution-mode": "import" } }).AnchorPosition | "auto";
-    clipping: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     popoverWrapper: HTMLDivElement;
     popover: HTMLDivElement;

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

@@ -35,5 +35,5 @@ export type OnyxBasicPopoverProps = {
      */
     role?: "menu" | "listbox" | "tree" | "grid" | "dialog";
     /** If true, the popover remains visible within the viewport even if its parent element scrolls out of view. */
-    clipping?: boolean;
+    sticky?: boolean;
 };

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

@@ -57,8 +57,8 @@ declare const __VLS_component: import('vue').DefineComponent<OnyxDialogProps, {}
 }, string, import('vue').PublicProps, Readonly<OnyxDialogProps> & Readonly<{
     "onUpdate:open"?: ((open: boolean) => any) | undefined;
 }>, {
+    sticky: boolean;
     open: boolean | null;
-    clipping: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

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

@@ -10,6 +10,13 @@ declare function __VLS_template(): {
          * Slot to provide optional buttons/actions.
          */
         buttons?(): unknown;
+        /**
+         * Optional custom header actions to display inside a flyout menu.
+         * Note that the `closable` property will not have any effect when custom header actions are set.
+         * Please provide a close menu item manually via the header actions then.
+         * You must only put [OnyxMenuItem](https://storybook.onyx.schwarz/?path=/docs/basic-menuitem--docs) components here.
+         */
+        headerActions?(): unknown;
     }> & {
         /**
          * Slot to provide description / further information.
@@ -19,6 +26,13 @@ declare function __VLS_template(): {
          * Slot to provide optional buttons/actions.
          */
         buttons?(): unknown;
+        /**
+         * Optional custom header actions to display inside a flyout menu.
+         * Note that the `closable` property will not have any effect when custom header actions are set.
+         * Please provide a close menu item manually via the header actions then.
+         * You must only put [OnyxMenuItem](https://storybook.onyx.schwarz/?path=/docs/basic-menuitem--docs) components here.
+         */
+        headerActions?(): unknown;
     };
     refs: {};
     rootEl: HTMLDivElement;

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

@@ -16,6 +16,8 @@ export type OnyxInfoCardProps = DensityProp & {
     icon?: string | false;
     /**
      * Whether the info card can be closed. Will show an "x" icon.
+     * If you provide custom `headerActions`, the close button will not be visible.
+     * Please provide a custom menu item inside your header actions then.
      */
     closable?: boolean;
 };

package/dist/composables/{useClipping.d.ts → useSticky.d.ts}

@@ -1,16 +1,16 @@
 import { CSSProperties, Ref } from 'vue';
 import { AnchorPosition } from './useAnchorPositionPolyfill.js';
 import { OpenDirection } from './useOpenDirection.js';
-export type UseClippingOptions = {
+export type UseStickyOptions = {
     popoverRef: Ref<HTMLElement | null>;
     popoverWrapperRef: Ref<HTMLElement | null>;
     popoverPosition: Ref<AnchorPosition | OpenDirection>;
     isVisible: Ref<boolean>;
-    clipping: Ref<boolean>;
+    sticky: Ref<boolean>;
 };
-export declare function useClipping(options: UseClippingOptions): {
-    clippingStyles: Ref<CSSProperties | undefined, CSSProperties | undefined>;
+export declare function useSticky(options: UseStickyOptions): {
+    stickyStyles: Ref<CSSProperties | undefined, CSSProperties | undefined>;
     scrolledOut: Ref<OpenDirection | undefined, OpenDirection | undefined>;
-    isClipping: Ref<boolean, boolean>;
+    isSticky: Ref<boolean, boolean>;
     checkVisibilityOnScroll: () => void;
 };

package/dist/index.esm-bundler.js

@@ -1,5 +1,5 @@
 import { computed, provide, inject, toRef, ref, watch, defineComponent, watchEffect, toRefs, createElementBlock, openBlock, normalizeClass, renderSlot, onMounted, createBlock, resolveDynamicComponent, withCtx, createVNode, createElementVNode, withModifiers, readonly, reactive, onBeforeMount, onBeforeUnmount, useId, toValue, nextTick, unref, shallowRef, useTemplateRef, createCommentVNode, createTextVNode, toDisplayString, normalizeProps, mergeProps, Fragment, useAttrs, isProxy, toRaw, customRef, onUnmounted, normalizeStyle, useSlots, createSlots, renderList, toHandlers, resolveComponent, withDirectives, guardReactiveProps, vShow, Teleport, vModelCheckbox, vModelText, h, vModelDynamic, withKeys, createStaticVNode, useModel } from "vue";
-import { iconChevronDownSmall, iconCircleAttention, iconXSmall, iconX, iconMoreHorizontalSmall, iconCircleCheck, iconCircleX, iconCircleInformation, iconUser, iconArrowSmallUpRight, iconChevronRightSmall, iconArrowSmallLeft, iconMoreHorizontal, iconHome, iconChevronLeftSmall, iconSearch, iconCheck, iconSearchX, iconChevronDownUp, iconCheckSmall, iconPlusSmall, iconEyeDisabled, iconListArrowUp, iconListArrowDown, iconArrowsSort, iconCircleBlock, iconFileDisabled, iconEyeClosed, iconEye, iconCircleContrast, iconTranslate, iconMoreVertical, iconMenu, iconNotificationFlag, iconPlus, iconMinus, iconFile, iconFilePdf, iconFileCsv, iconAudio, iconVideocam, iconPicture, iconFileRtf, iconFilePpt, iconFileXls, iconFileXlsx, iconFileDoc, iconFileGlobe, iconFileArchive, iconFileText, iconTrash, iconCloudArrowUp, iconShareIos, iconSettings, iconLogout, iconArrowSmallRight } from "@sit-onyx/icons";
+import { iconChevronDownSmall, iconCircleAttention, iconXSmall, iconX, iconMoreHorizontalSmall, iconMoreVertical, iconCircleCheck, iconCircleX, iconCircleInformation, iconUser, iconArrowSmallUpRight, iconChevronRightSmall, iconArrowSmallLeft, iconMoreHorizontal, iconHome, iconChevronLeftSmall, iconSearch, iconCheck, iconSearchX, iconChevronDownUp, iconCheckSmall, iconPlusSmall, iconEyeDisabled, iconListArrowUp, iconListArrowDown, iconArrowsSort, iconCircleBlock, iconFileDisabled, iconEyeClosed, iconEye, iconCircleContrast, iconTranslate, iconMenu, iconNotificationFlag, iconPlus, iconMinus, iconFile, iconFilePdf, iconFileCsv, iconAudio, iconVideocam, iconPicture, iconFileRtf, iconFilePpt, iconFileXls, iconFileXlsx, iconFileDoc, iconFileGlobe, iconFileArchive, iconFileText, iconTrash, iconCloudArrowUp, iconShareIos, iconSettings, iconLogout, iconArrowSmallRight } from "@sit-onyx/icons";
 const DENSITIES = ["compact", "default", "cozy"];
 const useDensity = (props) => ({
   densityClass: computed(() => ({ [`onyx-density-${props.density}`]: !!props.density }))
@@ -2296,82 +2296,6 @@ 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);
@@ -2451,6 +2375,82 @@ const findParentWithHiddenOverflow = (element) => {
   }
   return element.parentElement ? findParentWithHiddenOverflow(element.parentElement) : void 0;
 };
+function useSticky(options) {
+  const stickyStyles = ref();
+  const scrolledOut = ref();
+  const isSticky = 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 (isSticky.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) {
+          isSticky.value = false;
+          return;
+        }
+        if (scrolledOut.value === "bottom" && wrapperRect.top + MARGIN < window.innerHeight) {
+          isSticky.value = false;
+          return;
+        }
+      } else if (options.popoverPosition.value.includes("bottom")) {
+        if (scrolledOut.value === "top" && wrapperRect.bottom > MARGIN) {
+          isSticky.value = false;
+          return;
+        }
+        if (scrolledOut.value === "bottom" && window.innerHeight - wrapperRect.bottom > requiredHeight) {
+          isSticky.value = false;
+          return;
+        }
+      } else {
+        if (scrolledOut.value === "top" && wrapperRect.top + MIN_DISTANCE_TO_BORDER > popoverRect.height) {
+          isSticky.value = false;
+          return;
+        }
+        if (scrolledOut.value === "bottom" && wrapperRect.bottom + MIN_DISTANCE_TO_BORDER < window.innerHeight) {
+          isSticky.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) {
+        isSticky.value = true;
+        if (isTooHigh) {
+          scrolledOut.value = "top";
+          stickyStyles.value = { left: rect.left + "px", top: "var(--onyx-density-md)" };
+        } else if (isTooLow) {
+          scrolledOut.value = "bottom";
+          stickyStyles.value = { left: rect.left + "px", bottom: "var(--onyx-density-md)" };
+        }
+      }
+    }
+  };
+  const disableSticky = computed(() => {
+    return !options.sticky.value || !options.isVisible.value;
+  });
+  useGlobalEventListener({
+    type: "scroll",
+    listener: () => checkVisibilityOnScroll(),
+    disabled: disableSticky
+  });
+  useGlobalEventListener({
+    type: "resize",
+    listener: () => checkVisibilityOnScroll(),
+    disabled: disableSticky
+  });
+  onMounted(async () => {
+    await nextTick();
+    if (!disableSticky.value) checkVisibilityOnScroll();
+  });
+  return { stickyStyles, scrolledOut, isSticky, checkVisibilityOnScroll };
+}
 const _sfc_main$1s = /* @__PURE__ */ defineComponent({
   __name: "OnyxBasicPopover",
   props: {
@@ -2461,7 +2461,7 @@ const _sfc_main$1s = /* @__PURE__ */ defineComponent({
     fitParent: { type: Boolean, required: false },
     disabled: { type: Boolean, required: false },
     role: { type: String, required: false, default: "dialog" },
-    clipping: { type: Boolean, required: false, default: false }
+    sticky: { type: Boolean, required: false, default: false }
   },
   emits: ["update:open"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -2532,12 +2532,12 @@ const _sfc_main$1s = /* @__PURE__ */ defineComponent({
       updateOpenDirection();
       updateOpenAlignment();
     };
-    const { clippingStyles, isClipping } = useClipping({
+    const { stickyStyles, isSticky } = useSticky({
       popoverRef,
       popoverWrapperRef,
       popoverPosition,
       isVisible,
-      clipping: computed(() => props.clipping)
+      sticky: toRef(() => props.sticky)
     });
     useGlobalEventListener({
       type: "resize",
@@ -2573,7 +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--sticky": isSticky.value,
         "onyx-basic-popover__dialog--dont-support-anchor": !useragentSupportsAnchorApi.value
       };
     });
@@ -2604,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, clippingStyles, isClipping, 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, stickyStyles, isSticky, toggle, trigger, id, anchorName, popoverClasses, popoverStyles };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -2626,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.isClipping ? $setup.popoverStyles : $setup.clippingStyles)
+        style: normalizeStyle(!$setup.isSticky ? $setup.popoverStyles : $setup.stickyStyles)
       }, [
         renderSlot(_ctx.$slots, "content")
       ], 14, _hoisted_1$11)
@@ -3156,20 +3156,23 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
     const slots = useSlots();
     const { t } = injectI18n();
     const { densityClass } = useDensity(props);
-    const __returned__ = { props, emit, slots, t, densityClass, get iconXSmall() {
+    const systemButtonColor = computed(() => props.color === "neutral" ? "soft" : "medium");
+    const __returned__ = { props, emit, slots, t, densityClass, systemButtonColor, get iconMoreVertical() {
+      return iconMoreVertical;
+    }, get iconXSmall() {
       return iconXSmall;
-    }, OnyxHeadline, OnyxIcon, OnyxSystemButton };
+    }, OnyxHeadline, OnyxIcon, OnyxFlyoutMenu, OnyxSystemButton };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
 });
 const _hoisted_1$X = { class: "onyx-info-card__content" };
 const _hoisted_2$J = {
-  key: 2,
+  key: 3,
   class: "onyx-info-card__description onyx-text--small"
 };
 const _hoisted_3$v = {
-  key: 3,
+  key: 4,
   class: "onyx-info-card__buttons onyx-density-compact"
 };
 function _sfc_render$1i(_ctx, _cache, $props, $setup, $data, $options) {
@@ -3200,12 +3203,31 @@ function _sfc_render$1i(_ctx, _cache, $props, $setup, $data, $options) {
           _: 1
           /* STABLE */
         })) : createCommentVNode("v-if", true),
-        $setup.props.closable ? (openBlock(), createBlock($setup["OnyxSystemButton"], {
+        $setup.slots.headerActions ? (openBlock(), createBlock($setup["OnyxFlyoutMenu"], {
           key: 1,
-          class: "onyx-info-card__close",
+          class: "onyx-info-card__action",
+          label: $setup.t("notificationCard.moreActions"),
+          trigger: "click",
+          alignment: "right"
+        }, {
+          button: withCtx(({ trigger }) => [
+            createVNode($setup["OnyxSystemButton"], mergeProps(trigger, {
+              label: $setup.t("notificationCard.toggleActions"),
+              icon: $setup.iconMoreVertical,
+              color: $setup.systemButtonColor
+            }), null, 16, ["label", "icon", "color"])
+          ]),
+          options: withCtx(() => [
+            renderSlot(_ctx.$slots, "headerActions")
+          ]),
+          _: 3
+          /* FORWARDED */
+        }, 8, ["label"])) : $setup.props.closable ? (openBlock(), createBlock($setup["OnyxSystemButton"], {
+          key: 2,
+          class: "onyx-info-card__close onyx-info-card__action",
           icon: $setup.iconXSmall,
           label: $setup.t("close"),
-          color: $setup.props.color === "neutral" ? "soft" : "medium",
+          color: $setup.systemButtonColor,
           onClick: _cache[0] || (_cache[0] = ($event) => $setup.emit("close"))
         }, null, 8, ["icon", "label", "color"])) : createCommentVNode("v-if", true),
         !!$setup.slots.default ? (openBlock(), createElementBlock("p", _hoisted_2$J, [
@@ -8983,7 +9005,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
     position: { type: String, required: false },
     alignment: { type: String, required: false },
     disabled: { type: Boolean, required: false },
-    clipping: { type: Boolean, required: false, default: true },
+    sticky: { type: Boolean, required: false, default: true },
     nonDismissible: { type: Boolean, required: false }
   },
   emits: ["update:open"],