Confirm panel

Copy this

<div class="hm-measure">
  <div class="confirm-panel" data-state-value="off">
    <ul data-confirm-gate class="confirm-checklist" data-required-count="2">
      <li class="confirm-row" data-required="true">
        <input type="checkbox" class="confirm-checkbox" data-required="true" id="confirm-1">
        <label for="confirm-1" class="confirm-row-label"><span class="confirm-title">I have exported a backup of live data</span><span class="confirm-caption">Rollback needs a snapshot taken today.</span></label>
      </li>
      <li class="confirm-row" data-required="true">
        <input type="checkbox" class="confirm-checkbox" data-required="true" id="confirm-2">
        <label for="confirm-2" class="confirm-row-label"><span class="confirm-title">The billing owner has approved this change</span></label>
      </li>
      <li class="confirm-row" data-required="false">
        <input type="checkbox" class="confirm-checkbox" id="confirm-3">
        <label for="confirm-3" class="confirm-row-label"><span class="confirm-title">Notify the team afterwards (optional)</span></label>
      </li>
      <li class="confirm-actions"><a href="#" class="confirm-secondary">Save draft</a><a data-confirm-href="#go-live" aria-disabled="true" class="confirm-primary">Go live</a></li>
    </ul>
    <p class="confirm-audit">This action is recorded in the audit log with your identity and timestamp.</p>
  </div>
  <div class="confirm-panel" data-state-value="live">
    <div class="confirm-summary" data-confirm-tone="success">
      <div class="confirm-summary-title">Currently live</div>
      <div class="confirm-summary-body">Enabled 12 May by j.reyes.</div>
    </div>
    <div class="confirm-actions"><a href="#" class="confirm-revoke">Revoke</a></div>
  </div>
</div>

Server exchange

This Hyperpart has no server exchange — it is presentation or client chrome only. htmx does not issue a request on this part's behalf. If you put an affordance (hx-*) on a control that uses this markup, that action's exchange belongs to the action, not this part. See Swap contract for host-owned envelopes.

Swap contract

Agent-visible HTMX topology (ADR-0054 / decision 0012). exchange envelope = what the response may re-emit relative to the persistent slot (body_only | outer | none | host_owned | document). dual-lock validates part markup only — not this envelope. Stem: stems/morph-safe-hypermedia.md; decision: docs/decisions/0012-swap-identity-contract.md.

No host HTMX exchange on this part — presentation or client chrome only. exchange envelope: n/a.

If a host wraps this markup in hx-*, that host owns the swap contract (sole identity + envelope). Prefer innerMorph / outerMorph for stable slots; replacement for flash; body-only responses under inner swaps.

Envelope response examples

This part has no owned exchange (envelope n/a). If a host adds hx-*, that host’s envelope applies — typically body_only:

<!-- Host wraps this presentation part with hx-* (host owns envelope) -->
<!-- Prefer: hx-swap="innerMorph" hx-target="#panel-body" -->
<!-- Server returns body_only interior for #panel-body -->
<div class="dz-stack">content…</div>

Do not re-own the slot:

<!-- WRONG: server returns the presentation root with a new id every poll -->
<div id="confirm-panel-root" data-dz-region>…</div>

How to use it

Seams

• data-confirm-gate root + data-required=true checkboxes + data-required-count
• primary anchor parks destination in data-confirm-href until armed
• pick-a-surface: checklist consent → confirm-panel (not dialog / hx-confirm)

Do / Don't

Pitfalls

• optional boxes never gate — only data-required=true count
• zero required boxes means the gate is always armed
• not a modal — do not replace with dialog that only mirrors checkbox state in JS

Keyboard / AT

• primary stays aria-disabled until required count is met
• live/revoked branches use data-confirm-tone for tone, not colour alone

Related parts

button field

DOM contract

What the emitted HTML must satisfy — the table is the required surface; Python under contracts/ is the package-internal dual-lock CI runs (tests/test_contracts.py), not an app route. Standalone HTMX4: implement the API so responses match this markup. Dazzle: the agent emits SSR that already satisfies it. Do not invent attrs outside these tables. For request/response wiring see Server exchange.

contracts/confirm_panel.py

Required in the DOM: root [data-confirm-gate] (part confirm-panel). Emit only these attributes — inventing extras is fine only if controllers ignore them; omitting required ones fails CI (tests/test_contracts.py).

Module source

Import path is monorepo/package-local (from contracts._kit import …). Source-token form often uses data-*; gallery demos above are unprefixed. Do not copy this into app routes.

"""HYPERPART: confirm-panel — irreversible-action consent gate."""

from contracts._kit import DomContract, Node, Present

DOM_CONTRACT = DomContract(
    part="confirm-panel",
    root="[data-dz-confirm-gate]",
    nodes=(
        Node(
            "[data-dz-confirm-gate]",
            attrs={"data-dz-required-count": Present()},
        ),
        Node('[data-dz-required="true"]', attrs={"data-dz-required": Present()}),
    ),
)

__all__ = ["DOM_CONTRACT"]

Notes

Source files

One logical Hyperpart, 4 code items (CSS layered, JS bundled). Bound by HYPERPART: confirm-panel — python tools/hyperpart.py confirm-panel lists them.

site/registry.py · contracts/confirm_panel.py · components/confirm-panel.css:1 · controllers/dz-confirm-gate.js