No matches.
component
The rows, in order. Stacked rows read `{ id, title, description?, value?, leading?, trailing?, href?, onclick?, custom? }`; pairs rows read `{ id, term, value, description? }`. Every row also takes `data` (a render-only payload), `class` / `style` (merged onto the row element) and its own `passThrough`; link / button rows take `actionLabel`. Only `data-*` / `aria-*` / `on*` / `role` / `lang` / `dir` / `hidden` / `tabindex` keys become attributes of the row element — any other key is dropped.
The Card the list renders itself in. A List is card-based: with no card props it renders in a Card sized like the list with a muted border; pass surface props (`background`, `contentBackground` for an inset panel…), a `heading` / `subheading`, header `trailing` actions or a `footer` here. The content region is edge to edge (`content.padding: "none"`) — the rows pad themselves and publish their inset so the header text lines up with the row text. `card.heading` names a stacked list: the `<ul>` gets `aria-labelledby` unless `aria-label` / `aria-labelledby` is passed. `false` renders the bare `<ul>` / `<dl>`. A bare list placed straight in a hand-written Card's content adopts the host's inset: in a PADDED content region its rows drop their own inline padding (row text lands on the content's text edge — no double indent); in an unpadded one (`content.padding: "none"`) the rows keep their padding and publish it to the host card (`--card-content-row-inset`), so a flush header lines up with the row text.
The description (stacked) / note (pairs) font: `"default"` (body sans), `"tabular"` (tabular figures) or `"mono"`. Per item: `item.descriptionFont`.
Hairlines between rows (a real 1px border in the surface's muted border colour).
Row density: row padding, title / description / value type and the leading addon box. Also the Card's size in card mode.
The value font: `"tabular"` (sans, tabular lining figures) or `"mono"` (the monospace family — shas, ids). Per item: `item.valueFont`.
Drop the rows' inline inset: row text lands on the list's own edge, lined up with the text around it — a group heading above a bare list, a page header. A bare list that is the direct child of a padded card content already does this on its own; `flush` does it wherever the list sits. Hairlines and hover tints then span the text column. In card mode the card header's inset follows, so it stays lined up with the rows.
`"stacked"` renders a `<ul role="list">` of Banner rows; `"pairs"` renders a `<dl>` of label → value rows.
Pairs layout: `"horizontal"` puts the label and value on one line (value right-aligned); `"vertical"` puts the label above the value.
Put the rows on the baseline raster: rows pad nothing and measure whole lines (a quantised title / description, floored at one line for `2xs`–`sm`, two for `md` / `lg`); divided hairlines take no block space. In card mode the Card defaults to `rhythm` too (`card.rhythm` wins). A List inside any `[data-rhythm]` scope — a rhythm Card or Grid — is on the raster without this prop.
Stacked layout: where each row's trailing cell sits. `"end"`: its own column at the row's end. `"below"`: on a line under the title, starting at the title's edge (wrapping if it is wider than the row), so wide trailing content — a pair of Buttons — never squeezes the title. `"auto"`: at the end, moving below once the list is narrower than 480px (a container query on the list, which makes the list an inline-size container — don't use it on a list that should shrink to its content).
Stacked layout: where the value sits in its column. Values share one column across rows, so `"end"` right-aligns them to each other.
Stacked layout: `"independent"` lets a row WITHOUT a trailing cell run its value to the row's end edge, so one row's trailing Badge doesn't pull every other row's value inward; `"shared"` keeps every value in the one value column (values share an end edge, rows without a trailing cell leave that column empty). Both keep the subgrid alignment.
Custom-row escape hatch: renders the content of every item marked `custom: true` inside its `<li>` (which keeps the row padding). Receives the resolved row.
Per-slot style and HTML-attribute overrides: `card`, `root`, `item`, `row`, `leading`, `title`, `description`, `action`, `value`, `trailing`, `pair`, `term`, `detail`, `note`, `pairTrailing`.
Astro / vanilla: serialize the props into `data-list-config` so the client runtime hydrates this instance and `getPindoba(el, "list")` can `update()` it. Frameworks with their own reactivity don't need it.
Plus all standard <ul> HTML attributes.