sit-onyx 1.1.0-dev-20250929141520 → 1.1.0-dev-20250930075345

package/dist/index.esm-bundler.js

@@ -4393,24 +4393,26 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
       () => props.alignment === "auto" ? openAlignment.value : props.alignment
     );
     const positionAndAlignment = computed(() => {
-      let returnPosition = toolTipPosition.value;
-      if ((toolTipPosition.value === "top" || toolTipPosition.value === "bottom") && alignsWithEdge.value) {
+      if ((toolTipPosition.value === "top" || toolTipPosition.value === "bottom") && props.alignsWithEdge) {
         if (alignment.value === "left") {
-          returnPosition = toolTipPosition.value + " x-start";
+          return `${toolTipPosition.value} x-start`;
         }
         if (alignment.value === "right") {
-          returnPosition = toolTipPosition.value + " x-end";
+          return `${toolTipPosition.value} x-end`;
         }
       }
-      return returnPosition;
+      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 = computed(() => props.alignsWithEdge);
-    const fitParent = computed(() => props.fitParent);
+    const alignsWithEdge = toRef(() => props.alignsWithEdge);
+    const fitParent = toRef(() => props.fitParent);
     const tooltipWrapperRef = useTemplateRef("tooltipWrapperRefEl");
     const tooltipRef = useTemplateRef("tooltipRefEl");
     const { openDirection, updateOpenDirection } = useOpenDirection(tooltipWrapperRef, "top");
@@ -4458,27 +4460,31 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
     onMounted(() => {
       handleOpening(isVisible.value);
       updateDirections();
-      if (!useragentSupportsAnchorApi.value) updateAnchorPositionPolyfill();
-    });
-    watch(isVisible, async (newVal) => {
-      await nextTick();
-      handleOpening(newVal);
-      updateDirections();
-      if (!useragentSupportsAnchorApi.value) updateAnchorPositionPolyfill();
     });
-    watch([tooltipWidth, toolTipPosition, alignment, alignsWithEdge], async () => {
-      if (!useragentSupportsAnchorApi.value) {
-        await nextTick();
-        updateAnchorPositionPolyfill();
+    onMounted(() => {
+      if (useragentSupportsAnchorApi.value) {
+        return;
       }
+      watch(
+        [tooltipWidth, toolTipPosition, alignment, alignsWithEdge, isVisible],
+        () => updateAnchorPositionPolyfill(),
+        { flush: "post", immediate: true }
+      );
     });
-    const id = useId();
-    const anchorName = computed(() => `--anchor-${id}`);
+    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.value,
+          "position-anchor": anchorName,
           "position-area": positionAndAlignment.value
         };
       }
@@ -4488,7 +4494,7 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
         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, id, anchorName, tooltipStyles, OnyxIcon };
+    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__;
   }