@cyberskill/design 2.7.0 → 2.8.0

package/DESIGN.md

@@ -1,6 +1,6 @@
 ---
 name: "CyberSkill Design System"
-version: "2.7.0"
+version: "2.8.0"
 generated: "2026-07-23"
 generator: "scripts/generate-design-md.mjs (npm run build:design-md)"
 sources:
@@ -402,7 +402,7 @@ Component-level design decisions (button · textfield). Dark values are theme ov
 Static HTML consumers and zero-runtime generators style semantic HTML elements directly with `.cs-*` classes from `styles.css` (or `styles.layered.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/`; guideline cards under `guidelines/` default to English (`?language=vi` for Vietnamese). Interactive state management, keyboard roving, focus trapping and ARIA live announcements require the React components or consumer-supplied scripts; see `docs/static-html-reference.md` for rendered DOM snapshots.
 
 - **Actions & buttons (`base/components.css`):** primary `.cs-button`, variants `.cs-button--secondary`, `.cs-button--tertiary`, `.cs-button--ghost`, `.cs-button--danger`, `.cs-button--danger-ghost`; sizes `.cs-button--xs` (`28px`, `44px` on `pointer: coarse`), `.cs-button--sm` (`36px`, `44px` on `pointer: coarse`), default medium (`44px`), `.cs-button--lg` (`52px`), full-width `.cs-button--full`; states `.is-disabled`, `.is-loading` with `.cs-button__spinner`.
-- **Form controls & fields (`base/components.css`, `base/forms.css`, `base/controls.css`):** field wrapper `.cs-field` with `.cs-field__label`, `.cs-field__control`, `.cs-field__description`, `.cs-field__error` and invalid state `.cs-field.is-invalid`; selection controls `.cs-check`, `.cs-radio`, `.cs-switch` (`.cs-switch__track`); composite inputs `.cs-select`, `.cs-native-select`, `.cs-search` (`.cs-search__clear`), `.cs-stepper`, `.cs-otp`, `.cs-slider`, `.cs-segmented`.
+- **Form controls & fields (`base/components.css`, `base/forms.css`, `base/controls.css`):** field wrapper `.cs-field` with `.cs-field__label`, `.cs-field__control`, `.cs-field__description`, `.cs-field__error` and invalid state `.cs-field.is-invalid`; selection controls `.cs-check`, `.cs-radio`, `.cs-switch` (`.cs-switch__track`); composite inputs `.cs-select`, `.cs-native-select`, `.cs-search` (`.cs-search__clear`), `.cs-stepper`, `.cs-otp`, `.cs-slider`, `.cs-segmented`, `.cs-combobox`, `.cs-igroup`, `.cs-taginput`, `.cs-datepicker` (`.cs-datepicker__field`), `.cs-timepicker`, `.cs-treeselect` (`.cs-treeselect__field`), `.cs-cascader` (`.cs-cascader__field` / `.cs-treeselect__field`), `.cs-colorpicker` (`.cs-colorpicker__field`), and `.cs-dropzone`.
 - **Cards & Liquid Glass surfaces (`base/data.css`, `base/glass.css`):** card container `.cs-card` (modifiers `.cs-card--flat`, `.cs-card--raised`, `.cs-card--featured`, `.cs-card--interactive`; slots `.cs-card__media`, `.cs-card__header`, `.cs-card__title`, `.cs-card__subtitle`, `.cs-card__body`, `.cs-card__footer`); optical glass tiers `.cs-surface-whisper`, `.cs-surface-light`, `.cs-surface-standard` (alias `.cs-glass-card`), `.cs-surface-heavy`, opaque fallback `.cs-surface-solid` (alias `.cs-surface-matte`), and brand hero wash `.cs-aurora` (`.cs-aurora--photo`).
 - **Data display & typography (`base/components.css`, `base/data.css`, `base/typography.css`, `base/collections.css`):** responsive table wrapper `.cs-table-wrap` and `.cs-table` with right-aligned tabular numeric cells `.cs-table__cell--numeric` and subtle row rule `var(--cs-color-border-subtle, var(--_cs-border-subtle))`; KPI block `.cs-stat` (`.cs-stat__label`, `.cs-stat__value`, `.cs-stat__delta--up`, `.cs-stat__delta--down`, `.cs-stat__delta--flat`); status pills `.cs-badge` (`.cs-badge--solid`, `.cs-badge--ochre`, `.cs-badge--success`, `.cs-badge--warning`, `.cs-badge--danger`, `.cs-badge--info`, `.cs-badge__dot`) and removable `.cs-tag`; `.cs-avatar` (`.cs-avatar--sm`, `.cs-avatar--md`, `.cs-avatar--lg`, `.cs-avatar--square`, `.cs-avatar-group`); `.cs-kbd`, `.cs-code`, `.cs-dl`; type role classes `.cs-display`, `.cs-display--fluid`, `.cs-h1`, `.cs-h1--fluid`, `.cs-h2`, `.cs-h3`, `.cs-h4`, `.cs-body-lg`, `.cs-body`, `.cs-secondary`, `.cs-caption`, `.cs-eyebrow`, `.cs-mono`, `.cs-tabular`, `.cs-prose`, and opt-in display scope `.cs-display-face`.
 - **Feedback & overlays (`base/feedback.css`, `base/components.css`, `base/shell.css`):** inline banner `.cs-alert` (`.cs-alert--info`, `.cs-alert--success`, `.cs-alert--warning`, `.cs-alert--danger`, `.cs-alert__icon`, `.cs-alert__title`, `.cs-alert__body`, `.cs-alert__dismiss`); toast stack `.cs-toast-stack` and `.cs-toast`; modal `.cs-dialog-layer` with theme-adaptive backdrop `.cs-dialog__overlay` (`var(--cs-color-surface-scrim, var(--_cs-surface-scrim))`), panel `.cs-dialog` (`.cs-dialog__header`, `.cs-dialog__title`, `.cs-dialog__body`, `.cs-dialog__actions`) and `.cs-alert-dialog` (`.cs-alert-dialog--destructive`); slide-over `.cs-drawer-scrim` and `.cs-drawer` (`.cs-drawer--left`); `.cs-popover` (`.cs-popover__panel`), `.cs-tooltip` (`.cs-tooltip__bubble`), `.cs-progress` (`.cs-progress__fill`), `.cs-spinner`, `.cs-skeleton`.

package/README.md

@@ -14,14 +14,14 @@ A warm, enterprise-grade, **Vietnamese-first** design system for **CyberSkill**
 
 ## Start here
 
-This is the **entrance document** for the CyberSkill Design System — source checkout VERSION **<!-- cs-source-version:checkout -->2.7.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.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 `/`).
 
 ### 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.6.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.7.0<!-- /cs-source-version -->**; no CHANGELOG).
+- **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).
 - **Maintainers** — `docs/doctrine.md` (expansion + verification), then `CONTRIBUTING.md` and `docs/quality-gates.md`.
 
 ### Document map — consumers
@@ -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.7.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.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.
 - **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.
 
 ---
@@ -274,7 +274,7 @@ SKILL.md                   Agent-Skills-compatible entry
 - **Type ramp, motion & contrast roles:** `tokens/typography.css` and `tokens/motion.css` ship semantic role aliases (`--cs-text-h1`…) and `.cs-h1` / `.cs-body` utilities in `base/typography.css`. Semantic statuses expose separate fill, paired foreground (`-fg`), and surface-text (`-text`) roles. `--cs-accent-on-strong` is the paired foreground for strong callout fills (APCA ≥ 75 body text and WCAG ≥ 4.5 in both modes; generator targets 78, verified by `test:strong-text-contrast`).
 - **UI kits & reference catalog:** UI kits are cosmetic HTML-first recreations with fictional data. Declared counts and public document roles are generated in [the reference catalog](docs/reference-catalog.json).
 - **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.
-- **Verification workbench, render-health sweep & non-regression gate:** `audit/v2.5.0-verification.html` scores 69 checks across 10 dimensions (`D1`–`D7` remediation + `D8`–`D10` Doctrine Immutables) at **10.0 / 10** and embeds the 64-check baseline suite (**64/64** on current, **62/64** on v2.4.0, **8/64** on v2.3.1); `audit/render-health.html` sweeps all **146** templates, cards, and UI kits with **0 bad** as authored, under `theme=dark`, and under `theme=dark` + `contrast=high` on `set=cards`, with machine-readable evidence recorded in `audit/v2.5.0-verification.json` and enforced by `npm run test:audit-regression` (`_audit/ci/verify-audit-benchmarks-browser.mjs`). 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` with `0 watch` items).
+- **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`).
 
 <!-- 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).

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.6.x** | Security triage and fixes target this line. |
+| Latest published stable minor, currently **2.7.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.6.0**, observed at
-`2026-11-09T17:39:34.494Z` from the official npm registry. Snapshot SHA-256:
-`d2f16b8609928ff2ad8346a60129c34140c1ccf3d83412cfa5d2f2a4eb662d9a`. This is a recorded publication identity, not a live registry query.
+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.
 Refresh the snapshot and this generated block after a separately authorized
 publication; a local VERSION change does not establish publication or support.
 

package/THIRD-PARTY-NOTICES.md

@@ -36,7 +36,7 @@ offline/no-build consumers and does not fetch code or parse into a live DOM.
 
 | Asset | Notes |
 |---|---|
-| `templates/_vendor/doc-export.js` | Retained document-export runtime with unverified historical origin. Current local logo/export changes have an exact byte and focused regression record in `_audit/remediation/retained-exporter-review.json`; this does not establish upstream provenance, rights or distribution approval. |
+| `templates/_vendor/doc-export.js` | Retained document-export runtime with unverified historical origin. Current local logo/export changes are verified by `_audit/ci/test-doc-export.mjs` and `_audit/ci/test-doc-export-readiness-browser.mjs`; this does not establish upstream provenance, rights or distribution approval. |
 | `templates/_vendor/deck-stage.js` | Authored replacement candidate generated from `scripts/template-runtime/primitives/deck-stage.js`. The previous omelette scaffold is preserved in historical audit evidence; its original source remains unavailable. Current source/output binding and distribution review are separate. |
 | `image-slot.js` | Authored replacement candidate generated from `scripts/template-runtime/primitives/image-slot.js`; the historical copied starter is not an authenticated source for this replacement. Browser fixtures exercise the documented host write boundary, not actual host filesystem acceptance. Distribution review remains pending. |
 | `templates/_vendor/support.js` and its template-local copies | Authored replacement candidate generated from `scripts/template-runtime/primitives/support.js`; every registered copy is byte-checked. The original `dc-runtime/src/*.ts` source remains unavailable. The pending record establishes local reproducibility, not reconstruction or rights approval. |

package/VERSION

@@ -1 +1 @@
-2.7.0
+2.8.0