@jsenv/navi 0.29.298 → 0.29.300

package/dist/dev/jsenv_navi.js

@@ -48917,7 +48917,7 @@ const COMMAND_DEFAULT_PROPS_FACTORIES = {
  *   (it wears it itself) and loses the shrink under the finger, which has
  *   nothing left to scale but the interactive area itself.
  */
-const Button = createComponentResolver([ButtonFirstResolver, ButtonRouteResolver, ButtonCommandPropResolver, ButtonConfirmResolver, ButtonUI]);
+const Button = /*#__PURE__*/createComponentResolver([ButtonFirstResolver, ButtonRouteResolver, ButtonCommandPropResolver, ButtonConfirmResolver, ButtonUI]);
 
 installImportMetaCssBuild(import.meta);
 const css$O = /* css */`.navi_control_swap {
@@ -52288,7 +52288,7 @@ const InputTextualFirstResolver = props => {
     ...props
   });
 };
-const InputTextual = createComponentResolver([InputTextualAsTextResolver, InputTextualFirstResolver, InputWithListResolver, InputWithSuggestionsResolver, InputTypeResolver, InputModeResolver, InputHeadlessResolver, InputTextualUI]);
+const InputTextual = /*#__PURE__*/createComponentResolver([InputTextualAsTextResolver, InputTextualFirstResolver, InputWithListResolver, InputWithSuggestionsResolver, InputTypeResolver, InputModeResolver, InputHeadlessResolver, InputTextualUI]);
 const RealInput = ({
   maxLength,
   ...domProps
@@ -62349,6 +62349,7 @@ const css$B = /* css */`.navi_picker {
       --popover-background-color: var(--picker-popup-background-color, var(--navi-popup-background-color));
       --popover-outline-width: var(--picker-outline-width);
       --popover-outline-color: var(--picker-outline-color);
+      --popover-box-shadow: var(--picker-popup-box-shadow, var(--navi-popup-box-shadow));
       --popover-max-height: var(--picker-popover-max-height);
       min-width: var(--picker-popover-min-width, var(--anchor-width, 0px));
       cursor: default;
@@ -62385,6 +62386,7 @@ const css$B = /* css */`.navi_picker {
       --dialog-background-color: var(--picker-popup-background-color, var(--navi-popup-background-color));
       --dialog-outline-width: var(--picker-outline-width);
       --dialog-outline-color: var(--picker-outline-color);
+      --dialog-box-shadow: var(--picker-popup-box-shadow, var(--navi-popup-box-shadow));
       --dialog-min-width: var(--picker-dialog-min-width);
       --dialog-min-height: var(--picker-dialog-min-height);
       --dialog-max-width: var(--picker-dialog-max-width);
@@ -62569,7 +62571,10 @@ const PickerCustom = props => {
     // hands the popup that controller, and a controlled Dialog/Popover reads
     // no onOpen/onClose of its own.
     onOpen,
-    onClose
+    onClose,
+    // What opens the popup — the press, or an interaction navi detects
+    // ("longpress", "contextmenu"…, or a list of them). See the JSDoc.
+    openOn = "press"
   } = 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.
@@ -62605,6 +62610,7 @@ const PickerCustom = props => {
   delete pickerProps.onConfirm;
   delete pickerProps.onOpen;
   delete pickerProps.onClose;
+  delete pickerProps.openOn;
   // Read below for the popup alone; on the trigger it would land on the DOM as
   // an unknown attribute holding a ref object.
   delete pickerProps.anchor;
@@ -63002,7 +63008,29 @@ const PickerCustom = props => {
       // could then never form. So the picker steps back and opens on the click,
       // which the browser only delivers if the press stayed a press (a gesture
       // swallows the click it leaves behind).
-      const interactionsDispute = interactionsDisputeThePress(props.interactions);
+      // Opening on something else than the press: the hold, the right click.
+      // Declared on the picker itself, as the caller would declare their own,
+      // so it is read and arbitrated like any other gesture — a swipe on the
+      // same card takes the press a hold would have taken — and gated like one:
+      // a read-only picker refuses it where the finger is. The press is then
+      // nobody's: a tap on the card opens nothing (see the two reactions
+      // below), and the keyboard keeps its own ways in (the shortcuts above).
+      const openOnList = Array.isArray(openOn) ? openOn : [openOn];
+      const opensOnPress = openOnList.includes("press");
+      let interactions = props.interactions;
+      if (!opensOnPress) {
+        interactions = {
+          ...interactions
+        };
+        for (const type of openOnList) {
+          interactions[type] = e => {
+            requestOpen(e);
+          };
+        }
+        pickerProps.interactions = interactions;
+        pickerProps["data-open-on"] = openOnList.join(" ");
+      }
+      const interactionsDispute = interactionsDisputeThePress(interactions);
       Object.assign(pickerProps, {
         eventReactionDefinitions: {
           mouseDown: e => {
@@ -63028,7 +63056,7 @@ const PickerCustom = props => {
             // because that is where such a box says what it travels by — and
             // asked at every press, since what the picker sits in is not the
             // picker's to know at mount.
-            if (interactionsDispute || isPressDisputedByDrag(e.target)) {
+            if (!opensOnPress || interactionsDispute || isPressDisputedByDrag(e.target)) {
               return null;
             }
             return {
@@ -63045,6 +63073,11 @@ const PickerCustom = props => {
             if (isWithinPickerContent(e.target)) {
               return null;
             }
+            if (!opensOnPress) {
+              // Neither the tap, nor the click a hold leaves behind: the press
+              // is not what opens this picker.
+              return null;
+            }
             // When a label is clicked it transfers focus to the select
             // in that case we want to open it (otherwise we have already opened on mousedown interaction)
             // And when a gesture disputes the press (see the two disputes
@@ -63125,7 +63158,12 @@ const PickerContentInsidePopup = props => {
     // itself, and this one does not. Popover ignores it, same as Dialog ignores
     // marginWithAnchor.
     dockedOnSmallTouchScreen,
+    // Same again: the dialog takes the trigger's box as a floor (and, with
+    // dialogMaxWidth="var(--anchor-width)", as a ceiling) — what keeps a card
+    // its own width once lifted. Dialog's own `sizeFromAnchor`.
+    dialogSizeFromAnchor,
     animation,
+    animationDuration,
     // mode="callout": what the callout says about what it holds, and paints
     // in its border and icon — "none" for a plain tooltip (see the callout
     // defaults in PickerCustomResolver). And whether it wears a cross: without
@@ -63186,6 +63224,7 @@ const PickerContentInsidePopup = props => {
       mode: mode,
       layer: popupLayer,
       animation: animation,
+      animationDuration: animationDuration,
       positionArea: isPopover ? positionArea ?? (popoverMode === "nearby" ? "bottom-start" : "inset(top-left)") : positionArea,
       marginWithAnchor: isPopover ? popoverSpacing : undefined,
       marginWithContainer: marginWithContainer === undefined && isPopover ? popoverSpacing : marginWithContainer,
@@ -63200,6 +63239,7 @@ const PickerContentInsidePopup = props => {
       expandX: isPopover ? undefined : dialogExpandX,
       expandY: isPopover ? undefined : dialogExpandY,
       dockedOnSmallTouchScreen: isPopover ? undefined : dockedOnSmallTouchScreen,
+      sizeFromAnchor: isPopover ? undefined : dialogSizeFromAnchor,
       children: jsx(PopupModeContext.Provider, {
         value: mode,
         children: children
@@ -65890,209 +65930,6 @@ const ListFirstResolver = props => {
     })
   });
 };
-
-/**
- * List — generic virtualized scroll container.
- * Items must use <List.Item> to participate in tracking.
- *
- * @type {import("ignore:preact").FunctionComponent<{
- *   selectable?: boolean,
- *   multiple?: boolean,
- *   deselectable?: boolean,
- *   maxLength?: number,
- *   maxLengthGuard?: number,
- *   parallelGuard?: number,
- *   standalone?: boolean,
- *   action?: (value: any) => void,
- *   uiAction?: (value: any) => void,
- *   popover?: boolean,
- *   role?: string,
- *   renderBudget?: number | string,
- *   renderBudgetSkipCheck?: boolean,
- *   virtualItemSize?: number,
- *   onListVisibleItemsChange?: (visibleItems: any[]) => void,
- *   scrolled?: "start" | "end" | number | {id: string, offset?: number},
- *   defaultScrolled?: "start" | "end" | number | {id: string, offset?: number},
- *   onScrolledChange?: (scrolled: {id: string, index: number, offset: number}) => void,
- *   scroller?: "self" | "parent" | "document" | Element | {current: Element},
- *   hoverWhileScrolling?: boolean,
- *   fallback?: import("ignore:preact").ComponentChildren,
- *   searchFallback?: import("ignore:preact").ComponentChildren,
- *   searchText?: string,
- *   searchNoMatchMode?: "remove" | "invisible_and_inert" | "muted",
- *   loading?: boolean,
- *   loadingFallback?: "skeleton" | "loader" | import("ignore:preact").ComponentChildren,
- *   loadingSkeletonCount?: number,
- *   renderSkeleton?: false | ((index: number) => import("ignore:preact").ComponentChildren),
- *   error?: boolean | import("ignore:preact").ComponentChildren,
- *   separator?: boolean | import("ignore:preact").ComponentChildren,
- *   itemTransition?: boolean,
- *   lockSize?: boolean,
- *   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
- *   place, an arriving row appearing where it lands — instead of the list
- *   cross-fading as a block. The rows are drawn inside the list's own picture,
- *   so one coming from outside the visible part of the list is cut at the list's
- *   edge like any other overflow. Requires nested view transition groups
- *   (Chrome/Edge 140+): elsewhere the rows are left unnamed and the change
- *   simply happens — but the browser still names the document root, so the page
- *   cross-fades as a whole unless the application says otherwise, which is its
- *   call and not the list's:
- *   ```css
- *   @supports not (view-transition-group: contain) {
- *     :root { view-transition-name: none; }
- *   }
- *   ```
- * @param {false|((index: number) => any)} [props.renderSkeleton]
- *   What a row on its way looks like — a row of the shape the real ones will
- *   have, so nothing moves when they arrive. Used for the rows a `<List.Items>`
- *   stands for and does not hold yet, and for the placeholder rows drawn while
- *   the whole list is `loading`. Defaults to a bare `<List.Item skeleton>`.
- * @param {"skeleton"|"loader"|import("ignore:preact").ComponentChildren} [props.loadingFallback="skeleton"]
- *   What to display in place of the items while `loading` — that is, while
- *   there is nothing to show at all: `"skeleton"` renders
- *   `loadingSkeletonCount` placeholder rows (look:
- *   `renderSkeleton`), `"loader"` a single centered spinner, and
- *   anything else is rendered as-is in a row of its own. A falsy value
- *   displays nothing. A list that knows how many rows it will have has no use
- *   for this — see `<List.Items count>`, whose not-yet-loaded rows are drawn
- *   as skeletons in place, one per row, virtualized like the rest.
- * @param {number} [props.loadingSkeletonCount=3]
- *   How many placeholder rows `loadingFallback="skeleton"` draws. `0` says the
- *   list is already known to be empty: the empty `fallback` shows right away
- *   rather than an empty frame, so nothing moves when the response arrives.
- * @param {"start"|"end"|number|{id: string, offset?: number}} [props.defaultScrolled="start"]
- *   Where the list opens, after which the user owns the scroll. `"end"` is a
- *   thread read backwards — the last rows are the ones to show, and the ones
- *   asked for first. A number opens on that row of the collection. `{id,
- *   offset}` — what `onScrolledChange` hands out — opens on a NAMED row,
- *   `offset` pixels below where the row would land on its own: the row is asked
- *   for by name (see the range's own `around`), then put back by MEASURING it,
- *   so it lands where it was even if rows were inserted before it, and whatever
- *   the screen it was saved on. `offset: 0` is where a `scrollIntoView()` puts
- *   it — in front of the fixed bar the scroller gives room for, below the
- *   sticky header and the group label the row lives under — so nothing of that
- *   room has to be restated as a number by whoever asks.
- * @param {"start"|"end"|number|{id: string, offset?: number}} [props.scrolled]
- *   The same, but held: the list goes back there every time this changes, even
- *   after the user has scrolled — the caller owns where the list is (see
- *   `defaultScrolled` for the uncontrolled form, and `open`/`defaultOpen`
- *   elsewhere in navi for the same pair). When the named row turns out not to
- *   exist — a message deleted since — the list opens at `defaultScrolled`
- *   instead.
- *
- *   In every form the list holds itself there while it is still finding out
- *   how many rows there are and how tall one is, and lets go the moment the
- *   user reaches for the list.
- * @param {(scrolled: {id: string, index: number, offset: number}) => void} [props.onScrolledChange]
- *   Where the list is, as the user scrolls: the row at the top of the view and
- *   how far below the place a row lands on its own (see `defaultScrolled`) it
- *   starts. Keep it to come back to it
- *   later through `scrolled`/`defaultScrolled` — an index would not do, since
- *   rows get inserted while a list is being read.
- * @param {"self"|"parent"|"document"|Element|{current: Element}} [props.scroller="self"]
- *   Which box scrolls. `"self"` gives the list a scroll box of its own;
- *   `"parent"` makes it virtualize against the scrollable ancestor it lives in
- *   (the page, a panel) — no scroll box nested inside another one, no height
- *   to compute.
- *
- *   `"parent"` finds that ancestor by measuring: the nearest one whose content
- *   actually overflows it, the page if none does. Declaring `overflow` is not
- *   enough to be picked (a box with `overflow-x: auto` that grows with its
- *   content computes `overflow-y: auto` without ever scrolling), and the
- *   answer is taken again as the geometry moves, so an ancestor that starts to
- *   scroll once it fills up is picked up then. When that is still not the box
- *   you mean, say so: `"document"`, or the element itself (a ref works) —
- *   nothing is guessed then.
- * @param {boolean} [props.hoverWhileScrolling=false]
- *   Whether the rows still answer the pointer while the scroller they live in
- *   is moving. They do not by default: a scroll slides the rows under a
- *   motionless pointer, so the browser reports a hover on each of them, and
- *   the user asked to scroll, not to hover. The cost of taking them at face
- *   value is paid by whatever hover triggers — a highlight elsewhere in the
- *   tree, a prefetch, a map — at the worst moment, mid-scroll.
- *
- *   Pass `true` for a list whose rows must stay live under the pointer while
- *   it scrolls. The trade of the default is the mirror one: right after a
- *   scroll, the row under the pointer lights up only once the pointer moves.
- * @param {boolean} [props.deselectable]
- *   A single-select list allowed to hold nothing: the selected row, pressed
- *   again, lets go. Without it the list is a radio group — a choice, once
- *   made, moves to another row but never goes away. A `multiple` list toggles
- *   its rows already.
- * @param {number} [props.maxLength]
- *   How many items a `selectable multiple` list accepts — the same word, and
- *   the same behaviour, as `maxLength` on a text field: a rule the list is
- *   judged against, not a wall. A longer selection is allowed to exist and is
- *   reported as invalid, which is what lets a value coming from elsewhere (an
- *   API, a URL) be shown and then corrected.
- * @param {number} [props.maxLengthGuard]
- *   The same limit, enforced as the selection is made: while the list holds as
- *   many items as it accepts, the ones not selected go read-only — still
- *   pointable, focusable and pressable, answering `"[max] max."` instead of
- *   taking — and `uiAction` is not called. The selected ones stay takeable
- *   back, so a selection that arrived too long can always be brought back
- *   under the limit. Implies `maxLength` for validity.
- * @param {number} [props.parallelGuard=4]
- *   How many runs the rows may have in flight at once, for a list whose rows
- *   carry their own `action` (a button per row). While that many are out, every
- *   row that is not running goes read-only and says how many it is waiting on;
- *   the next press is possible again as soon as one comes back. `Infinity`
- *   lifts it. Counts runs, not values — `maxLengthGuard` above is the one that
- *   says how many things the selection may hold.
- * @param {boolean} [props.standalone]
- *   This list answers for itself: it does not register with the control group
- *   or picker around it, so its selection stays out of that value and nothing
- *   coming down — a distributed value, a reset — reaches it. What a popup whose
- *   one answer is spread over several lists says, so that none of them is taken
- *   for the answer itself.
- */
-const List = createComponentResolver([ListFirstResolver, ListSelectableResolver, ListUI]);
 const ListContent = ({
   role,
   fallback,
@@ -68358,14 +68195,13 @@ const LIST_ITEM_STYLE_CSS_VARS = {
  *   search-driven scroll-to-top-match behavior. `matchRanges` are [start, end]
  *   ranges highlighted via the CSS Highlight API.
  */
-const ListItem = createComponentResolver([ListItemFirstResolver, ListItemRowResolver, ListItemSkeletonResolver, ListItemSelectableResolver, ListItemHeaderOrFooterResolver, ListItemPresentationResolver, ListItemUI],
+const ListItem = /*#__PURE__*/createComponentResolver([ListItemFirstResolver, ListItemRowResolver, ListItemSkeletonResolver, ListItemSelectableResolver, ListItemHeaderOrFooterResolver, ListItemPresentationResolver, ListItemUI],
 // Rendered by the hundred, and almost always with the same primitive props:
 // a selection change re-renders the list, and every row but two has nothing
 // to change.
 {
   pure: true
 });
-List.Item = ListItem;
 
 // Everything the list knows about the collection while its children are being
 // rendered: how many rows it has in total, which of them are actually held, and
@@ -69125,7 +68961,6 @@ const ListItems = ({
   }
   return rows;
 };
-List.Items = ListItems;
 
 // What is drawn where rows were asked for and never came: the sentence and the
 // way out, in the row itself — the rest of the list is fine, so replacing all
@@ -69735,6 +69570,219 @@ const resolveSeparatorVnode = (separator, gapIndex) => {
   }
   return separator;
 };
+const ListResolved = /*#__PURE__*/createComponentResolver([ListFirstResolver, ListSelectableResolver, ListUI]);
+
+// Declared last because Item and Items are consts defined above, and they are
+// folded into the declaration rather than written onto List afterwards
+// (`List.Item = ListItem`): List is what createComponentResolver returns, an
+// object a bundler cannot see through, so a property assigned to it later is a
+// side effect it has to keep — and with it List, its rows and everything they
+// import, in a bundle that never renders a list. See Picker for the same shape.
+/**
+ * List — generic virtualized scroll container.
+ * Items must use <List.Item> to participate in tracking.
+ *
+ * @type {import("ignore:preact").FunctionComponent<{
+ *   selectable?: boolean,
+ *   multiple?: boolean,
+ *   deselectable?: boolean,
+ *   maxLength?: number,
+ *   maxLengthGuard?: number,
+ *   parallelGuard?: number,
+ *   standalone?: boolean,
+ *   action?: (value: any) => void,
+ *   uiAction?: (value: any) => void,
+ *   popover?: boolean,
+ *   role?: string,
+ *   renderBudget?: number | string,
+ *   renderBudgetSkipCheck?: boolean,
+ *   virtualItemSize?: number,
+ *   onListVisibleItemsChange?: (visibleItems: any[]) => void,
+ *   scrolled?: "start" | "end" | number | {id: string, offset?: number},
+ *   defaultScrolled?: "start" | "end" | number | {id: string, offset?: number},
+ *   onScrolledChange?: (scrolled: {id: string, index: number, offset: number}) => void,
+ *   scroller?: "self" | "parent" | "document" | Element | {current: Element},
+ *   hoverWhileScrolling?: boolean,
+ *   fallback?: import("ignore:preact").ComponentChildren,
+ *   searchFallback?: import("ignore:preact").ComponentChildren,
+ *   searchText?: string,
+ *   searchNoMatchMode?: "remove" | "invisible_and_inert" | "muted",
+ *   loading?: boolean,
+ *   loadingFallback?: "skeleton" | "loader" | import("ignore:preact").ComponentChildren,
+ *   loadingSkeletonCount?: number,
+ *   renderSkeleton?: false | ((index: number) => import("ignore:preact").ComponentChildren),
+ *   error?: boolean | import("ignore:preact").ComponentChildren,
+ *   separator?: boolean | import("ignore:preact").ComponentChildren,
+ *   itemTransition?: boolean,
+ *   lockSize?: boolean,
+ *   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
+ *   place, an arriving row appearing where it lands — instead of the list
+ *   cross-fading as a block. The rows are drawn inside the list's own picture,
+ *   so one coming from outside the visible part of the list is cut at the list's
+ *   edge like any other overflow. Requires nested view transition groups
+ *   (Chrome/Edge 140+): elsewhere the rows are left unnamed and the change
+ *   simply happens — but the browser still names the document root, so the page
+ *   cross-fades as a whole unless the application says otherwise, which is its
+ *   call and not the list's:
+ *   ```css
+ *   @supports not (view-transition-group: contain) {
+ *     :root { view-transition-name: none; }
+ *   }
+ *   ```
+ * @param {false|((index: number) => any)} [props.renderSkeleton]
+ *   What a row on its way looks like — a row of the shape the real ones will
+ *   have, so nothing moves when they arrive. Used for the rows a `<List.Items>`
+ *   stands for and does not hold yet, and for the placeholder rows drawn while
+ *   the whole list is `loading`. Defaults to a bare `<List.Item skeleton>`.
+ * @param {"skeleton"|"loader"|import("ignore:preact").ComponentChildren} [props.loadingFallback="skeleton"]
+ *   What to display in place of the items while `loading` — that is, while
+ *   there is nothing to show at all: `"skeleton"` renders
+ *   `loadingSkeletonCount` placeholder rows (look:
+ *   `renderSkeleton`), `"loader"` a single centered spinner, and
+ *   anything else is rendered as-is in a row of its own. A falsy value
+ *   displays nothing. A list that knows how many rows it will have has no use
+ *   for this — see `<List.Items count>`, whose not-yet-loaded rows are drawn
+ *   as skeletons in place, one per row, virtualized like the rest.
+ * @param {number} [props.loadingSkeletonCount=3]
+ *   How many placeholder rows `loadingFallback="skeleton"` draws. `0` says the
+ *   list is already known to be empty: the empty `fallback` shows right away
+ *   rather than an empty frame, so nothing moves when the response arrives.
+ * @param {"start"|"end"|number|{id: string, offset?: number}} [props.defaultScrolled="start"]
+ *   Where the list opens, after which the user owns the scroll. `"end"` is a
+ *   thread read backwards — the last rows are the ones to show, and the ones
+ *   asked for first. A number opens on that row of the collection. `{id,
+ *   offset}` — what `onScrolledChange` hands out — opens on a NAMED row,
+ *   `offset` pixels below where the row would land on its own: the row is asked
+ *   for by name (see the range's own `around`), then put back by MEASURING it,
+ *   so it lands where it was even if rows were inserted before it, and whatever
+ *   the screen it was saved on. `offset: 0` is where a `scrollIntoView()` puts
+ *   it — in front of the fixed bar the scroller gives room for, below the
+ *   sticky header and the group label the row lives under — so nothing of that
+ *   room has to be restated as a number by whoever asks.
+ * @param {"start"|"end"|number|{id: string, offset?: number}} [props.scrolled]
+ *   The same, but held: the list goes back there every time this changes, even
+ *   after the user has scrolled — the caller owns where the list is (see
+ *   `defaultScrolled` for the uncontrolled form, and `open`/`defaultOpen`
+ *   elsewhere in navi for the same pair). When the named row turns out not to
+ *   exist — a message deleted since — the list opens at `defaultScrolled`
+ *   instead.
+ *
+ *   In every form the list holds itself there while it is still finding out
+ *   how many rows there are and how tall one is, and lets go the moment the
+ *   user reaches for the list.
+ * @param {(scrolled: {id: string, index: number, offset: number}) => void} [props.onScrolledChange]
+ *   Where the list is, as the user scrolls: the row at the top of the view and
+ *   how far below the place a row lands on its own (see `defaultScrolled`) it
+ *   starts. Keep it to come back to it
+ *   later through `scrolled`/`defaultScrolled` — an index would not do, since
+ *   rows get inserted while a list is being read.
+ * @param {"self"|"parent"|"document"|Element|{current: Element}} [props.scroller="self"]
+ *   Which box scrolls. `"self"` gives the list a scroll box of its own;
+ *   `"parent"` makes it virtualize against the scrollable ancestor it lives in
+ *   (the page, a panel) — no scroll box nested inside another one, no height
+ *   to compute.
+ *
+ *   `"parent"` finds that ancestor by measuring: the nearest one whose content
+ *   actually overflows it, the page if none does. Declaring `overflow` is not
+ *   enough to be picked (a box with `overflow-x: auto` that grows with its
+ *   content computes `overflow-y: auto` without ever scrolling), and the
+ *   answer is taken again as the geometry moves, so an ancestor that starts to
+ *   scroll once it fills up is picked up then. When that is still not the box
+ *   you mean, say so: `"document"`, or the element itself (a ref works) —
+ *   nothing is guessed then.
+ * @param {boolean} [props.hoverWhileScrolling=false]
+ *   Whether the rows still answer the pointer while the scroller they live in
+ *   is moving. They do not by default: a scroll slides the rows under a
+ *   motionless pointer, so the browser reports a hover on each of them, and
+ *   the user asked to scroll, not to hover. The cost of taking them at face
+ *   value is paid by whatever hover triggers — a highlight elsewhere in the
+ *   tree, a prefetch, a map — at the worst moment, mid-scroll.
+ *
+ *   Pass `true` for a list whose rows must stay live under the pointer while
+ *   it scrolls. The trade of the default is the mirror one: right after a
+ *   scroll, the row under the pointer lights up only once the pointer moves.
+ * @param {boolean} [props.deselectable]
+ *   A single-select list allowed to hold nothing: the selected row, pressed
+ *   again, lets go. Without it the list is a radio group — a choice, once
+ *   made, moves to another row but never goes away. A `multiple` list toggles
+ *   its rows already.
+ * @param {number} [props.maxLength]
+ *   How many items a `selectable multiple` list accepts — the same word, and
+ *   the same behaviour, as `maxLength` on a text field: a rule the list is
+ *   judged against, not a wall. A longer selection is allowed to exist and is
+ *   reported as invalid, which is what lets a value coming from elsewhere (an
+ *   API, a URL) be shown and then corrected.
+ * @param {number} [props.maxLengthGuard]
+ *   The same limit, enforced as the selection is made: while the list holds as
+ *   many items as it accepts, the ones not selected go read-only — still
+ *   pointable, focusable and pressable, answering `"[max] max."` instead of
+ *   taking — and `uiAction` is not called. The selected ones stay takeable
+ *   back, so a selection that arrived too long can always be brought back
+ *   under the limit. Implies `maxLength` for validity.
+ * @param {number} [props.parallelGuard=4]
+ *   How many runs the rows may have in flight at once, for a list whose rows
+ *   carry their own `action` (a button per row). While that many are out, every
+ *   row that is not running goes read-only and says how many it is waiting on;
+ *   the next press is possible again as soon as one comes back. `Infinity`
+ *   lifts it. Counts runs, not values — `maxLengthGuard` above is the one that
+ *   says how many things the selection may hold.
+ * @param {boolean} [props.standalone]
+ *   This list answers for itself: it does not register with the control group
+ *   or picker around it, so its selection stays out of that value and nothing
+ *   coming down — a distributed value, a reset — reaches it. What a popup whose
+ *   one answer is spread over several lists says, so that none of them is taken
+ *   for the answer itself.
+ */
+const List = /*#__PURE__*/Object.assign(ListResolved, {
+  Item: ListItem,
+  Items: ListItems
+});
 
 const PickerNaviTime = props => {
   const Next = useNextResolver();
@@ -70667,7 +70715,7 @@ const PickerObject = props => {
     "navi-state-shape": "object"
   });
 };
-const PickerObjectUI = asPickerOwnUI(() => {
+const PickerObjectUI = /*#__PURE__*/asPickerOwnUI(() => {
   const {
     value,
     placeholder
@@ -70702,7 +70750,7 @@ const PickerArray = props => {
     "navi-state-shape": "array"
   });
 };
-const PickerArrayUI = asPickerOwnUI(() => {
+const PickerArrayUI = /*#__PURE__*/asPickerOwnUI(() => {
   const {
     value,
     placeholder,
@@ -70785,7 +70833,7 @@ const PickerColor = props => {
     ...props
   });
 };
-const PickerColorUI = asPickerOwnUI(() => {
+const PickerColorUI = /*#__PURE__*/asPickerOwnUI(() => {
   const {
     value,
     placeholder
@@ -70809,7 +70857,7 @@ const PickerDate = props => {
     type: "date"
   });
 };
-const PickerDateUI = asPickerOwnUI(props => {
+const PickerDateUI = /*#__PURE__*/asPickerOwnUI(props => {
   const {
     value,
     placeholder
@@ -70841,7 +70889,7 @@ const PickerMonth = props => {
     type: "month"
   });
 };
-const PickerMonthUI = asPickerOwnUI(props => {
+const PickerMonthUI = /*#__PURE__*/asPickerOwnUI(props => {
   const {
     value,
     placeholder
@@ -70872,7 +70920,7 @@ const PickerWeek = props => {
     type: "week"
   });
 };
-const PickerWeekUI = asPickerOwnUI(props => {
+const PickerWeekUI = /*#__PURE__*/asPickerOwnUI(props => {
   const {
     value,
     placeholder
@@ -70903,7 +70951,7 @@ const PickerTime = props => {
     type: "time"
   });
 };
-const PickerTimeUI = asPickerOwnUI(props => {
+const PickerTimeUI = /*#__PURE__*/asPickerOwnUI(props => {
   const {
     value,
     placeholder
@@ -70934,7 +70982,7 @@ const PickerDuration = props => {
     "navi-input-type": "duration"
   });
 };
-const PickerDurationUI = asPickerOwnUI(props => {
+const PickerDurationUI = /*#__PURE__*/asPickerOwnUI(props => {
   const {
     value,
     placeholder
@@ -70964,7 +71012,7 @@ const PickerDatetime = props => {
     type: "datetime-local"
   });
 };
-const PickerDatetimeUI = asPickerOwnUI(props => {
+const PickerDatetimeUI = /*#__PURE__*/asPickerOwnUI(props => {
   const {
     value,
     placeholder
@@ -70993,7 +71041,7 @@ const PickerFile = props => {
     ...props
   });
 };
-const PickerFileUI = asPickerOwnUI(() => {
+const PickerFileUI = /*#__PURE__*/asPickerOwnUI(() => {
   const {
     value,
     placeholder
@@ -71209,6 +71257,11 @@ const css$t = /* css */`@layer navi {
     }
   }
 
+  &[data-open-on~="longpress"] {
+    -webkit-touch-callout: none;
+    user-select: none;
+  }
+
   &[navi-ui-custom] {
     & .navi_picker_input {
       top: calc(-1 * (var(--picker-border-width) + var(--x-picker-press-padding-top)));
@@ -72037,6 +72090,7 @@ const PickerStyleCSSVars = {
   "dialogMaxHeight": ["--picker-dialog-max-height", "maxHeight"],
   "popupBackgroundColor": "--picker-popup-background-color",
   "popupBorderRadius": ["--picker-popup-border-radius", "borderRadius"],
+  "popupBoxShadow": ["--picker-popup-box-shadow", "boxShadow"],
   "dialogBorderWidth": ["--picker-dialog-border-width", "borderWidth"],
   "slotSpacing": ["--picker-slot-spacing", "margin"],
   "pressPadding": ["--picker-press-padding", "padding"],
@@ -72134,6 +72188,9 @@ const PickerFirstResolver = props => {
  *   action?: (value: any, event: Event) => void,
  *   children?: import("ignore:preact").ComponentChildren,
  *   mode?: "popover" | "dialog" | "callout",
+ *   openOn?: "press" | "longpress" | "contextmenu" | string | string[],
+ *   animation?: boolean | "auto" | "fading" | "scaling" | "sliding" | "growing" | `slide-from-${string}`,
+ *   animationDuration?: string,
  *   calloutStatus?: "info" | "warning" | "error" | "success" | "none",
  *   calloutIcon?: boolean,
  *   calloutCloseButton?: boolean,
@@ -72164,6 +72221,7 @@ const PickerFirstResolver = props => {
  *   dialogMaxHeight?: number | string,
  *   popupBackgroundColor?: string,
  *   popupBorderRadius?: number | string,
+ *   popupBoxShadow?: string,
  *   dialogBorderWidth?: number | string,
  *   clearable?: boolean,
  *   picksNothing?: boolean,
@@ -72176,6 +72234,7 @@ const PickerFirstResolver = props => {
  *   dialogExpand?: boolean,
  *   dialogExpandX?: boolean,
  *   dialogExpandY?: boolean,
+ *   dialogSizeFromAnchor?: boolean,
  *   marginWithContainer?: number | string,
  *   anchor?: import("ignore:preact").RefObject<HTMLElement> | HTMLElement,
  *   escapeEffect?: "cancel" | "close",
@@ -72193,6 +72252,23 @@ const PickerFirstResolver = props => {
  *   variant that paints the trigger transparent leaves the popup a real sheet.
  * @param {number|string} [popupBorderRadius] The popup's corners. Left out they
  *   echo the trigger's `borderRadius`.
+ * @param {string} [popupBoxShadow] The popup's shadow, popover or dialog. Left
+ *   out it is the one every navi popup casts. `"none"` for a popup that is
+ *   not a sheet — a card lifted out of a page draws its own edges, and the
+ *   popup only carries it (see `dialogSizeFromAnchor`).
+ * @param {"press"|"longpress"|"contextmenu"|string|string[]} [openOn="press"]
+ *   What opens the popup. The press, by default — the way a native select
+ *   opens. Any other name is an interaction navi detects (see
+ *   docs/interactions.md: `"longpress"`, `"contextmenu"`, `"dblclick"`…), or
+ *   a list of them — `["longpress", "contextmenu"]` is the hold on a phone and
+ *   the right click at a desk. The picker declares it on itself, so it is
+ *   arbitrated like any other gesture: a swipe on the same card takes the
+ *   press a hold would have taken. A tap then opens nothing — the press stays
+ *   free for what the `ui` holds, which is what lets a whole card be a picker
+ *   without every touch on it opening the sheet — and the keyboard keeps its
+ *   ways in (Enter, Space, the arrows). Being a gesture, the open goes through
+ *   the interaction gate as one: a `readOnly` picker refuses it and says so
+ *   where the finger is, whatever `openWhileReadOnly` says.
  * @param {import("ignore:preact").ComponentChildren | "default"} [ui] What the
  *   trigger draws in place of the value's default rendering (a date, a list
  *   joined by commas…) — and then all it draws: `placeholder` is not shown
@@ -72304,7 +72380,14 @@ const PickerFirstResolver = props => {
  * @param {boolean} [picksNothing] The popup asks something rather than holding
  *   an answer, so the trigger draws a label and never a value: no chevron, no
  *   clear cross, in any variant. `type="confirm"` says it for itself; say it
- *   for a popup of your own that is a menu of actions rather than a choice.
+ *   for a popup of your own that is a menu of actions rather than a choice —
+ *   or a DOOR: a drawing that grows to be looked at (a weather scene, a plan),
+ *   with no `action` at all. The picker is then a trigger and a popup, and
+ *   nothing more: its close does nothing, and what it keeps from being a
+ *   control is what a door still needs — the role of a button, the keyboard
+ *   opening it, the anchor being itself, and one popup per instance without
+ *   an id to wire. See "The trigger wears the wait" in docs/popup_open.md for
+ *   when that beats a `Button` opening a shared `Dialog`.
  * @param {string|import("ignore:preact").ComponentChildren} [clearConfirm] The
  *   question asked before the clear cross clears anything — the `message` of
  *   the `<Picker type="confirm">` the cross then is, plain text or JSX. Asked
@@ -72411,6 +72494,21 @@ const PickerFirstResolver = props => {
  *   a dialog docked by `dockedOnSmallTouchScreen` withdraws it and stays
  *   container-wide, so both can be stated at once.
  * @param {number|string} [dialogMaxHeight] Same, on the height.
+ * @param {boolean|"auto"|"fading"|"scaling"|"sliding"|"growing"|`slide-from-${string}`} [animation]
+ *   The popup's own (see Popover/Dialog). `"growing"` is the one a picker
+ *   whose `ui` is a whole piece of the page wants: the popup is the browser
+ *   morphing the trigger's box into what carries `data-grow` inside the popup
+ *   (the popup itself when nothing does), and back on close. The trigger IS
+ *   the anchor, so nothing has to be named for it — see `dialogSizeFromAnchor`
+ *   for a card that must keep its width on the way, and leave it out for a
+ *   drawing that opens precisely to get bigger.
+ * @param {string} [animationDuration] The popup's own (`--popup-animation-duration`).
+ * @param {boolean} [dialogSizeFromAnchor] Dialog mode: the dialog takes the
+ *   trigger's box as a floor (`--anchor-width`/`--anchor-height`, Dialog's
+ *   own `sizeFromAnchor`) — and, with `dialogMaxWidth="var(--anchor-width)"`,
+ *   as a ceiling too. That pair is what keeps a card its own width once
+ *   lifted out of the page (`animation="growing"`, with `data-grow` on the
+ *   card inside the popup): it moves, and nothing else about it changes.
  * @param {"cancel"|"close"} [escapeEffect="cancel"] What Escape does to an open
  *   picker. "cancel" puts back the value the picker had at open, and a dialog
  *   picker also goes back in history — so anything written to the url while it
@@ -72549,26 +72647,37 @@ const warnOnUnknownPickerType = props => {
   pickerTypeWarnedSet.add(type);
   console.warn(`[navi] <Picker type="${type}"> — "${type}" is not a picker type. ` + `The picker holds a single text value instead, so an object given to it is written as "[object Object]". ` + `Types are: date, month, week, time, datetime, duration, color, file, text, array, object, confirm — ` + `"object" being the one for a popup holding several named controls.`);
 };
-const Picker = createComponentResolver([PickerFirstResolver, PickerPresetResolver, PickerConfirmResolver, PickerCustomResolver, PickerTypeResolver, PickerButton]);
-Picker.Chip = PickerChip;
-Picker.Clear = PickerClear;
-Picker.UI = PickerDefaultUI;
-Picker.UI.Date = PickerDateUI;
-Picker.UI.Time = PickerTimeUI;
-Picker.UI.Duration = PickerDurationUI;
-Picker.UI.Week = PickerWeekUI;
-Picker.UI.Datetime = PickerDatetimeUI;
-Picker.UI.File = PickerFileUI;
-Picker.UI.Color = PickerColorUI;
-Picker.UI.Object = PickerObjectUI;
-Picker.UI.Multiple = PickerArrayUI;
-Picker.UI.PencilSvg = PencilSvg;
-Picker.UI.ChevronDownSvg = ChevronDownSvg$1;
-Picker.UI.ClockSvg = ClockSvg;
-Picker.UI.DurationSvg = DurationSvg;
-Picker.UI.CalendarSvg = CalendarSvg;
-Picker.UI.FileSvg = FileSvg;
-Picker.UI.ColorSvg = ColorSvg;
+const PickerResolved = /*#__PURE__*/createComponentResolver([PickerFirstResolver, PickerPresetResolver, PickerConfirmResolver, PickerCustomResolver, PickerTypeResolver, PickerButton]);
+const PickerUI = /*#__PURE__*/Object.assign(PickerDefaultUI, {
+  Date: PickerDateUI,
+  Time: PickerTimeUI,
+  Duration: PickerDurationUI,
+  Week: PickerWeekUI,
+  Datetime: PickerDatetimeUI,
+  File: PickerFileUI,
+  Color: PickerColorUI,
+  Object: PickerObjectUI,
+  Multiple: PickerArrayUI,
+  PencilSvg,
+  ChevronDownSvg: ChevronDownSvg$1,
+  ClockSvg,
+  DurationSvg,
+  CalendarSvg,
+  FileSvg,
+  ColorSvg
+});
+
+// Assembled in pure expressions rather than written onto Picker afterwards
+// (`Picker.Chip = PickerChip`): what createComponentResolver returns is an object
+// a bundler cannot see through, so a property assigned to it later is a side
+// effect it has to keep — and with it Picker, every UI and everything they
+// import, in a bundle that never renders a picker. The annotations say these
+// calls only create and return; an unused Picker then disappears whole.
+const Picker = /*#__PURE__*/Object.assign(PickerResolved, {
+  Chip: PickerChip,
+  Clear: PickerClear,
+  UI: PickerUI
+});
 
 installImportMetaCssBuild(import.meta);
 const css$s = /* css */`@layer navi {
@@ -78548,7 +78657,7 @@ const useTableDragContextValue = ({
     };
   }, [grabTarget, canChangeColumnOrder]);
 };
-const TableDragCloneContainer = forwardRef((props, ref) => {
+const TableDragCloneContainer = /*#__PURE__*/forwardRef((props, ref) => {
   import.meta.css = [css$k, "@jsenv/navi/src/control/table/drag/table_drag.jsx"];
   const {
     tableId
@@ -78559,7 +78668,7 @@ const TableDragCloneContainer = forwardRef((props, ref) => {
     "data-overlay-for": tableId
   });
 });
-const TableColumnDropPreview = forwardRef((props, ref) => {
+const TableColumnDropPreview = /*#__PURE__*/forwardRef((props, ref) => {
   return jsxs("div", {
     ref: ref,
     className: "navi_table_column_drop_preview",
@@ -80655,7 +80764,7 @@ const css$f = /* css */`.navi_table_ui {
   overflow: hidden;
 }
 `;
-const TableUI = forwardRef((props, ref) => {
+const TableUI = /*#__PURE__*/forwardRef((props, ref) => {
   import.meta.css = [css$f, "@jsenv/navi/src/control/table/table_ui.jsx"];
   const {
     tableRef,