@ixfx/components 0.17.1 → 0.18.1

package/dist/{vertical-list-BzeXehBt.d.ts → vertical-list-C4z3La0C.d.ts}

@@ -1,9 +1,10 @@
-import { L as ListDragPreviewRenderer, R as ListDragPreviewSourceResolver, V as ListNativeDragStartEvent } from "./tree-component-DNuzfo6R.js";
+import { i as ItemTagKeys, n as ItemTagBehaviour } from "./item-tags-Dz-jQq-4.js";
 import { a as ViewStateBase, t as GetViewStateOptions } from "./types-16GC5k1z.js";
+import { H as ListNativeDragStartEvent, P as ListDragDataTransferWriter, R as ListDragPreviewRenderer, z as ListDragPreviewSourceResolver } from "./tree-component-BE7OEIiH.js";
 import { h as ListSelectionMode, i as ListInteractionMode, r as ListElementEventMap } from "./list-selection-types-CKTt7Rrw.js";
 import { n as ListViewportChangeEvent } from "./list-viewport-types-BJ8c6qur.js";
 import "./index-Cdcek1Oj.js";
-import { S as ListSearchController } from "./index-CRLTVAyt.js";
+import { S as ListSearchController } from "./index-BuvySJEc.js";
 import "./editable-label-CiHCDlhC.js";
 import { LitElement, PropertyValues } from "lit";
 import { CommandId, CommandRegistry } from "@clinth/ui-commands";
@@ -113,6 +114,12 @@ declare class VerticalListElement extends LitElement {
    * built-in HTML+canvas preview.
    */
   dragPreviewRenderer: ListDragPreviewRenderer<Element> | undefined;
+  /**
+   * Write an application payload onto the drag's `DataTransfer` (e.g. a custom
+   * MIME type). Called once per drag, synchronously inside `dragstart`, after a
+   * non-cancelled `list-native-drag-start`.
+   */
+  writeDataTransfer: ListDragDataTransferWriter<Element> | undefined;
   dragPreviewSource: ListDragPreviewSourceResolver<Element> | undefined;
   /**
    * Object/adapter item mode (mirrors `ixfx-detail-list`). When set, the list
@@ -257,6 +264,23 @@ declare class VerticalListElement extends LitElement {
   selectAll(): void;
   /** The selection as stable `data-key` / `data-value` strings. */
   get selectedKeys(): ReadonlySet<string>;
+  /**
+   * Tags assigned by key, apart from the item data (like {@link partialKeys}):
+   * tag name → keys carrying it. Each tag is mirrored on the row as `data-tags`
+   * (`li[data-tags~="foo"]`); `tagBehaviour` can switch off selection, focus,
+   * drag or search per tag.
+   */
+  get tagKeys(): ItemTagKeys | undefined;
+  set tagKeys(value: ItemTagKeys | undefined);
+  /**
+   * Interaction flags per tag name: `selectable`, `focusable`, `draggable`,
+   * `searchable` (`false` switches one off; omitted keeps the default). With
+   * several tags the most restrictive wins. Rows stay rendered.
+   */
+  get tagBehaviour(): ItemTagBehaviour | undefined;
+  set tagBehaviour(value: ItemTagBehaviour | undefined);
+  /** Re-apply `data-tags` to the rows and refresh drag state. Called automatically on change and after each update. */
+  refreshTags(): void;
   /**
    * Rows shown as *partially* selected (a part of the resource is selected):
    * `data-partial`, an indeterminate checkbox in `checked` mode, and an

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-DNuzfo6R.js";
+import { B as ListDragSource, F as ListDragEntry, H as ListNativeDragStartEvent, I as ListDragPreview, L as ListDragPreviewContext, R as ListDragPreviewRenderer, V as ListNativeDragStartDetail } from "./tree-component-BE7OEIiH.js";
 import { n as ListViewportChangeEvent, t as ListViewportChangeDetail } from "./list-viewport-types-BJ8c6qur.js";
 import { _ as ListTickleEvent, a as ListItemClickDetail, c as ListSelectDetail, g as ListTickleDetail, h as ListSelectionMode, i as ListInteractionMode, l as ListSelectEvent, n as ListActivateEvent, o as ListItemClickEvent, r as ListElementEventMap, t as ListActivateDetail } from "./list-selection-types-CKTt7Rrw.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-BzeXehBt.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-C4z3La0C.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 +1 @@
-export { t as VerticalListElement } from "./vertical-list-B9z1lbjM.js";
+export { t as VerticalListElement } from "./vertical-list-By-yuhkw.js";

package/docs-user/README.md

@@ -77,5 +77,6 @@ This directory contains documentation for each component and some architectural
 - [infra-view-state.md](infra-view-state.md)
 - [list-state.md](list-state.md)
 - [user-catalog.md](user-catalog.md)
+- [user-item-tags.md](user-item-tags.md)
 - [user-selection-intents.md](user-selection-intents.md)
 - [user-theming.md](user-theming.md)

package/docs-user/button.md

@@ -3,7 +3,7 @@
 Three related button components:
 
 - **`ixfx-button`** — a styled, icon-capable replacement for `<button>`
-- **`ixfx-split-button`** — a button paired with a dropdown caret; supports a static popup menu, a switcher mode, and programmatic item control
+- **`ixfx-split-button`** — a button paired with a dropdown caret; supports a static popup menu, a switcher mode, a popover (slotted, by `popover-target`, or built just in time), and programmatic item control
 - **`ixfx-radio-group`** — a group of radio-style selectable items; also supports single toggle mode
 
 ---
@@ -246,6 +246,8 @@ Inherits all `ixfx-button` properties, plus:
 | `default-value`     | string          | `''`        | Command to pre-select in switcher mode                          |
 | `items`             | `PopupItem[]`   | —           | Directly set popup items (ignored when `itemsProvider` is set)  |
 | `itemsProvider`     | `() => PopupItem[] \| Promise<PopupItem[]>` | — | Called on each caret click; return value replaces all other item sources |
+| `popover-target`    | string          | `''`        | Id of a `popover` element the caret toggles instead of the menu (see [Popover](#popover-instead-of-a-menu)) |
+| `popoverProvider`   | `(popover: HTMLElement) => void \| Promise<void>` | — | Builds popover content just before each show |
 | `registry`          | `CommandRegistry` | —         | Optional command registry forwarded to `ixfx-menu-trigger`      |
 | `keyboardManager`   | `KeyboardManager` | —         | Optional keyboard manager forwarded to `ixfx-menu-trigger`      |
 
@@ -254,6 +256,7 @@ Inherits all `ixfx-button` properties, plus:
 | Slot      | Description                                                                   |
 |-----------|-------------------------------------------------------------------------------|
 | default   | Primary button label                                                          |
+| `popover` | Content of a popover the caret toggles instead of the menu |
 | `menu`    | `<ixfx-menu-container>` + items for the popup (default mode); or `<ixfx-menu-item>` elements as the data source in switcher mode |
 
 ### Events
@@ -344,6 +347,33 @@ btn.itemsProvider = async () => {
 
 The popup shows a "Loading…" placeholder while the promise resolves. `itemsProvider` takes priority over `items` and declarative slot content.
 
+#### Popover instead of a menu
+
+The caret can toggle a native popover instead of the menu (works in both modes; the primary button is unaffected). Popover mode is on when any of these is present, and takes precedence over menu items:
+
+```html
+<!-- 1. Slotted content: shown in a panel anchored under the caret (`part="popover"`) -->
+<ixfx-split-button>
+  Share
+  <div slot="popover">Anyone with the link can view</div>
+</ixfx-split-button>
+
+<!-- 2. An existing popover element anywhere in the same tree -->
+<ixfx-split-button popover-target="share-pop">Share</ixfx-split-button>
+<div id="share-pop" popover>…</div>
+```
+
+```js
+// 3. Build the content just in time. Runs each time the popover is about to show
+//    (awaited), with the panel — or the `popover-target` element — as the argument.
+btn.popoverProvider = async (popover) => {
+  const people = await fetch('/api/people').then(r => r.json());
+  popover.replaceChildren(...people.map(p => Object.assign(document.createElement('div'), { textContent: p.name })));
+};
+```
+
+`popoverProvider` can be combined with either form; on its own it fills the built-in panel. The caret gets `aria-haspopup="dialog"` and `aria-expanded`, ArrowDown opens it, and clicking the caret again closes it. A `popover-target` element positions itself (the caret is passed as the popover `source`, so CSS anchor positioning can use it implicitly). Width of the built-in panel: `--ixfx-split-button-popover-max-width`.
+
 #### Change mode at runtime
 
 ```js

package/docs-user/data-grid.md

@@ -652,3 +652,6 @@ state.
 
 `demo/data-grid.html` + `demo/data-grid.ts`: 200 rows, `Department` random, `Score` float, `Name`/`Department` editable (`user` mode, slow double-click; `Tab`/`Up`/`Down` navigation; `Enter` from tickled row). Controls: Selection/Interaction/Group by/Editability/`column-menu` + `Edit first row` (manual), a `Stream +5,000 rows` button (`appendRows`), and `selectKeys` / `tickleRow` buttons.
 
+
+**Item tags:** `tags` hook / `tagKeys` → `data-tags` and `part="… tag-<name>"`; `tagBehaviour` switches off `selectable` / `focusable` / `draggable` / `searchable` per tag. See [Item tags](./user-item-tags.md).
+

package/docs-user/detail-list.md

@@ -759,3 +759,6 @@ compare runs against each other rather than against fixed budgets. The data
 grid has the same tooling (`pnpm bench:data-grid`); shared harness code is in
 `scripts/bench/`.
 
+
+**Item tags:** `tags` hook / `tagKeys` → `data-tags` and `part="… tag-<name>"`; `tagBehaviour` switches off `selectable` / `focusable` / `draggable` / `searchable` per tag. See [Item tags](./user-item-tags.md).
+

package/docs-user/grid-list.md

@@ -278,6 +278,11 @@ Set `items-draggable` to make selectable cells draggable out of the grid. On
   for native hosts.
 - Assign `dragPreviewRenderer` for a custom synchronous preview returning
   `{ element, hotspot?, canvas?, dispose? }`.
+- Assign `writeDataTransfer(dataTransfer, detail)` to put your own payload on
+  the drag (e.g. a custom MIME type). It is a public property on every list
+  (`ixfx-grid-list`, `ixfx-vertical-list`, `ixfx-detail-list`, `ixfx-data-grid`,
+  and forwarded by `ixfx-flat-list`), run synchronously in `dragstart` after a
+  non-cancelled `list-native-drag-start`.
 - `preventDefault()` on the event cancels the browser drag, but the sync
   listener still sees `preview` (incl. `canvas`) — what lets an Electron host
   rasterize it during the synchronous turn.
@@ -765,6 +770,9 @@ For finer control, style `::part(viewport)` directly (including
 
 ## Choosing a list component
 
+
+**Item tags:** `tags` hook / `tagKeys` → `data-tags` and `part="… tag-<name>"`; `tagBehaviour` switches off `selectable` / `focusable` / `draggable` / `searchable` per tag. See [Item tags](./user-item-tags.md).
+
 - **Large lists** — prefer `ixfx-grid-list` with `orientation="column"` over
   `ixfx-vertical-list`. `vertical-list` renders every child; `grid-list` is
   windowed.

package/docs-user/index.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
-  "version": "0.17.1",
-  "generated": "2026-11-10T11:14:57.413Z",
+  "version": "0.18.1",
+  "generated": "2026-11-10T23:10:32.663Z",
   "components": [
     {
       "name": "ac-text",
@@ -348,6 +348,10 @@
       "name": "user-catalog.md",
       "path": "docs-user/user-catalog.md"
     },
+    {
+      "name": "user-item-tags.md",
+      "path": "docs-user/user-item-tags.md"
+    },
     {
       "name": "user-selection-intents.md",
       "path": "docs-user/user-selection-intents.md"

package/docs-user/llms.txt

@@ -83,5 +83,6 @@ import '@ixfx/components/data-grid';
 - [infra-view-state.md](docs-user/infra-view-state.md)
 - [list-state.md](docs-user/list-state.md)
 - [user-catalog.md](docs-user/user-catalog.md)
+- [user-item-tags.md](docs-user/user-item-tags.md)
 - [user-selection-intents.md](docs-user/user-selection-intents.md)
 - [user-theming.md](docs-user/user-theming.md)

package/docs-user/multicol-list.md

@@ -178,4 +178,7 @@ el.addEventListener(`multicol-select`, (event) => {
 });
 ```
 
+
+**Item tags:** `tags` hook / `tagKeys` → `data-tags` and `part="… tag-<name>"`; `tagBehaviour` switches off `selectable` / `focusable` / `draggable` / `searchable` per tag. See [Item tags](./user-item-tags.md).
+
 See `demo/multicol-list.html` for a full in-memory example with counts.

package/docs-user/notifier.md

@@ -67,6 +67,34 @@ NotificationManager.configure({
 
 ---
 
+## Scoped managers, history and unread
+
+`NotificationManager` is the default, app-wide instance. Every instance has its own queue, timers, renderer and options, so toasts can sit beside the component they concern:
+
+```typescript
+import { createNotificationManager, NotificationManager } from '../src/index.js';
+
+const lister = NotificationManager.scope('lister-1', { renderer: myAnchoredRenderer }); // get-or-create by name
+// or, unregistered: const lister = createNotificationManager({ renderer: myAnchoredRenderer });
+lister.notify({ type: 'info', message: 'Moved 3 items' });
+NotificationManager.releaseScope('lister-1'); // on unmount: dismiss, detach, forget
+```
+
+Each instance also keeps a bounded history (`historyLimit`, default 100; `0` disables):
+
+| API | Description |
+|---|---|
+| `getHistory()` | Snapshot of `{ ...Notification, read, dismissedAt? }`, oldest first; includes toasts no longer visible |
+| `unreadCount` | Entries not yet read — drive a bell indicator |
+| `markRead(id)` / `markAllRead()` | Mark read. Tapping a toast also marks it read |
+| `clearHistory()` | Drop history |
+| `subscribe(listener)` | Called with the history on every change; returns an unsubscribe function |
+| `destroy()` | Dismiss all, drop history/listeners, detach renderer |
+
+Scoped instances with no `renderer` fall back to the default top-right pill renderer, which is viewport-anchored — give anchored scopes a custom renderer.
+
+---
+
 ## Queueing model
 
 - **`queue: false`** — a message is always shown alone, for the full `timeout`/`timeoutError`. A new `notify()` call immediately replaces whatever is showing.

package/docs-user/user-item-tags.md

@@ -0,0 +1,68 @@
+# Item tags
+
+Tag list items with names that mean something to your app, then style them and
+change how they react to input. The components never interpret a tag: they only
+expose it and apply the generic interaction flags you declare for it.
+
+Works the same on `ixfx-grid-list`, `ixfx-detail-list`, `ixfx-data-grid` and
+`ixfx-multicol-list` (and on `ixfx-vertical-list`, which `ixfx-multicol-list` uses for its columns).
+
+## 1. Assigning tags
+
+Two forms, which can be combined (tags are merged, de-duplicated):
+
+| Form | Where |
+| --- | --- |
+| Hook returning `readonly string[] \| undefined` | `ixfx-grid-list`: `itemAdapter.tags(item, index)`. `ixfx-detail-list` / `ixfx-data-grid`: `list.tags(item, index)`. `ixfx-multicol-list`: `list.tags(item, columnId)` |
+| Key sets: `tagKeys: ReadonlyMap<tag, ReadonlySet<key>>` | all of them (`ixfx-vertical-list` too). For tags kept apart from the item data, like `partialKeys`. Works for light-DOM / element-mode items |
+
+```ts
+grid.itemAdapter = { key, render, tags: row => row.willBeRemoved ? [`leaving`] : undefined };
+grid.tagKeys = new Map([[`arriving`, new Set([`k1`, `k2`])]]);
+```
+
+Tags are re-read on every render, so `updateItem` / `updateItems` (grid-list) and
+assigning `items` / `rows` pick up changes without rebuilding the adapter. If a hook reads
+state outside the items, call `refreshTags()` (detail-list, data-grid, multicol-list).
+Empty names and names containing whitespace are ignored.
+
+## 2. Styling
+
+Each tag is exposed on the item:
+
+- `data-tags` (space separated): `[data-tags~="leaving"]`. Always present.
+- a `part` token `tag-<name>` on shadow-DOM items: `::part(item tag-leaving)`.
+
+The prefix keeps a caller tag called `selected` from colliding with the built-in state.
+
+Which element carries what:
+
+| Component | Item element (background, `part="item …"`) | Content |
+| --- | --- | --- |
+| `ixfx-grid-list` | `.cell` — `part="item"` | `part="content"` inside it |
+| `ixfx-data-grid` | `.row` — `part="item"` | the `.cell` children (`part="cell"`-style cells) |
+| `ixfx-detail-list` | the light-DOM `<li>` (`data-tags` only — it is not in a shadow tree, so no `part`) | the `<li>`'s children |
+| `ixfx-multicol-list` / `ixfx-vertical-list` | the light-DOM `<li>` (`data-tags` only) | the `<li>`'s children |
+
+```css
+ixfx-grid-list::part(item tag-leaving) { opacity: 0.5; text-decoration: line-through; }
+ixfx-detail-list li[data-tags~="arriving"] { background: color-mix(in srgb, green 15%, transparent); }
+```
+
+## 3. Behaviour
+
+```ts
+list.tagBehaviour = {
+  leaving: { selectable: false, focusable: false, draggable: false, searchable: false },
+};
+```
+
+- Flags left out keep the default. A tag with no declaration only styles.
+- Several tags: the most restrictive wins (any `false` beats `true`).
+- `selectable: false` — no selection or tickle, no `list-select-intent`; range, marquee and select-all skip the item.
+- `focusable: false` — keyboard cursor movement skips the item (hover can still tickle it).
+- `draggable: false` — no drag starts from the item.
+- `searchable: false` — left out of incremental search.
+- The item is always still rendered and still counts for layout and scroll position.
+
+`ixfx-grid-list`'s `disabled` adapter hook is unchanged and combines with these flags.

package/llms.txt

@@ -83,5 +83,6 @@ import '@ixfx/components/data-grid';
 - [infra-view-state.md](docs-user/infra-view-state.md)
 - [list-state.md](docs-user/list-state.md)
 - [user-catalog.md](docs-user/user-catalog.md)
+- [user-item-tags.md](docs-user/user-item-tags.md)
 - [user-selection-intents.md](docs-user/user-selection-intents.md)
 - [user-theming.md](docs-user/user-theming.md)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
   "type": "module",
-  "version": "0.17.1",
+  "version": "0.18.1",
   "packageManager": "pnpm@10.0.0",
   "description": "Web components for ixfx — Lit-based UI toolkit",
   "author": "Clint Heyer",
@@ -268,7 +268,7 @@
     }
   },
   "dependencies": {
-    "@clinth/ui-commands": "1.1.2",
+    "@clinth/ui-commands": "1.2.0",
     "@clinth/vcanvas": "0.0.6",
     "@ixfx/arrays": "0.56.21",
     "@ixfx/collections": "0.56.21",
@@ -290,7 +290,7 @@
     "eslint-plugin-format": "2.0.1",
     "globals": "17.14.0",
     "happy-dom": "^21.0.4",
-    "knip": "6.44.2",
+    "knip": "6.45.0",
     "libavoid-js": "0.5.0-beta.5",
     "lit": "3.3.3",
     "tsdown": "0.23.7",

package/dist/interaction-8Kbbf6xN.js

@@ -1,3 +0,0 @@
-import "./list-native-drag-controller-ByftBooJ.js";
-import "./tickled-controller-BVhGKzjZ.js";
-import "./tickled-styles-pnieYweS.js";