Events

A dispatched event name is public API. Once you listen for one, renaming it breaks your code — so this page lists every event the catalog dispatches, not a curated selection, and says plainly which of them are on a convention we intend to keep.

For opening and closing overlays, Overlay Events is the deeper reference: it carries the payload shapes and the Livewire-side dispatch examples. This page is the complete inventory.

The convention

wirekit:<component>-<happening> — a colon after the namespace, hyphens inside the name.

window.addEventListener('wirekit:tab-changed', (e) => console.log(e.detail));

The colon is not decoration. It separates the namespace from the name the way <x-wirekit::button> does, and it cannot be mistaken for a CSS class or a hyphenated HTML attribute — which a bare wirekit-tab-changed can. Where a name has a natural sub-scope, a second colon groups it: wirekit:reading-progress:milestone.

Listening from Alpine

<x-wirekit::stack gap="md" x-data="{ last: '—' }" x-on:wirekit:tab-changed.window="last = $event.detail?.name ?? '—'">
    <x-wirekit::tabs :items="['overview' => 'Overview', 'activity' => 'Activity', 'settings' => 'Settings']" default="overview">
        <x-slot:overview><x-wirekit::text>Overview panel.</x-wirekit::text></x-slot:overview>
        <x-slot:activity><x-wirekit::text>Activity panel.</x-wirekit::text></x-slot:activity>
        <x-slot:settings><x-wirekit::text>Settings panel.</x-wirekit::text></x-slot:settings>
    </x-wirekit::tabs>
    <x-wirekit::text size="sm" intent="muted">Last event payload: <span x-text="last"></span></x-wirekit::text>
</x-wirekit::stack>

From a Livewire component the same event is dispatched with $this->dispatch('wirekit:tab-changed', name: 'activity').

Two directions, and the difference matters first

Some events WireKit dispatches — you add a listener and react. Others WireKit listens for — you dispatch them to drive a component. The tables below are the first kind. The second kind is almost entirely the overlay vocabulary (wirekit-modal-show, wirekit-drawer-close, wirekit-alert-dialog-close and their siblings), and it lives in Overlay Events with the payload each one expects.

If you are looking for "how do I open a modal from Livewire", that is the other page.

Outside the overlays, a component that listens for an event documents it on its own page: wirekit:file-upload-reset, for example, is on File Upload, wirekit:reveal, which starts every reveal whose trigger is manual, is on Reveal, and wirekit:saved, which tells x-wk-unsaved that a save went through, is on Unsaved Hint, with its counterpart wirekit:not-saved for a save that did not go through in A Save That Did Not Go Through.

The full inventory of what WireKit dispatches

On the convention

These use the namespace and the colon, and they are the shape new events will take.

Namespaced with a hyphen

Older, and every one of them keeps working unchanged for the whole of v2 — the names below are the contract. They are listed apart because a new event will not be named this way.

wirekit-toast-{name} is assembled at runtime from the region's name, so it is the one entry here that no static scan of this repository can confirm — worth knowing if you ever grep for it and come up empty.

wirekit-modal-show and wirekit-command-palette-show are the two names in this table that appear on both sides of the page. Each has always been an event you dispatch AT its component — that is what Overlay Events documents, and it stays true. They are listed here as well because a <x-wirekit::modal.trigger for="…"> and a <x-wirekit::command-palette.trigger> send them for you, so the library emits them too. One happening, one name: a trigger has to say the word its listener answers to, and a second spelling for the same thing would cost every reader the question of which one is real.

Without a namespace

They keep working for the whole of v2. Renaming them is a breaking change and belongs to a major version, alongside an alias period — not to a tidy-up.

Between WireKit's own instances

A few events carry a message from one instance of a component to another. A listener on window hears most of them, so they are named here, but they are wiring rather than something to build on: their names and payloads are not part of the promise at the top of this page. To react to what they coordinate, listen for the component's own event in the tables above.

What this means for your code

• Listening is safe. Every name on this page is stable for v2.
• Prefer scoping to the element over window for the unprefixed ten, because those are the ones that can collide.
• Writing your own component? Use wirekit:-style names only for events you dispatch from WireKit components. Your own components should carry your own namespace, for exactly the reason this page exists.