@usefidel/design-system 0.27.0 → 0.28.0

package/dist/fidel.manifest.json

@@ -10,6 +10,6 @@
     "webapp.css"
   ],
   "storybookUrl": null,
-  "packageVersion": "0.27.0",
-  "resolvedSha": "95492923d7a948576cddd0419d561913dbf75b7f"
+  "packageVersion": "0.28.0",
+  "resolvedSha": "314e7e61463bc7f60a47d62770c2aa8d00f2bc2e"
 }

package/dist/index.cjs

@@ -33,7 +33,9 @@ __export(index_exports, {
   Card: () => Card,
   Checkbox: () => Checkbox,
   Checklist: () => Checklist,
+  CodeBlock: () => CodeBlock,
   ColorRamp: () => ColorRamp,
+  ConnectionCard: () => ConnectionCard,
   DescriptionList: () => DescriptionList,
   DiffPropertyList: () => DiffPropertyList,
   DiffSection: () => DiffSection,
@@ -46,6 +48,7 @@ __export(index_exports, {
   Input: () => Input,
   ListCard: () => ListCard,
   ListLabel: () => ListLabel,
+  ListRow: () => ListRow,
   MeasureList: () => MeasureList,
   Menu: () => Menu,
   Meter: () => Meter,
@@ -1391,6 +1394,7 @@ function StackedCardsIllustration({ className }) {
 }
 
 // src/components/Callout/Callout.tsx
+var import_lucide_react2 = require("lucide-react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function Callout({
   tone = "neutral",
@@ -1399,6 +1403,8 @@ function Callout({
   titleAside,
   children,
   action,
+  onDismiss,
+  dismissLabel = "Dismiss",
   className,
   ...rest
 }) {
@@ -1412,7 +1418,8 @@ function Callout({
       ] }),
       children != null && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "fds-callout__text", children })
     ] }),
-    action != null && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "fds-callout__action", children: action })
+    action != null && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "fds-callout__action", children: action }),
+    onDismiss && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", className: "fds-callout__dismiss", "aria-label": dismissLabel, onClick: onDismiss, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react2.X, { "aria-hidden": "true" }) })
   ] });
 }
 
@@ -1733,7 +1740,7 @@ function IconButton({
 
 // src/components/Menu/Menu.tsx
 var import_react17 = require("react");
-var import_lucide_react2 = require("lucide-react");
+var import_lucide_react3 = require("lucide-react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var isItem = (e) => !("type" in e);
 function searchText(it) {
@@ -1889,7 +1896,7 @@ function Menu({
         wired,
         open && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: listClasses, onKeyDown: onListKeyDown, children: [
           search && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "fds-menu__search", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react2.Search, { "aria-hidden": "true" }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react3.Search, { "aria-hidden": "true" }),
             /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               "input",
               {
@@ -1945,7 +1952,7 @@ function Menu({
                           e.description != null && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "fds-menu__description", children: e.description })
                         ] }),
                         e.trailing != null && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "fds-menu__trailing", children: e.trailing }),
-                        e.selected && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react2.Check, { className: "fds-menu__check", "aria-hidden": "true" })
+                        e.selected && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react3.Check, { className: "fds-menu__check", "aria-hidden": "true" })
                       ]
                     },
                     i
@@ -2134,12 +2141,12 @@ function Tooltip({ content, children, side = "right", delay = 400, disabled = fa
 }
 
 // src/components/BrandButton/BrandButton.tsx
-var import_lucide_react3 = require("lucide-react");
+var import_lucide_react4 = require("lucide-react");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 function BrandButton({ mark, hoverIcon, type = "button", className, ...rest }) {
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("button", { type, className: ["fds-brand-button", className].filter(Boolean).join(" "), ...rest, children: [
     /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "fds-brand-button__mark", "aria-hidden": "true", children: mark }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "fds-brand-button__hover", "aria-hidden": "true", children: hoverIcon ?? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react3.PanelLeftOpen, {}) })
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "fds-brand-button__hover", "aria-hidden": "true", children: hoverIcon ?? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react4.PanelLeftOpen, {}) })
   ] });
 }
 
@@ -2179,7 +2186,7 @@ function SidebarItem({
 
 // src/components/Sidebar/Sidebar.tsx
 var import_react20 = require("react");
-var import_lucide_react4 = require("lucide-react");
+var import_lucide_react5 = require("lucide-react");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 function SidebarRoot({
   collapsed: controlled,
@@ -2248,7 +2255,7 @@ function SidebarBrand({
       {
         variant: "ghost",
         size: "small",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react4.PanelLeftClose, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react5.PanelLeftClose, {}),
         "aria-label": collapseLabel,
         "aria-keyshortcuts": "Meta+Backslash Control+Backslash",
         onClick: () => sidebar?.setCollapsed(true)
@@ -2306,7 +2313,7 @@ var Sidebar = Object.assign(SidebarRoot, {
 
 // src/components/WorkspaceSwitcher/WorkspaceSwitcher.tsx
 var import_react21 = require("react");
-var import_lucide_react5 = require("lucide-react");
+var import_lucide_react6 = require("lucide-react");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 function WorkspaceAvatar({ name }) {
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "fds-workspace-avatar", "aria-hidden": "true", children: name.trim().charAt(0).toUpperCase() || "?" });
@@ -2327,7 +2334,7 @@ var WorkspaceSwitcher = (0, import_react21.forwardRef)(function WorkspaceSwitche
         /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "fds-workspace-switcher__text", "aria-hidden": iconOnly || void 0, children: [
           /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "fds-workspace-switcher__name", children: name }),
           plan && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "fds-workspace-switcher__plan", children: plan }),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react5.ChevronDown, { className: "fds-workspace-switcher__chevron", "aria-hidden": "true" })
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react6.ChevronDown, { className: "fds-workspace-switcher__chevron", "aria-hidden": "true" })
         ] })
       ]
     }
@@ -2389,7 +2396,7 @@ function PageHeader({ title, description, leading, meta, breadcrumb, actions, cl
 
 // src/components/Toast/Toast.tsx
 var import_react23 = require("react");
-var import_lucide_react6 = require("lucide-react");
+var import_lucide_react7 = require("lucide-react");
 var import_jsx_runtime48 = require("react/jsx-runtime");
 function ToastRegion({ className, children, ...rest }) {
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: ["fds-toast-region", className].filter(Boolean).join(" "), "aria-live": "polite", ...rest, children });
@@ -2403,13 +2410,13 @@ function Toast({ children, action, onDismiss, duration, className, ...rest }) {
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { role: "status", className: ["fds-toast", className].filter(Boolean).join(" "), ...rest, children: [
     /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "fds-toast__message", children }),
     action && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("button", { type: "button", className: "fds-toast__action", onClick: action.onClick, children: action.label }),
-    onDismiss && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("button", { type: "button", className: "fds-toast__close", "aria-label": "Dismiss", onClick: onDismiss, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react6.X, { "aria-hidden": "true" }) })
+    onDismiss && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("button", { type: "button", className: "fds-toast__close", "aria-label": "Dismiss", onClick: onDismiss, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react7.X, { "aria-hidden": "true" }) })
   ] });
 }
 
 // src/components/Stepper/Stepper.tsx
 var import_react24 = require("react");
-var import_lucide_react7 = require("lucide-react");
+var import_lucide_react8 = require("lucide-react");
 var import_jsx_runtime49 = require("react/jsx-runtime");
 function StepperStep(_) {
   return null;
@@ -2424,7 +2431,7 @@ function StepperRoot({ className, children, ...rest }) {
         className: `fds-stepper__step fds-stepper__step--${status}`,
         "aria-current": status === "current" ? "step" : void 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "fds-stepper__marker", "aria-hidden": "true", children: status === "done" ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react7.Check, {}) : i + 1 }),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "fds-stepper__marker", "aria-hidden": "true", children: status === "done" ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react8.Check, {}) : i + 1 }),
           /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "fds-stepper__label", children: label })
         ]
       },
@@ -2473,7 +2480,7 @@ function OptionRow({ control = "radio", title, description, meta, className, che
 var OptionList = Object.assign(OptionListRoot, { Label: OptionListLabel, Row: OptionRow });
 
 // src/components/Checklist/Checklist.tsx
-var import_lucide_react8 = require("lucide-react");
+var import_lucide_react9 = require("lucide-react");
 var import_jsx_runtime52 = require("react/jsx-runtime");
 function ChecklistRoot({ title, className, children, ...rest }) {
   return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("section", { className: ["fds-checklist", className].filter(Boolean).join(" "), ...rest, children: [
@@ -2483,7 +2490,7 @@ function ChecklistRoot({ title, className, children, ...rest }) {
 }
 function ChecklistItem({ done, label, value }) {
   return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("li", { className: ["fds-checklist__item", done ? "fds-checklist__item--done" : ""].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "fds-checklist__mark", "aria-hidden": "true", children: done && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react8.Check, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "fds-checklist__mark", "aria-hidden": "true", children: done && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react9.Check, {}) }),
     /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("span", { className: "fds-checklist__text", children: [
       /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "fds-checklist__label", children: label }),
       /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "fds-checklist__value", children: value })
@@ -2495,7 +2502,7 @@ var Checklist = Object.assign(ChecklistRoot, { Item: ChecklistItem });
 // src/components/Drawer/Drawer.tsx
 var import_react26 = require("react");
 var import_react_dom3 = require("react-dom");
-var import_lucide_react9 = require("lucide-react");
+var import_lucide_react10 = require("lucide-react");
 var import_jsx_runtime53 = require("react/jsx-runtime");
 var FOCUSABLE2 = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 function Drawer({ open, onClose, title, description, children, footer, dismissible = true }) {
@@ -2565,7 +2572,7 @@ function Drawer({ open, onClose, title, description, children, footer, dismissib
                   /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("h2", { id: titleId, className: "fds-drawer__title", children: title }),
                   description != null && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { id: descriptionId, className: "fds-drawer__description", children: description })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("button", { type: "button", className: "fds-drawer__close", onClick: onClose, disabled: !dismissible, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react9.X, { "aria-hidden": "true" }) })
+                /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("button", { type: "button", className: "fds-drawer__close", onClick: onClose, disabled: !dismissible, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react10.X, { "aria-hidden": "true" }) })
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "fds-drawer__body", children }),
               footer != null && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("footer", { className: "fds-drawer__footer", children: footer })
@@ -2908,6 +2915,59 @@ function Meter({ value, max, label, className, ...rest }) {
     /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "fds-meter__label", children: label })
   ] });
 }
+
+// src/components/ConnectionCard/ConnectionCard.tsx
+var import_jsx_runtime69 = require("react/jsx-runtime");
+function ConnectionCard({ icon, iconTone = "light", title, subtitle, footer, className, children, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("section", { className: ["fds-connection-card", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("header", { className: "fds-connection-card__head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: `fds-connection-card__icon fds-connection-card__icon--${iconTone}`, "aria-hidden": "true", children: icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("span", { className: "fds-connection-card__titles", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "fds-connection-card__title", children: title }),
+        subtitle != null && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "fds-connection-card__subtitle", children: subtitle })
+      ] })
+    ] }),
+    children != null && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "fds-connection-card__body", children }),
+    footer != null && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("footer", { className: "fds-connection-card__footer", children: footer })
+  ] });
+}
+
+// src/components/ListRow/ListRow.tsx
+var import_lucide_react11 = require("lucide-react");
+var import_jsx_runtime70 = require("react/jsx-runtime");
+function ListRow({ as, leading, title, description, trailing, className, ...rest }) {
+  const Root = as ?? "button";
+  const extra = Root === "button" ? { type: "button" } : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(Root, { className: ["fds-list-row", className].filter(Boolean).join(" "), ...extra, ...rest, children: [
+    leading != null && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "fds-list-row__leading", children: leading }),
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("span", { className: "fds-list-row__text", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "fds-list-row__title", children: title }),
+      description != null && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "fds-list-row__description", children: description })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "fds-list-row__trailing", "aria-hidden": trailing == null || void 0, children: trailing ?? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react11.ChevronRight, {}) })
+  ] });
+}
+
+// src/components/CodeBlock/CodeBlock.tsx
+var import_react28 = require("react");
+var import_lucide_react12 = require("lucide-react");
+var import_jsx_runtime71 = require("react/jsx-runtime");
+function CodeBlock({ code, copyLabel = "Copy", variant = "inline", className, ...rest }) {
+  const [copied, setCopied] = (0, import_react28.useState)(false);
+  (0, import_react28.useEffect)(() => {
+    if (!copied) return;
+    const t = window.setTimeout(() => setCopied(false), 1600);
+    return () => window.clearTimeout(t);
+  }, [copied]);
+  const copy = () => {
+    void navigator.clipboard?.writeText(code).then(() => setCopied(true), () => {
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: ["fds-code-block", `fds-code-block--${variant}`, className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("pre", { className: "fds-code-block__code", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("code", { children: code }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("button", { type: "button", className: "fds-code-block__copy", "aria-label": copied ? "Copied" : copyLabel, onClick: copy, children: copied ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react12.Check, { "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react12.Copy, { "aria-hidden": "true" }) })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -2923,7 +2983,9 @@ function Meter({ value, max, label, className, ...rest }) {
   Card,
   Checkbox,
   Checklist,
+  CodeBlock,
   ColorRamp,
+  ConnectionCard,
   DescriptionList,
   DiffPropertyList,
   DiffSection,
@@ -2936,6 +2998,7 @@ function Meter({ value, max, label, className, ...rest }) {
   Input,
   ListCard,
   ListLabel,
+  ListRow,
   MeasureList,
   Menu,
   Meter,

package/dist/index.css

@@ -2271,6 +2271,32 @@
     justify-content: center;
   }
 }
+.fds-callout__dismiss {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-md, 6px);
+  background: transparent;
+  color: var(--color-text-tertiary, #737373);
+  cursor: pointer;
+}
+.fds-callout__dismiss:hover {
+  background: var(--color-black-alpha-4, rgba(0, 0, 0, 0.04));
+  color: var(--color-text, #171717);
+}
+.fds-callout__dismiss:focus-visible {
+  outline: 2px solid var(--color-border-focus, #171717);
+  outline-offset: 2px;
+}
+.fds-callout__dismiss > svg {
+  width: 16px;
+  height: 16px;
+}
 .fds-callout--neutral {
   --fds-callout-bg: var(--color-surface-subtle, #fafafa);
   --fds-callout-border: var(--color-border, #e5e5e5);
@@ -5435,3 +5461,216 @@ button.fds-preview-card {
   line-height: var(--line-height-text-xs, 18px);
   color: var(--color-text-tertiary, #737373);
 }
+
+/* src/components/ConnectionCard/connection-card.css */
+.fds-connection-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4, 16px);
+  min-width: 0;
+  padding: var(--spacing-4, 16px);
+  border: 1px solid var(--color-border, #e5e5e5);
+  border-radius: var(--radius-xl, 12px);
+  background: var(--color-surface-raised, #ffffff);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  color: var(--color-text, #171717);
+}
+.fds-connection-card__head {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3, 12px);
+}
+.fds-connection-card__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 36px;
+  height: 36px;
+  border: 1px solid var(--color-border, #e5e5e5);
+  border-radius: var(--radius-lg, 8px);
+  background: var(--color-surface-raised, #ffffff);
+}
+.fds-connection-card__icon--dark {
+  border-color: var(--color-primary, #171717);
+  background: var(--color-primary, #171717);
+  color: var(--color-primary-text, #ffffff);
+}
+.fds-connection-card__icon > svg {
+  width: 20px;
+  height: 20px;
+}
+.fds-connection-card__titles {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.fds-connection-card__title {
+  font-size: var(--font-size-text-sm, 14px);
+  line-height: var(--line-height-text-compact, 20px);
+  font-weight: var(--font-weight-semibold, 600);
+}
+.fds-connection-card__subtitle {
+  font-size: var(--font-size-text-xs, 12px);
+  line-height: var(--line-height-text-xs, 18px);
+  color: var(--color-text-tertiary, #737373);
+}
+.fds-connection-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2, 8px);
+  flex: 1;
+  min-width: 0;
+  font-size: var(--font-size-text-xs, 12px);
+  line-height: var(--line-height-text-xs, 18px);
+  color: var(--color-text-tertiary, #737373);
+}
+.fds-connection-card__body strong {
+  font-size: var(--font-size-text-compact, 13px);
+  font-weight: var(--font-weight-semibold, 600);
+  color: var(--color-text, #171717);
+}
+.fds-connection-card__body code {
+  font-family: var(--font-mono, "JetBrains Mono", monospace);
+  color: var(--color-text, #171717);
+  overflow-wrap: anywhere;
+}
+.fds-connection-card__footer {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2, 8px);
+  flex-wrap: wrap;
+}
+
+/* src/components/ListRow/list-row.css */
+.fds-list-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3, 12px);
+  width: 100%;
+  min-width: 0;
+  padding: var(--spacing-2, 8px) var(--spacing-3, 12px);
+  border: 0;
+  border-radius: var(--radius-lg, 8px);
+  background: var(--color-surface-subtle, #fafafa);
+  color: var(--color-text, #171717);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background var(--duration-instant, 80ms) var(--ease-out, ease-out);
+}
+.fds-list-row:hover {
+  background: var(--color-surface-hover, #f0f0f0);
+}
+.fds-list-row:focus-visible {
+  outline: 2px solid var(--color-border-focus, #171717);
+  outline-offset: 2px;
+}
+.fds-list-row:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+.fds-list-row__leading {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+.fds-list-row__text {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+.fds-list-row__title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--font-size-text-compact, 13px);
+  line-height: var(--line-height-text-compact, 20px);
+  font-weight: var(--font-weight-medium, 500);
+}
+.fds-list-row__description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--font-size-text-xs, 12px);
+  line-height: var(--line-height-text-xs, 18px);
+  color: var(--color-text-tertiary, #737373);
+}
+.fds-list-row__trailing {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--color-text-tertiary, #737373);
+  font-size: var(--font-size-text-xs, 12px);
+}
+.fds-list-row__trailing > svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* src/components/CodeBlock/code-block.css */
+.fds-code-block {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-2, 8px);
+  border-radius: var(--radius-lg, 8px);
+  font-family: var(--font-mono, "JetBrains Mono", monospace);
+  font-size: var(--font-size-text-xs, 12px);
+  line-height: var(--line-height-text-xs, 18px);
+}
+.fds-code-block--inline {
+  align-items: center;
+  padding: var(--spacing-2, 8px) var(--spacing-2, 8px) var(--spacing-2, 8px) var(--spacing-3, 12px);
+  background: var(--color-primary, #171717);
+  color: var(--color-primary-text, #ffffff);
+}
+.fds-code-block--block {
+  padding: var(--spacing-3, 12px);
+  border: 1px solid var(--color-border, #e5e5e5);
+  background: var(--color-surface-subtle, #fafafa);
+  color: var(--color-text, #171717);
+}
+.fds-code-block__code {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  overflow-x: auto;
+  font: inherit;
+  white-space: pre;
+}
+.fds-code-block--inline .fds-code-block__code {
+  white-space: nowrap;
+}
+.fds-code-block__copy {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-md, 6px);
+  background: transparent;
+  color: inherit;
+  opacity: 0.7;
+  cursor: pointer;
+}
+.fds-code-block__copy:hover {
+  opacity: 1;
+  background: var(--color-white-alpha-10, rgba(255, 255, 255, 0.1));
+}
+.fds-code-block--block .fds-code-block__copy:hover {
+  background: var(--color-black-alpha-4, rgba(0, 0, 0, 0.04));
+}
+.fds-code-block__copy:focus-visible {
+  outline: 2px solid var(--color-border-focus, #171717);
+  outline-offset: 2px;
+  opacity: 1;
+}
+.fds-code-block__copy > svg {
+  width: 14px;
+  height: 14px;
+}

package/dist/index.d.cts

@@ -607,12 +607,16 @@ interface CalloutProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     children?: ReactNode;
     /** Trailing action(s), e.g. a ButtonLink. Moves under the text on phones. */
     action?: ReactNode;
+    /** Shows a close button at the end; `dismissLabel` names it. */
+    onDismiss?: () => void;
+    /** @default 'Dismiss' */
+    dismissLabel?: string;
 }
 /**
  * Fidel design-system Callout: a tinted row that tells the reader something
  * about the page they are on and, optionally, what to do about it.
  */
-declare function Callout({ tone, icon, title, titleAside, children, action, className, ...rest }: CalloutProps): react.JSX.Element;
+declare function Callout({ tone, icon, title, titleAside, children, action, onDismiss, dismissLabel, className, ...rest }: CalloutProps): react.JSX.Element;
 
 type SkeletonShape = 'rect' | 'text' | 'circle';
 interface SkeletonProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
@@ -994,7 +998,7 @@ interface BrandButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>,
 /** Fidel design-system BrandButton: the product mark that turns into an action icon on hover or focus. */
 declare function BrandButton({ mark, hoverIcon, type, className, ...rest }: BrandButtonProps): react.JSX.Element;
 
-type OwnProps<C extends ElementType> = {
+type OwnProps$1<C extends ElementType> = {
     /** Element or component to render, e.g. a router Link. @default 'a' */
     as?: C;
     /** 16px icon before the label. */
@@ -1007,7 +1011,7 @@ type OwnProps<C extends ElementType> = {
     iconOnly?: boolean;
     children: ReactNode;
 };
-type SidebarItemProps<C extends ElementType = 'a'> = OwnProps<C> & Omit<ComponentPropsWithoutRef<C>, keyof OwnProps<C>>;
+type SidebarItemProps<C extends ElementType = 'a'> = OwnProps$1<C> & Omit<ComponentPropsWithoutRef<C>, keyof OwnProps$1<C>>;
 /** Fidel design-system SidebarItem: one row in a side navigation. */
 declare function SidebarItem<C extends ElementType = 'a'>({ as, icon, leading, active, iconOnly, className, children, ...rest }: SidebarItemProps<C>): react.JSX.Element;
 
@@ -1522,4 +1526,43 @@ interface MeterProps extends HTMLAttributes<HTMLDivElement> {
 /** Fidel design-system Meter: a thin bar showing how much of an allowance is used. */
 declare function Meter({ value, max, label, className, ...rest }: MeterProps): react.JSX.Element;
 
-export { Accordion, type AccordionProps, AppLayout, type AppLayoutProps, AppNav, type AppNavProps, Avatar, AvatarLabelGroup, type AvatarLabelGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, BrandButton, type BrandButtonProps, 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, Checklist, type ChecklistItemProps, type ChecklistProps, ColorRamp, type ColorRampProps, DescriptionList, type DescriptionListItem, type DescriptionListProps, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, Divider, type DividerProps, Drawer, type DrawerProps, EasingCurve, type EasingCurveProps, EmptyState, type EmptyStateProps, type FilterChipOption, FilterChips, type FilterChipsProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, Input, type InputProps, ListCard, type ListCardProps, type ListCardRowProps, ListLabel, type ListLabelProps, MeasureList, type MeasureListItem, type MeasureListProps, Menu, type MenuDivider, type MenuEntry, type MenuItem, type MenuLabel, type MenuPlacement, type MenuProps, type MenuSearch, Meter, type MeterProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, MultiSelect, type MultiSelectOption, type MultiSelectProps, NumberedSteps, type NumberedStepsProps, OptionList, type OptionListProps, OptionRow, type OptionRowProps, PageHeader, type PageHeaderProps, PageSkeleton, type PageSkeletonHeaderProps, type PageSkeletonProps, Pagination, type PaginationProps, PreviewCard, type PreviewCardPreviewProps, type PreviewCardProps, type PreviewCardTitleProps, PricingCard, type PricingCardProps, Radio, RadioCard, type RadioCardProps, type RadioProps, ResourceCard, type ResourceCardProps, type ResourceCardStat, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, Sidebar, type SidebarBrandProps, SidebarItem, type SidebarItemProps, type SidebarProps, type SidebarSectionProps, type SidebarState, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, type SkeletonShape, Spinner, type SpinnerProps, Split, type SplitProps, StackedCardsIllustration, Stat, type StatProps, StatusDot, type StatusDotProps, type StatusDotStatus, type Step, StepList, type StepListProps, type StepStatus, Stepper, type StepperProps, type StepperStepProps, type StepperStepStatus, Swatch, SwatchList, type SwatchListItem, type SwatchListProps, type SwatchProps, TabNav, type TabNavProps, Table, type TableColumn, type TableProps, Tag, type TagProps, Tile, type TileProps, Toast, type ToastAction, type ToastProps, ToastRegion, type ToastRegionProps, Toggle, type ToggleProps, type ToggleSize, TokenSample, type TokenSampleProps, type Tone, Tooltip, type TooltipProps, type TooltipSide, TypeSample, type TypeSampleProps, TypeScale, type TypeScaleRowProps, TypeSpecimen, type TypeSpecimenProps, type TypeSpecimenWeight, WorkspaceAvatar, WorkspaceSwitcher, type WorkspaceSwitcherProps, breakpoints, useSidebar };
+interface ConnectionCardProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** 20px mark of the service, shown in a 36px tile. */
+    icon: ReactNode;
+    /** `dark` fills the tile, e.g. for a terminal mark. @default 'light' */
+    iconTone?: 'light' | 'dark';
+    title: ReactNode;
+    /** Under the title, e.g. "Shared with Flow" or "Only you". */
+    subtitle?: ReactNode;
+    /** Pinned to the bottom, e.g. Connect or Disconnect. */
+    footer?: ReactNode;
+}
+/** Fidel design-system ConnectionCard: one connected service, its state and the action that changes it. */
+declare function ConnectionCard({ icon, iconTone, title, subtitle, footer, className, children, ...rest }: ConnectionCardProps): react.JSX.Element;
+
+interface OwnProps<T extends ElementType> {
+    /** Render as a link, e.g. react-router's `Link`. @default 'button' */
+    as?: T;
+    /** Before the text, e.g. an avatar. */
+    leading?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    /** At the end. @default a chevron */
+    trailing?: ReactNode;
+}
+type ListRowProps<T extends ElementType = 'button'> = OwnProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof OwnProps<T> | 'title'>;
+/** Fidel design-system ListRow: a quiet clickable row that opens something, with a leading mark and a chevron. */
+declare function ListRow<T extends ElementType = 'button'>({ as, leading, title, description, trailing, className, ...rest }: ListRowProps<T>): react.JSX.Element;
+
+interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The text to show and copy. */
+    code: string;
+    /** Names the copy button. @default 'Copy' */
+    copyLabel?: string;
+    /** `inline` is one dark line for a command; `block` keeps line breaks for a file. @default 'inline' */
+    variant?: 'inline' | 'block';
+}
+/** Fidel design-system CodeBlock: a command or file in mono with a copy button. */
+declare function CodeBlock({ code, copyLabel, variant, className, ...rest }: CodeBlockProps): react.JSX.Element;
+
+export { Accordion, type AccordionProps, AppLayout, type AppLayoutProps, AppNav, type AppNavProps, Avatar, AvatarLabelGroup, type AvatarLabelGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, BrandButton, type BrandButtonProps, 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, Checklist, type ChecklistItemProps, type ChecklistProps, CodeBlock, type CodeBlockProps, ColorRamp, type ColorRampProps, ConnectionCard, type ConnectionCardProps, DescriptionList, type DescriptionListItem, type DescriptionListProps, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, Divider, type DividerProps, Drawer, type DrawerProps, EasingCurve, type EasingCurveProps, EmptyState, type EmptyStateProps, type FilterChipOption, FilterChips, type FilterChipsProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, Input, type InputProps, ListCard, type ListCardProps, type ListCardRowProps, ListLabel, type ListLabelProps, ListRow, type ListRowProps, MeasureList, type MeasureListItem, type MeasureListProps, Menu, type MenuDivider, type MenuEntry, type MenuItem, type MenuLabel, type MenuPlacement, type MenuProps, type MenuSearch, Meter, type MeterProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, MultiSelect, type MultiSelectOption, type MultiSelectProps, NumberedSteps, type NumberedStepsProps, OptionList, type OptionListProps, OptionRow, type OptionRowProps, PageHeader, type PageHeaderProps, PageSkeleton, type PageSkeletonHeaderProps, type PageSkeletonProps, Pagination, type PaginationProps, PreviewCard, type PreviewCardPreviewProps, type PreviewCardProps, type PreviewCardTitleProps, PricingCard, type PricingCardProps, Radio, RadioCard, type RadioCardProps, type RadioProps, ResourceCard, type ResourceCardProps, type ResourceCardStat, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, Sidebar, type SidebarBrandProps, SidebarItem, type SidebarItemProps, type SidebarProps, type SidebarSectionProps, type SidebarState, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, type SkeletonShape, Spinner, type SpinnerProps, Split, type SplitProps, StackedCardsIllustration, Stat, type StatProps, StatusDot, type StatusDotProps, type StatusDotStatus, type Step, StepList, type StepListProps, type StepStatus, Stepper, type StepperProps, type StepperStepProps, type StepperStepStatus, Swatch, SwatchList, type SwatchListItem, type SwatchListProps, type SwatchProps, TabNav, type TabNavProps, Table, type TableColumn, type TableProps, Tag, type TagProps, Tile, type TileProps, Toast, type ToastAction, type ToastProps, ToastRegion, type ToastRegionProps, Toggle, type ToggleProps, type ToggleSize, TokenSample, type TokenSampleProps, type Tone, Tooltip, type TooltipProps, type TooltipSide, TypeSample, type TypeSampleProps, TypeScale, type TypeScaleRowProps, TypeSpecimen, type TypeSpecimenProps, type TypeSpecimenWeight, WorkspaceAvatar, WorkspaceSwitcher, type WorkspaceSwitcherProps, breakpoints, useSidebar };

package/dist/index.d.ts

@@ -607,12 +607,16 @@ interface CalloutProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     children?: ReactNode;
     /** Trailing action(s), e.g. a ButtonLink. Moves under the text on phones. */
     action?: ReactNode;
+    /** Shows a close button at the end; `dismissLabel` names it. */
+    onDismiss?: () => void;
+    /** @default 'Dismiss' */
+    dismissLabel?: string;
 }
 /**
  * Fidel design-system Callout: a tinted row that tells the reader something
  * about the page they are on and, optionally, what to do about it.
  */
-declare function Callout({ tone, icon, title, titleAside, children, action, className, ...rest }: CalloutProps): react.JSX.Element;
+declare function Callout({ tone, icon, title, titleAside, children, action, onDismiss, dismissLabel, className, ...rest }: CalloutProps): react.JSX.Element;
 
 type SkeletonShape = 'rect' | 'text' | 'circle';
 interface SkeletonProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
@@ -994,7 +998,7 @@ interface BrandButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>,
 /** Fidel design-system BrandButton: the product mark that turns into an action icon on hover or focus. */
 declare function BrandButton({ mark, hoverIcon, type, className, ...rest }: BrandButtonProps): react.JSX.Element;
 
-type OwnProps<C extends ElementType> = {
+type OwnProps$1<C extends ElementType> = {
     /** Element or component to render, e.g. a router Link. @default 'a' */
     as?: C;
     /** 16px icon before the label. */
@@ -1007,7 +1011,7 @@ type OwnProps<C extends ElementType> = {
     iconOnly?: boolean;
     children: ReactNode;
 };
-type SidebarItemProps<C extends ElementType = 'a'> = OwnProps<C> & Omit<ComponentPropsWithoutRef<C>, keyof OwnProps<C>>;
+type SidebarItemProps<C extends ElementType = 'a'> = OwnProps$1<C> & Omit<ComponentPropsWithoutRef<C>, keyof OwnProps$1<C>>;
 /** Fidel design-system SidebarItem: one row in a side navigation. */
 declare function SidebarItem<C extends ElementType = 'a'>({ as, icon, leading, active, iconOnly, className, children, ...rest }: SidebarItemProps<C>): react.JSX.Element;
 
@@ -1522,4 +1526,43 @@ interface MeterProps extends HTMLAttributes<HTMLDivElement> {
 /** Fidel design-system Meter: a thin bar showing how much of an allowance is used. */
 declare function Meter({ value, max, label, className, ...rest }: MeterProps): react.JSX.Element;
 
-export { Accordion, type AccordionProps, AppLayout, type AppLayoutProps, AppNav, type AppNavProps, Avatar, AvatarLabelGroup, type AvatarLabelGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, BrandButton, type BrandButtonProps, 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, Checklist, type ChecklistItemProps, type ChecklistProps, ColorRamp, type ColorRampProps, DescriptionList, type DescriptionListItem, type DescriptionListProps, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, Divider, type DividerProps, Drawer, type DrawerProps, EasingCurve, type EasingCurveProps, EmptyState, type EmptyStateProps, type FilterChipOption, FilterChips, type FilterChipsProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, Input, type InputProps, ListCard, type ListCardProps, type ListCardRowProps, ListLabel, type ListLabelProps, MeasureList, type MeasureListItem, type MeasureListProps, Menu, type MenuDivider, type MenuEntry, type MenuItem, type MenuLabel, type MenuPlacement, type MenuProps, type MenuSearch, Meter, type MeterProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, MultiSelect, type MultiSelectOption, type MultiSelectProps, NumberedSteps, type NumberedStepsProps, OptionList, type OptionListProps, OptionRow, type OptionRowProps, PageHeader, type PageHeaderProps, PageSkeleton, type PageSkeletonHeaderProps, type PageSkeletonProps, Pagination, type PaginationProps, PreviewCard, type PreviewCardPreviewProps, type PreviewCardProps, type PreviewCardTitleProps, PricingCard, type PricingCardProps, Radio, RadioCard, type RadioCardProps, type RadioProps, ResourceCard, type ResourceCardProps, type ResourceCardStat, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, Sidebar, type SidebarBrandProps, SidebarItem, type SidebarItemProps, type SidebarProps, type SidebarSectionProps, type SidebarState, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, type SkeletonShape, Spinner, type SpinnerProps, Split, type SplitProps, StackedCardsIllustration, Stat, type StatProps, StatusDot, type StatusDotProps, type StatusDotStatus, type Step, StepList, type StepListProps, type StepStatus, Stepper, type StepperProps, type StepperStepProps, type StepperStepStatus, Swatch, SwatchList, type SwatchListItem, type SwatchListProps, type SwatchProps, TabNav, type TabNavProps, Table, type TableColumn, type TableProps, Tag, type TagProps, Tile, type TileProps, Toast, type ToastAction, type ToastProps, ToastRegion, type ToastRegionProps, Toggle, type ToggleProps, type ToggleSize, TokenSample, type TokenSampleProps, type Tone, Tooltip, type TooltipProps, type TooltipSide, TypeSample, type TypeSampleProps, TypeScale, type TypeScaleRowProps, TypeSpecimen, type TypeSpecimenProps, type TypeSpecimenWeight, WorkspaceAvatar, WorkspaceSwitcher, type WorkspaceSwitcherProps, breakpoints, useSidebar };
+interface ConnectionCardProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** 20px mark of the service, shown in a 36px tile. */
+    icon: ReactNode;
+    /** `dark` fills the tile, e.g. for a terminal mark. @default 'light' */
+    iconTone?: 'light' | 'dark';
+    title: ReactNode;
+    /** Under the title, e.g. "Shared with Flow" or "Only you". */
+    subtitle?: ReactNode;
+    /** Pinned to the bottom, e.g. Connect or Disconnect. */
+    footer?: ReactNode;
+}
+/** Fidel design-system ConnectionCard: one connected service, its state and the action that changes it. */
+declare function ConnectionCard({ icon, iconTone, title, subtitle, footer, className, children, ...rest }: ConnectionCardProps): react.JSX.Element;
+
+interface OwnProps<T extends ElementType> {
+    /** Render as a link, e.g. react-router's `Link`. @default 'button' */
+    as?: T;
+    /** Before the text, e.g. an avatar. */
+    leading?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    /** At the end. @default a chevron */
+    trailing?: ReactNode;
+}
+type ListRowProps<T extends ElementType = 'button'> = OwnProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof OwnProps<T> | 'title'>;
+/** Fidel design-system ListRow: a quiet clickable row that opens something, with a leading mark and a chevron. */
+declare function ListRow<T extends ElementType = 'button'>({ as, leading, title, description, trailing, className, ...rest }: ListRowProps<T>): react.JSX.Element;
+
+interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The text to show and copy. */
+    code: string;
+    /** Names the copy button. @default 'Copy' */
+    copyLabel?: string;
+    /** `inline` is one dark line for a command; `block` keeps line breaks for a file. @default 'inline' */
+    variant?: 'inline' | 'block';
+}
+/** Fidel design-system CodeBlock: a command or file in mono with a copy button. */
+declare function CodeBlock({ code, copyLabel, variant, className, ...rest }: CodeBlockProps): react.JSX.Element;
+
+export { Accordion, type AccordionProps, AppLayout, type AppLayoutProps, AppNav, type AppNavProps, Avatar, AvatarLabelGroup, type AvatarLabelGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, BrandButton, type BrandButtonProps, 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, Checklist, type ChecklistItemProps, type ChecklistProps, CodeBlock, type CodeBlockProps, ColorRamp, type ColorRampProps, ConnectionCard, type ConnectionCardProps, DescriptionList, type DescriptionListItem, type DescriptionListProps, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, Divider, type DividerProps, Drawer, type DrawerProps, EasingCurve, type EasingCurveProps, EmptyState, type EmptyStateProps, type FilterChipOption, FilterChips, type FilterChipsProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, Input, type InputProps, ListCard, type ListCardProps, type ListCardRowProps, ListLabel, type ListLabelProps, ListRow, type ListRowProps, MeasureList, type MeasureListItem, type MeasureListProps, Menu, type MenuDivider, type MenuEntry, type MenuItem, type MenuLabel, type MenuPlacement, type MenuProps, type MenuSearch, Meter, type MeterProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, MultiSelect, type MultiSelectOption, type MultiSelectProps, NumberedSteps, type NumberedStepsProps, OptionList, type OptionListProps, OptionRow, type OptionRowProps, PageHeader, type PageHeaderProps, PageSkeleton, type PageSkeletonHeaderProps, type PageSkeletonProps, Pagination, type PaginationProps, PreviewCard, type PreviewCardPreviewProps, type PreviewCardProps, type PreviewCardTitleProps, PricingCard, type PricingCardProps, Radio, RadioCard, type RadioCardProps, type RadioProps, ResourceCard, type ResourceCardProps, type ResourceCardStat, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, Sidebar, type SidebarBrandProps, SidebarItem, type SidebarItemProps, type SidebarProps, type SidebarSectionProps, type SidebarState, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, type SkeletonShape, Spinner, type SpinnerProps, Split, type SplitProps, StackedCardsIllustration, Stat, type StatProps, StatusDot, type StatusDotProps, type StatusDotStatus, type Step, StepList, type StepListProps, type StepStatus, Stepper, type StepperProps, type StepperStepProps, type StepperStepStatus, Swatch, SwatchList, type SwatchListItem, type SwatchListProps, type SwatchProps, TabNav, type TabNavProps, Table, type TableColumn, type TableProps, Tag, type TagProps, Tile, type TileProps, Toast, type ToastAction, type ToastProps, ToastRegion, type ToastRegionProps, Toggle, type ToggleProps, type ToggleSize, TokenSample, type TokenSampleProps, type Tone, Tooltip, type TooltipProps, type TooltipSide, TypeSample, type TypeSampleProps, TypeScale, type TypeScaleRowProps, TypeSpecimen, type TypeSpecimenProps, type TypeSpecimenWeight, WorkspaceAvatar, WorkspaceSwitcher, type WorkspaceSwitcherProps, breakpoints, useSidebar };

package/dist/index.js

@@ -1297,6 +1297,7 @@ function StackedCardsIllustration({ className }) {
 }
 
 // src/components/Callout/Callout.tsx
+import { X as X2 } from "lucide-react";
 import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
 function Callout({
   tone = "neutral",
@@ -1305,6 +1306,8 @@ function Callout({
   titleAside,
   children,
   action,
+  onDismiss,
+  dismissLabel = "Dismiss",
   className,
   ...rest
 }) {
@@ -1318,7 +1321,8 @@ function Callout({
       ] }),
       children != null && /* @__PURE__ */ jsx21("div", { className: "fds-callout__text", children })
     ] }),
-    action != null && /* @__PURE__ */ jsx21("div", { className: "fds-callout__action", children: action })
+    action != null && /* @__PURE__ */ jsx21("div", { className: "fds-callout__action", children: action }),
+    onDismiss && /* @__PURE__ */ jsx21("button", { type: "button", className: "fds-callout__dismiss", "aria-label": dismissLabel, onClick: onDismiss, children: /* @__PURE__ */ jsx21(X2, { "aria-hidden": "true" }) })
   ] });
 }
 
@@ -2319,7 +2323,7 @@ function PageHeader({ title, description, leading, meta, breadcrumb, actions, cl
 
 // src/components/Toast/Toast.tsx
 import { useEffect as useEffect9 } from "react";
-import { X as X2 } from "lucide-react";
+import { X as X3 } from "lucide-react";
 import { jsx as jsx48, jsxs as jsxs39 } from "react/jsx-runtime";
 function ToastRegion({ className, children, ...rest }) {
   return /* @__PURE__ */ jsx48("div", { className: ["fds-toast-region", className].filter(Boolean).join(" "), "aria-live": "polite", ...rest, children });
@@ -2333,7 +2337,7 @@ function Toast({ children, action, onDismiss, duration, className, ...rest }) {
   return /* @__PURE__ */ jsxs39("div", { role: "status", className: ["fds-toast", className].filter(Boolean).join(" "), ...rest, children: [
     /* @__PURE__ */ jsx48("span", { className: "fds-toast__message", children }),
     action && /* @__PURE__ */ jsx48("button", { type: "button", className: "fds-toast__action", onClick: action.onClick, children: action.label }),
-    onDismiss && /* @__PURE__ */ jsx48("button", { type: "button", className: "fds-toast__close", "aria-label": "Dismiss", onClick: onDismiss, children: /* @__PURE__ */ jsx48(X2, { "aria-hidden": "true" }) })
+    onDismiss && /* @__PURE__ */ jsx48("button", { type: "button", className: "fds-toast__close", "aria-label": "Dismiss", onClick: onDismiss, children: /* @__PURE__ */ jsx48(X3, { "aria-hidden": "true" }) })
   ] });
 }
 
@@ -2425,7 +2429,7 @@ var Checklist = Object.assign(ChecklistRoot, { Item: ChecklistItem });
 // src/components/Drawer/Drawer.tsx
 import { useEffect as useEffect10, useId as useId14, useRef as useRef10 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { X as X3 } from "lucide-react";
+import { X as X4 } from "lucide-react";
 import { jsx as jsx53, jsxs as jsxs44 } from "react/jsx-runtime";
 var FOCUSABLE2 = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 function Drawer({ open, onClose, title, description, children, footer, dismissible = true }) {
@@ -2495,7 +2499,7 @@ function Drawer({ open, onClose, title, description, children, footer, dismissib
                   /* @__PURE__ */ jsx53("h2", { id: titleId, className: "fds-drawer__title", children: title }),
                   description != null && /* @__PURE__ */ jsx53("p", { id: descriptionId, className: "fds-drawer__description", children: description })
                 ] }),
-                /* @__PURE__ */ jsx53("button", { type: "button", className: "fds-drawer__close", onClick: onClose, disabled: !dismissible, "aria-label": "Close", children: /* @__PURE__ */ jsx53(X3, { "aria-hidden": "true" }) })
+                /* @__PURE__ */ jsx53("button", { type: "button", className: "fds-drawer__close", onClick: onClose, disabled: !dismissible, "aria-label": "Close", children: /* @__PURE__ */ jsx53(X4, { "aria-hidden": "true" }) })
               ] }),
               /* @__PURE__ */ jsx53("div", { className: "fds-drawer__body", children }),
               footer != null && /* @__PURE__ */ jsx53("footer", { className: "fds-drawer__footer", children: footer })
@@ -2838,6 +2842,59 @@ function Meter({ value, max, label, className, ...rest }) {
     /* @__PURE__ */ jsx68("span", { className: "fds-meter__label", children: label })
   ] });
 }
+
+// src/components/ConnectionCard/ConnectionCard.tsx
+import { jsx as jsx69, jsxs as jsxs59 } from "react/jsx-runtime";
+function ConnectionCard({ icon, iconTone = "light", title, subtitle, footer, className, children, ...rest }) {
+  return /* @__PURE__ */ jsxs59("section", { className: ["fds-connection-card", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ jsxs59("header", { className: "fds-connection-card__head", children: [
+      /* @__PURE__ */ jsx69("span", { className: `fds-connection-card__icon fds-connection-card__icon--${iconTone}`, "aria-hidden": "true", children: icon }),
+      /* @__PURE__ */ jsxs59("span", { className: "fds-connection-card__titles", children: [
+        /* @__PURE__ */ jsx69("span", { className: "fds-connection-card__title", children: title }),
+        subtitle != null && /* @__PURE__ */ jsx69("span", { className: "fds-connection-card__subtitle", children: subtitle })
+      ] })
+    ] }),
+    children != null && /* @__PURE__ */ jsx69("div", { className: "fds-connection-card__body", children }),
+    footer != null && /* @__PURE__ */ jsx69("footer", { className: "fds-connection-card__footer", children: footer })
+  ] });
+}
+
+// src/components/ListRow/ListRow.tsx
+import { ChevronRight } from "lucide-react";
+import { jsx as jsx70, jsxs as jsxs60 } from "react/jsx-runtime";
+function ListRow({ as, leading, title, description, trailing, className, ...rest }) {
+  const Root = as ?? "button";
+  const extra = Root === "button" ? { type: "button" } : {};
+  return /* @__PURE__ */ jsxs60(Root, { className: ["fds-list-row", className].filter(Boolean).join(" "), ...extra, ...rest, children: [
+    leading != null && /* @__PURE__ */ jsx70("span", { className: "fds-list-row__leading", children: leading }),
+    /* @__PURE__ */ jsxs60("span", { className: "fds-list-row__text", children: [
+      /* @__PURE__ */ jsx70("span", { className: "fds-list-row__title", children: title }),
+      description != null && /* @__PURE__ */ jsx70("span", { className: "fds-list-row__description", children: description })
+    ] }),
+    /* @__PURE__ */ jsx70("span", { className: "fds-list-row__trailing", "aria-hidden": trailing == null || void 0, children: trailing ?? /* @__PURE__ */ jsx70(ChevronRight, {}) })
+  ] });
+}
+
+// src/components/CodeBlock/CodeBlock.tsx
+import { useEffect as useEffect11, useState as useState11 } from "react";
+import { Check as Check4, Copy } from "lucide-react";
+import { jsx as jsx71, jsxs as jsxs61 } from "react/jsx-runtime";
+function CodeBlock({ code, copyLabel = "Copy", variant = "inline", className, ...rest }) {
+  const [copied, setCopied] = useState11(false);
+  useEffect11(() => {
+    if (!copied) return;
+    const t = window.setTimeout(() => setCopied(false), 1600);
+    return () => window.clearTimeout(t);
+  }, [copied]);
+  const copy = () => {
+    void navigator.clipboard?.writeText(code).then(() => setCopied(true), () => {
+    });
+  };
+  return /* @__PURE__ */ jsxs61("div", { className: ["fds-code-block", `fds-code-block--${variant}`, className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ jsx71("pre", { className: "fds-code-block__code", children: /* @__PURE__ */ jsx71("code", { children: code }) }),
+    /* @__PURE__ */ jsx71("button", { type: "button", className: "fds-code-block__copy", "aria-label": copied ? "Copied" : copyLabel, onClick: copy, children: copied ? /* @__PURE__ */ jsx71(Check4, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx71(Copy, { "aria-hidden": "true" }) })
+  ] });
+}
 export {
   Accordion,
   AppLayout,
@@ -2852,7 +2909,9 @@ export {
   Card,
   Checkbox,
   Checklist,
+  CodeBlock,
   ColorRamp,
+  ConnectionCard,
   DescriptionList,
   DiffPropertyList,
   DiffSection,
@@ -2865,6 +2924,7 @@ export {
   Input,
   ListCard,
   ListLabel,
+  ListRow,
   MeasureList,
   Menu,
   Meter,

package/package.json

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