@marianmeres/stuic 2.21.1 → 2.22.0

package/dist/actions/popover/popover.svelte.js

@@ -1,5 +1,6 @@
 import { mount, unmount } from "svelte";
 import { twMerge } from "../../utils/tw-merge.js";
+import { addAnchorName, removeAnchorName } from "../../utils/anchor-name.js";
 import PopoverContent from "./PopoverContent.svelte";
 //
 import "./index.css";
@@ -162,7 +163,8 @@ export function popover(anchorEl, fn) {
     let currentOptions = {};
     // Initialize anchor element - anchor-name is always set
     // In forceFallback mode, the CSS is just ignored
-    anchorEl.style.cssText += `anchor-name: ${anchorName};`;
+    // Use addAnchorName to support multiple anchor names on same element (e.g., popover + tooltip)
+    addAnchorName(anchorEl, anchorName);
     anchorEl.setAttribute("aria-haspopup", "dialog");
     anchorEl.setAttribute("aria-expanded", "false");
     anchorEl.setAttribute("aria-controls", id);
@@ -446,6 +448,8 @@ export function popover(anchorEl, fn) {
             anchorEl.removeEventListener("mouseleave", scheduleHide);
             anchorEl.removeEventListener("focus", scheduleShow);
             anchorEl.removeEventListener("blur", scheduleHide);
+            // Remove anchor name (preserves other anchor names on element)
+            removeAnchorName(anchorEl, anchorName);
             // Cleanup popover on unmount
             if (mountedComponent) {
                 unmount(mountedComponent);

package/dist/actions/tooltip/tooltip.svelte.js

@@ -1,4 +1,5 @@
 import { twMerge } from "../../utils/tw-merge.js";
+import { addAnchorName, removeAnchorName } from "../../utils/anchor-name.js";
 //
 import "./index.css";
 const TIMEOUT = 200;
@@ -103,7 +104,8 @@ export function tooltip(anchorEl, fn) {
     const id = `tooltip-${rnd}`;
     const anchorName = `--anchor-${rnd}`;
     // node once init
-    anchorEl.style.cssText += `anchor-name: ${anchorName};`;
+    // Use addAnchorName to support multiple anchor names on same element (e.g., popover + tooltip)
+    addAnchorName(anchorEl, anchorName);
     anchorEl.setAttribute("aria-describedby", id);
     anchorEl.setAttribute("aria-expanded", "false");
     const debug = (...args) => {
@@ -230,6 +232,8 @@ export function tooltip(anchorEl, fn) {
             anchorEl.removeEventListener("mouseleave", schedule_hide);
             anchorEl.removeEventListener("focus", schedule_show);
             anchorEl.removeEventListener("blur", schedule_hide);
+            // Remove anchor name (preserves other anchor names on element)
+            removeAnchorName(anchorEl, anchorName);
             // might not have been initialized
             tooltipEl?.removeEventListener("mouseenter", schedule_show);
             tooltipEl?.removeEventListener("mouseleave", schedule_hide);

package/dist/utils/anchor-name.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Utilities for managing CSS anchor-name property when multiple actions
+ * (like popover and tooltip) need to anchor to the same element.
+ *
+ * CSS anchor-name accepts a comma-separated list of names, allowing multiple
+ * anchor references on a single element.
+ */
+/**
+ * Adds an anchor name to an element without overwriting existing ones.
+ *
+ * @param el - The element to add the anchor name to
+ * @param name - The anchor name to add (e.g., "--anchor-popover-xyz")
+ */
+export declare function addAnchorName(el: HTMLElement, name: string): void;
+/**
+ * Removes an anchor name from an element, preserving other anchor names.
+ *
+ * @param el - The element to remove the anchor name from
+ * @param name - The anchor name to remove
+ */
+export declare function removeAnchorName(el: HTMLElement, name: string): void;

package/dist/utils/anchor-name.js

@@ -0,0 +1,47 @@
+/**
+ * Utilities for managing CSS anchor-name property when multiple actions
+ * (like popover and tooltip) need to anchor to the same element.
+ *
+ * CSS anchor-name accepts a comma-separated list of names, allowing multiple
+ * anchor references on a single element.
+ */
+/**
+ * Adds an anchor name to an element without overwriting existing ones.
+ *
+ * @param el - The element to add the anchor name to
+ * @param name - The anchor name to add (e.g., "--anchor-popover-xyz")
+ */
+export function addAnchorName(el, name) {
+    const current = el.style.getPropertyValue("anchor-name").trim();
+    if (current) {
+        // Append to existing list (avoid duplicates)
+        const names = current.split(",").map((n) => n.trim());
+        if (!names.includes(name)) {
+            el.style.setProperty("anchor-name", `${current}, ${name}`);
+        }
+    }
+    else {
+        el.style.setProperty("anchor-name", name);
+    }
+}
+/**
+ * Removes an anchor name from an element, preserving other anchor names.
+ *
+ * @param el - The element to remove the anchor name from
+ * @param name - The anchor name to remove
+ */
+export function removeAnchorName(el, name) {
+    const current = el.style.getPropertyValue("anchor-name").trim();
+    if (current) {
+        const names = current
+            .split(",")
+            .map((n) => n.trim())
+            .filter((n) => n !== name);
+        if (names.length > 0) {
+            el.style.setProperty("anchor-name", names.join(", "));
+        }
+        else {
+            el.style.removeProperty("anchor-name");
+        }
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marianmeres/stuic",
-  "version": "2.21.1",
+  "version": "2.22.0",
   "files": [
     "dist",
     "!dist/**/*.test.*",