# List

> Generic list with leading / body / trailing slots. Bordered or flat, with optional dividers + dense padding. Items can be plain or interactive (hover + Enter/Space activation).

Source: https://ngwr.dev/reference/components/list  
Kind: Component

## Import

```angular-ts
import { WrList, WrListItem } from 'ngwr/list';
```

## Playground

```html
<wr-list bordered dividers >
  <wr-list-item interactive>
    <span ngProjectAs="[wrListItemLeading]">📁</span>
    Reports
    <span ngProjectAs="[wrListItemTrailing]">12</span>
  </wr-list-item>
</wr-list>
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `<wr-list>` | Container — renders `<ul role="list">` inside. | `component` | `—` |
| `bordered` | Wrap in a card-style border + radius. | `boolean` | `false` |
| `dividers` | Thin border between consecutive items. | `boolean` | `false` |
| `dense` | Compact vertical padding. | `boolean` | `false` |
| `ariaLabel` | Optional accessible label for the list. | `string` | `''` |
| `<wr-list-item>` | Row with three projection slots: `[wrListItemLeading]`, default body, `[wrListItemTrailing]`. | `component` | `—` |
| `interactive` | Hover + cursor pointer + Enter/Space activation + listitem role. | `boolean` | `false` |
| `disabled` | Visual disabled + suppresses interaction. | `boolean` | `false` |
| `CSS — --wr-list-item-padding-y / -x` | Per-row padding. | `length` | `0.625rem / 1rem` |
| `CSS — --wr-list-item-gap` | Gap between leading / body / trailing slots. | `length` | `0.75rem` |
| `CSS — --wr-list-divider-color` | Divider line colour. | `color` | `var(--wr-color-light)` |
| `CSS — --wr-list-hover-bg` | Hover background on interactive rows. | `color` | `rgba(light, 0.4)` |

## CSS variables

Custom properties `ngwr/list` publishes. Each default below is declared on the component's own selector, so a `:root` override is shadowed by it — set them on that selector, on a wrapper you scope yourself, or inline on the element. Unlike the BEM class names, these are the supported way to restyle the component.

| Variable | Default | Declared on |
| --- | --- | --- |
| `--wr-list-active-bg` | `rgba(var(--wr-color-primary-rgb), 0.08)` | `.wr-list` |
| `--wr-list-bg` | `transparent` | `.wr-list` |
| `--wr-list-divider-color` | `var(--wr-color-outline)` | `.wr-list` |
| `--wr-list-hover-bg` | `var(--wr-color-hover)` | `.wr-list` |
| `--wr-list-item-gap` | `0.75rem` | `.wr-list` |
| `--wr-list-item-padding-x` | `1rem` | `.wr-list` |
| `--wr-list-item-padding-y` | `0.625rem` | `.wr-list` +1 variant override |