@jsenv/navi 0.16.59 → 0.16.60

package/dist/jsenv_navi.js

@@ -27495,63 +27495,73 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
   @layer navi {
   }
   .navi_badge_count {
-    --x-size: 1.5em;
-    --x-border-radius: var(--border-radius);
-    --x-number-font-size: var(--font-size);
+    --x-background: var(--background);
+    --x-background-color: var(--background-color);
     position: relative;
     display: inline-block;
-
     color: var(--color, var(--x-color-contrasting));
     font-size: var(--font-size);
     vertical-align: middle;
-    border-radius: var(--x-border-radius);
-  }
-  .navi_count_badge_overflow {
-    position: relative;
-    top: -0.1em;
-  }
-  /* Ellipse */
-  .navi_badge_count[data-ellipse] {
-    padding-right: 0.4em;
-    padding-left: 0.4em;
-    background: var(--background);
-    background-color: var(--background-color, var(--background));
-    border-radius: 1em;
-  }
-  /* Circle */
-  .navi_badge_count[data-circle] {
-    width: var(--x-size);
-    height: var(--x-size);
-  }
-  .navi_badge_count_frame {
-    position: absolute;
-    top: 50%;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: var(--background);
-    background-color: var(--background-color, var(--background));
-    border-radius: inherit;
-    transform: translateY(-50%);
-  }
-  .navi_badge_count_text {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    font-size: var(--x-number-font-size, inherit);
-    transform: translate(-50%, -50%);
-  }
-  .navi_badge_count[data-single-char] {
-    --x-border-radius: 100%;
-    --x-number-font-size: unset;
-  }
-  .navi_badge_count[data-two-chars] {
-    --x-border-radius: 100%;
-    --x-number-font-size: 0.8em;
-  }
-  .navi_badge_count[data-three-chars] {
-    --x-border-radius: 100%;
-    --x-number-font-size: 0.6em;
+
+    .navi_count_badge_overflow {
+      position: relative;
+      top: -0.1em;
+    }
+
+    /* Ellipse */
+    &[data-ellipse] {
+      padding-right: 0.4em;
+      padding-left: 0.4em;
+      background: var(--x-background);
+      background-color: var(--x-background-color, var(--x-background));
+      border-radius: 1em;
+      &[data-loading] {
+        --x-background: transparent;
+      }
+    }
+
+    /* Circle */
+    &[data-circle] {
+      --x-size: 1.5em;
+      --x-border-radius: var(--border-radius);
+      --x-number-font-size: var(--font-size);
+
+      width: var(--x-size);
+      height: var(--x-size);
+      border-radius: var(--x-border-radius);
+      &[data-single-char] {
+        --x-border-radius: 100%;
+        --x-number-font-size: unset;
+      }
+      &[data-two-chars] {
+        --x-border-radius: 100%;
+        --x-number-font-size: 0.8em;
+      }
+      &[data-three-chars] {
+        --x-border-radius: 100%;
+        --x-number-font-size: 0.6em;
+      }
+
+      .navi_badge_count_frame {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: var(--x-background);
+        background-color: var(--x-background-color, var(--x-background));
+        border-radius: inherit;
+        transform: translateY(-50%);
+      }
+
+      .navi_badge_count_text {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        font-size: var(--x-number-font-size, inherit);
+        transform: translate(-50%, -50%);
+      }
+    }
   }
 `;
 const BadgeStyleCSSVars = {
@@ -27572,11 +27582,11 @@ const BadgeCountOverflow = () => jsx("span", {
 const MAX_CHAR_AS_CIRCLE = 3;
 const BadgeCount = ({
   children,
-  max = 99,
   maxElement = jsx(BadgeCountOverflow, {}),
   // When you use max="none" (or max > 99) it might be a good idea to force ellipse
   // so that visually the interface do not suddently switch from circle to ellipse depending on the count
   ellipse,
+  max = ellipse ? Infinity : 99,
   ...props
 }) => {
   const defaultRef = useRef();
@@ -27660,26 +27670,32 @@ const BadgeCountCircle = ({
 };
 const BadgeCountEllipse = ({
   ref,
+  loading,
   children,
   hasOverflow,
   ...props
 }) => {
-  return jsxs(Text, {
+  return jsx(Text, {
     ref: ref,
     className: "navi_badge_count",
     bold: true,
     "data-ellipse": "",
     "data-value-overflow": hasOverflow ? "" : undefined,
+    "data-loading": loading ? "" : undefined,
     ...props,
     styleCSSVars: BadgeStyleCSSVars,
     spacing: "pre",
-    children: [jsx("span", {
-      style: "user-select: none",
-      children: "\u200B"
-    }), children, jsx("span", {
-      style: "user-select: none",
-      children: "\u200B"
-    })]
+    children: loading ? jsx(Icon, {
+      children: jsx(LoadingDots, {})
+    }) : jsxs(Fragment, {
+      children: [jsx("span", {
+        style: "user-select: none",
+        children: "\u200B"
+      }), children, jsx("span", {
+        style: "user-select: none",
+        children: "\u200B"
+      })]
+    })
   });
 };