@jsenv/navi 0.11.9 → 0.11.12

package/dist/jsenv_navi.js

@@ -1,5 +1,5 @@
 import { installImportMetaCss } from "./jsenv_navi_side_effects.js";
-import { createIterableWeakSet, createPubSub, createValueEffect, createStyleController, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, allowWheelThrough, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, activeElementSignal, canInterceptKeys, initUITransition, getElementSignature, resolveCSSSize, normalizeStyles, appendStyles, findBefore, findAfter, initFocusGroup, elementIsFocusable, pickLightOrDark, dragAfterThreshold, getScrollContainer, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement } from "@jsenv/dom";
+import { createIterableWeakSet, createPubSub, createValueEffect, createStyleController, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, allowWheelThrough, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, activeElementSignal, canInterceptKeys, initUITransition, getElementSignature, resolveCSSSize, normalizeStyles, normalizeStyle, appendStyles, findBefore, findAfter, initFocusGroup, elementIsFocusable, pickLightOrDark, dragAfterThreshold, getScrollContainer, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement } from "@jsenv/dom";
 import { prefixFirstAndIndentRemainingLines } from "@jsenv/humanize";
 import { effect, signal, computed, batch, useSignal } from "@preact/signals";
 import { useEffect, useRef, useCallback, useContext, useState, useLayoutEffect, useMemo, useImperativeHandle, useErrorBoundary, useId } from "preact/hooks";
@@ -9921,6 +9921,7 @@ const withPropsStyle = (
       } else if (marginY !== undefined) {
         marginStyles.marginBottom = sizeSpacingScale[marginY] || marginY;
       }
+      normalizeStyles(marginStyles, "css", true);
     }
     {
       paddingStyles = {};
@@ -9950,6 +9951,7 @@ const withPropsStyle = (
       } else if (paddingY !== undefined) {
         paddingStyles.paddingBottom = sizeSpacingScale[paddingY] || paddingY;
       }
+      normalizeStyles(paddingStyles, "css", true);
     }
   }
   alignment_styles: {
@@ -10033,7 +10035,7 @@ const withPropsStyle = (
         sizeStyles.width = "100%"; // Take full width outside flex
       }
     } else if (width !== undefined) {
-      sizeStyles.width = width;
+      sizeStyles.width = normalizeStyle(width, "width", "css");
     }
     if (expandY) {
       if (flexDirection === "row") {
@@ -10044,7 +10046,7 @@ const withPropsStyle = (
         sizeStyles.height = "100%"; // Take full height outside flex
       }
     } else if (height !== undefined) {
-      sizeStyles.height = height;
+      sizeStyles.height = normalizeStyle(height, "height", "css");
     }
   }
   typo_styles: {
@@ -10058,7 +10060,7 @@ const withPropsStyle = (
         typeof textSize === "string"
           ? sizeTypoScale[textSize] || textSize
           : textSize;
-      typoStyles.fontSize = fontSize;
+      typoStyles.fontSize = normalizeStyle(fontSize, "fontSize", "css");
     }
     if (textBold) {
       typoStyles.fontWeight = "bold";
@@ -10121,10 +10123,18 @@ const withPropsStyle = (
       visualStyles.borderBottom = borderBottom;
     }
     if (borderWidth !== undefined) {
-      visualStyles.borderWidth = borderWidth;
+      visualStyles.borderWidth = normalizeStyle(
+        sizeSpacingScale[borderWidth] || borderWidth,
+        "borderWidth",
+        "css",
+      );
     }
     if (borderRadius !== undefined) {
-      visualStyles.borderRadius = borderRadius;
+      visualStyles.borderRadius = normalizeStyle(
+        sizeSpacingScale[borderRadius] || borderRadius,
+        "borderRadius",
+        "css",
+      );
     }
     if (borderColor !== undefined) {
       visualStyles.borderColor = borderColor;
@@ -13857,7 +13867,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%;
@@ -13874,6 +13885,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);
@@ -13883,16 +13903,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);
     }
@@ -19231,6 +19248,16 @@ const SVGMaskOverlay = ({
   });
 };
 
+const Image = props => {
+  const [remainingProps, innerStyle] = withPropsStyle(props, {
+    spacing: true
+  });
+  return jsx("img", {
+    style: innerStyle,
+    ...remainingProps
+  });
+};
+
 const Overflow = ({
   className,
   children,
@@ -19304,8 +19331,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,
@@ -19337,12 +19364,14 @@ 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"
@@ -19355,7 +19384,7 @@ const FlexRow = ({
   });
   return jsx("div", {
     ...remainingProps,
-    className: "navi_flex_row",
+    className: innerClassName,
     style: innerStyle,
     children: jsx(FlexDirectionContext.Provider, {
       value: "row",
@@ -19364,12 +19393,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"
@@ -19377,11 +19408,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",
@@ -19421,7 +19453,8 @@ const Spacing = ({
   ...rest
 }) => {
   const [remainingProps, innerStyle] = withPropsStyle(rest, {
-    spacing: true
+    spacing: true,
+    visual: true
   });
   return jsx("div", {
     ...remainingProps,
@@ -19507,5 +19540,5 @@ const useDependenciesDiff = (inputs) => {
   return diffRef.current;
 };
 
-export { ActionRenderer, ActiveKeyboardShortcuts, Button, Checkbox, CheckboxList, Col, Colgroup, Details, Editable, ErrorBoundaryContext, FlexColumn, FlexItem, FlexRow, FontSizedSvg, Form, Icon, IconAndText, Input, Label, Link, LinkWithIcon, Overflow, Paragraph, Radio, RadioList, Route, RouteLink, Routes, RowNumberCol, RowNumberTableCell, SINGLE_SPACE_CONSTRAINT, SVGMaskOverlay, Select, SelectionContext, Spacing, SummaryMarker, Tab, TabList, Table, TableCell, Tbody, Text, TextAndCount, Thead, Title, Tr, UITransition, actionIntegratedVia, addCustomMessage, createAction, createSelectionKeyboardShortcuts, createUniqueValueConstraint, enableDebugActions, enableDebugOnDocumentLoading, forwardActionRequested, goBack, goForward, goTo, installCustomConstraintValidation, isCellSelected, isColumnSelected, isRowSelected, openCallout, rawUrlPart, reload, removeCustomMessage, rerunActions, resource, setBaseUrl, setupRoutes, stopLoad, stringifyTableSelectionValue, updateActions, useActionData, useActionStatus, useCellsAndColumns, useDependenciesDiff, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useKeyboardShortcuts, useNavState, useRouteStatus, useRunOnMount, useSelectableElement, useSelectionController, useSignalSync, useStateArray, valueInLocalStorage };
+export { ActionRenderer, ActiveKeyboardShortcuts, Button, Checkbox, CheckboxList, Col, Colgroup, Details, Editable, ErrorBoundaryContext, FlexColumn, FlexItem, FlexRow, FontSizedSvg, Form, Icon, IconAndText, Image, Input, Label, Link, LinkWithIcon, Overflow, Paragraph, Radio, RadioList, Route, RouteLink, Routes, RowNumberCol, RowNumberTableCell, SINGLE_SPACE_CONSTRAINT, SVGMaskOverlay, Select, SelectionContext, Spacing, SummaryMarker, Tab, TabList, Table, TableCell, Tbody, Text, TextAndCount, Thead, Title, Tr, UITransition, actionIntegratedVia, addCustomMessage, createAction, createSelectionKeyboardShortcuts, createUniqueValueConstraint, enableDebugActions, enableDebugOnDocumentLoading, forwardActionRequested, goBack, goForward, goTo, installCustomConstraintValidation, isCellSelected, isColumnSelected, isRowSelected, openCallout, rawUrlPart, reload, removeCustomMessage, rerunActions, resource, setBaseUrl, setupRoutes, stopLoad, stringifyTableSelectionValue, updateActions, useActionData, useActionStatus, useCellsAndColumns, useDependenciesDiff, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useKeyboardShortcuts, useNavState, useRouteStatus, useRunOnMount, useSelectableElement, useSelectionController, useSignalSync, useStateArray, valueInLocalStorage };
 //# sourceMappingURL=jsenv_navi.js.map