@jsenv/navi 0.21.5 → 0.21.7

package/dist/jsenv_navi.js

@@ -12389,10 +12389,23 @@ const route = (pattern, { searchParams } = {}) => {
 
       // If we found a more specific route, delegate to it; otherwise handle it ourselves
       if (!isMostSpecificRoute) {
-        // Check if this is a signal-originated call and there's a more specific route that will also handle it
-        // If so, skip the redirect to avoid duplicate navTo calls
+        // For signal-originated calls, only skip delegation if the more specific route
+        // has its own signal connection for the same params — meaning its own effect will
+        // fire and handle the redirect. If it doesn't have the connection, the signal
+        // change would be silently dropped, so we must delegate anyway.
         if (isSignalChange) {
-          return null;
+          const mostSpecificRoutePrivateProperties =
+            getRoutePrivateProperties(mostSpecificRoute);
+          const { pathConnectionMap, queryConnectionMap } =
+            mostSpecificRoutePrivateProperties.routePattern;
+          const willHandleItself = Object.keys(newParams).every(
+            (paramName) =>
+              pathConnectionMap.has(paramName) ||
+              queryConnectionMap.has(paramName),
+          );
+          if (willHandleItself) {
+            return null;
+          }
         }
         return mostSpecificRoute.redirectTo(newParams, {
           callReason: `replaceParams delegation from ${route} to ${mostSpecificRoute} (original reason: ${callReason})`,
@@ -18829,6 +18842,7 @@ const css$3 = /* css */`
 
   .navi_text {
     position: relative;
+    border-radius: var(--x-border-radius);
 
     /* There is a chrome specific bug that prevents text-transform: capitalize to be applied in nested DOM structure */
     /* The CSS below ensure capitalize is propagated to the bold clones */
@@ -18880,35 +18894,59 @@ const css$3 = /* css */`
       }
     }
 
-    /* When skeleton + overflow ellipsis: skeleton fills available space,
-       no text to clip so disable overflow machinery. */
-    &[data-text-overflow][data-skeleton] {
-      flex-wrap: nowrap;
-      text-overflow: clip;
-      /* overflow:hidden on [data-text-overflow] would clip the absolutely
-         positioned skeleton span — keep it visible */
-      overflow: visible;
+    &[data-skeleton] {
+      --x-border-radius: 0.2em;
 
-      .navi_text_overflow_wrapper {
-        display: contents;
-        .navi_text_overflow_text {
-          display: contents;
+      /* Children stay in the DOM to preserve natural layout dimensions,
+         but are hidden so only the skeleton is visible. */
+      visibility: hidden;
 
-          max-width: none;
-          text-overflow: clip;
-          overflow: visible;
-        }
+      /* When there are no children a placeholder "W" is injected (see JSX).
+         It must stretch to the full available width so the skeleton
+         fills the container rather than collapsing to a single character. */
+      .navi_text_skeleton_children_placeholder {
+        display: inline-flex;
+        width: 100%;
       }
-    }
 
-    &[data-skeleton] {
-      /* Keep layout space — children are hidden, skeleton overlays absolutely */
-      visibility: hidden;
+      /* Three-level structure to respect padding AND border-radius:
+
+         1. navi_text_skeleton_container — absolutely fills the border box
+            (inset:0), then applies padding:inherit so its content box equals
+            the parent's content box. line-height:normal prevents the container
+            from inheriting a large line-height that would make it taller than
+            the border box. border-radius:inherit passes the radius down.
+            visibility:visible overrides the parent's visibility:hidden.
+
+         2. navi_text_skeleton_inset — a relative block that fills 100% of the
+            container's content box (= parent's content box). It is the
+            positioned ancestor for the absolutely placed skeleton bar.
+            border-radius:inherit chains the radius further down.
+
+         3. navi_text_skeleton — the visible gradient bar. position:absolute
+            inset:0 fills the inset box precisely. border-radius:inherit
+            finally applies the radius at this level, which is now correctly
+            sized to the content area. */
+      .navi_text_skeleton_container {
+        position: absolute;
+        inset: 0;
+        padding: inherit;
+        line-height: normal;
+        border-radius: inherit;
+        visibility: visible;
+      }
+
+      .navi_text_skeleton_inset {
+        position: relative;
+        display: inline-flex;
+        width: 100%;
+        height: 100%;
+        border-radius: inherit;
+      }
 
       .navi_text_skeleton {
         position: absolute;
         inset: 0;
-        /* top/bottom inset may not perfectly align with text bounds — acceptable */
         background: linear-gradient(
           90deg,
           #e0e0e0 25%,
@@ -18916,14 +18954,7 @@ const css$3 = /* css */`
           #e0e0e0 75%
         );
         background-size: 200% 100%;
-        border-radius: 4px;
-        visibility: visible;
-      }
-
-      &[data-empty] {
-        .navi_text_skeleton {
-          height: 1em;
-        }
+        border-radius: inherit;
       }
 
       &[data-loading] {
@@ -19126,25 +19157,32 @@ const TextSkeleton = ({
   children,
   ...props
 }) => {
-  const skeletonSpan = jsx("span", {
-    className: "navi_text_skeleton",
-    "aria-hidden": "true"
+  // Three-level structure — see CSS comment on [data-skeleton] for details.
+  const skeletonOverlay = jsx("span", {
+    className: "navi_text_skeleton_container",
+    "aria-hidden": "true",
+    children: jsx("span", {
+      className: "navi_text_skeleton_inset",
+      children: jsx("span", {
+        className: "navi_text_skeleton"
+      })
+    })
   });
-  // When there are no children we inject an invisible "W" so the element takes
-  // its natural text height (matching current font-size) instead of relying on
-  // min-height which can be off. The W is hidden via CSS visibility:hidden.
+  // When there are no children, inject a full-width placeholder so the element
+  // has measurable height driven by the current font-size/line-height, and the
+  // skeleton fills the available width instead of shrinking to a single char.
   const hasChildren = children !== null && children !== undefined && children !== false;
   const innerChildren = hasChildren ? children : jsx("span", {
+    className: "navi_text_skeleton_children_placeholder",
     "aria-hidden": "true",
     children: "W"
   });
   return jsx(Text, {
     "data-skeleton": "",
     "data-loading": loading ? "" : undefined,
-    "data-empty": !hasChildren ? "" : undefined,
     ...props,
     skeleton: undefined,
-    childrenOutsideFlow: skeletonSpan,
+    childrenOutsideFlow: skeletonOverlay,
     children: innerChildren
   });
 };