npm - @umkmall/proto - Versions diffs - 0.1.0-h726308542f5a → 0.1.0-ha04bbbde2f13 - Mend

@umkmall/proto 0.1.0-h726308542f5a → 0.1.0-ha04bbbde2f13

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

package/package.json +1 -1
package/umkmall-components.md +34 -7
package/umkmall-prototype-starter.html +125 -96
package/umkmall-rules.md +5 -5
package/umkmall-starter-app.md +2 -2
package/umkmall-starter.md +95 -93
package/umkmall-tailwind.js +77 -54
package/umkmall-tokens.css +86 -84
package/umkmall-ui.js +31 -18

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@umkmall/proto",
-  "version": "0.1.0-h726308542f5a",
+  "version": "0.1.0-ha04bbbde2f13",
   "description": "UMKMall design-system assets and prototyping docs, served from jsDelivr. Generated — see README.",
   "license": "UNLICENSED",
   "files": [

package/umkmall-components.md CHANGED Viewed

@@ -6,7 +6,7 @@ Every component below is published on `window.UmkmallUI` by the browser bundle.
 axis values listed, and pass every REQUIRED prop an entry names.
 ```
-UMKMall UI — 56 components, and the values each axis accepts.
+UMKMall UI — 57 components, and the values each axis accepts.
 Generated from packages/ui/src/contract/variants.ts. Do not hand-edit.
 Button (Foundations)
@@ -21,32 +21,42 @@ Alert (Feedback)
   function: success | info | warning | danger
   size: large | medium | small
   treatment: full | accent | coach | banner
+  appearance: default | a2ui
 Badge (Content)
   color: primary | warning | success | danger | light | bestseller | gradient
   size: xlarge | medium | small | micro
+  appearance: default | a2ui
   booleans: showIconLeft, showIconRight
 Chip (Content)
   state: default | active
   size: huge | xlarge | large | medium | small | micro
+  appearance: default | a2ui
   booleans: showIconLeft, showIconRight
 TextField (Form)
-  size: large | small
+  size: large | small | xsmall
+  appearance: default | a2ui | bare
+  counterPlacement: below | inside
+  prefixPlacement: inside | outside
   booleans: error, disabled
-  REQUIRED props (not axes): label
 CheckBox (Form)
   size: xlarge | large | medium | small
+  appearance: default | native
   booleans: error, disabled, indeterminate
-  REQUIRED props (not axes): label
 Radio (Form)
   size: large | medium | small
   booleans: error, disabled
   REQUIRED props (not axes): label
+SegmentedControl (Form)
+  size: medium | small
+  booleans: disabled
+  REQUIRED props (not axes): options, value, onChange
 Switch (Form)
   size: large | medium | small
   booleans: disabled, loading
@@ -59,6 +69,7 @@ Slider (Form)
 DateTimeInput (Form)
   size: large | small
   selection: single | range
+  appearance: default | a2ui
   booleans: error, disabled, withTime, portal
 OtpInput (Form)
@@ -67,8 +78,9 @@ OtpInput (Form)
   REQUIRED props (not axes): value, onChange
 Tabs (Navigation)
-  size: large | small
+  size: large | small | xsmall
   state: default | active
+  appearance: default | a2ui
   booleans: showIconLeft, showNotif, showTitle
 Tooltip (Feedback)
@@ -117,24 +129,29 @@ ChatDrawer (Chat)
   booleans: collapsed
 ChatAttachment (Chat)
-  variant: image | file
+  variant: image | file | tile
+  size: default | large
   booleans: showSize
   REQUIRED props (not axes): name
 ChatToolsButton (Chat)
   state: default | active
+  size: compact | landing
   REQUIRED props (not axes): label
 ChatAttachmentButton (Chat)
   state: default | active
+  size: compact | landing
   REQUIRED props (not axes): label
 ChatVoiceButton (Chat)
   state: default | active
+  size: compact | landing
   REQUIRED props (not axes): label
 ChatSendButton (Chat)
   state: send | stop | waiting
+  size: compact | landing
   REQUIRED props (not axes): label
 ChatSoundWave (Chat)
@@ -176,7 +193,7 @@ ChatMessageTTSButton (Chat)
 Dialog (Overlays)
   size: small | medium | large | xlarge
   side: none | left | right
-  booleans: centered, showCloseButton
+  booleans: centered, showCloseButton, dismissible, closeDisabled
   REQUIRED props (not axes): open, onOpenChange
 Menu (Overlays)
@@ -190,31 +207,37 @@ Popover (Overlays)
 Card (Content)
   variant: elevated | outlined | plain
   padding: none | small | medium | large
+  appearance: default | a2ui | a2ui-hero
 Divider (Content)
   variant: default | dashed
   orientation: horizontal | vertical
+  appearance: default | a2ui
 List (Content)
 Disclosure (Content)
+  appearance: default | a2ui
   REQUIRED props (not axes): title
 Image (Content)
   type: thumbnail | banner | natural | avatar
   size: regular | small | blog
+  appearance: default | a2ui
   booleans: hover
 SelectionCard (Form)
   size: large | small
   state: default | selected | disabled
   layout: row | tile
+  appearance: default | choice
   REQUIRED props (not axes): options
 Upload (Form)
   size: large | small
   status: default | filled | error | disabled | busy
   border: solid | dashed
+  appearance: default | a2ui
 Select (Form)
   size: large | small
@@ -224,6 +247,7 @@ Select (Form)
 CodeBlock (Content)
   size: large | small
+  appearance: default | a2ui
 Stepper (Navigation)
   position: first | middle | last
@@ -233,10 +257,12 @@ Stepper (Navigation)
 Pagination (Navigation)
   size: large | small
+  density: compact | comfortable
   booleans: disabled
   REQUIRED props (not axes): page, onPageChange
 Table (Content)
+  density: compact | comfortable
   booleans: loading, serverSide, hidePagination, fixedLayout, noBorder, slimScrollbar
 Spinner (Feedback)
@@ -254,6 +280,7 @@ Toaster (Feedback)
 Label (Form)
   variant: default | error | success
   size: sm | md | lg
+  look: default | field-large | field-small
   booleans: required
 TRAPS — each of these renders or ignores silently, with no error:

package/umkmall-prototype-starter.html CHANGED Viewed

@@ -18,8 +18,8 @@ HOW TO USE THIS FILE
 WHAT THIS FILE NEEDS FROM THE NETWORK
   Four hosts, every time it is opened — not just the first time:
-    https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h726308542f5a/umkmall-tailwind.js
-    https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h726308542f5a/umkmall-ui.js
+    https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha04bbbde2f13/umkmall-tailwind.js
+    https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha04bbbde2f13/umkmall-ui.js
     https://cdn.jsdelivr.net/npm/@babel/standalone@7.26.4/babel.min.js
       — all on jsDelivr: the design system's assets (pinned) and the JSX compiler.
         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
 YOU DO NOT HAVE TO START FROM THIS FILE
   Four tags add UMKMall styling to a page you already have: the token CSS as a <link> to
-  https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h726308542f5a/umkmall-tokens.css
+  https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha04bbbde2f13/umkmall-tokens.css
   then the Play CDN, the config and the bundle below. Keep the order — the config must come after
   the Play CDN script, or the theme arrives too late and every class resolves to nothing.
-UMKMall UI — 56 components, and the values each axis accepts.
+UMKMall UI — 57 components, and the values each axis accepts.
 Generated from packages/ui/src/contract/variants.ts. Do not hand-edit.
 Button (Foundations)
@@ -52,32 +52,42 @@ Alert (Feedback)
   function: success | info | warning | danger
   size: large | medium | small
   treatment: full | accent | coach | banner
+  appearance: default | a2ui
 Badge (Content)
   color: primary | warning | success | danger | light | bestseller | gradient
   size: xlarge | medium | small | micro
+  appearance: default | a2ui
   booleans: showIconLeft, showIconRight
 Chip (Content)
   state: default | active
   size: huge | xlarge | large | medium | small | micro
+  appearance: default | a2ui
   booleans: showIconLeft, showIconRight
 TextField (Form)
-  size: large | small
+  size: large | small | xsmall
+  appearance: default | a2ui | bare
+  counterPlacement: below | inside
+  prefixPlacement: inside | outside
   booleans: error, disabled
-  REQUIRED props (not axes): label
 CheckBox (Form)
   size: xlarge | large | medium | small
+  appearance: default | native
   booleans: error, disabled, indeterminate
-  REQUIRED props (not axes): label
 Radio (Form)
   size: large | medium | small
   booleans: error, disabled
   REQUIRED props (not axes): label
+SegmentedControl (Form)
+  size: medium | small
+  booleans: disabled
+  REQUIRED props (not axes): options, value, onChange
 Switch (Form)
   size: large | medium | small
   booleans: disabled, loading
@@ -90,6 +100,7 @@ Slider (Form)
 DateTimeInput (Form)
   size: large | small
   selection: single | range
+  appearance: default | a2ui
   booleans: error, disabled, withTime, portal
 OtpInput (Form)
@@ -98,8 +109,9 @@ OtpInput (Form)
   REQUIRED props (not axes): value, onChange
 Tabs (Navigation)
-  size: large | small
+  size: large | small | xsmall
   state: default | active
+  appearance: default | a2ui
   booleans: showIconLeft, showNotif, showTitle
 Tooltip (Feedback)
@@ -148,24 +160,29 @@ ChatDrawer (Chat)
   booleans: collapsed
 ChatAttachment (Chat)
-  variant: image | file
+  variant: image | file | tile
+  size: default | large
   booleans: showSize
   REQUIRED props (not axes): name
 ChatToolsButton (Chat)
   state: default | active
+  size: compact | landing
   REQUIRED props (not axes): label
 ChatAttachmentButton (Chat)
   state: default | active
+  size: compact | landing
   REQUIRED props (not axes): label
 ChatVoiceButton (Chat)
   state: default | active
+  size: compact | landing
   REQUIRED props (not axes): label
 ChatSendButton (Chat)
   state: send | stop | waiting
+  size: compact | landing
   REQUIRED props (not axes): label
 ChatSoundWave (Chat)
@@ -207,7 +224,7 @@ ChatMessageTTSButton (Chat)
 Dialog (Overlays)
   size: small | medium | large | xlarge
   side: none | left | right
-  booleans: centered, showCloseButton
+  booleans: centered, showCloseButton, dismissible, closeDisabled
   REQUIRED props (not axes): open, onOpenChange
 Menu (Overlays)
@@ -221,31 +238,37 @@ Popover (Overlays)
 Card (Content)
   variant: elevated | outlined | plain
   padding: none | small | medium | large
+  appearance: default | a2ui | a2ui-hero
 Divider (Content)
   variant: default | dashed
   orientation: horizontal | vertical
+  appearance: default | a2ui
 List (Content)
 Disclosure (Content)
+  appearance: default | a2ui
   REQUIRED props (not axes): title
 Image (Content)
   type: thumbnail | banner | natural | avatar
   size: regular | small | blog
+  appearance: default | a2ui
   booleans: hover
 SelectionCard (Form)
   size: large | small
   state: default | selected | disabled
   layout: row | tile
+  appearance: default | choice
   REQUIRED props (not axes): options
 Upload (Form)
   size: large | small
   status: default | filled | error | disabled | busy
   border: solid | dashed
+  appearance: default | a2ui
 Select (Form)
   size: large | small
@@ -255,6 +278,7 @@ Select (Form)
 CodeBlock (Content)
   size: large | small
+  appearance: default | a2ui
 Stepper (Navigation)
   position: first | middle | last
@@ -264,10 +288,12 @@ Stepper (Navigation)
 Pagination (Navigation)
   size: large | small
+  density: compact | comfortable
   booleans: disabled
   REQUIRED props (not axes): page, onPageChange
 Table (Content)
+  density: compact | comfortable
   booleans: loading, serverSide, hidePagination, fixedLayout, noBorder, slimScrollbar
 Spinner (Feedback)
@@ -285,6 +311,7 @@ Toaster (Feedback)
 Label (Form)
   variant: default | error | success
   size: sm | md | lg
+  look: default | field-large | field-small
   booleans: required
 TRAPS — each of these renders or ignores silently, with no error:
@@ -326,6 +353,7 @@ TRAPS — each of these renders or ignores silently, with no error:
   --red-r600: 124 0 0;
   --red-r500: 162 0 0;
   --red-r400: 231 0 0;
+  --red-r450: 219 0 0;
   --red-r300: 235 43 43;
   --red-r200: 241 107 107;
   --red-r100: 245 150 150;
@@ -418,7 +446,7 @@ TRAPS — each of these renders or ignores silently, with no error:
   --text-default-invert: 255 255 255;
   --text-default-brand: 0 116 231;
   --text-default-success: 14 160 110;
-  --text-default-error: 231 0 0;
+  --text-default-error: 219 0 0;
   --text-default-warning: 245 158 11;
   --text-hover-primary: 3 32 61;
   --text-hover-secondary: 97 118 140;
@@ -438,7 +466,7 @@ TRAPS — each of these renders or ignores silently, with no error:
   --text-focus-invert: 255 255 255;
   --text-focus-brand: 0 116 231;
   --text-focus-success: 14 160 110;
-  --text-focus-error: 231 0 0;
+  --text-focus-error: 219 0 0;
   --text-focus-warning: 245 158 11;
   --text-disable-primary: 195 203 211;
   --text-disable-brand: 150 198 245;
@@ -451,7 +479,7 @@ TRAPS — each of these renders or ignores silently, with no error:
   --icon-default-invert: 255 255 255;
   --icon-default-brand: 0 116 231;
   --icon-default-success: 14 160 110;
-  --icon-default-error: 231 0 0;
+  --icon-default-error: 219 0 0;
   --icon-default-warning: 245 158 11;
   --icon-hover-primary: 3 32 61;
   --icon-hover-secondary: 97 118 140;
@@ -471,7 +499,7 @@ TRAPS — each of these renders or ignores silently, with no error:
   --icon-focus-invert: 255 255 255;
   --icon-focus-brand: 0 116 231;
   --icon-focus-success: 14 160 110;
-  --icon-focus-error: 231 0 0;
+  --icon-focus-error: 219 0 0;
   --icon-focus-warning: 245 158 11;
   --icon-disable-primary: 195 203 211;
   --icon-disable-brand: 150 198 245;
@@ -526,6 +554,7 @@ TRAPS — each of these renders or ignores silently, with no error:
   --surface-gradient-callout-end: 8 118 96;
   --surface-hover-neutral: 247 248 250;
   --surface-selected-hover: 227 239 252;
+  --surface-default-subtle: 249 250 251;
   --border-default-primary: 240 240 240;
   --border-default-invert: 195 203 211;
   --border-default-brand: 0 116 231;
@@ -620,86 +649,86 @@ TRAPS — each of these renders or ignores silently, with no error:
   --callout-neg-border: 231 0 0;
   --callout-neg-text: 4 38 72;
   --focus-halo: 150 198 245;
-  --typography-mobile-display-bold: 700 36px/40px 'Be Vietnam Pro';
-  --typography-mobile-display-semibold: 600 36px/40px 'Be Vietnam Pro';
-  --typography-mobile-h1-bold: 700 28px/32px 'Be Vietnam Pro';
-  --typography-mobile-h1-semibold: 600 28px/32px 'Be Vietnam Pro';
-  --typography-mobile-h2-bold: 700 24px/28px 'Be Vietnam Pro';
-  --typography-mobile-h2-semibold: 600 24px/28px 'Be Vietnam Pro';
-  --typography-mobile-h2-medium: 500 24px/28px 'Be Vietnam Pro';
-  --typography-mobile-h2-regular: 400 24px/28px 'Be Vietnam Pro';
-  --typography-mobile-h3-bold: 700 20px/26px 'Be Vietnam Pro';
-  --typography-mobile-h3-semibold: 600 20px/26px 'Be Vietnam Pro';
-  --typography-mobile-h3-medium: 500 20px/26px 'Be Vietnam Pro';
-  --typography-mobile-h3-regular: 400 20px/26px 'Be Vietnam Pro';
-  --typography-mobile-h4-bold: 700 20px/26px 'Be Vietnam Pro';
-  --typography-mobile-h4-semibold: 600 20px/26px 'Be Vietnam Pro';
-  --typography-mobile-h4-medium: 500 20px/26px 'Be Vietnam Pro';
-  --typography-mobile-h4-regular: 400 20px/26px 'Be Vietnam Pro';
-  --typography-mobile-h5-bold: 700 18px/24px 'Be Vietnam Pro';
-  --typography-mobile-h5-semibold: 600 18px/24px 'Be Vietnam Pro';
-  --typography-mobile-h5-medium: 500 18px/24px 'Be Vietnam Pro';
-  --typography-mobile-h5-regular: 400 18px/24px 'Be Vietnam Pro';
-  --typography-mobile-h6-bold: 700 16px/24px 'Be Vietnam Pro';
-  --typography-mobile-h6-semibold: 600 16px/24px 'Be Vietnam Pro';
-  --typography-mobile-h6-medium: 500 16px/24px 'Be Vietnam Pro';
-  --typography-mobile-h6-regular: 400 16px/24px 'Be Vietnam Pro';
-  --typography-mobile-paragraph-bold: 700 14px/20px 'Be Vietnam Pro';
-  --typography-mobile-paragraph-semibold: 600 14px/20px 'Be Vietnam Pro';
-  --typography-mobile-paragraph-medium: 500 14px/20px 'Be Vietnam Pro';
-  --typography-mobile-paragraph-regular: 400 14px/20px 'Be Vietnam Pro';
-  --typography-mobile-body-lg-bold: 700 12px/18px 'Be Vietnam Pro';
-  --typography-mobile-body-lg-semibold: 600 12px/18px 'Be Vietnam Pro';
-  --typography-mobile-body-lg-medium: 500 12px/18px 'Be Vietnam Pro';
-  --typography-mobile-body-lg-regular: 400 12px/18px 'Be Vietnam Pro';
-  --typography-mobile-body-md-bold: 700 10px/16px 'Be Vietnam Pro';
-  --typography-mobile-body-md-semibold: 600 10px/16px 'Be Vietnam Pro';
-  --typography-mobile-body-md-medium: 500 10px/16px 'Be Vietnam Pro';
-  --typography-mobile-body-md-regular: 400 10px/16px 'Be Vietnam Pro';
-  --typography-mobile-body-sm-bold: 700 8px/14px 'Be Vietnam Pro';
-  --typography-mobile-body-sm-semibold: 600 8px/14px 'Be Vietnam Pro';
-  --typography-mobile-body-sm-medium: 500 8px/14px 'Be Vietnam Pro';
-  --typography-mobile-body-sm-regular: 400 8px/14px 'Be Vietnam Pro';
-  --typography-desktop-display-bold: 700 56px/64px 'Be Vietnam Pro';
-  --typography-desktop-display-semibold: 600 56px/64px 'Be Vietnam Pro';
-  --typography-desktop-h1-bold: 700 40px/48px 'Be Vietnam Pro';
-  --typography-desktop-h1-semibold: 600 40px/48px 'Be Vietnam Pro';
-  --typography-desktop-h2-bold: 700 32px/40px 'Be Vietnam Pro';
-  --typography-desktop-h2-semibold: 600 32px/40px 'Be Vietnam Pro';
-  --typography-desktop-h2-medium: 500 32px/40px 'Be Vietnam Pro';
-  --typography-desktop-h2-regular: 400 32px/40px 'Be Vietnam Pro';
-  --typography-desktop-h3-bold: 700 28px/36px 'Be Vietnam Pro';
-  --typography-desktop-h3-semibold: 600 28px/36px 'Be Vietnam Pro';
-  --typography-desktop-h3-medium: 500 28px/36px 'Be Vietnam Pro';
-  --typography-desktop-h3-regular: 400 28px/36px 'Be Vietnam Pro';
-  --typography-desktop-h4-bold: 700 24px/32px 'Be Vietnam Pro';
-  --typography-desktop-h4-semibold: 600 24px/32px 'Be Vietnam Pro';
-  --typography-desktop-h4-medium: 500 24px/32px 'Be Vietnam Pro';
-  --typography-desktop-h4-regular: 400 24px/32px 'Be Vietnam Pro';
-  --typography-desktop-h5-bold: 700 20px/28px 'Be Vietnam Pro';
-  --typography-desktop-h5-semibold: 600 20px/28px 'Be Vietnam Pro';
-  --typography-desktop-h5-medium: 500 20px/28px 'Be Vietnam Pro';
-  --typography-desktop-h5-regular: 400 20px/28px 'Be Vietnam Pro';
-  --typography-desktop-h6-bold: 700 18px/28px 'Be Vietnam Pro';
-  --typography-desktop-h6-semibold: 600 18px/28px 'Be Vietnam Pro';
-  --typography-desktop-h6-medium: 500 18px/28px 'Be Vietnam Pro';
-  --typography-desktop-h6-regular: 400 18px/28px 'Be Vietnam Pro';
-  --typography-desktop-paragraph-bold: 700 16px/24px 'Be Vietnam Pro';
-  --typography-desktop-paragraph-semibold: 600 16px/24px 'Be Vietnam Pro';
-  --typography-desktop-paragraph-medium: 500 16px/24px 'Be Vietnam Pro';
-  --typography-desktop-paragraph-regular: 400 16px/24px 'Be Vietnam Pro';
-  --typography-desktop-body-lg-bold: 700 14px/20px 'Be Vietnam Pro';
-  --typography-desktop-body-lg-semibold: 600 14px/20px 'Be Vietnam Pro';
-  --typography-desktop-body-lg-medium: 500 14px/20px 'Be Vietnam Pro';
-  --typography-desktop-body-lg-regular: 400 14px/20px 'Be Vietnam Pro';
-  --typography-desktop-body-md-bold: 700 12px/18px 'Be Vietnam Pro';
-  --typography-desktop-body-md-semibold: 600 12px/18px 'Be Vietnam Pro';
-  --typography-desktop-body-md-medium: 500 12px/18px 'Be Vietnam Pro';
-  --typography-desktop-body-md-regular: 400 12px/18px 'Be Vietnam Pro';
-  --typography-desktop-body-sm-bold: 700 10px/16px 'Be Vietnam Pro';
-  --typography-desktop-body-sm-semibold: 600 10px/16px 'Be Vietnam Pro';
-  --typography-desktop-body-sm-medium: 500 10px/16px 'Be Vietnam Pro';
-  --typography-desktop-body-sm-regular: 400 10px/16px 'Be Vietnam Pro';
+  --typography-mobile-display-bold: 700 calc(2.25rem * var(--ds-text-scale, 1))/calc(2.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-mobile-display-semibold: 600 calc(2.25rem * var(--ds-text-scale, 1))/calc(2.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-mobile-h1-bold: 700 calc(1.75rem * var(--ds-text-scale, 1))/calc(2rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-mobile-h1-semibold: 600 calc(1.75rem * var(--ds-text-scale, 1))/calc(2rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-mobile-h2-bold: 700 calc(1.5rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-mobile-h2-semibold: 600 calc(1.5rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-mobile-h2-medium: 500 calc(1.5rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-mobile-h2-regular: 400 calc(1.5rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-mobile-h3-bold: 700 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-mobile-h3-semibold: 600 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-mobile-h3-medium: 500 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-mobile-h3-regular: 400 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-mobile-h4-bold: 700 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-mobile-h4-semibold: 600 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-mobile-h4-medium: 500 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-mobile-h4-regular: 400 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-mobile-h5-bold: 700 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-mobile-h5-semibold: 600 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-mobile-h5-medium: 500 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-mobile-h5-regular: 400 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-mobile-h6-bold: 700 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-mobile-h6-semibold: 600 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-mobile-h6-medium: 500 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-mobile-h6-regular: 400 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-mobile-paragraph-bold: 700 calc(0.875rem * var(--ds-text-scale, 1))/calc(1.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-mobile-paragraph-semibold: 600 calc(0.875rem * var(--ds-text-scale, 1))/calc(1.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-mobile-paragraph-medium: 500 calc(0.875rem * var(--ds-text-scale, 1))/calc(1.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-mobile-paragraph-regular: 400 calc(0.875rem * var(--ds-text-scale, 1))/calc(1.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --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';
+  --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';
+  --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';
+  --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';
+  --typography-mobile-body-md-bold: 700 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-mobile-body-md-semibold: 600 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-mobile-body-md-medium: 500 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-mobile-body-md-regular: 400 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --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';
+  --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';
+  --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';
+  --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';
+  --typography-desktop-display-bold: 700 calc(3.5rem * var(--ds-text-scale, 1))/calc(4rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-desktop-display-semibold: 600 calc(3.5rem * var(--ds-text-scale, 1))/calc(4rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-desktop-h1-bold: 700 calc(2.5rem * var(--ds-text-scale, 1))/calc(3rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-desktop-h1-semibold: 600 calc(2.5rem * var(--ds-text-scale, 1))/calc(3rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-desktop-h2-bold: 700 calc(2rem * var(--ds-text-scale, 1))/calc(2.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-desktop-h2-semibold: 600 calc(2rem * var(--ds-text-scale, 1))/calc(2.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-desktop-h2-medium: 500 calc(2rem * var(--ds-text-scale, 1))/calc(2.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-desktop-h2-regular: 400 calc(2rem * var(--ds-text-scale, 1))/calc(2.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-desktop-h3-bold: 700 calc(1.75rem * var(--ds-text-scale, 1))/calc(2.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-desktop-h3-semibold: 600 calc(1.75rem * var(--ds-text-scale, 1))/calc(2.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-desktop-h3-medium: 500 calc(1.75rem * var(--ds-text-scale, 1))/calc(2.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-desktop-h3-regular: 400 calc(1.75rem * var(--ds-text-scale, 1))/calc(2.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-desktop-h4-bold: 700 calc(1.5rem * var(--ds-text-scale, 1))/calc(2rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-desktop-h4-semibold: 600 calc(1.5rem * var(--ds-text-scale, 1))/calc(2rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-desktop-h4-medium: 500 calc(1.5rem * var(--ds-text-scale, 1))/calc(2rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-desktop-h4-regular: 400 calc(1.5rem * var(--ds-text-scale, 1))/calc(2rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-desktop-h5-bold: 700 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-desktop-h5-semibold: 600 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-desktop-h5-medium: 500 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-desktop-h5-regular: 400 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-desktop-h6-bold: 700 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-desktop-h6-semibold: 600 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-desktop-h6-medium: 500 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-desktop-h6-regular: 400 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-desktop-paragraph-bold: 700 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-desktop-paragraph-semibold: 600 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-desktop-paragraph-medium: 500 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-desktop-paragraph-regular: 400 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --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';
+  --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';
+  --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';
+  --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';
+  --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';
+  --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';
+  --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';
+  --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';
+  --typography-desktop-body-sm-bold: 700 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-desktop-body-sm-semibold: 600 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-desktop-body-sm-medium: 500 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
+  --typography-desktop-body-sm-regular: 400 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
   --elevation-overlay: 99999;
 }
@@ -714,8 +743,8 @@ TRAPS — each of these renders or ignores silently, with no error:
 body { color: rgb(var(--text-default-primary)); }
 </style>
 <script src="https://cdn.tailwindcss.com"></script>
-<script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h726308542f5a/umkmall-tailwind.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h726308542f5a/umkmall-ui.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha04bbbde2f13/umkmall-tailwind.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha04bbbde2f13/umkmall-ui.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.26.4/babel.min.js"></script>
 </head>
 <body class="bg-default-primary text-default-primary">

package/umkmall-rules.md CHANGED Viewed

@@ -29,10 +29,10 @@ When I answer, build the whole thing in one file and hand it back.
 Each of these is plain markdown, published for you rather than for a person.
 Fetch them if you have web access; they are always current.
-  the whole starter, in a code block   https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h726308542f5a/umkmall-starter.md
-  the demo block on its own            https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h726308542f5a/umkmall-starter-app.md
-  the component vocabulary             https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h726308542f5a/umkmall-components.md
-  the starter as a raw .html file      https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h726308542f5a/umkmall-prototype-starter.html
+  the whole starter, in a code block   https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha04bbbde2f13/umkmall-starter.md
+  the demo block on its own            https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha04bbbde2f13/umkmall-starter-app.md
+  the component vocabulary             https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha04bbbde2f13/umkmall-components.md
+  the starter as a raw .html file      https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha04bbbde2f13/umkmall-prototype-starter.html
 TAKE THE FIRST ONE. It is the entire working file — <head>, mount node and a
 demo that already renders a chat room — inside a single fenced block, so you
@@ -150,7 +150,7 @@ THE COMPONENT LIST
 Not written here. It is a published file, always current, and it carries each
 component's axes AND the props it will not render without:
-  https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h726308542f5a/umkmall-components.md
+  https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha04bbbde2f13/umkmall-components.md
 Fetch it, or ask me to paste it. Do not work from memory of another design
 system — an invented axis value renders unstyled with no error, and a missing