@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.
- package/bundle/index.d.ts +176 -1
- package/bundle/index.d.ts.map +1 -1
- package/bundle/index.js +810 -1
- package/bundle/index.js.map +1 -1
- package/dist/ac-text.d.ts +1 -1
- package/dist/{ac-token-DVbmHmky.d.ts → ac-token-BAa6ke09.d.ts} +2 -2
- package/dist/{ac-token-DVbmHmky.d.ts.map → ac-token-BAa6ke09.d.ts.map} +1 -1
- package/dist/ac-token.d.ts +1 -1
- package/dist/colour-picker.d.ts +1 -1
- package/dist/crumbs.d.ts +1 -1
- package/dist/{data-grid-BeAkORz2.d.ts → data-grid-C8qIo1-u.d.ts} +2 -2
- package/dist/{data-grid-BeAkORz2.d.ts.map → data-grid-C8qIo1-u.d.ts.map} +1 -1
- package/dist/data-grid.d.ts +1 -1
- package/dist/{grouped-item-lister-CNLMgdIr.d.ts → grouped-item-lister-_pMDwIo1.d.ts} +2 -2
- package/dist/{grouped-item-lister-CNLMgdIr.d.ts.map → grouped-item-lister-_pMDwIo1.d.ts.map} +1 -1
- package/dist/grouped-item-lister.d.ts +1 -1
- package/dist/{icon-BUwP1CZ1.d.ts → icon-DpA9x2Ve.d.ts} +2 -2
- package/dist/icon-DpA9x2Ve.d.ts.map +1 -0
- package/dist/icons.d.ts +2 -2
- package/dist/{index-RqMh1i-O.d.ts → index-BtGFYfaK.d.ts} +2 -2
- package/dist/{index-RqMh1i-O.d.ts.map → index-BtGFYfaK.d.ts.map} +1 -1
- package/dist/{index-ovq_GTdl.d.ts → index-CKtLhgYj.d.ts} +3 -3
- package/dist/{index-ovq_GTdl.d.ts.map → index-CKtLhgYj.d.ts.map} +1 -1
- package/dist/{index-BUB5SICW.d.ts → index-CoqtMSd9.d.ts} +2 -2
- package/dist/{index-BUB5SICW.d.ts.map → index-CoqtMSd9.d.ts.map} +1 -1
- package/dist/{index-BOUaDIW-.d.ts → index-tq6f8007.d.ts} +2 -2
- package/dist/{index-BOUaDIW-.d.ts.map → index-tq6f8007.d.ts.map} +1 -1
- package/dist/index.d.ts +186 -11
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +811 -1
- package/dist/index.js.map +1 -1
- package/dist/{labelled-input-base-Dp_9KP0G.d.ts → labelled-input-base-DiTme1JO.d.ts} +2 -2
- package/dist/{labelled-input-base-Dp_9KP0G.d.ts.map → labelled-input-base-DiTme1JO.d.ts.map} +1 -1
- package/dist/labelled-radial-input.d.ts +2 -2
- package/dist/labelled-radial-input.d.ts.map +1 -1
- package/dist/labelled-range-input.d.ts +1 -1
- package/dist/{menu-item-BG5w7fi4.d.ts → menu-item-Bs2MYyHq.d.ts} +2 -2
- package/dist/{menu-item-BG5w7fi4.d.ts.map → menu-item-Bs2MYyHq.d.ts.map} +1 -1
- package/dist/menu.d.ts +2 -2
- package/dist/panel.d.ts +1 -1
- package/dist/{tab-list-Beuh2nom.d.ts → tab-list-D_1cYhB_.d.ts} +2 -2
- package/dist/{tab-list-Beuh2nom.d.ts.map → tab-list-D_1cYhB_.d.ts.map} +1 -1
- package/dist/tabs.d.ts +1 -1
- package/docs-user/README.md +1 -0
- package/docs-user/index.json +7 -2
- package/docs-user/llms.txt +1 -0
- package/docs-user/toolbar.md +135 -0
- package/llms.txt +1 -0
- package/package.json +2 -1
- 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
|
|
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-
|
|
41
|
+
//# 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}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"labelled-input-base-
|
|
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-
|
|
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
|
|
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,
|
|
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-
|
|
1
|
+
import { t as LabelledRangeInput } from "./index-CoqtMSd9.js";
|
|
2
2
|
export { LabelledRangeInput };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import "./icon-
|
|
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-
|
|
129
|
+
//# sourceMappingURL=menu-item-Bs2MYyHq.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-item-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
81
|
+
//# sourceMappingURL=tab-list-D_1cYhB_.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab-list-
|
|
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-
|
|
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 };
|
package/docs-user/README.md
CHANGED
|
@@ -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)
|
package/docs-user/index.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ixfx/components",
|
|
3
|
-
"version": "0.6.
|
|
4
|
-
"generated": "2026-08-
|
|
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.",
|
package/docs-user/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).
|
|
@@ -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.
|
|
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"}
|