@cyberskill/design 1.1.1 → 1.2.0

package/DESIGN.md

@@ -1,6 +1,6 @@
 ---
 name: "CyberSkill Design System"
-version: "1.1.1"
+version: "1.2.0"
 generated: "2026-07-23"
 generator: "scripts/generate-design-md.mjs (npm run build:design-md)"
 sources:
@@ -48,6 +48,10 @@ Core semantic colours. Dark values are the `[data-theme="dark"]` overrides (the
 | `--cs-color-border-default` | `#E7D9C6` | `#4a3a2c` |
 | `--cs-color-link` | `#6E3B0E` | `#f4ba17` |
 | `--cs-color-link-hover` | `#45210E` | `#f5ead9` |
+| `--cs-color-semantic-success-fg` | `#FFFFFF` | `#1a1108` |
+| `--cs-color-semantic-danger-fg` | `#FFFFFF` | `#1a1108` |
+| `--cs-color-semantic-warning-fg` | `#FFFFFF` | `#1a1108` |
+| `--cs-color-semantic-info-fg` | `#FFFFFF` | `#1a1108` |
 
 ### Accent roles (Ngũ Hành)
 
@@ -64,6 +68,18 @@ Default accent pack = Thổ (the studio's own element). All 15 element×variant
 | `--cs-accent-glow` | `rgba(244, 186, 23, 0.48)` |
 | `--cs-accent-grad-a` | `#F4BA17` |
 | `--cs-accent-grad-b` | `#FCAF91` |
+| `--cs-accent-on-strong` | `#1A1108` |
+
+### Document palette
+
+Shared ink / paper / rule colours for print-leaning instruments (`--cs-doc-*`). Prefer these over raw hex in VN legal and office templates.
+
+| Token | Value |
+|---|---|
+| `--cs-doc-ink` | `#1A1614` |
+| `--cs-doc-slate` | `#3F4C55` |
+| `--cs-doc-fill` | `#FDE68A` |
+| `--cs-doc-fill-ink` | `#1A1614` |
 
 ## Typography
 
@@ -82,6 +98,7 @@ Families ship self-hosted (Be Vietnam Pro · Space Grotesk · JetBrains Mono, fu
 | `--cs-font-lineHeight-body` | `1.5` |
 | `--cs-font-lineHeight-heading` | `1.35` |
 | `--cs-font-lineHeight-tight` | `1.15` |
+| `--cs-font-size-2xs` | `0.6875rem` |
 | `--cs-font-size-xs` | `0.75rem` |
 | `--cs-font-size-sm` | `0.875rem` |
 | `--cs-font-size-base` | `1rem` |
@@ -107,6 +124,7 @@ Semantic aliases into the ramp — write intent, not magic numbers. `Resolves to
 | `--cs-text-body-lg` | `var(--cs-font-size-md)` | `1.125rem` |
 | `--cs-text-body` | `var(--cs-font-size-base)` | `1rem` |
 | `--cs-text-secondary` | `var(--cs-font-size-sm)` | `0.875rem` |
+| `--cs-text-micro` | `var(--cs-font-size-2xs)` | `0.6875rem` |
 | `--cs-text-caption` | `var(--cs-font-size-xs)` | `0.75rem` |
 | `--cs-text-eyebrow` | `var(--cs-font-size-xs)` | `0.75rem` |
 
@@ -161,6 +179,7 @@ Semantic aliases into the ramp — write intent, not magic numbers. `Resolves to
 | `--cs-breakpoint-xl` | `1280px` |
 | `--cs-breakpoint-2xl` | `1536px` |
 | `--cs-container-max` | `1320px` |
+| `--cs-prose-measure` | `45rem` |
 | `--cs-icon-sm` | `16px` |
 | `--cs-icon-md` | `20px` |
 | `--cs-icon-lg` | `24px` |
@@ -187,6 +206,8 @@ Shadow values are the raw CSS box-shadow strings from `$extensions["com.cyberski
 | `--cs-depth-nav` | `50` |
 | `--cs-depth-modal` | `100` |
 | `--cs-depth-toast` | `200` |
+| `--cs-depth-dropdown` | `60` |
+| `--cs-depth-overlay` | `80` |
 | `--cs-glass-whisper-blur` | `8px` |
 | `--cs-glass-whisper-saturate` | `110%` |
 | `--cs-glass-whisper-opacity` | `60%` |
@@ -245,12 +266,13 @@ Component-level design decisions (button · textfield). Dark values are theme ov
 | `--cs-component-textfield-paddingY` | `10px` | — |
 | `--cs-component-textfield-paddingX` | `12px` | — |
 | `--cs-component-textfield-minHeight` | `44px` | — |
+| `--cs-focus-ring` | `3px` | — |
 
 ## Components inventory
 
-105 component files · 121 exports (from `_ds_manifest.json`). Every primary ships `.jsx` + `.d.ts` + `.prompt.md`.
+106 component files · 122 exports (from `_ds_manifest.json`). Every primary ships `.jsx` + `.d.ts` + `.prompt.md`.
 
-`AIDisclosureBadge` · `ChatMessage` · `CitationList` · `ConfidenceMeter` · `HumanReviewGate` · `PromptInput` · `PromptSuggestions` · `TypingIndicator` · `LumiAvatar` · `Button` · `ButtonGroup` · `FloatingActionButton` · `Accordion` · `AspectRatio` · `Avatar` · `AvatarGroup` · `Card` · `CardHeader` · `CardBody` · `CardFooter` · `Carousel` · `Chart` · `CodeBlock` · `Collapsible` · `Comment` · `DescriptionList` · `Divider` · `Image` · `Item` · `Kbd` · `List` · `ListItem` · `Masonry` · `QRCode` · `ScrollArea` · `Sortable` · `Splitter` · `Stat` · `Terminal` · `Timeline` · `Tooltip` · `Tree` · `Watermark` · `DataGrid` · `DataTable` · `TreeTable` · `Dialog` · `Alert` · `Badge` · `EmptyState` · `ProgressBar` · `Result` · `Skeleton` · `Spinner` · `StatusIndicator` · `Tag` · `ToastStack` · `Toast` · `Calendar` · `Cascader` · `Checkbox` · `ColorPicker` · `Combobox` · `DatePicker` · `Editor` · `FileUpload` · `Form` · `FormField` · `FormFieldArray` · `FormWizard` · `InlineEdit` · `InputGroup` · `InputOTP` · `Mentions` · `NativeSelect` · `NumberField` · `Radio` · `RadioGroup` · `Rating` · `SearchField` · `SegmentedControl` · `Select` · `Slider` · `Switch` · `TagInput` · `Textarea` · `TimePicker` · `Toggle` · `Transfer` · `TreeSelect` · `CS_ICONS` · `Icon` · `Logo` · `CS_LOGO_VIEWBOX` · `CS_LOGO_MARK_INNER` · `Anchor` · `BackTop` · `Breadcrumb` · `CommandPalette` · `Dock` · `HotKeys` · `Link` · `Menu` · `MenuItem` · `Menubar` · `NavigationMenu` · `Pagination` · `Sidebar` · `NavItem` · `Steps` · `Tabs` · `Tab` · `Toolbar` · `AlertDialog` · `ContextMenu` · `Drawer` · `HoverCard` · `Popconfirm` · `Popover` · `Tour` · `TextField`
+`AIDisclosureBadge` · `Accordion` · `Alert` · `AlertDialog` · `Anchor` · `AspectRatio` · `Avatar` · `AvatarGroup` · `BackTop` · `Badge` · `Breadcrumb` · `Button` · `ButtonGroup` · `CS_ICONS` · `CS_LOGO_MARK_INNER` · `CS_LOGO_VIEWBOX` · `Calendar` · `Card` · `CardBody` · `CardFooter` · `CardHeader` · `Carousel` · `Cascader` · `Chart` · `ChatMessage` · `Checkbox` · `CitationList` · `CodeBlock` · `Collapsible` · `ColorPicker` · `Combobox` · `CommandPalette` · `Comment` · `ConfidenceMeter` · `ContextMenu` · `DataGrid` · `DataTable` · `DatePicker` · `DescriptionList` · `Dialog` · `Divider` · `Dock` · `Drawer` · `Editor` · `EmptyState` · `FileUpload` · `FloatingActionButton` · `Form` · `FormField` · `FormFieldArray` · `FormWizard` · `HotKeys` · `HoverCard` · `HumanReviewGate` · `Icon` · `Image` · `InlineEdit` · `InputGroup` · `InputOTP` · `Item` · `Kbd` · `Link` · `List` · `ListItem` · `Logo` · `LumiAvatar` · `Masonry` · `Mentions` · `Menu` · `MenuItem` · `Menubar` · `NativeSelect` · `NavItem` · `NavigationMenu` · `NumberField` · `OverlayProvider` · `Pagination` · `Popconfirm` · `Popover` · `ProgressBar` · `PromptInput` · `PromptSuggestions` · `QRCode` · `Radio` · `RadioGroup` · `Rating` · `Result` · `ScrollArea` · `SearchField` · `SegmentedControl` · `Select` · `Sidebar` · `Skeleton` · `Slider` · `Sortable` · `Spinner` · `Splitter` · `Stat` · `StatusIndicator` · `Steps` · `Switch` · `Tab` · `Tabs` · `Tag` · `TagInput` · `Terminal` · `TextField` · `Textarea` · `TimePicker` · `Timeline` · `Toast` · `ToastStack` · `Toggle` · `Toolbar` · `Tooltip` · `Tour` · `Transfer` · `Tree` · `TreeSelect` · `TreeTable` · `TypingIndicator` · `Watermark`
 
 ## Templates
 

package/README.md

@@ -138,7 +138,7 @@ Copied assets live in `assets/`: `logo-mark.svg` / `logo-mark.png` (official mas
 
 ## Components
 
-**A comprehensive library — 121 exports across 8 groups.** 105 of these are primary component files, and every primary ships the full contract trio — a `.jsx`, a `.d.ts` props contract, a `.prompt.md` — plus a Design-System card. The other 16 are co-exports (sub-parts such as `CardHeader`, `Tab`, `MenuItem`, `Radio`, and data consts such as `CS_ICONS`) documented inside their parent's files rather than with files of their own. Mount from the compiled bundle. The bundle's global is `window.CyberSkillDesignSystem_<projectId>` — the 6-hex suffix is assigned by the compiler and **changes when this system is imported into another project**, so resolve it by prefix rather than hardcoding it: `const CS = window[Object.keys(window).find(k => /^CyberSkillDesignSystem_/.test(k))]; const { Button } = CS;`
+**A comprehensive library — 122 exports across 8 groups.** 106 of these are primary component files, and every primary ships the full contract trio — a `.jsx`, a `.d.ts` props contract, a `.prompt.md` — plus a Design-System card. The other 16 are co-exports (sub-parts such as `CardHeader`, `Tab`, `MenuItem`, `Radio`, and data consts such as `CS_ICONS`) documented inside their parent's files rather than with files of their own. Mount from the compiled bundle. The bundle's global is `window.CyberSkillDesignSystem_<projectId>` — the 6-hex suffix is assigned by the compiler and **changes when this system is imported into another project**, so resolve it by prefix rather than hardcoding it: `const CS = window[Object.keys(window).find(k => /^CyberSkillDesignSystem_/.test(k))]; const { Button } = CS;`
 
 - **Core — actions & overlays** — `Button`, `ButtonGroup`, `FloatingActionButton`, `Dialog`
 
@@ -156,7 +156,7 @@ Copied assets live in `assets/`: `logo-mark.svg` / `logo-mark.png` (official mas
 
 - **Brand** — `Logo` (+ the `CS_LOGO_MARK_INNER` / `CS_LOGO_VIEWBOX` data consts), `Icon` (+ the `CS_ICONS` data const), `LumiAvatar`
 
-**Atomic tiers** — the same 121 exports seen through the design-composition lens (browsable live in `guidelines/atomic-view.html`, where one toolbar reskins every tier across Theme × Element × Language × Style). The eight groups above are the *functional/import* grouping (how the bundle is organized); these tiers are the *composition* grouping — same components, two lenses.
+**Atomic tiers** — the same 122 exports seen through the design-composition lens (browsable live in `guidelines/atomic-view.html`, where one toolbar reskins every tier across Theme × Element × Language × Style). The eight groups above are the *functional/import* grouping (how the bundle is organized); these tiers are the *composition* grouping — same components, two lenses.
 
 - **Atoms** (indivisible primitives) — `Button`, `Icon`, `Badge`, `Tag`, `StatusIndicator`, `Spinner`, `ProgressBar`, `Skeleton`, `Avatar` (+ `AvatarGroup`), `Divider`, `AspectRatio`, `Item`, `Kbd`, `Logo`, `LumiAvatar`, `Toggle`, `Link`
 
@@ -301,7 +301,7 @@ SKILL.md                   Agent-Skills-compatible entry
 
 **UI kits** (product recreations, composing the tokens + `.cs-*` classes): **Status Hub** (portfolio dashboard — KPIs, board/table/releases lenses, drawer — plus **sign-in**, **settings**, **project detail**). Live axis demos: Storybook toolbar · Atomic View · Elements Geometry specimen, **cyberskill.world** (bilingual marketing home with Lumi chat — plus **Work**, **Careers**, and a full-page **Lumi assistant**), and a **Brand deck** (16:9, `deck-stage`, PDF/PPTX-ready). See each kit's `README.md`.
 
-**Storybook** renders every card: Components (121 exports — Core, Forms, Data, Feedback, Navigation, Overlays, AI-native, Brand), Foundations (Colors, Type, Spacing, Surfaces, Brand, Motion, Responsive & Bilingual, **Elements**), plus Maintainer surfaces for Status Hub, Website, and Deck.
+**Storybook** renders every card: Components (122 exports — Core, Forms, Data, Feedback, Navigation, Overlays, AI-native, Brand), Foundations (Colors, Type, Spacing, Surfaces, Brand, Motion, Responsive & Bilingual, **Elements**), plus Maintainer surfaces for Status Hub, Website, and Deck.
 
 ---
 

package/SKILL.md

@@ -18,11 +18,11 @@ If the user invokes this skill without any other guidance, ask them what they wa
 
 - **`_esm/cs.mjs`** — browser / no-build legacy (`exports["./legacy"]`): self-ensures React, side-loads `_ds_bundle.js`, re-exports every component. Bundle path: `_ds_bundle.js` → resolve `window.CyberSkillDesignSystem_*` **by prefix**, never hardcode the compiler suffix. **Not for Next/SSR.**
 
-- **`tokens/`** — every design decision as a CSS custom property (`--cs-*`): colors, type, spacing, elevation/glass, motion, component tokens, **`elements.css`** — the Ngũ Hành product-identity packs (`data-cs-element="kim|moc|thuy|hoa|tho"` + `data-cs-variant`; role tokens `--cs-accent-*`) — Grammar: **Theme × Element × Language × Style** are independent; state them or accept defaults (`light · tho · en · liquid-glass`; Theme may be `system` for OS `prefers-color-scheme`). Style pack is liquid-glass (sole pack; absent ≡ default). Generated machine-readable exports live at **`tokens/tokens.json`**, **`tokens/tokens.js`** (ESM), and **`tokens/tokens.dtcg.json`** (**W3C DTCG**) — root tokens grouped by category, plus theme/element override maps — for native/mobile/tooling consumers. The root **`DESIGN.md`** is the generated single-file open-spec view of the same source (doctrine + every token value + inventory; regenerate via `npm run build:design-md`, never hand-edit — the `design-md-parity` gate pins it).
+- **`tokens/`** — every design decision as a CSS custom property (`--cs-*`): colors, type, spacing, elevation/glass, motion, component tokens, **`elements.css`** — the Ngũ Hành product-identity packs (`data-cs-element="kim|moc|thuy|hoa|tho"` + `data-cs-variant`; role tokens `--cs-accent-*` (10-role pack incl. `on-strong`)) — Grammar: **Theme × Element × Language × Style** are independent; state them or accept defaults (`light · tho · en · liquid-glass`; Theme may be `system` for OS `prefers-color-scheme`). Style pack is liquid-glass (sole pack; absent ≡ default). Generated machine-readable exports live at **`tokens/tokens.json`**, **`tokens/tokens.js`** (ESM), and **`tokens/tokens.dtcg.json`** (**W3C DTCG**) — root tokens grouped by category, plus theme/element override maps — for native/mobile/tooling consumers. The root **`DESIGN.md`** is the generated single-file open-spec view of the same source (doctrine + every token value + inventory; regenerate via `npm run build:design-md`, never hand-edit — the `design-md-parity` gate pins it).
 
 - **`docs/`** — `conventions.md` (authoring rules — the four axes: Theme × Element × Language × Style — plus the decision log), `products.md` (element registry, **locked**), `contrast-report.md` (generated APCA sweep), `consuming.md` (Claude Code vs Stitch dual path).
 
-- **`components/`** — 121 exports across 8 groups — Core (Button, Dialog), Forms, Data/Layout, Feedback, Navigation, Overlays, AI-native, and Brand (Logo, Icon, LumiAvatar). Each has a `.d.ts` contract and a `.prompt.md`. In production compose these; in static HTML use the `.cs-*` classes from `styles.css`.
+- **`components/`** — 122 exports across 8 groups — Core (Button, Dialog), Forms, Data/Layout, Feedback, Navigation, Overlays, AI-native, and Brand (Logo, Icon, LumiAvatar). Each has a `.d.ts` contract and a `.prompt.md`. In production compose these; in static HTML use the `.cs-*` classes from `styles.css`.
 
 - **`templates/`** — ~84 copyable starting points (**Design Components** — Claude Design / full-clone authoring only) spanning the full operations map: **product** — marketing-page, dashboard, slide-deck, auth, settings, app-shell, article, email; **teams** — Tech (release-notes, incident-report, rfc, retro), Team (meeting-agenda), HR (announcement, offboarding, interview-kit, performance-review, PIP⚠), Board (report, deck, memo, minutes, resolution⚠, investor-update), Marketing (brief, newsletter, launch, case-study, press-release, social-kit), Culture (event-invite), Delivery (status-email, kickoff, change-note, runbook, qbr-deck); **business** — Legal (msa, sow), Finance (invoice, quote, expense-report, dunning-email), Sales (one-pager, proposal-deck); **HR Suite** — 37 client-supplied, lawyer-validated bilingual A4 instruments (`templates/vn-*`), converted verbatim from `.docx` and re-skinned to the latest system; `vn-labor-contract` supersedes the former `legal-employment-contract`. Three suite-wide **reference documents** (`templates/doc-style-guide`, `doc-suite-index`, `doc-templates`) define, catalogue, and frame EVERY template — Style Guide (Articles 1–10 + archetype map), Suite Index & Usage Guide, and the blank archetype shells. ⚠ = counsel-gated, banner-marked drafts; the HR Suite is client-validated legal text — keep verbatim and have counsel review edits. Every template carries Element ×15 tweaks and is **bilingual**: the 37 `vn-*` HR-suite docs and 3 `doc-*` references stack Vietnamese-first (no tweak), and every other template carries an EN·VN Language tweak (several emails add *Both*) — as of Jul 2026 there are no English-only templates left. Each loads the system via a sibling `ds-base.js` (one `base` line to rebind — validated end-to-end Jul 2026). **Stitch / static consumers:** use `templates/kitchen-sink.html`, `examples/static-hello/`, and `.cs-*` classes — not `*.dc.html`.
 
@@ -54,7 +54,7 @@ Every artifact exports, all paths preserving Vietnamese Unicode (see `docs/conve
 
 - Voice stays warm/direct/honest/respectful — never fun/playful/edgy. Products are "wishes" that Lumi helps grant.
 
-- Expansion rule: when any set grows (element/variant, icon, component, language), update every deliverable in the same change — tokens, cards + related guidelines, contract trio, all template enums, Storybook toolbar / Atomic View, docs incl. every related document/README — and grep the old list to prove it. Version is LAUNCHED at **1.1.0**; current pin is **1.1.1**; further bumps need an owner instruction (no changelog).
+- Expansion rule: when any set grows (element/variant, icon, component, language), update every deliverable in the same change — tokens, cards + related guidelines, contract trio, all template enums, Storybook toolbar / Atomic View, docs incl. every related document/README — and grep the old list to prove it. Version is LAUNCHED at **1.1.0**; pin tracks `VERSION` (auto-bump on `main`; owner may still force a bump; no changelog).
 
 - **Stitch / non-DC tools must not consume `*.dc.html` as source of truth.** Those files need the Design Components compiler (tweaks, `x-import`, `__dcSetProps`). Generate static UI from `DESIGN.md` / DTCG / `styles.css` + `.cs-*` / kitchen-sink / `examples/static-hello/` instead. DC authoring stays Claude Design (or a full clone with the compiler).
 

package/VERSION

@@ -1 +1 @@
-1.1.1
+1.2.0