@fungi.computer/caps 0.7.1 → 0.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.
Files changed (45) hide show
  1. package/README.md +58 -0
  2. package/dist/blocks/app-bar.d.ts +4 -2
  3. package/dist/blocks/app-bar.js +3 -3
  4. package/dist/blocks/empty-state.d.ts +31 -4
  5. package/dist/blocks/empty-state.js +14 -4
  6. package/dist/blocks/loading-state.d.ts +41 -0
  7. package/dist/blocks/loading-state.js +18 -3
  8. package/dist/blocks/permission-grid.js +1 -1
  9. package/dist/blocks/result-state.d.ts +18 -0
  10. package/dist/blocks/result-state.js +7 -2
  11. package/dist/blocks/setup-notice.d.ts +32 -0
  12. package/dist/blocks/setup-notice.js +23 -0
  13. package/dist/components/button.js +2 -2
  14. package/dist/components/confirm-action.d.ts +6 -1
  15. package/dist/components/confirm-action.js +3 -3
  16. package/dist/components/dialog.js +1 -1
  17. package/dist/components/failure-line.d.ts +46 -0
  18. package/dist/components/failure-line.js +12 -0
  19. package/dist/components/keycap.d.ts +15 -2
  20. package/dist/components/keycap.js +3 -3
  21. package/dist/components/loader-blobs.d.ts +3 -2
  22. package/dist/components/loader-blobs.js +5 -3
  23. package/dist/components/loader.d.ts +8 -2
  24. package/dist/components/loader.js +4 -2
  25. package/dist/components/toaster.d.ts +5 -1
  26. package/dist/components/toaster.js +16 -2
  27. package/dist/styles.css +485 -28
  28. package/docs/api/README.md +2 -0
  29. package/docs/api/blocks/app-bar.md +9 -1
  30. package/docs/api/blocks/empty-state.md +30 -11
  31. package/docs/api/blocks/loading-state.md +33 -0
  32. package/docs/api/blocks/result-state.md +30 -6
  33. package/docs/api/blocks/setup-notice.md +82 -0
  34. package/docs/api/components/confirm-action.md +8 -6
  35. package/docs/api/components/data-list.md +33 -0
  36. package/docs/api/components/failure-line.md +50 -0
  37. package/docs/api/components/field.md +9 -8
  38. package/docs/api/components/icon-checkbox.md +55 -0
  39. package/docs/api/components/icon-radio.md +39 -5
  40. package/docs/api/components/keycap.md +10 -7
  41. package/docs/api/components/loader.md +18 -7
  42. package/docs/api/components/toaster.md +2 -0
  43. package/package.json +15 -6
  44. package/src/first-run.css +100 -0
  45. package/src/styles.css +394 -21
package/docs/api/README.md CHANGED
@@ -30,6 +30,7 @@
30
30
  | [blocks/result-state](blocks/result-state.md) | - |
31
31
  | [blocks/section-card](blocks/section-card.md) | - |
32
32
  | [blocks/section-heading](blocks/section-heading.md) | - |
33
+ | [blocks/setup-notice](blocks/setup-notice.md) | - |
33
34
  | [blocks/spec-sheet](blocks/spec-sheet.md) | - |
34
35
  | [blocks/status-tray](blocks/status-tray.md) | - |
35
36
  | [blocks/upload-queue](blocks/upload-queue.md) | - |
@@ -53,6 +54,7 @@
53
54
  | [components/diff-view](components/diff-view.md) | - |
54
55
  | [components/disclosure](components/disclosure.md) | - |
55
56
  | [components/dropdown-menu](components/dropdown-menu.md) | - |
57
+ | [components/failure-line](components/failure-line.md) | - |
56
58
  | [components/field-guide](components/field-guide.md) | - |
57
59
  | [components/field](components/field.md) | - |
58
60
  | [components/game-feedback](components/game-feedback.md) | - |
package/docs/api/blocks/app-bar.md CHANGED
@@ -100,7 +100,15 @@ windows: readonly AppBarItem[];
100
100
  launchers: readonly AppBarItem[];
101
101
  ```
102
102
 
103
- Team Apps available to launch from the speed dial.
103
+ Apps available to launch from the speed dial.
104
+
105
+ ##### appsLabel?
106
+
107
+ ```ts
108
+ optional appsLabel?: string;
109
+ ```
110
+
111
+ The Apps section heading and its launcher name; the host owns the wording.
104
112
 
105
113
  ##### sessions?
106
114
 
package/docs/api/blocks/empty-state.md CHANGED
@@ -53,6 +53,8 @@ What a visual is told while the EmptyState is on screen.
53
53
  type EmptyStateSuggestion = Readonly<{
54
54
  label: string;
55
55
  onSelect: () => void;
56
+ pending?: boolean;
57
+ disabled?: boolean;
56
58
  }>;
57
59
  ```
58
60
 
@@ -60,6 +62,22 @@ A suggested next step, shown as a chip the host acts on.
60
62
 
61
63
  ---
62
64
 
65
+ ### EmptyStatePrimaryAction
66
+
67
+ ```ts
68
+ type EmptyStatePrimaryAction = Readonly<{
69
+ label: string;
70
+ onSelect: () => void;
71
+ pending?: boolean;
72
+ disabled?: boolean;
73
+ disabledReason?: string;
74
+ }>;
75
+ ```
76
+
77
+ The one main step a first-run state invites; at most one per state.
78
+
79
+ ---
80
+
63
81
  ### EmptyStateProps
64
82
 
65
83
  ```ts
@@ -70,17 +88,18 @@ Props accepted by EmptyState.
70
88
 
71
89
  #### Type Declaration
72
90
 
73
- | Name | Type | Description |
74
- | ----------------- | ---------------------------------------------------------- | --------------------------------------------------------------------------- |
75
- | `actions?` | `ReactNode` | - |
76
- | `description` | `ReactNode` | - |
77
- | `suggestions?` | readonly [`EmptyStateSuggestion`](#emptystatesuggestion)[] | Chips that offer a starting point, such as a prompt to try. |
78
- | `thinking?` | `boolean` | The host is working on something, such as creating what this state invites. |
79
- | `title` | `ReactNode` | - |
80
- | `headingLevel?` | [`EmptyStateHeadingLevel`](#emptystateheadinglevel) | Heading level for the title; use one below the heading it sits under. |
81
- | `visual?` | `ReactNode` | Static art. |
82
- | `renderVisual()?` | (`state`) => `ReactNode` | Render a visual from the current speaking and thinking state. |
83
- | `variant?` | [`EmptyStateVariant`](#emptystatevariant) | - |
91
+ | Name | Type | Description |
92
+ | ----------------- | ---------------------------------------------------------- | --------------------------------------------------------------------------------------- |
93
+ | `actions?` | `ReactNode` | Secondary actions only; the main step goes in `primaryAction`. |
94
+ | `primaryAction?` | [`EmptyStatePrimaryAction`](#emptystateprimaryaction) | The one main step, rendered as a primary Button before the chips. |
95
+ | `description` | `ReactNode` | - |
96
+ | `suggestions?` | readonly [`EmptyStateSuggestion`](#emptystatesuggestion)[] | Chips that offer a starting point, such as a prompt to try. |
97
+ | `thinking?` | `boolean` | The host is working on something, such as creating what this state invites. |
98
+ | `title` | `ReactNode` | - |
99
+ | `headingLevel?` | [`EmptyStateHeadingLevel`](#emptystateheadinglevel) | Heading level for the title; use one below the heading it sits under. |
100
+ | `visual?` | `Exclude`\<`ReactNode`, `string`\> \| `"blobs"` | Static art. `"blobs"` is the living idle Loader; a `panel` with no visual shows it too. |
101
+ | `renderVisual()?` | (`state`) => `ReactNode` | Render a visual from the current speaking and thinking state. |
102
+ | `variant?` | [`EmptyStateVariant`](#emptystatevariant) | - |
84
103
 
85
104
  ## Variables
86
105
 
package/docs/api/blocks/loading-state.md CHANGED
@@ -8,8 +8,41 @@
8
8
 
9
9
  # blocks/loading-state
10
10
 
11
+ ## Type Aliases
12
+
13
+ ### LoadingStateProps
14
+
15
+ ```ts
16
+ type LoadingStateProps = HTMLAttributes<HTMLDivElement> & object;
17
+ ```
18
+
19
+ Props accepted by LoadingState.
20
+
21
+ #### Type Declaration
22
+
23
+ | Name | Type | Description |
24
+ | -------------- | -------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
25
+ | `message` | `ReactNode` | - |
26
+ | `framed?` | `boolean` | `false` drops the frame (border, plate, padding) for a window-opening state that fills its pane. |
27
+ | `icon?` | `ReactNode` | An App icon shown above the loader, for an App opening state. |
28
+ | `detail?` | `ReactNode` | A second, quieter line under the message. |
29
+ | `size?` | `"sm"` \| `"md"` \| `"lg"` | Blob size; `md` is the default for a window or pane. |
30
+ | `variant?` | [`LoaderVariant`](../components/loader.md#loadervariant) | Which formation moves; pick one per moment (see the Caps README). |
31
+ | `slowAfterMs?` | `number` | Milliseconds before the wait is called slow: "Still working…" is added and `onRetry`, if given, offers a Retry. Infinity never says so. |
32
+ | `onRetry()?` | () => `void` | Called when Retry is chosen; Retry only appears once the wait is slow. |
33
+
11
34
  ## Variables
12
35
 
36
+ ### LOADING\_SLOW\_AFTER\_MS
37
+
38
+ ```ts
39
+ const LOADING_SLOW_AFTER_MS: 8000 = 8000;
40
+ ```
41
+
42
+ How long a wait runs before LoadingState admits it is slow.
43
+
44
+ ---
45
+
13
46
  ### LoadingState
14
47
 
15
48
  ```ts
package/docs/api/blocks/result-state.md CHANGED
@@ -10,6 +10,26 @@
10
10
 
11
11
  ## Type Aliases
12
12
 
13
+ ### ResultStateHeadingLevel
14
+
15
+ ```ts
16
+ type ResultStateHeadingLevel = 2 | 3 | 4;
17
+ ```
18
+
19
+ The document heading level of a ResultState title.
20
+
21
+ ---
22
+
23
+ ### ResultStateTone
24
+
25
+ ```ts
26
+ type ResultStateTone = "failed" | "done" | "neutral";
27
+ ```
28
+
29
+ What happened: `failed` is the failure card, `done` a finished result.
30
+
31
+ ---
32
+
13
33
  ### ResultStateProps
14
34
 
15
35
  ```ts
@@ -20,12 +40,16 @@ Props accepted by ResultState.
20
40
 
21
41
  #### Type Declaration
22
42
 
23
- | Name | Type |
24
- | ------------- | ----------- |
25
- | `actions?` | `ReactNode` |
26
- | `description` | `ReactNode` |
27
- | `icon?` | `ReactNode` |
28
- | `title` | `ReactNode` |
43
+ | Name | Type | Description |
44
+ | --------------- | ----------------------------------------------------- | --------------------------------------------------------------- |
45
+ | `actions?` | `ReactNode` | One primary action, then secondary ones. |
46
+ | `description` | `ReactNode` | - |
47
+ | `headingLevel?` | [`ResultStateHeadingLevel`](#resultstateheadinglevel) | - |
48
+ | `icon?` | `ReactNode` | - |
49
+ | `steps?` | readonly `ReactNode`[] | Up to three numbered next steps; extra steps are not shown. |
50
+ | `title` | `ReactNode` | - |
51
+ | `tone?` | [`ResultStateTone`](#resultstatetone) | - |
52
+ | `visual?` | `ReactNode` | Larger decorative art above the title, such as an illustration. |
29
53
 
30
54
  ## Variables
31
55
 
package/docs/api/blocks/setup-notice.md ADDED
@@ -0,0 +1,82 @@
1
+ <!-- Generated by Botanical API docs (TypeDoc + typedoc-plugin-markdown). Do not edit. -->
2
+
3
+ [**@fungi.computer/caps**](../README.md)
4
+
5
+ ---
6
+
7
+ [@fungi.computer/caps](../README.md) / blocks/setup-notice
8
+
9
+ # blocks/setup-notice
10
+
11
+ ## Type Aliases
12
+
13
+ ### SetupNoticeAction
14
+
15
+ ```ts
16
+ type SetupNoticeAction = Readonly<{
17
+ label: string;
18
+ onSelect: () => void;
19
+ }>;
20
+ ```
21
+
22
+ A step the person takes to finish setup.
23
+
24
+ ---
25
+
26
+ ### SetupNoticeFix
27
+
28
+ ```ts
29
+ type SetupNoticeFix = SetupNoticeAction &
30
+ Readonly<{
31
+ pending?: boolean;
32
+ }>;
33
+ ```
34
+
35
+ The required fix; `pending` means it opened Settings and is waiting.
36
+
37
+ ---
38
+
39
+ ### SetupNoticeProps
40
+
41
+ ```ts
42
+ type SetupNoticeProps = Omit<
43
+ HTMLAttributes<HTMLElement>,
44
+ "title" | "children"
45
+ > &
46
+ object;
47
+ ```
48
+
49
+ Props accepted by SetupNotice.
50
+
51
+ #### Type Declaration
52
+
53
+ | Name | Type | Description |
54
+ | ------------- | ----------------------------------------- | ------------------------------------------------------------------------------- |
55
+ | `need` | `ReactNode` | The title, such as "Connect a model to start chatting". |
56
+ | `cause` | `ReactNode` | One sentence naming the real cause. |
57
+ | `fix` | [`SetupNoticeFix`](#setupnoticefix) | The one primary fix; never a dead CTA. |
58
+ | `secondary?` | [`SetupNoticeAction`](#setupnoticeaction) | - |
59
+ | `available?` | `ReactNode` | What still works meanwhile, such as "Uploads work now". |
60
+ | `waitingFor?` | `string` | Names what is awaited while pending, after "Waiting for". |
61
+ | `variant` | `"panel"` \| `"inline"` \| `"banner"` | `panel` replaces an empty state; `banner` and `inline` sit above or in content. |
62
+
63
+ ## Functions
64
+
65
+ ### SetupNotice()
66
+
67
+ ```ts
68
+ function SetupNotice(__namedParameters): Element;
69
+ ```
70
+
71
+ Missing setup, named with its fix. Render it only while the setup fact is
72
+ missing; when the fact turns ready the host unmounts it (and may toast).
73
+
74
+ #### Parameters
75
+
76
+ | Parameter | Type |
77
+ | ------------------- | --------------------------------------- |
78
+ | `__namedParameters` | [`SetupNoticeProps`](#setupnoticeprops) |
79
+
80
+ #### Returns
81
+
82
+ `Element`
package/docs/api/components/confirm-action.md CHANGED
@@ -28,12 +28,14 @@ A deliberate hold, or an exact phrase before a destructive action.
28
28
 
29
29
  #### Type Declaration
30
30
 
31
- | Name | Type | Description |
32
- | -------------- | ------------------------- | ---------------------------------------------------------------------------------- |
33
- | `label` | `string` | The action's trigger label and dialog title. |
34
- | `confirmLabel` | `string` | The destructive key's label (and the hold gesture's instruction). |
35
- | `onConfirm()` | () => `Promise`\<`void`\> | Resolve on success; reject on failure. The component prevents concurrent calls. |
36
- | `error?` | `string` | Caller-owned, safe-to-display failure copy; rejection details are never displayed. |
31
+ | Name | Type | Description |
32
+ | -------------- | ------------------------------------------ | ---------------------------------------------------------------------------------- |
33
+ | `label` | `string` | The action's trigger label and dialog title. |
34
+ | `confirmLabel` | `string` | The destructive key's label (and the hold gesture's instruction). |
35
+ | `onConfirm()` | () => `Promise`\<`void`\> | Resolve on success; reject on failure. The component prevents concurrent calls. |
36
+ | `error?` | `string` | Caller-owned, safe-to-display failure copy; rejection details are never displayed. |
37
+ | `variant?` | [`ButtonVariant`](button.md#buttonvariant) | The trigger key's look; destructive by default, quiet where a toolbar needs it. |
38
+ | `size?` | [`ButtonSize`](button.md#buttonsize) | The trigger key's size. |
37
39
 
38
40
  ## Functions
39
41
 
package/docs/api/components/data-list.md CHANGED
@@ -26,6 +26,24 @@ Props accepted by DataList.
26
26
 
27
27
  ---
28
28
 
29
+ ### FactRowProps
30
+
31
+ ```ts
32
+ type FactRowProps = Omit<LiHTMLAttributes<HTMLLIElement>, "children"> & object;
33
+ ```
34
+
35
+ Props accepted by FactRow.
36
+
37
+ #### Type Declaration
38
+
39
+ | Name | Type | Description |
40
+ | ---------- | ----------- | ----------------------------------------------- |
41
+ | `icon?` | `ReactNode` | A 16px Sigil before the label; decorative. |
42
+ | `label` | `ReactNode` | - |
43
+ | `children` | `ReactNode` | The fact; long values wrap in their own column. |
44
+
45
+ ---
46
+
29
47
  ### DataListHeadingProps
30
48
 
31
49
  ```ts
@@ -67,6 +85,21 @@ A list row for a caller-provided label and value.
67
85
 
68
86
  ---
69
87
 
88
+ ### FactRow
89
+
90
+ ```ts
91
+ const FactRow: ForwardRefExoticComponent<
92
+ Omit<LiHTMLAttributes<HTMLLIElement>, "children"> &
93
+ object &
94
+ RefAttributes<HTMLLIElement>
95
+ >;
96
+ ```
97
+
98
+ One details-panel fact in a compact DataList: a fixed label column (Sigil and
99
+ quiet name) and a wrapping value, as in a Print's Image info.
100
+
101
+ ---
102
+
70
103
  ### DataListHeading
71
104
 
72
105
  ```ts
package/docs/api/components/failure-line.md ADDED
@@ -0,0 +1,50 @@
1
+ <!-- Generated by Botanical API docs (TypeDoc + typedoc-plugin-markdown). Do not edit. -->
2
+
3
+ [**@fungi.computer/caps**](../README.md)
4
+
5
+ ---
6
+
7
+ [@fungi.computer/caps](../README.md) / components/failure-line
8
+
9
+ # components/failure-line
10
+
11
+ ## Type Aliases
12
+
13
+ ### FailureLineProps
14
+
15
+ ```ts
16
+ type FailureLineProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> &
17
+ object;
18
+ ```
19
+
20
+ Props accepted by FailureLine.
21
+
22
+ #### Type Declaration
23
+
24
+ | Name | Type | Description |
25
+ | ------------------- | ----------------------- | ------------------------------------------------------------------------------------ |
26
+ | `message` | `ReactNode` | One plain line naming the real cause; never a raw code. |
27
+ | `onRetry()?` | () => `void` | Called when Retry is chosen; without it no Retry button shows. |
28
+ | `onDismiss()?` | () => `void` | Called when Dismiss is chosen; without it no Dismiss button shows. |
29
+ | `retryLabel?` | `string` | - |
30
+ | `dismissLabel?` | `string` | - |
31
+ | `retryAriaLabel?` | `string` | A more specific accessible name for Retry, such as "Retry prompt". |
32
+ | `dismissAriaLabel?` | `string` | A more specific accessible name for Dismiss. |
33
+ | `count?` | `number` | How many times it failed; above 1 the line adds a "Failed" line with the count once. |
34
+ | `density?` | `"row"` \| `"tile"` | `row` sits in a list or under a control; `tile` fills a media tile. |
35
+ | `role?` | `"status"` \| `"alert"` | `status` is polite; use `alert` only for a single, urgent failure. |
36
+
37
+ ## Variables
38
+
39
+ ### FailureLine
40
+
41
+ ```ts
42
+ const FailureLine: ForwardRefExoticComponent<
43
+ Omit<HTMLAttributes<HTMLDivElement>, "children"> &
44
+ object &
45
+ RefAttributes<HTMLDivElement>
46
+ >;
47
+ ```
48
+
49
+ One item failure: an error dot, one line, and labelled Retry and Dismiss. It
50
+ never uses the bang glyph; the dot is the whole signal.
package/docs/api/components/field.md CHANGED
@@ -76,14 +76,15 @@ Props accepted by FieldSet.
76
76
 
77
77
  #### Type Declaration
78
78
 
79
- | Name | Type | Description |
80
- | -------------- | ----------- | ----------------------------------------------------------------- |
81
- | `legend` | `ReactNode` | - |
82
- | `legendTitle?` | `string` | Full legend on hover when a columns form clips it to one line. |
83
- | `description?` | `ReactNode` | - |
84
- | `layout?` | `"columns"` | Opt-in label/control grid when used without a Form parent. |
85
- | `error?` | `ReactNode` | The group's announced error, such as "Choose at least one right". |
86
- | `children` | `ReactNode` | - |
79
+ | Name | Type | Description |
80
+ | -------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ |
81
+ | `legend` | `ReactNode` | - |
82
+ | `icon?` | `ReactNode` | A decorative Sigil or App icon before the legend, as a Field's `icon` marks its label. Hidden from assistive tech. |
83
+ | `legendTitle?` | `string` | Full legend on hover when a columns form clips it to one line. |
84
+ | `description?` | `ReactNode` | - |
85
+ | `layout?` | `"columns"` | Opt-in label/control grid when used without a Form parent. |
86
+ | `error?` | `ReactNode` | The group's announced error, such as "Choose at least one right". |
87
+ | `children` | `ReactNode` | - |
87
88
 
88
89
  ---
89
90
 
package/docs/api/components/icon-checkbox.md CHANGED
@@ -27,6 +27,25 @@ Props accepted by IconCheckbox. The full label names the native input.
27
27
  | `caption?` | `string` | A short visible legend; it does not replace the accessible label. |
28
28
  | `appearance?` | `"default"` \| `"compact"` | Compact instruments show the icon and caption without a tile or lamp. |
29
29
 
30
+ ---
31
+
32
+ ### CheckKeyProps
33
+
34
+ ```ts
35
+ type CheckKeyProps = object &
36
+ Omit<CheckboxProps, "children" | "indicator" | "appearance">;
37
+ ```
38
+
39
+ Props accepted by CheckKey. The label names the native input.
40
+
41
+ #### Type Declaration
42
+
43
+ | Name | Type | Description |
44
+ | ------- | ----------- | ---------------------------------------------------------------- |
45
+ | `label` | `string` | - |
46
+ | `icon?` | `ReactNode` | A Sigil or App icon before the label; decorative. |
47
+ | `hint?` | `ReactNode` | One quiet line under the label, read as the input's description. |
48
+
30
49
  ## Variables
31
50
 
32
51
  ### IconCheckbox
@@ -40,3 +59,39 @@ const IconCheckbox: ForwardRefExoticComponent<
40
59
  ```
41
60
 
42
61
  An independent icon choice composed from the native Caps Checkbox.
62
+
63
+ ---
64
+
65
+ ### CheckKey
66
+
67
+ ```ts
68
+ const CheckKey: ForwardRefExoticComponent<
69
+ object &
70
+ Omit<CheckboxProps, "children" | "appearance" | "indicator"> &
71
+ RefAttributes<HTMLInputElement>
72
+ >;
73
+ ```
74
+
75
+ One choice in a short multi-select, drawn as a wide Caps key: Sigil, label and
76
+ an optional hint, a lit lamp and selected face when checked. The native checkbox
77
+ covers the whole key, so it keeps form submission, keyboard and focus behaviour.
78
+
79
+ ## Functions
80
+
81
+ ### CheckKeys()
82
+
83
+ ```ts
84
+ function CheckKeys(__namedParameters): Element;
85
+ ```
86
+
87
+ Lays out a group of CheckKeys: a wrapping grid of equal keys.
88
+
89
+ #### Parameters
90
+
91
+ | Parameter | Type |
92
+ | ------------------- | ------------------------------------ |
93
+ | `__namedParameters` | `HTMLAttributes`\<`HTMLDivElement`\> |
94
+
95
+ #### Returns
96
+
97
+ `Element`
package/docs/api/components/icon-radio.md CHANGED
@@ -21,11 +21,30 @@ Props accepted by IconRadio. Use it inside the existing RadioGroup.
21
21
 
22
22
  #### Type Declaration
23
23
 
24
- | Name | Type | Description |
25
- | ---------- | ----------- | ----------------------------------------------------------------- |
26
- | `label` | `string` | - |
27
- | `icon` | `ReactNode` | - |
28
- | `caption?` | `string` | A short visible legend; it does not replace the accessible label. |
24
+ | Name | Type | Description |
25
+ | ---------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
26
+ | `label` | `string` | - |
27
+ | `icon` | `ReactNode` | - |
28
+ | `caption?` | `string` | A short visible legend; it does not replace the accessible label. |
29
+ | `art?` | `"dim"` \| `"color"` | `color` keeps an off key's art in full colour, for choices whose colour is the information (a character, a palette). Icons dim by default. |
30
+
31
+ ---
32
+
33
+ ### SwatchRadioProps
34
+
35
+ ```ts
36
+ type SwatchRadioProps = object &
37
+ Omit<RadioGroupItemProps, "children" | "indicator">;
38
+ ```
39
+
40
+ Props accepted by SwatchRadio. Use it inside the existing RadioGroup.
41
+
42
+ #### Type Declaration
43
+
44
+ | Name | Type | Description |
45
+ | ------- | -------- | ------------------------------------------------------------ |
46
+ | `label` | `string` | The colour's name: the accessible label and the hover title. |
47
+ | `color` | `string` | Any CSS colour, drawn as the key's dot. |
29
48
 
30
49
  ## Variables
31
50
 
@@ -40,3 +59,18 @@ const IconRadio: ForwardRefExoticComponent<
40
59
  ```
41
60
 
42
61
  One icon choice in a native, mutually exclusive Caps RadioGroup.
62
+
63
+ ---
64
+
65
+ ### SwatchRadio
66
+
67
+ ```ts
68
+ const SwatchRadio: ForwardRefExoticComponent<
69
+ object &
70
+ Omit<RadioGroupItemProps, "children" | "indicator"> &
71
+ RefAttributes<HTMLInputElement>
72
+ >;
73
+ ```
74
+
75
+ One colour choice: a small icon key whose dot keeps its colour while off, so
76
+ every choice reads before it is picked. The lamp marks the choice.
package/docs/api/components/keycap.md CHANGED
@@ -24,10 +24,11 @@ until hovered or focused; the rest follow the theme.
24
24
  ### KeycapSize
25
25
 
26
26
  ```ts
27
- type KeycapSize = "sm" | "md" | "lg";
27
+ type KeycapSize = "hint" | "sm" | "md" | "lg";
28
28
  ```
29
29
 
30
- Keycap sizes: a legend chip, a dock key and a big face key.
30
+ Keycap sizes: `hint` is a muted inline shortcut caption (caption height, no
31
+ plastic), then a legend chip, a dock key and a big face key.
31
32
 
32
33
  ---
33
34
 
@@ -41,11 +42,12 @@ Props accepted by Keycap.
41
42
 
42
43
  #### Type Declaration
43
44
 
44
- | Name | Type | Description |
45
- | ---------- | --------------------------- | --------------------------------------------------------------- |
46
- | `tone?` | [`KeycapTone`](#keycaptone) | - |
47
- | `size?` | [`KeycapSize`](#keycapsize) | - |
48
- | `pressed?` | `boolean` | Show the key held down. Presentation only; the host owns input. |
45
+ | Name | Type | Description |
46
+ | ---------- | --------------------------- | --------------------------------------------------------------------------------------------------- |
47
+ | `tone?` | [`KeycapTone`](#keycaptone) | - |
48
+ | `size?` | [`KeycapSize`](#keycapsize) | - |
49
+ | `pressed?` | `boolean` | Show the key held down. Presentation only; the host owns input. |
50
+ | `touch?` | `"hide"` | `hide` drops a keyboard legend on touch-first devices (`pointer: coarse`), where no one presses it. |
49
51
 
50
52
  ---
51
53
 
@@ -70,6 +72,7 @@ Props accepted by KeycapButton.
70
72
  | `icon?` | `ReactNode` | Decorative icon before the label. |
71
73
  | `readout?` | `ReactNode` | Extra readout after the label, such as a PixelNumber count. |
72
74
  | `tone?` | [`KeycapTone`](#keycaptone) | - |
75
+ | `density?` | `"regular"` \| `"compact"` | `compact` is the details-panel key: 2.25rem high, centred `sm` label. It sizes to its legend in a row and fills its cell in a grid. |
73
76
  | `pressed?` | `boolean` | Toggle state for mode keys. `undefined` is a momentary key; a boolean adds `aria-pressed` and lights the key's indicator. |
74
77
  | `expanded?` | `boolean` | Disclosure state for keys that open a palette or window. A boolean adds `aria-expanded` and lights the lamp; use it instead of `pressed` for menus. |
75
78
 
package/docs/api/components/loader.md CHANGED
@@ -20,6 +20,16 @@ Fluid motion formations, sharing one material.
20
20
 
21
21
  ---
22
22
 
23
+ ### LoaderPace
24
+
25
+ ```ts
26
+ type LoaderPace = "working" | "idle";
27
+ ```
28
+
29
+ How briskly a formation cycles: `working` for a wait, `idle` for art.
30
+
31
+ ---
32
+
23
33
  ### LoaderProps
24
34
 
25
35
  ```ts
@@ -30,13 +40,14 @@ Props accepted by Loader.
30
40
 
31
41
  #### Type Declaration
32
42
 
33
- | Name | Type | Description |
34
- | ------------- | ------------------------------------------------------- | ------------------------------------------------------------------------ |
35
- | `decorative?` | `boolean` | - |
36
- | `label?` | `ReactNode` | - |
37
- | `size?` | `"sm"` \| `"md"` \| `"lg"` \| `"fill"` | `fill` grows the formation to its container, as a full-tile placeholder. |
38
- | `variant?` | [`LoaderVariant`](#loadervariant) | - |
39
- | `tone?` | `"neutral"` \| `"accent"` \| `"primary"` \| `"success"` | - |
43
+ | Name | Type | Description |
44
+ | ------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------ |
45
+ | `decorative?` | `boolean` | - |
46
+ | `label?` | `ReactNode` | - |
47
+ | `size?` | `"sm"` \| `"md"` \| `"lg"` \| `"fill"` | `fill` grows the formation to its container, as a full-tile placeholder. |
48
+ | `variant?` | [`LoaderVariant`](#loadervariant) | - |
49
+ | `pace?` | [`LoaderPace`](#loaderpace) | `idle` slows the cycle for decorative art such as an empty state. |
50
+ | `tone?` | `"neutral"` \| `"accent"` \| `"primary"` \| `"success"` \| `"current"` | - |
40
51
 
41
52
  ## Variables
42
53
 
package/docs/api/components/toaster.md CHANGED
@@ -17,6 +17,8 @@ function Toaster(__namedParameters): ReactPortal | null;
17
17
  ```
18
18
 
19
19
  Sonner owns gestures, stacking, focus and lifetime; Caps owns the surface.
20
+ Colors come from the Stipe tokens in the cascade, so a `data-theme` switch
21
+ restyles open toasts; Sonner's own light and dark palettes are overridden.
20
22
 
21
23
  #### Parameters
22
24