@cyberskill/design 1.0.0

package/components/feedback/Alert.d.ts

@@ -0,0 +1,16 @@
+import type * as React from "react";
+import type { ReactNode } from "react";
+
+/**
+ * Inline banner for contextual messages. Semantic variant sets the accent
+ * border + default icon; pass `icon` to override. Meaning is carried by the
+ * title/body text, never colour alone.
+ */
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: "info" | "success" | "warning" | "danger";
+  title?: ReactNode;
+  icon?: ReactNode;
+  children?: ReactNode;
+}
+
+export function Alert(props: AlertProps): React.ReactElement;

package/components/feedback/Alert.figma.tsx

@@ -0,0 +1,17 @@
+import figma from '@figma/code-connect'
+import { Alert } from './Alert.jsx'
+
+figma.connect(Alert, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-3', {
+  props: {
+    variant: figma.enum('Variant', {
+      Info: 'info',
+      Success: 'success',
+      Warning: 'warning',
+      Danger: 'danger',
+    }),
+    title: figma.string('Title'),
+    children: figma.string('Body'),
+  },
+  example: (props) => <Alert {...props} />,
+  imports: ["import { Alert } from '@cyberskill/design'"],
+})

package/components/feedback/Alert.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+const PATHS = {
+  info: "M12 8h.01M11 12h1v4h1 M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18z",
+  success: "M4 12.5l5 5 11-11",
+  warning: "M12 3l9 16H3z M12 10v4 M12 17h.01",
+  danger: "M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18z M9 9l6 6 M15 9l-6 6",
+};
+function DefaultIcon({ variant }) {
+  return (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d={PATHS[variant] || PATHS.info} />
+    </svg>
+  );
+}
+
+/** CyberSkill Alert — inline banner. variant: info | success | warning | danger. */
+export function Alert({ variant = "info", title, icon, children, className, ...props }) {
+  return (
+    <div role="status" className={cx("cs-alert", `cs-alert--${variant}`, className)} {...props}>
+      <span className="cs-alert__icon">{icon ?? <DefaultIcon variant={variant} />}</span>
+      <div>
+        {title ? <p className="cs-alert__title">{title}</p> : null}
+        {children ? <div className="cs-alert__body">{children}</div> : null}
+      </div>
+    </div>
+  );
+}

package/components/feedback/Alert.prompt.md

@@ -0,0 +1,6 @@
+**Alert** — inline banner. Semantic `variant` sets the accent border + default icon (override with `icon`). Meaning lives in the text, not colour alone.
+
+```jsx
+<Alert variant="warning" title="Blocked">Provenance ledger needs the signing service.</Alert>
+<Alert variant="success">All 15 element packs verified — zero warnings.</Alert>
+```

package/components/feedback/Badge.d.ts

@@ -0,0 +1,15 @@
+import type * as React from "react";
+import type { ReactNode } from "react";
+
+/**
+ * Compact status label. Neutral by default; solid/ochre for emphasis; semantic
+ * variants for state. Optional leading dot. Keep the text meaningful — never
+ * rely on colour alone.
+ */
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  variant?: "neutral" | "solid" | "ochre" | "success" | "danger" | "warning" | "info";
+  dot?: boolean;
+  children?: ReactNode;
+}
+
+export function Badge(props: BadgeProps): React.ReactElement;

package/components/feedback/Badge.figma.tsx

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

package/components/feedback/Badge.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill Badge — compact status label. variant: neutral | solid | ochre | success | danger | warning | info. */
+export function Badge({ variant = "neutral", dot = false, children, className, ...props }) {
+  return (
+    <span className={cx("cs-badge", variant !== "neutral" && `cs-badge--${variant}`, className)} {...props}>
+      {dot ? <span className="cs-badge__dot" aria-hidden="true" /> : null}
+      {children}
+    </span>
+  );
+}

package/components/feedback/Badge.prompt.md

@@ -0,0 +1,6 @@
+**Badge** — compact status label. Neutral by default; `solid`/`ochre` for emphasis; `success`/`danger`/`warning`/`info` for state; optional leading `dot`.
+
+```jsx
+<Badge variant="success" dot>Shipped</Badge>
+<Badge variant="ochre">Now</Badge>
+```

package/components/feedback/EmptyState.d.ts

@@ -0,0 +1,13 @@
+import type * as React from "react";
+import type { ReactNode } from "react";
+
+/** Friendly placeholder for empty or zero-result views: icon, title, message,
+ *  and optional actions (compose Buttons). */
+export interface EmptyStateProps {
+  icon?: ReactNode;
+  title?: ReactNode;
+  children?: ReactNode;
+  actions?: ReactNode;
+  className?: string;
+}
+export function EmptyState(props: EmptyStateProps): React.ReactElement;

package/components/feedback/EmptyState.figma.tsx

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

package/components/feedback/EmptyState.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill EmptyState — friendly placeholder for empty views. */
+export function EmptyState({ icon, title, children, actions, className }) {
+  return (
+    <div className={cx("cs-empty", className)}>
+      <span className="cs-empty__icon">
+        {icon ?? <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 8l2-4h14l2 4M3 8v10a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V8M3 8h6l1 3h4l1-3h6" /></svg>}
+      </span>
+      {title ? <div className="cs-empty__title">{title}</div> : null}
+      {children ? <div className="cs-empty__body">{children}</div> : null}
+      {actions ? <div className="cs-empty__actions">{actions}</div> : null}
+    </div>
+  );
+}

package/components/feedback/EmptyState.prompt.md

@@ -0,0 +1,7 @@
+**EmptyState** — placeholder for empty views: icon, title, message, optional actions.
+
+```jsx
+<EmptyState title="No projects yet" actions={<Button>Make a wish</Button>}>
+  Start by telling Lumi what you'd like to build.
+</EmptyState>
+```

package/components/feedback/ProgressBar.d.ts

@@ -0,0 +1,15 @@
+import type * as React from "react";
+
+/**
+ * Determinate progress bar. Ochre fill by default; umber/success variants.
+ * Always pass a `label` for assistive tech.
+ */
+export interface ProgressBarProps {
+  value?: number;
+  max?: number;
+  variant?: "ochre" | "umber" | "success";
+  label?: string;
+  className?: string;
+}
+
+export function ProgressBar(props: ProgressBarProps): React.ReactElement;

package/components/feedback/ProgressBar.figma.tsx

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

package/components/feedback/ProgressBar.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill ProgressBar — determinate progress. variant: ochre (default) | umber | success. */
+export function ProgressBar({ value = 0, max = 100, variant, label, className }) {
+  const pct = Math.max(0, Math.min(100, (value / max) * 100));
+  return (
+    <div className={cx("cs-progress", variant && `cs-progress--${variant}`, className)}
+      role="progressbar" aria-valuenow={Math.round(value)} aria-valuemin={0} aria-valuemax={max} aria-label={label}>
+      <span className="cs-progress__fill" style={{ inlineSize: pct + "%", width: pct + "%" }} />
+    </div>
+  );
+}

package/components/feedback/ProgressBar.prompt.md

@@ -0,0 +1,5 @@
+**ProgressBar** — determinate progress. Ochre fill by default (`umber`/`success` variants). Always pass `label`.
+
+```jsx
+<ProgressBar value={72} label="Design System v1.6 progress" />
+```

package/components/feedback/Result.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+
+/** Full status view for page-level outcomes (submit success, error, 403/404-style
+ *  states). Title defaults bilingually per status from the registry. */
+export interface ResultProps {
+  status?: "success" | "error" | "warning" | "info";
+  title?: ReactNode;
+  children?: ReactNode;
+  /** Compose Buttons. */
+  actions?: ReactNode;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
+  className?: string;
+}
+export function Result(props: ResultProps): React.ReactElement;

package/components/feedback/Result.figma.tsx

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

package/components/feedback/Result.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
+import { cx } from "../_utils/cx.js";
+const ART = {
+  success: <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M4 12.5l5 5 11-11" /></svg>,
+  error: <svg width="28" height="28" 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>,
+  warning: <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M12 3l10 18H2z" /><path d="M12 10v5M12 18.2v.1" /></svg>,
+  info: <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" aria-hidden="true"><circle cx="12" cy="12" r="9" /><path d="M12 11v6M12 7.2v.1" /></svg>,
+};
+
+/** CyberSkill Result — full status view (success/error/warning/info): icon, title, body, actions. */
+export function Result({ status = "info", title, children, actions, lang, className }) {
+  const [ref, L] = useLang(lang);
+  const t = makeT("Result", L);
+  const tt = title != null ? title : t(status);
+  return (
+    <div ref={ref} className={cx("cs-result", "cs-result--" + status, className)} role="status">
+      <span className="cs-result__icon" aria-hidden="true">{ART[status] || ART.info}</span>
+      <h2 className="cs-result__title">{tt}</h2>
+      {children ? <div className="cs-result__body">{children}</div> : null}
+      {actions ? <div className="cs-result__actions">{actions}</div> : null}
+    </div>
+  );
+}

package/components/feedback/Result.prompt.md

@@ -0,0 +1,7 @@
+**Result** — page-level outcome view (success/error/warning/info) with bilingual default titles.
+
+```jsx
+<Result status="success" actions={<Button size="sm">Back home</Button>}>
+  Your wish is with the team — we reply within one business day.
+</Result>
+```

package/components/feedback/Skeleton.d.ts

@@ -0,0 +1,18 @@
+import type * as React from "react";
+
+/**
+ * Loading placeholder with a shimmer (freezes under reduced-motion). Use `lines`
+ * for multi-line text, or a single block/circle sized by width/height.
+ */
+export interface SkeletonProps {
+  variant?: "block" | "circle";
+  width?: number | string;
+  height?: number | string;
+  /** Render N text lines (last one 70% width). */
+  lines?: number;
+  radius?: number | string;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export function Skeleton(props: SkeletonProps): React.ReactElement;

package/components/feedback/Skeleton.figma.tsx

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

package/components/feedback/Skeleton.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill Skeleton — shimmer placeholder. Use `lines` for text blocks, or variant="circle"/"block". */
+export function Skeleton({ variant = "block", width, height, lines, radius, className, style }) {
+  if (lines) {
+    return (
+      <div className={className} aria-hidden="true" role="presentation">
+        {Array.from({ length: lines }).map((_, i) => (
+          <span key={i} className="cs-skeleton cs-skeleton--text" style={{ width: i === lines - 1 ? "70%" : "100%" }} />
+        ))}
+      </div>
+    );
+  }
+  return (
+    <span
+      className={cx("cs-skeleton", variant === "circle" && "cs-skeleton--circle", className)}
+      aria-hidden="true"
+      style={{ display: "block", width, height, borderRadius: radius, ...style }}
+    />
+  );
+}

package/components/feedback/Skeleton.prompt.md

@@ -0,0 +1,6 @@
+**Skeleton** — shimmer placeholder while content loads. Use `lines` for text, or a `block`/`circle` sized by width/height.
+
+```jsx
+<Skeleton variant="circle" width={40} height={40} />
+<Skeleton lines={3} />
+```

package/components/feedback/Spinner.d.ts

@@ -0,0 +1,11 @@
+import type * as React from "react";
+
+/** Indeterminate loading spinner (brand-coloured; slows under reduced-motion). */
+export interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /** px diameter. Default 20. */
+  size?: number;
+  /** Accessible label. Default "Loading". */
+  label?: string;
+}
+
+export function Spinner(props: SpinnerProps): React.ReactElement;

package/components/feedback/Spinner.figma.tsx

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

package/components/feedback/Spinner.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill Spinner — indeterminate loading indicator. */
+export function Spinner({ size = 20, label, lang, className, style, ...props }) {
+  const [ref, L] = useLang(lang);
+  const lbl = label != null ? label : makeT("Spinner", L)("label");
+  return <span ref={ref} role="status" aria-label={lbl} className={cx("cs-spinner", className)} style={{ inlineSize: size, blockSize: size, width: size, height: size, ...style }} {...props} />;
+}

package/components/feedback/Spinner.prompt.md

@@ -0,0 +1,5 @@
+**Spinner** — indeterminate loading indicator, brand-coloured; slows under reduced-motion.
+
+```jsx
+<Spinner /> <Spinner size={28} label="Fetching releases" />
+```

package/components/feedback/StatusIndicator.d.ts

@@ -0,0 +1,11 @@
+import type * as React from "react";
+import type { ReactNode } from "react";
+
+/** Coloured status dot + label. Optional pulse for live/online states. Always
+ *  spell the status out in the label — never colour alone. */
+export interface StatusIndicatorProps extends React.HTMLAttributes<HTMLSpanElement> {
+  status?: "online" | "busy" | "offline" | "error";
+  pulse?: boolean;
+  children?: ReactNode;
+}
+export function StatusIndicator(props: StatusIndicatorProps): React.ReactElement;

package/components/feedback/StatusIndicator.figma.tsx

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

package/components/feedback/StatusIndicator.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill StatusIndicator — coloured dot + label. status: online | busy | offline | error. */
+export function StatusIndicator({ status = "offline", pulse = false, children, className, ...props }) {
+  return (
+    <span className={cx("cs-status", `cs-status--${status}`, pulse && "cs-status--pulse", className)} {...props}>
+      <span className="cs-status__dot" aria-hidden="true" />
+      {children}
+    </span>
+  );
+}

package/components/feedback/StatusIndicator.prompt.md

@@ -0,0 +1,5 @@
+**StatusIndicator** — coloured dot + label (`online`/`busy`/`offline`/`error`); `pulse` for live states.
+
+```jsx
+<StatusIndicator status="online" pulse>All systems go</StatusIndicator>
+```

package/components/feedback/Tag.d.ts

@@ -0,0 +1,14 @@
+import type * as React from "react";
+import type { ReactNode } from "react";
+
+/**
+ * Chip/tag for filters, keywords, or selected values. Pass `onRemove` to show
+ * a close button (omit for a static tag).
+ */
+export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
+  children?: ReactNode;
+  onRemove?: () => void;
+  removeLabel?: string;
+}
+
+export function Tag(props: TagProps): React.ReactElement;

package/components/feedback/Tag.figma.tsx

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

package/components/feedback/Tag.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill Tag — chip with optional remove button. */
+export function Tag({ children, onRemove, removeLabel, lang, className, ...props }) {
+  const [ref, L] = useLang(lang);
+  const rl = removeLabel != null ? removeLabel : makeT("Tag", L)("remove");
+  return (
+    <span ref={ref} className={cx("cs-tag", className)} {...props}>
+      {children}
+      {onRemove ? (
+        <button type="button" className="cs-tag__close" aria-label={rl} onClick={onRemove}>
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
+        </button>
+      ) : null}
+    </span>
+  );
+}

package/components/feedback/Tag.prompt.md

@@ -0,0 +1,6 @@
+**Tag** — chip for filters, keywords, or selected values. Pass `onRemove` for a close button.
+
+```jsx
+<Tag>Web apps</Tag>
+<Tag onRemove={() => drop(id)}>TASK-DS-041</Tag>
+```

package/components/feedback/Toast.d.ts

@@ -0,0 +1,19 @@
+import type * as React from "react";
+import type { ReactNode } from "react";
+
+/** Fixed bottom-right container that stacks Toasts. */
+export interface ToastStackProps { children?: ReactNode; className?: string; }
+export function ToastStack(props: ToastStackProps): React.ReactElement;
+
+/**
+ * Transient notification. Compose inside a ToastStack. Manage timing/queue in
+ * app state; this component is presentational.
+ */
+export interface ToastProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: "default" | "success" | "danger";
+  title?: ReactNode;
+  icon?: ReactNode;
+  onClose?: () => void;
+  children?: ReactNode;
+}
+export function Toast(props: ToastProps): React.ReactElement;

package/components/feedback/Toast.figma.tsx

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

package/components/feedback/Toast.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
+import { cx } from "../_utils/cx.js";
+
+/** Fixed-position stack for Toasts (bottom-right). */
+export function ToastStack({ children, lang, className }) {
+  const [ref, L] = useLang(lang);
+  return <div ref={ref} className={cx("cs-toast-stack", className)} role="region" aria-label={makeT("Toast", L)("notifications")}>{children}</div>;
+}
+
+/** CyberSkill Toast — transient notification. variant: default | success | danger. */
+export function Toast({ variant = "default", title, icon, onClose, lang, children, className, ...props }) {
+  const [ref, L] = useLang(lang);
+  return (
+    <div ref={ref} className={cx("cs-toast", `cs-toast--${variant}`, className)} role="status" {...props}>
+      <span className="cs-toast__icon" aria-hidden="true">
+        {icon ?? <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 12.5l5 5 11-11" /></svg>}
+      </span>
+      <div>
+        {title ? <div className="cs-toast__title">{title}</div> : null}
+        {children ? <div className="cs-toast__body">{children}</div> : null}
+      </div>
+      {onClose ? (
+        <button type="button" className="cs-toast__close" aria-label={makeT("Toast", L)("dismiss")} onClick={onClose}>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/components/feedback/Toast.prompt.md

@@ -0,0 +1,7 @@
+**Toast / ToastStack** — transient notification inside a fixed bottom-right stack. Presentational; manage timing + queue in app state.
+
+```jsx
+<ToastStack>
+  <Toast variant="success" title="Saved" onClose={dismiss}>Your wish is on its way.</Toast>
+</ToastStack>
+```

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

@@ -0,0 +1,43 @@
+<!-- @dsCard group="Components" viewport="700x320" name="Status & empty state" subtitle="StatusIndicator, EmptyState" -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<link rel="stylesheet" href="../../styles.css" />
+<style>
+  body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; }
+  .row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 18px; }
+  .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/@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 { StatusIndicator, EmptyState, Button } = (window[Object.keys(window).find(k=>/^CyberSkillDesignSystem_[0-9a-f]{6}$/.test(k))]||{});
+function Demo() {
+  return (
+    <div>
+      <div className="row"><span className="lbl">Status</span>
+        <StatusIndicator status="online" pulse>All systems go</StatusIndicator>
+        <StatusIndicator status="busy">Deploying</StatusIndicator>
+        <StatusIndicator status="error">Blocked</StatusIndicator>
+        <StatusIndicator status="offline">Idle</StatusIndicator>
+      </div>
+      <div className="lbl" style={{marginBottom:8}}>Empty state</div>
+      <div className="frame">
+        <EmptyState title="No projects yet" actions={<Button size="sm">✦ Make a wish</Button>}>
+          Start by telling Lumi what you'd like to build.
+        </EmptyState>
+      </div>
+    </div>
+  );
+}
+ReactDOM.createRoot(document.getElementById("root")).render(<Demo />);
+</script>
+</body>
+</html>