# Declarative openers

> Plainkit 0.28.0. Generated by scripts/build-skills.mjs from dist/js/invokers.js. Do not edit: change the source and run the generator.

Open, toggle and close a `pk-dialog`, `pk-drawer` or `pk-popover` from markup, with no script. The three elements install the one delegated click listener the first time one connects; `initPlainkit()` installs it too (idempotent). Mistakes (an empty, invalid or unmatched selector, a `data-close` outside an overlay) are logged as warnings by the `invokers` scope. The header of `js/invokers.js`, verbatim:

```text
Declarative openers for the overlay elements, so a page needs no script to open a dialog:

  <pk-button data-open="#confirm">Delete</pk-button>
  <pk-dialog id="confirm" heading="Delete this item?"> ... <pk-button data-close>Cancel</pk-button> </pk-dialog>

data-open="<selector>" calls show() on the first match (pk-dialog, pk-drawer, pk-popover); data-toggle="<selector>" calls toggle() (pk-popover);
data-close hides the overlay the control sits in. One delegated listener per root, installed by initPlainkit() and on demand when an overlay
connects; initInvokers is idempotent per root. The pure resolution is exported for tests.
```

```html
<pk-button data-open="#confirm">Delete</pk-button>
<pk-dialog id="confirm" heading="Delete this item?" size="sm">
  <p>This cannot be undone.</p>
  <pk-button slot="footer" variant="ghost" data-close>Cancel</pk-button>
  <pk-button slot="footer" variant="warn" data-close>Delete</pk-button>
</pk-dialog>
```

`data-close` only hides the dialog; run your own work from the button's `click` listener. Exports of `dist/js/invokers.js`: `initInvokers`, `resolveInvoker`, `runInvoker`.