@jsenv/navi 0.27.63 → 0.27.65

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,8 +6521,6 @@ const DIMENSION_PROPS = {
     if (parentBoxFlow === "flex-y" || parentBoxFlow === "inline-flex-y") {
       return {
         alignSelf: "stretch",
-        // ensure we override any with: 'fit-content' for instance
-        // also useful for ".navi_text_sizer" to inherit the full size
         width: "100%",
       };
     }
@@ -6515,9 +6540,6 @@ const DIMENSION_PROPS = {
     if (parentBoxFlow === "flex-x" || parentBoxFlow === "inline-flex-x") {
       return {
         alignSelf: "stretch",
-        // ensure we override any with: 'fit-content' for instance
-        // also useful for ".navi_text_sizer" to inherit the full size
-        height: "100%",
       };
     }
     // Can't use flexGrow — parent is not flex-y
@@ -28315,6 +28337,7 @@ installImportMetaCssBuild(import.meta);const css$J = /* css */`
       --button-color-disabled: var(--button-color-readonly);
 
       /* Here to be easy to override */
+      display: inline-block; /* So box css can override when wanting to put button inline flex */
       font-size: var(--button-font-size);
       font-family: var(--button-font-family);
     }
@@ -28347,7 +28370,6 @@ installImportMetaCssBuild(import.meta);const css$J = /* css */`
     touch-action: manipulation;
     user-select: none;
     -webkit-tap-highlight-color: var(--navi-control-tap-highlight-color);
-    display: inline-flex;
 
     .navi_button_content {
       position: relative;
@@ -28535,6 +28557,7 @@ installImportMetaCssBuild(import.meta);const css$J = /* css */`
     }
     &[data-icon] {
       --button-padding: 0;
+      display: inline-flex;
     }
     /* cta: call-to-action — special background, border matches background */
     &[data-cta] {
@@ -28623,7 +28646,7 @@ const ButtonUI = props => {
   });
   return jsxs(Box, {
     inline: true,
-    flex: true,
+    block: true,
     ...buttonControlRootProps,
     ...buttonControlHostProps,
     // eslint-disable-next-line react/no-children-prop
@@ -28708,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",
@@ -36115,6 +36137,11 @@ const PickerCustom = props => {
     ref,
     mode: modeProp
   } = props;
+  // Resolve the id the same way useControlProps does (own id > Field's id > generated id)
+  // before computing popupId below, so two Pickers without an explicit id never collide.
+  const idDefault = useId();
+  const controlId = useContext(ControlIdContext);
+  props.id = props.id || controlId || idDefault;
   // Freeze the mode for the lifetime of an opening: compute it when closed,
   // keep it stable while open so a screen resize mid-session doesn't switch
   // between Popover and Dialog.
@@ -39962,7 +39989,7 @@ installImportMetaCssBuild(import.meta);const css$l = /* css */`
     --x-color: var(--color, white);
 
     position: relative;
-    display: inline-flex;
+    display: inline;
     max-width: 200px;
     padding-top: var(--padding-y);
     padding-right: var(--padding-x);
@@ -39971,7 +39998,6 @@ installImportMetaCssBuild(import.meta);const css$l = /* css */`
     align-items: stretch;
     color: var(--x-color);
     font-size: var(--font-size);
-    line-height: normal;
     background: var(--x-background);
     background-color: var(--x-background-color);
     border-radius: 1em;
@@ -39982,7 +40008,7 @@ installImportMetaCssBuild(import.meta);const css$l = /* css */`
     }
 
     &[data-text-overflow] {
-      display: flex;
+      display: inline;
 
       .navi_text_overflow_wrapper {
         /* Keep badge text and button together */
@@ -39994,10 +40020,13 @@ installImportMetaCssBuild(import.meta);const css$l = /* css */`
       display: inline-flex;
       margin-top: calc(-1 * var(--padding-y));
       margin-bottom: calc(-1 * var(--padding-y));
+      padding-top: var(--padding-y);
       padding-right: calc(var(--padding-x) / 2);
+      padding-bottom: var(--padding-y);
       padding-left: calc(var(--padding-x) / 2);
       align-items: center;
       cursor: pointer;
+      pointer-events: auto;
       user-select: none;
 
       &:first-child {
@@ -40109,6 +40138,11 @@ const BadgeList = ({
     const measure = () => {
       visibleEl.style.width = "";
       if (shrinkWrap) {
+        // Clone the already-rendered DOM nodes instead of letting React/Preact
+        // render the children a second time into the ghost: re-rendering would
+        // instantiate Badge/Badge.Button a second time, double-registering
+        // their controllers (and any other mount side effect) under the same id.
+        measureEl.replaceChildren(...Array.from(visibleEl.children, child => child.cloneNode(true)));
         const optimalWidth = measureWidestChildRow(measureEl);
         if (optimalWidth !== null) {
           visibleEl.style.width = `${Math.ceil(optimalWidth)}px`;
@@ -40150,8 +40184,7 @@ const BadgeList = ({
       ...sharedProps,
       ref: measureRef,
       "aria-hidden": "true",
-      "navi-badge-list-clone": "",
-      children: childArray
+      "navi-badge-list-clone": ""
     }), jsxs(Box, {
       baseClassName: "navi_badge_list",
       ...sharedProps,