@ixfx/components 0.6.0 → 0.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/bundle/index.d.ts +176 -1
  2. package/bundle/index.d.ts.map +1 -1
  3. package/bundle/index.js +810 -1
  4. package/bundle/index.js.map +1 -1
  5. package/dist/ac-text.d.ts +1 -1
  6. package/dist/{ac-token-DVbmHmky.d.ts → ac-token-BAa6ke09.d.ts} +2 -2
  7. package/dist/{ac-token-DVbmHmky.d.ts.map → ac-token-BAa6ke09.d.ts.map} +1 -1
  8. package/dist/ac-token.d.ts +1 -1
  9. package/dist/colour-picker.d.ts +1 -1
  10. package/dist/crumbs.d.ts +1 -1
  11. package/dist/{data-grid-BeAkORz2.d.ts → data-grid-C8qIo1-u.d.ts} +2 -2
  12. package/dist/{data-grid-BeAkORz2.d.ts.map → data-grid-C8qIo1-u.d.ts.map} +1 -1
  13. package/dist/data-grid.d.ts +1 -1
  14. package/dist/{grouped-item-lister-CNLMgdIr.d.ts → grouped-item-lister-_pMDwIo1.d.ts} +2 -2
  15. package/dist/{grouped-item-lister-CNLMgdIr.d.ts.map → grouped-item-lister-_pMDwIo1.d.ts.map} +1 -1
  16. package/dist/grouped-item-lister.d.ts +1 -1
  17. package/dist/{icon-BUwP1CZ1.d.ts → icon-DpA9x2Ve.d.ts} +2 -2
  18. package/dist/icon-DpA9x2Ve.d.ts.map +1 -0
  19. package/dist/icons.d.ts +2 -2
  20. package/dist/{index-RqMh1i-O.d.ts → index-BtGFYfaK.d.ts} +2 -2
  21. package/dist/{index-RqMh1i-O.d.ts.map → index-BtGFYfaK.d.ts.map} +1 -1
  22. package/dist/{index-ovq_GTdl.d.ts → index-CKtLhgYj.d.ts} +3 -3
  23. package/dist/{index-ovq_GTdl.d.ts.map → index-CKtLhgYj.d.ts.map} +1 -1
  24. package/dist/{index-BUB5SICW.d.ts → index-CoqtMSd9.d.ts} +2 -2
  25. package/dist/{index-BUB5SICW.d.ts.map → index-CoqtMSd9.d.ts.map} +1 -1
  26. package/dist/{index-BOUaDIW-.d.ts → index-tq6f8007.d.ts} +2 -2
  27. package/dist/{index-BOUaDIW-.d.ts.map → index-tq6f8007.d.ts.map} +1 -1
  28. package/dist/index.d.ts +186 -11
  29. package/dist/index.d.ts.map +1 -1
  30. package/dist/index.js +811 -1
  31. package/dist/index.js.map +1 -1
  32. package/dist/{labelled-input-base-Dp_9KP0G.d.ts → labelled-input-base-DiTme1JO.d.ts} +2 -2
  33. package/dist/{labelled-input-base-Dp_9KP0G.d.ts.map → labelled-input-base-DiTme1JO.d.ts.map} +1 -1
  34. package/dist/labelled-radial-input.d.ts +2 -2
  35. package/dist/labelled-radial-input.d.ts.map +1 -1
  36. package/dist/labelled-range-input.d.ts +1 -1
  37. package/dist/{menu-item-BG5w7fi4.d.ts → menu-item-Bs2MYyHq.d.ts} +2 -2
  38. package/dist/{menu-item-BG5w7fi4.d.ts.map → menu-item-Bs2MYyHq.d.ts.map} +1 -1
  39. package/dist/menu.d.ts +2 -2
  40. package/dist/panel.d.ts +1 -1
  41. package/dist/{tab-list-Beuh2nom.d.ts → tab-list-D_1cYhB_.d.ts} +2 -2
  42. package/dist/{tab-list-Beuh2nom.d.ts.map → tab-list-D_1cYhB_.d.ts.map} +1 -1
  43. package/dist/tabs.d.ts +1 -1
  44. package/docs-user/README.md +1 -0
  45. package/docs-user/index.json +7 -2
  46. package/docs-user/llms.txt +1 -0
  47. package/docs-user/toolbar.md +135 -0
  48. package/llms.txt +1 -0
  49. package/package.json +2 -1
  50. package/dist/icon-BUwP1CZ1.d.ts.map +0 -1
@@ -33,9 +33,9 @@ declare abstract class LabelledInputBase extends LitElement {
33
33
  value: number;
34
34
  }>) => void;
35
35
  protected _syncValue(v: number): void;
36
- protected _renderEditableNumber(): import("lit").TemplateResult<1> | typeof nothing;
36
+ protected _renderEditableNumber(): typeof nothing | import("lit").TemplateResult<1>;
37
37
  updated(changedProperties: Map<string, unknown>): void;
38
38
  }
39
39
  //#endregion
40
40
  export { LabelledInputBase as t };
41
- //# sourceMappingURL=labelled-input-base-Dp_9KP0G.d.ts.map
41
+ //# sourceMappingURL=labelled-input-base-DiTme1JO.d.ts.map
@@ -1 +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"}
1
+ {"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"}
@@ -1,4 +1,4 @@
1
- import { t as LabelledInputBase } from "./labelled-input-base-Dp_9KP0G.js";
1
+ import { t as LabelledInputBase } from "./labelled-input-base-DiTme1JO.js";
2
2
  import { i as MarkerStyle, l as ValueMode } from "./radial-input-DXMN55Nz.js";
3
3
  import { CSSResultGroup, nothing } from "lit";
4
4
  //#region src/labelled-radial-input/labelled-radial-input.d.ts
@@ -19,7 +19,7 @@ declare class LabelledRadialInput extends LabelledInputBase {
19
19
  private _isWide;
20
20
  private _getEffectivePrecision;
21
21
  protected _handleResize(entries: ResizeObserverEntry[]): void;
22
- protected _renderEditableNumber(): import("lit").TemplateResult<1> | typeof nothing;
22
+ protected _renderEditableNumber(): typeof nothing | import("lit").TemplateResult<1>;
23
23
  render(): import("lit").TemplateResult<1>;
24
24
  private _getTooltipValue;
25
25
  static styles: CSSResultGroup;
@@ -1 +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"}
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,gCAAqB,wBAAA;EA0B/B,wBAAM;UA6BP;SAYD,QAAQ;;QA0ET;YACI;IACR,8BAA8B"}
@@ -1,2 +1,2 @@
1
- import { t as LabelledRangeInput } from "./index-BUB5SICW.js";
1
+ import { t as LabelledRangeInput } from "./index-CoqtMSd9.js";
2
2
  export { LabelledRangeInput };
@@ -1,4 +1,4 @@
1
- import "./icon-BUwP1CZ1.js";
1
+ import "./icon-DpA9x2Ve.js";
2
2
  import { LitElement } from "lit";
3
3
  import { CommandRegistry, KeyboardManager } from "@clinth/ui-commands";
4
4
  //#region src/menu/menu-container.d.ts
@@ -126,4 +126,4 @@ declare global {
126
126
  }
127
127
  //#endregion
128
128
  export { MenuContainer as i, MenuTrigger as n, MenuTriggerCommandDetail as r, MenuItem as t };
129
- //# sourceMappingURL=menu-item-BG5w7fi4.d.ts.map
129
+ //# sourceMappingURL=menu-item-Bs2MYyHq.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"menu-item-BG5w7fi4.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;;EAEa;UAEnC;UACA;UACA;UAEc;UACN;iBAEV;UAEP;UACA;EAER;EAOA;EAQA;EAkBA,QAAQ,mBAAmB;UAMnB;UAqBA;UAWA;UAOA;MAKJ;EAIJ;EAIA;EAIA;UAIQ;UAgBA;UAQA;UAYA;UAUA;UAYA;UAOA;UAeA;UAeA;UAkBA;SAiBD,sBAAM;EAyEb,wBAAM;;QAwBA;YACI;IACR,qBAAqB;;;;;cCjWZ,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"}
1
+ {"version":3,"file":"menu-item-Bs2MYyHq.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;;EAEa;UAEnC;UACA;UACA;UAEc;UACN;iBAEV;UAEP;UACA;EAER;EAOA;EAQA;EAkBA,QAAQ,mBAAmB;UAMnB;UAqBA;UAWA;UAOA;MAKJ;EAIJ;EAIA;EAIA;UAIQ;UAgBA;UAQA;UAYA;UAUA;UAYA;UAOA;UAeA;UAeA;UAkBA;SAiBD,sBAAM;EAyEb,wBAAM;;QAwBA;YACI;IACR,qBAAqB;;;;;cCjWZ,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 CHANGED
@@ -1,3 +1,3 @@
1
- import { i as MenuContainer, n as MenuTrigger, t as MenuItem } from "./menu-item-BG5w7fi4.js";
2
- 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-ovq_GTdl.js";
1
+ import { i as MenuContainer, n as MenuTrigger, t as MenuItem } from "./menu-item-Bs2MYyHq.js";
2
+ 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-CKtLhgYj.js";
3
3
  export { MenuBar, MenuCheckItem, MenuCommandController, MenuContainer, type MenuFromTreeOptions, MenuHeader, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubTrigger, MenuTrigger, menuFromTree, menuFromTreeToElements };
package/dist/panel.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import "./icon-BUwP1CZ1.js";
1
+ import "./icon-DpA9x2Ve.js";
2
2
  import { LitElement } from "lit";
3
3
  //#region src/panel/panel.d.ts
4
4
  type PanelOrientation = `horizontal` | `vertical`;
@@ -1,4 +1,4 @@
1
- import "./icon-BUwP1CZ1.js";
1
+ import "./icon-DpA9x2Ve.js";
2
2
  import { LitElement, PropertyValues } from "lit";
3
3
  import { CommandRegistry } from "@clinth/ui-commands";
4
4
  //#region src/tabs/tab-list-item.d.ts
@@ -78,4 +78,4 @@ declare global {
78
78
  }
79
79
  //#endregion
80
80
  export { TabListReorderDetail as a, TabListElement as i, TabListChangeEvent as n, TabListReorderEvent as o, TabListDragMode as r, TabListItemElement as s, TabListChangeDetail as t };
81
- //# sourceMappingURL=tab-list-Beuh2nom.d.ts.map
81
+ //# sourceMappingURL=tab-list-D_1cYhB_.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"tab-list-Beuh2nom.d.ts","names":[],"sources":["../src/tabs/tab-list-item.ts","../src/tabs/tab-list.ts"],"mappings":";;;;;;;;;;;cAiBa,2BAA2B;EAEtC;EAGA;EAGA;EAGA;EAGA;EAGA,UAAU;UAEO;UACA;UACT;UACA;EAEC;EAUA;EAUA,QAAQ,SAAS;UAQlB;UAUA;UAWA;UAIA;EAKC;EAIA,wBAAM;UA8BP;SAWQ,sBAAM;;QA+GhB;YACI;IACR,sBAAsB;;;;;;;;;;KCnPd;WACD;WACA;WACA;;KAGC,qBAAqB,YAAY;KAEjC;WACD;WACA;WACA;;KAGC,sBAAsB,YAAY;KAElC;cAMC,uBAAuB;;EAElC;EAGA;EAGA;EAGA;EAGA,UAAU;EA2BD,wBAAM;EA6BN;EASA,QAAQ,mBAAmB;EA2GpC,sBAAkB;EAwBlB,cAAc,IAAI;SAwaX,sBAAM;;QAoGP;YACI;IACR,iBAAiB"}
1
+ {"version":3,"file":"tab-list-D_1cYhB_.d.ts","names":[],"sources":["../src/tabs/tab-list-item.ts","../src/tabs/tab-list.ts"],"mappings":";;;;;;;;;;;cAiBa,2BAA2B;EAEtC;EAGA;EAGA;EAGA;EAGA;EAGA,UAAU;UAEO;UACA;UACT;UACA;EAEC;EAUA;EAUA,QAAQ,SAAS;UAQlB;UAUA;UAWA;UAIA;EAKC;EAIA,wBAAM;UA8BP;SAWQ,sBAAM;;QA+GhB;YACI;IACR,sBAAsB;;;;;;;;;;KCnPd;WACD;WACA;WACA;;KAGC,qBAAqB,YAAY;KAEjC;WACD;WACA;WACA;;KAGC,sBAAsB,YAAY;KAElC;cAMC,uBAAuB;;EAElC;EAGA;EAGA;EAGA;EAGA,UAAU;EA2BD,wBAAM;EA6BN;EASA,QAAQ,mBAAmB;EA2GpC,sBAAkB;EAwBlB,cAAc,IAAI;SAwaX,sBAAM;;QAoGP;YACI;IACR,iBAAiB"}
package/dist/tabs.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { a as TabListReorderDetail, i as TabListElement, n as TabListChangeEvent, o as TabListReorderEvent, r as TabListDragMode, t as TabListChangeDetail } from "./tab-list-Beuh2nom.js";
1
+ import { a as TabListReorderDetail, i as TabListElement, n as TabListChangeEvent, o as TabListReorderEvent, r as TabListDragMode, t as TabListChangeDetail } from "./tab-list-D_1cYhB_.js";
2
2
  export { TabListChangeDetail, TabListChangeEvent, TabListDragMode, TabListElement, TabListReorderDetail, TabListReorderEvent };
@@ -39,6 +39,7 @@ This directory contains documentation for each component and some architectural
39
39
  - [swipe](./swipe.md)
40
40
  - [tabs](./tabs.md)
41
41
  - [timeline](./timeline.md)
42
+ - [toolbar](./toolbar.md)
42
43
  - [transitory-label](./transitory-label.md)
43
44
  - [tree](./tree.md)
44
45
  - [util](./util.md)
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ixfx/components",
3
- "version": "0.6.0",
4
- "generated": "2026-08-29T11:13:25.291Z",
3
+ "version": "0.6.2",
4
+ "generated": "2026-08-30T20:26:05.718Z",
5
5
  "components": [
6
6
  {
7
7
  "name": "ac-text",
@@ -178,6 +178,11 @@
178
178
  "summary": "A canvas-based timeline component with tracks, events, zoom/pan, and vertical track resizing. Suitable for visualizing time-series data, event logs, or scheduling.",
179
179
  "path": "docs-user/timeline.md"
180
180
  },
181
+ {
182
+ "name": "toolbar",
183
+ "summary": "Two components for building toolbars:",
184
+ "path": "docs-user/toolbar.md"
185
+ },
181
186
  {
182
187
  "name": "transitory-label",
183
188
  "summary": "An inline text label that animates between values instead of changing instantly. Displays as `inline-block` and inherits text styling from its parent.",
@@ -46,6 +46,7 @@ import '@ixfx/components/data-grid';
46
46
  - [swipe](docs-user/swipe.md): A touch-friendly swipe/nudge component. User taps and drags to generate a value in range [-1, 1]. Value is emitted only on pointer release.
47
47
  - [tabs](docs-user/tabs.md): A complete tabbed interface system using several coordinated components:
48
48
  - [timeline](docs-user/timeline.md): A canvas-based timeline component with tracks, events, zoom/pan, and vertical track resizing. Suitable for visualizing time-series data, event logs, or scheduling.
49
+ - [toolbar](docs-user/toolbar.md): Two components for building toolbars:
49
50
  - [transitory-label](docs-user/transitory-label.md): An inline text label that animates between values instead of changing instantly. Displays as `inline-block` and inherits text styling from its parent.
50
51
  - [tree](docs-user/tree.md): Three components share a common `TreeComponent` interface: **`ixfx-tree-list`**, **`ixfx-miller-list`**, and **`ixfx-crumb-navigation`**. This document describes the shared API, plus component-specifi
51
52
  - [util](docs-user/util.md): A tooltip component that renders a value with optional icon and formatted number display. Uses native render root (no shadow DOM).
@@ -0,0 +1,135 @@
1
+ # Toolbar components
2
+
3
+ Two components for building toolbars:
4
+
5
+ - **`ixfx-toolbar`** — a responsive toolbar container with overflow handling
6
+ - **`ixfx-toolbar-group`** — a labelled grouping container for toolbar items
7
+
8
+ ---
9
+
10
+ ## `ixfx-toolbar`
11
+
12
+ A responsive toolbar container that handles overflow by moving items to a popover. Supports horizontal and vertical orientations.
13
+
14
+ ```html
15
+ <ixfx-toolbar>
16
+ <ixfx-toolbar-group label="Clipboard">
17
+ <ixfx-button icon="copy">Copy</ixfx-button>
18
+ <ixfx-button icon="paste">Paste</ixfx-button>
19
+ </ixfx-toolbar-group>
20
+ <ixfx-toolbar-group label="Font">
21
+ <ixfx-button>B</ixfx-button>
22
+ <ixfx-button>I</ixfx-button>
23
+ </ixfx-toolbar-group>
24
+ </ixfx-toolbar>
25
+ ```
26
+
27
+ ### Properties / attributes
28
+
29
+ | Attribute / Property | Type | Default | Description |
30
+ |---------------------|---------------------------------------------------|----------------|------------------------------------------------------|
31
+ | `orientation` | `'horizontal'` \| `'vertical-left'` \| `'vertical-right'` | `'horizontal'` | Layout direction. `vertical-left` flips text upward. |
32
+ | `layout` | `'one-line'` \| `'wrap'` | `'one-line'` | Whether items wrap or overflow |
33
+ | `vertical-writing` | `'auto'` \| `'up'` \| `'down'` \| `'none'` | `'auto'` | Writing mode for vertical orientations |
34
+ | `show-group-labels` | boolean | `false` | Show labels as rows above group content |
35
+ | `invisible-groups` | boolean | `false` | Hide group borders and backgrounds |
36
+
37
+ ### Slots
38
+
39
+ | Slot | Description |
40
+ |-------------|------------------------------------------|
41
+ | default | Toolbar items (buttons, groups, etc.) |
42
+ | `overflow` | Items in the overflow popover |
43
+
44
+ ### CSS custom properties
45
+
46
+ | Property | Default | Description |
47
+ |----------|---------|--------------------------------------|
48
+ | `--toolbar-gap` | `var(--space-s)` | Gap between toolbar items |
49
+ | `--toolbar-bg` | `var(--surface-2)` | Toolbar background |
50
+ | `--toolbar-padding` | `var(--space-s)` | Toolbar padding |
51
+ | `--toolbar-border` | `var(--border-subtle)` | Toolbar border |
52
+
53
+ ### Writing mode
54
+
55
+ For vertical toolbars, `vertical-writing` controls how text is displayed:
56
+
57
+ - `'auto'` — `vertical-right` uses `vertical-lr`, `vertical-left` uses `vertical-rl`
58
+ - `'up'` — Forces `vertical-rl` (text runs upward)
59
+ - `'down'` — Forces `vertical-lr` (text runs downward)
60
+ - `'none'` — Forces `horizontal-tb` (no vertical writing)
61
+
62
+ ### Overflow handling
63
+
64
+ When `layout="one-line"` and items exceed available space, excess items are moved to an overflow popover. The popover is positioned using CSS Anchor Positioning relative to the overflow button.
65
+
66
+ ```html
67
+ <ixfx-toolbar layout="one-line">
68
+ <!-- Items that don't fit will be moved to overflow -->
69
+ <ixfx-button>Item 1</ixfx-button>
70
+ <ixfx-button>Item 2</ixfx-button>
71
+ <!-- ... -->
72
+ </ixfx-toolbar>
73
+ ```
74
+
75
+ ---
76
+
77
+ ## `ixfx-toolbar-group`
78
+
79
+ A grouping container for toolbar items. Groups can have a label and support grow behavior.
80
+
81
+ ```html
82
+ <ixfx-toolbar-group label="Font">
83
+ <ixfx-button>B</ixfx-button>
84
+ <ixfx-button>I</ixfx-button>
85
+ </ixfx-toolbar-group>
86
+
87
+ <ixfx-toolbar-group grow>
88
+ <!-- This group takes up remaining space -->
89
+ </ixfx-toolbar-group>
90
+ ```
91
+
92
+ ### Properties / attributes
93
+
94
+ | Attribute / Property | Type | Default | Description |
95
+ |---------------------|---------|---------|------------------------------------------|
96
+ | `label` | string | `''` | Label text displayed above content |
97
+ | `grow` | boolean | `false` | Group grows to fill remaining space |
98
+
99
+ ### CSS custom properties
100
+
101
+ | Property | Default | Description |
102
+ |-----------------------------------|-------------|----------------------------------------------|
103
+ | `--toolbar-group-justify-content` | `flex-start` | Horizontal alignment of group contents |
104
+ | `--toolbar-group-align-items` | `center` | Vertical alignment of group contents |
105
+
106
+ ```html
107
+ <!-- Right-align items within a group -->
108
+ <ixfx-toolbar-group style="--toolbar-group-justify-content: flex-end;">
109
+ <ixfx-button>Action</ixfx-button>
110
+ </ixfx-toolbar-group>
111
+ ```
112
+
113
+ ---
114
+
115
+ ## Demos
116
+
117
+ See `demo/toolbar.html` for complete examples including:
118
+
119
+ - Word-style horizontal toolbar with font selection, formatting buttons, and paragraph controls
120
+ - Chrome-style toolbar with a growable search input
121
+ - Vertical toolbars with different writing modes
122
+ - Footer toolbar with far-right justified group
123
+ - Toolbar with group labels displayed as rows
124
+
125
+ ---
126
+
127
+ ## TypeScript types
128
+
129
+ ```ts
130
+ import type {
131
+ ToolbarOrientation, // 'horizontal' | 'vertical-left' | 'vertical-right'
132
+ ToolbarLayout, // 'one-line' | 'wrap'
133
+ ToolbarVerticalWriting // 'auto' | 'up' | 'down' | 'none'
134
+ } from 'ixfxfun-components';
135
+ ```
package/llms.txt CHANGED
@@ -46,6 +46,7 @@ import '@ixfx/components/data-grid';
46
46
  - [swipe](docs-user/swipe.md): A touch-friendly swipe/nudge component. User taps and drags to generate a value in range [-1, 1]. Value is emitted only on pointer release.
47
47
  - [tabs](docs-user/tabs.md): A complete tabbed interface system using several coordinated components:
48
48
  - [timeline](docs-user/timeline.md): A canvas-based timeline component with tracks, events, zoom/pan, and vertical track resizing. Suitable for visualizing time-series data, event logs, or scheduling.
49
+ - [toolbar](docs-user/toolbar.md): Two components for building toolbars:
49
50
  - [transitory-label](docs-user/transitory-label.md): An inline text label that animates between values instead of changing instantly. Displays as `inline-block` and inherits text styling from its parent.
50
51
  - [tree](docs-user/tree.md): Three components share a common `TreeComponent` interface: **`ixfx-tree-list`**, **`ixfx-miller-list`**, and **`ixfx-crumb-navigation`**. This document describes the shared API, plus component-specifi
51
52
  - [util](docs-user/util.md): A tooltip component that renders a value with optional icon and formatted number display. Uses native render root (no shadow DOM).
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ixfx/components",
3
3
  "type": "module",
4
- "version": "0.6.0",
4
+ "version": "0.6.2",
5
5
  "packageManager": "pnpm@10.0.0",
6
6
  "description": "Web components for ixfx — Lit-based UI toolkit",
7
7
  "author": "Clint Heyer",
@@ -47,6 +47,7 @@
47
47
  "preview": "vite preview",
48
48
  "build:demo": "vite build --config vite.static.config.js",
49
49
  "deploy:demo": "cd ixfxcomponents-demo && pnpm run deploy",
50
+ "demo": "pnpm run build:demo && pnpm run deploy:demo",
50
51
  "knip": "knip --config ./config/knip.json"
51
52
  },
52
53
  "peerDependencies": {
@@ -1 +0,0 @@
1
- {"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"}