@jsenv/navi 0.12.16 → 0.12.18

package/dist/jsenv_navi.js

@@ -10572,7 +10572,7 @@ const getStylePropGroup = (name) => {
 };
 const getNormalizer = (key) => {
   if (key === "borderRadius") {
-    return normalizeTypoStyle;
+    return normalizeSpacingStyle;
   }
   const group = getStylePropGroup(key);
   if (group === "margin" || group === "padding") {
@@ -11223,12 +11223,23 @@ const Box = props => {
   const defaultRef = useRef();
   const ref = props.ref || defaultRef;
   const TagName = as;
-  const {
+  let {
     box,
-    inline = box,
+    inline,
     row,
-    column = box
+    column
   } = rest;
+  if (box === "auto") {
+    box = Boolean(rest.contentAlignX || rest.contentAlignY);
+  }
+  if (box) {
+    if (inline === undefined) {
+      inline = true;
+    }
+    if (column === undefined) {
+      column = true;
+    }
+  }
   let layout;
   if (inline) {
     if (row) {
@@ -14033,6 +14044,7 @@ const LinkPlain = props => {
     innerIcon = icon;
   }
   return jsxs(Box, {
+    box: "auto",
     ...rest,
     ref: ref,
     as: "a",
@@ -16741,7 +16753,7 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
     --x-button-color: var(--button-color);
 
     position: relative;
-    display: inline-flex;
+    /* display: inline-flex; */
     box-sizing: border-box;
     padding: 0;
     background: none;
@@ -16866,6 +16878,10 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
   .navi_button[data-discrete][data-disabled] {
     --x-button-border-color: transparent;
   }
+
+  .navi_button > img {
+    border-radius: inherit;
+  }
 `;
 const Button = props => {
   return renderActionableComponent(props, {
@@ -16941,6 +16957,7 @@ const ButtonBasic = props => {
   };
   const renderButtonContentMemoized = useCallback(renderButtonContent, []);
   return jsxs(Box, {
+    box: "auto",
     ...rest,
     as: "button",
     ref: ref,
@@ -21543,6 +21560,8 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
     text-align: center;
     line-height: 1.5em;
     vertical-align: middle;
+    background: var(--background);
+    background-color: var(--background-color, var(--background));
     border-radius: var(--border-radius, 1em);
   }
 `;
@@ -21552,6 +21571,7 @@ const BadgeManagedByCSSVars = {
   paddingRight: "--padding-right",
   paddingLeft: "--padding-left",
   backgroundColor: "--background-color",
+  background: "--background",
   borderColor: "--border-color",
   color: "--color"
 };