@cyberskill/design 1.1.1 → 1.3.8

package/components/datatable/DataTable.jsx

@@ -1,10 +1,15 @@
 import React from "react";
 import { makeT, useLang } from "../_i18n/i18n.js";
+import { Skeleton } from "../feedback/Skeleton.jsx";
+import { Result } from "../feedback/Result.jsx";
 import { cx } from "../_utils/cx.js";
 
 /**
  * CyberSkill DataTable — semantic table with caption, column scope headers,
- * per-column render, and an empty state. Solid surface (dense content).
+ * per-column render, and idle / loading / error / empty async states.
+ * Solid surface (dense content). Reference composition for collection async
+ * data (FIND-020): Skeleton rows while loading, Result on error, empty cell
+ * when idle with no rows. Other data surfaces should follow the same triad.
  */
 export function DataTable({
   caption,
@@ -12,26 +17,94 @@ export function DataTable({
   rows,
   rowKey = "id",
   emptyState,
+  state = "idle",
+  errorState,
+  loadingState,
+  loadingRows = 5,
   lang,
   className,
 }) {
   const normalized = Array.isArray(rows) ? rows : [];
   const [ref, L] = useLang(lang);
-  const es = emptyState != null ? emptyState : makeT("DataTable", L)("empty");
+  const t = makeT("DataTable", L);
+  const es = emptyState != null ? emptyState : t("empty");
+  const colCount = Math.max(1, (columns && columns.length) || 1);
+
+  if (state === "loading") {
+    return (
+      <div ref={ref} className={cx("cs-table-wrap", className)} aria-busy="true">
+        <span className="cs-sr-only">{t("loading")}</span>
+        {loadingState != null ? (
+          loadingState
+        ) : (
+          <table className="cs-table">
+            {caption ? <caption>{caption}</caption> : null}
+            <thead>
+              <tr>
+                {(columns || []).map((c) => (
+                  <th key={c.key} scope="col">
+                    {c.header}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody aria-hidden="true">
+              {Array.from({ length: Math.max(1, loadingRows) }).map((_, i) => (
+                <tr key={i}>
+                  {Array.from({ length: colCount }).map((__, j) => (
+                    <td key={j}>
+                      <Skeleton lines={1} />
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+    );
+  }
+
+  if (state === "error") {
+    return (
+      <div ref={ref} className={cx("cs-table-wrap", "cs-table-wrap--status", className)} role="alert">
+        {errorState != null ? (
+          errorState
+        ) : (
+          <Result status="error" lang={L} title={t("error")}>
+            {t("errorHint")}
+          </Result>
+        )}
+      </div>
+    );
+  }
+
   return (
     <div ref={ref} className={cx("cs-table-wrap", className)}>
       <table className="cs-table">
         {caption ? <caption>{caption}</caption> : null}
         <thead>
-          <tr>{columns.map((c) => <th key={c.key} scope="col">{c.header}</th>)}</tr>
+          <tr>
+            {(columns || []).map((c) => (
+              <th key={c.key} scope="col">
+                {c.header}
+              </th>
+            ))}
+          </tr>
         </thead>
         <tbody>
           {normalized.length === 0 ? (
-            <tr><td colSpan={columns.length} className="cs-table__empty">{es}</td></tr>
+            <tr>
+              <td colSpan={colCount} className="cs-table__empty">
+                {es}
+              </td>
+            </tr>
           ) : (
             normalized.map((row, i) => (
               <tr key={row[rowKey] ?? i}>
-                {columns.map((c) => <td key={c.key}>{c.render ? c.render(row) : row[c.key]}</td>)}
+                {(columns || []).map((c) => (
+                  <td key={c.key}>{c.render ? c.render(row) : row[c.key]}</td>
+                ))}
               </tr>
             ))
           )}

package/components/datatable/DataTable.prompt.md

@@ -1,4 +1,4 @@
-**DataTable** — semantic table with a caption, scoped column headers, per-column `render`, and an empty state. Dense content, so it stays on a solid surface (never glass).
+**DataTable** — semantic table with a caption, scoped column headers, per-column `render`, and an async triad (`idle` / `loading` / `error`). Dense content, so it stays on a solid surface (never glass). Use `state` when the host owns a fetch — do not show empty while loading.
 
 ```jsx
 <DataTable
@@ -10,6 +10,7 @@
   ]}
   rows={releases}
   rowKey="ver"
+  state={status} /* "idle" | "loading" | "error" */
   emptyState="No releases yet"
 />
 ```

package/components/datatable/datatable.card.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x300" name="DataTable" subtitle="Caption, scoped headers, custom cells, empty state" -->
+<!-- @dsCard group="Components" viewport="700x420" name="DataTable" subtitle="Caption, scoped headers, idle / loading / error / empty" -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -14,9 +14,9 @@
   .pill.hold { background: var(--cs-color-semantic-danger); color: #fff; }
   .mono { font-family: var(--cs-font-family-mono); font-weight: 600; }
 </style>
-<script src="https://unpkg.com/umd-react@19.2.8/dist/react.development.js" integrity="sha384-r22tQd8qRIHDPIkmdXZcVtvPi1Tj2x1QaW2tmFQHEvHscATUnHQ5siTyxWw5PMUs" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/umd-react@19.2.8/dist/react-dom.development.js" integrity="sha384-gJZYmumEmwqVmX3JVsLZq+4QrxoPGh/BW47Rk7SqNPCPFpTGnRtvmeRPJ7//ZDPk" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+<script src="../../_vendor/react/react.production.min.js"></script>
+<script src="../../_vendor/react/react-dom.production.min.js"></script>
+<script src="../../_vendor/babel/babel.min.js"></script>
 <script src="../../_ds_bundle.js"></script>
 </head>
 <body>
@@ -28,20 +28,24 @@ const rows = [
   { ver: "v1.6.0", ships: "This week", status: "active", note: "Glass bindings" },
   { ver: "v1.7.0", ships: "Q3 2026", status: "hold", note: "Awaiting RFC" },
 ];
+const cols = [
+  { key: "ver", header: "Version", render: (r) => <span className="mono">{r.ver}</span> },
+  { key: "ships", header: "Ships" },
+  { key: "note", header: "Notes" },
+  { key: "status", header: "Status", render: (r) => <span className={"pill " + r.status}>{r.status}</span> },
+];
 function Demo() {
   return (
-    <div className="wrap">
-      <DataTable
-        caption="Releases"
-        rowKey="ver"
-        columns={[
-          { key: "ver", header: "Version", render: (r) => <span className="mono">{r.ver}</span> },
-          { key: "ships", header: "Ships" },
-          { key: "note", header: "Notes" },
-          { key: "status", header: "Status", render: (r) => <span className={"pill " + r.status}>{r.status}</span> },
-        ]}
-        rows={rows}
-      />
+    <div style={{ display: "grid", gap: 16 }}>
+      <div className="wrap">
+        <DataTable caption="Releases" rowKey="ver" columns={cols} rows={rows} />
+      </div>
+      <div className="wrap">
+        <DataTable caption="Loading" rowKey="ver" columns={cols} rows={[]} state="loading" loadingRows={3} />
+      </div>
+      <div className="wrap">
+        <DataTable caption="Error" rowKey="ver" columns={cols} rows={[]} state="error" />
+      </div>
     </div>
   );
 }

package/components/dialog/Dialog.jsx

@@ -2,27 +2,12 @@ import React from "react";
 import { makeT, useLang } from "../_i18n/i18n.js";
 import { Icon } from "../icon/Icon.jsx";
 import { cx } from "../_utils/cx.js";
-
-const FOCUSABLE = [
-  'a[href]',
-  'area[href]',
-  'button:not([disabled])',
-  'input:not([disabled]):not([type="hidden"])',
-  'select:not([disabled])',
-  'textarea:not([disabled])',
-  'audio[controls]',
-  'video[controls]',
-  'summary',
-  'iframe',
-  '[contenteditable]:not([contenteditable="false"])',
-  '[tabindex]:not([tabindex="-1"])',
-].join(",");
+import { useOverlayLayer } from "../overlays/OverlayManager.jsx";
 
 /**
  * CyberSkill Dialog — modal overlay + panel. aria-modal, labelled by title and
  * described by its body, scrim click closes. Body scroll is locked while open
- * (prior overflow restored on close/unmount). Compose actions in the footer
- * with Buttons.
+ * via the overlay manager (nested-safe). Compose actions in the footer with Buttons.
  */
 export function Dialog({
   open,
@@ -40,34 +25,17 @@ export function Dialog({
   const bodyId = children == null ? undefined : baseId + "-body";
   const [ref, L] = useLang(lang);
   const panel = React.useRef(null);
-  const closeRef = React.useRef(onClose); closeRef.current = onClose;
-  React.useEffect(() => {
-    if (!open) return;
-    const prev = document.activeElement;
-    const prevOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    const focusables = () => (panel.current ? [...panel.current.querySelectorAll(FOCUSABLE)] : []);
-    const first = focusables()[0];
-    (first || panel.current) && (first || panel.current).focus();
-    const k = (e) => {
-      if (e.key === "Escape") { closeRef.current && closeRef.current(); return; }
-      if (e.key !== "Tab" || !panel.current) return;
-      const f = focusables();
-      if (!f.length) { e.preventDefault(); panel.current.focus(); return; }
-      const a = f[0], z = f[f.length - 1];
-      const active = document.activeElement;
-      const inside = panel.current.contains(active);
-      // Wrap at either edge; if focus somehow escaped the panel, pull it back in.
-      if (e.shiftKey && (!inside || active === a)) { e.preventDefault(); z.focus(); }
-      else if (!e.shiftKey && (!inside || active === z)) { e.preventDefault(); a.focus(); }
-    };
-    document.addEventListener("keydown", k);
-    return () => {
-      document.removeEventListener("keydown", k);
-      document.body.style.overflow = prevOverflow;
-      if (prev && prev.focus) prev.focus();
-    };
-  }, [open]);
+  const closeRef = React.useRef(onClose);
+  closeRef.current = onClose;
+
+  useOverlayLayer({
+    open: !!open,
+    kind: "modal",
+    trapFocus: true,
+    onEscape: () => closeRef.current && closeRef.current(),
+    panelRef: panel,
+  });
+
   const cl = closeLabel != null ? closeLabel : makeT("Dialog", L)("close");
   if (!open) return null;
   return (

package/components/dialog/dialog.card.html

@@ -12,9 +12,9 @@
   .frame .cs-dialog-layer { position: absolute; }
   .frame .cs-dialog { top: 24px; }
 </style>
-<script src="https://unpkg.com/umd-react@19.2.8/dist/react.development.js" integrity="sha384-r22tQd8qRIHDPIkmdXZcVtvPi1Tj2x1QaW2tmFQHEvHscATUnHQ5siTyxWw5PMUs" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/umd-react@19.2.8/dist/react-dom.development.js" integrity="sha384-gJZYmumEmwqVmX3JVsLZq+4QrxoPGh/BW47Rk7SqNPCPFpTGnRtvmeRPJ7//ZDPk" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+<script src="../../_vendor/react/react.production.min.js"></script>
+<script src="../../_vendor/react/react-dom.production.min.js"></script>
+<script src="../../_vendor/babel/babel.min.js"></script>
 <script src="../../_ds_bundle.js"></script>
 </head>
 <body>

package/components/feedback/Alert.d.ts

@@ -11,6 +11,8 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   title?: ReactNode;
   icon?: ReactNode;
   children?: ReactNode;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
 }
 
 export function Alert(props: AlertProps): React.ReactElement;

package/components/feedback/Alert.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
 import { cx } from "../_utils/cx.js";
 
 const PATHS = {
@@ -16,14 +17,19 @@ function DefaultIcon({ variant }) {
 }
 
 /** CyberSkill Alert — inline banner. variant: info | success | warning | danger. */
-export function Alert({ variant = "info", title, icon, children, className, ...props }) {
+export function Alert({ variant = "info", title, icon, children, onDismiss, lang, className, ...props }) {
+  const [ref, L] = useLang(lang);
+  const t = makeT("Alert", L);
   return (
-    <div role="status" className={cx("cs-alert", `cs-alert--${variant}`, className)} {...props}>
+    <div ref={ref} role="status" className={cx("cs-alert", `cs-alert--${variant}`, className)} {...props}>
       <span className="cs-alert__icon">{icon ?? <DefaultIcon variant={variant} />}</span>
       <div>
         {title ? <p className="cs-alert__title">{title}</p> : null}
         {children ? <div className="cs-alert__body">{children}</div> : null}
       </div>
+      {onDismiss ? (
+        <button type="button" className="cs-alert__dismiss" aria-label={t("dismiss")} onClick={onDismiss}>×</button>
+      ) : null}
     </div>
   );
 }

package/components/feedback/EmptyState.d.ts

@@ -8,6 +8,8 @@ export interface EmptyStateProps {
   title?: ReactNode;
   children?: ReactNode;
   actions?: ReactNode;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
   className?: string;
 }
 export function EmptyState(props: EmptyStateProps): React.ReactElement;

package/components/feedback/EmptyState.jsx

@@ -1,14 +1,17 @@
 import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
 import { cx } from "../_utils/cx.js";
 
 /** CyberSkill EmptyState — friendly placeholder for empty views. */
-export function EmptyState({ icon, title, children, actions, className }) {
+export function EmptyState({ icon, title, children, actions, lang, className }) {
+  const [ref, L] = useLang(lang);
+  const t = makeT("EmptyState", L);
   return (
-    <div className={cx("cs-empty", className)}>
+    <div ref={ref} className={cx("cs-empty", className)}>
       <span className="cs-empty__icon">
         {icon ?? <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 8l2-4h14l2 4M3 8v10a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V8M3 8h6l1 3h4l1-3h6" /></svg>}
       </span>
-      {title ? <div className="cs-empty__title">{title}</div> : null}
+      <div className="cs-empty__title">{title ?? t("title")}</div>
       {children ? <div className="cs-empty__body">{children}</div> : null}
       {actions ? <div className="cs-empty__actions">{actions}</div> : null}
     </div>

package/components/feedback/ProgressBar.d.ts

@@ -9,6 +9,8 @@ export interface ProgressBarProps {
   max?: number;
   variant?: "ochre" | "umber" | "success";
   label?: string;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
   className?: string;
 }
 

package/components/feedback/ProgressBar.jsx

@@ -1,12 +1,17 @@
 import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
 import { cx } from "../_utils/cx.js";
 
 /** CyberSkill ProgressBar — determinate progress. variant: ochre (default) | umber | success. */
-export function ProgressBar({ value = 0, max = 100, variant, label, className }) {
-  const pct = Math.max(0, Math.min(100, (value / max) * 100));
+export function ProgressBar({ value = 0, max = 100, variant, label, lang, className }) {
+  const safeMax = max > 0 ? max : 100;
+  const clamped = Math.max(0, Math.min(safeMax, Number(value) || 0));
+  const pct = Math.max(0, Math.min(100, (clamped / safeMax) * 100));
+  const [ref, L] = useLang(lang);
+  const t = makeT("ProgressBar", L);
   return (
-    <div className={cx("cs-progress", variant && `cs-progress--${variant}`, className)}
-      role="progressbar" aria-valuenow={Math.round(value)} aria-valuemin={0} aria-valuemax={max} aria-label={label}>
+    <div ref={ref} className={cx("cs-progress", variant && `cs-progress--${variant}`, className)}
+      role="progressbar" aria-valuenow={Math.round(clamped)} aria-valuemin={0} aria-valuemax={safeMax} aria-label={label ?? t("label")}>
       <span className="cs-progress__fill" style={{ inlineSize: pct + "%", width: pct + "%" }} />
     </div>
   );

package/components/feedback/Toast.jsx

@@ -2,6 +2,20 @@ import React from "react";
 import { makeT, useLang } from "../_i18n/i18n.js";
 import { cx } from "../_utils/cx.js";
 
+/** Variant glyphs — aligned with Alert so status is never colour-alone (FIND-036). */
+const PATHS = {
+  default: "M12 8h.01M11 12h1v4h1 M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18z",
+  success: "M4 12.5l5 5 11-11",
+  danger: "M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18z M9 9l6 6 M15 9l-6 6",
+};
+function DefaultIcon({ variant }) {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d={PATHS[variant] || PATHS.default} />
+    </svg>
+  );
+}
+
 /** Fixed-position stack for Toasts (bottom-right). */
 export function ToastStack({ children, lang, className }) {
   const [ref, L] = useLang(lang);
@@ -14,7 +28,7 @@ export function Toast({ variant = "default", title, icon, onClose, lang, childre
   return (
     <div ref={ref} className={cx("cs-toast", `cs-toast--${variant}`, className)} role="status" {...props}>
       <span className="cs-toast__icon" aria-hidden="true">
-        {icon ?? <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 12.5l5 5 11-11" /></svg>}
+        {icon ?? <DefaultIcon variant={variant} />}
       </span>
       <div>
         {title ? <div className="cs-toast__title">{title}</div> : null}

package/components/feedback/Toast.prompt.md

@@ -1,7 +1,8 @@
-**Toast / ToastStack** — transient notification inside a fixed bottom-right stack. Presentational; manage timing + queue in app state.
+**Toast / ToastStack** — transient notification inside a fixed bottom-right stack. Presentational; manage timing + queue in app state. Variants `default` | `success` | `danger` each ship a distinct glyph (info / check / X) plus a status-coloured start border — never a red check-mark for errors.
 
 ```jsx
 <ToastStack>
   <Toast variant="success" title="Saved" onClose={dismiss}>Your wish is on its way.</Toast>
+  <Toast variant="danger" title="Couldn’t save">Check the network and try again.</Toast>
 </ToastStack>
 ```

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

@@ -10,9 +10,9 @@
   .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 { border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); background: var(--cs-color-surface-panel); }
 </style>
-<script src="https://unpkg.com/umd-react@19.2.8/dist/react.development.js" integrity="sha384-r22tQd8qRIHDPIkmdXZcVtvPi1Tj2x1QaW2tmFQHEvHscATUnHQ5siTyxWw5PMUs" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/umd-react@19.2.8/dist/react-dom.development.js" integrity="sha384-gJZYmumEmwqVmX3JVsLZq+4QrxoPGh/BW47Rk7SqNPCPFpTGnRtvmeRPJ7//ZDPk" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+<script src="../../_vendor/react/react.production.min.js"></script>
+<script src="../../_vendor/react/react-dom.production.min.js"></script>
+<script src="../../_vendor/babel/babel.min.js"></script>
 <script src="../../_ds_bundle.js"></script>
 </head>
 <body>

package/components/feedback/feedback.card.html

@@ -13,9 +13,9 @@
   .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 .cs-toast-stack { position: absolute; inset-block-end: 12px; inset-inline-end: 12px; }
 </style>
-<script src="https://unpkg.com/umd-react@19.2.8/dist/react.development.js" integrity="sha384-r22tQd8qRIHDPIkmdXZcVtvPi1Tj2x1QaW2tmFQHEvHscATUnHQ5siTyxWw5PMUs" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/umd-react@19.2.8/dist/react-dom.development.js" integrity="sha384-gJZYmumEmwqVmX3JVsLZq+4QrxoPGh/BW47Rk7SqNPCPFpTGnRtvmeRPJ7//ZDPk" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+<script src="../../_vendor/react/react.production.min.js"></script>
+<script src="../../_vendor/react/react-dom.production.min.js"></script>
+<script src="../../_vendor/babel/babel.min.js"></script>
 <script src="../../_ds_bundle.js"></script>
 </head>
 <body>

package/components/forms/Cascader.jsx

@@ -2,8 +2,10 @@ import React from "react";
 import { makeT, useLang } from "../_i18n/i18n.js";
 import { cx } from "../_utils/cx.js";
 
+const EMPTY_PATH = [];
+
 /** CyberSkill Cascader — column-per-level picker for hierarchies (province → district style). */
-export function Cascader({ nodes = [], value = [], onChange, placeholder, label, disabled = false, lang, className }) {
+export function Cascader({ nodes = [], value = EMPTY_PATH, onChange, placeholder, label, disabled = false, lang, className }) {
   const [open, setOpen] = React.useState(false);
   const [path, setPath] = React.useState(value);
   const wrap = React.useRef(null);
@@ -11,15 +13,59 @@ export function Cascader({ nodes = [], value = [], onChange, placeholder, label,
   const [ref, L] = useLang(lang);
   const t = makeT("Cascader", L);
   const ph = placeholder != null ? placeholder : t("placeholder");
-  React.useEffect(() => { setPath(value); }, [open]);
+  // Controlled value must re-sync even when the popover stays closed (FIND-014).
+  // Depend on a stable key — default `[]` must not reset path every render.
+  const valueKey = Array.isArray(value) ? value.join("\0") : "";
+  React.useEffect(() => { setPath(Array.isArray(value) ? value : EMPTY_PATH); }, [valueKey]);
   React.useEffect(() => {
     if (!open) return;
     const d = (e) => { if (wrap.current && !wrap.current.contains(e.target)) setOpen(false); };
-    const k = (e) => { if (e.key === "Escape") setOpen(false); };
+    const k = (e) => {
+      if (e.key === "Escape") {
+        setOpen(false);
+        const field = wrap.current && wrap.current.querySelector(".cs-treeselect__field");
+        field && field.focus && field.focus();
+        return;
+      }
+      if (!wrap.current) return;
+      const opts = [...wrap.current.querySelectorAll('[role="option"]')];
+      if (!opts.length) return;
+      const active = document.activeElement;
+      const idx = opts.indexOf(active);
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        (opts[idx < 0 ? 0 : Math.min(opts.length - 1, idx + 1)] || opts[0]).focus();
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        (opts[idx < 0 ? opts.length - 1 : Math.max(0, idx - 1)] || opts[0]).focus();
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        opts[0].focus();
+      } else if (e.key === "End") {
+        e.preventDefault();
+        opts[opts.length - 1].focus();
+      } else if (e.key === "ArrowRight" && idx >= 0) {
+        // Expand into children by activating the selected option when it has a chevron.
+        active.click && active.click();
+      } else if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        if (path.length) {
+          const next = path.slice(0, -1);
+          setPath(next);
+        } else {
+          setOpen(false);
+          const field = wrap.current.querySelector(".cs-treeselect__field");
+          field && field.focus && field.focus();
+        }
+      }
+    };
     document.addEventListener("mousedown", d);
     document.addEventListener("keydown", k);
-    return () => { document.removeEventListener("mousedown", d); document.removeEventListener("keydown", k); };
-  }, [open]);
+    return () => {
+      document.removeEventListener("mousedown", d);
+      document.removeEventListener("keydown", k);
+    };
+  }, [open, path]);
   const cols = [];
   let level = nodes;
   for (let i = 0; level && level.length; i++) {
@@ -31,7 +77,22 @@ export function Cascader({ nodes = [], value = [], onChange, placeholder, label,
   { let lv = nodes; for (const k of value) { const n = (lv || []).find((x) => x.key === k); if (!n) break; labels.push(n.label); lv = n.children; } }
   return (
     <div ref={(el) => { wrap.current = el; ref.current = el; }} className={cx("cs-cascader", className)}>
-      <button type="button" id={fieldId} className="cs-treeselect__field" disabled={disabled} aria-haspopup="listbox" aria-expanded={open} aria-label={label} onClick={() => setOpen((o) => !o)}>
+      <button
+        type="button"
+        id={fieldId}
+        className="cs-treeselect__field"
+        disabled={disabled}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-label={label}
+        onClick={() => setOpen((o) => !o)}
+        onKeyDown={(e) => {
+          if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            setOpen(true);
+          }
+        }}
+      >
         <span className={labels.length ? undefined : "ph"}>{labels.length ? labels.join(" / ") : ph}</span><span aria-hidden="true">▾</span>
       </button>
       {open ? (
@@ -41,12 +102,19 @@ export function Cascader({ nodes = [], value = [], onChange, placeholder, label,
               {col.map((n) => (
                 // role="none" — the <li> wrapper must not sit between listbox and option.
                 <li key={n.key} role="none">
-                  <button type="button" role="option" aria-selected={path[i] === n.key} className={cx("cs-cascader__opt", path[i] === n.key && "on")}
+                  <button
+                    type="button"
+                    role="option"
+                    aria-selected={path[i] === n.key}
+                    className={cx("cs-cascader__opt", path[i] === n.key && "on")}
+                    // Keep options in the focusable set for arrow models (E3).
+                    data-cs-focusable=""
                     onClick={() => {
                       const next = [...path.slice(0, i), n.key];
                       setPath(next);
                       if (!(n.children && n.children.length)) { onChange && onChange(next); setOpen(false); }
-                    }}>
+                    }}
+                  >
                     {n.label}{n.children && n.children.length ? <span aria-hidden="true"> ›</span> : null}
                   </button>
                 </li>

package/components/forms/Editor.jsx

@@ -2,13 +2,39 @@ import React from "react";
 import { makeT, useLang } from "../_i18n/i18n.js";
 import { cx } from "../_utils/cx.js";
 
+/** Strip script/style/event-handler markup before injecting HTML (CDS-SEC-001). */
+function sanitizeHtml(html) {
+  if (html == null || html === "") return "";
+  if (typeof document === "undefined") {
+    return String(html)
+      .replace(/<script[\s\S]*?>[\s\S]*?<\/script>/gi, "")
+      .replace(/on\w+\s*=\s*("[^"]*"|'[^']*'|[^\s>]+)/gi, "")
+      .replace(/javascript:/gi, "");
+  }
+  const tpl = document.createElement("template");
+  tpl.innerHTML = String(html);
+  tpl.content.querySelectorAll("script,style,iframe,object,embed,link").forEach((n) => n.remove());
+  tpl.content.querySelectorAll("*").forEach((n) => {
+    [...n.attributes].forEach((a) => {
+      if (/^on/i.test(a.name) || /javascript:/i.test(a.value)) n.removeAttribute(a.name);
+    });
+  });
+  return tpl.innerHTML;
+}
+
 /** CyberSkill Editor — light rich-text (contentEditable): bold · italic · bullet list. onChange(html). */
 export function Editor({ defaultValue = "", onChange, minHeight = 120, lang, className }) {
   const box = React.useRef(null);
+  const seeded = React.useRef(false);
   const [ref, L] = useLang(lang);
   const t = makeT("Editor", L);
   const cmd = (c) => { document.execCommand(c); box.current && box.current.focus(); emit(); };
   const emit = () => { onChange && box.current && onChange(box.current.innerHTML); };
+  React.useLayoutEffect(() => {
+    if (!box.current || seeded.current) return;
+    box.current.innerHTML = sanitizeHtml(defaultValue);
+    seeded.current = true;
+  }, [defaultValue]);
   const B = ({ c, label, children }) => (
     <button type="button" className="cs-toolbar__btn" aria-label={label} onMouseDown={(e) => { e.preventDefault(); cmd(c); }}>{children}</button>
   );
@@ -19,8 +45,17 @@ export function Editor({ defaultValue = "", onChange, minHeight = 120, lang, cla
         <B c="italic" label={t("italic")}><i>I</i></B>
         <B c="insertUnorderedList" label={t("list")}>≔</B>
       </div>
-      <div ref={box} className="cs-editor__area" contentEditable suppressContentEditableWarning role="textbox" aria-multiline="true" aria-label={t("area")}
-        style={{ minHeight }} onInput={emit} dangerouslySetInnerHTML={{ __html: defaultValue }} />
+      <div
+        ref={box}
+        className="cs-editor__area"
+        contentEditable
+        suppressContentEditableWarning
+        role="textbox"
+        aria-multiline="true"
+        aria-label={t("area")}
+        style={{ minHeight }}
+        onInput={emit}
+      />
     </div>
   );
 }