@cyberskill/design 1.0.0 → 1.1.1

package/components/forms/InputGroup.prompt.md

@@ -1,6 +1,6 @@
-**InputGroup** — input with prefix/suffix addons, clearable ×, password reveal. Bilingual button labels via the registry.
+**InputGroup** — input with prefix/suffix addons, clearable ×, password reveal. Pass `label` for a visible field name; bilingual button labels via the registry.
 
 ```jsx
-<InputGroup prefix="https://" suffix=".world" defaultValue="cyberskill" clearable/>
-<InputGroup password placeholder="Password"/>
+<InputGroup label="Host" prefix="https://" suffix=".world" defaultValue="cyberskill" clearable/>
+<InputGroup label="Password" password placeholder="Password"/>
 ```

package/components/forms/NativeSelect.d.ts

@@ -0,0 +1,22 @@
+import type * as React from "react";
+import type { ReactNode } from "react";
+
+export interface NativeSelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+/**
+ * Progressive-enhancement native <select> styled to CS tokens beside Select.
+ * Leaner chrome: size · label · error (no description slot).
+ */
+export interface NativeSelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size"> {
+  label?: ReactNode;
+  error?: ReactNode;
+  options?: NativeSelectOption[];
+  size?: "sm" | "md";
+  children?: ReactNode;
+}
+
+export function NativeSelect(props: NativeSelectProps): React.ReactElement;

package/components/forms/NativeSelect.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { NativeSelect } from './NativeSelect.jsx'
+
+/**
+ * Code Connect stub — NativeSelect
+ * Prop maps stay minimal until the matching Figma library component is published;
+ * then set nodeId in code-connect/node-map.json and re-run generate-code-connect.
+ */
+figma.connect(NativeSelect, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-60', {
+  example: () => <NativeSelect />,
+  imports: ["import { NativeSelect } from '@cyberskill/design'"],
+})

package/components/forms/NativeSelect.jsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/**
+ * CyberSkill NativeSelect — progressive-enhancement native <select> styled to
+ * CS tokens beside Select. Leaner field chrome (size + label + error); pass
+ * `options` [{value,label}] (preferred) or <option> children.
+ */
+export function NativeSelect({
+  id,
+  label,
+  error,
+  options,
+  children,
+  disabled = false,
+  size = "md",
+  className,
+  value,
+  defaultValue,
+  onChange,
+  ...props
+}) {
+  const gid = React.useId();
+  const sid = id ?? gid;
+  const errId = error ? sid + "-err" : undefined;
+  return (
+    <label className={cx("cs-field", "cs-native-select-field", disabled && "is-disabled", error && "is-invalid", className)} htmlFor={sid}>
+      {label ? <span className="cs-field__label">{label}</span> : null}
+      <span className={cx("cs-native-select", `cs-native-select--${size}`)}>
+        <select
+          {...props}
+          id={sid}
+          disabled={disabled}
+          value={value}
+          defaultValue={defaultValue}
+          onChange={onChange}
+          aria-invalid={error ? true : undefined}
+          aria-describedby={errId}
+          className="cs-field__control"
+        >
+          {options
+            ? options.map((o) => (
+                <option key={o.value} value={o.value} disabled={o.disabled}>
+                  {o.label}
+                </option>
+              ))
+            : children}
+        </select>
+        <span className="cs-native-select__chevron" aria-hidden="true">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6" /></svg>
+        </span>
+      </span>
+      {error ? <span id={errId} className="cs-field__error" role="alert">{error}</span> : null}
+    </label>
+  );
+}

package/components/forms/NativeSelect.prompt.md

@@ -0,0 +1,10 @@
+**NativeSelect** — progressive-enhancement native `<select>` styled to CS tokens beside Select. Supports `size`, label, and inline error.
+
+```jsx
+<NativeSelect
+  label="Squad"
+  size="sm"
+  options={[{value:"plat",label:"Platform"},{value:"ai",label:"AI"}]}
+  defaultValue="ai"
+/>
+```

package/components/forms/NumberField.d.ts

@@ -3,12 +3,17 @@ import type * as React from "react";
 /** Numeric stepper with −/+ buttons, keyboard entry, and min/max clamping.
  *  Controlled via value/onChange or uncontrolled. */
 export interface NumberFieldProps {
+  id?: string;
+  /** Visible field label (associates via htmlFor). When omitted, the input uses the bilingual "value" aria-label. */
+  label?: string;
   value?: number;
   onChange?: (value: number) => void;
   min?: number;
   max?: number;
   step?: number;
   disabled?: boolean;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
   className?: string;
 }
 export function NumberField(props: NumberFieldProps): React.ReactElement;

package/components/forms/NumberField.jsx

@@ -4,18 +4,62 @@ import { cx } from "../_utils/cx.js";
 
 /** CyberSkill NumberField — numeric stepper with −/+ buttons and clamping. */
 // `children` is destructured but never rendered on purpose: keeps stray children out of {...props} → void <input>.
-export function NumberField({ value, onChange, min, max, step = 1, disabled = false, lang, className, children, ...props }) {
+export function NumberField({
+  id,
+  label,
+  value,
+  onChange,
+  min,
+  max,
+  step = 1,
+  disabled = false,
+  lang,
+  className,
+  children,
+  ...props
+}) {
   const [inner, setInner] = React.useState(0);
   const val = value != null ? value : inner;
-  const clamp = (n) => { if (min != null) n = Math.max(min, n); if (max != null) n = Math.min(max, n); return n; };
-  const set = (n) => { const c = clamp(n); onChange ? onChange(c) : setInner(c); };
+  const clamp = (n) => {
+    if (min != null) n = Math.max(min, n);
+    if (max != null) n = Math.min(max, n);
+    return n;
+  };
+  const set = (n) => {
+    const c = clamp(n);
+    onChange ? onChange(c) : setInner(c);
+  };
   const [ref, L] = useLang(lang);
   const t = makeT("NumberField", L);
+  const gid = React.useId();
+  const sid = id ?? gid;
   return (
-    <div ref={ref} className={cx("cs-stepper", className)}>
-      <button type="button" aria-label={t("decrease")} disabled={disabled || (min != null && val <= min)} onClick={() => set(val - step)}>−</button>
-      <input type="number" value={val} min={min} max={max} step={step} disabled={disabled} onChange={(e) => set(Number(e.target.value))} {...props} />
-      <button type="button" aria-label={t("increase")} disabled={disabled || (max != null && val >= max)} onClick={() => set(val + step)}>+</button>
+    <div ref={ref} className={cx("cs-field", disabled && "is-disabled", className)}>
+      {label ? (
+        <label className="cs-field__label" htmlFor={sid}>
+          {label}
+        </label>
+      ) : null}
+      <div className="cs-stepper">
+        <button type="button" aria-label={t("decrease")} disabled={disabled || (min != null && val <= min)} onClick={() => set(val - step)}>
+          −
+        </button>
+        <input
+          {...props}
+          id={sid}
+          type="number"
+          value={val}
+          min={min}
+          max={max}
+          step={step}
+          disabled={disabled}
+          aria-label={label ? undefined : t("value")}
+          onChange={(e) => set(Number(e.target.value))}
+        />
+        <button type="button" aria-label={t("increase")} disabled={disabled || (max != null && val >= max)} onClick={() => set(val + step)}>
+          +
+        </button>
+      </div>
     </div>
   );
 }

package/components/forms/NumberField.prompt.md

@@ -1,5 +1,5 @@
-**NumberField** — numeric stepper with −/+ buttons and min/max clamping.
+**NumberField** — numeric stepper with −/+ buttons and min/max clamping. Pass `label` for a visible field name; bilingual decrease/increase/value labels via the registry.
 
 ```jsx
-<NumberField value={seats} onChange={setSeats} min={1} max={20} />
+<NumberField label="Seats" value={seats} onChange={setSeats} min={1} max={20} />
 ```

package/components/forms/SegmentedControl.jsx

@@ -19,7 +19,7 @@ export function SegmentedControl({ options = [], value, onChange, className, ...
   return (
     <div role="tablist" className={cx("cs-segmented", className)} {...props}>
       {options.map((o, i) => (
-        <button key={o.value} type="button" role="tab" aria-selected={value === o.value} aria-pressed={value === o.value}
+        <button key={o.value} type="button" role="tab" aria-selected={value === o.value}
           tabIndex={i === idx ? 0 : -1} ref={(el) => (refs.current[i] = el)} onKeyDown={(e) => key(e, i)}
           onClick={() => onChange && onChange(o.value)}>
           {o.icon ? <span aria-hidden="true">{o.icon}</span> : null}

package/components/forms/TagInput.d.ts

@@ -1,6 +1,9 @@
 /** Multi-value token input: Enter/comma adds a tag, Backspace removes the last,
  *  blur commits, duplicates ignored. Controlled (value/onChange) or uncontrolled. */
 export interface TagInputProps {
+  id?: string;
+  /** Visible field label (associates via htmlFor). When omitted, the input uses the placeholder as aria-label. */
+  label?: string;
   value?: string[];
   defaultValue?: string[];
   onChange?: (tags: string[]) => void;

package/components/forms/TagInput.jsx

@@ -3,37 +3,79 @@ import { makeT, useLang } from "../_i18n/i18n.js";
 import { cx } from "../_utils/cx.js";
 
 /** CyberSkill TagInput — multi-value token input. Enter/comma adds, Backspace removes last, blur commits. */
-export function TagInput({ value, defaultValue = [], onChange, placeholder, max, disabled = false, lang, className }) {
+export function TagInput({
+  id,
+  label,
+  value,
+  defaultValue = [],
+  onChange,
+  placeholder,
+  max,
+  disabled = false,
+  lang,
+  className,
+}) {
   const [inner, setInner] = React.useState(defaultValue);
   const tags = value != null ? value : inner;
   const [q, setQ] = React.useState("");
-  const set = (arr) => { if (value == null) setInner(arr); onChange && onChange(arr); };
+  const set = (arr) => {
+    if (value == null) setInner(arr);
+    onChange && onChange(arr);
+  };
   const add = (s) => {
     s = s.trim();
     if (!s) return;
-    if (tags.includes(s)) { setQ(""); return; }
+    if (tags.includes(s)) {
+      setQ("");
+      return;
+    }
     if (max != null && tags.length >= max) return;
-    set([...tags, s]); setQ("");
+    set([...tags, s]);
+    setQ("");
   };
   const [ref, L] = useLang(lang);
   const t = makeT("TagInput", L);
   const ph = placeholder != null ? placeholder : t("placeholder");
+  const gid = React.useId();
+  const sid = id ?? gid;
   return (
-    <div ref={ref} className={cx("cs-taginput", className)}>
-      {tags.map((tag) => (
-        <span key={tag} className="cs-tag">{tag}
-          <button type="button" className="cs-tag__close" aria-label={t("remove") + " " + tag} onClick={() => set(tags.filter((x) => x !== tag))} disabled={disabled}>
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" /></svg>
-          </button>
-        </span>
-      ))}
-      <input value={q} placeholder={tags.length ? "" : ph} disabled={disabled}
-        onChange={(e) => setQ(e.target.value)}
-        onKeyDown={(e) => {
-          if (e.key === "Enter" || e.key === ",") { e.preventDefault(); add(q); }
-          else if (e.key === "Backspace" && !q && tags.length) { set(tags.slice(0, -1)); }
-        }}
-        onBlur={() => add(q)} />
-    </div>
+    <label ref={ref} className={cx("cs-field", disabled && "is-disabled", className)} htmlFor={sid}>
+      {label ? <span className="cs-field__label">{label}</span> : null}
+      <div className="cs-taginput">
+        {tags.map((tag) => (
+          <span key={tag} className="cs-tag">
+            {tag}
+            <button
+              type="button"
+              className="cs-tag__close"
+              aria-label={t("remove") + " " + tag}
+              onClick={() => set(tags.filter((x) => x !== tag))}
+              disabled={disabled}
+            >
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" aria-hidden="true">
+                <path d="M6 6l12 12M18 6L6 18" />
+              </svg>
+            </button>
+          </span>
+        ))}
+        <input
+          id={sid}
+          value={q}
+          placeholder={tags.length ? "" : ph}
+          disabled={disabled}
+          aria-label={label ? undefined : ph}
+          onChange={(e) => setQ(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === ",") {
+              e.preventDefault();
+              add(q);
+            } else if (e.key === "Backspace" && !q && tags.length) {
+              set(tags.slice(0, -1));
+            }
+          }}
+          onBlur={() => add(q)}
+        />
+      </div>
+    </label>
   );
 }

package/components/forms/TagInput.prompt.md

@@ -1,5 +1,5 @@
-**TagInput** — multi-value tokens (Enter/comma adds · Backspace removes · blur commits). Bilingual placeholder + remove labels via the registry.
+**TagInput** — multi-value tokens (Enter/comma adds · Backspace removes · blur commits). Pass `label` for a visible field name; bilingual placeholder + remove labels via the registry.
 
 ```jsx
-<TagInput defaultValue={["Web apps","Bilingual"]} onChange={setTags} max={8}/>
+<TagInput label="Tags" defaultValue={["Web apps","Bilingual"]} onChange={setTags} max={8}/>
 ```

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

@@ -10,8 +10,8 @@
   .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/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<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="../../_ds_bundle.js"></script>
 </head>

package/components/forms/forms.card.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x360" name="Form controls" subtitle="Select, Checkbox, Radio, Switch, Textarea — brand accent" -->
+<!-- @dsCard group="Components" viewport="700x360" name="Form controls" subtitle="Select, NativeSelect, Checkbox, Radio, Switch, Textarea — brand accent" -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -9,21 +9,22 @@
   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/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<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="../../_ds_bundle.js"></script>
 </head>
 <body>
 <div id="root"></div>
 <script type="text/babel">
-const { Select, Checkbox, RadioGroup, Switch, Textarea } = window[Object.keys(window).find(k=>/^CyberSkillDesignSystem_[0-9a-f]{6}$/.test(k))] || {};
+const { Select, NativeSelect, Checkbox, RadioGroup, Switch, Textarea } = window[Object.keys(window).find(k=>/^CyberSkillDesignSystem_[0-9a-f]{6}$/.test(k))] || {};
 function Demo() {
   const [plan, setPlan] = React.useState("yr");
   const [dark, setDark] = React.useState(true);
   return (
     <div className="grid">
       <Select label="Squad" options={[{value:"plat",label:"Platform"},{value:"ai",label:"AI"},{value:"growth",label:"Growth"}]} defaultValue="ai" />
+      <NativeSelect label="Interface" size="sm" options={[{value:"en",label:"English"},{value:"vi",label:"Tiếng Việt"}]} defaultValue="en" />
       <RadioGroup legend="Billing" value={plan} onChange={setPlan} options={[{value:"mo",label:"Monthly"},{value:"yr",label:"Annual",description:"Two months free"}]} />
       <div style={{display:"grid",gap:12}}>
         <Checkbox label="Email me release notes" defaultChecked />

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`al · menu` (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` (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,8 +13,8 @@
   .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/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<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="../../_ds_bundle.js"></script>
 </head>

package/components/logo/Logo.jsx

@@ -8,6 +8,7 @@ import { cx } from "../_utils/cx.js";
  * Do not recreate or recolour the mark.
  */
 export function Logo({ size = 32, title = "CyberSkill", decorative = false, className, ...props }) {
+  const safeTitle = String(title).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
   return (
     <svg
       {...props}
@@ -19,7 +20,7 @@ export function Logo({ size = 32, title = "CyberSkill", decorative = false, clas
       role={decorative ? undefined : "img"}
       aria-hidden={decorative ? true : undefined}
       aria-label={decorative ? undefined : title}
-      dangerouslySetInnerHTML={{ __html: (decorative ? "" : `<title>${title}</title>`) + CS_LOGO_MARK_INNER }}
+      dangerouslySetInnerHTML={{ __html: (decorative ? "" : `<title>${safeTitle}</title>`) + CS_LOGO_MARK_INNER }}
     />
   );
 }

package/components/logo/logo.card.html

@@ -15,8 +15,8 @@
   .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/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<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="../../_ds_bundle.js"></script>
 </head>

package/components/navigation/Menu.jsx

@@ -15,9 +15,22 @@ export function Menu({ trigger, children, align = "start", open: controlledOpen,
     document.addEventListener("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, {
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        onClick: (e) => {
+          if (typeof trigger.props.onClick === "function") trigger.props.onClick(e);
+          if (!e.defaultPrevented) toggle();
+        },
+      })
+    : <button type="button" aria-haspopup="menu" aria-expanded={open} onClick={toggle}>{trigger}</button>;
   return (
     <div className={cx("cs-menu", className)} ref={ref}>
-      <span onClick={() => set(!open)} aria-haspopup="menu" aria-expanded={open}>{trigger}</span>
+      {triggerNode}
       {open ? (
         <div className={cx("cs-menu__list", align === "end" && "cs-menu__list--end")} role="menu">{children}</div>
       ) : null}

package/components/navigation/navigation.card.html

@@ -11,8 +11,8 @@
   .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/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<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="../../_ds_bundle.js"></script>
 </head>

package/components/navigation/shell.card.html

@@ -13,8 +13,8 @@
   .frame .cs-cmdk-scrim { position: absolute; padding-top: 14px; }
   .frame .cs-cmdk { inline-size: 100%; box-shadow: none; }
 </style>
-<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<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="../../_ds_bundle.js"></script>
 </head>

package/components/overlays/AlertDialog.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+
+/**
+ * First-class confirm / destructive modal — role="alertdialog", focus trap + restore.
+ * Distinct from Popconfirm (inline bubble) and Dialog (general modal).
+ */
+export interface AlertDialogProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  title: ReactNode;
+  /** Prefer over children for the described body. */
+  description?: ReactNode;
+  children?: ReactNode;
+  /** Defaults from the registry ("Confirm" / "Xác nhận"). */
+  confirmLabel?: string;
+  /** Defaults from the registry ("Cancel" / "Hủy"). */
+  cancelLabel?: string;
+  /** `destructive` styles the confirm action as danger. Alias: `variant`. */
+  tone?: "default" | "destructive";
+  variant?: "default" | "destructive";
+  onConfirm?: () => void;
+  onCancel?: () => void;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
+  className?: string;
+}
+
+export function AlertDialog(props: AlertDialogProps): React.ReactElement | null;

package/components/overlays/AlertDialog.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { AlertDialog } from './AlertDialog.jsx'
+
+/**
+ * Code Connect stub — AlertDialog
+ * Prop maps stay minimal until the matching Figma library component is published;
+ * then set nodeId in code-connect/node-map.json and re-run generate-code-connect.
+ */
+figma.connect(AlertDialog, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-4', {
+  example: () => <AlertDialog />,
+  imports: ["import { AlertDialog } from '@cyberskill/design'"],
+})