Collections

tier 2 — classes

A set the reader follows or expands: an order with an end (.steps), and detail that unfolds (.accordion, .tree). Rows the reader opens are a list, values compared down a column are a table, and a record of what happened, with when, is a timeline.

Steps

Progress through a sequence that has an order and an end — a wizard, an approval chain. State is data-state on the <li> rather than a modifier class, and the number comes from a CSS counter, so inserting a step is not a renumbering edit.

Reservation received
Reviewed
Awaiting approval
Applied

<ol class="steps" style="max-width:520px">
    <li data-state="done">Reservation received</li>
    <li data-state="done">Reviewed</li>
    <li data-state="current">Awaiting approval</li>
    <li>Applied</li>
</ol>

Accordion

Built on <details>/<summary>, so the open state, the keyboard operation and the announcement all come from the platform, and giving every <details> the same name makes them mutually exclusive. If code has to open one, bind open one way and never write it back — toggle fires when the framework's own diff sets the attribute, so a handler that mirrors the state back into a field will fight it.

What the AI proposed

Reroute to EU-West, confidence 0.87, matched on “VPN” and “disconnect” in the description.

Similar orders

Four in the last 30 days, all resolved by EU-West.

Raw payload

The warehouse record as received.

<div class="accordion" style="max-width:520px">
    <details name="ex-acc" open>
        <summary><i class="ri-robot-line"></i> What the AI proposed</summary>
        <div class="accordion-body">
            <p>Reroute to EU-West, confidence 0.87, matched on &ldquo;VPN&rdquo; and
            &ldquo;disconnect&rdquo; in the description.</p>
        </div>
    </details>
    <details name="ex-acc">
        <summary><i class="ri-history-line"></i> Similar orders</summary>
        <div class="accordion-body">
            <p>Four in the last 30 days, all resolved by EU-West.</p>
        </div>
    </details>
    <details name="ex-acc">
        <summary><i class="ri-file-list-3-line"></i> Raw payload</summary>
        <div class="accordion-body">
            <p>The warehouse record as received.</p>
        </div>
    </details>
</div>

Tree

Nested structure the reader expands — a group hierarchy, a folder of files: nested <ul> inside <details>, for the same reason as the accordion. Do not declare role="tree", which promises single-tab-stop arrow-key navigation through a flattened view that this markup does not implement; .tree-leaf is an item with nothing under it.

Fulfilment64
- Frontline41
- Escalation23
Network12
- On call12
Applications3

<div class="tree" style="max-width:360px">
    <ul>
        <li>
            <details open>
                <summary><i class="ri-building-line"></i> Fulfilment<span class="tree-count">64</span></summary>
                <ul>
                    <li><a class="tree-leaf" href="#" aria-current="true"><i class="ri-user-line"></i> Frontline<span class="tree-count">41</span></a></li>
                    <li><a class="tree-leaf" href="#"><i class="ri-user-line"></i> Escalation<span class="tree-count">23</span></a></li>
                </ul>
            </details>
        </li>
        <li>
            <details>
                <summary><i class="ri-router-line"></i> Network<span class="tree-count">12</span></summary>
                <ul>
                    <li><a class="tree-leaf" href="#"><i class="ri-user-line"></i> On call<span class="tree-count">12</span></a></li>
                </ul>
            </details>
        </li>
        <li><a class="tree-leaf" href="#"><i class="ri-apps-line"></i> Applications<span class="tree-count">3</span></a></li>
    </ul>
</div>