How to trigger action when documenting on:click in Storybook v7

[feral estuary]

I have an on:click event that internally references tagClose in my component and I'm not sure how to document it. The examples I've found are all understandably outdated. I'd like something like:

import { action } from '@storybook/addon-actions';
import TagBasic from './index.svelte';

export default {
  title: 'TagBasic',
  component: TagBasic,
  tags: ['autodocs']
};

export const Default = {
  args: {
    label: 'Label',
  },
  on: {
    tagClose: action('click')
  }
};

I've confirmed the click event is working in my SvelteKit environment.

[rain trench]

Hi! I'm assuming tagClose is an accepted property of your component? If so, I believe either of these should work:

import TagBasic from './index.svelte';

export default {
  title: 'TagBasic',
  component: TagBasic,
  tags: ['autodocs'],
  argTypes: {
    tagClose: { action: 'click' }
  }
};

import { action } from '@storybook/addon-actions';
import TagBasic from './index.svelte';

export default {
  title: 'TagBasic',
  component: TagBasic,
  tags: ['autodocs'],
  // Could also be applied per-story
  args: {
    tagClose: action('click')
  }
};

These are the docs I referenced: https://storybook.js.org/docs/svelte/essentials/actions. Would appreciate knowing what you found outdated.

[feral estuary]

Oh interesting. Maybe the problem is the "addons" panel is not showing? I just installed a virgin SvelteKit and Storybook v7 and when I add

  argTypes: {
    tagClose: { action: 'click' }
  }

to the Button stories example file I don't see the Interactions. See screenshot. When I toggle "Show addons" nothing happens. I confirmed Button.svelte has a on:click.

[rain trench]

Ahh, you're viewing a component's docs. The addons panels only show when viewing a story (click on Primary, Secondary, etc in the sidebar).