DOM Events

The custom element dispatches all BordaEvent values as standard CustomEvent instances on the DOM element itself. Both bubble and cross shadow DOM boundaries (composed: true).

Events fire with the same names as the BordaEvent enum values — tour:start, tour:finish, close:click, and so on. The event.detail payload matches the data emitted on the internal event bus.

Listening

const widget = document.querySelector('borda-tour-widget');

widget.addEventListener('tour:start', () => {
  console.log('Onboarding started');
});

widget.addEventListener('tour:finish', () => {
  console.log('Onboarding completed');
});

widget.addEventListener('tour:step-change', (event) => {
  console.log('Step changed', event.detail);
});

widget.addEventListener('tour:close', () => {
  console.log('Onboarding dismissed');
});

Removing listeners

Use standard removeEventListener — pass the same handler reference:

const handler = () => console.log('finished');

widget.addEventListener('tour:finish', handler);

// Later
widget.removeEventListener('tour:finish', handler);

Event summary

Notes

• Events bubble and are composed, so they cross shadow DOM boundaries.
• Use standard addEventListener / removeEventListener — no custom API needed.
• All handlers are automatically cleaned up when the element is removed from the DOM.