@jsenv/navi 0.26.13 → 0.26.15

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, {
@@ -24971,9 +24986,13 @@ installImportMetaCssBuild(import.meta);const css$p = /* css */`
 
     /* Toggle appearance */
     &[data-appearance="toggle"] {
+      --toggle-outer-width: calc(
+        var(--toggle-width) + var(--toggle-padding) * 2
+      );
       --margin: var(--toggle-margin);
-      --width: var(--toggle-width);
+      --width: var(--toggle-outer-width);
       --height: unset;
+      min-width: var(--toggle-outer-width);
       --border-radius: var(--toggle-border-radius);
       --background-color: var(--toggle-background-color);
       --background-color-hover: var(--toggle-background-color-hover);
@@ -24991,6 +25010,7 @@ installImportMetaCssBuild(import.meta);const css$p = /* css */`
       );
 
       position: relative;
+      padding: var(--toggle-padding);
       background-color: var(--x-background-color);
       border-color: transparent;
       user-select: none;
@@ -25007,16 +25027,8 @@ installImportMetaCssBuild(import.meta);const css$p = /* css */`
 
       &[data-checked] {
         .navi_checkbox_toggle {
-          /* We remove padding 3 times */
-          /* - twice to get real width (box-sizing: border-box) */
-          /* - one more to apply right padding to the translation */
           transform: translateX(
-            calc(
-              var(--toggle-width) - var(--toggle-thumb-size) - var(
-                  --toggle-padding
-                ) *
-                3
-            )
+            calc(var(--toggle-width) - var(--toggle-thumb-size))
           );
         }
       }