@ixfx/components 0.11.6 → 0.11.8

package/docs-user/README.md

@@ -9,6 +9,7 @@ This directory contains documentation for each component and some architectural
 - [bottom-drawer](./bottom-drawer.md)
 - [button](./button.md)
 - [checkbox](./checkbox.md)
+- [checked-select](./checked-select.md)
 - [colour-picker](./colour-picker.md)
 - [crumbs](./crumbs.md)
 - [data-display](./data-display.md)
@@ -27,6 +28,7 @@ This directory contains documentation for each component and some architectural
 - [labelled-range-input](./labelled-range-input.md)
 - [labelled-slider-input](./labelled-slider-input.md)
 - [led](./led.md)
+- [list-group-header](./list-group-header.md)
 - [menu](./menu.md)
 - [miller](./miller.md)
 - [multicol-list](./multicol-list.md)

package/docs-user/checked-select.md

@@ -0,0 +1,63 @@
+# `ixfx-checked-select`
+
+A SELECT-like control for tri-state tags. At rest it shows the checked and indeterminate items as a flow of `ixfx-checkbox`. Opening it shows a scrollable, resizable popup listing every item.
+
+```html
+<ixfx-checked-select multiline placeholder="No tags"></ixfx-checked-select>
+```
+
+```js
+const el = document.querySelector('ixfx-checked-select');
+el.items = [
+  { value: 'urgent', label: 'urgent', checked: 'true' },
+  { value: 'invoice', label: 'Invoice', checked: 'indeterminate' },
+  { value: 'holiday', label: 'holiday', checked: 'false' },
+];
+el.addEventListener('change', ({ detail }) => console.log(detail.changed));
+```
+
+Typical use: tagging files. A tag on every selected file is `true`, on some is `indeterminate`, on none is `false`.
+
+## Behaviour
+
+- **Order:** when the popup opens, checked and indeterminate items come first, then the rest, each sorted by label. The order is frozen while open so rows never jump.
+- **Toggling:** `false` → `true`, `true` → `false`, `indeterminate` → `true`. The user can never produce `indeterminate`.
+- **Draft:** edits apply to a draft. **Enter**, or clicking the resting area, commits; **Escape**, **Tab** or a click outside cancels.
+- **Keyboard (popup):** arrows / Home / End move, **Space** toggles, a letter jumps to the next item starting with it (repeat to cycle).
+- **Resting checkboxes:** interactive. Toggling one commits immediately and fires `change`; unchecking removes it from the resting view (focus stays on the control). Use the popup to re-check it. The resting area scrolls (horizontally, or vertically when `multiline`) if it overflows.
+- **Caret:** an always-visible caret sits at the end of the resting area, with items scrolling underneath it (in `multiline` the items wrap in the space beside it). Clicking it toggles the popup, and closing it this way commits.
+- **Opening:** click empty space in the resting area, or Enter / Space / ArrowDown when focused.
+- **Resize:** drag the handle in the bottom-right corner. The size resets on each open.
+- The popup uses CSS anchor positioning (`popover="manual"`), sized to the resting width and flipping at viewport edges. Requires a browser with anchor positioning support.
+
+## Properties
+
+| Property | Type | Default | Description |
+|---|---|---|---|
+| `items` | `CheckedSelectItem[]` | `[]` | `{ value, label, checked: 'true' \| 'false' \| 'indeterminate' }` |
+| `multiline` | `boolean` | `false` | Let the resting flow wrap instead of clipping to one line |
+| `placeholder` | `string` | `''` | Shown when nothing is checked |
+| `disabled` | `boolean` | `false` | Prevents opening |
+| `items-inert` / `itemsInert` | `boolean` | `false` | Resting checkboxes become display-only; clicking them just opens the popup. (Named `items-inert` because a bare `inert` attribute is native HTML and would disable the whole element.) |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Direction the resting items flow. `vertical` stacks one per row and scrolls vertically past `--checked-select-rest-max-height`; it ignores `multiline`, and in `text` mode lists one entry per line without commas. |
+| `item-display` / `itemDisplay` | `'checkbox' \| 'text'` | `'checkbox'` | `text` shows checked labels comma-separated, with one trailing `(varies)` if any item is indeterminate. Text mode has nothing to toggle, so it always just opens the popup. |
+
+Methods: `open()`, `commit()`, `cancel()`. Getter: `isOpen`.
+
+## Events
+
+`change` — `CustomEvent<{ items, changed }>`, bubbles and composed. Fired once per commit, only when something changed. `items` is the full committed list; `changed` only the items whose state differs.
+
+## CSS variables
+
+| Variable | Default |
+|---|---|
+| `--checked-select-gap` | `var(--space-m)` |
+| `--checked-select-padding` | `var(--space-s) var(--space-m)` |
+| `--checked-select-caret-width` | `2rem` |
+| `--checked-select-rest-max-height` | `8rem` (multiline, before it scrolls) |
+| `--checked-select-max-height` | `16rem` |
+| `--checked-select-min-width` | `8rem` |
+| `--checked-select-min-height` | `5rem` |
+
+Handle look is themed through the shared `--ixfx-handle-*` variables.

package/docs-user/detail-list.md

@@ -29,6 +29,7 @@ Selection semantics match `ixfx-vertical-list` — same modes, same `list-*` eve
     - [Wrapping](#wrapping)
   - [Incremental search](#incremental-search)
     - [Highlight styling](#highlight-styling)
+  - [Grouping](#grouping)
   - [Filter predicate](#filter-predicate)
   - [Sorting](#sorting)
     - [Simple sort](#simple-sort)
@@ -462,6 +463,33 @@ Matched characters are highlighted with the `detail-list-search` highlight key.
 
 ---
 
+## Grouping
+
+Group rows under collapsible headers, following `ixfx-data-grid` (see its [Grouping](../data-grid/README.md#grouping) section).
+
+```ts
+list.groupBy = 'kind';                                  // object items: property · declarative <li>: data-kind
+list.groupBy = (data, li) => li.textContent![0];        // or a function of (data, element)
+list.groupLabel = (key, items) => `${key} (${items.length})`;
+list.collapseAllGroups();
+```
+
+| Member | Notes |
+|---|---|
+| `groupBy` / `group-by` | Property name (object items), else `data-<name>` attribute, or a function `(data, li) => string`. `null` ungroups and restores the original order. |
+| `groupLabel` | `(groupKey, items) => string`. Default: the key, or `(none)`. |
+| `cross-group-selection` | Default `false`: selecting in one group clears the others, and Shift-range, Ctrl+A and marquee stay in one group. Programmatic key APIs are never clamped. |
+| `groups` | Read-only `{ key, label, count, collapsed }[]`. |
+| `toggleGroup(key)`, `setGroupCollapsed(key, bool)`, `collapseAllGroups()`, `expandAllGroups()` | Collapse state. |
+
+- **Layout:** headers are ordinary rows in the column flow — a header, then its items, then the next group's header, wrapping into the next column like any row. Groups do not start new columns, so a header can land at the bottom of a column.
+- Order: original order → `sort` → partition. Groups appear in first-encounter order of the sorted, filtered list. Rows added later join their group; a row added out of order counts as last in the original order.
+- Filtering (`filterPredicate`, filter-mode search) runs first; an emptied group loses its header.
+- **Collapsed groups** hide their rows (`data-group-collapsed`); they leave navigation, select-all, range, marquee and drag-out but keep their selection.
+- **Keyboard:** Up/Down skip headers, even mid-column. Left/Right pick the row in the neighbouring column nearest the current one vertically, since headers shift rows. Headers are never focused; collapse is by click or the API.
+- Headers are `<ixfx-list-group-header data-ixfx-group-header>` children managed by the list — do not add or remove them yourself. Style through `--detail-list-group-header-height`, `--list-group-header-text` and `--list-group-header-border`.
+- Events: `list-group-toggle` `{ groupKey, collapsed }`, `list-group-change` `{ groupBy }`.
+
 ## Filter predicate
 
 Use `filterPredicate` to programmatically hide items:

package/docs-user/grid-list.md

@@ -19,9 +19,10 @@ single vertical column, or a horizontally-scrolling strip.
 8. [Events](#events)
 9. [Native drag-out](#native-drag-out)
 10. [Keyboard](#keyboard)
-11. [Virtualisation](#virtualisation)
-12. [CSS parts](#css-parts)
-13. [Choosing a list component](#choosing-a-list-component)
+11. [Grouping](#grouping)
+12. [Virtualisation](#virtualisation)
+13. [CSS parts](#css-parts)
+14. [Choosing a list component](#choosing-a-list-component)
 
 ---
 
@@ -415,6 +416,37 @@ operations.
 
 ---
 
+## Grouping
+
+Group items under collapsible headers, following `ixfx-data-grid` (see its [Grouping](../data-grid/README.md#grouping) section).
+
+```ts
+grid.groupBy = 'kind';                       // data mode: item property · element mode: data-kind attribute
+grid.groupBy = item => item.locked ? 'Locked' : 'Open';   // or a function (Element in element mode)
+grid.groupLabel = (key, items) => `${key} (${items.length})`;
+grid.crossGroupSelection = false;            // default
+grid.collapseAllGroups();
+```
+
+| Member | Notes |
+|---|---|
+| `groupBy` / `group-by` | `string` property (data mode) or `data-<name>` attribute (element mode), or a function. `null` ungroups. |
+| `groupLabel` | `(groupKey, items) => string`. Default: the key, or `(none)` for the empty key. |
+| `cross-group-selection` | Default `false`: selecting in one group clears the others, and Shift-range, Ctrl+A and marquee stay inside one group. Programmatic `selectKeys` / `addSelectedKeys` are never clamped. |
+| `group-header-height` / `group-header-width` | Header size in px (`grid` / `column` height, `row` width). Defaults 28 / 120. |
+| `groups` | Read-only `{ key, label, count, collapsed }[]` in display order. |
+| `toggleGroup(key)`, `setGroupCollapsed(key, bool)`, `collapseAllGroups()`, `expandAllGroups()` | Collapse state. |
+
+- Groups appear in first-encounter order. Filters (`filterPredicate`, `itemFilterPredicate`, incremental filter) run first, so an emptied group loses its header and counts follow the filter.
+- **Collapsed groups** leave the effective order: not navigable, not rendered, not in select-all, range, marquee or drag-out. Their selection state is kept. A collapsed key is not auto-expanded by `focusKey()`.
+- Changing `groupBy` (from any path) clears the collapse state.
+- **Layout:** in `grid` / `column` a header spans the full width and its items restart at column 0 beneath it. In `row` orientation the header is an inline cell of `group-header-width`.
+- **Keyboard:** Left/Right step through items, crossing groups. Up/Down keep the column, hop across headers and clamp on a short last row. Headers are never focused; collapsing is by click or the API.
+- Events: `list-group-toggle` `{ groupKey, collapsed }`, `list-group-change` `{ groupBy }`.
+- Headers are `ixfx-list-group-header` elements (`part="group-header"`), themeable through `--list-group-header-text` / `--list-group-header-border`.
+
+Differences from data-grid: group state is reset on every `groupBy` change, the empty key is labelled `(none)`, headers are skipped by arrow keys, and the collapse API and events are exposed.
+
 ## Virtualisation
 
 Only the cells in (or near) the viewport are in the DOM — in both element and

package/docs-user/index.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
-  "version": "0.11.6",
-  "generated": "2026-09-29T08:05:36.277Z",
+  "version": "0.11.8",
+  "generated": "2026-09-30T06:11:13.150Z",
   "components": [
     {
       "name": "ac-text",
@@ -28,6 +28,11 @@
       "summary": "A custom checkbox with a diagonal line indicator and indeterminate state support. Uses shadow DOM with CSS variables for full appearance customization.",
       "path": "docs-user/checkbox.md"
     },
+    {
+      "name": "checked-select",
+      "summary": "A SELECT-like control for tri-state tags. At rest it shows the checked and indeterminate items as a flow of `ixfx-checkbox`. Opening it shows a scrollable, resizable popup listing every item.",
+      "path": "docs-user/checked-select.md"
+    },
     {
       "name": "colour-picker",
       "summary": "Two components for picking OKLCH colours. Use `ixfx-colour-picker` when you need a full inline picker; use `ixfx-colour-picker-popup` when you need a compact swatch that opens a picker in a popover.",
@@ -118,6 +123,11 @@
       "summary": "An LED indicator component with color mixing and brightness, blink, and pulse modes.",
       "path": "docs-user/led.md"
     },
+    {
+      "name": "list-group-header",
+      "summary": "Collapsible group header shared by `ixfx-grid-list` and `ixfx-detail-list`. It is a building block: the lists create and position it themselves, and handle its clicks. Its look matches the group rows ",
+      "path": "docs-user/list-group-header.md"
+    },
     {
       "name": "menu",
       "summary": "A custom menu system built on native HTML popovers with keyboard navigation, tickled focus management, and command routing.",

package/docs-user/list-group-header.md

@@ -0,0 +1,14 @@
+# `ixfx-list-group-header`
+
+Collapsible group header shared by `ixfx-grid-list` and `ixfx-detail-list`. It is a building block: the lists create and position it themselves, and handle its clicks. Its look matches the group rows of `ixfx-data-grid`.
+
+| Attribute | Type | Default | Notes |
+|---|---|---|---|
+| `label` | string | `''` | Header text; reflected |
+| `count` | number | `0` | Shown as `(n)` |
+| `collapsed` | boolean | `false` | Rotates the caret; reflected |
+| `orientation` | `horizontal` \| `vertical` | `horizontal` | `vertical` is a narrow column cell for single-row layouts |
+
+CSS variables: `--list-group-header-height` (28px), `--list-group-header-text`, `--list-group-header-border`.
+
+Accessibility: `role="button"`, `aria-expanded`, and an `aria-label` of `"<label>, <n> items"`. It is not focusable; the host list owns focus.

package/docs-user/llms.txt

@@ -16,6 +16,7 @@ import '@ixfx/components/data-grid';
 - [bottom-drawer](docs-user/bottom-drawer.md): A slide-up drawer panel that slides over the bottom of its container. Place it as a **sibling** of the content it covers, inside a positioned container — the element stretches to fill that container a
 - [button](docs-user/button.md): Three related button components:
 - [checkbox](docs-user/checkbox.md): A custom checkbox with a diagonal line indicator and indeterminate state support. Uses shadow DOM with CSS variables for full appearance customization.
+- [checked-select](docs-user/checked-select.md): A SELECT-like control for tri-state tags. At rest it shows the checked and indeterminate items as a flow of `ixfx-checkbox`. Opening it shows a scrollable, resizable popup listing every item.
 - [colour-picker](docs-user/colour-picker.md): Two components for picking OKLCH colours. Use `ixfx-colour-picker` when you need a full inline picker; use `ixfx-colour-picker-popup` when you need a compact swatch that opens a picker in a popover.
 - [crumbs](docs-user/crumbs.md): Breadcrumb navigation with lazy-loading child support. Uses the same `TreeNode` / `TreeItem` data model as `ixfx-tree-list`, allowing easy swapping between the two components.
 - [data-display](docs-user/data-display.md): A debug data display component that renders key-value pairs from a plain object. Supports 7 inline render modes (`led`, `plot`, `plot-xy`, `plot-heat`, `plot-histogram`, `time-elapsed`, `hide`) via `c
@@ -34,6 +35,7 @@ import '@ixfx/components/data-grid';
 - [labelled-range-input](docs-user/labelled-range-input.md): A composite range input that pairs an editable label (`ixfx-editable-number`) with a slider (`ixfx-range-input`). The two controls are always in sync — dragging the slider updates the number, and edit
 - [labelled-slider-input](docs-user/labelled-slider-input.md): A composite slider input that pairs an editable label (`ixfx-editable-number`) with a slider (`ixfx-slider-input`). The two controls are always in sync — dragging the slider updates the number, and ed
 - [led](docs-user/led.md): An LED indicator component with color mixing and brightness, blink, and pulse modes.
+- [list-group-header](docs-user/list-group-header.md): Collapsible group header shared by `ixfx-grid-list` and `ixfx-detail-list`. It is a building block: the lists create and position it themselves, and handle its clicks. Its look matches the group rows 
 - [menu](docs-user/menu.md): A custom menu system built on native HTML popovers with keyboard navigation, tickled focus management, and command routing.
 - [miller](docs-user/miller.md): A Miller column component displays hierarchical data as multiple vertical columns, like macOS Finder or email clients. Each column shows the children of the selected item in the previous column.
 - [multicol-list](docs-user/multicol-list.md): A faceted-filtering component: each column shows one property (facet) of the *same*

package/llms.txt

@@ -16,6 +16,7 @@ import '@ixfx/components/data-grid';
 - [bottom-drawer](docs-user/bottom-drawer.md): A slide-up drawer panel that slides over the bottom of its container. Place it as a **sibling** of the content it covers, inside a positioned container — the element stretches to fill that container a
 - [button](docs-user/button.md): Three related button components:
 - [checkbox](docs-user/checkbox.md): A custom checkbox with a diagonal line indicator and indeterminate state support. Uses shadow DOM with CSS variables for full appearance customization.
+- [checked-select](docs-user/checked-select.md): A SELECT-like control for tri-state tags. At rest it shows the checked and indeterminate items as a flow of `ixfx-checkbox`. Opening it shows a scrollable, resizable popup listing every item.
 - [colour-picker](docs-user/colour-picker.md): Two components for picking OKLCH colours. Use `ixfx-colour-picker` when you need a full inline picker; use `ixfx-colour-picker-popup` when you need a compact swatch that opens a picker in a popover.
 - [crumbs](docs-user/crumbs.md): Breadcrumb navigation with lazy-loading child support. Uses the same `TreeNode` / `TreeItem` data model as `ixfx-tree-list`, allowing easy swapping between the two components.
 - [data-display](docs-user/data-display.md): A debug data display component that renders key-value pairs from a plain object. Supports 7 inline render modes (`led`, `plot`, `plot-xy`, `plot-heat`, `plot-histogram`, `time-elapsed`, `hide`) via `c
@@ -34,6 +35,7 @@ import '@ixfx/components/data-grid';
 - [labelled-range-input](docs-user/labelled-range-input.md): A composite range input that pairs an editable label (`ixfx-editable-number`) with a slider (`ixfx-range-input`). The two controls are always in sync — dragging the slider updates the number, and edit
 - [labelled-slider-input](docs-user/labelled-slider-input.md): A composite slider input that pairs an editable label (`ixfx-editable-number`) with a slider (`ixfx-slider-input`). The two controls are always in sync — dragging the slider updates the number, and ed
 - [led](docs-user/led.md): An LED indicator component with color mixing and brightness, blink, and pulse modes.
+- [list-group-header](docs-user/list-group-header.md): Collapsible group header shared by `ixfx-grid-list` and `ixfx-detail-list`. It is a building block: the lists create and position it themselves, and handle its clicks. Its look matches the group rows 
 - [menu](docs-user/menu.md): A custom menu system built on native HTML popovers with keyboard navigation, tickled focus management, and command routing.
 - [miller](docs-user/miller.md): A Miller column component displays hierarchical data as multiple vertical columns, like macOS Finder or email clients. Each column shows the children of the selected item in the previous column.
 - [multicol-list](docs-user/multicol-list.md): A faceted-filtering component: each column shows one property (facet) of the *same*

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
   "type": "module",
-  "version": "0.11.6",
+  "version": "0.11.8",
   "packageManager": "pnpm@10.0.0",
   "description": "Web components for ixfx — Lit-based UI toolkit",
   "author": "Clint Heyer",
@@ -28,6 +28,10 @@
       "types": "./dist/checkbox.d.ts",
       "import": "./dist/checkbox.js"
     },
+    "./checked-select": {
+      "types": "./dist/checked-select.d.ts",
+      "import": "./dist/checked-select.js"
+    },
     "./colour-picker": {
       "types": "./dist/colour-picker.d.ts",
       "import": "./dist/colour-picker.js"
@@ -164,6 +168,10 @@
       "types": "./dist/grid-list.d.ts",
       "import": "./dist/grid-list.js"
     },
+    "./list-group-header": {
+      "types": "./dist/list-group-header.d.ts",
+      "import": "./dist/list-group-header.js"
+    },
     "./form": {
       "types": "./dist/form.d.ts",
       "import": "./dist/form.js"

package/dist/detail-list-CmdCxddo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"detail-list-CmdCxddo.d.ts","names":[],"sources":["../src/detail-list/types.ts","../src/detail-list/detail-list.ts"],"mappings":";;;;;;;;;;;KACY;;KAGA;WACD,SAAS;WACT;WACA;;;KAIC,wBAAwB,GAAG,gBAAgB,GAAG;;KAG9C,mBAAmB,eAAe,2BAA2B;;;;;;;;;;;;;;;;;;;;cC+H5D,0BAA0B;;EAErC,eAAe;EAGf,iBAAiB;EAGjB,MAAM;EAGN;EAGA,gBAAgB;EAGhB;EAGA,UAAU;EAGV;EAGA,WAAW;EAGX;;;;;EAOA;;;;;EAOA;;;;;;EAQA;EAGA;EAGA,mBAAmB,IAAI;;;;;;EAQvB;;EAIA,oBAAoB,gCAAgC;;;;;;EAQpD;;;;;;EAQA;;;;;EAOA,qBAAqB,wBAAwB;EAG7C,mBAAmB,8BAA8B;UAGzC;mBAoBS;UAeT;UAyFA;;WAkGC,QAAM,qBAAA;;MAYX,YAAY;EAoBP;EA8DA;EA2BA;EASA,QAAQ,SAAS;;MAuDtB,gBAAgB;;MAKhB,iBAAiB,YAAY;;;;;;EASjC;EAIA,QAAQ,MAAM,kBAAkB,UAAU;;;;;EAuB1C,WAAW,MAAM,UAAU;;EAW3B,YAAY,OAAO,SAAS,WAAW;EAIvC;;;;;EAYA,SAAS,gBAAgB;;;;;EAgBzB,YAAY,MAAM;;;;;;;;;;EAalB;;;;;;EAsBA,SAAS,WAAW,WAAW,OAAO;EAItC,OAAO,MAAM;EAIb,WAAW,OAAO,SAAS;EAI3B,SAAS,MAAM;EAIf;EAIA;;MAQI,gBAAgB;;MAKhB;;EAMJ,WAAW,MAAM;;EAKjB,gBAAgB,MAAM;;EAKtB,mBAAmB,MAAM;;EAKzB,SAAS;EAgBP,eAAe,0CAA0C,UAAU;UA0b7D;;;;;;;;;EAkBF,kBAAkB;UAwBhB;;UAOA;UA2DA;UAiBA;;;;;;;UA2DA;;UAoBA;UAcA;UAYA;UAQA;UA6DA;UAMA;UAIA;UA4EA;UAWA;UAMA;UAUA;SAUQ,sBAAM;EAqJb,wBAAM;;QAsBT;YACI;IACR,oBAAoB;;YAGZ,4BAA4B;;UAGvB,kCAAkC;EACjD,+BAA+B;EAC/B,0BAA0B,yBAAyB"}