@adia-ai/gen-ui 0.8.52 → 0.8.53
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 +8 -0
- package/compose/strategies/monolithic/_shared.js +2 -2
- package/compose/transpiler/transpiler-maps.js +18 -1
- package/corpus/chunk-embeddings.json +1 -1
- package/corpus/chunks/_index.json +5 -7
- package/corpus/chunks/_source-hashes.json +98 -97
- package/corpus/chunks/access-denied-with-request.json +1 -1
- package/corpus/chunks/access-request-pending.json +1 -1
- package/corpus/chunks/accordion-settings.json +20 -50
- package/corpus/chunks/agent-cost-detailed.json +3 -3
- package/corpus/chunks/api-keys-create.json +1 -1
- package/corpus/chunks/billing-overview.json +4 -4
- package/corpus/chunks/chart-in-card-chart-with-filter-pills.json +4 -4
- package/corpus/chunks/chart-with-filter-pills.json +4 -4
- package/corpus/chunks/code-snippet.json +1 -1
- package/corpus/chunks/contact-support-form.json +2 -2
- package/corpus/chunks/conversion-funnel-with-segment-compare.json +4 -4
- package/corpus/chunks/dashboard-acquisition-panel.json +4 -4
- package/corpus/chunks/dashboard-notifications-panel.json +4 -4
- package/corpus/chunks/dashboard-reports-panel.json +2 -2
- package/corpus/chunks/dashboard-reports-table.json +2 -2
- package/corpus/chunks/dashboard-traffic-channels.json +4 -4
- package/corpus/chunks/data-export-request.json +1 -1
- package/corpus/chunks/date-time-picker-form.json +9 -17
- package/corpus/chunks/drawer-custom-roles.json +1 -1
- package/corpus/chunks/drawer-gcal.json +1 -1
- package/corpus/chunks/drawer-github.json +1 -1
- package/corpus/chunks/drawer-revoke-session.json +1 -1
- package/corpus/chunks/export-flow-async.json +1 -1
- package/corpus/chunks/extended-profile-form.json +2 -2
- package/corpus/chunks/filter-bar-saved-views.json +4 -4
- package/corpus/chunks/form-drawer-tall-form.json +1 -1
- package/corpus/chunks/form-fields-two-column.json +1 -3
- package/corpus/chunks/import-mapping-flow.json +18 -2
- package/corpus/chunks/integrations-grid.json +2 -2
- package/corpus/chunks/member-edit-drawer.json +2 -2
- package/corpus/chunks/notification-badges-feed.json +4 -4
- package/corpus/chunks/permission-matrix-table.json +1 -1
- package/corpus/chunks/radio-button-group.json +8 -16
- package/corpus/chunks/reg-extended-profile.json +2 -2
- package/corpus/chunks/reg-helpdesk-grid.json +2 -2
- package/corpus/chunks/reg-step-shell.json +2 -2
- package/corpus/chunks/reg-team-size.json +2 -2
- package/corpus/chunks/revenue-heatmap.json +2 -2
- package/corpus/chunks/segmented-control-billing-tabs.json +4 -4
- package/corpus/chunks/settings-appearance-primitives.json +2 -2
- package/corpus/chunks/signup-team-size-form.json +2 -2
- package/corpus/chunks/toolbar-rich-text-editor.json +4 -4
- package/corpus/chunks/verification-document-upload.json +1 -1
- package/corpus/chunks/verification-status.json +1 -1
- package/corpus/manifest.json +2 -2
- package/package.json +1 -1
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"subscription"
|
|
30
30
|
]
|
|
31
31
|
},
|
|
32
|
-
"captured_at": "2026-08-
|
|
32
|
+
"captured_at": "2026-08-25T22:29:38.671Z",
|
|
33
33
|
"template": [
|
|
34
34
|
{
|
|
35
35
|
"id": "avatar",
|
|
@@ -129,8 +129,8 @@
|
|
|
129
129
|
"value": "annual"
|
|
130
130
|
},
|
|
131
131
|
{
|
|
132
|
-
"id": "segmented
|
|
133
|
-
"component": "
|
|
132
|
+
"id": "segmented",
|
|
133
|
+
"component": "Segmented",
|
|
134
134
|
"value": "monthly",
|
|
135
135
|
"children": [
|
|
136
136
|
"segment",
|
|
@@ -142,7 +142,7 @@
|
|
|
142
142
|
"component": "Field",
|
|
143
143
|
"label": "Billing interval",
|
|
144
144
|
"children": [
|
|
145
|
-
"segmented
|
|
145
|
+
"segmented"
|
|
146
146
|
]
|
|
147
147
|
},
|
|
148
148
|
{
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"toggle"
|
|
30
30
|
]
|
|
31
31
|
},
|
|
32
|
-
"captured_at": "2026-08-
|
|
32
|
+
"captured_at": "2026-08-25T22:29:38.671Z",
|
|
33
33
|
"template": [
|
|
34
34
|
{
|
|
35
35
|
"id": "text-2",
|
|
@@ -71,8 +71,8 @@
|
|
|
71
71
|
"value": "3m"
|
|
72
72
|
},
|
|
73
73
|
{
|
|
74
|
-
"id": "segmented
|
|
75
|
-
"component": "
|
|
74
|
+
"id": "segmented",
|
|
75
|
+
"component": "Segmented",
|
|
76
76
|
"slot": "action",
|
|
77
77
|
"value": "1m",
|
|
78
78
|
"children": [
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
"component": "Header",
|
|
88
88
|
"children": [
|
|
89
89
|
"text",
|
|
90
|
-
"segmented
|
|
90
|
+
"segmented"
|
|
91
91
|
]
|
|
92
92
|
},
|
|
93
93
|
{
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"card"
|
|
25
25
|
]
|
|
26
26
|
},
|
|
27
|
-
"captured_at": "2026-08-
|
|
27
|
+
"captured_at": "2026-08-25T22:29:38.671Z",
|
|
28
28
|
"template": [
|
|
29
29
|
{
|
|
30
30
|
"id": "text",
|
|
@@ -58,8 +58,8 @@
|
|
|
58
58
|
"value": "year"
|
|
59
59
|
},
|
|
60
60
|
{
|
|
61
|
-
"id": "segmented
|
|
62
|
-
"component": "
|
|
61
|
+
"id": "segmented",
|
|
62
|
+
"component": "Segmented",
|
|
63
63
|
"value": "month",
|
|
64
64
|
"children": [
|
|
65
65
|
"segment",
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
"gap": "3",
|
|
76
76
|
"children": [
|
|
77
77
|
"text",
|
|
78
|
-
"segmented
|
|
78
|
+
"segmented"
|
|
79
79
|
]
|
|
80
80
|
},
|
|
81
81
|
{
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"form": "contact"
|
|
53
53
|
}
|
|
54
54
|
},
|
|
55
|
-
"captured_at": "2026-08-
|
|
55
|
+
"captured_at": "2026-08-25T22:29:38.671Z",
|
|
56
56
|
"template": [
|
|
57
57
|
{
|
|
58
58
|
"id": "text",
|
|
@@ -138,7 +138,7 @@
|
|
|
138
138
|
},
|
|
139
139
|
{
|
|
140
140
|
"id": "hours",
|
|
141
|
-
"component": "
|
|
141
|
+
"component": "Segmented",
|
|
142
142
|
"value": "247",
|
|
143
143
|
"children": [
|
|
144
144
|
"segment",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"drop-off"
|
|
27
27
|
]
|
|
28
28
|
},
|
|
29
|
-
"captured_at": "2026-08-
|
|
29
|
+
"captured_at": "2026-08-25T22:29:38.671Z",
|
|
30
30
|
"template": [
|
|
31
31
|
{
|
|
32
32
|
"id": "text",
|
|
@@ -54,8 +54,8 @@
|
|
|
54
54
|
"value": "returning"
|
|
55
55
|
},
|
|
56
56
|
{
|
|
57
|
-
"id": "segmented
|
|
58
|
-
"component": "
|
|
57
|
+
"id": "segmented",
|
|
58
|
+
"component": "Segmented",
|
|
59
59
|
"value": "new",
|
|
60
60
|
"children": [
|
|
61
61
|
"segment",
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
"variant": "body",
|
|
69
69
|
"slot": "action",
|
|
70
70
|
"children": [
|
|
71
|
-
"segmented
|
|
71
|
+
"segmented"
|
|
72
72
|
]
|
|
73
73
|
},
|
|
74
74
|
{
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"layout": "panel"
|
|
37
37
|
}
|
|
38
38
|
},
|
|
39
|
-
"captured_at": "2026-08-
|
|
39
|
+
"captured_at": "2026-08-25T22:29:38.671Z",
|
|
40
40
|
"template": [
|
|
41
41
|
{
|
|
42
42
|
"id": "text",
|
|
@@ -70,8 +70,8 @@
|
|
|
70
70
|
"value": "90d"
|
|
71
71
|
},
|
|
72
72
|
{
|
|
73
|
-
"id": "segmented
|
|
74
|
-
"component": "
|
|
73
|
+
"id": "segmented",
|
|
74
|
+
"component": "Segmented",
|
|
75
75
|
"value": "30d",
|
|
76
76
|
"children": [
|
|
77
77
|
"segment",
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
"variant": "body",
|
|
86
86
|
"slot": "action",
|
|
87
87
|
"children": [
|
|
88
|
-
"segmented
|
|
88
|
+
"segmented"
|
|
89
89
|
]
|
|
90
90
|
},
|
|
91
91
|
{
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"layout": "panel"
|
|
34
34
|
}
|
|
35
35
|
},
|
|
36
|
-
"captured_at": "2026-08-
|
|
36
|
+
"captured_at": "2026-08-25T22:29:38.671Z",
|
|
37
37
|
"template": [
|
|
38
38
|
{
|
|
39
39
|
"id": "text",
|
|
@@ -67,8 +67,8 @@
|
|
|
67
67
|
"value": "mentions"
|
|
68
68
|
},
|
|
69
69
|
{
|
|
70
|
-
"id": "segmented
|
|
71
|
-
"component": "
|
|
70
|
+
"id": "segmented",
|
|
71
|
+
"component": "Segmented",
|
|
72
72
|
"value": "all",
|
|
73
73
|
"children": [
|
|
74
74
|
"segment",
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
"align": "center",
|
|
91
91
|
"gap": "2",
|
|
92
92
|
"children": [
|
|
93
|
-
"segmented
|
|
93
|
+
"segmented",
|
|
94
94
|
"button"
|
|
95
95
|
]
|
|
96
96
|
},
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"layout": "panel"
|
|
35
35
|
}
|
|
36
36
|
},
|
|
37
|
-
"captured_at": "2026-
|
|
37
|
+
"captured_at": "2026-08-25T22:29:38.671Z",
|
|
38
38
|
"template": [
|
|
39
39
|
{
|
|
40
40
|
"id": "text",
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
},
|
|
76
76
|
{
|
|
77
77
|
"id": "dash-reports-subtabs",
|
|
78
|
-
"component": "
|
|
78
|
+
"component": "Segmented",
|
|
79
79
|
"value": "revenue",
|
|
80
80
|
"children": [
|
|
81
81
|
"segment",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"actions"
|
|
23
23
|
]
|
|
24
24
|
},
|
|
25
|
-
"captured_at": "2026-
|
|
25
|
+
"captured_at": "2026-08-25T22:29:38.671Z",
|
|
26
26
|
"template": [
|
|
27
27
|
{
|
|
28
28
|
"id": "text",
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
},
|
|
64
64
|
{
|
|
65
65
|
"id": "dash-reports-subtabs",
|
|
66
|
-
"component": "
|
|
66
|
+
"component": "Segmented",
|
|
67
67
|
"value": "revenue",
|
|
68
68
|
"children": [
|
|
69
69
|
"segment",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"breakpoint"
|
|
27
27
|
]
|
|
28
28
|
},
|
|
29
|
-
"captured_at": "2026-08-
|
|
29
|
+
"captured_at": "2026-08-25T22:29:38.671Z",
|
|
30
30
|
"template": [
|
|
31
31
|
{
|
|
32
32
|
"id": "text",
|
|
@@ -60,8 +60,8 @@
|
|
|
60
60
|
"value": "90d"
|
|
61
61
|
},
|
|
62
62
|
{
|
|
63
|
-
"id": "segmented
|
|
64
|
-
"component": "
|
|
63
|
+
"id": "segmented",
|
|
64
|
+
"component": "Segmented",
|
|
65
65
|
"value": "30d",
|
|
66
66
|
"children": [
|
|
67
67
|
"segment",
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
"variant": "body",
|
|
76
76
|
"slot": "action",
|
|
77
77
|
"children": [
|
|
78
|
-
"segmented
|
|
78
|
+
"segmented"
|
|
79
79
|
]
|
|
80
80
|
},
|
|
81
81
|
{
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"radio-button-group"
|
|
9
9
|
],
|
|
10
10
|
"attrs": {},
|
|
11
|
-
"html": "<card-ui>\n <header>\n <h3>Schedule meeting</h3>\n </header>\n <section>\n <col-ui gap=\"4\">\n <grid-ui columns=\"1 2@sm\" gap=\"3\">\n <field-ui label=\"Date\">\n <calendar-picker-ui></calendar-picker-ui>\n </field-ui>\n <field-ui label=\"Time\">\n <time-picker-ui value=\"14:30\"></time-picker-ui>\n </field-ui>\n </grid-ui>\n <field-ui label=\"Timezone\">\n <select-ui>\n <option>America/New_York</option>\n <option>America/Los_Angeles</option>\n <option>Europe/London</option>\n <option>Asia/Tokyo</option>\n </select-ui>\n </field-ui>\n <
|
|
11
|
+
"html": "<card-ui>\n <header>\n <h3>Schedule meeting</h3>\n </header>\n <section>\n <col-ui gap=\"4\">\n <grid-ui columns=\"1 2@sm\" gap=\"3\">\n <field-ui label=\"Date\">\n <calendar-picker-ui></calendar-picker-ui>\n </field-ui>\n <field-ui label=\"Time\">\n <time-picker-ui value=\"14:30\"></time-picker-ui>\n </field-ui>\n </grid-ui>\n <field-ui label=\"Timezone\">\n <select-ui>\n <option>America/New_York</option>\n <option>America/Los_Angeles</option>\n <option>Europe/London</option>\n <option>Asia/Tokyo</option>\n </select-ui>\n </field-ui>\n <radio-group-ui label=\"Repeats\"><!-- nested: radio-button-group --></radio-group-ui>\n </col-ui>\n </section>\n <footer>\n <row-ui gap=\"3\">\n <button-ui text=\"Cancel\" variant=\"outline\"></button-ui>\n <button-ui text=\"Schedule\" variant=\"primary\"></button-ui>\n </row-ui>\n </footer>\n </card-ui>",
|
|
12
12
|
"source": "catalog/ui-patterns/v050-form-blocks/v050-form-blocks.contents.html",
|
|
13
13
|
"metadata": {
|
|
14
14
|
"domain": "forms",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"card"
|
|
28
28
|
]
|
|
29
29
|
},
|
|
30
|
-
"captured_at": "2026-08-
|
|
30
|
+
"captured_at": "2026-08-25T22:29:02.730Z",
|
|
31
31
|
"template": [
|
|
32
32
|
{
|
|
33
33
|
"id": "text",
|
|
@@ -137,9 +137,9 @@
|
|
|
137
137
|
"value": "monthly"
|
|
138
138
|
},
|
|
139
139
|
{
|
|
140
|
-
"id": "
|
|
141
|
-
"component": "
|
|
142
|
-
"
|
|
140
|
+
"id": "radio-group-2",
|
|
141
|
+
"component": "RadioGroup",
|
|
142
|
+
"label": "Repeats",
|
|
143
143
|
"children": [
|
|
144
144
|
"recur",
|
|
145
145
|
"radio",
|
|
@@ -148,19 +148,11 @@
|
|
|
148
148
|
]
|
|
149
149
|
},
|
|
150
150
|
{
|
|
151
|
-
"id": "
|
|
152
|
-
"component": "
|
|
153
|
-
"label": "Repeats",
|
|
154
|
-
"children": [
|
|
155
|
-
"column-2"
|
|
156
|
-
]
|
|
157
|
-
},
|
|
158
|
-
{
|
|
159
|
-
"id": "field-4",
|
|
160
|
-
"component": "Field",
|
|
151
|
+
"id": "radio-group",
|
|
152
|
+
"component": "RadioGroup",
|
|
161
153
|
"label": "Repeats",
|
|
162
154
|
"children": [
|
|
163
|
-
"
|
|
155
|
+
"radio-group-2"
|
|
164
156
|
]
|
|
165
157
|
},
|
|
166
158
|
{
|
|
@@ -170,7 +162,7 @@
|
|
|
170
162
|
"children": [
|
|
171
163
|
"grid",
|
|
172
164
|
"field-3",
|
|
173
|
-
"
|
|
165
|
+
"radio-group"
|
|
174
166
|
]
|
|
175
167
|
},
|
|
176
168
|
{
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
"form": "profile"
|
|
74
74
|
}
|
|
75
75
|
},
|
|
76
|
-
"captured_at": "2026-08-
|
|
76
|
+
"captured_at": "2026-08-25T22:29:38.671Z",
|
|
77
77
|
"template": [
|
|
78
78
|
{
|
|
79
79
|
"id": "text",
|
|
@@ -314,7 +314,7 @@
|
|
|
314
314
|
},
|
|
315
315
|
{
|
|
316
316
|
"id": "hours",
|
|
317
|
-
"component": "
|
|
317
|
+
"component": "Segmented",
|
|
318
318
|
"value": "9to5",
|
|
319
319
|
"children": [
|
|
320
320
|
"segment",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"data"
|
|
31
31
|
]
|
|
32
32
|
},
|
|
33
|
-
"captured_at": "2026-
|
|
33
|
+
"captured_at": "2026-08-25T22:29:38.671Z",
|
|
34
34
|
"template": [
|
|
35
35
|
{
|
|
36
36
|
"id": "segment",
|
|
@@ -57,8 +57,8 @@
|
|
|
57
57
|
"value": "archived"
|
|
58
58
|
},
|
|
59
59
|
{
|
|
60
|
-
"id": "segmented
|
|
61
|
-
"component": "
|
|
60
|
+
"id": "segmented",
|
|
61
|
+
"component": "Segmented",
|
|
62
62
|
"value": "my-open",
|
|
63
63
|
"children": [
|
|
64
64
|
"segment",
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
"gap": "3",
|
|
88
88
|
"wrap": true,
|
|
89
89
|
"children": [
|
|
90
|
-
"segmented
|
|
90
|
+
"segmented",
|
|
91
91
|
"text",
|
|
92
92
|
"button"
|
|
93
93
|
]
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"source": "site/pages/patterns/forms.html",
|
|
11
11
|
"metadata": {
|
|
12
12
|
"domain": "forms",
|
|
13
|
-
"description": "Two side-by-side form fields — fields-ui wrapping a pair of field-ui controls,
|
|
13
|
+
"description": "Two side-by-side form fields — fields-ui wrapping a pair of field-ui controls, laid out in a static two-column grid (no automatic responsive collapse). For first/last name or city/state rows.",
|
|
14
14
|
"keywords": [
|
|
15
15
|
"form",
|
|
16
16
|
"fields",
|
|
@@ -19,8 +19,6 @@
|
|
|
19
19
|
"fields-ui",
|
|
20
20
|
"field-ui",
|
|
21
21
|
"input-ui",
|
|
22
|
-
"responsive",
|
|
23
|
-
"collapse",
|
|
24
22
|
"row",
|
|
25
23
|
"first-name",
|
|
26
24
|
"last-name",
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"attrs": {
|
|
9
9
|
"gap": "5"
|
|
10
10
|
},
|
|
11
|
-
"html": "<col-ui\n gap=\"5\" style=\"max-width: 880px; margin-inline: auto; padding: var(--a-space-6);\">\n\n <!-- ═══════════════ Header + step progress ═══════════════ -->\n <col-ui gap=\"3\">\n <h1 style=\"margin: 0;\">Import customer data</h1>\n <text-ui color=\"subtle\">Upload a CSV or JSON file, map your columns to our fields, then preview before committing the import.</text-ui>\n <!-- step-progress-ui ships with `flex: 0 1 18rem` (designed for the\n registration shell's row-flex layout). In a col-flex parent that\n flex-basis becomes a 288px vertical bloat — override here. -->\n <step-progress-ui value=\"2\" total=\"3\" caption=\"Step 2 of 3 · Map fields\" style=\"flex: none;\"></step-progress-ui>\n </col-ui>\n\n <!-- ═══════════════ Step 1 — Upload (collapsed) ═══════════════ -->\n <card-ui>\n <header>\n <span slot=\"icon\"><avatar-ui icon=\"check\" size=\"sm\" style=\"--avatar-bg: var(--a-success-bg); --avatar-fg: var(--md-sys-color-success-on-success);\"></avatar-ui></span>\n <span slot=\"heading\">\n <text-ui strong>1. Upload file</text-ui>\n <badge-ui text=\"Done\" variant=\"success\"></badge-ui>\n </span>\n <span slot=\"description\">\n <text-ui color=\"subtle\" size=\"sm\">customers-2026-q1.csv · 1,243 rows · 8 columns</text-ui>\n </span>\n <span slot=\"action\">\n <button-ui text=\"Replace\" variant=\"ghost\" size=\"sm\" icon=\"arrow-counter-clockwise\"></button-ui>\n </span>\n </header>\n </card-ui>\n\n <!-- ═══════════════ Step 2 — Field mapping (active) ═══════════════ -->\n <card-ui>\n <header>\n <span slot=\"icon\"><avatar-ui icon=\"arrows-horizontal\" size=\"sm\"></avatar-ui></span>\n <span slot=\"heading\">\n <text-ui strong>2. Map your columns to our fields</text-ui>\n </span>\n <span slot=\"description\">\n <text-ui color=\"subtle\" size=\"sm\">We auto-detected 5 of 8 columns. Review and adjust before continuing — required fields are marked.</text-ui>\n </span>\n </header>\n <section>\n <col-ui gap=\"3\">\n <alert-ui variant=\"info\" icon=\"info\" text=\"Pro tip — pick 'Don't import' to skip a column. You can always re-run the import to bring more fields later.\"></alert-ui>\n\n <!-- Mapping rows — each row is source column + arrow + target dropdown.\n list-ui[divider] gives us per-row separators; grid-ui inside each\n row creates the 3-column structure (source | sample | target).\n NOTE: declarative <tr>/<td> inside <table-ui> would be stripped by\n the HTML parser (foster-parented). table-ui takes programmatic\n columns/data; for control-row layouts like this, list-ui composition\n is the canonical pattern. -->\n <list-ui id=\"import-mapping-list\" divider>\n <list-item-ui>\n <grid-ui slot=\"content\" gap=\"3\" style=\"grid-template-columns: 1fr auto 1fr; align-items: center;\">\n <col-ui gap=\"0\">\n <text-ui strong>full_name</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">Avery Chen</text-ui>\n </col-ui>\n <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n <select-ui value=\"name\" name=\"map_full_name\">\n <option value=\"\">Don't import</option>\n <option value=\"name\" selected>Name</option>\n <option value=\"email\">Email</option>\n <option value=\"role\">Role</option>\n <option value=\"team\">Team</option>\n </select-ui>\n </grid-ui>\n </list-item-ui>\n <list-item-ui>\n <grid-ui slot=\"content\" gap=\"3\" style=\"grid-template-columns: 1fr auto 1fr; align-items: center;\">\n <col-ui gap=\"0\">\n <text-ui strong>email_addr</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">avery@acme.com</text-ui>\n </col-ui>\n <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n <select-ui value=\"email\" name=\"map_email_addr\">\n <option value=\"\">Don't import</option>\n <option value=\"name\">Name</option>\n <option value=\"email\" selected>Email (required)</option>\n <option value=\"role\">Role</option>\n <option value=\"team\">Team</option>\n </select-ui>\n </grid-ui>\n </list-item-ui>\n <list-item-ui>\n <grid-ui slot=\"content\" gap=\"3\" style=\"grid-template-columns: 1fr auto 1fr; align-items: center;\">\n <col-ui gap=\"0\">\n <text-ui strong>company</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">Acme Inc</text-ui>\n </col-ui>\n <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n <select-ui value=\"team\" name=\"map_company\">\n <option value=\"\">Don't import</option>\n <option value=\"name\">Name</option>\n <option value=\"email\">Email</option>\n <option value=\"role\">Role</option>\n <option value=\"team\" selected>Team / Company</option>\n </select-ui>\n </grid-ui>\n </list-item-ui>\n <list-item-ui>\n <grid-ui slot=\"content\" gap=\"3\" style=\"grid-template-columns: 1fr auto 1fr; align-items: center;\">\n <col-ui gap=\"0\">\n <text-ui strong>job_title</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">Senior Engineer</text-ui>\n </col-ui>\n <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n <select-ui value=\"role\" name=\"map_job_title\">\n <option value=\"\">Don't import</option>\n <option value=\"name\">Name</option>\n <option value=\"email\">Email</option>\n <option value=\"role\" selected>Role / Title</option>\n <option value=\"team\">Team</option>\n </select-ui>\n </grid-ui>\n </list-item-ui>\n <list-item-ui>\n <grid-ui slot=\"content\" gap=\"3\" style=\"grid-template-columns: 1fr auto 1fr; align-items: center;\">\n <col-ui gap=\"0\">\n <text-ui strong>signup_date</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">2026-03-15</text-ui>\n </col-ui>\n <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n <select-ui value=\"\" name=\"map_signup_date\">\n <option value=\"\" selected>Don't import</option>\n <option value=\"created_at\">Created at</option>\n </select-ui>\n </grid-ui>\n </list-item-ui>\n <list-item-ui>\n <grid-ui slot=\"content\" gap=\"3\" style=\"grid-template-columns: 1fr auto 1fr; align-items: center;\">\n <col-ui gap=\"0\">\n <text-ui strong>region</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">EMEA</text-ui>\n </col-ui>\n <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n <select-ui value=\"\" name=\"map_region\">\n <option value=\"\" selected>Don't import</option>\n <option value=\"region\">Region</option>\n <option value=\"team\">Team</option>\n </select-ui>\n </grid-ui>\n </list-item-ui>\n <list-item-ui>\n <grid-ui slot=\"content\" gap=\"3\" style=\"grid-template-columns: 1fr auto 1fr; align-items: center;\">\n <col-ui gap=\"0\">\n <text-ui strong>notes</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">\"VIP — handle with care\"</text-ui>\n </col-ui>\n <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n <select-ui value=\"\" name=\"map_notes\">\n <option value=\"\" selected>Don't import</option>\n <option value=\"notes\">Notes</option>\n </select-ui>\n </grid-ui>\n </list-item-ui>\n <list-item-ui>\n <grid-ui slot=\"content\" gap=\"3\" style=\"grid-template-columns: 1fr auto 1fr; align-items: center;\">\n <col-ui gap=\"0\">\n <text-ui strong>internal_id</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">cust_5392</text-ui>\n </col-ui>\n <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n <select-ui value=\"\" name=\"map_internal_id\">\n <option value=\"\" selected>Don't import</option>\n <option value=\"external_id\">External ID</option>\n </select-ui>\n </grid-ui>\n </list-item-ui>\n </list-ui>\n\n <!-- Validation summary — what'll get imported -->\n <row-ui gap=\"3\" align=\"center\" style=\"background: var(--a-bg-muted); padding: var(--a-space-3); border-radius: var(--a-radius-md);\">\n <icon-ui name=\"check-circle\" tone=\"success\"></icon-ui>\n <col-ui gap=\"0\" style=\"flex: 1;\">\n <text-ui strong>4 fields mapped · 4 columns skipped</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">1,243 rows ready to import. Email column passed validation (no malformed addresses).</text-ui>\n </col-ui>\n </row-ui>\n </col-ui>\n </section>\n <footer slot=\"footer\">\n <row-ui gap=\"2\" justify=\"space-between\" style=\"width: 100%;\">\n <button-ui text=\"Back\" variant=\"ghost\"></button-ui>\n <row-ui gap=\"2\">\n <button-ui text=\"Cancel\" variant=\"outline\"></button-ui>\n <button-ui text=\"Preview import →\" variant=\"primary\"></button-ui>\n </row-ui>\n </row-ui>\n </footer>\n </card-ui>\n\n <!-- ═══════════════ Step 3 — Preview (pending) ═══════════════ -->\n <card-ui>\n <header>\n <span slot=\"icon\"><avatar-ui icon=\"eye\" size=\"sm\"></avatar-ui></span>\n <span slot=\"heading\">\n <text-ui strong color=\"subtle\">3. Preview & confirm</text-ui>\n </span>\n <span slot=\"description\">\n <text-ui color=\"subtle\" size=\"sm\">Final check before we commit 1,243 rows.</text-ui>\n </span>\n </header>\n </card-ui>\n\n <!-- Composition notes (rendered as a footnote for the demo, not part of\n the production UI). Helps future authors understand why this shape. -->\n <col-ui gap=\"2\" style=\"margin-top: var(--a-space-6); padding-block-start: var(--a-space-5); border-top: 1px solid var(--md-sys-color-neutral-outline);\">\n <text-ui size=\"sm\" color=\"subtle\"><strong>Composition rules.</strong> Three steps: upload → map → preview, each as a card-ui with header (icon + heading + status badge). The mapping itself is a list-ui[divider] of source-column / target-field rows — NOT a table-ui (the HTML parser strips declarative <tr> inside custom elements; table-ui takes programmatic .columns/.data instead). Each row is a 3-col grid (source label + sample → arrow → target select). The \"fields mapped\" summary lives at the bottom of the active card; the footer action bar carries Back + Cancel + primary Continue.</text-ui>\n </col-ui>\n\n</col-ui>",
|
|
11
|
+
"html": "<col-ui\n gap=\"5\" style=\"max-width: 880px; margin-inline: auto; padding: var(--a-space-6);\">\n\n <!-- ═══════════════ Header + step progress ═══════════════ -->\n <col-ui gap=\"3\">\n <h1 style=\"margin: 0;\">Import customer data</h1>\n <text-ui color=\"subtle\">Upload a CSV or JSON file, map your columns to our fields, then preview before committing the import.</text-ui>\n <!-- step-progress-ui ships with `flex: 0 1 18rem` (designed for the\n registration shell's row-flex layout). In a col-flex parent that\n flex-basis becomes a 288px vertical bloat — override here. -->\n <step-progress-ui value=\"2\" total=\"3\" caption=\"Step 2 of 3 · Map fields\" style=\"flex: none;\"></step-progress-ui>\n </col-ui>\n\n <!-- ═══════════════ Step 1 — Upload (collapsed) ═══════════════ -->\n <card-ui>\n <header>\n <span slot=\"icon\"><avatar-ui icon=\"check\" size=\"sm\" style=\"--avatar-bg: var(--a-success-bg); --avatar-fg: var(--md-sys-color-success-on-success);\"></avatar-ui></span>\n <span slot=\"heading\">\n <text-ui strong>1. Upload file</text-ui>\n <badge-ui text=\"Done\" variant=\"success\"></badge-ui>\n </span>\n <span slot=\"description\">\n <text-ui color=\"subtle\" size=\"sm\">customers-2026-q1.csv · 1,243 rows · 8 columns</text-ui>\n </span>\n <span slot=\"action\">\n <button-ui text=\"Replace\" variant=\"ghost\" size=\"sm\" icon=\"arrow-counter-clockwise\"></button-ui>\n </span>\n </header>\n </card-ui>\n\n <!-- ═══════════════ Step 2 — Field mapping (active) ═══════════════ -->\n <card-ui>\n <header>\n <span slot=\"icon\"><avatar-ui icon=\"arrows-horizontal\" size=\"sm\"></avatar-ui></span>\n <span slot=\"heading\">\n <text-ui strong>2. Map your columns to our fields</text-ui>\n </span>\n <span slot=\"description\">\n <text-ui color=\"subtle\" size=\"sm\">We auto-detected 5 of 8 columns. Review and adjust before continuing — required fields are marked.</text-ui>\n </span>\n </header>\n <section>\n <col-ui gap=\"3\">\n <alert-ui variant=\"info\" icon=\"info\" text=\"Pro tip — pick 'Don't import' to skip a column. You can always re-run the import to bring more fields later.\"></alert-ui>\n\n <!-- Mapping rows — each row is source column + arrow + target dropdown.\n list-ui[divider] gives us per-row separators; grid-ui inside each\n row creates the 3-column structure (source | sample | target).\n NOTE: declarative <tr>/<td> inside <table-ui> would be stripped by\n the HTML parser (foster-parented). table-ui takes programmatic\n columns/data; for control-row layouts like this, list-ui composition\n is the canonical pattern. -->\n <list-ui id=\"import-mapping-list\" divider>\n <list-item-ui>\n <grid-ui slot=\"content\" columns=\"3\" align=\"center\" gap=\"3\">\n <col-ui gap=\"0\">\n <text-ui strong>full_name</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">Avery Chen</text-ui>\n </col-ui>\n <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n <select-ui value=\"name\" name=\"map_full_name\">\n <option value=\"\">Don't import</option>\n <option value=\"name\" selected>Name</option>\n <option value=\"email\">Email</option>\n <option value=\"role\">Role</option>\n <option value=\"team\">Team</option>\n </select-ui>\n </grid-ui>\n </list-item-ui>\n <list-item-ui>\n <grid-ui slot=\"content\" columns=\"3\" align=\"center\" gap=\"3\">\n <col-ui gap=\"0\">\n <text-ui strong>email_addr</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">avery@acme.com</text-ui>\n </col-ui>\n <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n <select-ui value=\"email\" name=\"map_email_addr\">\n <option value=\"\">Don't import</option>\n <option value=\"name\">Name</option>\n <option value=\"email\" selected>Email (required)</option>\n <option value=\"role\">Role</option>\n <option value=\"team\">Team</option>\n </select-ui>\n </grid-ui>\n </list-item-ui>\n <list-item-ui>\n <grid-ui slot=\"content\" columns=\"3\" align=\"center\" gap=\"3\">\n <col-ui gap=\"0\">\n <text-ui strong>company</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">Acme Inc</text-ui>\n </col-ui>\n <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n <select-ui value=\"team\" name=\"map_company\">\n <option value=\"\">Don't import</option>\n <option value=\"name\">Name</option>\n <option value=\"email\">Email</option>\n <option value=\"role\">Role</option>\n <option value=\"team\" selected>Team / Company</option>\n </select-ui>\n </grid-ui>\n </list-item-ui>\n <list-item-ui>\n <grid-ui slot=\"content\" columns=\"3\" align=\"center\" gap=\"3\">\n <col-ui gap=\"0\">\n <text-ui strong>job_title</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">Senior Engineer</text-ui>\n </col-ui>\n <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n <select-ui value=\"role\" name=\"map_job_title\">\n <option value=\"\">Don't import</option>\n <option value=\"name\">Name</option>\n <option value=\"email\">Email</option>\n <option value=\"role\" selected>Role / Title</option>\n <option value=\"team\">Team</option>\n </select-ui>\n </grid-ui>\n </list-item-ui>\n <list-item-ui>\n <grid-ui slot=\"content\" columns=\"3\" align=\"center\" gap=\"3\">\n <col-ui gap=\"0\">\n <text-ui strong>signup_date</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">2026-03-15</text-ui>\n </col-ui>\n <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n <select-ui value=\"\" name=\"map_signup_date\">\n <option value=\"\" selected>Don't import</option>\n <option value=\"created_at\">Created at</option>\n </select-ui>\n </grid-ui>\n </list-item-ui>\n <list-item-ui>\n <grid-ui slot=\"content\" columns=\"3\" align=\"center\" gap=\"3\">\n <col-ui gap=\"0\">\n <text-ui strong>region</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">EMEA</text-ui>\n </col-ui>\n <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n <select-ui value=\"\" name=\"map_region\">\n <option value=\"\" selected>Don't import</option>\n <option value=\"region\">Region</option>\n <option value=\"team\">Team</option>\n </select-ui>\n </grid-ui>\n </list-item-ui>\n <list-item-ui>\n <grid-ui slot=\"content\" columns=\"3\" align=\"center\" gap=\"3\">\n <col-ui gap=\"0\">\n <text-ui strong>notes</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">\"VIP — handle with care\"</text-ui>\n </col-ui>\n <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n <select-ui value=\"\" name=\"map_notes\">\n <option value=\"\" selected>Don't import</option>\n <option value=\"notes\">Notes</option>\n </select-ui>\n </grid-ui>\n </list-item-ui>\n <list-item-ui>\n <grid-ui slot=\"content\" columns=\"3\" align=\"center\" gap=\"3\">\n <col-ui gap=\"0\">\n <text-ui strong>internal_id</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">cust_5392</text-ui>\n </col-ui>\n <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n <select-ui value=\"\" name=\"map_internal_id\">\n <option value=\"\" selected>Don't import</option>\n <option value=\"external_id\">External ID</option>\n </select-ui>\n </grid-ui>\n </list-item-ui>\n </list-ui>\n\n <!-- Validation summary — what'll get imported -->\n <row-ui gap=\"3\" align=\"center\" style=\"background: var(--a-bg-muted); padding: var(--a-space-3); border-radius: var(--a-radius-md);\">\n <icon-ui name=\"check-circle\" tone=\"success\"></icon-ui>\n <col-ui gap=\"0\" style=\"flex: 1;\">\n <text-ui strong>4 fields mapped · 4 columns skipped</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">1,243 rows ready to import. Email column passed validation (no malformed addresses).</text-ui>\n </col-ui>\n </row-ui>\n </col-ui>\n </section>\n <footer slot=\"footer\">\n <row-ui gap=\"2\" justify=\"space-between\" style=\"width: 100%;\">\n <button-ui text=\"Back\" variant=\"ghost\"></button-ui>\n <row-ui gap=\"2\">\n <button-ui text=\"Cancel\" variant=\"outline\"></button-ui>\n <button-ui text=\"Preview import →\" variant=\"primary\"></button-ui>\n </row-ui>\n </row-ui>\n </footer>\n </card-ui>\n\n <!-- ═══════════════ Step 3 — Preview (pending) ═══════════════ -->\n <card-ui>\n <header>\n <span slot=\"icon\"><avatar-ui icon=\"eye\" size=\"sm\"></avatar-ui></span>\n <span slot=\"heading\">\n <text-ui strong color=\"subtle\">3. Preview & confirm</text-ui>\n </span>\n <span slot=\"description\">\n <text-ui color=\"subtle\" size=\"sm\">Final check before we commit 1,243 rows.</text-ui>\n </span>\n </header>\n </card-ui>\n\n <!-- Composition notes (rendered as a footnote for the demo, not part of\n the production UI). Helps future authors understand why this shape. -->\n <col-ui gap=\"2\" style=\"margin-top: var(--a-space-6); padding-block-start: var(--a-space-5); border-top: 1px solid var(--md-sys-color-neutral-outline);\">\n <text-ui size=\"sm\" color=\"subtle\"><strong>Composition rules.</strong> Three steps: upload → map → preview, each as a card-ui with header (icon + heading + status badge). The mapping itself is a list-ui[divider] of source-column / target-field rows — NOT a table-ui (the HTML parser strips declarative <tr> inside custom elements; table-ui takes programmatic .columns/.data instead). Each row is a 3-col grid (source label + sample → arrow → target select). The \"fields mapped\" summary lives at the bottom of the active card; the footer action bar carries Back + Cancel + primary Continue.</text-ui>\n </col-ui>\n\n</col-ui>",
|
|
12
12
|
"source": "catalog/ui-patterns/app/import-mapping/import-mapping.contents.html",
|
|
13
13
|
"metadata": {
|
|
14
14
|
"domain": "data-management",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"migration"
|
|
26
26
|
]
|
|
27
27
|
},
|
|
28
|
-
"captured_at": "2026-08-
|
|
28
|
+
"captured_at": "2026-08-26T02:51:21.925Z",
|
|
29
29
|
"template": [
|
|
30
30
|
{
|
|
31
31
|
"id": "text",
|
|
@@ -265,6 +265,8 @@
|
|
|
265
265
|
"id": "grid",
|
|
266
266
|
"component": "Grid",
|
|
267
267
|
"slot": "content",
|
|
268
|
+
"align": "center",
|
|
269
|
+
"columns": "3",
|
|
268
270
|
"gap": "3",
|
|
269
271
|
"children": [
|
|
270
272
|
"column-3",
|
|
@@ -338,6 +340,8 @@
|
|
|
338
340
|
"id": "grid-2",
|
|
339
341
|
"component": "Grid",
|
|
340
342
|
"slot": "content",
|
|
343
|
+
"align": "center",
|
|
344
|
+
"columns": "3",
|
|
341
345
|
"gap": "3",
|
|
342
346
|
"children": [
|
|
343
347
|
"column-4",
|
|
@@ -411,6 +415,8 @@
|
|
|
411
415
|
"id": "grid-3",
|
|
412
416
|
"component": "Grid",
|
|
413
417
|
"slot": "content",
|
|
418
|
+
"align": "center",
|
|
419
|
+
"columns": "3",
|
|
414
420
|
"gap": "3",
|
|
415
421
|
"children": [
|
|
416
422
|
"column-5",
|
|
@@ -484,6 +490,8 @@
|
|
|
484
490
|
"id": "grid-4",
|
|
485
491
|
"component": "Grid",
|
|
486
492
|
"slot": "content",
|
|
493
|
+
"align": "center",
|
|
494
|
+
"columns": "3",
|
|
487
495
|
"gap": "3",
|
|
488
496
|
"children": [
|
|
489
497
|
"column-6",
|
|
@@ -545,6 +553,8 @@
|
|
|
545
553
|
"id": "grid-5",
|
|
546
554
|
"component": "Grid",
|
|
547
555
|
"slot": "content",
|
|
556
|
+
"align": "center",
|
|
557
|
+
"columns": "3",
|
|
548
558
|
"gap": "3",
|
|
549
559
|
"children": [
|
|
550
560
|
"column-7",
|
|
@@ -610,6 +620,8 @@
|
|
|
610
620
|
"id": "grid-6",
|
|
611
621
|
"component": "Grid",
|
|
612
622
|
"slot": "content",
|
|
623
|
+
"align": "center",
|
|
624
|
+
"columns": "3",
|
|
613
625
|
"gap": "3",
|
|
614
626
|
"children": [
|
|
615
627
|
"column-8",
|
|
@@ -671,6 +683,8 @@
|
|
|
671
683
|
"id": "grid-7",
|
|
672
684
|
"component": "Grid",
|
|
673
685
|
"slot": "content",
|
|
686
|
+
"align": "center",
|
|
687
|
+
"columns": "3",
|
|
674
688
|
"gap": "3",
|
|
675
689
|
"children": [
|
|
676
690
|
"column-9",
|
|
@@ -732,6 +746,8 @@
|
|
|
732
746
|
"id": "grid-8",
|
|
733
747
|
"component": "Grid",
|
|
734
748
|
"slot": "content",
|
|
749
|
+
"align": "center",
|
|
750
|
+
"columns": "3",
|
|
735
751
|
"gap": "3",
|
|
736
752
|
"children": [
|
|
737
753
|
"column-10",
|