@usefidel/design-system 0.3.0 → 0.5.0

package/dist/fidel.manifest.json

@@ -10,6 +10,6 @@
     "webapp.css"
   ],
   "storybookUrl": null,
-  "packageVersion": "0.3.0",
-  "resolvedSha": "e4915ceec1dba185cff3ba11756fee2676b48c5d"
+  "packageVersion": "0.5.0",
+  "resolvedSha": "03a49c2e8d888b7916f449d7801daa922c525737"
 }

package/dist/index.cjs

@@ -128,69 +128,129 @@ function DiffSection({
   mismatchCount,
   elements,
   defaultExpanded = false,
+  headerless = false,
+  onElementToggle,
+  onElementHover,
   className,
   ...rest
 }) {
   const [expanded, setExpanded] = (0, import_react2.useState)(defaultExpanded);
+  const open = headerless || expanded;
   const count = mismatchCount ?? elements.reduce((sum, el) => sum + el.properties.length, 0);
-  const classes = ["fds-diff-section", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: classes, "data-expanded": expanded ? "true" : void 0, ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-      "button",
-      {
-        type: "button",
-        className: "fds-diff-section__header",
-        "aria-expanded": expanded,
-        onClick: () => setExpanded((v) => !v),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "fds-diff-section__head-left", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Chevron2, { open: expanded }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-diff-section__number", children: number }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-diff-section__name", children: name })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-diff-section__count", children: plural(count, "mismatch", "mismatches") })
-        ]
-      }
-    ),
-    expanded && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fds-diff-section__body", children: elements.map((el, ei) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fds-diff-section__element", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fds-diff-section__element-head", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-diff-section__element-name", children: el.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-diff-section__element-count", children: plural(el.properties.length, "property", "properties") })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fds-diff-section__lines", children: el.properties.map((line, li) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fds-diff-section__line", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-diff-section__prop", children: line.property }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "fds-diff-section__delta", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-diff-section__live", children: line.live }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Arrow, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-diff-section__design", children: line.design })
-        ] })
-      ] }, `${line.property}-${li}`)) })
-    ] }, `${el.name}-${ei}`)) })
-  ] });
+  const classes = [
+    "fds-diff-section",
+    headerless && "fds-diff-section--flat",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: classes,
+      "data-expanded": open ? "true" : void 0,
+      "data-flat": headerless ? "true" : void 0,
+      ...rest,
+      children: [
+        !headerless && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "button",
+          {
+            type: "button",
+            className: "fds-diff-section__header",
+            "aria-expanded": expanded,
+            onClick: () => setExpanded((v) => !v),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "fds-diff-section__head-left", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Chevron2, { open: expanded }),
+                number != null && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-diff-section__number", children: number }),
+                name != null && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-diff-section__name", children: name })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-diff-section__count", children: plural(count, "mismatch", "mismatches") })
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fds-diff-section__body", children: elements.map((el, ei) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          ElementRow,
+          {
+            element: el,
+            index: ei,
+            onToggle: onElementToggle,
+            onHover: onElementHover
+          },
+          `${el.name}-${ei}`
+        )) })
+      ]
+    }
+  );
 }
-function Chevron2({ open }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    "svg",
+function ElementRow({
+  element,
+  index,
+  onToggle,
+  onHover
+}) {
+  const hasDetail = element.detail != null;
+  const isControlled = element.open !== void 0;
+  const [internalOpen, setInternalOpen] = (0, import_react2.useState)(element.defaultOpen ?? false);
+  const open = isControlled ? !!element.open : internalOpen;
+  const toggle = () => {
+    const next = !open;
+    if (!isControlled) setInternalOpen(next);
+    onToggle?.(index, next);
+  };
+  const lines = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fds-diff-section__element-head-inner", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-diff-section__element-name", children: element.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-diff-section__element-count", children: plural(element.properties.length, "property", "properties") }),
+      hasDetail && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Chevron2, { open, className: "fds-diff-section__element-caret" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fds-diff-section__lines", children: element.properties.map((line, li) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fds-diff-section__line", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-diff-section__prop", children: line.property }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "fds-diff-section__delta", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-diff-section__live", children: line.live }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Arrow, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-diff-section__design", children: line.design })
+      ] })
+    ] }, `${line.property}-${li}`)) })
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
     {
-      className: `fds-diff-section__chevron${open ? " fds-diff-section__chevron--open" : ""}`,
-      width: "12",
-      height: "12",
-      viewBox: "0 0 12 12",
-      fill: "none",
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        "path",
-        {
-          d: "M4.5 3 8 6l-3.5 3",
-          stroke: "currentColor",
-          strokeWidth: "1.3",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      )
+      className: "fds-diff-section__element",
+      "data-open": hasDetail && open ? "true" : void 0,
+      onMouseEnter: onHover ? () => onHover(index, true) : void 0,
+      onMouseLeave: onHover ? () => onHover(index, false) : void 0,
+      children: [
+        hasDetail ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "fds-diff-section__element-head fds-diff-section__element-head--button",
+            "aria-expanded": open,
+            onClick: toggle,
+            children: lines
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fds-diff-section__element-head", children: lines }),
+        hasDetail && open && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fds-diff-section__detail", children: element.detail })
+      ]
     }
   );
 }
+function Chevron2({ open, className }) {
+  const classes = [
+    "fds-diff-section__chevron",
+    open && "fds-diff-section__chevron--open",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", className: classes, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "path",
+    {
+      d: "M4.5 3 8 6l-3.5 3",
+      stroke: "currentColor",
+      strokeWidth: "1.3",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
 function Arrow() {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "svg",

package/dist/index.css

@@ -310,14 +310,45 @@
 .fds-diff-section__element {
   display: flex;
   flex-direction: column;
+}
+.fds-diff-section__element-head {
+  display: flex;
+  flex-direction: column;
   gap: 14px;
+  width: 100%;
   padding: 6px var(--spacing-5) 6px var(--spacing-6);
 }
-.fds-diff-section__element-head {
+.fds-diff-section__element-head--button {
+  border: 0;
+  background: none;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background var(--duration-quick, 150ms) ease;
+}
+.fds-diff-section__element-head--button:hover {
+  background: var(--color-surface-hover);
+}
+.fds-diff-section__element-head-inner {
   display: flex;
   align-items: center;
   gap: var(--spacing-2);
 }
+.fds-diff-section__element-caret {
+  margin-left: auto;
+  flex-shrink: 0;
+  color: var(--color-text-muted);
+}
+.fds-diff-section__detail {
+  padding: 0 var(--spacing-5) var(--spacing-3) var(--spacing-6);
+}
+.fds-diff-section--flat .fds-diff-section__body {
+  gap: 0;
+}
+.fds-diff-section--flat .fds-diff-section__element + .fds-diff-section__element {
+  border-top: 1px solid var(--color-border-light);
+}
 .fds-diff-section__element-name {
   font-weight: var(--font-weight-medium);
   font-size: 14px;

package/dist/index.d.cts

@@ -74,12 +74,29 @@ interface DiffElement {
     name: string;
     /** Property mismatches for this element. */
     properties: DiffPropertyLine[];
+    /**
+     * Optional drill-down content. When provided, the element row becomes a
+     * toggle: clicking it reveals this node beneath the property deltas. Use it
+     * to host a richer detail view (copy actions, triage, verdicts) while the
+     * mono deltas stay as the at-a-glance summary. Presentational — the caller
+     * owns whatever lives inside.
+     */
+    detail?: ReactNode;
+    /** When the element has `detail`, render it open on first paint (uncontrolled). @default false */
+    defaultOpen?: boolean;
+    /**
+     * Controlled open state. When defined, the row is controlled: the component
+     * renders this value and never keeps its own expand state — the caller owns
+     * it via `onElementToggle` (so drawer selection can drive, e.g., a matching
+     * screenshot highlight). Leave undefined for uncontrolled (`defaultOpen`).
+     */
+    open?: boolean;
 }
 interface DiffSectionProps extends HTMLAttributes<HTMLDivElement> {
-    /** Ordinal shown before the name, e.g. "01". Caller controls padding. */
-    number: string;
-    /** Section name, e.g. "Nav". */
-    name: string;
+    /** Ordinal shown before the name, e.g. "01". Omitted in `headerless` mode. */
+    number?: string;
+    /** Section name, e.g. "Nav". Omitted in `headerless` mode. */
+    name?: string;
     /**
      * Count shown on the right of the header. Defaults to the total number of
      * property lines across all elements.
@@ -87,17 +104,38 @@ interface DiffSectionProps extends HTMLAttributes<HTMLDivElement> {
     mismatchCount?: number;
     /** Elements in this section, each with its own property mismatches. */
     elements: DiffElement[];
-    /** Render expanded on first paint. @default false */
+    /** Render expanded on first paint. Ignored in `headerless` mode. @default false */
     defaultExpanded?: boolean;
+    /**
+     * Drop the numbered, collapsible section header and render the element list
+     * directly — a flat drawer with no section grouping. `number`/`name`/
+     * `mismatchCount` are ignored. @default false
+     */
+    headerless?: boolean;
+    /**
+     * Called when an element with `detail` is toggled. `index` is the element's
+     * position in `elements`. Pair with `DiffElement.open` to control expansion
+     * from the parent (e.g. to sync a screenshot highlight with drawer selection).
+     */
+    onElementToggle?: (index: number, open: boolean) => void;
+    /** Called when the pointer enters (`true`) or leaves (`false`) an element row. */
+    onElementHover?: (index: number, hovering: boolean) => void;
 }
 /**
- * Fidel design-system DiffSection — a numbered, collapsible section in the
- * mismatch drawer. Collapsed it shows just the header (`01 Nav · 2
- * mismatches`); expanded it lists each element and its property deltas.
+ * Fidel design-system DiffSection — the mismatch drawer's section.
+ *
+ * Two shapes:
+ *  - Grouped (default): a numbered, collapsible header (`01 Nav · 2
+ *    mismatches`) over its elements.
+ *  - `headerless`: just the element list, for a flat drawer with no section
+ *    grouping.
+ *
+ * Each element lists its property deltas as `live → design` mono rows, and may
+ * carry a `detail` node that expands beneath the deltas as a drill-down.
  *
  * Presentational only — no diff taxonomy. Framing is Live → Design (founder
  * decision 2026-04-24): each delta reads `live → design`.
  */
-declare function DiffSection({ number, name, mismatchCount, elements, defaultExpanded, className, ...rest }: DiffSectionProps): react.JSX.Element;
+declare function DiffSection({ number, name, mismatchCount, elements, defaultExpanded, headerless, onElementToggle, onElementHover, className, ...rest }: DiffSectionProps): react.JSX.Element;
 
 export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, type DiffElement, type DiffPropertyLine, DiffSection, type DiffSectionProps, MismatchCard, type MismatchCardProps, type MismatchProperty };

package/dist/index.d.ts

@@ -74,12 +74,29 @@ interface DiffElement {
     name: string;
     /** Property mismatches for this element. */
     properties: DiffPropertyLine[];
+    /**
+     * Optional drill-down content. When provided, the element row becomes a
+     * toggle: clicking it reveals this node beneath the property deltas. Use it
+     * to host a richer detail view (copy actions, triage, verdicts) while the
+     * mono deltas stay as the at-a-glance summary. Presentational — the caller
+     * owns whatever lives inside.
+     */
+    detail?: ReactNode;
+    /** When the element has `detail`, render it open on first paint (uncontrolled). @default false */
+    defaultOpen?: boolean;
+    /**
+     * Controlled open state. When defined, the row is controlled: the component
+     * renders this value and never keeps its own expand state — the caller owns
+     * it via `onElementToggle` (so drawer selection can drive, e.g., a matching
+     * screenshot highlight). Leave undefined for uncontrolled (`defaultOpen`).
+     */
+    open?: boolean;
 }
 interface DiffSectionProps extends HTMLAttributes<HTMLDivElement> {
-    /** Ordinal shown before the name, e.g. "01". Caller controls padding. */
-    number: string;
-    /** Section name, e.g. "Nav". */
-    name: string;
+    /** Ordinal shown before the name, e.g. "01". Omitted in `headerless` mode. */
+    number?: string;
+    /** Section name, e.g. "Nav". Omitted in `headerless` mode. */
+    name?: string;
     /**
      * Count shown on the right of the header. Defaults to the total number of
      * property lines across all elements.
@@ -87,17 +104,38 @@ interface DiffSectionProps extends HTMLAttributes<HTMLDivElement> {
     mismatchCount?: number;
     /** Elements in this section, each with its own property mismatches. */
     elements: DiffElement[];
-    /** Render expanded on first paint. @default false */
+    /** Render expanded on first paint. Ignored in `headerless` mode. @default false */
     defaultExpanded?: boolean;
+    /**
+     * Drop the numbered, collapsible section header and render the element list
+     * directly — a flat drawer with no section grouping. `number`/`name`/
+     * `mismatchCount` are ignored. @default false
+     */
+    headerless?: boolean;
+    /**
+     * Called when an element with `detail` is toggled. `index` is the element's
+     * position in `elements`. Pair with `DiffElement.open` to control expansion
+     * from the parent (e.g. to sync a screenshot highlight with drawer selection).
+     */
+    onElementToggle?: (index: number, open: boolean) => void;
+    /** Called when the pointer enters (`true`) or leaves (`false`) an element row. */
+    onElementHover?: (index: number, hovering: boolean) => void;
 }
 /**
- * Fidel design-system DiffSection — a numbered, collapsible section in the
- * mismatch drawer. Collapsed it shows just the header (`01 Nav · 2
- * mismatches`); expanded it lists each element and its property deltas.
+ * Fidel design-system DiffSection — the mismatch drawer's section.
+ *
+ * Two shapes:
+ *  - Grouped (default): a numbered, collapsible header (`01 Nav · 2
+ *    mismatches`) over its elements.
+ *  - `headerless`: just the element list, for a flat drawer with no section
+ *    grouping.
+ *
+ * Each element lists its property deltas as `live → design` mono rows, and may
+ * carry a `detail` node that expands beneath the deltas as a drill-down.
  *
  * Presentational only — no diff taxonomy. Framing is Live → Design (founder
  * decision 2026-04-24): each delta reads `live → design`.
  */
-declare function DiffSection({ number, name, mismatchCount, elements, defaultExpanded, className, ...rest }: DiffSectionProps): react.JSX.Element;
+declare function DiffSection({ number, name, mismatchCount, elements, defaultExpanded, headerless, onElementToggle, onElementHover, className, ...rest }: DiffSectionProps): react.JSX.Element;
 
 export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, type DiffElement, type DiffPropertyLine, DiffSection, type DiffSectionProps, MismatchCard, type MismatchCardProps, type MismatchProperty };

package/dist/index.js

@@ -90,7 +90,7 @@ function Chevron({ direction }) {
 
 // src/components/DiffSection/DiffSection.tsx
 import { useState as useState2 } from "react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function plural(n, one, many) {
   return `${n} ${n === 1 ? one : many}`;
 }
@@ -100,69 +100,129 @@ function DiffSection({
   mismatchCount,
   elements,
   defaultExpanded = false,
+  headerless = false,
+  onElementToggle,
+  onElementHover,
   className,
   ...rest
 }) {
   const [expanded, setExpanded] = useState2(defaultExpanded);
+  const open = headerless || expanded;
   const count = mismatchCount ?? elements.reduce((sum, el) => sum + el.properties.length, 0);
-  const classes = ["fds-diff-section", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs3("div", { className: classes, "data-expanded": expanded ? "true" : void 0, ...rest, children: [
-    /* @__PURE__ */ jsxs3(
-      "button",
-      {
-        type: "button",
-        className: "fds-diff-section__header",
-        "aria-expanded": expanded,
-        onClick: () => setExpanded((v) => !v),
-        children: [
-          /* @__PURE__ */ jsxs3("span", { className: "fds-diff-section__head-left", children: [
-            /* @__PURE__ */ jsx3(Chevron2, { open: expanded }),
-            /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__number", children: number }),
-            /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__name", children: name })
-          ] }),
-          /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__count", children: plural(count, "mismatch", "mismatches") })
-        ]
-      }
-    ),
-    expanded && /* @__PURE__ */ jsx3("div", { className: "fds-diff-section__body", children: elements.map((el, ei) => /* @__PURE__ */ jsxs3("div", { className: "fds-diff-section__element", children: [
-      /* @__PURE__ */ jsxs3("div", { className: "fds-diff-section__element-head", children: [
-        /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__element-name", children: el.name }),
-        /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__element-count", children: plural(el.properties.length, "property", "properties") })
-      ] }),
-      /* @__PURE__ */ jsx3("div", { className: "fds-diff-section__lines", children: el.properties.map((line, li) => /* @__PURE__ */ jsxs3("div", { className: "fds-diff-section__line", children: [
-        /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__prop", children: line.property }),
-        /* @__PURE__ */ jsxs3("span", { className: "fds-diff-section__delta", children: [
-          /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__live", children: line.live }),
-          /* @__PURE__ */ jsx3(Arrow, {}),
-          /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__design", children: line.design })
-        ] })
-      ] }, `${line.property}-${li}`)) })
-    ] }, `${el.name}-${ei}`)) })
-  ] });
+  const classes = [
+    "fds-diff-section",
+    headerless && "fds-diff-section--flat",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: classes,
+      "data-expanded": open ? "true" : void 0,
+      "data-flat": headerless ? "true" : void 0,
+      ...rest,
+      children: [
+        !headerless && /* @__PURE__ */ jsxs3(
+          "button",
+          {
+            type: "button",
+            className: "fds-diff-section__header",
+            "aria-expanded": expanded,
+            onClick: () => setExpanded((v) => !v),
+            children: [
+              /* @__PURE__ */ jsxs3("span", { className: "fds-diff-section__head-left", children: [
+                /* @__PURE__ */ jsx3(Chevron2, { open: expanded }),
+                number != null && /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__number", children: number }),
+                name != null && /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__name", children: name })
+              ] }),
+              /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__count", children: plural(count, "mismatch", "mismatches") })
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsx3("div", { className: "fds-diff-section__body", children: elements.map((el, ei) => /* @__PURE__ */ jsx3(
+          ElementRow,
+          {
+            element: el,
+            index: ei,
+            onToggle: onElementToggle,
+            onHover: onElementHover
+          },
+          `${el.name}-${ei}`
+        )) })
+      ]
+    }
+  );
 }
-function Chevron2({ open }) {
-  return /* @__PURE__ */ jsx3(
-    "svg",
+function ElementRow({
+  element,
+  index,
+  onToggle,
+  onHover
+}) {
+  const hasDetail = element.detail != null;
+  const isControlled = element.open !== void 0;
+  const [internalOpen, setInternalOpen] = useState2(element.defaultOpen ?? false);
+  const open = isControlled ? !!element.open : internalOpen;
+  const toggle = () => {
+    const next = !open;
+    if (!isControlled) setInternalOpen(next);
+    onToggle?.(index, next);
+  };
+  const lines = /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsxs3("div", { className: "fds-diff-section__element-head-inner", children: [
+      /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__element-name", children: element.name }),
+      /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__element-count", children: plural(element.properties.length, "property", "properties") }),
+      hasDetail && /* @__PURE__ */ jsx3(Chevron2, { open, className: "fds-diff-section__element-caret" })
+    ] }),
+    /* @__PURE__ */ jsx3("div", { className: "fds-diff-section__lines", children: element.properties.map((line, li) => /* @__PURE__ */ jsxs3("div", { className: "fds-diff-section__line", children: [
+      /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__prop", children: line.property }),
+      /* @__PURE__ */ jsxs3("span", { className: "fds-diff-section__delta", children: [
+        /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__live", children: line.live }),
+        /* @__PURE__ */ jsx3(Arrow, {}),
+        /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__design", children: line.design })
+      ] })
+    ] }, `${line.property}-${li}`)) })
+  ] });
+  return /* @__PURE__ */ jsxs3(
+    "div",
     {
-      className: `fds-diff-section__chevron${open ? " fds-diff-section__chevron--open" : ""}`,
-      width: "12",
-      height: "12",
-      viewBox: "0 0 12 12",
-      fill: "none",
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx3(
-        "path",
-        {
-          d: "M4.5 3 8 6l-3.5 3",
-          stroke: "currentColor",
-          strokeWidth: "1.3",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      )
+      className: "fds-diff-section__element",
+      "data-open": hasDetail && open ? "true" : void 0,
+      onMouseEnter: onHover ? () => onHover(index, true) : void 0,
+      onMouseLeave: onHover ? () => onHover(index, false) : void 0,
+      children: [
+        hasDetail ? /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: "fds-diff-section__element-head fds-diff-section__element-head--button",
+            "aria-expanded": open,
+            onClick: toggle,
+            children: lines
+          }
+        ) : /* @__PURE__ */ jsx3("div", { className: "fds-diff-section__element-head", children: lines }),
+        hasDetail && open && /* @__PURE__ */ jsx3("div", { className: "fds-diff-section__detail", children: element.detail })
+      ]
     }
   );
 }
+function Chevron2({ open, className }) {
+  const classes = [
+    "fds-diff-section__chevron",
+    open && "fds-diff-section__chevron--open",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx3("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", className: classes, children: /* @__PURE__ */ jsx3(
+    "path",
+    {
+      d: "M4.5 3 8 6l-3.5 3",
+      stroke: "currentColor",
+      strokeWidth: "1.3",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
 function Arrow() {
   return /* @__PURE__ */ jsx3(
     "svg",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usefidel/design-system",
-  "version": "0.3.0",
+  "version": "0.5.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",