@scttlnd/fintech-design-system 0.0.0-stage → 0.3.0

package/dist/components/Notice.mjs

@@ -0,0 +1,48 @@
+import { cn } from "../lib/cn.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/Notice.tsx
+/** Inline message. `danger` announces as an alert; other tones as polite status. */
+function Notice({ tone = "info", title, action, className, children, role, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		role: role ?? (tone === "danger" ? "alert" : "status"),
+		className: cn("fds-notice", `fds-notice--${tone}`, className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "fds-notice__body",
+			children: [title ? /* @__PURE__ */ jsx("p", {
+				className: "fds-notice__title",
+				children: title
+			}) : null, children ? /* @__PURE__ */ jsx("div", {
+				className: "fds-notice__text",
+				children
+			}) : null]
+		}), action ? /* @__PURE__ */ jsx("div", {
+			className: "fds-notice__action",
+			children: action
+		}) : null]
+	});
+}
+/** Placeholder for lists or panels with no data, with an optional next step. */
+function EmptyState({ title, description, action, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("fds-empty", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "fds-empty__title",
+				children: title
+			}),
+			description ? /* @__PURE__ */ jsx("p", {
+				className: "fds-empty__description",
+				children: description
+			}) : null,
+			action ? /* @__PURE__ */ jsx("div", {
+				className: "fds-empty__action",
+				children: action
+			}) : null
+		]
+	});
+}
+export { EmptyState, Notice };
+
+//# sourceMappingURL=Notice.mjs.map

package/dist/components/Notice.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notice.mjs","names":[],"sources":["../../src/components/Notice.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn.js\";\n\nexport interface NoticeProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  tone?: \"info\" | \"success\" | \"warn\" | \"danger\";\n  title?: ReactNode;\n  action?: ReactNode;\n}\n\n/** Inline message. `danger` announces as an alert; other tones as polite status. */\nexport function Notice({\n  tone = \"info\",\n  title,\n  action,\n  className,\n  children,\n  role,\n  ...props\n}: NoticeProps) {\n  return (\n    <div\n      role={role ?? (tone === \"danger\" ? \"alert\" : \"status\")}\n      className={cn(\"fds-notice\", `fds-notice--${tone}`, className)}\n      {...props}\n    >\n      <div className=\"fds-notice__body\">\n        {title ? <p className=\"fds-notice__title\">{title}</p> : null}\n        {children ? <div className=\"fds-notice__text\">{children}</div> : null}\n      </div>\n      {action ? <div className=\"fds-notice__action\">{action}</div> : null}\n    </div>\n  );\n}\n\nexport interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  title: ReactNode;\n  description?: ReactNode;\n  action?: ReactNode;\n}\n\n/** Placeholder for lists or panels with no data, with an optional next step. */\nexport function EmptyState({ title, description, action, className, ...props }: EmptyStateProps) {\n  return (\n    <div className={cn(\"fds-empty\", className)} {...props}>\n      <p className=\"fds-empty__title\">{title}</p>\n      {description ? <p className=\"fds-empty__description\">{description}</p> : null}\n      {action ? <div className=\"fds-empty__action\">{action}</div> : null}\n    </div>\n  );\n}\n"],"mappings":";;;;AAUA,SAAgB,OAAO,EACrB,OAAO,QACP,OACA,QACA,WACA,UACA,MACA,GAAG,SACW;CACd,OACE,qBAAC,OAAD;EACE,MAAM,SAAS,SAAS,WAAW,UAAU;EAC7C,WAAW,GAAG,cAAc,eAAe,QAAQ,SAAS;EAC5D,GAAI;EAHN,UAAA,CAKE,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACG,QAAQ,oBAAC,KAAD;IAAG,WAAU;IAAqB,UAAA;GAAS,CAAA,IAAI,MACvD,WAAW,oBAAC,OAAD;IAAK,WAAU;IAAoB;GAAc,CAAA,IAAI,IAC9D;EACJ,CAAA,GAAA,SAAS,oBAAC,OAAD;GAAK,WAAU;GAAsB,UAAA;EAAY,CAAA,IAAI,IAC5D;;AAET;;AASA,SAAgB,WAAW,EAAE,OAAO,aAAa,QAAQ,WAAW,GAAG,SAA0B;CAC/F,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,aAAa,SAAS;EAAG,GAAI;EAAhD,UAAA;GACE,oBAAC,KAAD;IAAG,WAAU;IAAoB,UAAA;GAAS,CAAA;GACzC,cAAc,oBAAC,KAAD;IAAG,WAAU;IAA0B,UAAA;GAAe,CAAA,IAAI;GACxE,SAAS,oBAAC,OAAD;IAAK,WAAU;IAAqB,UAAA;GAAY,CAAA,IAAI;EAC3D;;AAET"}

package/dist/components/Panel.d.mts

@@ -0,0 +1,13 @@
+import { HTMLAttributes, ReactNode } from "react";
+export interface PanelProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  title: ReactNode;
+  eyebrow?: ReactNode;
+  help?: ReactNode;
+  /** Optional trailing action area (buttons, menu). */
+  action?: ReactNode;
+  /** Heading element for the title. Defaults to h2; pick the level that fits the page outline. */
+  headingLevel?: 2 | 3 | 4;
+}
+/** Titled surface with optional eyebrow, help text and action. Renders a labelled `<section>`. */
+export declare function Panel({ title, eyebrow, help, action, headingLevel, className, children, ...props }: PanelProps): import("react").JSX.Element;
+//# sourceMappingURL=Panel.d.mts.map

package/dist/components/Panel.mjs

@@ -0,0 +1,42 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+// src/components/Panel.tsx
+/** Titled surface with optional eyebrow, help text and action. Renders a labelled `<section>`. */
+function Panel({ title, eyebrow, help, action, headingLevel = 2, className, children, ...props }) {
+	const headingId = useId();
+	const Heading = `h${headingLevel}`;
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-labelledby": headingId,
+		className: cn("fds-panel", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("header", {
+			className: "fds-panel__header",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "fds-panel__heading",
+				children: [
+					eyebrow ? /* @__PURE__ */ jsx("p", {
+						className: "fds-eyebrow",
+						children: eyebrow
+					}) : null,
+					/* @__PURE__ */ jsx(Heading, {
+						id: headingId,
+						className: "fds-panel__title",
+						children: title
+					}),
+					help ? /* @__PURE__ */ jsx("p", {
+						className: "fds-panel__help",
+						children: help
+					}) : null
+				]
+			}), action ? /* @__PURE__ */ jsx("div", {
+				className: "fds-panel__action",
+				children: action
+			}) : null]
+		}), children]
+	});
+}
+export { Panel };
+
+//# sourceMappingURL=Panel.mjs.map

package/dist/components/Panel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.mjs","names":[],"sources":["../../src/components/Panel.tsx"],"sourcesContent":["import { useId, type ElementType, type HTMLAttributes, type ReactNode } from \"react\";\nimport { cn } from \"../lib/cn.js\";\n\nexport interface PanelProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  title: ReactNode;\n  eyebrow?: ReactNode;\n  help?: ReactNode;\n  /** Optional trailing action area (buttons, menu). */\n  action?: ReactNode;\n  /** Heading element for the title. Defaults to h2; pick the level that fits the page outline. */\n  headingLevel?: 2 | 3 | 4;\n}\n\n/** Titled surface with optional eyebrow, help text and action. Renders a labelled `<section>`. */\nexport function Panel({\n  title,\n  eyebrow,\n  help,\n  action,\n  headingLevel = 2,\n  className,\n  children,\n  ...props\n}: PanelProps) {\n  const headingId = useId();\n  const Heading = `h${headingLevel}` as ElementType;\n  return (\n    <section aria-labelledby={headingId} className={cn(\"fds-panel\", className)} {...props}>\n      <header className=\"fds-panel__header\">\n        <div className=\"fds-panel__heading\">\n          {eyebrow ? <p className=\"fds-eyebrow\">{eyebrow}</p> : null}\n          <Heading id={headingId} className=\"fds-panel__title\">\n            {title}\n          </Heading>\n          {help ? <p className=\"fds-panel__help\">{help}</p> : null}\n        </div>\n        {action ? <div className=\"fds-panel__action\">{action}</div> : null}\n      </header>\n      {children}\n    </section>\n  );\n}\n"],"mappings":";;;;;;AAcA,SAAgB,MAAM,EACpB,OACA,SACA,MACA,QACA,eAAe,GACf,WACA,UACA,GAAG,SACU;CACb,MAAM,YAAY,MAAM;CACxB,MAAM,UAAU,IAAI;CACpB,OACE,qBAAC,WAAD;EAAS,mBAAiB;EAAW,WAAW,GAAG,aAAa,SAAS;EAAG,GAAI;EAAhF,UAAA,CACE,qBAAC,UAAD;GAAQ,WAAU;GAAlB,UAAA,CACE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACG,UAAU,oBAAC,KAAD;MAAG,WAAU;MAAe,UAAA;KAAW,CAAA,IAAI;KACtD,oBAAC,SAAD;MAAS,IAAI;MAAW,WAAU;MAC/B,UAAA;KACM,CAAA;KACR,OAAO,oBAAC,KAAD;MAAG,WAAU;MAAmB,UAAA;KAAQ,CAAA,IAAI;IACjD;GACJ,CAAA,GAAA,SAAS,oBAAC,OAAD;IAAK,WAAU;IAAqB,UAAA;GAAY,CAAA,IAAI,IACxD;EACP,CAAA,GAAA,QACM;;AAEb"}

package/dist/index.d.mts

@@ -0,0 +1,10 @@
+import { cn } from "./lib/cn.mjs";
+import { Button, ButtonProps } from "./components/Button.mjs";
+import { Panel, PanelProps } from "./components/Panel.mjs";
+import { KeyValue, KeyValueProps, Metric, MetricProps, Tone } from "./components/Metric.mjs";
+import { Badge, BadgeProps } from "./components/Badge.mjs";
+import { EmptyState, EmptyStateProps, Notice, NoticeProps } from "./components/Notice.mjs";
+import { Field, FieldControlProps, FieldProps, Input, Select, Textarea } from "./components/Field.mjs";
+import { DistributionItem, DistributionList, DistributionListProps, Meter, MeterProps, SegmentedMeter, SegmentedMeterProps } from "./components/Meter.mjs";
+import { Menu, MenuItem, MenuProps } from "./components/Menu.mjs";
+export { Badge, type BadgeProps, Button, type ButtonProps, type DistributionItem, DistributionList, type DistributionListProps, EmptyState, type EmptyStateProps, Field, type FieldControlProps, type FieldProps, Input, KeyValue, type KeyValueProps, Menu, type MenuItem, type MenuProps, Meter, type MeterProps, Metric, type MetricProps, Notice, type NoticeProps, Panel, type PanelProps, SegmentedMeter, type SegmentedMeterProps, Select, Textarea, type Tone, cn };

package/dist/index.mjs

@@ -0,0 +1,10 @@
+import { cn } from "./lib/cn.mjs";
+import { Button } from "./components/Button.mjs";
+import { Panel } from "./components/Panel.mjs";
+import { KeyValue, Metric } from "./components/Metric.mjs";
+import { Badge } from "./components/Badge.mjs";
+import { EmptyState, Notice } from "./components/Notice.mjs";
+import { Field, Input, Select, Textarea } from "./components/Field.mjs";
+import { DistributionList, Meter, SegmentedMeter } from "./components/Meter.mjs";
+import { Menu } from "./components/Menu.mjs";
+export { Badge, Button, DistributionList, EmptyState, Field, Input, KeyValue, Menu, Meter, Metric, Notice, Panel, SegmentedMeter, Select, Textarea, cn };

package/dist/lib/cn.d.mts

@@ -0,0 +1,2 @@
+export declare function cn(...classes: Array<string | false | null | undefined>): string;
+//# sourceMappingURL=cn.d.mts.map

package/dist/lib/cn.mjs

@@ -0,0 +1,7 @@
+// src/lib/cn.ts
+function cn(...classes) {
+	return classes.filter(Boolean).join(" ");
+}
+export { cn };
+
+//# sourceMappingURL=cn.mjs.map

package/dist/lib/cn.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.mjs","names":[],"sources":["../../src/lib/cn.ts"],"sourcesContent":["export function cn(...classes: Array<string | false | null | undefined>): string {\n  return classes.filter(Boolean).join(\" \");\n}\n"],"mappings":";AAAA,SAAgB,GAAG,GAAG,SAA2D;CAC/E,OAAO,QAAQ,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AACzC"}

package/package.json

@@ -1,6 +1,74 @@
 {
   "name": "@scttlnd/fintech-design-system",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.3.0",
+  "description": "Shared design foundations for Funder, Portare and Investor",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/scottlinddk/fintech-design-system.git"
+  },
+  "files": [
+    "dist",
+    "styles",
+    "AGENTS.md",
+    "README.md"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    },
+    "./styles.css": "./styles/index.css",
+    "./themes/funder.css": "./styles/themes/funder.css",
+    "./themes/portare.css": "./styles/themes/portare.css",
+    "./themes/investor.css": "./styles/themes/investor.css"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "vp pack",
+    "check": "vp check",
+    "test": "vp test --run",
+    "typecheck": "tsc --noEmit",
+    "changeset": "changeset",
+    "version": "changeset version && vp check --fix",
+    "release": "changeset publish",
+    "prepublishOnly": "npm run build",
+    "showcase:dev": "vp dev --config showcase/vite.config.ts",
+    "showcase:build": "vp build --config showcase/vite.config.ts",
+    "test:browser": "playwright test",
+    "test:visual": "FDS_VISUAL=1 playwright test",
+    "test:visual:update": "FDS_VISUAL=1 playwright test --update-snapshots",
+    "test:package": "node scripts/check-build.mjs && node scripts/check-size.mjs",
+    "smoke:next": "node scripts/smoke-next.mjs",
+    "smoke:next:browser": "node scripts/verify-next.mjs"
+  },
+  "devDependencies": {
+    "@changesets/changelog-github": "^1.0.1",
+    "@changesets/cli": "^3.0.3",
+    "@playwright/test": "^1.65.0",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.8",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.7",
+    "axe-core": "^4.14.0",
+    "happy-dom": "^21.0.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.7.3",
+    "vite-plus": "^1.5.0",
+    "vitest-axe": "^0.1.0"
+  },
+  "peerDependencies": {
+    "react": "^18.3.0 || ^19.0.0"
+  },
+  "engines": {
+    "node": ">=22.14.0"
+  }
+}

package/styles/components/badge.css

@@ -0,0 +1,33 @@
+@layer fds {
+  /* Badge */
+  .fds-badge {
+    --fds-badge-color: var(--fds-muted-strong, var(--fds-foreground));
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    min-height: 1.75rem;
+    padding: 0 0.5rem;
+    border: 1px solid color-mix(in srgb, var(--fds-badge-color) 30%, transparent);
+    border-radius: var(--fds-radius-sm);
+    background: color-mix(in srgb, var(--fds-badge-color) 12%, transparent);
+    color: var(--fds-badge-color);
+    font-size: 0.75rem;
+    font-weight: 500;
+    white-space: nowrap;
+  }
+  .fds-badge--accent {
+    --fds-badge-color: var(--fds-accent);
+  }
+  .fds-badge--success {
+    --fds-badge-color: var(--fds-success);
+  }
+  .fds-badge--warn {
+    --fds-badge-color: var(--fds-warn);
+  }
+  .fds-badge--danger {
+    --fds-badge-color: var(--fds-danger);
+  }
+  .fds-badge__icon {
+    display: inline-flex;
+  }
+}

package/styles/components/button.css

@@ -0,0 +1,45 @@
+@layer fds {
+  .fds-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    min-height: var(--fds-control-h);
+    padding: 0.55rem 1rem;
+    border-radius: var(--fds-radius-md);
+    font: inherit;
+    font-weight: 600;
+    cursor: pointer;
+    transition:
+      background-color var(--fds-duration-fast) var(--fds-ease-out),
+      border-color var(--fds-duration-fast) var(--fds-ease-out);
+  }
+  .fds-button:focus-visible {
+    outline: 2px solid var(--fds-focus-ring);
+    outline-offset: 2px;
+  }
+  .fds-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .fds-button--primary {
+    background: var(--fds-accent);
+    color: var(--fds-on-accent);
+    border: 1px solid transparent;
+  }
+  .fds-button--secondary {
+    background: var(--fds-panel-raised);
+    color: var(--fds-foreground);
+    border: 1px solid var(--fds-line);
+  }
+  .fds-button--ghost {
+    background: transparent;
+    color: var(--fds-foreground);
+    border: 1px solid transparent;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .fds-button {
+      transition: none;
+    }
+  }
+}

package/styles/components/empty-state.css

@@ -0,0 +1,20 @@
+@layer fds {
+  /* Empty state */
+  .fds-empty {
+    padding: 2rem 1rem;
+    text-align: center;
+  }
+  .fds-empty__title {
+    margin: 0;
+    font-weight: 600;
+  }
+  .fds-empty__description {
+    margin: 0.5rem auto 0;
+    max-width: 45ch;
+    font-size: 0.875rem;
+    color: var(--fds-muted);
+  }
+  .fds-empty__action {
+    margin-top: 1rem;
+  }
+}

package/styles/components/eyebrow.css

@@ -0,0 +1,11 @@
+@layer fds {
+  /* Shared primitives. Only --fds-* tokens; tones are derived with color-mix so every theme works. */
+
+  .fds-eyebrow {
+    margin: 0;
+    font-size: 0.75rem;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--fds-muted);
+  }
+}

package/styles/components/field.css

@@ -0,0 +1,59 @@
+@layer fds {
+  /* Form controls: 44px targets on touch / small screens, 16px font to stop iOS zoom. */
+  .fds-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+  }
+  .fds-field__label {
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+  .fds-field__hint,
+  .fds-field__error {
+    margin: 0;
+    font-size: 0.8125rem;
+  }
+  .fds-field__hint {
+    color: var(--fds-muted);
+  }
+  .fds-field__error {
+    color: var(--fds-danger);
+  }
+  .fds-control {
+    width: 100%;
+    min-height: 2.75rem;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--fds-line);
+    border-radius: var(--fds-radius-md);
+    background: var(--fds-panel-soft, var(--fds-panel));
+    color: var(--fds-foreground);
+    font: inherit;
+    font-size: 1rem;
+  }
+  .fds-control--multiline {
+    min-height: 6rem;
+    resize: vertical;
+  }
+  .fds-control:focus-visible {
+    outline: 2px solid var(--fds-focus-ring);
+    outline-offset: 2px;
+    border-color: var(--fds-accent);
+  }
+  .fds-control[aria-invalid="true"] {
+    border-color: var(--fds-danger);
+  }
+  .fds-control:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  @media (min-width: 640px) and (pointer: fine) {
+    .fds-control {
+      min-height: 2.25rem;
+      font-size: 0.875rem;
+    }
+    .fds-control--multiline {
+      min-height: 6rem;
+    }
+  }
+}

package/styles/components/grain.css

@@ -0,0 +1,245 @@
+@layer fds {
+  /*
+   * Grain surfaces: a quiet, hairline-bordered surface with a soft two-colour glow and fine film grain.
+   * On by default for every .fds-panel; opt out with data-fds-grain="off" on the element or any ancestor
+   * (for example <html>). Vivid, hero and the other modifiers are explicit classes on .fds-grain.
+   * Colours derive from the active theme (accent, panel, line), so every theme works. `light-dark()`
+   * follows the theme's `color-scheme`, so no per-theme overrides are needed.
+   */
+  /* Browsers without light-dark() keep the plain panel instead of an invalid background. */
+  @supports (color: light-dark(#000, #fff)) {
+    :root,
+    [data-fds-theme] {
+      --fds-glow-a: var(--fds-accent-strong);
+      --fds-glow-b: light-dark(#6941a5, #a78bfa);
+      --fds-glow-warm-a: var(--fds-warn);
+      --fds-glow-warm-b: var(--fds-danger);
+      /* Glow share (light / dark scheme). Kept low so text contrast is unaffected. */
+      --fds-glow-l: 16%;
+      --fds-glow-d: 26%;
+      /* Grain alpha (light / dark scheme). Grain is a tinted alpha mask: dark specks on light, light on dark. */
+      --fds-grain-l: 0.16;
+      --fds-grain-d: 0.09;
+      --fds-grain-size: 160px;
+      --fds-grain-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.9 -.55'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
+      /* Vivid hues: saturated colour fields with light streaks. Decoration only; put content on a stage. */
+      --fds-vivid-indigo-1: #4f30e8;
+      --fds-vivid-indigo-2: #8b8ffb;
+      --fds-vivid-teal-1: #0d9488;
+      --fds-vivid-teal-2: #5eead4;
+      --fds-vivid-green-1: #15803d;
+      --fds-vivid-green-2: #86efac;
+      --fds-vivid-ember-1: #c2410c;
+      --fds-vivid-ember-2: #fdba74;
+      --fds-stage-bg: #0d0e12;
+      --fds-stage-fg: #f4f4f5;
+      --fds-stage-muted: #a1a1aa;
+      --fds-stage-line: #26272d;
+    }
+
+    .fds-grain:not(:where([data-fds-grain="off"], [data-fds-grain="off"] *)),
+    .fds-panel:not(:where([data-fds-grain="off"], [data-fds-grain="off"] *)) {
+      position: relative;
+      isolation: isolate;
+      border: 1px solid var(--fds-line);
+      border-radius: var(--fds-radius-lg);
+      color: var(--fds-foreground);
+      --fds-tint-1: light-dark(
+        color-mix(in oklab, var(--fds-glow-1, var(--fds-glow-a)) var(--fds-glow-l), transparent),
+        color-mix(in oklab, var(--fds-glow-1, var(--fds-glow-a)) var(--fds-glow-d), transparent)
+      );
+      --fds-tint-2: light-dark(
+        color-mix(in oklab, var(--fds-glow-2, var(--fds-glow-b)) var(--fds-glow-l), transparent),
+        color-mix(in oklab, var(--fds-glow-2, var(--fds-glow-b)) var(--fds-glow-d), transparent)
+      );
+      background:
+        radial-gradient(120% 100% at 0% 0%, var(--fds-tint-1), transparent 62%),
+        radial-gradient(100% 90% at 100% 100%, var(--fds-tint-2), transparent 58%), var(--fds-panel);
+    }
+
+    /* Grain sits above the gradient and below the content, so text stays crisp. */
+    .fds-grain:not(:where([data-fds-grain="off"], [data-fds-grain="off"] *))::before,
+    .fds-panel:not(:where([data-fds-grain="off"], [data-fds-grain="off"] *))::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      z-index: -1;
+      border-radius: inherit;
+      pointer-events: none;
+      background: light-dark(
+        rgb(0 0 0 / var(--fds-grain-l)),
+        rgb(255 255 255 / var(--fds-grain-d))
+      );
+      -webkit-mask-image: var(--fds-grain-image);
+      mask-image: var(--fds-grain-image);
+      -webkit-mask-size: var(--fds-grain-size) var(--fds-grain-size);
+      mask-size: var(--fds-grain-size) var(--fds-grain-size);
+    }
+
+    .fds-grain--warm {
+      --fds-glow-1: var(--fds-glow-warm-a);
+      --fds-glow-2: var(--fds-glow-warm-b);
+    }
+    .fds-grain--subtle {
+      --fds-glow-l: 8%;
+      --fds-glow-d: 14%;
+      --fds-grain-l: 0.1;
+      --fds-grain-d: 0.05;
+    }
+    .fds-grain--hero {
+      --fds-glow-l: 20%;
+      --fds-glow-d: 34%;
+      padding: clamp(1.5rem, 5vw, 3.5rem);
+      border-radius: calc(var(--fds-radius-lg) * 1.5);
+    }
+
+    /*
+     * Vivid: a saturated colour field with diagonal light streaks and strong grain, for hero bands and
+     * feature panels. Text must sit on a .fds-grain__stage (a near-black inset) so contrast never depends
+     * on the gradient. Hues: --indigo (default), --teal, --green, --ember.
+     */
+    .fds-grain--vivid {
+      --fds-v1: var(--fds-vivid-indigo-1);
+      --fds-v2: var(--fds-vivid-indigo-2);
+      --fds-grain-l: 0.3;
+      --fds-grain-d: 0.3;
+      padding: clamp(1rem, 4vw, 2.5rem);
+      border-color: transparent;
+      background:
+        linear-gradient(118deg, transparent 30%, rgb(255 255 255 / 0.28) 30.4%, transparent 31.6%),
+        linear-gradient(118deg, transparent 52%, rgb(255 255 255 / 0.18) 52.3%, transparent 53.2%),
+        linear-gradient(62deg, transparent 64%, rgb(255 255 255 / 0.22) 64.4%, transparent 65.6%),
+        radial-gradient(90% 80% at 15% 10%, var(--fds-v2), transparent 60%),
+        radial-gradient(
+          80% 90% at 90% 95%,
+          color-mix(in oklab, var(--fds-v2) 70%, black),
+          transparent 65%
+        ),
+        linear-gradient(160deg, var(--fds-v1), color-mix(in oklab, var(--fds-v1) 55%, black));
+    }
+    .fds-panel.fds-grain--vivid {
+      padding: clamp(1rem, 4vw, 2.5rem);
+    }
+    .fds-grain--teal {
+      --fds-v1: var(--fds-vivid-teal-1);
+      --fds-v2: var(--fds-vivid-teal-2);
+    }
+    .fds-grain--green {
+      --fds-v1: var(--fds-vivid-green-1);
+      --fds-v2: var(--fds-vivid-green-2);
+    }
+    .fds-grain--ember {
+      --fds-v1: var(--fds-vivid-ember-1);
+      --fds-v2: var(--fds-vivid-ember-2);
+    }
+
+    /* Near-black inset that carries the content on a vivid field. Same colours in every theme. */
+    .fds-grain__stage {
+      padding: var(--fds-space-6);
+      border: 1px solid var(--fds-stage-line);
+      border-radius: var(--fds-radius-md);
+      background: var(--fds-stage-bg);
+      color: var(--fds-stage-fg);
+      font-family: var(--fds-font-mono);
+      font-size: var(--fds-text-sm);
+      line-height: var(--fds-leading-relaxed);
+      box-shadow: 0 18px 48px rgb(0 0 0 / 0.35);
+    }
+    .fds-grain__stage .fds-eyebrow,
+    .fds-grain__stage p {
+      color: var(--fds-stage-muted);
+    }
+
+    /* Flat hairline cells: dividers instead of shadowed cards. */
+    .fds-cells {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+      gap: 1px;
+      border-block: 1px solid var(--fds-line);
+      background: var(--fds-line);
+    }
+    .fds-cells > * {
+      padding: var(--fds-space-6);
+      background: var(--fds-background);
+    }
+
+    /* Inline mono chip for commands and identifiers. */
+    .fds-code {
+      padding: 0.1em 0.45em;
+      border: 1px solid var(--fds-line);
+      border-radius: var(--fds-radius-sm);
+      background: var(--fds-panel-soft);
+      font-family: var(--fds-font-mono);
+      font-size: 0.875em;
+    }
+
+    /*
+     * Components sit on top of the grain: it is background only. Any component fill that is translucent
+     * would let the grain show through, so inside a grain surface those fills are mixed with the panel
+     * colour instead of transparent. The result matches the flat-panel look, but is opaque.
+     */
+    :is(.fds-grain, .fds-panel):not(:where([data-fds-grain="off"], [data-fds-grain="off"] *))
+      .fds-badge {
+      background: color-mix(in srgb, var(--fds-badge-color) 12%, var(--fds-panel));
+      border-color: color-mix(in srgb, var(--fds-badge-color) 30%, var(--fds-panel));
+    }
+    :is(.fds-grain, .fds-panel):not(:where([data-fds-grain="off"], [data-fds-grain="off"] *))
+      .fds-notice {
+      background: color-mix(in srgb, var(--fds-notice-color) 10%, var(--fds-panel));
+      border-color: color-mix(in srgb, var(--fds-notice-color) 35%, var(--fds-panel));
+    }
+    /* Disabled controls use opacity: 0.5, which is see-through. Reproduce it as opaque mixes instead. */
+    :is(.fds-grain, .fds-panel):not(:where([data-fds-grain="off"], [data-fds-grain="off"] *))
+      :is(.fds-button, .fds-control):disabled {
+      opacity: 1;
+    }
+    :is(.fds-grain, .fds-panel):not(:where([data-fds-grain="off"], [data-fds-grain="off"] *))
+      .fds-button--primary:disabled {
+      background: color-mix(in srgb, var(--fds-accent) 50%, var(--fds-panel));
+      color: color-mix(in srgb, var(--fds-on-accent) 50%, var(--fds-panel));
+    }
+    :is(.fds-grain, .fds-panel):not(:where([data-fds-grain="off"], [data-fds-grain="off"] *))
+      .fds-button--secondary:disabled {
+      background: color-mix(in srgb, var(--fds-panel-raised) 50%, var(--fds-panel));
+      border-color: color-mix(in srgb, var(--fds-line) 50%, var(--fds-panel));
+      color: color-mix(in srgb, var(--fds-foreground) 50%, var(--fds-panel));
+    }
+    :is(.fds-grain, .fds-panel):not(:where([data-fds-grain="off"], [data-fds-grain="off"] *))
+      .fds-button--ghost:disabled {
+      color: color-mix(in srgb, var(--fds-foreground) 50%, var(--fds-panel));
+    }
+    :is(.fds-grain, .fds-panel):not(:where([data-fds-grain="off"], [data-fds-grain="off"] *))
+      .fds-control:disabled {
+      background: color-mix(in srgb, var(--fds-panel-soft, var(--fds-panel)) 50%, var(--fds-panel));
+      border-color: color-mix(in srgb, var(--fds-line) 50%, var(--fds-panel));
+      color: color-mix(in srgb, var(--fds-foreground) 50%, var(--fds-panel));
+    }
+
+    /* Quiet, technical labelling inside grain surfaces. */
+    .fds-grain .fds-eyebrow,
+    .fds-panel:not(:where([data-fds-grain="off"], [data-fds-grain="off"] *)) .fds-eyebrow {
+      font-family: var(--fds-font-mono);
+      letter-spacing: 0.08em;
+    }
+
+    /* Decoration only: drop it where it cannot help. */
+    @media (forced-colors: active) {
+      .fds-grain,
+      .fds-panel.fds-grain {
+        background: Canvas;
+      }
+      .fds-grain::before {
+        display: none;
+      }
+    }
+    @media print {
+      .fds-grain,
+      .fds-panel.fds-grain {
+        background: none;
+      }
+      .fds-grain::before {
+        display: none;
+      }
+    }
+  }
+}