@cyberskill/design 1.2.0 → 1.3.8

package/components/data/Tree.jsx

@@ -1,23 +1,144 @@
 import React from "react";
 import { cx } from "../_utils/cx.js";
 
-function Node({ n, depth, selected, onSelect, defaultOpen }) {
-  const [open, setOpen] = React.useState(!!defaultOpen);
-  const kids = n.children || [];
-  return (
-    <li role="treeitem" aria-expanded={kids.length ? open : undefined} aria-selected={selected === n.key}>
-      <span className={cx("cs-tree__row", selected === n.key && "is-selected")} style={{ paddingInlineStart: depth * 18 + 6 }}>
-        {kids.length ? (
-          <button type="button" className="cs-tree__twist" aria-hidden="true" tabIndex={-1} onClick={() => setOpen((o) => !o)}>{open ? "▾" : "▸"}</button>
-        ) : <span className="cs-tree__twist" aria-hidden="true" />}
-        <button type="button" className="cs-tree__label" onClick={() => { onSelect && onSelect(n.key, n); if (kids.length) setOpen((o) => !o); }}>{n.label}</button>
-      </span>
-      {kids.length && open ? <ul role="group">{kids.map((c) => <Node key={c.key} n={c} depth={depth + 1} selected={selected} onSelect={onSelect} defaultOpen={defaultOpen} />)}</ul> : null}
-    </li>
-  );
+function collectVisible(nodes, openMap, out = []) {
+  for (const n of nodes) {
+    out.push(n);
+    const kids = n.children || [];
+    if (kids.length && openMap[n.key]) collectVisible(kids, openMap, out);
+  }
+  return out;
 }
 
-/** CyberSkill Tree — expandable hierarchy. nodes: {key,label,children[]}. Single select via onSelect. */
+function parentOf(nodes, key, parent = null) {
+  for (const n of nodes) {
+    if (n.key === key) return parent;
+    const kids = n.children || [];
+    if (kids.length) {
+      const p = parentOf(kids, key, n);
+      if (p !== undefined) return p;
+    }
+  }
+  return undefined;
+}
+
+function findNode(nodes, key) {
+  for (const n of nodes) {
+    if (n.key === key) return n;
+    const kids = n.children || [];
+    if (kids.length) {
+      const hit = findNode(kids, key);
+      if (hit) return hit;
+    }
+  }
+  return null;
+}
+
+function seedOpen(nodes, defaultOpen, map = {}) {
+  for (const n of nodes) {
+    const kids = n.children || [];
+    if (kids.length) {
+      map[n.key] = !!defaultOpen;
+      seedOpen(kids, defaultOpen, map);
+    }
+  }
+  return map;
+}
+
+/** CyberSkill Tree — expandable hierarchy with APG tree keyboard (roving tabindex + arrows). nodes: {key,label,children[]}. Single select via onSelect. */
 export function Tree({ nodes = [], selected, onSelect, defaultOpen = false, className }) {
-  return <ul role="tree" className={cx("cs-tree", className)}>{nodes.map((n) => <Node key={n.key} n={n} depth={0} selected={selected} onSelect={onSelect} defaultOpen={defaultOpen} />)}</ul>;
+  const [openMap, setOpenMap] = React.useState(() => seedOpen(nodes, defaultOpen));
+  const [focusKey, setFocusKey] = React.useState(() => {
+    if (selected && findNode(nodes, selected)) return selected;
+    return nodes[0] ? nodes[0].key : null;
+  });
+  const itemRefs = React.useRef({});
+
+  React.useEffect(() => {
+    setOpenMap((prev) => {
+      const next = seedOpen(nodes, defaultOpen);
+      for (const k of Object.keys(next)) if (k in prev) next[k] = prev[k];
+      return next;
+    });
+  }, [nodes, defaultOpen]);
+
+  const visible = React.useMemo(() => collectVisible(nodes, openMap), [nodes, openMap]);
+  React.useEffect(() => {
+    if (!visible.length) { setFocusKey(null); return; }
+    if (!focusKey || !visible.some((n) => n.key === focusKey)) setFocusKey(visible[0].key);
+  }, [visible, focusKey]);
+
+  const toggle = (key) => setOpenMap((m) => ({ ...m, [key]: !m[key] }));
+
+  const focusItem = (key) => {
+    setFocusKey(key);
+    requestAnimationFrame(() => {
+      const el = itemRefs.current[key];
+      if (el) el.focus();
+    });
+  };
+
+  const onKeyDown = (e, key) => {
+    if (e.nativeEvent.isComposing || e.keyCode === 229) return;
+    const idx = visible.findIndex((n) => n.key === key);
+    if (idx < 0) return;
+    const node = visible[idx];
+    const kids = node.children || [];
+    const open = !!openMap[key];
+
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      if (idx < visible.length - 1) focusItem(visible[idx + 1].key);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      if (idx > 0) focusItem(visible[idx - 1].key);
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      focusItem(visible[0].key);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      focusItem(visible[visible.length - 1].key);
+    } else if (e.key === "ArrowRight") {
+      e.preventDefault();
+      if (kids.length && !open) toggle(key);
+      else if (kids.length && open) focusItem(kids[0].key);
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      if (kids.length && open) toggle(key);
+      else {
+        const p = parentOf(nodes, key);
+        if (p) focusItem(p.key);
+      }
+    } else if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onSelect && onSelect(key, node);
+      if (kids.length) toggle(key);
+    }
+  };
+
+  const renderNodes = (list, depth) => list.map((n) => {
+    const kids = n.children || [];
+    const open = !!openMap[n.key];
+    return (
+      <li key={n.key} role="treeitem" aria-expanded={kids.length ? open : undefined} aria-selected={selected === n.key}>
+        <span className={cx("cs-tree__row", selected === n.key && "is-selected")} style={{ paddingInlineStart: depth * 18 + 6 }}>
+          {kids.length ? (
+            <button type="button" className="cs-tree__twist" aria-hidden="true" tabIndex={-1} onClick={() => toggle(n.key)}>{open ? "▾" : "▸"}</button>
+          ) : <span className="cs-tree__twist" aria-hidden="true" />}
+          <button
+            type="button"
+            className="cs-tree__label"
+            tabIndex={focusKey === n.key ? 0 : -1}
+            ref={(el) => { itemRefs.current[n.key] = el; }}
+            onClick={() => { onSelect && onSelect(n.key, n); if (kids.length) toggle(n.key); }}
+            onKeyDown={(e) => onKeyDown(e, n.key)}
+            onFocus={() => setFocusKey(n.key)}
+          >{n.label}</button>
+        </span>
+        {kids.length && open ? <ul role="group">{renderNodes(kids, depth + 1)}</ul> : null}
+      </li>
+    );
+  });
+
+  return <ul role="tree" className={cx("cs-tree", className)}>{renderNodes(nodes, 0)}</ul>;
 }

package/components/data/Tree.prompt.md

@@ -1,4 +1,4 @@
-**Tree** — expandable hierarchy with single select.
+**Tree** — expandable hierarchy with APG keyboard (ArrowUp/Down move, ArrowRight/Left expand-collapse, Home/End) and single select.
 
 ```jsx
 <Tree selected={k} onSelect={setK} nodes={[{key:"p",label:"Platform",children:[{key:"ds",label:"Design System"}]}]}/>

package/components/data/collections.card.html

@@ -10,9 +10,9 @@
   .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; }
   .blk { margin-bottom: 20px; }
 </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/data/data.card.html

@@ -11,9 +11,9 @@
   .stats { display: flex; gap: 26px; align-items: center; }
   .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; }
 </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/datatable/DataTable.d.ts

@@ -8,9 +8,17 @@ export interface DataTableColumn<Row> {
   render?: (row: Row) => ReactNode;
 }
 
+/**
+ * Async triad for collection surfaces (FIND-020). Prefer composing existing
+ * feedback: Skeleton for loading, Result for error, emptyState for idle empty.
+ * Idle is the default — omit `state` for static tables.
+ */
+export type DataTableState = "idle" | "loading" | "error";
+
 /**
  * Enterprise data table: caption, scoped column headers, per-column render, and
- * an empty state. Dense content — keep it on a solid surface (no glass).
+ * idle / loading / error / empty states. Dense content — keep it on a solid
+ * surface (no glass).
  */
 export interface DataTableProps<Row extends Record<string, unknown>> {
   caption?: ReactNode;
@@ -19,6 +27,21 @@ export interface DataTableProps<Row extends Record<string, unknown>> {
   /** Field used as React key. Default "id". */
   rowKey?: keyof Row & string;
   emptyState?: ReactNode;
+  /**
+   * Async data ownership. Default `"idle"`.
+   * - `loading` — Skeleton rows (or `loadingState`) + polite status text
+   * - `error` — Result (or `errorState`) with `role="alert"`
+   * - `idle` — rows or empty cell
+   */
+  state?: DataTableState;
+  /** Override the default Result error view. */
+  errorState?: ReactNode;
+  /** Override the default Skeleton-row loading view. */
+  loadingState?: ReactNode;
+  /** Skeleton row count when `state="loading"` and no `loadingState`. Default 5. */
+  loadingRows?: number;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
   className?: string;
 }
 

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.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,14 +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 }) {
+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(clamped)} aria-valuemin={0} aria-valuemax={safeMax} 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,7 +13,10 @@ 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); };