@cyberskill/design 2.6.0 → 2.7.0

package/_esm/cs.mjs

@@ -1,4 +1,4 @@
-// CyberSkill Design System — ESM entry point (GENERATED by scripts/generate-export-catalog.mjs at v2.6.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.6.0";
+export const VERSION = "2.7.0";
 export const AIDisclosureBadge = CS.AIDisclosureBadge;
 export const Accordion = CS.Accordion;
 export const Alert = CS.Alert;

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/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/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}

package/components/forms/TreeSelect.jsx

@@ -40,7 +40,7 @@ export const TreeSelect = React.forwardRef(function TreeSelect({ portal = true,
   return (
     <overlayScopeContext.Provider value={scope}>
     <div ref={mergedNativeRef} {...mergeTargetProps({ className: cx("cs-treeselect", className) }, rootProps)}>
-      <button {...mergeTargetProps({ ...control, type: "button", className: "cs-treeselect__field", disabled, "aria-haspopup": "tree", "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-treeselect__field", disabled, "aria-haspopup": "tree", "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} >
         <span className={sel ? undefined : "ph"}>{sel ? sel.label : ph}</span><span aria-hidden="true">▾</span>
       </button>
       {open ? (

package/components/lifecycle.json

@@ -2128,7 +2128,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"
           },
@@ -2807,7 +2807,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"
           },
@@ -5629,28 +5629,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.",
@@ -5699,6 +5699,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"
+            ]
           }
         ]
       }
@@ -8779,7 +8820,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"
           },
@@ -11815,7 +11856,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/prompt-api.json

@@ -2,8 +2,8 @@
   "schemaVersion": 1,
   "interpretation": "Canonical definition/default-key references and generated prompt inventory, not a second type system, behavioral specification, accessibility certification or acceptance record.",
   "sourceHashes": {
-    "components/api-index.json": "468afbb6e09f78a1be6fe2b2b06bbd6ea30f4fa06abb835c191eb6490082854a",
-    "components/contracts.json": "e4ebe085e32dc639dea36cb032155c6aa557e61411bec7fa800691dd61a2ce03",
+    "components/api-index.json": "cdca2a8f225147e27ca8b385023ffe6ba5628b614720cd658c94f5c833f53336",
+    "components/contracts.json": "3fe12bafaf9da02f9148279601e4bc8f4af4cb87710e19703a53f80f5acbdc30",
     "_ds_manifest.json": "c095c233237f4ddb574f8fa648c26aee699df2c16d08f7e4a3aeca076a6644e4",
     "scripts/generate-component-contracts.mjs": "a94d0d58b3d0b6f629bf2cdc2a53bdfc8b43b8fa1479434b770f0cd8dc53187c",
     "scripts/lib/component-export.mjs": "9f6fd3df4a9e0366fef8c384a0926e050bd8fbcb3887bf5e6ffaed5c0622cd15",

package/components/release-compatibility.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "baselineVersion": "2.5.0",
+  "baselineVersion": "2.6.0",
   "policy": {
     "versioning": "semver",
     "breakingChangesRequireMajor": true,