@ixfx/components 0.11.6 → 0.11.7

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)

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/index.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
   "version": "0.11.6",
-  "generated": "2026-09-29T08:05:36.277Z",
+  "generated": "2026-09-29T18:00:58.196Z",
   "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.",

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

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
   "type": "module",
-  "version": "0.11.6",
+  "version": "0.11.7",
   "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"