> Fetch clean Markdown by appending `.md` to any page URL under https://signalwire.com/docs or requesting it with the HTTP header `Accept: text/markdown`. The root index at https://signalwire.com/docs/llms.txt lists the available documentation indexes.

# sw-directory

Searchable, paginated contact list bound to a `DirectoryService`.

```html
<sw-directory></sw-directory>
```

Displays the live `addresses$` observable from a directory service as a
scrollable list with a built-in search input. Each row is selectable
and exposes per-channel call buttons (audio / video / messaging) when
the corresponding channel is advertised by the address. The list also
surfaces the service's `loading$` and `hasMore$` observables and calls
`loadMore()` (when available) for infinite-scroll pagination.

*Class: `SwDirectory` · Module: `packages/web-components/src/components/sw-directory.ts`*

## class: `SwDirectory`, `sw-directory`

### Fields

**`directory`** `DirectoryService | null` — default: null

Directory service with addresses\$ observable

---

### Attributes

| Name        | Field     | Inherited From |
| ----------- | --------- | -------------- |
| `directory` | directory |                |

### CSS Properties

| Name                                 | Default                  | Description                   |
| ------------------------------------ | ------------------------ | ----------------------------- |
| `--interactive-button-primary-bg`    | `#044ef4`                | Primary brand color.          |
| `--interactive-button-primary-hover` | `#0342cf`                | Primary color on hover.       |
| `--interactive-status-success`       | `#22c55e`                | Success / positive color.     |
| `--fg-default`                       | `#f0f0f4`                | Primary text color.           |
| `--fg-muted`                         | `#a0a0aa`                | Secondary / muted text color. |
| `--bg-surface`                       | `#181a28`                | Component background color.   |
| `--bg-surface-raised`                | `#222436`                | Background on hover.          |
| `--interactive-dropdown-hover`       | `#333338`                | Background on active/press.   |
| `--border-default`                   | `rgba(255,255,255,0.12)` | Border color.                 |

### CSS Parts

| Name            | Description                                      |
| --------------- | ------------------------------------------------ |
| `container`     | Outer flex container.                            |
| `search`        | Search-input row at the top of the list.         |
| `list`          | The scrollable list of addresses.                |
| `item`          | One row in the list.                             |
| `item-selected` | A row when it is selected.                       |
| `action`        | Per-row call button (audio / video / messaging). |

### Events

| Name                | Detail | Description                                 |
| ------------------- | ------ | ------------------------------------------- |
| `sw-address-select` | —      | The user clicked a row.                     |
| `sw-dial`           | —      | The user clicked a per-channel call button. |

---