@cyberskill/design 2.7.0 → 2.9.0

package/guidelines/motion.html

@@ -6,9 +6,9 @@
 <style>
   body{margin:0;background:var(--cs-color-surface-page);padding:22px 24px;font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary)}
   .wrap{max-width:600px}
-  h3{margin:0 0 2px;font-size:13px;font-weight:800;color:var(--_cs-light,var(--cs-color-brand-umber)) var(--_cs-dark,var(--cs-color-brand-ochre))}
+  h3{margin:0 0 2px;font-size:13px;font-weight:800;color:var(--_cs-light,var(--cs-color-brand-umber))var(--_cs-dark,var(--cs-color-text-accent))}
   .cap{font-size:12px;color:var(--cs-color-text-primary);opacity:.75;margin:0 0 14px}
-  .track{display:grid;grid-template-columns:104px 1fr;align-items:center;gap:12px;margin-bottom:9px}
+  .track{display:grid;grid-template-columns:minmax(196px,auto) 1fr;align-items:center;gap:12px;margin-bottom:9px}
   .lbl{font-size:12.5px}.lbl b{font-weight:700}.lbl .v{display:block;font-family:var(--cs-font-family-mono);font-size:12px;color:var(--cs-color-text-muted)}
   .rail{position:relative;height:18px;background:var(--cs-color-surface-raised);border-radius:999px;border:1px solid var(--cs-color-border-default);container-type:inline-size}
   .dot{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--cs-color-brand-ochre);box-shadow:0 1px 3px rgba(69,33,14,.3);will-change:transform}
@@ -19,9 +19,9 @@
   .d2{animation:run 1.3s var(--cs-ease-entrance) infinite alternate}
   .d3{animation:run 1.3s var(--cs-ease-exit) infinite alternate}
   .durrow{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
-  .chip{font-family:var(--cs-font-family-ui);font-size:12px;color:var(--_cs-light,var(--cs-color-brand-umber)) var(--_cs-dark,var(--cs-color-brand-ochre));background:var(--cs-color-surface-raised);border:1px solid var(--cs-color-border-default);border-radius:999px;padding:5px 12px;position:relative;overflow:hidden}
+  .chip{font-family:var(--cs-font-family-ui);font-size:12px;color:var(--_cs-light,var(--cs-color-brand-umber))var(--_cs-dark,var(--cs-color-text-accent));background:var(--cs-color-surface-raised);border:1px solid var(--cs-color-border-default);border-radius:999px;padding:5px 12px;position:relative;overflow:hidden}
   .chip span{position:relative;z-index:1}
-  .chip i{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--_cs-light,var(--cs-accent-tint)) var(--_cs-dark,color-mix(in oklab,var(--cs-accent) 24%,var(--cs-color-surface-raised)));transform-origin:left;z-index:0}
+  .chip i{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--_cs-light,var(--cs-accent-tint))var(--_cs-dark,color-mix(in oklab,var(--cs-accent) 24%,var(--cs-color-surface-raised)));transform-origin:left;z-index:0}
   @keyframes fill{0%,8%{transform:scaleX(0)}50%{transform:scaleX(1)}92%,100%{transform:scaleX(1);opacity:0}}
   .c1 i{animation:fill 2s var(--cs-ease-standard) infinite}
   .c2 i{animation:fill 2s var(--cs-ease-standard) infinite;animation-delay:.15s}

package/guidelines/responsive-bilingual.html

@@ -5,7 +5,7 @@
 <link rel="stylesheet" href="../dist/styles.css" />
 <style>
   body{margin:0;background:var(--cs-color-surface-page);padding:26px 28px;font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary)}
-  h2{margin:0 0 3px;font-size:13px;font-weight:800;letter-spacing:-.01em;color:var(--_cs-light,var(--cs-color-brand-umber)) var(--_cs-dark,var(--cs-color-brand-ochre))}
+  h2{margin:0 0 3px;font-size:13px;font-weight:800;letter-spacing:-.01em;color:var(--_cs-light,var(--cs-color-brand-umber))var(--_cs-dark,var(--cs-color-text-accent))}
   .eyebrow{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.11em;color:var(--cs-color-text-accent);margin-bottom:3px}
   .grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
   .panel{border:1px solid var(--cs-color-border-default);border-radius:var(--cs-radius-lg);background:var(--cs-color-surface-panel);color:var(--cs-color-text-primary);padding:16px 18px}
@@ -23,7 +23,7 @@
   .dw{font-size:10.5px;font-weight:700}
   ul{margin:0;padding-left:15px}
   li{font-size:11px;line-height:1.62;color:var(--cs-color-text-primary);margin-bottom:3px}
-  li b{color:var(--_cs-light,var(--cs-color-brand-umber)) var(--_cs-dark,var(--cs-color-brand-ochre))}
+  li b{color:var(--_cs-light,var(--cs-color-brand-umber))var(--_cs-dark,var(--cs-color-text-accent))}
   code{font-family:var(--cs-font-family-mono);font-size:10px;background:var(--cs-color-surface-raised);border:1px solid var(--cs-color-border-default);border-radius:3px;padding:0 3px}
   /* bilingual */
   .toggle{display:inline-flex;border:1px solid var(--cs-color-border-default);border-radius:999px;overflow:hidden;margin-bottom:12px}
@@ -37,8 +37,8 @@
   .bad{border-left:3px solid var(--cs-color-semantic-danger)}
   .good{border-left:3px solid var(--cs-color-semantic-success)}
   .note{font-size:10.5px;line-height:1.55;color:var(--cs-color-text-muted);margin-top:11px;border-top:1px dashed var(--cs-color-border-default);padding-top:9px}
-  .note b{color:var(--_cs-light,var(--cs-color-brand-umber)) var(--_cs-dark,var(--cs-color-brand-ochre))}
-  .keep{display:inline-block;background:var(--_cs-light,var(--cs-accent-tint)) var(--_cs-dark,color-mix(in oklab,var(--cs-accent) 22%,var(--cs-color-surface-panel)));border-radius:4px;padding:1px 5px;font-size:10px;font-weight:600;color:var(--_cs-light,var(--cs-color-text-accent)) var(--_cs-dark,var(--cs-accent-bright));margin:2px 4px 0 0}
+  .note b{color:var(--_cs-light,var(--cs-color-brand-umber))var(--_cs-dark,var(--cs-color-text-accent))}
+  .keep{display:inline-block;background:var(--_cs-light,var(--cs-accent-tint))var(--_cs-dark,color-mix(in oklab,var(--cs-accent) 22%,var(--cs-color-surface-panel)));border-radius:4px;padding:1px 5px;font-size:10px;font-weight:600;color:var(--cs-color-text-accent);margin:2px 4px 0 0}
 </style><!-- @generated guideline-language:loader -->
 <script src="./guideline-language.js"></script>
 <!-- @endgenerated guideline-language:loader -->

package/llms.txt

@@ -66,7 +66,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyberskill/design",
-  "version": "2.7.0",
+  "version": "2.9.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -589,22 +589,23 @@
     "build:state-inventory": "node scripts/generate-state-inventory.mjs",
     "test:state-inventory": "node _audit/ci/test-state-inventory.mjs",
     "test:inline-edit-transitions": "node _audit/ci/lib/run-browsers.mjs _audit/ci/test-inline-edit-transitions-browser.mjs",
-    "test:picker-focus-ime": "node _audit/ci/lib/run-browsers.mjs _audit/ci/test-picker-focus-ime-browser.mjs"
+    "test:picker-focus-ime": "node _audit/ci/lib/run-browsers.mjs _audit/ci/test-picker-focus-ime-browser.mjs",
+    "test:state-machine-async-overlays": "node _audit/ci/lib/run-browsers.mjs _audit/ci/test-state-machine-async-overlays-browser.mjs"
   },
   "devDependencies": {
-    "@babel/parser": "7.29.7",
+    "@babel/parser": "8.1.0",
     "@csstools/css-syntax-patches-for-csstree": "1.1.16",
     "@jridgewell/trace-mapping": "0.3.31",
-    "@storybook/addon-a11y": "10.6.5",
-    "@storybook/addon-docs": "10.6.5",
-    "@storybook/react": "10.6.5",
-    "@storybook/react-vite": "10.6.5",
+    "@storybook/addon-a11y": "10.6.6",
+    "@storybook/addon-docs": "10.6.6",
+    "@storybook/react": "10.6.6",
+    "@storybook/react-vite": "10.6.6",
     "@types/react": "19.3.0",
     "@types/react18": "npm:@types/react@18.3.31",
     "@vitejs/plugin-react": "6.2.1",
     "ajv": "8.20.0",
     "browserslist": "4.29.5",
-    "caniuse-lite": "1.0.30001820",
+    "caniuse-lite": "1.0.30001823",
     "css-tree": "3.2.1",
     "esbuild": "0.28.2",
     "magic-string": "1.4.5",
@@ -614,10 +615,10 @@
     "postcss-value-parser": "4.2.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "storybook": "10.6.5",
+    "storybook": "10.6.6",
     "typescript": "7.0.2",
     "typescript-api": "npm:@typescript/typescript6@6.0.2",
-    "vite": "8.3.5",
+    "vite": "8.3.6",
     "yaml": "2.9.1"
   },
   "engines": {