@jsenv/navi 0.18.6 → 0.18.9

package/dist/jsenv_navi.js

@@ -29460,7 +29460,7 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
   @layer navi {
     .navi_stat {
       --unit-color: color-mix(in srgb, currentColor 50%, white);
-      --unit-ratio: 0.7;
+      --unit-size-ratio: 0.7;
     }
   }
 
@@ -29485,7 +29485,7 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
       .navi_stat_unit {
         color: var(--unit-color);
         font-weight: normal;
-        font-size: calc(var(--unit-ratio) * 1em);
+        font-size: calc(var(--unit-size-ratio) * 1em);
       }
     }
 
@@ -29521,7 +29521,7 @@ const Stat = ({
   children,
   unit,
   unitPosition = "right",
-  unitRatio,
+  unitSizeRatio,
   label,
   size,
   lang,
@@ -29564,8 +29564,8 @@ const Stat = ({
       }), unit && jsx("span", {
         className: "navi_stat_unit",
         style: {
-          ...(unitRatio === undefined ? {} : {
-            "--unit-ratio": unitRatio
+          ...(unitSizeRatio === undefined ? {} : {
+            "--unit-size-ratio": unitSizeRatio
           })
         },
         children: unit
@@ -29681,6 +29681,14 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
         border-color: transparent;
       }
     }
+    &[data-transition] {
+      .navi_meter_fill {
+        transition: clip-path 0.4s ease;
+      }
+      &[data-fill-round] .navi_meter_fill {
+        transition: width 0.4s ease;
+      }
+    }
   }
 `;
 const MeterStyleCSSVars = {
@@ -29701,20 +29709,22 @@ const Meter = ({
   loading,
   readOnly,
   disabled,
-  children,
+  caption,
   percentage,
   fillOnly,
   fillRound = fillOnly,
   borderless,
+  transition,
   style,
   ...props
 }) => {
   const clampedValue = value < min ? min : value > max ? max : value;
   const fillRatio = max === min ? 0 : (clampedValue - min) / (max - min);
+  let children = caption;
   if (children === undefined && percentage) {
     children = jsx(Stat, {
       unit: "%",
-      unitRatio: "1",
+      unitSizeRatio: "1",
       children: Math.round(fillRatio * 100)
     });
   }
@@ -29731,22 +29741,24 @@ const Meter = ({
     if (!trackContainer) {
       return;
     }
-    const fillEl = trackContainer.querySelector(".navi_meter_fill");
-    if (!fillEl) {
+    // When fill covers less than half the track, the text center sits on the
+    // empty track — use the track color for contrast. Otherwise use fill color.
+    const bgEl = fillRatio >= 0.5 ? trackContainer.querySelector(".navi_meter_fill") : trackContainer.querySelector(".navi_meter_track");
+    if (!bgEl) {
       return;
     }
-    const fillBgColor = getComputedStyle(fillEl).backgroundColor;
-    const textColor = pickLightOrDark(fillBgColor, "white", "black", fillEl);
+    const bgColor = getComputedStyle(bgEl).backgroundColor;
+    const textColor = pickLightOrDark(bgColor, "white", "black", bgEl);
     const shadowColor = textColor === "white" ? "black" : "white";
     trackContainer.style.setProperty("--x-caption-color", textColor);
     trackContainer.style.setProperty("--x-caption-shadow-color", shadowColor);
-  }, [children, level]);
+  }, [children, level, fillRatio]);
   return jsx(Box, {
     role: "meter",
     "aria-valuenow": clampedValue,
     "aria-valuemin": min,
     "aria-valuemax": max,
-    "aria-label": typeof children === "string" ? children : undefined,
+    "aria-label": typeof caption === "string" ? caption : undefined,
     baseClassName: "navi_meter",
     styleCSSVars: MeterStyleCSSVars,
     basePseudoState: {
@@ -29759,6 +29771,7 @@ const Meter = ({
     "data-fill-only": fillOnly ? "" : undefined,
     "data-fill-round": fillRound ? "" : undefined,
     "data-borderless": borderless ? "" : undefined,
+    "data-transition": transition ? "" : undefined,
     style: {
       "--x-fill-ratio": fillRatio,
       "--x-fill-color": fillColorVar,