@adia-ai/gen-ui 0.8.42 → 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 +13 -0
- package/compose/strategies/monolithic/_shared.js +2 -2
- package/compose/transpiler/transpiler-maps.js +1 -1
- package/compose/transpiler/transpiler.js +1 -1
- package/corpus/chunk-embeddings.json +1 -1
- package/corpus/chunks/_index.json +255 -4
- package/corpus/chunks/_source-hashes.json +74 -77
- 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/analytics-chart.json +4 -4
- 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/blog-post-card.json +3 -3
- 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-chart-plus-breakdown.json +3 -3
- package/corpus/chunks/chart-in-card-chart-plus-stat.json +3 -3
- package/corpus/chunks/chart-in-card-chart-with-filter-pills.json +3 -3
- 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-legend.json +4 -4
- package/corpus/chunks/chart-in-card-full-bleed-line-square.json +66 -0
- package/corpus/chunks/chart-in-card-full-chart.json +3 -3
- package/corpus/chunks/chart-in-card-trend-footer.json +3 -3
- package/corpus/chunks/chart-with-filter-pills.json +3 -3
- package/corpus/chunks/comments-thread.json +3 -2
- package/corpus/chunks/cta-banner-centered.json +3 -4
- package/corpus/chunks/dashboard-acquisition-panel.json +3 -3
- package/corpus/chunks/dashboard-admin-page.json +2 -2
- package/corpus/chunks/dashboard-audience-panel.json +3 -3
- package/corpus/chunks/dashboard-chart-recent.json +3 -3
- package/corpus/chunks/dashboard-overview-panel.json +2 -2
- package/corpus/chunks/dashboard-traffic-channels.json +4 -4
- 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/logo-cloud-trusted-by.json +37 -32
- package/corpus/chunks/map-with-location-list.json +1 -1
- package/corpus/chunks/marketing-page-shell.json +3 -3
- package/corpus/chunks/member-edit-drawer.json +4 -3
- 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/real-time-metrics-dashboard.json +3 -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/split-pane-editor.json +4 -4
- 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 +272 -0
- package/corpus/chunks/table-toolbar-chrome-only-empty.json +183 -0
- package/corpus/chunks/testimonial-pull-quote.json +2 -2
- 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
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"attrs": {
|
|
9
9
|
"data-perm-card": ""
|
|
10
10
|
},
|
|
11
|
-
"html": "<card-ui data-perm-card>\n <header>\n <span slot=\"heading\" variant=\"section\">Permissions</span>\n <text-ui slot=\"description\" color=\"subtle\">Changes save automatically</text-ui>\n <button-ui slot=\"action\" text=\"Add custom role\" variant=\"ghost\" size=\"sm\" icon
|
|
11
|
+
"html": "<card-ui data-perm-card>\n <header>\n <span slot=\"heading\" variant=\"section\">Permissions</span>\n <text-ui slot=\"description\" color=\"subtle\">Changes save automatically</text-ui>\n <button-ui slot=\"action\" text=\"Add custom role\" variant=\"ghost\" size=\"sm\" icon=\"plus\"></button-ui>\n </header>\n <section bleed>\n <table-ui frameless id=\"pat-perm-matrix\"></table-ui>\n </section>\n <footer divider>\n <text-ui slot=\"description\" color=\"subtle\" size=\"sm\">Built-in roles are read-only. The Custom column is editable.</text-ui>\n </footer>\n </card-ui>",
|
|
12
12
|
"source": "packages/web-components/patterns/permissions-matrix/permissions-matrix.examples.html",
|
|
13
13
|
"metadata": {
|
|
14
14
|
"domain": "settings",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"checkboxes"
|
|
30
30
|
]
|
|
31
31
|
},
|
|
32
|
-
"captured_at": "2026-
|
|
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 custom role",
|
|
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\">Share link</span>\n <tag-ui slot=\"action\" variant=\"primary\">Anyone with the link</tag-ui>\n </header>\n <section>\n <col-ui gap=\"3\">\n <row-ui gap=\"2\" align=\"center\">\n <input-ui readonly value=\"https://acme.app/d/8421-revenue-q2\" style=\"flex: 1;\"></input-ui>\n <button-ui text=\"Copy\" variant=\"primary\" icon
|
|
9
|
+
"html": "<card-ui style=\"max-width: 560px;\">\n <header>\n <span slot=\"heading\" variant=\"section\">Share link</span>\n <tag-ui slot=\"action\" variant=\"primary\">Anyone with the link</tag-ui>\n </header>\n <section>\n <col-ui gap=\"3\">\n <row-ui gap=\"2\" align=\"center\">\n <input-ui readonly value=\"https://acme.app/d/8421-revenue-q2\" style=\"flex: 1;\"></input-ui>\n <button-ui text=\"Copy\" variant=\"primary\" icon=\"copy\"></button-ui>\n </row-ui>\n <row-ui gap=\"3\" align=\"center\">\n <field-ui label=\"Expires\" inline>\n <select-ui value=\"7d\" size=\"sm\" style=\"min-width: 140px;\">\n <option value=\"never\">Never</option>\n <option value=\"24h\">24 hours</option>\n <option value=\"7d\" selected>7 days</option>\n <option value=\"30d\">30 days</option>\n <option value=\"custom\">Custom date…</option>\n </select-ui>\n </field-ui>\n <field-ui label=\"Permission\" inline>\n <select-ui value=\"view\" size=\"sm\" style=\"min-width: 140px;\">\n <option value=\"view\" selected>Can view</option>\n <option value=\"comment\">Can comment</option>\n <option value=\"edit\">Can edit</option>\n </select-ui>\n </field-ui>\n </row-ui>\n <description-list-ui>\n <dt>Created</dt>\n <dd>Apr 22 · by Kim Granlund</dd>\n <dt>Used</dt>\n <dd>14 opens · last 2 hours ago</dd>\n </description-list-ui>\n </col-ui>\n </section>\n <footer divider>\n <button-ui slot=\"action\" text=\"Revoke link\" variant=\"ghost\" color=\"danger\" size=\"sm\" icon=\"x\"></button-ui>\n </footer>\n </card-ui>",
|
|
10
10
|
"source": "packages/web-components/patterns/permissions-sharing/permissions-sharing.examples.html",
|
|
11
11
|
"metadata": {
|
|
12
12
|
"domain": "settings",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"collaborate"
|
|
27
27
|
]
|
|
28
28
|
},
|
|
29
|
-
"captured_at": "2026-08-
|
|
29
|
+
"captured_at": "2026-08-19T03:56:11.704Z",
|
|
30
30
|
"template": [
|
|
31
31
|
{
|
|
32
32
|
"id": "text",
|
|
@@ -59,6 +59,7 @@
|
|
|
59
59
|
{
|
|
60
60
|
"id": "button",
|
|
61
61
|
"component": "Button",
|
|
62
|
+
"icon": "copy",
|
|
62
63
|
"text": "Copy",
|
|
63
64
|
"variant": "primary"
|
|
64
65
|
},
|
|
@@ -232,6 +233,7 @@
|
|
|
232
233
|
"component": "Button",
|
|
233
234
|
"slot": "action",
|
|
234
235
|
"color": "danger",
|
|
236
|
+
"icon": "x",
|
|
235
237
|
"size": "sm",
|
|
236
238
|
"text": "Revoke link",
|
|
237
239
|
"variant": "ghost"
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"slots": [],
|
|
7
7
|
"nested": [],
|
|
8
8
|
"attrs": {},
|
|
9
|
-
"html": "<agent-admin-ui id=\"admin\"\n style=\"flex: 1; border: none; border-radius: 0\">\n <admin-roster-ui></admin-roster-ui>\n <admin-settings-ui></admin-settings-ui>\n <chat-shell id=\"chat\">\n <chat-header>\n <span slot=\"name\">Agent Admin</span>\n <chat-status slot=\"status\"></chat-status>\n <span slot=\"action\" size=\"sm\" style=\"display: flex; align-items: center; gap: var(--a-space-1)\">\n <button-ui id=\"theme-toggle\" icon=\"moon\" variant=\"ghost\" size=\"sm\"></button-ui>\n </span>\n </chat-header>\n <chat-thread>\n <chat-empty>\n <empty-state-ui\n icon=\"robot\"\n heading=\"Pick a persona\"\n description=\"Switch personas in the roster on the left, then ask the (deterministic, keyless) stub anything. Edit a section's content in the settings pane and ask again — the next reply cites the new text.\">\n </empty-state-ui>\n </chat-empty>\n </chat-thread>\n <chat-composer placeholder=\"Ask the agent…\"></chat-composer>\n </chat-shell>\n</agent-admin-ui>",
|
|
9
|
+
"html": "<agent-admin-ui id=\"admin\"\n style=\"flex: 1; border: none; border-radius: 0\">\n <admin-roster-ui></admin-roster-ui>\n <admin-settings-ui></admin-settings-ui>\n <chat-shell id=\"chat\">\n <chat-header>\n <span slot=\"name\">Agent Admin</span>\n <chat-status slot=\"status\"></chat-status>\n <span slot=\"action\" size=\"sm\" style=\"display: flex; align-items: center; gap: var(--a-space-1)\">\n <button-ui id=\"theme-toggle\" icon=\"moon\" variant=\"ghost\" size=\"sm\"></button-ui>\n </span>\n </chat-header>\n <chat-thread>\n <chat-empty>\n <empty-state-ui\n icon=\"robot\"\n heading=\"Pick a persona\"\n description=\"Switch personas in the roster on the left, then ask the (deterministic, keyless) stub anything. Edit a section's content in the settings pane and ask again — the next reply cites the new text.\">\n </empty-state-ui>\n </chat-empty>\n </chat-thread>\n <chat-composer>\n <chat-input-ui placeholder=\"Ask the agent…\"></chat-input-ui>\n </chat-composer>\n </chat-shell>\n</agent-admin-ui>",
|
|
10
10
|
"source": "playgrounds/agent-admin/app/agent-admin.contents.html",
|
|
11
11
|
"metadata": {
|
|
12
12
|
"domain": "agent",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"chat"
|
|
23
23
|
]
|
|
24
24
|
},
|
|
25
|
-
"captured_at": "2026-08-
|
|
25
|
+
"captured_at": "2026-08-19T12:44:41.891Z",
|
|
26
26
|
"template": [
|
|
27
27
|
{
|
|
28
28
|
"id": "admin-roster",
|
|
@@ -91,9 +91,17 @@
|
|
|
91
91
|
"chat-empty"
|
|
92
92
|
]
|
|
93
93
|
},
|
|
94
|
+
{
|
|
95
|
+
"id": "chat-input",
|
|
96
|
+
"component": "ChatInput",
|
|
97
|
+
"placeholder": "Ask the agent…"
|
|
98
|
+
},
|
|
94
99
|
{
|
|
95
100
|
"id": "chat-composer",
|
|
96
|
-
"component": "ChatComposer"
|
|
101
|
+
"component": "ChatComposer",
|
|
102
|
+
"children": [
|
|
103
|
+
"chat-input"
|
|
104
|
+
]
|
|
97
105
|
},
|
|
98
106
|
{
|
|
99
107
|
"id": "chat",
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"slots": [],
|
|
7
7
|
"nested": [],
|
|
8
8
|
"attrs": {},
|
|
9
|
-
"html": "<card-ui style=\"max-width: 720px;\">\n <section>\n <col-ui gap=\"4\">\n <row-ui gap=\"4\" align=\"start\">\n <avatar-ui size=\"lg\" text=\"Kim Granlund\"></avatar-ui>\n <col-ui gap=\"1\" grow>\n <row-ui gap=\"2\" align=\"center\">\n <text-ui strong size=\"lg\">Kim Granlund</text-ui>\n <tag-ui variant=\"primary\"
|
|
9
|
+
"html": "<card-ui style=\"max-width: 720px;\">\n <section>\n <col-ui gap=\"4\">\n <row-ui gap=\"4\" align=\"start\">\n <avatar-ui size=\"lg\" text=\"Kim Granlund\"></avatar-ui>\n <col-ui gap=\"1\" grow>\n <row-ui gap=\"2\" align=\"center\">\n <text-ui strong size=\"lg\">Kim Granlund</text-ui>\n <tag-ui variant=\"primary\">Verified</tag-ui>\n </row-ui>\n <text-ui color=\"subtle\">Founder · AdiaUI · Reykjavík, IS</text-ui>\n <text-ui>Building the AdiaUI web-components library and the A2UI generative-UI runtime. Previously at Construct, before that at Modular.</text-ui>\n <row-ui gap=\"2\" style=\"margin-top: 0.5rem;\">\n <button-ui text=\"Follow\" variant=\"primary\" size=\"sm\"></button-ui>\n <button-ui text=\"Message\" variant=\"ghost\" size=\"sm\" icon=\"chat-circle\"></button-ui>\n <button-ui icon=\"dots-three\" variant=\"ghost\" size=\"sm\" aria-label=\"More\"></button-ui>\n </row-ui>\n </col-ui>\n </row-ui>\n <grid-ui columns=\"3\" gap=\"3\">\n <stat-ui label=\"Followers\" value=\"1,284\"></stat-ui>\n <stat-ui label=\"Following\" value=\"312\"></stat-ui>\n <stat-ui label=\"Joined\" value=\"Apr 2024\"></stat-ui>\n </grid-ui>\n <col-ui gap=\"2\">\n <text-ui strong size=\"sm\" color=\"subtle\">Recent public work</text-ui>\n <list-ui divider contained>\n <list-item-ui>\n <col-ui gap=\"0\">\n <text-ui strong>AdiaUI v0.0.26 — Safari @scope sweep</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">Released 2 days ago · 47 components updated</text-ui>\n </col-ui>\n </list-item-ui>\n <list-item-ui>\n <col-ui gap=\"0\">\n <text-ui strong>A2UI generator — chunk corpus expansion</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">748 chunks across 36 domains · open-source</text-ui>\n </col-ui>\n </list-item-ui>\n <list-item-ui>\n <col-ui gap=\"0\">\n <text-ui strong>OKLCH ramps for design systems</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">Talk · 2026-03 · 18 min</text-ui>\n </col-ui>\n </list-item-ui>\n </list-ui>\n </col-ui>\n </col-ui>\n </section>\n </card-ui>",
|
|
10
10
|
"source": "packages/web-components/patterns/profile-public-and-verification/profile-public-and-verification.examples.html",
|
|
11
11
|
"metadata": {
|
|
12
12
|
"domain": "display",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"identity"
|
|
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": "avatar",
|
|
@@ -81,6 +81,7 @@
|
|
|
81
81
|
{
|
|
82
82
|
"id": "button-2",
|
|
83
83
|
"component": "Button",
|
|
84
|
+
"icon": "chat-circle",
|
|
84
85
|
"size": "sm",
|
|
85
86
|
"text": "Message",
|
|
86
87
|
"variant": "ghost"
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"slots": [],
|
|
7
7
|
"nested": [],
|
|
8
8
|
"attrs": {},
|
|
9
|
-
"html": "<card-ui style=\"max-width: 360px;\">\n <section>\n <col-ui gap=\"2\">\n <field-ui>\n <input-ui placeholder=\"Search emoji…\"
|
|
9
|
+
"html": "<card-ui style=\"max-width: 360px;\">\n <section>\n <col-ui gap=\"2\">\n <field-ui>\n <input-ui placeholder=\"Search emoji…\" prefix=\"magnifying-glass\"></input-ui>\n </field-ui>\n <col-ui gap=\"1\">\n <text-ui strong size=\"sm\" color=\"subtle\">Frequently used</text-ui>\n <row-ui gap=\"1\" wrap>\n <button-ui text=\"👍\" variant=\"ghost\" size=\"sm\"></button-ui>\n <button-ui text=\"🎉\" variant=\"ghost\" size=\"sm\"></button-ui>\n <button-ui text=\"❤️\" variant=\"ghost\" size=\"sm\"></button-ui>\n <button-ui text=\"👀\" variant=\"ghost\" size=\"sm\"></button-ui>\n <button-ui text=\"🚀\" variant=\"ghost\" size=\"sm\"></button-ui>\n <button-ui text=\"✅\" variant=\"ghost\" size=\"sm\"></button-ui>\n <button-ui text=\"🙏\" variant=\"ghost\" size=\"sm\"></button-ui>\n <button-ui text=\"🔥\" variant=\"ghost\" size=\"sm\"></button-ui>\n </row-ui>\n </col-ui>\n <col-ui gap=\"1\">\n <text-ui strong size=\"sm\" color=\"subtle\">Smileys</text-ui>\n <row-ui gap=\"1\" wrap>\n <button-ui text=\"😀\" variant=\"ghost\" size=\"sm\"></button-ui>\n <button-ui text=\"😄\" variant=\"ghost\" size=\"sm\"></button-ui>\n <button-ui text=\"😂\" variant=\"ghost\" size=\"sm\"></button-ui>\n <button-ui text=\"🤔\" variant=\"ghost\" size=\"sm\"></button-ui>\n <button-ui text=\"😅\" variant=\"ghost\" size=\"sm\"></button-ui>\n <button-ui text=\"😎\" variant=\"ghost\" size=\"sm\"></button-ui>\n <button-ui text=\"🥺\" variant=\"ghost\" size=\"sm\"></button-ui>\n <button-ui text=\"🙃\" variant=\"ghost\" size=\"sm\"></button-ui>\n </row-ui>\n </col-ui>\n </col-ui>\n </section>\n </card-ui>",
|
|
10
10
|
"source": "packages/web-components/patterns/comments-and-collaboration/comments-and-collaboration.examples.html",
|
|
11
11
|
"metadata": {
|
|
12
12
|
"domain": "content",
|
|
@@ -25,12 +25,13 @@
|
|
|
25
25
|
"collaboration"
|
|
26
26
|
]
|
|
27
27
|
},
|
|
28
|
-
"captured_at": "2026-
|
|
28
|
+
"captured_at": "2026-08-19T03:56:11.704Z",
|
|
29
29
|
"template": [
|
|
30
30
|
{
|
|
31
31
|
"id": "input",
|
|
32
32
|
"component": "Input",
|
|
33
|
-
"placeholder": "Search emoji…"
|
|
33
|
+
"placeholder": "Search emoji…",
|
|
34
|
+
"prefix": "magnifying-glass"
|
|
34
35
|
},
|
|
35
36
|
{
|
|
36
37
|
"id": "field",
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"slots": [],
|
|
7
7
|
"nested": [],
|
|
8
8
|
"attrs": {},
|
|
9
|
-
"html": "<section>\n <col-ui gap=\"4\">\n <row-ui gap=\"3\" align=\"center\">\n <h3>Live metrics</h3>\n <tag-ui text=\"● Live\" variant=\"success\" size=\"sm\"></tag-ui>\n <text-ui size=\"sm\" color=\"subtle\">Updated 2s ago</text-ui>\n </row-ui>\n <grid-ui columns=\"2 4@md\" gap=\"3\">\n <card-ui>\n <header><text-ui size=\"sm\" color=\"subtle\">Requests / sec</text-ui></header>\n <section><text-ui size=\"lg\" strong>1,284</text-ui></section>\n </card-ui>\n <card-ui>\n <header><text-ui size=\"sm\" color=\"subtle\">Latency p50</text-ui></header>\n <section><text-ui size=\"lg\" strong>42ms</text-ui></section>\n </card-ui>\n <card-ui>\n <header><text-ui size=\"sm\" color=\"subtle\">Error budget</text-ui></header>\n <section>\n <col-ui gap=\"1\">\n <text-ui size=\"lg\" strong color=\"success\">96%</text-ui>\n <progress-ui value=\"96\"></progress-ui>\n </col-ui>\n </section>\n </card-ui>\n <card-ui>\n <header><text-ui size=\"sm\" color=\"subtle\">Active sessions</text-ui></header>\n <section><text-ui size=\"lg\" strong>8,419</text-ui></section>\n </card-ui>\n </grid-ui>\n <card-ui>\n <header><text-ui strong>Throughput (last 60s)</text-ui></header>\n <section>\n <chart-ui type=\"line\" x=\"t\" y=\"v\"
|
|
9
|
+
"html": "<section>\n <col-ui gap=\"4\">\n <row-ui gap=\"3\" align=\"center\">\n <h3>Live metrics</h3>\n <tag-ui text=\"● Live\" variant=\"success\" size=\"sm\"></tag-ui>\n <text-ui size=\"sm\" color=\"subtle\">Updated 2s ago</text-ui>\n </row-ui>\n <grid-ui columns=\"2 4@md\" gap=\"3\">\n <card-ui>\n <header><text-ui size=\"sm\" color=\"subtle\">Requests / sec</text-ui></header>\n <section><text-ui size=\"lg\" strong>1,284</text-ui></section>\n </card-ui>\n <card-ui>\n <header><text-ui size=\"sm\" color=\"subtle\">Latency p50</text-ui></header>\n <section><text-ui size=\"lg\" strong>42ms</text-ui></section>\n </card-ui>\n <card-ui>\n <header><text-ui size=\"sm\" color=\"subtle\">Error budget</text-ui></header>\n <section>\n <col-ui gap=\"1\">\n <text-ui size=\"lg\" strong color=\"success\">96%</text-ui>\n <progress-ui value=\"96\"></progress-ui>\n </col-ui>\n </section>\n </card-ui>\n <card-ui>\n <header><text-ui size=\"sm\" color=\"subtle\">Active sessions</text-ui></header>\n <section><text-ui size=\"lg\" strong>8,419</text-ui></section>\n </card-ui>\n </grid-ui>\n <card-ui>\n <header><text-ui strong>Throughput (last 60s)</text-ui></header>\n <section>\n <chart-ui type=\"line\" x=\"t\" y=\"v\" no-values data='[{\"t\":0,\"v\":1100},{\"t\":10,\"v\":1180},{\"t\":20,\"v\":1240},{\"t\":30,\"v\":1284},{\"t\":40,\"v\":1310},{\"t\":50,\"v\":1295},{\"t\":60,\"v\":1284}]' style=\"height:120px\"></chart-ui>\n </section>\n </card-ui>\n </col-ui>\n </section>",
|
|
10
10
|
"source": "catalog/ui-patterns/v050-data-blocks/v050-data-blocks.contents.html",
|
|
11
11
|
"metadata": {
|
|
12
12
|
"domain": "data",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"progress"
|
|
26
26
|
]
|
|
27
27
|
},
|
|
28
|
-
"captured_at": "2026-08-
|
|
28
|
+
"captured_at": "2026-08-18T05:03:46.997Z",
|
|
29
29
|
"template": [
|
|
30
30
|
{
|
|
31
31
|
"id": "text",
|
|
@@ -297,7 +297,7 @@
|
|
|
297
297
|
"v": 1284
|
|
298
298
|
}
|
|
299
299
|
],
|
|
300
|
-
"
|
|
300
|
+
"noValues": true,
|
|
301
301
|
"x": "t",
|
|
302
302
|
"y": "v"
|
|
303
303
|
},
|
|
@@ -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\">Invite a friend, both get $10</span>\n <text-ui slot=\"description\" color=\"subtle\">When they sign up and verify, $10 in credit lands in both your accounts.</text-ui>\n </header>\n <section>\n <col-ui gap=\"3\">\n <field-ui label=\"Your referral link\">\n <input-ui name=\"referral_url\" value=\"adia.ai/r/kim-A4F92\" readonly
|
|
9
|
+
"html": "<card-ui >\n <header>\n <span slot=\"heading\" variant=\"section\">Invite a friend, both get $10</span>\n <text-ui slot=\"description\" color=\"subtle\">When they sign up and verify, $10 in credit lands in both your accounts.</text-ui>\n </header>\n <section>\n <col-ui gap=\"3\">\n <field-ui label=\"Your referral link\">\n <input-ui name=\"referral_url\" value=\"adia.ai/r/kim-A4F92\" readonly suffix=\"copy\"></input-ui>\n </field-ui>\n <row-ui gap=\"2\">\n <button-ui text=\"Copy link\" variant=\"primary\" icon=\"copy\"></button-ui>\n <button-ui text=\"Email\" variant=\"ghost\" icon=\"envelope\"></button-ui>\n <button-ui text=\"X\" variant=\"ghost\"></button-ui>\n <button-ui text=\"LinkedIn\" variant=\"ghost\"></button-ui>\n </row-ui>\n </col-ui>\n </section>\n </card-ui>",
|
|
10
10
|
"source": "packages/web-components/patterns/marketing-engagement/marketing-engagement.examples.html",
|
|
11
11
|
"metadata": {
|
|
12
12
|
"domain": "marketing",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"program"
|
|
27
27
|
]
|
|
28
28
|
},
|
|
29
|
-
"captured_at": "2026-
|
|
29
|
+
"captured_at": "2026-08-19T03:56:11.704Z",
|
|
30
30
|
"template": [
|
|
31
31
|
{
|
|
32
32
|
"id": "text",
|
|
@@ -55,6 +55,7 @@
|
|
|
55
55
|
"component": "Input",
|
|
56
56
|
"name": "referral_url",
|
|
57
57
|
"readonly": true,
|
|
58
|
+
"suffix": "copy",
|
|
58
59
|
"value": "adia.ai/r/kim-A4F92"
|
|
59
60
|
},
|
|
60
61
|
{
|
|
@@ -68,12 +69,14 @@
|
|
|
68
69
|
{
|
|
69
70
|
"id": "button",
|
|
70
71
|
"component": "Button",
|
|
72
|
+
"icon": "copy",
|
|
71
73
|
"text": "Copy link",
|
|
72
74
|
"variant": "primary"
|
|
73
75
|
},
|
|
74
76
|
{
|
|
75
77
|
"id": "button-2",
|
|
76
78
|
"component": "Button",
|
|
79
|
+
"icon": "envelope",
|
|
77
80
|
"text": "Email",
|
|
78
81
|
"variant": "ghost"
|
|
79
82
|
},
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"attrs": {
|
|
9
9
|
"data-reg-form": ""
|
|
10
10
|
},
|
|
11
|
-
"html": "<section data-reg-form>\n <field-ui inline label=\"Company URL\">\n <input-ui name=\"url\" type=\"url\" placeholder=\"https://acme.com\" value=\"https://acme.com\" autocomplete=\"url\"></input-ui>\n </field-ui>\n\n <div data-reg-found-status>\n <icon-ui name=\"check-circle\"></icon-ui>\n <text-ui> <strong>Found 4 things</strong> on acme.com — review each below, then continue. </text-ui>\n <button-ui text=\"Re-scan\" variant=\"ghost\" size=\"sm\" type=\"button\" style=\"margin-inline-start: auto\"></button-ui>\n </div>\n\n <col-ui gap=\"2\">\n <card-ui>\n <header>\n <span slot=\"icon\"><avatar-ui icon=\"image-square\"></avatar-ui></span>\n <span slot=\"heading\">\n <row-ui gap=\"2\" align=\"center\">\n <text-ui strong>Logo</text-ui>\n <badge-ui text=\"Found\" variant=\"success\"></badge-ui>\n </row-ui>\n </span>\n <span slot=\"description\">\n <text-ui color=\"subtle\" size=\"sm\">\n Pulled <code>acme-logo-dark.svg</code> at 240×80 from the site header. Light variant inferred via auto-invert.\n </text-ui>\n </span>\n <button-ui slot=\"action\" text=\"Edit\" variant=\"ghost\" icon=\"pencil-simple\" type=\"button\" data-edit=\"logo\"></button-ui>\n </header>\n </card-ui>\n\n <card-ui>\n <header>\n <span slot=\"icon\"><avatar-ui icon=\"palette\"></avatar-ui></span>\n <span slot=\"heading\">\n <row-ui gap=\"2\" align=\"center\">\n <text-ui strong>Brand colors</text-ui>\n <badge-ui text=\"Found\" variant=\"success\"></badge-ui>\n </row-ui>\n </span>\n <span slot=\"description\">\n <text-ui color=\"subtle\" size=\"sm\">\n Primary <code>#1B5BFA</code>, accent <code>#FFC857</code>, surface <code>#0E1116</code>. Sampled from your hero, CTAs, and footer.\n </text-ui>\n </span>\n <button-ui slot=\"action\" text=\"Edit\" variant=\"ghost\" icon=\"pencil-simple\" type=\"button\" data-edit=\"colors\"></button-ui>\n </header>\n </card-ui>\n\n <card-ui>\n <header>\n <span slot=\"icon\"><avatar-ui icon=\"quotes\"></avatar-ui></span>\n <span slot=\"heading\">\n <row-ui gap=\"2\" align=\"center\">\n <text-ui strong>Tagline</text-ui>\n <badge-ui text=\"AI generated\" variant=\"warning\"></badge-ui>\n </row-ui>\n </span>\n <span slot=\"description\">\n <text-ui color=\"subtle\" size=\"sm\">\n \"Acme is the fastest way to ship infrastructure for modern teams.\" — distilled from your homepage hero + about copy.\n </text-ui>\n </span>\n <button-ui slot=\"action\" text=\"Edit\" variant=\"ghost\" icon=\"pencil-simple\" type=\"button\" data-edit=\"tagline\"></button-ui>\n </header>\n </card-ui>\n\n <card-ui>\n <header>\n <span slot=\"icon\"><avatar-ui icon=\"link\"></avatar-ui></span>\n <span slot=\"heading\">\n <row-ui gap=\"2\" align=\"center\">\n <text-ui strong>Social & presence</text-ui>\n <badge-ui text=\"Found\" variant=\"success\"></badge-ui>\n </row-ui>\n </span>\n <span slot=\"description\">\n <text-ui color=\"subtle\" size=\"sm\">\n LinkedIn · Twitter · GitHub · YouTube — 4 official handles found. Slack and Discord links not detected.\n </text-ui>\n </span>\n <button-ui slot=\"action\" text=\"Edit\" variant=\"ghost\" icon=\"pencil-simple\" type=\"button\" data-edit=\"social\"></button-ui>\n </header>\n </card-ui>\n\n <card-ui>\n <header>\n <span slot=\"icon\"><avatar-ui icon=\"text-aa\"></avatar-ui></span>\n <span slot=\"heading\">\n <row-ui gap=\"2\" align=\"center\">\n <text-ui strong>Typography</text-ui>\n <badge-ui text=\"Couldn't infer\" tone=\"muted\"></badge-ui>\n </row-ui>\n </span>\n <span slot=\"description\">\n <text-ui color=\"subtle\" size=\"sm\">\n Site uses a custom hosted font. Pick a library family or upload your brand font from admin → workspace → branding.\n </text-ui>\n </span>\n <button-ui slot=\"action\" text=\"Set up\" variant=\"ghost\"
|
|
11
|
+
"html": "<section data-reg-form>\n <field-ui inline label=\"Company URL\">\n <input-ui name=\"url\" type=\"url\" placeholder=\"https://acme.com\" value=\"https://acme.com\" autocomplete=\"url\"></input-ui>\n </field-ui>\n\n <div data-reg-found-status>\n <icon-ui name=\"check-circle\"></icon-ui>\n <text-ui> <strong>Found 4 things</strong> on acme.com — review each below, then continue. </text-ui>\n <button-ui text=\"Re-scan\" variant=\"ghost\" size=\"sm\" type=\"button\" style=\"margin-inline-start: auto\"></button-ui>\n </div>\n\n <col-ui gap=\"2\">\n <card-ui>\n <header>\n <span slot=\"icon\"><avatar-ui icon=\"image-square\"></avatar-ui></span>\n <span slot=\"heading\">\n <row-ui gap=\"2\" align=\"center\">\n <text-ui strong>Logo</text-ui>\n <badge-ui text=\"Found\" variant=\"success\"></badge-ui>\n </row-ui>\n </span>\n <span slot=\"description\">\n <text-ui color=\"subtle\" size=\"sm\">\n Pulled <code>acme-logo-dark.svg</code> at 240×80 from the site header. Light variant inferred via auto-invert.\n </text-ui>\n </span>\n <button-ui slot=\"action\" text=\"Edit\" variant=\"ghost\" icon=\"pencil-simple\" type=\"button\" data-edit=\"logo\"></button-ui>\n </header>\n </card-ui>\n\n <card-ui>\n <header>\n <span slot=\"icon\"><avatar-ui icon=\"palette\"></avatar-ui></span>\n <span slot=\"heading\">\n <row-ui gap=\"2\" align=\"center\">\n <text-ui strong>Brand colors</text-ui>\n <badge-ui text=\"Found\" variant=\"success\"></badge-ui>\n </row-ui>\n </span>\n <span slot=\"description\">\n <text-ui color=\"subtle\" size=\"sm\">\n Primary <code>#1B5BFA</code>, accent <code>#FFC857</code>, surface <code>#0E1116</code>. Sampled from your hero, CTAs, and footer.\n </text-ui>\n </span>\n <button-ui slot=\"action\" text=\"Edit\" variant=\"ghost\" icon=\"pencil-simple\" type=\"button\" data-edit=\"colors\"></button-ui>\n </header>\n </card-ui>\n\n <card-ui>\n <header>\n <span slot=\"icon\"><avatar-ui icon=\"quotes\"></avatar-ui></span>\n <span slot=\"heading\">\n <row-ui gap=\"2\" align=\"center\">\n <text-ui strong>Tagline</text-ui>\n <badge-ui text=\"AI generated\" variant=\"warning\"></badge-ui>\n </row-ui>\n </span>\n <span slot=\"description\">\n <text-ui color=\"subtle\" size=\"sm\">\n \"Acme is the fastest way to ship infrastructure for modern teams.\" — distilled from your homepage hero + about copy.\n </text-ui>\n </span>\n <button-ui slot=\"action\" text=\"Edit\" variant=\"ghost\" icon=\"pencil-simple\" type=\"button\" data-edit=\"tagline\"></button-ui>\n </header>\n </card-ui>\n\n <card-ui>\n <header>\n <span slot=\"icon\"><avatar-ui icon=\"link\"></avatar-ui></span>\n <span slot=\"heading\">\n <row-ui gap=\"2\" align=\"center\">\n <text-ui strong>Social & presence</text-ui>\n <badge-ui text=\"Found\" variant=\"success\"></badge-ui>\n </row-ui>\n </span>\n <span slot=\"description\">\n <text-ui color=\"subtle\" size=\"sm\">\n LinkedIn · Twitter · GitHub · YouTube — 4 official handles found. Slack and Discord links not detected.\n </text-ui>\n </span>\n <button-ui slot=\"action\" text=\"Edit\" variant=\"ghost\" icon=\"pencil-simple\" type=\"button\" data-edit=\"social\"></button-ui>\n </header>\n </card-ui>\n\n <card-ui>\n <header>\n <span slot=\"icon\"><avatar-ui icon=\"text-aa\"></avatar-ui></span>\n <span slot=\"heading\">\n <row-ui gap=\"2\" align=\"center\">\n <text-ui strong>Typography</text-ui>\n <badge-ui text=\"Couldn't infer\" tone=\"muted\"></badge-ui>\n </row-ui>\n </span>\n <span slot=\"description\">\n <text-ui color=\"subtle\" size=\"sm\">\n Site uses a custom hosted font. Pick a library family or upload your brand font from admin → workspace → branding.\n </text-ui>\n </span>\n <button-ui slot=\"action\" text=\"Set up\" variant=\"ghost\" type=\"button\" data-edit=\"typography\" icon-trailing=\"arrow-right\"></button-ui>\n </header>\n </card-ui>\n </col-ui>\n\n <div data-reg-defer-row>\n <check-ui name=\"defer\" label=\"I'll do this later from admin → workspace → branding\"></check-ui>\n <text-ui color=\"subtle\" size=\"sm\" data-reg-defer-hint> Workspace will use a generic logo and accent palette until you complete branding. </text-ui>\n </div>\n </section>",
|
|
12
12
|
"source": "apps/user-flow/app/registration/brand-scrape/brand-scrape.contents.html",
|
|
13
13
|
"metadata": {
|
|
14
14
|
"domain": "forms",
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"setup"
|
|
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": "url",
|
|
@@ -527,7 +527,7 @@
|
|
|
527
527
|
"component": "Button",
|
|
528
528
|
"slot": "action",
|
|
529
529
|
"type": "button",
|
|
530
|
-
"icon": "arrow-right",
|
|
530
|
+
"icon-trailing": "arrow-right",
|
|
531
531
|
"text": "Set up",
|
|
532
532
|
"variant": "ghost",
|
|
533
533
|
"data-edit": "typography"
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"attrs": {
|
|
9
9
|
"data-reg-form": ""
|
|
10
10
|
},
|
|
11
|
-
"html": "<section data-reg-form>\n <div data-reg-done-stats>\n <card-ui\n ><section><stat-ui label=\"Members invited\" value=\"12\" change=\"3 confirmed\" trend=\"up\" icon=\"users-three\"></stat-ui></section\n ></card-ui>\n <card-ui\n ><section><stat-ui label=\"Departments\" value=\"7\" icon=\"tree-structure\"></stat-ui></section\n ></card-ui>\n <card-ui\n ><section><stat-ui label=\"Integrations\" value=\"6\" change=\"GH · Slack · Linear · Notion · Drive · Pylon\" icon=\"plugs-connected\"></stat-ui></section\n ></card-ui>\n <card-ui\n ><section><stat-ui label=\"Brand assets\" value=\"4\" change=\"logo · colors · tagline · social\" icon=\"palette\"></stat-ui></section\n ></card-ui>\n <card-ui\n ><section><stat-ui label=\"Support channels\" value=\"3\" change=\"email · phone · Pylon\" icon=\"lifebuoy\"></stat-ui></section\n ></card-ui>\n <card-ui\n ><section><stat-ui label=\"Trial credit\" value=\"$0\" change=\"Pro · 14 days\" icon=\"confetti\"></stat-ui></section\n ></card-ui>\n </div>\n\n <divider-ui></divider-ui>\n\n <col-ui gap=\"6\">\n <text-ui strong>What to do next</text-ui>\n\n <card-ui>\n <header>\n <span slot=\"icon\"><avatar-ui icon=\"rocket-launch\"></avatar-ui></span>\n <span slot=\"heading\"><text-ui strong>Tour the highlights</text-ui></span>\n <span slot=\"description\">\n <text-ui color=\"subtle\" size=\"sm\">3-minute interactive tour. Shows you the inbox, the org chart, and the chat surface.</text-ui>\n </span>\n <button-ui slot=\"action\" text=\"Start tour\" variant=\"ghost\" icon=\"arrow-right\"
|
|
11
|
+
"html": "<section data-reg-form>\n <div data-reg-done-stats>\n <card-ui\n ><section><stat-ui label=\"Members invited\" value=\"12\" change=\"3 confirmed\" trend=\"up\" icon=\"users-three\"></stat-ui></section\n ></card-ui>\n <card-ui\n ><section><stat-ui label=\"Departments\" value=\"7\" icon=\"tree-structure\"></stat-ui></section\n ></card-ui>\n <card-ui\n ><section><stat-ui label=\"Integrations\" value=\"6\" change=\"GH · Slack · Linear · Notion · Drive · Pylon\" icon=\"plugs-connected\"></stat-ui></section\n ></card-ui>\n <card-ui\n ><section><stat-ui label=\"Brand assets\" value=\"4\" change=\"logo · colors · tagline · social\" icon=\"palette\"></stat-ui></section\n ></card-ui>\n <card-ui\n ><section><stat-ui label=\"Support channels\" value=\"3\" change=\"email · phone · Pylon\" icon=\"lifebuoy\"></stat-ui></section\n ></card-ui>\n <card-ui\n ><section><stat-ui label=\"Trial credit\" value=\"$0\" change=\"Pro · 14 days\" icon=\"confetti\"></stat-ui></section\n ></card-ui>\n </div>\n\n <divider-ui></divider-ui>\n\n <col-ui gap=\"6\">\n <text-ui strong>What to do next</text-ui>\n\n <card-ui>\n <header>\n <span slot=\"icon\"><avatar-ui icon=\"rocket-launch\"></avatar-ui></span>\n <span slot=\"heading\"><text-ui strong>Tour the highlights</text-ui></span>\n <span slot=\"description\">\n <text-ui color=\"subtle\" size=\"sm\">3-minute interactive tour. Shows you the inbox, the org chart, and the chat surface.</text-ui>\n </span>\n <button-ui slot=\"action\" text=\"Start tour\" variant=\"ghost\" icon-trailing=\"arrow-right\"></button-ui>\n </header>\n </card-ui>\n <card-ui>\n <header>\n <span slot=\"icon\"><avatar-ui icon=\"book-open\"></avatar-ui></span>\n <span slot=\"heading\"><text-ui strong>Read the welcome guide</text-ui></span>\n <span slot=\"description\">\n <text-ui color=\"subtle\" size=\"sm\">15 minutes to get fluent — keyboard shortcuts, sharing, and search.</text-ui>\n </span>\n <button-ui slot=\"action\" text=\"Open docs\" variant=\"ghost\" icon-trailing=\"arrow-right\"></button-ui>\n </header>\n </card-ui>\n <card-ui>\n <header>\n <span slot=\"icon\"><avatar-ui icon=\"users-three\"></avatar-ui></span>\n <span slot=\"heading\"><text-ui strong>Invite the rest of your team</text-ui></span>\n <span slot=\"description\">\n <text-ui color=\"subtle\" size=\"sm\">12 invites are out. Add more from admin → directory whenever new folks join.</text-ui>\n </span>\n <button-ui slot=\"action\" text=\"Invite more\" variant=\"ghost\" icon-trailing=\"arrow-right\"></button-ui>\n </header>\n </card-ui>\n </col-ui>\n </section>",
|
|
12
12
|
"source": "apps/user-flow/app/registration/done/done.contents.html",
|
|
13
13
|
"metadata": {
|
|
14
14
|
"domain": "forms",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"redirect"
|
|
24
24
|
]
|
|
25
25
|
},
|
|
26
|
-
"captured_at": "2026-
|
|
26
|
+
"captured_at": "2026-08-19T03:56:11.704Z",
|
|
27
27
|
"template": [
|
|
28
28
|
{
|
|
29
29
|
"id": "stat",
|
|
@@ -271,7 +271,7 @@
|
|
|
271
271
|
"id": "button",
|
|
272
272
|
"component": "Button",
|
|
273
273
|
"slot": "action",
|
|
274
|
-
"icon": "arrow-right",
|
|
274
|
+
"icon-trailing": "arrow-right",
|
|
275
275
|
"text": "Start tour",
|
|
276
276
|
"variant": "ghost"
|
|
277
277
|
},
|
|
@@ -341,7 +341,7 @@
|
|
|
341
341
|
"id": "button-2",
|
|
342
342
|
"component": "Button",
|
|
343
343
|
"slot": "action",
|
|
344
|
-
"icon": "arrow-right",
|
|
344
|
+
"icon-trailing": "arrow-right",
|
|
345
345
|
"text": "Open docs",
|
|
346
346
|
"variant": "ghost"
|
|
347
347
|
},
|
|
@@ -411,7 +411,7 @@
|
|
|
411
411
|
"id": "button-3",
|
|
412
412
|
"component": "Button",
|
|
413
413
|
"slot": "action",
|
|
414
|
-
"icon": "arrow-right",
|
|
414
|
+
"icon-trailing": "arrow-right",
|
|
415
415
|
"text": "Invite more",
|
|
416
416
|
"variant": "ghost"
|
|
417
417
|
},
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"reg-step-progress"
|
|
42
42
|
],
|
|
43
43
|
"attrs": {},
|
|
44
|
-
"html": "<footer>\n <step-progress-ui value=\"10\" total=\"10\" caption=\"Step 10 of 10 · Done\"></step-progress-ui>\n <div data-reg-actions>\n <button-ui
|
|
44
|
+
"html": "<footer>\n <step-progress-ui value=\"10\" total=\"10\" caption=\"Step 10 of 10 · Done\"></step-progress-ui>\n <div data-reg-actions>\n <button-ui text=\"Go to dashboard\" variant=\"primary\" onclick=\"location.href = '/site/examples/admin-dashboard'\" icon-trailing=\"arrow-right\"></button-ui>\n </div>\n </footer>"
|
|
45
45
|
},
|
|
46
46
|
{
|
|
47
47
|
"page": "/apps/user-flow/app/registration/departments/departments.contents.html",
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
"reg-step-progress"
|
|
62
62
|
],
|
|
63
63
|
"attrs": {},
|
|
64
|
-
"html": "<footer>\n <step-progress-ui value=\"8\" total=\"8\" caption=\"Step 8 of 8 · Done\"></step-progress-ui>\n <div data-reg-actions>\n <button-ui
|
|
64
|
+
"html": "<footer>\n <step-progress-ui value=\"8\" total=\"8\" caption=\"Step 8 of 8 · Done\"></step-progress-ui>\n <div data-reg-actions>\n <button-ui text=\"Open your dashboard\" variant=\"primary\" onclick=\"location.href = '/site/examples/admin-dashboard'\" icon-trailing=\"arrow-right\"></button-ui>\n </div>\n </footer>"
|
|
65
65
|
},
|
|
66
66
|
{
|
|
67
67
|
"page": "/apps/user-flow/app/registration/import/import.contents.html",
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
"reg-step-progress"
|
|
72
72
|
],
|
|
73
73
|
"attrs": {},
|
|
74
|
-
"html": "<footer>\n <step-progress-ui value=\"7\" total=\"10\" caption=\"Step 7 of 10\"></step-progress-ui>\n <div data-reg-actions>\n <a data-reg-back href=\"/site/examples/registration/integrations\">Back</a>\n <button-ui text=\"Start fresh\" variant=\"outline\" type=\"submit\"
|
|
74
|
+
"html": "<footer>\n <step-progress-ui value=\"7\" total=\"10\" caption=\"Step 7 of 10\"></step-progress-ui>\n <div data-reg-actions>\n <a data-reg-back href=\"/site/examples/registration/integrations\">Back</a>\n <button-ui text=\"Start fresh\" variant=\"outline\" type=\"submit\"></button-ui>\n <button-ui text=\"Import\" variant=\"primary\" type=\"submit\"></button-ui>\n </div>\n </footer>"
|
|
75
75
|
},
|
|
76
76
|
{
|
|
77
77
|
"page": "/apps/user-flow/app/registration/integrations/integrations.contents.html",
|
|
@@ -91,7 +91,7 @@
|
|
|
91
91
|
"reg-step-progress"
|
|
92
92
|
],
|
|
93
93
|
"attrs": {},
|
|
94
|
-
"html": "<footer>\n <step-progress-ui value=\"5\" total=\"10\" caption=\"Step 5 of 10\"></step-progress-ui>\n <div data-reg-actions>\n <a data-reg-back href=\"/site/examples/registration/team-size\">Back</a>\n <button-ui text=\"Skip for now\" variant=\"outline\" type=\"submit\"
|
|
94
|
+
"html": "<footer>\n <step-progress-ui value=\"5\" total=\"10\" caption=\"Step 5 of 10\"></step-progress-ui>\n <div data-reg-actions>\n <a data-reg-back href=\"/site/examples/registration/team-size\">Back</a>\n <button-ui text=\"Skip for now\" variant=\"outline\" type=\"submit\"></button-ui>\n <button-ui text=\"Send invites\" variant=\"primary\" type=\"submit\"></button-ui>\n </div>\n </footer>"
|
|
95
95
|
},
|
|
96
96
|
{
|
|
97
97
|
"page": "/apps/user-flow/app/registration/legal/legal.contents.html",
|
|
@@ -184,7 +184,7 @@
|
|
|
184
184
|
"html": "<footer>\n <step-progress-ui value=\"1\" total=\"10\" caption=\"Step 1 of 10\"></step-progress-ui>\n <div data-reg-actions>\n <button-ui text=\"Continue\" variant=\"primary\" type=\"submit\"></button-ui>\n </div>\n </footer>"
|
|
185
185
|
}
|
|
186
186
|
],
|
|
187
|
-
"captured_at": "2026-
|
|
187
|
+
"captured_at": "2026-08-19T03:56:11.704Z",
|
|
188
188
|
"metadata": {
|
|
189
189
|
"domain": "forms",
|
|
190
190
|
"description": "Registration step footer — back and continue navigation for multi-step signup.",
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"attrs": {
|
|
9
9
|
"data-reg-form": ""
|
|
10
10
|
},
|
|
11
|
-
"html": "<section data-reg-form>\n <col-ui gap=\"3\">\n <card-ui>\n <header>\n <span slot=\"icon\"><avatar-ui icon=\"user-plus\"></avatar-ui></span>\n <span slot=\"heading\"><text-ui strong>Invite more teammates</text-ui></span>\n <span slot=\"description\">\n <text-ui color=\"subtle\" size=\"sm\">Three invites are out — add more from the workspace settings.</text-ui>\n </span>\n <button-ui slot=\"action\" text=\"Invite\" variant=\"ghost\" icon=\"arrow-right\"
|
|
11
|
+
"html": "<section data-reg-form>\n <col-ui gap=\"3\">\n <card-ui>\n <header>\n <span slot=\"icon\"><avatar-ui icon=\"user-plus\"></avatar-ui></span>\n <span slot=\"heading\"><text-ui strong>Invite more teammates</text-ui></span>\n <span slot=\"description\">\n <text-ui color=\"subtle\" size=\"sm\">Three invites are out — add more from the workspace settings.</text-ui>\n </span>\n <button-ui slot=\"action\" text=\"Invite\" variant=\"ghost\" icon-trailing=\"arrow-right\"></button-ui>\n </header>\n </card-ui>\n <card-ui>\n <header>\n <span slot=\"icon\"><avatar-ui icon=\"squares-four\"></avatar-ui></span>\n <span slot=\"heading\"><text-ui strong>Browse templates</text-ui></span>\n <span slot=\"description\">\n <text-ui color=\"subtle\" size=\"sm\">Pre-built dashboards, plans, and trackers — start from a template.</text-ui>\n </span>\n <button-ui slot=\"action\" text=\"Browse\" variant=\"ghost\" icon-trailing=\"arrow-right\"></button-ui>\n </header>\n </card-ui>\n <card-ui>\n <header>\n <span slot=\"icon\"><avatar-ui icon=\"book-open\"></avatar-ui></span>\n <span slot=\"heading\"><text-ui strong>Read the docs</text-ui></span>\n <span slot=\"description\">\n <text-ui color=\"subtle\" size=\"sm\">15 minutes to get fluent — keyboard shortcuts, sharing, and search.</text-ui>\n </span>\n <button-ui slot=\"action\" text=\"Open docs\" variant=\"ghost\" icon-trailing=\"arrow-right\"></button-ui>\n </header>\n </card-ui>\n </col-ui>\n </section>",
|
|
12
12
|
"source": "apps/user-flow/app/registration/confirmation/confirmation.contents.html",
|
|
13
13
|
"metadata": {
|
|
14
14
|
"domain": "forms",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"steps"
|
|
24
24
|
]
|
|
25
25
|
},
|
|
26
|
-
"captured_at": "2026-
|
|
26
|
+
"captured_at": "2026-08-19T03:56:11.704Z",
|
|
27
27
|
"template": [
|
|
28
28
|
{
|
|
29
29
|
"id": "avatar",
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
"id": "button",
|
|
75
75
|
"component": "Button",
|
|
76
76
|
"slot": "action",
|
|
77
|
-
"icon": "arrow-right",
|
|
77
|
+
"icon-trailing": "arrow-right",
|
|
78
78
|
"text": "Invite",
|
|
79
79
|
"variant": "ghost"
|
|
80
80
|
},
|
|
@@ -144,7 +144,7 @@
|
|
|
144
144
|
"id": "button-2",
|
|
145
145
|
"component": "Button",
|
|
146
146
|
"slot": "action",
|
|
147
|
-
"icon": "arrow-right",
|
|
147
|
+
"icon-trailing": "arrow-right",
|
|
148
148
|
"text": "Browse",
|
|
149
149
|
"variant": "ghost"
|
|
150
150
|
},
|
|
@@ -214,7 +214,7 @@
|
|
|
214
214
|
"id": "button-3",
|
|
215
215
|
"component": "Button",
|
|
216
216
|
"slot": "action",
|
|
217
|
-
"icon": "arrow-right",
|
|
217
|
+
"icon-trailing": "arrow-right",
|
|
218
218
|
"text": "Open docs",
|
|
219
219
|
"variant": "ghost"
|
|
220
220
|
},
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"sales-heatmap"
|
|
27
27
|
]
|
|
28
28
|
},
|
|
29
|
-
"captured_at": "2026-
|
|
29
|
+
"captured_at": "2026-08-18T22:09:18.469Z",
|
|
30
30
|
"template": [
|
|
31
31
|
{
|
|
32
32
|
"id": "text",
|
|
@@ -54,6 +54,7 @@
|
|
|
54
54
|
"component": "Heatmap",
|
|
55
55
|
"type": "day-grid",
|
|
56
56
|
"cols": 24,
|
|
57
|
+
"data": "[\n {\"row\":0,\"col\":9,\"value\":82},{\"row\":0,\"col\":10,\"value\":91},{\"row\":0,\"col\":14,\"value\":74},\n {\"row\":1,\"col\":9,\"value\":88},{\"row\":1,\"col\":10,\"value\":95},{\"row\":1,\"col\":11,\"value\":89},\n {\"row\":2,\"col\":10,\"value\":76},{\"row\":2,\"col\":14,\"value\":83},{\"row\":2,\"col\":15,\"value\":71},\n {\"row\":3,\"col\":9,\"value\":92},{\"row\":3,\"col\":10,\"value\":98},{\"row\":3,\"col\":16,\"value\":68},\n {\"row\":4,\"col\":10,\"value\":85},{\"row\":4,\"col\":11,\"value\":79},{\"row\":4,\"col\":15,\"value\":88}\n ]",
|
|
57
58
|
"rows": 7
|
|
58
59
|
},
|
|
59
60
|
{
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"slots": [],
|
|
7
7
|
"nested": [],
|
|
8
8
|
"attrs": {},
|
|
9
|
-
"html": "<card-ui style=\"max-width: 360px;\">\n <header>\n <span slot=\"heading\" variant=\"section\">Recent</span>\n </header>\n <section bleed>\n <list-ui divider contained>\n <list-item-ui text=\"OKLCH tokens\">\n <icon-ui slot=\"icon\" name=\"clock-counter-clockwise\" size=\"sm\"></icon-ui>\n <button-ui slot=\"action\" icon=\"x\" variant=\"ghost\" size=\"sm\" aria-label=\"Dismiss\"></button-ui>\n </list-item-ui>\n <list-item-ui text=\"primitive audit\">\n <icon-ui slot=\"icon\" name=\"clock-counter-clockwise\" size=\"sm\"></icon-ui>\n <button-ui slot=\"action\" icon=\"x\" variant=\"ghost\" size=\"sm\" aria-label=\"Dismiss\"></button-ui>\n </list-item-ui>\n <list-item-ui text=\"drawer-ui safari fix\">\n <icon-ui slot=\"icon\" name=\"clock-counter-clockwise\" size=\"sm\"></icon-ui>\n <button-ui slot=\"action\" icon=\"x\" variant=\"ghost\" size=\"sm\" aria-label=\"Dismiss\"></button-ui>\n </list-item-ui>\n <list-item-ui text=\"@scope hover bug\">\n <icon-ui slot=\"icon\" name=\"clock-counter-clockwise\" size=\"sm\"></icon-ui>\n <button-ui slot=\"action\" icon=\"x\" variant=\"ghost\" size=\"sm\" aria-label=\"Dismiss\"></button-ui>\n </list-item-ui>\n </list-ui>\n </section>\n <footer divider>\n <button-ui slot=\"action\" text=\"Clear all recents\" variant=\"ghost\" size=\"sm\" icon
|
|
9
|
+
"html": "<card-ui style=\"max-width: 360px;\">\n <header>\n <span slot=\"heading\" variant=\"section\">Recent</span>\n </header>\n <section bleed>\n <list-ui divider contained>\n <list-item-ui text=\"OKLCH tokens\">\n <icon-ui slot=\"icon\" name=\"clock-counter-clockwise\" size=\"sm\"></icon-ui>\n <button-ui slot=\"action\" icon=\"x\" variant=\"ghost\" size=\"sm\" aria-label=\"Dismiss\"></button-ui>\n </list-item-ui>\n <list-item-ui text=\"primitive audit\">\n <icon-ui slot=\"icon\" name=\"clock-counter-clockwise\" size=\"sm\"></icon-ui>\n <button-ui slot=\"action\" icon=\"x\" variant=\"ghost\" size=\"sm\" aria-label=\"Dismiss\"></button-ui>\n </list-item-ui>\n <list-item-ui text=\"drawer-ui safari fix\">\n <icon-ui slot=\"icon\" name=\"clock-counter-clockwise\" size=\"sm\"></icon-ui>\n <button-ui slot=\"action\" icon=\"x\" variant=\"ghost\" size=\"sm\" aria-label=\"Dismiss\"></button-ui>\n </list-item-ui>\n <list-item-ui text=\"@scope hover bug\">\n <icon-ui slot=\"icon\" name=\"clock-counter-clockwise\" size=\"sm\"></icon-ui>\n <button-ui slot=\"action\" icon=\"x\" variant=\"ghost\" size=\"sm\" aria-label=\"Dismiss\"></button-ui>\n </list-item-ui>\n </list-ui>\n </section>\n <footer divider>\n <button-ui slot=\"action\" text=\"Clear all recents\" variant=\"ghost\" size=\"sm\" icon=\"trash\"></button-ui>\n </footer>\n </card-ui>",
|
|
10
10
|
"source": "packages/web-components/patterns/search-discovery/search-discovery.examples.html",
|
|
11
11
|
"metadata": {
|
|
12
12
|
"domain": "data",
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"discovery"
|
|
25
25
|
]
|
|
26
26
|
},
|
|
27
|
-
"captured_at": "2026-
|
|
27
|
+
"captured_at": "2026-08-19T03:56:11.704Z",
|
|
28
28
|
"template": [
|
|
29
29
|
{
|
|
30
30
|
"id": "text",
|
|
@@ -164,6 +164,7 @@
|
|
|
164
164
|
"id": "button-4",
|
|
165
165
|
"component": "Button",
|
|
166
166
|
"slot": "action",
|
|
167
|
+
"icon": "trash",
|
|
167
168
|
"size": "sm",
|
|
168
169
|
"text": "Clear all recents",
|
|
169
170
|
"variant": "ghost"
|
|
@@ -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\">Saved views</span>\n <text-ui slot=\"description\" color=\"subtle\">5 views · last edited 2 days ago</text-ui>\n <button-ui slot=\"action\" text=\"Save current view\" variant=\"primary\" size=\"sm\" icon
|
|
9
|
+
"html": "<card-ui>\n <header>\n <span slot=\"heading\" variant=\"section\">Saved views</span>\n <text-ui slot=\"description\" color=\"subtle\">5 views · last edited 2 days ago</text-ui>\n <button-ui slot=\"action\" text=\"Save current view\" variant=\"primary\" size=\"sm\" icon=\"bookmark-simple\"></button-ui>\n </header>\n <section bleed>\n <list-ui divider contained>\n <list-item-ui>\n <row-ui gap=\"3\" align=\"start\">\n <col-ui gap=\"1\" grow>\n <text-ui strong>My open issues</text-ui>\n <row-ui gap=\"1\" wrap>\n <tag-ui>assignee=me</tag-ui>\n <tag-ui>status=open</tag-ui>\n </row-ui>\n </col-ui>\n <text-ui color=\"subtle\" size=\"sm\">12 results · 3 min ago</text-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"3\" align=\"start\">\n <col-ui gap=\"1\" grow>\n <text-ui strong>Q2 customer escalations</text-ui>\n <row-ui gap=\"1\" wrap>\n <tag-ui>label=customer</tag-ui>\n <tag-ui>priority=p1</tag-ui>\n <tag-ui>created≥2026-04-01</tag-ui>\n </row-ui>\n </col-ui>\n <text-ui color=\"subtle\" size=\"sm\">7 results · today</text-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"3\" align=\"start\">\n <col-ui gap=\"1\" grow>\n <text-ui strong>Stale PRs</text-ui>\n <row-ui gap=\"1\" wrap>\n <tag-ui>type=pr</tag-ui>\n <tag-ui>updated<30d</tag-ui>\n <tag-ui>status=open</tag-ui>\n </row-ui>\n </col-ui>\n <text-ui color=\"subtle\" size=\"sm\">23 results · 1 hour ago</text-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"3\" align=\"start\">\n <col-ui gap=\"1\" grow>\n <text-ui strong>Recent docs from team</text-ui>\n <row-ui gap=\"1\" wrap>\n <tag-ui>type=doc</tag-ui>\n <tag-ui>author∈team</tag-ui>\n <tag-ui>edited≤7d</tag-ui>\n </row-ui>\n </col-ui>\n <text-ui color=\"subtle\" size=\"sm\">31 results · 4 hours ago</text-ui>\n </row-ui>\n </list-item-ui>\n </list-ui>\n </section>\n </card-ui>",
|
|
10
10
|
"source": "packages/web-components/patterns/search-discovery/search-discovery.examples.html",
|
|
11
11
|
"metadata": {
|
|
12
12
|
"domain": "data",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"discovery"
|
|
27
27
|
]
|
|
28
28
|
},
|
|
29
|
-
"captured_at": "2026-08-
|
|
29
|
+
"captured_at": "2026-08-19T03:56:11.704Z",
|
|
30
30
|
"template": [
|
|
31
31
|
{
|
|
32
32
|
"id": "text",
|
|
@@ -46,6 +46,7 @@
|
|
|
46
46
|
"id": "button",
|
|
47
47
|
"component": "Button",
|
|
48
48
|
"slot": "action",
|
|
49
|
+
"icon": "bookmark-simple",
|
|
49
50
|
"size": "sm",
|
|
50
51
|
"text": "Save current view",
|
|
51
52
|
"variant": "primary"
|