@ixfx/components 0.5.3 → 0.5.4

package/dist/{labelled-input-base-Dp_9KP0G.d.ts → labelled-input-base-DiTme1JO.d.ts}

@@ -33,9 +33,9 @@ declare abstract class LabelledInputBase extends LitElement {
     value: number;
   }>) => void;
   protected _syncValue(v: number): void;
-  protected _renderEditableNumber(): import("lit").TemplateResult<1> | typeof nothing;
+  protected _renderEditableNumber(): typeof nothing | import("lit").TemplateResult<1>;
   updated(changedProperties: Map<string, unknown>): void;
 }
 //#endregion
 export { LabelledInputBase as t };
-//# sourceMappingURL=labelled-input-base-Dp_9KP0G.d.ts.map
+//# sourceMappingURL=labelled-input-base-DiTme1JO.d.ts.map

package/dist/{labelled-input-base-Dp_9KP0G.d.ts.map → labelled-input-base-DiTme1JO.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"labelled-input-base-Dp_9KP0G.d.ts","names":[],"sources":["../src/mixins/labelled-input-base.ts"],"mappings":";;uBAIsB,0BAA0B;EAClC;EAEgB;EACA;EACA;EACA;EACA;EAC+B;EAEI;EACC;EAEjB;YAE5B;YACA;YACA,cAAc;UAEzB;UACA;oBAEU;MAEd,cAAc;MAId,UAAU,SAAS;gBAIT;EAIL;EAMA;YAMC,cAAc,SAAS;YAcvB,sBAAuB,GAAG;IAAc;;YAWxC,qBAAsB,GAAG;IAAc;;YAavC,qBAAsB,GAAG;IAAc;;YAYvC,WAAW;YAYX,uCAAqB,2BAAA;EAuBtB,QAAQ,mBAAmB"}
+{"version":3,"file":"labelled-input-base-DiTme1JO.d.ts","names":[],"sources":["../src/mixins/labelled-input-base.ts"],"mappings":";;uBAIsB,0BAA0B;EAClC;EAEgB;EACA;EACA;EACA;EACA;EAC+B;EAEI;EACC;EAEjB;YAE5B;YACA;YACA,cAAc;UAEzB;UACA;oBAEU;MAEd,cAAc;MAId,UAAU,SAAS;gBAIT;EAIL;EAMA;YAMC,cAAc,SAAS;YAcvB,sBAAuB,GAAG;IAAc;;YAWxC,qBAAsB,GAAG;IAAc;;YAavC,qBAAsB,GAAG;IAAc;;YAYvC,WAAW;YAYX,gCAAqB,wBAAA;EAuBtB,QAAQ,mBAAmB"}

package/dist/labelled-radial-input.d.ts

@@ -1,4 +1,4 @@
-import { t as LabelledInputBase } from "./labelled-input-base-Dp_9KP0G.js";
+import { t as LabelledInputBase } from "./labelled-input-base-DiTme1JO.js";
 import { i as MarkerStyle, l as ValueMode } from "./radial-input-BhZeyyP-.js";
 import { CSSResultGroup, nothing } from "lit";
 //#region src/labelled-radial-input/labelled-radial-input.d.ts
@@ -19,7 +19,7 @@ declare class LabelledRadialInput extends LabelledInputBase {
   private _isWide;
   private _getEffectivePrecision;
   protected _handleResize(entries: ResizeObserverEntry[]): void;
-  protected _renderEditableNumber(): import("lit").TemplateResult<1> | typeof nothing;
+  protected _renderEditableNumber(): typeof nothing | import("lit").TemplateResult<1>;
   render(): import("lit").TemplateResult<1>;
   private _getTooltipValue;
   static styles: CSSResultGroup;

package/dist/labelled-radial-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"labelled-radial-input.d.ts","names":[],"sources":["../src/labelled-radial-input/labelled-radial-input.ts"],"mappings":";;;;cA0Da,4BAA4B;WAC9B;EAGA;EACA;EAEmB;EACA;EAC2B,aAAa;EACvC;EACwB,WAAW;EACnC;EACA;EAEoC;;EAGpC;UAEZ;UAIT;YAeW,cAAc,SAAS;YAMvB,uCAAqB,2BAAA;EA0B/B,wBAAM;UA6BP;SAYD,QAAQ;;QA0ET;YACI;IACR,8BAA8B"}
+{"version":3,"file":"labelled-radial-input.d.ts","names":[],"sources":["../src/labelled-radial-input/labelled-radial-input.ts"],"mappings":";;;;cA0Da,4BAA4B;WAC9B;EAGA;EACA;EAEmB;EACA;EAC2B,aAAa;EACvC;EACwB,WAAW;EACnC;EACA;EAEoC;;EAGpC;UAEZ;UAIT;YAeW,cAAc,SAAS;YAMvB,gCAAqB,wBAAA;EA0B/B,wBAAM;UA6BP;SAYD,QAAQ;;QA0ET;YACI;IACR,8BAA8B"}

package/dist/labelled-range-input.d.ts

@@ -1,2 +1,2 @@
-import { t as LabelledRangeInput } from "./index-BUB5SICW.js";
+import { t as LabelledRangeInput } from "./index-CoqtMSd9.js";
 export { LabelledRangeInput };

package/dist/{menu-item-CQ4Qg731.d.ts → menu-item-DSyf9f_L.d.ts}

@@ -1,4 +1,4 @@
-import "./icon-BUwP1CZ1.js";
+import "./icon-DpA9x2Ve.js";
 import { LitElement } from "lit";
 import { CommandRegistry, KeyboardManager } from "@clinth/ui-commands";
 //#region src/menu/menu-container.d.ts
@@ -124,4 +124,4 @@ declare global {
 }
 //#endregion
 export { MenuContainer as i, MenuTrigger as n, MenuTriggerCommandDetail as r, MenuItem as t };
-//# sourceMappingURL=menu-item-CQ4Qg731.d.ts.map
+//# sourceMappingURL=menu-item-DSyf9f_L.d.ts.map

package/dist/{menu-item-CQ4Qg731.d.ts.map → menu-item-DSyf9f_L.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"menu-item-CQ4Qg731.d.ts","names":[],"sources":["../src/menu/menu-container.ts","../src/menu/menu-trigger.ts","../src/menu/menu-item.ts"],"mappings":";;;;cASa,sBAAsB;EACgB;EACjB,WAAW;EACX,kBAAkB;UACvB;UAGnB;SAwBD,sBAAM;UA4BL;UAkDA;EAYC,QAAQ,mBAAmB;;;;EASpC,WAAW,SAAS,IAAI;EAOxB,wBAAM;UAaE;;;;;UAoCA;UAiCA;EA0BR;UAIQ;UAQA;UAUA;UAqDA;;QAqCF;YACI;IACR,uBAAuB;;;;;KCxWtB;KACA;KAEO;WACD;WACA;WACA;;cAME,oBAAoB;EACH,MAAM;EACN;EACI,WAAW;EACX,kBAAkB;EACtB,WAAW;UAEtB;UACA;UACA;UAEc;UACN;iBAEV;UAEP;UACA;EAER;EAOA;EAQA;EAkBA,QAAQ,mBAAmB;UAMnB;UAYA;UAWA;UAOA;MAKJ;EAIJ;EAIA;EAIA;UAIQ;UAgBA;UAQA;UAYA;UAUA;UAYA;UAOA;UAeA;UAeA;UAkBA;SAiBD,sBAAM;EAmEb,wBAAM;;QAwBA;YACI;IACR,qBAAqB;;;;;cChVZ,iBAAiB;EACA;EAC2B;EAC3B;EACC;EACuB;EACpB,WAAW;EACX,kBAAkB;EAClB,iBAAiB;UAEhC;UACM;UAEf;EAER;UAOQ;UAKA;UAWA;UAQA;UAUA;UAUA;UAWA;UASA;EASR,WAAW,mBAAmB;EAU9B,QAAQ,mBAAmB;UAInB;SAaQ,sBAAM;EAkEtB,wBAAM;;QAwBA;YACI;IACR,kBAAkB"}
+{"version":3,"file":"menu-item-DSyf9f_L.d.ts","names":[],"sources":["../src/menu/menu-container.ts","../src/menu/menu-trigger.ts","../src/menu/menu-item.ts"],"mappings":";;;;cASa,sBAAsB;EACgB;EACjB,WAAW;EACX,kBAAkB;UACvB;UAGnB;SAwBD,sBAAM;UA4BL;UAkDA;EAYC,QAAQ,mBAAmB;;;;EASpC,WAAW,SAAS,IAAI;EAOxB,wBAAM;UAaE;;;;;UAoCA;UAiCA;EA0BR;UAIQ;UAQA;UAUA;UAqDA;;QAqCF;YACI;IACR,uBAAuB;;;;;KCxWtB;KACA;KAEO;WACD;WACA;WACA;;cAME,oBAAoB;EACH,MAAM;EACN;EACI,WAAW;EACX,kBAAkB;EACtB,WAAW;UAEtB;UACA;UACA;UAEc;UACN;iBAEV;UAEP;UACA;EAER;EAOA;EAQA;EAkBA,QAAQ,mBAAmB;UAMnB;UAYA;UAWA;UAOA;MAKJ;EAIJ;EAIA;EAIA;UAIQ;UAgBA;UAQA;UAYA;UAUA;UAYA;UAOA;UAeA;UAeA;UAkBA;SAiBD,sBAAM;EAmEb,wBAAM;;QAwBA;YACI;IACR,qBAAqB;;;;;cChVZ,iBAAiB;EACA;EAC2B;EAC3B;EACC;EACuB;EACpB,WAAW;EACX,kBAAkB;EAClB,iBAAiB;UAEhC;UACM;UAEf;EAER;UAOQ;UAKA;UAWA;UAQA;UAUA;UAUA;UAWA;UASA;EASR,WAAW,mBAAmB;EAU9B,QAAQ,mBAAmB;UAInB;SAaQ,sBAAM;EAkEtB,wBAAM;;QAwBA;YACI;IACR,kBAAkB"}

package/dist/menu.d.ts

@@ -1,3 +1,3 @@
-import { i as MenuContainer, n as MenuTrigger, t as MenuItem } from "./menu-item-CQ4Qg731.js";
-import { a as menuFromTree, c as MenuSeparator, d as MenuCheckItem, f as MenuBar, i as MenuFromTreeOptions, l as MenuSubTrigger, n as MenuRadioGroup, o as menuFromTreeToElements, r as MenuRadioItem, s as MenuHeader, u as MenuCommandController } from "./index-B1UKcA7l.js";
+import { i as MenuContainer, n as MenuTrigger, t as MenuItem } from "./menu-item-DSyf9f_L.js";
+import { a as menuFromTree, c as MenuSeparator, d as MenuCheckItem, f as MenuBar, i as MenuFromTreeOptions, l as MenuSubTrigger, n as MenuRadioGroup, o as menuFromTreeToElements, r as MenuRadioItem, s as MenuHeader, u as MenuCommandController } from "./index-DfEkTGvT.js";
 export { MenuBar, MenuCheckItem, MenuCommandController, MenuContainer, type MenuFromTreeOptions, MenuHeader, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubTrigger, MenuTrigger, menuFromTree, menuFromTreeToElements };

package/dist/panel.d.ts

@@ -1,4 +1,4 @@
-import "./icon-BUwP1CZ1.js";
+import "./icon-DpA9x2Ve.js";
 import { LitElement } from "lit";
 //#region src/panel/panel.d.ts
 type PanelOrientation = `horizontal` | `vertical`;

package/dist/{tab-list-VtWT-_FG.d.ts → tab-list-BohmbvqF.d.ts}

@@ -1,4 +1,4 @@
-import "./icon-BUwP1CZ1.js";
+import "./icon-DpA9x2Ve.js";
 import { LitElement, PropertyValues } from "lit";
 import { CommandRegistry } from "@clinth/ui-commands";
 //#region src/tabs/tab-list-item.d.ts
@@ -71,4 +71,4 @@ declare global {
 }
 //#endregion
 export { TabListReorderDetail as a, TabListElement as i, TabListChangeEvent as n, TabListReorderEvent as o, TabListDragMode as r, TabListItemElement as s, TabListChangeDetail as t };
-//# sourceMappingURL=tab-list-VtWT-_FG.d.ts.map
+//# sourceMappingURL=tab-list-BohmbvqF.d.ts.map

package/dist/{tab-list-VtWT-_FG.d.ts.map → tab-list-BohmbvqF.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"tab-list-VtWT-_FG.d.ts","names":[],"sources":["../src/tabs/tab-list-item.ts","../src/tabs/tab-list.ts"],"mappings":";;;;;;;;;;cAgBa,2BAA2B;EAEtC;EAGA;EAGA;EAGA;EAGA,UAAU;UAEO;UACT;UACA;EAEC;EAQA;EAQA,QAAQ,SAAS;UAQlB;UAUA;EAWC,wBAAM;UAyBP;SAWQ,sBAAM;;QA0GhB;YACI;IACR,sBAAsB;;;;;;;;;;KCnNd;WACD;WACA;WACA;;KAGC,qBAAqB,YAAY;KAEjC;WACD;WACA;WACA;;KAGC,sBAAsB,YAAY;KAElC;cAMC,uBAAuB;;EAElC;EAGA;EAGA;EAGA,UAAU;EA2BD,wBAAM;EA4BN;EAQA,QAAQ,mBAAmB;EA8FpC,sBAAkB;EAwBlB,cAAc,IAAI;SAwaX,sBAAM;;QAgGP;YACI;IACR,iBAAiB"}
+{"version":3,"file":"tab-list-BohmbvqF.d.ts","names":[],"sources":["../src/tabs/tab-list-item.ts","../src/tabs/tab-list.ts"],"mappings":";;;;;;;;;;cAgBa,2BAA2B;EAEtC;EAGA;EAGA;EAGA;EAGA,UAAU;UAEO;UACT;UACA;EAEC;EAQA;EAQA,QAAQ,SAAS;UAQlB;UAUA;EAWC,wBAAM;UAyBP;SAWQ,sBAAM;;QA0GhB;YACI;IACR,sBAAsB;;;;;;;;;;KCnNd;WACD;WACA;WACA;;KAGC,qBAAqB,YAAY;KAEjC;WACD;WACA;WACA;;KAGC,sBAAsB,YAAY;KAElC;cAMC,uBAAuB;;EAElC;EAGA;EAGA;EAGA,UAAU;EA2BD,wBAAM;EA4BN;EAQA,QAAQ,mBAAmB;EA8FpC,sBAAkB;EAwBlB,cAAc,IAAI;SAwaX,sBAAM;;QAgGP;YACI;IACR,iBAAiB"}

package/dist/tabs.d.ts

@@ -1,2 +1,2 @@
-import { a as TabListReorderDetail, i as TabListElement, n as TabListChangeEvent, o as TabListReorderEvent, r as TabListDragMode, t as TabListChangeDetail } from "./tab-list-VtWT-_FG.js";
+import { a as TabListReorderDetail, i as TabListElement, n as TabListChangeEvent, o as TabListReorderEvent, r as TabListDragMode, t as TabListChangeDetail } from "./tab-list-BohmbvqF.js";
 export { TabListChangeDetail, TabListChangeEvent, TabListDragMode, TabListElement, TabListReorderDetail, TabListReorderEvent };

package/docs-user/vertical-list.md

@@ -127,14 +127,14 @@ Switching `interactionMode` always clears the current selection.
 | `'implicit'` | Click always replaces selection. No modifier support. |
 | `'standard'` | Plain click replaces selection; Ctrl/Cmd+click toggles; Shift+click range-selects (multiple mode only); Cmd+A selects all |
 | `'vscode'` | Like `standard` for clicks; Shift+Arrow extends the range from the keyboard anchor |
-| `'checked'` | Checkbox column on the left of every row; only that column is clickable and it spans the full row height so a tall card can still be toggled with a single click on the left; Space toggles the focused row. See [Custom checkbox](#custom-checkbox) for styling |
+| `'checked'` | Checkbox column on the left of every row; only that column is clickable and it spans the full row height so a tall card can still be toggled with a single click on the left; Space toggles the focused row. Rows marked `not-checked` get no checkbox and can't be checked (see [Non-checkable rows](#non-checkable-rows)). See [Custom checkbox](#custom-checkbox) for styling |
 | `'manual'` | No automatic selection; drive state entirely via `select()` / `deselect()` / `clearSelection()` |
 
 ---
 
 ## Custom checkbox
 
-In `checked` mode every row gets a checkbox column on the left. The column is always a **full-height click target** (the wrapper uses `align-self: stretch`), so a single click anywhere on the left side of a tall card toggles it — you never have to precisely hit a small checkbox. Clicks on the row body (the text or custom card content) do **not** toggle, and the cursor is `default` there so the affordance is clear.
+In `checked` mode every row gets a checkbox column on the left — except rows marked [`not-checked`](#non-checkable-rows), which get no checkbox and can't be checked. The column is always a **full-height click target** (the wrapper uses `align-self: stretch`), so a single click anywhere on the left side of a tall card toggles it — you never have to precisely hit a small checkbox. Clicks on the row body (the text or custom card content) do **not** toggle, and the cursor is `default` there so the affordance is clear.
 
 By default the column contains a native `<input type="checkbox">`. The visible square is small, but the entire column (~20–24px wide, full row height) is clickable.
 
@@ -189,9 +189,44 @@ list.checkboxRenderer = {
 
 Because the wrapper still spans the full row height and owns the click handler, the empty unchecked area is just as clickable as the visible tick — even though there is no border, background, or other visual indicator of where the column is.
 
+### Non-checkable rows (`not-checked`)
+
+Sometimes a list needs rows that are informational rather than selectable — headers, separators, "new document" placeholders. Mark an item with the `not-checked` attribute to opt it out in `checked` mode:
+
+```html
+<ixfx-vertical-list interaction-mode="checked">
+  <li not-checked>Recent files</li>
+  <li>Document A</li>
+  <li>Image 01.png</li>
+</ixfx-vertical-list>
+```
+
+A `not-checked` row:
+
+- shows **no checkbox column** (nothing is rendered on its left),
+- can **not be selected, toggled, or range-selected** — click, Space, `select()`, `selectMany()`, and `Cmd/Ctrl+A` all skip it,
+- is still **visible and navigable** — the cursor moves onto it, and it still fires `list-item-click` and `list-activate` (e.g. Enter).
+
+Outside `checked` mode the attribute has no effect, so the same item remains fully selectable in other interaction modes.
+
+The attribute works on both plain `<li>` items and `data-list-item` custom elements (on the custom element itself, before it is wrapped).
+
+When adding items programmatically, pass `notChecked: true` to `addItem()` instead of setting the attribute yourself:
+
+```typescript
+list.addItem('Header', { notChecked: true });
+list.addItem('Document A');
+
+// Or set the attribute directly on an element
+const header = document.createElement('li');
+header.textContent = 'Header';
+header.setAttribute('not-checked', '');
+list.addItem(header);
+```
+
 ### How it works under the hood
 
-In `checked` mode each row has a `<span class="ixfx-list-checkbox" role="checkbox" part="checkbox">` prepended as the first child:
+In `checked` mode each checkable row has a `<span class="ixfx-list-checkbox" role="checkbox" part="checkbox">` prepended as the first child:
 
 - When `checkboxRenderer` is set, your template is rendered into the span (via lit's `render()`) and re-rendered on every state change.
 - When `checkboxRenderer` is **not** set, the span contains a real `<input type="checkbox">` with `pointer-events: none` — the span owns the click so there is exactly one toggle per click.
@@ -239,6 +274,9 @@ list.selectAll();
 list.addItem('New item');
 list.addItem(myElement);
 
+// In checked mode, add a row that shows no checkbox and can't be checked
+list.addItem('Header', { notChecked: true });
+
 // Remove a specific element
 list.removeItem(element);
 
@@ -277,6 +315,8 @@ The component reflects state onto list items as data attributes. Use these in CS
 | `data-selected` | The item is in the current selection |
 | `data-checked` | Set in `checked` mode; mirrors `data-selected` |
 
+The `not-checked` attribute is user-set, not reflected: it opts a row out of `checked` mode (see [Non-checkable rows](#non-checkable-rows)).
+
 ---
 
 ## Events
@@ -431,7 +471,7 @@ ixfx-vertical-list {
 |---|---|
 | `list` | The `<ul>` scroll container |
 | `search-overlay` | The floating search input overlay |
-| `checkbox` | The per-row checkbox column wrapper in `checked` mode (always present; hosts the native `<input>` or the user-rendered content) |
+| `checkbox` | The per-row checkbox column wrapper in `checked` mode (present on checkable rows; hosts the native `<input>` or the user-rendered content) |
 
 Use `::part()` to style these from outside the component's shadow DOM:
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
   "type": "module",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "description": "",
   "author": "",
   "license": "ISC",

package/dist/icon-BUwP1CZ1.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"icon-BUwP1CZ1.d.ts","names":[],"sources":["../src/icons/icon.ts"],"mappings":";;;;;;;;;;;;;cAoBa,wBAAwB;;EACvB;EACgB;EAChB;EAC0C;EACU;EAQvD;EAKA;YAKU,wBAAM,2BAAA;YAgBN,QAAQ,SAAS;SAWpB,sBAAM;;QAsChB;YACI;IACR,aAAa"}