@mcp-b/react-components 0.12.0 → 0.13.0

package/dist/components/WorkspaceExplorer.js

@@ -1,9 +1,9 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { A as SearchIcon, h as FileIcon, k as RefreshIcon, n as ArrowLeftIcon } from "../icons-D2Q5n5C1.js";
+import { A as RefreshIcon, h as FileIcon, j as SearchIcon, n as ArrowLeftIcon } from "../icons-Ba9THQKz.js";
 import { Button } from "./Button.js";
-import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, o as CodeBlockFilename, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../CodeBlock-XNQOupQ3.js";
+import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, o as CodeBlockFilename, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../CodeBlock-BUFXG8HW.js";
 import { Input } from "./Input.js";
-import { i as FileTreeFolder, r as FileTreeFile, t as FileTree } from "../FileTree-wMyZhhHO.js";
+import { i as FileTreeFolder, r as FileTreeFile, t as FileTree } from "../FileTree-mpEIcfzA.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/WorkspaceExplorer.tsx
@@ -92,7 +92,7 @@ function useWorkspace({ source, root = "/" }) {
 		markLoading
 	]);
 	const loadInfo = React.useCallback(async () => {
-		if (!("getWorkspaceInfo" in source)) return;
+		if (!source.getWorkspaceInfo) return;
 		try {
 			setInfo(await source.getWorkspaceInfo());
 		} catch {
@@ -245,7 +245,7 @@ function WorkspaceExplorer({ workspace, className, title = "Workspace", actions,
 			children: [showFileView ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
 				variant: "ghost",
 				color: "neutral",
-				size: "xs",
+				size: "icon-xs",
 				onClick: () => setView("tree"),
 				"aria-label": "Back to files",
 				children: /* @__PURE__ */ jsx(ArrowLeftIcon, { "aria-hidden": "true" })
@@ -264,7 +264,7 @@ function WorkspaceExplorer({ workspace, className, title = "Workspace", actions,
 				children: [actions, /* @__PURE__ */ jsx(Button, {
 					variant: "ghost",
 					color: "neutral",
-					size: "xs",
+					size: "icon-xs",
 					onClick: refresh,
 					disabled: isLoading,
 					"aria-label": "Refresh workspace",

package/dist/components/icons.d.ts

@@ -1,2 +1,2 @@
-import { A as RefreshIcon, C as MinusIcon, D as PencilIcon, E as PauseIcon, F as TerminalIcon, I as WarningIcon, L as WrenchIcon, M as SidebarIcon, N as SpinnerIcon, O as PlayIcon, P as SquareIcon, R as XIcon, S as MaximizeIcon, T as PaperclipIcon, _ as FolderOpenIcon, a as CheckIcon, b as InfoIcon, c as ChevronRightIcon, d as DownloadIcon, f as EllipsisIcon, g as FolderIcon, h as FileIcon, i as ArrowUpIcon, j as SearchIcon, k as PlusIcon, l as CopyIcon, m as EyeOffIcon, n as ArrowLeftIcon, o as ChevronDownIcon, p as EyeIcon, r as ArrowRightIcon, s as ChevronLeftIcon, t as ArrowDownIcon, u as DotIcon, v as IconProps, w as MonitorIcon, x as LinkIcon, y as ImageIcon } from "../icons-CbjtbIJK.js";
-export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DotIcon, DownloadIcon, EllipsisIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, IconProps, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, MinusIcon, MonitorIcon, PaperclipIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, RefreshIcon, SearchIcon, SidebarIcon, SpinnerIcon, SquareIcon, TerminalIcon, WarningIcon, WrenchIcon, XIcon };
+import { A as PlusIcon, B as XIcon, C as MicrophoneIcon, D as PauseIcon, E as PaperclipIcon, F as SquareIcon, I as StopIcon, L as TerminalIcon, M as SearchIcon, N as SidebarIcon, O as PencilIcon, P as SpinnerIcon, R as WarningIcon, S as MaximizeIcon, T as MonitorIcon, _ as FolderOpenIcon, a as CheckIcon, b as InfoIcon, c as ChevronRightIcon, d as DownloadIcon, f as EllipsisIcon, g as FolderIcon, h as FileIcon, i as ArrowUpIcon, j as RefreshIcon, k as PlayIcon, l as CopyIcon, m as EyeOffIcon, n as ArrowLeftIcon, o as ChevronDownIcon, p as EyeIcon, r as ArrowRightIcon, s as ChevronLeftIcon, t as ArrowDownIcon, u as DotIcon, v as IconProps, w as MinusIcon, x as LinkIcon, y as ImageIcon, z as WrenchIcon } from "../icons-CUCz_Sft.js";
+export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DotIcon, DownloadIcon, EllipsisIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, IconProps, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, MicrophoneIcon, MinusIcon, MonitorIcon, PaperclipIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, RefreshIcon, SearchIcon, SidebarIcon, SpinnerIcon, SquareIcon, StopIcon, TerminalIcon, WarningIcon, WrenchIcon, XIcon };

package/dist/components/icons.js

@@ -1,2 +1,2 @@
-import { A as SearchIcon, C as MonitorIcon, D as PlayIcon, E as PencilIcon, F as WarningIcon, I as WrenchIcon, L as XIcon, M as SpinnerIcon, N as SquareIcon, O as PlusIcon, P as TerminalIcon, S as MinusIcon, T as PauseIcon, _ as FolderOpenIcon, a as CheckIcon, b as LinkIcon, c as ChevronRightIcon, d as DownloadIcon, f as EllipsisIcon, g as FolderIcon, h as FileIcon, i as ArrowUpIcon, j as SidebarIcon, k as RefreshIcon, l as CopyIcon, m as EyeOffIcon, n as ArrowLeftIcon, o as ChevronDownIcon, p as EyeIcon, r as ArrowRightIcon, s as ChevronLeftIcon, t as ArrowDownIcon, u as DotIcon, v as ImageIcon, w as PaperclipIcon, x as MaximizeIcon, y as InfoIcon } from "../icons-D2Q5n5C1.js";
-export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DotIcon, DownloadIcon, EllipsisIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, MinusIcon, MonitorIcon, PaperclipIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, RefreshIcon, SearchIcon, SidebarIcon, SpinnerIcon, SquareIcon, TerminalIcon, WarningIcon, WrenchIcon, XIcon };
+import { A as RefreshIcon, C as MinusIcon, D as PencilIcon, E as PauseIcon, F as StopIcon, I as TerminalIcon, L as WarningIcon, M as SidebarIcon, N as SpinnerIcon, O as PlayIcon, P as SquareIcon, R as WrenchIcon, S as MicrophoneIcon, T as PaperclipIcon, _ as FolderOpenIcon, a as CheckIcon, b as LinkIcon, c as ChevronRightIcon, d as DownloadIcon, f as EllipsisIcon, g as FolderIcon, h as FileIcon, i as ArrowUpIcon, j as SearchIcon, k as PlusIcon, l as CopyIcon, m as EyeOffIcon, n as ArrowLeftIcon, o as ChevronDownIcon, p as EyeIcon, r as ArrowRightIcon, s as ChevronLeftIcon, t as ArrowDownIcon, u as DotIcon, v as ImageIcon, w as MonitorIcon, x as MaximizeIcon, y as InfoIcon, z as XIcon } from "../icons-Ba9THQKz.js";
+export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DotIcon, DownloadIcon, EllipsisIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, MicrophoneIcon, MinusIcon, MonitorIcon, PaperclipIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, RefreshIcon, SearchIcon, SidebarIcon, SpinnerIcon, SquareIcon, StopIcon, TerminalIcon, WarningIcon, WrenchIcon, XIcon };

package/dist/{copy-button-C6JSKtFE.js → copy-button-DUMLYdsk.js}

@@ -1,10 +1,10 @@
-import { a as CheckIcon, l as CopyIcon } from "./icons-D2Q5n5C1.js";
+import { a as CheckIcon, l as CopyIcon } from "./icons-Ba9THQKz.js";
 import { Button } from "./components/Button.js";
-import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./components/Tooltip.js";
+import { Tooltip } from "./components/Tooltip.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/_internal/copy-button.tsx
-function CopyButton({ label, text, timeout = 1500, stopPropagation = false, onCopy, onError, onClick, ...props }) {
+function CopyButton({ label, tooltip = label, text, size = "icon", timeout = 1500, stopPropagation = false, onCopy, onError, onClick, ...props }) {
 	const [copied, setCopied] = React.useState(false);
 	const timeoutRef = React.useRef(null);
 	React.useEffect(() => () => {
@@ -30,14 +30,15 @@ function CopyButton({ label, text, timeout = 1500, stopPropagation = false, onCo
 		text,
 		timeout
 	]);
-	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(Button, {
+	return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { render: /* @__PURE__ */ jsx(Button, {
+		type: "button",
 		variant: "ghost",
-		size: "icon",
+		size,
 		"aria-label": label,
 		...props,
 		onClick: handleClick,
 		children: copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {})
-	}) }), /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipPositioner, { children: /* @__PURE__ */ jsx(TooltipPopup, { children: copied ? "Copied" : label }) }) })] });
+	}) }), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, { children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: copied ? "Copied" : tooltip }) }) })] });
 }
 //#endregion
 export { CopyButton as t };

package/dist/{copy-button-BKXqGiNm.d.ts → copy-button-DtPMgN7e.d.ts}

@@ -1,10 +1,11 @@
-import { r as ButtonProps } from "./Button-Ct5I6aTu.js";
+import { r as ButtonProps } from "./Button-FX_hpqxm.js";
 import * as React from "react";
 
 //#region src/components/_internal/copy-button.d.ts
-interface CopyButtonProps extends Omit<ButtonProps, "children" | "variant" | "size" | "color" | "className" | "onClick" | "onError"> {
+interface CopyButtonProps extends Omit<ButtonProps, "children" | "variant" | "color" | "className" | "onClick" | "onError"> {
   className?: string;
   label: string;
+  tooltip?: string;
   text: string;
   timeout?: number;
   stopPropagation?: boolean;

package/dist/icons-Ba9THQKz.js

@@ -0,0 +1,64 @@
+import { jsx } from "react/jsx-runtime";
+import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Check, ChevronDown, ChevronLeft, ChevronRight, CircleStop, Copy, Dot, Download, Ellipsis, Eye, EyeOff, File, Folder, FolderOpen, Image, Info, Link2, LoaderCircle, Maximize2, Mic, Minus, Monitor, PanelLeft, Paperclip, Pause, Pencil, Play, Plus, RefreshCw, Search, Square, Terminal, TriangleAlert, Wrench, X } from "lucide-react";
+//#region src/components/_internal/icons.tsx
+function icon(Component) {
+	return function DesignSystemIcon({ size = 16, strokeWidth = 1.75, ...props }) {
+		return /* @__PURE__ */ jsx(Component, {
+			size,
+			strokeWidth,
+			"aria-hidden": "true",
+			focusable: "false",
+			...props
+		});
+	};
+}
+const ChevronRightIcon = icon(ChevronRight);
+const ChevronDownIcon = icon(ChevronDown);
+const ChevronLeftIcon = icon(ChevronLeft);
+const CheckIcon = icon(Check);
+const XIcon = icon(X);
+const PencilIcon = icon(Pencil);
+const CopyIcon = icon(Copy);
+const EyeIcon = icon(Eye);
+const EyeOffIcon = icon(EyeOff);
+const FolderIcon = icon(Folder);
+const FolderOpenIcon = icon(FolderOpen);
+const FileIcon = icon(File);
+const PaperclipIcon = icon(Paperclip);
+const MicrophoneIcon = icon(Mic);
+const StopIcon = icon(CircleStop);
+const PlusIcon = icon(Plus);
+const MinusIcon = icon(Minus);
+const PlayIcon = icon(Play);
+const PauseIcon = icon(Pause);
+const SquareIcon = icon(Square);
+const ArrowLeftIcon = icon(ArrowLeft);
+const ArrowRightIcon = icon(ArrowRight);
+const ArrowDownIcon = icon(ArrowDown);
+const ArrowUpIcon = icon(ArrowUp);
+const DownloadIcon = icon(Download);
+const RefreshIcon = icon(RefreshCw);
+const DotIcon = icon(Dot);
+const EllipsisIcon = icon(Ellipsis);
+function SpinnerIcon({ className, size = 16, strokeWidth = 1.75, ...props }) {
+	return /* @__PURE__ */ jsx(LoaderCircle, {
+		size,
+		strokeWidth,
+		"aria-hidden": "true",
+		focusable: "false",
+		className: ["sigvelo-icon--spinner", className].filter(Boolean).join(" "),
+		...props
+	});
+}
+const SearchIcon = icon(Search);
+const SidebarIcon = icon(PanelLeft);
+const TerminalIcon = icon(Terminal);
+const LinkIcon = icon(Link2);
+const WarningIcon = icon(TriangleAlert);
+const WrenchIcon = icon(Wrench);
+const InfoIcon = icon(Info);
+const ImageIcon = icon(Image);
+const MonitorIcon = icon(Monitor);
+const MaximizeIcon = icon(Maximize2);
+//#endregion
+export { RefreshIcon as A, MinusIcon as C, PencilIcon as D, PauseIcon as E, StopIcon as F, TerminalIcon as I, WarningIcon as L, SidebarIcon as M, SpinnerIcon as N, PlayIcon as O, SquareIcon as P, WrenchIcon as R, MicrophoneIcon as S, PaperclipIcon as T, FolderOpenIcon as _, CheckIcon as a, LinkIcon as b, ChevronRightIcon as c, DownloadIcon as d, EllipsisIcon as f, FolderIcon as g, FileIcon as h, ArrowUpIcon as i, SearchIcon as j, PlusIcon as k, CopyIcon as l, EyeOffIcon as m, ArrowLeftIcon as n, ChevronDownIcon as o, EyeIcon as p, ArrowRightIcon as r, ChevronLeftIcon as s, ArrowDownIcon as t, DotIcon as u, ImageIcon as v, MonitorIcon as w, MaximizeIcon as x, InfoIcon as y, XIcon as z };

package/dist/icons-CUCz_Sft.d.ts

@@ -0,0 +1,210 @@
+import { LucideProps } from "lucide-react";
+
+//#region src/components/_internal/icons.d.ts
+/**
+ * The design system's single icon adapter.
+ *
+ * Lucide supplies the artwork while this adapter owns the library-wide optical
+ * defaults and decorative semantics. Keeping the existing names here lets
+ * components share one icon language without coupling their public APIs to an
+ * icon vendor.
+ */
+type IconProps = Omit<LucideProps, "ref">;
+declare const ChevronRightIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const ChevronDownIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const ChevronLeftIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const CheckIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const XIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const PencilIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const CopyIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const EyeIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const EyeOffIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const FolderIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const FolderOpenIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const FileIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const PaperclipIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const MicrophoneIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const StopIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const PlusIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const MinusIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const PlayIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const PauseIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const SquareIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const ArrowLeftIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const ArrowRightIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const ArrowDownIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const ArrowUpIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const DownloadIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const RefreshIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const DotIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const EllipsisIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare function SpinnerIcon({
+  className,
+  size,
+  strokeWidth,
+  ...props
+}: IconProps): import("react").JSX.Element;
+declare const SearchIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const SidebarIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const TerminalIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const LinkIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const WarningIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const WrenchIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const InfoIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const ImageIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const MonitorIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+declare const MaximizeIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
+//#endregion
+export { PlusIcon as A, XIcon as B, MicrophoneIcon as C, PauseIcon as D, PaperclipIcon as E, SquareIcon as F, StopIcon as I, TerminalIcon as L, SearchIcon as M, SidebarIcon as N, PencilIcon as O, SpinnerIcon as P, WarningIcon as R, MaximizeIcon as S, MonitorIcon as T, FolderOpenIcon as _, CheckIcon as a, InfoIcon as b, ChevronRightIcon as c, DownloadIcon as d, EllipsisIcon as f, FolderIcon as g, FileIcon as h, ArrowUpIcon as i, RefreshIcon as j, PlayIcon as k, CopyIcon as l, EyeOffIcon as m, ArrowLeftIcon as n, ChevronDownIcon as o, EyeIcon as p, ArrowRightIcon as r, ChevronLeftIcon as s, ArrowDownIcon as t, DotIcon as u, IconProps as v, MinusIcon as w, LinkIcon as x, ImageIcon as y, WrenchIcon as z };

package/dist/styles/accessibility.css

@@ -0,0 +1,14 @@
+/* Accessibility overrides intentionally come after component styles so system
+ * colors and keyboard focus remain visible even when a component customizes
+ * its normal-mode outline or box shadow. */
+@media (forced-colors: active) {
+  :where(:focus-visible) {
+    outline: var(--sigvelo-focus-width) solid Highlight;
+    outline-offset: var(--sigvelo-focus-offset);
+  }
+
+  :where([data-disabled], :disabled) {
+    border-color: GrayText;
+    color: GrayText;
+  }
+}

package/dist/styles/accordion.css

@@ -18,13 +18,13 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 0.75rem;
+  gap: var(--sigvelo-recipe-control-gap);
   inline-size: 100%;
-  min-block-size: var(--sigvelo-control-height-md);
-  padding-block: 1rem;
-  padding-inline: 0.5rem;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.9375rem;
+  min-block-size: var(--sigvelo-recipe-control-height);
+  padding-block: var(--sigvelo-spacing-2);
+  padding-inline: var(--sigvelo-recipe-control-padding-inline);
+  font-family: inherit;
+  font-size: var(--sigvelo-recipe-control-font-size);
   font-weight: var(--sigvelo-font-weight-semibold);
   text-align: start;
   color: var(--sigvelo-color-text);
@@ -43,9 +43,7 @@
 
 .accordion__trigger:focus-visible {
   outline: none;
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px var(--sigvelo-color-focus);
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
 }
 
 .accordion__trigger:is(:disabled, [data-disabled]) {
@@ -53,69 +51,31 @@
   cursor: not-allowed;
 }
 
-.accordion__trigger-text {
-  flex: 1;
-  min-inline-size: 0;
-  overflow-wrap: break-word;
-}
-
-.accordion__icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 auto;
-  inline-size: 1.25rem;
-  block-size: 1.25rem;
-  color: var(--sigvelo-color-text-muted);
-  transition:
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    transform var(--sigvelo-duration-medium) var(--sigvelo-ease-emphasized);
-}
-
-.accordion__item[data-open] .accordion__icon {
-  color: var(--sigvelo-color-text);
-  transform: rotate(180deg);
-}
-
 .accordion__panel {
+  block-size: var(--accordion-panel-height);
   overflow: hidden;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
+  font-family: inherit;
+  font-size: var(--sigvelo-text-sm);
   line-height: 1.625;
   color: var(--sigvelo-color-text-muted);
+  transition:
+    block-size var(--sigvelo-duration-medium) var(--sigvelo-ease-emphasized),
+    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
-.accordion__panel[data-open] {
-  animation: accordion-expand var(--sigvelo-duration-medium) var(--sigvelo-ease-emphasized);
-}
-
+.accordion__panel[data-starting-style],
 .accordion__panel[data-ending-style] {
-  animation: accordion-collapse var(--sigvelo-duration-medium) var(--sigvelo-ease-accelerate);
+  block-size: 0;
+  opacity: 0;
 }
 
 .accordion__panel > * {
-  padding-block-end: 1rem;
-  padding-inline: 0.5rem;
+  padding-block-end: var(--sigvelo-spacing-4);
+  padding-inline: var(--sigvelo-recipe-control-padding-inline);
 }
 
-@keyframes accordion-expand {
-  from {
-    block-size: 0;
-    opacity: 0;
-  }
-  to {
-    block-size: var(--accordion-panel-height);
-    opacity: 1;
-  }
-}
-
-@keyframes accordion-collapse {
-  from {
-    block-size: var(--accordion-panel-height);
-    opacity: 1;
-  }
-  to {
-    block-size: 0;
-    opacity: 0;
+@media (prefers-reduced-motion: reduce) {
+  .accordion__panel {
+    transition-duration: var(--sigvelo-duration-reduced);
   }
 }