@umkmall/proto 0.1.0-hb91c1d853ca4 → 0.1.0-hcb64dbae397f

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 (9) hide show
  1. package/package.json +1 -1
  2. package/umkmall-components.md +29 -6
  3. package/umkmall-prototype-starter.html +120 -95
  4. package/umkmall-rules.md +5 -5
  5. package/umkmall-starter-app.md +2 -2
  6. package/umkmall-starter.md +95 -93
  7. package/umkmall-tailwind.js +77 -54
  8. package/umkmall-tokens.css +86 -84
  9. package/umkmall-ui.js +23 -18
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umkmall/proto",
3
- "version": "0.1.0-hb91c1d853ca4",
3
+ "version": "0.1.0-hcb64dbae397f",
4
4
  "description": "UMKMall design-system assets and prototyping docs, served from jsDelivr. Generated — see README.",
5
5
  "license": "UNLICENSED",
6
6
  "files": [
package/umkmall-components.md CHANGED
@@ -6,7 +6,7 @@ Every component below is published on `window.UmkmallUI` by the browser bundle.
6
6
  axis values listed, and pass every REQUIRED prop an entry names.
7
7
 
8
8
  ```
9
- UMKMall UI — 56 components, and the values each axis accepts.
9
+ UMKMall UI — 57 components, and the values each axis accepts.
10
10
  Generated from packages/ui/src/contract/variants.ts. Do not hand-edit.
11
11
 
12
12
  Button (Foundations)
@@ -21,32 +21,42 @@ Alert (Feedback)
21
21
  function: success | info | warning | danger
22
22
  size: large | medium | small
23
23
  treatment: full | accent | coach | banner
24
+ appearance: default | a2ui
24
25
 
25
26
  Badge (Content)
26
27
  color: primary | warning | success | danger | light | bestseller | gradient
27
28
  size: xlarge | medium | small | micro
29
+ appearance: default | a2ui
28
30
  booleans: showIconLeft, showIconRight
29
31
 
30
32
  Chip (Content)
31
33
  state: default | active
32
34
  size: huge | xlarge | large | medium | small | micro
35
+ appearance: default | a2ui
33
36
  booleans: showIconLeft, showIconRight
34
37
 
35
38
  TextField (Form)
36
- size: large | small
39
+ size: large | small | xsmall
40
+ appearance: default | a2ui | bare
41
+ counterPlacement: below | inside
42
+ prefixPlacement: inside | outside
37
43
  booleans: error, disabled
38
- REQUIRED props (not axes): label
39
44
 
40
45
  CheckBox (Form)
41
46
  size: xlarge | large | medium | small
47
+ appearance: default | native
42
48
  booleans: error, disabled, indeterminate
43
- REQUIRED props (not axes): label
44
49
 
45
50
  Radio (Form)
46
51
  size: large | medium | small
47
52
  booleans: error, disabled
48
53
  REQUIRED props (not axes): label
49
54
 
55
+ SegmentedControl (Form)
56
+ size: medium | small
57
+ booleans: disabled
58
+ REQUIRED props (not axes): options, value, onChange
59
+
50
60
  Switch (Form)
51
61
  size: large | medium | small
52
62
  booleans: disabled, loading
@@ -59,6 +69,7 @@ Slider (Form)
59
69
  DateTimeInput (Form)
60
70
  size: large | small
61
71
  selection: single | range
72
+ appearance: default | a2ui
62
73
  booleans: error, disabled, withTime, portal
63
74
 
64
75
  OtpInput (Form)
@@ -67,8 +78,9 @@ OtpInput (Form)
67
78
  REQUIRED props (not axes): value, onChange
68
79
 
69
80
  Tabs (Navigation)
70
- size: large | small
81
+ size: large | small | xsmall
71
82
  state: default | active
83
+ appearance: default | a2ui
72
84
  booleans: showIconLeft, showNotif, showTitle
73
85
 
74
86
  Tooltip (Feedback)
@@ -176,7 +188,7 @@ ChatMessageTTSButton (Chat)
176
188
  Dialog (Overlays)
177
189
  size: small | medium | large | xlarge
178
190
  side: none | left | right
179
- booleans: centered, showCloseButton
191
+ booleans: centered, showCloseButton, dismissible, closeDisabled
180
192
  REQUIRED props (not axes): open, onOpenChange
181
193
 
182
194
  Menu (Overlays)
@@ -190,30 +202,37 @@ Popover (Overlays)
190
202
  Card (Content)
191
203
  variant: elevated | outlined | plain
192
204
  padding: none | small | medium | large
205
+ appearance: default | a2ui | a2ui-hero
193
206
 
194
207
  Divider (Content)
195
208
  variant: default | dashed
196
209
  orientation: horizontal | vertical
210
+ appearance: default | a2ui
197
211
 
198
212
  List (Content)
199
213
 
200
214
  Disclosure (Content)
215
+ appearance: default | a2ui
201
216
  REQUIRED props (not axes): title
202
217
 
203
218
  Image (Content)
204
219
  type: thumbnail | banner | natural | avatar
205
220
  size: regular | small | blog
221
+ appearance: default | a2ui
206
222
  booleans: hover
207
223
 
208
224
  SelectionCard (Form)
209
225
  size: large | small
210
226
  state: default | selected | disabled
227
+ layout: row | tile
228
+ appearance: default | choice
211
229
  REQUIRED props (not axes): options
212
230
 
213
231
  Upload (Form)
214
232
  size: large | small
215
233
  status: default | filled | error | disabled | busy
216
234
  border: solid | dashed
235
+ appearance: default | a2ui
217
236
 
218
237
  Select (Form)
219
238
  size: large | small
@@ -223,6 +242,7 @@ Select (Form)
223
242
 
224
243
  CodeBlock (Content)
225
244
  size: large | small
245
+ appearance: default | a2ui
226
246
 
227
247
  Stepper (Navigation)
228
248
  position: first | middle | last
@@ -232,10 +252,12 @@ Stepper (Navigation)
232
252
 
233
253
  Pagination (Navigation)
234
254
  size: large | small
255
+ density: compact | comfortable
235
256
  booleans: disabled
236
257
  REQUIRED props (not axes): page, onPageChange
237
258
 
238
259
  Table (Content)
260
+ density: compact | comfortable
239
261
  booleans: loading, serverSide, hidePagination, fixedLayout, noBorder, slimScrollbar
240
262
 
241
263
  Spinner (Feedback)
@@ -253,6 +275,7 @@ Toaster (Feedback)
253
275
  Label (Form)
254
276
  variant: default | error | success
255
277
  size: sm | md | lg
278
+ look: default | field-large | field-small
256
279
  booleans: required
257
280
 
258
281
  TRAPS — each of these renders or ignores silently, with no error:
package/umkmall-prototype-starter.html CHANGED
@@ -18,8 +18,8 @@ HOW TO USE THIS FILE
18
18
  WHAT THIS FILE NEEDS FROM THE NETWORK
19
19
  Four hosts, every time it is opened — not just the first time:
20
20
 
21
- https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hb91c1d853ca4/umkmall-tailwind.js
22
- https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hb91c1d853ca4/umkmall-ui.js
21
+ https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hcb64dbae397f/umkmall-tailwind.js
22
+ https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hcb64dbae397f/umkmall-ui.js
23
23
  https://cdn.jsdelivr.net/npm/@babel/standalone@7.26.4/babel.min.js
24
24
  — all on jsDelivr: the design system's assets (pinned) and the JSX compiler.
25
25
  The token CSS is NOT fetched: it is inlined in the <style> below, because a claude.ai
@@ -33,11 +33,11 @@ WHAT THIS FILE NEEDS FROM THE NETWORK
33
33
 
34
34
  YOU DO NOT HAVE TO START FROM THIS FILE
35
35
  Four tags add UMKMall styling to a page you already have: the token CSS as a <link> to
36
- https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hb91c1d853ca4/umkmall-tokens.css
36
+ https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hcb64dbae397f/umkmall-tokens.css
37
37
  then the Play CDN, the config and the bundle below. Keep the order — the config must come after
38
38
  the Play CDN script, or the theme arrives too late and every class resolves to nothing.
39
39
 
40
- UMKMall UI — 56 components, and the values each axis accepts.
40
+ UMKMall UI — 57 components, and the values each axis accepts.
41
41
  Generated from packages/ui/src/contract/variants.ts. Do not hand-edit.
42
42
 
43
43
  Button (Foundations)
@@ -52,32 +52,42 @@ Alert (Feedback)
52
52
  function: success | info | warning | danger
53
53
  size: large | medium | small
54
54
  treatment: full | accent | coach | banner
55
+ appearance: default | a2ui
55
56
 
56
57
  Badge (Content)
57
58
  color: primary | warning | success | danger | light | bestseller | gradient
58
59
  size: xlarge | medium | small | micro
60
+ appearance: default | a2ui
59
61
  booleans: showIconLeft, showIconRight
60
62
 
61
63
  Chip (Content)
62
64
  state: default | active
63
65
  size: huge | xlarge | large | medium | small | micro
66
+ appearance: default | a2ui
64
67
  booleans: showIconLeft, showIconRight
65
68
 
66
69
  TextField (Form)
67
- size: large | small
70
+ size: large | small | xsmall
71
+ appearance: default | a2ui | bare
72
+ counterPlacement: below | inside
73
+ prefixPlacement: inside | outside
68
74
  booleans: error, disabled
69
- REQUIRED props (not axes): label
70
75
 
71
76
  CheckBox (Form)
72
77
  size: xlarge | large | medium | small
78
+ appearance: default | native
73
79
  booleans: error, disabled, indeterminate
74
- REQUIRED props (not axes): label
75
80
 
76
81
  Radio (Form)
77
82
  size: large | medium | small
78
83
  booleans: error, disabled
79
84
  REQUIRED props (not axes): label
80
85
 
86
+ SegmentedControl (Form)
87
+ size: medium | small
88
+ booleans: disabled
89
+ REQUIRED props (not axes): options, value, onChange
90
+
81
91
  Switch (Form)
82
92
  size: large | medium | small
83
93
  booleans: disabled, loading
@@ -90,6 +100,7 @@ Slider (Form)
90
100
  DateTimeInput (Form)
91
101
  size: large | small
92
102
  selection: single | range
103
+ appearance: default | a2ui
93
104
  booleans: error, disabled, withTime, portal
94
105
 
95
106
  OtpInput (Form)
@@ -98,8 +109,9 @@ OtpInput (Form)
98
109
  REQUIRED props (not axes): value, onChange
99
110
 
100
111
  Tabs (Navigation)
101
- size: large | small
112
+ size: large | small | xsmall
102
113
  state: default | active
114
+ appearance: default | a2ui
103
115
  booleans: showIconLeft, showNotif, showTitle
104
116
 
105
117
  Tooltip (Feedback)
@@ -207,7 +219,7 @@ ChatMessageTTSButton (Chat)
207
219
  Dialog (Overlays)
208
220
  size: small | medium | large | xlarge
209
221
  side: none | left | right
210
- booleans: centered, showCloseButton
222
+ booleans: centered, showCloseButton, dismissible, closeDisabled
211
223
  REQUIRED props (not axes): open, onOpenChange
212
224
 
213
225
  Menu (Overlays)
@@ -221,30 +233,37 @@ Popover (Overlays)
221
233
  Card (Content)
222
234
  variant: elevated | outlined | plain
223
235
  padding: none | small | medium | large
236
+ appearance: default | a2ui | a2ui-hero
224
237
 
225
238
  Divider (Content)
226
239
  variant: default | dashed
227
240
  orientation: horizontal | vertical
241
+ appearance: default | a2ui
228
242
 
229
243
  List (Content)
230
244
 
231
245
  Disclosure (Content)
246
+ appearance: default | a2ui
232
247
  REQUIRED props (not axes): title
233
248
 
234
249
  Image (Content)
235
250
  type: thumbnail | banner | natural | avatar
236
251
  size: regular | small | blog
252
+ appearance: default | a2ui
237
253
  booleans: hover
238
254
 
239
255
  SelectionCard (Form)
240
256
  size: large | small
241
257
  state: default | selected | disabled
258
+ layout: row | tile
259
+ appearance: default | choice
242
260
  REQUIRED props (not axes): options
243
261
 
244
262
  Upload (Form)
245
263
  size: large | small
246
264
  status: default | filled | error | disabled | busy
247
265
  border: solid | dashed
266
+ appearance: default | a2ui
248
267
 
249
268
  Select (Form)
250
269
  size: large | small
@@ -254,6 +273,7 @@ Select (Form)
254
273
 
255
274
  CodeBlock (Content)
256
275
  size: large | small
276
+ appearance: default | a2ui
257
277
 
258
278
  Stepper (Navigation)
259
279
  position: first | middle | last
@@ -263,10 +283,12 @@ Stepper (Navigation)
263
283
 
264
284
  Pagination (Navigation)
265
285
  size: large | small
286
+ density: compact | comfortable
266
287
  booleans: disabled
267
288
  REQUIRED props (not axes): page, onPageChange
268
289
 
269
290
  Table (Content)
291
+ density: compact | comfortable
270
292
  booleans: loading, serverSide, hidePagination, fixedLayout, noBorder, slimScrollbar
271
293
 
272
294
  Spinner (Feedback)
@@ -284,6 +306,7 @@ Toaster (Feedback)
284
306
  Label (Form)
285
307
  variant: default | error | success
286
308
  size: sm | md | lg
309
+ look: default | field-large | field-small
287
310
  booleans: required
288
311
 
289
312
  TRAPS — each of these renders or ignores silently, with no error:
@@ -325,6 +348,7 @@ TRAPS — each of these renders or ignores silently, with no error:
325
348
  --red-r600: 124 0 0;
326
349
  --red-r500: 162 0 0;
327
350
  --red-r400: 231 0 0;
351
+ --red-r450: 219 0 0;
328
352
  --red-r300: 235 43 43;
329
353
  --red-r200: 241 107 107;
330
354
  --red-r100: 245 150 150;
@@ -417,7 +441,7 @@ TRAPS — each of these renders or ignores silently, with no error:
417
441
  --text-default-invert: 255 255 255;
418
442
  --text-default-brand: 0 116 231;
419
443
  --text-default-success: 14 160 110;
420
- --text-default-error: 231 0 0;
444
+ --text-default-error: 219 0 0;
421
445
  --text-default-warning: 245 158 11;
422
446
  --text-hover-primary: 3 32 61;
423
447
  --text-hover-secondary: 97 118 140;
@@ -437,7 +461,7 @@ TRAPS — each of these renders or ignores silently, with no error:
437
461
  --text-focus-invert: 255 255 255;
438
462
  --text-focus-brand: 0 116 231;
439
463
  --text-focus-success: 14 160 110;
440
- --text-focus-error: 231 0 0;
464
+ --text-focus-error: 219 0 0;
441
465
  --text-focus-warning: 245 158 11;
442
466
  --text-disable-primary: 195 203 211;
443
467
  --text-disable-brand: 150 198 245;
@@ -450,7 +474,7 @@ TRAPS — each of these renders or ignores silently, with no error:
450
474
  --icon-default-invert: 255 255 255;
451
475
  --icon-default-brand: 0 116 231;
452
476
  --icon-default-success: 14 160 110;
453
- --icon-default-error: 231 0 0;
477
+ --icon-default-error: 219 0 0;
454
478
  --icon-default-warning: 245 158 11;
455
479
  --icon-hover-primary: 3 32 61;
456
480
  --icon-hover-secondary: 97 118 140;
@@ -470,7 +494,7 @@ TRAPS — each of these renders or ignores silently, with no error:
470
494
  --icon-focus-invert: 255 255 255;
471
495
  --icon-focus-brand: 0 116 231;
472
496
  --icon-focus-success: 14 160 110;
473
- --icon-focus-error: 231 0 0;
497
+ --icon-focus-error: 219 0 0;
474
498
  --icon-focus-warning: 245 158 11;
475
499
  --icon-disable-primary: 195 203 211;
476
500
  --icon-disable-brand: 150 198 245;
@@ -525,6 +549,7 @@ TRAPS — each of these renders or ignores silently, with no error:
525
549
  --surface-gradient-callout-end: 8 118 96;
526
550
  --surface-hover-neutral: 247 248 250;
527
551
  --surface-selected-hover: 227 239 252;
552
+ --surface-default-subtle: 249 250 251;
528
553
  --border-default-primary: 240 240 240;
529
554
  --border-default-invert: 195 203 211;
530
555
  --border-default-brand: 0 116 231;
@@ -619,86 +644,86 @@ TRAPS — each of these renders or ignores silently, with no error:
619
644
  --callout-neg-border: 231 0 0;
620
645
  --callout-neg-text: 4 38 72;
621
646
  --focus-halo: 150 198 245;
622
- --typography-mobile-display-bold: 700 36px/40px 'Be Vietnam Pro';
623
- --typography-mobile-display-semibold: 600 36px/40px 'Be Vietnam Pro';
624
- --typography-mobile-h1-bold: 700 28px/32px 'Be Vietnam Pro';
625
- --typography-mobile-h1-semibold: 600 28px/32px 'Be Vietnam Pro';
626
- --typography-mobile-h2-bold: 700 24px/28px 'Be Vietnam Pro';
627
- --typography-mobile-h2-semibold: 600 24px/28px 'Be Vietnam Pro';
628
- --typography-mobile-h2-medium: 500 24px/28px 'Be Vietnam Pro';
629
- --typography-mobile-h2-regular: 400 24px/28px 'Be Vietnam Pro';
630
- --typography-mobile-h3-bold: 700 20px/26px 'Be Vietnam Pro';
631
- --typography-mobile-h3-semibold: 600 20px/26px 'Be Vietnam Pro';
632
- --typography-mobile-h3-medium: 500 20px/26px 'Be Vietnam Pro';
633
- --typography-mobile-h3-regular: 400 20px/26px 'Be Vietnam Pro';
634
- --typography-mobile-h4-bold: 700 20px/26px 'Be Vietnam Pro';
635
- --typography-mobile-h4-semibold: 600 20px/26px 'Be Vietnam Pro';
636
- --typography-mobile-h4-medium: 500 20px/26px 'Be Vietnam Pro';
637
- --typography-mobile-h4-regular: 400 20px/26px 'Be Vietnam Pro';
638
- --typography-mobile-h5-bold: 700 18px/24px 'Be Vietnam Pro';
639
- --typography-mobile-h5-semibold: 600 18px/24px 'Be Vietnam Pro';
640
- --typography-mobile-h5-medium: 500 18px/24px 'Be Vietnam Pro';
641
- --typography-mobile-h5-regular: 400 18px/24px 'Be Vietnam Pro';
642
- --typography-mobile-h6-bold: 700 16px/24px 'Be Vietnam Pro';
643
- --typography-mobile-h6-semibold: 600 16px/24px 'Be Vietnam Pro';
644
- --typography-mobile-h6-medium: 500 16px/24px 'Be Vietnam Pro';
645
- --typography-mobile-h6-regular: 400 16px/24px 'Be Vietnam Pro';
646
- --typography-mobile-paragraph-bold: 700 14px/20px 'Be Vietnam Pro';
647
- --typography-mobile-paragraph-semibold: 600 14px/20px 'Be Vietnam Pro';
648
- --typography-mobile-paragraph-medium: 500 14px/20px 'Be Vietnam Pro';
649
- --typography-mobile-paragraph-regular: 400 14px/20px 'Be Vietnam Pro';
650
- --typography-mobile-body-lg-bold: 700 12px/18px 'Be Vietnam Pro';
651
- --typography-mobile-body-lg-semibold: 600 12px/18px 'Be Vietnam Pro';
652
- --typography-mobile-body-lg-medium: 500 12px/18px 'Be Vietnam Pro';
653
- --typography-mobile-body-lg-regular: 400 12px/18px 'Be Vietnam Pro';
654
- --typography-mobile-body-md-bold: 700 10px/16px 'Be Vietnam Pro';
655
- --typography-mobile-body-md-semibold: 600 10px/16px 'Be Vietnam Pro';
656
- --typography-mobile-body-md-medium: 500 10px/16px 'Be Vietnam Pro';
657
- --typography-mobile-body-md-regular: 400 10px/16px 'Be Vietnam Pro';
658
- --typography-mobile-body-sm-bold: 700 8px/14px 'Be Vietnam Pro';
659
- --typography-mobile-body-sm-semibold: 600 8px/14px 'Be Vietnam Pro';
660
- --typography-mobile-body-sm-medium: 500 8px/14px 'Be Vietnam Pro';
661
- --typography-mobile-body-sm-regular: 400 8px/14px 'Be Vietnam Pro';
662
- --typography-desktop-display-bold: 700 56px/64px 'Be Vietnam Pro';
663
- --typography-desktop-display-semibold: 600 56px/64px 'Be Vietnam Pro';
664
- --typography-desktop-h1-bold: 700 40px/48px 'Be Vietnam Pro';
665
- --typography-desktop-h1-semibold: 600 40px/48px 'Be Vietnam Pro';
666
- --typography-desktop-h2-bold: 700 32px/40px 'Be Vietnam Pro';
667
- --typography-desktop-h2-semibold: 600 32px/40px 'Be Vietnam Pro';
668
- --typography-desktop-h2-medium: 500 32px/40px 'Be Vietnam Pro';
669
- --typography-desktop-h2-regular: 400 32px/40px 'Be Vietnam Pro';
670
- --typography-desktop-h3-bold: 700 28px/36px 'Be Vietnam Pro';
671
- --typography-desktop-h3-semibold: 600 28px/36px 'Be Vietnam Pro';
672
- --typography-desktop-h3-medium: 500 28px/36px 'Be Vietnam Pro';
673
- --typography-desktop-h3-regular: 400 28px/36px 'Be Vietnam Pro';
674
- --typography-desktop-h4-bold: 700 24px/32px 'Be Vietnam Pro';
675
- --typography-desktop-h4-semibold: 600 24px/32px 'Be Vietnam Pro';
676
- --typography-desktop-h4-medium: 500 24px/32px 'Be Vietnam Pro';
677
- --typography-desktop-h4-regular: 400 24px/32px 'Be Vietnam Pro';
678
- --typography-desktop-h5-bold: 700 20px/28px 'Be Vietnam Pro';
679
- --typography-desktop-h5-semibold: 600 20px/28px 'Be Vietnam Pro';
680
- --typography-desktop-h5-medium: 500 20px/28px 'Be Vietnam Pro';
681
- --typography-desktop-h5-regular: 400 20px/28px 'Be Vietnam Pro';
682
- --typography-desktop-h6-bold: 700 18px/28px 'Be Vietnam Pro';
683
- --typography-desktop-h6-semibold: 600 18px/28px 'Be Vietnam Pro';
684
- --typography-desktop-h6-medium: 500 18px/28px 'Be Vietnam Pro';
685
- --typography-desktop-h6-regular: 400 18px/28px 'Be Vietnam Pro';
686
- --typography-desktop-paragraph-bold: 700 16px/24px 'Be Vietnam Pro';
687
- --typography-desktop-paragraph-semibold: 600 16px/24px 'Be Vietnam Pro';
688
- --typography-desktop-paragraph-medium: 500 16px/24px 'Be Vietnam Pro';
689
- --typography-desktop-paragraph-regular: 400 16px/24px 'Be Vietnam Pro';
690
- --typography-desktop-body-lg-bold: 700 14px/20px 'Be Vietnam Pro';
691
- --typography-desktop-body-lg-semibold: 600 14px/20px 'Be Vietnam Pro';
692
- --typography-desktop-body-lg-medium: 500 14px/20px 'Be Vietnam Pro';
693
- --typography-desktop-body-lg-regular: 400 14px/20px 'Be Vietnam Pro';
694
- --typography-desktop-body-md-bold: 700 12px/18px 'Be Vietnam Pro';
695
- --typography-desktop-body-md-semibold: 600 12px/18px 'Be Vietnam Pro';
696
- --typography-desktop-body-md-medium: 500 12px/18px 'Be Vietnam Pro';
697
- --typography-desktop-body-md-regular: 400 12px/18px 'Be Vietnam Pro';
698
- --typography-desktop-body-sm-bold: 700 10px/16px 'Be Vietnam Pro';
699
- --typography-desktop-body-sm-semibold: 600 10px/16px 'Be Vietnam Pro';
700
- --typography-desktop-body-sm-medium: 500 10px/16px 'Be Vietnam Pro';
701
- --typography-desktop-body-sm-regular: 400 10px/16px 'Be Vietnam Pro';
647
+ --typography-mobile-display-bold: 700 calc(2.25rem * var(--ds-text-scale, 1))/calc(2.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
648
+ --typography-mobile-display-semibold: 600 calc(2.25rem * var(--ds-text-scale, 1))/calc(2.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
649
+ --typography-mobile-h1-bold: 700 calc(1.75rem * var(--ds-text-scale, 1))/calc(2rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
650
+ --typography-mobile-h1-semibold: 600 calc(1.75rem * var(--ds-text-scale, 1))/calc(2rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
651
+ --typography-mobile-h2-bold: 700 calc(1.5rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
652
+ --typography-mobile-h2-semibold: 600 calc(1.5rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
653
+ --typography-mobile-h2-medium: 500 calc(1.5rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
654
+ --typography-mobile-h2-regular: 400 calc(1.5rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
655
+ --typography-mobile-h3-bold: 700 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
656
+ --typography-mobile-h3-semibold: 600 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
657
+ --typography-mobile-h3-medium: 500 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
658
+ --typography-mobile-h3-regular: 400 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
659
+ --typography-mobile-h4-bold: 700 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
660
+ --typography-mobile-h4-semibold: 600 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
661
+ --typography-mobile-h4-medium: 500 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
662
+ --typography-mobile-h4-regular: 400 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
663
+ --typography-mobile-h5-bold: 700 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
664
+ --typography-mobile-h5-semibold: 600 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
665
+ --typography-mobile-h5-medium: 500 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
666
+ --typography-mobile-h5-regular: 400 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
667
+ --typography-mobile-h6-bold: 700 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
668
+ --typography-mobile-h6-semibold: 600 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
669
+ --typography-mobile-h6-medium: 500 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
670
+ --typography-mobile-h6-regular: 400 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
671
+ --typography-mobile-paragraph-bold: 700 calc(0.875rem * var(--ds-text-scale, 1))/calc(1.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
672
+ --typography-mobile-paragraph-semibold: 600 calc(0.875rem * var(--ds-text-scale, 1))/calc(1.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
673
+ --typography-mobile-paragraph-medium: 500 calc(0.875rem * var(--ds-text-scale, 1))/calc(1.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
674
+ --typography-mobile-paragraph-regular: 400 calc(0.875rem * var(--ds-text-scale, 1))/calc(1.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
675
+ --typography-mobile-body-lg-bold: 700 calc(0.75rem * var(--ds-text-scale, 1))/calc(1.125rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
676
+ --typography-mobile-body-lg-semibold: 600 calc(0.75rem * var(--ds-text-scale, 1))/calc(1.125rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
677
+ --typography-mobile-body-lg-medium: 500 calc(0.75rem * var(--ds-text-scale, 1))/calc(1.125rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
678
+ --typography-mobile-body-lg-regular: 400 calc(0.75rem * var(--ds-text-scale, 1))/calc(1.125rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
679
+ --typography-mobile-body-md-bold: 700 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
680
+ --typography-mobile-body-md-semibold: 600 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
681
+ --typography-mobile-body-md-medium: 500 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
682
+ --typography-mobile-body-md-regular: 400 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
683
+ --typography-mobile-body-sm-bold: 700 calc(0.5rem * var(--ds-text-scale, 1))/calc(0.875rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
684
+ --typography-mobile-body-sm-semibold: 600 calc(0.5rem * var(--ds-text-scale, 1))/calc(0.875rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
685
+ --typography-mobile-body-sm-medium: 500 calc(0.5rem * var(--ds-text-scale, 1))/calc(0.875rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
686
+ --typography-mobile-body-sm-regular: 400 calc(0.5rem * var(--ds-text-scale, 1))/calc(0.875rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
687
+ --typography-desktop-display-bold: 700 calc(3.5rem * var(--ds-text-scale, 1))/calc(4rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
688
+ --typography-desktop-display-semibold: 600 calc(3.5rem * var(--ds-text-scale, 1))/calc(4rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
689
+ --typography-desktop-h1-bold: 700 calc(2.5rem * var(--ds-text-scale, 1))/calc(3rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
690
+ --typography-desktop-h1-semibold: 600 calc(2.5rem * var(--ds-text-scale, 1))/calc(3rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
691
+ --typography-desktop-h2-bold: 700 calc(2rem * var(--ds-text-scale, 1))/calc(2.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
692
+ --typography-desktop-h2-semibold: 600 calc(2rem * var(--ds-text-scale, 1))/calc(2.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
693
+ --typography-desktop-h2-medium: 500 calc(2rem * var(--ds-text-scale, 1))/calc(2.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
694
+ --typography-desktop-h2-regular: 400 calc(2rem * var(--ds-text-scale, 1))/calc(2.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
695
+ --typography-desktop-h3-bold: 700 calc(1.75rem * var(--ds-text-scale, 1))/calc(2.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
696
+ --typography-desktop-h3-semibold: 600 calc(1.75rem * var(--ds-text-scale, 1))/calc(2.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
697
+ --typography-desktop-h3-medium: 500 calc(1.75rem * var(--ds-text-scale, 1))/calc(2.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
698
+ --typography-desktop-h3-regular: 400 calc(1.75rem * var(--ds-text-scale, 1))/calc(2.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
699
+ --typography-desktop-h4-bold: 700 calc(1.5rem * var(--ds-text-scale, 1))/calc(2rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
700
+ --typography-desktop-h4-semibold: 600 calc(1.5rem * var(--ds-text-scale, 1))/calc(2rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
701
+ --typography-desktop-h4-medium: 500 calc(1.5rem * var(--ds-text-scale, 1))/calc(2rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
702
+ --typography-desktop-h4-regular: 400 calc(1.5rem * var(--ds-text-scale, 1))/calc(2rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
703
+ --typography-desktop-h5-bold: 700 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
704
+ --typography-desktop-h5-semibold: 600 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
705
+ --typography-desktop-h5-medium: 500 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
706
+ --typography-desktop-h5-regular: 400 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
707
+ --typography-desktop-h6-bold: 700 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
708
+ --typography-desktop-h6-semibold: 600 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
709
+ --typography-desktop-h6-medium: 500 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
710
+ --typography-desktop-h6-regular: 400 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
711
+ --typography-desktop-paragraph-bold: 700 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
712
+ --typography-desktop-paragraph-semibold: 600 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
713
+ --typography-desktop-paragraph-medium: 500 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
714
+ --typography-desktop-paragraph-regular: 400 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
715
+ --typography-desktop-body-lg-bold: 700 calc(0.875rem * var(--ds-text-scale, 1))/calc(1.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
716
+ --typography-desktop-body-lg-semibold: 600 calc(0.875rem * var(--ds-text-scale, 1))/calc(1.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
717
+ --typography-desktop-body-lg-medium: 500 calc(0.875rem * var(--ds-text-scale, 1))/calc(1.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
718
+ --typography-desktop-body-lg-regular: 400 calc(0.875rem * var(--ds-text-scale, 1))/calc(1.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
719
+ --typography-desktop-body-md-bold: 700 calc(0.75rem * var(--ds-text-scale, 1))/calc(1.125rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
720
+ --typography-desktop-body-md-semibold: 600 calc(0.75rem * var(--ds-text-scale, 1))/calc(1.125rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
721
+ --typography-desktop-body-md-medium: 500 calc(0.75rem * var(--ds-text-scale, 1))/calc(1.125rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
722
+ --typography-desktop-body-md-regular: 400 calc(0.75rem * var(--ds-text-scale, 1))/calc(1.125rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
723
+ --typography-desktop-body-sm-bold: 700 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
724
+ --typography-desktop-body-sm-semibold: 600 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
725
+ --typography-desktop-body-sm-medium: 500 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
726
+ --typography-desktop-body-sm-regular: 400 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
702
727
  --elevation-overlay: 99999;
703
728
  }
704
729
 
@@ -713,8 +738,8 @@ TRAPS — each of these renders or ignores silently, with no error:
713
738
  body { color: rgb(var(--text-default-primary)); }
714
739
  </style>
715
740
  <script src="https://cdn.tailwindcss.com"></script>
716
- <script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hb91c1d853ca4/umkmall-tailwind.js"></script>
717
- <script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hb91c1d853ca4/umkmall-ui.js"></script>
741
+ <script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hcb64dbae397f/umkmall-tailwind.js"></script>
742
+ <script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hcb64dbae397f/umkmall-ui.js"></script>
718
743
  <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.26.4/babel.min.js"></script>
719
744
  </head>
720
745
  <body class="bg-default-primary text-default-primary">
package/umkmall-rules.md CHANGED
@@ -29,10 +29,10 @@ When I answer, build the whole thing in one file and hand it back.
29
29
  Each of these is plain markdown, published for you rather than for a person.
30
30
  Fetch them if you have web access; they are always current.
31
31
 
32
- the whole starter, in a code block https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hb91c1d853ca4/umkmall-starter.md
33
- the demo block on its own https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hb91c1d853ca4/umkmall-starter-app.md
34
- the component vocabulary https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hb91c1d853ca4/umkmall-components.md
35
- the starter as a raw .html file https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hb91c1d853ca4/umkmall-prototype-starter.html
32
+ the whole starter, in a code block https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hcb64dbae397f/umkmall-starter.md
33
+ the demo block on its own https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hcb64dbae397f/umkmall-starter-app.md
34
+ the component vocabulary https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hcb64dbae397f/umkmall-components.md
35
+ the starter as a raw .html file https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hcb64dbae397f/umkmall-prototype-starter.html
36
36
 
37
37
  TAKE THE FIRST ONE. It is the entire working file — <head>, mount node and a
38
38
  demo that already renders a chat room — inside a single fenced block, so you
@@ -150,7 +150,7 @@ THE COMPONENT LIST
150
150
  Not written here. It is a published file, always current, and it carries each
151
151
  component's axes AND the props it will not render without:
152
152
 
153
- https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hb91c1d853ca4/umkmall-components.md
153
+ https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hcb64dbae397f/umkmall-components.md
154
154
 
155
155
  Fetch it, or ask me to paste it. Do not work from memory of another design
156
156
  system — an invented axis value renders unstyled with no error, and a missing
package/umkmall-starter-app.md CHANGED
@@ -1,13 +1,13 @@
1
1
  # UMKMall prototyping starter — the editable block
2
2
 
3
- This is the `<script type="text/babel">` block from [the starter](https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hb91c1d853ca4/umkmall-prototype-starter.html), on its own
3
+ This is the `<script type="text/babel">` block from [the starter](https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hcb64dbae397f/umkmall-prototype-starter.html), on its own
4
4
  so it can be read or pasted without the surrounding HTML.
5
5
 
6
6
  It renders a working chat room: a header, the journey's progress rail and quota meters, a
7
7
  scrolling transcript and a pinned composer. Edit the part between the `REPLACE THIS` and
8
8
  `end of the part you replace` markers; keep the shell around it.
9
9
 
10
- The `<head>` it needs is in the starter, or in section 3 of [the prompt](https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hb91c1d853ca4/umkmall-rules.md).
10
+ The `<head>` it needs is in the starter, or in section 3 of [the prompt](https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hcb64dbae397f/umkmall-rules.md).
11
11
 
12
12
  ```jsx
13
13
  /*