@recursica/mui-adapter 0.24.0 → 0.26.0

package/src/components/Timeline/Timeline.tsx

@@ -7,7 +7,7 @@ import {
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Timeline.module.css";
-import { TimelineItem } from "./TimelineItem";
+import { TimelineItem, type TimelineItemProps } from "./TimelineItem";
 
 import { type RecursicaTimelineProps } from "@recursica/adapter-common";
 
@@ -23,7 +23,7 @@ export type TimelineProps = RecursicaOverStyled<
 
 interface TimelineComponent
   extends React.ForwardRefExoticComponent<
-    TimelineProps & React.RefAttributes<HTMLDivElement>
+    TimelineProps & React.RefAttributes<HTMLUListElement>
   > {
   Item: typeof TimelineItem;
 }
@@ -32,8 +32,10 @@ interface TimelineComponent
  * The `Timeline` component displays a list of events in chronological order.
  *
  * **Recursica Abstract:**
- * This component acts as a structural wrapper around Mui's `<Timeline>`.
- * It forces alignment and geometry strictly via the UI Kit's `.itemBullet` and connector definitions.
+ * This component acts as a structural wrapper around Mui's `<Timeline>`, composing
+ * `TimelineSeparator`/`TimelineDot`/`TimelineConnector`/`TimelineContent` per item
+ * (via `Timeline.Item`) so the bullet marker and connecting line render the same way
+ * they do in the Mantine adapter.
  *
  * @example
  * ```tsx
@@ -43,29 +45,21 @@ interface TimelineComponent
  * ```
  */
 const TimelineInner = React.forwardRef<HTMLUListElement, TimelineProps>(
-  function Timeline({ overStyled = false, ...rest }, ref) {
+  function Timeline(
+    { overStyled = false, active = -1, children, ...rest },
+    ref,
+  ) {
     const sanitizedProps = filterStylingProps(rest, overStyled);
 
-    const mergedClassNames: Partial<Record<string, string>> = {
-      root: styles.root,
-    };
-
-    const classNamesProp = (sanitizedProps as Record<string, unknown>)
-      .classNames;
-    if (
-      classNamesProp &&
-      typeof classNamesProp === "object" &&
-      !Array.isArray(classNamesProp)
-    ) {
-      const o = classNamesProp as Record<string, string>;
-      Object.keys(o).forEach((key) => {
-        if (mergedClassNames[key]) {
-          mergedClassNames[key] = `${mergedClassNames[key]} ${o[key]}`;
-        } else {
-          mergedClassNames[key] = o[key];
-        }
-      });
-    }
+    const items = React.Children.toArray(children);
+    const decoratedItems = items.map((item, index) =>
+      React.isValidElement(item)
+        ? React.cloneElement(item as React.ReactElement<TimelineItemProps>, {
+            __active: active >= index,
+            __isLast: index === items.length - 1,
+          })
+        : item,
+    );
 
     return (
       <MuiTimeline
@@ -74,8 +68,10 @@ const TimelineInner = React.forwardRef<HTMLUListElement, TimelineProps>(
           MuiTimelineProps,
           "color" | "radius" | "bulletSize" | "lineWidth"
         >)}
-        classes={mergedClassNames}
-      />
+        classes={{ root: styles.root }}
+      >
+        {decoratedItems}
+      </MuiTimeline>
     );
   },
 );

package/src/components/Timeline/TimelineItem.tsx

@@ -2,6 +2,10 @@ import React from "react";
 import MuiTimelineItem, {
   type TimelineItemProps as MuiTimelineItemProps,
 } from "@mui/lab/TimelineItem";
+import TimelineSeparator from "@mui/lab/TimelineSeparator";
+import TimelineDot from "@mui/lab/TimelineDot";
+import TimelineConnector from "@mui/lab/TimelineConnector";
+import TimelineContent from "@mui/lab/TimelineContent";
 import {
   filterStylingProps,
   type RecursicaOverStyled,
@@ -11,8 +15,15 @@ import styles from "./Timeline.module.css";
 import { type RecursicaTimelineItemProps } from "@recursica/adapter-common";
 
 export type TimelineItemProps = RecursicaOverStyled<
-  Omit<MuiTimelineItemProps, "radius" | "color" | "lineVariant"> &
-    RecursicaTimelineItemProps
+  Omit<MuiTimelineItemProps, "radius" | "color" | "lineVariant" | "title"> &
+    RecursicaTimelineItemProps & {
+      /** Heading rendered above the item's description/timestamp */
+      title?: React.ReactNode;
+      /** @internal injected by `Timeline` to mark items up to `active` */
+      __active?: boolean;
+      /** @internal injected by `Timeline`; suppresses the trailing connector on the last item */
+      __isLast?: boolean;
+    }
 >;
 
 /**
@@ -22,48 +33,30 @@ export type TimelineItemProps = RecursicaOverStyled<
  * The `Timeline.Item` has been extended to support a `timestamp` string natively,
  * rendering it below the body content. It also accepts a `bulletVariant` to morph
  * the structural dimensions of the node circle automatically.
+ *
+ * Internally it composes Mui's `TimelineSeparator`/`TimelineDot`/`TimelineConnector`/
+ * `TimelineContent` primitives (Mui has no single "item" abstraction like Mantine's
+ * `Timeline.Item` that renders a bullet + connector on its own).
  */
-export const TimelineItem = React.forwardRef<HTMLDivElement, TimelineItemProps>(
+export const TimelineItem = React.forwardRef<HTMLLIElement, TimelineItemProps>(
   function TimelineItem(
     {
       overStyled = false,
       timestamp,
       bulletVariant = "default",
       bullet,
+      title,
       children,
+      __active = false,
+      __isLast = false,
       ...rest
     },
     ref,
   ) {
-    void bullet;
     const sanitizedProps = filterStylingProps(rest, overStyled);
+    const { className: userClassName, ...restSanitizedProps } =
+      sanitizedProps as Record<string, unknown> & { className?: string };
 
-    const mergedClassNames: Partial<Record<string, string>> = {
-      item: styles.item,
-      itemBody: styles.itemBody,
-      itemContent: styles.itemContent,
-      itemBullet: styles.itemBullet,
-      itemTitle: styles.itemTitle,
-    };
-
-    const classNamesProp = (sanitizedProps as Record<string, unknown>)
-      .classNames;
-    if (
-      classNamesProp &&
-      typeof classNamesProp === "object" &&
-      !Array.isArray(classNamesProp)
-    ) {
-      const o = classNamesProp as Record<string, string>;
-      Object.keys(o).forEach((key) => {
-        if (mergedClassNames[key]) {
-          mergedClassNames[key] = `${mergedClassNames[key]} ${o[key]}`;
-        } else {
-          mergedClassNames[key] = o[key];
-        }
-      });
-    }
-
-    // Embed timestamp inside children if provided, wrapped in a specific class
     const content = timestamp ? (
       <>
         {children && <div className={styles.description}>{children}</div>}
@@ -76,14 +69,24 @@ export const TimelineItem = React.forwardRef<HTMLDivElement, TimelineItemProps>(
     return (
       <MuiTimelineItem
         ref={ref}
-        {...(sanitizedProps as unknown as Omit<
+        data-variant={bulletVariant}
+        data-active={__active || undefined}
+        {...(restSanitizedProps as unknown as Omit<
           MuiTimelineItemProps,
-          "radius" | "color" | "lineVariant"
+          "radius" | "color" | "lineVariant" | "title"
         >)}
-        classes={mergedClassNames}
-        data-variant={bulletVariant}
+        className={
+          userClassName ? `${styles.item} ${userClassName}` : styles.item
+        }
       >
-        {content}
+        <TimelineSeparator>
+          <TimelineDot className={styles.itemBullet}>{bullet}</TimelineDot>
+          {!__isLast && <TimelineConnector className={styles.itemConnector} />}
+        </TimelineSeparator>
+        <TimelineContent className={styles.itemBody}>
+          {title && <div className={styles.itemTitle}>{title}</div>}
+          <div className={styles.itemContent}>{content}</div>
+        </TimelineContent>
       </MuiTimelineItem>
     );
   },

package/src/components/Toast/Toast.module.css

@@ -1,10 +1,3 @@
-/* EXEMPTIONS:
-   - elevation levels layer-1, layer-2, and layer-3 are ignored because all toasts explicitly use the standard 
-     layer-0 elevation shadow for styling consistency. */
-/* recursica-ignore: --recursica_ui-kit_components_toast_properties_elevation_layer-1 */
-/* recursica-ignore: --recursica_ui-kit_components_toast_properties_elevation_layer-2 */
-/* recursica-ignore: --recursica_ui-kit_components_toast_properties_elevation_layer-3 */
-
 /* HARDCODED VALUES:
    - border-style: solid. Baseline so the per-variant border-color tokens actually render.
  */

package/src/components/Tooltip/Tooltip.module.css

@@ -1,12 +1,3 @@
-/* EXEMPTIONS:
-   - beak-inset is ignored because Tooltip positioning calculations are handled dynamically by Mantine/Floating UI at the React runtime.
-   - beak-size is ignored because Mantine's tooltip arrows compute their sizing and positional offsets
-     dynamically within the React rendering engine (requires inline pixel number rather than standard CSS variables).
-     The beak size is checked in JS against a fixed value of 16px. If this variable changes, the TSX components
-     need to be reviewed/re-compiled. */
-/* recursica-ignore: --recursica_ui-kit_components_tooltip_properties_beak-inset = 8px */
-/* recursica-ignore: --recursica_ui-kit_components_tooltip_properties_beak-size = 16px */
-
 /* HARDCODED VALUES:
    - border-style: solid. Structural rendering rule for the tooltip border (Mantine uses Box
      which may not set border-style natively). Same pattern as Menu / HoverCard.

package/src/components/TransferList/TRANSFERLIST_IMPLEMENTATION_NOTES.md

@@ -0,0 +1,140 @@
+# TransferList Implementation Notes
+
+## Architecture overview
+
+`TransferList` replaces the "coming soon" stub with a fully custom composite — neither
+`@mantine/core` nor `@mui/material` ships a real dual-listbox component (MUI's docs "Transfer
+List" is a List+Checkbox recipe, not a package export), so it's built from Recursica's own
+primitives, the same situation `FileUpload`/`FileInput` were in.
+
+Follows Matt's reference implementation (Forge's fallback `TransferList.tsx`) fairly closely:
+
+- Two side-by-side panes (source/target), each: a header row (pane label + `Badge` count,
+  `"selected / total"` once something's checked), a search `TextField`, then a scrollable list of
+  `Checkbox` rows (`CheckboxGroup` for items carrying a `group` field).
+- A column of four transfer `Button`s between the panes: single/double chevron, each direction —
+  single moves only the checked items in that pane, double moves everything in that pane.
+- Data model: `data`/`defaultData` as a `[sourceItems, targetItems]` tuple + `onChange`, matching
+  Forge's controlled/uncontrolled pattern (same shape as `FileUpload`'s `files`/`onFilesAdded`).
+
+## Routed through `FormControlWrapper` directly, not Forge's hand-rolled label/assistive
+
+Forge's reference renders its own `Label`/`AssistiveElement` directly instead of going through
+`FormControlWrapper`. Per direction, this build uses `FormControlWrapper` instead — consistent
+with every other form control in this codebase (and with `FileUpload`, which was reverted to
+`FormControlWrapper` rather than hand-rolling that same thing). `formLayout`
+(`stacked`/`side-by-side`), `label`, `required`, `assistiveText`/`description`/`helperText`, and
+`error` all come from the standard wrapper; only the two panes + transfer buttons are the
+component's own content.
+
+## `state` axis: `disabled`/`error` props, not Forge's `state` string
+
+Forge's reference takes a single `state="default"|"disabled"|"error"` prop. This build instead
+uses the same convention as every other Recursica control: a boolean `disabled` prop plus
+`FormControlWrapper`'s own `error` (message) prop — `error`'s mere presence is what triggers the
+error visuals, exactly like `TextArea`/`CheckboxGroup`. The token export only defines
+`disabled`/`error` state variants (no `focus`), matching Matt's direction to "follow the tokens."
+
+## `readOnly` mode (added 2026-08-19)
+
+Forge's reference has no read-only concept, but Matt asked for a `ReadOnly` story demonstrating
+the selected items as a read-only list. Switched from calling `FormControlWrapper` directly to
+routing through `WithReadOnlyWrapper` (the follow-up flagged in the original version of this note),
+matching `TextArea`'s shape: `readOnly`/`readOnlyComponent`/`emptyValueComponent` added to the prop
+surface via `ReadOnlyControlProps`, `readOnlyType="text"`, and `readOnlyValue` set to the target
+pane's item labels (`effectiveData[1].map(item => item.label)`). Renders as a comma-joined text
+list via the shared `ReadOnlyTextField`, same convention `CheckboxGroup`'s own read-only mode
+already uses for an array of values — no new read-only renderer needed. The two panes + transfer
+buttons (`activeComponent`) are skipped entirely when `readOnly` is set, same as every other
+control.
+
+## Height/gap/padding token audit (2026-08-19)
+
+Matt flagged the pane height as "too short" and asked that gap/padding be tied to recursica
+variables. Re-verified against `recursica_variables_scoped.css`: `properties_height` (200px),
+`properties_width`, `properties_vertical-padding`/`properties_horizontal-padding`, and
+`properties_gap` were already wired to their tokens (see "Token interpretation" above) — the 200px
+pane height is the design token's own value, not a hardcoded fallback. Two spacing values genuinely
+have no covering token in the 31-variable schema and are intentionally left as hardcoded pixels
+(see `TransferList.module.css` comments) rather than reusing another component's token: the gap
+between stacked `CheckboxGroup` blocks in `.paneList` (ungrouped row + each named group), and the
+gap between the four transfer buttons in `.transferColumn`. If a token is added to the schema for
+either, wire it in directly; until then this matches the established precedent (e.g. `FileUpload`'s
+untokened icon size) of leaving a truly uncovered value hardcoded with a documented reason instead
+of borrowing a sibling component's namespace.
+
+## Fixed: checkboxes inside `CheckboxGroup` ignored their own `checked`/`onChange` (2026-08-19)
+
+Matt's discrepancy report against the mantine source of truth: clicking an ungrouped checkbox in
+the `Grouped` story showed no checkmark and never toggled selection, though the pane's `Badge`
+count also never changed — meaning it silently did nothing, not "count going up" as literally
+worded, confirmed live via Playwright against both Storybooks (`isChecked()` stayed `false`, badge
+text stayed `5` across repeated clicks in mui; mantine correctly showed `1 / 5`, `2 / 5`).
+
+Root cause was in `Checkbox.tsx`, not `TransferList.tsx`: `TransferList` wraps its ungrouped items
+in a bare `<CheckboxGroup>` purely so they pick up the `item-gap` layout token (see the
+`RECURSICA_COMPONENTS`/gap fix from 2026-08-18), without ever passing that group a `value`/
+`onChange`. But `Checkbox.tsx` derived `isGrouped` from `groupContext !== null` alone — any
+`CheckboxGroup` ancestor forced grouped-array semantics (`isChecked = groupContext.value.includes(...)`,
+`handleChange` dispatching to `groupContext.onChange` instead of the checkbox's own `onChange`),
+even though the group had no `value` array and no `onChange` to dispatch to. `TransferList`'s own
+`checked={selected.has(item.value)}`/`onChange={() => onToggle(item.value)}` props were present but
+silently overridden/ignored. Mantine's `Checkbox.tsx` never had this bug — it doesn't consult any
+group context at all and always passes `checked`/`onChange` straight through to
+`@mantine/core`'s `Checkbox`.
+
+Fixed by only treating a `Checkbox` as group-controlled when it _doesn't_ already have its own
+explicit `checked` prop: `isGrouped = groupContext !== null && restRecord.checked === undefined`.
+A checkbox with its own `checked` (like `TransferList`'s rows) now always owns its source of truth;
+only checkboxes relying on `Checkbox.Group`'s array-tracking (no individual `checked`, matched by
+`value` — `CheckboxGroup.stories.tsx`'s usage) still defer to the group. Audited every
+`CheckboxGroup`/`Checkbox` pairing in mui-adapter (`CheckboxGroup.stories.tsx` and `TransferList`) —
+no existing usage combines both an individual `checked` and group-array `value`, so this is a
+straight bug fix with no regression risk.
+
+## Token interpretation: unlabeled tokens with more than one plausible layout target
+
+The 31-variable schema (`properties_*` + two `layouts.*` + `states.{disabled,error}`) has a few
+names that don't pin down a single location by themselves:
+
+- **`properties_gap`** — applied to the row holding `[source pane, transfer column, target pane]`.
+  It's the only _unnested_ gap the schema defines at the component's own level (not under
+  `header-style`, a state, or a layout), so it reads as the component's top-level layout gap.
+- **`properties_title-filter-gap`** — between each pane's header row (label + count `Badge`) and
+  its search field.
+- **`properties_filter-items-gap`** — between each pane's search field and its item list.
+- **`properties_header-style_*` / `properties_colors_header-color`** — typography/color for each
+  pane's own header text, not the overall `FormControlWrapper` label (which has its own type
+  styling already).
+- **`properties_width` (300px) / `properties_height` (200px)** — taken as each pane's own fixed
+  box size (`flex: 1 1 <width>`, so panes still stretch evenly in a wider container; `height` is
+  literal since a dual-listbox needs a bounded, independently-scrollable list).
+
+No exemptions needed beyond `border-size` (see below) — all 31 variables are referenced; verified
+zero broken/unused via `recursica-token-analyzer`.
+
+## Border-size intentionally unused
+
+Same house policy `TextField`/`TextArea`/`FileInput` already follow: `border-size` (base,
+`disabled`, `error`) is `recursica-ignore`d and a flat 1px border is applied uniformly instead, so
+switching states doesn't shift layout.
+
+## No forge-defined focus state
+
+`transfer-list` has no `states.focus` axis in the export — same as `FileInput`/`TextField`. Focus
+is handled per-control (each `Checkbox`/`TextField`/`Button` already has its own focus ring); the
+pane box itself has no focus state to render.
+
+## Grouping and search are local, not per-item persisted state
+
+Search filters each pane independently (`sourceSearch`/`targetSearch`); grouped items render under
+a `CheckboxGroup` keyed by `item.group`, ungrouped items render as plain `Checkbox` rows above the
+groups (alphabetized by group name) — same two-bucket split Forge's reference uses. Selection
+(`sourceSelected`/`targetSelected`) is cleared on every transfer, matching Forge's behavior.
+
+## Chevron icons are inline, not a shared icon set entry
+
+Same precedent as `Tree`'s `ExpandGlyph`/`FileInput`'s `ClearIcon`: a single-chevron and a
+double-chevron SVG are defined locally and flipped via `transform: scaleX(-1)` for the "left"
+direction, rather than maintaining four separate paths or adding new shared icon-set entries for a
+single component.

package/src/components/TransferList/TransferList.module.css

@@ -1,38 +1,174 @@
-/* EXEMPTIONS:
-   This component is a placeholder stub. Once fully implemented, its specific
-   tokens will be fully wired up to direct styles. */
-
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_border-radius */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_filter-items-gap */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_gap */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_header-style_fontFamily */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_header-style_fontSize */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_header-style_fontStyle */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_header-style_fontWeight */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_header-style_letterSpacing */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_header-style_lineHeight */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_header-style_textCase */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_header-style_textDecoration */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_height */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_horizontal-padding */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_title-filter-gap */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_vertical-padding */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_width */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_layouts_side-by-side_properties_top-bottom-margin */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_layouts_stacked_properties_top-bottom-margin */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_default_properties_border-size */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_default_properties_colors_background */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_default_properties_colors_border-color */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_default_properties_colors_header-color */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_disabled_properties_border-size */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_disabled_properties_colors_background */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_disabled_properties_colors_border-color */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_disabled_properties_colors_header-color */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_error_properties_border-size */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_error_properties_colors_background */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_error_properties_colors_border-color */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_error_properties_colors_header-color */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_focus_properties_border-size */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_focus_properties_colors_background */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_focus_properties_colors_border-color */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_focus_properties_colors_header-color */
+/* TOKEN INTERPRETATION NOTES (see TRANSFERLIST_IMPLEMENTATION_NOTES.md):
+   - `properties_gap` is applied to the row that holds [source pane, transfer buttons, target pane] —
+     it's the only unnested gap the schema defines at the component's own level.
+   - `properties_title-filter-gap` sits between each pane's header row and its search field.
+   - `properties_filter-items-gap` sits between each pane's search field and its item list. */
+
+.layoutOverride {
+  --form-control-margin-bottom: var(
+    --recursica_ui-kit_components_transfer-list_variants_layouts_stacked_properties_top-bottom-margin
+  );
+}
+
+.layoutOverride[data-form-layout="side-by-side"] {
+  --form-control-margin-bottom: var(
+    --recursica_ui-kit_components_transfer-list_variants_layouts_side-by-side_properties_top-bottom-margin
+  );
+}
+
+.root {
+  display: flex;
+  width: 100%;
+}
+
+.panes {
+  display: flex;
+  align-items: stretch;
+  gap: var(--recursica_ui-kit_components_transfer-list_properties_gap);
+  width: 100%;
+}
+
+.pane {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-width: 0;
+  flex: 1 1 var(--recursica_ui-kit_components_transfer-list_properties_width);
+  height: var(--recursica_ui-kit_components_transfer-list_properties_height);
+  padding: var(
+      --recursica_ui-kit_components_transfer-list_properties_vertical-padding
+    )
+    var(
+      --recursica_ui-kit_components_transfer-list_properties_horizontal-padding
+    );
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(
+    --recursica_ui-kit_components_transfer-list_properties_border-radius
+  );
+  border-color: var(
+    --recursica_ui-kit_components_transfer-list_properties_colors_border-color
+  );
+  background-color: var(
+    --recursica_ui-kit_components_transfer-list_properties_colors_background-color
+  );
+}
+
+.paneHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(
+    --recursica_ui-kit_components_transfer-list_properties_title-filter-gap
+  );
+  font-family: var(
+    --recursica_ui-kit_components_transfer-list_properties_header-style_fontFamily
+  );
+  font-size: var(
+    --recursica_ui-kit_components_transfer-list_properties_header-style_fontSize
+  );
+  font-style: var(
+    --recursica_ui-kit_components_transfer-list_properties_header-style_fontStyle
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_transfer-list_properties_header-style_fontWeight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_transfer-list_properties_header-style_letterSpacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_transfer-list_properties_header-style_lineHeight
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_transfer-list_properties_header-style_textDecoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_transfer-list_properties_header-style_textCase
+  );
+  color: var(
+    --recursica_ui-kit_components_transfer-list_properties_colors_header-color
+  );
+}
+
+.paneSearch {
+  margin-bottom: var(
+    --recursica_ui-kit_components_transfer-list_properties_filter-items-gap
+  );
+}
+
+.paneList {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  /* No token exists for the gap between stacked CheckboxGroup blocks (ungrouped row +
+     each named group) — the 31-variable transfer-list schema only defines gaps at the
+     header/search/pane level (see TRANSFERLIST_IMPLEMENTATION_NOTES.md). Left as an
+     intentional hardcoded value rather than borrowing another component's token, same
+     as FileUpload's untokened icon size. */
+  gap: 2px;
+  min-height: 0;
+}
+
+.emptyState {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  opacity: 0.6;
+  font-size: 14px;
+  padding: 16px;
+  text-align: center;
+}
+
+.transferColumn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  /* No token exists for spacing between the four transfer buttons — not part of the
+     31-variable schema. Left as an intentional hardcoded value (see TRANSFERLIST_IMPLEMENTATION_NOTES.md). */
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.chevron[data-direction="left"] {
+  transform: scaleX(-1);
+}
+
+/* -------------------------------------
+   STATE CASCADE
+-------------------------------------- */
+
+.root[data-error] .pane {
+  border-color: var(
+    --recursica_ui-kit_components_transfer-list_variants_states_error_properties_colors_border-color
+  ) !important;
+  background-color: var(
+    --recursica_ui-kit_components_transfer-list_variants_states_error_properties_colors_background-color
+  ) !important;
+}
+
+.root[data-error] .paneHeader {
+  color: var(
+    --recursica_ui-kit_components_transfer-list_variants_states_error_properties_colors_header-color
+  ) !important;
+}
+
+.root[data-disabled] .pane {
+  border-color: var(
+    --recursica_ui-kit_components_transfer-list_variants_states_disabled_properties_colors_border-color
+  ) !important;
+  background-color: var(
+    --recursica_ui-kit_components_transfer-list_variants_states_disabled_properties_colors_background-color
+  ) !important;
+  opacity: var(
+    --recursica_ui-kit_components_transfer-list_variants_states_disabled_properties_opacity
+  );
+}
+
+.root[data-disabled] .paneHeader {
+  color: var(
+    --recursica_ui-kit_components_transfer-list_variants_states_disabled_properties_colors_header-color
+  ) !important;
+}