);
}
```
### Text density
`density` sets the row's label/counter text scale: `comfortable` (the default, 14px) or `compact` (13px). Row height and icon size stay fixed either way — this is not a ladder `size` (those labels map to control heights).
```tsx
import { Icon } from "@makeplane/propel/components/icon";
import { List, ListItem, ListItemLink } from "@makeplane/propel/components/list";
import { InboxOutline } from "@makeplane/propel/icons";
export default function DensityDemo() {
return (
);
}
```
### Row disclosure
`ListItemDisclosureTrigger` is a row's own expand/collapse control — a sibling of the row's primary, never nested inside it, since a button can't nest inside a link or button. It is a roving `CompositeItem` in the parent `List` (one tab stop with the primary; arrow keys move between them).
Unlike `ListSection` (which wraps Base UI `Collapsible` for you), there is **no** ready-made row collapsible. Compose it yourself with `Collapsible.Root` from `@base-ui/react/collapsible`:
1. Give **each expandable row its own** `Collapsible.Root`.
2. Inside the root: a parent `List` that holds **only** that expandable row (primary + disclosure trigger).
3. Put `Collapsible.Panel` **next to that parent `List`**, still inside the same root — same shape
`ListSection` uses, scoped to one row. Wrap the nested child `List` in `ListSectionPanelContent`
(heading-to-row gap only). Do **not** use `CollapsiblePanelContent` here — its inset and body-xs
prose are for Collapsible's own panel body; list rows already own their padding.
4. Sibling top-level rows that are not children of the expandable row go in a **separate** `List` _outside_ that root (after it in the stack). Do **not** put those siblings in the same parent `List` as the expandable row: the panel is a sibling of the list, so it would render after every list item and break visual hierarchy.
This example shows `count` and `endIcon` on the expandable row, nested children under it, then a sibling `Settings` row after the cluster.
Trailing order on a row: `count` → `endIcon` → disclosure trigger. `count` and `endIcon` live **inside** the primary (`ListItemLink` / `ListItemButton`) — they are visual only; clicks still hit the link/button. Interactive trailing controls (disclosure, a “more” menu, etc.) must be **siblings** of the primary, never passed as `endIcon`. The row’s full focus ring only follows the primary; sibling controls keep their own focus chrome.
```tsx
import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
import { CollapsiblePanel } from "@makeplane/propel/components/collapsible";
import { Icon } from "@makeplane/propel/components/icon";
import {
List,
ListItem,
ListItemDisclosureTrigger,
ListItemLink,
ListSectionPanelContent,
} from "@makeplane/propel/components/list";
import { GridLayoutOutline, SettingsOutline } from "@makeplane/propel/icons";
/**
* Each expandable row is its own `Collapsible.Root` cluster (parent `List` + panel). Sibling rows
* that are not children of that cluster sit in a **separate** `List` after the root — never inside
* the same parent `List` as the expandable row, or the panel would render after those siblings.
*/
export default function RowDisclosureDemo() {
return (
);
}
```
A bare `count` (e.g. `6`) only tells a screen reader "Inbox, 6" — no indication of what the number means, since the component itself can't know (unread messages? total items? something else?). If that distinction matters for your use case, add it yourself with visually-hidden text — `count` accepts any node, not just a string or number:
```tsx
unread: 6
}
/>
```
### Section
Wrap a `List` in `ListSection` to get a muted heading that collapses its body. The disclosure chevron rotates as the section opens and closes.
```tsx
import { Icon } from "@makeplane/propel/components/icon";
import { List, ListItem, ListItemLink, ListSection } from "@makeplane/propel/components/list";
import { GridLayoutOutline, SettingsOutline } from "@makeplane/propel/icons";
export default function SectionDemo() {
return (
}
label="Projects"
/>
}
label="Settings"
/>
);
}
```
### Section heading
For settings-style sidebars whose groups never collapse, `ListSectionHeading` titles a `List` with a static, non-interactive label.
```tsx
import { Icon } from "@makeplane/propel/components/icon";
import {
List,
ListItem,
ListItemLink,
ListSectionHeading,
} from "@makeplane/propel/components/list";
import { AutoReminderOutline, UserAltOutline, MembersOutline } from "@makeplane/propel/icons";
export default function SectionHeadingDemo() {
return (
);
}
```
## API Reference
`List` itself forwards Base UI's `Composite` props and the underlying list element's HTML attributes — one tab stop for the whole list, arrow keys move between rows. Pass the `role`/`aria-*` your context calls for.
### ListItem
A row wrapper. Holds a primary `ListItemLink` (or `ListItemButton`) plus optional actions or a
count as siblings, and carries the row chrome. `level` indents nested rows; `density` sets the
label/counter text scale. Renders a `