story: AI generated Chip

[mcilurzo]

There should be support to place a sbb-chip over an image to indicate AI generated content.

Design: https://www.figma.com/design/9r6xSfNmEfCFxl1yFYedrj/Lyne-Components?node-id=44805-55260&node-type=frame&t=hHul00mOPLODOhRD-11

In order to enable this, we create a breaking refactoring, whereas main goal is to extract non-image-cdn related stuff from the sbb-image where possible. All the styling should happen with CSS classes which can be applied tosbb-image and native img tag.

• <figure> and <figcaption> should not be part anymore of the sbb-image. If there was a caption used, the consumer has to create it themself.

  <figure class="sbb-figure">
    <sbb-image ...></sbb-image> or <img />
    <figcaption>Caption</figcaption>
  </figure>

• With the CSS class sbb-figure we want to provide the necessary styling.

• For the <sbb-image> and the <img> we want to provide predefined CSS classes for border-radius (standard and round) and aspect ratio (all planned combinations).

• If possible, the <figure> should use CSS grid so we can create CSS classes to position the AI generated chip on top by assigning the same grid area (See https://dev.to/nicm42/using-css-grid-to-put-elements-on-top-of-each-other-44ei). There should be one class for start start and one for end end positioning (naming pending :-) ).

  <figure class="sbb-figure">
    <sbb-image></sbb-image>
    <sbb-chip class="sbb-figure-chip-start-start"></sbb-chip>
    <figcaption>Caption</figcaption>
  </figure>