Stepping around a page

A tour with nothing to wait for: six targets of different shapes, and the last one sits in the corner the End tour control wants, so the control moves.

The story

const story = {
  id: 'stepping',
  steps: [
    { id: 'title', target: '[data-step="title"]', message: 'A short, wide target.' },
    { id: 'wide', target: '[data-step="wide"]', message: 'A tall card, off to the left.' },
    {
      id: 'small',
      target: '[data-step="small"]',
      message: 'Something small, so the corners have to hold up.',
    },
    {
      id: 'row',
      target: '[data-step="row"]',
      message: 'A full-width row, back down the page.',
    },
    { id: 'button', target: '[data-step="button"]', message: 'And the button at the end.' },
    {
      id: 'corner',
      target: '[data-step="corner"]',
      message:
        'An account menu, in the corner the End tour control wants. A ' +
        'control left on top of a cutout takes back the interaction the ' +
        'hole exists to allow, so it gives the corner up.',
    },
  ],
} satisfies LekoStory

The instance's options

const options = { scroll: true } satisfies LekoOptions