@jsenv/navi 0.29.351 → 0.29.353

package/dist/dev/jsenv_navi.js

@@ -19680,7 +19680,22 @@ const TYPO_PROPS = {
     }
     return lineClampStyles(value);
   },
-  textAlign: PASS_THROUGH,
+  /* A sized inline Box (a Text with a width) is a flex row the caller did not
+     ask for, where the text runs are one anonymous item sized to their content:
+     text-align alone moves nothing, the item is placed by justify-content. A
+     flex row asked for keeps the two apart (Picker: textAlign is the text in
+     the value slot, justify-content the slots). alignX, when given, wins. */
+  textAlign: (value, { flexFromSize, remainingProps }) => {
+    if (
+      flexFromSize &&
+      value !== "justify" &&
+      remainingProps.alignX === undefined &&
+      remainingProps.align === undefined
+    ) {
+      return { textAlign: value, justifyContent: value };
+    }
+    return { textAlign: value };
+  },
   textBox: PASS_THROUGH,
   textBoxTrim: PASS_THROUGH,
   textBoxEdge: PASS_THROUGH,
@@ -22294,8 +22309,12 @@ const computeBox = (props, parentBoxFlow) => {
       block = true;
     }
   }
+  // An inline box ignores width/height, so a sized one becomes a flex row the
+  // caller never asked for; textAlign reads that (see box_style_util.js).
+  let flexFromSize = false;
   if (inline && (rest.width !== undefined || rest.height !== undefined) && flex === undefined) {
     flex = "x";
+    flexFromSize = true;
   }
   let boxFlow;
   if (inline) {
@@ -22389,6 +22408,7 @@ const computeBox = (props, parentBoxFlow) => {
     const styleContext = {
       parentBoxFlow,
       boxFlow,
+      flexFromSize,
       styleCSSVars,
       pseudoState: innerPseudoState,
       pseudoClasses,
@@ -67812,6 +67832,7 @@ const css$x = /* css */`@layer navi {
 
   &[data-scroller="document"] {
     --x-list-group-label-top: var(--navi-safe-area-inset-top);
+    --x-list-group-label-left: var(--navi-safe-area-inset-left);
   }
 
   &[data-expand-x] {
@@ -68077,7 +68098,6 @@ const css$x = /* css */`@layer navi {
 
     & .navi_list_item {
       scroll-margin-top: calc(var(--x-list-scroll-spacing-top) + var(--list-group-label-height, 0px));
-      scroll-margin-left: calc(var(--x-list-scroll-spacing-left) + var(--list-group-label-width, 0px));
     }
   }
 
@@ -68086,6 +68106,21 @@ const css$x = /* css */`@layer navi {
   }
 }
 
+.navi_list_container[data-horizontal] > .navi_list_scroll_container > .navi_list > .navi_list_item_group {
+  min-width: auto;
+  max-width: none;
+
+  & > .navi_list_item_group_label {
+    top: auto;
+    left: var(--list-group-label-left, var(--x-list-group-label-left, 0px));
+  }
+
+  & > .navi_list_item_group_list {
+    flex-direction: row;
+    width: auto;
+  }
+}
+
 @supports (view-transition-group: contain) {
   :root:not([data-navi-route-transition], [data-navi-route-travel]) .navi_list_container[data-item-transition] {
     view-transition-name: match-element;
@@ -69705,18 +69740,13 @@ const useDuplicateHeaderWarning = ref => {
 // fraction short of it, and without this slack it reads as being at rest: a
 // bug that shows up on one machine and not the next.
 const STUCK_SLACK = 1;
-// Which edge a part sticks to. The header and the footer stick along whichever
-// axis the list scrolls — their rules declare both insets (top/left, and
-// bottom/right) so the same markup works either way; a group label always caps
-// its group from the top.
+// Which edge a part sticks to: the edge the list scrolls FROM for the header
+// and a group label, the one it scrolls toward for the footer.
 const getStickyEdge = (partEl, horizontal) => {
   if (partEl.classList.contains("navi_list_item_footer")) {
     return horizontal ? "right" : "bottom";
   }
-  if (partEl.classList.contains("navi_list_item_header")) {
-    return horizontal ? "left" : "top";
-  }
-  return "top";
+  return horizontal ? "left" : "top";
 };
 // A sticky inset is measured from the scrollport — the padding box of the
 // scroller, or the viewport when the page scrolls. getScrollerViewportRect
@@ -72113,9 +72143,10 @@ const ListItemGroup = ({
     if (!groupEl) {
       return;
     }
-    const rect = labelEl.getBoundingClientRect();
-    groupEl.style.setProperty("--list-group-label-height", `${rect.height}px`);
-    groupEl.style.setProperty("--list-group-label-width", `${rect.width}px`);
+    const {
+      height
+    } = labelEl.getBoundingClientRect();
+    groupEl.style.setProperty("--list-group-label-height", `${height}px`);
   }, []);
   const {
     className: labelClassName,