@ixfx/components 0.16.1 → 0.16.2

package/dist/vertical-list.d.ts

@@ -1,5 +1,5 @@
 import { B as ListNativeDragStartDetail, F as ListDragPreview, I as ListDragPreviewContext, L as ListDragPreviewRenderer, P as ListDragEntry, V as ListNativeDragStartEvent, z as ListDragSource } from "./tree-component-DgfkxmVY.js";
 import { n as ListViewportChangeEvent, t as ListViewportChangeDetail } from "./list-viewport-types-BRZsLcvp.js";
-import { a as ListItemClickDetail, c as ListSelectEvent, d as ListTickleEvent, i as ListInteractionMode, l as ListSelectionMode, n as ListActivateEvent, o as ListItemClickEvent, r as ListElementEventMap, s as ListSelectDetail, t as ListActivateDetail, u as ListTickleDetail } from "./list-selection-types-PjKdhF-a.js";
-import { a as VerticalListViewState, c as ListDragLeaveDetail, d as ListDropDetail, f as ListDropEvent, g as ListEditCommitEvent, h as ListEditCommitDetail, i as VerticalListElementEventMap, l as ListDragLeaveEvent, m as ListEditCancelEvent, n as CustomCheckboxOptions, o as ListContextMenuDetail, p as ListEditCancelDetail, r as VerticalListElement, s as ListContextMenuEvent, t as AddItemOptions, u as ListDragOverEvent } from "./vertical-list-SAx56U-l.js";
+import { a as ListItemClickDetail, c as ListSelectEvent, g as ListTickleEvent, h as ListTickleDetail, i as ListInteractionMode, m as ListSelectionMode, n as ListActivateEvent, o as ListItemClickEvent, r as ListElementEventMap, s as ListSelectDetail, t as ListActivateDetail } from "./list-selection-types-hj9Njei3.js";
+import { a as VerticalListViewState, c as ListDragLeaveDetail, d as ListDropDetail, f as ListDropEvent, g as ListEditCommitEvent, h as ListEditCommitDetail, i as VerticalListElementEventMap, l as ListDragLeaveEvent, m as ListEditCancelEvent, n as CustomCheckboxOptions, o as ListContextMenuDetail, p as ListEditCancelDetail, r as VerticalListElement, s as ListContextMenuEvent, t as AddItemOptions, u as ListDragOverEvent } from "./vertical-list-od4050Bo.js";
 export { AddItemOptions, CustomCheckboxOptions, type ListActivateDetail, type ListActivateEvent, type ListContextMenuDetail, type ListContextMenuEvent, type ListDragEntry, type ListDragLeaveDetail, type ListDragLeaveEvent, type ListDragOverEvent, type ListDragPreview, type ListDragPreviewContext, type ListDragPreviewRenderer, type ListDragSource, type ListDropDetail, type ListDropEvent, type ListEditCancelDetail, type ListEditCancelEvent, type ListEditCommitDetail, type ListEditCommitEvent, type ListElementEventMap, type ListInteractionMode, type ListItemClickDetail, type ListItemClickEvent, type ListNativeDragStartDetail, type ListNativeDragStartEvent, type ListSelectDetail, type ListSelectEvent, type ListSelectionMode, type ListTickleDetail, type ListTickleEvent, type ListViewportChangeDetail, type ListViewportChangeEvent, VerticalListElement, VerticalListElementEventMap, type VerticalListViewState };

package/dist/vertical-list.js

@@ -1,2 +1,2 @@
-import { t as VerticalListElement } from "./vertical-list-DyKPKGxK.js";
+import { t as VerticalListElement } from "./vertical-list-qMRIxZIT.js";
 export { VerticalListElement };

package/docs-user/data-grid.md

@@ -222,9 +222,16 @@ grid.tickleRow('r7');              // move the row cursor + scroll it into view
 grid.tickledKey;                   // row key under the cursor, or undefined
 ```
 
-The setter fires `datagrid-select` `{ selectedKeys, previous }` only when the
-selection actually changes. Selected rows that leave `rows` are deselected
-silently, and reselected if they return. See [View state](#view-state).
+The setter fires `datagrid-select` `{ selectedKeys, previous }` (and `list-select`
+`{ selectedKeys, previousKeys, previous }`, the name the other list components use)
+only when the selection actually changes. A cancelable `list-select-intent` fires
+before every selection gesture, and `partialKeys` marks partially selected rows
+(`data-partial`, indeterminate checkbox in `checked` mode).
+See [Selection intents, partial rows, unloaded keys](../../docs/infra-selection-intents.md): `list-select-intent`, `partialKeys`, and keys that arrive later.
+
+Selected rows that leave `rows` are deselected silently, and reselected if they
+return. See [View state](#view-state). In `checked` mode the row checkbox toggles
+the row.
 
 ---
 

package/docs-user/detail-list.md

@@ -310,7 +310,7 @@ the Element API is unchanged, the key API is additive. Object items built from
 `items` / a provider get their key stamped automatically from `keyProperty`.
 
 ```typescript
-list.selectKeys(['row-3', 'row-7']);   // replace selection; unknown keys ignored
+list.selectKeys(['row-3', 'row-7']);   // replace selection; keys with no row yet apply when the row appears
 list.addSelectedKeys(['row-9']);       // multi-select modes only
 list.removeSelectedKeys(['row-3']);
 list.selectedKeys;                     // ReadonlySet<string>

package/docs-user/grid-list.md

@@ -183,7 +183,7 @@ See `docs-user/grid-list.md`.
 item, drive selection by key instead — additive, the Element API is unchanged.
 
 ```typescript
-grid.selectKeys(['a', 'c']);        // replace; unknown keys ignored
+grid.selectKeys(['a', 'c']);        // replace; keys with no cell yet apply when the cell appears
 grid.addSelectedKeys(['b']);        // multi-select modes only
 grid.removeSelectedKeys(['a']);
 grid.selectedKeys;                  // ReadonlySet<string>
@@ -193,6 +193,9 @@ grid.addEventListener('list-select', ({ detail }) => {
 });
 ```
 
+Caller-owned selection: a cancelable `list-select-intent` fires before every gesture, and `partialKeys` marks partially selected cells (`data-partial`, `part="item partial"`).
+See [Selection intents, partial rows, unloaded keys](../../docs/infra-selection-intents.md): `list-select-intent`, `partialKeys`, and keys that arrive later.
+
 Restore across a reload:
 
 ```typescript

package/docs-user/index.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
-  "version": "0.16.1",
-  "generated": "2026-10-26T15:36:19.925Z",
+  "version": "0.16.2",
+  "generated": "2026-11-02T19:16:08.207Z",
   "components": [
     {
       "name": "ac-text",

package/docs-user/menu.md

@@ -6,7 +6,7 @@ A custom menu system built on native HTML popovers with keyboard navigation, tic
 
 | Component | Description |
 |------------|-------------|
-| `ixfx-menu-bar` | Horizontal container for menu triggers; handles arrow-key navigation between top-level menus |
+| `ixfx-menu-bar` | Horizontal container for menu triggers; handles arrow-key navigation between top-level menus; while a menu is open, hovering another top-level trigger switches to its menu |
 | `ixfx-menu-trigger` | Button or slot that opens a menu popover. Modes: `trigger` (button), `dropdown` (slot-only), `context` (right-click) |
 | `ixfx-menu-container` | The popover panel holding menu items; manages keyboard focus and tickled state |
 | `ixfx-menu-item` | Basic menu item that dispatches a `command` event |
@@ -254,6 +254,16 @@ The trigger button and menu bar additionally expose a couple of underscore-prefi
 | `--_trigger-hover-bg` | `var(--surface-4)` | Trigger button hover background |
 | `--_trigger-hover-opacity` | `1` | Trigger button hover opacity |
 
+Public layout variables:
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--ixfx-button-padding` | `var(--space-s) var(--space-m)` | Padding of the default trigger button |
+| `--menu-max-height` | `min(60vh, 400px)` | Max height of a menu panel; taller menus scroll, with an edge fade |
+| `--menu-popup-offset` | `var(--space-xs)` | Distance between a trigger and its menu popup |
+| `--menu-bar-gap` | `var(--space-xs)` | Gap between top-level triggers in `ixfx-menu-bar` |
+| `--menu-bar-padding` | `var(--space-xs)` | Padding around the items in `ixfx-menu-bar` |
+
 The popup surface uses these from `popupSurfaceStyles`:
 
 | Variable | Description |

package/docs-user/vertical-list.md

@@ -441,7 +441,7 @@ unchanged — the key API is additive.
 ```
 
 ```typescript
-list.selectKeys(['a', 'c']);          // replace selection; unknown keys ignored
+list.selectKeys(['a', 'c']);          // replace selection; keys with no row yet apply when the row appears
 list.addSelectedKeys(['b']);          // multi-select modes only
 list.removeSelectedKeys(['a']);
 list.selectedKeys;                    // ReadonlySet<string>, e.g. Set { 'b', 'c' }
@@ -512,6 +512,7 @@ All events **bubble** and are **composed** (they cross shadow-DOM boundaries).
 | Event | Detail type | When fired |
 |---|---|---|
 | `list-select` | `ListSelectDetail` | Selection changes by any means |
+| `list-select-intent` | `ListSelectIntentDetail` | Cancelable; a gesture is about to change the selection (see below) |
 | `list-tickle` | `ListTickleDetail` | An item enters cursor focus (hover or keyboard navigation) |
 | `list-activate` | `ListActivateDetail` | User explicitly activates an item: Enter key or double-click |
 | `list-item-click` | `ListItemClickDetail` | Raw click or Enter on any item |
@@ -524,6 +525,8 @@ All events **bubble** and are **composed** (they cross shadow-DOM boundaries).
 type ListSelectDetail = {
   readonly selected: ReadonlySet<Element>;  // Current full selection
   readonly previous: ReadonlySet<Element>;  // Selection before this change
+  readonly selectedKeys: ReadonlySet<string>;
+  readonly previousKeys: ReadonlySet<string>;
 };
 
 type ListTickleDetail   = { readonly item: Element };
@@ -531,6 +534,11 @@ type ListActivateDetail = { readonly item: Element };
 type ListItemClickDetail = { readonly item: Element };
 ```
 
+### Caller-owned selection: `list-select-intent` and `partialKeys`
+
+`list-select-intent` is fired before any gesture changes the selection (in every `interactionMode`, including `manual`); `preventDefault()` means "I'll apply it". `partialKeys` marks rows as partially selected (`data-partial`, indeterminate checkbox in `checked` mode). Both are shared across the list-like components.
+See [Selection intents, partial rows, unloaded keys](../../docs/infra-selection-intents.md): `list-select-intent`, `partialKeys`, and keys that arrive later.
+
 ### Usage example
 
 ```typescript

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
   "type": "module",
-  "version": "0.16.1",
+  "version": "0.16.2",
   "packageManager": "pnpm@10.0.0",
   "description": "Web components for ixfx — Lit-based UI toolkit",
   "author": "Clint Heyer",

package/dist/item-appearance-BjcMyauw.js

@@ -1,29 +0,0 @@
-//#region src/common/item-appearance.ts
-/**
-* Shared helpers for the list components' per-item appearance hooks — the
-* per-item icon colour / text colour / badge that miller-list, detail-list,
-* grid-list, data-grid and vertical-list all accept.
-*
-* Every component takes these three features in its own idiom (plain fields
-* on a `TreeItem`, a property-name lookup, an adapter function, a nominated
-* column) but they all agree on what "not supplied" means, and on never
-* emitting an empty slot for an absent value.
-*/
-/**
-* Whether a per-item appearance value counts as "not supplied". `false` and
-* `''` are included so a consumer can clear a feature without rebuilding the
-* collection — e.g. `badge: flags && tagChip(flags.colour)`.
-*/
-function appearanceAbsent(value) {
-	return value === void 0 || value === null || value === false || value === ``;
-}
-/**
-* A usable CSS colour from a per-item value, or `undefined`. Non-strings and
-* empty strings are ignored rather than stringified, so a stray number or
-* `0` never lands in a `style` attribute.
-*/
-function appearanceColor(value) {
-	return typeof value === `string` && value.length > 0 ? value : void 0;
-}
-//#endregion
-export { appearanceColor as n, appearanceAbsent as t };

package/dist/list-selection-types-PjKdhF-a.d.ts

@@ -1,45 +0,0 @@
-//#region src/interaction/list-selection-types.d.ts
-type ListSelectionMode = `none` | `single` | `multiple`;
-/**
- * Controls how pointer and keyboard gestures map to selection changes.
- *
- * - `implicit`  — click always replaces selection (no modifier support)
- * - `standard`  — click replaces; Ctrl/Cmd+click toggles; Shift+click range-selects (multiple only)
- * - `manual`    — no auto-selection; drive state via select()/deselect()/clearSelection()
- * - `checked`   — every click toggles; implies multiple selection regardless of selectionMode
- * - `sticky`    — every tap/click toggles (no checkbox column); implies multiple selection, for touchscreens
- * - `vscode`    — like standard for clicks; Shift+Arrow extends range from the keyboard anchor
- *
- * Switching interactionMode clears the current selection.
- */
-type ListInteractionMode = `implicit` | `standard` | `manual` | `checked` | `sticky` | `vscode`;
-type ListSelectDetail = {
-  readonly selected: ReadonlySet<Element>;
-  readonly previous: ReadonlySet<Element>;
-  /**
-   * The selection as stable key strings (`data-key` / `data-value`). Empty
-   * when items carry no key. Additive to `selected`.
-   */
-  readonly selectedKeys: ReadonlySet<string>;
-};
-type ListTickleDetail = {
-  readonly item: Element;
-};
-type ListActivateDetail = {
-  readonly item: Element;
-};
-type ListItemClickDetail = {
-  readonly item: Element;
-};
-type ListSelectEvent = CustomEvent<ListSelectDetail>;
-type ListTickleEvent = CustomEvent<ListTickleDetail>;
-type ListActivateEvent = CustomEvent<ListActivateDetail>;
-type ListItemClickEvent = CustomEvent<ListItemClickDetail>;
-interface ListElementEventMap {
-  'list-select': ListSelectEvent;
-  'list-tickle': ListTickleEvent;
-  'list-activate': ListActivateEvent;
-  'list-item-click': ListItemClickEvent;
-}
-//#endregion
-export { ListItemClickDetail as a, ListSelectEvent as c, ListTickleEvent as d, ListInteractionMode as i, ListSelectionMode as l, ListActivateEvent as n, ListItemClickEvent as o, ListElementEventMap as r, ListSelectDetail as s, ListActivateDetail as t, ListTickleDetail as u };