@cyberskill/design 1.0.0 → 1.1.0

package/components/button/buttons.card.html

@@ -11,8 +11,8 @@
   .row:last-child { margin-bottom: 0; }
   .lbl { width: 100%; font: 600 11px/1 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .09em; color: var(--cs-color-text-muted); margin-bottom: 2px; }
 </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/data/AspectRatio.d.ts

@@ -0,0 +1,16 @@
+import type * as React from "react";
+import type { ReactNode, CSSProperties } from "react";
+
+/**
+ * CSS `aspect-ratio` wrapper for media and framed content.
+ * `ratio` accepts a number (e.g. `1.777`) or CSS string (default `"16 / 9"`).
+ */
+export interface AspectRatioProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Number or CSS aspect-ratio string. Default `"16 / 9"`. */
+  ratio?: number | string;
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+}
+
+export function AspectRatio(props: AspectRatioProps): React.ReactElement;

package/components/data/AspectRatio.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { AspectRatio } from './AspectRatio.jsx'
+
+/**
+ * Code Connect stub — AspectRatio
+ * 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(AspectRatio, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-5', {
+  example: () => <AspectRatio />,
+  imports: ["import { AspectRatio } from '@cyberskill/design'"],
+})

package/components/data/AspectRatio.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill AspectRatio — CSS aspect-ratio lock for media and framed content. */
+export function AspectRatio({ ratio = "16 / 9", children, className, style, ...props }) {
+  const ar = typeof ratio === "number" ? String(ratio) : ratio;
+  return (
+    <div
+      className={cx("cs-aspect-ratio", className)}
+      style={{ ...(style || {}), aspectRatio: ar }}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}

package/components/data/AspectRatio.prompt.md

@@ -0,0 +1,7 @@
+**AspectRatio** — CSS `aspect-ratio` lock for marketing media and framed content. Default `16 / 9`.
+
+```jsx
+<AspectRatio ratio="16 / 9">
+  <img src="…" alt="…" />
+</AspectRatio>
+```

package/components/data/Collapsible.d.ts

@@ -0,0 +1,21 @@
+import type * as React from "react";
+import type { ReactNode } from "react";
+
+/**
+ * Light single-panel expand without Accordion chrome (settings, policy clauses).
+ * Controlled via `open` + `onOpenChange`, or uncontrolled via `defaultOpen`.
+ * `title` (or `trigger`) is the button label.
+ */
+export interface CollapsibleProps extends React.HTMLAttributes<HTMLDivElement> {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Trigger label (preferred). */
+  title?: ReactNode;
+  /** Alias for `title`. */
+  trigger?: ReactNode;
+  children?: ReactNode;
+  className?: string;
+}
+
+export function Collapsible(props: CollapsibleProps): React.ReactElement;

package/components/data/Collapsible.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { Collapsible } from './Collapsible.jsx'
+
+/**
+ * Code Connect stub — Collapsible
+ * 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(Collapsible, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-21', {
+  example: () => <Collapsible />,
+  imports: ["import { Collapsible } from '@cyberskill/design'"],
+})

package/components/data/Collapsible.jsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill Collapsible — single expand panel without Accordion chrome. */
+export function Collapsible({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  title,
+  trigger,
+  children,
+  className,
+  ...props
+}) {
+  const uncontrolled = open === undefined;
+  const [internal, setInternal] = React.useState(!!defaultOpen);
+  const isOpen = uncontrolled ? internal : !!open;
+  const setOpen = (next) => {
+    if (uncontrolled) setInternal(next);
+    onOpenChange?.(next);
+  };
+  const label = title ?? trigger;
+  const panelId = React.useId();
+  const triggerId = React.useId();
+  return (
+    <div className={cx("cs-collapsible", className)} {...props}>
+      <button
+        type="button"
+        id={triggerId}
+        className="cs-collapsible__trigger"
+        aria-expanded={isOpen}
+        aria-controls={panelId}
+        onClick={() => setOpen(!isOpen)}
+      >
+        <span className="cs-collapsible__label">{label}</span>
+        <span className="cs-collapsible__chevron" aria-hidden="true">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M6 9l6 6 6-6" />
+          </svg>
+        </span>
+      </button>
+      {isOpen ? (
+        <div id={panelId} role="region" aria-labelledby={triggerId} className="cs-collapsible__panel">
+          {children}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/components/data/Collapsible.prompt.md

@@ -0,0 +1,7 @@
+**Collapsible** — light single-panel expand without Accordion chrome. Keyboard-accessible trigger with `aria-expanded`.
+
+```jsx
+<Collapsible title="Advanced" defaultOpen={false}>
+  <p>Policy details…</p>
+</Collapsible>
+```

package/components/data/Image.d.ts

@@ -11,6 +11,10 @@ export interface ImageProps {
   preview?: boolean;
   /** Custom fallback node when the image fails. */
   fallback?: ReactNode;
+  /** Forwarded to the underlying <img>. */
+  width?: number | string;
+  /** Forwarded to the underlying <img>. */
+  height?: number | string;
   /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
   lang?: string;
   className?: string;

package/components/data/Image.prompt.md

@@ -1,5 +1,5 @@
-**Image** — img with shimmer, warm error fallback, optional `preview` lightbox.
+**Image** — img with shimmer, warm error fallback, optional `preview` lightbox. `width` / `height` forward to the underlying `<img>`.
 
 ```jsx
-<Image src="/assets/aurora-gold.jpg" alt="Aurora" ratio="16/9" preview/>
+<Image src="/assets/aurora-gold.jpg" alt="Aurora" ratio="16/9" width={640} height={360} preview/>
 ```

package/components/data/Item.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode, MouseEventHandler } from "react";
+
+/**
+ * Shared list / settings / nav row: leading · title · description · trailing,
+ * with selected / disabled and href-or-button semantics when interactive.
+ */
+export interface ItemProps {
+  leading?: ReactNode;
+  trailing?: ReactNode;
+  title?: ReactNode;
+  description?: ReactNode;
+  selected?: boolean;
+  disabled?: boolean;
+  /** Renders as an <a> when set (and not disabled). */
+  href?: string;
+  /** Renders as a <button> when set without href. */
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  /**
+   * Free-form main content when `trailing` is set, or the trailing slot when
+   * `title` is set and `trailing` is omitted (DC-friendly Switch nesting).
+   */
+  children?: ReactNode;
+  className?: string;
+}
+
+export function Item(props: ItemProps): React.ReactElement;

package/components/data/Item.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { Item } from './Item.jsx'
+
+/**
+ * Code Connect stub — Item
+ * 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(Item, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-50', {
+  example: () => <Item />,
+  imports: ["import { Item } from '@cyberskill/design'"],
+})

package/components/data/Item.jsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/**
+ * CyberSkill Item — shared list / settings / nav row chrome.
+ * Leading + trailing slots, title + description, selected / disabled, and
+ * href (anchor) or onClick (button) when interactive.
+ * When `title` is set and `trailing` is omitted, `children` render in the
+ * trailing slot (handy for DC templates nesting a Switch).
+ */
+export function Item({
+  leading,
+  trailing,
+  title,
+  description,
+  selected = false,
+  disabled = false,
+  href,
+  onClick,
+  children,
+  className,
+  ...props
+}) {
+  const interactive = !disabled && (href != null || typeof onClick === "function");
+  const Tag = href != null && !disabled ? "a" : interactive ? "button" : "div";
+  const rowProps = { ...props };
+  if (Tag === "a") {
+    rowProps.href = href;
+    if (disabled) rowProps["aria-disabled"] = true;
+  } else if (Tag === "button") {
+    rowProps.type = "button";
+    rowProps.disabled = disabled || undefined;
+    rowProps.onClick = onClick;
+  } else if (disabled) {
+    rowProps["aria-disabled"] = true;
+  }
+  if (selected) rowProps["aria-current"] = rowProps["aria-current"] ?? "true";
+
+  const trailExplicit = trailing !== undefined;
+  const trailNode = trailExplicit ? trailing : title != null ? children : null;
+  const mainExtra = trailExplicit ? children : title == null ? children : null;
+
+  return (
+    <Tag
+      className={cx(
+        "cs-item",
+        interactive && "cs-item--interactive",
+        selected && "is-selected",
+        disabled && "is-disabled",
+        className
+      )}
+      {...rowProps}
+    >
+      {leading != null ? <span className="cs-item__leading">{leading}</span> : null}
+      <span className="cs-item__main">
+        {title != null ? <span className="cs-item__title">{title}</span> : null}
+        {description != null ? <span className="cs-item__description">{description}</span> : null}
+        {mainExtra}
+      </span>
+      {trailNode != null && trailNode !== false ? <span className="cs-item__trailing">{trailNode}</span> : null}
+    </Tag>
+  );
+}

package/components/data/Item.prompt.md

@@ -0,0 +1,10 @@
+**Item** — shared list / settings / nav row chrome. Leading + trailing slots, title + description, selected / disabled, and `href` (link) or `onClick` (button) when interactive.
+
+```jsx
+<Item
+  title="Release notes"
+  description="A summary each time a project ships."
+  trailing={<Switch />}
+/>
+<Item title="Profile" href="#profile" selected />
+```

package/components/data/ScrollArea.d.ts

@@ -0,0 +1,16 @@
+import type * as React from "react";
+import type { ReactNode, CSSProperties } from "react";
+
+/**
+ * Focusable overflow region for dense panels (settings, long VN copy).
+ * `maxHeight` caps the scrollport; keyboard focus scrolls when needed.
+ */
+export interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+  /** Max block size — number → px, or any CSS length string. */
+  maxHeight?: number | string;
+  className?: string;
+  style?: CSSProperties;
+}
+
+export function ScrollArea(props: ScrollAreaProps): React.ReactElement;

package/components/data/ScrollArea.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { ScrollArea } from './ScrollArea.jsx'
+
+/**
+ * Code Connect stub — ScrollArea
+ * 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(ScrollArea, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-70', {
+  example: () => <ScrollArea />,
+  imports: ["import { ScrollArea } from '@cyberskill/design'"],
+})

package/components/data/ScrollArea.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill ScrollArea — focusable overflow region for dense bilingual panels. */
+export function ScrollArea({ children, maxHeight, className, style, ...props }) {
+  const max =
+    maxHeight == null
+      ? undefined
+      : typeof maxHeight === "number"
+        ? `${maxHeight}px`
+        : maxHeight;
+  return (
+    <div
+      className={cx("cs-scroll-area", className)}
+      tabIndex={0}
+      style={{
+        ...(style || {}),
+        ...(max != null ? { maxBlockSize: max } : {}),
+      }}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}

package/components/data/ScrollArea.prompt.md

@@ -0,0 +1,7 @@
+**ScrollArea** — focusable overflow region for dense panels (settings, long bilingual copy). Pass `maxHeight` to cap the scrollport.
+
+```jsx
+<ScrollArea maxHeight={240} aria-label="Notification preferences">
+  {/* long list */}
+</ScrollArea>
+```

package/components/data/collections.card.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x480" name="Collections & content" subtitle="List, DescriptionList, Timeline, Accordion, Kbd, CodeBlock" -->
+<!-- @dsCard group="Components" viewport="700x520" name="Collections & content" subtitle="List, Item, DescriptionList, Timeline, Accordion, Collapsible, Kbd, CodeBlock" -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -10,15 +10,15 @@
   .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/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 { List, ListItem, DescriptionList, Timeline, Accordion, Kbd, CodeBlock, Avatar, Badge } = (window[Object.keys(window).find(k=>/^CyberSkillDesignSystem_[0-9a-f]{6}$/.test(k))]||{});
+const { List, ListItem, Item, DescriptionList, Timeline, Accordion, Collapsible, Kbd, CodeBlock, Avatar, Badge, Switch } = (window[Object.keys(window).find(k=>/^CyberSkillDesignSystem_[0-9a-f]{6}$/.test(k))]||{});
 function Demo() {
   return (
     <div className="cols">
@@ -32,6 +32,17 @@ function Demo() {
         <div className="blk"><div className="lbl">Description list</div>
           <DescriptionList items={[{term:"Owner",value:"An Le"},{term:"Squad",value:"Platform"},{term:"Progress",value:"72%"},{term:"Updated",value:"2h ago"}]} />
         </div>
+        <div className="blk"><div className="lbl">Item</div>
+          <div style={{ display: "grid", gap: 6 }}>
+            <Item title="Release notes" description="Bilingual digest when a project ships" trailing={<Switch defaultChecked aria-label="Release notes" />} />
+            <Item title="Profile" description="How you appear" href="#profile" selected />
+          </div>
+        </div>
+        <div className="blk"><div className="lbl">Collapsible</div>
+          <Collapsible title="Advanced preferences" defaultOpen={false}>
+            <p style={{ margin: 0 }}>Quiet by default — only what you opt into.</p>
+          </Collapsible>
+        </div>
         <div><div className="lbl">Kbd</div><span><Kbd>⌘</Kbd> <Kbd>K</Kbd> &nbsp;to search</span></div>
       </div>
       <div>

package/components/data/data.card.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x360" name="Data & layout" subtitle="Card, Stat, Avatar, Tooltip, Divider" -->
+<!-- @dsCard group="Components" viewport="700x420" name="Data & layout" subtitle="Card, Stat, Avatar, Tooltip, Divider, ScrollArea, AspectRatio" -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -11,15 +11,15 @@
   .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/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 { Card, CardHeader, CardBody, CardFooter, Stat, Avatar, AvatarGroup, Tooltip, Divider, Badge } = (window[Object.keys(window).find(k=>/^CyberSkillDesignSystem_[0-9a-f]{6}$/.test(k))]||{});
+const { Card, CardHeader, CardBody, CardFooter, Stat, Avatar, AvatarGroup, Tooltip, Divider, Badge, ScrollArea, AspectRatio } = (window[Object.keys(window).find(k=>/^CyberSkillDesignSystem_[0-9a-f]{6}$/.test(k))]||{});
 function Demo() {
   return (
     <div className="grid">
@@ -40,6 +40,17 @@ function Demo() {
           <Avatar name="Nguyễn Vũ" size="lg" />
           <Tooltip label="Blocked on infra"><span className="cs-badge cs-badge--danger">Blocked</span></Tooltip>
         </div>
+        <Divider label="layout" />
+        <div className="lbl">ScrollArea</div>
+        <ScrollArea maxHeight={72} aria-label="Dense notes" style={{ border: "1px solid var(--cs-color-border-default)", padding: "6px 10px", fontSize: 13, color: "var(--cs-color-text-muted)" }}>
+          <p style={{ margin: "0 0 6px" }}>Release notes stay bilingual.</p>
+          <p style={{ margin: "0 0 6px" }}>Blocked alerts only when asked.</p>
+          <p style={{ margin: 0 }}>Quiet by default.</p>
+        </ScrollArea>
+        <div className="lbl" style={{ marginTop: 14 }}>AspectRatio</div>
+        <AspectRatio ratio="16 / 9" style={{ maxWidth: 200, background: "var(--cs-accent-tint)" }}>
+          <div style={{ display: "grid", placeItems: "center", color: "var(--cs-color-text-muted)", fontSize: 12 }}>16:9</div>
+        </AspectRatio>
       </div>
     </div>
   );

package/components/datatable/datatable.card.html

@@ -14,8 +14,8 @@
   .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/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/dialog/dialog.card.html

@@ -12,8 +12,8 @@
   .frame .cs-dialog-layer { position: absolute; }
   .frame .cs-dialog { top: 24px; }
 </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/feedback/feedback-2.card.html

@@ -10,8 +10,8 @@
   .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/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/feedback/feedback.card.html

@@ -13,8 +13,8 @@
   .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/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/Cascader.jsx

@@ -7,6 +7,7 @@ export function Cascader({ nodes = [], value = [], onChange, placeholder, label,
   const [open, setOpen] = React.useState(false);
   const [path, setPath] = React.useState(value);
   const wrap = React.useRef(null);
+  const fieldId = React.useId();
   const [ref, L] = useLang(lang);
   const t = makeT("Cascader", L);
   const ph = placeholder != null ? placeholder : t("placeholder");
@@ -30,15 +31,16 @@ export function Cascader({ nodes = [], value = [], onChange, placeholder, label,
   { let lv = nodes; for (const k of value) { const n = (lv || []).find((x) => x.key === k); if (!n) break; labels.push(n.label); lv = n.children; } }
   return (
     <div ref={(el) => { wrap.current = el; ref.current = el; }} className={cx("cs-cascader", className)}>
-      <button type="button" className="cs-treeselect__field" disabled={disabled} aria-haspopup="listbox" aria-expanded={open} aria-label={label} onClick={() => setOpen((o) => !o)}>
+      <button type="button" id={fieldId} className="cs-treeselect__field" disabled={disabled} aria-haspopup="listbox" aria-expanded={open} aria-label={label} onClick={() => setOpen((o) => !o)}>
         <span className={labels.length ? undefined : "ph"}>{labels.length ? labels.join(" / ") : ph}</span><span aria-hidden="true">▾</span>
       </button>
       {open ? (
         <div className="cs-cascader__pop">
           {cols.map((col, i) => (
-            <ul key={i} role="listbox" className="cs-cascader__col">
+            <ul key={i} role="listbox" aria-labelledby={fieldId} className="cs-cascader__col">
               {col.map((n) => (
-                <li key={n.key}>
+                // role="none" — the <li> wrapper must not sit between listbox and option.
+                <li key={n.key} role="none">
                   <button type="button" role="option" aria-selected={path[i] === n.key} className={cx("cs-cascader__opt", path[i] === n.key && "on")}
                     onClick={() => {
                       const next = [...path.slice(0, i), n.key];

package/components/forms/Editor.prompt.md

@@ -1,4 +1,4 @@
-**Editor** — light rich-text (B/I/list), HTML onChange.
+**Editor** — light rich-text (B/I/list), HTML onChange. `defaultValue` is injected as raw HTML via `dangerouslySetInnerHTML` — pass only trusted or consumer-sanitized markup.
 
 ```jsx
 <Editor defaultValue="<p>Điều ước…</p>" onChange={setHtml}/>

package/components/forms/InputGroup.d.ts

@@ -3,6 +3,9 @@ import type { ReactNode } from "react";
 /** Input with prefix/suffix addons (text or nodes), a clearable ×, and a
  *  password show/hide reveal. Controlled or uncontrolled. */
 export interface InputGroupProps {
+  id?: string;
+  /** Visible field label (associates via htmlFor). When omitted, falls back to aria-label, placeholder, or bilingual "input". */
+  label?: string;
   prefix?: ReactNode;
   suffix?: ReactNode;
   clearable?: boolean;
@@ -16,5 +19,6 @@ export interface InputGroupProps {
   /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
   lang?: string;
   className?: string;
+  "aria-label"?: string;
 }
 export function InputGroup(props: InputGroupProps): React.ReactElement;

package/components/forms/InputGroup.jsx

@@ -6,20 +6,50 @@ const EYE_OFF = <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stro
 const X = <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>;
 
 /** CyberSkill InputGroup — input with prefix/suffix addons, clearable ×, and password reveal. */
-export function InputGroup({ prefix, suffix, clearable = false, password = false, value, onChange, defaultValue = "", placeholder, disabled = false, lang, className, ...props }) {
+export function InputGroup({
+  id,
+  label,
+  prefix,
+  suffix,
+  clearable = false,
+  password = false,
+  value,
+  onChange,
+  defaultValue = "",
+  placeholder,
+  disabled = false,
+  lang,
+  className,
+  "aria-label": ariaLabel,
+  ...props
+}) {
   const [inner, setInner] = React.useState(defaultValue);
   const val = value != null ? value : inner;
   const set = (v) => { if (value == null) setInner(v); onChange && onChange(v); };
   const [show, setShow] = React.useState(false);
   const [ref, L] = useLang(lang);
   const t = makeT("InputGroup", L);
+  const gid = React.useId();
+  const sid = id ?? gid;
   return (
-    <span ref={ref} className={cx("cs-igroup", className)}>
-      {prefix != null ? <span className="cs-igroup__fix">{prefix}</span> : null}
-      <input {...props} type={password && !show ? "password" : "text"} value={val} placeholder={placeholder} disabled={disabled} onChange={(e) => set(e.target.value)} />
-      {clearable && String(val).length ? <button type="button" className="cs-igroup__btn" aria-label={t("clear")} onClick={() => set("")}>{X}</button> : null}
-      {password ? <button type="button" className="cs-igroup__btn" aria-label={show ? t("hide") : t("show")} aria-pressed={show} onClick={() => setShow((s) => !s)}>{show ? EYE_OFF : EYE}</button> : null}
-      {suffix != null ? <span className="cs-igroup__fix cs-igroup__fix--suffix">{suffix}</span> : null}
-    </span>
+    <label ref={ref} className={cx("cs-field", disabled && "is-disabled", className)} htmlFor={sid}>
+      {label ? <span className="cs-field__label">{label}</span> : null}
+      <span className="cs-igroup">
+        {prefix != null ? <span className="cs-igroup__fix">{prefix}</span> : null}
+        <input
+          {...props}
+          id={sid}
+          type={password && !show ? "password" : "text"}
+          value={val}
+          placeholder={placeholder}
+          disabled={disabled}
+          aria-label={label ? undefined : (ariaLabel || placeholder || t("input"))}
+          onChange={(e) => set(e.target.value)}
+        />
+        {clearable && String(val).length ? <button type="button" className="cs-igroup__btn" aria-label={t("clear")} onClick={() => set("")}>{X}</button> : null}
+        {password ? <button type="button" className="cs-igroup__btn" aria-label={show ? t("hide") : t("show")} aria-pressed={show} onClick={() => setShow((s) => !s)}>{show ? EYE_OFF : EYE}</button> : null}
+        {suffix != null ? <span className="cs-igroup__fix cs-igroup__fix--suffix">{suffix}</span> : null}
+      </span>
+    </label>
   );
 }