@cyberskill/design 2.8.0 → 2.9.0

package/DESIGN.md

@@ -1,6 +1,6 @@
 ---
 name: "CyberSkill Design System"
-version: "2.8.0"
+version: "2.9.0"
 generated: "2026-07-23"
 generator: "scripts/generate-design-md.mjs (npm run build:design-md)"
 sources:
@@ -21,7 +21,7 @@ gate: "_audit/design-md-parity.html (window.__designmd)"
 
 - **Slogan:** *Turn Your Will Into Real — Hiện Thực Hoá Ý Chí*.
 - **Immutable anchors:** Umber `#45210E` (primary brand) · Ochre `#F4BA17` (accent). Never remap; the composite focus indicator (text-primary contour + ochre halo) is a studio-wide accessibility signature.
-- **Four axes:** Theme (light · dark · system) × Element (Ngũ Hành — Kim · Mộc · Thủy · Hỏa · Thổ, 15 element×variant packs) × Language (EN · VI) × Style (`data-cs-style` — sole pack **liquid-glass**; absent ≡ default).
+- **Four axes:** Theme (light · dark · system) × Element (Ngũ Hành — Kim · Mộc · Thủy · Hỏa · Thổ, 15 element×variant packs) × Language (EN · VI) × Style (`data-cs-style` — **liquid-glass** default, absent ≡ default · **matte-paper** opaque crisp paper surfaces).
 - **Language scope:** Vietnamese-first; registered component strings require EN + VI pairs. Template language capabilities are declared per template, and consumer-provided content needs its own translation and review. Preserve diacritics; declared pairs do not certify translation quality or screen-reader pronunciation.
 - **Text never sits on the mid-tone `-accent`:** use `-bright` or `-tint`, or pair a `-strong` fill with `--cs-accent-on-strong` for body text. `-accent` is for bars, borders, progress fills, and large non-text fills.
 - **Accessibility floor:** APCA Lc ≥ 75 body text · ≥ 44px touch targets · focus rings never removed · honour `prefers-reduced-motion` / `prefers-contrast`.
@@ -45,7 +45,7 @@ Core semantic colours. Dark values are the `[data-theme="dark"]` overrides (the
 | `--cs-color-text-primary` | `#45210E` | `#f5ead9` |
 | `--cs-color-text-inverse` | `#FFFFFF` | `#1a1108` |
 | `--cs-color-text-accent` | `#6E3B0E` | `#FECD5D` |
-| `--cs-color-text-muted` | `#3F2D21` | `#E9D6C2` |
+| `--cs-color-text-muted` | `#5E4436` | `#E9D6C2` |
 | `--cs-color-semantic-success` | `#166534` | `#4ADE80` |
 | `--cs-color-semantic-danger` | `#B42318` | `#FC9895` |
 | `--cs-color-semantic-warning` | `#92400E` | `#FBBF24` |
@@ -76,7 +76,7 @@ Default accent pack = Thổ (the studio's own element). All 15 element×variant
 | Token | Value |
 |---|---|
 | `--cs-accent` | `#F4BA17` |
-| `--cs-accent-strong` | `#916D11` |
+| `--cs-accent-strong` | `#A4631E` |
 | `--cs-accent-bright` | `#F4BA17` |
 | `--cs-accent-on` | `#45210E` |
 | `--cs-accent-tint` | `#FBF4E9` |
@@ -297,9 +297,9 @@ Shadow values are the raw CSS box-shadow strings from `$extensions["com.cyberski
 |---|---|---|
 | `--cs-shadow-xs` | `0 1px 2px rgba(69, 33, 14, 0.06)` | `0 1px 2px rgba(0, 0, 0, 0.40)` |
 | `--cs-shadow-sm` | `0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06)` | `0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42)` |
-| `--cs-shadow-md` | `0 12px 30px rgba(31, 19, 11, 0.18)` | `0 12px 30px rgba(0, 0, 0, 0.50)` |
+| `--cs-shadow-md` | `0 12px 30px rgba(69, 33, 14, 0.14)` | `0 12px 30px rgba(0, 0, 0, 0.50)` |
 | `--cs-shadow-lg` | `0 20px 60px rgba(69, 33, 14, 0.18)` | `0 20px 60px rgba(0, 0, 0, 0.55)` |
-| `--cs-shadow-xl` | `0 24px 80px rgba(31, 19, 11, 0.26)` | `0 24px 80px rgba(0, 0, 0, 0.62)` |
+| `--cs-shadow-xl` | `0 24px 80px rgba(69, 33, 14, 0.24)` | `0 24px 80px rgba(0, 0, 0, 0.62)` |
 
 ### Depth scale & Liquid Glass materials
 
@@ -432,7 +432,7 @@ Layouts compose on a `4px` spatial rhythm (`--cs-space-1` to `--cs-space-24`) wi
 
 ## Agent prompt guide & starter blueprint
 
-- **Root attributes (`<html>`):** set `lang="vi"` (or `lang="en"`), `data-theme="light"` (`"dark"` | `"system"`), optional `data-cs-element="tho"` (`"kim"` | `"moc"` | `"thuy"` | `"hoa"` | `"tho"`), optional `data-cs-density="comfortable"` (`"compact"`), and optional `data-cs-contrast="high"`.
+- **Root attributes (`<html>`):** set `lang="vi"` (or `lang="en"`), `data-theme="light"` (`"dark"` | `"system"`), optional `data-cs-element="tho"` with its exact `data-cs-variant` (`tho` `#45210E`/`#F4BA17`: default/absent, `"sand"`, `"clay"`, alias `"studio"`/`"ochre"`; `hoa` `#992515`/`#F26C4F`: default/absent, `"plasma"`, `"lava"`, alias `"ember"`; `thuy` `#0D5A8A`/`#58B4E8`: default/absent, `"mist"`, `"ocean"`, alias `"river"`; `moc` `#1F5C3A`/`#62C389`: default/absent, `"bamboo"`, `"forest"`, alias `"jade"`/`"leaf"`; `kim` `#374151`/`#D6DCE5`: default/absent, `"titanium"`, `"steel"`, alias `"gold"`/`"champagne"`/`"silver"`), optional `data-cs-style="liquid-glass"` (`"matte-paper"` for zero-blur opaque editorial/dense surfaces), optional `data-cs-density="comfortable"` (`"compact"`), and optional `data-cs-contrast="standard"` (`"high"`). Component-name CSS hook aliases (`.cs-review-gate` / `.cs-human-review-gate`, `.cs-otp` / `.cs-input-otp`, `.cs-select` / `.cs-select__trigger`, and `.cs-datagrid tr.is-selected` / `tr.cs-item.is-selected`) and legal document primitives (`.cs-doc-sheet`, `.cs-doc-motto`, `.cs-doc-section-bar`, `.cs-doc-blank`, `.cs-doc-field`) are styled natively.
 - **Runtime selection:** load `styles.css` (or `styles.layered.css`) for static `.cs-*` HTML; import `@cyberskill/design` (`dist/esm/_esm/react.mjs`) for compiled React ESM or `@cyberskill/design/source` (`_esm/react.mjs`) for raw JSX; use `templates/_vendor/support.js` only when previewing `.dc.html` documents.
 - **Prompting checklist for AI generators:** specify (1) target runtime (`static-html` vs `react`), (2) theme and Ngũ Hành element (`data-theme`, `data-cs-element`), (3) bilingual copy pair (`vi` + `en` with full Vietnamese diacritics), (4) responsive container (`max-width: var(--cs-container-xl)` or `.cs-cq`), and (5) tabular numeral alignment (`.cs-tabular` / `.cs-table__cell--numeric`) for metrics and tables.
 - **Quick color & token reference:** Primary brand Umber `#45210E` (`--cs-color-brand-umber`) · Accent Ochre `#F4BA17` (`--cs-color-brand-ochre`) · Page canvas `#FFFDF8` / dark `#1a1108` (`--cs-color-surface-page`) · Panel `#FFFFFF` / dark `#221710` (`--cs-color-surface-panel`) · Raised `#FBF4E9` / dark `#2b1e14` (`--cs-color-surface-raised`) · Default border `#E7D9C6` / dark `#4a3a2c` (`--cs-color-border-default`).

package/README.md

@@ -8,20 +8,20 @@
 
 [![Design System Gates](https://github.com/cyberskill-official/design/actions/workflows/design-system-gates.yml/badge.svg)](https://github.com/cyberskill-official/design/actions/workflows/design-system-gates.yml)
 
-A warm, enterprise-grade, **Vietnamese-first** design system for **CyberSkill** — a Saigon software studio (est. 2020) that turns a clear *wish* into working software. Anchored on **Umber** and **Ochre**, guided by **Lumi** the golden genie, every surface resolves four independent axes: **Theme** (light · dark · system) × **Element** (Ngũ Hành product identity: Kim · Mộc · Thủy · Hỏa · Thổ, 15 variants) × **Language** (EN · VI) × **Style** (`data-cs-style` — sole pack **liquid-glass**; absent ≡ default). Consumers link one file: **`styles.css`** (`dist/styles.css` is the same closure flattened into one file for environments that don't follow `@import` chains (card renderers, some sandboxes); regenerate with `npm run build:css` after editing `tokens/` or `base/`).
+A warm, enterprise-grade, **Vietnamese-first** design system for **CyberSkill** — a Saigon software studio (est. 2020) that turns a clear *wish* into working software. Anchored on **Umber** and **Ochre**, guided by **Lumi** the golden genie, every surface resolves four independent axes: **Theme** (light · dark · system) × **Element** (Ngũ Hành product identity: Kim · Mộc · Thủy · Hỏa · Thổ, 15 variants) × **Language** (VI · EN) × **Style** (`data-cs-style` — **liquid-glass** default, absent ≡ default · **matte-paper** opaque crisp paper surfaces). Consumers link one file: **`styles.css`** (`dist/styles.css` is the same closure flattened into one file for environments that don't follow `@import` chains (card renderers, some sandboxes); regenerate with `npm run build:css` after editing `tokens/` or `base/`).
 
 ---
 
 ## Start here
 
-This is the **entrance document** for the CyberSkill Design System — source checkout VERSION **<!-- cs-source-version:checkout -->2.8.0<!-- /cs-source-version -->** (see `VERSION`; this does not establish registry availability). The **product site** is Storybook at **`/`** on `design.cyberskill.world` (host-only; local: `npm run storybook`). Operator documentation is published in the Storybook **Docs** sidebar and the Documentation Library at `/docs/viewer.html` (legacy `/dashboard`, `/dashboard.html`, and `/playground/*` redirect to `/`).
+This is the **entrance document** for the CyberSkill Design System — source checkout VERSION **<!-- cs-source-version:checkout -->2.9.0<!-- /cs-source-version -->** (see `VERSION`; this does not establish registry availability). The **product site** is Storybook at **`/`** on `design.cyberskill.world` (host-only; local: `npm run storybook`). Operator documentation is published in the Storybook **Docs** sidebar and the Documentation Library at `/docs/viewer.html` (legacy `/dashboard`, `/dashboard.html`, and `/playground/*` redirect to `/`).
 
 ### Quick start by audience
 
 - **Designers** — open Storybook (**Foundations / Components / Templates / Pages / Docs**). **Templates** lists all <!-- cs-count:templates -->85<!-- /cs-count --> starting points (Gallery → Atomic View, plus category stories including the 38-document VN A4 suite (Employment Suite + commercial framework) under **Templates → HR**). Flip Theme × Element × Language × Style live via the Storybook toolbar, Atomic View, and the Elements Geometry specimen.
 - **Browser template authoring** (static HTTP server) — read `SKILL.md` (runtime routing + design constraints), then the guide below; compose with `styles.css` + compiled ESM `@cyberskill/design` (`dist/esm/_esm/react.mjs`; raw JSX via `@cyberskill/design/source`) / legacy `_esm/cs.mjs` / `_ds_bundle.js` (prefix resolve). The shipped `support.js` interprets `*.dc.html` in a browser; see `docs/template-grammar.md` for grammar and host-only boundaries. Component contracts live beside each component (`.d.ts` + `.prompt.md`).
 - **Static / open-spec** (e.g. Google Stitch) — start at **`DESIGN.md`** (generated open-spec) → `llms.txt` → `tokens/tokens.dtcg.json`. Build **static** UI with `styles.css` + `.cs-*` / kitchen-sink / `examples/static-hello/`. Use `.dc.html` through the shipped interpreter or a grammar-aware tool; plain HTML tools consume `.cs-*` or a verified rendered snapshot.
-- **Implementers** — published stable npm package **`@cyberskill/design@2.7.0`** (see `docs/consuming.md`; grant in `docs/consumer-grant.md` — still UNLICENSED). **Next/SSR:** `import { Button } from "@cyberskill/design"` (peer React). **Browser demo:** **`examples/npm-hello/`** (Lumi · Hỏa · plasma, legacy `_esm/cs.mjs`). Or link **`styles.css`** from a clone/subtree (one file = everything), or copy a `templates/<slug>/` folder and edit one line in its `ds-base.js` (one-line rebind, validated end-to-end Jul 2026). Scope identity with `data-theme` · `data-cs-element` (+`data-cs-variant`) · `lang`. Release signal: tip SHA + `docs/release-notes.md` (source VERSION is **<!-- cs-source-version:release-signal -->2.8.0<!-- /cs-source-version -->**; no CHANGELOG).
+- **Implementers** — published stable npm package **`@cyberskill/design@2.8.0`** (see `docs/consuming.md`; grant in `docs/consumer-grant.md` — still UNLICENSED). **Next/SSR:** `import { Button } from "@cyberskill/design"` (peer React). **Browser demo:** **`examples/npm-hello/`** (Lumi · Hỏa · plasma, legacy `_esm/cs.mjs`). Or link **`styles.css`** from a clone/subtree (one file = everything), or copy a `templates/<slug>/` folder and edit one line in its `ds-base.js` (one-line rebind, validated end-to-end Jul 2026). Scope identity with `data-theme` · `data-cs-element` (+`data-cs-variant`) · `lang`. Release signal: tip SHA + `docs/release-notes.md` (source VERSION is **<!-- cs-source-version:release-signal -->2.9.0<!-- /cs-source-version -->**; no CHANGELOG).
 - **Maintainers** — `docs/doctrine.md` (expansion + verification), then `CONTRIBUTING.md` and `docs/quality-gates.md`.
 
 ### Document map — consumers
@@ -35,11 +35,11 @@ This is the **entrance document** for the CyberSkill Design System — source ch
 | `docs/consumer-grant.md` | Written npm consumer grant (CyberSkill portfolio; UNLICENSED + named products) |
 | `docs/conventions.md` | How to extend the system (naming grammar, checklists, the four axes) |
 | `docs/release-notes.md` | Curated product highlights (not a changelog) |
-| `docs/design-styles.md` | The live styling axes (Theme × Element × Language × Style) and the fixed liquid-glass treatment |
+| `docs/design-styles.md` | The live styling axes (Theme × Element × Language × Style) and surface material packs (liquid-glass · matte-paper) |
 | `docs/products.md` | Product → element registry (**locked** — do not invent assignments) |
 | `docs/contrast-report.md` | Generated APCA elemental sweep — 0 failures at its Lc ≥ 60 UI-label floor. Body text authors to the stricter Lc ≥ 75 floor (see Anchor immutables); the sweep's Lc ≥ 60 rows are accent/label pairings, not body text. |
 | `docs/template-schema-v2.md` | Typed content-slot spec for templates — opt-in, machine-checkable |
-| `docs/deploy.md` | Deploying the live site — Vercel (zero-config) · generic VPS/nginx · post-deploy checklist |
+| `docs/deploy.md` | Deploying the live site — GitHub Pages (`.github/workflows/pages.yml`) · Vercel · generic VPS/nginx · post-deploy checklist |
 | `docs/live-hub.md` | Storybook at `/` is the product surface; surface map |
 | `docs/storybook.md` | Host Storybook product surface at `/` — Docs sidebar is the published reading surface |
 | `docs/figma.md` | Figma / Tokens Studio import recipe for consumers and maintainers |
@@ -75,7 +75,7 @@ This is the **entrance document** for the CyberSkill Design System — source ch
 | Language | Vietnamese-first; every UI string ships an EN + VN pair |
 | Accessibility floor | APCA Lc ≥ 75 body text; focus rings never removed; ≥ 44px touch targets |
 | Axes | Theme × Element × Language × Style (independent) |
-| Style pack | liquid-glass (sole pack; absent ≡ default) |
+| Style pack | liquid-glass (default; absent ≡ default) · matte-paper |
 <!-- END DOCTRINE IMMUTABLES -->
 
 ---
@@ -100,7 +100,7 @@ This is the **entrance document** for the CyberSkill Design System — source ch
 
 ## Visual foundations
 
-- **Palette — warm earth, never cold.** Umber `#45210E` grounds everything (it *is* the primary text colour); Ochre `#F4BA17` is the single accent — CTAs on dark, focus rings, highlights, the genie. Surfaces are warm paper: page `#FFFDF8`, panel `#FFFFFF`, raised `#FBF4E9`. Every neutral is warmed toward umber — borders are `#E7D9C6`, muted text `#3F2D21`. Semantic colours (success `#166534`, danger `#B42318`, warning `#92400E`, info `#1D4ED8`) are used sparingly and never as the only signal. **Max one accent per surface** — on core surfaces that accent is Ochre; a *product* may swap in its element accent, never add a second hue beside it. No bluish-purple gradients.
+- **Palette — warm earth, never cold.** Umber `#45210E` grounds everything (it *is* the primary text colour); Ochre `#F4BA17` is the single accent — CTAs on dark, focus rings, highlights, the genie. Surfaces are warm paper: page `#FFFDF8`, panel `#FFFFFF`, raised `#FBF4E9`. Every neutral is warmed toward umber — borders are `#E7D9C6`, muted text `#5E4436`. Semantic colours (success `#166534`, danger `#B42318`, warning `#92400E`, info `#1D4ED8`) are used sparingly and never as the only signal. **Max one accent per surface** — on core surfaces that accent is Ochre; a *product* may swap in its element accent, never add a second hue beside it. No bluish-purple gradients.
 - **Typography.** UI: **Be Vietnam Pro** (300–800; a Vietnamese-first Google family) — the default for every surface, headings included. Display/headline: **Space Grotesk** (variable 300–700), the **opt-in** face behind `--cs-font-family-display`; nothing points at it until a scope opts in with `.cs-display-face`, which retargets `--cs-heading-family` and leaves body copy on the UI face. Code/data: **JetBrains Mono**. Display headings are heavy (800 on the UI face; under `.cs-display-face`, Space Grotesk tops out at 700 so 800 clamps within that family), tight tracking (−0.02em); body is 400/500 at 1.5. Uppercase eyebrows at 0.08–0.12em tracking. The size ramp runs xs 12 → 5xl 60 on a 16px base.
 - **Spacing & layout.** 4px base grid; section padding lives between 64 and 96px; content max-width ~1200–1320px. Generous, calm whitespace.
 - **Corners & cards.** Radii: sm 4, md 8 (default), **lg 14 (cards/panels)**, full 999 (pills, inputs, chips). A default card = white panel, 1px warm border `#E7D9C6`, 14px radius, soft warm shadow. No coloured-left-border cards.
@@ -155,7 +155,7 @@ Generated from the public source catalog and actual Atomic story AST. **125 expo
 <!-- END CATALOG COMPONENT INVENTORY -->
 
 - **Highlights:** **Button** — Umber primary; variants primary/secondary/tertiary/ghost/danger/danger-ghost; sizes xs–lg; loading, icon, fullWidth. **TextField / Textarea / Select / NativeSelect** share one `.cs-field` frame (label + description/error; diacritic/IME-safe). **DataTable** — caption, scoped headers, per-column render, idle/loading/error/empty triad. **Card** — warm panel + header/body/footer. **Logo** renders the exact official mark; **Icon** drives the in-repo line-icon set. The **AI-native** family carries the brand's explainability doctrine — disclosure, human review, wish capture, and confidence, all stated in words (never colour alone).
-- **Install / package name:** The package name is **`@cyberskill/design`** (source checkout VERSION **<!-- cs-source-version:package-source -->2.8.0<!-- /cs-source-version -->**; grant in `docs/consumer-grant.md` governs *use* — package remains UNLICENSED). Do **not** install `@cyberskill/react` for this tree — that name is historical marketing-site inventory, not this package.
+- **Install / package name:** The package name is **`@cyberskill/design`** (source checkout VERSION **<!-- cs-source-version:package-source -->2.9.0<!-- /cs-source-version -->**; grant in `docs/consumer-grant.md` governs *use* — package remains UNLICENSED). Do **not** install `@cyberskill/react` for this tree — that name is historical marketing-site inventory, not this package.
 - **Source inventory vs. extensions:** An earlier CyberSkill surface shipped six primitives — `Button`, `TextField`, `Dialog`, `DataTable`, `AIDisclosureBadge`, `HumanReviewGate` — plus a brand `Logo`. Everything else in **this** package is an **intentional extension** built in the brand's own token vocabulary so consumers have a complete working kit: `Icon`, the standard Forms / Feedback / Data / Navigation / Overlays primitives, added AI-native pieces (`PromptInput`, `ChatMessage`, `ConfidenceMeter`, `PromptSuggestions`, `TypingIndicator`, `CitationList`) that formalise the Lumi wish-flow, and the `LumiAvatar` mascot.
 
 ---
@@ -276,6 +276,12 @@ SKILL.md                   Agent-Skills-compatible entry
 - **Accessibility verification:** `_audit/a11y-harness.html` and `npm run test:a11y-harness` check accessible names with the pinned local axe engine across Chromium, Firefox, and WebKit.
 - **Live browser benchmark & non-regression gate:** `npm run test:audit-regression` (`_audit/ci/verify-audit-benchmarks-browser.mjs`) scores **129/129** checks across 20 dimensions (`D1`–`D20`) at **10.0 / 10**, **64/64** core baseline checks at **10.0 / 10**, **192/192** cells (`≥ 3.0:1`) across the 32×6 non-text contrast matrix, and **3/3** Generation-2 complex stress-test screens with **0 watch** items. Dark default-scope tint ink measures **8.42:1–10.54:1** (`.cs-result__icon` **8.42:1**, `.cs-item.is-selected` **10.54:1** — both clearing WCAG AAA `7:1`).
 
+### Setup, extension & benchmark playbook
+
+- **Setup & local servers:** Run `node scripts/bootstrap-toolchain.mjs && node scripts/npm.mjs ci` once on Node >=22.12.0. Launch Storybook with `node scripts/npm.mjs run storybook` (`http://127.0.0.1:6006`) or serve the static audit board with `node scripts/npm.mjs run verify:serve` (`http://127.0.0.1:8765/_audit/run.html`). Production pushes to `main` deploy automatically via `.github/workflows/pages.yml` to `https://design.cyberskill.world/`.
+- **Extending tokens, components, templates & open-spec:** Edit `tokens/*.css`, `tokens/base-inventory.json`, and `base/*.css`, then run `node scripts/npm.mjs run tokens:generate && node scripts/npm.mjs run build:css`. Add or update React primitives under `components/<group>/<Name>.{jsx,d.ts,prompt.md}`, `stories/<Name>/<Name>.stories.jsx`, and `components/lifecycle.json`, then run `node scripts/npm.mjs run build`. Register templates under `templates/<slug>/` and `_ds_manifest.json` (`node scripts/generate-template-inventory.mjs`), and rebuild the Stitch/LLM open-spec with `node scripts/npm.mjs run build:design-md`.
+- **Auditing, reviewing & benchmarking in the future:** Run `node scripts/npm.mjs run test:audit-regression` to execute the 20-Dimension (`D1`–`D20`) live Chromium benchmark defined in `_audit/ci/lib/benchmark-checks.mjs` against `_audit/ci/fixtures/benchmark-20d.html`, `_audit/ci/fixtures/benchmark-baseline.html`, and `_audit/ci/fixtures/benchmark-gen2.html`. When running external AI design benchmarks (Google Stitch or Claude Design), codify any newly discovered visual or ergonomic rules into `_audit/ci/lib/benchmark-checks.mjs`, verify with `node scripts/npm.mjs run build:check`, and remove temporary external benchmark HTML/screenshots once the regression assertion is locked into CI.
+
 <!-- BEGIN PINNED TOOLCHAIN BOOTSTRAP -->
 Before running source-repository `npm ci` or `npm run` commands, use Node >=22.12.0 and run `node scripts/bootstrap-toolchain.mjs` directly. This installs the audited, lockfile-pinned npm 11.21.1 fixture with lifecycle scripts disabled. Add `_audit/ci/fixtures/npm-cli/node_modules/.bin` to PATH, or run `node scripts/npm.mjs ci` and use `node scripts/npm.mjs` in place of `npm` for subsequent commands (`devEngines` rejects other npm versions in the source repository; published-package consumers keep their own package manager). See [validation and toolchain guidance](docs/validation.md).
 <!-- END PINNED TOOLCHAIN BOOTSTRAP -->

package/SECURITY.md

@@ -17,13 +17,13 @@ Please disclose privately via **GitHub Security Advisories** for [`cyberskill-of
 
 | Release line | Security maintenance |
 |---|---|
-| Latest published stable minor, currently **2.7.x** | Security triage and fixes target this line. |
+| Latest published stable minor, currently **2.8.x** | Security triage and fixes target this line. |
 | Earlier stable minor/major lines | Upgrade guidance; no backport commitment. |
 | Unreleased working tree and prereleases | Development evidence; not a supported published release. |
 
-The latest-published snapshot is **2.7.0**, observed at
-`2026-11-09T20:01:08.112Z` from the official npm registry. Snapshot SHA-256:
-`2d1099883a7f8e06928c1561055f29967706f22ea07743fc02d9fd5703e53086`. This is a recorded publication identity, not a live registry query.
+The latest-published snapshot is **2.8.0**, observed at
+`2026-11-10T13:04:18.764Z` from the official npm registry. Snapshot SHA-256:
+`0636a6b880393bd0e78f35f193169948f693bbee849ce9e6d7162036444ea577`. This is a recorded publication identity, not a live registry query.
 Refresh the snapshot and this generated block after a separately authorized
 publication; a local VERSION change does not establish publication or support.
 

package/SKILL.md

@@ -89,7 +89,7 @@ Doctrine immutables (source-derived):
 | Language | Vietnamese-first; every UI string ships an EN + VN pair |
 | Accessibility floor | APCA Lc ≥ 75 body text; focus rings never removed; ≥ 44px touch targets |
 | Axes | Theme × Element × Language × Style (independent) |
-| Style pack | liquid-glass (sole pack; absent ≡ default) |
+| Style pack | liquid-glass (default; absent ≡ default) · matte-paper |
 
 - **static-html** — `styles.css`; [guide](DESIGN.md). Use .cs-* classes; .dc.html additionally requires the shipped interpreter or a verified grammar-aware runtime.
 - **react** — `@cyberskill/design`; [guide](docs/consuming.md). Compiled ESM with peer React; explicit @cyberskill/design/source is raw JSX. CommonJS is not promised.

package/VERSION

@@ -1 +1 @@
-2.8.0
+2.9.0