@jsenv/navi 0.20.1 → 0.20.3

package/dist/jsenv_navi.js

@@ -6288,6 +6288,7 @@ const DIMENSION_PROPS = {
       borderRadius: "100%",
     };
   },
+  aspectRatio: PASS_THROUGH,
   expand: applyOnTwoProps("expandX", "expandY"),
   shrink: applyOnTwoProps("shrinkX", "shrinkY"),
   // apply after width/height to override if both are set
@@ -19141,7 +19142,7 @@ const TextOverflow = ({
 }) => {
   const [OverflowPinnedElement, setOverflowPinnedElement] = useState(null);
   return jsx(Text, {
-    column: true,
+    flex: true,
     as: "div",
     nowWrap: noWrap,
     pre: !noWrap
@@ -19213,7 +19214,7 @@ const TextBasic = ({
     ...rest,
     "baseClassName": withPropsClassName("navi_text", rest.baseClassName)
   };
-  const shouldPreserveSpacing = rest.as === "pre" || rest.box || rest.column || rest.row;
+  const shouldPreserveSpacing = rest.as === "pre" || rest.flex || rest.grid;
   if (shouldPreserveSpacing) {
     boxProps.spacing = spacing;
   } else {
@@ -19278,11 +19279,19 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
     }
     &[data-icon-char] {
       flex-grow: 0 !important;
-    }
-  }
 
-  .navi_icon[data-interactive] {
-    cursor: pointer;
+      svg,
+      img {
+        width: 100%;
+        height: 100%;
+      }
+      svg {
+        overflow: visible;
+      }
+    }
+    &[data-interactive] {
+      cursor: pointer;
+    }
   }
 
   .navi_icon_char_slot {
@@ -19294,15 +19303,16 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
     position: absolute;
     inset: 0;
     display: inline-flex;
-  }
-  .navi_icon_foreground > .navi_text {
-    display: flex;
-    aspect-ratio: 1 / 1;
-    min-width: 0;
-    height: 100%;
-    max-height: 1em;
-    align-items: center;
-    justify-content: center;
+
+    & > .navi_text {
+      display: flex;
+      aspect-ratio: 1 / 1;
+      min-width: 0;
+      height: 100%;
+      max-height: 1em;
+      align-items: center;
+      justify-content: center;
+    }
   }
 
   .navi_icon > svg,
@@ -19311,30 +19321,21 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
     height: 100%;
     backface-visibility: hidden;
   }
-  .navi_icon[data-has-width] > svg,
-  .navi_icon[data-has-width] > img {
+  .navi_icon[data-width-fixed] > svg,
+  .navi_icon[data-width-fixed] > img {
     width: 100%;
     height: auto;
   }
-  .navi_icon[data-has-height] > svg,
-  .navi_icon[data-has-height] > img {
+  .navi_icon[data-height-fixed] > svg,
+  .navi_icon[data-height-fixed] > img {
     width: auto;
     height: 100%;
   }
-  .navi_icon[data-has-width][data-has-height] > svg,
-  .navi_icon[data-has-width][data-has-height] > img {
-    width: 100%;
-    height: 100%;
-  }
-
-  .navi_icon[data-icon-char] svg,
-  .navi_icon[data-icon-char] img {
+  .navi_icon[data-width-fixed][data-height-fixed] > svg,
+  .navi_icon[data-width-fixed][data-height-fixed] > img {
     width: 100%;
     height: 100%;
   }
-  .navi_icon[data-icon-char] svg {
-    overflow: visible;
-  }
 `;
 const Icon = ({
   href,
@@ -19356,24 +19357,31 @@ const Icon = ({
     })
   }) : children;
   let {
-    box,
+    flex,
+    grid,
     width,
     height
   } = props;
-  if (width === "auto") width = undefined;
-  if (height === "auto") height = undefined;
+  if (width === "auto") {
+    width = undefined;
+  }
+  if (height === "auto") {
+    height = undefined;
+  }
   const hasExplicitWidth = width !== undefined;
   const hasExplicitHeight = height !== undefined;
-  if (!hasExplicitWidth && !hasExplicitHeight) {
-    if (decorative === undefined && !onClick) {
-      decorative = true;
+  if (hasExplicitWidth || hasExplicitHeight) {
+    if (flex === undefined) {
+      flex = "x";
     }
-  } else {
-    box = true;
+  } else if (decorative === undefined && !onClick) {
+    decorative = true;
   }
   const ariaProps = decorative ? {
     "aria-hidden": "true"
   } : {};
+  const widthConstrained = hasExplicitWidth || hasExplicitHeight && (props.square || props.circle || props.aspectRatio);
+  const heightConstrained = hasExplicitHeight || hasExplicitWidth && (props.square || props.circle || props.aspectRatio);
   if (typeof children === "string") {
     return jsx(Text, {
       ...props,
@@ -19382,15 +19390,15 @@ const Icon = ({
       children: children
     });
   }
-  if (box) {
+  if (flex || grid) {
     return jsx(Box, {
       square: true,
       ...props,
       ...ariaProps,
-      box: box,
+      flex: flex,
       baseClassName: "navi_icon",
-      "data-has-width": hasExplicitWidth ? "" : undefined,
-      "data-has-height": hasExplicitHeight ? "" : undefined,
+      "data-width-fixed": widthConstrained ? "" : undefined,
+      "data-height-fixed": heightConstrained ? "" : undefined,
       "data-interactive": onClick ? "" : undefined,
       onClick: onClick,
       children: innerChildren
@@ -19403,8 +19411,8 @@ const Icon = ({
     className: withPropsClassName("navi_icon", props.className),
     spacing: "pre",
     "data-icon-char": "",
-    "data-has-width": hasExplicitWidth ? "" : undefined,
-    "data-has-height": hasExplicitHeight ? "" : undefined,
+    "data-width-fixed": widthConstrained ? "" : undefined,
+    "data-height-fixed": heightConstrained ? "" : undefined,
     "data-interactive": onClick ? "" : undefined,
     onClick: onClick,
     children: [jsx("span", {
@@ -31570,7 +31578,7 @@ const DialogLayout = ({
     visualSelector: ".navi_dialog_content",
     ...props,
     children: jsx(Box, {
-      row: true,
+      flex: "y",
       className: "navi_dialog_content",
       alignX: alignX,
       alignY: alignY,