Modal

Install

pnpm add @agencecinq/modal

Usage

import "@agencecinq/modal";

<cinq-modal-button class="block">
  <button aria-controls="demo-modal" aria-pressed="false">Open modal</button>
</cinq-modal-button>

<cinq-modal id="demo-modal">
  <dialog
    class="fixed left-1/2 top-1/2 w-[min(92vw,32rem)] -translate-x-1/2 -translate-y-1/2 rounded-xl bg-white p-6 shadow-2xl backdrop:bg-black/50 text-gray-900"
  >
    <h2 class="text-xl font-semibold mb-2">Monster entry</h2>
    <p class="text-gray-800 mb-4">
      This is a native <code>&lt;dialog&gt;</code> modal.
    </p>
    <p class="text-gray-800 mb-4">
      The dracolich is an undead dragon created by forbidden rites; opening this
      modal feels like leafing through the AD&amp;D Monster Manual.
    </p>

    <cinq-modal-button class="block">
      <button aria-controls="demo-modal" aria-pressed="false">Close</button>
    </cinq-modal-button>
  </dialog>
</cinq-modal>

API

Markup

<cinq-modal> must contain a <dialog> (or an element marked with [data-dialog]).
id is required for event-driven open/close (it must match the aria-controls of your buttons).

Copy‑paste starter markup:

<cinq-modal-button class="block">
  <button
    type="button"
    aria-controls="example-modal"
    aria-pressed="false"
  >
    Open modal
  </button>
</cinq-modal-button>

<cinq-modal id="example-modal">
  <dialog
    class="fixed left-1/2 top-1/2 w-[min(92vw,32rem)] -translate-x-1/2 -translate-y-1/2 rounded-xl bg-white p-6 shadow-2xl backdrop:bg-black/50 text-gray-900"
  >
    <h2 class="text-xl font-semibold mb-2">Dracolich lore</h2>
    <p class="text-gray-800 mb-4">
      The dracolich is an undead dragon created by forbidden rites; opening this
      modal feels like leafing through the AD&amp;D Monster Manual.
    </p>

    <cinq-modal-button class="block">
      <button
        type="button"
        aria-controls="example-modal"
        aria-pressed="false"
        class="px-4 py-2 rounded-lg bg-black text-white hover:bg-gray-800"
      >
        Close
      </button>
    </cinq-modal-button>
  </dialog>
</cinq-modal>

Methods

Method	Description
`show()`	Opens the native dialog (calls `showModal()`).
`close()`	Closes the dialog.

Events

Event	Dispatched by	Detail payload	Description
`modal-toggle`	`cinq-modal-button`	`{ modal, trigger, trap }`	Emitted on `document.documentElement` to request a toggle.
`modal-open`	`cinq-modal`	`{ modal }`	Fired after the modal has been opened.
`modal-close`	`cinq-modal`	–	Fired after the modal has been closed.

Interactive example

Playground (live)

Confirm dialog

A simple confirm/cancel flow using multiple <cinq-modal-button> tied to the same modal.

Waiting for your choice…

Inline form

A small form inside the modal — the dialog closes on submit and shows the result outside.

No character saved yet.