@usefidel/design-system 0.5.0 → 0.6.0

package/dist/fidel.manifest.json

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

package/dist/index.cjs

@@ -216,6 +216,8 @@ function ElementRow({
     {
       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: [

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;

package/dist/index.d.cts

@@ -91,6 +91,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. */

package/dist/index.d.ts

@@ -91,6 +91,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. */

package/dist/index.js

@@ -188,6 +188,8 @@ function ElementRow({
     {
       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: [

package/package.json

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