RestructureNeeds Refinement
List Item Asset Component link

A list-item variant with a leading asset slot — image, icon, or avatar — alongside the label.

Flatten the variant matrix + adopt Figma Slots
Replace the entangled type × indicator × state axes with a single semantic variant enum (check, check-positive, pending, pending-notice, bullet, hollow, square, numbered, custom). Replace the Custom placeholder circle with a Figma Slot so product teams can drop in any 16×16 asset without instance-swap.
In Context

List Item Asset appears inside List Items — see the List Item preview for the composed layout.

Live Preview
Proposed API
variant
DS Health
Reusable
Pass
Covers task lists, ordered/unordered lists, and custom-marker lists. Used across onboarding flows, terms pages, and step indicators.
Self-contained
Pass
All colors, sizes, typography bound to tokens. 16 × 16 bounding box is fixed.
Consistent
Warn
Three properties (type, indicator, state) that shouldn't multiply freely — most combinations are invalid. Creates phantom variants in Figma's variant picker. C2
Composable
Warn
indicator=Custom exposes a gray circle icon-placeholder instead of a Figma Slot. Blocks product teams from dropping in custom 16 × 16 assets without local overrides. C6
Open Issues
  • Variant matrix is entangled. type × indicator × state = 72 theoretical combinations but only ~10 are valid. Flatten into one semantic variant enum to eliminate invalid combos. C2 · Variant & Property Naming
  • Numbered indicator hardcodes "1." No way to pass the ordinal — numbered lists of 5 items all show "1." in Figma. Expose a number text property. C5 · Interaction State Coverage
  • indicator=Custom is a hardcoded gray circle. Should be a Figma Slot that accepts any 16×16 asset via instance swap. C6 · Asset & Icon Quality
  • Code Connect mappings not registered. Blocked until variant flatten and slot adoption land. C7 · Code Connect Linkability
Design Recommendations
  • Flatten the variant matrix — replace type + indicator + state with a single semantic variant enum: check / check-positive / pending / pending-notice / bullet / hollow / square / numbered / custom. ~9 real variants, no invalid combinations possible. Property
  • Adopt a Figma Slot for variant=custom — declare a named asset slot so product teams can drop in any 16 × 16 component instance without editing the master. Maps cleanly to a @ViewBuilder slot (SwiftUI) or @Composable slot (Compose) via Code Connect. Slot
  • Parameterize the numbered indicator — expose a number text property so ordered lists can show the actual ordinal. In Figma this is a text override; in native it's a number: Int param. Property
Styles
All markers
DES DEV

Pick a marker variant to preview. The 9 marker types are: check · check-positive · pending · pending-notice · bullet · hollow · square · numbered · custom (slot).

Properties
marker
Properties
Variant All markers
Asset slot Image / Icon / Avatar
Colors
Icon #90A8D0
Description #445C85
Surface #FFFFFF
Layout
Row height 64px
Asset size 40 × 40
Padding H 16px
Gap (asset ↔ label) 12px
Typography
Description style Secondary/Bold/Base
Description font BarkAda Semibold · 14 / 20
Colors by Variant
Role Token TokenValue
check icon main/list-item/color/default/icon-item #90A8D0
check-positive icon main/list-item/color/positive/icon-item #27C990
pending icon main/list-item/color/default/icon-item #90A8D0
pending-notice icon main/list-item/color/notice/icon-item #CA970C
bullet / hollow / square icon main/list-item/color/default/icon-item #90A8D0
numbered (bg) container bg main/list-item/color/default/icon-bg #EEF2F9
numbered (label) number text main/list-item/color/default/icon-item #90A8D0
custom — (slot — inherits from provided asset) —
Installation Planned API

iOS — Swift Package Manager

// In Xcode: File → Add Package Dependencies
"https://github.com/AY-Org/eb-ds-ios"

Android — Gradle (Kotlin DSL)

dependencies {
    implementation("com.eastblue.ds:list:1.0.0")
}
Property Mapping
Figma PropertySwiftUICompose
type × indicator × state variant (enum) .ebVariant(.check)
— (hardcoded "1.") number: Int? number: Int?
indicator=Custom placeholder Figma Slot → ViewBuilder / @Composable @ViewBuilder asset
SwiftUI
ios/Components/List/EBListMarker.swift
Jetpack Compose
android/components/list/EBListMarker.kt
Usage Snippets Planned API
Usage
// Standard variants
EBListMarker(variant: .check)
EBListMarker(variant: .checkPositive)
EBListMarker(variant: .pendingNotice)

// Numbered
EBListMarker(variant: .numbered, number: 1)

// Custom — Figma Slot maps to @ViewBuilder
EBListMarker {
    Image(systemName: "star.fill")
        .foregroundStyle(.yellow)
}
// Standard variants
EBListMarker(variant = EBListMarker.Check)
EBListMarker(variant = EBListMarker.CheckPositive)
EBListMarker(variant = EBListMarker.PendingNotice)

// Numbered
EBListMarker(variant = EBListMarker.Numbered, number = 1)

// Custom — Figma Slot maps to @Composable slot
EBListMarker {
    Icon(painterResource(R.drawable.star), contentDescription = null)
}
Criteria Scorecard
ID Criterion Status Notes
C1 Layer Structure & Naming Ready Semantic: container, Pending, Checkmark, shape_full.
C2 Variant & Property Naming Requires Rework Three entangled axes; most combinations invalid. Flatten to single variant enum.
C3 Token Coverage Ready All colors, typography, spacing bound to tokens.
C4 Native Mappability Ready Custom atom on both platforms — straightforward render switch.
C5 Interaction State Coverage Needs Refinement Numbered hardcodes "1."; no per-item ordinal. Otherwise display-only.
C6 Asset & Icon Quality Requires Rework Custom indicator is a gray circle; should be a Figma Slot.
C7 Code Connect Linkability Needs Refinement Not mapped. Clean mapping lands after flatten + Slot adoption.
Variants Inventory (10 total)

After flatten + Slot adoption, these 10 collapse to 9 semantic variants + 1 custom slot — 0 invalid combinations possible.

typeindicatorstateNode ID
PlaceholderPlaceholderDefault18482:34426
UnorderedPendingDefault18482:34407
UnorderedPendingNotice18482:34409
UnorderedCheckDefault18482:34411
UnorderedCheckPositive18482:34413
UnorderedBulletDefault18482:34415
UnorderedHollowDefault18482:34417
UnorderedSquareDefault18482:34419
OrderedCustomDefault18482:34423
OrderedNormalDefault18482:34421
1.0.0 — April 2026Major
Initial Assessment · node 18482:34406
Component assessed — 10 variants across entangled type × indicator × state. Recommended flatten + Figma Slot adoption. Documented
Initial
Variant matrix entangled — 72 theoretical, ~10 valid. Flatten to one variant enum. Open
C2 Open
Numbered indicator hardcodes "1." — Needs a number parameter. Open
C5 Open
Custom indicator is a placeholder — Should be a Figma Slot. Open
C6 Open
Code Connect mappings — Not registered. Open
C7 Open