@adia-ai/gen-ui 0.8.39 → 0.8.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/README.md +1 -1
  3. package/compose/transpiler/transpiler-maps.js +54 -4
  4. package/corpus/chunk-embeddings.json +1 -1
  5. package/corpus/chunks/_index.json +288 -6
  6. package/corpus/chunks/_source-hashes.json +57 -57
  7. package/corpus/chunks/admin-shell-rounded-borderless.json +2 -1
  8. package/corpus/chunks/admin-topbar-search.json +4 -4
  9. package/corpus/chunks/agent-activity-feed.json +5 -5
  10. package/corpus/chunks/agent-prompt-library-grid.json +4 -4
  11. package/corpus/chunks/agent-rate-limit.json +1 -1
  12. package/corpus/chunks/agent-reasoning-collapsed.json +7 -7
  13. package/corpus/chunks/auth-new-password-form.json +1 -1
  14. package/corpus/chunks/auth-new-password.json +1 -1
  15. package/corpus/chunks/billing-overview.json +14 -14
  16. package/corpus/chunks/billing-progress-label.json +16 -16
  17. package/corpus/chunks/conversion-funnel-4-step-funnel.json +11 -11
  18. package/corpus/chunks/conversion-funnel-6step.json +17 -17
  19. package/corpus/chunks/conversion-funnel-wide-summary.json +11 -11
  20. package/corpus/chunks/conversion-funnel-with-segment-compare.json +11 -11
  21. package/corpus/chunks/dashboard-admin-page.json +2 -2
  22. package/corpus/chunks/dashboard-conversion-panel.json +10 -10
  23. package/corpus/chunks/dashboard-funnel.json +11 -11
  24. package/corpus/chunks/dashboard-overview-panel.json +13 -13
  25. package/corpus/chunks/dashboard-storage-card.json +14 -14
  26. package/corpus/chunks/dashboard-team-actions-storage.json +13 -13
  27. package/corpus/chunks/date-range-picker-canonical.json +51 -0
  28. package/corpus/chunks/date-range-picker-comparison.json +50 -0
  29. package/corpus/chunks/date-time-picker-form.json +5 -6
  30. package/corpus/chunks/drawer-report.json +5 -6
  31. package/corpus/chunks/filter-bar-filter-bar-with-table.json +4 -4
  32. package/corpus/chunks/form-system-live-demo.json +1 -1
  33. package/corpus/chunks/image-thumbnail-grid.json +5 -5
  34. package/corpus/chunks/inline-dialog-schedule.json +4 -6
  35. package/corpus/chunks/list-window-chat-thread.json +76 -0
  36. package/corpus/chunks/list-window-loading.json +39 -0
  37. package/corpus/chunks/loading-skeleton-placeholder.json +11 -11
  38. package/corpus/chunks/map-with-location-list.json +3 -3
  39. package/corpus/chunks/members-active-table-search-filter.json +4 -6
  40. package/corpus/chunks/patient-visit-shell.json +1 -1
  41. package/corpus/chunks/permissions-share-people.json +4 -4
  42. package/corpus/chunks/playground-app-shell.json +2 -1
  43. package/corpus/chunks/progress-tracker-milestones.json +1 -1
  44. package/corpus/chunks/rating-stars-review-summary.json +1 -1
  45. package/corpus/chunks/real-time-metrics-dashboard.json +1 -1
  46. package/corpus/chunks/search-with-filters.json +4 -4
  47. package/corpus/chunks/spinner-button-saving.json +50 -0
  48. package/corpus/chunks/spinner-button-uploading.json +49 -0
  49. package/corpus/chunks/spinner-centered-card.json +36 -0
  50. package/corpus/chunks/spinner-typing-indicator.json +41 -0
  51. package/corpus/chunks/time-picker-appointment-form.json +126 -0
  52. package/corpus/chunks/time-picker-min-max.json +50 -0
  53. package/corpus/chunks/timeline-events.json +3 -3
  54. package/corpus/chunks/timezone-selector-preview.json +3 -4
  55. package/corpus/chunks/usage-quota-meter-card.json +1 -1
  56. package/corpus/chunks/user-onboarding-checklist.json +1 -1
  57. package/corpus/chunks/video-player-controls.json +1 -1
  58. package/corpus/manifest.json +4 -4
  59. package/package.json +1 -1
  60. package/retrieval/README.md +1 -1
  61. package/retrieval/catalog.js +67 -40
@@ -6,7 +6,7 @@
6
6
  "slots": [],
7
7
  "nested": [],
8
8
  "attrs": {},
9
- "html": "<card-ui>\n <header>\n <avatar-ui slot=\"icon\" icon=\"star\" size=\"sm\"></avatar-ui>\n <h3>Pro plan</h3>\n <p slot=\"description\">$49/month · Next invoice May 14, 2026</p>\n <button-ui slot=\"action\" text=\"Upgrade\" variant=\"primary\" size=\"sm\" icon=\"arrow-up\"></button-ui>\n </header>\n <section>\n <col-ui gap=\"4\">\n <col-ui gap=\"2\">\n <text-ui strong>Usage this cycle</text-ui>\n <progress-row-ui label=\"API calls\" value=\"68\" meta=\"68,000 / 100,000\"></progress-row-ui>\n <progress-row-ui label=\"Storage\" value=\"42\" meta=\"42 GB / 100 GB\"></progress-row-ui>\n <progress-row-ui label=\"Team seats\" value=\"75\" meta=\"3 / 4 seats\"></progress-row-ui>\n <progress-row-ui label=\"Workflow runs\" value=\"91\" meta=\"91 / 100\"></progress-row-ui>\n </col-ui>\n <field-ui label=\"Billing interval\">\n <segmented-ui value=\"monthly\">\n <segment-ui value=\"monthly\" text=\"Monthly\"></segment-ui>\n <segment-ui value=\"annual\" text=\"Annual · 2 months free\"></segment-ui>\n </segmented-ui>\n </field-ui>\n </col-ui>\n </section>\n <footer>\n <row-ui gap=\"2\">\n <button-ui text=\"View invoices\" variant=\"ghost\"></button-ui>\n <button-ui text=\"Change plan\" variant=\"outline\"></button-ui>\n </row-ui>\n </footer>\n</card-ui>",
9
+ "html": "<card-ui>\n <header>\n <avatar-ui slot=\"icon\" icon=\"star\" size=\"sm\"></avatar-ui>\n <h3>Pro plan</h3>\n <p slot=\"description\">$49/month · Next invoice May 14, 2026</p>\n <button-ui slot=\"action\" text=\"Upgrade\" variant=\"primary\" size=\"sm\" icon=\"arrow-up\"></button-ui>\n </header>\n <section>\n <col-ui gap=\"4\">\n <col-ui gap=\"2\">\n <text-ui strong>Usage this cycle</text-ui>\n <progress-ui label=\"API calls\" value=\"68\" meta=\"68,000 / 100,000\"></progress-ui>\n <progress-ui label=\"Storage\" value=\"42\" meta=\"42 GB / 100 GB\"></progress-ui>\n <progress-ui label=\"Team seats\" value=\"75\" meta=\"3 / 4 seats\"></progress-ui>\n <progress-ui label=\"Workflow runs\" value=\"91\" meta=\"91 / 100\"></progress-ui>\n </col-ui>\n <field-ui label=\"Billing interval\">\n <segmented-ui value=\"monthly\">\n <segment-ui value=\"monthly\" text=\"Monthly\"></segment-ui>\n <segment-ui value=\"annual\" text=\"Annual · 2 months free\"></segment-ui>\n </segmented-ui>\n </field-ui>\n </col-ui>\n </section>\n <footer>\n <row-ui gap=\"2\">\n <button-ui text=\"View invoices\" variant=\"ghost\"></button-ui>\n <button-ui text=\"Change plan\" variant=\"outline\"></button-ui>\n </row-ui>\n </footer>\n</card-ui>",
10
10
  "source": "apps/saas/app/admin-dashboard/admin-dashboard.contents.html",
11
11
  "metadata": {
12
12
  "domain": "billing",
@@ -29,7 +29,7 @@
29
29
  "subscription"
30
30
  ]
31
31
  },
32
- "captured_at": "2026-07-17T20:08:04.842Z",
32
+ "captured_at": "2026-08-17T04:33:27.534Z",
33
33
  "template": [
34
34
  {
35
35
  "id": "avatar",
@@ -77,29 +77,29 @@
77
77
  "textContent": "Usage this cycle"
78
78
  },
79
79
  {
80
- "id": "progress-row",
81
- "component": "ProgressRow",
80
+ "id": "progress",
81
+ "component": "Progress",
82
82
  "label": "API calls",
83
83
  "meta": "68,000 / 100,000",
84
84
  "value": 68
85
85
  },
86
86
  {
87
- "id": "progress-row-2",
88
- "component": "ProgressRow",
87
+ "id": "progress-2",
88
+ "component": "Progress",
89
89
  "label": "Storage",
90
90
  "meta": "42 GB / 100 GB",
91
91
  "value": 42
92
92
  },
93
93
  {
94
- "id": "progress-row-3",
95
- "component": "ProgressRow",
94
+ "id": "progress-3",
95
+ "component": "Progress",
96
96
  "label": "Team seats",
97
97
  "meta": "3 / 4 seats",
98
98
  "value": 75
99
99
  },
100
100
  {
101
- "id": "progress-row-4",
102
- "component": "ProgressRow",
101
+ "id": "progress-4",
102
+ "component": "Progress",
103
103
  "label": "Workflow runs",
104
104
  "meta": "91 / 100",
105
105
  "value": 91
@@ -110,10 +110,10 @@
110
110
  "gap": "2",
111
111
  "children": [
112
112
  "text-3",
113
- "progress-row",
114
- "progress-row-2",
115
- "progress-row-3",
116
- "progress-row-4"
113
+ "progress",
114
+ "progress-2",
115
+ "progress-3",
116
+ "progress-4"
117
117
  ]
118
118
  },
119
119
  {
@@ -8,18 +8,18 @@
8
8
  "attrs": {
9
9
  "data-col": ""
10
10
  },
11
- "html": "<div data-col>\n <col-ui gap=\"4\">\n <progress-row-ui label=\"API calls\" value=\"68\" meta=\"680k / 1M\"></progress-row-ui>\n <progress-row-ui label=\"Storage\" value=\"42\" meta=\"42 GB / 100 GB\"></progress-row-ui>\n <progress-row-ui label=\"Team seats\" value=\"75\" meta=\"6 / 8\"></progress-row-ui>\n <progress-row-ui label=\"Workflow runs\" value=\"91\" meta=\"18,200 / 20,000\"></progress-row-ui>\n </col-ui>\n <alert-ui variant=\"warning\" icon=\"warning\" text=\"Workflow runs are approaching your plan limit. Upgrade to avoid throttling.\"></alert-ui>\n </div>",
11
+ "html": "<div data-col>\n <col-ui gap=\"4\">\n <progress-ui label=\"API calls\" value=\"68\" meta=\"680k / 1M\"></progress-ui>\n <progress-ui label=\"Storage\" value=\"42\" meta=\"42 GB / 100 GB\"></progress-ui>\n <progress-ui label=\"Team seats\" value=\"75\" meta=\"6 / 8\"></progress-ui>\n <progress-ui label=\"Workflow runs\" value=\"91\" meta=\"18,200 / 20,000\"></progress-ui>\n </col-ui>\n <alert-ui variant=\"warning\" icon=\"warning\" text=\"Workflow runs are approaching your plan limit. Upgrade to avoid throttling.\"></alert-ui>\n </div>",
12
12
  "source": "apps/saas/app/billing/billing.contents.html",
13
13
  "metadata": {
14
14
  "domain": "settings",
15
- "description": "Usage quota section — labeled progress bars with percentage and value/total meta for each metered resource (API calls, storage, team seats, workflow runs). Progress bar with label pattern using progress-row-ui.",
15
+ "description": "Usage quota section — labeled progress bars with percentage and value/total meta for each metered resource (API calls, storage, team seats, workflow runs). Progress bar with label pattern using progress-ui[label].",
16
16
  "keywords": [
17
17
  "progress",
18
18
  "bar",
19
19
  "label",
20
20
  "usage",
21
21
  "quota",
22
- "progress-row-ui",
22
+ "progress-ui",
23
23
  "labeled",
24
24
  "progress",
25
25
  "metered",
@@ -40,32 +40,32 @@
40
40
  "gauge"
41
41
  ]
42
42
  },
43
- "captured_at": "2026-07-17T20:08:04.842Z",
43
+ "captured_at": "2026-08-17T04:33:27.534Z",
44
44
  "template": [
45
45
  {
46
- "id": "progress-row",
47
- "component": "ProgressRow",
46
+ "id": "progress",
47
+ "component": "Progress",
48
48
  "label": "API calls",
49
49
  "meta": "680k / 1M",
50
50
  "value": 68
51
51
  },
52
52
  {
53
- "id": "progress-row-2",
54
- "component": "ProgressRow",
53
+ "id": "progress-2",
54
+ "component": "Progress",
55
55
  "label": "Storage",
56
56
  "meta": "42 GB / 100 GB",
57
57
  "value": 42
58
58
  },
59
59
  {
60
- "id": "progress-row-3",
61
- "component": "ProgressRow",
60
+ "id": "progress-3",
61
+ "component": "Progress",
62
62
  "label": "Team seats",
63
63
  "meta": "6 / 8",
64
64
  "value": 75
65
65
  },
66
66
  {
67
- "id": "progress-row-4",
68
- "component": "ProgressRow",
67
+ "id": "progress-4",
68
+ "component": "Progress",
69
69
  "label": "Workflow runs",
70
70
  "meta": "18,200 / 20,000",
71
71
  "value": 91
@@ -75,10 +75,10 @@
75
75
  "component": "Column",
76
76
  "gap": "4",
77
77
  "children": [
78
- "progress-row",
79
- "progress-row-2",
80
- "progress-row-3",
81
- "progress-row-4"
78
+ "progress",
79
+ "progress-2",
80
+ "progress-3",
81
+ "progress-4"
82
82
  ]
83
83
  },
84
84
  {
@@ -6,7 +6,7 @@
6
6
  "slots": [],
7
7
  "nested": [],
8
8
  "attrs": {},
9
- "html": "<card-ui style=\"max-width: 560px;\">\n <header>\n <h3>Conversion funnel</h3>\n <text-ui slot=\"description\" color=\"subtle\">Visit → Sign up → Activate → Convert</text-ui>\n </header>\n <section>\n <col-ui gap=\"3\">\n <row-ui align=\"center\" gap=\"3\">\n <col-ui gap=\"0\" grow>\n <text-ui strong>Visited landing page</text-ui>\n <text-ui color=\"subtle\">28,432 visitors</text-ui>\n </col-ui>\n <text-ui strong>100%</text-ui>\n </row-ui>\n <progress-row-ui label=\"Signed up\" value=\"42\" meta=\"11,942 · 42%\"></progress-row-ui>\n <progress-row-ui label=\"Activated\" value=\"28\" meta=\"7,961 · 28%\"></progress-row-ui>\n <progress-row-ui label=\"Converted to paid\" value=\"8\" meta=\"2,274 · 8.0%\"></progress-row-ui>\n </col-ui>\n </section>\n </card-ui>",
9
+ "html": "<card-ui style=\"max-width: 560px;\">\n <header>\n <h3>Conversion funnel</h3>\n <text-ui slot=\"description\" color=\"subtle\">Visit → Sign up → Activate → Convert</text-ui>\n </header>\n <section>\n <col-ui gap=\"3\">\n <row-ui align=\"center\" gap=\"3\">\n <col-ui gap=\"0\" grow>\n <text-ui strong>Visited landing page</text-ui>\n <text-ui color=\"subtle\">28,432 visitors</text-ui>\n </col-ui>\n <text-ui strong>100%</text-ui>\n </row-ui>\n <progress-ui label=\"Signed up\" value=\"42\" meta=\"11,942 · 42%\"></progress-ui>\n <progress-ui label=\"Activated\" value=\"28\" meta=\"7,961 · 28%\"></progress-ui>\n <progress-ui label=\"Converted to paid\" value=\"8\" meta=\"2,274 · 8.0%\"></progress-ui>\n </col-ui>\n </section>\n </card-ui>",
10
10
  "source": "packages/web-components/patterns/conversion-funnel/conversion-funnel.examples.html",
11
11
  "metadata": {
12
12
  "domain": "dashboard",
@@ -27,7 +27,7 @@
27
27
  "pipeline"
28
28
  ]
29
29
  },
30
- "captured_at": "2026-07-29T09:15:19.217Z",
30
+ "captured_at": "2026-08-17T04:33:27.534Z",
31
31
  "template": [
32
32
  {
33
33
  "id": "text",
@@ -89,22 +89,22 @@
89
89
  ]
90
90
  },
91
91
  {
92
- "id": "progress-row",
93
- "component": "ProgressRow",
92
+ "id": "progress",
93
+ "component": "Progress",
94
94
  "label": "Signed up",
95
95
  "meta": "11,942 · 42%",
96
96
  "value": 42
97
97
  },
98
98
  {
99
- "id": "progress-row-2",
100
- "component": "ProgressRow",
99
+ "id": "progress-2",
100
+ "component": "Progress",
101
101
  "label": "Activated",
102
102
  "meta": "7,961 · 28%",
103
103
  "value": 28
104
104
  },
105
105
  {
106
- "id": "progress-row-3",
107
- "component": "ProgressRow",
106
+ "id": "progress-3",
107
+ "component": "Progress",
108
108
  "label": "Converted to paid",
109
109
  "meta": "2,274 · 8.0%",
110
110
  "value": 8
@@ -115,9 +115,9 @@
115
115
  "gap": "3",
116
116
  "children": [
117
117
  "row",
118
- "progress-row",
119
- "progress-row-2",
120
- "progress-row-3"
118
+ "progress",
119
+ "progress-2",
120
+ "progress-3"
121
121
  ]
122
122
  },
123
123
  {
@@ -6,7 +6,7 @@
6
6
  "slots": [],
7
7
  "nested": [],
8
8
  "attrs": {},
9
- "html": "<card-ui>\n <header>\n <h3>Conversion Funnel</h3>\n <p slot=\"description\">6 stages from visit to purchase</p>\n </header>\n <section>\n <col-ui gap=\"3\">\n <row-ui align=\"center\" gap=\"3\">\n <col-ui gap=\"0\" grow>\n <text-ui strong>Visited landing page</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">28,432 visitors</text-ui>\n </col-ui>\n <text-ui strong>100%</text-ui>\n </row-ui>\n <progress-row-ui label=\"Viewed pricing\" value=\"68\" meta=\"19,334 · 68%\"></progress-row-ui>\n <progress-row-ui label=\"Started trial\" value=\"42\" meta=\"11,942 · 42%\"></progress-row-ui>\n <progress-row-ui label=\"Activated\" value=\"28\" meta=\"7,961 · 28%\"></progress-row-ui>\n <progress-row-ui label=\"Used core feature\" value=\"18\" meta=\"5,118 · 18%\"></progress-row-ui>\n <progress-row-ui label=\"Upgraded to paid\" value=\"8\" meta=\"2,274 · 8.0%\"></progress-row-ui>\n </col-ui>\n </section>\n</card-ui>",
9
+ "html": "<card-ui>\n <header>\n <h3>Conversion Funnel</h3>\n <p slot=\"description\">6 stages from visit to purchase</p>\n </header>\n <section>\n <col-ui gap=\"3\">\n <row-ui align=\"center\" gap=\"3\">\n <col-ui gap=\"0\" grow>\n <text-ui strong>Visited landing page</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">28,432 visitors</text-ui>\n </col-ui>\n <text-ui strong>100%</text-ui>\n </row-ui>\n <progress-ui label=\"Viewed pricing\" value=\"68\" meta=\"19,334 · 68%\"></progress-ui>\n <progress-ui label=\"Started trial\" value=\"42\" meta=\"11,942 · 42%\"></progress-ui>\n <progress-ui label=\"Activated\" value=\"28\" meta=\"7,961 · 28%\"></progress-ui>\n <progress-ui label=\"Used core feature\" value=\"18\" meta=\"5,118 · 18%\"></progress-ui>\n <progress-ui label=\"Upgraded to paid\" value=\"8\" meta=\"2,274 · 8.0%\"></progress-ui>\n </col-ui>\n </section>\n</card-ui>",
10
10
  "source": "catalog/ui-patterns/app/conversion-funnel-6step/conversion-funnel-6step.contents.html",
11
11
  "metadata": {
12
12
  "domain": "data",
@@ -22,7 +22,7 @@
22
22
  "marketing"
23
23
  ]
24
24
  },
25
- "captured_at": "2026-07-17T20:08:04.842Z",
25
+ "captured_at": "2026-08-17T04:33:27.534Z",
26
26
  "template": [
27
27
  {
28
28
  "id": "text",
@@ -85,36 +85,36 @@
85
85
  ]
86
86
  },
87
87
  {
88
- "id": "progress-row",
89
- "component": "ProgressRow",
88
+ "id": "progress",
89
+ "component": "Progress",
90
90
  "label": "Viewed pricing",
91
91
  "meta": "19,334 · 68%",
92
92
  "value": 68
93
93
  },
94
94
  {
95
- "id": "progress-row-2",
96
- "component": "ProgressRow",
95
+ "id": "progress-2",
96
+ "component": "Progress",
97
97
  "label": "Started trial",
98
98
  "meta": "11,942 · 42%",
99
99
  "value": 42
100
100
  },
101
101
  {
102
- "id": "progress-row-3",
103
- "component": "ProgressRow",
102
+ "id": "progress-3",
103
+ "component": "Progress",
104
104
  "label": "Activated",
105
105
  "meta": "7,961 · 28%",
106
106
  "value": 28
107
107
  },
108
108
  {
109
- "id": "progress-row-4",
110
- "component": "ProgressRow",
109
+ "id": "progress-4",
110
+ "component": "Progress",
111
111
  "label": "Used core feature",
112
112
  "meta": "5,118 · 18%",
113
113
  "value": 18
114
114
  },
115
115
  {
116
- "id": "progress-row-5",
117
- "component": "ProgressRow",
116
+ "id": "progress-5",
117
+ "component": "Progress",
118
118
  "label": "Upgraded to paid",
119
119
  "meta": "2,274 · 8.0%",
120
120
  "value": 8
@@ -125,11 +125,11 @@
125
125
  "gap": "3",
126
126
  "children": [
127
127
  "row",
128
- "progress-row",
129
- "progress-row-2",
130
- "progress-row-3",
131
- "progress-row-4",
132
- "progress-row-5"
128
+ "progress",
129
+ "progress-2",
130
+ "progress-3",
131
+ "progress-4",
132
+ "progress-5"
133
133
  ]
134
134
  },
135
135
  {
@@ -6,7 +6,7 @@
6
6
  "slots": [],
7
7
  "nested": [],
8
8
  "attrs": {},
9
- "html": "<card-ui style=\"max-width: 640px;\">\n <header>\n <h3>Signup funnel</h3>\n <text-ui slot=\"description\" color=\"subtle\">Step-over-step conversion, last 7 days</text-ui>\n </header>\n <section>\n <col-ui gap=\"3\">\n <row-ui align=\"center\" gap=\"3\">\n <col-ui gap=\"0\" grow>\n <text-ui strong>Signup form viewed</text-ui>\n <text-ui color=\"subtle\">8,420 visitors</text-ui>\n </col-ui>\n <text-ui strong>100%</text-ui>\n </row-ui>\n <!-- Delta badge rides INSIDE the meta slot (gh#502): authored\n [slot=\"meta\"] keeps text + badge on the meta text line,\n instead of a sibling column centered against the whole row. -->\n <progress-row-ui label=\"Email verified\" value=\"68\">\n <span slot=\"meta\">5,726 · 68% <badge-ui text=\"−32%\" variant=\"warning\"></badge-ui></span>\n </progress-row-ui>\n <progress-row-ui label=\"Workspace created\" value=\"54\">\n <span slot=\"meta\">4,547 · 54% <badge-ui text=\"−21%\" tone=\"muted\"></badge-ui></span>\n </progress-row-ui>\n <progress-row-ui label=\"Invited a teammate\" value=\"22\">\n <span slot=\"meta\">1,852 · 22% <badge-ui text=\"−59%\" variant=\"danger\"></badge-ui></span>\n </progress-row-ui>\n </col-ui>\n </section>\n </card-ui>",
9
+ "html": "<card-ui style=\"max-width: 640px;\">\n <header>\n <h3>Signup funnel</h3>\n <text-ui slot=\"description\" color=\"subtle\">Step-over-step conversion, last 7 days</text-ui>\n </header>\n <section>\n <col-ui gap=\"3\">\n <row-ui align=\"center\" gap=\"3\">\n <col-ui gap=\"0\" grow>\n <text-ui strong>Signup form viewed</text-ui>\n <text-ui color=\"subtle\">8,420 visitors</text-ui>\n </col-ui>\n <text-ui strong>100%</text-ui>\n </row-ui>\n <!-- Delta badge rides INSIDE the meta slot (gh#502): authored\n [slot=\"meta\"] keeps text + badge on the meta text line,\n instead of a sibling column centered against the whole row. -->\n <progress-ui label=\"Email verified\" value=\"68\">\n <span slot=\"meta\">5,726 · 68% <badge-ui text=\"−32%\" variant=\"warning\"></badge-ui></span>\n </progress-ui>\n <progress-ui label=\"Workspace created\" value=\"54\">\n <span slot=\"meta\">4,547 · 54% <badge-ui text=\"−21%\" tone=\"muted\"></badge-ui></span>\n </progress-ui>\n <progress-ui label=\"Invited a teammate\" value=\"22\">\n <span slot=\"meta\">1,852 · 22% <badge-ui text=\"−59%\" variant=\"danger\"></badge-ui></span>\n </progress-ui>\n </col-ui>\n </section>\n </card-ui>",
10
10
  "source": "packages/web-components/patterns/conversion-funnel/conversion-funnel.examples.html",
11
11
  "metadata": {
12
12
  "domain": "dashboard",
@@ -26,7 +26,7 @@
26
26
  "report"
27
27
  ]
28
28
  },
29
- "captured_at": "2026-08-10T18:10:27.206Z",
29
+ "captured_at": "2026-08-17T04:33:27.534Z",
30
30
  "template": [
31
31
  {
32
32
  "id": "text",
@@ -104,8 +104,8 @@
104
104
  ]
105
105
  },
106
106
  {
107
- "id": "progress-row",
108
- "component": "ProgressRow",
107
+ "id": "progress",
108
+ "component": "Progress",
109
109
  "label": "Email verified",
110
110
  "value": 68,
111
111
  "children": [
@@ -129,8 +129,8 @@
129
129
  ]
130
130
  },
131
131
  {
132
- "id": "progress-row-2",
133
- "component": "ProgressRow",
132
+ "id": "progress-2",
133
+ "component": "Progress",
134
134
  "label": "Workspace created",
135
135
  "value": 54,
136
136
  "children": [
@@ -154,8 +154,8 @@
154
154
  ]
155
155
  },
156
156
  {
157
- "id": "progress-row-3",
158
- "component": "ProgressRow",
157
+ "id": "progress-3",
158
+ "component": "Progress",
159
159
  "label": "Invited a teammate",
160
160
  "value": 22,
161
161
  "children": [
@@ -168,9 +168,9 @@
168
168
  "gap": "3",
169
169
  "children": [
170
170
  "row",
171
- "progress-row",
172
- "progress-row-2",
173
- "progress-row-3"
171
+ "progress",
172
+ "progress-2",
173
+ "progress-3"
174
174
  ]
175
175
  },
176
176
  {
@@ -6,7 +6,7 @@
6
6
  "slots": [],
7
7
  "nested": [],
8
8
  "attrs": {},
9
- "html": "<card-ui style=\"max-width: 560px;\">\n <header>\n <h3>Checkout funnel</h3>\n <text-ui slot=\"description\" color=\"subtle\">Last 30 days · by first-time vs returning</text-ui>\n <span slot=\"action\">\n <segmented-ui value=\"new\" size=\"sm\">\n <segment-ui value=\"new\" text=\"New\"></segment-ui>\n <segment-ui value=\"returning\" text=\"Returning\"></segment-ui>\n </segmented-ui>\n </span>\n </header>\n <section>\n <col-ui gap=\"3\">\n <row-ui align=\"center\" gap=\"3\">\n <col-ui gap=\"0\" grow>\n <text-ui strong>Cart viewed</text-ui>\n <text-ui color=\"subtle\">42,180 sessions</text-ui>\n </col-ui>\n <text-ui strong>100%</text-ui>\n </row-ui>\n <progress-row-ui label=\"Added to cart\" value=\"58\" meta=\"24,464 · 58%\"></progress-row-ui>\n <progress-row-ui label=\"Reached payment\" value=\"34\" meta=\"14,341 · 34%\"></progress-row-ui>\n <progress-row-ui label=\"Completed purchase\" value=\"19\" meta=\"8,014 · 19%\"></progress-row-ui>\n </col-ui>\n </section>\n <footer divider>\n <small slot=\"description\">Funnel window: 30 days · ends at first purchase or abandonment.</small>\n <span slot=\"action\">\n <button-ui text=\"View in analytics\" variant=\"ghost\" size=\"sm\" icon=\"arrow-square-out\"></button-ui>\n </span>\n </footer>\n </card-ui>",
9
+ "html": "<card-ui style=\"max-width: 560px;\">\n <header>\n <h3>Checkout funnel</h3>\n <text-ui slot=\"description\" color=\"subtle\">Last 30 days · by first-time vs returning</text-ui>\n <span slot=\"action\">\n <segmented-ui value=\"new\" size=\"sm\">\n <segment-ui value=\"new\" text=\"New\"></segment-ui>\n <segment-ui value=\"returning\" text=\"Returning\"></segment-ui>\n </segmented-ui>\n </span>\n </header>\n <section>\n <col-ui gap=\"3\">\n <row-ui align=\"center\" gap=\"3\">\n <col-ui gap=\"0\" grow>\n <text-ui strong>Cart viewed</text-ui>\n <text-ui color=\"subtle\">42,180 sessions</text-ui>\n </col-ui>\n <text-ui strong>100%</text-ui>\n </row-ui>\n <progress-ui label=\"Added to cart\" value=\"58\" meta=\"24,464 · 58%\"></progress-ui>\n <progress-ui label=\"Reached payment\" value=\"34\" meta=\"14,341 · 34%\"></progress-ui>\n <progress-ui label=\"Completed purchase\" value=\"19\" meta=\"8,014 · 19%\"></progress-ui>\n </col-ui>\n </section>\n <footer divider>\n <small slot=\"description\">Funnel window: 30 days · ends at first purchase or abandonment.</small>\n <span slot=\"action\">\n <button-ui text=\"View in analytics\" variant=\"ghost\" size=\"sm\" icon=\"arrow-square-out\"></button-ui>\n </span>\n </footer>\n </card-ui>",
10
10
  "source": "packages/web-components/patterns/conversion-funnel/conversion-funnel.examples.html",
11
11
  "metadata": {
12
12
  "domain": "dashboard",
@@ -26,7 +26,7 @@
26
26
  "drop-off"
27
27
  ]
28
28
  },
29
- "captured_at": "2026-07-29T09:15:19.217Z",
29
+ "captured_at": "2026-08-17T04:33:27.534Z",
30
30
  "template": [
31
31
  {
32
32
  "id": "text",
@@ -119,22 +119,22 @@
119
119
  ]
120
120
  },
121
121
  {
122
- "id": "progress-row",
123
- "component": "ProgressRow",
122
+ "id": "progress",
123
+ "component": "Progress",
124
124
  "label": "Added to cart",
125
125
  "meta": "24,464 · 58%",
126
126
  "value": 58
127
127
  },
128
128
  {
129
- "id": "progress-row-2",
130
- "component": "ProgressRow",
129
+ "id": "progress-2",
130
+ "component": "Progress",
131
131
  "label": "Reached payment",
132
132
  "meta": "14,341 · 34%",
133
133
  "value": 34
134
134
  },
135
135
  {
136
- "id": "progress-row-3",
137
- "component": "ProgressRow",
136
+ "id": "progress-3",
137
+ "component": "Progress",
138
138
  "label": "Completed purchase",
139
139
  "meta": "8,014 · 19%",
140
140
  "value": 19
@@ -145,9 +145,9 @@
145
145
  "gap": "3",
146
146
  "children": [
147
147
  "row",
148
- "progress-row",
149
- "progress-row-2",
150
- "progress-row-3"
148
+ "progress",
149
+ "progress-2",
150
+ "progress-3"
151
151
  ]
152
152
  },
153
153
  {