Popovers

tier 2 — classes

A small amount of content anchored to the control that opened it — why a row is pending, what a number means, the detail behind a figure. A list of actions is a menu; one line with no markup in it is a hover hint.

Live — open it. The popover attribute is required, and so is opening it from a popovertarget control, which also makes that button the popover's implicit anchor, so nothing here declares an anchor-name. The platform then supplies the top layer, light dismiss, Escape and focus handling, so unlike .menu this needs no scrim and no key handler. It closes on a scroll that moves its trigger, because an anchored panel's position is fixed at the moment it opens.

<div class="sedna-row-wrap">
    <button class="btn" type="button" popovertarget="sla-detail">Why is this overdue?</button>

    <div class="popover" id="sla-detail" popover>
        <strong class="popover-title">Response target breached 2h ago</strong>
        <p>
            Priority 2 carries a four-hour response target measured from the first warehouse
            update, not from when the order reached this queue.
        </p>
        <p>Reassigning does not restart the clock. Only a priority change does.</p>
    </div>

    <button class="btn" type="button" popovertarget="confidence-detail">
        Confidence 0.87
    </button>

    <div class="popover" id="confidence-detail" popover>
        <strong class="popover-title">How the score is read</strong>
        <p>
            Below 0.60 the reservation is never auto-applied. Between 0.60 and 0.90 it waits for a
            human. Above 0.90 it applies if the action type is on the automation list.
        </p>
    </div>
</div>

Four shapes

A definition, a key/value detail block, a small table, and one with an action in it. One trailing action that acts on what the panel is explaining is fine; a list of actions is a .menu. popovertargetaction="hide" closes it from inside with no script at all.

The panel is width: max-content, so each of these is as wide as what is in it and no wider. That is what makes .kv's gap load-bearing here and nowhere else: space-between has no free space to distribute in a shrink-to-fit box, so without the gap the key would run straight into the value. The table takes .popover--flush, which drops the panel's padding so the table reaches the rounded corners instead of sitting in a frame inside a frame — the title keeps its own inset, and the last row gives up its rule to the panel's border.

Warehouse	Free	Held
Rotterdam	128	12
Hamburg	0	4
Lyon	46	0

<div class="sedna-row-wrap sedna-gap-2">
    <button class="btn" type="button" popovertarget="pop-define">What is a hold?</button>
    <div class="popover" id="pop-define" popover>
        <strong class="popover-title">Hold</strong>
        <p>Stock reserved for an order but not yet picked. A hold expires after 48 hours and the
        stock returns to the pool.</p>
    </div>

    <button class="btn" type="button" popovertarget="pop-kv">ORD-4182 detail</button>
    <div class="popover" id="pop-kv" popover>
        <strong class="popover-title">ORD-4182</strong>
        <div class="kv"><span class="k">Placed</span><span class="v">3 Aug, 09:14</span></div>
        <div class="kv"><span class="k">Customer</span><span class="v">Priya Nair</span></div>
        <div class="kv"><span class="k">Region</span><span class="v">EU-West</span></div>
        <div class="kv"><span class="k">Lines</span><span class="v">5, two on hold</span></div>
    </div>

    <button class="btn" type="button" popovertarget="pop-table">Stock by warehouse</button>
    <div class="popover popover--flush" id="pop-table" popover>
        <strong class="popover-title">On hand</strong>
        <table class="table">
            <thead><tr><th>Warehouse</th><th class="col-num">Free</th><th class="col-num">Held</th></tr></thead>
            <tbody>
                <tr><td>Rotterdam</td><td class="col-num">128</td><td class="col-num">12</td></tr>
                <tr><td>Hamburg</td><td class="col-num">0</td><td class="col-num">4</td></tr>
                <tr><td>Lyon</td><td class="col-num">46</td><td class="col-num">0</td></tr>
            </tbody>
        </table>
    </div>

    <button class="btn" type="button" popovertarget="pop-action">Two lines on hold</button>
    <div class="popover" id="pop-action" popover>
        <strong class="popover-title">Awaiting stock</strong>
        <p>Lines 3 and 5 have no free stock in any warehouse. The order ships when either arrives.</p>
        <div class="sedna-row sedna-end sedna-gap-1" style="margin-top:10px">
            <button class="btn btn-sm" type="button" popovertarget="pop-action" popovertargetaction="hide">Close</button>
            <button class="btn btn-sm btn-primary" type="button">Split the order</button>
        </div>
    </div>
</div>

Above everything, by promotion rather than by number A real .popover is in the top layer, which no z-index reaches, and is ordered by when it was promoted — so one opened from inside a modal dialog sits over the dialog. Its rung on the z-order scale, 550, is the fallback for a panel that carries the class without the attribute.