@jsenv/navi 0.25.8 → 0.25.10

package/dist/jsenv_navi.js

@@ -21346,6 +21346,26 @@ const TextAnchor = ({
 }) => {
   import.meta.css = [css$z, "@jsenv/navi/src/text/text_anchor.jsx"];
   const anchorRef = useRef();
+  const setTopOffset = (childEl, topOffset) => {
+    // position:relative + top shifts the element visually.
+    // marginTop: -topOffset makes the layout box follow the visual position, so any container
+    // (button, link, box…) computes its own padding/border/height based on the real final position
+    // rather than the original unshifted one. This means a badge inside a button will symmetrically
+    // expand the button height instead of overflowing or being clipped.
+    // marginBottom: topOffset compensates the marginTop so the line height stays unchanged —
+    // the shift is purely a repositioning, not an inflation of the line.
+    if (!topOffset) {
+      childEl.style.position = "";
+      childEl.style.top = "";
+      childEl.style.marginTop = "";
+      childEl.style.marginBottom = "";
+      return;
+    }
+    childEl.style.position = "relative";
+    childEl.style.top = `${topOffset}px`;
+    childEl.style.marginTop = `${-topOffset}px`;
+    childEl.style.marginBottom = `${topOffset}px`;
+  };
   useLayoutEffect(() => {
     const anchorEl = anchorRef.current;
     const childEl = childRef.current;
@@ -21359,32 +21379,16 @@ const TextAnchor = ({
     if (parentDisplay !== "inline" && parentDisplay !== "inline-block" && parentDisplay !== "block") {
       // we must hide the anchor otherwise it would affect layout without providing any benefit (would trigger flex gap for instance)
       anchorEl.setAttribute("hidden", "");
-    } else {
-      anchorEl.removeAttribute("hidden");
+      setTopOffset(childEl, 0);
+      return;
     }
+    anchorEl.removeAttribute("hidden");
     const topOffset = computeTopOffset({
       anchorEl,
       childEl,
       textAnchor
     });
-    if (topOffset) {
-      // position:relative + top shifts the element visually.
-      // marginTop: -topOffset makes the layout box follow the visual position, so any container
-      // (button, link, box…) computes its own padding/border/height based on the real final position
-      // rather than the original unshifted one. This means a badge inside a button will symmetrically
-      // expand the button height instead of overflowing or being clipped.
-      // marginBottom: topOffset compensates the marginTop so the line height stays unchanged —
-      // the shift is purely a repositioning, not an inflation of the line.
-      childEl.style.position = "relative";
-      childEl.style.top = `${topOffset}px`;
-      childEl.style.marginTop = `${-topOffset}px`;
-      childEl.style.marginBottom = `${topOffset}px`;
-    } else {
-      childEl.style.position = "";
-      childEl.style.top = "";
-      childEl.style.marginTop = "";
-      childEl.style.marginBottom = "";
-    }
+    setTopOffset(childEl, topOffset);
   }, [textAnchor, textKey, textSize, lineLayout?.size, lineLayout?.verticalAlign]);
   return jsxs(Fragment, {
     children: [children, jsx("span", {
@@ -21889,6 +21893,8 @@ const useAccentColorAttributes = (
       return undefined;
     }
     let elementToCheck = el;
+    elementSelector =
+      elementSelector || el.getAttribute("data-visual-selector");
     if (elementSelector) {
       elementToCheck = el.querySelector(elementSelector);
       if (!elementToCheck) {
@@ -22803,7 +22809,10 @@ const ButtonUI = props => {
     innerTarget = target === undefined ? isSameSite ? undefined : "_blank" : target;
     innerRel = rel === undefined ? isSameSite ? undefined : "noopener noreferrer" : rel;
   }
-  useAccentColorAttributes(ref, null);
+  const visualSelector = ".navi_button_content";
+  useAccentColorAttributes(ref, null, {
+    elementSelector: visualSelector
+  });
   const renderButtonContent = buttonProps => {
     return jsxs(Text, {
       ...buttonProps,
@@ -22857,7 +22866,7 @@ const ButtonUI = props => {
       ":disabled": innerDisabled,
       ":-navi-loading": innerLoading
     },
-    visualSelector: ".navi_button_content",
+    visualSelector: visualSelector,
     hasChildFunction: true,
     children: [jsx(LoaderBackground, {
       loading: innerLoading,