@epilot/spark-ui 0.26.0 → 0.27.0

package/dist/components/list.cjs

@@ -5,6 +5,7 @@ const require_components_skeleton = require("./skeleton.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
+let class_variance_authority = require("class-variance-authority");
 let _base_ui_react_use_render = require("@base-ui/react/use-render");
 let cn = require("cn");
 //#region src/components/list.tsx
@@ -19,6 +20,7 @@ const radiusRowClasses = {
 	full: "group-data-[list-radius=full]/list:first:rounded-t-full group-data-[list-radius=full]/list:last:rounded-b-full"
 };
 const lookClasses = [
+	"group-data-[variant=ambient]/list:border-(--spark-card-border,transparent) group-data-[variant=ambient]/list:bg-(--spark-card-bg,var(--neutral-a3)) group-data-[variant=ambient]/list:[--spark-skeleton-bg:var(--neutral-a5)] group-data-[variant=ambient]/list:[--color-focus-root:var(--spark-card-focus,var(--spark-11))]",
 	"group-data-[look=soft]/list:bg-gray-3 dark:group-data-[look=soft]/list:bg-gray-a3",
 	"group-data-[look=soft-accent]/list:bg-(--spark-a3)",
 	"group-data-[look=surface]/list:border-gray-a6 group-data-[look=surface]/list:bg-gray-3 dark:group-data-[look=surface]/list:bg-gray-a3",
@@ -29,6 +31,7 @@ const lookClasses = [
 	"group-data-[look=solid-accent]/list:bg-spark-9"
 ];
 const borderLookClasses = [
+	"group-data-[variant=ambient]/list:border-(--spark-card-border,transparent)",
 	"group-data-[look=surface]/list:border-gray-a6",
 	"group-data-[look=surface-accent]/list:border-spark-a6",
 	"group-data-[look=outline]/list:border-gray-a6",
@@ -36,16 +39,21 @@ const borderLookClasses = [
 ];
 const ListItemContext = react.createContext({ recent: false });
 const ListItemColumnContext = react.createContext({ isEnd: false });
-function List({ className, variant = "soft", color = "neutral", radius = "lg", gap = .5, style, ...props }) {
+function List({ className, variant = "soft", color, radius = "lg", gap = .5, style, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
 		role: "list",
 		"data-slot": "list",
 		"data-variant": variant,
 		"data-look": color === "accent" ? `${variant}-accent` : variant,
+		"data-card-color": variant === "ambient" ? color : void 0,
 		"data-list-radius": radius,
-		className: (0, cn.cn)("group/list m-0 list-none p-0", "data-[variant=soft]:flex data-[variant=soft]:flex-col data-[variant=soft]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5))]", "data-[variant=solid]:flex data-[variant=solid]:flex-col data-[variant=solid]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5))]", "data-[variant=ghost]:flex data-[variant=ghost]:flex-col data-[variant=ghost]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5))]", className),
+		className: (0, cn.cn)("group/list m-0 list-none p-0", "data-[variant=soft]:flex data-[variant=soft]:flex-col data-[variant=soft]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5))]", "data-[variant=solid]:flex data-[variant=solid]:flex-col data-[variant=solid]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5))]", "data-[variant=ambient]:flex data-[variant=ambient]:flex-col data-[variant=ambient]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5)*var(--spark-card-list-gapped,1))]", "data-[variant=ghost]:flex data-[variant=ghost]:flex-col data-[variant=ghost]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5))]", className),
 		style: {
 			"--list-gap-steps": gap,
+			...variant === "ambient" && {
+				"--list-item-fg": "var(--spark-card-fg,var(--neutral-12))",
+				"--list-item-fg-muted": "var(--spark-card-fg-muted,var(--neutral-11))"
+			},
 			...variant === "solid" && {
 				"--list-item-fg": color === "accent" ? "var(--spark-contrast)" : "var(--neutral-12)",
 				"--list-item-fg-muted": color === "accent" ? "var(--spark-contrast)" : "var(--neutral-12)"
@@ -79,7 +87,7 @@ function itemClassName({ className, hoistLeading, hasDetail, flushDetail, isSele
 			hasDetail ? "has-focus-visible:bg-spark-a3 has-[[data-slot=list-item-row]:hover]:bg-spark-a3" : "hover:bg-spark-a3 has-focus-visible:bg-spark-a3",
 			"has-focus-visible:ring-2 has-focus-visible:ring-offset-2"
 		]
-	], "group-data-[variant=surface]/list:border-x group-data-[variant=surface]/list:border-t group-data-[variant=surface]/list:last:border-b", "group-data-[variant=outline]/list:border-x group-data-[variant=outline]/list:border-t group-data-[variant=outline]/list:last:border-b", detailSelected ? borderLookClasses : lookClasses, Object.values(radiusRowClasses), className);
+	], "group-data-[variant=surface]/list:border-x group-data-[variant=surface]/list:border-t group-data-[variant=surface]/list:last:border-b", "group-data-[variant=outline]/list:border-x group-data-[variant=outline]/list:border-t group-data-[variant=outline]/list:last:border-b", "group-data-[variant=ambient]/list:border-x-(length:--spark-card-border-width,0px) group-data-[variant=ambient]/list:border-t-(length:--spark-card-border-width,0px) group-data-[variant=ambient]/list:last:border-b-(length:--spark-card-border-width,0px)", detailSelected ? borderLookClasses : lookClasses, Object.values(radiusRowClasses), className);
 }
 function ListItem({ className, children, recent, selected, skeleton, render, ...props }) {
 	const interactive = !skeleton && render != null;
@@ -188,10 +196,18 @@ function ListItemTitle({ className, children, emphasis = "default", ...props })
 		}), title]
 	});
 }
-function ListItemSubline({ className, ...props }) {
+const listItemSublineVariants = (0, class_variance_authority.cva)("block w-full truncate text-sm", {
+	variants: { tone: {
+		neutral: "text-(--list-item-fg-muted,var(--neutral-11))",
+		success: "text-success-soft-foreground",
+		error: "text-error-soft-foreground"
+	} },
+	defaultVariants: { tone: "neutral" }
+});
+function ListItemSubline({ className, tone, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		"data-slot": "list-item-subline",
-		className: (0, cn.cn)("block w-full truncate text-sm text-(--list-item-fg-muted,var(--neutral-11))", className),
+		className: (0, cn.cn)(listItemSublineVariants({ tone }), className),
 		...props
 	});
 }

package/dist/components/list.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"list.cjs","names":["React","Skeleton"],"sources":["../../src/components/list.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport type { ContainerRadius } from '../lib/container-chrome'\nimport type { SparkCardColor, SparkCardVariant } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\nimport { Skeleton } from './skeleton'\n\ntype ListVariant = SparkCardVariant\ntype ListRadius = ContainerRadius\n\n// Rounds only the first/last row of a run, regardless of variant — harmless on ghost\n// (nothing painted to clip). Keyed on `data-list-radius` alone: unlike fill (below),\n// rounding doesn't depend on variant/color, so no compound group-data selector is needed.\n// Named `list-radius`, not `radius`: the global Roundness knob (Theme) also writes a\n// bare `data-radius` via an unscoped `[data-radius=...]` selector in spark-default.css —\n// `none`/`full` are spelled the same in both scales, so a plain `data-radius` here would\n// collide and let List silently override the app-wide knob for its whole subtree.\nconst radiusRowClasses: Record<ListRadius, string> = {\n  none: 'group-data-[list-radius=none]/list:first:rounded-t-none group-data-[list-radius=none]/list:last:rounded-b-none',\n  sm: 'group-data-[list-radius=sm]/list:first:rounded-t-sm group-data-[list-radius=sm]/list:last:rounded-b-sm',\n  md: 'group-data-[list-radius=md]/list:first:rounded-t-md group-data-[list-radius=md]/list:last:rounded-b-md',\n  lg: 'group-data-[list-radius=lg]/list:first:rounded-t-lg group-data-[list-radius=lg]/list:last:rounded-b-lg',\n  xl: 'group-data-[list-radius=xl]/list:first:rounded-t-xl group-data-[list-radius=xl]/list:last:rounded-b-xl',\n  '2xl':\n    'group-data-[list-radius=2xl]/list:first:rounded-t-2xl group-data-[list-radius=2xl]/list:last:rounded-b-2xl',\n  '3xl':\n    'group-data-[list-radius=3xl]/list:first:rounded-t-3xl group-data-[list-radius=3xl]/list:last:rounded-b-3xl',\n  full: 'group-data-[list-radius=full]/list:first:rounded-t-full group-data-[list-radius=full]/list:last:rounded-b-full',\n}\n\n// Fill and border colour depend on variant *and* colour together, so they live on\n// data-look (see the comment on `look` in List, below).\nconst lookClasses = [\n  'group-data-[look=soft]/list:bg-gray-3 dark:group-data-[look=soft]/list:bg-gray-a3',\n  // arbitrary-var form, not the bg-spark-a3 utility: identical colour, but avoids a\n  // literal substring collision with the unconditional selection/hover tint below,\n  // which a couple of tests distinguish with a plain className.includes check.\n  'group-data-[look=soft-accent]/list:bg-(--spark-a3)',\n  'group-data-[look=surface]/list:border-gray-a6 group-data-[look=surface]/list:bg-gray-3 dark:group-data-[look=surface]/list:bg-gray-a3',\n  'group-data-[look=surface-accent]/list:border-spark-a6 group-data-[look=surface-accent]/list:bg-(--spark-surface)',\n  'group-data-[look=outline]/list:border-gray-a6',\n  'group-data-[look=outline-accent]/list:border-spark-a6',\n  'group-data-[look=solid]/list:bg-gray-1',\n  'group-data-[look=solid-accent]/list:bg-spark-9',\n]\n// The look fills out-specify a plain bg utility, so a selected row with a detail keeps\n// only the borders.\nconst borderLookClasses = [\n  'group-data-[look=surface]/list:border-gray-a6',\n  'group-data-[look=surface-accent]/list:border-spark-a6',\n  'group-data-[look=outline]/list:border-gray-a6',\n  'group-data-[look=outline-accent]/list:border-spark-a6',\n]\n\n// ListItem publishes `recent` so ListItemTitle can render the inline recency dot; the\n// column context lets the title show it only on the primary (start) column, never the\n// value column of a two-column row.\nconst ListItemContext = React.createContext<{ recent: boolean }>({\n  recent: false,\n})\nconst ListItemColumnContext = React.createContext<{ isEnd: boolean }>({\n  isEnd: false,\n})\n\ninterface ListProps extends React.ComponentProps<'ul'> {\n  /** A prop, not the ambient `data-style` knob — that would cascade into row content. */\n  variant?: ListVariant\n  /** Chrome palette. `neutral` (default) tracks the app neutral; `accent` tints with the brand accent. */\n  color?: SparkCardColor\n  /** Corner radius, as a named step. Unset → `lg`, today's fixed behaviour. */\n  radius?: ListRadius\n  /** How many `--spark-layout-gap` units apart each row sits (`soft`/`solid`/`ghost` only). */\n  gap?: number\n}\n\nfunction List({\n  className,\n  variant = 'soft',\n  color = 'neutral',\n  radius = 'lg',\n  gap = 0.5,\n  style,\n  ...props\n}: ListProps) {\n  // Fill/border-colour needs BOTH axes at once (e.g. \"soft, tinted with accent\"), which a\n  // single group-data selector can't express and chaining two on the same named group\n  // can't either (that generates a descendant match between two *different* ancestors,\n  // not one ancestor bearing both attributes). Resolving the pair to one value up front\n  // sidesteps it entirely — see the `data-look` selectors on ListItem below.\n  const look = color === 'accent' ? `${variant}-accent` : variant\n  return (\n    <ul\n      // role=list keeps list semantics even under list-style:none (Safari drops them).\n      role=\"list\"\n      data-slot=\"list\"\n      // group/list + data-variant drive every item's per-variant chrome (below).\n      data-variant={variant}\n      data-look={look}\n      data-list-radius={radius}\n      className={cn(\n        'group/list m-0 list-none p-0',\n        // soft/solid = separate rows → stack with a small gap (the gap IS the divider).\n        // ghost shares that same gap for spacing but no fill/border (see ListItem's\n        // chrome block, which has no ghost selector). surface/outline glue rows into one\n        // panel with no gap at all.\n        'data-[variant=soft]:flex data-[variant=soft]:flex-col data-[variant=soft]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5))]',\n        'data-[variant=solid]:flex data-[variant=solid]:flex-col data-[variant=solid]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5))]',\n        'data-[variant=ghost]:flex data-[variant=ghost]:flex-col data-[variant=ghost]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5))]',\n        className,\n      )}\n      style={\n        {\n          '--list-gap-steps': gap,\n          // solid's fill inverts far enough that the row's own ink must invert with it\n          // (unlike soft/surface/outline's translucent tints, where the default ink\n          // stays legible regardless of colour) — matches Card's own solid recipe,\n          // where fg and fg-muted both collapse to the one contrast-guaranteed step.\n          ...(variant === 'solid' && {\n            '--list-item-fg':\n              color === 'accent'\n                ? 'var(--spark-contrast)'\n                : 'var(--neutral-12)',\n            '--list-item-fg-muted':\n              color === 'accent'\n                ? 'var(--spark-contrast)'\n                : 'var(--neutral-12)',\n          }),\n          ...style,\n        } as React.CSSProperties\n      }\n      {...props}\n    />\n  )\n}\n\ninterface ListItemProps extends React.ComponentProps<'li'> {\n  /** The \"recently changed\" accent dot. */\n  recent?: boolean\n  /** Persistent accent-tint (e.g. the active document). */\n  selected?: boolean\n  /** Loading placeholder (Figma `skeleton=true`). */\n  skeleton?: boolean\n  /**\n   * Base UI polymorphism for the inner row. Pass `<a href/>` or `<button/>` to make\n   * the row interactive (accent-on-hover/focus, cursor, focus ring). Omit → static row.\n   */\n  render?: useRender.RenderProp\n}\n\nfunction splitListItemChildren(\n  children: React.ReactNode,\n  render: ListItemProps['render'],\n  skeleton: boolean | undefined,\n) {\n  if (skeleton) return {}\n  const childArray = React.Children.toArray(children)\n  // Only a ListItemLeading actually marked `interactive` (a Checkbox/Radio/Button) needs\n  // to move outside `render`'s element, and only when `render` is literally an <a>/\n  // <button> — nesting a focusable control inside another interactive element is invalid\n  // HTML and double-fires clicks. A `render` of anything else (a `<Card/>`, say) has no\n  // such conflict: it isn't natively interactive itself, so a control inside it is valid,\n  // unduplicated HTML, and hoisting would only pull the control outside whatever that\n  // element paints (its fill, border, rounded corner) for no reason. A plain icon\n  // (interactive unset) is the same story from the other side — either way, Leading stays\n  // inside the row by default, so the whole visual row remains one click/tap target.\n  const rendersAnchorOrButton =\n    React.isValidElement(render) &&\n    (render.type === 'a' || render.type === 'button')\n  const leadingChild = childArray.find(\n    (child): child is React.ReactElement<ListItemLeadingProps> =>\n      React.isValidElement(child) && child.type === ListItemLeading,\n  )\n  const leading =\n    rendersAnchorOrButton && leadingChild?.props.interactive\n      ? leadingChild\n      : undefined\n  // Detail always sits outside the row, so it may hold its own controls and never joins\n  // the row's link/button.\n  const detail = childArray.find(\n    (child): child is React.ReactElement<ListItemDetailProps> =>\n      React.isValidElement(child) && child.type === ListItemDetail,\n  )\n  return {\n    leading,\n    detail,\n    rowChildren: childArray.filter(\n      (child) => child !== leading && child !== detail,\n    ),\n  }\n}\n\nfunction itemClassName({\n  className,\n  hoistLeading,\n  hasDetail,\n  flushDetail,\n  isSelected,\n  interactive,\n}: {\n  className: string | undefined\n  hoistLeading: boolean\n  hasDetail: boolean\n  flushDetail: boolean\n  isSelected: boolean | undefined\n  interactive: boolean\n}) {\n  const detailSelected = hasDetail && isSelected\n  return cn(\n    'relative has-focus-visible:z-10',\n    !hoistLeading && detailSelected && 'bg-spark-a3',\n    hoistLeading && [\n      // a flush detail must reach the item's left edge, so the inset moves to the leading.\n      flushDetail\n        ? 'flex min-w-0 items-center gap-4 *:data-[slot=list-item-leading]:pl-4'\n        : 'flex min-w-0 items-center gap-4 pl-4',\n      // a detail wraps onto its own full-width line below the leading + row.\n      hasDetail && 'flex-wrap gap-y-0 *:data-[slot=list-item-detail]:pl-0',\n      isSelected && 'bg-spark-a3',\n      interactive && [\n        // neutral at rest → subtle accent tint on hover/focus (the affordance goes\n        // accent too, in ListItemTrailing; title + leading stay neutral). The click\n        // target itself is `row`, so focus-visible (unlike hover) has to be read off\n        // a descendant via has() — it never lands on this <li> directly.\n        'cursor-pointer',\n        // hovering the detail must not suggest it navigates.\n        hasDetail\n          ? 'has-focus-visible:bg-spark-a3 has-[[data-slot=list-item-row]:hover]:bg-spark-a3'\n          : 'hover:bg-spark-a3 has-focus-visible:bg-spark-a3',\n        'has-focus-visible:ring-2 has-focus-visible:ring-offset-2',\n      ],\n    ],\n    // soft/solid rows sit in a gapped stack, not a glued panel, but still read as one\n    // rounded group: only the first/last row round the outer corners. surface/\n    // outline glue rows into one bordered panel instead — border SIDES are variant-\n    // only (no colour axis), so they stay on data-variant; fill and border COLOUR\n    // live on data-look instead (lookClasses, above).\n    'group-data-[variant=surface]/list:border-x group-data-[variant=surface]/list:border-t group-data-[variant=surface]/list:last:border-b',\n    'group-data-[variant=outline]/list:border-x group-data-[variant=outline]/list:border-t group-data-[variant=outline]/list:last:border-b',\n    detailSelected ? borderLookClasses : lookClasses,\n    Object.values(radiusRowClasses),\n    className,\n  )\n}\n\nfunction ListItem({\n  className,\n  children,\n  recent,\n  selected,\n  skeleton,\n  render,\n  ...props\n}: ListItemProps) {\n  // Skeleton rows are decorative placeholders — never render as a real <a>/<button>. An\n  // aria-hidden anchor would still be focusable (WCAG 4.1.2), so skeleton forces a plain,\n  // non-interactive <div> regardless of `render`.\n  const interactive = !skeleton && render != null\n\n  const recentCtx = React.useMemo(() => ({ recent: recent ?? false }), [recent])\n\n  const { leading, detail, rowChildren } = splitListItemChildren(\n    children,\n    render,\n    skeleton,\n  )\n  const hoistLeading = leading != null\n  // With a detail the <li> is the visual item, so selection must tint it, not just the row.\n  const selectOnItem = hoistLeading || detail != null\n  const isSelected = !skeleton && selected\n\n  const row = useRender({\n    defaultTagName: 'div',\n    render: skeleton ? undefined : render,\n    props: {\n      'data-slot': 'list-item-row',\n      // skeleton is a decorative placeholder → keep it out of the a11y tree.\n      'aria-hidden': skeleton ? true : undefined,\n      className: cn(\n        // row layout from Figma 2217-1667; min-h is a HARD 44px floor (WCAG 2.5.5),\n        // py/gap/text still scale past it via the spacing/scaling knobs. no-underline\n        // resets the default <a> decoration when the row renders as a link.\n        'flex min-h-[2.75rem] items-center gap-4 py-3 text-left no-underline',\n        hoistLeading\n          ? 'min-w-0 flex-1 pr-4'\n          : detail\n            ? 'w-full rounded-t-[inherit] px-4'\n            : 'w-full rounded-[inherit] px-4',\n        // not hoisted → this row IS the whole visual item (no outer <li> chrome), so\n        // selection tint lives here, same as a row with no leading slot at all.\n        !selectOnItem && isSelected && 'bg-spark-a3',\n        interactive && [\n          'group/row cursor-pointer transition-colors duration-150 motion-reduce:transition-none',\n          'disabled:pointer-events-none disabled:opacity-50',\n          hoistLeading\n            ? // the custom focus ring is drawn on the outer <li> (has-focus-visible,\n              // below) so it wraps the leading control too — but the browser's own\n              // default outline still targets whichever element actually has focus,\n              // which is this one, so it has to be suppressed here specifically.\n              'focus-visible:outline-hidden'\n            : [\n                'hover:bg-spark-a3 focus-visible:bg-spark-a3',\n                'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n              ],\n        ],\n      ),\n      children: skeleton ? <ListItemSkeleton /> : rowChildren,\n    },\n  })\n\n  return (\n    <li\n      data-slot=\"list-item\"\n      className={itemClassName({\n        className,\n        hoistLeading,\n        hasDetail: detail != null,\n        flushDetail: Boolean(detail?.props.flush),\n        isSelected,\n        interactive,\n      })}\n      {...props}\n    >\n      <ListItemContext.Provider value={recentCtx}>\n        {leading}\n        {row}\n        {detail}\n      </ListItemContext.Provider>\n    </li>\n  )\n}\n\ninterface ListItemDetailProps extends React.ComponentProps<'div'> {\n  /** Drops the padding so the detail runs edge to edge and to the item's bottom, clipped to its rounded corners. */\n  flush?: boolean\n}\n\nfunction ListItemDetail({ className, flush, ...props }: ListItemDetailProps) {\n  return (\n    <div\n      data-slot=\"list-item-detail\"\n      className={cn(\n        'w-full min-w-0 cursor-auto',\n        // clips itself, not the <li>, so the row's focus ring is never cut off.\n        flush ? 'overflow-hidden rounded-b-[inherit]' : 'px-4 pb-3',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ListItemSkeleton() {\n  // Compose the shared Skeleton primitive so the placeholder matches every other skeleton\n  // (token + radius + animation + motion-reduce).\n  return (\n    <>\n      <Skeleton className=\"size-10 shrink-0 rounded-full\" />\n      <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <Skeleton className=\"h-3.5 w-1/3\" />\n        <Skeleton className=\"h-3.5 w-2/3\" />\n      </div>\n      <div className=\"flex min-w-0 flex-1 flex-col items-end gap-2\">\n        <Skeleton className=\"h-3.5 w-1/4\" />\n        <Skeleton className=\"h-3.5 w-1/2\" />\n      </div>\n    </>\n  )\n}\n\ninterface ListItemLeadingProps extends React.ComponentProps<'div'> {\n  /**\n   * Set when this slot holds a focusable control (Checkbox, Radio, Button). ListItem\n   * then hoists it outside `render`'s element — nesting a real control inside the row's\n   * own <a>/<button> is invalid HTML and double-fires clicks. Leave unset for decorative\n   * content (an icon): it stays inside the row, so the whole visual row is one\n   * click/tap target, same as a row with no leading slot at all.\n   */\n  interactive?: boolean\n}\n\nfunction ListItemLeading({\n  className,\n  interactive: _interactive,\n  ...props\n}: ListItemLeadingProps) {\n  return (\n    <div\n      data-slot=\"list-item-leading\"\n      className={cn('flex shrink-0 items-center', className)}\n      {...props}\n    />\n  )\n}\n\ninterface ListItemContentProps extends React.ComponentProps<'div'> {\n  /** `end` right-aligns the column (the value column). */\n  align?: 'start' | 'end'\n}\n\nfunction ListItemContent({\n  className,\n  align = 'start',\n  ...props\n}: ListItemContentProps) {\n  const columnCtx = React.useMemo(() => ({ isEnd: align === 'end' }), [align])\n  return (\n    <ListItemColumnContext.Provider value={columnCtx}>\n      <div\n        data-slot=\"list-item-content\"\n        className={cn(\n          'flex min-w-0 flex-1 flex-col gap-1',\n          align === 'end' ? 'items-end text-right' : 'items-start text-left',\n          className,\n        )}\n        {...props}\n      />\n    </ListItemColumnContext.Provider>\n  )\n}\n\nfunction ListItemPreline({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"list-item-preline\"\n      className={cn(\n        'block w-full truncate text-sm text-(--list-item-fg-muted,var(--neutral-11))',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ninterface ListItemTitleProps extends React.ComponentProps<'span'> {\n  /** `strong` keeps the title bold, e.g. for menu rows; `default` is medium, bold on a `recent` row. */\n  emphasis?: 'default' | 'strong'\n}\n\nfunction ListItemTitle({\n  className,\n  children,\n  emphasis = 'default',\n  ...props\n}: ListItemTitleProps) {\n  const { recent } = React.useContext(ListItemContext)\n  const { isEnd } = React.useContext(ListItemColumnContext)\n  // recency dot sits inline, immediately left of the title (Figma 1310-977) — only on the\n  // primary (start) column, so a two-column value row's value never carries it.\n  const showDot = recent && !isEnd\n\n  // className/{...props} always land on THIS span (the one that truncates), so a caller's\n  // override (e.g. `title`, `line-clamp-2 whitespace-normal`) behaves identically whether\n  // or not the dot renders — only the wrapping structure differs below.\n  const title = (\n    <span\n      data-slot=\"list-item-title\"\n      className={cn(\n        showDot ? 'min-w-0 truncate' : 'block w-full truncate',\n        'text-base text-(--list-item-fg,var(--neutral-12))',\n        recent || emphasis === 'strong' ? 'font-bold' : 'font-medium',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n\n  if (!showDot) {\n    // No dot: stay a plain block so the column's text alignment (e.g. an end column's\n    // text-right) governs the title directly.\n    return title\n  }\n\n  return (\n    <span className=\"flex w-full items-center gap-2\">\n      <span\n        aria-hidden=\"true\"\n        data-slot=\"list-item-indicator\"\n        className=\"size-2 shrink-0 rounded-full bg-spark-9\"\n      />\n      {title}\n    </span>\n  )\n}\n\nfunction ListItemSubline({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"list-item-subline\"\n      className={cn(\n        'block w-full truncate text-sm text-(--list-item-fg-muted,var(--neutral-11))',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ListItemTrailing({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"list-item-trailing\"\n      className={cn(\n        'flex shrink-0 items-center text-gray-11',\n        // interactive rows tint the affordance accent on hover/focus (group/row is set on\n        // the interactive inner row; absent on static rows, so this simply never fires).\n        // Relies on the child reading currentColor (Spark icons do) — the colour-\n        // independent Icon component hardcodes its own ink and won't pick this up; use\n        // a Spark icon here, not Icon.\n        'transition-colors duration-150 motion-reduce:transition-none',\n        'group-hover/row:text-spark-a11 group-focus-visible/row:text-spark-a11',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  List,\n  ListItem,\n  ListItemContent,\n  ListItemDetail,\n  ListItemLeading,\n  ListItemPreline,\n  ListItemSubline,\n  ListItemTitle,\n  ListItemTrailing,\n}\nexport type {\n  ListProps,\n  ListItemProps,\n  ListItemContentProps,\n  ListItemDetailProps,\n  ListItemLeadingProps,\n  ListItemTitleProps,\n  ListVariant,\n  ListRadius,\n}\n"],"mappings":"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"}
+{"version":3,"file":"list.cjs","names":["React","Skeleton"],"sources":["../../src/components/list.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render'\nimport { cva } from 'class-variance-authority'\nimport * as React from 'react'\nimport type { ContainerRadius } from '../lib/container-chrome'\nimport type { SparkCardColor, SparkCardVariant } from '../lib/theme-types'\nimport type { Tone } from '../lib/tones'\nimport { cn } from '../utils/cn'\nimport { Skeleton } from './skeleton'\n\ntype ListVariant = SparkCardVariant | 'ambient'\ntype ListRadius = ContainerRadius\n\n// Rounds only the first/last row of a run, regardless of variant — harmless on ghost\n// (nothing painted to clip). Keyed on `data-list-radius` alone: unlike fill (below),\n// rounding doesn't depend on variant/color, so no compound group-data selector is needed.\n// Named `list-radius`, not `radius`: the global Roundness knob (Theme) also writes a\n// bare `data-radius` via an unscoped `[data-radius=...]` selector in spark-default.css —\n// `none`/`full` are spelled the same in both scales, so a plain `data-radius` here would\n// collide and let List silently override the app-wide knob for its whole subtree.\nconst radiusRowClasses: Record<ListRadius, string> = {\n  none: 'group-data-[list-radius=none]/list:first:rounded-t-none group-data-[list-radius=none]/list:last:rounded-b-none',\n  sm: 'group-data-[list-radius=sm]/list:first:rounded-t-sm group-data-[list-radius=sm]/list:last:rounded-b-sm',\n  md: 'group-data-[list-radius=md]/list:first:rounded-t-md group-data-[list-radius=md]/list:last:rounded-b-md',\n  lg: 'group-data-[list-radius=lg]/list:first:rounded-t-lg group-data-[list-radius=lg]/list:last:rounded-b-lg',\n  xl: 'group-data-[list-radius=xl]/list:first:rounded-t-xl group-data-[list-radius=xl]/list:last:rounded-b-xl',\n  '2xl':\n    'group-data-[list-radius=2xl]/list:first:rounded-t-2xl group-data-[list-radius=2xl]/list:last:rounded-b-2xl',\n  '3xl':\n    'group-data-[list-radius=3xl]/list:first:rounded-t-3xl group-data-[list-radius=3xl]/list:last:rounded-b-3xl',\n  full: 'group-data-[list-radius=full]/list:first:rounded-t-full group-data-[list-radius=full]/list:last:rounded-b-full',\n}\n\n// Fill and border colour depend on variant *and* colour together, so they live on\n// data-look (see the comment on `look` in List, below).\nconst lookClasses = [\n  'group-data-[variant=ambient]/list:border-(--spark-card-border,transparent) group-data-[variant=ambient]/list:bg-(--spark-card-bg,var(--neutral-a3)) group-data-[variant=ambient]/list:[--spark-skeleton-bg:var(--neutral-a5)] group-data-[variant=ambient]/list:[--color-focus-root:var(--spark-card-focus,var(--spark-11))]',\n  'group-data-[look=soft]/list:bg-gray-3 dark:group-data-[look=soft]/list:bg-gray-a3',\n  // arbitrary-var form, not the bg-spark-a3 utility: identical colour, but avoids a\n  // literal substring collision with the unconditional selection/hover tint below,\n  // which a couple of tests distinguish with a plain className.includes check.\n  'group-data-[look=soft-accent]/list:bg-(--spark-a3)',\n  'group-data-[look=surface]/list:border-gray-a6 group-data-[look=surface]/list:bg-gray-3 dark:group-data-[look=surface]/list:bg-gray-a3',\n  'group-data-[look=surface-accent]/list:border-spark-a6 group-data-[look=surface-accent]/list:bg-(--spark-surface)',\n  'group-data-[look=outline]/list:border-gray-a6',\n  'group-data-[look=outline-accent]/list:border-spark-a6',\n  'group-data-[look=solid]/list:bg-gray-1',\n  'group-data-[look=solid-accent]/list:bg-spark-9',\n]\n// The look fills out-specify a plain bg utility, so a selected row with a detail keeps\n// only the borders.\nconst borderLookClasses = [\n  'group-data-[variant=ambient]/list:border-(--spark-card-border,transparent)',\n  'group-data-[look=surface]/list:border-gray-a6',\n  'group-data-[look=surface-accent]/list:border-spark-a6',\n  'group-data-[look=outline]/list:border-gray-a6',\n  'group-data-[look=outline-accent]/list:border-spark-a6',\n]\n\n// ListItem publishes `recent` so ListItemTitle can render the inline recency dot; the\n// column context lets the title show it only on the primary (start) column, never the\n// value column of a two-column row.\nconst ListItemContext = React.createContext<{ recent: boolean }>({\n  recent: false,\n})\nconst ListItemColumnContext = React.createContext<{ isEnd: boolean }>({\n  isEnd: false,\n})\n\ninterface ListProps extends React.ComponentProps<'ul'> {\n  /**\n   * A prop, not the ambient `data-style` knob — that would cascade into row content.\n   * `ambient` follows the app-level `[data-card-variant]` knob, like an unset Card `variant`.\n   */\n  variant?: ListVariant\n  /** Chrome palette. `neutral` (default) tracks the app neutral; `accent` tints with the brand accent. */\n  color?: SparkCardColor\n  /** Corner radius, as a named step. Unset → `lg`, today's fixed behaviour. */\n  radius?: ListRadius\n  /** How many `--spark-layout-gap` units apart each row sits (`soft`/`solid`/`ghost`, or `ambient` under those knobs). */\n  gap?: number\n}\n\nfunction List({\n  className,\n  variant = 'soft',\n  color,\n  radius = 'lg',\n  gap = 0.5,\n  style,\n  ...props\n}: ListProps) {\n  // Fill/border-colour needs BOTH axes at once (e.g. \"soft, tinted with accent\"), which a\n  // single group-data selector can't express and chaining two on the same named group\n  // can't either (that generates a descendant match between two *different* ancestors,\n  // not one ancestor bearing both attributes). Resolving the pair to one value up front\n  // sidesteps it entirely — see the `data-look` selectors on ListItem below.\n  const look = color === 'accent' ? `${variant}-accent` : variant\n  return (\n    <ul\n      // role=list keeps list semantics even under list-style:none (Safari drops them).\n      role=\"list\"\n      data-slot=\"list\"\n      // group/list + data-variant drive every item's per-variant chrome (below).\n      data-variant={variant}\n      data-look={look}\n      data-card-color={variant === 'ambient' ? color : undefined}\n      data-list-radius={radius}\n      className={cn(\n        'group/list m-0 list-none p-0',\n        // soft/solid = separate rows → stack with a small gap (the gap IS the divider).\n        // ghost shares that same gap for spacing but no fill/border (see ListItem's\n        // chrome block, which has no ghost selector). surface/outline glue rows into one\n        // panel with no gap at all.\n        'data-[variant=soft]:flex data-[variant=soft]:flex-col data-[variant=soft]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5))]',\n        'data-[variant=solid]:flex data-[variant=solid]:flex-col data-[variant=solid]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5))]',\n        // ambient gaps like the knob's own List variant: --spark-card-list-gapped is 0 for surface/outline.\n        'data-[variant=ambient]:flex data-[variant=ambient]:flex-col data-[variant=ambient]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5)*var(--spark-card-list-gapped,1))]',\n        'data-[variant=ghost]:flex data-[variant=ghost]:flex-col data-[variant=ghost]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5))]',\n        className,\n      )}\n      style={\n        {\n          '--list-gap-steps': gap,\n          // solid's fill inverts far enough that the row's own ink must invert with it\n          // (unlike soft/surface/outline's translucent tints, where the default ink\n          // stays legible regardless of colour) — matches Card's own solid recipe,\n          // where fg and fg-muted both collapse to the one contrast-guaranteed step.\n          ...(variant === 'ambient' && {\n            '--list-item-fg': 'var(--spark-card-fg,var(--neutral-12))',\n            '--list-item-fg-muted':\n              'var(--spark-card-fg-muted,var(--neutral-11))',\n          }),\n          ...(variant === 'solid' && {\n            '--list-item-fg':\n              color === 'accent'\n                ? 'var(--spark-contrast)'\n                : 'var(--neutral-12)',\n            '--list-item-fg-muted':\n              color === 'accent'\n                ? 'var(--spark-contrast)'\n                : 'var(--neutral-12)',\n          }),\n          ...style,\n        } as React.CSSProperties\n      }\n      {...props}\n    />\n  )\n}\n\ninterface ListItemProps extends React.ComponentProps<'li'> {\n  /** The \"recently changed\" accent dot. */\n  recent?: boolean\n  /** Persistent accent-tint (e.g. the active document). */\n  selected?: boolean\n  /** Loading placeholder (Figma `skeleton=true`). */\n  skeleton?: boolean\n  /**\n   * Base UI polymorphism for the inner row. Pass `<a href/>` or `<button/>` to make\n   * the row interactive (accent-on-hover/focus, cursor, focus ring). Omit → static row.\n   */\n  render?: useRender.RenderProp\n}\n\nfunction splitListItemChildren(\n  children: React.ReactNode,\n  render: ListItemProps['render'],\n  skeleton: boolean | undefined,\n) {\n  if (skeleton) return {}\n  const childArray = React.Children.toArray(children)\n  // Only a ListItemLeading actually marked `interactive` (a Checkbox/Radio/Button) needs\n  // to move outside `render`'s element, and only when `render` is literally an <a>/\n  // <button> — nesting a focusable control inside another interactive element is invalid\n  // HTML and double-fires clicks. A `render` of anything else (a `<Card/>`, say) has no\n  // such conflict: it isn't natively interactive itself, so a control inside it is valid,\n  // unduplicated HTML, and hoisting would only pull the control outside whatever that\n  // element paints (its fill, border, rounded corner) for no reason. A plain icon\n  // (interactive unset) is the same story from the other side — either way, Leading stays\n  // inside the row by default, so the whole visual row remains one click/tap target.\n  const rendersAnchorOrButton =\n    React.isValidElement(render) &&\n    (render.type === 'a' || render.type === 'button')\n  const leadingChild = childArray.find(\n    (child): child is React.ReactElement<ListItemLeadingProps> =>\n      React.isValidElement(child) && child.type === ListItemLeading,\n  )\n  const leading =\n    rendersAnchorOrButton && leadingChild?.props.interactive\n      ? leadingChild\n      : undefined\n  // Detail always sits outside the row, so it may hold its own controls and never joins\n  // the row's link/button.\n  const detail = childArray.find(\n    (child): child is React.ReactElement<ListItemDetailProps> =>\n      React.isValidElement(child) && child.type === ListItemDetail,\n  )\n  return {\n    leading,\n    detail,\n    rowChildren: childArray.filter(\n      (child) => child !== leading && child !== detail,\n    ),\n  }\n}\n\nfunction itemClassName({\n  className,\n  hoistLeading,\n  hasDetail,\n  flushDetail,\n  isSelected,\n  interactive,\n}: {\n  className: string | undefined\n  hoistLeading: boolean\n  hasDetail: boolean\n  flushDetail: boolean\n  isSelected: boolean | undefined\n  interactive: boolean\n}) {\n  const detailSelected = hasDetail && isSelected\n  return cn(\n    'relative has-focus-visible:z-10',\n    !hoistLeading && detailSelected && 'bg-spark-a3',\n    hoistLeading && [\n      // a flush detail must reach the item's left edge, so the inset moves to the leading.\n      flushDetail\n        ? 'flex min-w-0 items-center gap-4 *:data-[slot=list-item-leading]:pl-4'\n        : 'flex min-w-0 items-center gap-4 pl-4',\n      // a detail wraps onto its own full-width line below the leading + row.\n      hasDetail && 'flex-wrap gap-y-0 *:data-[slot=list-item-detail]:pl-0',\n      isSelected && 'bg-spark-a3',\n      interactive && [\n        // neutral at rest → subtle accent tint on hover/focus (the affordance goes\n        // accent too, in ListItemTrailing; title + leading stay neutral). The click\n        // target itself is `row`, so focus-visible (unlike hover) has to be read off\n        // a descendant via has() — it never lands on this <li> directly.\n        'cursor-pointer',\n        // hovering the detail must not suggest it navigates.\n        hasDetail\n          ? 'has-focus-visible:bg-spark-a3 has-[[data-slot=list-item-row]:hover]:bg-spark-a3'\n          : 'hover:bg-spark-a3 has-focus-visible:bg-spark-a3',\n        'has-focus-visible:ring-2 has-focus-visible:ring-offset-2',\n      ],\n    ],\n    // soft/solid rows sit in a gapped stack, not a glued panel, but still read as one\n    // rounded group: only the first/last row round the outer corners. surface/\n    // outline glue rows into one bordered panel instead — border SIDES are variant-\n    // only (no colour axis), so they stay on data-variant; fill and border COLOUR\n    // live on data-look instead (lookClasses, above).\n    'group-data-[variant=surface]/list:border-x group-data-[variant=surface]/list:border-t group-data-[variant=surface]/list:last:border-b',\n    'group-data-[variant=outline]/list:border-x group-data-[variant=outline]/list:border-t group-data-[variant=outline]/list:last:border-b',\n    // ambient glues like surface/outline under a bordered knob; a borderless knob's width is 0, leaving only the gap.\n    'group-data-[variant=ambient]/list:border-x-(length:--spark-card-border-width,0px) group-data-[variant=ambient]/list:border-t-(length:--spark-card-border-width,0px) group-data-[variant=ambient]/list:last:border-b-(length:--spark-card-border-width,0px)',\n    detailSelected ? borderLookClasses : lookClasses,\n    Object.values(radiusRowClasses),\n    className,\n  )\n}\n\nfunction ListItem({\n  className,\n  children,\n  recent,\n  selected,\n  skeleton,\n  render,\n  ...props\n}: ListItemProps) {\n  // Skeleton rows are decorative placeholders — never render as a real <a>/<button>. An\n  // aria-hidden anchor would still be focusable (WCAG 4.1.2), so skeleton forces a plain,\n  // non-interactive <div> regardless of `render`.\n  const interactive = !skeleton && render != null\n\n  const recentCtx = React.useMemo(() => ({ recent: recent ?? false }), [recent])\n\n  const { leading, detail, rowChildren } = splitListItemChildren(\n    children,\n    render,\n    skeleton,\n  )\n  const hoistLeading = leading != null\n  // With a detail the <li> is the visual item, so selection must tint it, not just the row.\n  const selectOnItem = hoistLeading || detail != null\n  const isSelected = !skeleton && selected\n\n  const row = useRender({\n    defaultTagName: 'div',\n    render: skeleton ? undefined : render,\n    props: {\n      'data-slot': 'list-item-row',\n      // skeleton is a decorative placeholder → keep it out of the a11y tree.\n      'aria-hidden': skeleton ? true : undefined,\n      className: cn(\n        // row layout from Figma 2217-1667; min-h is a HARD 44px floor (WCAG 2.5.5),\n        // py/gap/text still scale past it via the spacing/scaling knobs. no-underline\n        // resets the default <a> decoration when the row renders as a link.\n        'flex min-h-[2.75rem] items-center gap-4 py-3 text-left no-underline',\n        hoistLeading\n          ? 'min-w-0 flex-1 pr-4'\n          : detail\n            ? 'w-full rounded-t-[inherit] px-4'\n            : 'w-full rounded-[inherit] px-4',\n        // not hoisted → this row IS the whole visual item (no outer <li> chrome), so\n        // selection tint lives here, same as a row with no leading slot at all.\n        !selectOnItem && isSelected && 'bg-spark-a3',\n        interactive && [\n          'group/row cursor-pointer transition-colors duration-150 motion-reduce:transition-none',\n          'disabled:pointer-events-none disabled:opacity-50',\n          hoistLeading\n            ? // the custom focus ring is drawn on the outer <li> (has-focus-visible,\n              // below) so it wraps the leading control too — but the browser's own\n              // default outline still targets whichever element actually has focus,\n              // which is this one, so it has to be suppressed here specifically.\n              'focus-visible:outline-hidden'\n            : [\n                'hover:bg-spark-a3 focus-visible:bg-spark-a3',\n                'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n              ],\n        ],\n      ),\n      children: skeleton ? <ListItemSkeleton /> : rowChildren,\n    },\n  })\n\n  return (\n    <li\n      data-slot=\"list-item\"\n      className={itemClassName({\n        className,\n        hoistLeading,\n        hasDetail: detail != null,\n        flushDetail: Boolean(detail?.props.flush),\n        isSelected,\n        interactive,\n      })}\n      {...props}\n    >\n      <ListItemContext.Provider value={recentCtx}>\n        {leading}\n        {row}\n        {detail}\n      </ListItemContext.Provider>\n    </li>\n  )\n}\n\ninterface ListItemDetailProps extends React.ComponentProps<'div'> {\n  /** Drops the padding so the detail runs edge to edge and to the item's bottom, clipped to its rounded corners. */\n  flush?: boolean\n}\n\nfunction ListItemDetail({ className, flush, ...props }: ListItemDetailProps) {\n  return (\n    <div\n      data-slot=\"list-item-detail\"\n      className={cn(\n        'w-full min-w-0 cursor-auto',\n        // clips itself, not the <li>, so the row's focus ring is never cut off.\n        flush ? 'overflow-hidden rounded-b-[inherit]' : 'px-4 pb-3',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ListItemSkeleton() {\n  // Compose the shared Skeleton primitive so the placeholder matches every other skeleton\n  // (token + radius + animation + motion-reduce).\n  return (\n    <>\n      <Skeleton className=\"size-10 shrink-0 rounded-full\" />\n      <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <Skeleton className=\"h-3.5 w-1/3\" />\n        <Skeleton className=\"h-3.5 w-2/3\" />\n      </div>\n      <div className=\"flex min-w-0 flex-1 flex-col items-end gap-2\">\n        <Skeleton className=\"h-3.5 w-1/4\" />\n        <Skeleton className=\"h-3.5 w-1/2\" />\n      </div>\n    </>\n  )\n}\n\ninterface ListItemLeadingProps extends React.ComponentProps<'div'> {\n  /**\n   * Set when this slot holds a focusable control (Checkbox, Radio, Button). ListItem\n   * then hoists it outside `render`'s element — nesting a real control inside the row's\n   * own <a>/<button> is invalid HTML and double-fires clicks. Leave unset for decorative\n   * content (an icon): it stays inside the row, so the whole visual row is one\n   * click/tap target, same as a row with no leading slot at all.\n   */\n  interactive?: boolean\n}\n\nfunction ListItemLeading({\n  className,\n  interactive: _interactive,\n  ...props\n}: ListItemLeadingProps) {\n  return (\n    <div\n      data-slot=\"list-item-leading\"\n      className={cn('flex shrink-0 items-center', className)}\n      {...props}\n    />\n  )\n}\n\ninterface ListItemContentProps extends React.ComponentProps<'div'> {\n  /** `end` right-aligns the column (the value column). */\n  align?: 'start' | 'end'\n}\n\nfunction ListItemContent({\n  className,\n  align = 'start',\n  ...props\n}: ListItemContentProps) {\n  const columnCtx = React.useMemo(() => ({ isEnd: align === 'end' }), [align])\n  return (\n    <ListItemColumnContext.Provider value={columnCtx}>\n      <div\n        data-slot=\"list-item-content\"\n        className={cn(\n          'flex min-w-0 flex-1 flex-col gap-1',\n          align === 'end' ? 'items-end text-right' : 'items-start text-left',\n          className,\n        )}\n        {...props}\n      />\n    </ListItemColumnContext.Provider>\n  )\n}\n\nfunction ListItemPreline({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"list-item-preline\"\n      className={cn(\n        'block w-full truncate text-sm text-(--list-item-fg-muted,var(--neutral-11))',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ninterface ListItemTitleProps extends React.ComponentProps<'span'> {\n  /** `strong` keeps the title bold, e.g. for menu rows; `default` is medium, bold on a `recent` row. */\n  emphasis?: 'default' | 'strong'\n}\n\nfunction ListItemTitle({\n  className,\n  children,\n  emphasis = 'default',\n  ...props\n}: ListItemTitleProps) {\n  const { recent } = React.useContext(ListItemContext)\n  const { isEnd } = React.useContext(ListItemColumnContext)\n  // recency dot sits inline, immediately left of the title (Figma 1310-977) — only on the\n  // primary (start) column, so a two-column value row's value never carries it.\n  const showDot = recent && !isEnd\n\n  // className/{...props} always land on THIS span (the one that truncates), so a caller's\n  // override (e.g. `title`, `line-clamp-2 whitespace-normal`) behaves identically whether\n  // or not the dot renders — only the wrapping structure differs below.\n  const title = (\n    <span\n      data-slot=\"list-item-title\"\n      className={cn(\n        showDot ? 'min-w-0 truncate' : 'block w-full truncate',\n        'text-base text-(--list-item-fg,var(--neutral-12))',\n        recent || emphasis === 'strong' ? 'font-bold' : 'font-medium',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n\n  if (!showDot) {\n    // No dot: stay a plain block so the column's text alignment (e.g. an end column's\n    // text-right) governs the title directly.\n    return title\n  }\n\n  return (\n    <span className=\"flex w-full items-center gap-2\">\n      <span\n        aria-hidden=\"true\"\n        data-slot=\"list-item-indicator\"\n        className=\"size-2 shrink-0 rounded-full bg-spark-9\"\n      />\n      {title}\n    </span>\n  )\n}\n\nconst listItemSublineVariants = cva('block w-full truncate text-sm', {\n  variants: {\n    tone: {\n      neutral: 'text-(--list-item-fg-muted,var(--neutral-11))',\n      success: 'text-success-soft-foreground',\n      error: 'text-error-soft-foreground',\n    },\n  },\n  defaultVariants: { tone: 'neutral' },\n})\n\ninterface ListItemSublineProps extends React.ComponentProps<'span'> {\n  tone?: Extract<Tone, 'neutral' | 'success' | 'error'>\n}\n\nfunction ListItemSubline({ className, tone, ...props }: ListItemSublineProps) {\n  return (\n    <span\n      data-slot=\"list-item-subline\"\n      className={cn(listItemSublineVariants({ tone }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ListItemTrailing({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"list-item-trailing\"\n      className={cn(\n        'flex shrink-0 items-center text-gray-11',\n        // interactive rows tint the affordance accent on hover/focus (group/row is set on\n        // the interactive inner row; absent on static rows, so this simply never fires).\n        // Relies on the child reading currentColor (Spark icons do) — the colour-\n        // independent Icon component hardcodes its own ink and won't pick this up; use\n        // a Spark icon here, not Icon.\n        'transition-colors duration-150 motion-reduce:transition-none',\n        'group-hover/row:text-spark-a11 group-focus-visible/row:text-spark-a11',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  List,\n  ListItem,\n  ListItemContent,\n  ListItemDetail,\n  ListItemLeading,\n  ListItemPreline,\n  ListItemSubline,\n  ListItemTitle,\n  ListItemTrailing,\n}\nexport type {\n  ListProps,\n  ListItemProps,\n  ListItemContentProps,\n  ListItemDetailProps,\n  ListItemLeadingProps,\n  ListItemTitleProps,\n  ListVariant,\n  ListRadius,\n}\n"],"mappings":"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"}

package/dist/components/list.d.cts

@@ -1,21 +1,25 @@
 "use client";
 
-import { n as SparkCardColor, r as SparkCardVariant } from "../theme-types-Bn5E15-P.cjs";
+import { o as SparkCardColor, s as SparkCardVariant } from "../theme-types-CKZzOmSa.cjs";
 import { ContainerRadius } from "../lib/container-chrome.cjs";
+import { Tone } from "../lib/tones.cjs";
 import * as React$1 from "react";
 import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/list.d.ts
-type ListVariant = SparkCardVariant;
+type ListVariant = SparkCardVariant | 'ambient';
 type ListRadius = ContainerRadius;
 interface ListProps extends React$1.ComponentProps<'ul'> {
-  /** A prop, not the ambient `data-style` knob — that would cascade into row content. */
+  /**
+   * A prop, not the ambient `data-style` knob — that would cascade into row content.
+   * `ambient` follows the app-level `[data-card-variant]` knob, like an unset Card `variant`.
+   */
   variant?: ListVariant;
   /** Chrome palette. `neutral` (default) tracks the app neutral; `accent` tints with the brand accent. */
   color?: SparkCardColor;
   /** Corner radius, as a named step. Unset → `lg`, today's fixed behaviour. */
   radius?: ListRadius;
-  /** How many `--spark-layout-gap` units apart each row sits (`soft`/`solid`/`ghost` only). */
+  /** How many `--spark-layout-gap` units apart each row sits (`soft`/`solid`/`ghost`, or `ambient` under those knobs). */
   gap?: number;
 }
 declare function List({
@@ -96,10 +100,14 @@ declare function ListItemTitle({
   emphasis,
   ...props
 }: ListItemTitleProps): import("react/jsx-runtime").JSX.Element;
+interface ListItemSublineProps extends React$1.ComponentProps<'span'> {
+  tone?: Extract<Tone, 'neutral' | 'success' | 'error'>;
+}
 declare function ListItemSubline({
   className,
+  tone,
   ...props
-}: React$1.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+}: ListItemSublineProps): import("react/jsx-runtime").JSX.Element;
 declare function ListItemTrailing({
   className,
   ...props

package/dist/components/list.d.ts

@@ -1,21 +1,25 @@
 "use client";
 
-import { n as SparkCardColor, r as SparkCardVariant } from "../theme-types-Bn5E15-P.js";
+import { o as SparkCardColor, s as SparkCardVariant } from "../theme-types-CKZzOmSa.js";
 import { ContainerRadius } from "../lib/container-chrome.js";
+import { Tone } from "../lib/tones.js";
 import * as React$1 from "react";
 import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/list.d.ts
-type ListVariant = SparkCardVariant;
+type ListVariant = SparkCardVariant | 'ambient';
 type ListRadius = ContainerRadius;
 interface ListProps extends React$1.ComponentProps<'ul'> {
-  /** A prop, not the ambient `data-style` knob — that would cascade into row content. */
+  /**
+   * A prop, not the ambient `data-style` knob — that would cascade into row content.
+   * `ambient` follows the app-level `[data-card-variant]` knob, like an unset Card `variant`.
+   */
   variant?: ListVariant;
   /** Chrome palette. `neutral` (default) tracks the app neutral; `accent` tints with the brand accent. */
   color?: SparkCardColor;
   /** Corner radius, as a named step. Unset → `lg`, today's fixed behaviour. */
   radius?: ListRadius;
-  /** How many `--spark-layout-gap` units apart each row sits (`soft`/`solid`/`ghost` only). */
+  /** How many `--spark-layout-gap` units apart each row sits (`soft`/`solid`/`ghost`, or `ambient` under those knobs). */
   gap?: number;
 }
 declare function List({
@@ -96,10 +100,14 @@ declare function ListItemTitle({
   emphasis,
   ...props
 }: ListItemTitleProps): import("react/jsx-runtime").JSX.Element;
+interface ListItemSublineProps extends React$1.ComponentProps<'span'> {
+  tone?: Extract<Tone, 'neutral' | 'success' | 'error'>;
+}
 declare function ListItemSubline({
   className,
+  tone,
   ...props
-}: React$1.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+}: ListItemSublineProps): import("react/jsx-runtime").JSX.Element;
 declare function ListItemTrailing({
   className,
   ...props

package/dist/components/list.js

@@ -3,6 +3,7 @@ import { cn } from "../utils/cn.js";
 import { Skeleton } from "./skeleton.js";
 import * as React$1 from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/list.tsx
 const radiusRowClasses = {
@@ -16,6 +17,7 @@ const radiusRowClasses = {
 	full: "group-data-[list-radius=full]/list:first:rounded-t-full group-data-[list-radius=full]/list:last:rounded-b-full"
 };
 const lookClasses = [
+	"group-data-[variant=ambient]/list:border-(--spark-card-border,transparent) group-data-[variant=ambient]/list:bg-(--spark-card-bg,var(--neutral-a3)) group-data-[variant=ambient]/list:[--spark-skeleton-bg:var(--neutral-a5)] group-data-[variant=ambient]/list:[--color-focus-root:var(--spark-card-focus,var(--spark-11))]",
 	"group-data-[look=soft]/list:bg-gray-3 dark:group-data-[look=soft]/list:bg-gray-a3",
 	"group-data-[look=soft-accent]/list:bg-(--spark-a3)",
 	"group-data-[look=surface]/list:border-gray-a6 group-data-[look=surface]/list:bg-gray-3 dark:group-data-[look=surface]/list:bg-gray-a3",
@@ -26,6 +28,7 @@ const lookClasses = [
 	"group-data-[look=solid-accent]/list:bg-spark-9"
 ];
 const borderLookClasses = [
+	"group-data-[variant=ambient]/list:border-(--spark-card-border,transparent)",
 	"group-data-[look=surface]/list:border-gray-a6",
 	"group-data-[look=surface-accent]/list:border-spark-a6",
 	"group-data-[look=outline]/list:border-gray-a6",
@@ -33,16 +36,21 @@ const borderLookClasses = [
 ];
 const ListItemContext = React$1.createContext({ recent: false });
 const ListItemColumnContext = React$1.createContext({ isEnd: false });
-function List({ className, variant = "soft", color = "neutral", radius = "lg", gap = .5, style, ...props }) {
+function List({ className, variant = "soft", color, radius = "lg", gap = .5, style, ...props }) {
 	return /* @__PURE__ */ jsx("ul", {
 		role: "list",
 		"data-slot": "list",
 		"data-variant": variant,
 		"data-look": color === "accent" ? `${variant}-accent` : variant,
+		"data-card-color": variant === "ambient" ? color : void 0,
 		"data-list-radius": radius,
-		className: cn("group/list m-0 list-none p-0", "data-[variant=soft]:flex data-[variant=soft]:flex-col data-[variant=soft]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5))]", "data-[variant=solid]:flex data-[variant=solid]:flex-col data-[variant=solid]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5))]", "data-[variant=ghost]:flex data-[variant=ghost]:flex-col data-[variant=ghost]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5))]", className),
+		className: cn("group/list m-0 list-none p-0", "data-[variant=soft]:flex data-[variant=soft]:flex-col data-[variant=soft]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5))]", "data-[variant=solid]:flex data-[variant=solid]:flex-col data-[variant=solid]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5))]", "data-[variant=ambient]:flex data-[variant=ambient]:flex-col data-[variant=ambient]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5)*var(--spark-card-list-gapped,1))]", "data-[variant=ghost]:flex data-[variant=ghost]:flex-col data-[variant=ghost]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5))]", className),
 		style: {
 			"--list-gap-steps": gap,
+			...variant === "ambient" && {
+				"--list-item-fg": "var(--spark-card-fg,var(--neutral-12))",
+				"--list-item-fg-muted": "var(--spark-card-fg-muted,var(--neutral-11))"
+			},
 			...variant === "solid" && {
 				"--list-item-fg": color === "accent" ? "var(--spark-contrast)" : "var(--neutral-12)",
 				"--list-item-fg-muted": color === "accent" ? "var(--spark-contrast)" : "var(--neutral-12)"
@@ -76,7 +84,7 @@ function itemClassName({ className, hoistLeading, hasDetail, flushDetail, isSele
 			hasDetail ? "has-focus-visible:bg-spark-a3 has-[[data-slot=list-item-row]:hover]:bg-spark-a3" : "hover:bg-spark-a3 has-focus-visible:bg-spark-a3",
 			"has-focus-visible:ring-2 has-focus-visible:ring-offset-2"
 		]
-	], "group-data-[variant=surface]/list:border-x group-data-[variant=surface]/list:border-t group-data-[variant=surface]/list:last:border-b", "group-data-[variant=outline]/list:border-x group-data-[variant=outline]/list:border-t group-data-[variant=outline]/list:last:border-b", detailSelected ? borderLookClasses : lookClasses, Object.values(radiusRowClasses), className);
+	], "group-data-[variant=surface]/list:border-x group-data-[variant=surface]/list:border-t group-data-[variant=surface]/list:last:border-b", "group-data-[variant=outline]/list:border-x group-data-[variant=outline]/list:border-t group-data-[variant=outline]/list:last:border-b", "group-data-[variant=ambient]/list:border-x-(length:--spark-card-border-width,0px) group-data-[variant=ambient]/list:border-t-(length:--spark-card-border-width,0px) group-data-[variant=ambient]/list:last:border-b-(length:--spark-card-border-width,0px)", detailSelected ? borderLookClasses : lookClasses, Object.values(radiusRowClasses), className);
 }
 function ListItem({ className, children, recent, selected, skeleton, render, ...props }) {
 	const interactive = !skeleton && render != null;
@@ -185,10 +193,18 @@ function ListItemTitle({ className, children, emphasis = "default", ...props })
 		}), title]
 	});
 }
-function ListItemSubline({ className, ...props }) {
+const listItemSublineVariants = cva("block w-full truncate text-sm", {
+	variants: { tone: {
+		neutral: "text-(--list-item-fg-muted,var(--neutral-11))",
+		success: "text-success-soft-foreground",
+		error: "text-error-soft-foreground"
+	} },
+	defaultVariants: { tone: "neutral" }
+});
+function ListItemSubline({ className, tone, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "list-item-subline",
-		className: cn("block w-full truncate text-sm text-(--list-item-fg-muted,var(--neutral-11))", className),
+		className: cn(listItemSublineVariants({ tone }), className),
 		...props
 	});
 }

package/dist/components/list.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.js","names":["React"],"sources":["../../src/components/list.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport type { ContainerRadius } from '../lib/container-chrome'\nimport type { SparkCardColor, SparkCardVariant } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\nimport { Skeleton } from './skeleton'\n\ntype ListVariant = SparkCardVariant\ntype ListRadius = ContainerRadius\n\n// Rounds only the first/last row of a run, regardless of variant — harmless on ghost\n// (nothing painted to clip). Keyed on `data-list-radius` alone: unlike fill (below),\n// rounding doesn't depend on variant/color, so no compound group-data selector is needed.\n// Named `list-radius`, not `radius`: the global Roundness knob (Theme) also writes a\n// bare `data-radius` via an unscoped `[data-radius=...]` selector in spark-default.css —\n// `none`/`full` are spelled the same in both scales, so a plain `data-radius` here would\n// collide and let List silently override the app-wide knob for its whole subtree.\nconst radiusRowClasses: Record<ListRadius, string> = {\n  none: 'group-data-[list-radius=none]/list:first:rounded-t-none group-data-[list-radius=none]/list:last:rounded-b-none',\n  sm: 'group-data-[list-radius=sm]/list:first:rounded-t-sm group-data-[list-radius=sm]/list:last:rounded-b-sm',\n  md: 'group-data-[list-radius=md]/list:first:rounded-t-md group-data-[list-radius=md]/list:last:rounded-b-md',\n  lg: 'group-data-[list-radius=lg]/list:first:rounded-t-lg group-data-[list-radius=lg]/list:last:rounded-b-lg',\n  xl: 'group-data-[list-radius=xl]/list:first:rounded-t-xl group-data-[list-radius=xl]/list:last:rounded-b-xl',\n  '2xl':\n    'group-data-[list-radius=2xl]/list:first:rounded-t-2xl group-data-[list-radius=2xl]/list:last:rounded-b-2xl',\n  '3xl':\n    'group-data-[list-radius=3xl]/list:first:rounded-t-3xl group-data-[list-radius=3xl]/list:last:rounded-b-3xl',\n  full: 'group-data-[list-radius=full]/list:first:rounded-t-full group-data-[list-radius=full]/list:last:rounded-b-full',\n}\n\n// Fill and border colour depend on variant *and* colour together, so they live on\n// data-look (see the comment on `look` in List, below).\nconst lookClasses = [\n  'group-data-[look=soft]/list:bg-gray-3 dark:group-data-[look=soft]/list:bg-gray-a3',\n  // arbitrary-var form, not the bg-spark-a3 utility: identical colour, but avoids a\n  // literal substring collision with the unconditional selection/hover tint below,\n  // which a couple of tests distinguish with a plain className.includes check.\n  'group-data-[look=soft-accent]/list:bg-(--spark-a3)',\n  'group-data-[look=surface]/list:border-gray-a6 group-data-[look=surface]/list:bg-gray-3 dark:group-data-[look=surface]/list:bg-gray-a3',\n  'group-data-[look=surface-accent]/list:border-spark-a6 group-data-[look=surface-accent]/list:bg-(--spark-surface)',\n  'group-data-[look=outline]/list:border-gray-a6',\n  'group-data-[look=outline-accent]/list:border-spark-a6',\n  'group-data-[look=solid]/list:bg-gray-1',\n  'group-data-[look=solid-accent]/list:bg-spark-9',\n]\n// The look fills out-specify a plain bg utility, so a selected row with a detail keeps\n// only the borders.\nconst borderLookClasses = [\n  'group-data-[look=surface]/list:border-gray-a6',\n  'group-data-[look=surface-accent]/list:border-spark-a6',\n  'group-data-[look=outline]/list:border-gray-a6',\n  'group-data-[look=outline-accent]/list:border-spark-a6',\n]\n\n// ListItem publishes `recent` so ListItemTitle can render the inline recency dot; the\n// column context lets the title show it only on the primary (start) column, never the\n// value column of a two-column row.\nconst ListItemContext = React.createContext<{ recent: boolean }>({\n  recent: false,\n})\nconst ListItemColumnContext = React.createContext<{ isEnd: boolean }>({\n  isEnd: false,\n})\n\ninterface ListProps extends React.ComponentProps<'ul'> {\n  /** A prop, not the ambient `data-style` knob — that would cascade into row content. */\n  variant?: ListVariant\n  /** Chrome palette. `neutral` (default) tracks the app neutral; `accent` tints with the brand accent. */\n  color?: SparkCardColor\n  /** Corner radius, as a named step. Unset → `lg`, today's fixed behaviour. */\n  radius?: ListRadius\n  /** How many `--spark-layout-gap` units apart each row sits (`soft`/`solid`/`ghost` only). */\n  gap?: number\n}\n\nfunction List({\n  className,\n  variant = 'soft',\n  color = 'neutral',\n  radius = 'lg',\n  gap = 0.5,\n  style,\n  ...props\n}: ListProps) {\n  // Fill/border-colour needs BOTH axes at once (e.g. \"soft, tinted with accent\"), which a\n  // single group-data selector can't express and chaining two on the same named group\n  // can't either (that generates a descendant match between two *different* ancestors,\n  // not one ancestor bearing both attributes). Resolving the pair to one value up front\n  // sidesteps it entirely — see the `data-look` selectors on ListItem below.\n  const look = color === 'accent' ? `${variant}-accent` : variant\n  return (\n    <ul\n      // role=list keeps list semantics even under list-style:none (Safari drops them).\n      role=\"list\"\n      data-slot=\"list\"\n      // group/list + data-variant drive every item's per-variant chrome (below).\n      data-variant={variant}\n      data-look={look}\n      data-list-radius={radius}\n      className={cn(\n        'group/list m-0 list-none p-0',\n        // soft/solid = separate rows → stack with a small gap (the gap IS the divider).\n        // ghost shares that same gap for spacing but no fill/border (see ListItem's\n        // chrome block, which has no ghost selector). surface/outline glue rows into one\n        // panel with no gap at all.\n        'data-[variant=soft]:flex data-[variant=soft]:flex-col data-[variant=soft]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5))]',\n        'data-[variant=solid]:flex data-[variant=solid]:flex-col data-[variant=solid]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5))]',\n        'data-[variant=ghost]:flex data-[variant=ghost]:flex-col data-[variant=ghost]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5))]',\n        className,\n      )}\n      style={\n        {\n          '--list-gap-steps': gap,\n          // solid's fill inverts far enough that the row's own ink must invert with it\n          // (unlike soft/surface/outline's translucent tints, where the default ink\n          // stays legible regardless of colour) — matches Card's own solid recipe,\n          // where fg and fg-muted both collapse to the one contrast-guaranteed step.\n          ...(variant === 'solid' && {\n            '--list-item-fg':\n              color === 'accent'\n                ? 'var(--spark-contrast)'\n                : 'var(--neutral-12)',\n            '--list-item-fg-muted':\n              color === 'accent'\n                ? 'var(--spark-contrast)'\n                : 'var(--neutral-12)',\n          }),\n          ...style,\n        } as React.CSSProperties\n      }\n      {...props}\n    />\n  )\n}\n\ninterface ListItemProps extends React.ComponentProps<'li'> {\n  /** The \"recently changed\" accent dot. */\n  recent?: boolean\n  /** Persistent accent-tint (e.g. the active document). */\n  selected?: boolean\n  /** Loading placeholder (Figma `skeleton=true`). */\n  skeleton?: boolean\n  /**\n   * Base UI polymorphism for the inner row. Pass `<a href/>` or `<button/>` to make\n   * the row interactive (accent-on-hover/focus, cursor, focus ring). Omit → static row.\n   */\n  render?: useRender.RenderProp\n}\n\nfunction splitListItemChildren(\n  children: React.ReactNode,\n  render: ListItemProps['render'],\n  skeleton: boolean | undefined,\n) {\n  if (skeleton) return {}\n  const childArray = React.Children.toArray(children)\n  // Only a ListItemLeading actually marked `interactive` (a Checkbox/Radio/Button) needs\n  // to move outside `render`'s element, and only when `render` is literally an <a>/\n  // <button> — nesting a focusable control inside another interactive element is invalid\n  // HTML and double-fires clicks. A `render` of anything else (a `<Card/>`, say) has no\n  // such conflict: it isn't natively interactive itself, so a control inside it is valid,\n  // unduplicated HTML, and hoisting would only pull the control outside whatever that\n  // element paints (its fill, border, rounded corner) for no reason. A plain icon\n  // (interactive unset) is the same story from the other side — either way, Leading stays\n  // inside the row by default, so the whole visual row remains one click/tap target.\n  const rendersAnchorOrButton =\n    React.isValidElement(render) &&\n    (render.type === 'a' || render.type === 'button')\n  const leadingChild = childArray.find(\n    (child): child is React.ReactElement<ListItemLeadingProps> =>\n      React.isValidElement(child) && child.type === ListItemLeading,\n  )\n  const leading =\n    rendersAnchorOrButton && leadingChild?.props.interactive\n      ? leadingChild\n      : undefined\n  // Detail always sits outside the row, so it may hold its own controls and never joins\n  // the row's link/button.\n  const detail = childArray.find(\n    (child): child is React.ReactElement<ListItemDetailProps> =>\n      React.isValidElement(child) && child.type === ListItemDetail,\n  )\n  return {\n    leading,\n    detail,\n    rowChildren: childArray.filter(\n      (child) => child !== leading && child !== detail,\n    ),\n  }\n}\n\nfunction itemClassName({\n  className,\n  hoistLeading,\n  hasDetail,\n  flushDetail,\n  isSelected,\n  interactive,\n}: {\n  className: string | undefined\n  hoistLeading: boolean\n  hasDetail: boolean\n  flushDetail: boolean\n  isSelected: boolean | undefined\n  interactive: boolean\n}) {\n  const detailSelected = hasDetail && isSelected\n  return cn(\n    'relative has-focus-visible:z-10',\n    !hoistLeading && detailSelected && 'bg-spark-a3',\n    hoistLeading && [\n      // a flush detail must reach the item's left edge, so the inset moves to the leading.\n      flushDetail\n        ? 'flex min-w-0 items-center gap-4 *:data-[slot=list-item-leading]:pl-4'\n        : 'flex min-w-0 items-center gap-4 pl-4',\n      // a detail wraps onto its own full-width line below the leading + row.\n      hasDetail && 'flex-wrap gap-y-0 *:data-[slot=list-item-detail]:pl-0',\n      isSelected && 'bg-spark-a3',\n      interactive && [\n        // neutral at rest → subtle accent tint on hover/focus (the affordance goes\n        // accent too, in ListItemTrailing; title + leading stay neutral). The click\n        // target itself is `row`, so focus-visible (unlike hover) has to be read off\n        // a descendant via has() — it never lands on this <li> directly.\n        'cursor-pointer',\n        // hovering the detail must not suggest it navigates.\n        hasDetail\n          ? 'has-focus-visible:bg-spark-a3 has-[[data-slot=list-item-row]:hover]:bg-spark-a3'\n          : 'hover:bg-spark-a3 has-focus-visible:bg-spark-a3',\n        'has-focus-visible:ring-2 has-focus-visible:ring-offset-2',\n      ],\n    ],\n    // soft/solid rows sit in a gapped stack, not a glued panel, but still read as one\n    // rounded group: only the first/last row round the outer corners. surface/\n    // outline glue rows into one bordered panel instead — border SIDES are variant-\n    // only (no colour axis), so they stay on data-variant; fill and border COLOUR\n    // live on data-look instead (lookClasses, above).\n    'group-data-[variant=surface]/list:border-x group-data-[variant=surface]/list:border-t group-data-[variant=surface]/list:last:border-b',\n    'group-data-[variant=outline]/list:border-x group-data-[variant=outline]/list:border-t group-data-[variant=outline]/list:last:border-b',\n    detailSelected ? borderLookClasses : lookClasses,\n    Object.values(radiusRowClasses),\n    className,\n  )\n}\n\nfunction ListItem({\n  className,\n  children,\n  recent,\n  selected,\n  skeleton,\n  render,\n  ...props\n}: ListItemProps) {\n  // Skeleton rows are decorative placeholders — never render as a real <a>/<button>. An\n  // aria-hidden anchor would still be focusable (WCAG 4.1.2), so skeleton forces a plain,\n  // non-interactive <div> regardless of `render`.\n  const interactive = !skeleton && render != null\n\n  const recentCtx = React.useMemo(() => ({ recent: recent ?? false }), [recent])\n\n  const { leading, detail, rowChildren } = splitListItemChildren(\n    children,\n    render,\n    skeleton,\n  )\n  const hoistLeading = leading != null\n  // With a detail the <li> is the visual item, so selection must tint it, not just the row.\n  const selectOnItem = hoistLeading || detail != null\n  const isSelected = !skeleton && selected\n\n  const row = useRender({\n    defaultTagName: 'div',\n    render: skeleton ? undefined : render,\n    props: {\n      'data-slot': 'list-item-row',\n      // skeleton is a decorative placeholder → keep it out of the a11y tree.\n      'aria-hidden': skeleton ? true : undefined,\n      className: cn(\n        // row layout from Figma 2217-1667; min-h is a HARD 44px floor (WCAG 2.5.5),\n        // py/gap/text still scale past it via the spacing/scaling knobs. no-underline\n        // resets the default <a> decoration when the row renders as a link.\n        'flex min-h-[2.75rem] items-center gap-4 py-3 text-left no-underline',\n        hoistLeading\n          ? 'min-w-0 flex-1 pr-4'\n          : detail\n            ? 'w-full rounded-t-[inherit] px-4'\n            : 'w-full rounded-[inherit] px-4',\n        // not hoisted → this row IS the whole visual item (no outer <li> chrome), so\n        // selection tint lives here, same as a row with no leading slot at all.\n        !selectOnItem && isSelected && 'bg-spark-a3',\n        interactive && [\n          'group/row cursor-pointer transition-colors duration-150 motion-reduce:transition-none',\n          'disabled:pointer-events-none disabled:opacity-50',\n          hoistLeading\n            ? // the custom focus ring is drawn on the outer <li> (has-focus-visible,\n              // below) so it wraps the leading control too — but the browser's own\n              // default outline still targets whichever element actually has focus,\n              // which is this one, so it has to be suppressed here specifically.\n              'focus-visible:outline-hidden'\n            : [\n                'hover:bg-spark-a3 focus-visible:bg-spark-a3',\n                'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n              ],\n        ],\n      ),\n      children: skeleton ? <ListItemSkeleton /> : rowChildren,\n    },\n  })\n\n  return (\n    <li\n      data-slot=\"list-item\"\n      className={itemClassName({\n        className,\n        hoistLeading,\n        hasDetail: detail != null,\n        flushDetail: Boolean(detail?.props.flush),\n        isSelected,\n        interactive,\n      })}\n      {...props}\n    >\n      <ListItemContext.Provider value={recentCtx}>\n        {leading}\n        {row}\n        {detail}\n      </ListItemContext.Provider>\n    </li>\n  )\n}\n\ninterface ListItemDetailProps extends React.ComponentProps<'div'> {\n  /** Drops the padding so the detail runs edge to edge and to the item's bottom, clipped to its rounded corners. */\n  flush?: boolean\n}\n\nfunction ListItemDetail({ className, flush, ...props }: ListItemDetailProps) {\n  return (\n    <div\n      data-slot=\"list-item-detail\"\n      className={cn(\n        'w-full min-w-0 cursor-auto',\n        // clips itself, not the <li>, so the row's focus ring is never cut off.\n        flush ? 'overflow-hidden rounded-b-[inherit]' : 'px-4 pb-3',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ListItemSkeleton() {\n  // Compose the shared Skeleton primitive so the placeholder matches every other skeleton\n  // (token + radius + animation + motion-reduce).\n  return (\n    <>\n      <Skeleton className=\"size-10 shrink-0 rounded-full\" />\n      <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <Skeleton className=\"h-3.5 w-1/3\" />\n        <Skeleton className=\"h-3.5 w-2/3\" />\n      </div>\n      <div className=\"flex min-w-0 flex-1 flex-col items-end gap-2\">\n        <Skeleton className=\"h-3.5 w-1/4\" />\n        <Skeleton className=\"h-3.5 w-1/2\" />\n      </div>\n    </>\n  )\n}\n\ninterface ListItemLeadingProps extends React.ComponentProps<'div'> {\n  /**\n   * Set when this slot holds a focusable control (Checkbox, Radio, Button). ListItem\n   * then hoists it outside `render`'s element — nesting a real control inside the row's\n   * own <a>/<button> is invalid HTML and double-fires clicks. Leave unset for decorative\n   * content (an icon): it stays inside the row, so the whole visual row is one\n   * click/tap target, same as a row with no leading slot at all.\n   */\n  interactive?: boolean\n}\n\nfunction ListItemLeading({\n  className,\n  interactive: _interactive,\n  ...props\n}: ListItemLeadingProps) {\n  return (\n    <div\n      data-slot=\"list-item-leading\"\n      className={cn('flex shrink-0 items-center', className)}\n      {...props}\n    />\n  )\n}\n\ninterface ListItemContentProps extends React.ComponentProps<'div'> {\n  /** `end` right-aligns the column (the value column). */\n  align?: 'start' | 'end'\n}\n\nfunction ListItemContent({\n  className,\n  align = 'start',\n  ...props\n}: ListItemContentProps) {\n  const columnCtx = React.useMemo(() => ({ isEnd: align === 'end' }), [align])\n  return (\n    <ListItemColumnContext.Provider value={columnCtx}>\n      <div\n        data-slot=\"list-item-content\"\n        className={cn(\n          'flex min-w-0 flex-1 flex-col gap-1',\n          align === 'end' ? 'items-end text-right' : 'items-start text-left',\n          className,\n        )}\n        {...props}\n      />\n    </ListItemColumnContext.Provider>\n  )\n}\n\nfunction ListItemPreline({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"list-item-preline\"\n      className={cn(\n        'block w-full truncate text-sm text-(--list-item-fg-muted,var(--neutral-11))',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ninterface ListItemTitleProps extends React.ComponentProps<'span'> {\n  /** `strong` keeps the title bold, e.g. for menu rows; `default` is medium, bold on a `recent` row. */\n  emphasis?: 'default' | 'strong'\n}\n\nfunction ListItemTitle({\n  className,\n  children,\n  emphasis = 'default',\n  ...props\n}: ListItemTitleProps) {\n  const { recent } = React.useContext(ListItemContext)\n  const { isEnd } = React.useContext(ListItemColumnContext)\n  // recency dot sits inline, immediately left of the title (Figma 1310-977) — only on the\n  // primary (start) column, so a two-column value row's value never carries it.\n  const showDot = recent && !isEnd\n\n  // className/{...props} always land on THIS span (the one that truncates), so a caller's\n  // override (e.g. `title`, `line-clamp-2 whitespace-normal`) behaves identically whether\n  // or not the dot renders — only the wrapping structure differs below.\n  const title = (\n    <span\n      data-slot=\"list-item-title\"\n      className={cn(\n        showDot ? 'min-w-0 truncate' : 'block w-full truncate',\n        'text-base text-(--list-item-fg,var(--neutral-12))',\n        recent || emphasis === 'strong' ? 'font-bold' : 'font-medium',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n\n  if (!showDot) {\n    // No dot: stay a plain block so the column's text alignment (e.g. an end column's\n    // text-right) governs the title directly.\n    return title\n  }\n\n  return (\n    <span className=\"flex w-full items-center gap-2\">\n      <span\n        aria-hidden=\"true\"\n        data-slot=\"list-item-indicator\"\n        className=\"size-2 shrink-0 rounded-full bg-spark-9\"\n      />\n      {title}\n    </span>\n  )\n}\n\nfunction ListItemSubline({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"list-item-subline\"\n      className={cn(\n        'block w-full truncate text-sm text-(--list-item-fg-muted,var(--neutral-11))',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ListItemTrailing({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"list-item-trailing\"\n      className={cn(\n        'flex shrink-0 items-center text-gray-11',\n        // interactive rows tint the affordance accent on hover/focus (group/row is set on\n        // the interactive inner row; absent on static rows, so this simply never fires).\n        // Relies on the child reading currentColor (Spark icons do) — the colour-\n        // independent Icon component hardcodes its own ink and won't pick this up; use\n        // a Spark icon here, not Icon.\n        'transition-colors duration-150 motion-reduce:transition-none',\n        'group-hover/row:text-spark-a11 group-focus-visible/row:text-spark-a11',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  List,\n  ListItem,\n  ListItemContent,\n  ListItemDetail,\n  ListItemLeading,\n  ListItemPreline,\n  ListItemSubline,\n  ListItemTitle,\n  ListItemTrailing,\n}\nexport type {\n  ListProps,\n  ListItemProps,\n  ListItemContentProps,\n  ListItemDetailProps,\n  ListItemLeadingProps,\n  ListItemTitleProps,\n  ListVariant,\n  ListRadius,\n}\n"],"mappings":"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"}
+{"version":3,"file":"list.js","names":["React"],"sources":["../../src/components/list.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render'\nimport { cva } from 'class-variance-authority'\nimport * as React from 'react'\nimport type { ContainerRadius } from '../lib/container-chrome'\nimport type { SparkCardColor, SparkCardVariant } from '../lib/theme-types'\nimport type { Tone } from '../lib/tones'\nimport { cn } from '../utils/cn'\nimport { Skeleton } from './skeleton'\n\ntype ListVariant = SparkCardVariant | 'ambient'\ntype ListRadius = ContainerRadius\n\n// Rounds only the first/last row of a run, regardless of variant — harmless on ghost\n// (nothing painted to clip). Keyed on `data-list-radius` alone: unlike fill (below),\n// rounding doesn't depend on variant/color, so no compound group-data selector is needed.\n// Named `list-radius`, not `radius`: the global Roundness knob (Theme) also writes a\n// bare `data-radius` via an unscoped `[data-radius=...]` selector in spark-default.css —\n// `none`/`full` are spelled the same in both scales, so a plain `data-radius` here would\n// collide and let List silently override the app-wide knob for its whole subtree.\nconst radiusRowClasses: Record<ListRadius, string> = {\n  none: 'group-data-[list-radius=none]/list:first:rounded-t-none group-data-[list-radius=none]/list:last:rounded-b-none',\n  sm: 'group-data-[list-radius=sm]/list:first:rounded-t-sm group-data-[list-radius=sm]/list:last:rounded-b-sm',\n  md: 'group-data-[list-radius=md]/list:first:rounded-t-md group-data-[list-radius=md]/list:last:rounded-b-md',\n  lg: 'group-data-[list-radius=lg]/list:first:rounded-t-lg group-data-[list-radius=lg]/list:last:rounded-b-lg',\n  xl: 'group-data-[list-radius=xl]/list:first:rounded-t-xl group-data-[list-radius=xl]/list:last:rounded-b-xl',\n  '2xl':\n    'group-data-[list-radius=2xl]/list:first:rounded-t-2xl group-data-[list-radius=2xl]/list:last:rounded-b-2xl',\n  '3xl':\n    'group-data-[list-radius=3xl]/list:first:rounded-t-3xl group-data-[list-radius=3xl]/list:last:rounded-b-3xl',\n  full: 'group-data-[list-radius=full]/list:first:rounded-t-full group-data-[list-radius=full]/list:last:rounded-b-full',\n}\n\n// Fill and border colour depend on variant *and* colour together, so they live on\n// data-look (see the comment on `look` in List, below).\nconst lookClasses = [\n  'group-data-[variant=ambient]/list:border-(--spark-card-border,transparent) group-data-[variant=ambient]/list:bg-(--spark-card-bg,var(--neutral-a3)) group-data-[variant=ambient]/list:[--spark-skeleton-bg:var(--neutral-a5)] group-data-[variant=ambient]/list:[--color-focus-root:var(--spark-card-focus,var(--spark-11))]',\n  'group-data-[look=soft]/list:bg-gray-3 dark:group-data-[look=soft]/list:bg-gray-a3',\n  // arbitrary-var form, not the bg-spark-a3 utility: identical colour, but avoids a\n  // literal substring collision with the unconditional selection/hover tint below,\n  // which a couple of tests distinguish with a plain className.includes check.\n  'group-data-[look=soft-accent]/list:bg-(--spark-a3)',\n  'group-data-[look=surface]/list:border-gray-a6 group-data-[look=surface]/list:bg-gray-3 dark:group-data-[look=surface]/list:bg-gray-a3',\n  'group-data-[look=surface-accent]/list:border-spark-a6 group-data-[look=surface-accent]/list:bg-(--spark-surface)',\n  'group-data-[look=outline]/list:border-gray-a6',\n  'group-data-[look=outline-accent]/list:border-spark-a6',\n  'group-data-[look=solid]/list:bg-gray-1',\n  'group-data-[look=solid-accent]/list:bg-spark-9',\n]\n// The look fills out-specify a plain bg utility, so a selected row with a detail keeps\n// only the borders.\nconst borderLookClasses = [\n  'group-data-[variant=ambient]/list:border-(--spark-card-border,transparent)',\n  'group-data-[look=surface]/list:border-gray-a6',\n  'group-data-[look=surface-accent]/list:border-spark-a6',\n  'group-data-[look=outline]/list:border-gray-a6',\n  'group-data-[look=outline-accent]/list:border-spark-a6',\n]\n\n// ListItem publishes `recent` so ListItemTitle can render the inline recency dot; the\n// column context lets the title show it only on the primary (start) column, never the\n// value column of a two-column row.\nconst ListItemContext = React.createContext<{ recent: boolean }>({\n  recent: false,\n})\nconst ListItemColumnContext = React.createContext<{ isEnd: boolean }>({\n  isEnd: false,\n})\n\ninterface ListProps extends React.ComponentProps<'ul'> {\n  /**\n   * A prop, not the ambient `data-style` knob — that would cascade into row content.\n   * `ambient` follows the app-level `[data-card-variant]` knob, like an unset Card `variant`.\n   */\n  variant?: ListVariant\n  /** Chrome palette. `neutral` (default) tracks the app neutral; `accent` tints with the brand accent. */\n  color?: SparkCardColor\n  /** Corner radius, as a named step. Unset → `lg`, today's fixed behaviour. */\n  radius?: ListRadius\n  /** How many `--spark-layout-gap` units apart each row sits (`soft`/`solid`/`ghost`, or `ambient` under those knobs). */\n  gap?: number\n}\n\nfunction List({\n  className,\n  variant = 'soft',\n  color,\n  radius = 'lg',\n  gap = 0.5,\n  style,\n  ...props\n}: ListProps) {\n  // Fill/border-colour needs BOTH axes at once (e.g. \"soft, tinted with accent\"), which a\n  // single group-data selector can't express and chaining two on the same named group\n  // can't either (that generates a descendant match between two *different* ancestors,\n  // not one ancestor bearing both attributes). Resolving the pair to one value up front\n  // sidesteps it entirely — see the `data-look` selectors on ListItem below.\n  const look = color === 'accent' ? `${variant}-accent` : variant\n  return (\n    <ul\n      // role=list keeps list semantics even under list-style:none (Safari drops them).\n      role=\"list\"\n      data-slot=\"list\"\n      // group/list + data-variant drive every item's per-variant chrome (below).\n      data-variant={variant}\n      data-look={look}\n      data-card-color={variant === 'ambient' ? color : undefined}\n      data-list-radius={radius}\n      className={cn(\n        'group/list m-0 list-none p-0',\n        // soft/solid = separate rows → stack with a small gap (the gap IS the divider).\n        // ghost shares that same gap for spacing but no fill/border (see ListItem's\n        // chrome block, which has no ghost selector). surface/outline glue rows into one\n        // panel with no gap at all.\n        'data-[variant=soft]:flex data-[variant=soft]:flex-col data-[variant=soft]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5))]',\n        'data-[variant=solid]:flex data-[variant=solid]:flex-col data-[variant=solid]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5))]',\n        // ambient gaps like the knob's own List variant: --spark-card-list-gapped is 0 for surface/outline.\n        'data-[variant=ambient]:flex data-[variant=ambient]:flex-col data-[variant=ambient]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5)*var(--spark-card-list-gapped,1))]',\n        'data-[variant=ghost]:flex data-[variant=ghost]:flex-col data-[variant=ghost]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5))]',\n        className,\n      )}\n      style={\n        {\n          '--list-gap-steps': gap,\n          // solid's fill inverts far enough that the row's own ink must invert with it\n          // (unlike soft/surface/outline's translucent tints, where the default ink\n          // stays legible regardless of colour) — matches Card's own solid recipe,\n          // where fg and fg-muted both collapse to the one contrast-guaranteed step.\n          ...(variant === 'ambient' && {\n            '--list-item-fg': 'var(--spark-card-fg,var(--neutral-12))',\n            '--list-item-fg-muted':\n              'var(--spark-card-fg-muted,var(--neutral-11))',\n          }),\n          ...(variant === 'solid' && {\n            '--list-item-fg':\n              color === 'accent'\n                ? 'var(--spark-contrast)'\n                : 'var(--neutral-12)',\n            '--list-item-fg-muted':\n              color === 'accent'\n                ? 'var(--spark-contrast)'\n                : 'var(--neutral-12)',\n          }),\n          ...style,\n        } as React.CSSProperties\n      }\n      {...props}\n    />\n  )\n}\n\ninterface ListItemProps extends React.ComponentProps<'li'> {\n  /** The \"recently changed\" accent dot. */\n  recent?: boolean\n  /** Persistent accent-tint (e.g. the active document). */\n  selected?: boolean\n  /** Loading placeholder (Figma `skeleton=true`). */\n  skeleton?: boolean\n  /**\n   * Base UI polymorphism for the inner row. Pass `<a href/>` or `<button/>` to make\n   * the row interactive (accent-on-hover/focus, cursor, focus ring). Omit → static row.\n   */\n  render?: useRender.RenderProp\n}\n\nfunction splitListItemChildren(\n  children: React.ReactNode,\n  render: ListItemProps['render'],\n  skeleton: boolean | undefined,\n) {\n  if (skeleton) return {}\n  const childArray = React.Children.toArray(children)\n  // Only a ListItemLeading actually marked `interactive` (a Checkbox/Radio/Button) needs\n  // to move outside `render`'s element, and only when `render` is literally an <a>/\n  // <button> — nesting a focusable control inside another interactive element is invalid\n  // HTML and double-fires clicks. A `render` of anything else (a `<Card/>`, say) has no\n  // such conflict: it isn't natively interactive itself, so a control inside it is valid,\n  // unduplicated HTML, and hoisting would only pull the control outside whatever that\n  // element paints (its fill, border, rounded corner) for no reason. A plain icon\n  // (interactive unset) is the same story from the other side — either way, Leading stays\n  // inside the row by default, so the whole visual row remains one click/tap target.\n  const rendersAnchorOrButton =\n    React.isValidElement(render) &&\n    (render.type === 'a' || render.type === 'button')\n  const leadingChild = childArray.find(\n    (child): child is React.ReactElement<ListItemLeadingProps> =>\n      React.isValidElement(child) && child.type === ListItemLeading,\n  )\n  const leading =\n    rendersAnchorOrButton && leadingChild?.props.interactive\n      ? leadingChild\n      : undefined\n  // Detail always sits outside the row, so it may hold its own controls and never joins\n  // the row's link/button.\n  const detail = childArray.find(\n    (child): child is React.ReactElement<ListItemDetailProps> =>\n      React.isValidElement(child) && child.type === ListItemDetail,\n  )\n  return {\n    leading,\n    detail,\n    rowChildren: childArray.filter(\n      (child) => child !== leading && child !== detail,\n    ),\n  }\n}\n\nfunction itemClassName({\n  className,\n  hoistLeading,\n  hasDetail,\n  flushDetail,\n  isSelected,\n  interactive,\n}: {\n  className: string | undefined\n  hoistLeading: boolean\n  hasDetail: boolean\n  flushDetail: boolean\n  isSelected: boolean | undefined\n  interactive: boolean\n}) {\n  const detailSelected = hasDetail && isSelected\n  return cn(\n    'relative has-focus-visible:z-10',\n    !hoistLeading && detailSelected && 'bg-spark-a3',\n    hoistLeading && [\n      // a flush detail must reach the item's left edge, so the inset moves to the leading.\n      flushDetail\n        ? 'flex min-w-0 items-center gap-4 *:data-[slot=list-item-leading]:pl-4'\n        : 'flex min-w-0 items-center gap-4 pl-4',\n      // a detail wraps onto its own full-width line below the leading + row.\n      hasDetail && 'flex-wrap gap-y-0 *:data-[slot=list-item-detail]:pl-0',\n      isSelected && 'bg-spark-a3',\n      interactive && [\n        // neutral at rest → subtle accent tint on hover/focus (the affordance goes\n        // accent too, in ListItemTrailing; title + leading stay neutral). The click\n        // target itself is `row`, so focus-visible (unlike hover) has to be read off\n        // a descendant via has() — it never lands on this <li> directly.\n        'cursor-pointer',\n        // hovering the detail must not suggest it navigates.\n        hasDetail\n          ? 'has-focus-visible:bg-spark-a3 has-[[data-slot=list-item-row]:hover]:bg-spark-a3'\n          : 'hover:bg-spark-a3 has-focus-visible:bg-spark-a3',\n        'has-focus-visible:ring-2 has-focus-visible:ring-offset-2',\n      ],\n    ],\n    // soft/solid rows sit in a gapped stack, not a glued panel, but still read as one\n    // rounded group: only the first/last row round the outer corners. surface/\n    // outline glue rows into one bordered panel instead — border SIDES are variant-\n    // only (no colour axis), so they stay on data-variant; fill and border COLOUR\n    // live on data-look instead (lookClasses, above).\n    'group-data-[variant=surface]/list:border-x group-data-[variant=surface]/list:border-t group-data-[variant=surface]/list:last:border-b',\n    'group-data-[variant=outline]/list:border-x group-data-[variant=outline]/list:border-t group-data-[variant=outline]/list:last:border-b',\n    // ambient glues like surface/outline under a bordered knob; a borderless knob's width is 0, leaving only the gap.\n    'group-data-[variant=ambient]/list:border-x-(length:--spark-card-border-width,0px) group-data-[variant=ambient]/list:border-t-(length:--spark-card-border-width,0px) group-data-[variant=ambient]/list:last:border-b-(length:--spark-card-border-width,0px)',\n    detailSelected ? borderLookClasses : lookClasses,\n    Object.values(radiusRowClasses),\n    className,\n  )\n}\n\nfunction ListItem({\n  className,\n  children,\n  recent,\n  selected,\n  skeleton,\n  render,\n  ...props\n}: ListItemProps) {\n  // Skeleton rows are decorative placeholders — never render as a real <a>/<button>. An\n  // aria-hidden anchor would still be focusable (WCAG 4.1.2), so skeleton forces a plain,\n  // non-interactive <div> regardless of `render`.\n  const interactive = !skeleton && render != null\n\n  const recentCtx = React.useMemo(() => ({ recent: recent ?? false }), [recent])\n\n  const { leading, detail, rowChildren } = splitListItemChildren(\n    children,\n    render,\n    skeleton,\n  )\n  const hoistLeading = leading != null\n  // With a detail the <li> is the visual item, so selection must tint it, not just the row.\n  const selectOnItem = hoistLeading || detail != null\n  const isSelected = !skeleton && selected\n\n  const row = useRender({\n    defaultTagName: 'div',\n    render: skeleton ? undefined : render,\n    props: {\n      'data-slot': 'list-item-row',\n      // skeleton is a decorative placeholder → keep it out of the a11y tree.\n      'aria-hidden': skeleton ? true : undefined,\n      className: cn(\n        // row layout from Figma 2217-1667; min-h is a HARD 44px floor (WCAG 2.5.5),\n        // py/gap/text still scale past it via the spacing/scaling knobs. no-underline\n        // resets the default <a> decoration when the row renders as a link.\n        'flex min-h-[2.75rem] items-center gap-4 py-3 text-left no-underline',\n        hoistLeading\n          ? 'min-w-0 flex-1 pr-4'\n          : detail\n            ? 'w-full rounded-t-[inherit] px-4'\n            : 'w-full rounded-[inherit] px-4',\n        // not hoisted → this row IS the whole visual item (no outer <li> chrome), so\n        // selection tint lives here, same as a row with no leading slot at all.\n        !selectOnItem && isSelected && 'bg-spark-a3',\n        interactive && [\n          'group/row cursor-pointer transition-colors duration-150 motion-reduce:transition-none',\n          'disabled:pointer-events-none disabled:opacity-50',\n          hoistLeading\n            ? // the custom focus ring is drawn on the outer <li> (has-focus-visible,\n              // below) so it wraps the leading control too — but the browser's own\n              // default outline still targets whichever element actually has focus,\n              // which is this one, so it has to be suppressed here specifically.\n              'focus-visible:outline-hidden'\n            : [\n                'hover:bg-spark-a3 focus-visible:bg-spark-a3',\n                'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n              ],\n        ],\n      ),\n      children: skeleton ? <ListItemSkeleton /> : rowChildren,\n    },\n  })\n\n  return (\n    <li\n      data-slot=\"list-item\"\n      className={itemClassName({\n        className,\n        hoistLeading,\n        hasDetail: detail != null,\n        flushDetail: Boolean(detail?.props.flush),\n        isSelected,\n        interactive,\n      })}\n      {...props}\n    >\n      <ListItemContext.Provider value={recentCtx}>\n        {leading}\n        {row}\n        {detail}\n      </ListItemContext.Provider>\n    </li>\n  )\n}\n\ninterface ListItemDetailProps extends React.ComponentProps<'div'> {\n  /** Drops the padding so the detail runs edge to edge and to the item's bottom, clipped to its rounded corners. */\n  flush?: boolean\n}\n\nfunction ListItemDetail({ className, flush, ...props }: ListItemDetailProps) {\n  return (\n    <div\n      data-slot=\"list-item-detail\"\n      className={cn(\n        'w-full min-w-0 cursor-auto',\n        // clips itself, not the <li>, so the row's focus ring is never cut off.\n        flush ? 'overflow-hidden rounded-b-[inherit]' : 'px-4 pb-3',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ListItemSkeleton() {\n  // Compose the shared Skeleton primitive so the placeholder matches every other skeleton\n  // (token + radius + animation + motion-reduce).\n  return (\n    <>\n      <Skeleton className=\"size-10 shrink-0 rounded-full\" />\n      <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <Skeleton className=\"h-3.5 w-1/3\" />\n        <Skeleton className=\"h-3.5 w-2/3\" />\n      </div>\n      <div className=\"flex min-w-0 flex-1 flex-col items-end gap-2\">\n        <Skeleton className=\"h-3.5 w-1/4\" />\n        <Skeleton className=\"h-3.5 w-1/2\" />\n      </div>\n    </>\n  )\n}\n\ninterface ListItemLeadingProps extends React.ComponentProps<'div'> {\n  /**\n   * Set when this slot holds a focusable control (Checkbox, Radio, Button). ListItem\n   * then hoists it outside `render`'s element — nesting a real control inside the row's\n   * own <a>/<button> is invalid HTML and double-fires clicks. Leave unset for decorative\n   * content (an icon): it stays inside the row, so the whole visual row is one\n   * click/tap target, same as a row with no leading slot at all.\n   */\n  interactive?: boolean\n}\n\nfunction ListItemLeading({\n  className,\n  interactive: _interactive,\n  ...props\n}: ListItemLeadingProps) {\n  return (\n    <div\n      data-slot=\"list-item-leading\"\n      className={cn('flex shrink-0 items-center', className)}\n      {...props}\n    />\n  )\n}\n\ninterface ListItemContentProps extends React.ComponentProps<'div'> {\n  /** `end` right-aligns the column (the value column). */\n  align?: 'start' | 'end'\n}\n\nfunction ListItemContent({\n  className,\n  align = 'start',\n  ...props\n}: ListItemContentProps) {\n  const columnCtx = React.useMemo(() => ({ isEnd: align === 'end' }), [align])\n  return (\n    <ListItemColumnContext.Provider value={columnCtx}>\n      <div\n        data-slot=\"list-item-content\"\n        className={cn(\n          'flex min-w-0 flex-1 flex-col gap-1',\n          align === 'end' ? 'items-end text-right' : 'items-start text-left',\n          className,\n        )}\n        {...props}\n      />\n    </ListItemColumnContext.Provider>\n  )\n}\n\nfunction ListItemPreline({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"list-item-preline\"\n      className={cn(\n        'block w-full truncate text-sm text-(--list-item-fg-muted,var(--neutral-11))',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ninterface ListItemTitleProps extends React.ComponentProps<'span'> {\n  /** `strong` keeps the title bold, e.g. for menu rows; `default` is medium, bold on a `recent` row. */\n  emphasis?: 'default' | 'strong'\n}\n\nfunction ListItemTitle({\n  className,\n  children,\n  emphasis = 'default',\n  ...props\n}: ListItemTitleProps) {\n  const { recent } = React.useContext(ListItemContext)\n  const { isEnd } = React.useContext(ListItemColumnContext)\n  // recency dot sits inline, immediately left of the title (Figma 1310-977) — only on the\n  // primary (start) column, so a two-column value row's value never carries it.\n  const showDot = recent && !isEnd\n\n  // className/{...props} always land on THIS span (the one that truncates), so a caller's\n  // override (e.g. `title`, `line-clamp-2 whitespace-normal`) behaves identically whether\n  // or not the dot renders — only the wrapping structure differs below.\n  const title = (\n    <span\n      data-slot=\"list-item-title\"\n      className={cn(\n        showDot ? 'min-w-0 truncate' : 'block w-full truncate',\n        'text-base text-(--list-item-fg,var(--neutral-12))',\n        recent || emphasis === 'strong' ? 'font-bold' : 'font-medium',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n\n  if (!showDot) {\n    // No dot: stay a plain block so the column's text alignment (e.g. an end column's\n    // text-right) governs the title directly.\n    return title\n  }\n\n  return (\n    <span className=\"flex w-full items-center gap-2\">\n      <span\n        aria-hidden=\"true\"\n        data-slot=\"list-item-indicator\"\n        className=\"size-2 shrink-0 rounded-full bg-spark-9\"\n      />\n      {title}\n    </span>\n  )\n}\n\nconst listItemSublineVariants = cva('block w-full truncate text-sm', {\n  variants: {\n    tone: {\n      neutral: 'text-(--list-item-fg-muted,var(--neutral-11))',\n      success: 'text-success-soft-foreground',\n      error: 'text-error-soft-foreground',\n    },\n  },\n  defaultVariants: { tone: 'neutral' },\n})\n\ninterface ListItemSublineProps extends React.ComponentProps<'span'> {\n  tone?: Extract<Tone, 'neutral' | 'success' | 'error'>\n}\n\nfunction ListItemSubline({ className, tone, ...props }: ListItemSublineProps) {\n  return (\n    <span\n      data-slot=\"list-item-subline\"\n      className={cn(listItemSublineVariants({ tone }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ListItemTrailing({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"list-item-trailing\"\n      className={cn(\n        'flex shrink-0 items-center text-gray-11',\n        // interactive rows tint the affordance accent on hover/focus (group/row is set on\n        // the interactive inner row; absent on static rows, so this simply never fires).\n        // Relies on the child reading currentColor (Spark icons do) — the colour-\n        // independent Icon component hardcodes its own ink and won't pick this up; use\n        // a Spark icon here, not Icon.\n        'transition-colors duration-150 motion-reduce:transition-none',\n        'group-hover/row:text-spark-a11 group-focus-visible/row:text-spark-a11',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  List,\n  ListItem,\n  ListItemContent,\n  ListItemDetail,\n  ListItemLeading,\n  ListItemPreline,\n  ListItemSubline,\n  ListItemTitle,\n  ListItemTrailing,\n}\nexport type {\n  ListProps,\n  ListItemProps,\n  ListItemContentProps,\n  ListItemDetailProps,\n  ListItemLeadingProps,\n  ListItemTitleProps,\n  ListVariant,\n  ListRadius,\n}\n"],"mappings":"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"}

package/dist/components/marker.cjs

@@ -9,7 +9,7 @@ let _base_ui_react_merge_props = require("@base-ui/react/merge-props");
 let _base_ui_react_use_render = require("@base-ui/react/use-render");
 let cn = require("cn");
 //#region src/components/marker.tsx
-const markerVariants = (0, class_variance_authority.cva)("group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-gray-light [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-gray", { variants: { variant: {
+const markerVariants = (0, class_variance_authority.cva)("group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-gray-light [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-gray [&:is(button,a)]:outline-hidden [&:is(button,a)]:focus-visible:rounded-sm [&:is(button,a)]:focus-visible:ring-2 [&:is(button,a)]:focus-visible:ring-offset-2", { variants: { variant: {
 	default: "[&:is(button,a)]:touch-target",
 	separator: "before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-gray-a6 after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-gray-a6",
 	border: "border-b border-gray pb-2 [&:is(button,a)]:touch-target"

package/dist/components/marker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"marker.cjs","names":[],"sources":["../../src/components/marker.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { useRender } from '@base-ui/react/use-render'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\nconst markerVariants = cva(\n  \"group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-gray-light [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-gray\",\n  {\n    variants: {\n      variant: {\n        // touch-target only where the marker is actually a control (a `render`\n        // of <button>/<a>) — and never on `separator`, whose flanking rules\n        // already own ::after, the same pseudo-element the utility uses.\n        default: '[&:is(button,a)]:touch-target',\n        separator:\n          'before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-gray-a6 after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-gray-a6',\n        border: 'border-b border-gray pb-2 [&:is(button,a)]:touch-target',\n      },\n    },\n  },\n)\n\n// `render` replaces radix `asChild` — pass an element (e.g. a <button> for a\n// clickable \"jump to\" marker) and Base UI's useRender merges props onto it.\nfunction Marker({\n  className,\n  variant = 'default',\n  render,\n  ...props\n}: useRender.ComponentProps<'div'> & VariantProps<typeof markerVariants>) {\n  return useRender({\n    defaultTagName: 'div',\n    render,\n    props: mergeProps<'div'>(\n      {\n        'data-slot': 'marker',\n        'data-variant': variant,\n        className: cn(markerVariants({ variant, className })),\n      } as React.ComponentProps<'div'>,\n      props,\n    ),\n  })\n}\n\nfunction MarkerIcon({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"marker-icon\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MarkerContent({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"marker-content\"\n      className={cn(\n        'min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-gray',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Marker, MarkerContent, MarkerIcon, markerVariants }\n"],"mappings":";;;;;;;;;;;AAMA,MAAM,kBAAA,GAAA,yBAAA,KACJ,gMACA,EACE,UAAU,EACR,SAAS;CAIP,SAAS;CACT,WACE;CACF,QAAQ;AACV,EACF,EACF,CACF;AAIA,SAAS,OAAO,EACd,WACA,UAAU,WACV,QACA,GAAG,SACqE;CACxE,QAAA,GAAA,0BAAA,WAAiB;EACf,gBAAgB;EAChB;EACA,QAAA,GAAA,2BAAA,YACE;GACE,aAAa;GACb,gBAAgB;GAChB,YAAA,GAAA,GAAA,IAAc,eAAe;IAAE;IAAS;GAAU,CAAC,CAAC;EACtD,GACA,KACF;CACF,CAAC;AACH;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAuC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,aAAU;EACV,eAAY;EACZ,YAAA,GAAA,GAAA,IACE,wDACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAuC;CAC5E,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IACE,4LACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"marker.cjs","names":[],"sources":["../../src/components/marker.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { useRender } from '@base-ui/react/use-render'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\nconst markerVariants = cva(\n  \"group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-gray-light [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-gray [&:is(button,a)]:outline-hidden [&:is(button,a)]:focus-visible:rounded-sm [&:is(button,a)]:focus-visible:ring-2 [&:is(button,a)]:focus-visible:ring-offset-2\",\n  {\n    variants: {\n      variant: {\n        // touch-target only where the marker is actually a control (a `render`\n        // of <button>/<a>) — and never on `separator`, whose flanking rules\n        // already own ::after, the same pseudo-element the utility uses.\n        default: '[&:is(button,a)]:touch-target',\n        separator:\n          'before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-gray-a6 after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-gray-a6',\n        border: 'border-b border-gray pb-2 [&:is(button,a)]:touch-target',\n      },\n    },\n  },\n)\n\n// `render` replaces radix `asChild` — pass an element (e.g. a <button> for a\n// clickable \"jump to\" marker) and Base UI's useRender merges props onto it.\nfunction Marker({\n  className,\n  variant = 'default',\n  render,\n  ...props\n}: useRender.ComponentProps<'div'> & VariantProps<typeof markerVariants>) {\n  return useRender({\n    defaultTagName: 'div',\n    render,\n    props: mergeProps<'div'>(\n      {\n        'data-slot': 'marker',\n        'data-variant': variant,\n        className: cn(markerVariants({ variant, className })),\n      } as React.ComponentProps<'div'>,\n      props,\n    ),\n  })\n}\n\nfunction MarkerIcon({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"marker-icon\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MarkerContent({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"marker-content\"\n      className={cn(\n        'min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-gray',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Marker, MarkerContent, MarkerIcon, markerVariants }\n"],"mappings":";;;;;;;;;;;AAMA,MAAM,kBAAA,GAAA,yBAAA,KACJ,6VACA,EACE,UAAU,EACR,SAAS;CAIP,SAAS;CACT,WACE;CACF,QAAQ;AACV,EACF,EACF,CACF;AAIA,SAAS,OAAO,EACd,WACA,UAAU,WACV,QACA,GAAG,SACqE;CACxE,QAAA,GAAA,0BAAA,WAAiB;EACf,gBAAgB;EAChB;EACA,QAAA,GAAA,2BAAA,YACE;GACE,aAAa;GACb,gBAAgB;GAChB,YAAA,GAAA,GAAA,IAAc,eAAe;IAAE;IAAS;GAAU,CAAC,CAAC;EACtD,GACA,KACF;CACF,CAAC;AACH;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAuC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,aAAU;EACV,eAAY;EACZ,YAAA,GAAA,GAAA,IACE,wDACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAuC;CAC5E,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IACE,4LACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/marker.js

@@ -6,7 +6,7 @@ import { cva } from "class-variance-authority";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/marker.tsx
-const markerVariants = cva("group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-gray-light [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-gray", { variants: { variant: {
+const markerVariants = cva("group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-gray-light [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-gray [&:is(button,a)]:outline-hidden [&:is(button,a)]:focus-visible:rounded-sm [&:is(button,a)]:focus-visible:ring-2 [&:is(button,a)]:focus-visible:ring-offset-2", { variants: { variant: {
 	default: "[&:is(button,a)]:touch-target",
 	separator: "before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-gray-a6 after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-gray-a6",
 	border: "border-b border-gray pb-2 [&:is(button,a)]:touch-target"

package/dist/components/marker.js.map

@@ -1 +1 @@
-{"version":3,"file":"marker.js","names":[],"sources":["../../src/components/marker.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { useRender } from '@base-ui/react/use-render'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\nconst markerVariants = cva(\n  \"group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-gray-light [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-gray\",\n  {\n    variants: {\n      variant: {\n        // touch-target only where the marker is actually a control (a `render`\n        // of <button>/<a>) — and never on `separator`, whose flanking rules\n        // already own ::after, the same pseudo-element the utility uses.\n        default: '[&:is(button,a)]:touch-target',\n        separator:\n          'before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-gray-a6 after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-gray-a6',\n        border: 'border-b border-gray pb-2 [&:is(button,a)]:touch-target',\n      },\n    },\n  },\n)\n\n// `render` replaces radix `asChild` — pass an element (e.g. a <button> for a\n// clickable \"jump to\" marker) and Base UI's useRender merges props onto it.\nfunction Marker({\n  className,\n  variant = 'default',\n  render,\n  ...props\n}: useRender.ComponentProps<'div'> & VariantProps<typeof markerVariants>) {\n  return useRender({\n    defaultTagName: 'div',\n    render,\n    props: mergeProps<'div'>(\n      {\n        'data-slot': 'marker',\n        'data-variant': variant,\n        className: cn(markerVariants({ variant, className })),\n      } as React.ComponentProps<'div'>,\n      props,\n    ),\n  })\n}\n\nfunction MarkerIcon({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"marker-icon\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MarkerContent({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"marker-content\"\n      className={cn(\n        'min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-gray',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Marker, MarkerContent, MarkerIcon, markerVariants }\n"],"mappings":";;;;;;;;AAMA,MAAM,iBAAiB,IACrB,gMACA,EACE,UAAU,EACR,SAAS;CAIP,SAAS;CACT,WACE;CACF,QAAQ;AACV,EACF,EACF,CACF;AAIA,SAAS,OAAO,EACd,WACA,UAAU,WACV,QACA,GAAG,SACqE;CACxE,OAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO,WACL;GACE,aAAa;GACb,gBAAgB;GAChB,WAAW,GAAG,eAAe;IAAE;IAAS;GAAU,CAAC,CAAC;EACtD,GACA,KACF;CACF,CAAC;AACH;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAuC;CACzE,OACE,oBAAC,QAAD;EACE,aAAU;EACV,eAAY;EACZ,WAAW,GACT,wDACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAuC;CAC5E,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,4LACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"marker.js","names":[],"sources":["../../src/components/marker.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { useRender } from '@base-ui/react/use-render'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\nconst markerVariants = cva(\n  \"group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-gray-light [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-gray [&:is(button,a)]:outline-hidden [&:is(button,a)]:focus-visible:rounded-sm [&:is(button,a)]:focus-visible:ring-2 [&:is(button,a)]:focus-visible:ring-offset-2\",\n  {\n    variants: {\n      variant: {\n        // touch-target only where the marker is actually a control (a `render`\n        // of <button>/<a>) — and never on `separator`, whose flanking rules\n        // already own ::after, the same pseudo-element the utility uses.\n        default: '[&:is(button,a)]:touch-target',\n        separator:\n          'before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-gray-a6 after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-gray-a6',\n        border: 'border-b border-gray pb-2 [&:is(button,a)]:touch-target',\n      },\n    },\n  },\n)\n\n// `render` replaces radix `asChild` — pass an element (e.g. a <button> for a\n// clickable \"jump to\" marker) and Base UI's useRender merges props onto it.\nfunction Marker({\n  className,\n  variant = 'default',\n  render,\n  ...props\n}: useRender.ComponentProps<'div'> & VariantProps<typeof markerVariants>) {\n  return useRender({\n    defaultTagName: 'div',\n    render,\n    props: mergeProps<'div'>(\n      {\n        'data-slot': 'marker',\n        'data-variant': variant,\n        className: cn(markerVariants({ variant, className })),\n      } as React.ComponentProps<'div'>,\n      props,\n    ),\n  })\n}\n\nfunction MarkerIcon({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"marker-icon\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MarkerContent({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"marker-content\"\n      className={cn(\n        'min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-gray',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Marker, MarkerContent, MarkerIcon, markerVariants }\n"],"mappings":";;;;;;;;AAMA,MAAM,iBAAiB,IACrB,6VACA,EACE,UAAU,EACR,SAAS;CAIP,SAAS;CACT,WACE;CACF,QAAQ;AACV,EACF,EACF,CACF;AAIA,SAAS,OAAO,EACd,WACA,UAAU,WACV,QACA,GAAG,SACqE;CACxE,OAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO,WACL;GACE,aAAa;GACb,gBAAgB;GAChB,WAAW,GAAG,eAAe;IAAE;IAAS;GAAU,CAAC,CAAC;EACtD,GACA,KACF;CACF,CAAC;AACH;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAuC;CACzE,OACE,oBAAC,QAAD;EACE,aAAU;EACV,eAAY;EACZ,WAAW,GACT,wDACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAuC;CAC5E,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,4LACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}