@adia-ai/gen-ui 0.8.43 → 0.8.45
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 +14 -0
- package/corpus/chunk-embeddings.json +1 -1
- package/corpus/chunks/_index.json +257 -5
- package/corpus/chunks/_source-hashes.json +59 -58
- 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 +33 -8
- package/corpus/chunks/table-toolbar-chrome-only-empty.json +185 -0
- package/corpus/chunks/table-with-toolbar-in-card-header.json +89 -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 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"
|
|
@@ -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\">Audit log</span>\n <text-ui slot=\"description\" color=\"subtle\">Last 90 days · admin actions only</text-ui>\n <row-ui slot=\"action\" gap=\"2\" align=\"center\">\n <select-ui name=\"actor\" style=\"min-width: 8rem;\">\n <option value=\"\">All actors</option>\n <option value=\"kim\">kim@example.com</option>\n <option value=\"alex\">alex@example.com</option>\n <option value=\"bot\">automation-bot</option>\n </select-ui>\n <select-ui name=\"verb\" style=\"min-width: 8rem;\">\n <option value=\"\">All actions</option>\n <option value=\"create\">create</option>\n <option value=\"update\">update</option>\n <option value=\"delete\">delete</option>\n </select-ui>\n </row-ui>\n </header>\n <section bleed>\n <table-ui frameless id=\"audit-log-table\"></table-ui>\n </section>\n <footer divider>\n <text-ui color=\"subtle\" size=\"sm\">Showing 8 of 247 events</text-ui>\n <row-ui slot=\"action\" gap=\"2\">\n <button-ui text=\"Export\" variant=\"ghost\" size=\"sm\" icon
|
|
9
|
+
"html": "<card-ui>\n <header>\n <span slot=\"heading\" variant=\"section\">Audit log</span>\n <text-ui slot=\"description\" color=\"subtle\">Last 90 days · admin actions only</text-ui>\n <row-ui slot=\"action\" gap=\"2\" align=\"center\">\n <select-ui name=\"actor\" style=\"min-width: 8rem;\">\n <option value=\"\">All actors</option>\n <option value=\"kim\">kim@example.com</option>\n <option value=\"alex\">alex@example.com</option>\n <option value=\"bot\">automation-bot</option>\n </select-ui>\n <select-ui name=\"verb\" style=\"min-width: 8rem;\">\n <option value=\"\">All actions</option>\n <option value=\"create\">create</option>\n <option value=\"update\">update</option>\n <option value=\"delete\">delete</option>\n </select-ui>\n </row-ui>\n </header>\n <section bleed>\n <table-ui frameless id=\"audit-log-table\"></table-ui>\n </section>\n <footer divider>\n <text-ui color=\"subtle\" size=\"sm\">Showing 8 of 247 events</text-ui>\n <row-ui slot=\"action\" gap=\"2\">\n <button-ui text=\"Export\" variant=\"ghost\" size=\"sm\" icon=\"download-simple\"></button-ui>\n <button-ui text=\"Load older\" variant=\"ghost\" size=\"sm\"></button-ui>\n </row-ui>\n </footer>\n </card-ui>",
|
|
10
10
|
"source": "packages/web-components/patterns/audit-log/audit-log.examples.html",
|
|
11
11
|
"metadata": {
|
|
12
12
|
"domain": "data",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"trail"
|
|
31
31
|
]
|
|
32
32
|
},
|
|
33
|
-
"captured_at": "2026-
|
|
33
|
+
"captured_at": "2026-08-19T03:56:11.704Z",
|
|
34
34
|
"template": [
|
|
35
35
|
{
|
|
36
36
|
"id": "text",
|
|
@@ -135,6 +135,7 @@
|
|
|
135
135
|
{
|
|
136
136
|
"id": "button",
|
|
137
137
|
"component": "Button",
|
|
138
|
+
"icon": "download-simple",
|
|
138
139
|
"size": "sm",
|
|
139
140
|
"text": "Export",
|
|
140
141
|
"variant": "ghost"
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"auth-invite-actions"
|
|
43
43
|
],
|
|
44
44
|
"attrs": {},
|
|
45
|
-
"html": "<section>\n <col-ui gap=\"6\">\n <card-ui><!-- nested: auth-invite-team-card --></card-ui>\n\n <text-ui align=\"center\"
|
|
45
|
+
"html": "<section>\n <col-ui gap=\"6\">\n <card-ui><!-- nested: auth-invite-team-card --></card-ui>\n\n <text-ui text-align=\"center\">You'll sign in as <strong color=\"accent\">kim@acme.com</strong>. As a Member you can read and write all team workspaces.</text-ui\n >\n\n <col-ui gap=\"2\" size=\"lg\"><!-- nested: auth-invite-actions --></col-ui>\n\n <text-ui text-align=\"center\" color=\"subtle\" size=\"sm\">\n Not the right account? <a href=\"/site/examples/auth/sign-in\">Sign in with a different one</a>\n </text-ui>\n </col-ui>\n </section>"
|
|
46
46
|
},
|
|
47
47
|
{
|
|
48
48
|
"page": "/apps/user-flow/app/auth/account-deleted/account-deleted.contents.html",
|
|
@@ -150,7 +150,7 @@
|
|
|
150
150
|
"auth-mfa-fallback-actions"
|
|
151
151
|
],
|
|
152
152
|
"attrs": {},
|
|
153
|
-
"html": "<section>\n <col-ui gap=\"6\">\n <col-ui align=\"center\">\n <otp-input-ui size=\"lg\" length=\"6\"
|
|
153
|
+
"html": "<section>\n <col-ui gap=\"6\">\n <col-ui align=\"center\">\n <otp-input-ui size=\"lg\" length=\"6\"></otp-input-ui>\n </col-ui>\n\n <text-ui text-align=\"center\">\n <a href=\"/site/examples/auth/sign-in/mfa/recovery\">Use a backup code instead</a>\n </text-ui>\n\n <divider-ui label=\"or\"></divider-ui>\n\n <col-ui gap=\"2\"><!-- nested: auth-mfa-fallback-actions --></col-ui>\n\n <text-ui text-align=\"center\">\n <a href=\"/site/examples/auth/sign-in\">← Sign out</a>\n </text-ui>\n </col-ui>\n </section>"
|
|
154
154
|
},
|
|
155
155
|
{
|
|
156
156
|
"page": "/apps/user-flow/app/auth/sign-in/mfa/recovery/recovery.contents.html",
|
|
@@ -201,7 +201,7 @@
|
|
|
201
201
|
"auth-mfa-enrollment-submit"
|
|
202
202
|
],
|
|
203
203
|
"attrs": {},
|
|
204
|
-
"html": "<section>\n <col-ui gap=\"6\">\n <col-ui align=\"center\" gap=\"3\">\n <div data-auth-qr aria-label=\"Authenticator QR code (placeholder)\">\n <icon-ui name=\"qr-code\" size=\"96\"></icon-ui>\n </div>\n <col-ui gap=\"2\" align=\"center\">\n <text-ui color=\"subtle\" size=\"sm\">Or enter manually:</text-ui>\n <code>JBSW Y3DP EHPK 3PXP</code>\n </col-ui>\n </col-ui>\n\n <col-ui align=\"center\" gap=\"2\">\n <otp-input-ui size=\"lg\" length=\"6\"
|
|
204
|
+
"html": "<section>\n <col-ui gap=\"6\">\n <col-ui align=\"center\" gap=\"3\">\n <div data-auth-qr aria-label=\"Authenticator QR code (placeholder)\">\n <icon-ui name=\"qr-code\" size=\"96\"></icon-ui>\n </div>\n <col-ui gap=\"2\" align=\"center\">\n <text-ui color=\"subtle\" size=\"sm\">Or enter manually:</text-ui>\n <code>JBSW Y3DP EHPK 3PXP</code>\n </col-ui>\n </col-ui>\n\n <col-ui align=\"center\" gap=\"2\">\n <otp-input-ui size=\"lg\" length=\"6\" name=\"totp\"></otp-input-ui>\n <text-ui color=\"subtle\" size=\"sm\">From Google Authenticator, 1Password, Authy, or similar.</text-ui>\n </col-ui>\n\n <form size=\"lg\" action=\"/site/examples/dashboard\" method=\"get\"><!-- nested: auth-mfa-enrollment-submit --></form>\n\n <alert-ui variant=\"info\" icon=\"key\">\n <span slot=\"content\"\n ><strong>Save your backup codes.</strong> You'll see 10 single-use codes after verifying — store them somewhere safe in case you lose your\n device.</span\n >\n </alert-ui>\n\n <text-ui text-align=\"center\" color=\"subtle\">\n <a href=\"/site/examples/dashboard\">Skip for now — set up later in settings</a>\n </text-ui>\n </col-ui>\n </section>"
|
|
205
205
|
},
|
|
206
206
|
{
|
|
207
207
|
"page": "/apps/user-flow/app/auth/sign-up/profile/profile.contents.html",
|
|
@@ -240,10 +240,10 @@
|
|
|
240
240
|
"slots": [],
|
|
241
241
|
"nested": [],
|
|
242
242
|
"attrs": {},
|
|
243
|
-
"html": "<section>\n <col-ui gap=\"6\">\n <col-ui align=\"center\">\n <otp-input-ui size=\"lg\" length=\"6\"
|
|
243
|
+
"html": "<section>\n <col-ui gap=\"6\">\n <col-ui align=\"center\">\n <otp-input-ui size=\"lg\" length=\"6\"></otp-input-ui>\n </col-ui>\n\n <alert-ui variant=\"warning\" icon=\"warning\">\n <span slot=\"content\">\n Already have an account? If you're still waiting on your code,\n <a href=\"/site/examples/auth/sign-in\">try signing in instead</a>.\n </span>\n </alert-ui>\n\n <text-ui text-align=\"center\">\n <a href=\"/site/examples/auth/sign-up\">← Back</a>\n </text-ui>\n\n <text-ui text-align=\"center\" color=\"subtle\"> Already have an account? <a href=\"/site/examples/auth/sign-in\">Sign in</a> </text-ui>\n </col-ui>\n </section>"
|
|
244
244
|
}
|
|
245
245
|
],
|
|
246
|
-
"captured_at": "2026-
|
|
246
|
+
"captured_at": "2026-08-19T03:56:11.704Z",
|
|
247
247
|
"metadata": {
|
|
248
248
|
"domain": "auth",
|
|
249
249
|
"description": "Auth card body section — inner scrollable content area of the centered auth card shell.",
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"attrs": {
|
|
9
9
|
"size": "lg"
|
|
10
10
|
},
|
|
11
|
-
"html": "<form size=\"lg\">\n <col-ui gap=\"4\">\n <input-ui
|
|
11
|
+
"html": "<form size=\"lg\">\n <col-ui gap=\"4\">\n <input-ui label=\"Backup code\" name=\"recovery_code\" autocomplete=\"one-time-code\" placeholder=\"abcd-efgh\" error=\"Codes look like abcd-efgh. Each code works once.\" required></input-ui>\n <button-ui text=\"Verify and continue\" variant=\"primary\" type=\"submit\"></button-ui>\n </col-ui>\n </form>",
|
|
12
12
|
"source": "apps/user-flow/app/auth/sign-in/mfa/recovery/recovery.contents.html",
|
|
13
13
|
"metadata": {
|
|
14
14
|
"domain": "auth",
|
|
@@ -23,13 +23,14 @@
|
|
|
23
23
|
"alternative"
|
|
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": "recovery-code",
|
|
30
30
|
"component": "Input",
|
|
31
31
|
"required": true,
|
|
32
32
|
"autocomplete": "one-time-code",
|
|
33
|
+
"error": "Codes look like abcd-efgh. Each code works once.",
|
|
33
34
|
"label": "Backup code",
|
|
34
35
|
"name": "recovery_code",
|
|
35
36
|
"placeholder": "abcd-efgh"
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"attrs": {
|
|
9
9
|
"size": "lg"
|
|
10
10
|
},
|
|
11
|
-
"html": "<form size=\"lg\">\n <col-ui gap=\"4\">\n <input-ui
|
|
11
|
+
"html": "<form size=\"lg\">\n <col-ui gap=\"4\">\n <input-ui label=\"New password\" type=\"password\" name=\"password\" autocomplete=\"new-password\" placeholder=\"••••••••••••\" minlength=\"12\" error=\"At least 12 characters, with a number and a symbol.\" required></input-ui>\n <input-ui\n label=\"Confirm password\"\n type=\"password\"\n name=\"password_confirm\"\n autocomplete=\"new-password\"\n placeholder=\"••••••••••••\"\n minlength=\"12\"\n required\n ></input-ui>\n <button-ui text=\"Save and sign in\" variant=\"primary\" type=\"submit\"></button-ui>\n </col-ui>\n </form>",
|
|
12
12
|
"source": "apps/user-flow/app/auth/reset-password/reset-password.contents.html",
|
|
13
13
|
"metadata": {
|
|
14
14
|
"domain": "auth",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"strength"
|
|
24
24
|
]
|
|
25
25
|
},
|
|
26
|
-
"captured_at": "2026-08-
|
|
26
|
+
"captured_at": "2026-08-19T03:56:11.704Z",
|
|
27
27
|
"template": [
|
|
28
28
|
{
|
|
29
29
|
"id": "password",
|
|
@@ -31,6 +31,7 @@
|
|
|
31
31
|
"type": "password",
|
|
32
32
|
"required": true,
|
|
33
33
|
"autocomplete": "new-password",
|
|
34
|
+
"error": "At least 12 characters, with a number and a symbol.",
|
|
34
35
|
"label": "New password",
|
|
35
36
|
"minlength": 12,
|
|
36
37
|
"name": "password",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"layout": "card"
|
|
38
38
|
}
|
|
39
39
|
},
|
|
40
|
-
"captured_at": "2026-08-
|
|
40
|
+
"captured_at": "2026-08-19T03:56:11.704Z",
|
|
41
41
|
"template": [
|
|
42
42
|
{
|
|
43
43
|
"id": "adia-mark",
|
|
@@ -103,6 +103,7 @@
|
|
|
103
103
|
"type": "password",
|
|
104
104
|
"required": true,
|
|
105
105
|
"autocomplete": "new-password",
|
|
106
|
+
"error": "At least 12 characters, with a number and a symbol.",
|
|
106
107
|
"label": "New password",
|
|
107
108
|
"minlength": 12,
|
|
108
109
|
"name": "password",
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"attrs": {
|
|
9
9
|
"size": "lg"
|
|
10
10
|
},
|
|
11
|
-
"html": "<form size=\"lg\">\n <col-ui gap=\"4\">\n <input-ui
|
|
11
|
+
"html": "<form size=\"lg\">\n <col-ui gap=\"4\">\n <input-ui label=\"Full name\" name=\"name\" autocomplete=\"name\" placeholder=\"Jane Doe\" error=\"Shown to teammates and on shared work.\" required></input-ui>\n <input-ui label=\"Display name\" name=\"username\" autocomplete=\"username\" prefix=\"@\" placeholder=\"janedoe\" error=\"Used for @mentions and signed comments.\" required></input-ui>\n <button-ui text=\"Continue\" variant=\"primary\" type=\"submit\"></button-ui>\n </col-ui>\n </form>",
|
|
12
12
|
"source": "apps/user-flow/app/auth/sign-up/profile/profile.contents.html",
|
|
13
13
|
"metadata": {
|
|
14
14
|
"domain": "auth",
|
|
@@ -23,13 +23,14 @@
|
|
|
23
23
|
"onboarding"
|
|
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": "name",
|
|
30
30
|
"component": "Input",
|
|
31
31
|
"required": true,
|
|
32
32
|
"autocomplete": "name",
|
|
33
|
+
"error": "Shown to teammates and on shared work.",
|
|
33
34
|
"label": "Full name",
|
|
34
35
|
"name": "name",
|
|
35
36
|
"placeholder": "Jane Doe"
|
|
@@ -39,6 +40,7 @@
|
|
|
39
40
|
"component": "Input",
|
|
40
41
|
"required": true,
|
|
41
42
|
"autocomplete": "username",
|
|
43
|
+
"error": "Used for @mentions and signed comments.",
|
|
42
44
|
"label": "Display name",
|
|
43
45
|
"name": "username",
|
|
44
46
|
"placeholder": "janedoe",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"avatar"
|
|
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": "adia-mark",
|
|
@@ -82,6 +82,7 @@
|
|
|
82
82
|
"component": "Input",
|
|
83
83
|
"required": true,
|
|
84
84
|
"autocomplete": "name",
|
|
85
|
+
"error": "Shown to teammates and on shared work.",
|
|
85
86
|
"label": "Full name",
|
|
86
87
|
"name": "name",
|
|
87
88
|
"placeholder": "Jane Doe"
|
|
@@ -91,6 +92,7 @@
|
|
|
91
92
|
"component": "Input",
|
|
92
93
|
"required": true,
|
|
93
94
|
"autocomplete": "username",
|
|
95
|
+
"error": "Used for @mentions and signed comments.",
|
|
94
96
|
"label": "Display name",
|
|
95
97
|
"name": "username",
|
|
96
98
|
"placeholder": "janedoe",
|