@cyberskill/design 1.2.0 → 1.3.9

package/components/navigation/Tabs.jsx

@@ -1,10 +1,13 @@
 import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
 import { cx } from "../_utils/cx.js";
 
 /** CyberSkill Tabs — data-driven tablist, controlled by value/onChange. Ochre underline on active. */
-export function Tabs({ tabs = [], value, onChange, className, ...props }) {
+export function Tabs({ tabs = [], value, onChange, lang, className, "aria-label": ariaLabel, ...props }) {
+  const [ref, L] = useLang(lang);
+  const t = makeT("Tabs", L);
   const refs = React.useRef([]);
-  const idx = Math.max(0, tabs.findIndex((t) => t.value === value));
+  const idx = Math.max(0, tabs.findIndex((tab) => tab.value === value));
   const key = (e, i) => {
     let n = null;
     if (e.key === "ArrowRight") n = (i + 1) % tabs.length;
@@ -17,7 +20,7 @@ export function Tabs({ tabs = [], value, onChange, className, ...props }) {
     const b = refs.current[n]; if (b) b.focus();
   };
   return (
-    <div role="tablist" className={cx("cs-tabs", className)} {...props}>
+    <div ref={ref} role="tablist" aria-label={ariaLabel ?? t("list")} className={cx("cs-tabs", className)} {...props}>
       {tabs.map((t, i) => (
         <button key={t.value} type="button" role="tab" aria-selected={value === t.value} tabIndex={i === idx ? 0 : -1}
           ref={(el) => (refs.current[i] = el)} onKeyDown={(e) => key(e, i)}

package/components/navigation/Toolbar.d.ts

@@ -1,7 +1,8 @@
 import type { ReactNode } from "react";
 
-/** Horizontal action bar (role=toolbar). Items after `overflowAfter` collapse
- *  into a "⋯" menu (bilingual aria). "-" renders a separator. */
+/** Horizontal action bar (APG toolbar: arrow-key roving among controls).
+ *  Items after `overflowAfter` collapse into a ⋯ menubutton + popup menu
+ *  (bilingual aria). "-" renders a separator. */
 export type ToolbarItem = { label?: ReactNode; icon?: ReactNode; onSelect?: () => void } | "-";
 export interface ToolbarProps {
   items: ToolbarItem[];

package/components/navigation/Toolbar.jsx

@@ -2,32 +2,138 @@ import React from "react";
 import { makeT, useLang } from "../_i18n/i18n.js";
 import { cx } from "../_utils/cx.js";
 
-/** CyberSkill Toolbar — horizontal action bar; overflow items collapse into a "⋯" menu. items: {label,icon,onSelect} or "-". */
+/** CyberSkill Toolbar — horizontal action bar (APG toolbar arrows); overflow items collapse into a menubutton + popup menu. items: {label,icon,onSelect} or "-". */
 export function Toolbar({ items = [], overflowAfter, label, lang, className }) {
   const [open, setOpen] = React.useState(false);
+  const [focusIdx, setFocusIdx] = React.useState(0);
   const wrap = React.useRef(null);
+  const btnRefs = React.useRef([]);
+  const menuRefs = React.useRef([]);
   const [ref, L] = useLang(lang);
   const t = makeT("Toolbar", L);
   const cut = overflowAfter != null ? overflowAfter : items.length;
   const head = items.slice(0, cut);
   const tail = items.slice(cut).filter((x) => x !== "-");
+  const hasMore = tail.length > 0;
+
+  // Controllable tab stops: head action buttons + optional ⋯ menubutton (separators skipped).
+  const controlMeta = [];
+  head.forEach((it, i) => {
+    if (it !== "-") controlMeta.push({ kind: "head", headIndex: i });
+  });
+  if (hasMore) controlMeta.push({ kind: "more" });
+
   React.useEffect(() => {
     if (!open) return;
     const d = (e) => { if (wrap.current && !wrap.current.contains(e.target)) setOpen(false); };
     document.addEventListener("mousedown", d);
     return () => document.removeEventListener("mousedown", d);
   }, [open]);
+
+  React.useEffect(() => {
+    if (focusIdx >= controlMeta.length) setFocusIdx(Math.max(0, controlMeta.length - 1));
+  }, [focusIdx, controlMeta.length]);
+
+  const focusControl = (i) => {
+    const next = Math.max(0, Math.min(controlMeta.length - 1, i));
+    setFocusIdx(next);
+    requestAnimationFrame(() => {
+      const el = btnRefs.current[next];
+      if (el) el.focus();
+    });
+  };
+
+  const onToolbarKeyDown = (e, i) => {
+    if (e.nativeEvent.isComposing || e.keyCode === 229) return;
+    if (e.key === "ArrowRight") { e.preventDefault(); focusControl(i + 1); }
+    else if (e.key === "ArrowLeft") { e.preventDefault(); focusControl(i - 1); }
+    else if (e.key === "Home") { e.preventDefault(); focusControl(0); }
+    else if (e.key === "End") { e.preventDefault(); focusControl(controlMeta.length - 1); }
+    else if (e.key === "Escape" && open) { e.preventDefault(); setOpen(false); }
+  };
+
+  const onMenuKeyDown = (e, i) => {
+    if (e.nativeEvent.isComposing || e.keyCode === 229) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      const n = Math.min(tail.length - 1, i + 1);
+      const el = menuRefs.current[n]; if (el) el.focus();
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      const n = Math.max(0, i - 1);
+      const el = menuRefs.current[n]; if (el) el.focus();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      setOpen(false);
+      const moreIdx = controlMeta.findIndex((c) => c.kind === "more");
+      if (moreIdx >= 0) focusControl(moreIdx);
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      const el = menuRefs.current[0]; if (el) el.focus();
+    } else if (e.key === "End") {
+      e.preventDefault();
+      const el = menuRefs.current[tail.length - 1]; if (el) el.focus();
+    }
+  };
+
+  let controlI = 0;
   return (
-    <div ref={(el) => { wrap.current = el; ref.current = el; }} className={cx("cs-toolbar", className)} role="toolbar" aria-label={label}>
-      {head.map((it, i) => it === "-"
-        ? <span key={i} className="cs-toolbar__sep" aria-hidden="true" />
-        : <button key={i} type="button" className="cs-toolbar__btn" onClick={() => it.onSelect && it.onSelect()}>{it.icon}{it.label ? <span>{it.label}</span> : null}</button>)}
-      {tail.length ? (
-        <span className="cs-toolbar__more">
-          <button type="button" className="cs-toolbar__btn" aria-haspopup="menu" aria-expanded={open} aria-label={t("more")} onClick={() => setOpen((o) => !o)}>⋯</button>
-          {open ? <span className="cs-menu__list" role="menu">{tail.map((it, i) => <button key={i} type="button" role="menuitem" className="cs-menu__item" onClick={() => { setOpen(false); it.onSelect && it.onSelect(); }}>{it.label}</button>)}</span> : null}
-        </span>
-      ) : null}
+    <div ref={(el) => { wrap.current = el; ref.current = el; }} className={cx("cs-toolbar", className)} role="toolbar" aria-label={label} aria-orientation="horizontal">
+      {head.map((it, i) => {
+        if (it === "-") return <span key={"sep-" + i} className="cs-toolbar__sep" aria-hidden="true" />;
+        const ci = controlI++;
+        return (
+          <button
+            key={"btn-" + i}
+            type="button"
+            className="cs-toolbar__btn"
+            tabIndex={ci === focusIdx ? 0 : -1}
+            ref={(el) => { btnRefs.current[ci] = el; }}
+            onFocus={() => setFocusIdx(ci)}
+            onKeyDown={(e) => onToolbarKeyDown(e, ci)}
+            onClick={() => it.onSelect && it.onSelect()}
+          >{it.icon}{it.label ? <span>{it.label}</span> : null}</button>
+        );
+      })}
+      {hasMore ? (() => {
+        const ci = controlI++;
+        return (
+          <span className="cs-toolbar__more">
+            <button
+              type="button"
+              className="cs-toolbar__btn"
+              aria-haspopup="menu"
+              aria-expanded={open}
+              aria-label={t("more")}
+              tabIndex={ci === focusIdx ? 0 : -1}
+              ref={(el) => { btnRefs.current[ci] = el; }}
+              onFocus={() => setFocusIdx(ci)}
+              onKeyDown={(e) => {
+                onToolbarKeyDown(e, ci);
+                if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+                  if (!open) { e.preventDefault(); setOpen(true); requestAnimationFrame(() => { const el = menuRefs.current[0]; if (el) el.focus(); }); }
+                }
+              }}
+              onClick={() => setOpen((o) => !o)}
+            >⋯</button>
+            {open ? (
+              <span className="cs-menu__list" role="menu">
+                {tail.map((it, i) => (
+                  <button
+                    key={i}
+                    type="button"
+                    role="menuitem"
+                    className="cs-menu__item"
+                    ref={(el) => { menuRefs.current[i] = el; }}
+                    onKeyDown={(e) => onMenuKeyDown(e, i)}
+                    onClick={() => { setOpen(false); it.onSelect && it.onSelect(); }}
+                  >{it.label}</button>
+                ))}
+              </span>
+            ) : null}
+          </span>
+        );
+      })() : null}
     </div>
   );
 }

package/components/navigation/Toolbar.prompt.md

@@ -1,4 +1,4 @@
-**Toolbar** — action bar with "⋯" overflow menu and "-" separators.
+**Toolbar** — action bar with APG arrow navigation, "⋯" overflow menubutton + popup menu, and "-" separators. Escape closes the overflow menu.
 
 ```jsx
 <Toolbar label="Editor" overflowAfter={3} items={[{icon:<Icon name="edit" size="sm"/>,label:"Edit"},"-",{label:"Share"},{label:"Export"},{label:"Archive"}]}/>

package/components/navigation/navigation.card.html

@@ -11,9 +11,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; }
   .row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
 </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/shell.card.html

@@ -13,9 +13,9 @@
   .frame .cs-cmdk-scrim { position: absolute; padding-top: 14px; }
   .frame .cs-cmdk { inline-size: 100%; box-shadow: none; }
 </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/overlays/ContextMenu.d.ts

@@ -5,6 +5,8 @@ export type ContextMenuItem = { label: ReactNode; onSelect?: () => void; danger?
 export interface ContextMenuProps {
   items: ContextMenuItem[];
   children?: ReactNode;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
   className?: string;
 }
 export function ContextMenu(props: ContextMenuProps): React.ReactElement;

package/components/overlays/ContextMenu.jsx

@@ -1,9 +1,12 @@
 import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
 import { cx } from "../_utils/cx.js";
 
 /** CyberSkill ContextMenu — right-click menu scoped to its children. items: {label,onSelect,danger} or "-" separator. */
-export function ContextMenu({ items = [], children, className }) {
+export function ContextMenu({ items = [], children, lang, className }) {
   const [pos, setPos] = React.useState(null);
+  const [ref, L] = useLang(lang);
+  const t = makeT("ContextMenu", L);
   React.useEffect(() => {
     if (!pos) return;
     const close = () => setPos(null);
@@ -13,11 +16,11 @@ export function ContextMenu({ items = [], children, className }) {
     return () => { document.removeEventListener("click", close); document.removeEventListener("keydown", k); };
   }, [pos]);
   return (
-    <div className={cx("cs-ctxmenu-zone", className)}
+    <div ref={ref} className={cx("cs-ctxmenu-zone", className)}
       onContextMenu={(e) => { e.preventDefault(); const r = e.currentTarget.getBoundingClientRect(); setPos({ x: e.clientX - r.left, y: e.clientY - r.top }); }}>
       {children}
       {pos ? (
-        <div className="cs-menu__list" role="menu" style={{ position: "absolute", insetInlineStart: pos.x, insetBlockStart: pos.y }}>
+        <div className="cs-menu__list" role="menu" aria-label={t("menu")} style={{ position: "absolute", insetInlineStart: pos.x, insetBlockStart: pos.y }}>
           {items.map((it, i) => it === "-"
             ? <div key={i} className="cs-menu__sep" />
             : <button key={i} type="button" role="menuitem" className={cx("cs-menu__item", it.danger && "cs-menu__item--danger")} onClick={() => { setPos(null); it.onSelect && it.onSelect(); }}>{it.label}</button>)}

package/components/overlays/Drawer.d.ts

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

package/components/overlays/alertdialog.card.html

@@ -11,9 +11,9 @@
   .frame .cs-dialog-layer { position: absolute; }
   .frame .cs-dialog { top: 28px; }
 </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/overlays/overlays.card.html

@@ -11,9 +11,9 @@
   .frame { position: relative; overflow: hidden; height: 260px; border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); background: var(--cs-color-surface-raised); }
   .frame .cs-drawer-scrim, .frame .cs-drawer { position: absolute; animation: none; }
 </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/textfield/textfield.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: 18px 24px; max-width: 640px; }
 </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>