@adia-ai/a2ui-corpus 0.0.1 → 0.0.2

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 (28) hide show
  1. package/CHANGELOG.md +101 -20
  2. package/catalog-a2ui_0_9.json +804 -41
  3. package/exemplars/_shell.css +88 -0
  4. package/exemplars/prose/auth-login/index.html +35 -26
  5. package/exemplars/prose/cta/a2ui.json +1 -1
  6. package/exemplars/prose/cta/chunks/prose-cta-card-1.json +1 -1
  7. package/exemplars/prose/cta/index.html +15 -33
  8. package/exemplars/prose/feature-grid/index.html +7 -17
  9. package/exemplars/prose/footer/index.html +8 -9
  10. package/exemplars/prose/hero/index.html +14 -24
  11. package/exemplars/prose/pricing/index.html +7 -17
  12. package/exemplars/prose/steps/index.html +8 -5
  13. package/exemplars/prose/testimonials/index.html +19 -16
  14. package/exemplars/ui/auth-login/index.html +27 -34
  15. package/package.json +1 -1
  16. package/patterns/_components.json +2 -2
  17. package/patterns/_index.json +131 -41
  18. package/patterns/data/chart-card-with-trend-footer.json +102 -0
  19. package/patterns/data/chart-card-with-trend-footer.yaml +56 -0
  20. package/patterns/data/chart-grid-with-kpis.json +314 -0
  21. package/patterns/data/chart-grid-with-kpis.yaml +63 -0
  22. package/patterns/data/chart-with-filter-pills.json +127 -0
  23. package/patterns/data/chart-with-filter-pills.yaml +76 -0
  24. package/patterns/data/stat-with-sparkline.json +67 -0
  25. package/patterns/data/stat-with-sparkline.yaml +51 -0
  26. package/fragments/content/chart-legend.json +0 -122
  27. package/fragments/form/rating-row.json +0 -31
  28. package/fragments/form/rating-row.yaml +0 -40
package/exemplars/prose/testimonials/index.html CHANGED
@@ -4,9 +4,12 @@
4
4
  <meta charset="UTF-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
  <title>AdiaUI Block — Testimonials</title>
7
- <link rel="stylesheet" href="../../../../web-components/styles/tokens.css" />
8
- <link rel="stylesheet" href="../../../../web-components/styles/styles.css" />
9
- <style>body { margin: 0; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 2rem; box-sizing: border-box; font-family: var(--a-font-family); background: var(--a-bg); color: var(--a-fg); } body > section { min-width: 600px; }</style>
7
+ <link rel="stylesheet" href="../../../../../web-components/styles/tokens.css" />
8
+ <link rel="stylesheet" href="../../../../../web-components/styles/themes.css" />
9
+ <link rel="stylesheet" href="../../../../../web-components/styles/resets.css" />
10
+ <link rel="stylesheet" href="../../../../../web-components/styles/components.css" />
11
+ <link rel="stylesheet" href="../../../../../web-components/styles/prose.css" />
12
+ <link rel="stylesheet" href="../../_shell.css" />
10
13
  </head>
11
14
  <body>
12
15
  <section prose>
@@ -32,7 +35,7 @@
32
35
  </p>
33
36
  <divider-ui></divider-ui>
34
37
  <row-ui gap="3" align="center">
35
- <avatar-ui name="Sarah Chen"></avatar-ui>
38
+ <avatar-ui text="Sarah Chen"></avatar-ui>
36
39
  <col-ui gap="0">
37
40
  <text-ui>Sarah Chen</text-ui>
38
41
  <text-ui>VP Engineering, Globex Corp</text-ui>
@@ -78,7 +81,7 @@
78
81
  </section>
79
82
  <footer>
80
83
  <row-ui gap="3">
81
- <avatar-ui name="Marcus Johnson" size="sm"></avatar-ui>
84
+ <avatar-ui text="Marcus Johnson" size="sm"></avatar-ui>
82
85
  <col-ui gap="0">
83
86
  <text-ui>Marcus Johnson</text-ui>
84
87
  <text-ui>Lead Dev, Initech</text-ui>
@@ -105,7 +108,7 @@
105
108
  </section>
106
109
  <footer>
107
110
  <row-ui gap="3" align="center">
108
- <avatar-ui name="Priya Patel" size="sm"></avatar-ui>
111
+ <avatar-ui text="Priya Patel" size="sm"></avatar-ui>
109
112
  <col-ui gap="0">
110
113
  <text-ui>Priya Patel</text-ui>
111
114
  <text-ui>Design Lead, Hooli</text-ui>
@@ -132,7 +135,7 @@
132
135
  </section>
133
136
  <footer>
134
137
  <row-ui gap="3" align="center">
135
- <avatar-ui name="Alex Rivera" size="sm"></avatar-ui>
138
+ <avatar-ui text="Alex Rivera" size="sm"></avatar-ui>
136
139
  <col-ui gap="0">
137
140
  <text-ui>Alex Rivera</text-ui>
138
141
  <text-ui>CTO, TechStart</text-ui>
@@ -159,7 +162,7 @@
159
162
  </section>
160
163
  <footer>
161
164
  <row-ui gap="3" align="center">
162
- <avatar-ui name="Emma Davis" size="sm"></avatar-ui>
165
+ <avatar-ui text="Emma Davis" size="sm"></avatar-ui>
163
166
  <col-ui gap="0">
164
167
  <text-ui>Emma Davis</text-ui>
165
168
  <text-ui>PM, DataFlow</text-ui>
@@ -186,7 +189,7 @@
186
189
  </section>
187
190
  <footer>
188
191
  <row-ui gap="3" align="center">
189
- <avatar-ui name="Tom Wright" size="sm"></avatar-ui>
192
+ <avatar-ui text="Tom Wright" size="sm"></avatar-ui>
190
193
  <col-ui gap="0">
191
194
  <text-ui>Tom Wright</text-ui>
192
195
  <text-ui>DevOps, CloudScale</text-ui>
@@ -213,7 +216,7 @@
213
216
  </section>
214
217
  <footer>
215
218
  <row-ui gap="3" align="center">
216
- <avatar-ui name="Lisa Chang" size="sm"></avatar-ui>
219
+ <avatar-ui text="Lisa Chang" size="sm"></avatar-ui>
217
220
  <col-ui gap="0">
218
221
  <text-ui>Lisa Chang</text-ui>
219
222
  <text-ui>Frontend Lead, Nexus</text-ui>
@@ -233,11 +236,11 @@
233
236
  <text-ui variant="body" nomargin>developers trust Acme</text-ui>
234
237
  </col-ui>
235
238
  <avatar-group-ui max="5">
236
- <avatar-ui name="Sarah Chen" size="sm"></avatar-ui>
237
- <avatar-ui name="Marcus Johnson" size="sm"></avatar-ui>
238
- <avatar-ui name="Priya Patel" size="sm"></avatar-ui>
239
- <avatar-ui name="Alex Rivera" size="sm"></avatar-ui>
240
- <avatar-ui name="Jordan Lee" size="sm"></avatar-ui>
239
+ <avatar-ui text="Sarah Chen" size="sm"></avatar-ui>
240
+ <avatar-ui text="Marcus Johnson" size="sm"></avatar-ui>
241
+ <avatar-ui text="Priya Patel" size="sm"></avatar-ui>
242
+ <avatar-ui text="Alex Rivera" size="sm"></avatar-ui>
243
+ <avatar-ui text="Jordan Lee" size="sm"></avatar-ui>
241
244
  </avatar-group-ui>
242
245
  <col-ui gap="2" align="center">
243
246
  <row-ui gap="1">
@@ -288,7 +291,7 @@
288
291
  </section>
289
292
 
290
293
  <script type="module">
291
- import "../../../../web-components/components/index.js";
294
+ import "../../../../../web-components/components/index.js";
292
295
  </script>
293
296
  </body>
294
297
  </html>
package/exemplars/ui/auth-login/index.html CHANGED
@@ -4,31 +4,20 @@
4
4
  <meta charset="UTF-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
  <title>Auth Login — AdiaUI Pattern</title>
7
- <link rel="stylesheet" href="../../../../web-components/styles/tokens.css" />
8
- <link rel="stylesheet" href="../../../../web-components/styles/styles.css" />
9
- <style>
10
- body {
11
- margin: 0;
12
- min-height: 100dvh;
13
- display: flex;
14
- align-items: center;
15
- justify-content: center;
16
- padding: 2rem;
17
- box-sizing: border-box;
18
- font-family: var(--a-font-family);
19
- background: var(--a-bg);
20
- color: var(--a-fg);
21
- }
22
- body > section { min-width: 600px; }</style>
7
+ <link rel="stylesheet" href="../../../../../web-components/styles/tokens.css" />
8
+ <link rel="stylesheet" href="../../../../../web-components/styles/themes.css" />
9
+ <link rel="stylesheet" href="../../../../../web-components/styles/resets.css" />
10
+ <link rel="stylesheet" href="../../../../../web-components/styles/components.css" />
11
+ <link rel="stylesheet" href="../../_shell.css" />
23
12
  </head>
24
13
  <body>
25
14
  <section>
26
- <col-ui gap="10" style="width: 100%; max-width: 960px">
15
+ <col-ui gap="10">
27
16
  <!-- 1. Email-First Login (ChatGPT style) -->
28
17
  <col-ui gap="3">
29
18
  <h2 variant="section" nomargin>Email-First Login</h2>
30
19
  <row-ui gap="4" justify="center">
31
- <card-ui style="width: 100%; max-width: 400px" radius="round">
20
+ <card-ui radius="round">
32
21
  <section>
33
22
  <col-ui gap="5">
34
23
  <col-ui gap="2" align="center">
@@ -64,7 +53,7 @@
64
53
  <col-ui gap="3">
65
54
  <h2 variant="section" nomargin>Classic Email + Password</h2>
66
55
  <row-ui gap="4" justify="center">
67
- <card-ui style="width: 100%; max-width: 400px">
56
+ <card-ui>
68
57
  <header>
69
58
  <span slot="heading"><h3>Sign in</h3></span>
70
59
  <p slot="description" color="subtle" nomargin>Enter your credentials to access your account</p>
@@ -74,7 +63,9 @@
74
63
  <input-ui label="Email" placeholder="you@example.com" type="email"></input-ui>
75
64
  <input-ui label="Password" placeholder="••••••••" type="password" suffix="eye-slash"></input-ui>
76
65
  <row-ui justify="between" align="center" size="sm">
77
- <check-ui label="Remember me"></check-ui>
66
+ <field-ui inline label="Remember me">
67
+ <check-ui name="remember"></check-ui>
68
+ </field-ui>
78
69
  <text-ui>Forgot password?</text-ui>
79
70
  </row-ui>
80
71
  </col-ui>
@@ -96,7 +87,7 @@
96
87
  <col-ui gap="3">
97
88
  <h2 variant="section" nomargin>Registration</h2>
98
89
  <row-ui gap="4" justify="center">
99
- <card-ui style="width: 100%; max-width: 400px">
90
+ <card-ui>
100
91
  <header>
101
92
  <span slot="heading"><h3>Create account</h3></span>
102
93
  <p slot="description" color="subtle" nomargin>Get started for free — no credit card required</p>
@@ -110,11 +101,13 @@
110
101
  <input-ui label="Email" placeholder="you@example.com" type="email"></input-ui>
111
102
  <input-ui label="Password" placeholder="Min. 8 characters" type="password"></input-ui>
112
103
  <input-ui label="Confirm password" placeholder="Re-enter password" type="password"></input-ui>
113
- <check-ui label="I agree to the Terms of Service and Privacy Policy" size="sm"></check-ui>
104
+ <field-ui inline label="I agree to the Terms of Service and Privacy Policy">
105
+ <check-ui size="sm" name="terms"></check-ui>
106
+ </field-ui>
114
107
  </col-ui>
115
108
  </section>
116
109
  <footer>
117
- <col-ui gap="3" style="width: 100%">
110
+ <col-ui gap="3">
118
111
  <button-ui text="Create account" variant="primary" stretch></button-ui>
119
112
  <divider-ui label="OR"></divider-ui>
120
113
  <grid-ui gap="2">
@@ -135,7 +128,7 @@
135
128
  <col-ui gap="3">
136
129
  <h2 variant="section" nomargin>Social-Only Login</h2>
137
130
  <row-ui gap="4" justify="center">
138
- <card-ui style="width: 100%; max-width: 400px">
131
+ <card-ui>
139
132
  <section>
140
133
  <col-ui gap="5">
141
134
  <col-ui gap="2" align="center">
@@ -165,7 +158,7 @@
165
158
  <col-ui gap="3">
166
159
  <h2 variant="section" nomargin>Magic Link / OTP</h2>
167
160
  <row-ui gap="4" justify="center">
168
- <col-ui gap="4" style="width: 100%; max-width: 400px">
161
+ <col-ui gap="4">
169
162
  <!-- 5a. Email entry step -->
170
163
  <card-ui>
171
164
  <header>
@@ -209,7 +202,7 @@
209
202
  <col-ui gap="3">
210
203
  <h2 variant="section" nomargin>Password Reset</h2>
211
204
  <row-ui gap="4" justify="center">
212
- <col-ui gap="4" style="width: 100%; max-width: 400px">
205
+ <col-ui gap="4">
213
206
  <!-- 6a. Request reset -->
214
207
  <card-ui>
215
208
  <header>
@@ -250,11 +243,11 @@
250
243
  <!-- 7. Split Layout (brand + form) -->
251
244
  <col-ui gap="3">
252
245
  <h2 variant="section" nomargin>Split Layout</h2>
253
- <card-ui style="overflow: hidden">
254
- <section>
246
+ <card-ui>
247
+ <section bleed>
255
248
  <grid-ui columns="2" gap="0">
256
249
  <!-- Brand panel -->
257
- <col-ui gap="6" justify="center" style="padding: var(--a-space-8); background: var(--a-accent-subtle); min-height: 480px">
250
+ <col-ui gap="6" justify="center" class="demo-accent-panel">
258
251
  <row-ui gap="1" align="center">
259
252
  <icon-ui name="cube"></icon-ui>
260
253
  <text-ui variant="label" nomargin>Acme</text-ui>
@@ -280,7 +273,7 @@
280
273
  </col-ui>
281
274
 
282
275
  <!-- Form panel -->
283
- <col-ui gap="4" justify="center" style="padding: var(--a-space-8)">
276
+ <col-ui gap="4" justify="center">
284
277
  <col-ui gap="1">
285
278
  <h3 variant="section" nomargin>Create your account</h3>
286
279
  <p color="subtle" nomargin>Already have one? <text-ui>Sign in</text-ui></p>
@@ -306,7 +299,7 @@
306
299
  <col-ui gap="3">
307
300
  <h2 variant="section" nomargin>Compact Card Login</h2>
308
301
  <row-ui gap="4" justify="center">
309
- <card-ui elevation="2" style="width: 100%; max-width: 360px" density="compact">
302
+ <card-ui elevation="2" density="compact">
310
303
  <section>
311
304
  <col-ui gap="3">
312
305
  <col-ui gap="1" align="center">
@@ -332,7 +325,7 @@
332
325
  <col-ui gap="3">
333
326
  <h2 variant="section" nomargin>Error States</h2>
334
327
  <row-ui gap="4" justify="center">
335
- <card-ui style="width: 100%; max-width: 400px">
328
+ <card-ui>
336
329
  <header>
337
330
  <span slot="heading"><h3>Sign in</h3></span>
338
331
  </header>
@@ -354,7 +347,7 @@
354
347
  <col-ui gap="3">
355
348
  <h2 variant="section" nomargin>Loading State</h2>
356
349
  <row-ui gap="4" justify="center">
357
- <card-ui style="width: 100%; max-width: 400px">
350
+ <card-ui>
358
351
  <header>
359
352
  <span slot="heading"><h3>Sign in</h3></span>
360
353
  </header>
@@ -377,7 +370,7 @@
377
370
  </section>
378
371
 
379
372
  <script type="module">
380
- import "../../../../web-components/components/index.js";
373
+ import "../../../../../web-components/components/index.js";
381
374
  </script>
382
375
  </body>
383
376
  </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adia-ai/a2ui-corpus",
3
- "version": "0.0.1",
3
+ "version": "0.0.2",
4
4
  "type": "module",
5
5
  "description": "AdiaUI A2UI training corpus — patterns, fragments, compositions, exemplars, eval fixtures, feedback, gap registry. Consumed by the compose engine's retrieval layer + the MCP pipeline.",
6
6
  "exports": {
package/patterns/_components.json CHANGED
@@ -2665,7 +2665,7 @@
2665
2665
  }
2666
2666
  },
2667
2667
  "events": [
2668
- "slide-change",
2668
+ "change",
2669
2669
  "autoplay-pause",
2670
2670
  "autoplay-resume"
2671
2671
  ],
@@ -3017,7 +3017,7 @@
3017
3017
  "slots": [
3018
3018
  "default"
3019
3019
  ],
3020
- "children": "<timeline-item-ui text=\"...\" time=\"...\" variant=\"...\" completed active></timeline-item-ui>"
3020
+ "children": "<timeline-item-ui text=\"...\" time=\"...\" variant=\"...\" status=\"completed\"></timeline-item-ui>"
3021
3021
  },
3022
3022
  "Toast": {
3023
3023
  "tag": "toast-ui",