@jsenv/navi 0.20.17 → 0.20.19

package/dist/jsenv_navi.js

@@ -6302,6 +6302,9 @@ const DIMENSION_PROPS = {
       boxFlow === "flex-x" || boxFlow === "inline-flex-x";
     if (selfHorizontalFlexFlow || inHorizontalFlexFlow) {
       if (!inHorizontalFlexFlow) {
+        if (parentBoxFlow === "flex-y" || parentBoxFlow === "inline-flex-y") {
+          return { minWidth: "100%", width: "auto" };
+        }
         return {
           flexGrow: 1,
           flexBasis: "0%",
@@ -6326,6 +6329,9 @@ const DIMENSION_PROPS = {
       boxFlow === "flex-y" || boxFlow === "inline-flex-y";
     if (selfVerticalFlexFlow || inVerticalFlexFlow) {
       if (!inVerticalFlexFlow) {
+        if (parentBoxFlow === "flex-x" || parentBoxFlow === "inline-flex-x") {
+          return { minHeight: "100%", height: "auto" };
+        }
         return {
           flexGrow: 1,
           flexBasis: "0%",
@@ -18784,7 +18790,7 @@ const selectByTextStrings = (element, range, startText, endText) => {
 };
 
 installImportMetaCssBuild(import.meta);/* eslint-disable jsenv/no-unknown-params */
-import.meta.css = [/* css */`
+const css$3 = /* css */`
   *[data-navi-space] {
     /* user-select: none; */
     padding-left: 0.25em;
@@ -18792,7 +18798,6 @@ import.meta.css = [/* css */`
 
   .navi_text {
     position: relative;
-    color: inherit;
 
     &[data-has-absolute-child] {
       display: inline-block;
@@ -18893,7 +18898,7 @@ import.meta.css = [/* css */`
       transition-timing-function: ease;
     }
   }
-`, "@jsenv/navi/src/text/text.jsx"];
+`;
 
 // We could use <span data-navi-space=""> </span>
 // but we prefer to use zero width space as it has the nice side effects of
@@ -18956,10 +18961,7 @@ const applySpacingOnTextChildren = (children, spacing = REGULAR_SPACE) => {
     }
     const currentChild = childArray[i - 1];
     const nextChild = childArray[i];
-    if (!shouldInjectSpacingAfter(currentChild)) {
-      continue;
-    }
-    if (!shouldInjectSpacingBefore(nextChild)) {
+    if (!shouldInjectSpacingBetween(currentChild, nextChild)) {
       continue;
     }
     childrenWithGap.push(separator);
@@ -18973,35 +18975,36 @@ const markAsOutsideTextFlow = jsxElement => {
 const isMarkedAsOutsideTextFlow = jsxElement => {
   return outsideTextFlowSet.has(jsxElement.type);
 };
-const shouldInjectSpacingAfter = jsxChild => {
-  if (typeof jsxChild === "string") {
-    if (/\s$/.test(jsxChild)) {
-      return false;
-    }
+const isPreactNode = jsxChild => {
+  return jsxChild !== null && typeof jsxChild === "object" && jsxChild.type !== undefined;
+};
+const shouldInjectSpacingBetween = (left, right) => {
+  const leftIsNode = isPreactNode(left);
+  const rightIsNode = isPreactNode(right);
+  // only inject spacing when at least one side is a preact node
+  if (!leftIsNode && !rightIsNode) {
+    return false;
   }
-  if (isMarkedAsOutsideTextFlow(jsxChild)) {
-    // we can mark jsx element as "outsideFlow" to avoid spacing injection between it and surrounding text
+  if (leftIsNode && isMarkedAsOutsideTextFlow(left)) {
     return false;
   }
-  return true;
-};
-const shouldInjectSpacingBefore = jsxChild => {
-  if (typeof jsxChild === "string") {
-    if (/^\s/.test(jsxChild)) {
-      return false;
-    }
+  if (rightIsNode && isMarkedAsOutsideTextFlow(right)) {
+    return false;
   }
-  if (isMarkedAsOutsideTextFlow(jsxChild)) {
-    // we can mark jsx element as "outsideFlow" to avoid spacing injection between it and surrounding text
+  if (rightIsNode && right.props && right.props.overflowPinned) {
     return false;
   }
-  if (jsxChild && jsxChild.props && jsxChild.props.overflowPinned) {
+  if (typeof left === "string" && /\s$/.test(left)) {
+    return false;
+  }
+  if (typeof right === "string" && /^\s/.test(right)) {
     return false;
   }
   return true;
 };
 const OverflowPinnedElementContext = createContext(null);
 const Text = props => {
+  import.meta.css = [css$3, "@jsenv/navi/src/text/text.jsx"];
   const {
     overflowEllipsis,
     ...rest
@@ -19159,7 +19162,7 @@ const TextBasic = ({
   });
 };
 
-installImportMetaCssBuild(import.meta);import.meta.css = [/* css */`
+installImportMetaCssBuild(import.meta);const css$2 = /* css */`
   @layer navi {
     /* Ensure data attributes from box.jsx can win to update display */
     .navi_icon {
@@ -19197,7 +19200,7 @@ installImportMetaCssBuild(import.meta);import.meta.css = [/* css */`
     cursor: default;
     user-select: none;
   }
-  .navi_icon_foreground {
+  .navi_text.navi_icon_foreground {
     position: absolute;
     inset: 0;
     display: inline-flex;
@@ -19234,7 +19237,7 @@ installImportMetaCssBuild(import.meta);import.meta.css = [/* css */`
     width: 100%;
     height: 100%;
   }
-`, "@jsenv/navi/src/graphic/icon.jsx"];
+`;
 const Icon = ({
   href,
   children,
@@ -19247,6 +19250,7 @@ const Icon = ({
   onClick,
   ...props
 }) => {
+  import.meta.css = [css$2, "@jsenv/navi/src/graphic/icon.jsx"];
   const innerChildren = href ? jsx("svg", {
     width: "100%",
     height: "100%",
@@ -30093,7 +30097,7 @@ const Address = ({
   });
 };
 
-installImportMetaCssBuild(import.meta);import.meta.css = [/* css */`
+installImportMetaCssBuild(import.meta);const css$1 = /* css */`
   @layer navi {
   }
   .navi_badge {
@@ -30121,7 +30125,7 @@ installImportMetaCssBuild(import.meta);import.meta.css = [/* css */`
       --x-color-contrasting: var(--navi-color-white);
     }
   }
-`, "@jsenv/navi/src/text/badge.jsx"];
+`;
 const BadgeStyleCSSVars$1 = {
   borderWidth: "--border-width",
   borderRadius: "--border-radius",
@@ -30138,6 +30142,7 @@ const Badge = ({
   className,
   ...props
 }) => {
+  import.meta.css = [css$1, "@jsenv/navi/src/text/badge.jsx"];
   const defaultRef = useRef();
   const ref = props.ref || defaultRef;
   useDarkBackgroundAttribute(ref);
@@ -30216,10 +30221,10 @@ const formatNumber = (value, { lang } = {}) => {
   return new Intl.NumberFormat(lang).format(value);
 };
 
-installImportMetaCssBuild(import.meta);import.meta.css = [/* css */`
+installImportMetaCssBuild(import.meta);const css = /* css */`
   @layer navi {
   }
-  .navi_badge_count {
+  .navi_text.navi_badge_count {
     --font-size: 0.7em;
     --x-background: var(--background);
     --x-background-color: var(--background-color, var(--x-background));
@@ -30305,7 +30310,7 @@ installImportMetaCssBuild(import.meta);import.meta.css = [/* css */`
       }
     }
   }
-`, "@jsenv/navi/src/text/badge_count.jsx"];
+`;
 const BadgeStyleCSSVars = {
   borderWidth: "--border-width",
   borderRadius: "--border-radius",
@@ -30335,6 +30340,7 @@ const BadgeCount = ({
   loading,
   ...props
 }) => {
+  import.meta.css = [css, "@jsenv/navi/src/text/badge_count.jsx"];
   const defaultRef = useRef();
   const ref = props.ref || defaultRef;
   useDarkBackgroundAttribute(ref, [loading]);