@jsenv/navi 0.27.8 → 0.27.10

package/dist/jsenv_navi.js

@@ -6387,7 +6387,7 @@ const applyOnTwoProps = (propA, propB) => {
   };
 };
 
-const FLOW_PROPS = {
+const LAYOUT_PROPS = {
   // all are handled by navi-attributes
   inline: () => {},
   block: () => {},
@@ -6398,12 +6398,8 @@ const FLOW_PROPS = {
   display: PASS_THROUGH, // in case people write "display: none" (even if hidden prop is recommended)
   row: () => {},
   column: () => {},
-
-  // not really related to flow but should be on the container element if any
-  pointerEvents: PASS_THROUGH,
-  viewTransitionName: PASS_THROUGH,
 };
-const OUTER_SPACING_PROPS = {
+const OUTER_PROPS = {
   margin: PASS_THROUGH,
   marginLeft: PASS_THROUGH,
   marginRight: PASS_THROUGH,
@@ -6411,8 +6407,12 @@ const OUTER_SPACING_PROPS = {
   marginBottom: PASS_THROUGH,
   marginX: applyOnTwoCSSProps("marginLeft", "marginRight"),
   marginY: applyOnTwoCSSProps("marginTop", "marginBottom"),
+
+  // not really related to flow but should be on the container element if any
+  pointerEvents: PASS_THROUGH,
+  viewTransitionName: PASS_THROUGH,
 };
-const INNER_SPACING_PROPS = {
+const INNER_PROPS = {
   padding: PASS_THROUGH,
   paddingLeft: PASS_THROUGH,
   paddingRight: PASS_THROUGH,
@@ -6506,13 +6506,13 @@ const DIMENSION_PROPS = {
     if (!value || value === "0") {
       return { flexShrink: 0 };
     }
-    return { flexShrink: 1 };
+    return { flexShrink: 1, minWidth: 0 };
   },
   shrinkY: (value) => {
     if (!value || value === "0") {
       return { flexShrink: 0 };
     }
-    return { flexShrink: 1 };
+    return { flexShrink: 1, minHeight: 0 };
   },
 
   scaleX: (value) => {
@@ -6692,6 +6692,27 @@ const TYPO_PROPS = {
   uppercase: applyToCssPropWhenTruthy("textTransform", "uppercase", "none"),
   lowercase: applyToCssPropWhenTruthy("textTransform", "lowercase", "none"),
   letterSpacing: PASS_THROUGH,
+  overflowEllipsis: (value) => {
+    if (!value) {
+      return null;
+    }
+    return {
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      overflowWrap: "normal",
+    };
+  },
+  lineClamp: (value) => {
+    if (!value) {
+      return null;
+    }
+    return {
+      "overflow": "hidden",
+      "display": "-webkit-box",
+      "-webkit-box-orient": "vertical",
+      "-webkit-line-clamp": value,
+    };
+  },
 };
 const VISUAL_PROPS = {
   outline: PASS_THROUGH,
@@ -6725,13 +6746,6 @@ const VISUAL_PROPS = {
   overflow: PASS_THROUGH,
   overflowX: PASS_THROUGH,
   overflowY: PASS_THROUGH,
-  overflowEllipsis: () => {
-    return {
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      overflowWrap: "normal",
-    };
-  },
   objectFit: PASS_THROUGH,
   accentColor: PASS_THROUGH,
 };
@@ -6775,7 +6789,7 @@ const CONTENT_PROPS = {
     };
   },
   spacing: (value, { boxFlow }) => {
-    if (isSpacingHandledByFlow(boxFlow)) {
+    if (isSpacingHandledByLayout(boxFlow)) {
       return {
         gap: stringifySpacingStyle(value, "gap"),
       };
@@ -6809,7 +6823,7 @@ const CONTENT_PROPS = {
     return undefined;
   },
 };
-const flowSpacingHandlerSet = new Set([
+const LAYOUT_HANDLING_SPACING_SET = new Set([
   "flex-x",
   "flex-y",
   "inline-flex-x",
@@ -6817,36 +6831,58 @@ const flowSpacingHandlerSet = new Set([
   "grid",
   "inline-grid",
 ]);
-const isSpacingHandledByFlow = (boxFlow) => {
-  return flowSpacingHandlerSet.has(boxFlow);
+const isSpacingHandledByLayout = (boxFlow) => {
+  return LAYOUT_HANDLING_SPACING_SET.has(boxFlow);
 };
 
 const All_PROPS = {
-  ...FLOW_PROPS,
-  ...OUTER_SPACING_PROPS,
-  ...INNER_SPACING_PROPS,
+  ...LAYOUT_PROPS,
+  ...OUTER_PROPS,
+  ...INNER_PROPS,
   ...DIMENSION_PROPS,
   ...POSITION_PROPS,
   ...TYPO_PROPS,
   ...VISUAL_PROPS,
   ...CONTENT_PROPS,
 };
-const FLOW_PROP_NAME_SET = new Set(Object.keys(FLOW_PROPS));
-const OUTER_SPACING_PROP_NAME_SET = new Set(Object.keys(OUTER_SPACING_PROPS));
-const INNER_SPACING_PROP_NAME_SET = new Set(Object.keys(INNER_SPACING_PROPS));
-const DIMENSION_PROP_NAME_SET = new Set(Object.keys(DIMENSION_PROPS));
-const POSITION_PROP_NAME_SET = new Set(Object.keys(POSITION_PROPS));
+const LAYOUT_PROP_NAME_SET = new Set(Object.keys(LAYOUT_PROPS));
+// const OUTER_PROP_NAME_SET = new Set(Object.keys(OUTER_PROPS));
+const INNER_PROP_NAME_SET = new Set(Object.keys(INNER_PROPS));
+// const DIMENSION_PROP_NAME_SET = new Set(Object.keys(DIMENSION_PROPS));
+// const POSITION_PROP_NAME_SET = new Set(Object.keys(POSITION_PROPS));
 const TYPO_PROP_NAME_SET = new Set(Object.keys(TYPO_PROPS));
 const VISUAL_PROP_NAME_SET = new Set(Object.keys(VISUAL_PROPS));
 const CONTENT_PROP_NAME_SET = new Set(Object.keys(CONTENT_PROPS));
 const STYLE_PROP_NAME_SET = new Set(Object.keys(All_PROPS));
+const SPACING_PROP_SET = new Set([
+  "borderRadius",
+  "spacing",
+  "spacingX",
+  "spacingY",
+  "margin",
+  "marginLeft",
+  "marginRight",
+  "marginTop",
+  "marginBottom",
+  "marginX",
+  "marginY",
+  "padding",
+  "paddingLeft",
+  "paddingRight",
+  "paddingTop",
+  "paddingBottom",
+  "paddingX",
+  "paddingY",
+]);
 
 const COPIED_ON_VISUAL_CHILD_PROP_SET = new Set([
-  ...FLOW_PROP_NAME_SET,
+  ...LAYOUT_PROP_NAME_SET,
   "expand",
   "expandX",
   "expandY",
   "shrink",
+  "shrinkX",
+  "shrinkY",
   "align",
   "alignX",
   "alignY",
@@ -6854,7 +6890,7 @@ const COPIED_ON_VISUAL_CHILD_PROP_SET = new Set([
   "minHeight",
 ]);
 const HANDLED_BY_VISUAL_CHILD_PROP_SET = new Set([
-  ...INNER_SPACING_PROP_NAME_SET,
+  ...INNER_PROP_NAME_SET,
   ...VISUAL_PROP_NAME_SET,
   ...CONTENT_PROP_NAME_SET,
 ]);
@@ -6870,47 +6906,11 @@ const getVisualChildStylePropStrategy = (name) => {
 
 const isStyleProp = (name) => STYLE_PROP_NAME_SET.has(name);
 
-const getStylePropGroup = (name) => {
-  if (FLOW_PROP_NAME_SET.has(name)) {
-    return "flow";
-  }
-  if (OUTER_SPACING_PROP_NAME_SET.has(name)) {
-    return "margin";
-  }
-  if (INNER_SPACING_PROP_NAME_SET.has(name)) {
-    return "padding";
-  }
-  if (DIMENSION_PROP_NAME_SET.has(name)) {
-    return "dimension";
-  }
-  if (POSITION_PROP_NAME_SET.has(name)) {
-    return "position";
-  }
-  if (TYPO_PROP_NAME_SET.has(name)) {
-    return "typo";
-  }
-  if (VISUAL_PROP_NAME_SET.has(name)) {
-    return "visual";
-  }
-  if (CONTENT_PROP_NAME_SET.has(name)) {
-    return "content";
-  }
-  return null;
-};
 const getStringifier = (key) => {
-  if (
-    key === "borderRadius" ||
-    key === "spacing" ||
-    key === "spacingX" ||
-    key === "spacingY"
-  ) {
+  if (SPACING_PROP_SET.has(key)) {
     return stringifySpacingStyle;
   }
-  const group = getStylePropGroup(key);
-  if (group === "margin" || group === "padding") {
-    return stringifySpacingStyle;
-  }
-  if (group === "typo") {
+  if (TYPO_PROP_NAME_SET.has(key)) {
     return stringifyTypoStyle;
   }
   return stringifyStyle;
@@ -12445,6 +12445,27 @@ const useUIStateController = (
           value: newUIState,
         });
       }
+      // When this controller is a real input that has a visible proxy
+      // (linked via `navi-control-proxy-for`), mirror the new state to the
+      // proxy DOM synchronously. Otherwise the proxy would only catch up
+      // later through a React re-render — visible as e.g. two radios
+      // appearing checked at once between the real input update and the
+      // next render (radio_sibling_uncheck case).
+      if (el && !controlProxyFor) {
+        const proxyEl = findControlProxy(el);
+        if (proxyEl) {
+          const propValue = uiStateController.getPropFromState(newUIState);
+          proxyEl[statePropName] = propValue;
+          // Also notify the proxy's controller so it can stay in sync with
+          // state changes that originate from the real input (e.g. radio_sibling_uncheck).
+          // Without this the proxy only learns about deselection later via state_prop
+          // (Preact re-render), too late for lastActionValueRef to be updated.
+          dispatchInternalCustomEvent(proxyEl, "navi_ui_state_change", {
+            event: e,
+            value: newUIState,
+          });
+        }
+      }
       const internalBehavior = e.detail?.internalBehavior;
       if (internalBehavior) {
         return true;
@@ -33709,6 +33730,7 @@ const css$m = /* css */`
     );
 
     display: flex;
+    min-width: 0;
     /* fit-content by default, but never wider than the parent */
     max-width: 100%;
     flex-direction: column;
@@ -33780,7 +33802,7 @@ const css$m = /* css */`
     --x-list-item-font-weight: var(--list-item-font-weight);
 
     box-sizing: border-box;
-    min-width: 100%;
+    min-width: 0;
     max-width: 100%;
     padding: var(--list-item-padding);
     color: var(--x-list-item-color);
@@ -34979,6 +35001,10 @@ const css$l = /* css */`
     outline-color: var(--list-item-outline-color);
     outline-offset: var(--list-item-outline-offset);
 
+    &[navi-selectable] {
+      user-select: none;
+    }
+
     &[data-interactive] {
       cursor: pointer;
       user-select: none;
@@ -35373,6 +35399,7 @@ const Selectable = props => {
     },
     "aria-selected": checked,
     selected: checked,
+    "navi-selectable": "",
     children: jsxs(Field, {
       as: selectableArea === "manual" ? "div" : undefined,
       padding: "m",
@@ -35672,7 +35699,6 @@ installImportMetaCssBuild(import.meta);const css$k = /* css */`
     font-size: var(--picker-font-size);
     text-align: inherit;
     text-overflow: ellipsis;
-    white-space: nowrap;
     background-color: var(--x-picker-background-color);
     border-width: var(--picker-border-width);
     border-style: solid;