@cyberskill/design 2.5.0 → 2.7.0

package/_ds_manifest.json

@@ -5931,102 +5931,6 @@
       "important": false,
       "declarationOrder": 1073,
       "sourceLine": 22
-    },
-    {
-      "name": "--cs-color-border-default",
-      "value": "#9a8060",
-      "kind": "color",
-      "definedIn": "base/a11y.css",
-      "scope": "[data-theme=\"light\"]:where(:not([data-cs-contrast=\"standard\"], [data-cs-contrast=\"standard\"] *)),\n  [data-theme=\"system\"]:where(:not([data-cs-contrast=\"standard\"], [data-cs-contrast=\"standard\"] *)),\n  :root:where(:not([data-cs-contrast=\"standard\"]))",
-      "conditions": [
-        {
-          "name": "media",
-          "params": "(prefers-contrast: more)"
-        }
-      ],
-      "important": false,
-      "declarationOrder": 1074,
-      "sourceLine": 144
-    },
-    {
-      "name": "--cs-color-text-muted",
-      "value": "#45210e",
-      "kind": "color",
-      "definedIn": "base/a11y.css",
-      "scope": "[data-theme=\"light\"]:where(:not([data-cs-contrast=\"standard\"], [data-cs-contrast=\"standard\"] *)),\n  [data-theme=\"system\"]:where(:not([data-cs-contrast=\"standard\"], [data-cs-contrast=\"standard\"] *)),\n  :root:where(:not([data-cs-contrast=\"standard\"]))",
-      "conditions": [
-        {
-          "name": "media",
-          "params": "(prefers-contrast: more)"
-        }
-      ],
-      "important": false,
-      "declarationOrder": 1075,
-      "sourceLine": 144
-    },
-    {
-      "name": "--cs-color-border-default",
-      "value": "#7a6450",
-      "kind": "color",
-      "definedIn": "base/a11y.css",
-      "scope": "[data-theme=\"dark\"]:where(:not([data-cs-contrast=\"standard\"], [data-cs-contrast=\"standard\"] *))",
-      "conditions": [
-        {
-          "name": "media",
-          "params": "(prefers-contrast: more)"
-        }
-      ],
-      "important": false,
-      "declarationOrder": 1076,
-      "sourceLine": 145
-    },
-    {
-      "name": "--cs-color-text-muted",
-      "value": "#f5ead9",
-      "kind": "color",
-      "definedIn": "base/a11y.css",
-      "scope": "[data-theme=\"dark\"]:where(:not([data-cs-contrast=\"standard\"], [data-cs-contrast=\"standard\"] *))",
-      "conditions": [
-        {
-          "name": "media",
-          "params": "(prefers-contrast: more)"
-        }
-      ],
-      "important": false,
-      "declarationOrder": 1077,
-      "sourceLine": 145
-    },
-    {
-      "name": "--cs-color-border-default",
-      "value": "#7a6450",
-      "kind": "color",
-      "definedIn": "base/a11y.css",
-      "scope": "[data-theme=\"system\"]:where(:not([data-cs-contrast=\"standard\"], [data-cs-contrast=\"standard\"] *))",
-      "conditions": [
-        {
-          "name": "media",
-          "params": "(prefers-color-scheme: dark) and (prefers-contrast: more)"
-        }
-      ],
-      "important": false,
-      "declarationOrder": 1078,
-      "sourceLine": 150
-    },
-    {
-      "name": "--cs-color-text-muted",
-      "value": "#f5ead9",
-      "kind": "color",
-      "definedIn": "base/a11y.css",
-      "scope": "[data-theme=\"system\"]:where(:not([data-cs-contrast=\"standard\"], [data-cs-contrast=\"standard\"] *))",
-      "conditions": [
-        {
-          "name": "media",
-          "params": "(prefers-color-scheme: dark) and (prefers-contrast: more)"
-        }
-      ],
-      "important": false,
-      "declarationOrder": 1079,
-      "sourceLine": 150
     }
   ],
   "themes": [

package/_esm/cs.mjs

@@ -1,4 +1,4 @@
-// CyberSkill Design System — ESM entry point (GENERATED by scripts/generate-export-catalog.mjs at v2.5.0).
+// CyberSkill Design System — ESM entry point (GENERATED by scripts/generate-export-catalog.mjs at v2.7.0).
 // No build step: import this module directly in a browser. It loads the pinned umd-react@19.2.8
 // distribution; its retained React and ReactDOM files report runtime version 19.2.4.
 // (official React 19 dropped UMD; pinned + SRI; skipped when window.React already exists), side-loads
@@ -33,7 +33,7 @@ if (!found()) await ensureScript("../_ds_bundle.js");
 export const CS = g[found()];
 if (!CS) throw new Error("cs.js: bundle loaded but no CyberSkillDesignSystem_* namespace found");
 export default CS;
-export const VERSION = "2.5.0";
+export const VERSION = "2.7.0";
 export const AIDisclosureBadge = CS.AIDisclosureBadge;
 export const Accordion = CS.Accordion;
 export const Alert = CS.Alert;

package/base/a11y.css

@@ -138,17 +138,12 @@
  * warm hairline border and muted text (both are intentionally soft by default).
  * Only activates on user request; anchors (Umber/Ochre) and focus rings are
  * already high-contrast and untouched. ---- */
-@media (prefers-contrast: more) {
-  [data-theme="light"]:where(:not([data-cs-contrast="standard"], [data-cs-contrast="standard"] *)),
-  [data-theme="system"]:where(:not([data-cs-contrast="standard"], [data-cs-contrast="standard"] *)),
-  :root:where(:not([data-cs-contrast="standard"])) { --cs-color-border-default: #9a8060; --cs-color-text-muted: #45210e; }
-  [data-theme="dark"]:where(:not([data-cs-contrast="standard"], [data-cs-contrast="standard"] *)) { --cs-color-border-default: #7a6450; --cs-color-text-muted: #f5ead9; }
-}
-
-/* System dark gets stronger contrast only when the user requests it, just like explicit dark. */
-@media (prefers-color-scheme: dark) and (prefers-contrast: more) {
-  [data-theme="system"]:where(:not([data-cs-contrast="standard"], [data-cs-contrast="standard"] *)) { --cs-color-border-default: #7a6450; --cs-color-text-muted: #f5ead9; }
-}
+/* The values live in tokens/elements.css: the scope resolver derives
+ * --cs-color-border-default / --cs-color-text-muted from the --_cs-standard /
+ * --_cs-high channel toggles, which flip to high under prefers-contrast: more
+ * (light #9a8060 / #45210e · dark #7a6450 / #f5ead9) unless a scope sets
+ * data-cs-contrast explicitly. The former contextual overrides here were
+ * already superseded by that resolver's higher specificity. */
 
 /* Forced colors removes authored backgrounds and shadows. State must survive
  * that substitution using real borders, system colors and knob position. */

package/components/ai/ai-conversation.card.html

@@ -6,7 +6,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>CyberSkill — AI-native — conversation</title>
 <meta name="description" content="AI-native — conversation: PromptInput, ChatMessage (Lumi), ConfidenceMeter" />
-<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; }
   .grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; max-width: 660px; align-items: start; }

package/components/ai/ai-lumi.card.html

@@ -5,7 +5,7 @@
 <title>CyberSkill — AI-native — Lumi conversation</title>
 <meta name="description" content="AI-native — Lumi conversation: PromptSuggestions, TypingIndicator, CitationList" />
 <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; }
   .lbl { font: 600 11px/1 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .09em; color: var(--cs-color-text-muted); margin-bottom: 10px; }

package/components/ai/ai.card.html

@@ -6,7 +6,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>CyberSkill — AI-native — Disclosure & Review Gate</title>
 <meta name="description" content="AI-native — Disclosure & Review Gate: Explainable AI badge + human-in-the-loop approval" />
-<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; }
   .stack { display: grid; gap: 18px; max-width: 560px; }

package/components/api-discovery.json

@@ -3,7 +3,7 @@
   "interpretation": "Discovery projection: every public export and authored prop definition, with inherited prop counts. Inherited native props, full signatures, support evidence/history and compiler metadata remain in components/api-index.json. Declarations remain authoritative; this projection does not establish runtime, semantic or human acceptance.",
   "completeIndex": {
     "path": "components/api-index.json",
-    "sha256": "468afbb6e09f78a1be6fe2b2b06bbd6ea30f4fa06abb835c191eb6490082854a"
+    "sha256": "cdca2a8f225147e27ca8b385023ffe6ba5628b614720cd658c94f5c833f53336"
   },
   "exports": [
     {
@@ -659,7 +659,7 @@
       "sourcePath": "components/forms/Cascader.jsx",
       "declarationPath": "components/forms/Cascader.d.ts",
       "promptPath": "components/forms/Cascader.prompt.md",
-      "sourceSha256": "60217f041dd78ad4809a787920c0f0d56a6a383ae125ad2e691757b2af22abbf",
+      "sourceSha256": "09380cc01ef61a3cc0fb0d4f065345f4e31a6cd197cd4a9d837ffdc144b22bde",
       "declarationSha256": "33edbc198353ed41f05867be9e1c04830d5033cf2cf4ceda3e1ba13adef27aea",
       "declaredLifecycle": "stable",
       "supportReviewState": "reviewed",
@@ -981,7 +981,7 @@
       "sourcePath": "components/forms/ColorPicker.jsx",
       "declarationPath": "components/forms/ColorPicker.d.ts",
       "promptPath": "components/forms/ColorPicker.prompt.md",
-      "sourceSha256": "64da95eccfc3637b640edcb4271ae914a81f4e05cf7b528467ab5850a651ed4f",
+      "sourceSha256": "90d7990c0e97ca31592bb7a48153d85944016b4424c0ac58837c8295c33d8695",
       "declarationSha256": "a0a3d9c005fc6f8ddc4fdc85f132aedfcb10dee745ae1706eb6b924814531e2d",
       "declaredLifecycle": "stable",
       "supportReviewState": "reviewed",
@@ -2380,7 +2380,7 @@
       "sourcePath": "components/forms/InlineEdit.jsx",
       "declarationPath": "components/forms/InlineEdit.d.ts",
       "promptPath": "components/forms/InlineEdit.prompt.md",
-      "sourceSha256": "45b36df70b179243e329684ce20f61ed8dd4fda75e11674d24797713c644d4f8",
+      "sourceSha256": "9f242ef99af077e5c9b68d36cc9539fac0819e66f7995fa6a93ecb7793bf3484",
       "declarationSha256": "9fdf8c29720cd8d015ea42edfb4ee39ce74964feaafd43b044183ca5ef504b1c",
       "declaredLifecycle": "stable",
       "supportReviewState": "reviewed",
@@ -3742,7 +3742,7 @@
       "sourcePath": "components/forms/SearchField.jsx",
       "declarationPath": "components/forms/SearchField.d.ts",
       "promptPath": "components/forms/SearchField.prompt.md",
-      "sourceSha256": "44a861064011a4ebf8cd1224d95b0404c44e4cb8a1685d5981f8009ff8a824de",
+      "sourceSha256": "e48eec5e6f3d65719ea4f72e833d67a6b05d2cc6fb49b53a621d0e832f33838e",
       "declarationSha256": "16b63c44bbdf6d4f9f8f05f0612cbcd8d92b6d4af5800d90fd120a5f1f60a5fa",
       "declaredLifecycle": "stable",
       "supportReviewState": "reviewed",
@@ -4826,7 +4826,7 @@
       "sourcePath": "components/forms/TreeSelect.jsx",
       "declarationPath": "components/forms/TreeSelect.d.ts",
       "promptPath": "components/forms/TreeSelect.prompt.md",
-      "sourceSha256": "3d5d1ef69f6e24a4322ed1bf52c47c3430eaad1ab3fe5ac51b5b40ec5a09044f",
+      "sourceSha256": "ab5bc70e1cb1ab10df72a39456e4f4ac88e7907c25cd1dde8ded1d9c5c8b31e3",
       "declarationSha256": "3623e81530a0900556a713346f5ea7a96c02dc185a1481589d45190f5b09c33e",
       "declaredLifecycle": "stable",
       "supportReviewState": "reviewed",

package/components/api-index.json

@@ -14,7 +14,7 @@
     "scripts/catalog-source.json": "f12045fb1cccf19df8a2469dba096c582bc1885c8be464e2fc3df9aec06b89e9",
     "scripts/lib/component-support.mjs": "6626078ffaaa91cb3a43d87858577fc5d405e5bfb474e7519abf50d4797b2eb1",
     "_esm/react.d.ts": "56e221d6eb875cf7c3a4de841372ba0b70389836957d8538b1d5a276848db95d",
-    "components/lifecycle.json": "fdf434c3f13023b81cfcb4b491efa7b8f1ef490e7fc40c70c8cd6482924faf84"
+    "components/lifecycle.json": "28574314e19271305cc280baed7c24248bd8a5e699202df137331c848d851539"
   },
   "propDefinitions": {
     "p-0003926b4717c94d": {
@@ -35995,7 +35995,7 @@
       "sourcePath": "components/forms/Cascader.jsx",
       "declarationPath": "components/forms/Cascader.d.ts",
       "promptPath": "components/forms/Cascader.prompt.md",
-      "sourceSha256": "60217f041dd78ad4809a787920c0f0d56a6a383ae125ad2e691757b2af22abbf",
+      "sourceSha256": "09380cc01ef61a3cc0fb0d4f065345f4e31a6cd197cd4a9d837ffdc144b22bde",
       "declarationSha256": "33edbc198353ed41f05867be9e1c04830d5033cf2cf4ceda3e1ba13adef27aea",
       "declaredLifecycle": "stable",
       "support": {
@@ -36021,7 +36021,7 @@
           },
           {
             "path": "components/forms/Cascader.jsx",
-            "sha256": "60217f041dd78ad4809a787920c0f0d56a6a383ae125ad2e691757b2af22abbf",
+            "sha256": "09380cc01ef61a3cc0fb0d4f065345f4e31a6cd197cd4a9d837ffdc144b22bde",
             "scope": "Authoritative React implementation source for this declared export; shared source may define companion exports",
             "checkedAt": "2026-10-21T12:08:13.113Z"
           },
@@ -39349,7 +39349,7 @@
       "sourcePath": "components/forms/ColorPicker.jsx",
       "declarationPath": "components/forms/ColorPicker.d.ts",
       "promptPath": "components/forms/ColorPicker.prompt.md",
-      "sourceSha256": "64da95eccfc3637b640edcb4271ae914a81f4e05cf7b528467ab5850a651ed4f",
+      "sourceSha256": "90d7990c0e97ca31592bb7a48153d85944016b4424c0ac58837c8295c33d8695",
       "declarationSha256": "a0a3d9c005fc6f8ddc4fdc85f132aedfcb10dee745ae1706eb6b924814531e2d",
       "declaredLifecycle": "stable",
       "support": {
@@ -39375,7 +39375,7 @@
           },
           {
             "path": "components/forms/ColorPicker.jsx",
-            "sha256": "64da95eccfc3637b640edcb4271ae914a81f4e05cf7b528467ab5850a651ed4f",
+            "sha256": "90d7990c0e97ca31592bb7a48153d85944016b4424c0ac58837c8295c33d8695",
             "scope": "Authoritative React implementation source for this declared export; shared source may define companion exports",
             "checkedAt": "2026-10-21T12:08:13.113Z"
           },
@@ -51124,7 +51124,7 @@
       "sourcePath": "components/forms/InlineEdit.jsx",
       "declarationPath": "components/forms/InlineEdit.d.ts",
       "promptPath": "components/forms/InlineEdit.prompt.md",
-      "sourceSha256": "45b36df70b179243e329684ce20f61ed8dd4fda75e11674d24797713c644d4f8",
+      "sourceSha256": "9f242ef99af077e5c9b68d36cc9539fac0819e66f7995fa6a93ecb7793bf3484",
       "declarationSha256": "9fdf8c29720cd8d015ea42edfb4ee39ce74964feaafd43b044183ca5ef504b1c",
       "declaredLifecycle": "stable",
       "support": {
@@ -51146,28 +51146,28 @@
             "path": "components/forms/InlineEdit.d.ts",
             "sha256": "9fdf8c29720cd8d015ea42edfb4ee39ce74964feaafd43b044183ca5ef504b1c",
             "scope": "Authored public TypeScript declaration contract",
-            "checkedAt": "2026-10-21T12:08:13.113Z"
+            "checkedAt": "2026-11-09T17:52:00.677Z"
           },
           {
             "path": "components/forms/InlineEdit.jsx",
-            "sha256": "45b36df70b179243e329684ce20f61ed8dd4fda75e11674d24797713c644d4f8",
+            "sha256": "9f242ef99af077e5c9b68d36cc9539fac0819e66f7995fa6a93ecb7793bf3484",
             "scope": "Authoritative React implementation source for this declared export; shared source may define companion exports",
-            "checkedAt": "2026-10-21T12:08:13.113Z"
+            "checkedAt": "2026-11-09T17:52:00.677Z"
           },
           {
             "path": "components/forms/InlineEdit.prompt.md",
             "sha256": "6f60672f2c19cfe7130e1b32f9d8a422bf2ad546c84ac3dc96907415a451b930",
             "scope": "Component usage guidance with generated declared-API projection; implementation authority remains source",
-            "checkedAt": "2026-10-21T12:08:13.113Z"
+            "checkedAt": "2026-11-09T17:52:00.677Z"
           },
           {
             "path": "stories/InlineEdit.stories.jsx",
             "sha256": "6e9fdd26b7c8bbe7ffefb87fad4e271b856fc2f449ef33970cd332b8d2a81656",
             "scope": "Authored Storybook CSF story and declared matrix mount surface; not execution or all-state acceptance",
-            "checkedAt": "2026-10-21T12:08:13.113Z"
+            "checkedAt": "2026-11-09T17:52:00.677Z"
           }
         ],
-        "reviewedAt": "2026-10-21T12:03:00.000Z",
+        "reviewedAt": "2026-11-09T17:52:00.677Z",
         "reviewedBy": "Stephen Cheng",
         "limitations": [
           "This bounded source/declared-support review covers only the exact direct evidence listed below and its public declaration and implementation contracts. Automated execution is limited to separately bound receipts; this scope does not establish all-state acceptance.",
@@ -51216,6 +51216,47 @@
               "Style: default, liquid-glass"
             ],
             "sourceSha256": "db30ac35d9017a532d7159325d8eae235b109942c38649efd07b8a3d35effa14"
+          },
+          {
+            "reviewedBy": "Stephen Cheng",
+            "reviewedAt": "2026-10-21T12:03:00.000Z",
+            "evidence": [
+              {
+                "path": "components/forms/InlineEdit.d.ts",
+                "sha256": "9fdf8c29720cd8d015ea42edfb4ee39ce74964feaafd43b044183ca5ef504b1c",
+                "scope": "Authored public TypeScript declaration contract",
+                "checkedAt": "2026-10-21T12:08:13.113Z"
+              },
+              {
+                "path": "components/forms/InlineEdit.jsx",
+                "sha256": "45b36df70b179243e329684ce20f61ed8dd4fda75e11674d24797713c644d4f8",
+                "scope": "Authoritative React implementation source for this declared export; shared source may define companion exports",
+                "checkedAt": "2026-10-21T12:08:13.113Z"
+              },
+              {
+                "path": "components/forms/InlineEdit.prompt.md",
+                "sha256": "6f60672f2c19cfe7130e1b32f9d8a422bf2ad546c84ac3dc96907415a451b930",
+                "scope": "Component usage guidance with generated declared-API projection; implementation authority remains source",
+                "checkedAt": "2026-10-21T12:08:13.113Z"
+              },
+              {
+                "path": "stories/InlineEdit.stories.jsx",
+                "sha256": "6e9fdd26b7c8bbe7ffefb87fad4e271b856fc2f449ef33970cd332b8d2a81656",
+                "scope": "Authored Storybook CSF story and declared matrix mount surface; not execution or all-state acceptance",
+                "checkedAt": "2026-10-21T12:08:13.113Z"
+              }
+            ],
+            "environments": [
+              "Declared web target: React18/19 through compiled default @cyberskill/design and /react entry, with peer React; raw JSX requires explicit /source opt-in and a consumer JSX toolchain.",
+              "Declared browser compatibility entry: legacy _esm/cs.mjs / _ds_bundle.js; browser-only, not an SSR entry. Source and compiled module families must not be mixed.",
+              "Storybook10 authored CSF/matrix surface is a demonstration/test target. Actual engine/runtime/state coverage is listed separately in execution receipts."
+            ],
+            "axes": [
+              "Theme: light, dark, system (token/CSS contract)",
+              "Element: 5 Ngũ Hành elements / 15 packs",
+              "Language: vi, en",
+              "Style: default, liquid-glass"
+            ]
           }
         ]
       },
@@ -74693,7 +74734,7 @@
       "sourcePath": "components/forms/SearchField.jsx",
       "declarationPath": "components/forms/SearchField.d.ts",
       "promptPath": "components/forms/SearchField.prompt.md",
-      "sourceSha256": "44a861064011a4ebf8cd1224d95b0404c44e4cb8a1685d5981f8009ff8a824de",
+      "sourceSha256": "e48eec5e6f3d65719ea4f72e833d67a6b05d2cc6fb49b53a621d0e832f33838e",
       "declarationSha256": "16b63c44bbdf6d4f9f8f05f0612cbcd8d92b6d4af5800d90fd120a5f1f60a5fa",
       "declaredLifecycle": "stable",
       "support": {
@@ -74719,7 +74760,7 @@
           },
           {
             "path": "components/forms/SearchField.jsx",
-            "sha256": "44a861064011a4ebf8cd1224d95b0404c44e4cb8a1685d5981f8009ff8a824de",
+            "sha256": "e48eec5e6f3d65719ea4f72e833d67a6b05d2cc6fb49b53a621d0e832f33838e",
             "scope": "Authoritative React implementation source for this declared export; shared source may define companion exports",
             "checkedAt": "2026-10-21T12:08:13.113Z"
           },
@@ -97243,7 +97284,7 @@
       "sourcePath": "components/forms/TreeSelect.jsx",
       "declarationPath": "components/forms/TreeSelect.d.ts",
       "promptPath": "components/forms/TreeSelect.prompt.md",
-      "sourceSha256": "3d5d1ef69f6e24a4322ed1bf52c47c3430eaad1ab3fe5ac51b5b40ec5a09044f",
+      "sourceSha256": "ab5bc70e1cb1ab10df72a39456e4f4ac88e7907c25cd1dde8ded1d9c5c8b31e3",
       "declarationSha256": "3623e81530a0900556a713346f5ea7a96c02dc185a1481589d45190f5b09c33e",
       "declaredLifecycle": "stable",
       "support": {
@@ -97269,7 +97310,7 @@
           },
           {
             "path": "components/forms/TreeSelect.jsx",
-            "sha256": "3d5d1ef69f6e24a4322ed1bf52c47c3430eaad1ab3fe5ac51b5b40ec5a09044f",
+            "sha256": "ab5bc70e1cb1ab10df72a39456e4f4ac88e7907c25cd1dde8ded1d9c5c8b31e3",
             "scope": "Authoritative React implementation source for this declared export; shared source may define companion exports",
             "checkedAt": "2026-10-21T12:08:13.113Z"
           },

package/components/brand/brand.card.html

@@ -5,7 +5,7 @@
 <title>CyberSkill — LumiAvatar</title>
 <meta name="description" content="LumiAvatar: Golden-genie mascot avatar — sizes + ring" />
 <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; }
   .row { display: flex; align-items: center; gap: 24px; }

package/components/button/buttons.card.html

@@ -6,7 +6,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>CyberSkill — Button</title>
 <meta name="description" content="Button: Variants, sizes, states — Umber primary, composite focus" />
-<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; }
   .row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }

package/components/contracts.json

@@ -4897,7 +4897,7 @@
       "sourcePath": "components/forms/Cascader.jsx",
       "declarationPath": "components/forms/Cascader.d.ts",
       "promptPath": "components/forms/Cascader.prompt.md",
-      "sourceSha256": "60217f041dd78ad4809a787920c0f0d56a6a383ae125ad2e691757b2af22abbf",
+      "sourceSha256": "09380cc01ef61a3cc0fb0d4f065345f4e31a6cd197cd4a9d837ffdc144b22bde",
       "authoredProps": [
         "aria-labelledby",
         "className",
@@ -6004,7 +6004,7 @@
       "sourcePath": "components/forms/ColorPicker.jsx",
       "declarationPath": "components/forms/ColorPicker.d.ts",
       "promptPath": "components/forms/ColorPicker.prompt.md",
-      "sourceSha256": "64da95eccfc3637b640edcb4271ae914a81f4e05cf7b528467ab5850a651ed4f",
+      "sourceSha256": "90d7990c0e97ca31592bb7a48153d85944016b4424c0ac58837c8295c33d8695",
       "authoredProps": [
         "aria-labelledby",
         "className",
@@ -10287,7 +10287,7 @@
       "sourcePath": "components/forms/InlineEdit.jsx",
       "declarationPath": "components/forms/InlineEdit.d.ts",
       "promptPath": "components/forms/InlineEdit.prompt.md",
-      "sourceSha256": "45b36df70b179243e329684ce20f61ed8dd4fda75e11674d24797713c644d4f8",
+      "sourceSha256": "9f242ef99af077e5c9b68d36cc9539fac0819e66f7995fa6a93ecb7793bf3484",
       "authoredProps": [
         "className",
         "controlRef",
@@ -17142,7 +17142,7 @@
       "sourcePath": "components/forms/SearchField.jsx",
       "declarationPath": "components/forms/SearchField.d.ts",
       "promptPath": "components/forms/SearchField.prompt.md",
-      "sourceSha256": "44a861064011a4ebf8cd1224d95b0404c44e4cb8a1685d5981f8009ff8a824de",
+      "sourceSha256": "e48eec5e6f3d65719ea4f72e833d67a6b05d2cc6fb49b53a621d0e832f33838e",
       "authoredProps": [
         "onChange",
         "onClear",
@@ -23720,7 +23720,7 @@
       "sourcePath": "components/forms/TreeSelect.jsx",
       "declarationPath": "components/forms/TreeSelect.d.ts",
       "promptPath": "components/forms/TreeSelect.prompt.md",
-      "sourceSha256": "3d5d1ef69f6e24a4322ed1bf52c47c3430eaad1ab3fe5ac51b5b40ec5a09044f",
+      "sourceSha256": "ab5bc70e1cb1ab10df72a39456e4f4ac88e7907c25cd1dde8ded1d9c5c8b31e3",
       "authoredProps": [
         "aria-labelledby",
         "className",

package/components/data/collections.card.html

@@ -5,7 +5,7 @@
 <title>CyberSkill — Collections & content</title>
 <meta name="description" content="Collections & content: List, Item, DescriptionList, Timeline, Accordion, Collapsible, Kbd, CodeBlock" />
 <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; }
   .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }

package/components/data/data.card.html

@@ -6,7 +6,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>CyberSkill — Data & layout</title>
 <meta name="description" content="Data & layout: Card, Stat, Avatar, Tooltip, Divider, ScrollArea, AspectRatio" />
-<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; }
   .grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; max-width: 640px; align-items: start; }

package/components/datatable/datatable.card.html

@@ -6,7 +6,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>CyberSkill — DataTable</title>
 <meta name="description" content="DataTable: Caption, scoped headers, idle / loading / error / empty" />
-<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; }
   .wrap { border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); padding: 6px 16px 10px; background: var(--cs-color-surface-panel); max-width: 640px; }

package/components/dialog/dialog.card.html

@@ -6,7 +6,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>CyberSkill — Dialog</title>
 <meta name="description" content="Dialog: Modal overlay + panel with footer actions" />
-<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; }
   /* Scope the fixed dialog layer to the preview frame so it renders inline in the card. */

package/components/feedback/feedback-2.card.html

@@ -5,7 +5,7 @@
 <title>CyberSkill — Status & empty state</title>
 <meta name="description" content="Status & empty state: StatusIndicator, EmptyState" />
 <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; }
   .row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 18px; }

package/components/feedback/feedback.card.html

@@ -6,13 +6,13 @@
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>CyberSkill — Feedback & status</title>
 <meta name="description" content="Feedback & status: Badge, Tag, Alert, Toast, Spinner, Progress, Skeleton" />
-<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; }
   .stack { display: grid; gap: 18px; max-width: 620px; }
   .row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
   .lbl { width: 100%; font: 600 11px/1 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .09em; color: var(--cs-color-text-muted); }
-  .frame { position: relative; height: 96px; border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); background: var(--cs-color-surface-raised); }
+  .frame { position: relative; flex: 1 1 100%; min-width: 0; height: 96px; border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); background: var(--cs-color-surface-raised); }
   .frame .cs-toast-stack { position: absolute; inset-block-end: 12px; inset-inline-end: 12px; }
 </style>
 <script src="../../_vendor/react/react.production.min.js"></script>

package/components/forms/Cascader.jsx

@@ -98,7 +98,7 @@ export const Cascader = React.forwardRef(function Cascader({ portal = true, plac
   return (
     <overlayScopeContext.Provider value={scope}>
     <div ref={mergedNativeRef} {...mergeTargetProps({ className: cx("cs-cascader", className) }, rootProps)}>
-      <button {...mergeTargetProps({ ...control, type: "button", className: "cs-treeselect__field", disabled, "aria-haspopup": "listbox", "aria-expanded": open, onClick: () => setOpen(o => !o), onKeyDown: (e) => {
+      <button {...mergeTargetProps({ ...control, type: "button", className: "cs-treeselect__field", disabled, "aria-haspopup": "listbox", "aria-expanded": open, onClick: event => { if (!open) event.currentTarget.focus(); setOpen(o => !o); }, onKeyDown: (e) => {
           if (e.defaultPrevented || e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229) return;
           // Once open, the document handler owns arrows from this trigger too.
           if (open && e.key === "ArrowDown") return;

package/components/forms/ColorPicker.jsx

@@ -37,7 +37,7 @@ export const ColorPicker = React.forwardRef(function ColorPicker({ portal = true
   return (
     <overlayScopeContext.Provider value={scope}>
     <span ref={mergedNativeRef} {...mergeTargetProps({ className: cx("cs-colorpicker", className) }, rootProps)}>
-      <button {...mergeTargetProps({ ...control, type: "button", className: "cs-colorpicker__field", "aria-expanded": open, onClick: () => setOpen(o => !o) }, controlProps, ["id", "role", "type", "name", "value", "defaultValue", "disabled", "required", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-haspopup", "aria-expanded", "aria-controls", "aria-activedescendant"])} ref={mergedControlRef} >
+      <button {...mergeTargetProps({ ...control, type: "button", className: "cs-colorpicker__field", "aria-expanded": open, onClick: event => { if (!open) event.currentTarget.focus(); setOpen(o => !o); } }, controlProps, ["id", "role", "type", "name", "value", "defaultValue", "disabled", "required", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-haspopup", "aria-expanded", "aria-controls", "aria-activedescendant"])} ref={mergedControlRef} >
         <i style={{ background: value }} /><code>{value}</code>
       </button>
       {open ? (

package/components/forms/InlineEdit.jsx

@@ -4,6 +4,7 @@ import React from "react";
 import { makeT, useLang } from "../_i18n/i18n.js";
 import { useOverlayLayer, overlayScopeContext } from "../overlays/OverlayManager.jsx";
 import { cx } from "../_utils/cx.js";
+import { useClientLayoutEffect } from "../_utils/use-client-layout-effect.js";
 const PEN = <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M4 20l4.5-.9L20 7.6a2 2 0 0 0-2.8-2.8L5.7 16.3 4 20z" /></svg>;
 
 /** CyberSkill InlineEdit — click-to-edit text. Enter/blur commits, Escape cancels. */
@@ -14,6 +15,7 @@ export const InlineEdit = React.forwardRef(function InlineEdit({ controlRef, val
   const [edit, setEdit] = React.useState(false);
   const [draft, setDraft] = React.useState(val);
   const cancellingRef = React.useRef(false);
+  const restoreFocusRef = React.useRef(false);
   const commit = () => {
     if (cancellingRef.current) { cancellingRef.current = false; return; }
     setEdit(false);
@@ -21,18 +23,26 @@ export const InlineEdit = React.forwardRef(function InlineEdit({ controlRef, val
   };
   const [ref, L, localeMessages] = useLang(lang);
   const mergedNativeRef = useComposedRefs(ref, forwardedRef);
+  // Keyboard completion removes the input. Restore its replacement in the same
+  // commit; blur completion must leave focus on the user's next target.
+  useClientLayoutEffect(() => {
+    if (!edit && restoreFocusRef.current) {
+      restoreFocusRef.current = false;
+      ref.current?.querySelector("button")?.focus();
+    }
+  }, [edit]);
   const t = makeT("InlineEdit", L, localeMessages);
   const { scope } = useOverlayLayer({ open: edit, kind: "popover", panelRef: ref, restoreFocus: false, onEscape: () => {
     cancellingRef.current = true;
+    restoreFocusRef.current = true;
     setDraft(val); setEdit(false);
-    requestAnimationFrame(() => ref.current?.querySelector("button")?.focus());
   } });
   return (
     <overlayScopeContext.Provider value={scope}>
     <span ref={mergedNativeRef} {...mergeTargetProps({ "className": cx("cs-inline-edit", className) }, rootProps, [])}>
       {edit ? (
         <input autoFocus value={draft} aria-label={label || t("edit")} onChange={(e) => setDraft(e.target.value)} onBlur={commit}
-          onKeyDown={(e) => { if (!e.nativeEvent.isComposing && e.keyCode !== 229 && e.key === "Enter") commit(); }}  ref={mergedControlRef} />
+          onKeyDown={(e) => { if (!e.nativeEvent.isComposing && e.keyCode !== 229 && e.key === "Enter") { e.preventDefault(); restoreFocusRef.current = true; commit(); } }}  ref={mergedControlRef} />
       ) : (
         <button type="button" className="cs-inline-edit__view" aria-label={t("edit") + (label ? ": " + label : "")} onClick={() => { cancellingRef.current = false; setDraft(val); setEdit(true); }}>
           <span className={val ? undefined : "ph"}>{val || t("empty")}</span>{PEN}

package/components/forms/SearchField.jsx

@@ -18,7 +18,7 @@ export const SearchField = React.forwardRef(function SearchField({ value, defaul
       <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7" /><path d="M21 21l-4.3-4.3" /></svg>
       <input aria-label={props["aria-label"] || (props["aria-labelledby"] ? undefined : ph)} {...props} type="text" role="searchbox" value={val} disabled={disabled} readOnly={readOnly} placeholder={ph} onChange={(e) => set(e.target.value)}  ref={mergedNativeRef} />
       {String(val).length ? (
-        <button type="button" className="cs-search__clear" aria-label={t("clear")} disabled={disabled || readOnly} onClick={() => { if (disabled || readOnly) return; set(""); onClear && onClear(); }}>
+        <button type="button" className="cs-search__clear" aria-label={t("clear")} disabled={disabled || readOnly} onClick={() => { if (disabled || readOnly) return; set(""); onClear && onClear(); ref.current?.querySelector("input")?.focus(); }}>
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
         </button>
       ) : null}