@adia-ai/web-components 0.8.36 → 0.8.38

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 (52) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/MIGRATION.md +248 -45
  3. package/README.md +3 -3
  4. package/bin/doc.mjs +27 -5
  5. package/components/card/card.css +1 -1
  6. package/components/drilldown/drilldown.a2ui.json +242 -0
  7. package/components/drilldown/drilldown.class.js +542 -0
  8. package/components/drilldown/drilldown.css +305 -0
  9. package/components/drilldown/drilldown.d.ts +68 -0
  10. package/components/drilldown/drilldown.examples.md +20 -0
  11. package/components/drilldown/drilldown.js +17 -0
  12. package/components/drilldown/drilldown.yaml +271 -0
  13. package/components/index.js +1 -0
  14. package/components/inspector/inspector.class.js +1 -1
  15. package/components/nav/nav.class.js +11 -8
  16. package/components/nav-item/nav-item.class.js +9 -6
  17. package/components/page/page.a2ui.json +13 -1
  18. package/components/page/page.css +113 -0
  19. package/components/page/page.yaml +30 -3
  20. package/components/table-toolbar/table-toolbar.examples.md +3 -3
  21. package/core/streams-bridge.d.ts +2 -2
  22. package/core/streams-bridge.js +1 -1
  23. package/custom-elements.json +183 -26
  24. package/dist/theme-provider.min.js +1 -1
  25. package/dist/web-components.min.css +1 -1
  26. package/dist/web-components.min.js +103 -84
  27. package/dist/web-components.sheet.js +1 -1
  28. package/package.json +3 -3
  29. package/patterns/admin-keys-and-export/admin-keys-and-export.examples.html +8 -8
  30. package/patterns/agent-cost/agent-cost.examples.html +3 -3
  31. package/patterns/agent-memory/agent-memory.examples.html +4 -4
  32. package/patterns/agent-prompt-library/agent-prompt-library.examples.html +8 -8
  33. package/patterns/approvals/approvals.examples.html +2 -2
  34. package/patterns/bulk-action-toolbar/bulk-action-toolbar.examples.html +1 -1
  35. package/patterns/changelog-feed/changelog-feed.examples.html +1 -1
  36. package/patterns/comments-and-collaboration/comments-and-collaboration.examples.html +7 -7
  37. package/patterns/data-tables-inline-edit-and-tree/data-tables-inline-edit-and-tree.examples.html +4 -4
  38. package/patterns/diff-review/diff-review.examples.html +6 -6
  39. package/patterns/filter-bar/filter-bar.examples.html +5 -5
  40. package/patterns/inline-dialog/inline-dialog.examples.html +1 -1
  41. package/patterns/kanban-board/kanban-board.examples.html +12 -12
  42. package/patterns/layout/layout.examples.html +3 -3
  43. package/patterns/marketing-engagement/marketing-engagement.examples.html +13 -13
  44. package/patterns/notifications-bell-and-digest/notifications-bell-and-digest.examples.html +1 -1
  45. package/patterns/permissions-matrix/permissions-matrix.examples.html +1 -1
  46. package/patterns/permissions-role-picker/permissions-role-picker.examples.html +1 -1
  47. package/patterns/permissions-sharing/permissions-sharing.examples.html +3 -3
  48. package/patterns/profile-public-and-verification/profile-public-and-verification.examples.html +2 -2
  49. package/patterns/search-discovery/search-discovery.examples.html +15 -15
  50. package/styles/components.css +1 -0
  51. package/styles/type/scale.css +2 -1
  52. package/traits/view-transition/view-transition.js +7 -0
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@adia-ai/web-components",
3
- "version": "0.8.36",
4
- "description": "AdiaUI web components \u2014 vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-runtime.",
3
+ "version": "0.8.38",
4
+ "description": "AdiaUI web components \u2014 vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui.",
5
5
  "type": "module",
6
6
  "types": "./index.d.ts",
7
7
  "bin": {
@@ -120,7 +120,7 @@
120
120
  "./core/icons-phosphor.js"
121
121
  ],
122
122
  "dependencies": {
123
- "@adia-ai/a2ui-runtime": "^0.8.0",
123
+ "@adia-ai/a2ui": "^0.8.0",
124
124
  "@codemirror/commands": "^6.10.3",
125
125
  "@codemirror/language": "^6.12.3",
126
126
  "@codemirror/lint": "^6.9.5",
@@ -41,7 +41,7 @@
41
41
  <icon-ui slot="icon" name="key" size="sm"></icon-ui>
42
42
  <span slot="description"><code>sk_live_…A4F2</code> · last used 4 minutes ago</span>
43
43
  <row-ui slot="action" gap="2" align="center">
44
- <tag-ui size="sm" variant="primary">read · write</tag-ui>
44
+ <tag-ui variant="primary">read · write</tag-ui>
45
45
  <button-ui icon="dots-three-vertical" variant="ghost" size="sm" aria-label="Manage"></button-ui>
46
46
  </row-ui>
47
47
  </list-item-ui>
@@ -49,7 +49,7 @@
49
49
  <icon-ui slot="icon" name="key" size="sm"></icon-ui>
50
50
  <span slot="description"><code>sk_live_…9821</code> · last used 2 hours ago</span>
51
51
  <row-ui slot="action" gap="2" align="center">
52
- <tag-ui size="sm">read</tag-ui>
52
+ <tag-ui>read</tag-ui>
53
53
  <button-ui icon="dots-three-vertical" variant="ghost" size="sm" aria-label="Manage"></button-ui>
54
54
  </row-ui>
55
55
  </list-item-ui>
@@ -57,7 +57,7 @@
57
57
  <icon-ui slot="icon" name="key" size="sm"></icon-ui>
58
58
  <span slot="description"><code>sk_test_…7f0e</code> · last used 18 days ago</span>
59
59
  <row-ui slot="action" gap="2" align="center">
60
- <tag-ui size="sm" variant="default">test</tag-ui>
60
+ <tag-ui variant="default">test</tag-ui>
61
61
  <button-ui icon="dots-three-vertical" variant="ghost" size="sm" aria-label="Manage"></button-ui>
62
62
  </row-ui>
63
63
  </list-item-ui>
@@ -122,7 +122,7 @@
122
122
  <icon-ui slot="icon" name="webhooks-logo" size="sm"></icon-ui>
123
123
  <span slot="description">5 events · last delivery 3 minutes ago</span>
124
124
  <row-ui slot="action" gap="2" align="center">
125
- <tag-ui size="sm" variant="success">200 OK</tag-ui>
125
+ <tag-ui variant="success">200 OK</tag-ui>
126
126
  <button-ui icon="dots-three-vertical" variant="ghost" size="sm" aria-label="Manage"></button-ui>
127
127
  </row-ui>
128
128
  </list-item-ui>
@@ -130,7 +130,7 @@
130
130
  <icon-ui slot="icon" name="webhooks-logo" size="sm"></icon-ui>
131
131
  <span slot="description">3 events · last attempt 2 hours ago · 3 retries</span>
132
132
  <row-ui slot="action" gap="2" align="center">
133
- <tag-ui size="sm" variant="danger">503</tag-ui>
133
+ <tag-ui variant="danger">503</tag-ui>
134
134
  <button-ui text="Retry" variant="ghost" size="sm"></button-ui>
135
135
  <button-ui icon="dots-three-vertical" variant="ghost" size="sm" aria-label="Manage"></button-ui>
136
136
  </row-ui>
@@ -204,20 +204,20 @@
204
204
  <list-item-ui text="Workspace · JSON">
205
205
  <icon-ui slot="icon" name="download-simple" size="sm"></icon-ui>
206
206
  <span slot="description">Requested 12 minutes ago · 1.2M records</span>
207
- <tag-ui slot="action" size="sm" variant="warning">Running</tag-ui>
207
+ <tag-ui slot="action" variant="warning">Running</tag-ui>
208
208
  </list-item-ui>
209
209
  <list-item-ui text="My data · CSV">
210
210
  <icon-ui slot="icon" name="download-simple" size="sm"></icon-ui>
211
211
  <span slot="description">Ready 2 hours ago · 4.2 MB · expires in 6 days</span>
212
212
  <row-ui slot="action" gap="2" align="center">
213
- <tag-ui size="sm" variant="success">Ready</tag-ui>
213
+ <tag-ui variant="success">Ready</tag-ui>
214
214
  <button-ui text="Download" variant="primary" size="sm" icon-leading="download-simple"></button-ui>
215
215
  </row-ui>
216
216
  </list-item-ui>
217
217
  <list-item-ui text="Workspace · JSON">
218
218
  <icon-ui slot="icon" name="download-simple" size="sm"></icon-ui>
219
219
  <span slot="description">Ready 14 days ago · link expired</span>
220
- <tag-ui slot="action" size="sm" variant="default">Expired</tag-ui>
220
+ <tag-ui slot="action" variant="default">Expired</tag-ui>
221
221
  </list-item-ui>
222
222
  </list-ui>
223
223
  </section>
@@ -29,9 +29,9 @@
29
29
  data-chunk-domain="agent"
30
30
  data-chunk-description="Inline agent-cost strip — compact tag row showing per-response cost, token count, and latency, with the model name right-aligned. Rides under an agent reply as a usage footer."
31
31
  data-chunk-keywords="agent cost tokens latency model usage inline strip tags price per-response footer telemetry llm" gap="2" align="center" padding="2" style="max-width: 560px;">
32
- <tag-ui icon="coins" size="sm">$0.014</tag-ui>
33
- <tag-ui icon="hash" size="sm">2,184 tok</tag-ui>
34
- <tag-ui icon="timer" size="sm">3.2s</tag-ui>
32
+ <tag-ui icon="coins">$0.014</tag-ui>
33
+ <tag-ui icon="hash">2,184 tok</tag-ui>
34
+ <tag-ui icon="timer">3.2s</tag-ui>
35
35
  <row-ui grow></row-ui>
36
36
  <text-ui color="subtle" size="sm">claude-opus-4-7</text-ui>
37
37
  </row-ui>
@@ -38,19 +38,19 @@
38
38
  <list-ui divider contained>
39
39
  <list-item-ui text="Prefers Kim over Kimberly">
40
40
  <span slot="description">From a chat on 2026-04-12</span>
41
- <tag-ui slot="action" size="sm">user</tag-ui>
41
+ <tag-ui slot="action">user</tag-ui>
42
42
  </list-item-ui>
43
43
  <list-item-ui text="Uses OKLCH tokens, never raw hex">
44
44
  <span slot="description">From the AdiaUI styleguide</span>
45
- <tag-ui slot="action" size="sm" variant="primary">workspace</tag-ui>
45
+ <tag-ui slot="action" variant="primary">workspace</tag-ui>
46
46
  </list-item-ui>
47
47
  <list-item-ui text="Browser baseline: Chromium 125+, Safari 18.0+">
48
48
  <span slot="description">From AGENTS.md</span>
49
- <tag-ui slot="action" size="sm" variant="primary">workspace</tag-ui>
49
+ <tag-ui slot="action" variant="primary">workspace</tag-ui>
50
50
  </list-item-ui>
51
51
  <list-item-ui text="Working on Group 1 of skill expansion">
52
52
  <span slot="description">Current session</span>
53
- <tag-ui slot="action" size="sm">session</tag-ui>
53
+ <tag-ui slot="action">session</tag-ui>
54
54
  </list-item-ui>
55
55
  </list-ui>
56
56
  </section>
@@ -41,15 +41,15 @@
41
41
  <button-ui icon="funnel" variant="ghost" size="sm"></button-ui>
42
42
  </row-ui>
43
43
  <row-ui gap="2">
44
- <tag-ui size="sm" variant="primary">All · 12</tag-ui>
45
- <tag-ui size="sm">Code review · 4</tag-ui>
46
- <tag-ui size="sm">Drafts · 3</tag-ui>
47
- <tag-ui size="sm">Research · 3</tag-ui>
48
- <tag-ui size="sm">Personal · 2</tag-ui>
44
+ <tag-ui variant="primary">All · 12</tag-ui>
45
+ <tag-ui>Code review · 4</tag-ui>
46
+ <tag-ui>Drafts · 3</tag-ui>
47
+ <tag-ui>Research · 3</tag-ui>
48
+ <tag-ui>Personal · 2</tag-ui>
49
49
  </row-ui>
50
50
  <grid-ui columns="2" gap="2">
51
51
  <card-ui compact>
52
- <header><span slot="heading">Code review</span><tag-ui slot="action" size="sm">Pinned</tag-ui></header>
52
+ <header><span slot="heading">Code review</span><tag-ui slot="action">Pinned</tag-ui></header>
53
53
  <section><text-ui color="subtle" size="sm">Review the diff for security, perf, and naming. Flag with file:line. Suggest fixes inline.</text-ui></section>
54
54
  </card-ui>
55
55
  <card-ui compact>
@@ -143,8 +143,8 @@
143
143
  <header>
144
144
  <span slot="heading" variant="section">Code review</span>
145
145
  <row-ui slot="action" gap="1">
146
- <tag-ui size="sm" variant="primary">Pinned</tag-ui>
147
- <tag-ui size="sm">Code review</tag-ui>
146
+ <tag-ui variant="primary">Pinned</tag-ui>
147
+ <tag-ui>Code review</tag-ui>
148
148
  </row-ui>
149
149
  </header>
150
150
  <section>
@@ -41,7 +41,7 @@
41
41
  <list-ui divider contained>
42
42
  <list-item-ui text="Q2 onboarding budget — $48,000">
43
43
  <avatar-ui slot="icon" size="sm" text="Jordan Lee"></avatar-ui>
44
- <span slot="description"><tag-ui size="sm" variant="warning">High</tag-ui> Jordan Lee · Engineering · 2 hours ago</span>
44
+ <span slot="description"><tag-ui variant="warning">High</tag-ui> Jordan Lee · Engineering · 2 hours ago</span>
45
45
  <row-ui slot="action" gap="2" align="center">
46
46
  <button-ui text="Reject" variant="ghost" size="sm"></button-ui>
47
47
  <button-ui text="Approve" variant="primary" size="sm" icon-leading="check"></button-ui>
@@ -57,7 +57,7 @@
57
57
  </list-item-ui>
58
58
  <list-item-ui text="Access request — production database">
59
59
  <avatar-ui slot="icon" size="sm" text="Sam Park"></avatar-ui>
60
- <span slot="description"><tag-ui size="sm" variant="warning">High</tag-ui> Sam Park · Data · 1 day ago</span>
60
+ <span slot="description"><tag-ui variant="warning">High</tag-ui> Sam Park · Data · 1 day ago</span>
61
61
  <row-ui slot="action" gap="2" align="center">
62
62
  <button-ui text="Reject" variant="ghost" size="sm"></button-ui>
63
63
  <button-ui text="Approve" variant="primary" size="sm" icon-leading="check"></button-ui>
@@ -52,7 +52,7 @@
52
52
  <!-- Whole "N selected" phrase as ONE text-ui's own textContent —
53
53
  NOT a nested <span data-bulk-count> + trailing " selected"
54
54
  text node (gh#1106). The site's HTML→A2UI build transpile
55
- (packages/a2ui/compose/transpiler/transpiler.js) defaults any
55
+ (packages/gen-ui/a2ui/compose/transpiler/transpiler.js) defaults any
56
56
  <span> to a block <p> AND reorders trailing loose text ahead
57
57
  of a preceding element child when both live inside a text-ui
58
58
  leaf — on the site route (not this standalone demo file) that
@@ -34,7 +34,7 @@
34
34
  <row-ui gap="2" align="baseline" justify="between">
35
35
  <row-ui gap="2" align="baseline">
36
36
  <text-ui strong size="lg">v2.3.0</text-ui>
37
- <tag-ui size="sm" variant="primary">Latest</tag-ui>
37
+ <tag-ui variant="primary">Latest</tag-ui>
38
38
  </row-ui>
39
39
  <text-ui color="subtle" size="sm">March 12, 2026</text-ui>
40
40
  </row-ui>
@@ -44,8 +44,8 @@
44
44
  </row-ui>
45
45
  <text-ui>Should the OKLCH ramp here use the chrome or the data scale? <text-ui color="accent">@Kim</text-ui> what's the convention?</text-ui>
46
46
  <row-ui gap="1">
47
- <tag-ui size="sm" icon-leading="thumbs-up">2</tag-ui>
48
- <tag-ui size="sm" icon-leading="eyes">1</tag-ui>
47
+ <tag-ui icon-leading="thumbs-up">2</tag-ui>
48
+ <tag-ui icon-leading="eyes">1</tag-ui>
49
49
  <button-ui text="Reply" variant="ghost" size="sm"></button-ui>
50
50
  </row-ui>
51
51
  </col-ui>
@@ -59,7 +59,7 @@
59
59
  </row-ui>
60
60
  <text-ui>Chrome — the data scale is reserved for visualization series. Spec at <text-ui color="accent">.claude/docs/specs/component-token-contract.md</text-ui>.</text-ui>
61
61
  <row-ui gap="1">
62
- <tag-ui size="sm" icon-leading="thumbs-up">3</tag-ui>
62
+ <tag-ui icon-leading="thumbs-up">3</tag-ui>
63
63
  <button-ui text="Reply" variant="ghost" size="sm"></button-ui>
64
64
  </row-ui>
65
65
  </col-ui>
@@ -174,10 +174,10 @@
174
174
  data-chunk-domain="content"
175
175
  data-chunk-description="Reactions bar — emoji reaction tags with counts (thumbs-up 4, party 2, eyes 1, rocket 1; own reaction highlighted) plus an add-reaction button. Rides under a comment or message."
176
176
  data-chunk-keywords="reactions emoji bar counts thumbs-up party add react message comment collaboration engagement" gap="1">
177
- <tag-ui size="sm">👍 4</tag-ui>
178
- <tag-ui size="sm" variant="primary">🎉 2</tag-ui>
179
- <tag-ui size="sm">👀 1</tag-ui>
180
- <tag-ui size="sm">🚀 1</tag-ui>
177
+ <tag-ui>👍 4</tag-ui>
178
+ <tag-ui variant="primary">🎉 2</tag-ui>
179
+ <tag-ui>👀 1</tag-ui>
180
+ <tag-ui>🚀 1</tag-ui>
181
181
  <button-ui icon="plus" variant="ghost" size="sm" aria-label="Add reaction"></button-ui>
182
182
  </row-ui>
183
183
  </div>
@@ -109,28 +109,28 @@
109
109
  <td><input-ui type="number" value="124" size="sm"></input-ui></td>
110
110
  <td><input-ui type="number" value="98" size="sm"></input-ui></td>
111
111
  <td><input-ui type="number" value="156" size="sm"></input-ui></td>
112
- <td><tag-ui size="sm" variant="default">clean</tag-ui></td>
112
+ <td><tag-ui variant="default">clean</tag-ui></td>
113
113
  </tr>
114
114
  <tr>
115
115
  <td><text-ui strong>Widget B</text-ui></td>
116
116
  <td><input-ui type="number" value="42" size="sm"></input-ui></td>
117
117
  <td><input-ui type="number" value="51" size="sm"></input-ui></td>
118
118
  <td><input-ui type="number" value="78" size="sm"></input-ui></td>
119
- <td><tag-ui size="sm" variant="warning">dirty</tag-ui></td>
119
+ <td><tag-ui variant="warning">dirty</tag-ui></td>
120
120
  </tr>
121
121
  <tr>
122
122
  <td><text-ui strong>Widget C</text-ui></td>
123
123
  <td><input-ui type="number" value="0" size="sm"></input-ui></td>
124
124
  <td><input-ui type="number" value="0" size="sm"></input-ui></td>
125
125
  <td><input-ui type="number" value="320" size="sm"></input-ui></td>
126
- <td><tag-ui size="sm" variant="warning">dirty</tag-ui></td>
126
+ <td><tag-ui variant="warning">dirty</tag-ui></td>
127
127
  </tr>
128
128
  <tr>
129
129
  <td><text-ui strong>Widget D</text-ui></td>
130
130
  <td><input-ui type="number" value="200" size="sm"></input-ui></td>
131
131
  <td><input-ui type="number" value="245" size="sm"></input-ui></td>
132
132
  <td><input-ui type="number" value="280" size="sm"></input-ui></td>
133
- <td><tag-ui size="sm" variant="default">clean</tag-ui></td>
133
+ <td><tag-ui variant="default">clean</tag-ui></td>
134
134
  </tr>
135
135
  </tbody>
136
136
  </table>
@@ -109,22 +109,22 @@
109
109
  <dt>Workspace name</dt>
110
110
  <dd>
111
111
  <row-ui gap="2" align="center">
112
- <tag-ui size="sm" variant="danger" icon-leading="minus">Adia</tag-ui>
113
- <tag-ui size="sm" variant="success" icon-leading="plus">Adia AI</tag-ui>
112
+ <tag-ui variant="danger" icon-leading="minus">Adia</tag-ui>
113
+ <tag-ui variant="success" icon-leading="plus">Adia AI</tag-ui>
114
114
  </row-ui>
115
115
  </dd>
116
116
  <dt>Default theme</dt>
117
117
  <dd>
118
118
  <row-ui gap="2" align="center">
119
- <tag-ui size="sm" variant="danger" icon-leading="minus">light</tag-ui>
120
- <tag-ui size="sm" variant="success" icon-leading="plus">auto</tag-ui>
119
+ <tag-ui variant="danger" icon-leading="minus">light</tag-ui>
120
+ <tag-ui variant="success" icon-leading="plus">auto</tag-ui>
121
121
  </row-ui>
122
122
  </dd>
123
123
  <dt>Member invites</dt>
124
124
  <dd>
125
125
  <row-ui gap="2" align="center">
126
- <tag-ui size="sm" variant="danger" icon-leading="minus">Admin only</tag-ui>
127
- <tag-ui size="sm" variant="success" icon-leading="plus">Anyone with link</tag-ui>
126
+ <tag-ui variant="danger" icon-leading="minus">Admin only</tag-ui>
127
+ <tag-ui variant="success" icon-leading="plus">Anyone with link</tag-ui>
128
128
  </row-ui>
129
129
  </dd>
130
130
  </description-list-ui>
@@ -28,9 +28,9 @@
28
28
  <section>
29
29
  <row-ui gap="2" align="center" wrap>
30
30
  <text-ui color="subtle" weight="semibold">Filters:</text-ui>
31
- <tag-ui text="Status: Active" removable size="sm" tone="muted"></tag-ui>
32
- <tag-ui text="Owner: Alex Chen" removable size="sm" tone="muted"></tag-ui>
33
- <tag-ui text="Updated: last 7 days" removable size="sm" tone="muted"></tag-ui>
31
+ <tag-ui text="Status: Active" removable tone="muted"></tag-ui>
32
+ <tag-ui text="Owner: Alex Chen" removable tone="muted"></tag-ui>
33
+ <tag-ui text="Updated: last 7 days" removable tone="muted"></tag-ui>
34
34
  <button-ui text="+ Add filter" variant="ghost" size="sm" popovertarget="pat-filter-menu"></button-ui>
35
35
  <span data-spacer></span>
36
36
  <button-ui text="Clear all" variant="ghost" size="sm"></button-ui>
@@ -58,8 +58,8 @@
58
58
  <section bleed>
59
59
  <toolbar-ui overflow="none" style="padding: var(--a-space-2) var(--a-space-3); border-block-end: 1px solid var(--md-sys-color-neutral-outline-variant); border-radius: 0;">
60
60
  <row-ui gap="2" align="center" grow>
61
- <tag-ui text="Status: Active" removable size="sm" tone="muted"></tag-ui>
62
- <tag-ui text="Owner: Alex" removable size="sm" tone="muted"></tag-ui>
61
+ <tag-ui text="Status: Active" removable tone="muted"></tag-ui>
62
+ <tag-ui text="Owner: Alex" removable tone="muted"></tag-ui>
63
63
  <button-ui text="+ Add filter" variant="ghost" size="sm"></button-ui>
64
64
  </row-ui>
65
65
  <search-ui placeholder="Search…" size="sm"></search-ui>
@@ -58,7 +58,7 @@
58
58
  data-chunk-description="Status-change popover — the current status tag is the trigger; the anchored card offers the status options with descriptions and an optional note field."
59
59
  data-chunk-keywords="inline dialog status change popover anchored tag trigger options workflow state transition note quick" placement="bottom-start">
60
60
  <button-ui slot="trigger" variant="outline" size="sm">
61
- <tag-ui slot="leading" size="sm" variant="warning">In review</tag-ui>
61
+ <tag-ui slot="leading" variant="warning">In review</tag-ui>
62
62
  <icon-ui slot="trailing" name="caret-down" size="sm"></icon-ui>
63
63
  </button-ui>
64
64
  <card-ui slot="content" style="min-width: 320px;">
@@ -41,7 +41,7 @@
41
41
  <text-ui strong>Ship the new auth flow</text-ui>
42
42
  <text-ui color="subtle" size="sm">Owner: Jordan · Due Friday</text-ui>
43
43
  </col-ui>
44
- <tag-ui size="sm" variant="warning">P0</tag-ui>
44
+ <tag-ui variant="warning">P0</tag-ui>
45
45
  </row-ui>
46
46
  </list-item-ui>
47
47
  <list-item-ui>
@@ -51,7 +51,7 @@
51
51
  <text-ui strong>Migrate dashboard tokens</text-ui>
52
52
  <text-ui color="subtle" size="sm">Owner: Avery · Due next week</text-ui>
53
53
  </col-ui>
54
- <tag-ui size="sm">P1</tag-ui>
54
+ <tag-ui>P1</tag-ui>
55
55
  </row-ui>
56
56
  </list-item-ui>
57
57
  <list-item-ui>
@@ -61,7 +61,7 @@
61
61
  <text-ui strong>Add Storybook coverage for primitives</text-ui>
62
62
  <text-ui color="subtle" size="sm">Owner: Sam · No due date</text-ui>
63
63
  </col-ui>
64
- <tag-ui size="sm">P2</tag-ui>
64
+ <tag-ui>P2</tag-ui>
65
65
  </row-ui>
66
66
  </list-item-ui>
67
67
  <list-item-ui>
@@ -71,7 +71,7 @@
71
71
  <text-ui strong>Investigate slow startup</text-ui>
72
72
  <text-ui color="subtle" size="sm">Owner: Riley · Backlog</text-ui>
73
73
  </col-ui>
74
- <tag-ui size="sm">P2</tag-ui>
74
+ <tag-ui>P2</tag-ui>
75
75
  </row-ui>
76
76
  </list-item-ui>
77
77
  </list-ui>
@@ -99,7 +99,7 @@
99
99
  <text-ui strong>Audit kanban accessibility</text-ui>
100
100
  <row-ui gap="2" align="center" style="margin-top: 0.5rem;">
101
101
  <avatar-ui size="sm" text="Sam Park"></avatar-ui>
102
- <tag-ui size="sm">P1</tag-ui>
102
+ <tag-ui>P1</tag-ui>
103
103
  </row-ui>
104
104
  </section>
105
105
  </card-ui>
@@ -108,7 +108,7 @@
108
108
  <text-ui strong>Drag handle hit-target</text-ui>
109
109
  <row-ui gap="2" align="center" style="margin-top: 0.5rem;">
110
110
  <avatar-ui size="sm" text="Avery Chen"></avatar-ui>
111
- <tag-ui size="sm">P2</tag-ui>
111
+ <tag-ui>P2</tag-ui>
112
112
  </row-ui>
113
113
  </section>
114
114
  </card-ui>
@@ -117,7 +117,7 @@
117
117
  <text-ui strong>Empty-column copy</text-ui>
118
118
  <row-ui gap="2" align="center" style="margin-top: 0.5rem;">
119
119
  <avatar-ui size="sm" text="Jordan Lee"></avatar-ui>
120
- <tag-ui size="sm">P2</tag-ui>
120
+ <tag-ui>P2</tag-ui>
121
121
  </row-ui>
122
122
  </section>
123
123
  </card-ui>
@@ -136,7 +136,7 @@
136
136
  <text-ui strong>Auth flow rebuild</text-ui>
137
137
  <row-ui gap="2" align="center" style="margin-top: 0.5rem;">
138
138
  <avatar-ui size="sm" text="Jordan Lee"></avatar-ui>
139
- <tag-ui size="sm" variant="warning">P0</tag-ui>
139
+ <tag-ui variant="warning">P0</tag-ui>
140
140
  </row-ui>
141
141
  </section>
142
142
  </card-ui>
@@ -145,7 +145,7 @@
145
145
  <text-ui strong>OKLCH ramp lint rule</text-ui>
146
146
  <row-ui gap="2" align="center" style="margin-top: 0.5rem;">
147
147
  <avatar-ui size="sm" text="Kim Granlund"></avatar-ui>
148
- <tag-ui size="sm">P1</tag-ui>
148
+ <tag-ui>P1</tag-ui>
149
149
  </row-ui>
150
150
  </section>
151
151
  </card-ui>
@@ -164,7 +164,7 @@
164
164
  <text-ui strong>v0.0.27 release notes</text-ui>
165
165
  <row-ui gap="2" align="center" style="margin-top: 0.5rem;">
166
166
  <avatar-ui size="sm" text="Riley Tan"></avatar-ui>
167
- <tag-ui size="sm">P1</tag-ui>
167
+ <tag-ui>P1</tag-ui>
168
168
  </row-ui>
169
169
  </section>
170
170
  </card-ui>
@@ -183,7 +183,7 @@
183
183
  <text-ui strong color="subtle"><s>Safari @scope sweep</s></text-ui>
184
184
  <row-ui gap="2" align="center" style="margin-top: 0.5rem;">
185
185
  <avatar-ui size="sm" text="Kim Granlund"></avatar-ui>
186
- <tag-ui size="sm" variant="success">Done</tag-ui>
186
+ <tag-ui variant="success">Done</tag-ui>
187
187
  </row-ui>
188
188
  </section>
189
189
  </card-ui>
@@ -192,7 +192,7 @@
192
192
  <text-ui strong color="subtle"><s>Toast top-layer channel</s></text-ui>
193
193
  <row-ui gap="2" align="center" style="margin-top: 0.5rem;">
194
194
  <avatar-ui size="sm" text="Sam Park"></avatar-ui>
195
- <tag-ui size="sm" variant="success">Done</tag-ui>
195
+ <tag-ui variant="success">Done</tag-ui>
196
196
  </row-ui>
197
197
  </section>
198
198
  </card-ui>
@@ -190,19 +190,19 @@
190
190
  <div data-artifact-item data-artifact-label="center">
191
191
  <stack-ui data-chunk="layout-stack-center" align="center">
192
192
  <avatar-ui text="AB" size="lg"></avatar-ui>
193
- <badge-ui text="3" size="sm" variant="danger"></badge-ui>
193
+ <badge-ui text="3" variant="danger"></badge-ui>
194
194
  </stack-ui>
195
195
  </div>
196
196
  <div data-artifact-item data-artifact-label="top-right">
197
197
  <stack-ui data-chunk="layout-stack-top-right" align="top-right">
198
198
  <avatar-ui text="AB" size="lg"></avatar-ui>
199
- <badge-ui text="3" size="sm" variant="danger"></badge-ui>
199
+ <badge-ui text="3" variant="danger"></badge-ui>
200
200
  </stack-ui>
201
201
  </div>
202
202
  <div data-artifact-item data-artifact-label="bottom-left">
203
203
  <stack-ui data-chunk="layout-stack-bottom-left" align="bottom-left">
204
204
  <avatar-ui text="AB" size="lg"></avatar-ui>
205
- <badge-ui text="3" size="sm" variant="danger"></badge-ui>
205
+ <badge-ui text="3" variant="danger"></badge-ui>
206
206
  </stack-ui>
207
207
  </div>
208
208
  </div>
@@ -31,7 +31,7 @@
31
31
  data-chunk-keywords="hero cta centered headline display deck subhead get-started buttons landing marketing banner launch" raw>
32
32
  <section bleed>
33
33
  <col-ui gap="3" align="center" padding="10">
34
- <tag-ui size="sm" variant="default">v0.0.27 — out today</tag-ui>
34
+ <tag-ui variant="default">v0.0.27 — out today</tag-ui>
35
35
  <text-ui variant="display" strong>Generative UI, deterministically.</text-ui>
36
36
  <text-ui variant="deck" color="subtle">AdiaUI emits A2UI JSON the runtime renders into Light-DOM web components. No model, no surprise.</text-ui>
37
37
  <row-ui gap="2">
@@ -57,7 +57,7 @@
57
57
  <section bleed>
58
58
  <grid-ui columns="2" gap="6" align="center" padding="8">
59
59
  <col-ui gap="4" align="start">
60
- <tag-ui size="sm" variant="default">For teams</tag-ui>
60
+ <tag-ui variant="default">For teams</tag-ui>
61
61
  <text-ui variant="display" strong>Ship UI as fast as your model thinks.</text-ui>
62
62
  <text-ui variant="deck" color="subtle">A2UI is a typed JSON protocol your agent emits and the runtime renders. No React rebuild for every prompt.</text-ui>
63
63
  <row-ui gap="2">
@@ -139,22 +139,22 @@
139
139
  <list-item-ui text="Avery Chen">
140
140
  <avatar-ui slot="icon" size="sm" text="Avery Chen"></avatar-ui>
141
141
  <span slot="description">avery@example.com · 5 days ago</span>
142
- <tag-ui slot="action" size="sm" variant="success">Verified · $10</tag-ui>
142
+ <tag-ui slot="action" variant="success">Verified · $10</tag-ui>
143
143
  </list-item-ui>
144
144
  <list-item-ui text="Jordan Lee">
145
145
  <avatar-ui slot="icon" size="sm" text="Jordan Lee"></avatar-ui>
146
146
  <span slot="description">jordan@example.com · 2 weeks ago</span>
147
- <tag-ui slot="action" size="sm" variant="success">Verified · $10</tag-ui>
147
+ <tag-ui slot="action" variant="success">Verified · $10</tag-ui>
148
148
  </list-item-ui>
149
149
  <list-item-ui text="Sam Park">
150
150
  <avatar-ui slot="icon" size="sm" text="Sam Park"></avatar-ui>
151
151
  <span slot="description">sam@example.com · 3 weeks ago</span>
152
- <tag-ui slot="action" size="sm">Joined</tag-ui>
152
+ <tag-ui slot="action">Joined</tag-ui>
153
153
  </list-item-ui>
154
154
  <list-item-ui text="riley@example.com">
155
155
  <avatar-ui slot="icon" size="sm" text="riley@example.com"></avatar-ui>
156
156
  <span slot="description">Sent 1 month ago</span>
157
- <tag-ui slot="action" size="sm" variant="default">Pending</tag-ui>
157
+ <tag-ui slot="action" variant="default">Pending</tag-ui>
158
158
  </list-item-ui>
159
159
  </list-ui>
160
160
  </col-ui>
@@ -185,7 +185,7 @@
185
185
  <text-ui variant="display">🚀</text-ui>
186
186
  <text-ui strong>First launch</text-ui>
187
187
  <text-ui variant="caption" color="subtle">Shipped your first prompt</text-ui>
188
- <tag-ui size="sm" variant="success">Apr 12</tag-ui>
188
+ <tag-ui variant="success">Apr 12</tag-ui>
189
189
  </col-ui>
190
190
  </section>
191
191
  </card-ui>
@@ -195,7 +195,7 @@
195
195
  <text-ui variant="display">🔥</text-ui>
196
196
  <text-ui strong>7-day streak</text-ui>
197
197
  <text-ui variant="caption" color="subtle">A week of daily use</text-ui>
198
- <tag-ui size="sm" variant="success">Apr 19</tag-ui>
198
+ <tag-ui variant="success">Apr 19</tag-ui>
199
199
  </col-ui>
200
200
  </section>
201
201
  </card-ui>
@@ -205,7 +205,7 @@
205
205
  <text-ui variant="display">🎨</text-ui>
206
206
  <text-ui strong>Theme artist</text-ui>
207
207
  <text-ui variant="caption" color="subtle">Created 3 custom themes</text-ui>
208
- <tag-ui size="sm" variant="success">Apr 22</tag-ui>
208
+ <tag-ui variant="success">Apr 22</tag-ui>
209
209
  </col-ui>
210
210
  </section>
211
211
  </card-ui>
@@ -215,7 +215,7 @@
215
215
  <text-ui variant="display" color="subtle">🏗️</text-ui>
216
216
  <text-ui color="subtle" strong>Builder</text-ui>
217
217
  <text-ui variant="caption" color="subtle">Ship 10 prompts</text-ui>
218
- <tag-ui size="sm" variant="default">7 of 10</tag-ui>
218
+ <tag-ui variant="default">7 of 10</tag-ui>
219
219
  </col-ui>
220
220
  </section>
221
221
  </card-ui>
@@ -225,7 +225,7 @@
225
225
  <text-ui variant="display" color="subtle">🌟</text-ui>
226
226
  <text-ui color="subtle" strong>30-day streak</text-ui>
227
227
  <text-ui variant="caption" color="subtle">A month of daily use</text-ui>
228
- <tag-ui size="sm" variant="default">12 of 30</tag-ui>
228
+ <tag-ui variant="default">12 of 30</tag-ui>
229
229
  </col-ui>
230
230
  </section>
231
231
  </card-ui>
@@ -235,7 +235,7 @@
235
235
  <text-ui variant="display" color="subtle">🤝</text-ui>
236
236
  <text-ui color="subtle" strong>Connector</text-ui>
237
237
  <text-ui variant="caption" color="subtle">Refer 5 friends</text-ui>
238
- <tag-ui size="sm" variant="default">3 of 5</tag-ui>
238
+ <tag-ui variant="default">3 of 5</tag-ui>
239
239
  </col-ui>
240
240
  </section>
241
241
  </card-ui>
@@ -258,7 +258,7 @@
258
258
  <section>
259
259
  <col-ui gap="3" align="center" padding="6">
260
260
  <text-ui variant="display">🔥</text-ui>
261
- <tag-ui size="sm" variant="primary">Achievement unlocked</tag-ui>
261
+ <tag-ui variant="primary">Achievement unlocked</tag-ui>
262
262
  <text-ui variant="display" strong>7-day streak</text-ui>
263
263
  <text-ui color="subtle">A full week of daily use. You've shipped 14 prompts and 23 chunks since you started.</text-ui>
264
264
  </col-ui>
@@ -64,7 +64,7 @@
64
64
  <header>
65
65
  <row-ui slot="heading" align="center" gap="2">
66
66
  <text-ui strong>Notifications</text-ui>
67
- <tag-ui size="sm" variant="primary">3 new</tag-ui>
67
+ <tag-ui variant="primary">3 new</tag-ui>
68
68
  </row-ui>
69
69
  </header>
70
70
  <section>
@@ -55,7 +55,7 @@
55
55
  <header>
56
56
  <span slot="heading" variant="section">Admin</span>
57
57
  <text-ui slot="description" color="subtle">Built-in role · 3 members</text-ui>
58
- <tag-ui slot="action" variant="primary" size="sm">Built-in</tag-ui>
58
+ <tag-ui slot="action" variant="primary">Built-in</tag-ui>
59
59
  </header>
60
60
  <section>
61
61
  <description-list-ui>
@@ -32,7 +32,7 @@
32
32
  <option-card-ui name="role" value="viewer" heading="Viewer" description="Can read everything; cannot edit, comment, or share."></option-card-ui>
33
33
  <option-card-ui name="role" value="member" heading="Member" description="Can edit content they own and comment on anything." checked></option-card-ui>
34
34
  <option-card-ui name="role" value="admin" description="Can manage members, billing, and integrations.">
35
- <span slot="heading">Admin <tag-ui size="sm">Recommended for leads</tag-ui></span>
35
+ <span slot="heading">Admin <tag-ui>Recommended for leads</tag-ui></span>
36
36
  </option-card-ui>
37
37
  <option-card-ui name="role" value="owner" heading="Owner" description="Admin powers plus the ability to delete the workspace."></option-card-ui>
38
38
  </col-ui>