🐛 `Figure` component issues

[rallets]

Describe the bug Hi, using the Figure component, some issues raise:

• an extra img tag is added to the DOM
• typescript type definitions do not match the code

How to reproduce Steps to reproduce the behavior:

<Figure class="a-class">
<img src="https://picsum.photos/id/200/800/600" />
</Figure>

Expected behavior

Html should be rendered as:

<figure class="figure a-class">
<img src="https://picsum.photos/id/200/800/600" class="figure-img ">
</figure>

and VS Code should not complain about the class attribute (it's missing in figure.d.ts, many other components have it

Screenshots

Desktop (please complete the following information):

• OS: Windows 11
• chrome
• 128.0.6613.120

Additional context Add any other context about the problem here.

I think the problem is here:

<!-- why this img tag is rendered here? the slot in inside the `figure` tag -->
<img {alt} {...$$restProps} class={classes} />

<figure class={classes} {...$$restProps}>
  <slot />
  {#if caption || $$slots.caption}
    <figcaption class="figure-caption">
      {caption}<slot name="caption" />
    </figcaption>
  {/if}
</figure>

The type definitions should be

export interface FigureProps extends HTMLAttributes<HTMLElement> {
  // this class attribute is missing
  class?: string;
  alt?: string;
  caption?: string | HTMLSlotElement;
}