List

1import { List, ListItem } from '@/ui/Display'23<List aria-label="Deployments">4  {deployments.map((d) => (5    <ListItem6      key={d.id}7      leading={<GitBranch />}8      title={d.name}9      description={d.meta}          // metadata, not a second title10      trailing={<Badge tone={d.tone}>{d.status}</Badge>}11      onClick={() => open(d)}       // the WHOLE row is the target12    />13  ))}14</List>1516// A secondary action inside a pressable row must stop propagation on both17// click and keydown, or the user aims at the menu and navigates away.18<button19  aria-label={`More actions for ${d.name}`}20  onClick={(e) => { e.stopPropagation(); openMenu() }}21  onKeyDown={(e) => e.stopPropagation()}22>23  <MoreHorizontal />24</button>2526// Key–value pairs are a description list, not a table with hidden headers.27<dl className="grid grid-cols-[minmax(7rem,auto)_1fr] gap-x-4 gap-y-2.5">28  {pairs.map(([term, value]) => (29    <React.Fragment key={term}>30      <dt>{term}</dt>31      <dd>{value}</dd>32    </React.Fragment>33  ))}34</dl>3536// Safari drops list semantics when list-style is none. Add the role back.37<ul role="list" className="list-none">…</ul>

<!-- role="list" because Safari removes list semantics when list-style
     is none, which every styled list sets. -->
<ul role="list" class="ds-list" aria-label="Deployments">
  <li>
    <a href="/d/4021" class="ds-list__row">
      <svg aria-hidden="true">…</svg>
      <span class="ds-list__text">
        <span class="ds-list__title">api-gateway</span>
        <span class="ds-list__meta">Deployed 4 minutes ago</span>
      </span>
      <span class="ds-badge">Live</span>
      <svg aria-hidden="true">…</svg>
    </a>
  </li>
</ul>

<!-- Term / definition pairs. The relationship is announced. -->
<dl class="ds-kv">
  <dt>Region</dt>
  <dd>Europe (London) · eu-west-2</dd>
  <dt>Duration</dt>
  <dd>42 seconds</dd>
</dl>

<!-- An empty list needs to say so. Silence reads as a failed load. -->
<p class="ds-list__empty">No deployments yet</p>

.ds-list { list-style: none; margin: 0; padding: 0; }

.ds-list__row {
  display: flex;
  align-items: center;
  gap: 12px;                         /* fixed, so icon rows and avatar rows
                                        share one text edge */
  min-block-size: 40px;
  padding-inline: 14px;
  padding-block: 8px;
}

.ds-list__row:hover { background: var(--ds-layer-hover); }

/* Must differ from hover, or nothing is legible while the pointer is in
   the list. */
.ds-list__row[aria-current='page'] {
  background: var(--ds-layer-selected);
}

.ds-list__text { display: flex; flex-direction: column; min-inline-size: 0; }
.ds-list__title { color: var(--ds-fg); font-size: 13px; }

/* One step down in size, two in colour. Equal weight makes the row read as
   two titles. */
.ds-list__meta  { color: var(--ds-fg-muted); font-size: 12px; }
.ds-list__title,
.ds-list__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The title truncates; the trailing content never shrinks — it is often the
   reason the user is scanning. */
.ds-list__row > .ds-badge { flex: 0 0 auto; }

/* Inset to the text: a full-width rule makes the list read as a table. */
.ds-list > li + li > .ds-list__row::before {
  content: '';
  position: absolute;
  inset-inline: 14px 0;
  inset-block-start: 0;
  block-size: 1px;
  margin-inline-start: calc(16px + 12px);
  background: var(--ds-border-subtle);
}

.ds-kv {
  display: grid;
  /* Fixed term column, so every value starts on the same edge. */
  grid-template-columns: minmax(7rem, auto) 1fr;
  gap: 10px 16px;
}

@media (pointer: coarse) {
  .ds-list__row { min-block-size: 44px; }
}