ionbase-ui 0.24.0 → 0.26.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 (42) hide show
  1. package/dist/components/AgentActivity.d.ts +41 -0
  2. package/dist/components/AgentActivity.d.ts.map +1 -0
  3. package/dist/components/AgentActivity.js +84 -0
  4. package/dist/components/AgentActivity.js.map +1 -0
  5. package/dist/components/Citation.d.ts +51 -0
  6. package/dist/components/Citation.d.ts.map +1 -0
  7. package/dist/components/Citation.js +41 -0
  8. package/dist/components/Citation.js.map +1 -0
  9. package/dist/components/ConfidenceIndicator.d.ts +37 -0
  10. package/dist/components/ConfidenceIndicator.d.ts.map +1 -0
  11. package/dist/components/ConfidenceIndicator.js +41 -0
  12. package/dist/components/ConfidenceIndicator.js.map +1 -0
  13. package/dist/components/StreamingText.d.ts +47 -0
  14. package/dist/components/StreamingText.d.ts.map +1 -0
  15. package/dist/components/StreamingText.js +44 -0
  16. package/dist/components/StreamingText.js.map +1 -0
  17. package/dist/components/index.d.ts +8 -0
  18. package/dist/components/index.d.ts.map +1 -1
  19. package/dist/components/index.js +4 -0
  20. package/dist/components/index.js.map +1 -1
  21. package/dist/figma-descriptions.json +29 -29
  22. package/dist/figma-map.json +20 -1
  23. package/dist/meta/AgentActivity.json +103 -0
  24. package/dist/meta/AgentActivityStep.json +117 -0
  25. package/dist/meta/Citation.json +101 -0
  26. package/dist/meta/CitationList.json +94 -0
  27. package/dist/meta/CitationListItem.json +88 -0
  28. package/dist/meta/ConfidenceIndicator.json +115 -0
  29. package/dist/meta/Input.json +2 -2
  30. package/dist/meta/PhoneInput.json +2 -2
  31. package/dist/meta/StreamingText.json +99 -0
  32. package/dist/meta/components.json +722 -5
  33. package/dist/meta/contrast.json +240 -0
  34. package/dist/meta/index.json +64 -1
  35. package/dist/meta/patterns/index.json +1 -1
  36. package/dist/styles/agent-activity.css +95 -0
  37. package/dist/styles/citation.css +93 -0
  38. package/dist/styles/confidence-indicator.css +97 -0
  39. package/dist/styles/index.css +4 -0
  40. package/dist/styles/streaming-text.css +56 -0
  41. package/llms.txt +2 -2
  42. package/package.json +1 -1
@@ -0,0 +1,94 @@
1
+ {
2
+ "name": "CitationList",
3
+ "source": "src/components/Citation.tsx",
4
+ "propsType": "CitationListProps",
5
+ "description": "The footer list. An `<ol>` so the numbering is structural rather than typed\ninto each row, and so a screen reader can say how many sources there are\nbefore the reader commits to hearing them.",
6
+ "import": "import { CitationList } from 'ionbase-ui';",
7
+ "status": "stable",
8
+ "summary": "The footer list of sources, as an ordered list so the count and order are structural.",
9
+ "useWhen": [
10
+ "several claims cite sources and the reader should be able to see them all at once"
11
+ ],
12
+ "useInstead": [
13
+ {
14
+ "when": "there is one source and it belongs in the sentence",
15
+ "use": "Link"
16
+ },
17
+ {
18
+ "when": "it is tabular data with more than a source per row",
19
+ "use": "Table"
20
+ }
21
+ ],
22
+ "composition": {
23
+ "order": [
24
+ "CitationList",
25
+ "CitationListItem"
26
+ ],
27
+ "example": "<CitationList><CitationListItem index={1} source=\"Q3 filing\" href=\"/q3\">Revenue rose 4%.</CitationListItem></CitationList>"
28
+ },
29
+ "slots": {
30
+ "label": {
31
+ "accepts": "text",
32
+ "note": "rendered as plain text, not a heading element — it should not enter the document outline as a section"
33
+ },
34
+ "children": {
35
+ "accepts": "CitationListItem"
36
+ }
37
+ },
38
+ "a11y": {
39
+ "guarantees": [
40
+ "an <ol>, so a screen reader can say how many sources there are before the reader commits to hearing them",
41
+ "list markers are hidden in CSS while the semantics stay, because the visible number must match the inline Citation's exactly"
42
+ ]
43
+ },
44
+ "antiPatterns": [
45
+ {
46
+ "dont": "a <div> stack of sources",
47
+ "why": "the count and the ordering are the useful part, and only a list carries them"
48
+ },
49
+ {
50
+ "dont": "numbers that disagree with the inline markers",
51
+ "why": "the marker is a promise about where to look"
52
+ }
53
+ ],
54
+ "stylesheet": "src/styles/citation.css",
55
+ "tokens": [
56
+ "--border-focus",
57
+ "--border-width-thick",
58
+ "--font-family-sans",
59
+ "--font-weight-medium",
60
+ "--font-weight-semibold",
61
+ "--radius-xs",
62
+ "--spacing-16",
63
+ "--spacing-2",
64
+ "--spacing-4",
65
+ "--spacing-8",
66
+ "--surface-primary-subtle",
67
+ "--surface-primary-subtle-hover",
68
+ "--text-link",
69
+ "--text-tertiary",
70
+ "--type-body-sm",
71
+ "--type-body-sm-line-height",
72
+ "--type-caption",
73
+ "--type-caption-line-height"
74
+ ],
75
+ "props": {
76
+ "children": {
77
+ "type": "React.ReactNode",
78
+ "required": false,
79
+ "origin": "own"
80
+ },
81
+ "label": {
82
+ "type": "React.ReactNode",
83
+ "required": false,
84
+ "origin": "own",
85
+ "description": "Heading above the list. Rendered as plain text, not a heading element."
86
+ }
87
+ },
88
+ "propCounts": {
89
+ "own": 2,
90
+ "aria": 0,
91
+ "dom": 280,
92
+ "other": 0
93
+ }
94
+ }
@@ -0,0 +1,88 @@
1
+ {
2
+ "name": "CitationListItem",
3
+ "source": "src/components/Citation.tsx",
4
+ "propsType": "CitationListItemProps",
5
+ "import": "import { CitationListItem } from 'ionbase-ui';",
6
+ "status": "stable",
7
+ "summary": "One source row: its number, what it is, and the passage it supports.",
8
+ "useWhen": [
9
+ "a child of CitationList"
10
+ ],
11
+ "useInstead": [
12
+ {
13
+ "when": "it is the inline marker in the prose",
14
+ "use": "Citation"
15
+ }
16
+ ],
17
+ "slots": {
18
+ "children": {
19
+ "accepts": "text",
20
+ "note": "the quoted or summarised passage this source supports"
21
+ }
22
+ },
23
+ "a11y": {
24
+ "guarantees": [
25
+ "the visible number is `aria-hidden`; the row is named by its source text, which is what a reader needs to hear",
26
+ "without `href` the source renders as text rather than a dead link"
27
+ ],
28
+ "requires": [
29
+ "`source` naming what is being cited"
30
+ ]
31
+ },
32
+ "antiPatterns": [
33
+ {
34
+ "dont": "a bare URL as the `source`",
35
+ "why": "a screen reader spells it out character by character, and it names nothing"
36
+ }
37
+ ],
38
+ "stylesheet": "src/styles/citation.css",
39
+ "tokens": [
40
+ "--border-focus",
41
+ "--border-width-thick",
42
+ "--font-family-sans",
43
+ "--font-weight-medium",
44
+ "--font-weight-semibold",
45
+ "--radius-xs",
46
+ "--spacing-16",
47
+ "--spacing-2",
48
+ "--spacing-4",
49
+ "--spacing-8",
50
+ "--surface-primary-subtle",
51
+ "--surface-primary-subtle-hover",
52
+ "--text-link",
53
+ "--text-tertiary",
54
+ "--type-body-sm",
55
+ "--type-body-sm-line-height",
56
+ "--type-caption",
57
+ "--type-caption-line-height"
58
+ ],
59
+ "props": {
60
+ "index": {
61
+ "type": "string | number",
62
+ "required": true,
63
+ "origin": "own"
64
+ },
65
+ "source": {
66
+ "type": "string",
67
+ "required": true,
68
+ "origin": "own"
69
+ },
70
+ "href": {
71
+ "type": "string | undefined",
72
+ "required": false,
73
+ "origin": "own"
74
+ },
75
+ "children": {
76
+ "type": "React.ReactNode",
77
+ "required": false,
78
+ "origin": "own",
79
+ "description": "The quoted or summarised passage this citation supports."
80
+ }
81
+ },
82
+ "propCounts": {
83
+ "own": 4,
84
+ "aria": 0,
85
+ "dom": 278,
86
+ "other": 0
87
+ }
88
+ }
@@ -0,0 +1,115 @@
1
+ {
2
+ "name": "ConfidenceIndicator",
3
+ "source": "src/components/ConfidenceIndicator.tsx",
4
+ "propsType": "ConfidenceIndicatorProps",
5
+ "description": "ConfidenceIndicator — how much to trust the thing next to it.\n\nTHERE IS NO PERCENTAGE PROP, AND THERE WILL NOT BE ONE\n\n\"87% confident\" reads as a measurement. Almost nowhere is it one: it is\nusually a softmax score, a heuristic, or a number a model produced about\nitself — none of which are calibrated probabilities, and all of which invite\na reader to treat two digits of precision as real. Three levels cannot\noverclaim in that way.\n\n`basis` IS REQUIRED FOR THE SAME REASON. A level with nothing behind it is\ndecoration that changes behaviour: people act on \"high confidence\" whether or\nnot anything justifies it. Making the justification a required prop is the\nonly enforcement available here, and it is a type error rather than a policy\n— which is the strongest kind this system can offer.\n\nIt renders as text plus a three-bar meter, never the meter alone. The bars\ndiffer in filled COUNT, not only in colour, so the reading survives greyscale\nand forced-colours mode.",
6
+ "import": "import { ConfidenceIndicator } from 'ionbase-ui';",
7
+ "status": "stable",
8
+ "summary": "How much to trust the thing next to it — three levels with a required basis, never a percentage.",
9
+ "useWhen": [
10
+ "a generated answer varies in reliability and the reader should weigh it",
11
+ "you can say what the confidence rests on"
12
+ ],
13
+ "useInstead": [
14
+ {
15
+ "when": "the answer is wrong or missing rather than uncertain",
16
+ "use": "Alert"
17
+ },
18
+ {
19
+ "when": "you want to show where the claim came from",
20
+ "use": "Citation",
21
+ "why": "a source is stronger than a confidence level, and often what the reader actually wanted"
22
+ },
23
+ {
24
+ "when": "it is a status rather than a reliability",
25
+ "use": "Badge"
26
+ }
27
+ ],
28
+ "variants": {
29
+ "level": {
30
+ "low": {
31
+ "use": "thin or conflicting evidence. One bar, warning colour"
32
+ },
33
+ "medium": {
34
+ "use": "reasonable support with real gaps. Two bars"
35
+ },
36
+ "high": {
37
+ "use": "corroborated, and you can say by what. Three bars"
38
+ }
39
+ }
40
+ },
41
+ "a11y": {
42
+ "guarantees": [
43
+ "the level is spelled out in text, so it never depends on the meter",
44
+ "the meter differs in filled COUNT rather than only in colour, and in forced-colours mode filled bars are solid while empty ones are outlined"
45
+ ],
46
+ "requires": [
47
+ "`basis` — a type error if omitted, and the reason this component exists rather than a coloured dot"
48
+ ]
49
+ },
50
+ "antiPatterns": [
51
+ {
52
+ "dont": "asking for a percentage prop",
53
+ "why": "\"87% confident\" reads as a measurement and almost never is one — usually a softmax score or a model's claim about itself, neither of which is a calibrated probability. Three levels cannot overclaim that way"
54
+ },
55
+ {
56
+ "dont": "a vague basis like \"model output\"",
57
+ "why": "it satisfies the type and defeats the purpose — say \"3 of 4 sources agree\" or \"single unverified source\""
58
+ },
59
+ {
60
+ "dont": "high confidence on every response",
61
+ "why": "an indicator that never varies is decoration that still changes behaviour"
62
+ }
63
+ ],
64
+ "stylesheet": "src/styles/confidence-indicator.css",
65
+ "tokens": [
66
+ "--border-width-default",
67
+ "--font-family-sans",
68
+ "--font-weight-medium",
69
+ "--icon-information",
70
+ "--icon-success",
71
+ "--icon-tertiary",
72
+ "--icon-warning",
73
+ "--radius-2xs",
74
+ "--spacing-12",
75
+ "--spacing-16",
76
+ "--spacing-2",
77
+ "--spacing-4",
78
+ "--spacing-8",
79
+ "--text-default",
80
+ "--text-secondary",
81
+ "--text-tertiary",
82
+ "--type-caption",
83
+ "--type-caption-line-height"
84
+ ],
85
+ "props": {
86
+ "level": {
87
+ "type": "ConfidenceLevel",
88
+ "required": true,
89
+ "origin": "own",
90
+ "values": [
91
+ "low",
92
+ "medium",
93
+ "high"
94
+ ]
95
+ },
96
+ "basis": {
97
+ "type": "string",
98
+ "required": true,
99
+ "origin": "own",
100
+ "description": "What the level is based on. REQUIRED, and the reason this component exists\nrather than a coloured dot: a confidence with no stated basis is a number\nthe reader has no way to weigh. \"3 of 4 sources agree\", \"no matching\nrecords found\", \"single unverified source\"."
101
+ },
102
+ "label": {
103
+ "type": "string | undefined",
104
+ "required": false,
105
+ "origin": "own",
106
+ "description": "Override the level's word. Keep it a word, not a percentage."
107
+ }
108
+ },
109
+ "propCounts": {
110
+ "own": 3,
111
+ "aria": 0,
112
+ "dom": 277,
113
+ "other": 0
114
+ }
115
+ }
@@ -232,13 +232,13 @@
232
232
  "description": "Identifies the element (or elements) whose contents or presence are controlled by the current\nelement."
233
233
  },
234
234
  "enterKeyHint": {
235
- "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
235
+ "type": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
236
236
  "required": false,
237
237
  "origin": "aria",
238
238
  "description": "An enumerated attribute that defines what action label or icon to preset for the enter key on\nvirtual keyboards. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint).",
239
239
  "values": [
240
- "enter",
241
240
  "done",
241
+ "enter",
242
242
  "go",
243
243
  "next",
244
244
  "previous",
@@ -191,13 +191,13 @@
191
191
  "description": "Class names for the control box (`.ion-input`). Always lands here —\nnever on the form-field wrapper. Use `wrapperClassName` for that."
192
192
  },
193
193
  "enterKeyHint": {
194
- "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
194
+ "type": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
195
195
  "required": false,
196
196
  "origin": "aria",
197
197
  "description": "An enumerated attribute that defines what action label or icon to preset for the enter key on\nvirtual keyboards. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint).",
198
198
  "values": [
199
- "enter",
200
199
  "done",
200
+ "enter",
201
201
  "go",
202
202
  "next",
203
203
  "previous",
@@ -0,0 +1,99 @@
1
+ {
2
+ "name": "StreamingText",
3
+ "source": "src/components/StreamingText.tsx",
4
+ "propsType": "StreamingTextProps",
5
+ "description": "StreamingText — model output arriving a token at a time.\n\nIT IS NOT A LIVE REGION, AND THAT IS THE WHOLE DESIGN\n\nThe obvious implementation — `aria-live=\"polite\"` on the container — is the\none that makes a screen reader unusable. Every token mutation queues an\nannouncement, so the user hears the answer re-read, stuttered, dozens of\ntimes, and cannot get ahead of it. `aria-live=\"off\"` is not an oversight\nhere; it is the accessible choice.\n\nWhat it does instead: `aria-busy` while streaming, so assistive tech knows\nthe region is unsettled and can wait. The text is ordinary readable content\nthroughout — a screen-reader user navigates into it whenever they want,\nexactly like sighted users reading ahead of the cursor.\n\nANNOUNCING COMPLETION IS THE CALLER'S CALL, not this component's. Some\nsurfaces want \"response complete\"; a chat with ten turns on screen does not\nwant ten of them. Render your own `role=\"status\"` when you want it.\n\nTHE HEIGHT IS RESERVED, NOT ANIMATED. `minLines` holds space in `lh` units so\nthe content below stays still. A container that grows token by token drags\nthe whole page, which is worse for someone using magnification than the wait.\n\nThe cursor is CSS and `aria-hidden`. It stops blinking under\n`prefers-reduced-motion` — a blinking element is a WCAG 2.3.1 concern and a\ngenuine problem for some vestibular and attention conditions.",
6
+ "import": "import { StreamingText } from 'ionbase-ui';",
7
+ "status": "stable",
8
+ "summary": "Model output arriving a token at a time, in a container that does not move. Deliberately not a live region.",
9
+ "useWhen": [
10
+ "rendering a response that streams in rather than arriving whole",
11
+ "the reader should be able to start reading before generation finishes"
12
+ ],
13
+ "useInstead": [
14
+ {
15
+ "when": "the text is already complete",
16
+ "use": "Alert",
17
+ "why": "nothing about this component helps once there is nothing left to arrive"
18
+ },
19
+ {
20
+ "when": "you are showing progress through steps rather than producing text",
21
+ "use": "AgentActivity"
22
+ }
23
+ ],
24
+ "a11y": {
25
+ "role": "region when `label` is set, none otherwise",
26
+ "guarantees": [
27
+ "`aria-live=\"off\"`, deliberately — a polite live region re-announces the whole answer on every token, which makes a streaming response unusable with a screen reader",
28
+ "`aria-busy` while streaming, so assistive tech knows the region is unsettled",
29
+ "the text stays ordinary readable content throughout, so a screen-reader user can read ahead exactly as a sighted user does",
30
+ "the cursor is `aria-hidden`, is a styled box rather than a text character, and stops blinking under `prefers-reduced-motion` (WCAG 2.3.1)"
31
+ ],
32
+ "requires": [
33
+ "announcing completion yourself, with your own `role=\"status\"`, if the surface wants it — a chat with ten turns on screen does not want ten announcements",
34
+ "`label` when the region needs a name of its own"
35
+ ]
36
+ },
37
+ "antiPatterns": [
38
+ {
39
+ "dont": "wrapping it in `aria-live=\"polite\"`",
40
+ "why": "every token queues an announcement; the user hears the answer stuttered dozens of times and cannot get ahead of it"
41
+ },
42
+ {
43
+ "dont": "letting the container grow token by token with no reserved height",
44
+ "do": "`minLines`",
45
+ "why": "the content below climbs the screen while someone is reading it, which is worse under magnification than the wait"
46
+ },
47
+ {
48
+ "dont": "a text-character cursor like ▌",
49
+ "why": "some screen readers read it aloud even inside an aria-hidden span"
50
+ }
51
+ ],
52
+ "stylesheet": "src/styles/streaming-text.css",
53
+ "tokens": [
54
+ "--font-family-sans",
55
+ "--ion-streaming-min-lines",
56
+ "--text-default",
57
+ "--text-tertiary",
58
+ "--type-body",
59
+ "--type-body-line-height"
60
+ ],
61
+ "props": {
62
+ "children": {
63
+ "type": "React.ReactNode",
64
+ "required": false,
65
+ "origin": "own",
66
+ "description": "The text so far. Re-render with more of it; this component appends nothing."
67
+ },
68
+ "isStreaming": {
69
+ "type": "boolean | undefined",
70
+ "required": false,
71
+ "origin": "own",
72
+ "description": "More is still arriving. Shows the cursor and marks the region busy."
73
+ },
74
+ "minLines": {
75
+ "type": "number | undefined",
76
+ "required": false,
77
+ "origin": "own",
78
+ "description": "Rows of height to hold while the text is short, so the page below does not\nclimb the screen as tokens arrive. Costs blank space at the start and buys\na layout that does not move under a reader."
79
+ },
80
+ "label": {
81
+ "type": "string | undefined",
82
+ "required": false,
83
+ "origin": "own",
84
+ "description": "Accessible name for the region."
85
+ },
86
+ "hideCursor": {
87
+ "type": "boolean | undefined",
88
+ "required": false,
89
+ "origin": "own",
90
+ "description": "Hide the trailing cursor. The text still marks itself busy."
91
+ }
92
+ },
93
+ "propCounts": {
94
+ "own": 5,
95
+ "aria": 0,
96
+ "dom": 277,
97
+ "other": 0
98
+ }
99
+ }