chore(showcase): Typography + HUD sections, v0.12.0

New sections: Typography (Text scale + tones + Badge ghost/link + Tabs line
+ Card padding/radius demos) and HUD (Keycap/HudPill/SlotTile). snapshot.rs
SECTION_NAMES → 14. README + ROADMAP record the web-parity P0 (34
components). Version → 0.12.0; cache-bust ?v=0.12.0; sidebar badge v0.12.

Co-Authored-By: Claude <noreply@anthropic.com>

Author: stevekwon211

README.md

@@ -25,8 +25,9 @@ you copy into your repo and customize.
 | **v0.9** | **shadcn fidelity pass** — token recalibration (h-9, px-4, radius 10, spacing-xl/2xl), segmented Tabs, Dialog X-close + p-6 + click-absorb, all 18 primitives to measured shadcn specs | ✅ |
 | **v0.10** | **Breadth batch A** — Accordion, Avatar, Textarea, Progress, Alert, Skeleton, Toggle, ToggleGroup (26 components) | ✅ |
 | **v0.11** | **Breadth batch B** — Breadcrumb, Pagination, Table, Slider (30 components) | ✅ |
-| **v0.12** | Breadth batch C — Popover, DropdownMenu, Combobox, HoverCard, ContextMenu (overlays) | upcoming |
-| **v1.0** | Game HUD registry — hotbar, reticle, keycap hints | later |
+| **v0.12** | **Web-parity P0** — Text typography + game/HUD trio (Keycap, HudPill, SlotTile) + variant axes (Card padding/radius, Badge ghost/link, Tabs line) (34 components) | ✅ |
+| **v0.13** | P1/P2 — ScrollArea, Popover, ContextMenu | upcoming |
+| **v1.0** | Game HUD registry expansion — hotbar, reticle, full keycap hints | later |
 
 SaaS-first is a **wedge**, not a ceiling. Once tokens + motion + hover semantics
 exist, a second registry (`registry/game/`) is just more `.slint` files.
@@ -115,6 +116,14 @@ silently falling through to the default styling.
 | **Slider** | draggable value slider + arrow keys | `value: float`, `minimum`, `maximum`, `changed(float)` |
 | **Table** | header + rows, equal-stretch columns | `columns: [string]`, `rows: [TableRow]` (`cells: [string]`) |
 
+### Typography & games/HUD
+| Component | Purpose | Notable props |
+|-----------|---------|---------------|
+| **Text** | typography scale (import `as Typography`) | `variant: display/headline/title/body-lg/body/body-sm/label/caption`, `tone: default/muted/subtle/accent/danger` |
+| **Keycap** | keyboard-hint cap for HUDs | `text`, `size: sm/md`, `tone: on-glow/on-glass/muted/affirm-*/deny-*` |
+| **HudPill** | rounded-full HUD status pill | `text`, `size: sm/md/lg`, `tone: scrim0/scrim1/scrim2` |
+| **SlotTile** | inventory / hotbar slot (holds `@children`) | `tone: stone/empty/accent`, `state: idle/active/disabled`, `interactive`, `size` |
+
 ### Iconography & theming
 | Component | Purpose | Notable props |
 |-----------|---------|---------------|
@@ -188,7 +197,7 @@ closed modals don't block interaction with the underlying UI.
 registry/default/         # Source of truth (published with npm package)
   theme/palette.slint     #   raw color/alpha primitives
   theme/tokens.slint      #   semantic layer (components read this)
-  components/*.slint      #   30 primitives + popup-helpers + lucide-paths
+  components/*.slint      #   34 primitives + popup-helpers + lucide-paths
 examples/showcase/        # Runnable gallery (regenerated via `slintcn add`)
 bin/slintcn.mjs           # init + add CLI (transitive deps)
 bin/__test__/             # node:test suite — `make test`

docs/ROADMAP.md

@@ -1,6 +1,28 @@
 # slintcn roadmap
 
-## v0.11 — breadth batch B (current)
+## v0.12 — web-parity P0 (current)
+
+Driven by an audit of a real Base-UI/shadcn web app (apps/web): the 21 UI
+elements actually used there, with their variant axes. Closed slintcn's P0
+gaps. 30 → 34 components.
+
+- [x] **Text** — typography primitive: `variant` (display/headline/title/
+      body-lg/body/body-sm/label/caption) × `tone` (default/muted/subtle/
+      accent/danger). Import `as Typography` to avoid the built-in `Text`.
+- [x] **Keycap** — keyboard-hint cap; `size` (sm/md) × `tone` (on-glow/
+      on-glass/muted/affirm-*/deny-*). Affirm = green, deny = red.
+- [x] **HudPill** — rounded-full status pill; `size` (sm/md/lg) × `tone`
+      (scrim0/scrim1/scrim2).
+- [x] **SlotTile** — inventory/hotbar slot holding `@children`; `tone`
+      (stone/empty/accent) × `state` (idle/active/disabled) × `interactive`.
+- [x] **Variant axes**: Card gains `card-padding` (none/sm/md/lg) +
+      `card-radius` (md/lg/xl/xxl); Badge gains `ghost` + `link`; Tabs gains
+      a `line` variant (underline) alongside the default segmented control.
+- [x] Tokens: `color-affirm` (green), `color-subtle-foreground`,
+      `color-scrim-0/1` (HUD pill levels).
+- [x] Showcase: **Typography** + **HUD** sections.
+
+## v0.11 — breadth batch B
 
 Navigation + data primitives. 26 → 30 components.