fix: review comments

src/elements/flip-card/flip-card-details/readme.md

@@ -1,4 +1,4 @@
-The `sbb-flip-card-details`, when used inside a `sbb-flip-card`, will show its contents when the card is flipped.
+The `sbb-flip-card-details`, when used inside a [sbb-flip-card](/docs/elements-sbb-flip-card-sbb-flip-card--docs), will show its contents when the card is flipped.
 The component's slot is implicitly set to `"details"`.
 
 ```html

src/elements/flip-card/flip-card-summary/flip-card-summary.stories.ts

@@ -67,6 +67,12 @@ export const Default: StoryObj = {
   argTypes: defaultArgTypes,
 };
 
+export const ImageBelow: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, imageAlignment: imageAlignment.options![1] },
+};
+
 const meta: Meta = {
   decorators: [withActions as Decorator],
   parameters: {

src/elements/flip-card/flip-card-summary/flip-card-summary.ts

@@ -6,6 +6,8 @@ import { hostAttributes } from '../../core/decorators.js';
 
 import style from './flip-card-summary.scss?lit&inline';
 
+export type SbbFlipCardImageAlignment = 'after' | 'below';
+
 /**
  * Combined with a `sbb-flip-card`, it displays its content when the card is not flipped.
  *
@@ -20,9 +22,8 @@ export class SbbFlipCardSummaryElement extends LitElement {
   public static override styles: CSSResultGroup = style;
 
   /** The position where to render the image. */
-  @property({ attribute: 'image-alignment', reflect: true }) public imageAlignment:
-    | 'after'
-    | 'below' = 'after';
+  @property({ attribute: 'image-alignment', reflect: true })
+  public imageAlignment: SbbFlipCardImageAlignment = 'after';
 
   protected override render(): TemplateResult {
     return html`

src/elements/flip-card/flip-card-summary/readme.md

@@ -1,4 +1,4 @@
-The `sbb-flip-card-summary`, when used inside a `sbb-flip-card`, shows its contents when the card is not flipped.
+The `sbb-flip-card-summary`, when used inside a [sbb-flip-card](/docs/elements-sbb-flip-card-sbb-flip-card--docs), shows its contents when the card is not flipped.
 The component's slot is implicitly set to `"summary"`.
 
 ```html
@@ -20,7 +20,7 @@ Use the unnamed slot of `sbb-flip-card-summary` to provide a title and, optional
 
 | Name             | Attribute         | Privacy | Type                        | Default   | Description                             |
 | ---------------- | ----------------- | ------- | --------------------------- | --------- | --------------------------------------- |
-| `imageAlignment` | `image-alignment` | public  | `\| 'after'     \| 'below'` | `'after'` | The position where to render the image. |
+| `imageAlignment` | `image-alignment` | public  | `SbbFlipCardImageAlignment` | `'after'` | The position where to render the image. |
 
 ## Slots
 

src/elements/flip-card/flip-card/flip-card.ts

@@ -21,6 +21,16 @@ import style from './flip-card.scss?lit&inline';
 export class SbbFlipCardElement extends LitElement {
   public static override styles: CSSResultGroup = style;
 
+  /** Returns the slotted sbb-flip-card-summary. */
+  public get summary(): SbbFlipCardSummaryElement {
+    return this.querySelector('sbb-flip-card-summary')!;
+  }
+
+  /** Returns the slotted sbb-flip-card-details. */
+  public get details(): SbbFlipCardDetailsElement {
+    return this.querySelector('sbb-flip-card-details')!;
+  }
+
   /** Whether the card is flipped or not. */
   @state() private _flipped = false;
 
@@ -34,16 +44,6 @@ export class SbbFlipCardElement extends LitElement {
     this.details.inert = !this._flipped;
   }
 
-  /** Returns the slotted sbb-flip-card-summary. */
-  public get summary(): SbbFlipCardSummaryElement {
-    return this.querySelector('sbb-flip-card-summary')!;
-  }
-
-  /** Returns the slotted sbb-flip-card-details. */
-  public get details(): SbbFlipCardDetailsElement {
-    return this.querySelector('sbb-flip-card-details')!;
-  }
-
   protected override render(): TemplateResult {
     return html`
       <div class="sbb-flip-card--wrapper">

src/elements/flip-card/flip-card/flip-card.visual.spec.ts

@@ -1,24 +1,24 @@
-import { html, nothing } from 'lit';
+import { html, nothing, type TemplateResult } from 'lit';
 
 import sampleImages from '../../core/images.js';
 import {
   describeViewports,
   visualDiffDefault,
   visualDiffFocus,
 } from '../../core/testing/private.js';
-
 import './flip-card.js';
 import '../flip-card-summary.js';
 import '../flip-card-details.js';
 import '../../title.js';
 import '../../link.js';
 import '../../image.js';
+import type { SbbFlipCardImageAlignment } from '../flip-card-summary.js';
 
 const content = (
   title: string = 'Summary',
-  imageAlignment: 'after' | 'below' = 'after',
+  imageAlignment: SbbFlipCardImageAlignment = 'after',
   longConent: boolean = false,
-) =>
+): TemplateResult =>
   html` <sbb-flip-card-summary slot="summary" image-alignment=${imageAlignment}>
       <sbb-title level="4">${title}</sbb-title>
       <sbb-image
@@ -52,7 +52,7 @@ describe(`sbb-flip-card`, () => {
           state.with(async (setup) => {
             await setup.withFixture(html`
               <sbb-flip-card>
-                ${content('Summary', imageAlignment as 'after' | 'below')}
+                ${content('Summary', imageAlignment as SbbFlipCardImageAlignment)}
               </sbb-flip-card>
             `);
           }),
@@ -86,7 +86,7 @@ describe(`sbb-flip-card`, () => {
         visualDiffDefault.with(async (setup) => {
           await setup.withFixture(
             html`<sbb-flip-card>
-              ${content('Summary', imageAlignment as 'after' | 'below', true)}
+              ${content('Summary', imageAlignment as SbbFlipCardImageAlignment, true)}
             </sbb-flip-card>`,
           );
         }),

src/elements/flip-card/flip-card/readme.md

@@ -1,5 +1,5 @@
 The `sbb-flip-card` component displays an informative card that reveals more informations when clicked or toggled programmatically.
-It's meant to be used together with `sbb-flip-card-summary` and `sbb-flip-card-details`.
+It's meant to be used together with [sbb-flip-card-summary](/docs/elements-sbb-flip-card-sbb-flip-card-summary--docs) and [sbb-flip-card-details](/docs/elements-sbb-flip-card-sbb-flip-card-details--docs).
 
 ```html
 <sbb-flip-card>
@@ -17,7 +17,7 @@ The component will display the content slotted in the `summary` slot in the main
 
 ## States
 
-The `sbb-flip-card` will switch to the flipped state after the user clicks on it or after the `toggle` method is called. Once the component is flipped, it will have the attribute `data-flipped`, which is for internal use only, so it should not be set by hand.
+The `sbb-flip-card` will switch to the flipped state after the user clicks on it or after the `toggle` method is called.
 
 <!-- Auto Generated Below -->