sit-onyx 1.0.0-beta.280 → 1.0.0-beta.282

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

@@ -8,7 +8,7 @@ export type OnyxPageLayoutProps = Partial<SkeletonProvidedProp> & {
     footerAlignment?: "full" | "page";
     /**
      * If `true`, the default responsive page content padding will be removed.
-     * You can use the `onyx-grid-container` CSS class on your own which is used internally for the padding.
+     * You can use the `onyx-grid-layout` CSS class on your own which is used internally for the padding.
      * Useful when e.g. implementing a page with a full width hero image at the top, followed by content below.
      */
     noPadding?: boolean;

package/dist/index.esm-bundler.js

@@ -1951,7 +1951,7 @@ const _sfc_main$1l = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$Y = { class: "onyx-bottom-bar__content" };
+const _hoisted_1$Y = { class: "onyx-bottom-bar__content onyx-grid-container" };
 const _hoisted_2$G = { class: "onyx-bottom-bar__content--left" };
 const _hoisted_3$p = { class: "onyx-bottom-bar__content--right" };
 function _sfc_render$1l(_ctx, _cache, $props, $setup, $data, $options) {
@@ -2147,6 +2147,7 @@ function _sfc_render$1j(_ctx, _cache, $props, $setup, $data, $options) {
     class: normalizeClass([
       "onyx-component",
       "onyx-breadcrumb",
+      "onyx-grid-container",
       $setup.densityClass,
       $setup.props.container ? "onyx-breadcrumb--container" : ""
     ]),
@@ -2780,7 +2781,8 @@ const useAnchorPositionPolyfill = ({
   });
   const useragentSupportsAnchorApi = ref(true);
   onBeforeMount(() => {
-    useragentSupportsAnchorApi.value = "CSS" in globalThis && typeof CSS !== "undefined" && CSS.supports("anchor-name: --test") && CSS.supports("position-area: top");
+    const isSafari = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
+    useragentSupportsAnchorApi.value = "CSS" in globalThis && typeof CSS !== "undefined" && CSS.supports("anchor-name: --test") && CSS.supports("position-area: top") && !isSafari;
   });
   return {
     leftPosition,
@@ -2995,13 +2997,20 @@ const _sfc_main$1c = /* @__PURE__ */ defineComponent({
     });
     const id = useId();
     const anchorName = computed(() => `--anchor-${id}`);
-    const tooltipStyles = computed(() => ({
-      width: tooltipWidth.value,
-      "position-anchor": anchorName.value,
-      "position-area": positionAndAlignment.value,
-      left: !useragentSupportsAnchorApi.value ? leftPosition.value : void 0,
-      top: !useragentSupportsAnchorApi.value ? topPosition.value : void 0
-    }));
+    const tooltipStyles = computed(() => {
+      if (useragentSupportsAnchorApi.value) {
+        return {
+          width: tooltipWidth.value,
+          "position-anchor": anchorName.value,
+          "position-area": positionAndAlignment.value
+        };
+      }
+      return {
+        width: tooltipWidth.value,
+        left: leftPosition.value,
+        top: topPosition.value
+      };
+    });
     const __returned__ = { props, densityClass, t, _isVisible, isVisible, tooltipOptions, toggletipOptions, type, toolTipPosition, alignment, positionAndAlignment, createPattern, ariaPattern, tooltip: tooltip2, trigger, alignsWithEdge, fitParent, tooltipWrapperRef, tooltipRef, openDirection, updateOpenDirection, openAlignment, updateOpenAlignment, leftPosition, topPosition, updateAnchorPositionPolyfill, useragentSupportsAnchorApi, updateDirections, handleOpening, tooltipClasses, width, tooltipWidth, id, anchorName, tooltipStyles, OnyxIcon };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
@@ -3615,7 +3624,7 @@ const _hoisted_2$z = ["id"];
 const _hoisted_3$n = { class: "onyx-table-wrapper__actions" };
 const _hoisted_4$i = ["tabindex"];
 const _hoisted_5$d = ["aria-labelledby"];
-const _hoisted_6$a = ["span"];
+const _hoisted_6$b = ["span"];
 const _hoisted_7$4 = {
   key: 0,
   class: "onyx-table__header"
@@ -3668,7 +3677,7 @@ function _sfc_render$16(_ctx, _cache, $props, $setup, $data, $options) {
               return openBlock(), createElementBlock("colgroup", {
                 key: group.key,
                 span: group.span
-              }, null, 8, _hoisted_6$a);
+              }, null, 8, _hoisted_6$b);
             }),
             128
             /* KEYED_FRAGMENT */
@@ -3998,16 +4007,15 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
     });
     const disabled = computed(() => props.disabled);
     const positionAndAlignment = computed(() => {
-      let returnPosition = popoverPosition.value;
       if (popoverPosition.value === "top" || popoverPosition.value === "bottom") {
         if (popoverAlignment.value === "left") {
-          returnPosition = popoverPosition.value + " x-start";
+          return popoverPosition.value + " span-right";
         }
         if (popoverAlignment.value === "right") {
-          returnPosition = popoverPosition.value + " x-end";
+          return popoverPosition.value + " span-left";
         }
       }
-      return returnPosition;
+      return popoverPosition.value;
     });
     const popoverRef = useTemplateRef("popover");
     const popoverWrapperRef = useTemplateRef("popoverWrapper");
@@ -4017,12 +4025,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
       popoverRef,
       "left"
     );
-    const {
-      leftPosition,
-      topPosition,
-      updateAnchorPositionPolyfill,
-      useragentSupportsAnchorApi: userAgentSupportsAnchorApi
-    } = useAnchorPositionPolyfill({
+    const { leftPosition, topPosition, updateAnchorPositionPolyfill, useragentSupportsAnchorApi } = useAnchorPositionPolyfill({
       positionedRef: popoverRef,
       targetRef: popoverWrapperRef,
       positionArea: popoverPosition,
@@ -4032,9 +4035,6 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
       offset: 8
     });
     const { width } = useResizeObserver(popoverWrapperRef);
-    const popoverWidth = computed(
-      () => props.fitParent && popoverWrapperRef.value ? `${width.value}px` : "max-content"
-    );
     const handleOpening = (open) => {
       if (open) {
         popoverRef.value?.showPopover?.();
@@ -4053,13 +4053,13 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
     onMounted(() => {
       handleOpening(isVisible.value);
       updateDirections();
-      if (!userAgentSupportsAnchorApi.value) updateAnchorPositionPolyfill();
+      if (!useragentSupportsAnchorApi.value) updateAnchorPositionPolyfill();
     });
     watch(isVisible, async (newVal) => {
       await nextTick();
       handleOpening(newVal);
       updateDirections();
-      if (!userAgentSupportsAnchorApi.value) updateAnchorPositionPolyfill();
+      if (!useragentSupportsAnchorApi.value) updateAnchorPositionPolyfill();
     });
     const toggle = () => {
       _isVisible.value = !_isVisible.value;
@@ -4078,7 +4078,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
         [`onyx-popover__dialog--alignment-${popoverAlignment.value}`]: true,
         "onyx-popover__dialog--fitparent": props.fitParent,
         "onyx-popover__dialog--disabled": disabled.value,
-        "onyx-popover__dialog--dont-support-anchor": !userAgentSupportsAnchorApi.value
+        "onyx-popover__dialog--dont-support-anchor": !useragentSupportsAnchorApi.value
       };
     });
     watch(disabled, () => {
@@ -4086,21 +4086,29 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
         _isVisible.value = false;
       }
     });
-    watch([popoverPosition, popoverAlignment, popoverWidth], async () => {
-      if (!userAgentSupportsAnchorApi.value) {
+    watch([popoverPosition, popoverAlignment, width], async () => {
+      if (!useragentSupportsAnchorApi.value) {
         await nextTick();
         updateDirections();
         updateAnchorPositionPolyfill();
       }
     });
-    const popoverStyles = computed(() => ({
-      "position-anchor": anchorName.value,
-      "position-area": positionAndAlignment.value,
-      width: props.fitParent ? popoverWidth.value : void 0,
-      left: !userAgentSupportsAnchorApi.value ? leftPosition.value : void 0,
-      top: !userAgentSupportsAnchorApi.value ? topPosition.value : void 0
-    }));
-    const __returned__ = { props, _isVisible, isVisible, popoverPosition, popoverAlignment, disabled, positionAndAlignment, popoverRef, popoverWrapperRef, openDirection, updateOpenDirection, openAlignment, updateOpenAlignment, leftPosition, topPosition, updateAnchorPositionPolyfill, userAgentSupportsAnchorApi, width, popoverWidth, handleOpening, updateDirections, toggle, trigger, id, anchorName, popoverClasses, popoverStyles };
+    const popoverStyles = computed(() => {
+      const _width = props.fitParent ? `${width.value}px` : void 0;
+      if (useragentSupportsAnchorApi.value) {
+        return {
+          width: _width,
+          "position-anchor": anchorName.value,
+          "position-area": positionAndAlignment.value
+        };
+      }
+      return {
+        width: _width,
+        left: leftPosition.value,
+        top: topPosition.value
+      };
+    });
+    const __returned__ = { props, _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 };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -5518,7 +5526,7 @@ const _hoisted_5$c = {
   role: "presentation",
   class: "onyx-select__group-name onyx-text--small"
 };
-const _hoisted_6$9 = {
+const _hoisted_6$a = {
   key: 1,
   class: "onyx-select__slot"
 };
@@ -5697,7 +5705,7 @@ function _sfc_render$X(_ctx, _cache, $props, $setup, $data, $options) {
               16
               /* FULL_PROPS */
             ),
-            $setup.props.lazyLoading?.loading ? (openBlock(), createElementBlock("div", _hoisted_6$9, [
+            $setup.props.lazyLoading?.loading ? (openBlock(), createElementBlock("div", _hoisted_6$a, [
               createVNode($setup["OnyxLoadingIndicator"], { class: "onyx-select__loading" })
             ])) : createCommentVNode("v-if", true),
             $setup.slots.optionsEnd ? (openBlock(), createElementBlock("div", _hoisted_7$3, [
@@ -7260,7 +7268,7 @@ const _hoisted_2$p = { class: "onyx-modal-dialog__headline" };
 const _hoisted_3$h = { class: "onyx-modal-dialog__headline-content" };
 const _hoisted_4$e = ["id"];
 const _hoisted_5$b = { class: "onyx-modal-dialog__body" };
-const _hoisted_6$8 = {
+const _hoisted_6$9 = {
   key: 0,
   class: "onyx-modal-dialog__footer"
 };
@@ -7309,7 +7317,7 @@ function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
       createElementVNode("div", _hoisted_5$b, [
         renderSlot(_ctx.$slots, "default")
       ]),
-      !!$setup.slots.footer ? (openBlock(), createElementBlock("div", _hoisted_6$8, [
+      !!$setup.slots.footer ? (openBlock(), createElementBlock("div", _hoisted_6$9, [
         renderSlot(_ctx.$slots, "footer")
       ])) : createCommentVNode("v-if", true)
     ]),
@@ -9151,7 +9159,7 @@ const _hoisted_5$9 = {
   key: 0,
   class: "onyx-user-menu__description onyx-text--small onyx-truncation-ellipsis"
 };
-const _hoisted_6$7 = { class: "onyx-user-menu__options" };
+const _hoisted_6$8 = { class: "onyx-user-menu__options" };
 function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock($setup["UserMenuLayout"], {
     "flyout-open": $setup.flyoutOpen,
@@ -9215,7 +9223,7 @@ function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
       ])
     ]),
     options: withCtx(() => [
-      createElementVNode("div", _hoisted_6$7, [
+      createElementVNode("div", _hoisted_6$8, [
         renderSlot(_ctx.$slots, "default")
       ])
     ]),
@@ -9305,7 +9313,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-const _hoisted_1$l = { class: "onyx-nav-bar__content" };
+const _hoisted_1$l = { class: "onyx-nav-bar__content onyx-grid-container" };
 const _hoisted_2$f = {
   key: 0,
   class: "onyx-nav-bar__mobile-page onyx-truncation-ellipsis"
@@ -9316,7 +9324,7 @@ const _hoisted_5$8 = {
   key: 0,
   class: "onyx-nav-bar__mobile-context"
 };
-const _hoisted_6$6 = {
+const _hoisted_6$7 = {
   key: 0,
   class: "onyx-nav-bar__mobile-global-context"
 };
@@ -9449,7 +9457,7 @@ function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
           { key: 4 },
           [
             $setup.actualIsMobile ? (openBlock(), createElementBlock("div", _hoisted_5$8, [
-              $setup.slots.globalContextArea ? (openBlock(), createElementBlock("div", _hoisted_6$6, [
+              $setup.slots.globalContextArea ? (openBlock(), createElementBlock("div", _hoisted_6$7, [
                 renderSlot(_ctx.$slots, "globalContextArea")
               ])) : createCommentVNode("v-if", true),
               $setup.slots.contextArea ? (openBlock(), createBlock($setup["OnyxMobileNavButton"], {
@@ -9571,7 +9579,7 @@ const _hoisted_2$e = {
 const _hoisted_3$9 = { class: "onyx-notification-card__header" };
 const _hoisted_4$8 = { class: "onyx-notification-card__header-container" };
 const _hoisted_5$7 = { class: "onyx-notification-card__header-container" };
-const _hoisted_6$5 = { class: "onyx-notification-card__created-at onyx-text--small" };
+const _hoisted_6$6 = { class: "onyx-notification-card__created-at onyx-text--small" };
 const _hoisted_7$1 = { class: "onyx-notification-card__description onyx-text onyx-truncation-multiline" };
 const _hoisted_8$1 = {
   key: 0,
@@ -9645,7 +9653,7 @@ function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
               }, 8, ["label"])) : createCommentVNode("v-if", true)
             ])
           ]),
-          createElementVNode("div", _hoisted_6$5, [
+          createElementVNode("div", _hoisted_6$6, [
             createElementVNode(
               "span",
               null,
@@ -9971,14 +9979,18 @@ const _hoisted_1$g = {
 };
 const _hoisted_2$c = { class: "onyx-page__main" };
 const _hoisted_3$7 = {
-  key: 1,
+  key: 0,
   class: "onyx-grid-container"
 };
 const _hoisted_4$7 = {
   key: 1,
-  class: "onyx-page__sidebar onyx-page__sidebar--right"
+  class: "onyx-grid-layout"
 };
 const _hoisted_5$6 = {
+  key: 1,
+  class: "onyx-page__sidebar onyx-page__sidebar--right"
+};
+const _hoisted_6$5 = {
   key: 2,
   class: "onyx-page__footer"
 };
@@ -9997,14 +10009,16 @@ function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
         renderSlot(_ctx.$slots, "sidebar")
       ])) : createCommentVNode("v-if", true),
       createElementVNode("main", _hoisted_2$c, [
-        $setup.props.noPadding ? renderSlot(_ctx.$slots, "default", { key: 0 }) : (openBlock(), createElementBlock("div", _hoisted_3$7, [
+        $setup.props.noPadding ? (openBlock(), createElementBlock("div", _hoisted_3$7, [
+          renderSlot(_ctx.$slots, "default")
+        ])) : (openBlock(), createElementBlock("div", _hoisted_4$7, [
           renderSlot(_ctx.$slots, "default")
         ]))
       ]),
-      $setup.slots.sidebarRight ? (openBlock(), createElementBlock("div", _hoisted_4$7, [
+      $setup.slots.sidebarRight ? (openBlock(), createElementBlock("div", _hoisted_5$6, [
         renderSlot(_ctx.$slots, "sidebarRight")
       ])) : createCommentVNode("v-if", true),
-      $setup.slots.footer ? (openBlock(), createElementBlock("div", _hoisted_5$6, [
+      $setup.slots.footer ? (openBlock(), createElementBlock("div", _hoisted_6$5, [
         renderSlot(_ctx.$slots, "footer")
       ])) : createCommentVNode("v-if", true)
     ],
@@ -10532,6 +10546,7 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
     class: normalizeClass([
       "onyx-component",
       "onyx-sidebar",
+      "onyx-grid-container",
       $setup.densityClass,
       $setup.props.alignment === "right" ? "onyx-sidebar--right" : ""
     ]),