@jsenv/navi 0.27.64 → 0.27.66

package/dist/jsenv_navi.js

@@ -6369,6 +6369,16 @@ const applyOnTwoCSSProps = (cssStyleA, cssStyleB) => {
     };
   };
 };
+const applyOnFourCSSProps = (cssStyleA, cssStyleB, cssStyleC, cssStyleD) => {
+  return (value) => {
+    return {
+      [cssStyleA]: value,
+      [cssStyleB]: value,
+      [cssStyleC]: value,
+      [cssStyleD]: value,
+    };
+  };
+};
 const applyToCssPropWhenTruthy = (
   cssProp,
   cssPropValue,
@@ -6420,7 +6430,16 @@ const LAYOUT_PROPS = {
   column: () => {},
 };
 const OUTER_PROPS = {
-  margin: PASS_THROUGH,
+  // expanded into longhands (not PASS_THROUGH) so the shorthand "margin" CSS
+  // property is never written to the DOM: setting element.style.margin resets
+  // all four margin-* longhands, which would silently wipe out an explicit
+  // marginLeft/marginRight/marginTop/marginBottom applied alongside it.
+  margin: applyOnFourCSSProps(
+    "marginTop",
+    "marginRight",
+    "marginBottom",
+    "marginLeft",
+  ),
   marginLeft: PASS_THROUGH,
   marginRight: PASS_THROUGH,
   marginTop: PASS_THROUGH,
@@ -6433,7 +6452,15 @@ const OUTER_PROPS = {
   viewTransitionName: PASS_THROUGH,
 };
 const INNER_PROPS = {
-  padding: PASS_THROUGH,
+  // expanded into longhands for the same reason as "margin" above: the
+  // shorthand would otherwise reset paddingLeft/Right/Top/Bottom when both
+  // are applied on the same element (e.g. padding="xs" paddingLeft="m").
+  padding: applyOnFourCSSProps(
+    "paddingTop",
+    "paddingRight",
+    "paddingBottom",
+    "paddingLeft",
+  ),
   paddingLeft: PASS_THROUGH,
   paddingRight: PASS_THROUGH,
   paddingTop: PASS_THROUGH,
@@ -6494,6 +6521,7 @@ const DIMENSION_PROPS = {
     if (parentBoxFlow === "flex-y" || parentBoxFlow === "inline-flex-y") {
       return {
         alignSelf: "stretch",
+        width: "100%",
       };
     }
     // Can't use flexGrow — parent is not flex-x
@@ -28703,7 +28731,6 @@ const ButtonStyleCSSVars = {
   "borderWidth": "--button-border-width",
   "borderRadius": "--button-border-radius",
   "border": "--button-border",
-  "padding": "--button-padding",
   "paddingX": "--button-padding-x",
   "paddingY": "--button-padding-y",
   "paddingTop": "--button-padding-top",
@@ -31473,24 +31500,15 @@ const FieldAsLabel = props => {
     children
   } = props;
   props.paddingWithControl = resolveSpacingSize(props.paddingWithControl, "s");
-  const [messageProps, remainingProps] = extractMessageAndRemainingProps(props);
-  const messagePropsRef = useRef();
-  messagePropsRef.current = messageProps;
   return jsx(Label, {
     "navi-field": "",
     styleCSSVars: FieldCSSVars,
     flex: vertical ? "y" : undefined,
     alignX: vertical ? "start" : undefined,
     "data-vertical": vertical ? "" : undefined,
-    ...remainingProps,
+    ...props,
     vertical: undefined,
-    children: jsx(MessagePropsRefContext.Provider, {
-      value: messagePropsRef,
-      children: jsx(ControlIdContext.Provider, {
-        value: props.htmlFor,
-        children: children
-      })
-    })
+    children: children
   });
 };
 const FieldCSSVars = {
@@ -31530,8 +31548,7 @@ const FIELD_PSEUDO_CLASSES = [":hover", ":active", ":focus", ":focus-visible", "
 const Label = props => {
   import.meta.css = [css$A, "@jsenv/navi/src/control/field.jsx"];
   const {
-    children,
-    ...rest
+    children
   } = props;
   const controlId = useContext(ControlIdContext);
   const [disabled, setDisabled] = useState(false);
@@ -31539,6 +31556,9 @@ const Label = props => {
   const [connected, setConnected] = useState(false);
   const defaultId = useId();
   const htmlFor = props.htmlFor || controlId || `label_auto_${defaultId}`;
+  const [messageProps, remainingProps] = extractMessageAndRemainingProps(props);
+  const messagePropsRef = useRef();
+  messagePropsRef.current = messageProps;
   return jsx(Box, {
     as: "label",
     htmlFor: htmlFor,
@@ -31549,7 +31569,7 @@ const Label = props => {
       ":disabled": disabled,
       ":read-only": readOnly
     },
-    ...rest,
+    ...remainingProps,
     onnavi_control_state: e => {
       setConnected(true);
       setDisabled(e.detail.disabled);
@@ -31560,9 +31580,12 @@ const Label = props => {
       setDisabled(false);
       setReadOnly(false);
     },
-    children: jsx(ControlIdContext.Provider, {
-      value: htmlFor,
-      children: children
+    children: jsx(MessagePropsRefContext.Provider, {
+      value: messagePropsRef,
+      children: jsx(ControlIdContext.Provider, {
+        value: htmlFor,
+        children: children
+      })
     })
   });
 };
@@ -40920,6 +40943,7 @@ const PickerButton = props => {
     ref,
     variant,
     icon,
+    iconSize = "m",
     placeholder,
     ui,
     maxLines = 1
@@ -40953,6 +40977,7 @@ const PickerButton = props => {
     styleCSSVars: PickerStyleCSSVars,
     variant: undefined,
     icon: undefined,
+    iconSize: undefined,
     ui: undefined,
     maxLines: undefined,
     dayLabel: undefined
@@ -41064,7 +41089,7 @@ const PickerButton = props => {
     }), variant === "headless" || ui === "default" ? null : jsx("span", {
       className: "navi_picker_right_slot",
       children: jsx(Icon, {
-        size: "m",
+        size: iconSize,
         children: icon === undefined ? jsx(ChevronDownSvg, {}) : icon
       })
     }), jsx(ControlFacadeChildrenWrapper, {