fix: review

src/elements-experimental/tsconfig.json

@@ -8,6 +8,6 @@
       "@sbb-esta/lyne-elements-experimental/*": ["./*"]
     }
   },
-  "include": ["./**/*.ts", "../vite-env.d.ts", "../elements/teaser-hero.ts"],
+  "include": ["./**/*.ts", "../vite-env.d.ts"],
   "exclude": ["./**/*.chromatic.stories.ts"]
 }

src/elements/teaser-hero/readme.md

@@ -6,6 +6,7 @@ it should be an eye-catcher and should have an emotional effect on the user with
 It is possible to provide the panel label via an unnamed slot,
 while the link text can be provided using the `link-content` slot or the `linkContent` property;
 similarly, the background image can be provided using the `image` slot or the `imageSrc` property.
+Optionally a `sbb-chip` can be slotted in the `chip` slot, either together with the other slottable elements or alone.
 
 ```html
 <sbb-teaser-hero
@@ -47,9 +48,9 @@ Avoid slotting block elements (e.g. `div`) as this violates semantic rules and c
 
 ## Slots
 
-| Name           | Description                                           |
-| -------------- | ----------------------------------------------------- |
-|                | Use the unnamed slot to add text content to the panel |
-| `chip`         | Link content of the panel                             |
-| `image`        | The background image that can be a `sbb-image`        |
-| `link-content` | Link content of the panel                             |
+| Name           | Description                                                        |
+| -------------- | ------------------------------------------------------------------ |
+|                | Use the unnamed slot to add text content to the panel              |
+| `chip`         | The `sbb-chip` component that will be displayed on top-left corner |
+| `image`        | The background image that can be a `sbb-image`                     |
+| `link-content` | Link content of the panel                                          |

src/elements/teaser-hero/teaser-hero.scss

@@ -40,8 +40,8 @@
   & {
     @include sbb.absolute-center-y;
   }
-
-  // Hide panel when no content or link-content is proview.
+  
+  // Hide panel when no content or link-content is provided.
   :host(:not([data-slot-names~='unnamed'], [data-slot-names~='link-content'], [link-content])) & {
     display: none;
   }

src/elements/teaser-hero/teaser-hero.ts

@@ -16,7 +16,7 @@ import '../link/block-link-static.js';
  * @slot - Use the unnamed slot to add text content to the panel
  * @slot link-content - Link content of the panel
  * @slot image - The background image that can be a `sbb-image`
- * @slot chip - Link content of the panel
+ * @slot chip - The `sbb-chip` component that will be displayed on top-left corner
  */
 @customElement('sbb-teaser-hero')
 @slotState()

src/elements/teaser-hero/teaser-hero.visual.spec.ts

@@ -54,7 +54,7 @@ describe(`sbb-teaser-hero`, () => {
         `without content ${state.name}`,
         state.with(async (setup) => {
           await setup.withFixture(html`
-            <sbb-teaser-hero href="#">
+            <sbb-teaser-hero href="#" image-src=${imageUrl}>
               <sbb-chip slot="chip">Label</sbb-chip>
             </sbb-teaser-hero>
           `);