@umkmall/proto 0.1.0-h2e45b3c4dc3a → 0.1.0-h2febbb98dc2a

package/package.json

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

package/umkmall-components.md

@@ -21,24 +21,29 @@ 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
+  appearance: default | a2ui
   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
 
@@ -59,6 +64,7 @@ Slider (Form)
 DateTimeInput (Form)
   size: large | small
   selection: single | range
+  appearance: default | a2ui
   booleans: error, disabled, withTime, portal
 
 OtpInput (Form)
@@ -69,6 +75,7 @@ OtpInput (Form)
 Tabs (Navigation)
   size: large | small
   state: default | active
+  appearance: default | a2ui
   booleans: showIconLeft, showNotif, showTitle
 
 Tooltip (Feedback)
@@ -190,31 +197,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 +237,7 @@ Select (Form)
 
 CodeBlock (Content)
   size: large | small
+  appearance: default | a2ui
 
 Stepper (Navigation)
   position: first | middle | last
@@ -233,10 +247,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)

package/umkmall-prototype-starter.html

@@ -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-h2e45b3c4dc3a/umkmall-tailwind.js
-    https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2e45b3c4dc3a/umkmall-ui.js
+    https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/umkmall-tailwind.js
+    https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/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,7 +33,7 @@ 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-h2e45b3c4dc3a/umkmall-tokens.css
+  https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/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.
 
@@ -52,24 +52,29 @@ 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
+  appearance: default | a2ui
   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
 
@@ -90,6 +95,7 @@ Slider (Form)
 DateTimeInput (Form)
   size: large | small
   selection: single | range
+  appearance: default | a2ui
   booleans: error, disabled, withTime, portal
 
 OtpInput (Form)
@@ -100,6 +106,7 @@ OtpInput (Form)
 Tabs (Navigation)
   size: large | small
   state: default | active
+  appearance: default | a2ui
   booleans: showIconLeft, showNotif, showTitle
 
 Tooltip (Feedback)
@@ -221,31 +228,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 +268,7 @@ Select (Form)
 
 CodeBlock (Content)
   size: large | small
+  appearance: default | a2ui
 
 Stepper (Navigation)
   position: first | middle | last
@@ -264,10 +278,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)
@@ -714,8 +730,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-h2e45b3c4dc3a/umkmall-tailwind.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2e45b3c4dc3a/umkmall-ui.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/umkmall-tailwind.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/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

@@ -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-h2e45b3c4dc3a/umkmall-starter.md
-  the demo block on its own            https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2e45b3c4dc3a/umkmall-starter-app.md
-  the component vocabulary             https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2e45b3c4dc3a/umkmall-components.md
-  the starter as a raw .html file      https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2e45b3c4dc3a/umkmall-prototype-starter.html
+  the whole starter, in a code block   https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/umkmall-starter.md
+  the demo block on its own            https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/umkmall-starter-app.md
+  the component vocabulary             https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/umkmall-components.md
+  the starter as a raw .html file      https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/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-h2e45b3c4dc3a/umkmall-components.md
+  https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/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

package/umkmall-starter-app.md

@@ -1,13 +1,13 @@
 # UMKMall prototyping starter — the editable block
 
-This is the `<script type="text/babel">` block from [the starter](https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2e45b3c4dc3a/umkmall-prototype-starter.html), on its own
+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
 so it can be read or pasted without the surrounding HTML.
 
 It renders a working chat room: a header, the journey's progress rail and quota meters, a
 scrolling transcript and a pinned composer. Edit the part between the `REPLACE THIS` and
 `end of the part you replace` markers; keep the shell around it.
 
-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-h2e45b3c4dc3a/umkmall-rules.md).
+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).
 
 ```jsx
 /*

package/umkmall-starter.md

@@ -3,9 +3,9 @@
 The starter in a code block, so it can be read without fetching HTML. Save it as `.html` and
 open it; there is no build step and no install.
 
-It is the same file as [the raw starter](https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2e45b3c4dc3a/umkmall-prototype-starter.html) with one deliberate difference: the
+It is the same file as [the raw starter](https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/umkmall-prototype-starter.html) with one deliberate difference: the
 `.html` carries the whole component list inside a comment in its `<head>`, and here that is
-replaced by a link to [the same list](https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2e45b3c4dc3a/umkmall-components.md). Nothing else differs, and nothing the
+replaced by a link to [the same list](https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/umkmall-components.md). Nothing else differs, and nothing the
 page needs to run is in the part that was swapped.
 
 **Take the `<head>` exactly as it is.** Its tags load in one order that works: the config
@@ -14,7 +14,7 @@ CDN the global does not exist and after it the theme arrives too late — every
 class then resolves to nothing, with no error. Edit only the `<script type="text/babel">`
 block at the bottom.
 
-The component list is not inline here; it is [its own file](https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2e45b3c4dc3a/umkmall-components.md).
+The component list is not inline here; it is [its own file](https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/umkmall-components.md).
 
 ````html
 <!doctype html>
@@ -37,8 +37,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-h2e45b3c4dc3a/umkmall-tailwind.js
-    https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2e45b3c4dc3a/umkmall-ui.js
+    https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/umkmall-tailwind.js
+    https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/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
@@ -52,14 +52,14 @@ 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-h2e45b3c4dc3a/umkmall-tokens.css
+  https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/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.
 
 THE COMPONENT LIST IS NOT IN THIS FILE.
 It is published separately, and it is always current:
 
-  https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2e45b3c4dc3a/umkmall-components.md
+  https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/umkmall-components.md
 
 It carries every component, its axes, and the props it will not render without.
 -->
@@ -480,8 +480,8 @@ It carries every component, its axes, and the props it will not render without.
 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-h2e45b3c4dc3a/umkmall-tailwind.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2e45b3c4dc3a/umkmall-ui.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/umkmall-tailwind.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/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">