diff --git a/src/elements/teaser-hero.ts b/src/elements-experimental/teaser-hero.ts
similarity index 100%
rename from src/elements/teaser-hero.ts
rename to src/elements-experimental/teaser-hero.ts
diff --git a/src/elements/teaser-hero/__snapshots__/teaser-hero.snapshot.spec.snap.js b/src/elements-experimental/teaser-hero/__snapshots__/teaser-hero.snapshot.spec.snap.js
similarity index 100%
rename from src/elements/teaser-hero/__snapshots__/teaser-hero.snapshot.spec.snap.js
rename to src/elements-experimental/teaser-hero/__snapshots__/teaser-hero.snapshot.spec.snap.js
diff --git a/src/elements-experimental/teaser-hero/readme.md b/src/elements-experimental/teaser-hero/readme.md
new file mode 100644
index 0000000000..15f6517ffd
--- /dev/null
+++ b/src/elements-experimental/teaser-hero/readme.md
@@ -0,0 +1,49 @@
+The `sbb-teaser-hero` is a component with a background image and an action call within a panel;
+it should be an eye-catcher and should have an emotional effect on the user with its large image component.
+
+## Slots
+
+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.
+
+```html
+
+ Break out and explore castles and palaces.
+
+
+
+ Break out and explore castles and palaces.
+
+ Find out more
+
+```
+
+## Accessibility
+
+The description text is wrapped into an `p` element to guarantee the semantic meaning.
+
+Avoid slotting block elements (e.g. `div`) as this violates semantic rules and can have negative effects on screen readers.
+
+
+
+## Properties
+
+| Name | Attribute | Privacy | Type | Default | Description |
+| ------------- | -------------- | ------- | --------------------- | ------- | --------------------------------------------- |
+| `imageAlt` | `image-alt` | public | `string \| undefined` | | Image alt text will be passed to `sbb-image`. |
+| `imageSrc` | `image-src` | public | `string \| undefined` | | Image src will be passed to `sbb-image`. |
+| `linkContent` | `link-content` | public | `string \| undefined` | | Panel link text. |
+
+## Slots
+
+| Name | Description |
+| -------------- | ----------------------------------------------------- |
+| | Use the unnamed slot to add text content to the panel |
+| `image` | The background image that can be a `sbb-image` |
+| `link-content` | Link content of the panel |
diff --git a/src/elements/teaser-hero/teaser-hero.scss b/src/elements-experimental/teaser-hero/teaser-hero.scss
similarity index 96%
rename from src/elements/teaser-hero/teaser-hero.scss
rename to src/elements-experimental/teaser-hero/teaser-hero.scss
index 8e89806e94..7fb9b7e79b 100644
--- a/src/elements/teaser-hero/teaser-hero.scss
+++ b/src/elements-experimental/teaser-hero/teaser-hero.scss
@@ -1,4 +1,4 @@
-@use '../core/styles' as sbb;
+@use '@sbb-esta/lyne-elements/core/styles' as sbb;
// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component.
@include sbb.box-sizing;
diff --git a/src/elements/teaser-hero/teaser-hero.snapshot.spec.ts b/src/elements-experimental/teaser-hero/teaser-hero.snapshot.spec.ts
similarity index 86%
rename from src/elements/teaser-hero/teaser-hero.snapshot.spec.ts
rename to src/elements-experimental/teaser-hero/teaser-hero.snapshot.spec.ts
index c4a912347b..075228ad84 100644
--- a/src/elements/teaser-hero/teaser-hero.snapshot.spec.ts
+++ b/src/elements-experimental/teaser-hero/teaser-hero.snapshot.spec.ts
@@ -1,15 +1,14 @@
import { expect } from '@open-wc/testing';
+import { fixture, testA11yTreeSnapshot } from '@sbb-esta/lyne-elements/core/testing/private.js';
+import { waitForImageReady } from '@sbb-esta/lyne-elements/core/testing.js';
import { html } from 'lit/static-html.js';
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
-import { waitForImageReady } from '../core/testing.js';
-
import type { SbbTeaserHeroElement } from './teaser-hero.js';
import './teaser-hero.js';
-import '../image.js';
+import '@sbb-esta/lyne-elements/image.js';
-const imageUrl = import.meta.resolve('../core/testing/assets/lucerne.png');
+const imageUrl = import.meta.resolve('../../elements/core/testing/assets/lucerne.png');
describe(`sbb-teaser-hero`, () => {
let element: SbbTeaserHeroElement;
diff --git a/src/elements/teaser-hero/teaser-hero.spec.ts b/src/elements-experimental/teaser-hero/teaser-hero.spec.ts
similarity index 75%
rename from src/elements/teaser-hero/teaser-hero.spec.ts
rename to src/elements-experimental/teaser-hero/teaser-hero.spec.ts
index 075cb253ee..ef9423e4ec 100644
--- a/src/elements/teaser-hero/teaser-hero.spec.ts
+++ b/src/elements-experimental/teaser-hero/teaser-hero.spec.ts
@@ -1,12 +1,11 @@
import { assert, expect } from '@open-wc/testing';
+import { fixture } from '@sbb-esta/lyne-elements/core/testing/private.js';
+import { waitForLitRender } from '@sbb-esta/lyne-elements/core/testing.js';
import { html } from 'lit/static-html.js';
-import { fixture } from '../core/testing/private.js';
-import { waitForLitRender } from '../core/testing.js';
-
import { SbbTeaserHeroElement } from './teaser-hero.js';
-const imageUrl = import.meta.resolve('../core/testing/assets/lucerne.png');
+const imageUrl = import.meta.resolve('../../elements/core/testing/assets/lucerne.png');
describe(`sbb-teaser-hero`, () => {
let element: SbbTeaserHeroElement;
diff --git a/src/elements/teaser-hero/teaser-hero.ssr.spec.ts b/src/elements-experimental/teaser-hero/teaser-hero.ssr.spec.ts
similarity index 78%
rename from src/elements/teaser-hero/teaser-hero.ssr.spec.ts
rename to src/elements-experimental/teaser-hero/teaser-hero.ssr.spec.ts
index 8a27fb6f9d..68dfe32c95 100644
--- a/src/elements/teaser-hero/teaser-hero.ssr.spec.ts
+++ b/src/elements-experimental/teaser-hero/teaser-hero.ssr.spec.ts
@@ -1,9 +1,8 @@
import { assert } from '@open-wc/testing';
+import images from '@sbb-esta/lyne-elements/core/images.js';
+import { fixture } from '@sbb-esta/lyne-elements/core/testing/private.js';
import { html } from 'lit';
-import images from '../core/images.js';
-import { fixture } from '../core/testing/private.js';
-
import { SbbTeaserHeroElement } from './teaser-hero.js';
describe(`sbb-teaser-hero ${fixture.name}`, () => {
diff --git a/src/elements/teaser-hero/teaser-hero.stories.ts b/src/elements-experimental/teaser-hero/teaser-hero.stories.ts
similarity index 96%
rename from src/elements/teaser-hero/teaser-hero.stories.ts
rename to src/elements-experimental/teaser-hero/teaser-hero.stories.ts
index d4fa0e58be..fc55df3064 100644
--- a/src/elements/teaser-hero/teaser-hero.stories.ts
+++ b/src/elements-experimental/teaser-hero/teaser-hero.stories.ts
@@ -1,3 +1,4 @@
+import sampleImages from '@sbb-esta/lyne-elements/core/images.js';
import { withActions } from '@storybook/addon-actions/decorator';
import type { InputType } from '@storybook/types';
import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/web-components';
@@ -5,7 +6,6 @@ import type { TemplateResult } from 'lit';
import { html } from 'lit';
import { sbbSpread } from '../../storybook/helpers/spread.js';
-import sampleImages from '../core/images.js';
import readme from './readme.md?raw';
import './teaser-hero.js';
@@ -156,7 +156,7 @@ const meta: Meta = {
extractComponentDescription: () => readme,
},
},
- title: 'elements/sbb-teaser/sbb-teaser-hero',
+ title: 'experimental/sbb-teaser/sbb-teaser-hero',
};
export default meta;
diff --git a/src/elements/teaser-hero/teaser-hero.ts b/src/elements-experimental/teaser-hero/teaser-hero.ts
similarity index 91%
rename from src/elements/teaser-hero/teaser-hero.ts
rename to src/elements-experimental/teaser-hero/teaser-hero.ts
index 7c4e559944..bda48b76e3 100644
--- a/src/elements/teaser-hero/teaser-hero.ts
+++ b/src/elements-experimental/teaser-hero/teaser-hero.ts
@@ -1,13 +1,12 @@
+import { SbbLinkBaseElement } from '@sbb-esta/lyne-elements/core/base-elements.js';
import { type CSSResultGroup, nothing, type TemplateResult } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { html } from 'lit/static-html.js';
-import { SbbLinkBaseElement } from '../core/base-elements.js';
-
import style from './teaser-hero.scss?lit&inline';
-import '../image.js';
-import '../link/block-link-static.js';
+import '@sbb-esta/lyne-elements/image.js';
+import '@sbb-esta/lyne-elements/link/block-link-static.js';
/**
* It displays an image and an action call within a panel.
diff --git a/src/elements/teaser-paid.ts b/src/elements-experimental/teaser-paid.ts
similarity index 100%
rename from src/elements/teaser-paid.ts
rename to src/elements-experimental/teaser-paid.ts
diff --git a/src/elements/teaser-paid/__snapshots__/teaser-paid.snapshot.spec.snap.js b/src/elements-experimental/teaser-paid/__snapshots__/teaser-paid.snapshot.spec.snap.js
similarity index 100%
rename from src/elements/teaser-paid/__snapshots__/teaser-paid.snapshot.spec.snap.js
rename to src/elements-experimental/teaser-paid/__snapshots__/teaser-paid.snapshot.spec.snap.js
diff --git a/src/elements-experimental/teaser-paid/readme.md b/src/elements-experimental/teaser-paid/readme.md
new file mode 100644
index 0000000000..b82b20ef8f
--- /dev/null
+++ b/src/elements-experimental/teaser-paid/readme.md
@@ -0,0 +1,21 @@
+The `sbb-teaser-paid` is a component with a background image and a chip with a text.
+
+```html
+
+ Label
+
+
+```
+
+## Slots
+
+The `sbb-teaser-paid` component has two slots: the `image` slot, used to slot an `sbb-image` and the `chip` slot, used to slot an `sbb-chip`.
+
+
+
+## Slots
+
+| Name | Description |
+| ------- | ---------------------------------------------- |
+| `chip` | Link content of the panel |
+| `image` | The background image that can be a `sbb-image` |
diff --git a/src/elements/teaser-paid/teaser-paid.scss b/src/elements-experimental/teaser-paid/teaser-paid.scss
similarity index 96%
rename from src/elements/teaser-paid/teaser-paid.scss
rename to src/elements-experimental/teaser-paid/teaser-paid.scss
index 32423bf720..9160390f93 100644
--- a/src/elements/teaser-paid/teaser-paid.scss
+++ b/src/elements-experimental/teaser-paid/teaser-paid.scss
@@ -1,4 +1,4 @@
-@use '../core/styles' as sbb;
+@use '@sbb-esta/lyne-elements/core/styles' as sbb;
// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component.
@include sbb.box-sizing;
diff --git a/src/elements/teaser-paid/teaser-paid.snapshot.spec.ts b/src/elements-experimental/teaser-paid/teaser-paid.snapshot.spec.ts
similarity index 87%
rename from src/elements/teaser-paid/teaser-paid.snapshot.spec.ts
rename to src/elements-experimental/teaser-paid/teaser-paid.snapshot.spec.ts
index c2cf0fd450..642fd54827 100644
--- a/src/elements/teaser-paid/teaser-paid.snapshot.spec.ts
+++ b/src/elements-experimental/teaser-paid/teaser-paid.snapshot.spec.ts
@@ -1,8 +1,7 @@
import { expect } from '@open-wc/testing';
+import { fixture, testA11yTreeSnapshot } from '@sbb-esta/lyne-elements/core/testing/private.js';
import { html } from 'lit/static-html.js';
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
-
import './teaser-paid.js';
import type { SbbTeaserPaidElement } from './teaser-paid.js';
diff --git a/src/elements/teaser-paid/teaser-paid.spec.ts b/src/elements-experimental/teaser-paid/teaser-paid.spec.ts
similarity index 73%
rename from src/elements/teaser-paid/teaser-paid.spec.ts
rename to src/elements-experimental/teaser-paid/teaser-paid.spec.ts
index d740ccfd2e..86a7e2552e 100644
--- a/src/elements/teaser-paid/teaser-paid.spec.ts
+++ b/src/elements-experimental/teaser-paid/teaser-paid.spec.ts
@@ -1,14 +1,13 @@
import { assert, expect } from '@open-wc/testing';
+import type { SbbChipElement } from '@sbb-esta/lyne-elements/chip.js';
+import { fixture } from '@sbb-esta/lyne-elements/core/testing/private.js';
+import type { SbbImageElement } from '@sbb-esta/lyne-elements/image.js';
import { html } from 'lit/static-html.js';
-import type { SbbChipElement } from '../chip.js';
-import { fixture } from '../core/testing/private.js';
-import type { SbbImageElement } from '../image.js';
-
import { SbbTeaserPaidElement } from './teaser-paid.js';
-import '../chip.js';
-import '../image.js';
+import '@sbb-esta/lyne-elements/chip.js';
+import '@sbb-esta/lyne-elements/image.js';
describe(`sbb-teaser-paid`, () => {
let element: SbbTeaserPaidElement;
diff --git a/src/elements/teaser-paid/teaser-paid.ssr.spec.ts b/src/elements-experimental/teaser-paid/teaser-paid.ssr.spec.ts
similarity index 66%
rename from src/elements/teaser-paid/teaser-paid.ssr.spec.ts
rename to src/elements-experimental/teaser-paid/teaser-paid.ssr.spec.ts
index 5df7f8bbda..459a76330c 100644
--- a/src/elements/teaser-paid/teaser-paid.ssr.spec.ts
+++ b/src/elements-experimental/teaser-paid/teaser-paid.ssr.spec.ts
@@ -1,12 +1,11 @@
import { assert } from '@open-wc/testing';
+import { fixture } from '@sbb-esta/lyne-elements/core/testing/private.js';
import { html } from 'lit';
-import { fixture } from '../core/testing/private.js';
-
import { SbbTeaserPaidElement } from './teaser-paid.js';
-import '../chip.js';
-import '../image.js';
+import '@sbb-esta/lyne-elements/chip.js';
+import '@sbb-esta/lyne-elements/image.js';
describe(`sbb-teaser-paid ${fixture.name}`, () => {
let root: SbbTeaserPaidElement;
@@ -19,7 +18,9 @@ describe(`sbb-teaser-paid ${fixture.name}`, () => {
`,
- { modules: ['./teaser-paid.js', '../chip.js', '../image.js'] },
+ {
+ modules: ['./teaser-paid.js', '../../elements/chip.js', '../../elements/image.js'],
+ },
);
});
diff --git a/src/elements/teaser-paid/teaser-paid.stories.ts b/src/elements-experimental/teaser-paid/teaser-paid.stories.ts
similarity index 92%
rename from src/elements/teaser-paid/teaser-paid.stories.ts
rename to src/elements-experimental/teaser-paid/teaser-paid.stories.ts
index 3c9adf9bee..b3bfbb4bb0 100644
--- a/src/elements/teaser-paid/teaser-paid.stories.ts
+++ b/src/elements-experimental/teaser-paid/teaser-paid.stories.ts
@@ -1,15 +1,15 @@
+import sampleImages from '@sbb-esta/lyne-elements/core/images.js';
import { withActions } from '@storybook/addon-actions/decorator';
import type { InputType } from '@storybook/types';
import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components';
import { html, type TemplateResult } from 'lit';
import { sbbSpread } from '../../storybook/helpers/spread.js';
-import sampleImages from '../core/images.js';
import readme from './readme.md?raw';
-import '../chip.js';
-import '../image.js';
+import '@sbb-esta/lyne-elements/chip.js';
+import '@sbb-esta/lyne-elements/image.js';
import './teaser-paid.js';
const accessibilityLabel: InputType = {
@@ -118,7 +118,7 @@ const meta: Meta = {
extractComponentDescription: () => readme,
},
},
- title: 'elements/sbb-teaser/sbb-teaser-paid',
+ title: 'experimental/sbb-teaser/sbb-teaser-paid',
};
export default meta;
diff --git a/src/elements/teaser-paid/teaser-paid.ts b/src/elements-experimental/teaser-paid/teaser-paid.ts
similarity index 92%
rename from src/elements/teaser-paid/teaser-paid.ts
rename to src/elements-experimental/teaser-paid/teaser-paid.ts
index 9a108a8094..310ff1b030 100644
--- a/src/elements/teaser-paid/teaser-paid.ts
+++ b/src/elements-experimental/teaser-paid/teaser-paid.ts
@@ -1,8 +1,7 @@
+import { SbbLinkBaseElement } from '@sbb-esta/lyne-elements/core/base-elements.js';
import { html, type CSSResultGroup, type TemplateResult } from 'lit';
import { customElement } from 'lit/decorators.js';
-import { SbbLinkBaseElement } from '../core/base-elements.js';
-
import style from './teaser-paid.scss?lit&inline';
/**
diff --git a/src/elements/teaser-hero/readme.md b/src/elements/teaser-hero/readme.md
deleted file mode 100644
index 74023bcf76..0000000000
--- a/src/elements/teaser-hero/readme.md
+++ /dev/null
@@ -1,54 +0,0 @@
-The `sbb-teaser-hero` is a component with a background image and an action call within a panel;
-it should be an eye-catcher and should have an emotional effect on the user with its large image component.
-
-## Slots
-
-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.
-
-```html
-
- Break out and explore castles and palaces.
-
-
-
- Break out and explore castles and palaces.
-
- Find out more
-
-```
-
-## Accessibility
-
-The description text is wrapped into an `p` element to guarantee the semantic meaning.
-
-Avoid slotting block elements (e.g. `div`) as this violates semantic rules and can have negative effects on screen readers.
-
-
-
-## Properties
-
-| Name | Attribute | Privacy | Type | Default | Description |
-| -------------------- | --------------------- | ------- | --------------------------------------- | ------- | ----------------------------------------------------------------- |
-| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. |
-| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. |
-| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. |
-| `imageAlt` | `image-alt` | public | `string \| undefined` | | Image alt text will be passed to `sbb-image`. |
-| `imageSrc` | `image-src` | public | `string \| undefined` | | Image src will be passed to `sbb-image`. |
-| `linkContent` | `link-content` | public | `string \| undefined` | | Panel link text. |
-| `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. |
-| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. |
-
-## Slots
-
-| Name | Description |
-| -------------- | ----------------------------------------------------- |
-| | Use the unnamed slot to add text content to the panel |
-| `image` | The background image that can be a `sbb-image` |
-| `link-content` | Link content of the panel |
diff --git a/src/elements/teaser-paid/readme.md b/src/elements/teaser-paid/readme.md
deleted file mode 100644
index d1713ff2db..0000000000
--- a/src/elements/teaser-paid/readme.md
+++ /dev/null
@@ -1,31 +0,0 @@
-The `sbb-teaser-paid` is a component with a background image and a chip with a text.
-
-```html
-
- Label
-
-
-```
-
-## Slots
-
-The `sbb-teaser-paid` component has two slots: the `image` slot, used to slot an `sbb-image` and the `chip` slot, used to slot an `sbb-chip`.
-
-
-
-## Properties
-
-| Name | Attribute | Privacy | Type | Default | Description |
-| -------------------- | --------------------- | ------- | --------------------------------------- | ------- | ----------------------------------------------------------------- |
-| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. |
-| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. |
-| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. |
-| `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. |
-| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. |
-
-## Slots
-
-| Name | Description |
-| ------- | ---------------------------------------------- |
-| `chip` | Link content of the panel |
-| `image` | The background image that can be a `sbb-image` |
diff --git a/src/storybook/pages/home/home.common.ts b/src/storybook/pages/home/home.common.ts
index b064c515a0..24232b182f 100644
--- a/src/storybook/pages/home/home.common.ts
+++ b/src/storybook/pages/home/home.common.ts
@@ -17,8 +17,8 @@ import '../../../elements/link-list.js';
import '../../../elements/menu.js';
import '../../../elements/navigation.js';
import '../../../elements/skiplink-list.js';
-import '../../../elements/teaser-hero.js';
import '../../../elements/title.js';
+import '../../../elements-experimental/teaser-hero.js';
export const skiplinkList = (): TemplateResult => html`