@cyberskill/design 2.5.0 → 2.7.0

package/guidelines/motion-interaction.html

@@ -2,7 +2,7 @@
 <!DOCTYPE html>
 <html lang="en"><head><meta name="description" content="Interaction states: Warm hover lift · composite focus indicator · staggered entrance; reduced motion shortens transitions" />
 <meta charset="utf-8">
-<link rel="stylesheet" href="../styles.css">
+<link rel="stylesheet" href="../dist/styles.css">
 <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);display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
 .lbl{font-size:10px;text-transform:uppercase;letter-spacing:0.08em;color:var(--cs-color-text-muted);font-weight:700;margin-bottom:10px}

package/guidelines/motion.html

@@ -2,7 +2,7 @@
 <!DOCTYPE html>
 <html lang="en"><head><meta name="description" content="Motion: Calm, short, decelerated — live easings, reduced-motion honoured" />
 <meta charset="utf-8" />
-<link rel="stylesheet" href="../styles.css" />
+<link rel="stylesheet" href="../dist/styles.css" />
 <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}

package/guidelines/responsive-bilingual.html

@@ -2,7 +2,7 @@
 <!DOCTYPE html>
 <html lang="en"><head><meta name="description" content="Adaptation rules: Reflow across device widths · complete language separation" />
 <meta charset="utf-8" />
-<link rel="stylesheet" href="../styles.css" />
+<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))}

package/guidelines/rtl-preview.html

@@ -3,7 +3,7 @@
 <head>
 <meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>CyberSkill · RTL preview</title>
-<link rel="stylesheet" href="../styles.css" />
+<link rel="stylesheet" href="../dist/styles.css" />
 <style>
   body{margin:0;font-family:var(--cs-font-family-ui);background:var(--cs-color-surface-page);color:var(--cs-color-text-primary);padding:28px}
   .wrap{max-width:720px;margin:0 auto;display:grid;gap:18px}

package/guidelines/spacing-breakpoints.html

@@ -2,7 +2,7 @@
 <!DOCTYPE html>
 <html lang="en"><head><meta name="description" content="Breakpoints: Mobile-first · phone → 2xl" />
 <meta charset="utf-8" />
-<link rel="stylesheet" href="../styles.css" />
+<link rel="stylesheet" href="../dist/styles.css" />
 <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); }
   .row { display: flex; gap: 8px; }

package/guidelines/spacing-radius.html

@@ -2,7 +2,7 @@
 <!DOCTYPE html>
 <html lang="en"><head><meta name="description" content="Radius: sm 4 · md 8 · lg 14 · full" />
 <meta charset="utf-8" />
-<link rel="stylesheet" href="../styles.css" />
+<link rel="stylesheet" href="../dist/styles.css" />
 <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); }
   .row { display: flex; gap: 18px; align-items: flex-end; }

package/guidelines/spacing-scale.html

@@ -2,7 +2,7 @@
 <!DOCTYPE html>
 <html lang="en"><head><meta name="description" content="Spacing scale: 4px base grid · 0–96" />
 <meta charset="utf-8" />
-<link rel="stylesheet" href="../styles.css" />
+<link rel="stylesheet" href="../dist/styles.css" />
 <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); }
   .r { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }

package/guidelines/surfaces-aurora.html

@@ -2,7 +2,7 @@
 <!DOCTYPE html>
 <html lang="en"><head><meta name="description" content="Aurora wash: Signature warm-gold hero background (.cs-aurora)" />
 <meta charset="utf-8" />
-<link rel="stylesheet" href="../styles.css" />
+<link rel="stylesheet" href="../dist/styles.css" />
 <style>
   body { margin: 0; font-family: var(--cs-font-family-ui); }
   .stage { min-height: 200px; padding: 32px 34px; display: flex; flex-direction: column; justify-content: center; }

package/guidelines/surfaces-depth.html

@@ -2,7 +2,7 @@
 <!DOCTYPE html>
 <html lang="en"><head><meta name="description" content="Depth / z-index: bg → toast · glass tier per layer" />
 <meta charset="utf-8" />
-<link rel="stylesheet" href="../styles.css" />
+<link rel="stylesheet" href="../dist/styles.css" />
 <style>
   body { margin: 0; background: var(--cs-color-surface-page); padding: 24px; font-family: var(--cs-font-family-ui); color: var(--cs-color-text-primary); }
   .stack { position: relative; height: 150px; }

package/guidelines/surfaces-glass.html

@@ -2,7 +2,7 @@
 <!DOCTYPE html>
 <html lang="en"><head><meta name="description" content="Liquid Glass materials: Whisper · Light · Standard · Heavy · Solid" />
 <meta charset="utf-8" />
-<link rel="stylesheet" href="../styles.css" />
+<link rel="stylesheet" href="../dist/styles.css" />
 <style>
   body { margin: 0; padding: 0; font-family: var(--cs-font-family-ui); }
   .stage { position: relative; min-height: 230px; background-image: url("../assets/aurora-tho.webp"); background-size: cover; background-position: center; padding: 22px 24px; display: flex; gap: 14px; align-items: center; }

package/guidelines/surfaces-shadow.html

@@ -2,7 +2,7 @@
 <!DOCTYPE html>
 <html lang="en"><head><meta name="description" content="Shadows: Warm, umber-tinted elevation" />
 <meta charset="utf-8" />
-<link rel="stylesheet" href="../styles.css" />
+<link rel="stylesheet" href="../dist/styles.css" />
 <style>
   body { margin: 0; background: var(--cs-color-surface-page); padding: 26px 24px; font-family: var(--cs-font-family-ui); color: var(--cs-color-text-primary); }
   .row { display: flex; gap: 22px; align-items: center; }

package/guidelines/type-families.html

@@ -2,7 +2,7 @@
 <!DOCTYPE html>
 <html lang="en"><head><meta name="description" content="Typefaces: Be Vietnam Pro (UI) · Space Grotesk (display) · JetBrains Mono (code)" />
 <meta charset="utf-8" />
-<link rel="stylesheet" href="../styles.css" />
+<link rel="stylesheet" href="../dist/styles.css" />
 <style>
   body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; color: var(--cs-color-text-primary); }
   .fam { margin-bottom: 18px; }

package/guidelines/type-lineheight.html

@@ -2,7 +2,7 @@
 <!DOCTYPE html>
 <html lang="en"><head><meta name="description" content="Line-height — Vietnamese-safe: body 1.5 · heading 1.35 (room for diacritics)" />
 <meta charset="utf-8" />
-<link rel="stylesheet" href="../styles.css" />
+<link rel="stylesheet" href="../dist/styles.css" />
 <style>
   body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; color: var(--cs-color-text-primary); font-family: var(--cs-font-family-ui); }
   .k { font: 600 11px/1 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .09em; color: var(--cs-color-text-muted); margin-bottom: 4px; }

package/guidelines/type-scale.html

@@ -2,7 +2,7 @@
 <!DOCTYPE html>
 <html lang="en"><head><meta name="description" content="Type scale: xs → 5xl, 16px base" />
 <meta charset="utf-8" />
-<link rel="stylesheet" href="../styles.css" />
+<link rel="stylesheet" href="../dist/styles.css" />
 <style>
   body { margin: 0; background: var(--cs-color-surface-page); padding: 20px 24px; color: var(--cs-color-text-primary); font-family: var(--cs-font-family-ui); }
   .r { display: flex; align-items: baseline; gap: 16px; padding: 3px 0; }

package/guidelines/type-weights.html

@@ -2,7 +2,7 @@
 <!DOCTYPE html>
 <html lang="en"><head><meta name="description" content="Weights: Regular → Extrabold" />
 <meta charset="utf-8" />
-<link rel="stylesheet" href="../styles.css" />
+<link rel="stylesheet" href="../dist/styles.css" />
 <style>
   body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; color: var(--cs-color-text-primary); font-family: var(--cs-font-family-ui); }
   .grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyberskill/design",
-  "version": "2.5.0",
+  "version": "2.7.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -36,6 +36,7 @@
     "./tokens/*": "./tokens/*",
     "./_ds_bundle.js": "./_ds_bundle.js",
     "./_ds_manifest.json": "./_ds_manifest.json",
+    "./dist/styles.css": "./dist/styles.css",
     "./styles.min.css": "./dist/styles.min.css",
     "./base/*": "./base/*",
     "./assets/*": "./assets/*",
@@ -86,6 +87,7 @@
     "_vendor/",
     "DESIGN.md",
     "VERSION",
+    "dist/styles.css",
     "dist/styles.min.css",
     "THIRD-PARTY-NOTICES.md",
     "schemas/",
@@ -123,7 +125,7 @@
     "build:bundle": "node scripts/build-bundle.mjs",
     "build:react-entry": "node scripts/generate-react-entry.mjs",
     "build:design-md": "node scripts/generate-design-md.mjs",
-    "prepublishOnly": "node scripts/generate-template-shared-layouts.mjs --check && node scripts/generate-template-display-fields.mjs --check && node scripts/generate-template-archetypes.mjs --check && node scripts/generate-template-native-paper-fields.mjs --check && node scripts/generate-template-content-models.mjs --check && node scripts/generate-template-static-logos.mjs --check && node scripts/generate-compact-api.mjs --check && node scripts/generate-security-support.mjs --check && node scripts/generate-story-domains.mjs --check && node scripts/generate-guidance.mjs --check && node scripts/generate-component-inventory.mjs --check && node scripts/generate-unit-shard-plan.mjs --check && node scripts/build-template-primitives.mjs --check && node scripts/generate-base-token-exports.mjs --check && node _audit/ci/generate-native-tokens.mjs --check && node scripts/generate-editor-parser.mjs --check && node _audit/ci/check-bundle-freshness.mjs && node scripts/generate-export-catalog.mjs --check && node scripts/generate-react-entry.mjs --check && node scripts/generate-api-index.mjs --check && node scripts/flatten-styles.mjs --check && node scripts/generate-design-md.mjs --check && node scripts/generate-contrast-report.mjs --check && node scripts/generate-component-contracts.mjs --check && node scripts/generate-template-inventory.mjs --check && node scripts/generate-token-modes.mjs --check && node scripts/generate-static-html-reference.mjs --check && node scripts/build-compiled-esm.mjs --check && node scripts/generate-token-css-entry.mjs --check && node scripts/generate-template-literals.mjs --check && node scripts/generate-prompt-api.mjs --check && node scripts/generate-component-specifications.mjs --check && npm run test:atomic-stories && npm run test:expansion-coverage && node scripts/generate-native-mode-packs.mjs --check && node scripts/generate-layered-styles.mjs --check && node scripts/generate-component-css-entries.mjs --check && node scripts/generate-guideline-languages.mjs --check && node scripts/check-guideline-hex-policy.mjs && node scripts/generate-component-scenarios.mjs --check && node scripts/generate-component-scenario-stories.mjs --check && node scripts/generate-prompt-languages.mjs --check && node scripts/generate-entrypoint-languages.mjs --check",
+    "prepublishOnly": "node scripts/generate-template-shared-layouts.mjs --check && node scripts/generate-template-display-fields.mjs --check && node scripts/generate-template-archetypes.mjs --check && node scripts/generate-template-native-paper-fields.mjs --check && node scripts/generate-template-content-models.mjs --check && node scripts/generate-template-static-logos.mjs --check && node scripts/generate-compact-api.mjs --check && node scripts/generate-security-support.mjs --check && node scripts/generate-story-domains.mjs --check && node scripts/generate-guidance.mjs --check && node scripts/generate-component-inventory.mjs --check && node scripts/generate-unit-shard-plan.mjs --check && node scripts/build-template-primitives.mjs --check && node scripts/generate-base-token-exports.mjs --check && node _audit/ci/generate-native-tokens.mjs --check && node scripts/generate-editor-parser.mjs --check && node _audit/ci/check-bundle-freshness.mjs && node scripts/generate-export-catalog.mjs --check && node scripts/generate-react-entry.mjs --check && node scripts/generate-api-index.mjs --check && node scripts/flatten-css.mjs --check && node scripts/flatten-styles.mjs --check && node scripts/generate-design-md.mjs --check && node scripts/generate-contrast-report.mjs --check && node scripts/generate-component-contracts.mjs --check && node scripts/generate-template-inventory.mjs --check && node scripts/generate-token-modes.mjs --check && node scripts/generate-static-html-reference.mjs --check && node scripts/build-compiled-esm.mjs --check && node scripts/generate-token-css-entry.mjs --check && node scripts/generate-template-literals.mjs --check && node scripts/generate-prompt-api.mjs --check && node scripts/generate-component-specifications.mjs --check && npm run test:atomic-stories && npm run test:expansion-coverage && node scripts/generate-native-mode-packs.mjs --check && node scripts/generate-layered-styles.mjs --check && node scripts/generate-component-css-entries.mjs --check && node scripts/generate-guideline-languages.mjs --check && node scripts/check-guideline-hex-policy.mjs && node scripts/generate-component-scenarios.mjs --check && node scripts/generate-component-scenario-stories.mjs --check && node scripts/generate-prompt-languages.mjs --check && node scripts/generate-entrypoint-languages.mjs --check && node _audit/ci/verify-audit-benchmarks-browser.mjs",
     "native:store-dry-run": "node _audit/ci/native-store-dry-run.mjs --dry-run",
     "storybook": "storybook dev -p 6006 --host 127.0.0.1",
     "build:storybook": "node scripts/build-storybook.mjs",
@@ -156,6 +158,7 @@
     "test:pack-hygiene": "node _audit/ci/test-pack-hygiene.mjs",
     "tokens:elements": "node scripts/generate-element-packs.mjs && node scripts/generate-theme-exports.mjs",
     "tokens:contrast": "node scripts/generate-contrast-report.mjs",
+    "build:css": "node scripts/flatten-css.mjs",
     "build:styles": "node scripts/flatten-styles.mjs",
     "sbom": "node scripts/generate-sbom.mjs",
     "test:docs-lang-parity": "node _audit/ci/test-docs-lang-parity.mjs",
@@ -174,7 +177,7 @@
     "test:theme-composition": "node _audit/ci/test-theme-composition-browser.mjs",
     "tokens:theme": "node scripts/generate-theme-exports.mjs",
     "test:density-exports": "node scripts/generate-theme-exports.mjs --check && node _audit/ci/test-density-export-generator.mjs && node _audit/ci/test-density-exports.mjs",
-    "tokens:generate": "npm run tokens:palettes && npm run tokens:elements && npm run tokens:base && npm run tokens:dtcg && npm run tokens:declarations && npm run tokens:coverage && node _audit/ci/generate-native-tokens.mjs && npm run native:sync-tokens && npm run build:exports && npm run build:styles && npm run build:styles-layered && npm run tokens:contrast && npm run tokens:modes && npm run build:native-modes && npm run native:sync-tokens && npm run build:token-css",
+    "tokens:generate": "npm run tokens:palettes && npm run tokens:elements && npm run tokens:base && npm run tokens:dtcg && npm run tokens:declarations && npm run tokens:coverage && node _audit/ci/generate-native-tokens.mjs && npm run native:sync-tokens && npm run build:exports && npm run build:css && npm run build:styles && npm run build:styles-layered && npm run tokens:contrast && npm run tokens:modes && npm run build:native-modes && npm run native:sync-tokens && npm run build:token-css",
     "test:dtcg-profile": "node scripts/generate-dtcg.mjs --check && node _audit/ci/test-dtcg-profile.mjs && node _audit/ci/test-dtcg-roundtrip.mjs && node _audit/ci/test-style-dictionary-adapter.mjs",
     "tokens:validate:dtcg": "node _audit/ci/check-dtcg-profile.mjs",
     "tokens:dtcg": "node scripts/generate-dtcg.mjs",
@@ -581,7 +584,12 @@
     "generate:prompt-languages": "node scripts/generate-prompt-languages.mjs",
     "generate:entrypoint-languages": "node scripts/generate-entrypoint-languages.mjs",
     "build:component-css-index": "node scripts/generate-css-index.mjs",
-    "test:release-documentation": "node _audit/ci/lib/run-browsers.mjs _audit/ci/test-release-documentation-browser.mjs"
+    "test:release-documentation": "node _audit/ci/lib/run-browsers.mjs _audit/ci/test-release-documentation-browser.mjs",
+    "test:audit-regression": "node _audit/ci/verify-audit-benchmarks-browser.mjs",
+    "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"
   },
   "devDependencies": {
     "@babel/parser": "7.29.7",