@jsenv/navi 0.11.8 → 0.11.11

package/dist/jsenv_navi.js

@@ -9802,14 +9802,24 @@ const FlexDirectionContext = createContext();
  */
 const withPropsStyle = (
   props,
-  { base, layout, spacing = layout, align = layout, expansion = layout, typo },
+  {
+    base,
+    layout,
+    spacing = layout,
+    align = layout,
+    size = layout,
+    typo,
+    visual = true,
+  },
   ...remainingConfig
 ) => {
   const flexDirection = useContext(FlexDirectionContext);
   const {
     // style from props
     style,
+
     // layout props
+    // layout/spacing
     margin,
     marginX,
     marginY,
@@ -9824,11 +9834,16 @@ const withPropsStyle = (
     paddingRight,
     paddingTop,
     paddingBottom,
+    // layout/alignment
     alignX,
     alignY,
+    // layout/size
     expand,
     expandX = expand,
     expandY = expand,
+    width,
+    height,
+
     // typo props
     textSize,
     textBold,
@@ -9838,18 +9853,44 @@ const withPropsStyle = (
     textUnderlineStyle,
     textUnderlineColor,
     textColor,
+    textShadow,
+
+    // visual props
+    boxShadow,
+    background,
+    backgroundColor,
+    backgroundImage,
+    border,
+    borderWidth,
+    borderRadius,
+    borderColor,
+    borderStyle,
+    borderTop,
+    borderLeft,
+    borderRight,
+    borderBottom,
+    opacity,
+    filter,
+
     // props not related to styling
     ...remainingProps
   } = props;
 
   const hasRemainingConfig = remainingConfig.length > 0;
+  let propStyles;
   let marginStyles;
   let paddingStyles;
   let alignmentStyles;
-  let expansionStyles;
+  let sizeStyles;
   let typoStyles;
-  let propStyles;
+  let visualStyles;
 
+  props_styles: {
+    if (!style && !hasRemainingConfig) {
+      break props_styles;
+    }
+    propStyles = style ? normalizeStyles(style, "css") : {};
+  }
   spacing_styles: {
     if (!spacing && !hasRemainingConfig) {
       break spacing_styles;
@@ -9978,28 +10019,32 @@ const withPropsStyle = (
       }
     }
   }
-  expansion_styles: {
-    if (!expansion && !hasRemainingConfig) {
-      break expansion_styles;
+  size_styles: {
+    if (!size && !hasRemainingConfig) {
+      break size_styles;
     }
-    expansionStyles = {};
+    sizeStyles = {};
     if (expandX) {
       if (flexDirection === "row") {
-        expansionStyles.flexGrow = 1; // Grow horizontally in row
+        sizeStyles.flexGrow = 1; // Grow horizontally in row
       } else if (flexDirection === "column") {
-        expansionStyles.width = "100%"; // Take full width in column
+        sizeStyles.width = "100%"; // Take full width in column
       } else {
-        expansionStyles.width = "100%"; // Take full width outside flex
+        sizeStyles.width = "100%"; // Take full width outside flex
       }
+    } else if (width !== undefined) {
+      sizeStyles.width = width;
     }
     if (expandY) {
       if (flexDirection === "row") {
-        expansionStyles.height = "100%"; // Take full height in row
+        sizeStyles.height = "100%"; // Take full height in row
       } else if (flexDirection === "column") {
-        expansionStyles.flexGrow = 1; // Grow vertically in column
+        sizeStyles.flexGrow = 1; // Grow vertically in column
       } else {
-        expansionStyles.height = "100%"; // Take full height outside flex
+        sizeStyles.height = "100%"; // Take full height outside flex
       }
+    } else if (height !== undefined) {
+      sizeStyles.height = height;
     }
   }
   typo_styles: {
@@ -10038,13 +10083,62 @@ const withPropsStyle = (
     if (textUnderlineColor) {
       typoStyles.textDecorationColor = textUnderlineColor;
     }
+    if (textShadow) {
+      typoStyles.textShadow = textShadow;
+    }
     typoStyles.color = textColor;
   }
-  props_styles: {
-    if (!style && !hasRemainingConfig) {
-      break props_styles;
+  visual_styles: {
+    if (!visual && !hasRemainingConfig) {
+      break visual_styles;
+    }
+    visualStyles = {};
+    if (boxShadow !== undefined) {
+      visualStyles.boxShadow = boxShadow;
+    }
+    if (background !== undefined) {
+      visualStyles.background = background;
+    }
+    if (backgroundColor !== undefined) {
+      visualStyles.backgroundColor = backgroundColor;
+    }
+    if (backgroundImage !== undefined) {
+      visualStyles.backgroundImage = backgroundImage;
+    }
+    if (border !== undefined) {
+      visualStyles.border = border;
+    }
+    if (borderTop !== undefined) {
+      visualStyles.borderTop = borderTop;
+    }
+    if (borderLeft !== undefined) {
+      visualStyles.borderLeft = borderLeft;
+    }
+    if (borderRight !== undefined) {
+      visualStyles.borderRight = borderRight;
+    }
+    if (borderBottom !== undefined) {
+      visualStyles.borderBottom = borderBottom;
+    }
+    if (borderWidth !== undefined) {
+      visualStyles.borderWidth = sizeSpacingScale[borderWidth] || borderWidth;
+    }
+    if (borderRadius !== undefined) {
+      visualStyles.borderRadius =
+        sizeSpacingScale[borderRadius] || borderRadius;
+    }
+    if (borderColor !== undefined) {
+      visualStyles.borderColor = borderColor;
+    }
+    if (borderStyle !== undefined) {
+      visualStyles.borderStyle = borderStyle;
+    }
+    if (opacity !== undefined) {
+      visualStyles.opacity = opacity;
+    }
+    if (filter !== undefined) {
+      visualStyles.filter = filter;
     }
-    propStyles = style ? normalizeStyles(style, "css") : {};
   }
 
   const firstConfigStyle = {};
@@ -10057,12 +10151,15 @@ const withPropsStyle = (
   if (align) {
     Object.assign(firstConfigStyle, alignmentStyles);
   }
-  if (expansion) {
-    Object.assign(firstConfigStyle, expansionStyles);
+  if (size) {
+    Object.assign(firstConfigStyle, sizeStyles);
   }
   if (typo) {
     Object.assign(firstConfigStyle, typoStyles);
   }
+  if (visual) {
+    Object.assign(firstConfigStyle, visualStyles);
+  }
   if (style) {
     appendStyles(firstConfigStyle, propStyles, "css");
   }
@@ -10081,12 +10178,15 @@ const withPropsStyle = (
     if (config.align || config.layout) {
       Object.assign(configStyle, alignmentStyles);
     }
-    if (config.expansion || config.layout) {
-      Object.assign(configStyle, expansionStyles);
+    if (config.size || config.layout) {
+      Object.assign(configStyle, sizeStyles);
     }
     if (config.typo) {
       Object.assign(configStyle, typoStyles);
     }
+    if (config.visual || config.visual === undefined) {
+      Object.assign(configStyle, visualStyles);
+    }
     if (config.style) {
       appendStyles(configStyle, propStyles, "css");
     }
@@ -13758,7 +13858,8 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
       );
 
       --color: currentColor;
-      --color-readonly: color-mix(in srgb, currentColor 60%, transparent);
+      --color-dimmed: color-mix(in srgb, currentColor 60%, transparent);
+      --color-readonly: var(--color-dimmed);
       --color-disabled: var(--color-readonly);
 
       width: 100%;
@@ -13775,6 +13876,15 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
       outline-color: var(--border-color);
       outline-offset: calc(-1 * (var(--border-width)));
     }
+    .navi_input::placeholder {
+      color: var(--color-dimmed);
+    }
+    .navi_input:-internal-autofill-selected {
+      /* Webkit is putting some nasty styles after automplete that look as follow */
+      /* input:-internal-autofill-selected { color: FieldText !important; } */
+      /* Fortunately we can override it as follow */
+      -webkit-text-fill-color: var(--color) !important;
+    }
     /* Focus */
     .navi_input[data-focus] {
       border-color: var(--outline-color);
@@ -13784,16 +13894,13 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
     }
     /* Readonly */
     .navi_input[data-readonly] {
-      color: var(--color-readonly);
+      --color: var(--color-readonly);
       background-color: var(--background-color-readonly);
       outline-color: var(--border-color-readonly);
     }
-    .navi_input[data-readonly]::placeholder {
-      color: var(--color-readonly);
-    }
     /* Disabled */
     .navi_input[data-disabled] {
-      color: var(--color-disabled);
+      --color: var(--color-disabled);
       background-color: var(--background-color-disabled);
       outline-color: var(--border-color-disabled);
     }
@@ -19205,8 +19312,8 @@ const Title = ({
   as = "h1",
   ...rest
 }) => {
-  if (rest.bold === undefined) {
-    rest.bold = true;
+  if (rest.textBold === undefined) {
+    rest.textBold = true;
   }
   const [remainingProps, innerStyle] = withPropsStyle(rest, {
     layout: true,
@@ -19238,25 +19345,27 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
   }
 `;
 const FlexRow = ({
+  className,
   alignX,
   alignY,
   gap,
   children,
   ...rest
 }) => {
+  const innerClassName = withPropsClassName("navi_flex_row", className);
   const [remainingProps, innerStyle] = withPropsStyle(rest, {
     base: {
       // Only set justifyContent if it's not the default "start"
       justifyContent: alignX !== "start" ? alignX : undefined,
       // Only set alignItems if it's not the default "stretch"
       alignItems: alignY !== "stretch" ? alignY : undefined,
-      gap
+      gap: sizeSpacingScale[gap] || gap
     },
     layout: true
   });
   return jsx("div", {
     ...remainingProps,
-    className: "navi_flex_row",
+    className: innerClassName,
     style: innerStyle,
     children: jsx(FlexDirectionContext.Provider, {
       value: "row",
@@ -19265,12 +19374,14 @@ const FlexRow = ({
   });
 };
 const FlexColumn = ({
+  className,
   alignX,
   alignY,
   gap,
   children,
   ...rest
 }) => {
+  const innerClassName = withPropsClassName("navi_flex_column", className);
   const [remainingProps, innerStyle] = withPropsStyle(rest, {
     base: {
       // Only set alignItems if it's not the default "stretch"
@@ -19278,11 +19389,12 @@ const FlexColumn = ({
       // Only set justifyContent if it's not the default "start"
       justifyContent: alignY !== "start" ? alignY : undefined,
       gap: sizeSpacingScale[gap] || gap
-    }
+    },
+    layout: true
   });
   return jsx("div", {
     ...remainingProps,
-    className: "navi_flex_column",
+    className: innerClassName,
     style: innerStyle,
     children: jsx(FlexDirectionContext.Provider, {
       value: "column",
@@ -19322,7 +19434,8 @@ const Spacing = ({
   ...rest
 }) => {
   const [remainingProps, innerStyle] = withPropsStyle(rest, {
-    spacing: true
+    spacing: true,
+    visual: true
   });
   return jsx("div", {
     ...remainingProps,