@usefidel/design-system 0.17.0 → 0.18.0

package/dist/fidel.manifest.json

@@ -10,6 +10,6 @@
     "webapp.css"
   ],
   "storybookUrl": null,
-  "packageVersion": "0.17.0",
-  "resolvedSha": "eed47e39603e5683418c97c6d6dfbcaf68c284c0"
+  "packageVersion": "0.18.0",
+  "resolvedSha": "957525c79b7a52876dfbcc01b77e55168d4e3316"
 }

package/dist/index.cjs

@@ -20,12 +20,15 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  Accordion: () => Accordion,
   AppNav: () => AppNav,
   Avatar: () => Avatar,
   Badge: () => Badge,
   Button: () => Button,
   ButtonLink: () => ButtonLink,
   Callout: () => Callout,
+  Card: () => Card,
+  Checkbox: () => Checkbox,
   DiffPropertyList: () => DiffPropertyList,
   DiffSection: () => DiffSection,
   EmptyState: () => EmptyState,
@@ -33,6 +36,7 @@ __export(index_exports, {
   Modal: () => Modal,
   MultiSelect: () => MultiSelect,
   Pagination: () => Pagination,
+  Radio: () => Radio,
   SearchInput: () => SearchInput,
   SectionHeader: () => SectionHeader,
   SegmentedControl: () => SegmentedControl,
@@ -42,6 +46,8 @@ __export(index_exports, {
   SkeletonGroup: () => SkeletonGroup,
   Split: () => Split,
   StackedCardsIllustration: () => StackedCardsIllustration,
+  Stat: () => Stat,
+  StepList: () => StepList,
   TabNav: () => TabNav,
   Tag: () => Tag,
   Toggle: () => Toggle,
@@ -983,9 +989,10 @@ function Badge({ tone = "neutral", icon, className, children, ...rest }) {
 
 // src/components/Tag/Tag.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
-function Tag({ dot, className, children, ...rest }) {
+function Tag({ dot, icon, className, children, ...rest }) {
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: ["fds-tag", className].filter(Boolean).join(" "), ...rest, children: [
     dot && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: `fds-dot fds-dot--${dot}`, "aria-hidden": "true" }),
+    icon != null && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "fds-tag__icon", "aria-hidden": "true", children: icon }),
     children
   ] });
 }
@@ -1304,14 +1311,190 @@ function Skeleton({ shape = "rect", width, height, lines = 1, className, style,
 function SkeletonGroup({ label = "Loading", className, children, ...rest }) {
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { role: "status", "aria-busy": "true", "aria-label": label, className, ...rest, children });
 }
+
+// src/components/Card/Card.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function Card({ tone = "default", padding = "md", className, children, ...rest }) {
+  const classes = ["fds-card", `fds-card--${tone}`, `fds-card--pad-${padding}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: classes, ...rest, children });
+}
+
+// src/components/Stat/Stat.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function Stat({ label, value, children, className, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: ["fds-stat", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "fds-stat__label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "fds-stat__value", children: value }),
+    children != null && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "fds-stat__detail", children })
+  ] });
+}
+
+// src/components/Checkbox/Checkbox.tsx
+var import_react12 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var Checkbox = (0, import_react12.forwardRef)(function Checkbox2({ label, description, indeterminate = false, className, id, disabled, ...rest }, ref) {
+  const generatedId = (0, import_react12.useId)();
+  const inputId = id ?? generatedId;
+  const inputRef = (0, import_react12.useRef)(null);
+  (0, import_react12.useImperativeHandle)(ref, () => inputRef.current);
+  (0, import_react12.useEffect)(() => {
+    if (inputRef.current) inputRef.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    "div",
+    {
+      className: ["fds-checkbox", className].filter(Boolean).join(" "),
+      "data-disabled": disabled ? "" : void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          "input",
+          {
+            ...rest,
+            id: inputId,
+            ref: inputRef,
+            type: "checkbox",
+            disabled,
+            className: "fds-checkbox__input"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("label", { htmlFor: inputId, className: "fds-checkbox__control", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "fds-checkbox__box", "aria-hidden": "true", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("svg", { className: "fds-checkbox__tick", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M10 3L4.5 8.5 2 6", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("svg", { className: "fds-checkbox__dash", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M3 6h6", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }) })
+          ] }),
+          (label != null || description != null) && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "fds-checkbox__text", children: [
+            label != null && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fds-checkbox__label", children: label }),
+            description != null && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fds-checkbox__description", children: description })
+          ] })
+        ] })
+      ]
+    }
+  );
+});
+
+// src/components/Radio/Radio.tsx
+var import_react13 = require("react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var Radio = (0, import_react13.forwardRef)(function Radio2({ label, description, className, id, disabled, ...rest }, ref) {
+  const generatedId = (0, import_react13.useId)();
+  const inputId = id ?? generatedId;
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: ["fds-radio", className].filter(Boolean).join(" "), "data-disabled": disabled ? "" : void 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("input", { ...rest, id: inputId, ref, type: "radio", disabled, className: "fds-radio__input" }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", { htmlFor: inputId, className: "fds-radio__control", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fds-radio__circle", "aria-hidden": "true" }),
+      (label != null || description != null) && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "fds-radio__text", children: [
+        label != null && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fds-radio__label", children: label }),
+        description != null && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fds-radio__description", children: description })
+      ] })
+    ] })
+  ] });
+});
+
+// src/components/Accordion/Accordion.tsx
+var import_react14 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function Accordion({
+  summary,
+  actions,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  children,
+  className,
+  ...rest
+}) {
+  const [openState, setOpenState] = (0, import_react14.useState)(defaultOpen);
+  const open = openProp ?? openState;
+  const bodyId = (0, import_react14.useId)();
+  const toggle = () => {
+    const next = !open;
+    if (openProp === void 0) setOpenState(next);
+    onOpenChange?.(next);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    "div",
+    {
+      className: ["fds-accordion", className].filter(Boolean).join(" "),
+      "data-open": open ? "" : void 0,
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "fds-accordion__header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "fds-accordion__trigger",
+              "aria-expanded": open,
+              "aria-controls": bodyId,
+              onClick: toggle,
+              children: summary
+            }
+          ),
+          actions != null && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "fds-accordion__actions", children: actions }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "fds-accordion__chevron", "aria-hidden": "true", onClick: toggle, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("path", { d: "M6 9l6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { id: bodyId, className: "fds-accordion__body", hidden: !open, children })
+      ]
+    }
+  );
+}
+
+// src/components/StepList/StepList.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var STATUS_TEXT = {
+  done: "Done",
+  active: "In progress",
+  pending: "Not started",
+  failed: "Failed"
+};
+function StepIcon({ status }) {
+  const common = { viewBox: "0 0 24 24", width: 18, height: 18, fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
+  if (status === "done") {
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { ...common, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M8 12.5l2.5 2.5 5-5.5" })
+    ] });
+  }
+  if (status === "active") {
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("svg", { ...common, className: "fds-steps__spinner", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1" }) });
+  }
+  if (status === "failed") {
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { ...common, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M12 7.5v5.5M12 16.5v.01" })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("svg", { ...common, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("circle", { cx: "12", cy: "12", r: "9" }) });
+}
+function StepList({ steps, className, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ol", { className: ["fds-steps", className].filter(Boolean).join(" "), ...rest, children: steps.map((step) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    "li",
+    {
+      className: `fds-steps__step fds-steps__step--${step.status}`,
+      "aria-current": step.status === "active" ? "step" : void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fds-steps__icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(StepIcon, { status: step.status }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fds-steps__label", children: step.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "fds-steps__sr", children: [
+          ", ",
+          STATUS_TEXT[step.status]
+        ] })
+      ]
+    },
+    step.id
+  )) });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Accordion,
   AppNav,
   Avatar,
   Badge,
   Button,
   ButtonLink,
   Callout,
+  Card,
+  Checkbox,
   DiffPropertyList,
   DiffSection,
   EmptyState,
@@ -1319,6 +1502,7 @@ function SkeletonGroup({ label = "Loading", className, children, ...rest }) {
   Modal,
   MultiSelect,
   Pagination,
+  Radio,
   SearchInput,
   SectionHeader,
   SegmentedControl,
@@ -1328,6 +1512,8 @@ function SkeletonGroup({ label = "Loading", className, children, ...rest }) {
   SkeletonGroup,
   Split,
   StackedCardsIllustration,
+  Stat,
+  StepList,
   TabNav,
   Tag,
   Toggle,

package/dist/index.css

@@ -1519,6 +1519,15 @@
 .fds-dot--danger {
   background: var(--color-destructive, #eb2d2d);
 }
+.fds-tag__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--color-text-secondary, #525252);
+}
+.fds-tag__icon > svg {
+  width: 14px;
+  height: 14px;
+}
 
 /* src/components/MultiSelect/multi-select.css */
 .fds-multiselect {
@@ -2049,3 +2058,374 @@
     animation: none;
   }
 }
+
+/* src/components/Card/card.css */
+.fds-card {
+  box-sizing: border-box;
+  border-radius: var(--radius-2xl, 16px);
+  color: var(--color-text, #171717);
+}
+.fds-card--subtle {
+  background: var(--color-surface-subtle, #fafafa);
+  border: 1px solid var(--color-border-light, #f5f5f5);
+}
+.fds-card--default {
+  background: var(--color-bg, #ffffff);
+  border: 1px solid var(--color-border, #e5e5e5);
+  border-radius: var(--radius-xl, 12px);
+}
+.fds-card--plain {
+  background: var(--color-bg, #ffffff);
+  border: 1px solid transparent;
+  border-radius: var(--radius-xl, 12px);
+}
+.fds-card--pad-none {
+  padding: 0;
+}
+.fds-card--pad-md {
+  padding: var(--spacing-6, 24px);
+}
+.fds-card--pad-lg {
+  padding: var(--spacing-10, 40px) var(--spacing-12, 48px);
+}
+@media (max-width: 600px) {
+  .fds-card--pad-lg {
+    padding: var(--spacing-6, 24px);
+  }
+}
+
+/* src/components/Stat/stat.css */
+.fds-stat {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1, 4px);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+}
+.fds-stat__label {
+  margin: 0;
+  font-size: var(--font-size-text-sm, 14px);
+  line-height: 20px;
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-text-secondary, #525252);
+}
+.fds-stat__value {
+  margin: 0;
+  font-size: var(--font-size-display-md, 36px);
+  line-height: 44px;
+  font-weight: var(--font-weight-semibold, 600);
+  letter-spacing: -0.02em;
+  color: var(--color-text, #171717);
+  font-variant-numeric: tabular-nums;
+}
+.fds-stat__detail {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-2, 8px);
+  margin-top: var(--spacing-3, 12px);
+}
+
+/* src/components/Checkbox/checkbox.css */
+.fds-checkbox {
+  display: inline-flex;
+  position: relative;
+}
+.fds-checkbox__input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+.fds-checkbox__input:disabled {
+  cursor: not-allowed;
+}
+.fds-checkbox__control {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--spacing-2, 8px);
+  cursor: pointer;
+}
+.fds-checkbox__box {
+  box-sizing: border-box;
+  display: inline-grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  margin-top: 3px;
+  border: 1px solid var(--color-border-strong, #d4d4d4);
+  border-radius: var(--radius-sm, 4px);
+  background: var(--color-bg, #ffffff);
+  color: var(--color-bg, #ffffff);
+  transition: background-color var(--duration-quick, 150ms) ease, border-color var(--duration-quick, 150ms) ease;
+}
+.fds-checkbox__control:not(:has(.fds-checkbox__text)) .fds-checkbox__box {
+  margin-top: 0;
+}
+.fds-checkbox__tick,
+.fds-checkbox__dash {
+  grid-area: 1 / 1;
+  width: 10px;
+  height: 10px;
+  visibility: hidden;
+}
+.fds-checkbox__input:checked ~ .fds-checkbox__control .fds-checkbox__box,
+.fds-checkbox__input:indeterminate ~ .fds-checkbox__control .fds-checkbox__box {
+  background: var(--color-text, #171717);
+  border-color: var(--color-text, #171717);
+}
+.fds-checkbox__input:checked:not(:indeterminate) ~ .fds-checkbox__control .fds-checkbox__tick {
+  visibility: visible;
+}
+.fds-checkbox__input:indeterminate ~ .fds-checkbox__control .fds-checkbox__dash {
+  visibility: visible;
+}
+.fds-checkbox__input:hover:not(:disabled):not(:checked) ~ .fds-checkbox__control .fds-checkbox__box {
+  border-color: var(--color-text-secondary, #525252);
+}
+.fds-checkbox__input:focus-visible ~ .fds-checkbox__control .fds-checkbox__box {
+  outline: 2px solid var(--color-focus, #ea580c);
+  outline-offset: 2px;
+}
+.fds-checkbox[data-disabled] .fds-checkbox__box {
+  opacity: 0.5;
+}
+.fds-checkbox[data-disabled] .fds-checkbox__label,
+.fds-checkbox[data-disabled] .fds-checkbox__description {
+  color: var(--color-text-muted, #a3a3a3);
+}
+.fds-checkbox__text {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.fds-checkbox__label {
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-sm, 14px);
+  line-height: 22px;
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-text, #171717);
+}
+.fds-checkbox__description {
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-sm, 14px);
+  line-height: 22px;
+  color: var(--color-text-secondary, #525252);
+}
+@media (prefers-reduced-motion: reduce) {
+  .fds-checkbox__box {
+    transition: none;
+  }
+}
+
+/* src/components/Radio/radio.css */
+.fds-radio {
+  display: inline-flex;
+  position: relative;
+}
+.fds-radio__input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+.fds-radio__input:disabled {
+  cursor: not-allowed;
+}
+.fds-radio__control {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--spacing-2, 8px);
+  cursor: pointer;
+}
+.fds-radio__circle {
+  box-sizing: border-box;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  margin-top: 3px;
+  border: 1px solid var(--color-border-strong, #d4d4d4);
+  border-radius: var(--radius-full, 9999px);
+  background: var(--color-bg, #ffffff);
+  transition: border-color var(--duration-quick, 150ms) ease, border-width var(--duration-quick, 150ms) ease;
+}
+.fds-radio__control:not(:has(.fds-radio__text)) .fds-radio__circle {
+  margin-top: 0;
+}
+.fds-radio__input:checked ~ .fds-radio__control .fds-radio__circle {
+  border: 5px solid var(--color-text, #171717);
+}
+.fds-radio__input:hover:not(:disabled):not(:checked) ~ .fds-radio__control .fds-radio__circle {
+  border-color: var(--color-text-secondary, #525252);
+}
+.fds-radio__input:focus-visible ~ .fds-radio__control .fds-radio__circle {
+  outline: 2px solid var(--color-focus, #ea580c);
+  outline-offset: 2px;
+}
+.fds-radio[data-disabled] .fds-radio__circle {
+  opacity: 0.5;
+}
+.fds-radio[data-disabled] .fds-radio__label,
+.fds-radio[data-disabled] .fds-radio__description {
+  color: var(--color-text-muted, #a3a3a3);
+}
+.fds-radio__text {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.fds-radio__label {
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-sm, 14px);
+  line-height: 22px;
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-text, #171717);
+}
+.fds-radio__description {
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-sm, 14px);
+  line-height: 22px;
+  color: var(--color-text-secondary, #525252);
+}
+@media (prefers-reduced-motion: reduce) {
+  .fds-radio__circle {
+    transition: none;
+  }
+}
+
+/* src/components/Accordion/accordion.css */
+.fds-accordion {
+  box-sizing: border-box;
+  background: var(--color-bg, #ffffff);
+  border: 1px solid var(--color-border, #e5e5e5);
+  border-radius: var(--radius-xl, 12px);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  color: var(--color-text, #171717);
+}
+.fds-accordion + .fds-accordion {
+  margin-top: var(--spacing-3, 12px);
+}
+.fds-accordion__header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3, 12px);
+  padding: 0 var(--spacing-4, 16px) 0 0;
+}
+.fds-accordion__trigger {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3, 12px);
+  padding: var(--spacing-4, 16px);
+  margin: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  border-radius: var(--radius-xl, 12px);
+}
+.fds-accordion__trigger:focus-visible {
+  outline: 2px solid var(--color-focus, #ea580c);
+  outline-offset: -2px;
+}
+.fds-accordion__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2, 8px);
+  flex-shrink: 0;
+}
+.fds-accordion__chevron {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--color-text-secondary, #525252);
+  cursor: pointer;
+  transition: transform var(--duration-quick, 150ms) ease;
+}
+.fds-accordion[data-open] .fds-accordion__chevron {
+  transform: rotate(180deg);
+}
+.fds-accordion__body {
+  padding: 0 var(--spacing-4, 16px) var(--spacing-4, 16px);
+}
+@media (prefers-reduced-motion: reduce) {
+  .fds-accordion__chevron {
+    transition: none;
+  }
+}
+
+/* src/components/StepList/step-list.css */
+.fds-steps {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3, 12px);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+}
+.fds-steps__step {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3, 12px);
+  min-height: 54px;
+  padding: var(--spacing-3, 12px) var(--spacing-4, 16px);
+  border: 1px solid var(--color-border, #e5e5e5);
+  border-radius: var(--radius-lg, 8px);
+  background: var(--color-surface-subtle, #fafafa);
+  font-size: var(--font-size-text-sm, 14px);
+  line-height: 20px;
+  color: var(--color-text-muted, #a3a3a3);
+}
+.fds-steps__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+.fds-steps__step--done {
+  background: var(--color-text, #171717);
+  border-color: var(--color-text, #171717);
+  color: var(--color-bg, #ffffff);
+  font-weight: var(--font-weight-medium, 500);
+}
+.fds-steps__step--active {
+  background: var(--color-surface, #f5f5f5);
+  color: var(--color-text, #171717);
+  font-weight: var(--font-weight-medium, 500);
+}
+.fds-steps__step--failed {
+  background: var(--color-error-bg, #fef2f2);
+  border-color: var(--color-error-border, #fecaca);
+  color: var(--color-error-text, #991b1b);
+  font-weight: var(--font-weight-medium, 500);
+}
+.fds-steps__spinner {
+  animation: fds-steps-spin 1.2s linear infinite;
+}
+@keyframes fds-steps-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.fds-steps__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+@media (prefers-reduced-motion: reduce) {
+  .fds-steps__spinner {
+    animation: none;
+  }
+}

package/dist/index.d.cts

@@ -462,6 +462,8 @@ declare function Badge({ tone, icon, className, children, ...rest }: BadgeProps)
 interface TagProps extends HTMLAttributes<HTMLSpanElement> {
     /** Colour of the leading dot. Leave out for no dot. */
     dot?: Tone;
+    /** Leading icon, drawn at 14px, e.g. a repository or branch mark. */
+    icon?: ReactNode;
     children: ReactNode;
 }
 /**
@@ -469,7 +471,7 @@ interface TagProps extends HTMLAttributes<HTMLSpanElement> {
  * optional coloured dot. Measured from Figma "✅Project" comparison-type chip
  * (node 231:59808).
  */
-declare function Tag({ dot, className, children, ...rest }: TagProps): react.JSX.Element;
+declare function Tag({ dot, icon, className, children, ...rest }: TagProps): react.JSX.Element;
 
 interface MultiSelectOption {
     value: string;
@@ -603,4 +605,105 @@ interface SkeletonGroupProps extends HTMLAttributes<HTMLDivElement> {
 /** Wraps a skeleton layout and announces it once as loading (role="status"). */
 declare function SkeletonGroup({ label, className, children, ...rest }: SkeletonGroupProps): react.JSX.Element;
 
-export { AppNav, type AppNavProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type Breakpoint, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Callout, type CalloutProps, type CalloutTone, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, EmptyState, type EmptyStateProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, MultiSelect, type MultiSelectOption, type MultiSelectProps, Pagination, type PaginationProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, type SkeletonShape, Split, type SplitProps, StackedCardsIllustration, TabNav, type TabNavProps, Tag, type TagProps, Toggle, type ToggleProps, type ToggleSize, type Tone, breakpoints };
+/** Surface colour. `subtle` is the grey panel, `default` white with a border, `plain` white without one. */
+type CardTone = 'subtle' | 'default' | 'plain';
+type CardPadding = 'none' | 'md' | 'lg';
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /** @default 'default' */
+    tone?: CardTone;
+    /** Inner spacing: 24px (`md`) or 40px (`lg`, 24px on phones). @default 'md' */
+    padding?: CardPadding;
+    children?: ReactNode;
+}
+/**
+ * Fidel design-system Card: a rounded surface that groups related content.
+ * It has no layout of its own; put anything inside. Measured from Figma
+ * "Integrations" frames (nodes 231:66631, 231:67267, 231:67335).
+ */
+declare function Card({ tone, padding, className, children, ...rest }: CardProps): react.JSX.Element;
+
+interface StatProps extends HTMLAttributes<HTMLDivElement> {
+    /** What the number counts, e.g. "Tokens found". */
+    label: ReactNode;
+    /** The figure itself. */
+    value: ReactNode;
+    /** Detail under the figure, e.g. a row of Tags. */
+    children?: ReactNode;
+}
+/**
+ * Fidel design-system Stat: a caption, a large figure and optional detail.
+ * Has no surface; wrap it in a Card. Measured from Figma "Design System
+ * connected" (node 231:67335).
+ */
+declare function Stat({ label, value, children, className, ...rest }: StatProps): react.JSX.Element;
+
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /** Text beside the box. Without one, pass `aria-label`. */
+    label?: ReactNode;
+    /** Secondary line under the label. */
+    description?: ReactNode;
+    /** Shows a dash for "some of these"; screen readers announce it as mixed. */
+    indeterminate?: boolean;
+}
+/**
+ * Fidel design-system Checkbox. Renders a native checkbox, visually hidden
+ * over a drawn box, so checked/indeterminate/disabled/focus come from the
+ * input itself and every standard input attribute passes through. Built like
+ * Toggle; checked is ink-filled to match the Integrations frames.
+ */
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /** Text beside the circle. Without one, pass `aria-label`. */
+    label?: ReactNode;
+    /** Secondary line under the label. */
+    description?: ReactNode;
+}
+/**
+ * Fidel design-system Radio: one choice of several. Give every Radio in a
+ * set the same `name`, and wrap the set in a `role="radiogroup"` element (or
+ * a fieldset) with a label. Built like Checkbox: a native input over a drawn
+ * circle, ink-filled when chosen.
+ */
+declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
+
+interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Header content, always visible. Clicking it opens and closes the body. */
+    summary: ReactNode;
+    /**
+     * Controls in the header that do their own thing, e.g. a Retry button.
+     * Kept outside the toggle so they stay separate keyboard stops.
+     */
+    actions?: ReactNode;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. @default false */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Body, shown while open. */
+    children?: ReactNode;
+}
+/**
+ * Fidel design-system Accordion: one row that expands to show more. Stack
+ * several for a list. The header is a button with `aria-expanded`; the
+ * chevron on the right points down when closed and up when open.
+ */
+declare function Accordion({ summary, actions, open: openProp, defaultOpen, onOpenChange, children, className, ...rest }: AccordionProps): react.JSX.Element;
+
+type StepStatus = 'done' | 'active' | 'pending' | 'failed';
+interface Step {
+    id: string;
+    label: ReactNode;
+    status: StepStatus;
+}
+interface StepListProps extends Omit<HTMLAttributes<HTMLOListElement>, 'children'> {
+    steps: Step[];
+}
+/**
+ * Fidel design-system StepList: an ordered list of steps, each done, in
+ * progress, not started or failed. The in-progress step is marked
+ * `aria-current="step"`. Measured from Figma "Scanning" (node 231:67267).
+ */
+declare function StepList({ steps, className, ...rest }: StepListProps): react.JSX.Element;
+
+export { Accordion, type AccordionProps, AppNav, type AppNavProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type Breakpoint, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Callout, type CalloutProps, type CalloutTone, Card, type CardPadding, type CardProps, type CardTone, Checkbox, type CheckboxProps, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, EmptyState, type EmptyStateProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, MultiSelect, type MultiSelectOption, type MultiSelectProps, Pagination, type PaginationProps, Radio, type RadioProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, type SkeletonShape, Split, type SplitProps, StackedCardsIllustration, Stat, type StatProps, type Step, StepList, type StepListProps, type StepStatus, TabNav, type TabNavProps, Tag, type TagProps, Toggle, type ToggleProps, type ToggleSize, type Tone, breakpoints };

package/dist/index.d.ts

@@ -462,6 +462,8 @@ declare function Badge({ tone, icon, className, children, ...rest }: BadgeProps)
 interface TagProps extends HTMLAttributes<HTMLSpanElement> {
     /** Colour of the leading dot. Leave out for no dot. */
     dot?: Tone;
+    /** Leading icon, drawn at 14px, e.g. a repository or branch mark. */
+    icon?: ReactNode;
     children: ReactNode;
 }
 /**
@@ -469,7 +471,7 @@ interface TagProps extends HTMLAttributes<HTMLSpanElement> {
  * optional coloured dot. Measured from Figma "✅Project" comparison-type chip
  * (node 231:59808).
  */
-declare function Tag({ dot, className, children, ...rest }: TagProps): react.JSX.Element;
+declare function Tag({ dot, icon, className, children, ...rest }: TagProps): react.JSX.Element;
 
 interface MultiSelectOption {
     value: string;
@@ -603,4 +605,105 @@ interface SkeletonGroupProps extends HTMLAttributes<HTMLDivElement> {
 /** Wraps a skeleton layout and announces it once as loading (role="status"). */
 declare function SkeletonGroup({ label, className, children, ...rest }: SkeletonGroupProps): react.JSX.Element;
 
-export { AppNav, type AppNavProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type Breakpoint, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Callout, type CalloutProps, type CalloutTone, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, EmptyState, type EmptyStateProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, MultiSelect, type MultiSelectOption, type MultiSelectProps, Pagination, type PaginationProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, type SkeletonShape, Split, type SplitProps, StackedCardsIllustration, TabNav, type TabNavProps, Tag, type TagProps, Toggle, type ToggleProps, type ToggleSize, type Tone, breakpoints };
+/** Surface colour. `subtle` is the grey panel, `default` white with a border, `plain` white without one. */
+type CardTone = 'subtle' | 'default' | 'plain';
+type CardPadding = 'none' | 'md' | 'lg';
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /** @default 'default' */
+    tone?: CardTone;
+    /** Inner spacing: 24px (`md`) or 40px (`lg`, 24px on phones). @default 'md' */
+    padding?: CardPadding;
+    children?: ReactNode;
+}
+/**
+ * Fidel design-system Card: a rounded surface that groups related content.
+ * It has no layout of its own; put anything inside. Measured from Figma
+ * "Integrations" frames (nodes 231:66631, 231:67267, 231:67335).
+ */
+declare function Card({ tone, padding, className, children, ...rest }: CardProps): react.JSX.Element;
+
+interface StatProps extends HTMLAttributes<HTMLDivElement> {
+    /** What the number counts, e.g. "Tokens found". */
+    label: ReactNode;
+    /** The figure itself. */
+    value: ReactNode;
+    /** Detail under the figure, e.g. a row of Tags. */
+    children?: ReactNode;
+}
+/**
+ * Fidel design-system Stat: a caption, a large figure and optional detail.
+ * Has no surface; wrap it in a Card. Measured from Figma "Design System
+ * connected" (node 231:67335).
+ */
+declare function Stat({ label, value, children, className, ...rest }: StatProps): react.JSX.Element;
+
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /** Text beside the box. Without one, pass `aria-label`. */
+    label?: ReactNode;
+    /** Secondary line under the label. */
+    description?: ReactNode;
+    /** Shows a dash for "some of these"; screen readers announce it as mixed. */
+    indeterminate?: boolean;
+}
+/**
+ * Fidel design-system Checkbox. Renders a native checkbox, visually hidden
+ * over a drawn box, so checked/indeterminate/disabled/focus come from the
+ * input itself and every standard input attribute passes through. Built like
+ * Toggle; checked is ink-filled to match the Integrations frames.
+ */
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /** Text beside the circle. Without one, pass `aria-label`. */
+    label?: ReactNode;
+    /** Secondary line under the label. */
+    description?: ReactNode;
+}
+/**
+ * Fidel design-system Radio: one choice of several. Give every Radio in a
+ * set the same `name`, and wrap the set in a `role="radiogroup"` element (or
+ * a fieldset) with a label. Built like Checkbox: a native input over a drawn
+ * circle, ink-filled when chosen.
+ */
+declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
+
+interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Header content, always visible. Clicking it opens and closes the body. */
+    summary: ReactNode;
+    /**
+     * Controls in the header that do their own thing, e.g. a Retry button.
+     * Kept outside the toggle so they stay separate keyboard stops.
+     */
+    actions?: ReactNode;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. @default false */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Body, shown while open. */
+    children?: ReactNode;
+}
+/**
+ * Fidel design-system Accordion: one row that expands to show more. Stack
+ * several for a list. The header is a button with `aria-expanded`; the
+ * chevron on the right points down when closed and up when open.
+ */
+declare function Accordion({ summary, actions, open: openProp, defaultOpen, onOpenChange, children, className, ...rest }: AccordionProps): react.JSX.Element;
+
+type StepStatus = 'done' | 'active' | 'pending' | 'failed';
+interface Step {
+    id: string;
+    label: ReactNode;
+    status: StepStatus;
+}
+interface StepListProps extends Omit<HTMLAttributes<HTMLOListElement>, 'children'> {
+    steps: Step[];
+}
+/**
+ * Fidel design-system StepList: an ordered list of steps, each done, in
+ * progress, not started or failed. The in-progress step is marked
+ * `aria-current="step"`. Measured from Figma "Scanning" (node 231:67267).
+ */
+declare function StepList({ steps, className, ...rest }: StepListProps): react.JSX.Element;
+
+export { Accordion, type AccordionProps, AppNav, type AppNavProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type Breakpoint, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Callout, type CalloutProps, type CalloutTone, Card, type CardPadding, type CardProps, type CardTone, Checkbox, type CheckboxProps, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, EmptyState, type EmptyStateProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, MultiSelect, type MultiSelectOption, type MultiSelectProps, Pagination, type PaginationProps, Radio, type RadioProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, type SkeletonShape, Split, type SplitProps, StackedCardsIllustration, Stat, type StatProps, type Step, StepList, type StepListProps, type StepStatus, TabNav, type TabNavProps, Tag, type TagProps, Toggle, type ToggleProps, type ToggleSize, type Tone, breakpoints };

package/dist/index.js

@@ -940,9 +940,10 @@ function Badge({ tone = "neutral", icon, className, children, ...rest }) {
 
 // src/components/Tag/Tag.tsx
 import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
-function Tag({ dot, className, children, ...rest }) {
+function Tag({ dot, icon, className, children, ...rest }) {
   return /* @__PURE__ */ jsxs14("span", { className: ["fds-tag", className].filter(Boolean).join(" "), ...rest, children: [
     dot && /* @__PURE__ */ jsx16("span", { className: `fds-dot fds-dot--${dot}`, "aria-hidden": "true" }),
+    icon != null && /* @__PURE__ */ jsx16("span", { className: "fds-tag__icon", "aria-hidden": "true", children: icon }),
     children
   ] });
 }
@@ -1261,13 +1262,195 @@ function Skeleton({ shape = "rect", width, height, lines = 1, className, style,
 function SkeletonGroup({ label = "Loading", className, children, ...rest }) {
   return /* @__PURE__ */ jsx22("div", { role: "status", "aria-busy": "true", "aria-label": label, className, ...rest, children });
 }
+
+// src/components/Card/Card.tsx
+import { jsx as jsx23 } from "react/jsx-runtime";
+function Card({ tone = "default", padding = "md", className, children, ...rest }) {
+  const classes = ["fds-card", `fds-card--${tone}`, `fds-card--pad-${padding}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx23("div", { className: classes, ...rest, children });
+}
+
+// src/components/Stat/Stat.tsx
+import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
+function Stat({ label, value, children, className, ...rest }) {
+  return /* @__PURE__ */ jsxs20("div", { className: ["fds-stat", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ jsx24("p", { className: "fds-stat__label", children: label }),
+    /* @__PURE__ */ jsx24("p", { className: "fds-stat__value", children: value }),
+    children != null && /* @__PURE__ */ jsx24("div", { className: "fds-stat__detail", children })
+  ] });
+}
+
+// src/components/Checkbox/Checkbox.tsx
+import {
+  forwardRef as forwardRef4,
+  useEffect as useEffect5,
+  useId as useId7,
+  useImperativeHandle as useImperativeHandle2,
+  useRef as useRef6
+} from "react";
+import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
+var Checkbox = forwardRef4(function Checkbox2({ label, description, indeterminate = false, className, id, disabled, ...rest }, ref) {
+  const generatedId = useId7();
+  const inputId = id ?? generatedId;
+  const inputRef = useRef6(null);
+  useImperativeHandle2(ref, () => inputRef.current);
+  useEffect5(() => {
+    if (inputRef.current) inputRef.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+  return /* @__PURE__ */ jsxs21(
+    "div",
+    {
+      className: ["fds-checkbox", className].filter(Boolean).join(" "),
+      "data-disabled": disabled ? "" : void 0,
+      children: [
+        /* @__PURE__ */ jsx25(
+          "input",
+          {
+            ...rest,
+            id: inputId,
+            ref: inputRef,
+            type: "checkbox",
+            disabled,
+            className: "fds-checkbox__input"
+          }
+        ),
+        /* @__PURE__ */ jsxs21("label", { htmlFor: inputId, className: "fds-checkbox__control", children: [
+          /* @__PURE__ */ jsxs21("span", { className: "fds-checkbox__box", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx25("svg", { className: "fds-checkbox__tick", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx25("path", { d: "M10 3L4.5 8.5 2 6", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+            /* @__PURE__ */ jsx25("svg", { className: "fds-checkbox__dash", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx25("path", { d: "M3 6h6", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }) })
+          ] }),
+          (label != null || description != null) && /* @__PURE__ */ jsxs21("span", { className: "fds-checkbox__text", children: [
+            label != null && /* @__PURE__ */ jsx25("span", { className: "fds-checkbox__label", children: label }),
+            description != null && /* @__PURE__ */ jsx25("span", { className: "fds-checkbox__description", children: description })
+          ] })
+        ] })
+      ]
+    }
+  );
+});
+
+// src/components/Radio/Radio.tsx
+import { forwardRef as forwardRef5, useId as useId8 } from "react";
+import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
+var Radio = forwardRef5(function Radio2({ label, description, className, id, disabled, ...rest }, ref) {
+  const generatedId = useId8();
+  const inputId = id ?? generatedId;
+  return /* @__PURE__ */ jsxs22("div", { className: ["fds-radio", className].filter(Boolean).join(" "), "data-disabled": disabled ? "" : void 0, children: [
+    /* @__PURE__ */ jsx26("input", { ...rest, id: inputId, ref, type: "radio", disabled, className: "fds-radio__input" }),
+    /* @__PURE__ */ jsxs22("label", { htmlFor: inputId, className: "fds-radio__control", children: [
+      /* @__PURE__ */ jsx26("span", { className: "fds-radio__circle", "aria-hidden": "true" }),
+      (label != null || description != null) && /* @__PURE__ */ jsxs22("span", { className: "fds-radio__text", children: [
+        label != null && /* @__PURE__ */ jsx26("span", { className: "fds-radio__label", children: label }),
+        description != null && /* @__PURE__ */ jsx26("span", { className: "fds-radio__description", children: description })
+      ] })
+    ] })
+  ] });
+});
+
+// src/components/Accordion/Accordion.tsx
+import { useId as useId9, useState as useState7 } from "react";
+import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
+function Accordion({
+  summary,
+  actions,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  children,
+  className,
+  ...rest
+}) {
+  const [openState, setOpenState] = useState7(defaultOpen);
+  const open = openProp ?? openState;
+  const bodyId = useId9();
+  const toggle = () => {
+    const next = !open;
+    if (openProp === void 0) setOpenState(next);
+    onOpenChange?.(next);
+  };
+  return /* @__PURE__ */ jsxs23(
+    "div",
+    {
+      className: ["fds-accordion", className].filter(Boolean).join(" "),
+      "data-open": open ? "" : void 0,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs23("div", { className: "fds-accordion__header", children: [
+          /* @__PURE__ */ jsx27(
+            "button",
+            {
+              type: "button",
+              className: "fds-accordion__trigger",
+              "aria-expanded": open,
+              "aria-controls": bodyId,
+              onClick: toggle,
+              children: summary
+            }
+          ),
+          actions != null && /* @__PURE__ */ jsx27("div", { className: "fds-accordion__actions", children: actions }),
+          /* @__PURE__ */ jsx27("span", { className: "fds-accordion__chevron", "aria-hidden": "true", onClick: toggle, children: /* @__PURE__ */ jsx27("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ jsx27("path", { d: "M6 9l6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+        ] }),
+        /* @__PURE__ */ jsx27("div", { id: bodyId, className: "fds-accordion__body", hidden: !open, children })
+      ]
+    }
+  );
+}
+
+// src/components/StepList/StepList.tsx
+import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
+var STATUS_TEXT = {
+  done: "Done",
+  active: "In progress",
+  pending: "Not started",
+  failed: "Failed"
+};
+function StepIcon({ status }) {
+  const common = { viewBox: "0 0 24 24", width: 18, height: 18, fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
+  if (status === "done") {
+    return /* @__PURE__ */ jsxs24("svg", { ...common, children: [
+      /* @__PURE__ */ jsx28("circle", { cx: "12", cy: "12", r: "9" }),
+      /* @__PURE__ */ jsx28("path", { d: "M8 12.5l2.5 2.5 5-5.5" })
+    ] });
+  }
+  if (status === "active") {
+    return /* @__PURE__ */ jsx28("svg", { ...common, className: "fds-steps__spinner", children: /* @__PURE__ */ jsx28("path", { d: "M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1" }) });
+  }
+  if (status === "failed") {
+    return /* @__PURE__ */ jsxs24("svg", { ...common, children: [
+      /* @__PURE__ */ jsx28("circle", { cx: "12", cy: "12", r: "9" }),
+      /* @__PURE__ */ jsx28("path", { d: "M12 7.5v5.5M12 16.5v.01" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx28("svg", { ...common, children: /* @__PURE__ */ jsx28("circle", { cx: "12", cy: "12", r: "9" }) });
+}
+function StepList({ steps, className, ...rest }) {
+  return /* @__PURE__ */ jsx28("ol", { className: ["fds-steps", className].filter(Boolean).join(" "), ...rest, children: steps.map((step) => /* @__PURE__ */ jsxs24(
+    "li",
+    {
+      className: `fds-steps__step fds-steps__step--${step.status}`,
+      "aria-current": step.status === "active" ? "step" : void 0,
+      children: [
+        /* @__PURE__ */ jsx28("span", { className: "fds-steps__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx28(StepIcon, { status: step.status }) }),
+        /* @__PURE__ */ jsx28("span", { className: "fds-steps__label", children: step.label }),
+        /* @__PURE__ */ jsxs24("span", { className: "fds-steps__sr", children: [
+          ", ",
+          STATUS_TEXT[step.status]
+        ] })
+      ]
+    },
+    step.id
+  )) });
+}
 export {
+  Accordion,
   AppNav,
   Avatar,
   Badge,
   Button,
   ButtonLink,
   Callout,
+  Card,
+  Checkbox,
   DiffPropertyList,
   DiffSection,
   EmptyState,
@@ -1275,6 +1458,7 @@ export {
   Modal,
   MultiSelect,
   Pagination,
+  Radio,
   SearchInput,
   SectionHeader,
   SegmentedControl,
@@ -1284,6 +1468,8 @@ export {
   SkeletonGroup,
   Split,
   StackedCardsIllustration,
+  Stat,
+  StepList,
   TabNav,
   Tag,
   Toggle,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usefidel/design-system",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "Fidel brand design tokens + React component library — DTCG token source of truth, generated per-surface CSS + Tailwind-v4 parser-compatibility output, and on-brand React components (Button, MismatchCard, DiffSection).",
   "type": "module",
   "main": "./dist/index.cjs",