@usefidel/design-system 0.26.0 → 0.28.0

package/dist/fidel.manifest.json

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

package/dist/index.cjs

@@ -33,15 +33,25 @@ __export(index_exports, {
   Card: () => Card,
   Checkbox: () => Checkbox,
   Checklist: () => Checklist,
+  CodeBlock: () => CodeBlock,
+  ColorRamp: () => ColorRamp,
+  ConnectionCard: () => ConnectionCard,
+  DescriptionList: () => DescriptionList,
   DiffPropertyList: () => DiffPropertyList,
   DiffSection: () => DiffSection,
   Divider: () => Divider,
   Drawer: () => Drawer,
+  EasingCurve: () => EasingCurve,
   EmptyState: () => EmptyState,
+  FilterChips: () => FilterChips,
   IconButton: () => IconButton,
   Input: () => Input,
+  ListCard: () => ListCard,
   ListLabel: () => ListLabel,
+  ListRow: () => ListRow,
+  MeasureList: () => MeasureList,
   Menu: () => Menu,
+  Meter: () => Meter,
   MismatchCard: () => MismatchCard,
   Modal: () => Modal,
   MultiSelect: () => MultiSelect,
@@ -51,6 +61,7 @@ __export(index_exports, {
   PageHeader: () => PageHeader,
   PageSkeleton: () => PageSkeleton,
   Pagination: () => Pagination,
+  PreviewCard: () => PreviewCard,
   PricingCard: () => PricingCard,
   Radio: () => Radio,
   RadioCard: () => RadioCard,
@@ -72,13 +83,19 @@ __export(index_exports, {
   StepList: () => StepList,
   Stepper: () => Stepper,
   Swatch: () => Swatch,
+  SwatchList: () => SwatchList,
   TabNav: () => TabNav,
   Table: () => Table,
   Tag: () => Tag,
+  Tile: () => Tile,
   Toast: () => Toast,
   ToastRegion: () => ToastRegion,
   Toggle: () => Toggle,
+  TokenSample: () => TokenSample,
   Tooltip: () => Tooltip,
+  TypeSample: () => TypeSample,
+  TypeScale: () => TypeScale,
+  TypeSpecimen: () => TypeSpecimen,
   WorkspaceAvatar: () => WorkspaceAvatar,
   WorkspaceSwitcher: () => WorkspaceSwitcher,
   breakpoints: () => breakpoints,
@@ -1377,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",
@@ -1385,6 +1403,8 @@ function Callout({
   titleAside,
   children,
   action,
+  onDismiss,
+  dismissLabel = "Dismiss",
   className,
   ...rest
 }) {
@@ -1398,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" }) })
   ] });
 }
 
@@ -1719,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) {
@@ -1875,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",
               {
@@ -1931,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
@@ -2120,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, {}) })
   ] });
 }
 
@@ -2165,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,
@@ -2234,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)
@@ -2292,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() || "?" });
@@ -2313,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" })
         ] })
       ]
     }
@@ -2355,13 +2376,17 @@ var AppLayout = Object.assign(AppLayoutRoot, { Panel: AppLayoutPanel });
 
 // src/components/PageHeader/PageHeader.tsx
 var import_jsx_runtime47 = require("react/jsx-runtime");
-function PageHeader({ title, description, breadcrumb, actions, className, children, ...rest }) {
+function PageHeader({ title, description, leading, meta, breadcrumb, actions, className, children, ...rest }) {
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("header", { className: ["fds-page-header", className].filter(Boolean).join(" "), ...rest, children: [
+    breadcrumb != null && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "fds-page-header__breadcrumb", children: breadcrumb }),
     /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "fds-page-header__row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "fds-page-header__text", children: [
-        breadcrumb != null && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "fds-page-header__breadcrumb", children: breadcrumb }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("h1", { className: "fds-page-header__title", children: title }),
-        description != null && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "fds-page-header__description", children: description })
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "fds-page-header__lead", children: [
+        leading != null && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "fds-page-header__leading", children: leading }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "fds-page-header__text", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("h1", { className: "fds-page-header__title", children: title }),
+          description != null && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "fds-page-header__description", children: description }),
+          meta != null && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "fds-page-header__meta", children: meta })
+        ] })
       ] }),
       actions != null && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "fds-page-header__actions", children: actions })
     ] }),
@@ -2371,7 +2396,7 @@ function PageHeader({ title, description, breadcrumb, actions, className, childr
 
 // 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 });
@@ -2385,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;
@@ -2406,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 })
         ]
       },
@@ -2455,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: [
@@ -2465,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 })
@@ -2477,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 }) {
@@ -2547,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 })
@@ -2633,6 +2658,316 @@ var PageSkeleton = Object.assign(PageSkeletonRoot, {
   Form: PageSkeletonForm,
   Split: PageSkeletonSplit
 });
+
+// src/components/PreviewCard/PreviewCard.tsx
+var import_jsx_runtime56 = require("react/jsx-runtime");
+function PreviewCardRoot({ as, variant = "default", className, ...rest }) {
+  const Root = as ?? "div";
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Root, { className: ["fds-preview-card", `fds-preview-card--${variant}`, className].filter(Boolean).join(" "), ...rest });
+}
+function PreviewCardPreview({ label, className, children, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: ["fds-preview-card__preview", className].filter(Boolean).join(" "), ...rest, children: [
+    label != null && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "fds-preview-card__label", children: label }),
+    children
+  ] });
+}
+function PreviewCardTitle({ aside, className, children, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: ["fds-preview-card__title", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "fds-preview-card__name", children }),
+    aside != null && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "fds-preview-card__aside", children: aside })
+  ] });
+}
+function part(name) {
+  return function PreviewCardPart({ className, ...rest }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: [`fds-preview-card__${name}`, className].filter(Boolean).join(" "), ...rest });
+  };
+}
+var PreviewCard = Object.assign(PreviewCardRoot, {
+  Preview: PreviewCardPreview,
+  Body: part("body"),
+  Title: PreviewCardTitle,
+  Meta: part("meta"),
+  Footer: part("footer")
+});
+
+// src/components/Tile/Tile.tsx
+var import_jsx_runtime57 = require("react/jsx-runtime");
+function Tile({ label, aside, className, children, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("section", { className: ["fds-tile", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("header", { className: "fds-tile__head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "fds-tile__label", children: label }),
+      aside
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "fds-tile__body", children })
+  ] });
+}
+
+// src/components/ListCard/ListCard.tsx
+var import_jsx_runtime58 = require("react/jsx-runtime");
+function ListCardRoot({ title, count, aside, footer, className, children, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("section", { className: ["fds-list-card", className].filter(Boolean).join(" "), ...rest, children: [
+    (title != null || aside != null) && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("header", { className: "fds-list-card__head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className: "fds-list-card__title", children: [
+        title,
+        count != null && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "fds-list-card__count", children: count })
+      ] }),
+      aside != null && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "fds-list-card__aside", children: aside })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("ul", { className: "fds-list-card__rows", children }),
+    footer != null && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("footer", { className: "fds-list-card__footer", children: footer })
+  ] });
+}
+function ListCardRow({ icon, tone = "neutral", title, description, trailing, muted, className, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("li", { className: ["fds-list-card__row", muted ? "fds-list-card__row--muted" : "", className].filter(Boolean).join(" "), ...rest, children: [
+    icon != null && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: `fds-list-card__icon fds-list-card__icon--${tone}`, "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className: "fds-list-card__text", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "fds-list-card__row-title", children: title }),
+      description != null && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "fds-list-card__description", children: description })
+    ] }),
+    trailing != null && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "fds-list-card__trailing", children: trailing })
+  ] });
+}
+var ListCard = Object.assign(ListCardRoot, { Row: ListCardRow });
+
+// src/components/DescriptionList/DescriptionList.tsx
+var import_jsx_runtime59 = require("react/jsx-runtime");
+function DescriptionList({ title, action, items = [], note, className, children, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("section", { className: ["fds-description-list", className].filter(Boolean).join(" "), ...rest, children: [
+    (title != null || action != null) && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("header", { className: "fds-description-list__head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "fds-description-list__title", children: title }),
+      action != null && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "fds-description-list__action", children: action })
+    ] }),
+    items.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("dl", { className: "fds-description-list__items", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "fds-description-list__item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("dt", { children: item.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("dd", { children: item.value })
+    ] }, i)) }),
+    children,
+    note != null && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "fds-description-list__note", children: note })
+  ] });
+}
+
+// src/components/ColorRamp/ColorRamp.tsx
+var import_jsx_runtime60 = require("react/jsx-runtime");
+function ColorRamp({ colors, size = "md", className, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: ["fds-color-ramp", `fds-color-ramp--${size}`, className].filter(Boolean).join(" "), "aria-hidden": "true", ...rest, children: colors.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "fds-color-ramp__step", style: { "--fds-ramp-color": c } }, i)) });
+}
+
+// src/components/SwatchList/SwatchList.tsx
+var import_jsx_runtime61 = require("react/jsx-runtime");
+function SwatchList({ items, className, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("ul", { className: ["fds-swatch-list", className].filter(Boolean).join(" "), ...rest, children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("li", { className: "fds-swatch-list__item", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      "span",
+      {
+        className: ["fds-swatch-list__dot", item.color ? "" : "fds-swatch-list__dot--empty"].filter(Boolean).join(" "),
+        style: item.color ? { "--fds-swatch-list-color": item.color } : void 0,
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "fds-swatch-list__name", children: item.name }),
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "fds-swatch-list__value", children: item.value })
+  ] }, i)) });
+}
+
+// src/components/TypeSpecimen/TypeSpecimen.tsx
+var import_jsx_runtime62 = require("react/jsx-runtime");
+var ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789";
+function TypeSpecimen({ family, fontFamily, tokens, sample, weights = [], footer, className, ...rest }) {
+  const face = { "--fds-specimen-font": fontFamily };
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("section", { className: ["fds-type-specimen", className].filter(Boolean).join(" "), style: face, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("header", { className: "fds-type-specimen__head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "fds-type-specimen__titles", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("h3", { className: "fds-type-specimen__family", children: family }),
+        tokens != null && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "fds-type-specimen__tokens", children: tokens })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "fds-type-specimen__glyph", "aria-hidden": "true", children: "Aa" })
+    ] }),
+    sample != null && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: "fds-type-specimen__sample", children: sample }),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: "fds-type-specimen__alphabet", children: ALPHABET }),
+    weights.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("ul", { className: "fds-type-specimen__weights", children: weights.map((w) => /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("li", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { style: { fontWeight: w.weight }, children: "Ag" }),
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("small", { children: w.label })
+    ] }, w.label)) }),
+    footer != null && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("footer", { className: "fds-type-specimen__footer", children: footer })
+  ] });
+}
+function TypeSample({ fontFamily, caption, className, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: ["fds-type-sample", className].filter(Boolean).join(" "), style: { "--fds-specimen-font": fontFamily }, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "fds-type-sample__glyph", "aria-hidden": "true", children: "Aa" }),
+    caption != null && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "fds-type-sample__caption", children: caption })
+  ] });
+}
+
+// src/components/TypeScale/TypeScale.tsx
+var import_jsx_runtime63 = require("react/jsx-runtime");
+function TypeScaleRoot({ className, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("ul", { className: ["fds-type-scale", className].filter(Boolean).join(" "), ...rest });
+}
+function TypeScaleRow({ name, detail, sampleStyle, sample = "Check every pull request", className, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("li", { className: ["fds-type-scale__row", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("span", { className: "fds-type-scale__label", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "fds-type-scale__name", children: name }),
+      detail != null && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "fds-type-scale__detail", children: detail })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "fds-type-scale__sample", style: sampleStyle, children: sample })
+  ] });
+}
+var TypeScale = Object.assign(TypeScaleRoot, { Row: TypeScaleRow });
+
+// src/components/MeasureList/MeasureList.tsx
+var import_jsx_runtime64 = require("react/jsx-runtime");
+function MeasureList({ items, max, tone = "accent", className, ...rest }) {
+  const top = max ?? Math.max(1, ...items.map((i) => i.amount));
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("ul", { className: ["fds-measure-list", `fds-measure-list--${tone}`, className].filter(Boolean).join(" "), ...rest, children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("li", { className: "fds-measure-list__item", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "fds-measure-list__name", children: item.name }),
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "fds-measure-list__value", children: item.value }),
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "fds-measure-list__track", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "fds-measure-list__bar", style: { "--fds-measure": `${Math.min(100, item.amount / top * 100)}%` } }) })
+  ] }, i)) });
+}
+
+// src/components/TokenSample/TokenSample.tsx
+var import_jsx_runtime65 = require("react/jsx-runtime");
+function TokenSample({ kind, value, name, detail, className, ...rest }) {
+  const style = { [kind === "radius" ? "--fds-sample-radius" : "--fds-sample-shadow"]: value };
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: ["fds-token-sample", `fds-token-sample--${kind}`, className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "fds-token-sample__shape", style, "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "fds-token-sample__name", children: name }),
+    detail != null && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "fds-token-sample__detail", children: detail })
+  ] });
+}
+
+// src/components/EasingCurve/EasingCurve.tsx
+var import_jsx_runtime66 = require("react/jsx-runtime");
+var BEZIER = /cubic-bezier\(\s*([-\d.]+)\s*,\s*([-\d.]+)\s*,\s*([-\d.]+)\s*,\s*([-\d.]+)\s*\)/;
+var W = 120;
+var H = 72;
+var PAD = 12;
+function easingPath(value) {
+  const m = BEZIER.exec(value);
+  const [x1, y1, x2, y2] = m ? m.slice(1).map(Number) : [0, 0, 1, 1];
+  const x = (t) => PAD + t * (W - PAD * 2);
+  const y = (t) => H - PAD - t * (H - PAD * 2);
+  return `M${x(0)},${y(0)} C${x(x1)},${y(y1)} ${x(x2)},${y(y2)} ${x(1)},${y(1)}`;
+}
+function EasingCurve({ value, name, className, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: ["fds-easing-curve", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("svg", { className: "fds-easing-curve__plot", viewBox: `0 0 ${W} ${H}`, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { d: easingPath(value) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "fds-easing-curve__name", children: name }),
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "fds-easing-curve__value", children: value })
+  ] });
+}
+
+// src/components/FilterChips/FilterChips.tsx
+var import_react27 = require("react");
+var import_jsx_runtime67 = require("react/jsx-runtime");
+function FilterChips({ options, value, onChange, "aria-label": ariaLabel, className }) {
+  const refs = (0, import_react27.useRef)([]);
+  const onKeyDown = (e, index) => {
+    const step = e.key === "ArrowRight" || e.key === "ArrowDown" ? 1 : e.key === "ArrowLeft" || e.key === "ArrowUp" ? -1 : 0;
+    if (!step) return;
+    e.preventDefault();
+    const next = (index + step + options.length) % options.length;
+    onChange(options[next].value);
+    refs.current[next]?.focus();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { role: "radiogroup", "aria-label": ariaLabel, className: ["fds-filter-chips", className].filter(Boolean).join(" "), children: options.map((o, i) => {
+    const selected = o.value === value;
+    return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+      "button",
+      {
+        ref: (el) => {
+          refs.current[i] = el;
+        },
+        type: "button",
+        role: "radio",
+        "aria-checked": selected,
+        tabIndex: selected ? 0 : -1,
+        className: ["fds-filter-chips__chip", selected ? "fds-filter-chips__chip--selected" : ""].filter(Boolean).join(" "),
+        onClick: () => onChange(o.value),
+        onKeyDown: (e) => onKeyDown(e, i),
+        children: [
+          o.label,
+          o.count != null && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "fds-filter-chips__count", children: o.count })
+        ]
+      },
+      o.value
+    );
+  }) });
+}
+
+// src/components/Meter/Meter.tsx
+var import_jsx_runtime68 = require("react/jsx-runtime");
+function Meter({ value, max, label, className, ...rest }) {
+  const pct = max > 0 ? Math.min(100, Math.max(0, value / max * 100)) : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: ["fds-meter", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+      "span",
+      {
+        className: "fds-meter__track",
+        role: "meter",
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-valuenow": value,
+        "aria-label": typeof label === "string" ? label : void 0,
+        children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "fds-meter__fill", style: { "--fds-meter": `${pct}%` } })
+      }
+    ),
+    /* @__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,
@@ -2648,15 +2983,25 @@ var PageSkeleton = Object.assign(PageSkeletonRoot, {
   Card,
   Checkbox,
   Checklist,
+  CodeBlock,
+  ColorRamp,
+  ConnectionCard,
+  DescriptionList,
   DiffPropertyList,
   DiffSection,
   Divider,
   Drawer,
+  EasingCurve,
   EmptyState,
+  FilterChips,
   IconButton,
   Input,
+  ListCard,
   ListLabel,
+  ListRow,
+  MeasureList,
   Menu,
+  Meter,
   MismatchCard,
   Modal,
   MultiSelect,
@@ -2666,6 +3011,7 @@ var PageSkeleton = Object.assign(PageSkeletonRoot, {
   PageHeader,
   PageSkeleton,
   Pagination,
+  PreviewCard,
   PricingCard,
   Radio,
   RadioCard,
@@ -2687,13 +3033,19 @@ var PageSkeleton = Object.assign(PageSkeletonRoot, {
   StepList,
   Stepper,
   Swatch,
+  SwatchList,
   TabNav,
   Table,
   Tag,
+  Tile,
   Toast,
   ToastRegion,
   Toggle,
+  TokenSample,
   Tooltip,
+  TypeSample,
+  TypeScale,
+  TypeSpecimen,
   WorkspaceAvatar,
   WorkspaceSwitcher,
   breakpoints,