@jsenv/navi 0.26.13 → 0.26.14

package/dist/jsenv_navi.js

@@ -8199,6 +8199,19 @@ installImportMetaCssBuild(import.meta);/**
  *    style can only be determined once the node is available.
  */
 import.meta.css = [/* css */`
+  @layer navi {
+    /*
+    When using square/circle/aspectRatio prop we expect box to respect the aspect ratio.
+    But within flex containers or stuff like that the min-width/min-height auto
+    will prevent the item from shrinking to respect aspect-ratio
+    We put that in a layer navi + a specific attribute so that it's very easy to override this
+    */
+    [navi-aspect-ratio] {
+      min-width: 0;
+      min-height: 0;
+    }
+  }
+
   [navi-box-flow="inline"] {
     display: inline;
   }
@@ -8694,12 +8707,14 @@ const Box = props => {
     // Flatten nested arrays (e.g., from .map()) to treat each element as individual child
     innerChildren = applySeparatorOnChildren(innerChildren, separator);
   }
+  const aspectRatio = rest.square || rest.circle ? "1/1" : rest.aspectRatio;
   return jsx(TagName, {
     ref: ref,
     className: innerClassName,
     "navi-box-flow": boxFlowIsDefault ? undefined : boxFlow,
     "navi-box-flow-row": row ? "" : undefined,
     "navi-box-flow-column": column ? "" : undefined,
+    "navi-aspect-ratio": aspectRatio ? aspectRatio : undefined,
     "data-visual-selector": visualSelector,
     ...selfForwardedProps,
     children: jsx(BoxFlowContext.Provider, {