# ListItem A row composed from leading, text and trailing slots, with selection, progress, stat, empty and icon helpers. Public consumers import List and use List.Item; ListItem is not a separate package-root export. Version: 0.2.0-preview.1 (preview) Content digest: 70ac710f4d22dce040e7ac593379ba8aca9dcb59a0b9c0f839819cae0e2bb721 Contract kind: source-derived Source: packages/design-system/src/components/organization/ListItem/ListItem.tsx ## Guidance { "summary": "A row composed from leading, text and trailing slots, with selection, progress, stat, empty and icon helpers. Public consumers import List and use List.Item; ListItem is not a separate package-root export.", "guidance": [ { "heading": "Overview", "body": "A slot-first list row. Compose the base row from named slots — a leading edge (`leadingGlyph` +\n`tone`, or a custom `leading` node), `overline` / `title` / `description`, and a trailing edge\n(`value`, `tag`, `statusLabel`, or `trailing` / `trailingIcon`). Behavior comes from compound parts\nrather than variant props." }, { "heading": "Use when", "body": "The deciding choice is which compound part you reach for.\n\nA pressable row (`onPress`) normally reveals a chevron. `List` suppresses a direct `List.Item`\ndivider. Compound `Selection`, `Progress` and `Stat` rows keep their own divider setting;\npass `divider={false}` when the container already draws separators." }, { "heading": "Leading and trailing slots", "body": "A leading tone plate from `leadingGlyph` + `tone`, with a trailing value and status." }, { "heading": "Tones", "body": "Every `tone` on the generated leading plate — status, `brand`, and product-feature." } ], "usage": [ { "variant": "List.Item", "use": "The default informational row — leading marker, text, and a trailing value/tag/status. The workhorse (most rows in the app).", "avoid": "Selection, progress, or key-value rows — those have dedicated parts below.", "axis": "Part" }, { "variant": "List.Item.Selection", "use": "Selectable rows — `selectionMode=\"multiple\"` renders a checkbox, `\"single\"` a radio.", "avoid": "Titled option cards with supporting copy — use `SelectionCard`.", "axis": "Part" }, { "variant": "List.Item.Progress", "use": "A row carrying progress — `kind` of `steps`, `ring`, or `bar` (removal progress, multi-step tasks).", "avoid": "A static count — that is a plain row `value`.", "axis": "Part" }, { "variant": "List.Item.Stat", "use": "A key-value statistic row with an inset divider. Not currently used in app code, but the intended part for stat tables.", "avoid": "Rows with a leading marker or press affordance — use the base row.", "axis": "Part" }, { "variant": "List.Item.Empty", "use": "The placeholder row shown when a list has no items.", "avoid": "Loading states — this reads as \"nothing here,\" not \"still fetching.\"", "axis": "Part" }, { "variant": "List.Item.Icon", "use": "The leading tone plate, only when you need a custom `leading` marker. A standard row builds it for you from `leadingGlyph` + `tone`.", "avoid": "The common case — pass `leadingGlyph` + `tone` and let the row build the plate.", "axis": "Part" } ], "examples": [], "source": "packages/design-system/src/components/organization/ListItem/ListItem.mdx", "status": "local-preview", "note": "Guidance is read from local documentation, originally imported from the frozen source. Platform assertions in guidance are not parity verification." } ## Contract and public API ```json { "props": [ { "name": "leading", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Custom leading content (e.g. an `Avatar`, brand logo, or `List.Item.Icon` plate).", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 54 } }, { "name": "leadingGlyph", "type": "\"number\" | \"info\" | \"guard\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"arrow-down\" | \"chevron-down\" | \"chevron-up\" | \"chevron-left\" | \"chevron-right\" | \"caret-down\" | \"caret-up\" | \"trend-up\" | \"trend-down\" | \"collapse\" | \"expand\" | \"dropdown-collapse\" | \"dropdown-expand\" | \"close\" | \"clear\" | \"menu\" | \"copy\" | \"search\" | \"add\" | \"share\" | \"phone\" | \"sim\" | \"account\" | \"family\" | \"home\" | \"wifi\" | \"cart\" | \"vpn\" | \"lock\" | \"block\" | \"timer\" | \"check\" | \"send\" | \"filter\" | \"scan\" | \"log\" | \"trash\" | \"missed\" | \"call\" | \"voicemail\" | \"sms\" | \"email\" | \"data-removal\" | \"dark-web-monitoring\" | \"cloaked-pay\" | \"cloaked-ai\" | \"sms-guard\" | \"email-guard\" | \"call-guard\" | \"card\" | \"password\" | \"bell\" | \"circle-outline\" | \"dot\" | \"settings\" | \"clock\" | \"mail\" | \"message\" | \"user\" | \"upload\" | undefined", "declared_type": "GlyphName", "required": false, "description": "Registered glyph rendered as a tone `IconTile` in the leading slot.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 56 }, "values": [ "account", "add", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "bell", "block", "call-guard", "call", "card", "caret-down", "caret-up", "cart", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-outline", "clear", "cloaked-ai", "cloaked-pay", "clock", "close", "collapse", "copy", "dark-web-monitoring", "data-removal", "dot", "dropdown-collapse", "dropdown-expand", "email-guard", "email", "expand", "family", "filter", "guard", "home", "info", "lock", "log", "mail", "menu", "message", "missed", "number", "password", "phone", "scan", "search", "send", "settings", "share", "sim", "sms-guard", "sms", "timer", "trash", "trend-down", "trend-up", "upload", "user", "voicemail", "vpn", "wifi" ], "values_complete": true }, { "name": "tone", "type": "ListItemTone | undefined", "declared_type": "ListItemTone", "required": false, "description": "Tone for the generated leading `IconTile`.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 58 }, "values": [ "brand", "danger", "guard", "identity", "info", "monitoring", "neutral", "success", "warning" ], "values_complete": true }, { "name": "overline", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Small copy shown above the title.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 60 } }, { "name": "overlineTrailing", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Accessory pinned to the top-right, aligned with the overline (e.g. a count badge).", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 62 } }, { "name": "title", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": true, "description": "Primary row title.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 64 } }, { "name": "titleLines", "type": "number | undefined", "declared_type": "number", "required": false, "description": "Wraps the title across up to this many lines before clamping. Defaults to single-line truncation.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 66 } }, { "name": "description", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Secondary row copy.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 68 } }, { "name": "descriptionLines", "type": "number | undefined", "declared_type": "number", "required": false, "description": "Wraps the description across up to this many lines before clamping. Defaults to single-line truncation.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 70 } }, { "name": "value", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Right-aligned value shown in the title row.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 72 } }, { "name": "tag", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Tag slot shown at the trailing edge.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 74 } }, { "name": "statusLabel", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Status text rendered through ListItem.StatusIndicator.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 76 } }, { "name": "statusTone", "type": "\"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\" | undefined", "declared_type": "StatusTone", "required": false, "description": "Status color treatment for statusLabel.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 78 }, "values": [ "danger", "info", "neutral", "success", "warning" ], "values_complete": true }, { "name": "trailing", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Custom trailing content.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 80 } }, { "name": "trailingIcon", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Icon slot shown after other trailing content.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 82 } }, { "name": "chevron", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Override for the disclosure chevron. Leave unset to derive it from interaction — any\npressable row shows one, except selection rows and rows with caller-owned trailing\ncontent. Pass `true` to force it on (e.g. a non-interactive row inside a pressable card),\nor `false` to force it off.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 89 }, "values": [ false, true ], "values_complete": true }, { "name": "className", "type": "string | undefined", "declared_type": "string", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 90 } }, { "name": "style", "type": "React.CSSProperties | undefined", "declared_type": "React.CSSProperties", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 91 } }, { "name": "divider", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Shows a bottom divider when true.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 93 }, "values": [ false, true ], "values_complete": true }, { "name": "dividerMode", "type": "ListItemDividerMode | undefined", "declared_type": "ListItemDividerMode", "required": false, "description": "Divider alignment.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 95 }, "values": [ "full-bleed", "inset" ], "values_complete": true }, { "name": "padding", "type": "ListItemPadding | undefined", "declared_type": "ListItemPadding", "required": false, "description": "Row padding preset.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 97 }, "values": [ "card", "flush", "sheet" ], "values_complete": true }, { "name": "size", "type": "ListItemSize | undefined", "declared_type": "ListItemSize", "required": false, "description": "Row density. `sm` renders a compact row (32px leading slot). Defaults to `md`.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 99 }, "values": [ "md", "sm" ], "values_complete": true }, { "name": "surface", "type": "\"page\" | \"surface\" | undefined", "declared_type": "CdsSurface", "required": false, "description": "Row background on the `page | surface` scale. Defaults to `surface`\n(elevated card row); `page` sits flush on a page-level background.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 104 }, "values": [ "page", "surface" ], "values_complete": true }, { "name": "id", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Optional id for the row container or interactive control.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 106 } }, { "name": "ariaControls", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Id of content controlled by this row when used as a disclosure trigger.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 108 } }, { "name": "expanded", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Expanded state announced for interactive rows.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 110 }, "values": [ false, true ], "values_complete": true }, { "name": "disabled", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Dims the row and blocks presses. A disabled selection row keeps its radio/checkbox\nsemantics so the choice stays announced — it just can't be chosen.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 115 }, "values": [ false, true ], "values_complete": true }, { "name": "onPress", "type": "(() => void) | undefined", "declared_type": "() => void", "required": false, "description": "Called when the row is pressed.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 117 } }, { "name": "ariaLabel", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Accessible label for interactive rows when visible copy is not sufficient.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 119 } }, { "name": "haptic", "type": "HapticFeedback | undefined", "declared_type": "HapticFeedback", "required": false, "description": "Haptic feedback for interactive row presses. Defaults to `true` (`light`).", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 121 }, "values": [ "error", "heavy", "light", "medium", "selection", "success", "warning", false, true ], "values_complete": true }, { "name": "testId", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Test selector. Lands on the row's button when it is pressable, otherwise on the container.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 123 } } ], "prop_shapes": {}, "api": { "method": "typescript-type-checker", "typescript_version": "5.9.3", "public_export": "List", "public_path": "List.Item", "import_path": "@cloakedinc/design-system", "root_kind": "component", "entrypoints": [ { "name": "List.Item", "signature": 1, "visibility": "public", "source": { "path": "packages/design-system/src/components/organization/ListItem/ListItem.tsx", "line": 39 }, "props_type": "ListItemProps", "props": [ { "name": "leading", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Custom leading content (e.g. an `Avatar`, brand logo, or `List.Item.Icon` plate).", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 54 } }, { "name": "leadingGlyph", "type": "\"number\" | \"info\" | \"guard\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"arrow-down\" | \"chevron-down\" | \"chevron-up\" | \"chevron-left\" | \"chevron-right\" | \"caret-down\" | \"caret-up\" | \"trend-up\" | \"trend-down\" | \"collapse\" | \"expand\" | \"dropdown-collapse\" | \"dropdown-expand\" | \"close\" | \"clear\" | \"menu\" | \"copy\" | \"search\" | \"add\" | \"share\" | \"phone\" | \"sim\" | \"account\" | \"family\" | \"home\" | \"wifi\" | \"cart\" | \"vpn\" | \"lock\" | \"block\" | \"timer\" | \"check\" | \"send\" | \"filter\" | \"scan\" | \"log\" | \"trash\" | \"missed\" | \"call\" | \"voicemail\" | \"sms\" | \"email\" | \"data-removal\" | \"dark-web-monitoring\" | \"cloaked-pay\" | \"cloaked-ai\" | \"sms-guard\" | \"email-guard\" | \"call-guard\" | \"card\" | \"password\" | \"bell\" | \"circle-outline\" | \"dot\" | \"settings\" | \"clock\" | \"mail\" | \"message\" | \"user\" | \"upload\" | undefined", "declared_type": "GlyphName", "required": false, "description": "Registered glyph rendered as a tone `IconTile` in the leading slot.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 56 }, "values": [ "account", "add", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "bell", "block", "call-guard", "call", "card", "caret-down", "caret-up", "cart", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-outline", "clear", "cloaked-ai", "cloaked-pay", "clock", "close", "collapse", "copy", "dark-web-monitoring", "data-removal", "dot", "dropdown-collapse", "dropdown-expand", "email-guard", "email", "expand", "family", "filter", "guard", "home", "info", "lock", "log", "mail", "menu", "message", "missed", "number", "password", "phone", "scan", "search", "send", "settings", "share", "sim", "sms-guard", "sms", "timer", "trash", "trend-down", "trend-up", "upload", "user", "voicemail", "vpn", "wifi" ], "values_complete": true }, { "name": "tone", "type": "ListItemTone | undefined", "declared_type": "ListItemTone", "required": false, "description": "Tone for the generated leading `IconTile`.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 58 }, "values": [ "brand", "danger", "guard", "identity", "info", "monitoring", "neutral", "success", "warning" ], "values_complete": true }, { "name": "overline", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Small copy shown above the title.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 60 } }, { "name": "overlineTrailing", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Accessory pinned to the top-right, aligned with the overline (e.g. a count badge).", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 62 } }, { "name": "title", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": true, "description": "Primary row title.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 64 } }, { "name": "titleLines", "type": "number | undefined", "declared_type": "number", "required": false, "description": "Wraps the title across up to this many lines before clamping. Defaults to single-line truncation.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 66 } }, { "name": "description", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Secondary row copy.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 68 } }, { "name": "descriptionLines", "type": "number | undefined", "declared_type": "number", "required": false, "description": "Wraps the description across up to this many lines before clamping. Defaults to single-line truncation.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 70 } }, { "name": "value", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Right-aligned value shown in the title row.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 72 } }, { "name": "tag", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Tag slot shown at the trailing edge.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 74 } }, { "name": "statusLabel", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Status text rendered through ListItem.StatusIndicator.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 76 } }, { "name": "statusTone", "type": "\"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\" | undefined", "declared_type": "StatusTone", "required": false, "description": "Status color treatment for statusLabel.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 78 }, "values": [ "danger", "info", "neutral", "success", "warning" ], "values_complete": true }, { "name": "trailing", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Custom trailing content.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 80 } }, { "name": "trailingIcon", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Icon slot shown after other trailing content.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 82 } }, { "name": "chevron", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Override for the disclosure chevron. Leave unset to derive it from interaction — any\npressable row shows one, except selection rows and rows with caller-owned trailing\ncontent. Pass `true` to force it on (e.g. a non-interactive row inside a pressable card),\nor `false` to force it off.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 89 }, "values": [ false, true ], "values_complete": true }, { "name": "className", "type": "string | undefined", "declared_type": "string", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 90 } }, { "name": "style", "type": "React.CSSProperties | undefined", "declared_type": "React.CSSProperties", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 91 } }, { "name": "divider", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Shows a bottom divider when true.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 93 }, "values": [ false, true ], "values_complete": true }, { "name": "dividerMode", "type": "ListItemDividerMode | undefined", "declared_type": "ListItemDividerMode", "required": false, "description": "Divider alignment.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 95 }, "values": [ "full-bleed", "inset" ], "values_complete": true }, { "name": "padding", "type": "ListItemPadding | undefined", "declared_type": "ListItemPadding", "required": false, "description": "Row padding preset.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 97 }, "values": [ "card", "flush", "sheet" ], "values_complete": true }, { "name": "size", "type": "ListItemSize | undefined", "declared_type": "ListItemSize", "required": false, "description": "Row density. `sm` renders a compact row (32px leading slot). Defaults to `md`.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 99 }, "values": [ "md", "sm" ], "values_complete": true }, { "name": "surface", "type": "\"page\" | \"surface\" | undefined", "declared_type": "CdsSurface", "required": false, "description": "Row background on the `page | surface` scale. Defaults to `surface`\n(elevated card row); `page` sits flush on a page-level background.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 104 }, "values": [ "page", "surface" ], "values_complete": true }, { "name": "id", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Optional id for the row container or interactive control.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 106 } }, { "name": "ariaControls", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Id of content controlled by this row when used as a disclosure trigger.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 108 } }, { "name": "expanded", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Expanded state announced for interactive rows.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 110 }, "values": [ false, true ], "values_complete": true }, { "name": "disabled", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Dims the row and blocks presses. A disabled selection row keeps its radio/checkbox\nsemantics so the choice stays announced — it just can't be chosen.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 115 }, "values": [ false, true ], "values_complete": true }, { "name": "onPress", "type": "(() => void) | undefined", "declared_type": "() => void", "required": false, "description": "Called when the row is pressed.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 117 } }, { "name": "ariaLabel", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Accessible label for interactive rows when visible copy is not sufficient.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 119 } }, { "name": "haptic", "type": "HapticFeedback | undefined", "declared_type": "HapticFeedback", "required": false, "description": "Haptic feedback for interactive row presses. Defaults to `true` (`light`).", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 121 }, "values": [ "error", "heavy", "light", "medium", "selection", "success", "warning", false, true ], "values_complete": true }, { "name": "testId", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Test selector. Lands on the row's button when it is pressable, otherwise on the container.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 123 } } ], "branches": [], "constraints": [], "extraction_status": "extracted" }, { "name": "List.Item.Selection", "signature": 1, "visibility": "public", "source": { "path": "packages/design-system/src/components/organization/ListItem/ListItem.tsx", "line": 46 }, "props_type": "ListItemSelectionProps", "props": [ { "name": "selectionMode", "type": "ListItemSelectionMode | undefined", "declared_type": "ListItemSelectionMode", "required": false, "description": "Selection control shape.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 132 }, "values": [ "multiple", "single" ], "values_complete": true, "default": "'multiple'", "default_kind": "source-expression" }, { "name": "selectionPlacement", "type": "ListItemSelectionPlacement | undefined", "declared_type": "ListItemSelectionPlacement", "required": false, "description": "Where the control renders; `leading` replaces the leading icon. Defaults to `trailing`.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 134 }, "values": [ "leading", "trailing" ], "values_complete": true, "default": "'trailing'", "default_kind": "source-expression" }, { "name": "selected", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Current selected state.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 136 }, "values": [ false, true ], "values_complete": true, "default": "false", "default_kind": "source-expression" }, { "name": "onSelectedChange", "type": "((selected: boolean) => void) | undefined", "declared_type": "(selected: boolean) => void", "required": false, "description": "Called with the next selected state when pressed.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 138 } }, { "name": "surface", "type": "\"page\" | \"surface\" | undefined", "declared_type": "CdsSurface", "required": false, "description": "Row background on the `page | surface` scale. Defaults to `surface`\n(elevated card row); `page` sits flush on a page-level background.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 104 }, "values": [ "page", "surface" ], "values_complete": true }, { "name": "overline", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Small copy shown above the title.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 60 } }, { "name": "id", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Optional id for the row container or interactive control.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 106 } }, { "name": "style", "type": "React.CSSProperties | undefined", "declared_type": "React.CSSProperties", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 91 } }, { "name": "title", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": true, "description": "Primary row title.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 64 } }, { "name": "leading", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Custom leading content (e.g. an `Avatar`, brand logo, or `List.Item.Icon` plate).", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 54 } }, { "name": "leadingGlyph", "type": "\"number\" | \"info\" | \"guard\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"arrow-down\" | \"chevron-down\" | \"chevron-up\" | \"chevron-left\" | \"chevron-right\" | \"caret-down\" | \"caret-up\" | \"trend-up\" | \"trend-down\" | \"collapse\" | \"expand\" | \"dropdown-collapse\" | \"dropdown-expand\" | \"close\" | \"clear\" | \"menu\" | \"copy\" | \"search\" | \"add\" | \"share\" | \"phone\" | \"sim\" | \"account\" | \"family\" | \"home\" | \"wifi\" | \"cart\" | \"vpn\" | \"lock\" | \"block\" | \"timer\" | \"check\" | \"send\" | \"filter\" | \"scan\" | \"log\" | \"trash\" | \"missed\" | \"call\" | \"voicemail\" | \"sms\" | \"email\" | \"data-removal\" | \"dark-web-monitoring\" | \"cloaked-pay\" | \"cloaked-ai\" | \"sms-guard\" | \"email-guard\" | \"call-guard\" | \"card\" | \"password\" | \"bell\" | \"circle-outline\" | \"dot\" | \"settings\" | \"clock\" | \"mail\" | \"message\" | \"user\" | \"upload\" | undefined", "declared_type": "GlyphName", "required": false, "description": "Registered glyph rendered as a tone `IconTile` in the leading slot.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 56 }, "values": [ "account", "add", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "bell", "block", "call-guard", "call", "card", "caret-down", "caret-up", "cart", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-outline", "clear", "cloaked-ai", "cloaked-pay", "clock", "close", "collapse", "copy", "dark-web-monitoring", "data-removal", "dot", "dropdown-collapse", "dropdown-expand", "email-guard", "email", "expand", "family", "filter", "guard", "home", "info", "lock", "log", "mail", "menu", "message", "missed", "number", "password", "phone", "scan", "search", "send", "settings", "share", "sim", "sms-guard", "sms", "timer", "trash", "trend-down", "trend-up", "upload", "user", "voicemail", "vpn", "wifi" ], "values_complete": true }, { "name": "tone", "type": "ListItemTone | undefined", "declared_type": "ListItemTone", "required": false, "description": "Tone for the generated leading `IconTile`.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 58 }, "values": [ "brand", "danger", "guard", "identity", "info", "monitoring", "neutral", "success", "warning" ], "values_complete": true }, { "name": "overlineTrailing", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Accessory pinned to the top-right, aligned with the overline (e.g. a count badge).", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 62 } }, { "name": "titleLines", "type": "number | undefined", "declared_type": "number", "required": false, "description": "Wraps the title across up to this many lines before clamping. Defaults to single-line truncation.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 66 } }, { "name": "description", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Secondary row copy.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 68 } }, { "name": "descriptionLines", "type": "number | undefined", "declared_type": "number", "required": false, "description": "Wraps the description across up to this many lines before clamping. Defaults to single-line truncation.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 70 } }, { "name": "value", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Right-aligned value shown in the title row.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 72 } }, { "name": "tag", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Tag slot shown at the trailing edge.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 74 } }, { "name": "statusLabel", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Status text rendered through ListItem.StatusIndicator.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 76 } }, { "name": "statusTone", "type": "\"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\" | undefined", "declared_type": "StatusTone", "required": false, "description": "Status color treatment for statusLabel.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 78 }, "values": [ "danger", "info", "neutral", "success", "warning" ], "values_complete": true }, { "name": "trailing", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Custom trailing content.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 80 } }, { "name": "trailingIcon", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Icon slot shown after other trailing content.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 82 } }, { "name": "chevron", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Override for the disclosure chevron. Leave unset to derive it from interaction — any\npressable row shows one, except selection rows and rows with caller-owned trailing\ncontent. Pass `true` to force it on (e.g. a non-interactive row inside a pressable card),\nor `false` to force it off.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 89 }, "values": [ false, true ], "values_complete": true }, { "name": "className", "type": "string | undefined", "declared_type": "string", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 90 } }, { "name": "divider", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Shows a bottom divider when true.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 93 }, "values": [ false, true ], "values_complete": true }, { "name": "dividerMode", "type": "ListItemDividerMode | undefined", "declared_type": "ListItemDividerMode", "required": false, "description": "Divider alignment.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 95 }, "values": [ "full-bleed", "inset" ], "values_complete": true }, { "name": "padding", "type": "ListItemPadding | undefined", "declared_type": "ListItemPadding", "required": false, "description": "Row padding preset.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 97 }, "values": [ "card", "flush", "sheet" ], "values_complete": true }, { "name": "size", "type": "ListItemSize | undefined", "declared_type": "ListItemSize", "required": false, "description": "Row density. `sm` renders a compact row (32px leading slot). Defaults to `md`.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 99 }, "values": [ "md", "sm" ], "values_complete": true }, { "name": "ariaControls", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Id of content controlled by this row when used as a disclosure trigger.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 108 } }, { "name": "expanded", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Expanded state announced for interactive rows.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 110 }, "values": [ false, true ], "values_complete": true }, { "name": "disabled", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Dims the row and blocks presses. A disabled selection row keeps its radio/checkbox\nsemantics so the choice stays announced — it just can't be chosen.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 115 }, "values": [ false, true ], "values_complete": true }, { "name": "ariaLabel", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Accessible label for interactive rows when visible copy is not sufficient.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 119 } }, { "name": "haptic", "type": "HapticFeedback | undefined", "declared_type": "HapticFeedback", "required": false, "description": "Haptic feedback for interactive row presses. Defaults to `true` (`light`).", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 121 }, "values": [ "error", "heavy", "light", "medium", "selection", "success", "warning", false, true ], "values_complete": true }, { "name": "testId", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Test selector. Lands on the row's button when it is pressable, otherwise on the container.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 123 } } ], "branches": [], "constraints": [], "extraction_status": "extracted" }, { "name": "List.Item.Progress", "signature": 1, "visibility": "public", "source": { "path": "packages/design-system/src/components/organization/ListItem/ListItem.tsx", "line": 67 }, "props_type": "ListItemProgressProps", "props": [ { "name": "progress", "type": "number | ListItemProgress", "declared_type": "number | ListItemProgress", "required": true, "description": "Progress configuration rendered in the row.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 147 } }, { "name": "leading", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Custom leading content (e.g. an `Avatar`, brand logo, or `List.Item.Icon` plate).", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 54 } }, { "name": "leadingGlyph", "type": "\"number\" | \"info\" | \"guard\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"arrow-down\" | \"chevron-down\" | \"chevron-up\" | \"chevron-left\" | \"chevron-right\" | \"caret-down\" | \"caret-up\" | \"trend-up\" | \"trend-down\" | \"collapse\" | \"expand\" | \"dropdown-collapse\" | \"dropdown-expand\" | \"close\" | \"clear\" | \"menu\" | \"copy\" | \"search\" | \"add\" | \"share\" | \"phone\" | \"sim\" | \"account\" | \"family\" | \"home\" | \"wifi\" | \"cart\" | \"vpn\" | \"lock\" | \"block\" | \"timer\" | \"check\" | \"send\" | \"filter\" | \"scan\" | \"log\" | \"trash\" | \"missed\" | \"call\" | \"voicemail\" | \"sms\" | \"email\" | \"data-removal\" | \"dark-web-monitoring\" | \"cloaked-pay\" | \"cloaked-ai\" | \"sms-guard\" | \"email-guard\" | \"call-guard\" | \"card\" | \"password\" | \"bell\" | \"circle-outline\" | \"dot\" | \"settings\" | \"clock\" | \"mail\" | \"message\" | \"user\" | \"upload\" | undefined", "declared_type": "GlyphName", "required": false, "description": "Registered glyph rendered as a tone `IconTile` in the leading slot.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 56 }, "values": [ "account", "add", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "bell", "block", "call-guard", "call", "card", "caret-down", "caret-up", "cart", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-outline", "clear", "cloaked-ai", "cloaked-pay", "clock", "close", "collapse", "copy", "dark-web-monitoring", "data-removal", "dot", "dropdown-collapse", "dropdown-expand", "email-guard", "email", "expand", "family", "filter", "guard", "home", "info", "lock", "log", "mail", "menu", "message", "missed", "number", "password", "phone", "scan", "search", "send", "settings", "share", "sim", "sms-guard", "sms", "timer", "trash", "trend-down", "trend-up", "upload", "user", "voicemail", "vpn", "wifi" ], "values_complete": true }, { "name": "tone", "type": "ListItemTone | undefined", "declared_type": "ListItemTone", "required": false, "description": "Tone for the generated leading `IconTile`.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 58 }, "values": [ "brand", "danger", "guard", "identity", "info", "monitoring", "neutral", "success", "warning" ], "values_complete": true }, { "name": "overline", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Small copy shown above the title.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 60 } }, { "name": "overlineTrailing", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Accessory pinned to the top-right, aligned with the overline (e.g. a count badge).", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 62 } }, { "name": "title", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": true, "description": "Primary row title.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 64 } }, { "name": "titleLines", "type": "number | undefined", "declared_type": "number", "required": false, "description": "Wraps the title across up to this many lines before clamping. Defaults to single-line truncation.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 66 } }, { "name": "description", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Secondary row copy.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 68 } }, { "name": "descriptionLines", "type": "number | undefined", "declared_type": "number", "required": false, "description": "Wraps the description across up to this many lines before clamping. Defaults to single-line truncation.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 70 } }, { "name": "value", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Right-aligned value shown in the title row.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 72 } }, { "name": "tag", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Tag slot shown at the trailing edge.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 74 } }, { "name": "statusLabel", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Status text rendered through ListItem.StatusIndicator.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 76 } }, { "name": "statusTone", "type": "\"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\" | undefined", "declared_type": "StatusTone", "required": false, "description": "Status color treatment for statusLabel.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 78 }, "values": [ "danger", "info", "neutral", "success", "warning" ], "values_complete": true }, { "name": "trailing", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Custom trailing content.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 80 } }, { "name": "trailingIcon", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Icon slot shown after other trailing content.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 82 } }, { "name": "chevron", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Override for the disclosure chevron. Leave unset to derive it from interaction — any\npressable row shows one, except selection rows and rows with caller-owned trailing\ncontent. Pass `true` to force it on (e.g. a non-interactive row inside a pressable card),\nor `false` to force it off.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 89 }, "values": [ false, true ], "values_complete": true }, { "name": "className", "type": "string | undefined", "declared_type": "string", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 90 } }, { "name": "style", "type": "React.CSSProperties | undefined", "declared_type": "React.CSSProperties", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 91 } }, { "name": "divider", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Shows a bottom divider when true.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 93 }, "values": [ false, true ], "values_complete": true }, { "name": "dividerMode", "type": "ListItemDividerMode | undefined", "declared_type": "ListItemDividerMode", "required": false, "description": "Divider alignment.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 95 }, "values": [ "full-bleed", "inset" ], "values_complete": true }, { "name": "padding", "type": "ListItemPadding | undefined", "declared_type": "ListItemPadding", "required": false, "description": "Row padding preset.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 97 }, "values": [ "card", "flush", "sheet" ], "values_complete": true }, { "name": "size", "type": "ListItemSize | undefined", "declared_type": "ListItemSize", "required": false, "description": "Row density. `sm` renders a compact row (32px leading slot). Defaults to `md`.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 99 }, "values": [ "md", "sm" ], "values_complete": true }, { "name": "surface", "type": "\"page\" | \"surface\" | undefined", "declared_type": "CdsSurface", "required": false, "description": "Row background on the `page | surface` scale. Defaults to `surface`\n(elevated card row); `page` sits flush on a page-level background.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 104 }, "values": [ "page", "surface" ], "values_complete": true }, { "name": "id", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Optional id for the row container or interactive control.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 106 } }, { "name": "ariaControls", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Id of content controlled by this row when used as a disclosure trigger.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 108 } }, { "name": "expanded", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Expanded state announced for interactive rows.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 110 }, "values": [ false, true ], "values_complete": true }, { "name": "disabled", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Dims the row and blocks presses. A disabled selection row keeps its radio/checkbox\nsemantics so the choice stays announced — it just can't be chosen.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 115 }, "values": [ false, true ], "values_complete": true }, { "name": "onPress", "type": "(() => void) | undefined", "declared_type": "() => void", "required": false, "description": "Called when the row is pressed.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 117 } }, { "name": "ariaLabel", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Accessible label for interactive rows when visible copy is not sufficient.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 119 } }, { "name": "haptic", "type": "HapticFeedback | undefined", "declared_type": "HapticFeedback", "required": false, "description": "Haptic feedback for interactive row presses. Defaults to `true` (`light`).", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 121 }, "values": [ "error", "heavy", "light", "medium", "selection", "success", "warning", false, true ], "values_complete": true }, { "name": "testId", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Test selector. Lands on the row's button when it is pressable, otherwise on the container.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 123 } } ], "branches": [], "constraints": [], "extraction_status": "extracted" }, { "name": "List.Item.Stat", "signature": 1, "visibility": "public", "source": { "path": "packages/design-system/src/components/organization/ListItem/ListItemStat/ListItemStat.tsx", "line": 10 }, "props_type": "ListItemStatProps", "props": [ { "name": "label", "type": "string", "declared_type": "string", "required": true, "description": "The key, rendered as secondary text on the left.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 156 } }, { "name": "value", "type": "string | number", "declared_type": "string | number", "required": true, "description": "The statistic, rendered as primary text on the right.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 158 } }, { "name": "divider", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Shows the row divider when true.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 160 }, "values": [ false, true ], "values_complete": true, "default": "true", "default_kind": "source-expression" }, { "name": "testId", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Test selector; lands on the wrapper around the row and its divider.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 162 } } ], "branches": [], "constraints": [], "extraction_status": "extracted" }, { "name": "List.Item.Empty", "signature": 1, "visibility": "public", "source": { "path": "packages/design-system/src/components/organization/ListItem/ListItemEmpty/ListItemEmpty.tsx", "line": 10 }, "props_type": "ListItemEmptyProps", "props": [ { "name": "message", "type": "string", "declared_type": "string", "required": true, "description": "The empty-state copy, rendered as secondary text.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 171 } }, { "name": "testId", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Test selector for the placeholder container.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 173 } } ], "branches": [], "constraints": [], "extraction_status": "extracted" }, { "name": "List.Item.Icon", "signature": 1, "visibility": "public", "source": { "path": "packages/design-system/src/components/organization/ListItem/ListItemIcon/ListItemIcon.tsx", "line": 11 }, "props_type": "ListItemIconProps", "props": [ { "name": "children", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 181 } }, { "name": "initial", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Fallback initial shown when children are absent.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 183 } }, { "name": "tone", "type": "ListItemTone | undefined", "declared_type": "ListItemTone", "required": false, "description": "Tokenized icon color treatment.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 185 }, "values": [ "brand", "danger", "guard", "identity", "info", "monitoring", "neutral", "success", "warning" ], "values_complete": true, "default": "'neutral'", "default_kind": "source-expression" }, { "name": "label", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Accessible label for meaningful icons.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 187 } }, { "name": "background", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Custom background color.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 189 } }, { "name": "foreground", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Custom foreground color.", "source": { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 191 } } ], "branches": [], "constraints": [], "extraction_status": "extracted" }, { "name": "List.Item.StatusIndicator", "signature": 1, "visibility": "public", "source": { "path": "packages/design-system/src/components/status/StatusIndicator/StatusIndicator.tsx", "line": 25 }, "props_type": "StatusIndicatorProps", "props": [ { "name": "children", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": true, "description": "", "source": { "path": "packages/design-system/src/components/status/StatusIndicator/StatusIndicator.tsx", "line": 13 } }, { "name": "tone", "type": "\"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\" | undefined", "declared_type": "StatusTone", "required": false, "description": "Semantic status color for the dot; maps to the `--cds-status-*` tokens. Defaults to `neutral`.", "source": { "path": "packages/design-system/src/components/status/StatusIndicator/StatusIndicator.tsx", "line": 15 }, "values": [ "danger", "info", "neutral", "success", "warning" ], "values_complete": true, "default": "'neutral'", "default_kind": "source-expression" }, { "name": "className", "type": "string | undefined", "declared_type": "string", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/status/StatusIndicator/StatusIndicator.tsx", "line": 16 } }, { "name": "testId", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Optional test selector.", "source": { "path": "packages/design-system/src/components/status/StatusIndicator/StatusIndicator.tsx", "line": 18 } } ], "branches": [], "constraints": [], "extraction_status": "extracted" }, { "name": "List.Item.ArrowIcon", "signature": 1, "visibility": "public", "source": { "path": "packages/design-system/src/components/organization/ListItem/ListItemActionIcons/ListItemActionIcons.tsx", "line": 13 }, "props_type": null, "props": [], "branches": [], "constraints": [], "extraction_status": "extracted" }, { "name": "List.Item.ChevronIcon", "signature": 1, "visibility": "public", "source": { "path": "packages/design-system/src/components/organization/ListItem/ListItemActionIcons/ListItemActionIcons.tsx", "line": 20 }, "props_type": null, "props": [], "branches": [], "constraints": [], "extraction_status": "extracted" }, { "name": "List.Item.CopyIcon", "signature": 1, "visibility": "public", "source": { "path": "packages/design-system/src/components/organization/ListItem/ListItemActionIcons/ListItemActionIcons.tsx", "line": 27 }, "props_type": null, "props": [], "branches": [], "constraints": [], "extraction_status": "extracted" }, { "name": "List.Item.MailIcon", "signature": 1, "visibility": "public", "source": { "path": "packages/design-system/src/components/organization/ListItem/ListItemActionIcons/ListItemActionIcons.tsx", "line": 34 }, "props_type": null, "props": [], "branches": [], "constraints": [], "extraction_status": "extracted" }, { "name": "List.Item.PhoneIcon", "signature": 1, "visibility": "public", "source": { "path": "packages/design-system/src/components/organization/ListItem/ListItemActionIcons/ListItemActionIcons.tsx", "line": 41 }, "props_type": null, "props": [], "branches": [], "constraints": [], "extraction_status": "extracted" }, { "name": "List.Item.MessageIcon", "signature": 1, "visibility": "public", "source": { "path": "packages/design-system/src/components/organization/ListItem/ListItemActionIcons/ListItemActionIcons.tsx", "line": 48 }, "props_type": null, "props": [], "branches": [], "constraints": [], "extraction_status": "extracted" } ], "type_sources": [ { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 9, "name": "ListItemDividerMode", "code": "export type ListItemDividerMode = 'full-bleed' | 'inset';" }, { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 10, "name": "ListItemPadding", "code": "export type ListItemPadding = 'card' | 'sheet' | 'flush';" }, { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 14, "name": "ListItemSize", "code": "export type ListItemSize = 'sm' | 'md';" }, { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 15, "name": "ListItemSelectionMode", "code": "export type ListItemSelectionMode = 'single' | 'multiple';" }, { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 25, "name": "ListItemSelectionPlacement", "code": "export type ListItemSelectionPlacement = 'leading' | 'trailing';" }, { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 26, "name": "ListItemTone", "code": "export type ListItemTone = StatusTone | 'brand' | FeatureTone;" }, { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 29, "name": "ListItemProgressBase", "code": "interface ListItemProgressBase {\n /** Progress value used by ring/bar variants. */\n value?: number;\n /** Completed step count for step progress. */\n current?: number;\n /** Total step count for step progress. */\n total?: number;\n /** Optional text shown beside the title. */\n label?: string;\n /** Accessible progress label. */\n ariaLabel?: string;\n}" }, { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 42, "name": "ListItemInlineProgress", "code": "export type ListItemInlineProgress =\n | (ListItemProgressBase & { kind: 'bar'; value: number })\n | (ListItemProgressBase & { kind: 'steps' });" }, { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 45, "name": "ListItemRingProgress", "code": "export type ListItemRingProgress = ListItemProgressBase & { kind?: 'ring' };" }, { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 46, "name": "ListItemProgress", "code": "export type ListItemProgress = ListItemInlineProgress | ListItemRingProgress;" }, { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 52, "name": "ListItemProps", "code": "export interface ListItemProps {\n /** Custom leading content (e.g. an `Avatar`, brand logo, or `List.Item.Icon` plate). */\n leading?: React.ReactNode;\n /** Registered glyph rendered as a tone `IconTile` in the leading slot. */\n leadingGlyph?: GlyphName;\n /** Tone for the generated leading `IconTile`. */\n tone?: ListItemTone;\n /** Small copy shown above the title. */\n overline?: React.ReactNode;\n /** Accessory pinned to the top-right, aligned with the overline (e.g. a count badge). */\n overlineTrailing?: React.ReactNode;\n /** Primary row title. */\n title: React.ReactNode;\n /** Wraps the title across up to this many lines before clamping. Defaults to single-line truncation. */\n titleLines?: number;\n /** Secondary row copy. */\n description?: React.ReactNode;\n /** Wraps the description across up to this many lines before clamping. Defaults to single-line truncation. */\n descriptionLines?: number;\n /** Right-aligned value shown in the title row. */\n value?: React.ReactNode;\n /** Tag slot shown at the trailing edge. */\n tag?: React.ReactNode;\n /** Status text rendered through ListItem.StatusIndicator. */\n statusLabel?: React.ReactNode;\n /** Status color treatment for statusLabel. */\n statusTone?: StatusTone;\n /** Custom trailing content. */\n trailing?: React.ReactNode;\n /** Icon slot shown after other trailing content. */\n trailingIcon?: React.ReactNode;\n /**\n * Override for the disclosure chevron. Leave unset to derive it from interaction — any\n * pressable row shows one, except selection rows and rows with caller-owned trailing\n * content. Pass `true` to force it on (e.g. a non-interactive row inside a pressable card),\n * or `false` to force it off.\n */\n chevron?: boolean;\n className?: string;\n style?: React.CSSProperties;\n /** Shows a bottom divider when true. */\n divider?: boolean;\n /** Divider alignment. */\n dividerMode?: ListItemDividerMode;\n /** Row padding preset. */\n padding?: ListItemPadding;\n /** Row density. `sm` renders a compact row (32px leading slot). Defaults to `md`. */\n size?: ListItemSize;\n /**\n * Row background on the `page | surface` scale. Defaults to `surface`\n * (elevated card row); `page` sits flush on a page-level background.\n */\n surface?: CdsSurface;\n /** Optional id for the row container or interactive control. */\n id?: string;\n /** Id of content controlled by this row when used as a disclosure trigger. */\n ariaControls?: string;\n /** Expanded state announced for interactive rows. */\n expanded?: boolean;\n /**\n * Dims the row and blocks presses. A disabled selection row keeps its radio/checkbox\n * semantics so the choice stays announced — it just can't be chosen.\n */\n disabled?: boolean;\n /** Called when the row is pressed. */\n onPress?: () => void;\n /** Accessible label for interactive rows when visible copy is not sufficient. */\n ariaLabel?: string;\n /** Haptic feedback for interactive row presses. Defaults to `true` (`light`). */\n haptic?: HapticFeedback;\n /** Test selector. Lands on the row's button when it is pressable, otherwise on the container. */\n testId?: string;\n}" }, { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 130, "name": "ListItemSelectionProps", "code": "export interface ListItemSelectionProps extends Omit {\n /** Selection control shape. */\n selectionMode?: ListItemSelectionMode;\n /** Where the control renders; `leading` replaces the leading icon. Defaults to `trailing`. */\n selectionPlacement?: ListItemSelectionPlacement;\n /** Current selected state. */\n selected?: boolean;\n /** Called with the next selected state when pressed. */\n onSelectedChange?: (selected: boolean) => void;\n}" }, { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 145, "name": "ListItemProgressProps", "code": "export interface ListItemProgressProps extends ListItemProps {\n /** Progress configuration rendered in the row. */\n progress: number | ListItemProgress;\n}" }, { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 154, "name": "ListItemStatProps", "code": "export interface ListItemStatProps {\n /** The key, rendered as secondary text on the left. */\n label: string;\n /** The statistic, rendered as primary text on the right. */\n value: string | number;\n /** Shows the row divider when true. */\n divider?: boolean;\n /** Test selector; lands on the wrapper around the row and its divider. */\n testId?: string;\n}" }, { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 169, "name": "ListItemEmptyProps", "code": "export interface ListItemEmptyProps {\n /** The empty-state copy, rendered as secondary text. */\n message: string;\n /** Test selector for the placeholder container. */\n testId?: string;\n}" }, { "path": "packages/design-system/src/components/organization/ListItem/types.ts", "line": 180, "name": "ListItemIconProps", "code": "export interface ListItemIconProps {\n children?: React.ReactNode;\n /** Fallback initial shown when children are absent. */\n initial?: string;\n /** Tokenized icon color treatment. */\n tone?: ListItemTone;\n /** Accessible label for meaningful icons. */\n label?: string;\n /** Custom background color. */\n background?: string;\n /** Custom foreground color. */\n foreground?: string;\n}" }, { "path": "packages/design-system/src/components/status/StatusIndicator/StatusIndicator.tsx", "line": 12, "name": "StatusIndicatorProps", "code": "export interface StatusIndicatorProps {\n children: React.ReactNode;\n /** Semantic status color for the dot; maps to the `--cds-status-*` tokens. Defaults to `neutral`. */\n tone?: StatusTone;\n className?: string;\n /** Optional test selector. */\n testId?: string;\n}" }, { "path": "packages/design-system/src/styles/featureTone.ts", "line": 9, "name": "FEATURE_TONES", "code": "FEATURE_TONES = ['monitoring', 'guard', 'identity'] as const" }, { "path": "packages/design-system/src/styles/featureTone.ts", "line": 11, "name": "FeatureTone", "code": "export type FeatureTone = (typeof FEATURE_TONES)[number];" }, { "path": "packages/design-system/src/styles/statusTone.ts", "line": 7, "name": "STATUS_TONES", "code": "STATUS_TONES = ['neutral', 'info', 'success', 'warning', 'danger'] as const" }, { "path": "packages/design-system/src/styles/statusTone.ts", "line": 9, "name": "StatusTone", "code": "export type StatusTone = (typeof STATUS_TONES)[number];" }, { "path": "packages/design-system/src/tokens/CdsHaptic.ts", "line": 6, "name": "HapticFeedback", "code": "export type HapticFeedback = boolean | HapticType;" }, { "path": "packages/design-system/src/tokens/CdsSurface.ts", "line": 5, "name": "PUI_SURFACES", "code": "PUI_SURFACES = ['page', 'surface'] as const" }, { "path": "packages/design-system/src/tokens/CdsSurface.ts", "line": 7, "name": "CdsSurface", "code": "export type CdsSurface = (typeof PUI_SURFACES)[number];" }, { "path": "packages/design-system/src/tokens/HapticType.ts", "line": 2, "name": "HapticType", "code": "export type HapticType = 'light' | 'medium' | 'heavy' | 'success' | 'warning' | 'error' | 'selection';" }, { "path": "packages/design-system/src/types/GlyphName.ts", "line": 10, "name": "GLYPH_NAMES", "code": "GLYPH_NAMES = [\n // Action\n 'arrow-left',\n 'arrow-right',\n 'arrow-up',\n 'arrow-down',\n 'chevron-down',\n 'chevron-up',\n 'chevron-left',\n 'chevron-right',\n 'caret-down',\n 'caret-up',\n // Trend lines, for a change in a figure over time. Distinct from the arrows and carets above,\n // which point at a direction without implying a measurement moved.\n 'trend-up',\n 'trend-down',\n 'collapse',\n 'expand',\n 'dropdown-collapse',\n 'dropdown-expand',\n 'close',\n 'clear',\n 'menu',\n 'copy',\n 'search',\n 'add',\n // Renders the `send` drawing; a separate name for share-sheet actions.\n 'share',\n // System\n 'phone',\n 'sim',\n 'account',\n 'family',\n 'home',\n 'wifi',\n 'cart',\n 'vpn',\n 'lock',\n 'block',\n 'timer',\n 'check',\n 'send',\n 'info',\n 'number',\n 'filter',\n 'scan',\n 'log',\n 'trash',\n // Inbox\n 'missed',\n 'call',\n 'voicemail',\n 'sms',\n 'email',\n // Feature\n 'data-removal',\n 'dark-web-monitoring',\n 'cloaked-pay',\n 'cloaked-ai',\n 'sms-guard',\n 'email-guard',\n 'call-guard',\n 'card',\n 'password',\n 'guard',\n // Legacy aliases (kept for back-compat; render the Figma glyph)\n 'bell',\n 'circle-outline',\n 'dot',\n 'settings',\n 'clock',\n 'mail',\n 'message',\n 'user',\n 'upload',\n] as const" }, { "path": "packages/design-system/src/types/GlyphName.ts", "line": 87, "name": "GlyphName", "code": "export type GlyphName = (typeof GLYPH_NAMES)[number];" } ], "defaults_policy": "Only explicit destructured parameter initializers are extracted. Other runtime defaults remain in implementation source." }, "spec": { "$schema": "../../../specs/component-spec.schema.json", "identity": { "name": "ListItem", "status": "preview", "version": "0.1.0-preview.1", "summary": "A row composed from leading, text and trailing slots, with selection, progress, stat, empty and icon helpers. Public consumers import List and use List.Item; ListItem is not a separate package-root export." }, "parts": [ { "id": "root", "label": "Row target", "description": "Full-width row; becomes a button only when an action or selection callback exists.", "required": true }, { "id": "leading", "label": "Leading visual", "description": "Custom content or a generated tone tile; leading selection replaces this slot.", "required": false }, { "id": "body", "label": "Text body", "description": "Required title plus optional overline, description and inline progress.", "required": true }, { "id": "value", "label": "Value", "description": "Optional right-aligned value in the title line.", "required": false }, { "id": "trailing", "label": "Trailing accessory", "description": "One accessory selected by precedence, followed by a derived or explicit chevron.", "required": false }, { "id": "separator", "label": "Divider", "description": "Optional row-owned hairline; List supplies container separators.", "required": false }, { "id": "selection", "label": "Selection mark", "description": "Check or dot mark backed by the row interaction semantics.", "required": false }, { "id": "progress", "label": "Progress", "description": "Ring at the trailing edge, or bar/steps under the copy.", "required": false } ], "allowedDesignChoices": { "variants": { "row": { "label": "List.Item" }, "selection": { "label": "List.Item.Selection" }, "progress": { "label": "List.Item.Progress" }, "stat": { "label": "List.Item.Stat" }, "empty": { "label": "List.Item.Empty" }, "icon": { "label": "List.Item.Icon" } }, "sizes": { "sm": { "label": "Compact", "description": "48px minimum, 8px gap and block padding." }, "md": { "label": "Default", "description": "Content-dependent 48px, 64px or 80px minimum; progress can increase it." } }, "selectionModes": { "single": { "label": "Single", "description": "Radio semantics; pressing the selected row reports true." }, "multiple": { "label": "Multiple", "description": "Checkbox semantics; activation reports the inverse selected state." } }, "selectionPlacements": { "leading": { "label": "Leading", "description": "Replaces an existing leading visual to preserve its column." }, "trailing": { "label": "Trailing", "description": "Default; suitable for rows without a leading visual." } }, "surfaces": { "page": { "label": "Page" }, "surface": { "label": "Surface" } }, "padding": { "card": { "label": "Card" }, "sheet": { "label": "Sheet" }, "flush": { "label": "Flush" } } }, "variants": [ { "id": "row", "label": "Base row", "description": "Informational or pressable row composed from slots.", "platforms": [ "web" ] }, { "id": "selection", "label": "Selection row", "description": "Use onSelectedChange with a controlled selected value. Choose single or multiple selection.", "platforms": [ "web" ] }, { "id": "progress", "label": "Progress row", "description": "A number is shorthand for a trailing ring; a progress object chooses ring, bar or steps.", "platforms": [ "web" ] }, { "id": "stat", "label": "Statistic row", "description": "Noninteractive label/value helper; it has its own divider prop.", "platforms": [ "web" ] }, { "id": "empty", "label": "Empty placeholder", "description": "A centered message for an empty list, not a loading indicator.", "platforms": [ "web" ] }, { "id": "icon", "label": "Leading icon helper", "description": "Tone plate for a custom leading node; generated leadingGlyph tiles do not need it.", "platforms": [ "web" ] } ], "sizes": [ { "id": "sm", "label": "Compact", "description": "Small density overrides rich-row height and removes inline inset; the container supplies spacing." }, { "id": "md", "label": "Default", "description": "Default density grows with leading/trailing accessories, description, selection and progress." } ], "measurements": [ { "id": "base-min-height", "label": "Base row minimum height", "kind": "at-least", "token": "--cds-size-48", "value": 48, "unit": "px", "appliesTo": [ "root" ] }, { "id": "rich-min-height", "label": "Rich row minimum height", "kind": "at-least", "token": "--cds-size-80", "value": 80, "unit": "px", "appliesTo": [ "root" ], "notes": "Applies to md rows with leading content, trailing content or description; a tag-only trailing slot does not promote the row." }, { "id": "selection-min-height", "label": "Copy-only selection minimum height", "kind": "at-least", "token": "--cds-size-64", "value": 64, "unit": "px", "appliesTo": [ "selection" ], "notes": "For trailing selection with card padding and no description or leading slot; compact density is excluded." }, { "id": "row-gap", "label": "Default row gap", "kind": "exact", "token": "--cds-space-12", "value": 12, "unit": "px", "appliesTo": [ "root" ] }, { "id": "compact-gap", "label": "Compact row gap", "kind": "exact", "token": "--cds-space-8", "value": 8, "unit": "px", "appliesTo": [ "root" ] }, { "id": "row-inset", "label": "Default inline inset", "kind": "exact", "token": "--cds-space-20", "value": 20, "unit": "px", "appliesTo": [ "root" ] }, { "id": "selection-gap", "label": "Trailing selection gap", "kind": "exact", "token": "--cds-space-24", "value": 24, "unit": "px", "appliesTo": [ "selection" ] }, { "id": "empty-min-height", "label": "Empty placeholder minimum height", "kind": "at-least", "token": "--cds-size-240", "value": 240, "unit": "px", "appliesTo": [ "root" ] } ], "layout": { "alignment": "Leading visual, text body and trailing accessory align centrally; the body flexes while accessories keep their width.", "flow": "Slots run left to right; overline, title, description and inline progress stack within the body.", "notes": [ "Accessory precedence is trailing, tag, status, selection, trailing progress, then trailingIcon. A chevron can follow the chosen accessory.", "Explicit value wins over a progress label. Custom leading content wins over a generated glyph tile.", "A selected leading control occupies the existing 40px md or 32px sm visual column. Use trailing selection for icon-less rows to avoid adding a column.", "List suppresses a direct List.Item divider. Compound Selection, Progress and Stat members retain their own divider; set divider=false when the container already draws separators." ] }, "typographyAndColor": { "typography": [ { "label": "Title and value", "description": "Use the body ramp.", "token": "--cds-type-body-size" }, { "label": "Description", "description": "Uses body-small with a local 1.2 line-height.", "token": "--cds-type-body-small-size" } ], "colors": [ { "label": "Primary text", "description": "Title and value.", "token": "--cds-text-primary" }, { "label": "Secondary text", "description": "Overline, description, stat label and empty message.", "token": "--cds-text-secondary" }, { "label": "Default surface", "description": "Default and selected row background.", "token": "--cds-bg-surface" }, { "label": "Page surface", "description": "Page-level row background.", "token": "--cds-bg-page" }, { "label": "Divider", "description": "Row-owned and container separators.", "token": "--cds-divider" } ] }, "states": [ { "id": "informational", "label": "Informational", "description": "Without callbacks the row is not a press target." }, { "id": "pressable", "label": "Pressable", "description": "onPress produces a button and normally a chevron; caller-owned trailing content or chevron=false suppresses the automatic chevron." }, { "id": "selected", "label": "Selected", "description": "The host supplies selected. Single activation reports true; multiple activation reports the inverse value." }, { "id": "disabled", "label": "Disabled", "description": "Prevents action and selection callbacks and dims the row. Disabled interactive selection still exposes its state." }, { "id": "progress", "label": "Progress", "description": "Rings render trailing, bars and steps inline. The host owns progress updates." }, { "id": "empty", "label": "Empty", "description": "List.Item.Empty renders its message in a centered 240px-minimum block." } ], "behavior": [ { "label": "Controlled selection", "description": "Selection is host-owned. No callback means no row button; the helper uses a disabled, read-only form control to expose that selection state." }, { "label": "Navigation and disclosure", "description": "Base onPress is host-owned. ariaControls and expanded can describe a disclosure target but do not implement expansion." }, { "label": "Separator ownership", "description": "Use List for list structure and separator ownership. Standalone rows do not claim listitem semantics; compound members need an explicit divider decision." }, { "label": "No nested interactive slots", "description": "A pressable row is already the single control. Keep leading and trailing content noninteractive within it." } ], "accessibility": [ { "label": "Button, checkbox and radio roles", "description": "Interactive rows are native buttons. Selection rows expose checkbox or radio role and aria-checked; their visible title labels them and their description is associated when present." }, { "label": "Names and disabled state", "description": "ariaLabel can replace visible naming when needed. Native disabled blocks keyboard and pointer activation; the selected state stays represented." }, { "label": "Group behavior belongs to the host", "description": "Single selection announces radio semantics, but this row family does not implement radio-group arrow-key movement or enforce one chosen row. The consumer must define and verify group behavior." }, { "label": "Visible keyboard focus", "description": "Interactive rows inherit the shared focus-visible outline. Its inset offset preserves the indicator within clipped list or card containers; disabled native buttons do not receive keyboard focus." }, { "label": "List ownership", "description": "List wraps content rows with role=listitem. A standalone row is a generic container or control, not a listitem by itself." } ], "contentAdaptation": [ { "label": "Clamping", "description": "Title and description default to one-line truncation. Positive titleLines and descriptionLines enable multi-line clamping; overline and value remain single-line. Value has a 46% maximum width." }, { "label": "Empty versus pending", "description": "Use Empty for a known empty result. It does not represent pending data, errors or a retry action." }, { "label": "Review dense combinations", "description": "Verify long titles, descriptions, values, tags, localized copy and large text at narrow widths. Do not combine every slot by default." } ], "motionHaptics": { "motion": [ { "label": "Press feedback", "description": "Interactive rows use the shared fast press transform and opacity change; reduced-motion removes the transform. Progress and selection visuals use their own primitives." } ], "haptics": [ { "label": "Action feedback", "description": "Enabled action and selection callbacks request light feedback by default; haptic can override or disable it. Delivery depends on provider and host support." } ] }, "platformDifferences": [ { "platforms": [ "ios", "android" ], "description": "Native implementations and platform parity are not verified. Vue also has no local implementation.", "rationale": "This preview was authored from the local React types, implementation, styles and documentation. Native unit, typography, interaction and accessibility mappings require platform review." } ] }, "platforms": { "implemented": [ "web" ], "native": "Imported design guidance only; no native implementation or parity verification in this preview.", "react": { "implementation": "local", "status": "preview", "parity": "web-reference" }, "vue": { "implementation": "absent", "parity": "not-verified", "status": "reference-only" }, "swift": { "implementation": "absent", "parity": "not-verified", "status": "reference-only" }, "kotlin": { "implementation": "absent", "parity": "not-verified", "status": "reference-only" } }, "tokens": [ { "name": "--cds-size-48", "light": "48px", "dark": "48px" }, { "name": "--cds-size-80", "light": "80px", "dark": "80px" }, { "name": "--cds-size-64", "light": "64px", "dark": "64px" }, { "name": "--cds-space-12", "light": "12px", "dark": "12px" }, { "name": "--cds-space-8", "light": "8px", "dark": "8px" }, { "name": "--cds-space-20", "light": "20px", "dark": "20px" }, { "name": "--cds-space-24", "light": "24px", "dark": "24px" }, { "name": "--cds-size-240", "light": "240px", "dark": "240px" }, { "name": "--cds-type-body-size", "light": "1rem", "dark": "1rem" }, { "name": "--cds-type-body-small-size", "light": "0.875rem", "dark": "0.875rem" }, { "name": "--cds-text-primary", "light": "#141410", "dark": "#f3f1ed" }, { "name": "--cds-text-secondary", "light": "#646260", "dark": "#ffffff99" }, { "name": "--cds-bg-surface", "light": "#ffffff", "dark": "#1b1b18" }, { "name": "--cds-bg-page", "light": "#f3f1ed", "dark": "#141410" }, { "name": "--cds-divider", "light": "#e0ddd6", "dark": "#ffffff1a" } ], "review": { "local_status": "not-reviewed", "source_approval": null, "imported_spec_status": null, "spec_origin": "local-authored", "local_spec_source_status": "preview", "imported_source_revision": "f96f416e1c3bfbfaffcd155a88b87b18b8bb25f1", "note": "Inherited specification status is provenance, not approval of the current local implementation or extracted contract." }, "missing_facts": [ { "code": "human-review-pending", "detail": "This local preview has no recorded human design or engineering sign-off." }, { "code": "platform-parity-unverified", "detail": "Vue, Swift and Kotlin implementations are absent from this package; platform parity has not been verified." }, { "code": "figma-mapping-unverified", "detail": "No current component-level Figma node and immutable revision have been verified for this contract." } ] } ``` ## Visual states - [Playground](/storybook/iframe.html?id=cloaked-design-system-organization-list-item--playground&viewMode=story) | export: Playground | source: packages/design-system/src/components/organization/ListItem/ListItem.stories.tsx - [Text Card Padding](/storybook/iframe.html?id=cloaked-design-system-organization-list-item--text-card-padding&viewMode=story) | export: TextCardPadding | source: packages/design-system/src/components/organization/ListItem/ListItem.stories.tsx - [Text Sheet Padding](/storybook/iframe.html?id=cloaked-design-system-organization-list-item--text-sheet-padding&viewMode=story) | export: TextSheetPadding | source: packages/design-system/src/components/organization/ListItem/ListItem.stories.tsx - [Text Zero Value](/storybook/iframe.html?id=cloaked-design-system-organization-list-item--text-zero-value&viewMode=story) | export: TextZeroValue | source: packages/design-system/src/components/organization/ListItem/ListItem.stories.tsx - [Icon Tile Leading](/storybook/iframe.html?id=cloaked-design-system-organization-list-item--icon-tile-leading&viewMode=story) | export: IconTileLeading | source: packages/design-system/src/components/organization/ListItem/ListItem.stories.tsx - [Arrow](/storybook/iframe.html?id=cloaked-design-system-organization-list-item--arrow&viewMode=story) | export: Arrow | source: packages/design-system/src/components/organization/ListItem/ListItem.stories.tsx - [Selection Multiple](/storybook/iframe.html?id=cloaked-design-system-organization-list-item--selection-multiple&viewMode=story) | export: SelectionMultiple | source: packages/design-system/src/components/organization/ListItem/ListItem.stories.tsx - [Selection Single](/storybook/iframe.html?id=cloaked-design-system-organization-list-item--selection-single&viewMode=story) | export: SelectionSingle | source: packages/design-system/src/components/organization/ListItem/ListItem.stories.tsx - [Avatar Initials Leading](/storybook/iframe.html?id=cloaked-design-system-organization-list-item--avatar-initials-leading&viewMode=story) | export: AvatarInitialsLeading | source: packages/design-system/src/components/organization/ListItem/ListItem.stories.tsx - [Custom Leading Marker](/storybook/iframe.html?id=cloaked-design-system-organization-list-item--custom-leading-marker&viewMode=story) | export: CustomLeadingMarker | source: packages/design-system/src/components/organization/ListItem/ListItem.stories.tsx - [Progress Variants](/storybook/iframe.html?id=cloaked-design-system-organization-list-item--progress-variants&viewMode=story) | export: ProgressVariants | source: packages/design-system/src/components/organization/ListItem/ListItem.stories.tsx - [With Tag](/storybook/iframe.html?id=cloaked-design-system-organization-list-item--with-tag&viewMode=story) | export: WithTag | source: packages/design-system/src/components/organization/ListItem/ListItem.stories.tsx - [With Status](/storybook/iframe.html?id=cloaked-design-system-organization-list-item--with-status&viewMode=story) | export: WithStatus | source: packages/design-system/src/components/organization/ListItem/ListItem.stories.tsx - [Mixed List](/storybook/iframe.html?id=cloaked-design-system-organization-list-item--mixed-list&viewMode=story) | export: MixedList | source: packages/design-system/src/components/organization/ListItem/ListItem.stories.tsx - [Empty State](/storybook/iframe.html?id=cloaked-design-system-organization-list-item--empty-state&viewMode=story) | export: EmptyState | source: packages/design-system/src/components/organization/ListItem/ListItem.stories.tsx - [Stat](/storybook/iframe.html?id=cloaked-design-system-organization-list-item--stat&viewMode=story) | export: Stat | source: packages/design-system/src/components/organization/ListItem/ListItem.stories.tsx - [Icon Plate](/storybook/iframe.html?id=cloaked-design-system-organization-list-item--icon-plate&viewMode=story) | export: IconPlate | source: packages/design-system/src/components/organization/ListItem/ListItem.stories.tsx - [Tone Matrix](/storybook/iframe.html?id=cloaked-design-system-organization-list-item--tone-matrix&viewMode=story) | export: ToneMatrix | source: packages/design-system/src/components/organization/ListItem/ListItem.stories.tsx - [Dark Theme](/storybook/iframe.html?id=cloaked-design-system-organization-list-item--dark-theme&viewMode=story) | export: DarkTheme | source: packages/design-system/src/components/organization/ListItem/ListItem.stories.tsx Preview pending human sign-off. Source-derived APIs and successful checks do not certify accessibility, native parity or approval.