@jsenv/navi 0.29.153 → 0.29.155

package/dist/jsenv_navi.js

@@ -7073,12 +7073,19 @@ const ARROW_SPACING = 8;
 // (closest "[aria-expanded]", see commands.js): a button inside the callout
 // closes the callout, not the picker or dialog around it. Never "false" — a
 // closed callout is removed, not kept.
+//
+// role="status" is the floor, not the final value: a message appearing without
+// the user asking for it is a live region, and a callout carrying no status at
+// all still owes one. A status raises it (the addStatusEffect swapping in
+// "alert" for warning/error), and it is also the name a test reaches the
+// callout by — navi's classes and ids are not a contract (docs/testid.md).
 const calloutTemplate = /* html */`
   <div
     class="navi_callout"
     popover="manual"
     navi-out-of-flow=""
     aria-expanded="true"
+    role="status"
   >
     <div class="navi_callout_box">
       <div class="navi_callout_frame"></div>
@@ -61160,12 +61167,14 @@ const SKELETON_LIST_ITEM_CLASS = "navi_list_item_skeleton";
 // inside it (see ListItems): a run draws the rows it frames and holds the room
 // of the others.
 const RenderWindowContext = createContext(null);
-// Carries List's own `columns` prop (a grid-template-columns value, e.g.
+// Carries List's own `itemColumns` prop (a grid-template-columns value, e.g.
 // "1fr auto auto") down to each ListItem/filler/fallback so they can render
 // as a subgrid row instead of a flex row — see ListItem's own use of this
-// context, and List's own `columns` doc, for the full rationale (table-like
+// context, and List's own `itemColumns` doc, for the full rationale (table-like
 // column sizing that stays correct across a virtualized, windowed item set).
-const ListColumnsContext = createContext(null);
+// List's own `columns` never reaches here: it lays the items themselves into
+// the track's columns, and an item then occupies a cell like anything else.
+const ListItemColumnsContext = createContext(null);
 // Carries the separator element/function down to each ListItem so separators
 // are only rendered between items that actually mount (post-filter, post-window).
 const SeparatorContext = createContext(null);
@@ -61251,6 +61260,8 @@ const css$x = /* css */`@layer navi {
   --x-list-scroll-spacing-bottom: calc(var(--list-footer-height, 0px) + var(--list-scroll-padding-bottom, 0px));
   --x-list-scroll-spacing-left: calc(var(--list-header-width, 0px) + var(--list-scroll-padding-left, 0px));
   --x-list-scroll-spacing-right: calc(var(--list-footer-width, 0px) + var(--list-scroll-padding-right, 0px));
+  min-width: 0;
+  max-width: var(--list-max-width, 100%);
   background-color: var(--x-list-background-color);
   border: var(--x-list-border-width) solid var(--x-list-border-color);
   border-top-left-radius: var(--x-corner-top-left-radius, var(--x-list-border-radius));
@@ -61258,8 +61269,6 @@ const css$x = /* css */`@layer navi {
   border-bottom-right-radius: var(--x-corner-bottom-right-radius, var(--x-list-border-radius));
   border-bottom-left-radius: var(--x-corner-bottom-left-radius, var(--x-list-border-radius));
   flex-direction: column;
-  min-width: 0;
-  max-width: 100%;
   transition: opacity .2s;
   display: flex;
   overflow: hidden;
@@ -61285,7 +61294,6 @@ const css$x = /* css */`@layer navi {
     min-width: inherit;
     max-width: var(--list-max-width, inherit);
     max-height: var(--list-max-height, inherit);
-    flex-wrap: inherit;
     overflow-anchor: none;
     overscroll-behavior: inherit;
     scrollbar-width: inherit;
@@ -61347,7 +61355,6 @@ const css$x = /* css */`@layer navi {
 
 .navi_list {
   box-sizing: border-box;
-  flex-wrap: inherit;
   outline: none;
   margin: 0;
   padding: 0;
@@ -61630,6 +61637,7 @@ const ListUI = props => {
     hoverWhileScrolling = false,
     lockSize,
     columns,
+    itemColumns,
     searchText,
     searchNoMatchMode = "remove",
     loading,
@@ -61864,6 +61872,7 @@ const ListUI = props => {
     styleCSSVars: LIST_STYLE_CSS_VARS,
     pseudoClasses: LIST_PSEUDO_CLASSES,
     hasChildUsingForwardedProps: true,
+    childPropSet: LIST_TRACK_PROP_SET,
     onnavi_request_scroll: e => {
       if (!Object.hasOwn(e.detail, "id")) {
         console.warn(`navi_request_scroll event is missing the "id" property in its detail.`, e);
@@ -61893,6 +61902,7 @@ const ListUI = props => {
       horizontal: horizontal,
       spacing: spacing,
       columns: columns,
+      itemColumns: itemColumns,
       tracker: tracker,
       renderWindow: renderWindow,
       virtual: virtual,
@@ -61958,12 +61968,47 @@ const ListFirstResolver = props => {
  *   horizontal?: boolean,
  *   spacing?: string,
  *   columns?: string,
+ *   itemColumns?: string,
+ *   alignX?: string,
+ *   alignY?: string,
+ *   flexWrap?: boolean,
  *   expandX?: boolean,
  *   expandY?: boolean,
  *   expand?: boolean,
  *   children?: import("ignore:preact").ComponentChildren,
  *   [key: string]: any,
  * }>}
+ * @param {string} [props.columns]
+ *   The list's own columns: a `grid-template-columns` value the ITEMS are laid
+ *   into — a sheet of icons (`repeat(auto-fill, minmax(2.5rem, 1fr))`), a row of
+ *   choices (`repeat(3, minmax(0, 1fr))`). Each item takes one cell, and an item
+ *   meant to take a whole line says so for itself
+ *   (`style={{ gridColumn: "1 / -1" }}`). Several items to a line is a shape the
+ *   list cannot virtualize — its render window and the room it holds for the
+ *   rows it does not draw both count one item per line — so it is for a set of
+ *   items the caller renders whole, not for a `<List.Items>` collection.
+ * @param {string} [props.itemColumns]
+ *   The columns inside an ITEM: a `grid-template-columns` value each item fills
+ *   with its own children, a table whose cells line up down the list. Every item
+ *   becomes a subgrid row spanning all the columns, so a column is as wide as
+ *   the widest cell in it among the rows actually in the DOM — real column
+ *   sizing that stays right as the window moves. Rows of a table, then, where
+ *   `columns` above is a grid of items; the two cannot both be set.
+ * @param {string} [props.alignX]
+ *   Where the items sit across the track — `alignX="center"` centres a
+ *   horizontal list's row of items inside a list wider than they are. Together
+ *   with `alignY`, `align` and `flexWrap`, this reaches the `<ul>` holding the
+ *   items rather than the frame drawn around it: the frame's only child is the
+ *   scroll box, which fills it and has nothing to arrange.
+ * @param {boolean} [props.flexWrap]
+ *   Lets a horizontal list's items fall to the next line instead of running
+ *   past the edge — a row of choices under a `maxWidth`, say. Same caveat as
+ *   `columns` above: a line holding several items is not virtualizable.
+ * @param {string} [props.overflow]
+ *   `"visible"` lets the items paint outside the list — a check in a row's
+ *   corner, a badge crossing the edge. A list clips by default, which is what
+ *   its rounded corners and its scroll box need, and the two cannot both be
+ *   true: asking for visible gives up the clipping, corners included.
  * @param {boolean} [props.itemTransition]
  *   Names each row, so a change the application wraps in
  *   `document.startViewTransition` is seen row by row — rows moving to their new
@@ -62087,6 +62132,7 @@ const ListContent = ({
   horizontal,
   spacing,
   columns,
+  itemColumns,
   tracker,
   renderWindow,
   virtual,
@@ -62132,6 +62178,7 @@ const ListContent = ({
       horizontal: horizontal,
       spacing: spacing,
       columns: columns,
+      itemColumns: itemColumns,
       ...listProps,
       tracker: tracker,
       renderWindow: renderWindow,
@@ -62143,6 +62190,12 @@ const ListContent = ({
     })
   });
 };
+// Where the items sit is a question about the track (the <ul>), not about the
+// frame around it: the frame's only child is the scroll box, which fills it and
+// has nothing to arrange. Box moves these out of the container's own props and
+// into BoxForwardedPropsContext, which ListContent reads and hands to the <ul>
+// — the same route `horizontal`, `spacing` and the column props take by hand.
+const LIST_TRACK_PROP_SET = new Set(["align", "alignX", "alignY", "flexWrap"]);
 const LIST_STYLE_CSS_VARS = {
   maxHeight: "--list-max-height",
   maxWidth: "--list-max-width",
@@ -63614,6 +63667,7 @@ const UnorderedList = ({
   horizontal,
   spacing,
   columns,
+  itemColumns,
   children,
   ...rest
 }) => {
@@ -63622,11 +63676,19 @@ const UnorderedList = ({
   // A loading state drawing nothing keeps the message: an announced count of 0
   // already tells us the list is empty (see ListUI's loadingPlaceholderShown).
   const suppressFallback = loadingPlaceholderShown || Boolean(error);
+
+  // One track, one template: the two column props are the same
+  // grid-template-columns seen from either end, and only differ in what an
+  // item does with it (see useItemColumnsOverrideProps).
+  if (columns && itemColumns) {
+    console.warn(`List: "columns" and "itemColumns" cannot both be set — they define the same track. "columns" lays the items into the columns; "itemColumns" gives each item the columns its own children fill.`);
+  }
+  const trackColumns = columns || itemColumns;
   return jsxs(Box, {
     as: "ul",
-    flex: columns ? undefined : horizontal ? "x" : "y",
-    grid: columns ? true : undefined,
-    gridTemplateColumns: columns,
+    flex: trackColumns ? undefined : horizontal ? "x" : "y",
+    grid: trackColumns ? true : undefined,
+    gridTemplateColumns: trackColumns,
     ...rest,
     spacing: spacing,
     baseClassName: "navi_list",
@@ -63648,8 +63710,8 @@ const UnorderedList = ({
                 value: virtual,
                 children: jsx(ListRowContext.Provider, {
                   value: null,
-                  children: jsx(ListColumnsContext.Provider, {
-                    value: columns || null,
+                  children: jsx(ListItemColumnsContext.Provider, {
+                    value: columns ? null : itemColumns || null,
                     children: jsx(ListDeclaredChildren, {
                       children: children
                     })
@@ -63718,8 +63780,8 @@ const VirtualFiller = ({
   });
 };
 
-// List's own `columns` prop (see ListColumnsContext) turns a list item into
-// a subgrid row instead of a flex row: its own children become direct grid
+// List's own `itemColumns` prop (see ListItemColumnsContext) turns a list item
+// into a subgrid row instead of a flex row: its own children become direct grid
 // items of List's own <ul>, so column widths are computed from whichever
 // rows are actually in the DOM (the currently-windowed items plus the
 // always-mounted header/footer) — real grid/table column sizing, not a
@@ -63729,11 +63791,10 @@ const VirtualFiller = ({
 // this they'd silently stay flex rows and break column alignment against
 // the rest of the grid). `flex` is force-cleared here because Box picks
 // flex over grid when both are set (see box.jsx's own boxFlow resolution),
-// so a caller-provided `flex` prop (leftover from a non-columns usage)
-// would otherwise silently win over this.
-const useListItemColumnsOverrideProps = callerStyle => {
-  const columns = useContext(ListColumnsContext);
-  if (!columns) {
+// so a caller-provided `flex` prop would otherwise silently win over this.
+const useItemColumnsOverrideProps = callerStyle => {
+  const itemColumns = useContext(ListItemColumnsContext);
+  if (!itemColumns) {
     return undefined;
   }
   return {
@@ -63797,11 +63858,11 @@ const ListItemPresentationResolver = props => {
   });
 };
 const ListItemPresentation = props => {
-  const columnsOverrideProps = useListItemColumnsOverrideProps(props.style);
+  const itemColumnsOverrideProps = useItemColumnsOverrideProps(props.style);
   return jsx(Box, {
     as: "li",
     ...props,
-    ...columnsOverrideProps
+    ...itemColumnsOverrideProps
   });
 };
 // A <List.Item skeleton> — a non-interactive placeholder row shown while a list
@@ -63831,14 +63892,14 @@ const ListItemSkeleton = props => {
     paddingY = "s",
     ...rest
   } = props;
-  const columnsOverrideProps = useListItemColumnsOverrideProps(rest.style);
+  const itemColumnsOverrideProps = useItemColumnsOverrideProps(rest.style);
   return jsx(Box, {
     as: "li",
     role: "presentation",
     "aria-hidden": "true",
     paddingY: paddingY,
     ...rest,
-    ...columnsOverrideProps,
+    ...itemColumnsOverrideProps,
     baseClassName: `navi_list_item ${SKELETON_LIST_ITEM_CLASS}`,
     children: children ?? jsx(Text, {
       loading: true
@@ -63999,7 +64060,7 @@ const ListItemReal = props => {
   // CSS Highlight API: mark matching text ranges from matchInfo.matchRanges,
   // if any (there is no standalone highlight prop — see ListItem's own doc).
   useSearchHighlight(ref, matchInfo?.matchRanges, [children, hidden]);
-  const columnsOverrideProps = useListItemColumnsOverrideProps(rest.style);
+  const itemColumnsOverrideProps = useItemColumnsOverrideProps(rest.style);
   // <List itemTransition>: the row carries the name it is to be paired by, and
   // the stylesheet turns it into a view-transition-name where a browser can
   // draw it inside the list (see the @supports block in the css above).
@@ -64068,7 +64129,7 @@ const ListItemReal = props => {
     id: id,
     "navi-list-item-real": "",
     ...rest,
-    ...columnsOverrideProps,
+    ...itemColumnsOverrideProps,
     index: undefined,
     selected: undefined
     // We use aria-hidden and not hidden because hidden would be forced to
@@ -66891,6 +66952,10 @@ installImportMetaCssBuild(import.meta);const css$t = /* css */`@layer navi {
   --x-picker-padding-right: var(--picker-padding-right, var(--picker-padding-x, var(--picker-padding, var(--picker-padding-x-default))));
   --x-picker-padding-left: var(--picker-padding-left, var(--picker-padding-x, var(--picker-padding, var(--picker-padding-x-default))));
   --x-picker-padding-bottom: var(--picker-padding-bottom, var(--picker-padding-y, var(--picker-padding, var(--picker-padding-y-default))));
+  --x-picker-press-padding-top: var(--picker-press-padding-top, var(--picker-press-padding-y, var(--picker-press-padding, 0px)));
+  --x-picker-press-padding-right: var(--picker-press-padding-right, var(--picker-press-padding-x, var(--picker-press-padding, 0px)));
+  --x-picker-press-padding-bottom: var(--picker-press-padding-bottom, var(--picker-press-padding-y, var(--picker-press-padding, 0px)));
+  --x-picker-press-padding-left: var(--picker-press-padding-left, var(--picker-press-padding-x, var(--picker-press-padding, 0px)));
   --x-picker-color: var(--picker-color);
   --x-picker-icon-color: var(--picker-icon-color);
   --x-picker-align-x: var(--picker-align-x, var(--picker-align-x-default));
@@ -67037,14 +67102,17 @@ installImportMetaCssBuild(import.meta);const css$t = /* css */`@layer navi {
 
   &[navi-ui-custom] {
     & .navi_picker_input {
-      top: calc(-1 * var(--picker-border-width));
-      right: calc(-1 * var(--picker-border-width));
-      bottom: calc(-1 * var(--picker-border-width));
-      left: calc(-1 * var(--picker-border-width));
-      opacity: 0;
-      appearance: none;
+      top: calc(-1 * (var(--picker-border-width) + var(--x-picker-press-padding-top)));
+      right: calc(-1 *
+            (var(--picker-border-width) + var(--x-picker-press-padding-right)));
+      bottom: calc(-1 *
+            (var(--picker-border-width) + var(--x-picker-press-padding-bottom)));
+      left: calc(-1 * (var(--picker-border-width) + var(--x-picker-press-padding-left)));
       width: auto;
       height: auto;
+      font: inherit;
+      opacity: 0;
+      appearance: none;
       position: absolute;
     }
   }
@@ -67224,6 +67292,12 @@ const PickerButton = props => {
   // keywords have to become lengths here — "s" reaching CSS untouched makes
   // the declaration invalid, silently, and the gap just goes away.
   props.slotSpacing = resolveSpacingSize(props.slotSpacing);
+  for (const pressPaddingPropName of PRESS_PADDING_PROP_NAMES) {
+    const pressPadding = props[pressPaddingPropName];
+    if (pressPadding !== undefined) {
+      props[pressPaddingPropName] = stringifySpacingStyle(pressPadding);
+    }
+  }
   const {
     ref,
     variant,
@@ -67782,6 +67856,13 @@ const isOpeningKeyboardOnMobile = type => {
 const NON_MOBILE_KEYBOARD_TYPES = new Set(["date", "month", "week", "time", "datetime-local", "color"]);
 const PICKER_BUTTON_PSEUDO_CLASSES = [":hover", ":focus", ":focus-visible", ":focus-within", ":read-only", ":disabled", ":-navi-loading", ":-navi-expanded", ":-navi-has-value"];
 const PickerInputPseudoClasses = [":focus", ":focus-visible", ":read-only", ":disabled", ":-navi-loading", ":-navi-has-value", ":-navi-expanded"];
+
+// Spacing props that are not the names of real CSS styles, so Box hands them to
+// the custom property untouched: a size keyword would reach CSS as the word "s"
+// and a number as a unitless one, either of which makes the calc() using it
+// invalid and drops the press area back to the box. Hence the pass in
+// PickerButton, which turns them into lengths.
+const PRESS_PADDING_PROP_NAMES = ["pressPadding", "pressPaddingX", "pressPaddingY", "pressPaddingTop", "pressPaddingRight", "pressPaddingBottom", "pressPaddingLeft"];
 const PickerStyleCSSVars = {
   "outlineWidth": "--picker-outline-width",
   "borderWidth": "--picker-border-width",
@@ -67795,6 +67876,13 @@ const PickerStyleCSSVars = {
   "popupBorderRadius": "--picker-popup-border-radius",
   "dialogBorderWidth": "--picker-dialog-border-width",
   "slotSpacing": "--picker-slot-spacing",
+  "pressPadding": "--picker-press-padding",
+  "pressPaddingX": "--picker-press-padding-x",
+  "pressPaddingY": "--picker-press-padding-y",
+  "pressPaddingTop": "--picker-press-padding-top",
+  "pressPaddingRight": "--picker-press-padding-right",
+  "pressPaddingBottom": "--picker-press-padding-bottom",
+  "pressPaddingLeft": "--picker-press-padding-left",
   // alignX/alignY resolve to these two on a flex-x box; naming the CSS style
   // (not the prop) is what styleCSSVars matches, so justifyContent/alignItems
   // passed directly land in the same variables.