{% extends "brickwork/components/_modal.html" %} {% comment %} Beat Phase D journey: Modal (icvoss/django-brickwork#544). COPY THIS FILE into your project and edit it. It is not on the template loader path, so you cannot extend it from an installed package (ADR-056). This is the consumer partial for `#bw-modal-root`. One partial, two render paths (see `_modal.html`'s own header): 1. HTMX open: a real anchor with href="" hx-get="" hx-target="#bw-modal-root" hx-swap="innerHTML" The view returns THIS template alone; bwModal opens it and holds the focus trap. No site Alpine beyond the documented `Alpine.plugin(focus)` → `registerBrickworkComponents(Alpine)` → `Alpine.start()` boot in examples/base.html / INTEGRATION.md section 5. 2. No-JS floor: the same href is a full-page route whose content block `{% include %}`s this partial (see examples/app/confirm.html for a centred destructive confirm without the overlay; wire the include the same way for the floor page). Close (server): on successful POST return 204 with HX-Trigger: {"bw:modal:close": {"id": ""}} Escape, backdrop (when allowed), and the always-rendered close control are owned by bwModal; do not author x-trap yourself. What your view must supply: title, modal_id, close_href backdrop_dismiss False for destructive confirms that must not dismiss on scrim click (Escape still closes; route it through the same confirm branch). States: closed host page (trigger only) vs open (this partial inside #bw-modal-root); Escape / close control / HX-Trigger bw:modal:close return to closed. Destructive confirms set backdrop_dismiss False. Accessibility: bwModal owns the dialog role, labelled-by title, focus trap and restore; the always-rendered close control is a real button; form fields use standard label/input pairing with data-bw-autofocus for initial focus. Pair with a full-page floor (examples/app/confirm.html) so the action still works without JS. Covered by the interactions a11y gate for the modal contract; this example is the copyable consumer partial. Responsive: no breakpoint switch of its own; the modal panel follows _modal.html's max-width and viewport padding at every width. {% endcomment %} {% block body %}

This permanently removes every demo widget. Type RESET to confirm.

{% csrf_token %}
{% endblock %} {% block footer %} {% endblock %}