@umkmall/proto 0.1.0-h2febbb98dc2a → 0.1.0-h4899a9d04570

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 +19 -8
  3. package/umkmall-prototype-starter.html +110 -97
  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-h2febbb98dc2a",
3
+ "version": "0.1.0-h4899a9d04570",
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)
@@ -36,22 +36,27 @@ Chip (Content)
36
36
  booleans: showIconLeft, showIconRight
37
37
 
38
38
  TextField (Form)
39
- size: large | small
40
- appearance: default | a2ui
39
+ size: large | small | xsmall
40
+ appearance: default | a2ui | bare
41
+ counterPlacement: below | inside
42
+ prefixPlacement: inside | outside
41
43
  booleans: error, disabled
42
- REQUIRED props (not axes): label
43
44
 
44
45
  CheckBox (Form)
45
46
  size: xlarge | large | medium | small
46
47
  appearance: default | native
47
48
  booleans: error, disabled, indeterminate
48
- REQUIRED props (not axes): label
49
49
 
50
50
  Radio (Form)
51
51
  size: large | medium | small
52
52
  booleans: error, disabled
53
53
  REQUIRED props (not axes): label
54
54
 
55
+ SegmentedControl (Form)
56
+ size: medium | small
57
+ booleans: disabled
58
+ REQUIRED props (not axes): options, value, onChange
59
+
55
60
  Switch (Form)
56
61
  size: large | medium | small
57
62
  booleans: disabled, loading
@@ -73,7 +78,7 @@ OtpInput (Form)
73
78
  REQUIRED props (not axes): value, onChange
74
79
 
75
80
  Tabs (Navigation)
76
- size: large | small
81
+ size: large | small | xsmall
77
82
  state: default | active
78
83
  appearance: default | a2ui
79
84
  booleans: showIconLeft, showNotif, showTitle
@@ -124,24 +129,29 @@ ChatDrawer (Chat)
124
129
  booleans: collapsed
125
130
 
126
131
  ChatAttachment (Chat)
127
- variant: image | file
132
+ variant: image | file | tile
133
+ size: default | large
128
134
  booleans: showSize
129
135
  REQUIRED props (not axes): name
130
136
 
131
137
  ChatToolsButton (Chat)
132
138
  state: default | active
139
+ size: compact | landing
133
140
  REQUIRED props (not axes): label
134
141
 
135
142
  ChatAttachmentButton (Chat)
136
143
  state: default | active
144
+ size: compact | landing
137
145
  REQUIRED props (not axes): label
138
146
 
139
147
  ChatVoiceButton (Chat)
140
148
  state: default | active
149
+ size: compact | landing
141
150
  REQUIRED props (not axes): label
142
151
 
143
152
  ChatSendButton (Chat)
144
153
  state: send | stop | waiting
154
+ size: compact | landing
145
155
  REQUIRED props (not axes): label
146
156
 
147
157
  ChatSoundWave (Chat)
@@ -183,7 +193,7 @@ ChatMessageTTSButton (Chat)
183
193
  Dialog (Overlays)
184
194
  size: small | medium | large | xlarge
185
195
  side: none | left | right
186
- booleans: centered, showCloseButton
196
+ booleans: centered, showCloseButton, dismissible, closeDisabled
187
197
  REQUIRED props (not axes): open, onOpenChange
188
198
 
189
199
  Menu (Overlays)
@@ -270,6 +280,7 @@ Toaster (Feedback)
270
280
  Label (Form)
271
281
  variant: default | error | success
272
282
  size: sm | md | lg
283
+ look: default | field-large | field-small
273
284
  booleans: required
274
285
 
275
286
  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-h2febbb98dc2a/umkmall-tailwind.js
22
- https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/umkmall-ui.js
21
+ https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h4899a9d04570/umkmall-tailwind.js
22
+ https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h4899a9d04570/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-h2febbb98dc2a/umkmall-tokens.css
36
+ https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h4899a9d04570/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)
@@ -67,22 +67,27 @@ Chip (Content)
67
67
  booleans: showIconLeft, showIconRight
68
68
 
69
69
  TextField (Form)
70
- size: large | small
71
- appearance: default | a2ui
70
+ size: large | small | xsmall
71
+ appearance: default | a2ui | bare
72
+ counterPlacement: below | inside
73
+ prefixPlacement: inside | outside
72
74
  booleans: error, disabled
73
- REQUIRED props (not axes): label
74
75
 
75
76
  CheckBox (Form)
76
77
  size: xlarge | large | medium | small
77
78
  appearance: default | native
78
79
  booleans: error, disabled, indeterminate
79
- REQUIRED props (not axes): label
80
80
 
81
81
  Radio (Form)
82
82
  size: large | medium | small
83
83
  booleans: error, disabled
84
84
  REQUIRED props (not axes): label
85
85
 
86
+ SegmentedControl (Form)
87
+ size: medium | small
88
+ booleans: disabled
89
+ REQUIRED props (not axes): options, value, onChange
90
+
86
91
  Switch (Form)
87
92
  size: large | medium | small
88
93
  booleans: disabled, loading
@@ -104,7 +109,7 @@ OtpInput (Form)
104
109
  REQUIRED props (not axes): value, onChange
105
110
 
106
111
  Tabs (Navigation)
107
- size: large | small
112
+ size: large | small | xsmall
108
113
  state: default | active
109
114
  appearance: default | a2ui
110
115
  booleans: showIconLeft, showNotif, showTitle
@@ -155,24 +160,29 @@ ChatDrawer (Chat)
155
160
  booleans: collapsed
156
161
 
157
162
  ChatAttachment (Chat)
158
- variant: image | file
163
+ variant: image | file | tile
164
+ size: default | large
159
165
  booleans: showSize
160
166
  REQUIRED props (not axes): name
161
167
 
162
168
  ChatToolsButton (Chat)
163
169
  state: default | active
170
+ size: compact | landing
164
171
  REQUIRED props (not axes): label
165
172
 
166
173
  ChatAttachmentButton (Chat)
167
174
  state: default | active
175
+ size: compact | landing
168
176
  REQUIRED props (not axes): label
169
177
 
170
178
  ChatVoiceButton (Chat)
171
179
  state: default | active
180
+ size: compact | landing
172
181
  REQUIRED props (not axes): label
173
182
 
174
183
  ChatSendButton (Chat)
175
184
  state: send | stop | waiting
185
+ size: compact | landing
176
186
  REQUIRED props (not axes): label
177
187
 
178
188
  ChatSoundWave (Chat)
@@ -214,7 +224,7 @@ ChatMessageTTSButton (Chat)
214
224
  Dialog (Overlays)
215
225
  size: small | medium | large | xlarge
216
226
  side: none | left | right
217
- booleans: centered, showCloseButton
227
+ booleans: centered, showCloseButton, dismissible, closeDisabled
218
228
  REQUIRED props (not axes): open, onOpenChange
219
229
 
220
230
  Menu (Overlays)
@@ -301,6 +311,7 @@ Toaster (Feedback)
301
311
  Label (Form)
302
312
  variant: default | error | success
303
313
  size: sm | md | lg
314
+ look: default | field-large | field-small
304
315
  booleans: required
305
316
 
306
317
  TRAPS — each of these renders or ignores silently, with no error:
@@ -342,6 +353,7 @@ TRAPS — each of these renders or ignores silently, with no error:
342
353
  --red-r600: 124 0 0;
343
354
  --red-r500: 162 0 0;
344
355
  --red-r400: 231 0 0;
356
+ --red-r450: 219 0 0;
345
357
  --red-r300: 235 43 43;
346
358
  --red-r200: 241 107 107;
347
359
  --red-r100: 245 150 150;
@@ -434,7 +446,7 @@ TRAPS — each of these renders or ignores silently, with no error:
434
446
  --text-default-invert: 255 255 255;
435
447
  --text-default-brand: 0 116 231;
436
448
  --text-default-success: 14 160 110;
437
- --text-default-error: 231 0 0;
449
+ --text-default-error: 219 0 0;
438
450
  --text-default-warning: 245 158 11;
439
451
  --text-hover-primary: 3 32 61;
440
452
  --text-hover-secondary: 97 118 140;
@@ -454,7 +466,7 @@ TRAPS — each of these renders or ignores silently, with no error:
454
466
  --text-focus-invert: 255 255 255;
455
467
  --text-focus-brand: 0 116 231;
456
468
  --text-focus-success: 14 160 110;
457
- --text-focus-error: 231 0 0;
469
+ --text-focus-error: 219 0 0;
458
470
  --text-focus-warning: 245 158 11;
459
471
  --text-disable-primary: 195 203 211;
460
472
  --text-disable-brand: 150 198 245;
@@ -467,7 +479,7 @@ TRAPS — each of these renders or ignores silently, with no error:
467
479
  --icon-default-invert: 255 255 255;
468
480
  --icon-default-brand: 0 116 231;
469
481
  --icon-default-success: 14 160 110;
470
- --icon-default-error: 231 0 0;
482
+ --icon-default-error: 219 0 0;
471
483
  --icon-default-warning: 245 158 11;
472
484
  --icon-hover-primary: 3 32 61;
473
485
  --icon-hover-secondary: 97 118 140;
@@ -487,7 +499,7 @@ TRAPS — each of these renders or ignores silently, with no error:
487
499
  --icon-focus-invert: 255 255 255;
488
500
  --icon-focus-brand: 0 116 231;
489
501
  --icon-focus-success: 14 160 110;
490
- --icon-focus-error: 231 0 0;
502
+ --icon-focus-error: 219 0 0;
491
503
  --icon-focus-warning: 245 158 11;
492
504
  --icon-disable-primary: 195 203 211;
493
505
  --icon-disable-brand: 150 198 245;
@@ -542,6 +554,7 @@ TRAPS — each of these renders or ignores silently, with no error:
542
554
  --surface-gradient-callout-end: 8 118 96;
543
555
  --surface-hover-neutral: 247 248 250;
544
556
  --surface-selected-hover: 227 239 252;
557
+ --surface-default-subtle: 249 250 251;
545
558
  --border-default-primary: 240 240 240;
546
559
  --border-default-invert: 195 203 211;
547
560
  --border-default-brand: 0 116 231;
@@ -636,86 +649,86 @@ TRAPS — each of these renders or ignores silently, with no error:
636
649
  --callout-neg-border: 231 0 0;
637
650
  --callout-neg-text: 4 38 72;
638
651
  --focus-halo: 150 198 245;
639
- --typography-mobile-display-bold: 700 36px/40px 'Be Vietnam Pro';
640
- --typography-mobile-display-semibold: 600 36px/40px 'Be Vietnam Pro';
641
- --typography-mobile-h1-bold: 700 28px/32px 'Be Vietnam Pro';
642
- --typography-mobile-h1-semibold: 600 28px/32px 'Be Vietnam Pro';
643
- --typography-mobile-h2-bold: 700 24px/28px 'Be Vietnam Pro';
644
- --typography-mobile-h2-semibold: 600 24px/28px 'Be Vietnam Pro';
645
- --typography-mobile-h2-medium: 500 24px/28px 'Be Vietnam Pro';
646
- --typography-mobile-h2-regular: 400 24px/28px 'Be Vietnam Pro';
647
- --typography-mobile-h3-bold: 700 20px/26px 'Be Vietnam Pro';
648
- --typography-mobile-h3-semibold: 600 20px/26px 'Be Vietnam Pro';
649
- --typography-mobile-h3-medium: 500 20px/26px 'Be Vietnam Pro';
650
- --typography-mobile-h3-regular: 400 20px/26px 'Be Vietnam Pro';
651
- --typography-mobile-h4-bold: 700 20px/26px 'Be Vietnam Pro';
652
- --typography-mobile-h4-semibold: 600 20px/26px 'Be Vietnam Pro';
653
- --typography-mobile-h4-medium: 500 20px/26px 'Be Vietnam Pro';
654
- --typography-mobile-h4-regular: 400 20px/26px 'Be Vietnam Pro';
655
- --typography-mobile-h5-bold: 700 18px/24px 'Be Vietnam Pro';
656
- --typography-mobile-h5-semibold: 600 18px/24px 'Be Vietnam Pro';
657
- --typography-mobile-h5-medium: 500 18px/24px 'Be Vietnam Pro';
658
- --typography-mobile-h5-regular: 400 18px/24px 'Be Vietnam Pro';
659
- --typography-mobile-h6-bold: 700 16px/24px 'Be Vietnam Pro';
660
- --typography-mobile-h6-semibold: 600 16px/24px 'Be Vietnam Pro';
661
- --typography-mobile-h6-medium: 500 16px/24px 'Be Vietnam Pro';
662
- --typography-mobile-h6-regular: 400 16px/24px 'Be Vietnam Pro';
663
- --typography-mobile-paragraph-bold: 700 14px/20px 'Be Vietnam Pro';
664
- --typography-mobile-paragraph-semibold: 600 14px/20px 'Be Vietnam Pro';
665
- --typography-mobile-paragraph-medium: 500 14px/20px 'Be Vietnam Pro';
666
- --typography-mobile-paragraph-regular: 400 14px/20px 'Be Vietnam Pro';
667
- --typography-mobile-body-lg-bold: 700 12px/18px 'Be Vietnam Pro';
668
- --typography-mobile-body-lg-semibold: 600 12px/18px 'Be Vietnam Pro';
669
- --typography-mobile-body-lg-medium: 500 12px/18px 'Be Vietnam Pro';
670
- --typography-mobile-body-lg-regular: 400 12px/18px 'Be Vietnam Pro';
671
- --typography-mobile-body-md-bold: 700 10px/16px 'Be Vietnam Pro';
672
- --typography-mobile-body-md-semibold: 600 10px/16px 'Be Vietnam Pro';
673
- --typography-mobile-body-md-medium: 500 10px/16px 'Be Vietnam Pro';
674
- --typography-mobile-body-md-regular: 400 10px/16px 'Be Vietnam Pro';
675
- --typography-mobile-body-sm-bold: 700 8px/14px 'Be Vietnam Pro';
676
- --typography-mobile-body-sm-semibold: 600 8px/14px 'Be Vietnam Pro';
677
- --typography-mobile-body-sm-medium: 500 8px/14px 'Be Vietnam Pro';
678
- --typography-mobile-body-sm-regular: 400 8px/14px 'Be Vietnam Pro';
679
- --typography-desktop-display-bold: 700 56px/64px 'Be Vietnam Pro';
680
- --typography-desktop-display-semibold: 600 56px/64px 'Be Vietnam Pro';
681
- --typography-desktop-h1-bold: 700 40px/48px 'Be Vietnam Pro';
682
- --typography-desktop-h1-semibold: 600 40px/48px 'Be Vietnam Pro';
683
- --typography-desktop-h2-bold: 700 32px/40px 'Be Vietnam Pro';
684
- --typography-desktop-h2-semibold: 600 32px/40px 'Be Vietnam Pro';
685
- --typography-desktop-h2-medium: 500 32px/40px 'Be Vietnam Pro';
686
- --typography-desktop-h2-regular: 400 32px/40px 'Be Vietnam Pro';
687
- --typography-desktop-h3-bold: 700 28px/36px 'Be Vietnam Pro';
688
- --typography-desktop-h3-semibold: 600 28px/36px 'Be Vietnam Pro';
689
- --typography-desktop-h3-medium: 500 28px/36px 'Be Vietnam Pro';
690
- --typography-desktop-h3-regular: 400 28px/36px 'Be Vietnam Pro';
691
- --typography-desktop-h4-bold: 700 24px/32px 'Be Vietnam Pro';
692
- --typography-desktop-h4-semibold: 600 24px/32px 'Be Vietnam Pro';
693
- --typography-desktop-h4-medium: 500 24px/32px 'Be Vietnam Pro';
694
- --typography-desktop-h4-regular: 400 24px/32px 'Be Vietnam Pro';
695
- --typography-desktop-h5-bold: 700 20px/28px 'Be Vietnam Pro';
696
- --typography-desktop-h5-semibold: 600 20px/28px 'Be Vietnam Pro';
697
- --typography-desktop-h5-medium: 500 20px/28px 'Be Vietnam Pro';
698
- --typography-desktop-h5-regular: 400 20px/28px 'Be Vietnam Pro';
699
- --typography-desktop-h6-bold: 700 18px/28px 'Be Vietnam Pro';
700
- --typography-desktop-h6-semibold: 600 18px/28px 'Be Vietnam Pro';
701
- --typography-desktop-h6-medium: 500 18px/28px 'Be Vietnam Pro';
702
- --typography-desktop-h6-regular: 400 18px/28px 'Be Vietnam Pro';
703
- --typography-desktop-paragraph-bold: 700 16px/24px 'Be Vietnam Pro';
704
- --typography-desktop-paragraph-semibold: 600 16px/24px 'Be Vietnam Pro';
705
- --typography-desktop-paragraph-medium: 500 16px/24px 'Be Vietnam Pro';
706
- --typography-desktop-paragraph-regular: 400 16px/24px 'Be Vietnam Pro';
707
- --typography-desktop-body-lg-bold: 700 14px/20px 'Be Vietnam Pro';
708
- --typography-desktop-body-lg-semibold: 600 14px/20px 'Be Vietnam Pro';
709
- --typography-desktop-body-lg-medium: 500 14px/20px 'Be Vietnam Pro';
710
- --typography-desktop-body-lg-regular: 400 14px/20px 'Be Vietnam Pro';
711
- --typography-desktop-body-md-bold: 700 12px/18px 'Be Vietnam Pro';
712
- --typography-desktop-body-md-semibold: 600 12px/18px 'Be Vietnam Pro';
713
- --typography-desktop-body-md-medium: 500 12px/18px 'Be Vietnam Pro';
714
- --typography-desktop-body-md-regular: 400 12px/18px 'Be Vietnam Pro';
715
- --typography-desktop-body-sm-bold: 700 10px/16px 'Be Vietnam Pro';
716
- --typography-desktop-body-sm-semibold: 600 10px/16px 'Be Vietnam Pro';
717
- --typography-desktop-body-sm-medium: 500 10px/16px 'Be Vietnam Pro';
718
- --typography-desktop-body-sm-regular: 400 10px/16px 'Be Vietnam Pro';
652
+ --typography-mobile-display-bold: 700 calc(2.25rem * var(--ds-text-scale, 1))/calc(2.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
653
+ --typography-mobile-display-semibold: 600 calc(2.25rem * var(--ds-text-scale, 1))/calc(2.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
654
+ --typography-mobile-h1-bold: 700 calc(1.75rem * var(--ds-text-scale, 1))/calc(2rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
655
+ --typography-mobile-h1-semibold: 600 calc(1.75rem * var(--ds-text-scale, 1))/calc(2rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
656
+ --typography-mobile-h2-bold: 700 calc(1.5rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
657
+ --typography-mobile-h2-semibold: 600 calc(1.5rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
658
+ --typography-mobile-h2-medium: 500 calc(1.5rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
659
+ --typography-mobile-h2-regular: 400 calc(1.5rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
660
+ --typography-mobile-h3-bold: 700 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
661
+ --typography-mobile-h3-semibold: 600 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
662
+ --typography-mobile-h3-medium: 500 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
663
+ --typography-mobile-h3-regular: 400 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
664
+ --typography-mobile-h4-bold: 700 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
665
+ --typography-mobile-h4-semibold: 600 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
666
+ --typography-mobile-h4-medium: 500 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
667
+ --typography-mobile-h4-regular: 400 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
668
+ --typography-mobile-h5-bold: 700 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
669
+ --typography-mobile-h5-semibold: 600 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
670
+ --typography-mobile-h5-medium: 500 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
671
+ --typography-mobile-h5-regular: 400 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
672
+ --typography-mobile-h6-bold: 700 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
673
+ --typography-mobile-h6-semibold: 600 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
674
+ --typography-mobile-h6-medium: 500 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
675
+ --typography-mobile-h6-regular: 400 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
676
+ --typography-mobile-paragraph-bold: 700 calc(0.875rem * var(--ds-text-scale, 1))/calc(1.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
677
+ --typography-mobile-paragraph-semibold: 600 calc(0.875rem * var(--ds-text-scale, 1))/calc(1.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
678
+ --typography-mobile-paragraph-medium: 500 calc(0.875rem * var(--ds-text-scale, 1))/calc(1.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
679
+ --typography-mobile-paragraph-regular: 400 calc(0.875rem * var(--ds-text-scale, 1))/calc(1.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
680
+ --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';
681
+ --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';
682
+ --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';
683
+ --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';
684
+ --typography-mobile-body-md-bold: 700 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
685
+ --typography-mobile-body-md-semibold: 600 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
686
+ --typography-mobile-body-md-medium: 500 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
687
+ --typography-mobile-body-md-regular: 400 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
688
+ --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';
689
+ --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';
690
+ --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';
691
+ --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';
692
+ --typography-desktop-display-bold: 700 calc(3.5rem * var(--ds-text-scale, 1))/calc(4rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
693
+ --typography-desktop-display-semibold: 600 calc(3.5rem * var(--ds-text-scale, 1))/calc(4rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
694
+ --typography-desktop-h1-bold: 700 calc(2.5rem * var(--ds-text-scale, 1))/calc(3rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
695
+ --typography-desktop-h1-semibold: 600 calc(2.5rem * var(--ds-text-scale, 1))/calc(3rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
696
+ --typography-desktop-h2-bold: 700 calc(2rem * var(--ds-text-scale, 1))/calc(2.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
697
+ --typography-desktop-h2-semibold: 600 calc(2rem * var(--ds-text-scale, 1))/calc(2.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
698
+ --typography-desktop-h2-medium: 500 calc(2rem * var(--ds-text-scale, 1))/calc(2.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
699
+ --typography-desktop-h2-regular: 400 calc(2rem * var(--ds-text-scale, 1))/calc(2.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
700
+ --typography-desktop-h3-bold: 700 calc(1.75rem * var(--ds-text-scale, 1))/calc(2.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
701
+ --typography-desktop-h3-semibold: 600 calc(1.75rem * var(--ds-text-scale, 1))/calc(2.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
702
+ --typography-desktop-h3-medium: 500 calc(1.75rem * var(--ds-text-scale, 1))/calc(2.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
703
+ --typography-desktop-h3-regular: 400 calc(1.75rem * var(--ds-text-scale, 1))/calc(2.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
704
+ --typography-desktop-h4-bold: 700 calc(1.5rem * var(--ds-text-scale, 1))/calc(2rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
705
+ --typography-desktop-h4-semibold: 600 calc(1.5rem * var(--ds-text-scale, 1))/calc(2rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
706
+ --typography-desktop-h4-medium: 500 calc(1.5rem * var(--ds-text-scale, 1))/calc(2rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
707
+ --typography-desktop-h4-regular: 400 calc(1.5rem * var(--ds-text-scale, 1))/calc(2rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
708
+ --typography-desktop-h5-bold: 700 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
709
+ --typography-desktop-h5-semibold: 600 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
710
+ --typography-desktop-h5-medium: 500 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
711
+ --typography-desktop-h5-regular: 400 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
712
+ --typography-desktop-h6-bold: 700 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
713
+ --typography-desktop-h6-semibold: 600 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
714
+ --typography-desktop-h6-medium: 500 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
715
+ --typography-desktop-h6-regular: 400 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
716
+ --typography-desktop-paragraph-bold: 700 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
717
+ --typography-desktop-paragraph-semibold: 600 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
718
+ --typography-desktop-paragraph-medium: 500 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
719
+ --typography-desktop-paragraph-regular: 400 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
720
+ --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';
721
+ --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';
722
+ --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';
723
+ --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';
724
+ --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';
725
+ --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';
726
+ --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';
727
+ --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';
728
+ --typography-desktop-body-sm-bold: 700 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
729
+ --typography-desktop-body-sm-semibold: 600 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
730
+ --typography-desktop-body-sm-medium: 500 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
731
+ --typography-desktop-body-sm-regular: 400 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
719
732
  --elevation-overlay: 99999;
720
733
  }
721
734
 
@@ -730,8 +743,8 @@ TRAPS — each of these renders or ignores silently, with no error:
730
743
  body { color: rgb(var(--text-default-primary)); }
731
744
  </style>
732
745
  <script src="https://cdn.tailwindcss.com"></script>
733
- <script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/umkmall-tailwind.js"></script>
734
- <script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/umkmall-ui.js"></script>
746
+ <script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h4899a9d04570/umkmall-tailwind.js"></script>
747
+ <script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h4899a9d04570/umkmall-ui.js"></script>
735
748
  <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.26.4/babel.min.js"></script>
736
749
  </head>
737
750
  <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-h2febbb98dc2a/umkmall-starter.md
33
- the demo block on its own https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/umkmall-starter-app.md
34
- the component vocabulary https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/umkmall-components.md
35
- the starter as a raw .html file https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/umkmall-prototype-starter.html
32
+ the whole starter, in a code block https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h4899a9d04570/umkmall-starter.md
33
+ the demo block on its own https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h4899a9d04570/umkmall-starter-app.md
34
+ the component vocabulary https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h4899a9d04570/umkmall-components.md
35
+ the starter as a raw .html file https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h4899a9d04570/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-h2febbb98dc2a/umkmall-components.md
153
+ https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h4899a9d04570/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-h2febbb98dc2a/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-h4899a9d04570/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-h2febbb98dc2a/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-h4899a9d04570/umkmall-rules.md).
11
11
 
12
12
  ```jsx
13
13
  /*