@cyberskill/design 1.2.0 → 1.3.8

package/components/forms/FileUpload.d.ts

@@ -9,6 +9,8 @@ export interface FileUploadProps {
   multiple?: boolean;
   onFiles?: (files: File[]) => void;
   icon?: ReactNode;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
   className?: string;
 }
 export function FileUpload(props: FileUploadProps): React.ReactElement;

package/components/forms/Form.d.ts

@@ -13,7 +13,9 @@ export interface FormProps {
   errors?: Record<string, string | undefined>;
   /** name → rule or rule[]; validated on submit. */
   rules?: Record<string, FormRule | FormRule[]>;
-  /** name → async (value, values) => message | null; runs after sync rules pass. */
+  /** name → async (value, values) => message | null; runs after sync rules pass.
+   *  While awaiting, Form sets `is-pending` / `aria-busy`, disables controls via CSS,
+   *  and ignores duplicate submits. Context exposes `pending: boolean`. */
   asyncRules?: Record<string, (value: unknown, values: Record<string, unknown>) => Promise<string | null | undefined>>;
   /** Seed for controller-registered fields. */
   initialValues?: Record<string, unknown>;

package/components/forms/Form.jsx

@@ -55,6 +55,7 @@ export function Form({ onSubmit, errors = {}, rules, asyncRules, initialValues,
   const [values, setValues] = React.useState(() => initialValues || {});
   const [ruleErrors, setRuleErrors] = React.useState({});
   const [pending, setPending] = React.useState(false);
+  const pendingRef = React.useRef(false);
   const setValue = React.useCallback((name, v) => {
     setValues((s) => (String(name).includes(".") ? setPath(s, name, v) : { ...s, [name]: v }));
     setRuleErrors((e) => (e[name] ? { ...e, [name]: undefined } : e));
@@ -96,20 +97,27 @@ export function Form({ onSubmit, errors = {}, rules, asyncRules, initialValues,
   return (
     <Ctx.Provider value={ctx}>
       <form {...props} ref={ref} className={cx("cs-form", pending && "is-pending", className)} noValidate
+        aria-busy={pending || undefined}
         onSubmit={async (e) => {
           e.preventDefault();
+          // FIND-015 / FIND-044 — lock re-entry while async validation / submit runs.
+          if (pendingRef.current) return;
           const fd = new FormData(e.currentTarget);
           const v = {}; fd.forEach((val, k) => { v[k] = val; });
           Object.assign(v, values); // controller-registered fields are the source of truth
           const errs = runRules(v);
           if (Object.keys(errs).some((k) => errs[k])) { setRuleErrors(errs); return; }
+          pendingRef.current = true;
           setPending(true);
           try {
             const aerrs = await runAsyncRules(v);
             setRuleErrors(aerrs);
             if (Object.keys(aerrs).some((k) => aerrs[k])) return;
             onSubmit && onSubmit(v);
-          } finally { setPending(false); }
+          } finally {
+            pendingRef.current = false;
+            setPending(false);
+          }
         }}>
         {keys.length ? (
           <div className="cs-form__summary" role="alert">

package/components/forms/Form.prompt.md

@@ -10,7 +10,7 @@
 
 Manual mode unchanged: omit `rules`/`name`, pass `errors={{email:"…"}}` yourself.
 
-**asyncRules:** optional map of field name → async `(value, values) => message|null`. Runs after sync `rules` pass; blocks submit while pending.
+**asyncRules:** optional map of field name → async `(value, values) => message|null`. Runs after sync `rules` pass; Form emits `is-pending` + `aria-busy`, locks controls, and refuses re-entry until the async pass finishes (FIND-015 / FIND-044). Controllers can also read `pending` from Form context.
 
 **FormFieldArray** — manage an array of row objects under `name` on the surrounding Form. Children render-prop: `({ index, item, remove, path })`.
 

package/components/forms/Mentions.d.ts

@@ -1,4 +1,4 @@
-/** Textarea with @user suggestions (typeahead on the trailing "@word"). */
+/** Textarea with @user suggestions (APG editable combobox / listbox). */
 export interface MentionsProps {
   value?: string;
   defaultValue?: string;

package/components/forms/Mentions.jsx

@@ -2,28 +2,80 @@ import React from "react";
 import { makeT, useLang } from "../_i18n/i18n.js";
 import { cx } from "../_utils/cx.js";
 
-/** CyberSkill Mentions — textarea that suggests @users while typing. */
+let mentionsUid = 0;
+
+/** CyberSkill Mentions — textarea that suggests @users while typing (APG editable combobox). */
 export function Mentions({ value, defaultValue = "", onChange, users = [], placeholder, rows = 3, lang, className }) {
   const [inner, setInner] = React.useState(defaultValue);
   const val = value != null ? value : inner;
   const set = (v) => { if (value == null) setInner(v); onChange && onChange(v); };
   const [q, setQ] = React.useState(null);
+  const [activeIndex, setActiveIndex] = React.useState(0);
+  const [listId] = React.useState(() => "cs-mentions-" + (++mentionsUid));
   const [ref, L] = useLang(lang);
   const t = makeT("Mentions", L);
   const ph = placeholder != null ? placeholder : t("placeholder");
+  const hits = q == null ? [] : users.filter((u) => u.toLowerCase().includes(q)).slice(0, 6);
+  const open = hits.length > 0;
+
+  React.useEffect(() => {
+    setActiveIndex((i) => (hits.length ? Math.min(i, hits.length - 1) : 0));
+  }, [q, users]);
+
   const onInput = (v) => {
     set(v);
     const m = /(^|\s)@(\w*)$/.exec(v);
-    setQ(m ? m[2].toLowerCase() : null);
+    const next = m ? m[2].toLowerCase() : null;
+    setQ(next);
+    if (next != null) setActiveIndex(0);
   };
-  const hits = q == null ? [] : users.filter((u) => u.toLowerCase().includes(q)).slice(0, 6);
   const pick = (u) => { set(val.replace(/(^|\s)@\w*$/, "$1@" + u + " ")); setQ(null); };
+  const optionId = (i) => listId + "-opt-" + i;
+  const onKeyDown = (e) => {
+    if (e.nativeEvent.isComposing || e.keyCode === 229) return;
+    if (!open) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.min(hits.length - 1, i + 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.max(0, i - 1));
+    } else if (e.key === "Enter") {
+      if (hits[activeIndex]) { e.preventDefault(); pick(hits[activeIndex]); }
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      setQ(null);
+    }
+  };
   return (
     <span ref={ref} className={cx("cs-mentions", className)}>
-      <textarea className="cs-field__control" rows={rows} value={val} placeholder={ph} onChange={(e) => onInput(e.target.value)} />
-      {hits.length ? (
-        <span className="cs-mentions__pop" role="listbox">
-          {hits.map((u) => <button key={u} type="button" role="option" onMouseDown={(e) => { e.preventDefault(); pick(u); }}>@{u}</button>)}
+      <textarea
+        className="cs-field__control"
+        rows={rows}
+        value={val}
+        placeholder={ph}
+        role="combobox"
+        aria-autocomplete="list"
+        aria-expanded={open}
+        aria-controls={listId}
+        aria-activedescendant={open && hits[activeIndex] ? optionId(activeIndex) : undefined}
+        onChange={(e) => onInput(e.target.value)}
+        onKeyDown={onKeyDown}
+      />
+      {open ? (
+        <span className="cs-mentions__pop" role="listbox" id={listId}>
+          {hits.map((u, i) => (
+            <button
+              key={u}
+              type="button"
+              id={optionId(i)}
+              role="option"
+              aria-selected={i === activeIndex}
+              className={cx(i === activeIndex && "hl")}
+              onMouseEnter={() => setActiveIndex(i)}
+              onMouseDown={(e) => { e.preventDefault(); pick(u); }}
+            >@{u}</button>
+          ))}
         </span>
       ) : null}
     </span>

package/components/forms/Mentions.prompt.md

@@ -1,4 +1,6 @@
-**Mentions** — textarea suggesting @users as you type.
+**Mentions** — textarea suggesting @users as you type (APG editable combobox).
+
+Keyboard: ArrowUp/Down move the active suggestion (`aria-activedescendant`); Enter selects; Escape closes. Mouse click still picks.
 
 ```jsx
 <Mentions users={["anle","baovu","lumi"]} placeholder="Add a note — @ to mention"/>

package/components/forms/Rating.d.ts

@@ -1,5 +1,6 @@
-/** Whole-star rating (radiogroup). Controlled (value/onChange) or uncontrolled
- *  (defaultValue). Clicking the current value clears to 0. readOnly for display. */
+/** Whole-star rating (APG radiogroup: roving tabindex + arrow keys). Controlled
+ *  (value/onChange) or uncontrolled (defaultValue). Clicking the current value
+ *  clears to 0. readOnly for display. */
 export interface RatingProps {
   value?: number;
   defaultValue?: number;

package/components/forms/Rating.jsx

@@ -3,17 +3,48 @@ import { makeT, useLang } from "../_i18n/i18n.js";
 import { cx } from "../_utils/cx.js";
 const STAR = "M12 2l2.9 6.2 6.6.8-4.9 4.6 1.3 6.5L12 16.9 6.1 20l1.3-6.5L2.5 9l6.6-.8z";
 
-/** CyberSkill Rating — whole-star rating. Controlled or uncontrolled; readOnly for display. Click the current value to clear. */
+/** CyberSkill Rating — whole-star rating (APG radiogroup: roving tabindex + arrows). Controlled or uncontrolled; readOnly for display. Click the current value to clear. */
 export function Rating({ value, defaultValue = 0, onChange, max = 5, readOnly = false, label, lang, className }) {
   const [inner, setInner] = React.useState(defaultValue);
   const val = value != null ? value : inner;
-  const set = (n) => { if (readOnly) return; const v = n === val ? 0 : n; if (value == null) setInner(v); onChange && onChange(v); };
+  const commit = (n) => { if (readOnly) return; if (value == null) setInner(n); onChange && onChange(n); };
+  const set = (n) => commit(n === val ? 0 : n);
   const [ref, L] = useLang(lang);
   const lbl = label != null ? label : makeT("Rating", L)("label");
+  const refs = React.useRef([]);
+  const focusIdx = val > 0 ? Math.min(max, val) - 1 : 0;
+
+  const move = (from, delta) => {
+    if (readOnly) return;
+    const next = Math.max(0, Math.min(max - 1, from + delta));
+    commit(next + 1);
+    const b = refs.current[next];
+    if (b) b.focus();
+  };
+
+  const onKeyDown = (e, i) => {
+    if (readOnly || e.nativeEvent.isComposing || e.keyCode === 229) return;
+    if (e.key === "ArrowRight" || e.key === "ArrowUp") { e.preventDefault(); move(i, 1); }
+    else if (e.key === "ArrowLeft" || e.key === "ArrowDown") { e.preventDefault(); move(i, -1); }
+    else if (e.key === "Home") { e.preventDefault(); move(i, -i); }
+    else if (e.key === "End") { e.preventDefault(); move(i, max - 1 - i); }
+  };
+
   return (
     <div ref={ref} className={cx("cs-rating", className)} role="radiogroup" aria-label={lbl + ": " + val + " / " + max} data-readonly={readOnly ? "true" : undefined}>
       {Array.from({ length: max }).map((_, i) => (
-        <button key={i} type="button" role="radio" aria-checked={i < val} aria-label={(i + 1) + " / " + max} className={i < val ? "on" : undefined} onClick={() => set(i + 1)} tabIndex={readOnly ? -1 : 0}>
+        <button
+          key={i}
+          type="button"
+          role="radio"
+          aria-checked={i < val}
+          aria-label={(i + 1) + " / " + max}
+          className={i < val ? "on" : undefined}
+          onClick={() => set(i + 1)}
+          tabIndex={readOnly ? -1 : (i === focusIdx ? 0 : -1)}
+          ref={(el) => { refs.current[i] = el; }}
+          onKeyDown={(e) => onKeyDown(e, i)}
+        >
           <svg width="22" height="22" viewBox="0 0 24 24" fill={i < val ? "currentColor" : "none"} stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" aria-hidden="true"><path d={STAR} /></svg>
         </button>
       ))}

package/components/forms/Rating.prompt.md

@@ -1,4 +1,4 @@
-**Rating** — whole-star rating (ochre stars). Controlled or uncontrolled; `readOnly` for display; click current value to clear. Bilingual aria via the registry.
+**Rating** — whole-star rating (ochre stars). APG radiogroup: one tab stop, ArrowLeft/Right (and Up/Down) change value. Controlled or uncontrolled; `readOnly` for display; click current value to clear. Bilingual aria via the registry.
 
 ```jsx
 <Rating defaultValue={4} onChange={setStars}/>

package/components/forms/Select.d.ts

@@ -14,6 +14,8 @@ export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElemen
   /** Options as data; alternatively pass <option> children. */
   options?: SelectOption[];
   children?: ReactNode;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
 }
 
 export function Select(props: SelectProps): React.ReactElement;

package/components/forms/Select.jsx

@@ -1,20 +1,24 @@
 import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
 import { cx } from "../_utils/cx.js";
 
 /** CyberSkill Select — native <select> in the .cs-field frame with a chevron.
  *  Pass `options` [{value,label}] or <option> children. */
-export function Select({ id, label, description, error, options, children, disabled = false, className, ...props }) {
+export function Select({ id, label, description, error, options, children, disabled = false, lang, className, placeholder, ...props }) {
+  const [ref, L] = useLang(lang);
+  const t = makeT("Select", L);
   const gid = React.useId();
   const sid = id ?? gid;
   const descId = description ? sid + "-desc" : undefined;
   const errId = error ? sid + "-err" : undefined;
   const describedBy = [descId, errId].filter(Boolean).join(" ") || undefined;
   return (
-    <label className={cx("cs-field", disabled && "is-disabled", error && "is-invalid", className)} htmlFor={sid}>
+    <label ref={ref} className={cx("cs-field", disabled && "is-disabled", error && "is-invalid", className)} htmlFor={sid}>
       {label ? <span className="cs-field__label">{label}</span> : null}
       {description ? <span id={descId} className="cs-field__description">{description}</span> : null}
       <span className="cs-select">
         <select {...props} id={sid} disabled={disabled} aria-invalid={error ? true : undefined} aria-describedby={describedBy} className="cs-field__control">
+          {placeholder != null || !children ? <option value="" disabled hidden>{placeholder ?? t("placeholder")}</option> : null}
           {options ? options.map((o) => <option key={o.value} value={o.value}>{o.label}</option>) : children}
         </select>
         <span className="cs-select__chevron" aria-hidden="true">

package/components/forms/Slider.d.ts

@@ -4,3 +4,5 @@ import type * as React from "react";
  *  range props (min, max, step, value, defaultValue, onChange). */
 export interface SliderProps extends React.InputHTMLAttributes<HTMLInputElement> {}
 export function Slider(props: SliderProps): React.ReactElement;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;

package/components/forms/Slider.jsx

@@ -1,8 +1,11 @@
 import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
 import { cx } from "../_utils/cx.js";
 
 /** CyberSkill Slider — brand-tinted native range input. Pass native props (min/max/step/value/onChange). */
 // `children` is destructured but never rendered on purpose: keeps stray children out of {...props} → void <input>.
-export function Slider({ className, children, ...props }) {
-  return <input type="range" className={cx("cs-slider", className)} {...props} />;
+export function Slider({ className, children, lang, "aria-label": ariaLabel, ...props }) {
+  const [ref, L] = useLang(lang);
+  const t = makeT("Slider", L);
+  return <input ref={ref} type="range" className={cx("cs-slider", className)} aria-label={ariaLabel ?? t("label")} {...props} />;
 }

package/components/forms/Switch.d.ts

@@ -7,6 +7,8 @@ import type { ReactNode } from "react";
  */
 export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
   label?: ReactNode;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
 }
 
 export function Switch(props: SwitchProps): React.ReactElement;

package/components/forms/Switch.jsx

@@ -1,23 +1,21 @@
 import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
 import { cx } from "../_utils/cx.js";
 
-let warnedNameless = false;
-
 /** CyberSkill Switch — accessible toggle (role="switch"); Umber on, Ochre knob-track in dark. */
 // `children` is destructured but never rendered on purpose: keeps stray children out of {...props} → void <input>.
-export function Switch({ label, disabled = false, className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }) {
+export function Switch({ label, disabled = false, className, children, lang, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }) {
+  const [ref, L] = useLang(lang);
+  const t = makeT("Switch", L);
   const named = !!(label || ariaLabel || ariaLabelledby);
-  if (!named && !warnedNameless && typeof console !== "undefined" && console.warn) {
-    warnedNameless = true;
-    console.warn("CyberSkill Switch: render with label, aria-label, or aria-labelledby.");
-  }
+  const fallback = props.checked || props.defaultChecked ? t("on") : t("off");
   return (
-    <label className={cx("cs-switch", disabled && "is-disabled", className)}>
+    <label ref={ref} className={cx("cs-switch", disabled && "is-disabled", className)}>
       <input
         type="checkbox"
         role="switch"
         disabled={disabled}
-        aria-label={ariaLabel}
+        aria-label={ariaLabel ?? (named ? undefined : fallback)}
         aria-labelledby={ariaLabelledby}
         {...props}
       />

package/components/forms/Toggle.d.ts

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

package/components/forms/Toggle.jsx

@@ -1,13 +1,25 @@
 import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
 import { cx } from "../_utils/cx.js";
 
 /** CyberSkill Toggle — a single pressable on/off button (≠ Switch: no form semantics; ≠ SegmentedControl: standalone). */
-export function Toggle({ pressed, defaultPressed = false, onChange, icon, children, disabled = false, className, ...props }) {
+export function Toggle({ pressed, defaultPressed = false, onChange, icon, children, disabled = false, lang, className, "aria-label": ariaLabel, ...props }) {
   const [inner, setInner] = React.useState(defaultPressed);
   const on = pressed != null ? pressed : inner;
+  const [ref, L] = useLang(lang);
+  const t = makeT("Toggle", L);
   const flip = () => { const v = !on; if (pressed == null) setInner(v); onChange && onChange(v); };
   return (
-    <button type="button" className={cx("cs-toggle", className)} aria-pressed={on} disabled={disabled} onClick={flip} {...props}>
+    <button
+      ref={ref}
+      type="button"
+      className={cx("cs-toggle", className)}
+      aria-pressed={on}
+      aria-label={ariaLabel ?? (on ? t("pressed") : t("unpressed"))}
+      disabled={disabled}
+      onClick={flip}
+      {...props}
+    >
       {icon ? <span aria-hidden="true" style={{ display: "inline-flex" }}>{icon}</span> : null}
       {children}
     </button>

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

@@ -10,9 +10,9 @@
   .row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
   .lbl { width: 100%; font: 600 11px/1 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .09em; color: var(--cs-color-text-muted); }
 </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/forms.card.html

@@ -9,9 +9,9 @@
   body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; }
   .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; max-width: 640px; align-items: start; }
 </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/icon/Icon.d.ts

@@ -6,7 +6,7 @@ export type IconName =
   | "search" | "sliders" | "upload" | "download" | "calendar"
   | "user" | "plus" | "trash" | "external" | "menu"
   | "chevron-down" | "chevron-up" | "chevron-left" | "chevron-right"
-  | "edit" | "copy" | "info" | "alert-triangle";
+  | "edit" | "copy" | "info" | "alert-triangle" | "pin";
 
 /**
  * CyberSkill line-icon renderer. One component drives the whole in-repo icon set

package/components/icon/Icon.prompt.md

@@ -5,4 +5,4 @@
 <Icon name="sparkle" size="lg" label="Wish" /> {/* meaningful */}
 ```
 
-Set: `close · sun · moon · arrow-right · check · sparkle · chat · sound-on · sound-off` + v2.0 extension `search · sliders · upload · download · calendar · user · plus · trash · external · menu` + v2.13 `chevron-down/up/left/right · edit · copy · info · alert-triangle` (same grammar). `sparkle` is the brand's "wish" glyph. Colour follows the surrounding text token — set `color` on a parent to recolour.
+Set: `close · sun · moon · arrow-right · check · sparkle · chat · sound-on · sound-off` + v2.0 extension `search · sliders · upload · download · calendar · user · plus · trash · external · menu` + v2.13 `chevron-down/up/left/right · edit · copy · info · alert-triangle · pin` (same grammar). `sparkle` is the brand's "wish" glyph. Colour follows the surrounding text token — set `color` on a parent to recolour.

package/components/icon/icon.card.html

@@ -13,9 +13,9 @@
   .cell .g { color: var(--cs-color-brand-umber); }
   .cell:nth-child(6) .g { color: var(--cs-color-brand-ochre); }
 </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/logo/logo.card.html

@@ -15,9 +15,9 @@
   .lockup b { font: 800 22px/1 var(--cs-font-family-ui); color: var(--cs-color-brand-umber); letter-spacing: -.01em; }
   .cap { font: 500 12px/1.4 var(--cs-font-family-ui); color: var(--cs-color-text-muted); }
 </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/navigation/CommandPalette.d.ts

@@ -14,6 +14,8 @@ export interface CommandPaletteProps {
   onClose?: () => void;
   placeholder?: string;
   groups: CommandGroup[];
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
   className?: string;
 }
 export function CommandPalette(props: CommandPaletteProps): React.ReactElement | null;

package/components/navigation/Menu.d.ts

@@ -12,6 +12,8 @@ export interface MenuProps {
   align?: "start" | "end";
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
   className?: string;
 }
 export function Menu(props: MenuProps): React.ReactElement;

package/components/navigation/Menu.jsx

@@ -1,25 +1,72 @@
 import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
 import { cx } from "../_utils/cx.js";
 
 /** CyberSkill Menu — dropdown. Provide a `trigger` element; compose MenuItem children. */
-export function Menu({ trigger, children, align = "start", open: controlledOpen, onOpenChange, className }) {
+export function Menu({ trigger, children, align = "start", open: controlledOpen, onOpenChange, lang, className }) {
   const [uOpen, setUOpen] = React.useState(false);
   const open = controlledOpen != null ? controlledOpen : uOpen;
   const set = (v) => { onOpenChange ? onOpenChange(v) : setUOpen(v); };
-  const ref = React.useRef(null);
+  const [ref, L] = useLang(lang);
+  const t = makeT("Menu", L);
+  const triggerRef = React.useRef(null);
+  const listRef = React.useRef(null);
+
   React.useEffect(() => {
     if (!open) return;
+    const items = () => listRef.current
+      ? [...listRef.current.querySelectorAll('[role="menuitem"]:not([disabled])')]
+      : [];
+    // FIND-040 — move focus into the menu on open.
+    const first = items()[0];
+    if (first && first.focus) first.focus();
+
     const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) set(false); };
-    const onKey = (e) => { if (e.key === "Escape") set(false); };
+    const onKey = (e) => {
+      const opts = items();
+      if (e.key === "Escape") {
+        e.preventDefault();
+        set(false);
+        const el = triggerRef.current;
+        if (el && el.focus) el.focus();
+        return;
+      }
+      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();
+      }
+    };
     document.addEventListener("mousedown", onDoc);
     document.addEventListener("keydown", onKey);
-    return () => { document.removeEventListener("mousedown", onDoc); document.removeEventListener("keydown", onKey); };
+    return () => {
+      document.removeEventListener("mousedown", onDoc);
+      document.removeEventListener("keydown", onKey);
+    };
   }, [open]);
+
   const toggle = () => set(!open);
   // ARIA attrs must live on the interactive trigger (button), not a wrapping <span>
   // — axe aria-allowed-attr flags aria-haspopup/aria-expanded on generic elements.
   const triggerNode = React.isValidElement(trigger)
     ? React.cloneElement(trigger, {
+        ref: (node) => {
+          triggerRef.current = node;
+          const r = trigger.ref;
+          if (typeof r === "function") r(node);
+          else if (r && typeof r === "object") r.current = node;
+        },
         "aria-haspopup": "menu",
         "aria-expanded": open,
         onClick: (e) => {
@@ -27,12 +74,19 @@ export function Menu({ trigger, children, align = "start", open: controlledOpen,
           if (!e.defaultPrevented) toggle();
         },
       })
-    : <button type="button" aria-haspopup="menu" aria-expanded={open} onClick={toggle}>{trigger}</button>;
+    : <button type="button" ref={triggerRef} aria-haspopup="menu" aria-expanded={open} onClick={toggle}>{trigger}</button>;
   return (
     <div className={cx("cs-menu", className)} ref={ref}>
       {triggerNode}
       {open ? (
-        <div className={cx("cs-menu__list", align === "end" && "cs-menu__list--end")} role="menu">{children}</div>
+        <div
+          ref={listRef}
+          className={cx("cs-menu__list", align === "end" && "cs-menu__list--end")}
+          role="menu"
+          aria-label={t("menu")}
+        >
+          {children}
+        </div>
       ) : null}
     </div>
   );

package/components/navigation/Steps.d.ts

@@ -8,6 +8,8 @@ export interface StepItem { title: ReactNode; body?: ReactNode; n?: ReactNode; }
 export interface StepsProps {
   steps: StepItem[];
   current?: number;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
   className?: string;
 }
 export function Steps(props: StepsProps): React.ReactElement;

package/components/navigation/Steps.jsx

@@ -1,14 +1,17 @@
 import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
 import { cx } from "../_utils/cx.js";
 
 /** CyberSkill Steps — horizontal progress stepper. Steps before `current` are done, `current` is active. */
-export function Steps({ steps = [], current = 0, className }) {
+export function Steps({ steps = [], current = 0, lang, className }) {
+  const [ref, L] = useLang(lang);
+  const t = makeT("Steps", L);
   return (
-    <div className={cx("cs-steps", className)}>
+    <div ref={ref} className={cx("cs-steps", className)} role="list" aria-label={t("label")}>
       {steps.map((s, i) => {
         const state = i < current ? "done" : i === current ? "active" : "todo";
         return (
-          <div key={i} className={cx("cs-step", `cs-step--${state}`)}>
+          <div key={i} className={cx("cs-step", `cs-step--${state}`)} role="listitem">
             <span className="cs-step__marker">{state === "done" ? "✓" : s.n || i + 1}</span>
             <span className="cs-step__title">{s.title}</span>
             {s.body ? <span className="cs-step__body">{s.body}</span> : null}

package/components/navigation/Tabs.d.ts

@@ -11,6 +11,8 @@ export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "o
   tabs: TabItem[];
   value?: string;
   onChange?: (value: string) => void;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
 }
 export function Tabs(props: TabsProps): React.ReactElement;