# Flux 2.0 — List and detail

A list of records beside the detail of the selected one, each pane scrolling on its own.

Reference: https://flux.kaptio.com/components/split-view/
Requires: https://flux.kaptio.com/tokens/v2/flux.css and flux-components.css

## Use it when
For working through a queue: supplier requests, messages, tasks. The list stays in view while the detail changes, so moving to the next record is one click. Selecting an item marks it current and shows its panel. The split view responds to its own width rather than the viewport: below 32rem the list and the detail take turns, the detail gains a Back button, and focus follows the change of view.

## Do not use it when
Not when each record needs the full width or a URL of its own that people share; link to a detail page. Not for comparing two records side by side.

## Markup

### Supplier requests

<div class="flux-split" data-flux-split>
  <div class="flux-split__list">
    <ul class="flux-split__items" aria-label="Supplier requests">
      <li>
        <button class="flux-split__item" type="button" aria-controls="request-1" aria-current="true">
          <span class="flux-split__item-title">Hotel Rangá <span class="flux-badge flux-badge--pending">On request</span></span>
          <span class="flux-split__item-meta"><span class="flux-split__ref">KB-104931</span> · 6 rooms, 14 Sep</span>
        </button>
      </li>
      <li>
        <button class="flux-split__item" type="button" aria-controls="request-2" aria-current="false">
          <span class="flux-split__item-title">Fosshótel Glacier Lagoon <span class="flux-badge flux-badge--awaiting">Awaiting supplier</span></span>
          <span class="flux-split__item-meta"><span class="flux-split__ref">KB-104940</span> · 2 rooms, 19 Sep</span>
        </button>
      </li>
      <li>
        <button class="flux-split__item" type="button" aria-controls="request-3" aria-current="false">
          <span class="flux-split__item-title">Hótel Búðir <span class="flux-badge flux-badge--confirmed">Confirmed</span></span>
          <span class="flux-split__item-meta"><span class="flux-split__ref">KB-104957</span> · 8 rooms, 22 Sep</span>
        </button>
      </li>
    </ul>
  </div>
  <div class="flux-split__detail">
    <section class="flux-split__panel" id="request-1" aria-labelledby="request-1-title">
      <button class="flux-button flux-button--ghost flux-button--sm flux-split__back" type="button"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12.5 8h-9M7 4.5L3.5 8 7 11.5" /></svg>All requests</button>
      <h3 class="flux-split__title" id="request-1-title">Hotel Rangá</h3>
      <dl class="flux-dl">
        <div class="flux-dl__pair"><dt class="flux-dl__term">Booking</dt><dd class="flux-dl__detail flux-dl__detail--data">KB-104931</dd></div>
        <div class="flux-dl__pair"><dt class="flux-dl__term">Rooms</dt><dd class="flux-dl__detail">6 double, 14–16 Sep</dd></div>
        <div class="flux-dl__pair"><dt class="flux-dl__term">Requested</dt><dd class="flux-dl__detail">3 days ago</dd></div>
      </dl>
      <div class="flux-split__actions">
        <button class="flux-button" type="button">Mark confirmed</button>
        <button class="flux-button flux-button--secondary" type="button">Send reminder</button>
      </div>
    </section>
    <section class="flux-split__panel" id="request-2" aria-labelledby="request-2-title" hidden>
      <button class="flux-button flux-button--ghost flux-button--sm flux-split__back" type="button"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12.5 8h-9M7 4.5L3.5 8 7 11.5" /></svg>All requests</button>
      <h3 class="flux-split__title" id="request-2-title">Fosshótel Glacier Lagoon</h3>
      <dl class="flux-dl">
        <div class="flux-dl__pair"><dt class="flux-dl__term">Booking</dt><dd class="flux-dl__detail flux-dl__detail--data">KB-104940</dd></div>
        <div class="flux-dl__pair"><dt class="flux-dl__term">Rooms</dt><dd class="flux-dl__detail">2 twin, 19–20 Sep</dd></div>
        <div class="flux-dl__pair"><dt class="flux-dl__term">Requested</dt><dd class="flux-dl__detail">Yesterday</dd></div>
      </dl>
    </section>
    <section class="flux-split__panel" id="request-3" aria-labelledby="request-3-title" hidden>
      <button class="flux-button flux-button--ghost flux-button--sm flux-split__back" type="button"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12.5 8h-9M7 4.5L3.5 8 7 11.5" /></svg>All requests</button>
      <h3 class="flux-split__title" id="request-3-title">Hótel Búðir</h3>
      <dl class="flux-dl">
        <div class="flux-dl__pair"><dt class="flux-dl__term">Booking</dt><dd class="flux-dl__detail flux-dl__detail--data">KB-104957</dd></div>
        <div class="flux-dl__pair"><dt class="flux-dl__term">Rooms</dt><dd class="flux-dl__detail">8 double, 22–23 Sep</dd></div>
        <div class="flux-dl__pair"><dt class="flux-dl__term">Confirmed</dt><dd class="flux-dl__detail">Today, 09:12</dd></div>
      </dl>
    </section>
  </div>
</div>

## API
- flux-split (class): The container. Its height is --flux-split-height.
- data-flux-split (attribute): Wires selection, panels and the narrow view.
- flux-split__list | __items (class): The list pane and its ul. Label the ul.
- flux-split__item (class): On each button. Set aria-controls to its panel’s id.
- flux-split__item-title | __item-meta | __ref (class): The title line, the metadata line and a mono reference inside it.
- flux-split__detail | __panel (class): The detail pane and each panel. Hide all but the selected panel.
- flux-split__back (class): On a button in each panel. Only shown when the container is narrow.
- flux-split__title (class): The panel heading. Receives focus when the narrow view switches to it.
- flux-split__actions (class): The record’s actions, below a hairline at the end of the panel.
- data-view (attribute): "list" or "detail", set by the script. Decides which pane shows when narrow.

## Accessibility
- Items are buttons, with aria-current="true" marking the selection so it is not conveyed by fill alone.
- Each panel is a section labelled by its heading.
- When the view switches in a narrow container, focus follows the switch so it is never left on a hidden element.

## Keyboard
- Tab: Moves through the items, then into the detail.
- Enter, Space: Selects the item and shows its panel. When narrow, focus moves to the panel heading.
- Back button: Returns to the list and focuses the selected item.

## Tokens
- --flux-split-list-width | -height | -bg | -border
- --flux-split-item-padding-y | -item-padding-x | -item-hover | -item-meta
- --flux-split-item-selected | -item-pointer-size
- --flux-split-detail-padding

## Do
- Keep each item to a title line and a metadata line.
- Select the first item when the view opens, so the detail is never blank.
- Put the record’s actions in its panel, not in the list.

## Do not
- Do not nest another bordered surface inside the detail; group with headings and hairlines.
- Do not use a split view for records people need to link to.