@jsenv/navi 0.20.2 → 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 {
@@ -19320,18 +19321,18 @@ 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 {
+  .navi_icon[data-width-fixed][data-height-fixed] > svg,
+  .navi_icon[data-width-fixed][data-height-fixed] > img {
     width: 100%;
     height: 100%;
   }
@@ -19379,6 +19380,8 @@ const Icon = ({
   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,
@@ -19394,8 +19397,8 @@ const Icon = ({
       ...ariaProps,
       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
@@ -19408,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", {