@jsenv/navi 0.21.4 → 0.21.6

package/dist/jsenv_navi.js

@@ -18829,10 +18829,7 @@ const css$3 = /* css */`
 
   .navi_text {
     position: relative;
-
-    &[data-has-absolute-child] {
-      display: inline-block;
-    }
+    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 */
@@ -18865,6 +18862,7 @@ const css$3 = /* css */`
     }
 
     &[data-text-overflow] {
+      min-width: 0;
       flex-wrap: wrap;
       text-overflow: ellipsis;
       overflow: hidden;
@@ -18882,20 +18880,78 @@ const css$3 = /* css */`
         }
       }
     }
-  }
 
-  .navi_text_skeleton {
-    display: inline-block;
-    width: 100%;
-    height: 1em;
-    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
-    background-size: 200% 100%;
-    border-radius: 4px;
+    &[data-skeleton] {
+      --x-border-radius: 0.2em;
 
-    &[data-loading] {
-      animation: navi_text_skeleton_shimmer 1.2s infinite;
+      /* Children stay in the DOM to preserve natural layout dimensions,
+         but are hidden so only the skeleton is visible. */
+      visibility: hidden;
+
+      /* 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%;
+      }
+
+      /* 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;
+        background: linear-gradient(
+          90deg,
+          #e0e0e0 25%,
+          #f0f0f0 50%,
+          #e0e0e0 75%
+        );
+        background-size: 200% 100%;
+        border-radius: inherit;
+      }
+
+      &[data-loading] {
+        .navi_text_skeleton {
+          animation: navi_text_skeleton_shimmer 1.5s infinite;
+        }
+      }
     }
   }
+
   @keyframes navi_text_skeleton_shimmer {
     0% {
       background-position: 200% 0;
@@ -18905,9 +18961,6 @@ const css$3 = /* css */`
     }
   }
 
-  .navi_custom_space {
-  }
-
   .navi_text_bold_wrapper {
     position: relative;
     display: inline-block;
@@ -19062,21 +19115,14 @@ const shouldInjectSpacingBetween = (left, right) => {
 const OverflowPinnedElementContext = createContext(null);
 const Text = props => {
   import.meta.css = [css$3, "@jsenv/navi/src/text/text.jsx"];
-  const {
-    overflowEllipsis,
-    loading,
-    skeleton,
-    ...rest
-  } = props;
-  if (loading || skeleton) {
+  if (props.loading || props.skeleton) {
     return jsx(TextSkeleton, {
-      loading: loading,
-      ...rest
+      ...props
     });
   }
-  if (overflowEllipsis) {
+  if (props.overflowEllipsis) {
     return jsx(TextOverflow, {
-      ...rest
+      ...props
     });
   }
   if (props.overflowPinned) {
@@ -19095,16 +19141,36 @@ const Text = props => {
 };
 const TextSkeleton = ({
   loading,
+  children,
   ...props
 }) => {
-  return jsx(Box, {
+  // 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, 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,
     ...props,
-    baseClassName: "navi_text_skeleton",
-    "data-loading": loading ? "" : undefined
-    // eslint-disable-next-line react/no-children-prop
-    ,
-
-    children: undefined
+    skeleton: undefined,
+    childrenOutsideFlow: skeletonOverlay,
+    children: innerChildren
   });
 };
 const TextOverflow = ({
@@ -19125,7 +19191,8 @@ const TextOverflow = ({
 
     preLine: rest.as === "p",
     ...rest,
-    "data-text-overflow": true,
+    overflowEllipsis: undefined,
+    "data-text-overflow": "",
     spacing: "pre",
     children: jsxs("span", {
       className: "navi_text_overflow_wrapper",
@@ -19203,7 +19270,6 @@ const TextBasic = ({
       ...boxProps,
       bold: undefined,
       "data-bold": bold ? "" : undefined,
-      "data-has-absolute-child": "",
       children: [jsx("span", {
         className: "navi_text_bold_background",
         "aria-hidden": "true",