@wallarm-org/claude-design 4.8.0 → 4.9.0
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/dist/SETUP.md +6 -6
- package/dist/UPDATE.md +9 -9
- package/dist/project/components/AgentAvatar/README.md +5 -5
- package/dist/project/components/AgentGlyph/README.md +3 -3
- package/dist/project/components/AppShell/README.md +1 -1
- package/dist/project/components/AreaChart/README.md +3 -3
- package/dist/project/components/Attribute/README.md +1 -1
- package/dist/project/components/Avatar/README.md +1 -1
- package/dist/project/components/Calendar/README.md +6 -6
- package/dist/project/components/Checkbox/README.md +3 -3
- package/dist/project/components/CodeEditor/README.md +8 -8
- package/dist/project/components/ColumnChart/README.md +1 -1
- package/dist/project/components/DateInput/README.md +6 -6
- package/dist/project/components/DateRangeInput/README.md +1 -1
- package/dist/project/components/Dialog/README.md +1 -1
- package/dist/project/components/Drawer/README.md +1 -1
- package/dist/project/components/DropdownMenu/README.md +4 -4
- package/dist/project/components/FeedbackPulse/README.md +1 -1
- package/dist/project/components/FileUpload/README.md +1 -1
- package/dist/project/components/FilterCascade/README.md +2 -2
- package/dist/project/components/FilterDropdown/README.md +7 -7
- package/dist/project/components/FilterInput/README.md +4 -4
- package/dist/project/components/HorizontalBarStack/README.md +1 -1
- package/dist/project/components/HttpMethod/README.md +1 -1
- package/dist/project/components/ImageCropper/README.md +1 -1
- package/dist/project/components/InlineEdit/README.md +3 -3
- package/dist/project/components/LineChart/README.md +2 -2
- package/dist/project/components/Logo/README.md +2 -2
- package/dist/project/components/NotificationCenter/README.md +1 -1
- package/dist/project/components/NumberInput/README.md +3 -3
- package/dist/project/components/OverflowList/README.md +1 -1
- package/dist/project/components/OverflowTooltip/README.md +1 -1
- package/dist/project/components/Pagination/README.md +3 -3
- package/dist/project/components/ParameterPath/README.md +2 -2
- package/dist/project/components/PasswordComplexity/README.md +1 -1
- package/dist/project/components/PieChart/README.md +1 -1
- package/dist/project/components/Popover/README.md +2 -2
- package/dist/project/components/Progress/README.md +1 -1
- package/dist/project/components/RemoteShell/README.md +1 -1
- package/dist/project/components/ScrollArea/README.md +1 -1
- package/dist/project/components/Select/README.md +8 -8
- package/dist/project/components/Slider/README.md +1 -1
- package/dist/project/components/SplashScreen/README.md +2 -2
- package/dist/project/components/Stepper/README.md +3 -3
- package/dist/project/components/Switch/README.md +2 -2
- package/dist/project/components/Table/README.md +15 -15
- package/dist/project/components/Tabs/README.md +1 -1
- package/dist/project/components/TimeInput/README.md +6 -6
- package/dist/project/components/Toast/README.md +1 -1
- package/dist/project/components/Tooltip/README.md +2 -2
- package/dist/project/components/WallyAssistant/README.md +12 -12
- package/dist/project/components/WallyIcon/README.md +1 -1
- package/dist/project/design-system.json +4 -4
- package/dist/project/tokens.json +2 -2
- package/package.json +4 -4
package/dist/SETUP.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
# Install Wallarm Design System 4.
|
|
1
|
+
# Install Wallarm Design System 4.9.0 in Claude Design
|
|
2
2
|
|
|
3
|
-
This guide ships with Wallarm Design System 4.
|
|
3
|
+
This guide ships with Wallarm Design System 4.9.0. Work through the steps in order and run each check before moving on.
|
|
4
4
|
|
|
5
5
|
The export wrote `wallarm-design-system/`:
|
|
6
6
|
|
|
@@ -26,7 +26,7 @@ Create a new **Design System** artifact titled `Wallarm Design System`, with the
|
|
|
26
26
|
- Send `project/components/index.d.ts` with the content type `text/plain`; the artifact refuses it otherwise. Every other file's type follows its extension.
|
|
27
27
|
- A publish takes at most 255 files, so send the files in batches of up to 200.
|
|
28
28
|
2. **Icons and logos.** The galleries are asset uploads, not files: never publish anything from `wallarm-design-system/assets/` as a file under `project/`.
|
|
29
|
-
1. Run `npx -y @wallarm-org/claude-design@4.
|
|
29
|
+
1. Run `npx -y @wallarm-org/claude-design@4.9.0 index --blobs wallarm-design-system/blobs.json`. It exits 3 and lists in `wallarm-design-system/upload.json` the local paths of the SVGs to upload (identical SVGs share one upload).
|
|
30
30
|
2. Upload them in the order listed: the Artifact tool's publish with the system's `url`, `asset: true` and `file_paths` set to the next 25 paths from `upload.json`, copied as they are. With `upload_asset`, if that is the tool you have, send at most 10 per call. The first install takes about 24 calls. If an upload is refused, show the person the error and stop.
|
|
31
31
|
3. After each call, add one entry per uploaded file to `wallarm-design-system/blobs.json`, a JSON object: the path as `upload.json` lists it, mapped to the `url` the result gives for that file, for example `{"wallarm-design-system/assets/Icons/activity.svg": "https://…/_blob/<id>"}`. Copy the url, not the asset's `id`. If the result has no url but gives each file's sha256 and id (as `upload_asset` does), key the entry by that sha256 instead.
|
|
32
32
|
4. Run the `index` command again. It rewrites `blobs.json` keyed by sha256; keep its entries and add new ones after them. Exit 3: upload the paths it lists now and run it again. Exit 0: it wrote the asset groups into `project/design-system.json`.
|
|
@@ -34,7 +34,7 @@ Create a new **Design System** artifact titled `Wallarm Design System`, with the
|
|
|
34
34
|
|
|
35
35
|
In artboards, icons are still `WallarmDS.Icons.<Name>` and the logo `WallarmDS.Logo`, from `components/bundle.js`; the galleries show them on the system's page.
|
|
36
36
|
|
|
37
|
-
Check: every `project/` path in `wallarm-design-system/files.json` (373 files) is in the artifact, its title is `Wallarm Design System`, and `project/design-system.json` has a `lastChange.note` that starts with `v4.
|
|
37
|
+
Check: every `project/` path in `wallarm-design-system/files.json` (373 files) is in the artifact, its title is `Wallarm Design System`, and `project/design-system.json` has a `lastChange.note` that starts with `v4.9.0:`. The Artifact tool's `list` with the system's `url` and `scope: "assets"` shows at least 580 assets. The system's page shows the asset groups Logos (1), Icons (582), with every icon drawn (no broken image). The page may add `project/manifest.json` and files under `project/api/`; they don't count. Give the person the artifact's link: they need it to install the system on other canvases and to update it.
|
|
38
38
|
|
|
39
39
|
If a publish is refused for a reason this step doesn't cover, show the person the error and stop. Don't edit or rename files to get past it.
|
|
40
40
|
|
|
@@ -116,7 +116,7 @@ To update a system the person already has, run `npx -y @wallarm-org/claude-desig
|
|
|
116
116
|
| The publish is refused for `index.d.ts` | Send `project/components/index.d.ts` as `text/plain`. |
|
|
117
117
|
| The publish is refused for too many files | Send smaller batches, as step 1 says. |
|
|
118
118
|
| The `index` command exits 3 | Upload the paths in `upload.json`, add their urls to `blobs.json` and run it again. An entry it names as invalid has a key that matches no SVG or a value that isn't a 32-character blob id or `/_blob/<id>` url: copy it again from `upload.json` and the upload result. |
|
|
119
|
-
| Publishing `project/design-system.json` is refused as stale | The system's page saved a newer index. Save the version the refusal hands back as `current-index.json` (copy it; don't retype it), run `npx -y @wallarm-org/claude-design@4.
|
|
119
|
+
| Publishing `project/design-system.json` is refused as stale | The system's page saved a newer index. Save the version the refusal hands back as `current-index.json` (copy it; don't retype it), run `npx -y @wallarm-org/claude-design@4.9.0 index --blobs wallarm-design-system/blobs.json --index current-index.json`, and publish the index again. Nothing needs uploading again. |
|
|
120
120
|
| The gallery is empty or shows broken images | `project/design-system.json` was published before the `index` command exited 0, or with a wrong url. Fix `blobs.json`, run `index` again and publish the index again. |
|
|
121
121
|
| No sampler board shows | The file isn't at `project/wallarm-sampler.dc.html`, or `project/canvas.json` has no `"wallarm-sampler.dc.html"` in `boards` or `order`. |
|
|
122
122
|
| Components render unstyled | The link lines don't reach `project/ds/wallarm-design-system/`. The artboard must sit directly in `project/`, and the folder name must match step 2. |
|
|
@@ -127,4 +127,4 @@ To update a system the person already has, run `npx -y @wallarm-org/claude-desig
|
|
|
127
127
|
| Text shows in the system font | The fonts in `project/fonts/` weren't published or installed. Check step 1's file check and step 2. |
|
|
128
128
|
| The export command fails or can't reach npm | Show the person its output and stop. |
|
|
129
129
|
|
|
130
|
-
Never edit a file in the system artifact or under `project/ds/wallarm-design-system/` on a canvas to make a check pass. If a check still fails, tell the person which check, what you saw and the version (4.
|
|
130
|
+
Never edit a file in the system artifact or under `project/ds/wallarm-design-system/` on a canvas to make a check pass. If a check still fails, tell the person which check, what you saw and the version (4.9.0). Problems go to https://github.com/wallarm/design-system/issues.
|
package/dist/UPDATE.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
# Update Wallarm Design System to 4.
|
|
1
|
+
# Update Wallarm Design System to 4.9.0 in Claude Design
|
|
2
2
|
|
|
3
|
-
This guide updates a Wallarm Design System artifact the person installed in Claude Design to 4.
|
|
3
|
+
This guide updates a Wallarm Design System artifact the person installed in Claude Design to 4.9.0. Work through the steps in order and run each check before moving on.
|
|
4
4
|
|
|
5
5
|
## 0. Find the system
|
|
6
6
|
|
|
@@ -18,15 +18,15 @@ Check: `current-files.json` is a JSON array that has `project/design-system.json
|
|
|
18
18
|
|
|
19
19
|
## 2. Export the release
|
|
20
20
|
|
|
21
|
-
Run this command; it pins 4.
|
|
21
|
+
Run this command; it pins 4.9.0, the release of this guide:
|
|
22
22
|
|
|
23
23
|
```bash
|
|
24
|
-
npx -y @wallarm-org/claude-design@4.
|
|
24
|
+
npx -y @wallarm-org/claude-design@4.9.0 export --overwrite --existing current-files.json
|
|
25
25
|
```
|
|
26
26
|
|
|
27
27
|
Exit 0 or 3 are both done; on 3 the output names the manual step, which is removing the paths in `wallarm-design-system/removed.json` (steps 3 and 6). Any other exit: show the person the output and stop.
|
|
28
28
|
|
|
29
|
-
Check: `wallarm-design-system/files.json` and `wallarm-design-system/SETUP.md` exist, and `wallarm-design-system/SETUP.md` is for 4.
|
|
29
|
+
Check: `wallarm-design-system/files.json` and `wallarm-design-system/SETUP.md` exist, and `wallarm-design-system/SETUP.md` is for 4.9.0. The steps below point into it.
|
|
30
30
|
|
|
31
31
|
## 3. Confirm removals
|
|
32
32
|
|
|
@@ -42,14 +42,14 @@ Publish `wallarm-design-system/project/` to the same artifact link: every file e
|
|
|
42
42
|
2. Run this exact command, and use it unchanged on every run below:
|
|
43
43
|
|
|
44
44
|
```bash
|
|
45
|
-
npx -y @wallarm-org/claude-design@4.
|
|
45
|
+
npx -y @wallarm-org/claude-design@4.9.0 index --blobs wallarm-design-system/blobs.json --index current-index.json
|
|
46
46
|
```
|
|
47
47
|
|
|
48
48
|
It reuses the blob id of every SVG whose sha256 the current index already has, so `upload.json` lists only the new and changed SVGs. Exit 3: upload them and add their urls to `blobs.json` as SETUP.md step 1's "Icons and logos" says (items 2 and 3), then run the command again. Exit 0: nothing (more) needs uploading.
|
|
49
49
|
3. Right before publishing, read `project/design-system.json` again into `current-index.json` as in item 1 (the system's page may have saved it meanwhile), and run the command again: it exits 0 and merges this release into the index just read.
|
|
50
50
|
4. Publish `project/design-system.json` at once, last and alone.
|
|
51
51
|
|
|
52
|
-
Check: every `project/` path in `wallarm-design-system/files.json` (373 files) is in the artifact, `project/design-system.json` has a `lastChange.note` that starts with `v4.
|
|
52
|
+
Check: every `project/` path in `wallarm-design-system/files.json` (373 files) is in the artifact, `project/design-system.json` has a `lastChange.note` that starts with `v4.9.0:`, and the page shows Logos (1), Icons (582) with no broken image. `project/manifest.json` and files under `project/api/` are written by the system's page: they don't count and stay.
|
|
53
53
|
|
|
54
54
|
## 6. Remove dropped files
|
|
55
55
|
|
|
@@ -69,7 +69,7 @@ On one canvas you reinstalled in step 7:
|
|
|
69
69
|
2. Publish the new sampler to `project/wallarm-sampler.dc.html` as SETUP.md step 4 says. Read `project/canvas.json` right before merging into it (the canvas writes it when boards move), keep its board's `x` and `y` and its place in `order`.
|
|
70
70
|
3. Run the checks in SETUP.md step 5.
|
|
71
71
|
|
|
72
|
-
When every check passes, tell the person the system is on 4.
|
|
72
|
+
When every check passes, tell the person the system is on 4.9.0, give them the system link, and wait for their request.
|
|
73
73
|
|
|
74
74
|
## When something looks wrong
|
|
75
75
|
|
|
@@ -81,4 +81,4 @@ When every check passes, tell the person the system is on 4.8.0, give them the s
|
|
|
81
81
|
| The gallery is empty or shows broken images | `project/design-system.json` was published before the `index` command exited 0, or with a wrong url. Fix `blobs.json`, run `index` again and publish the index again. |
|
|
82
82
|
| A canvas shows an older version | Install the system again on that canvas. |
|
|
83
83
|
|
|
84
|
-
Anything else: see "When something looks wrong" in `wallarm-design-system/SETUP.md`. Never edit a file in the system artifact or under a canvas's `project/ds/` folder to make a check pass. If a check still fails, tell the person which check, what you saw and the version (4.
|
|
84
|
+
Anything else: see "When something looks wrong" in `wallarm-design-system/SETUP.md`. Never edit a file in the system artifact or under a canvas's `project/ds/` folder to make a check pass. If a check still fails, tell the person which check, what you saw and the version (4.9.0). Problems go to https://github.com/wallarm/design-system/issues.
|
|
@@ -17,17 +17,17 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
17
17
|
| `width` | `string \| number \| undefined` | no | — | |
|
|
18
18
|
| `href` | `string \| undefined` | no | — | |
|
|
19
19
|
| `seed` | `string \| number \| undefined` | yes | — | |
|
|
20
|
-
| `agent` | `
|
|
20
|
+
| `agent` | `AgentCharacterId` | no | — | |
|
|
21
21
|
| `look` | `undefined` | no | — | |
|
|
22
|
-
| `size` | `
|
|
23
|
-
| `state` | `
|
|
22
|
+
| `size` | `AgentAvatarSize` | yes | — | Set per place (see PLACES): 40 Overview rows, 48 headers and toasts, 56 beside people, 72 cards and the drawer, 120 the empty chat. |
|
|
23
|
+
| `state` | `AgentAvatarState \| undefined` | no | `idle` | |
|
|
24
24
|
| `has-applications` | `boolean \| undefined` | no | `false` | The agent's template has applications (`applications_scoped`): only then can it show Partial coverage. |
|
|
25
25
|
| `coverage` | `"full" \| "partial" \| undefined` | no | `full` | `partial` keeps the top of the head in grey felt, in every state but Deactivated. |
|
|
26
26
|
| `shadow` | `boolean \| undefined` | no | `false` | The contact shadow: the drawer header, the empty chat and 96 px and up (D1). |
|
|
27
27
|
| `label` | `string \| undefined` | no | — | Set when the character stands alone; leave unset next to the agent's visible name (decorative). |
|
|
28
28
|
| `live` | `boolean \| undefined` | no | `false` | Animated, set per place (40 Overview rows, 72 cards and the drawer, 120 the empty chat). Static under reduced motion or when motion is switched off (`setAgentMotion`). |
|
|
29
|
-
| `handle-ref` | `
|
|
30
|
-
| `on-beat-end` | `
|
|
29
|
+
| `handle-ref` | `Ref<AgentAvatarHandle> \| undefined` | no | — | Beats and Cover all: `play('hello' \| 'done')`, `coverAll()`, `cueHover(on)`. |
|
|
30
|
+
| `on-beat-end` | `((beat: AgentAvatarBeat) => void) \| undefined` | no | — | After Hello or Done has played in full; the character shows `state` again. |
|
|
31
31
|
| `cue-ref` | `RefObject<HTMLElement \| null> \| undefined` | no | — | The Set up (or Cover all) control: Inviting glances at it; hover and focus on it are followed. |
|
|
32
32
|
|
|
33
33
|
## Sub-components
|
|
@@ -16,10 +16,10 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
16
16
|
| `target` | `string \| undefined` | no | — | |
|
|
17
17
|
| `width` | `string \| number \| undefined` | no | — | |
|
|
18
18
|
| `href` | `string \| undefined` | no | — | |
|
|
19
|
-
| `agent` | `
|
|
19
|
+
| `agent` | `AgentCharacterId` | no | — | |
|
|
20
20
|
| `look` | `undefined` | no | — | |
|
|
21
|
-
| `size` | `
|
|
22
|
-
| `state` | `
|
|
21
|
+
| `size` | `AgentGlyphSize` | yes | — | 16 beside text-xs, 20 beside text-sm or larger and in table rows (D3); 24 and 32 for other compact slots. |
|
|
22
|
+
| `state` | `AgentGlyphState \| undefined` | no | `idle` | |
|
|
23
23
|
| `has-applications` | `boolean \| undefined` | no | `false` | The agent's template has applications (`applications_scoped`): only then can it show Partial coverage. |
|
|
24
24
|
| `coverage` | `"full" \| "partial" \| undefined` | no | `full` | `partial` draws the grey crown of Partial coverage, on duty only. |
|
|
25
25
|
| `align` | `"box" \| "optical" \| undefined` | no | `optical` | `optical` lifts the body onto the text line (inline places); `box` keeps the box (ladders, stacks). |
|
|
@@ -7,7 +7,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
7
7
|
| Attribute | Type | Required | Default | Description |
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
9
|
| `reveal` | `boolean \| undefined` | no | — | |
|
|
10
|
-
| `expand-from` | `
|
|
10
|
+
| `expand-from` | `AppShellExpandFrom \| undefined` | no | — | |
|
|
11
11
|
| `on-revealed` | `(() => void) \| undefined` | no | — | |
|
|
12
12
|
| `appeared` | `boolean \| undefined` | no | — | |
|
|
13
13
|
| `ambient` | `boolean \| undefined` | no | `true` | The Frame's ambient layer — soft blooms, grain and a dot cluster behind the header and rail. On by default; `false` leaves the flat Frame token fill. |
|
|
@@ -7,13 +7,13 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
7
7
|
| Attribute | Type | Required | Default | Description |
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
9
|
| `data` | `T[]` | yes | — | Long-form data array, one entry per X position. |
|
|
10
|
-
| `series` | `
|
|
10
|
+
| `series` | `LineChartSeries<Extract<keyof T, string>>[]` | yes | — | Schema describing each area drawn from `data`. |
|
|
11
11
|
| `x-key` | `Extract<keyof T, string>` | yes | — | Key on each datum used as the X-axis value. |
|
|
12
|
-
| `variant` | `
|
|
12
|
+
| `variant` | `AreaChartVariant \| undefined` | no | `stacked` | Area chart variant. - `'stacked'` (default): series stack cumulatively — each band starts where the previous ends. - `'standard'`: series overlap from the baseline with transparency. |
|
|
13
13
|
| `active-key` | `string \| null \| undefined` | no | — | Controlled hover key — pass alongside `onActiveKeyChange` for cross-chart sync. |
|
|
14
14
|
| `on-active-key-change` | `((key: string \| null) => void) \| undefined` | no | — | |
|
|
15
15
|
| `filtered-keys` | `string[] \| undefined` | no | — | Controlled set of `series.key` values to hide from the plot. |
|
|
16
|
-
| `on-zoom-change` | `
|
|
16
|
+
| `on-zoom-change` | `((range: LineChartZoomRange \| null) => void) \| undefined` | no | — | Fired after the user confirms a brush selection. |
|
|
17
17
|
| `sync-id` | `string \| number \| undefined` | no | — | Charts that share a `syncId` synchronise their tooltip cursor. |
|
|
18
18
|
| `sync-method` | `complex` | no | — | How sibling `syncId` charts match X positions. |
|
|
19
19
|
| `default-checked` | `boolean \| undefined` | no | — | |
|
|
@@ -8,7 +8,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
9
|
| `loading` | `boolean \| undefined` | no | `false` | Show skeleton placeholders instead of children |
|
|
10
10
|
| `is-empty` | `boolean \| undefined` | no | `false` | When true, `AttributeValue` renders the em-dash placeholder instead of its children, and any `AttributeEmptyDescription` inside the tree renders (it returns `null` otherwise). Ignored while `loading` is true (skeleton wins). |
|
|
11
|
-
| `orientation` | `
|
|
11
|
+
| `orientation` | `AttributeOrientation \| undefined` | no | `vertical` | Layout direction of the label and value. - `vertical` (default): label above value - `horizontal`: label on the left, value on the right |
|
|
12
12
|
| `default-checked` | `boolean \| undefined` | no | — | |
|
|
13
13
|
| `default-value` | `string \| number \| readonly string[] \| undefined` | no | — | |
|
|
14
14
|
| `auto-focus` | `boolean \| undefined` | no | — | |
|
|
@@ -6,7 +6,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
6
6
|
|
|
7
7
|
| Attribute | Type | Required | Default | Description |
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
|
-
| `on-status-change` | `
|
|
9
|
+
| `on-status-change` | `((details: StatusChangeDetails) => void) \| undefined` | no | — | |
|
|
10
10
|
| `default-checked` | `boolean \| undefined` | no | — | |
|
|
11
11
|
| `default-value` | `string \| number \| readonly string[] \| undefined` | no | — | |
|
|
12
12
|
| `auto-focus` | `boolean \| undefined` | no | — | |
|
|
@@ -6,14 +6,14 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
6
6
|
|
|
7
7
|
| Attribute | Type | Required | Default | Description |
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
|
-
| `type` | `
|
|
9
|
+
| `type` | `CalendarType \| undefined` | no | `single` | Calendar type: 'single' for one month, 'range' for two months (date range selection) |
|
|
10
10
|
| `show-time` | `boolean \| undefined` | no | `false` | Show time selection (affects input placeholder text) |
|
|
11
11
|
| `show-keyboard-hints` | `boolean \| undefined` | no | `true` | Show keyboard shortcut hints in presets and footer |
|
|
12
|
-
| `value` | `
|
|
13
|
-
| `default-value` | `
|
|
12
|
+
| `value` | `DateValue[] \| undefined` | no | — | Controlled value - array of selected dates |
|
|
13
|
+
| `default-value` | `DateValue[] \| undefined` | no | — | Default value for uncontrolled mode |
|
|
14
14
|
| `on-change` | `complex` | no | — | Callback fired when selected value changes |
|
|
15
|
-
| `min-date` | `
|
|
16
|
-
| `max-date` | `
|
|
15
|
+
| `min-date` | `DateValue \| undefined` | no | — | Minimum selectable date |
|
|
16
|
+
| `max-date` | `DateValue \| undefined` | no | — | Maximum selectable date |
|
|
17
17
|
| `is-date-unavailable` | `complex` | no | — | Function to determine if a specific date should be unavailable/disabled. DateValue has year, month (1-12), and day properties. To get day of week, use: new Date(date.year, date.month - 1, date.day).getDay() where Sunday = 0, Saturday = 6. |
|
|
18
18
|
| `disallow-disabled-dates-in-range` | `boolean \| undefined` | no | `false` | When true, prevents selecting a range that contains any unavailable dates. Requires controlled mode (value + onChange props) to work properly. |
|
|
19
19
|
| `open` | `boolean \| undefined` | no | — | Controlled open state of the calendar popover |
|
|
@@ -21,7 +21,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
21
21
|
| `on-open-change` | `((open: boolean) => void) \| undefined` | no | — | Callback fired when popover open state changes |
|
|
22
22
|
| `close-on-select` | `boolean \| undefined` | no | `true` | Whether to close calendar on date selection. Default: true |
|
|
23
23
|
| `readonly` | `boolean \| undefined` | no | `false` | Whether calendar is readonly (display only, no date selection allowed). Default: false |
|
|
24
|
-
| `focused-value` | `
|
|
24
|
+
| `focused-value` | `DateValue \| undefined` | no | — | Controlled focused date — navigates the calendar view to this date |
|
|
25
25
|
|
|
26
26
|
## Sub-components
|
|
27
27
|
|
|
@@ -15,16 +15,16 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
15
15
|
| `html-for` | `string \| undefined` | no | — | |
|
|
16
16
|
| `id` | `string` | no | — | The unique identifier of the machine. |
|
|
17
17
|
| `form` | `string \| undefined` | no | — | The id of the form that the checkbox belongs to. |
|
|
18
|
-
| `default-checked` | `
|
|
18
|
+
| `default-checked` | `CheckedState \| undefined` | no | — | The initial checked state of the checkbox when rendered. Use when you don't need to control the checked state of the checkbox. |
|
|
19
19
|
| `disabled` | `boolean \| undefined` | no | — | Whether the checkbox is disabled |
|
|
20
20
|
| `name` | `string \| undefined` | no | — | The name of the input field in a checkbox. Useful for form submission. |
|
|
21
21
|
| `value` | `string \| undefined` | no | — | The value of checkbox input. Useful for form submission. |
|
|
22
|
-
| `ids` | `
|
|
22
|
+
| `ids` | `ElementIds \| undefined` | no | — | The ids of the elements in the checkbox. Useful for composition. |
|
|
23
23
|
| `read-only` | `boolean \| undefined` | no | — | Whether the checkbox is read-only |
|
|
24
24
|
| `required` | `boolean \| undefined` | no | — | Whether the checkbox is required |
|
|
25
25
|
| `on-checked-change` | `complex` | no | — | The callback invoked when the checked state changes. |
|
|
26
26
|
| `invalid` | `boolean \| undefined` | no | — | Whether the checkbox is invalid |
|
|
27
|
-
| `checked` | `
|
|
27
|
+
| `checked` | `CheckedState \| undefined` | no | — | The controlled checked state of the checkbox |
|
|
28
28
|
| `as-child` | `boolean \| undefined` | no | — | Use the provided child element as the default rendered element, combining their props and behavior. |
|
|
29
29
|
| `data-testid` | `string \| undefined` | no | — | |
|
|
30
30
|
|
|
@@ -9,22 +9,22 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
9
9
|
| `value` | `string \| undefined` | no | — | Controlled document |
|
|
10
10
|
| `default-value` | `string \| undefined` | no | — | Uncontrolled initial document (controlled vs uncontrolled is locked on first render) |
|
|
11
11
|
| `on-change` | `((value: string) => void) \| undefined` | no | — | Fired for user edits only, never for external `value` syncs |
|
|
12
|
-
| `language` | `
|
|
12
|
+
| `language` | `CodeEditorLanguage \| undefined` | no | — | Passed verbatim to the syntax adapter; selects the structural parser |
|
|
13
13
|
| `document-id` | `string \| undefined` | no | — | Document identity: changing it swaps to that document's cached state (undo history, selection, folds). Requires a controlled `value`: when the id changes, `value` must already hold that document's text (an uncached id starts from `value`). In uncontrolled mode the new document would be seeded with the previous document's text. |
|
|
14
14
|
| `read-only` | `boolean \| undefined` | no | — | Non-editable and unfocusable content; text remains selectable, searchable and copyable |
|
|
15
15
|
| `starting-line-number` | `number \| undefined` | no | — | Offsets gutter numbers; `lines`, `folds`, `diagnostics` use absolute numbers |
|
|
16
|
-
| `lines` | `
|
|
17
|
-
| `folds` | `
|
|
16
|
+
| `lines` | `Record<number, LineConfig> \| undefined` | no | — | Per-line configuration keyed by absolute line number (static, see spec D6). Compared by identity: memoise it (or hoist it to a constant) — a new object every render reconfigures the lines and gutters on every render. |
|
|
17
|
+
| `folds` | `CodeEditorFolds \| undefined` | no | — | Fold regions, or a function re-run after edits; collapsed state is kept by `id`. Compared by identity: memoise the array or pass a stable function (e.g. `getHttpFolds`) — an inline array/arrow reconfigures folds on every render and bypasses the re-run debounce. |
|
|
18
18
|
| `wrap-lines` | `boolean` | no | `false` | Controlled line wrapping |
|
|
19
19
|
| `default-wrap-lines` | `boolean \| undefined` | no | — | Uncontrolled initial line wrapping |
|
|
20
20
|
| `on-wrap-lines-change` | `((wrap: boolean) => void) \| undefined` | no | — | Fired when the wrap button toggles wrapping |
|
|
21
21
|
| `max-lines` | `number \| undefined` | no | — | Height clamp in rows; auto-renders `CodeSnippetShowMoreButton` unless one is a direct child |
|
|
22
22
|
| `original` | `string \| undefined` | no | — | Enables diff mode against this text |
|
|
23
|
-
| `schema` | `
|
|
24
|
-
| `completions` | `
|
|
25
|
-
| `diagnostics` | `
|
|
26
|
-
| `on-diagnostics-change` | `
|
|
27
|
-
| `api-ref` | `
|
|
23
|
+
| `schema` | `JsonSchema \| undefined` | no | — | JSON Schema for the document (`json`) or the JSON body (`http`) |
|
|
24
|
+
| `completions` | `CodeEditorCompletionSource[] \| undefined` | no | — | Consumer completion sources, added after the built-in ones. Compared by identity: a new array reconfigures autocomplete and closes an open list, so keep it stable (module constant or `useMemo`). |
|
|
25
|
+
| `diagnostics` | `CodeEditorDiagnostic[] \| undefined` | no | — | External diagnostics, merged with syntax and schema ones |
|
|
26
|
+
| `on-diagnostics-change` | `((diagnostics: CodeEditorDiagnostic[]) => void) \| undefined` | no | — | Fired when the merged diagnostics change |
|
|
27
|
+
| `api-ref` | `Ref<CodeEditorApi> \| undefined` | no | — | Imperative handle |
|
|
28
28
|
| `csp-nonce` | `string \| undefined` | no | — | Nonce for the style tags the editor injects |
|
|
29
29
|
| `on-copy` | `((value: string) => void) \| undefined` | no | — | Fired by `CodeSnippetCopyButton` after a copy, with the current document |
|
|
30
30
|
| `title` | `string \| undefined` | no | — | |
|
|
@@ -7,7 +7,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
7
7
|
| Attribute | Type | Required | Default | Description |
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
9
|
| `data` | `T[]` | yes | — | One entry per column (step), sorted ascending by `xKey`. |
|
|
10
|
-
| `series` | `
|
|
10
|
+
| `series` | `LineChartSeries<Extract<keyof T, string>>[]` | yes | — | The categories each column is split into, in legend order — the first one stacks on top. The same schema drives the legend, the parts and the hover popover rows. |
|
|
11
11
|
| `x-key` | `Extract<keyof T, string>` | yes | — | Key on each datum used as the X-axis value (the step: a day, an hour, …). |
|
|
12
12
|
| `default-checked` | `boolean \| undefined` | no | — | |
|
|
13
13
|
| `default-value` | `string \| number \| readonly string[] \| undefined` | no | — | |
|
|
@@ -11,7 +11,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
11
11
|
| `disabled` | `boolean \| undefined` | no | `false` | Whether the input is disabled. Prevents user interaction. |
|
|
12
12
|
| `read-only` | `boolean \| undefined` | no | `false` | Whether the input is read-only. Segments are focusable but not editable. |
|
|
13
13
|
| `placeholder` | `string \| undefined` | no | — | Placeholder shown when no value is selected. |
|
|
14
|
-
| `size` | `
|
|
14
|
+
| `size` | `TemporalInputSize \| undefined` | no | `default` | Visual size. Default: 'default' (36px). |
|
|
15
15
|
| `title` | `string \| undefined` | no | — | |
|
|
16
16
|
| `default-checked` | `boolean \| undefined` | no | — | |
|
|
17
17
|
| `auto-focus` | `boolean \| undefined` | no | — | |
|
|
@@ -19,12 +19,12 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
19
19
|
| `tab-index` | `number \| undefined` | no | — | |
|
|
20
20
|
| `rel` | `string \| undefined` | no | — | |
|
|
21
21
|
| `data-testid` | `string \| undefined` | no | — | |
|
|
22
|
-
| `value` | `
|
|
23
|
-
| `default-value` | `
|
|
22
|
+
| `value` | `DateValue \| null \| undefined` | no | — | |
|
|
23
|
+
| `default-value` | `DateValue \| null \| undefined` | no | — | |
|
|
24
24
|
| `on-change` | `complex` | no | — | |
|
|
25
|
-
| `min-value` | `
|
|
26
|
-
| `max-value` | `
|
|
27
|
-
| `placeholder-value` | `
|
|
25
|
+
| `min-value` | `DateValue \| undefined` | no | — | |
|
|
26
|
+
| `max-value` | `DateValue \| undefined` | no | — | |
|
|
27
|
+
| `placeholder-value` | `DateValue \| undefined` | no | — | |
|
|
28
28
|
| `name` | `string \| undefined` | no | — | |
|
|
29
29
|
| `is-required` | `boolean \| undefined` | no | — | Marks the field as required in assistive tech and HTML form validation. |
|
|
30
30
|
| `granularity` | `"day" \| undefined` | no | `day` | |
|
|
@@ -11,7 +11,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
11
11
|
| `disabled` | `boolean \| undefined` | no | — | Whether the input is disabled. Prevents user interaction. |
|
|
12
12
|
| `read-only` | `boolean \| undefined` | no | — | Whether the input is read-only. Segments are focusable but not editable. |
|
|
13
13
|
| `placeholder` | `string \| undefined` | no | — | Placeholder shown when no value is selected. |
|
|
14
|
-
| `size` | `
|
|
14
|
+
| `size` | `TemporalInputSize \| undefined` | no | — | Visual size. Default: 'default' (36px). |
|
|
15
15
|
| `title` | `string \| undefined` | no | — | |
|
|
16
16
|
| `default-checked` | `boolean \| undefined` | no | — | |
|
|
17
17
|
| `auto-focus` | `boolean \| undefined` | no | — | |
|
|
@@ -6,7 +6,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
6
6
|
|
|
7
7
|
| Attribute | Type | Required | Default | Description |
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
|
-
| `kind` | `
|
|
9
|
+
| `kind` | `DrawerKind \| undefined` | no | — | Which overlay family this root belongs to. Drives the same-kind nesting counter behind the pushed-back animation: a Drawer only pushes back for a nested Drawer, a Dialog only for a nested Dialog. Set to 'dialog' by the Dialog component — consumers should not need to touch this. |
|
|
10
10
|
| `open` | `boolean \| undefined` | no | — | Controlled open state |
|
|
11
11
|
| `on-open-change` | `((open: boolean) => void) \| undefined` | no | — | Controlled open change handler |
|
|
12
12
|
| `close-on-escape` | `boolean \| undefined` | no | — | Whether ESC key closes the drawer (default: true) |
|
|
@@ -6,7 +6,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
6
6
|
|
|
7
7
|
| Attribute | Type | Required | Default | Description |
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
|
-
| `kind` | `
|
|
9
|
+
| `kind` | `DrawerKind \| undefined` | no | `drawer` | Which overlay family this root belongs to. Drives the same-kind nesting counter behind the pushed-back animation: a Drawer only pushes back for a nested Drawer, a Dialog only for a nested Dialog. Set to 'dialog' by the Dialog component — consumers should not need to touch this. |
|
|
10
10
|
| `open` | `boolean \| undefined` | no | — | Controlled open state |
|
|
11
11
|
| `on-open-change` | `((open: boolean) => void) \| undefined` | no | — | Controlled open change handler |
|
|
12
12
|
| `close-on-escape` | `boolean \| undefined` | no | `true` | Whether ESC key closes the drawer (default: true) |
|
|
@@ -11,12 +11,12 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
11
11
|
| `on-open-change` | `((open: boolean) => void) \| undefined` | no | — | |
|
|
12
12
|
| `modal` | `boolean \| undefined` | no | — | |
|
|
13
13
|
| `anchor-point` | `{ x: number; y: number; } \| undefined` | no | — | Virtual anchor point for positioning without a trigger element |
|
|
14
|
-
| `positioning` | `
|
|
14
|
+
| `positioning` | `PositioningOptions \| undefined` | no | — | Override default positioning config |
|
|
15
15
|
| `highlighted-value` | `string \| null \| undefined` | no | — | Programmatically control which item is highlighted |
|
|
16
|
-
| `on-highlight-change` | `
|
|
16
|
+
| `on-highlight-change` | `((details: HighlightChangeDetails) => void) \| undefined` | no | — | Callback when the highlighted item changes (e.g. on mouse hover) |
|
|
17
17
|
| `close-on-select` | `boolean \| undefined` | no | — | Whether selecting an item closes the menu (default true) |
|
|
18
|
-
| `on-request-dismiss` | `
|
|
19
|
-
| `ids` | `
|
|
18
|
+
| `on-request-dismiss` | `((event: LayerDismissEvent) => void) \| undefined` | no | — | Called when another layer asks this menu to dismiss — e.g. a layer below it in the stack is removed. Call `event.preventDefault()` to keep the menu open. |
|
|
19
|
+
| `ids` | `ElementIds \| undefined` | no | — | Override the trigger element's id. Pass the same id to another compound component's `ids.trigger` (e.g. `Tooltip`, `Popover`) to compose their triggers on one element via nested `asChild` without an extra wrapper node — otherwise the outer trigger's id wins and the other component can't find its own anchor. |
|
|
20
20
|
| `data-testid` | `string \| undefined` | no | — | |
|
|
21
21
|
|
|
22
22
|
## Sub-components
|
|
@@ -7,7 +7,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
7
7
|
| Attribute | Type | Required | Default | Description |
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
9
|
| `open` | `boolean` | yes | — | |
|
|
10
|
-
| `on-open-change` | `
|
|
10
|
+
| `on-open-change` | `(open: boolean, reason?: FeedbackPulseCloseReason \| undefined) => void` | yes | — | |
|
|
11
11
|
| `on-submit` | `(result: { score: number; comment?: string \| undefined; }) => void` | yes | — | |
|
|
12
12
|
| `question` | `string \| undefined` | no | `How easy was it to use this feature?` | |
|
|
13
13
|
| `scale-labels` | `readonly [string, string] \| undefined` | no | `['Very difficult', 'Very easy']` | |
|
|
@@ -9,7 +9,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
9
9
|
| `value` | `File[] \| undefined` | no | — | Controlled accepted files. |
|
|
10
10
|
| `default-value` | `File[] \| undefined` | no | — | Uncontrolled initial files. |
|
|
11
11
|
| `on-value-change` | `((files: File[]) => void) \| undefined` | no | — | Every change to the accepted list — pick, drop, replace, delete (then `[]`). |
|
|
12
|
-
| `on-file-reject` | `
|
|
12
|
+
| `on-file-reject` | `((rejections: FileUploadRejection[]) => void) \| undefined` | no | — | Files that failed validation (for consumers that also want a toast). |
|
|
13
13
|
| `accept` | `string \| string[] \| undefined` | no | — | Extensions and/or MIME types: `'.so,.dylib'`, `'image/png'`, `['.lua']`. |
|
|
14
14
|
| `max-files` | `number \| undefined` | no | `1` | Default `1`: a new pick replaces the file, and the picker stays visible, with the chosen file shown below it. |
|
|
15
15
|
| `max-file-size` | `number \| undefined` | no | — | Bytes. Checked on pick, drop and replace. |
|
|
@@ -7,10 +7,10 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
7
7
|
| Attribute | Type | Required | Default | Description |
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
9
|
| `label` | `string` | yes | — | Attribute name: the trigger text, its aria-label, «Clear {label}», «Search {label}». |
|
|
10
|
-
| `collection` | `
|
|
10
|
+
| `collection` | `FilterCascadeCollection<T>` | yes | — | From `createFilterCascadeCollection`. |
|
|
11
11
|
| `value` | `string[] \| undefined` | no | — | Controlled path, top level first; `[]` = unset. |
|
|
12
12
|
| `default-value` | `string[] \| undefined` | no | — | |
|
|
13
|
-
| `on-value-change` | `
|
|
13
|
+
| `on-value-change` | `((details: FilterCascadeValueChangeDetails<T>) => void) \| undefined` | no | — | |
|
|
14
14
|
| `open` | `boolean \| undefined` | no | — | |
|
|
15
15
|
| `default-open` | `boolean \| undefined` | no | — | |
|
|
16
16
|
| `on-open-change` | `((open: boolean) => void) \| undefined` | no | — | |
|
|
@@ -16,8 +16,8 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
16
16
|
| `disabled` | `boolean \| undefined` | no | `false` | Whether the select is disabled |
|
|
17
17
|
| `as-child` | `boolean \| undefined` | no | — | Use the provided child element as the default rendered element, combining their props and behavior. |
|
|
18
18
|
| `data-testid` | `string \| undefined` | no | — | |
|
|
19
|
-
| `positioning` | `
|
|
20
|
-
| `ids` | `
|
|
19
|
+
| `positioning` | `PositioningOptions \| undefined` | no | — | Override default floating positioning (merged with DS defaults). |
|
|
20
|
+
| `ids` | `ElementIds \| undefined` | no | — | The ids of the elements in the select. Useful for composition. |
|
|
21
21
|
| `loop-focus` | `boolean \| undefined` | no | — | Whether to loop the keyboard navigation through the options |
|
|
22
22
|
| `close-on-select` | `boolean \| undefined` | no | — | Whether the select should close after an item is selected |
|
|
23
23
|
| `open` | `boolean \| undefined` | no | — | Whether the select menu is open |
|
|
@@ -34,18 +34,18 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
34
34
|
| `read-only` | `boolean \| undefined` | no | — | Whether the select is read-only |
|
|
35
35
|
| `required` | `boolean \| undefined` | no | — | Whether the select is required |
|
|
36
36
|
| `invalid` | `boolean \| undefined` | no | — | Whether the select is invalid |
|
|
37
|
-
| `translations` | `
|
|
38
|
-
| `scroll-to-index-fn` | `
|
|
37
|
+
| `translations` | `IntlTranslations \| undefined` | no | — | Specifies the localized strings that identifies the accessibility elements and their states |
|
|
38
|
+
| `scroll-to-index-fn` | `((details: ScrollToIndexDetails) => void) \| undefined` | no | — | Function to scroll to a specific index |
|
|
39
39
|
| `skip-animation-on-mount` | `boolean \| undefined` | no | — | Whether to allow the initial presence animation. |
|
|
40
40
|
| `hide-mode` | `"display-none" \| "activity"` | no | — | How to hide content when mounted but not present. - `'display-none'`: HTML `hidden` attribute. Effects stay alive. - `'activity'`: React 19 `<Activity mode="hidden">`. Effects pause. Requires React 19+. |
|
|
41
41
|
| `label` | `string` | yes | — | Attribute name: trigger text in multi mode, the trigger's aria-label, «Clear {label}». |
|
|
42
42
|
| `all-label` | `string \| undefined` | no | `All` | Single mode: trigger text while unset and the default text of `FilterDropdownAllOption`. |
|
|
43
|
-
| `collection` | `
|
|
43
|
+
| `collection` | `ListCollection<T>` | yes | — | Items to pick from. `groupBy` is supported. |
|
|
44
44
|
| `multiple` | `boolean \| undefined` | no | `false` | Checkbox mode: several values, OR-ed, the menu stays open. |
|
|
45
45
|
| `value` | `string[] \| undefined` | no | — | Controlled picked values; `[]` = unset. |
|
|
46
46
|
| `default-value` | `string[] \| undefined` | no | — | |
|
|
47
|
-
| `on-value-change` | `
|
|
48
|
-
| `on-open-change` | `
|
|
47
|
+
| `on-value-change` | `((details: FilterDropdownValueChangeDetails<T>) => void) \| undefined` | no | — | |
|
|
48
|
+
| `on-open-change` | `((details: FilterDropdownOpenChangeDetails) => void) \| undefined` | no | — | |
|
|
49
49
|
| `search-threshold` | `number \| undefined` | no | `8` | Item count from which the search field and (multi) the "Selected" section appear. Counts the collection's own items only. |
|
|
50
50
|
| `filter-fn` | `((itemString: string, item: T, query: string) => boolean) \| undefined` | no | — | Overrides the default case-insensitive match on the item label. |
|
|
51
51
|
| `selected-on-top` | `boolean \| undefined` | no | `true` | Multi mode: pin the picked values under «Selected» on top of the list (from `searchThreshold` items, hidden while searching). Render `FilterDropdownSelected` for it. |
|
|
@@ -6,10 +6,10 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
6
6
|
|
|
7
7
|
| Attribute | Type | Required | Default | Description |
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
|
-
| `fields` | `
|
|
10
|
-
| `field-groups` | `
|
|
11
|
-
| `value` | `
|
|
12
|
-
| `on-change` | `
|
|
9
|
+
| `fields` | `FieldMetadata[] \| undefined` | no | `[]` | Filter-field configurations driving the autocomplete. A few names are **reserved** and auto-wired with design-system helpers — DS-supplied callbacks **override** consumer values for the reserved slots, because the field semantics (mask range, accepted chars, backend form) are fixed by DS: - `status_code` — HTTP status code field (mask suggestions, format validation, digit-or-X input filter, partial-input normalization). To opt out, use a different `name` and attach the factories (`createStatusCodeSuggestions`, …) manually. |
|
|
10
|
+
| `field-groups` | `FieldGroup[] \| undefined` | no | — | Optional grouping for the field-selection menu. When omitted, fields render as a flat list. When provided, fields render under labeled group headers (group order = array order; field order = listed order). Fields not referenced by any group fall into a trailing headerless section. Referenced by field `name`; unknown names are ignored. |
|
|
11
|
+
| `value` | `ExprNode \| null \| undefined` | no | — | |
|
|
12
|
+
| `on-change` | `((expression: ExprNode \| null) => void) \| undefined` | no | — | |
|
|
13
13
|
| `placeholder` | `string \| undefined` | no | `Type to filter...` | |
|
|
14
14
|
| `error` | `boolean \| undefined` | no | `false` | |
|
|
15
15
|
| `external-errors` | `string[] \| undefined` | no | — | Field names whose values were rejected by the backend. Matching chips are rendered with a value error (red). Purely presentational: conditions and `onChange` output are unaffected, and the consumer is expected to render its own message (e.g. an alert with the backend error text) and clear the prop when the filter changes or the query succeeds. |
|
|
@@ -6,7 +6,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
6
6
|
|
|
7
7
|
| Attribute | Type | Required | Default | Description |
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
|
-
| `data` | `
|
|
9
|
+
| `data` | `HorizontalBarStackDatum[]` | yes | — | Segments + legend. One array drives both, so colors stay in sync. |
|
|
10
10
|
| `total` | `number \| undefined` | no | — | Bar denominator. `> sum(data.value)` → grey remainder tail. Default: `sum(data.value)`. |
|
|
11
11
|
| `legend` | `boolean \| undefined` | no | `true` | Show/hide the legend. Default: true. |
|
|
12
12
|
| `active-name` | `string \| null \| undefined` | no | — | Controlled hover target, joined by `name`. Omitted → managed internally. Set together with `onActiveNameChange` to sync hover across charts (e.g. a sibling highlights the same series). Mirrors `PieChart`. |
|
|
@@ -6,7 +6,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
6
6
|
|
|
7
7
|
| Attribute | Type | Required | Default | Description |
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
|
-
| `method` | `
|
|
9
|
+
| `method` | `(string & {}) \| HttpMethodName` | yes | — | HTTP method to render. Known values from `HttpMethodName` get a dedicated color via `HTTP_METHOD_COLOR`; any other string renders in slate as the "Other" fallback (the text itself is shown verbatim). |
|
|
10
10
|
| `size` | `"small" \| "medium" \| "large" \| null \| undefined` | no | `medium` | Badge size — defaults to `medium`. |
|
|
11
11
|
| `title` | `string \| undefined` | no | — | |
|
|
12
12
|
| `default-checked` | `boolean \| undefined` | no | — | |
|
|
@@ -6,7 +6,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
6
6
|
|
|
7
7
|
| Attribute | Type | Required | Default | Description |
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
|
-
| `output-size` | `
|
|
9
|
+
| `output-size` | `ImageCropperSize` | yes | — | Exact exported pixel dimensions; also determines the visible frame's aspect ratio. |
|
|
10
10
|
| `zoom` | `number \| undefined` | no | — | |
|
|
11
11
|
| `default-zoom` | `number \| undefined` | no | `1` | |
|
|
12
12
|
| `min-zoom` | `number \| undefined` | no | `1` | The minimum scale, relative to the image covering the frame. Must be at least 1. |
|
|
@@ -15,10 +15,10 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
15
15
|
| `edit` | `boolean \| undefined` | no | — | |
|
|
16
16
|
| `default-edit` | `boolean \| undefined` | no | `false` | |
|
|
17
17
|
| `on-edit-change` | `((editing: boolean) => void) \| undefined` | no | — | |
|
|
18
|
-
| `activation-mode` | `
|
|
19
|
-
| `submit-mode` | `
|
|
18
|
+
| `activation-mode` | `InlineEditActivationMode \| undefined` | no | `click` | |
|
|
19
|
+
| `submit-mode` | `InlineEditSubmitMode \| undefined` | no | `both` | |
|
|
20
20
|
| `select-on-focus` | `boolean \| undefined` | no | `true` | |
|
|
21
|
-
| `status` | `
|
|
21
|
+
| `status` | `InlineEditStatus \| undefined` | no | — | |
|
|
22
22
|
| `saved-duration` | `number \| undefined` | no | `2000` | |
|
|
23
23
|
| `disabled` | `boolean \| undefined` | no | `false` | |
|
|
24
24
|
| `read-only` | `boolean \| undefined` | no | `false` | |
|
|
@@ -7,12 +7,12 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
7
7
|
| Attribute | Type | Required | Default | Description |
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
9
|
| `data` | `T[]` | yes | — | Long-form data array, one entry per X position. |
|
|
10
|
-
| `series` | `
|
|
10
|
+
| `series` | `LineChartSeries<Extract<keyof T, string>>[]` | yes | — | Schema describing each line drawn from `data`. |
|
|
11
11
|
| `x-key` | `Extract<keyof T, string>` | yes | — | Key on each datum used as the X-axis value. Required — a silent fallback would hide key-name typos until the chart renders empty. |
|
|
12
12
|
| `active-key` | `string \| null \| undefined` | no | — | Controlled hover key — pass alongside `onActiveKeyChange` for cross-chart sync. **Heads-up:** if the controlled value points at a series key that no longer exists in `series` (filter, schema change, refresh), the chart pushes `null` back through `onActiveKeyChange` so sibling charts stop highlighting a stale key. If you wire `activeKey` to external state, the snap-to-null write will arrive as a normal state change — do not be surprised when your value resets after a series disappears. |
|
|
13
13
|
| `on-active-key-change` | `((key: string \| null) => void) \| undefined` | no | — | |
|
|
14
14
|
| `filtered-keys` | `string[] \| undefined` | no | — | Controlled set of `series.key` values to hide from the plot. |
|
|
15
|
-
| `on-zoom-change` | `
|
|
15
|
+
| `on-zoom-change` | `((range: LineChartZoomRange \| null) => void) \| undefined` | no | — | Fired after the user confirms a brush selection. |
|
|
16
16
|
| `sync-id` | `string \| number \| undefined` | no | — | Charts that share a `syncId` synchronise their tooltip cursor and brush via recharts' built-in middleware — hovering one chart highlights the matching X on every sibling chart with the same id. Pair with `activeKey` + `onActiveKeyChange` if you also want the *series* highlight to sync. |
|
|
17
17
|
| `sync-method` | `complex` | no | — | How sibling `syncId` charts match X positions. Defaults to `'index'` (Recharts' default). Use `'value'` when the synced charts have different dataset lengths but share categorical X values. |
|
|
18
18
|
| `default-checked` | `boolean \| undefined` | no | — | |
|
|
@@ -6,8 +6,8 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
6
6
|
|
|
7
7
|
| Attribute | Type | Required | Default | Description |
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
|
-
| `type` | `
|
|
10
|
-
| `color` | `
|
|
9
|
+
| `type` | `LogoType \| undefined` | no | `full` | |
|
|
10
|
+
| `color` | `LogoStyle \| undefined` | no | `default` | |
|
|
11
11
|
| `id` | `string \| undefined` | no | — | |
|
|
12
12
|
| `tab-index` | `number \| undefined` | no | — | |
|
|
13
13
|
| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — | |
|
|
@@ -8,7 +8,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
9
|
| `open` | `boolean \| undefined` | no | — | Controlled open state. Omit for uncontrolled. |
|
|
10
10
|
| `on-open-change` | `((open: boolean) => void) \| undefined` | no | — | |
|
|
11
|
-
| `positioning` | `
|
|
11
|
+
| `positioning` | `PositioningOptions \| undefined` | no | `{ placement: 'bottom-end', gutter: 4 }` | Default: right-aligned under the bell with a 4px gap. |
|
|
12
12
|
| `data-testid` | `string \| undefined` | no | — | |
|
|
13
13
|
|
|
14
14
|
## Sub-components
|
|
@@ -15,7 +15,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
15
15
|
| `id` | `string` | no | — | The unique identifier of the machine. |
|
|
16
16
|
| `tab-index` | `number \| undefined` | no | — | |
|
|
17
17
|
| `rel` | `string \| undefined` | no | — | |
|
|
18
|
-
| `input-mode` | `
|
|
18
|
+
| `input-mode` | `InputMode \| undefined` | no | — | Hints at the type of data that might be entered by the user. It also determines the type of keyboard shown to the user on mobile devices |
|
|
19
19
|
| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — | |
|
|
20
20
|
| `disabled` | `boolean \| undefined` | no | — | Whether the number input is disabled. |
|
|
21
21
|
| `name` | `string \| undefined` | no | — | The name attribute of the number input. Useful for form submission. |
|
|
@@ -23,12 +23,12 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
23
23
|
| `as-child` | `boolean \| undefined` | no | — | Use the provided child element as the default rendered element, combining their props and behavior. |
|
|
24
24
|
| `max` | `number \| undefined` | no | — | The maximum value of the number input |
|
|
25
25
|
| `min` | `number \| undefined` | no | — | The minimum value of the number input |
|
|
26
|
-
| `ids` | `
|
|
26
|
+
| `ids` | `ElementIds \| undefined` | no | — | The ids of the elements in the number input. Useful for composition. |
|
|
27
27
|
| `read-only` | `boolean \| undefined` | no | — | Whether the number input is readonly |
|
|
28
28
|
| `required` | `boolean \| undefined` | no | — | Whether the number input is required |
|
|
29
29
|
| `on-value-change` | `complex` | no | — | Function invoked when the value changes |
|
|
30
30
|
| `step` | `number \| undefined` | no | — | The amount to increment or decrement the value by |
|
|
31
|
-
| `translations` | `
|
|
31
|
+
| `translations` | `IntlTranslations \| undefined` | no | — | Specifies the localized strings that identifies the accessibility elements and their states |
|
|
32
32
|
| `large-step` | `number \| undefined` | no | — | The amount to increment or decrement the value by when the `Shift` key is held. |
|
|
33
33
|
| `small-step` | `number \| undefined` | no | — | The amount to increment or decrement the value by when the `Alt` key is held. |
|
|
34
34
|
| `allow-mouse-wheel` | `boolean \| undefined` | no | — | Whether to allow mouse wheel to change the value |
|
|
@@ -8,7 +8,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
9
|
| `items` | `T[]` | yes | — | Measurements are cached by array identity — keep it referentially stable. |
|
|
10
10
|
| `item-renderer` | `(item: T, index: number) => ReactNode` | yes | — | |
|
|
11
|
-
| `overflow-renderer` | `
|
|
11
|
+
| `overflow-renderer` | `OverflowListRenderer<T> \| undefined` | no | — | Renders the overflow indicator. Also called once in the hidden measurement layer with every item hidden, so it must be pure. Compose it from the `OverflowListMore` parts; defaults to `<OverflowListMore />`. |
|
|
12
12
|
| `min-visible-items` | `number \| undefined` | no | — | Keep at least this many items visible however narrow the row gets. |
|
|
13
13
|
| `on-overflow` | `((hiddenItems: T[]) => void) \| undefined` | no | — | |
|
|
14
14
|
| `collapse-from` | `CollapseDirection \| undefined` | no | — | |
|
|
@@ -7,7 +7,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
7
7
|
| Attribute | Type | Required | Default | Description |
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
9
|
| `force-tooltip` | `boolean \| undefined` | no | `false` | |
|
|
10
|
-
| `positioning` | `
|
|
10
|
+
| `positioning` | `PositioningOptions \| undefined` | no | — | |
|
|
11
11
|
|
|
12
12
|
## Sub-components
|
|
13
13
|
|
|
@@ -13,10 +13,10 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
13
13
|
| `default-page-size` | `number \| undefined` | no | — | Uncontrolled initial items-per-page. |
|
|
14
14
|
| `sibling-count` | `number \| undefined` | no | — | Pages shown beside the active page. |
|
|
15
15
|
| `boundary-count` | `number \| undefined` | no | — | Pages shown at the start/end. |
|
|
16
|
-
| `on-page-change` | `
|
|
17
|
-
| `on-page-size-change` | `
|
|
16
|
+
| `on-page-change` | `((details: PaginationPageChangeDetails) => void) \| undefined` | no | — | |
|
|
17
|
+
| `on-page-size-change` | `((details: PaginationPageSizeChangeDetails) => void) \| undefined` | no | — | |
|
|
18
18
|
| `type` | `"button" \| "link" \| undefined` | no | — | Trigger element type. |
|
|
19
|
-
| `get-page-url` | `
|
|
19
|
+
| `get-page-url` | `((details: PaginationPageChangeDetails) => string) \| undefined` | no | — | |
|
|
20
20
|
| `size` | `"medium" \| "small"` | no | `medium` | Visual size. |
|
|
21
21
|
| `align` | `"left" \| "center" \| "right"` | no | `left` | Horizontal alignment of the row. |
|
|
22
22
|
| `aria-label` | `string \| undefined` | no | `PAGINATION_ROOT_LABEL` | |
|
|
@@ -6,7 +6,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
6
6
|
|
|
7
7
|
| Attribute | Type | Required | Default | Description |
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
|
-
| `method` | `
|
|
9
|
+
| `method` | `HttpMethodName \| undefined` | no | — | |
|
|
10
10
|
| `segments` | `string[]` | yes | — | |
|
|
11
11
|
| `encoding` | `string \| undefined` | no | — | |
|
|
12
12
|
| `attack` | `boolean \| undefined` | no | `false` | |
|
|
@@ -14,7 +14,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
14
14
|
| `expanded` | `boolean` | no | `false` | Controlled expanded state. When provided, the component does not manage its own state — pair it with {@link onExpandedChange}. |
|
|
15
15
|
| `default-expanded` | `boolean \| undefined` | no | `false` | Initial expanded state for the uncontrolled case. Ignored when `expanded` is provided. Defaults to `false`. |
|
|
16
16
|
| `on-expanded-change` | `((expanded: boolean) => void) \| undefined` | no | — | Called with the next expanded state whenever the user toggles the path. Required for controlled usage; also useful for analytics in the uncontrolled case. |
|
|
17
|
-
| `copy-format` | `
|
|
17
|
+
| `copy-format` | `((data: CopyFormatData) => string) \| undefined` | no | `formatAsFilter` | |
|
|
18
18
|
| `title` | `string \| undefined` | no | — | |
|
|
19
19
|
| `default-checked` | `boolean \| undefined` | no | — | |
|
|
20
20
|
| `default-value` | `string \| number \| readonly string[] \| undefined` | no | — | |
|
|
@@ -6,7 +6,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
6
6
|
|
|
7
7
|
| Attribute | Type | Required | Default | Description |
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
|
-
| `items` | `
|
|
9
|
+
| `items` | `PasswordComplexityItem[]` | yes | — | |
|
|
10
10
|
| `title` | `string \| undefined` | no | — | |
|
|
11
11
|
| `default-checked` | `boolean \| undefined` | no | — | |
|
|
12
12
|
| `default-value` | `string \| number \| readonly string[] \| undefined` | no | — | |
|
|
@@ -6,7 +6,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
6
6
|
|
|
7
7
|
| Attribute | Type | Required | Default | Description |
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
|
-
| `data` | `
|
|
9
|
+
| `data` | `PieChartDatum[]` | yes | — | Each datum's `name` is the join key used by `PieChartLegendItem` to sync hover/active state. Non-finite or negative `value`s are coerced to 0 so recharts can draw them. |
|
|
10
10
|
| `total` | `number \| undefined` | no | — | Override for the value used to compute percentages and the centre total. Defaults to `sum(data.value)`. Pass an explicit value when the centre label should reflect a different denominator — e.g. the unfiltered total while the chart shows a filtered view. |
|
|
11
11
|
| `active-name` | `string \| null \| undefined` | no | — | Controlled active slice. When provided, the component does not manage hover state internally — the parent must update it via `onActiveNameChange`. |
|
|
12
12
|
| `on-active-name-change` | `((name: string \| null) => void) \| undefined` | no | — | |
|
|
@@ -8,8 +8,8 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
9
|
| `open` | `boolean \| undefined` | no | — | |
|
|
10
10
|
| `on-open-change` | `((open: boolean) => void) \| undefined` | no | — | |
|
|
11
|
-
| `ids` | `
|
|
12
|
-
| `positioning` | `
|
|
11
|
+
| `ids` | `ElementIds \| undefined` | no | — | Override the trigger element's id. Pass the same id to another compound component's `ids.trigger` (e.g. `Tooltip`, `DropdownMenu`) to compose their triggers on one element via nested `asChild` without an extra wrapper node — otherwise the outer trigger's id wins and the other component can't find its own anchor. |
|
|
12
|
+
| `positioning` | `PositioningOptions \| undefined` | no | — | Custom positioning configuration. When provided, overrides the default positioning. |
|
|
13
13
|
| `data-testid` | `string \| undefined` | no | — | |
|
|
14
14
|
|
|
15
15
|
## Sub-components
|
|
@@ -10,7 +10,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
10
10
|
| `min` | `number \| undefined` | no | `0` | |
|
|
11
11
|
| `max` | `number \| undefined` | no | `100` | |
|
|
12
12
|
| `size` | `"xs" \| "sm" \| "md" \| "lg"` | no | `xs` | |
|
|
13
|
-
| `color` | `
|
|
13
|
+
| `color` | `ProgressColor \| undefined` | no | `brand` | |
|
|
14
14
|
| `show-label` | `boolean \| undefined` | no | `false` | |
|
|
15
15
|
| `data-testid` | `string \| undefined` | no | — | |
|
|
16
16
|
|
|
@@ -6,7 +6,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
6
6
|
|
|
7
7
|
| Attribute | Type | Required | Default | Description |
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
|
-
| `config` | `
|
|
9
|
+
| `config` | `NavConfig` | yes | — | Navigation config used to build nav state for sub-components. |
|
|
10
10
|
| `base-path` | `string \| undefined` | no | — | URL prefix stripped before matching and prepended when navigating (e.g. `"/edge"`). |
|
|
11
11
|
| `pathname` | `string \| undefined` | no | — | Current pathname. When set, it is the single source of truth for the active nav item, drill level and breadcrumbs, and `window.location` is ignored. Pass it — **together with `onNavigate`** — whenever a router owns the URL: router navigations (links in page content, `router.navigate`, memory history, the host's rail) do not fire `popstate`, so without it the shell can go stale. Without `onNavigate` the shell's own navigations would only reach `window.history`, which a controlled shell ignores (a dev warning flags this). Either form is accepted: with the `basePath` prefix (what `onNavigate` receives) or without it — the prefix is stripped only when the pathname starts with a whole `basePath` segment. With TanStack Router, `useRouterState({ select: s => s.location.pathname })` is router-relative: it excludes the router's own `basepath`. So when the router has `basepath`: - omit `basePath` here — `pathname` and `onNavigate` are then both router-relative and `onNavigate={to => navigate({ to })}` is correct; or - keep `basePath` and strip it in `onNavigate` (`to => navigate({ to: to.slice(basePath.length) \|\| '/' })`), otherwise the router prefixes it a second time. Omit it to read `window.location.pathname` (updated on `popstate` and on the shell's own navigations). |
|
|
12
12
|
| `on-navigate` | `((pathname: string) => void) \| undefined` | no | — | Navigation handler for router integration (TanStack Router, React Router, Next.js, …). Receives the target pathname, prefixed with `basePath` when one is set. Without it the shell pushes to `window.history` itself. |
|
|
@@ -14,7 +14,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
14
14
|
| `tab-index` | `number \| undefined` | no | — | |
|
|
15
15
|
| `rel` | `string \| undefined` | no | — | |
|
|
16
16
|
| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — | |
|
|
17
|
-
| `ids` | `
|
|
17
|
+
| `ids` | `ElementIds \| undefined` | no | — | The ids of the scroll area elements |
|
|
18
18
|
| `as-child` | `boolean \| undefined` | no | — | Use the provided child element as the default rendered element, combining their props and behavior. |
|
|
19
19
|
| `data-testid` | `string \| undefined` | no | — | |
|
|
20
20
|
|
|
@@ -15,19 +15,19 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
15
15
|
| `tab-index` | `number \| undefined` | no | — | |
|
|
16
16
|
| `rel` | `string \| undefined` | no | — | |
|
|
17
17
|
| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — | |
|
|
18
|
-
| `on-select` | `
|
|
18
|
+
| `on-select` | `((details: SelectionDetails) => void) \| undefined` | no | — | Function called when an item is selected |
|
|
19
19
|
| `disabled` | `boolean \| undefined` | no | `false` | Whether the select is disabled |
|
|
20
20
|
| `name` | `string \| undefined` | no | — | The `name` attribute of the underlying select. |
|
|
21
21
|
| `value` | `string[] \| undefined` | no | — | The controlled keys of the selected items |
|
|
22
22
|
| `as-child` | `boolean \| undefined` | no | — | Use the provided child element as the default rendered element, combining their props and behavior. |
|
|
23
|
-
| `ids` | `
|
|
23
|
+
| `ids` | `ElementIds \| undefined` | no | — | The ids of the elements in the select. Useful for composition. |
|
|
24
24
|
| `default-highlighted-value` | `string \| null \| undefined` | no | — | The initial value of the highlighted item when opened. Use when you don't need to control the highlighted value of the select. |
|
|
25
25
|
| `highlighted-value` | `string \| null \| undefined` | no | — | The controlled key of the highlighted item |
|
|
26
26
|
| `on-highlight-change` | `complex` | no | — | The callback fired when the highlighted item changes. |
|
|
27
27
|
| `loop-focus` | `boolean \| undefined` | no | — | Whether to loop the keyboard navigation through the options |
|
|
28
28
|
| `close-on-select` | `boolean \| undefined` | no | — | Whether the select should close after an item is selected |
|
|
29
29
|
| `open` | `boolean \| undefined` | no | — | Whether the select menu is open |
|
|
30
|
-
| `on-open-change` | `
|
|
30
|
+
| `on-open-change` | `((details: OpenChangeDetails) => void) \| undefined` | no | — | Function called when the popup is opened |
|
|
31
31
|
| `default-open` | `boolean \| undefined` | no | — | Whether the select's open state is controlled by the user |
|
|
32
32
|
| `composite` | `boolean \| undefined` | no | — | Whether the select is a composed with other composite widgets like tabs or combobox |
|
|
33
33
|
| `on-pointer-down-outside` | `complex` | no | — | Function called when the pointer is pressed down outside the component |
|
|
@@ -41,16 +41,16 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
41
41
|
| `read-only` | `boolean \| undefined` | no | — | Whether the select is read-only |
|
|
42
42
|
| `required` | `boolean \| undefined` | no | — | Whether the select is required |
|
|
43
43
|
| `invalid` | `boolean \| undefined` | no | — | Whether the select is invalid |
|
|
44
|
-
| `on-value-change` | `
|
|
44
|
+
| `on-value-change` | `((details: ValueChangeDetails<T>) => void) \| undefined` | no | — | The callback fired when the selected item changes. |
|
|
45
45
|
| `multiple` | `boolean \| undefined` | no | — | Whether to allow multiple selection |
|
|
46
|
-
| `collection` | `
|
|
47
|
-
| `translations` | `
|
|
48
|
-
| `scroll-to-index-fn` | `
|
|
46
|
+
| `collection` | `ListCollection<T>` | yes | — | The collection of items |
|
|
47
|
+
| `translations` | `IntlTranslations \| undefined` | no | — | Specifies the localized strings that identifies the accessibility elements and their states |
|
|
48
|
+
| `scroll-to-index-fn` | `((details: ScrollToIndexDetails) => void) \| undefined` | no | — | Function to scroll to a specific index |
|
|
49
49
|
| `deselectable` | `boolean \| undefined` | no | — | Whether the value can be cleared by clicking the selected item. **Note:** this is only applicable for single selection |
|
|
50
50
|
| `skip-animation-on-mount` | `boolean \| undefined` | no | — | Whether to allow the initial presence animation. |
|
|
51
51
|
| `hide-mode` | `"display-none" \| "activity"` | no | — | How to hide content when mounted but not present. - `'display-none'`: HTML `hidden` attribute. Effects stay alive. - `'activity'`: React 19 `<Activity mode="hidden">`. Effects pause. Requires React 19+. |
|
|
52
52
|
| `loading` | `boolean \| undefined` | no | `false` | |
|
|
53
|
-
| `positioning` | `
|
|
53
|
+
| `positioning` | `PositioningOptions \| undefined` | no | — | Override default floating positioning (merged with DS defaults). |
|
|
54
54
|
| `data-testid` | `string \| undefined` | no | — | |
|
|
55
55
|
|
|
56
56
|
## Sub-components
|
|
@@ -18,7 +18,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
18
18
|
| `min` | `number \| undefined` | no | — | The minimum value of the slider |
|
|
19
19
|
| `read-only` | `boolean \| undefined` | no | — | Whether the slider is read-only |
|
|
20
20
|
| `step` | `number \| undefined` | no | — | The step value of the slider |
|
|
21
|
-
| `get-aria-value-text` | `
|
|
21
|
+
| `get-aria-value-text` | `((details: ValueTextDetails) => string) \| undefined` | no | — | Function that returns a human readable value for the slider thumb |
|
|
22
22
|
| `min-steps-between-thumbs` | `number \| undefined` | no | — | The minimum permitted steps between multiple thumbs. `minStepsBetweenThumbs` * `step` should reflect the gap between the thumbs. - `step: 1` and `minStepsBetweenThumbs: 10` => gap is `10` - `step: 10` and `minStepsBetweenThumbs: 2` => gap is `20` |
|
|
23
23
|
| `thumb-collision-behavior` | `"none" \| "push" \| "swap" \| undefined` | no | — | Controls how thumbs behave when they collide during pointer interactions. - `none` (default): Thumbs cannot move past each other; excess movement is ignored. - `push`: Thumbs push each other without restoring their previous positions when dragged back. - `swap`: Thumbs swap places when dragged past each other. |
|
|
24
24
|
| `data-testid` | `string \| undefined` | no | — | |
|
|
@@ -7,8 +7,8 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
7
7
|
| Attribute | Type | Required | Default | Description |
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
9
|
| `visible` | `boolean \| undefined` | no | `true` | |
|
|
10
|
-
| `shrink-target` | `
|
|
11
|
-
| `on-phase-change` | `
|
|
10
|
+
| `shrink-target` | `SplashScreenShrinkTarget \| undefined` | no | — | |
|
|
11
|
+
| `on-phase-change` | `((phase: PhaseType) => void) \| undefined` | no | — | |
|
|
12
12
|
| `default-checked` | `boolean \| undefined` | no | — | |
|
|
13
13
|
| `default-value` | `string \| number \| readonly string[] \| undefined` | no | — | |
|
|
14
14
|
| `auto-focus` | `boolean \| undefined` | no | — | |
|
|
@@ -6,7 +6,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
6
6
|
|
|
7
7
|
| Attribute | Type | Required | Default | Description |
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
|
-
| `status-labels` | `
|
|
9
|
+
| `status-labels` | `StepperStatusLabels \| undefined` | no | — | Screen-reader-only suffixes for completed and danger steps. |
|
|
10
10
|
| `title` | `string \| undefined` | no | — | |
|
|
11
11
|
| `default-checked` | `boolean \| undefined` | no | — | |
|
|
12
12
|
| `default-value` | `string \| number \| readonly string[] \| undefined` | no | — | |
|
|
@@ -15,11 +15,11 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
15
15
|
| `tab-index` | `number \| undefined` | no | — | |
|
|
16
16
|
| `rel` | `string \| undefined` | no | — | |
|
|
17
17
|
| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — | |
|
|
18
|
-
| `ids` | `
|
|
18
|
+
| `ids` | `ElementIds \| undefined` | no | — | The custom ids for the stepper elements |
|
|
19
19
|
| `count` | `number` | yes | — | Number of steps, 1–6. Required: each `StepperItem` and `StepperContent` takes its `index`. |
|
|
20
20
|
| `step` | `number \| undefined` | no | — | Controlled current step, 0-based. Clamped to `[0, count - 1]`. |
|
|
21
21
|
| `default-step` | `number \| undefined` | no | — | Uncontrolled initial step. Default `0`. Clamped to `[0, count - 1]`. |
|
|
22
|
-
| `on-step-change` | `
|
|
22
|
+
| `on-step-change` | `((details: StepChangeDetails) => void) \| undefined` | no | — | Fires when a click changes the step, back or forward: `({ step }) => void`. A click on the current step does not fire it; use the trigger's `onClick` to observe that. |
|
|
23
23
|
| `data-testid` | `string \| undefined` | no | — | |
|
|
24
24
|
|
|
25
25
|
## Sub-components
|
|
@@ -20,10 +20,10 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
20
20
|
| `disabled` | `boolean \| undefined` | no | — | Whether the switch is disabled. |
|
|
21
21
|
| `name` | `string \| undefined` | no | — | The name of the input field in a switch (Useful for form submission). |
|
|
22
22
|
| `value` | `string \| number \| undefined` | no | — | The value of switch input. Useful for form submission. |
|
|
23
|
-
| `ids` | `
|
|
23
|
+
| `ids` | `ElementIds \| undefined` | no | — | The ids of the elements in the switch. Useful for composition. |
|
|
24
24
|
| `read-only` | `boolean \| undefined` | no | — | Whether the switch is read-only |
|
|
25
25
|
| `required` | `boolean \| undefined` | no | — | If `true`, the switch input is marked as required, |
|
|
26
|
-
| `on-checked-change` | `
|
|
26
|
+
| `on-checked-change` | `((details: CheckedChangeDetails) => void) \| undefined` | no | — | Function to call when the switch is clicked. |
|
|
27
27
|
| `invalid` | `boolean \| undefined` | no | — | If `true`, the switch is marked as invalid. |
|
|
28
28
|
| `checked` | `boolean \| undefined` | no | — | The controlled checked state of the switch |
|
|
29
29
|
| `as-child` | `boolean \| undefined` | no | — | Use the provided child element as the default rendered element, combining their props and behavior. |
|
|
@@ -7,40 +7,40 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
7
7
|
| Attribute | Type | Required | Default | Description |
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
9
|
| `data` | `T[]` | yes | — | Data array for rows |
|
|
10
|
-
| `columns` | `
|
|
10
|
+
| `columns` | `TableColumnDef<T>[]` | yes | — | Column definitions |
|
|
11
11
|
| `is-loading` | `boolean \| undefined` | no | `false` | Show skeleton rows |
|
|
12
12
|
| `is-loading-previous` | `boolean \| undefined` | no | — | Show skeleton rows above the first row while a previous page is being fetched (bidirectional infinite scroll — the start-edge counterpart of `isLoading`). Pair with `onStartReached`. |
|
|
13
13
|
| `skeleton-count` | `number \| undefined` | no | — | Number of skeleton rows to display when loading (default: 12, `TABLE_SKELETON_ROWS`) |
|
|
14
14
|
| `get-row-id` | `((row: T, index: number) => string) \| undefined` | no | — | Row id accessor for stable row identity |
|
|
15
15
|
| `aria-label` | `string \| undefined` | no | — | Accessible label for the table |
|
|
16
|
-
| `sorting` | `
|
|
16
|
+
| `sorting` | `TableSortingState \| undefined` | no | — | |
|
|
17
17
|
| `on-sorting-change` | `complex` | no | — | |
|
|
18
18
|
| `manual-sorting` | `boolean \| undefined` | no | — | When `true`, disables TanStack's client-side sort. The table renders rows in the order they appear in `data` and only fires `onSortingChange` on header clicks. Use this when sorting is performed server-side and the server returns pre-sorted rows. Default: `false` (client-side sort via TanStack's `getSortedRowModel`). |
|
|
19
|
-
| `row-selection` | `
|
|
19
|
+
| `row-selection` | `TableRowSelectionState \| undefined` | no | — | |
|
|
20
20
|
| `on-row-selection-change` | `complex` | no | — | |
|
|
21
21
|
| `enable-select-all-rows` | `boolean \| undefined` | no | — | Renders the master checkbox in the selection column header. Set `false` when "all rows" is not a selection the consumer can act on — a listing whose scope the consumer cannot express, for instance — leaving per-row checkboxes (shift-click range selection included) as the only way to select. The column itself stays, so the layout does not shift. Default: `true`. |
|
|
22
22
|
| `on-select-all-rows` | `((selected: boolean) => void) \| undefined` | no | — | Called when the master checkbox is toggled, with its new state, in addition to the `onRowSelectionChange` the toggle produces. The state change alone cannot identify the gesture: "every loaded row is selected" is also what checking the last row by hand produces. A consumer that treats the master checkbox as meaning more than the loaded rows — everything matching a server-side filter, say — needs to know the difference, which is what this reports. |
|
|
23
|
-
| `column-sizing` | `
|
|
23
|
+
| `column-sizing` | `TableColumnSizingState \| undefined` | no | — | |
|
|
24
24
|
| `on-column-sizing-change` | `complex` | no | — | |
|
|
25
|
-
| `column-pinning` | `
|
|
25
|
+
| `column-pinning` | `TableColumnPinningState \| undefined` | no | — | |
|
|
26
26
|
| `on-column-pinning-change` | `complex` | no | — | |
|
|
27
27
|
| `column-order` | `string[] \| undefined` | no | — | |
|
|
28
|
-
| `on-column-order-change` | `
|
|
29
|
-
| `grouping` | `
|
|
28
|
+
| `on-column-order-change` | `TableOnChangeFn<string[]> \| undefined` | no | — | |
|
|
29
|
+
| `grouping` | `TableGroupingState \| undefined` | no | — | |
|
|
30
30
|
| `on-grouping-change` | `complex` | no | — | |
|
|
31
|
-
| `render-group-row` | `
|
|
31
|
+
| `render-group-row` | `((row: TableRow<T>) => ReactNode) \| undefined` | no | — | Group row content for `getSubRows` grouping. Passing it switches the table to sub-row grouping mode: the auto-injected expand column is dropped, so the content is responsible for its own expand/collapse toggle (`row.getToggleExpandedHandler()`). Rendered only with `groupRowSpan: 'full'`. With the default `'master'` the group row shows its master (first data) column cell, as before. |
|
|
32
32
|
| `group-row-span` | `"full" \| "master" \| undefined` | no | — | How a group row lays out its content. - `'master'` (default): the master column's cell, then empty filler cells — the content is confined to the master column width. - `'full'`: `renderGroupRow(row)` in a single cell spanning every data column (system cells — selection, drag handle — keep their own cells). Use for a group header with a title on the left and actions pinned to the right edge of the table. Requires `renderGroupRow`. |
|
|
33
33
|
| `group-expand-column` | `boolean \| undefined` | no | — | Keep the expand column in sub-row grouping mode (`renderGroupRow`), which otherwise drops it and leaves the toggle to the group row's content. The column comes first, ahead of the drag handle, and shows a toggle on group rows only — so the rows of a group, drag handle included, sit inside it. |
|
|
34
34
|
| `get-sub-rows` | `((row: T) => T[] \| undefined) \| undefined` | no | — | Sub-row accessor for hierarchical/tree data (used with renderGroupRow) |
|
|
35
35
|
| `show-empty-groups` | `boolean \| undefined` | no | — | Render a top-level row whose `getSubRows` returns an empty array as an (empty) group row instead of a plain row — for groups that stay visible with nothing in them yet. Return `undefined` for rows that are not groups. |
|
|
36
36
|
| `expanded` | `boolean` | no | `false` | |
|
|
37
37
|
| `on-expanded-change` | `complex` | no | — | |
|
|
38
|
-
| `render-expanded-row` | `
|
|
39
|
-
| `column-visibility` | `
|
|
38
|
+
| `render-expanded-row` | `((row: TableRow<T>) => ReactNode) \| undefined` | no | — | |
|
|
39
|
+
| `column-visibility` | `TableVisibilityState \| undefined` | no | — | |
|
|
40
40
|
| `on-column-visibility-change` | `complex` | no | — | |
|
|
41
|
-
| `default-column-visibility` | `
|
|
41
|
+
| `default-column-visibility` | `TableVisibilityState \| undefined` | no | — | |
|
|
42
42
|
| `default-column-order` | `string[] \| undefined` | no | — | |
|
|
43
|
-
| `column-groups` | `
|
|
43
|
+
| `column-groups` | `TableColumnGroup[] \| undefined` | no | — | Labeled sections for the column-settings menu. When set, the menu renders these groups (flat, non-reorderable — like the FilterInput field menu) instead of the default pinned/unpinned drag-reorder list. See {@link TableColumnGroup}. |
|
|
44
44
|
| `on-settings-open-change` | `((open: boolean) => void) \| undefined` | no | — | Fired when the built-in column-settings menu opens (`true`) or closes (`false`). The menu's open state otherwise lives inside the DS and is not observable, so consumers that want to defer expensive work — e.g. refetch once with the final column selection instead of on every toggle — can hook the close edge here. |
|
|
45
45
|
| `defer-column-visibility` | `boolean \| undefined` | no | — | Hold column-visibility toggles in the built-in settings menu until it closes, then apply them as one `columnVisibility` change. Without it each switch shows or hides its column at once — a column whose data the consumer only fetches on close then sits empty while the menu is open. |
|
|
46
46
|
| `virtualized` | `"container" \| "window"` | no | — | Enable row virtualization. `'container'` virtualizes within the table's own scroll container; `'window'` follows the page scroll — the nearest scrollable ancestor, or the browser window. |
|
|
@@ -52,9 +52,9 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
52
52
|
| `on-start-reached` | `(() => void) \| undefined` | no | — | Callback fired when the user scrolls near the start (top) of the table |
|
|
53
53
|
| `on-start-reached-threshold` | `number \| undefined` | no | — | Distance from the top (in px) to trigger onStartReached (default: 200) |
|
|
54
54
|
| `initial-scroll-to-row-id` | `string \| undefined` | no | — | Row id to anchor the initial scroll position to. The table scrolls this row into view on mount and arms the edge detectors only after that initial scroll settles. Use for deep-linking into the middle of a dataset. |
|
|
55
|
-
| `on-row-reorder` | `
|
|
56
|
-
| `get-row-can-drag` | `
|
|
57
|
-
| `render-full-width-row` | `
|
|
55
|
+
| `on-row-reorder` | `((event: TableRowReorderEvent) => void) \| undefined` | no | — | Callback fired when a row is dragged to a new position. When provided, a drag-handle column is auto-injected and row DnD is enabled. With `getSubRows` grouping, group rows stay put and a row moves only among the rows of its own group. |
|
|
56
|
+
| `get-row-can-drag` | `((row: TableRow<T>) => boolean) \| undefined` | no | — | Per-row drag control for `onRowReorder`. A row for which it returns `false` shows a disabled grip (none on a full-width row), cannot be dragged and is not a drop target — the other rows of its group move around it. Group rows never move regardless. Default: every non-group row can be dragged. |
|
|
57
|
+
| `render-full-width-row` | `((row: TableRow<T>) => ReactNode) \| undefined` | no | — | Renders a non-group row as a single cell spanning every data column — a banner or notice row among regular rows. Return `undefined` to render the row normally, with a cell per column. System cells (selection, drag handle) keep their own cells. Pair with `getRowCanDrag` to keep such a row in place in a reorderable table. Called on every render of the row: return elements, do not call hooks in the callback itself (components it returns may). |
|
|
58
58
|
| `on-master-cell-click` | `((rowId: string) => void) \| undefined` | no | — | Callback fired when the master cell is clicked. Receives the row ID. |
|
|
59
59
|
| `active-row-id` | `string \| null \| undefined` | no | — | ID of the currently active (highlighted) row, or null. Controls row highlighting via data-preview-active attribute. |
|
|
60
60
|
| `data-testid` | `string \| undefined` | no | — | |
|
|
@@ -7,7 +7,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
7
7
|
| Attribute | Type | Required | Default | Description |
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
9
|
| `size` | `"medium" \| "small"` | no | `medium` | |
|
|
10
|
-
| `variant` | `
|
|
10
|
+
| `variant` | `TabsVariant \| undefined` | no | — | |
|
|
11
11
|
| `value` | `string \| undefined` | no | — | |
|
|
12
12
|
| `default-value` | `string \| undefined` | no | — | |
|
|
13
13
|
| `lazy-mount` | `boolean \| undefined` | no | `true` | |
|
|
@@ -11,7 +11,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
11
11
|
| `disabled` | `boolean \| undefined` | no | `false` | Whether the input is disabled. Prevents user interaction. |
|
|
12
12
|
| `read-only` | `boolean \| undefined` | no | `false` | Whether the input is read-only. Segments are focusable but not editable. |
|
|
13
13
|
| `placeholder` | `string \| undefined` | no | — | Placeholder shown when no value is selected. |
|
|
14
|
-
| `size` | `
|
|
14
|
+
| `size` | `TemporalInputSize \| undefined` | no | `default` | Visual size. Default: 'default' (36px). |
|
|
15
15
|
| `title` | `string \| undefined` | no | — | |
|
|
16
16
|
| `default-checked` | `boolean \| undefined` | no | — | |
|
|
17
17
|
| `auto-focus` | `boolean \| undefined` | no | — | |
|
|
@@ -19,12 +19,12 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
19
19
|
| `tab-index` | `number \| undefined` | no | — | |
|
|
20
20
|
| `rel` | `string \| undefined` | no | — | |
|
|
21
21
|
| `data-testid` | `string \| undefined` | no | — | |
|
|
22
|
-
| `value` | `
|
|
23
|
-
| `default-value` | `
|
|
22
|
+
| `value` | `TimeValue \| null \| undefined` | no | — | |
|
|
23
|
+
| `default-value` | `TimeValue \| null \| undefined` | no | — | |
|
|
24
24
|
| `on-change` | `complex` | no | — | |
|
|
25
|
-
| `min-value` | `
|
|
26
|
-
| `max-value` | `
|
|
27
|
-
| `placeholder-value` | `
|
|
25
|
+
| `min-value` | `TimeValue \| undefined` | no | — | |
|
|
26
|
+
| `max-value` | `TimeValue \| undefined` | no | — | |
|
|
27
|
+
| `placeholder-value` | `TimeValue \| undefined` | no | — | |
|
|
28
28
|
| `name` | `string \| undefined` | no | — | |
|
|
29
29
|
| `is-required` | `boolean \| undefined` | no | — | Marks the field as required in assistive tech and HTML form validation. |
|
|
30
30
|
| `show-time-dropdown` | `boolean \| undefined` | no | — | Show dropdown for time selection with arrow navigation. |
|
|
@@ -6,7 +6,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
6
6
|
|
|
7
7
|
| Attribute | Type | Required | Default | Description |
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
|
-
| `toast` | `
|
|
9
|
+
| `toast` | `ToastData` | yes | — | |
|
|
10
10
|
|
|
11
11
|
## Sub-components
|
|
12
12
|
|
|
@@ -16,8 +16,8 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
16
16
|
| `close-on-scroll` | `boolean \| undefined` | no | — | |
|
|
17
17
|
| `interactive` | `boolean \| undefined` | no | — | |
|
|
18
18
|
| `disabled` | `boolean \| undefined` | no | — | |
|
|
19
|
-
| `positioning` | `
|
|
20
|
-
| `ids` | `
|
|
19
|
+
| `positioning` | `PositioningOptions \| undefined` | no | — | |
|
|
20
|
+
| `ids` | `ElementIds \| undefined` | no | — | Override the trigger element's id. Pass the same id to another compound component's `ids.trigger` (e.g. `Popover`, `DropdownMenu`) to compose their triggers on one element via nested `asChild` without an extra wrapper node — otherwise the outer trigger's id wins and this tooltip can't find its anchor, mispositioning at the viewport origin. |
|
|
21
21
|
| `data-testid` | `string \| undefined` | no | — | |
|
|
22
22
|
|
|
23
23
|
## Sub-components
|
|
@@ -13,21 +13,21 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
13
13
|
| `rel` | `string \| undefined` | no | — | |
|
|
14
14
|
| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — | |
|
|
15
15
|
| `data-testid` | `string \| undefined` | no | — | |
|
|
16
|
-
| `background` | `
|
|
17
|
-
| `messages` | `
|
|
18
|
-
| `status` | `
|
|
19
|
-
| `suggestions` | `
|
|
20
|
-
| `permissions` | `
|
|
21
|
-
| `context` | `
|
|
16
|
+
| `background` | `ChatBackground \| undefined` | no | — | Decorative mesh behind the panel (Figma chat-bg 67:1254). `'strong'` is Main (12%, for an empty chat), `'subtle'` is Chat (5%, for a running conversation), `'none'` renders nothing. |
|
|
17
|
+
| `messages` | `readonly ChatMessage[]` | yes | — | |
|
|
18
|
+
| `status` | `ChatStatus \| undefined` | no | `ready` | Default 'ready'. |
|
|
19
|
+
| `suggestions` | `readonly ChatSuggestionItem[] \| undefined` | no | — | |
|
|
20
|
+
| `permissions` | `readonly ChatToolPermission[] \| undefined` | no | — | |
|
|
21
|
+
| `context` | `readonly ChatContextItem[] \| undefined` | no | — | |
|
|
22
22
|
| `value` | `string \| undefined` | no | — | |
|
|
23
23
|
| `on-value-change` | `((value: string) => void) \| undefined` | no | — | |
|
|
24
24
|
| `disabled` | `boolean \| undefined` | no | — | Disables the textarea, Send and the suggestion pills (e.g. `!agent.isReady`). |
|
|
25
25
|
| `textarea-ref` | `Ref<HTMLTextAreaElement> \| undefined` | no | — | Focus management, e.g. focus the input after a thread switch. |
|
|
26
26
|
| `on-submit` | `(text: string) => void` | yes | — | Trimmed text. Not called when empty, while running, while an approval is pending, or when disabled. |
|
|
27
27
|
| `on-stop` | `(() => void) \| undefined` | no | — | Stop button, and Esc in the textarea while running (also inside a Drawer/Dialog: ChatInput claims that Esc from the layer, so no host recipe is needed). |
|
|
28
|
-
| `on-suggestion-select` | `
|
|
29
|
-
| `on-permission-change` | `
|
|
30
|
-
| `on-context-remove` | `
|
|
28
|
+
| `on-suggestion-select` | `((suggestion: ChatSuggestionItem) => void) \| undefined` | no | — | Default: onSubmit(suggestion.prompt ?? suggestion.label). |
|
|
29
|
+
| `on-permission-change` | `((permission: ChatToolPermission, allowed: boolean) => void) \| undefined` | no | — | Absent, or no permissions → no permissions button in the input. |
|
|
30
|
+
| `on-context-remove` | `((item: ChatContextItem) => void) \| undefined` | no | — | Absent → context chips aren't removable. |
|
|
31
31
|
| `header` | `ReactNode` | no | — | |
|
|
32
32
|
| `header-title` | `ReactNode` | no | — | ChatHeaderTitle children, e.g. a thread Select (Figma Variant2). |
|
|
33
33
|
| `header-actions` | `ReactNode` | no | — | New chat, history, close: your Buttons, so analytics land on them. |
|
|
@@ -35,10 +35,10 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
35
35
|
| `footer-start` | `ReactNode` | no | — | Top of ChatFooter, above the suggestions (banners). |
|
|
36
36
|
| `input-tools` | `ReactNode` | no | — | Extra toolbar items in the input, between permissions and Send. |
|
|
37
37
|
| `input` | `ReactNode` | no | — | Replaces the whole ChatInput composition (you wire value and submit yourself). |
|
|
38
|
-
| `on-copy` | `
|
|
39
|
-
| `labels` | `
|
|
38
|
+
| `on-copy` | `((message: ChatMessage, text: string) => void) \| undefined` | no | — | Fired after Copy copied; Copy itself shows whenever the message has text. |
|
|
39
|
+
| `labels` | `Partial<ChatLabels> \| undefined` | no | — | |
|
|
40
40
|
| `icons` | `Readonly<Record<string, ReactNode>> \| undefined` | no | — | Icon key → element from src/icons; wins over the built-in Figma 483:1899 table. |
|
|
41
|
-
| `markdown` | `
|
|
41
|
+
| `markdown` | `ComponentType<ChatMarkdownProps> \| undefined` | no | — | The markdown renderer, at module scope (never inline). Default: the DS `AssistantMessageMarkdown` (GFM, streaming-safe, no raw HTML, http/https/mailto/relative links only, no images). A replacement owns its own sanitizing. To change one element, wrap it at module scope: `const WallyMarkdown: FC<ChatMarkdownProps> = p => <AssistantMessageMarkdown {...p} components={MAP} />`. |
|
|
42
42
|
| `format-timestamp` | `((createdAt: string) => string) \| undefined` | no | — | ISO → label. Default: DS formatRelativeTime (honours DateFormatProvider). Give it a new identity on your clock tick to refresh "2 min ago" — the DS runs no clock. |
|
|
43
43
|
| `approval-placement` | `"inline" \| "docked" \| undefined` | no | `docked` | 'docked': the last message's approvals render in the footer. Default 'inline' here; WallyAssistant defaults to 'docked' (Figma). A custom layout passes the same value to `deriveChatState`, or the approval renders twice (provider 'inline') or never (provider 'docked'). |
|
|
44
44
|
| `render-part` | `complex` | no | — | Called for every part, custom and unknown types included. undefined = the default; null = nothing. A render function: no hooks inside — put them in the components you return. While it is set, every part counts as rendered for the loader and the actions row (its output is unknown up front), so a running reply made only of parts it maps to nothing shows no loader. |
|
|
@@ -6,7 +6,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
6
6
|
|
|
7
7
|
| Attribute | Type | Required | Default | Description |
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
|
-
| `variant` | `
|
|
9
|
+
| `variant` | `WallyIconStyle \| undefined` | no | `simple` | |
|
|
10
10
|
| `id` | `string \| undefined` | no | — | |
|
|
11
11
|
| `tab-index` | `number \| undefined` | no | — | |
|
|
12
12
|
| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — | |
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"layout": "files",
|
|
4
4
|
"createdOnFiles": {
|
|
5
5
|
"v": 1,
|
|
6
|
-
"at": "2026-11-
|
|
6
|
+
"at": "2026-11-06T09:08:49Z"
|
|
7
7
|
},
|
|
8
8
|
"title": "Wallarm Design System",
|
|
9
9
|
"namespace": "WallarmDS",
|
|
@@ -28,8 +28,8 @@
|
|
|
28
28
|
},
|
|
29
29
|
"lastChange": {
|
|
30
30
|
"by": "Wallarm",
|
|
31
|
-
"at": "2026-11-
|
|
32
|
-
"via": "GitHub · wallarm/design-system@
|
|
33
|
-
"note": "v4.
|
|
31
|
+
"at": "2026-11-06T09:08:49Z",
|
|
32
|
+
"via": "GitHub · wallarm/design-system@8ea34215",
|
|
33
|
+
"note": "v4.9.0: 532 colors, 120 component guides, 582 icons."
|
|
34
34
|
}
|
|
35
35
|
}
|
package/dist/project/tokens.json
CHANGED
|
@@ -5187,7 +5187,7 @@
|
|
|
5187
5187
|
"meta": {
|
|
5188
5188
|
"source": "github",
|
|
5189
5189
|
"repo": "wallarm/design-system",
|
|
5190
|
-
"ref": "
|
|
5190
|
+
"ref": "migrator-v2.8.0-rc-feat-parser.1@8ea34215692a5b30b793e4e13c8f3fc6a3b4da2c",
|
|
5191
5191
|
"package": "packages/design-system",
|
|
5192
5192
|
"paths": {
|
|
5193
5193
|
"tokens": [
|
|
@@ -5230,6 +5230,6 @@
|
|
|
5230
5230
|
"src/theme/fonts/GeistMono-Variable.woff2"
|
|
5231
5231
|
]
|
|
5232
5232
|
},
|
|
5233
|
-
"synced": "2026-11-
|
|
5233
|
+
"synced": "2026-11-06T09:08:49Z"
|
|
5234
5234
|
}
|
|
5235
5235
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wallarm-org/claude-design",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.9.0",
|
|
4
4
|
"description": "Installs Wallarm Design System in Claude Design: `npx -y @wallarm-org/claude-design@latest export`",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public",
|
|
@@ -51,9 +51,9 @@
|
|
|
51
51
|
"tsx": "4.23.15",
|
|
52
52
|
"tw-animate-css": "1.4.0",
|
|
53
53
|
"typescript": "7.0.2",
|
|
54
|
-
"@wallarm-org/design-system": "4.
|
|
55
|
-
"@wallarm-org/
|
|
56
|
-
"@wallarm-org/
|
|
54
|
+
"@wallarm-org/design-system": "4.9.0",
|
|
55
|
+
"@wallarm-org/mcp-core": "0.1.0",
|
|
56
|
+
"@wallarm-org/typescript-config": "0.0.0"
|
|
57
57
|
},
|
|
58
58
|
"scripts": {
|
|
59
59
|
"export": "tsx src/build.ts",
|