story(flip-card): initial implementation (previously Facts-Card)

[kyubisation]

We want to provide a flip-card component.
It's purpose is to provide a hint and on interaction, more information.

Figma: https://www.figma.com/design/9r6xSfNmEfCFxl1yFYedrj/Lyne-Components?m=auto&node-id=38417%3A401196&t=wS3QP8WeLivUViQy-1
Aria Pattern: Unclear. Possibilities are https://www.w3.org/WAI/ARIA/apg/patterns/carousel/ or https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/

Design Spec:

• The flip card is per default in its light (summary) state
  • The summary state can have content and an image
• On interaction, the flip-card switches to its dark (detail) state
  • The details state can have any kind of content
• In both states the button to switch state in the bottom left corner, for which other content should flow around (possibly achieved via float, if not possible, reserve space horizontally)
• The flip card should have the same size in default and flipped state, i.e. no change in size is allowed.
  The flip card should grow with the content (with a minimum height). Summary and details view can have different sizes and should grow/shrink when switching states. This can happen independently of other instances.
  • The size has a default (minimum) height and width, but can be changed by consumers directly with css height/width properties on <sbb-flip-card>.
• The image can be right aligned or bottom aligned.
• The text should not flow into the button (the button should reserve space horizontally)
• The text should NOT have a scrollbar
• Should have animation on switch: https://www.figma.com/proto/9r6xSfNmEfCFxl1yFYedrj/Lyne-Components?page-id=38417%3A397349&node-id=38428-4253&viewport=97%2C1717%2C0.46&t=Y0XboWmoDOxOsfuo-1&scaling=min-zoom

Tech Spec:

• Click on card should toggle the state (compare with card/card-button implementation)

<sbb-flip-card>

• Should have a method toggle() which toggles the state
• Should have a getter for summary (the instance of <sbb-flip-card-summary>) and details (the instance of <sbb-flip-card-details>)

<sbb-flip-card-summary>

• Should have an unnamed slot and an image slot
• Should have a property imageAlignment: 'after' | 'below' = 'after' to align the image either after the title or below.

<sbb-flip-card-details>

• Should have an unnamed slot

<sbb-flip-card>
  <sbb-flip-card-summary>
    <sbb-title level="4">Title</sbb-title>
    <sbb-image slot="image" ...></sbb-title>
  </sbb-flip-card-summary>
  <sbb-flip-card-details>
    <sbb-title level="4">Title</sbb-title>
    <p>
      Long explanation....
      <sbb-link href="..." negative>Link to something</sbb-link>
    </p>
  </sbb-flip-card-details>
</sbb-flip-card>