@jsenv/navi 0.27.74 → 0.27.76

package/dist/jsenv_navi.js

@@ -3,7 +3,7 @@ import { isValidElement, createContext, h, toChildArray, render, Fragment, clone
 import { useErrorBoundary, useLayoutEffect, useEffect, useContext, useMemo, useRef, useState, useCallback, useId } from "preact/hooks";
 import { jsxs, jsx, Fragment as Fragment$1 } from "preact/jsx-runtime";
 import { signal, effect, computed, batch, useSignal } from "@preact/signals";
-import { createIterableWeakSet, createEventGroupLogger, normalizeStyle, mergeOneStyle, createPubSub, findEvent, dispatchInternalCustomEvent, mergeTwoStyles, normalizeStyles, createGroupTransitionController, getElementSignature, getBorderRadius, preventIntermediateScrollbar, createOpacityTransition, dispatchCustomEvent, createValueEffect, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, findFocusDelegateTarget, findFocusable, allowWheelThrough, dispatchPublicCustomEvent, resolveCSSColor, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, applyNewPosition, measureLongestVisualLineWidth, getKeyboardEventDefaultAction, chainEvent, findBefore, findAfter, resolveCSSSize, hasCSSSizeUnit, resolveOklchLightness, contrastColor, activeElementSignal, initFocusGroup, elementIsFocusable, parsePositionArea, getPositionedParent, snapToPixel, trapFocusInside, trapScrollInside, scrollIntoViewScoped, measureWidestChildRow, performTabNavigation, dragAfterThreshold, getScrollContainer, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement } from "@jsenv/dom";
+import { createIterableWeakSet, createEventGroupLogger, normalizeStyle, mergeOneStyle, createPubSub, findEvent, dispatchInternalCustomEvent, mergeTwoStyles, normalizeStyles, createGroupTransitionController, getElementSignature, getBorderRadius, preventIntermediateScrollbar, createOpacityTransition, dispatchCustomEvent, createValueEffect, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, findFocusDelegateTarget, findFocusable, allowWheelThrough, dispatchPublicCustomEvent, resolveCSSColor, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, applyNewPosition, measureLongestVisualLineWidth, getKeyboardEventDefaultAction, chainEvent, findBefore, findAfter, resolveCSSSize, hasCSSSizeUnit, resolveOklchLightness, contrastColor, activeElementSignal, initFocusGroup, elementIsFocusable, parsePositionArea, getPositionedParent, snapToPixel, trapFocusInside, trapScrollInside, scrollIntoViewScoped, measureWidestChildRow, performTabNavigation, dragAfterThreshold, getScrollContainer, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement, stringifyStyle as stringifyStyle$1 } from "@jsenv/dom";
 export { contrastColor, startDragToReorder } from "@jsenv/dom";
 import { prefixFirstAndIndentRemainingLines } from "@jsenv/humanize";
 import { createValidity, parseDuration, durationContainsNaN, compareTwoDurations, durationToSeconds, durationToISOString } from "@jsenv/validity";
@@ -40532,6 +40532,7 @@ const ListItemHeader = props => {
   }, []);
   return jsx(Next, {
     ...props,
+    header: undefined,
     role: "presentation",
     baseClassName: "navi_list_item_header"
   });
@@ -40549,6 +40550,7 @@ const ListItemFooter = props => {
   }, []);
   return jsx(Next, {
     ...props,
+    footer: undefined,
     role: "presentation",
     baseClassName: "navi_list_item_footer"
   });
@@ -41505,6 +41507,15 @@ const css$m = /* css */`
     grid-column: 1 / -1;
   }
 
+  /* Same reasoning as the filler rule above, for the separator (the default
+     Separator rendered between items when List's own separator prop is
+     set): a grid track only ever spans the single column it is placed in
+     by default, so without this it would collapse into just the first
+     column's width instead of the full row. */
+  .navi_list[navi-box-flow="grid"] > .navi_separator {
+    grid-column: 1 / -1;
+  }
+
   /* Empty state — hidden by default, shown when no list items are rendered.
      order: 1 pushes fallbacks after all regular items in flex column layout.
      The list children are open-ended (headers, presentation items, real items),
@@ -41870,7 +41881,8 @@ const LIST_STYLE_CSS_VARS = {
   maxWidth: "--list-max-width",
   borderColor: "--list-border-color",
   borderRadius: "--list-border-radius",
-  borderWidth: "--list-border-width"
+  borderWidth: "--list-border-width",
+  backgroundColor: "--list-background-color"
 };
 const LIST_PSEUDO_CLASSES = [":hover", ":focus", ":focus-visible", ":focus-within", ":read-only", ":disabled", ":-navi-void", ":-navi-expanded"];
 const useListScrollSync = ({
@@ -50009,17 +50021,17 @@ const SidePanel = ({
     className: withPropsClassName("navi_side_panel", className),
     "navi-side": side,
     style: {
-      "--navi-side-panel-width": toCssLength(width),
-      "--navi-side-panel-height": toCssLength(height)
+      "--navi-side-panel-width": toCssLength(width, "width"),
+      "--navi-side-panel-height": toCssLength(height, "height")
     },
     ...rest,
     children: children
   });
 };
-// Preact doesn't auto-append "px" to bare numeric style values the way React
-// does — an unsuffixed number is an invalid CSS length, silently rejected by
-// the browser (leaving the property unset instead of sized).
-const toCssLength = value => value === undefined || value === null ? undefined : typeof value === "number" ? `${value}px` : value;
+// Same width/height normalization Box itself uses for its own styleCSSVars
+// props (see box_style_util.js's own getStringifier) — bare numbers become
+// px, percentages/calc()/CSS keywords pass through untouched.
+const toCssLength = (value, propertyName) => value === undefined || value === null ? undefined : stringifyStyle$1(value, propertyName);
 
 /**
  * Stuck to the top of the panel's own scrollable area (`position: sticky`)