The list specific components are spread out in the places mentioned below.
We need a refactoring to reuse the theme tokens, update to the latest specs(https://m3.material.io/components/lists) and simplify the implementation by reusing/composing subcomponents.
The specs mention draggable, swipeable and toggleable list items.
Given the complexity, this task can be split into multiple PRs.
Current State
List Accordion
MD3 spec: Lists (expand interaction)
Specs link: https://m3.material.io/components/lists/specs
Color tokens
Spacing / sizing
Behavior
Notes
- Should be renamed to align with MD3 terminology (e.g., expandable list item) after the audit
- Animations and selected state are the most impactful missing features
List Accordion Group
MD3 spec: Lists (expand interaction – single-expand group)
Specs link: https://m3.material.io/components/lists/specs
Color tokens
No color logic of its own – delegates to List.Accordion. ✅
Spacing / sizing
No sizing logic of its own. ✅
Behavior
- At most one accordion expanded at a time (single-expand) ✅
- Controlled and uncontrolled modes ✅
- No direct MD3 equivalent; the constraint is implied by MD3 single-select list behavior ✅
Notes
- Pure context provider; no rendering of its own
- No issues beyond what is inherited from
List.Accordion
List Item
MD3 spec: Lists
Specs link: https://m3.material.io/components/lists/specs
Color tokens
Spacing / sizing
Behavior
Notes
- The
left / right render-prop API is flexible but predates the MD3 slot model (leading / content / trailing); a typed slot API would be more aligned and enable correct padding calculations
List Section
MD3 spec: Lists (section grouping / subheader)
Specs link: https://m3.material.io/components/lists/specs
Color tokens
No color logic; delegates to ListSubheader. See ListSubheader for token review.
Spacing / sizing
marginVertical: 8 on the section container – MD3 does not prescribe margin between sections; acceptable as a layout aid
Behavior
- Groups list items under an optional subheader ✅
- No MD3-specific behavior beyond grouping
Notes
- No functional issues; purely a layout container
ListSubheader is not audited separately; its token usage should be verified against the MD3 subheader spec
The list specific components are spread out in the places mentioned below.
We need a refactoring to reuse the theme tokens, update to the latest specs(https://m3.material.io/components/lists) and simplify the implementation by reusing/composing subcomponents.
The specs mention draggable, swipeable and toggleable list items.
Given the complexity, this task can be split into multiple PRs.
Current State
List Accordion
MD3 spec: Lists (expand interaction)
Specs link: https://m3.material.io/components/lists/specs
Color tokens
onSurfaceVariant✅primary; spec label text usesonSurfaceregardless of expand stateprimary; spec usesonSurfaceVariantfor leading iconstheme.colors.background; should besurfaceprimaryContainerbg /onPrimaryContainertext/icon) ❌Spacing / sizing
paddingVertical: 8(container) +marginVertical: 6(row) = 14dp each side; spec 1-line item is 56dp total height, requiring 16dp top/bottom padding ❌paddingRight: 24trailing ✅paddingLeft: 16✅fontSize: 16/fontSize: 14; should usetheme.fonts.bodyLarge/theme.fonts.bodyMediumBehavior
Notes
List Accordion Group
MD3 spec: Lists (expand interaction – single-expand group)
Specs link: https://m3.material.io/components/lists/specs
Color tokens
No color logic of its own – delegates to
List.Accordion. ✅Spacing / sizing
No sizing logic of its own. ✅
Behavior
Notes
List.AccordionList Item
MD3 spec: Lists
Specs link: https://m3.material.io/components/lists/specs
Color tokens
onSurface✅onSurfaceVariant✅onSurfaceVariant✅surface✅primaryContainerbg /onPrimaryContainerlabel+icon for selected itemsSpacing / sizing
paddingVertical: 8(container) +marginVertical: 6(row) = 14dp each side; spec 1-line is 56dp requiring 16dp padding each side ❌paddingRight: 24trailing ✅paddingLeft: 16✅fontSize: 16; should usetheme.fonts.bodyLargefontSize: 14; should usetheme.fonts.bodyMediumBehavior
TouchableRipple✅Notes
left/rightrender-prop API is flexible but predates the MD3 slot model (leading / content / trailing); a typed slot API would be more aligned and enable correct padding calculationsList Section
MD3 spec: Lists (section grouping / subheader)
Specs link: https://m3.material.io/components/lists/specs
Color tokens
No color logic; delegates to
ListSubheader. SeeListSubheaderfor token review.Spacing / sizing
marginVertical: 8on the section container – MD3 does not prescribe margin between sections; acceptable as a layout aidBehavior
Notes
ListSubheaderis not audited separately; its token usage should be verified against the MD3 subheader spec