@usefidel/design-system 0.5.0 → 0.7.0

package/dist/fidel.manifest.json

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

package/dist/index.cjs

@@ -21,6 +21,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   Button: () => Button,
+  DiffPropertyList: () => DiffPropertyList,
   DiffSection: () => DiffSection,
   MismatchCard: () => MismatchCard
 });
@@ -202,20 +203,15 @@ function ElementRow({
       /* @__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}`)) })
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DiffPropertyList, { properties: element.properties })
   ] });
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
       className: "fds-diff-section__element",
       "data-open": hasDetail && open ? "true" : void 0,
+      "data-highlighted": element.highlighted ? "true" : void 0,
+      "data-anchor-id": element.anchorId,
       onMouseEnter: onHover ? () => onHover(index, true) : void 0,
       onMouseLeave: onHover ? () => onHover(index, false) : void 0,
       children: [
@@ -234,6 +230,18 @@ function ElementRow({
     }
   );
 }
+function DiffPropertyList({ properties, className, ...rest }) {
+  const classes = ["fds-diff-section__lines", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: classes, ...rest, children: 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.trailing != null && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-diff-section__trailing", children: line.trailing })
+  ] }, `${line.property}-${li}`)) });
+}
 function Chevron2({ open, className }) {
   const classes = [
     "fds-diff-section__chevron",
@@ -277,6 +285,7 @@ function Arrow() {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
+  DiffPropertyList,
   DiffSection,
   MismatchCard
 });

package/dist/index.css

@@ -310,6 +310,11 @@
 .fds-diff-section__element {
   display: flex;
   flex-direction: column;
+  transition: background var(--duration-quick, 150ms) ease;
+}
+.fds-diff-section__element[data-highlighted=true] {
+  background: var(--color-accent-subtle, var(--color-surface-hover));
+  box-shadow: inset 2px 0 0 var(--color-accent);
 }
 .fds-diff-section__element-head {
   display: flex;
@@ -371,7 +376,6 @@
 .fds-diff-section__line {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   width: 100%;
 }
 .fds-diff-section__prop {
@@ -387,6 +391,7 @@
   display: flex;
   align-items: center;
   gap: var(--spacing-1);
+  margin-left: auto;
   font-family: var(--font-mono);
   font-weight: var(--font-weight-medium);
   font-size: 14px;
@@ -394,6 +399,13 @@
   letter-spacing: -0.28px;
   white-space: nowrap;
 }
+.fds-diff-section__trailing {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  margin-left: var(--spacing-3);
+  flex-shrink: 0;
+}
 .fds-diff-section__live {
   color: #ef4444;
 }

package/dist/index.d.cts

@@ -64,10 +64,23 @@ declare function MismatchCard({ title, properties, collapsedCount, defaultExpand
 interface DiffPropertyLine {
     /** Property name, e.g. "font-size". Rendered in mono. */
     property: string;
-    /** Value on the live page — what shipped. Left of the arrow (error register). */
-    live: string;
-    /** Value in the design — the target. Right of the arrow (success register). */
-    design: string;
+    /**
+     * Value on the live page — what shipped. Left of the arrow (error register).
+     * A string in the common case; accepts any node so a caller can prefix it
+     * with, e.g., a colour swatch.
+     */
+    live: ReactNode;
+    /**
+     * Value in the design — the target. Right of the arrow (success register).
+     * A string in the common case; accepts any node (see `live`).
+     */
+    design: ReactNode;
+    /**
+     * Optional content pinned to the right end of the row, after the delta —
+     * e.g. an occurrence count or a per-property review control. Omit for the
+     * plain read-only row. Presentational: the caller owns whatever lives here.
+     */
+    trailing?: ReactNode;
 }
 interface DiffElement {
     /** Element name, e.g. `"Pricing"`. */
@@ -91,6 +104,19 @@ interface DiffElement {
      * screenshot highlight). Leave undefined for uncontrolled (`defaultOpen`).
      */
     open?: boolean;
+    /**
+     * Emphasise this row without expanding it. When `true` the element renders a
+     * highlight treatment (a subtle fill and an accent edge). Use it to reflect
+     * an external selection — e.g. hovering a screenshot annotation highlighting
+     * its matching drawer row. Purely visual; does not affect `open`.
+     */
+    highlighted?: boolean;
+    /**
+     * Stamped onto the element root as `data-anchor-id`, giving the caller a
+     * stable handle to scroll this row into view (e.g. from a screenshot
+     * annotation) without threading a ref through the component.
+     */
+    anchorId?: string;
 }
 interface DiffSectionProps extends HTMLAttributes<HTMLDivElement> {
     /** Ordinal shown before the name, e.g. "01". Omitted in `headerless` mode. */
@@ -137,5 +163,18 @@ interface DiffSectionProps extends HTMLAttributes<HTMLDivElement> {
  * decision 2026-04-24): each delta reads `live → design`.
  */
 declare function DiffSection({ number, name, mismatchCount, elements, defaultExpanded, headerless, onElementToggle, onElementHover, className, ...rest }: DiffSectionProps): react.JSX.Element;
+interface DiffPropertyListProps extends HTMLAttributes<HTMLDivElement> {
+    /** Property mismatch rows to render. */
+    properties: DiffPropertyLine[];
+}
+/**
+ * The bare list of property-delta rows — `property` on the left, a
+ * `live → design` mono delta, and an optional `trailing` slot — with the left
+ * rule and indent. Extracted from DiffSection so a caller that owns its own
+ * card shell (e.g. the extension's IssueCard) can render exactly these rows
+ * without DiffSection's element/section chrome. DiffSection uses it internally,
+ * so the two surfaces render byte-identical rows.
+ */
+declare function DiffPropertyList({ properties, className, ...rest }: DiffPropertyListProps): react.JSX.Element;
 
-export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, type DiffElement, type DiffPropertyLine, DiffSection, type DiffSectionProps, MismatchCard, type MismatchCardProps, type MismatchProperty };
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, MismatchCard, type MismatchCardProps, type MismatchProperty };

package/dist/index.d.ts

@@ -64,10 +64,23 @@ declare function MismatchCard({ title, properties, collapsedCount, defaultExpand
 interface DiffPropertyLine {
     /** Property name, e.g. "font-size". Rendered in mono. */
     property: string;
-    /** Value on the live page — what shipped. Left of the arrow (error register). */
-    live: string;
-    /** Value in the design — the target. Right of the arrow (success register). */
-    design: string;
+    /**
+     * Value on the live page — what shipped. Left of the arrow (error register).
+     * A string in the common case; accepts any node so a caller can prefix it
+     * with, e.g., a colour swatch.
+     */
+    live: ReactNode;
+    /**
+     * Value in the design — the target. Right of the arrow (success register).
+     * A string in the common case; accepts any node (see `live`).
+     */
+    design: ReactNode;
+    /**
+     * Optional content pinned to the right end of the row, after the delta —
+     * e.g. an occurrence count or a per-property review control. Omit for the
+     * plain read-only row. Presentational: the caller owns whatever lives here.
+     */
+    trailing?: ReactNode;
 }
 interface DiffElement {
     /** Element name, e.g. `"Pricing"`. */
@@ -91,6 +104,19 @@ interface DiffElement {
      * screenshot highlight). Leave undefined for uncontrolled (`defaultOpen`).
      */
     open?: boolean;
+    /**
+     * Emphasise this row without expanding it. When `true` the element renders a
+     * highlight treatment (a subtle fill and an accent edge). Use it to reflect
+     * an external selection — e.g. hovering a screenshot annotation highlighting
+     * its matching drawer row. Purely visual; does not affect `open`.
+     */
+    highlighted?: boolean;
+    /**
+     * Stamped onto the element root as `data-anchor-id`, giving the caller a
+     * stable handle to scroll this row into view (e.g. from a screenshot
+     * annotation) without threading a ref through the component.
+     */
+    anchorId?: string;
 }
 interface DiffSectionProps extends HTMLAttributes<HTMLDivElement> {
     /** Ordinal shown before the name, e.g. "01". Omitted in `headerless` mode. */
@@ -137,5 +163,18 @@ interface DiffSectionProps extends HTMLAttributes<HTMLDivElement> {
  * decision 2026-04-24): each delta reads `live → design`.
  */
 declare function DiffSection({ number, name, mismatchCount, elements, defaultExpanded, headerless, onElementToggle, onElementHover, className, ...rest }: DiffSectionProps): react.JSX.Element;
+interface DiffPropertyListProps extends HTMLAttributes<HTMLDivElement> {
+    /** Property mismatch rows to render. */
+    properties: DiffPropertyLine[];
+}
+/**
+ * The bare list of property-delta rows — `property` on the left, a
+ * `live → design` mono delta, and an optional `trailing` slot — with the left
+ * rule and indent. Extracted from DiffSection so a caller that owns its own
+ * card shell (e.g. the extension's IssueCard) can render exactly these rows
+ * without DiffSection's element/section chrome. DiffSection uses it internally,
+ * so the two surfaces render byte-identical rows.
+ */
+declare function DiffPropertyList({ properties, className, ...rest }: DiffPropertyListProps): react.JSX.Element;
 
-export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, type DiffElement, type DiffPropertyLine, DiffSection, type DiffSectionProps, MismatchCard, type MismatchCardProps, type MismatchProperty };
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, MismatchCard, type MismatchCardProps, type MismatchProperty };

package/dist/index.js

@@ -174,20 +174,15 @@ function ElementRow({
       /* @__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}`)) })
+    /* @__PURE__ */ jsx3(DiffPropertyList, { properties: element.properties })
   ] });
   return /* @__PURE__ */ jsxs3(
     "div",
     {
       className: "fds-diff-section__element",
       "data-open": hasDetail && open ? "true" : void 0,
+      "data-highlighted": element.highlighted ? "true" : void 0,
+      "data-anchor-id": element.anchorId,
       onMouseEnter: onHover ? () => onHover(index, true) : void 0,
       onMouseLeave: onHover ? () => onHover(index, false) : void 0,
       children: [
@@ -206,6 +201,18 @@ function ElementRow({
     }
   );
 }
+function DiffPropertyList({ properties, className, ...rest }) {
+  const classes = ["fds-diff-section__lines", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx3("div", { className: classes, ...rest, children: 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.trailing != null && /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__trailing", children: line.trailing })
+  ] }, `${line.property}-${li}`)) });
+}
 function Chevron2({ open, className }) {
   const classes = [
     "fds-diff-section__chevron",
@@ -248,6 +255,7 @@ function Arrow() {
 }
 export {
   Button,
+  DiffPropertyList,
   DiffSection,
   MismatchCard
 };

package/package.json

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