@adia-ai/gen-ui 0.8.43 → 0.8.44
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/CHANGELOG.md +5 -0
- package/corpus/chunk-embeddings.json +1 -1
- package/corpus/chunks/_index.json +226 -5
- package/corpus/chunks/_source-hashes.json +56 -55
- package/corpus/chunks/access-denied-with-request.json +3 -2
- package/corpus/chunks/achievement-unlock.json +3 -2
- package/corpus/chunks/agent-canvas-shell.json +3 -3
- package/corpus/chunks/agent-cost-detailed.json +5 -2
- package/corpus/chunks/agent-cost-inline.json +2 -2
- package/corpus/chunks/agent-memory-detail.json +4 -2
- package/corpus/chunks/agent-memory-list.json +3 -2
- package/corpus/chunks/agent-prompt-card.json +5 -2
- package/corpus/chunks/agent-prompt-library-grid.json +7 -2
- package/corpus/chunks/agent-tool-call-result.json +2 -2
- package/corpus/chunks/agent-tool-call-running.json +2 -2
- package/corpus/chunks/anchor-bar-selection-bar.json +2 -2
- package/corpus/chunks/api-keys-create.json +4 -3
- package/corpus/chunks/api-keys-list.json +5 -4
- package/corpus/chunks/approvals-detail.json +3 -2
- package/corpus/chunks/approvals-queue.json +7 -2
- package/corpus/chunks/audit-log-basic.json +3 -2
- package/corpus/chunks/auth-card-content.json +5 -5
- package/corpus/chunks/auth-mfa-recovery.json +3 -2
- package/corpus/chunks/auth-new-password-form.json +3 -2
- package/corpus/chunks/auth-new-password.json +2 -1
- package/corpus/chunks/auth-profile-form.json +4 -2
- package/corpus/chunks/auth-profile-setup.json +3 -1
- package/corpus/chunks/auth-signin-card-otp.json +2 -2
- package/corpus/chunks/auth-signin-card-recovery.json +2 -1
- package/corpus/chunks/auth-team-invite.json +2 -1
- package/corpus/chunks/bulk-action-toolbar-floating.json +2 -2
- package/corpus/chunks/card-with-sparkline.json +2 -2
- package/corpus/chunks/chart-in-card-full-bleed-bar-tall.json +66 -0
- package/corpus/chunks/chart-in-card-full-bleed-bar-wide.json +65 -0
- package/corpus/chunks/chart-in-card-full-bleed-legend-composed-square.json +110 -0
- package/corpus/chunks/chart-in-card-full-bleed-legend-grouped-tall.json +111 -0
- package/corpus/chunks/chart-in-card-full-bleed-legend-stacked-wide.json +110 -0
- package/corpus/chunks/chart-in-card-full-bleed-line-square.json +66 -0
- package/corpus/chunks/comments-thread.json +3 -2
- package/corpus/chunks/dashboard-acquisition-panel.json +1 -1
- package/corpus/chunks/dashboard-admin-page.json +1 -1
- package/corpus/chunks/dashboard-chart-recent.json +1 -1
- package/corpus/chunks/dashboard-overview-panel.json +1 -1
- package/corpus/chunks/dashboard-traffic-channels.json +1 -1
- package/corpus/chunks/data-export-history.json +3 -2
- package/corpus/chunks/diff-structured.json +2 -2
- package/corpus/chunks/digest-email-preview.json +3 -2
- package/corpus/chunks/export-flow-delivery.json +3 -2
- package/corpus/chunks/export-flow-sync.json +3 -2
- package/corpus/chunks/filter-bar-active-filters.json +2 -2
- package/corpus/chunks/forms-address-autocomplete.json +3 -2
- package/corpus/chunks/forms-address-fields.json +3 -2
- package/corpus/chunks/gallery-page-shell.json +5 -4
- package/corpus/chunks/hero-section-split.json +2 -2
- package/corpus/chunks/inline-dialog-rename.json +3 -2
- package/corpus/chunks/inline-dialog-schedule.json +3 -2
- package/corpus/chunks/integrations-grid.json +6 -2
- package/corpus/chunks/kanban-page-shell.json +5 -4
- package/corpus/chunks/map-with-location-list.json +1 -1
- package/corpus/chunks/patient-visit-shell.json +3 -2
- package/corpus/chunks/permissions-matrix-grid.json +3 -2
- package/corpus/chunks/permissions-share-link.json +4 -2
- package/corpus/chunks/playground-agent-admin.json +11 -3
- package/corpus/chunks/profile-public.json +3 -2
- package/corpus/chunks/reactions-picker.json +4 -3
- package/corpus/chunks/referral-share-link.json +5 -2
- package/corpus/chunks/reg-brand-scrape.json +3 -3
- package/corpus/chunks/reg-final-done.json +5 -5
- package/corpus/chunks/reg-step-footer.json +5 -5
- package/corpus/chunks/reg-success-summary.json +5 -5
- package/corpus/chunks/revenue-heatmap.json +2 -1
- package/corpus/chunks/search-recents-menu.json +3 -2
- package/corpus/chunks/search-saved-views.json +3 -2
- package/corpus/chunks/sidebar-nav.json +3 -2
- package/corpus/chunks/table-inline-edit-row.json +3 -2
- package/corpus/chunks/table-spreadsheet-cells.json +3 -2
- package/corpus/chunks/table-toolbar-adiav2-row.json +28 -5
- package/corpus/chunks/table-toolbar-chrome-only-empty.json +183 -0
- package/corpus/chunks/url-import-form.json +2 -2
- package/corpus/chunks/webhooks-list.json +3 -2
- package/corpus/manifest.json +3 -3
- package/package.json +1 -1
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"slots": [],
|
|
7
7
|
"nested": [],
|
|
8
8
|
"attrs": {},
|
|
9
|
-
"html": "<card-ui >\n <section>\n <col-ui gap=\"3\" align=\"center\" padding=\"6\">\n <text-ui variant=\"display\">🔥</text-ui>\n <tag-ui variant=\"primary\">Achievement unlocked</tag-ui>\n <text-ui variant=\"display\" strong>7-day streak</text-ui>\n <text-ui color=\"subtle\">A full week of daily use. You've shipped 14 prompts and 23 chunks since you started.</text-ui>\n </col-ui>\n </section>\n <footer divider>\n <button-ui slot=\"action\" text=\"Keep going\" variant=\"ghost\"></button-ui>\n <button-ui slot=\"action\" text=\"Share\" variant=\"primary\" icon
|
|
9
|
+
"html": "<card-ui >\n <section>\n <col-ui gap=\"3\" align=\"center\" padding=\"6\">\n <text-ui variant=\"display\">🔥</text-ui>\n <tag-ui variant=\"primary\">Achievement unlocked</tag-ui>\n <text-ui variant=\"display\" strong>7-day streak</text-ui>\n <text-ui color=\"subtle\">A full week of daily use. You've shipped 14 prompts and 23 chunks since you started.</text-ui>\n </col-ui>\n </section>\n <footer divider>\n <button-ui slot=\"action\" text=\"Keep going\" variant=\"ghost\"></button-ui>\n <button-ui slot=\"action\" text=\"Share\" variant=\"primary\" icon=\"share-network\"></button-ui>\n </footer>\n </card-ui>",
|
|
10
10
|
"source": "packages/web-components/patterns/marketing-engagement/marketing-engagement.examples.html",
|
|
11
11
|
"metadata": {
|
|
12
12
|
"domain": "marketing",
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"moment"
|
|
25
25
|
]
|
|
26
26
|
},
|
|
27
|
-
"captured_at": "2026-08-
|
|
27
|
+
"captured_at": "2026-08-19T03:56:11.704Z",
|
|
28
28
|
"template": [
|
|
29
29
|
{
|
|
30
30
|
"id": "text",
|
|
@@ -81,6 +81,7 @@
|
|
|
81
81
|
"id": "button-2",
|
|
82
82
|
"component": "Button",
|
|
83
83
|
"slot": "action",
|
|
84
|
+
"icon": "share-network",
|
|
84
85
|
"text": "Share",
|
|
85
86
|
"variant": "primary"
|
|
86
87
|
},
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
{
|
|
8
8
|
"name": "toolbar",
|
|
9
9
|
"tagName": "header",
|
|
10
|
-
"html": "<row-ui gap=\"2\" align=\"center\">\n <button-ui icon=\"hand\" variant=\"ghost\" size=\"sm\"
|
|
10
|
+
"html": "<row-ui gap=\"2\" align=\"center\">\n <button-ui icon=\"hand\" variant=\"ghost\" size=\"sm\" title=\"Pan\"></button-ui>\n <button-ui icon=\"cursor\" variant=\"ghost\" size=\"sm\" title=\"Select\"></button-ui>\n <separator-ui orientation=\"vertical\"></separator-ui>\n <button-ui icon=\"plus\" variant=\"ghost\" size=\"sm\" title=\"Add node\"></button-ui>\n <button-ui icon=\"trash\" variant=\"ghost\" size=\"sm\" title=\"Delete\"></button-ui>\n </row-ui>\n <row-ui gap=\"2\">\n <button-ui text=\"Run\" variant=\"primary\" size=\"sm\" icon=\"play\"></button-ui>\n <button-ui text=\"Export\" variant=\"outline\" size=\"sm\" icon=\"download\"></button-ui>\n </row-ui>"
|
|
11
11
|
},
|
|
12
12
|
{
|
|
13
13
|
"name": "canvas",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
],
|
|
28
28
|
"nested": [],
|
|
29
29
|
"attrs": {},
|
|
30
|
-
"html": "<article style=\"display:flex; height:100vh;\">\n <section style=\"flex:1; display:flex; flex-direction:column; min-width:0;\">\n <header data-chunk-slot=\"toolbar\" style=\"padding:var(--a-space-2) var(--a-space-3); border-bottom:1px solid var(--md-sys-color-neutral-outline-variant); display:flex; align-items:center; justify-content:space-between;\">\n <row-ui gap=\"2\" align=\"center\">\n <button-ui icon=\"hand\" variant=\"ghost\" size=\"sm\"
|
|
30
|
+
"html": "<article style=\"display:flex; height:100vh;\">\n <section style=\"flex:1; display:flex; flex-direction:column; min-width:0;\">\n <header data-chunk-slot=\"toolbar\" style=\"padding:var(--a-space-2) var(--a-space-3); border-bottom:1px solid var(--md-sys-color-neutral-outline-variant); display:flex; align-items:center; justify-content:space-between;\">\n <row-ui gap=\"2\" align=\"center\">\n <button-ui icon=\"hand\" variant=\"ghost\" size=\"sm\" title=\"Pan\"></button-ui>\n <button-ui icon=\"cursor\" variant=\"ghost\" size=\"sm\" title=\"Select\"></button-ui>\n <separator-ui orientation=\"vertical\"></separator-ui>\n <button-ui icon=\"plus\" variant=\"ghost\" size=\"sm\" title=\"Add node\"></button-ui>\n <button-ui icon=\"trash\" variant=\"ghost\" size=\"sm\" title=\"Delete\"></button-ui>\n </row-ui>\n <row-ui gap=\"2\">\n <button-ui text=\"Run\" variant=\"primary\" size=\"sm\" icon=\"play\"></button-ui>\n <button-ui text=\"Export\" variant=\"outline\" size=\"sm\" icon=\"download\"></button-ui>\n </row-ui>\n </header>\n\n <section data-chunk-slot=\"canvas\" style=\"flex:1; background:var(--a-bg-subtle); position:relative; overflow:hidden;\">\n <text-ui color=\"subtle\" style=\"position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);\">Canvas surface</text-ui>\n </section>\n </section>\n\n <aside style=\"width:280px; display:flex; flex-direction:column; border-left:1px solid var(--md-sys-color-neutral-outline-variant);\">\n <section data-chunk-slot=\"inspector\" style=\"flex:1; overflow:auto; padding:var(--a-space-3); border-bottom:1px solid var(--md-sys-color-neutral-outline-variant);\">\n <stack-ui gap=\"3\">\n <text-ui strong size=\"lg\">Inspector</text-ui>\n <stack-ui gap=\"1\">\n <label-ui>Label</label-ui>\n <input-ui value=\"Untitled node\"></input-ui>\n </stack-ui>\n <stack-ui gap=\"1\">\n <label-ui>Type</label-ui>\n <select-ui>\n <option>LLM</option>\n <option>Tool</option>\n <option>Condition</option>\n </select-ui>\n </stack-ui>\n </stack-ui>\n </section>\n\n <section data-chunk-slot=\"chat\" style=\"height:240px; display:flex; flex-direction:column;\">\n <header style=\"padding:var(--a-space-2) var(--a-space-3); border-bottom:1px solid var(--md-sys-color-neutral-outline-variant);\">\n <text-ui strong size=\"sm\">Agent</text-ui>\n </header>\n <section style=\"flex:1; overflow:auto; padding:var(--a-space-2);\">\n <text-ui size=\"sm\" color=\"subtle\">Agent messages will appear here.</text-ui>\n </section>\n <footer style=\"padding:var(--a-space-2); border-top:1px solid var(--md-sys-color-neutral-outline-variant);\">\n <input-ui placeholder=\"Ask the agent…\" size=\"sm\"></input-ui>\n </footer>\n </section>\n </aside>\n</article>",
|
|
31
31
|
"source": "catalog/page-shells/app/agent-canvas/agent-canvas.contents.html",
|
|
32
32
|
"metadata": {
|
|
33
33
|
"domain": "agent",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"inspector"
|
|
44
44
|
]
|
|
45
45
|
},
|
|
46
|
-
"captured_at": "2026-
|
|
46
|
+
"captured_at": "2026-08-19T03:56:11.704Z",
|
|
47
47
|
"template": [
|
|
48
48
|
{
|
|
49
49
|
"id": "button",
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"slots": [],
|
|
7
7
|
"nested": [],
|
|
8
8
|
"attrs": {},
|
|
9
|
-
"html": "<card-ui style=\"max-width: 560px;\">\n <header>\n <span slot=\"heading\" variant=\"section\">Today's usage</span>\n <text-ui slot=\"description\" color=\"subtle\">Apr 29 · across all sessions</text-ui>\n </header>\n <section>\n <col-ui gap=\"3\">\n <grid-ui columns=\"3\" gap=\"2\">\n <stat-ui label=\"Cost\" value=\"$2.41\" trend=\"up\"
|
|
9
|
+
"html": "<card-ui style=\"max-width: 560px;\">\n <header>\n <span slot=\"heading\" variant=\"section\">Today's usage</span>\n <text-ui slot=\"description\" color=\"subtle\">Apr 29 · across all sessions</text-ui>\n </header>\n <section>\n <col-ui gap=\"3\">\n <grid-ui columns=\"3\" gap=\"2\">\n <stat-ui label=\"Cost\" value=\"$2.41\" trend=\"up\" change=\"+18%\"></stat-ui>\n <stat-ui label=\"Tokens\" value=\"184k\" trend=\"up\" change=\"+12%\"></stat-ui>\n <stat-ui label=\"Calls\" value=\"47\" trend=\"flat\"></stat-ui>\n </grid-ui>\n <description-list-ui layout=\"inline\" align=\"between\">\n <dt>Input tokens</dt><dd>142,108 · $0.43</dd>\n <dt>Output tokens</dt><dd>38,294 · $1.72</dd>\n <dt>Cache reads</dt><dd>3,841 · $0.01</dd>\n <dt>Cache writes</dt><dd>1,267 · $0.25</dd>\n </description-list-ui>\n </col-ui>\n </section>\n <footer divider>\n <text-ui slot=\"description\" color=\"subtle\" size=\"sm\">Plan limit: 1M tokens / day</text-ui>\n <button-ui slot=\"action\" text=\"View invoice\" variant=\"ghost\" size=\"sm\" icon=\"receipt\"></button-ui>\n </footer>\n </card-ui>",
|
|
10
10
|
"source": "packages/web-components/patterns/agent-cost/agent-cost.examples.html",
|
|
11
11
|
"metadata": {
|
|
12
12
|
"domain": "agent",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"metering"
|
|
32
32
|
]
|
|
33
33
|
},
|
|
34
|
-
"captured_at": "2026-08-
|
|
34
|
+
"captured_at": "2026-08-19T03:56:11.704Z",
|
|
35
35
|
"template": [
|
|
36
36
|
{
|
|
37
37
|
"id": "text",
|
|
@@ -58,6 +58,7 @@
|
|
|
58
58
|
{
|
|
59
59
|
"id": "stat",
|
|
60
60
|
"component": "Stat",
|
|
61
|
+
"change": "+18%",
|
|
61
62
|
"label": "Cost",
|
|
62
63
|
"trend": "up",
|
|
63
64
|
"value": "$2.41"
|
|
@@ -65,6 +66,7 @@
|
|
|
65
66
|
{
|
|
66
67
|
"id": "stat-2",
|
|
67
68
|
"component": "Stat",
|
|
69
|
+
"change": "+12%",
|
|
68
70
|
"label": "Tokens",
|
|
69
71
|
"trend": "up",
|
|
70
72
|
"value": "184k"
|
|
@@ -235,6 +237,7 @@
|
|
|
235
237
|
"id": "button",
|
|
236
238
|
"component": "Button",
|
|
237
239
|
"slot": "action",
|
|
240
|
+
"icon": "receipt",
|
|
238
241
|
"size": "sm",
|
|
239
242
|
"text": "View invoice",
|
|
240
243
|
"variant": "ghost"
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"align": "center",
|
|
11
11
|
"padding": "2"
|
|
12
12
|
},
|
|
13
|
-
"html": "<row-ui gap=\"2\" align=\"center\" padding=\"2\" style=\"max-width: 560px;\">\n <tag-ui
|
|
13
|
+
"html": "<row-ui gap=\"2\" align=\"center\" padding=\"2\" style=\"max-width: 560px;\">\n <tag-ui>$0.014</tag-ui>\n <tag-ui>2,184 tok</tag-ui>\n <tag-ui>3.2s</tag-ui>\n <row-ui grow></row-ui>\n <text-ui color=\"subtle\" size=\"sm\">claude-opus-4-7</text-ui>\n </row-ui>",
|
|
14
14
|
"source": "packages/web-components/patterns/agent-cost/agent-cost.examples.html",
|
|
15
15
|
"metadata": {
|
|
16
16
|
"domain": "agent",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"llm"
|
|
33
33
|
]
|
|
34
34
|
},
|
|
35
|
-
"captured_at": "2026-08-
|
|
35
|
+
"captured_at": "2026-08-19T03:56:11.704Z",
|
|
36
36
|
"template": [
|
|
37
37
|
{
|
|
38
38
|
"id": "tag",
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"slots": [],
|
|
7
7
|
"nested": [],
|
|
8
8
|
"attrs": {},
|
|
9
|
-
"html": "<card-ui style=\"max-width: 560px;\">\n <header>\n <span slot=\"heading\" variant=\"section\">Uses OKLCH tokens, never raw hex</span>\n <tag-ui slot=\"action\" variant=\"primary\">workspace</tag-ui>\n </header>\n <section>\n <col-ui gap=\"3\">\n <description-list-ui>\n <span slot=\"term\">Source</span>\n <span slot=\"description\">AdiaUI styleguide · component-token-contract.md</span>\n <span slot=\"term\">First seen</span>\n <span slot=\"description\">2026-03-14</span>\n <span slot=\"term\">Last referenced</span>\n <span slot=\"description\">2026-04-29 · 4 minutes ago</span>\n <span slot=\"term\">Times applied</span>\n <span slot=\"description\">142</span>\n </description-list-ui>\n <code-ui language=\"json\">{\n \"fact\": \"no raw hex / rgb / oklch in component CSS\",\n \"source\": \".claude/docs/specs/component-token-contract.md#tokens\",\n \"scope\": [\"packages/web-components/components/**/*.css\"],\n \"exceptions\": [\"styles/colors/semantics.css\", \"styles/tokens.css\"]\n}</code-ui>\n </col-ui>\n </section>\n <footer divider>\n <button-ui slot=\"action\" text=\"Delete\" variant=\"ghost\" color=\"danger\" size=\"sm\" icon
|
|
9
|
+
"html": "<card-ui style=\"max-width: 560px;\">\n <header>\n <span slot=\"heading\" variant=\"section\">Uses OKLCH tokens, never raw hex</span>\n <tag-ui slot=\"action\" variant=\"primary\">workspace</tag-ui>\n </header>\n <section>\n <col-ui gap=\"3\">\n <description-list-ui>\n <span slot=\"term\">Source</span>\n <span slot=\"description\">AdiaUI styleguide · component-token-contract.md</span>\n <span slot=\"term\">First seen</span>\n <span slot=\"description\">2026-03-14</span>\n <span slot=\"term\">Last referenced</span>\n <span slot=\"description\">2026-04-29 · 4 minutes ago</span>\n <span slot=\"term\">Times applied</span>\n <span slot=\"description\">142</span>\n </description-list-ui>\n <code-ui language=\"json\">{\n \"fact\": \"no raw hex / rgb / oklch in component CSS\",\n \"source\": \".claude/docs/specs/component-token-contract.md#tokens\",\n \"scope\": [\"packages/web-components/components/**/*.css\"],\n \"exceptions\": [\"styles/colors/semantics.css\", \"styles/tokens.css\"]\n}</code-ui>\n </col-ui>\n </section>\n <footer divider>\n <button-ui slot=\"action\" text=\"Delete\" variant=\"ghost\" color=\"danger\" size=\"sm\" icon=\"trash\"></button-ui>\n <button-ui slot=\"action\" text=\"Edit\" variant=\"outline\" size=\"sm\" icon=\"pencil\"></button-ui>\n </footer>\n </card-ui>",
|
|
10
10
|
"source": "packages/web-components/patterns/agent-memory/agent-memory.examples.html",
|
|
11
11
|
"metadata": {
|
|
12
12
|
"domain": "agent",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"inspect"
|
|
28
28
|
]
|
|
29
29
|
},
|
|
30
|
-
"captured_at": "2026-08-
|
|
30
|
+
"captured_at": "2026-08-19T03:56:11.704Z",
|
|
31
31
|
"template": [
|
|
32
32
|
{
|
|
33
33
|
"id": "text",
|
|
@@ -148,6 +148,7 @@
|
|
|
148
148
|
"component": "Button",
|
|
149
149
|
"slot": "action",
|
|
150
150
|
"color": "danger",
|
|
151
|
+
"icon": "trash",
|
|
151
152
|
"size": "sm",
|
|
152
153
|
"text": "Delete",
|
|
153
154
|
"variant": "ghost"
|
|
@@ -156,6 +157,7 @@
|
|
|
156
157
|
"id": "button-2",
|
|
157
158
|
"component": "Button",
|
|
158
159
|
"slot": "action",
|
|
160
|
+
"icon": "pencil",
|
|
159
161
|
"size": "sm",
|
|
160
162
|
"text": "Edit",
|
|
161
163
|
"variant": "outline"
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"slots": [],
|
|
7
7
|
"nested": [],
|
|
8
8
|
"attrs": {},
|
|
9
|
-
"html": "<card-ui style=\"max-width: 640px;\">\n <header>\n <span slot=\"heading\" variant=\"section\">Agent memory</span>\n <text-ui slot=\"description\" color=\"subtle\">14 entries across 3 sources</text-ui>\n <button-ui slot=\"action\" text=\"Add memory\" variant=\"ghost\" size=\"sm\" icon
|
|
9
|
+
"html": "<card-ui style=\"max-width: 640px;\">\n <header>\n <span slot=\"heading\" variant=\"section\">Agent memory</span>\n <text-ui slot=\"description\" color=\"subtle\">14 entries across 3 sources</text-ui>\n <button-ui slot=\"action\" text=\"Add memory\" variant=\"ghost\" size=\"sm\" icon=\"plus\"></button-ui>\n </header>\n <section bleed>\n <list-ui divider contained>\n <list-item-ui text=\"Prefers Kim over Kimberly\">\n <span slot=\"description\">From a chat on 2026-04-12</span>\n <tag-ui slot=\"action\">user</tag-ui>\n </list-item-ui>\n <list-item-ui text=\"Uses OKLCH tokens, never raw hex\">\n <span slot=\"description\">From the AdiaUI styleguide</span>\n <tag-ui slot=\"action\" variant=\"primary\">workspace</tag-ui>\n </list-item-ui>\n <list-item-ui text=\"Browser baseline: Chromium 125+, Safari 18.0+\">\n <span slot=\"description\">From AGENTS.md</span>\n <tag-ui slot=\"action\" variant=\"primary\">workspace</tag-ui>\n </list-item-ui>\n <list-item-ui text=\"Working on Group 1 of skill expansion\">\n <span slot=\"description\">Current session</span>\n <tag-ui slot=\"action\">session</tag-ui>\n </list-item-ui>\n </list-ui>\n </section>\n <footer divider>\n <text-ui slot=\"description\" color=\"subtle\" size=\"sm\">Workspace memory is shared with team members.</text-ui>\n </footer>\n </card-ui>",
|
|
10
10
|
"source": "packages/web-components/patterns/agent-memory/agent-memory.examples.html",
|
|
11
11
|
"metadata": {
|
|
12
12
|
"domain": "agent",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"context"
|
|
30
30
|
]
|
|
31
31
|
},
|
|
32
|
-
"captured_at": "2026-08-
|
|
32
|
+
"captured_at": "2026-08-19T03:56:11.704Z",
|
|
33
33
|
"template": [
|
|
34
34
|
{
|
|
35
35
|
"id": "text",
|
|
@@ -49,6 +49,7 @@
|
|
|
49
49
|
"id": "button",
|
|
50
50
|
"component": "Button",
|
|
51
51
|
"slot": "action",
|
|
52
|
+
"icon": "plus",
|
|
52
53
|
"size": "sm",
|
|
53
54
|
"text": "Add memory",
|
|
54
55
|
"variant": "ghost"
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"slots": [],
|
|
7
7
|
"nested": [],
|
|
8
8
|
"attrs": {},
|
|
9
|
-
"html": "<card-ui style=\"max-width: 560px;\">\n <header>\n <span slot=\"heading\" variant=\"section\">Code review</span>\n <row-ui slot=\"action\" gap=\"1\">\n <tag-ui variant=\"primary\">Pinned</tag-ui>\n <tag-ui>Code review</tag-ui>\n </row-ui>\n </header>\n <section>\n <col-ui gap=\"2\">\n <text-ui>Review the diff for security, perf, and naming. Flag issues with <code>file:line</code> citations. Suggest concrete fixes inline. Skip nitpicks unless asked.</text-ui>\n <description-list-ui>\n <span slot=\"term\">Last used</span>\n <span slot=\"description\">3 hours ago</span>\n <span slot=\"term\">Times run</span>\n <span slot=\"description\">28</span>\n </description-list-ui>\n </col-ui>\n </section>\n <footer divider>\n <button-ui slot=\"action\" text=\"Delete\" variant=\"ghost\" color=\"danger\" size=\"sm\" icon
|
|
9
|
+
"html": "<card-ui style=\"max-width: 560px;\">\n <header>\n <span slot=\"heading\" variant=\"section\">Code review</span>\n <row-ui slot=\"action\" gap=\"1\">\n <tag-ui variant=\"primary\">Pinned</tag-ui>\n <tag-ui>Code review</tag-ui>\n </row-ui>\n </header>\n <section>\n <col-ui gap=\"2\">\n <text-ui>Review the diff for security, perf, and naming. Flag issues with <code>file:line</code> citations. Suggest concrete fixes inline. Skip nitpicks unless asked.</text-ui>\n <description-list-ui>\n <span slot=\"term\">Last used</span>\n <span slot=\"description\">3 hours ago</span>\n <span slot=\"term\">Times run</span>\n <span slot=\"description\">28</span>\n </description-list-ui>\n </col-ui>\n </section>\n <footer divider>\n <button-ui slot=\"action\" text=\"Delete\" variant=\"ghost\" color=\"danger\" size=\"sm\" icon=\"trash\"></button-ui>\n <button-ui slot=\"action\" text=\"Edit\" variant=\"ghost\" size=\"sm\" icon=\"pencil\"></button-ui>\n <button-ui slot=\"action\" text=\"Run\" variant=\"primary\" size=\"sm\" icon=\"play\"></button-ui>\n </footer>\n </card-ui>",
|
|
10
10
|
"source": "packages/web-components/patterns/agent-prompt-library/agent-prompt-library.examples.html",
|
|
11
11
|
"metadata": {
|
|
12
12
|
"domain": "agent",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"run"
|
|
28
28
|
]
|
|
29
29
|
},
|
|
30
|
-
"captured_at": "2026-08-
|
|
30
|
+
"captured_at": "2026-08-19T03:56:11.704Z",
|
|
31
31
|
"template": [
|
|
32
32
|
{
|
|
33
33
|
"id": "text",
|
|
@@ -137,6 +137,7 @@
|
|
|
137
137
|
"component": "Button",
|
|
138
138
|
"slot": "action",
|
|
139
139
|
"color": "danger",
|
|
140
|
+
"icon": "trash",
|
|
140
141
|
"size": "sm",
|
|
141
142
|
"text": "Delete",
|
|
142
143
|
"variant": "ghost"
|
|
@@ -145,6 +146,7 @@
|
|
|
145
146
|
"id": "button-2",
|
|
146
147
|
"component": "Button",
|
|
147
148
|
"slot": "action",
|
|
149
|
+
"icon": "pencil",
|
|
148
150
|
"size": "sm",
|
|
149
151
|
"text": "Edit",
|
|
150
152
|
"variant": "ghost"
|
|
@@ -153,6 +155,7 @@
|
|
|
153
155
|
"id": "button-3",
|
|
154
156
|
"component": "Button",
|
|
155
157
|
"slot": "action",
|
|
158
|
+
"icon": "play",
|
|
156
159
|
"size": "sm",
|
|
157
160
|
"text": "Run",
|
|
158
161
|
"variant": "primary"
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"slots": [],
|
|
7
7
|
"nested": [],
|
|
8
8
|
"attrs": {},
|
|
9
|
-
"html": "<card-ui style=\"max-width: 720px;\">\n <header>\n <span slot=\"heading\" variant=\"section\">Prompt library</span>\n <text-ui slot=\"description\" color=\"subtle\">12 prompts · 4 categories</text-ui>\n <button-ui slot=\"action\" text=\"New prompt\" variant=\"primary\" size=\"sm\" icon
|
|
9
|
+
"html": "<card-ui style=\"max-width: 720px;\">\n <header>\n <span slot=\"heading\" variant=\"section\">Prompt library</span>\n <text-ui slot=\"description\" color=\"subtle\">12 prompts · 4 categories</text-ui>\n <button-ui slot=\"action\" text=\"New prompt\" variant=\"primary\" size=\"sm\" icon=\"plus\"></button-ui>\n </header>\n <section>\n <col-ui gap=\"3\">\n <row-ui gap=\"2\" align=\"center\">\n <search-ui size=\"sm\" placeholder=\"Search prompts\" style=\"flex: 1;\"></search-ui>\n <button-ui icon=\"funnel\" variant=\"ghost\" size=\"sm\"></button-ui>\n </row-ui>\n <row-ui gap=\"2\">\n <tag-ui variant=\"primary\">All · 12</tag-ui>\n <tag-ui>Code review · 4</tag-ui>\n <tag-ui>Drafts · 3</tag-ui>\n <tag-ui>Research · 3</tag-ui>\n <tag-ui>Personal · 2</tag-ui>\n </row-ui>\n <grid-ui columns=\"2\" gap=\"2\">\n <card-ui size=\"sm\">\n <header><span slot=\"heading\">Code review</span><tag-ui slot=\"action\">Pinned</tag-ui></header>\n <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>\n </card-ui>\n <card-ui size=\"sm\">\n <header><span slot=\"heading\">Standup draft</span></header>\n <section><text-ui color=\"subtle\" size=\"sm\">Summarize what I did yesterday from my git log. Group by repo. End with today's plan.</text-ui></section>\n </card-ui>\n <card-ui size=\"sm\">\n <header><span slot=\"heading\">Spec from notes</span></header>\n <section><text-ui color=\"subtle\" size=\"sm\">Turn these notes into a spec doc with sections: problem, design, alternatives, open questions.</text-ui></section>\n </card-ui>\n <card-ui size=\"sm\">\n <header><span slot=\"heading\">Bug repro</span></header>\n <section><text-ui color=\"subtle\" size=\"sm\">Given this stack trace, propose three hypotheses ordered by likelihood. Show the test that would falsify each.</text-ui></section>\n </card-ui>\n </grid-ui>\n </col-ui>\n </section>\n </card-ui>",
|
|
10
10
|
"source": "packages/web-components/patterns/agent-prompt-library/agent-prompt-library.examples.html",
|
|
11
11
|
"metadata": {
|
|
12
12
|
"domain": "agent",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"tiles"
|
|
29
29
|
]
|
|
30
30
|
},
|
|
31
|
-
"captured_at": "2026-08-
|
|
31
|
+
"captured_at": "2026-08-19T03:56:11.704Z",
|
|
32
32
|
"template": [
|
|
33
33
|
{
|
|
34
34
|
"id": "text",
|
|
@@ -48,6 +48,7 @@
|
|
|
48
48
|
"id": "button",
|
|
49
49
|
"component": "Button",
|
|
50
50
|
"slot": "action",
|
|
51
|
+
"icon": "plus",
|
|
51
52
|
"size": "sm",
|
|
52
53
|
"text": "New prompt",
|
|
53
54
|
"variant": "primary"
|
|
@@ -166,6 +167,7 @@
|
|
|
166
167
|
{
|
|
167
168
|
"id": "card",
|
|
168
169
|
"component": "Card",
|
|
170
|
+
"size": "sm",
|
|
169
171
|
"children": [
|
|
170
172
|
"header-2",
|
|
171
173
|
"section-2"
|
|
@@ -209,6 +211,7 @@
|
|
|
209
211
|
{
|
|
210
212
|
"id": "card-2",
|
|
211
213
|
"component": "Card",
|
|
214
|
+
"size": "sm",
|
|
212
215
|
"children": [
|
|
213
216
|
"header-3",
|
|
214
217
|
"section-3"
|
|
@@ -252,6 +255,7 @@
|
|
|
252
255
|
{
|
|
253
256
|
"id": "card-3",
|
|
254
257
|
"component": "Card",
|
|
258
|
+
"size": "sm",
|
|
255
259
|
"children": [
|
|
256
260
|
"header-4",
|
|
257
261
|
"section-4"
|
|
@@ -295,6 +299,7 @@
|
|
|
295
299
|
{
|
|
296
300
|
"id": "card-4",
|
|
297
301
|
"component": "Card",
|
|
302
|
+
"size": "sm",
|
|
298
303
|
"children": [
|
|
299
304
|
"header-5",
|
|
300
305
|
"section-5"
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"slots": [],
|
|
7
7
|
"nested": [],
|
|
8
8
|
"attrs": {},
|
|
9
|
-
"html": "<section>\n <card-ui>\n <header>\n <row-ui gap=\"2\" align=\"center\">\n <icon-ui name=\"terminal-window\" tone=\"accent\"></icon-ui>\n <text-ui strong>search_chunks</text-ui>\n <tag-ui text=\"ok · 42ms\" variant=\"success\" size=\"sm\"></tag-ui>\n </row-ui>\n </header>\n <section>\n <col-ui gap=\"3\">\n <col-ui gap=\"1\">\n <text-ui size=\"sm\" color=\"subtle\"
|
|
9
|
+
"html": "<section>\n <card-ui>\n <header>\n <row-ui gap=\"2\" align=\"center\">\n <icon-ui name=\"terminal-window\" tone=\"accent\"></icon-ui>\n <text-ui strong>search_chunks</text-ui>\n <tag-ui text=\"ok · 42ms\" variant=\"success\" size=\"sm\"></tag-ui>\n </row-ui>\n </header>\n <section>\n <col-ui gap=\"3\">\n <col-ui gap=\"1\">\n <text-ui size=\"sm\" color=\"subtle\">ARGUMENTS</text-ui>\n <code-ui language=\"json\" bare>{\n \"intent\": \"login form with email and password\",\n \"limit\": 5\n}</code-ui>\n </col-ui>\n <col-ui gap=\"1\">\n <text-ui size=\"sm\" color=\"subtle\">RESULT (5 matches)</text-ui>\n <code-ui language=\"json\" bare>[\n { \"name\": \"auth-signin-card-password\", \"score\": 41 },\n { \"name\": \"auth-password-reset\", \"score\": 38 },\n { \"name\": \"auth-signin-card-email\", \"score\": 36 }\n]</code-ui>\n </col-ui>\n </col-ui>\n </section>\n </card-ui>\n </section>",
|
|
10
10
|
"source": "catalog/ui-patterns/v050-agent-blocks/v050-agent-blocks.contents.html",
|
|
11
11
|
"metadata": {
|
|
12
12
|
"domain": "agent",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"collapse"
|
|
26
26
|
]
|
|
27
27
|
},
|
|
28
|
-
"captured_at": "2026-08-
|
|
28
|
+
"captured_at": "2026-08-19T03:56:11.704Z",
|
|
29
29
|
"template": [
|
|
30
30
|
{
|
|
31
31
|
"id": "terminal-window",
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
"icon": "magnifying-glass",
|
|
12
12
|
"tone": "neutral"
|
|
13
13
|
},
|
|
14
|
-
"html": "<agent-artifact-ui title=\"search_web\" kind=\"TOOL\" icon=\"magnifying-glass\" tone=\"neutral\" style=\"max-width: 560px;\">\n <col-ui gap=\"2\">\n <code-ui language=\"json\">{ \"query\": \"claude opus tool use latency\", \"max_results\": 5 }</code-ui>\n <row-ui align=\"center\" gap=\"2\">\n <progress-ui
|
|
14
|
+
"html": "<agent-artifact-ui title=\"search_web\" kind=\"TOOL\" icon=\"magnifying-glass\" tone=\"neutral\" style=\"max-width: 560px;\">\n <col-ui gap=\"2\">\n <code-ui language=\"json\">{ \"query\": \"claude opus tool use latency\", \"max_results\": 5 }</code-ui>\n <row-ui align=\"center\" gap=\"2\">\n <progress-ui size=\"sm\" style=\"flex: 1;\"></progress-ui>\n <text-ui color=\"subtle\" size=\"sm\">Running…</text-ui>\n </row-ui>\n </col-ui>\n </agent-artifact-ui>",
|
|
15
15
|
"source": "packages/web-components/patterns/agent-tool-call/agent-tool-call.examples.html",
|
|
16
16
|
"metadata": {
|
|
17
17
|
"domain": "agent",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"streaming"
|
|
33
33
|
]
|
|
34
34
|
},
|
|
35
|
-
"captured_at": "2026-08-
|
|
35
|
+
"captured_at": "2026-08-19T03:56:11.704Z",
|
|
36
36
|
"template": [
|
|
37
37
|
{
|
|
38
38
|
"id": "code",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"data-section": "",
|
|
10
10
|
"data-property": "selection-bar"
|
|
11
11
|
},
|
|
12
|
-
"html": "<card-ui raw>\n <section bleed>\n <div data-selection-scroll style=\"max-height: 12rem; overflow: auto; position: relative; border: 1px solid var(--md-sys-color-neutral-outline-variant); border-radius: var(--a-radius-md);\">\n <table style=\"width:100%; border-collapse: collapse;\">\n <tbody>\n <tr><td style=\"padding: var(--a-space-3);\"><check-ui data-sel-row\n onchange=\"const n=this.closest('[data-selection-scroll]').querySelectorAll('[data-sel-row][checked]').length; const bar=this.closest('[data-selection-scroll]').querySelector('#selection-bar'); bar.querySelector('[data-sel-count]').textContent=String(n); bar.open=n>0;\"></check-ui> invoice-0192.pdf</td></tr>\n <tr><td style=\"padding: var(--a-space-3);\"><check-ui data-sel-row\n onchange=\"const n=this.closest('[data-selection-scroll]').querySelectorAll('[data-sel-row][checked]').length; const bar=this.closest('[data-selection-scroll]').querySelector('#selection-bar'); bar.querySelector('[data-sel-count]').textContent=String(n); bar.open=n>0;\"></check-ui> invoice-0193.pdf</td></tr>\n <tr><td style=\"padding: var(--a-space-3);\">invoice-0194.pdf</td></tr>\n <tr><td style=\"padding: var(--a-space-3);\">invoice-0195.pdf</td></tr>\n </tbody>\n </table>\n <anchor-bar-ui id=\"selection-bar\" anchor=\"bottom\">\n <toolbar-ui role=\"toolbar\" aria-label=\"Bulk actions\" align=\"space-between\">\n <toolbar-group-ui>\n <text-ui strong aria-live=\"polite\"><span data-sel-count>0</span> selected</text-ui>\n </toolbar-group-ui>\n <toolbar-group-ui>\n <button-ui icon=\"archive\"
|
|
12
|
+
"html": "<card-ui raw>\n <section bleed>\n <div data-selection-scroll style=\"max-height: 12rem; overflow: auto; position: relative; border: 1px solid var(--md-sys-color-neutral-outline-variant); border-radius: var(--a-radius-md);\">\n <table style=\"width:100%; border-collapse: collapse;\">\n <tbody>\n <tr><td style=\"padding: var(--a-space-3);\"><check-ui data-sel-row\n onchange=\"const n=this.closest('[data-selection-scroll]').querySelectorAll('[data-sel-row][checked]').length; const bar=this.closest('[data-selection-scroll]').querySelector('#selection-bar'); bar.querySelector('[data-sel-count]').textContent=String(n); bar.open=n>0;\"></check-ui> invoice-0192.pdf</td></tr>\n <tr><td style=\"padding: var(--a-space-3);\"><check-ui data-sel-row\n onchange=\"const n=this.closest('[data-selection-scroll]').querySelectorAll('[data-sel-row][checked]').length; const bar=this.closest('[data-selection-scroll]').querySelector('#selection-bar'); bar.querySelector('[data-sel-count]').textContent=String(n); bar.open=n>0;\"></check-ui> invoice-0193.pdf</td></tr>\n <tr><td style=\"padding: var(--a-space-3);\">invoice-0194.pdf</td></tr>\n <tr><td style=\"padding: var(--a-space-3);\">invoice-0195.pdf</td></tr>\n </tbody>\n </table>\n <anchor-bar-ui id=\"selection-bar\" anchor=\"bottom\">\n <toolbar-ui role=\"toolbar\" aria-label=\"Bulk actions\" align=\"space-between\">\n <toolbar-group-ui>\n <text-ui strong aria-live=\"polite\"><span data-sel-count>0</span> selected</text-ui>\n </toolbar-group-ui>\n <toolbar-group-ui>\n <button-ui icon=\"archive\" aria-label=\"Archive\" variant=\"ghost\" size=\"sm\"></button-ui>\n <button-ui icon=\"download-simple\" aria-label=\"Export\" variant=\"ghost\" size=\"sm\"></button-ui>\n <divider-ui vertical></divider-ui>\n <button-ui icon=\"trash\" aria-label=\"Delete\" variant=\"ghost\" size=\"sm\"></button-ui>\n <divider-ui vertical></divider-ui>\n <button-ui text=\"Clear\" variant=\"ghost\" size=\"sm\" data-sel-clear\n onclick=\"const scope=this.closest('[data-selection-scroll]'); scope.querySelectorAll('[data-sel-row]').forEach((row)=>{row.checked=false;}); const bar=scope.querySelector('#selection-bar'); bar.querySelector('[data-sel-count]').textContent='0'; bar.open=false;\"></button-ui>\n </toolbar-group-ui>\n </toolbar-ui>\n </anchor-bar-ui>\n </div>\n </section>\n </card-ui>",
|
|
13
13
|
"source": "packages/web-components/components/anchor-bar/anchor-bar.examples.html",
|
|
14
14
|
"metadata": {
|
|
15
15
|
"domain": "data",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"clear"
|
|
32
32
|
]
|
|
33
33
|
},
|
|
34
|
-
"captured_at": "2026-
|
|
34
|
+
"captured_at": "2026-08-19T03:56:11.704Z",
|
|
35
35
|
"template": [
|
|
36
36
|
{
|
|
37
37
|
"id": "check-box",
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"slots": [],
|
|
7
7
|
"nested": [],
|
|
8
8
|
"attrs": {},
|
|
9
|
-
"html": "<card-ui style=\"max-width: 560px;\">\n <header>\n <span slot=\"heading\" variant=\"section\">Your new API key</span>\n <text-ui slot=\"description\" color=\"subtle\">Copy it now — it won't be shown again</text-ui>\n </header>\n <section>\n <col-ui gap=\"3\">\n <field-ui label=\"Production — backend\">\n <input-ui name=\"api_key\" value=\"
|
|
9
|
+
"html": "<card-ui style=\"max-width: 560px;\">\n <header>\n <span slot=\"heading\" variant=\"section\">Your new API key</span>\n <text-ui slot=\"description\" color=\"subtle\">Copy it now — it won't be shown again</text-ui>\n </header>\n <section>\n <col-ui gap=\"3\">\n <field-ui label=\"Production — backend\">\n <input-ui name=\"api_key\" value=\"sk_test_FAKEDEMOKEY0000A4F2\" readonly suffix=\"copy\"></input-ui>\n </field-ui>\n <alert-ui variant=\"warning\" icon=\"warning\">\n <col-ui slot=\"content\" gap=\"0-5\">\n <text-ui strong>This is the only time we'll show this key.</text-ui>\n <text-ui>Store it in your secrets manager now. If you lose it, you'll need to revoke this key and create a new one.</text-ui>\n </col-ui>\n </alert-ui>\n </col-ui>\n </section>\n <footer divider>\n <button-ui slot=\"action\" text=\"I've stored it safely\" variant=\"primary\"></button-ui>\n </footer>\n </card-ui>",
|
|
10
10
|
"source": "packages/web-components/patterns/admin-keys-and-export/admin-keys-and-export.examples.html",
|
|
11
11
|
"metadata": {
|
|
12
12
|
"domain": "settings",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"settings"
|
|
29
29
|
]
|
|
30
30
|
},
|
|
31
|
-
"captured_at": "2026-
|
|
31
|
+
"captured_at": "2026-08-19T12:44:41.891Z",
|
|
32
32
|
"template": [
|
|
33
33
|
{
|
|
34
34
|
"id": "text",
|
|
@@ -57,7 +57,8 @@
|
|
|
57
57
|
"component": "Input",
|
|
58
58
|
"name": "api_key",
|
|
59
59
|
"readonly": true,
|
|
60
|
-
"
|
|
60
|
+
"suffix": "copy",
|
|
61
|
+
"value": "sk_test_FAKEDEMOKEY0000A4F2"
|
|
61
62
|
},
|
|
62
63
|
{
|
|
63
64
|
"id": "field",
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"slots": [],
|
|
7
7
|
"nested": [],
|
|
8
8
|
"attrs": {},
|
|
9
|
-
"html": "<card-ui>\n <header>\n <span slot=\"heading\" variant=\"section\">API keys</span>\n <text-ui slot=\"description\" color=\"subtle\">3 active · last rotated 12 days ago</text-ui>\n <button-ui slot=\"action\" text=\"Create key\" variant=\"primary\" size=\"sm\" icon
|
|
9
|
+
"html": "<card-ui>\n <header>\n <span slot=\"heading\" variant=\"section\">API keys</span>\n <text-ui slot=\"description\" color=\"subtle\">3 active · last rotated 12 days ago</text-ui>\n <button-ui slot=\"action\" text=\"Create key\" variant=\"primary\" size=\"sm\" icon=\"plus\"></button-ui>\n </header>\n <section bleed>\n <list-ui divider contained>\n <list-item-ui text=\"Production — backend\">\n <icon-ui slot=\"icon\" name=\"key\" size=\"sm\"></icon-ui>\n <span slot=\"description\"><code>sk_test_…A4F2</code> · last used 4 minutes ago</span>\n <row-ui slot=\"action\" gap=\"2\" align=\"center\">\n <tag-ui variant=\"primary\">read · write</tag-ui>\n <button-ui icon=\"dots-three-vertical\" variant=\"ghost\" size=\"sm\" aria-label=\"Manage\"></button-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui text=\"CI — read-only\">\n <icon-ui slot=\"icon\" name=\"key\" size=\"sm\"></icon-ui>\n <span slot=\"description\"><code>sk_test_…9821</code> · last used 2 hours ago</span>\n <row-ui slot=\"action\" gap=\"2\" align=\"center\">\n <tag-ui>read</tag-ui>\n <button-ui icon=\"dots-three-vertical\" variant=\"ghost\" size=\"sm\" aria-label=\"Manage\"></button-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui text=\"Local dev — kim\">\n <icon-ui slot=\"icon\" name=\"key\" size=\"sm\"></icon-ui>\n <span slot=\"description\"><code>sk_test_…7f0e</code> · last used 18 days ago</span>\n <row-ui slot=\"action\" gap=\"2\" align=\"center\">\n <tag-ui variant=\"default\">test</tag-ui>\n <button-ui icon=\"dots-three-vertical\" variant=\"ghost\" size=\"sm\" aria-label=\"Manage\"></button-ui>\n </row-ui>\n </list-item-ui>\n </list-ui>\n </section>\n </card-ui>",
|
|
10
10
|
"source": "packages/web-components/patterns/admin-keys-and-export/admin-keys-and-export.examples.html",
|
|
11
11
|
"metadata": {
|
|
12
12
|
"domain": "settings",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"credentials"
|
|
31
31
|
]
|
|
32
32
|
},
|
|
33
|
-
"captured_at": "2026-08-
|
|
33
|
+
"captured_at": "2026-08-19T12:44:41.891Z",
|
|
34
34
|
"template": [
|
|
35
35
|
{
|
|
36
36
|
"id": "text",
|
|
@@ -50,6 +50,7 @@
|
|
|
50
50
|
"id": "button",
|
|
51
51
|
"component": "Button",
|
|
52
52
|
"slot": "action",
|
|
53
|
+
"icon": "plus",
|
|
53
54
|
"size": "sm",
|
|
54
55
|
"text": "Create key",
|
|
55
56
|
"variant": "primary"
|
|
@@ -73,7 +74,7 @@
|
|
|
73
74
|
{
|
|
74
75
|
"id": "code",
|
|
75
76
|
"component": "Code",
|
|
76
|
-
"textContent": "
|
|
77
|
+
"textContent": "sk_test_…A4F2"
|
|
77
78
|
},
|
|
78
79
|
{
|
|
79
80
|
"id": "text-3",
|
|
@@ -130,7 +131,7 @@
|
|
|
130
131
|
{
|
|
131
132
|
"id": "code-2",
|
|
132
133
|
"component": "Code",
|
|
133
|
-
"textContent": "
|
|
134
|
+
"textContent": "sk_test_…9821"
|
|
134
135
|
},
|
|
135
136
|
{
|
|
136
137
|
"id": "text-4",
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"slots": [],
|
|
7
7
|
"nested": [],
|
|
8
8
|
"attrs": {},
|
|
9
|
-
"html": "<card-ui style=\"max-width: 720px;\">\n <header>\n <span slot=\"heading\" variant=\"section\">Q2 onboarding budget — $48,000</span>\n <text-ui slot=\"description\" color=\"subtle\">Submitted by Jordan Lee · 2 hours ago</text-ui>\n <tag-ui slot=\"action\" variant=\"warning\">Pending review</tag-ui>\n </header>\n <section>\n <col-ui gap=\"3\">\n <description-list-ui>\n <dt>Requester</dt><dd>Jordan Lee · Engineering Lead</dd>\n <dt>Justification</dt><dd>Onboarding 4 new senior engineers in Q2; covers laptops, software licenses, training, and team setup costs.</dd>\n <dt>Budget breakdown</dt><dd>Hardware $24k · Software $12k · Training $8k · Team setup $4k</dd>\n <dt>Reviewer chain</dt><dd>You → CFO → CEO (auto-approve under $50k after CFO)</dd>\n </description-list-ui>\n </col-ui>\n </section>\n <footer divider>\n <button-ui slot=\"action\" text=\"Reject\" variant=\"ghost\"></button-ui>\n <button-ui slot=\"action\" text=\"Request changes\" variant=\"ghost\"></button-ui>\n <button-ui slot=\"action\" text=\"Approve\" variant=\"primary\" icon
|
|
9
|
+
"html": "<card-ui style=\"max-width: 720px;\">\n <header>\n <span slot=\"heading\" variant=\"section\">Q2 onboarding budget — $48,000</span>\n <text-ui slot=\"description\" color=\"subtle\">Submitted by Jordan Lee · 2 hours ago</text-ui>\n <tag-ui slot=\"action\" variant=\"warning\">Pending review</tag-ui>\n </header>\n <section>\n <col-ui gap=\"3\">\n <description-list-ui>\n <dt>Requester</dt><dd>Jordan Lee · Engineering Lead</dd>\n <dt>Justification</dt><dd>Onboarding 4 new senior engineers in Q2; covers laptops, software licenses, training, and team setup costs.</dd>\n <dt>Budget breakdown</dt><dd>Hardware $24k · Software $12k · Training $8k · Team setup $4k</dd>\n <dt>Reviewer chain</dt><dd>You → CFO → CEO (auto-approve under $50k after CFO)</dd>\n </description-list-ui>\n </col-ui>\n </section>\n <footer divider>\n <button-ui slot=\"action\" text=\"Reject\" variant=\"ghost\"></button-ui>\n <button-ui slot=\"action\" text=\"Request changes\" variant=\"ghost\"></button-ui>\n <button-ui slot=\"action\" text=\"Approve\" variant=\"primary\" icon=\"check\"></button-ui>\n </footer>\n </card-ui>",
|
|
10
10
|
"source": "packages/web-components/patterns/approvals/approvals.examples.html",
|
|
11
11
|
"metadata": {
|
|
12
12
|
"domain": "data",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"single-item"
|
|
33
33
|
]
|
|
34
34
|
},
|
|
35
|
-
"captured_at": "2026-08-
|
|
35
|
+
"captured_at": "2026-08-19T03:56:11.704Z",
|
|
36
36
|
"template": [
|
|
37
37
|
{
|
|
38
38
|
"id": "text",
|
|
@@ -215,6 +215,7 @@
|
|
|
215
215
|
"id": "button-3",
|
|
216
216
|
"component": "Button",
|
|
217
217
|
"slot": "action",
|
|
218
|
+
"icon": "check",
|
|
218
219
|
"text": "Approve",
|
|
219
220
|
"variant": "primary"
|
|
220
221
|
},
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"slots": [],
|
|
7
7
|
"nested": [],
|
|
8
8
|
"attrs": {},
|
|
9
|
-
"html": "<card-ui>\n <header>\n <span slot=\"heading\" variant=\"section\">Pending your approval</span>\n <text-ui slot=\"description\" color=\"subtle\">5 items · 2 high priority</text-ui>\n <button-ui slot=\"action\" text=\"Approve all\" variant=\"ghost\" size=\"sm\" icon
|
|
9
|
+
"html": "<card-ui>\n <header>\n <span slot=\"heading\" variant=\"section\">Pending your approval</span>\n <text-ui slot=\"description\" color=\"subtle\">5 items · 2 high priority</text-ui>\n <button-ui slot=\"action\" text=\"Approve all\" variant=\"ghost\" size=\"sm\" icon=\"check\"></button-ui>\n </header>\n <section bleed>\n <!-- Canonical list-item rows: text + slot=\"description\" + slot=\"icon\" +\n slot=\"action\". The action slot promotes the row to a 3-column grid\n (icon | content | action) and right-aligns the action cluster —\n ACTIONS ONLY (gh#539, operator ruling 2026-07-30): the priority\n tag is request CONTEXT and leads the description line instead. -->\n <list-ui divider contained>\n <list-item-ui text=\"Q2 onboarding budget — $48,000\">\n <avatar-ui slot=\"icon\" size=\"sm\" text=\"Jordan Lee\"></avatar-ui>\n <span slot=\"description\"><tag-ui variant=\"warning\">High</tag-ui> Jordan Lee · Engineering · 2 hours ago</span>\n <row-ui slot=\"action\" gap=\"2\" align=\"center\">\n <button-ui text=\"Reject\" variant=\"ghost\" size=\"sm\"></button-ui>\n <button-ui text=\"Approve\" variant=\"primary\" size=\"sm\" icon=\"check\"></button-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui text=\"Vendor contract — Adobe Creative Cloud\">\n <avatar-ui slot=\"icon\" size=\"sm\" text=\"Avery Chen\"></avatar-ui>\n <span slot=\"description\">Avery Chen · Design · 5 hours ago</span>\n <row-ui slot=\"action\" gap=\"2\" align=\"center\">\n <button-ui text=\"Reject\" variant=\"ghost\" size=\"sm\"></button-ui>\n <button-ui text=\"Approve\" variant=\"primary\" size=\"sm\" icon=\"check\"></button-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui text=\"Access request — production database\">\n <avatar-ui slot=\"icon\" size=\"sm\" text=\"Sam Park\"></avatar-ui>\n <span slot=\"description\"><tag-ui variant=\"warning\">High</tag-ui> Sam Park · Data · 1 day ago</span>\n <row-ui slot=\"action\" gap=\"2\" align=\"center\">\n <button-ui text=\"Reject\" variant=\"ghost\" size=\"sm\"></button-ui>\n <button-ui text=\"Approve\" variant=\"primary\" size=\"sm\" icon=\"check\"></button-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui text=\"Travel — SF → NYC, May 12–14\">\n <avatar-ui slot=\"icon\" size=\"sm\" text=\"Riley Tan\"></avatar-ui>\n <span slot=\"description\">Riley Tan · Sales · 2 days ago</span>\n <row-ui slot=\"action\" gap=\"2\" align=\"center\">\n <button-ui text=\"Reject\" variant=\"ghost\" size=\"sm\"></button-ui>\n <button-ui text=\"Approve\" variant=\"primary\" size=\"sm\" icon=\"check\"></button-ui>\n </row-ui>\n </list-item-ui>\n </list-ui>\n </section>\n </card-ui>",
|
|
10
10
|
"source": "packages/web-components/patterns/approvals/approvals.examples.html",
|
|
11
11
|
"metadata": {
|
|
12
12
|
"domain": "data",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"inbox"
|
|
36
36
|
]
|
|
37
37
|
},
|
|
38
|
-
"captured_at": "2026-08-
|
|
38
|
+
"captured_at": "2026-08-19T03:56:11.704Z",
|
|
39
39
|
"template": [
|
|
40
40
|
{
|
|
41
41
|
"id": "text",
|
|
@@ -55,6 +55,7 @@
|
|
|
55
55
|
"id": "button",
|
|
56
56
|
"component": "Button",
|
|
57
57
|
"slot": "action",
|
|
58
|
+
"icon": "check",
|
|
58
59
|
"size": "sm",
|
|
59
60
|
"text": "Approve all",
|
|
60
61
|
"variant": "ghost"
|
|
@@ -101,6 +102,7 @@
|
|
|
101
102
|
{
|
|
102
103
|
"id": "button-3",
|
|
103
104
|
"component": "Button",
|
|
105
|
+
"icon": "check",
|
|
104
106
|
"size": "sm",
|
|
105
107
|
"text": "Approve",
|
|
106
108
|
"variant": "primary"
|
|
@@ -150,6 +152,7 @@
|
|
|
150
152
|
{
|
|
151
153
|
"id": "button-5",
|
|
152
154
|
"component": "Button",
|
|
155
|
+
"icon": "check",
|
|
153
156
|
"size": "sm",
|
|
154
157
|
"text": "Approve",
|
|
155
158
|
"variant": "primary"
|
|
@@ -208,6 +211,7 @@
|
|
|
208
211
|
{
|
|
209
212
|
"id": "button-7",
|
|
210
213
|
"component": "Button",
|
|
214
|
+
"icon": "check",
|
|
211
215
|
"size": "sm",
|
|
212
216
|
"text": "Approve",
|
|
213
217
|
"variant": "primary"
|
|
@@ -257,6 +261,7 @@
|
|
|
257
261
|
{
|
|
258
262
|
"id": "button-9",
|
|
259
263
|
"component": "Button",
|
|
264
|
+
"icon": "check",
|
|
260
265
|
"size": "sm",
|
|
261
266
|
"text": "Approve",
|
|
262
267
|
"variant": "primary"
|