From d085af1a66a8f059a7f2d8a768b3189aaeecd519 Mon Sep 17 00:00:00 2001
From: Mario Castigliano <mario.castigliano@finconsgroup.com>
Date: Wed, 30 Oct 2024 16:35:43 +0100
Subject: [PATCH 1/5] refactor: rename chip to chip-label

---
 src/elements/chip-label.ts                    |  1 +
 .../chip-label.snapshot.spec.snap.js}         | 20 +++++++--------
 .../chip.scss => chip-label/chip-label.scss}  |  0
 .../chip-label.snapshot.spec.ts}              | 10 ++++----
 src/elements/chip-label/chip-label.spec.ts    | 15 +++++++++++
 .../chip-label/chip-label.ssr.spec.ts         | 20 +++++++++++++++
 .../chip-label.stories.ts}                    | 10 +++++---
 .../chip.ts => chip-label/chip-label.ts}      | 10 ++++----
 .../chip-label.visual.spec.ts}                | 25 +++++++++++++------
 src/elements/{chip => chip-label}/readme.md   |  0
 src/elements/chip.ts                          |  1 -
 src/elements/chip/chip.spec.ts                | 13 ----------
 src/elements/chip/chip.ssr.spec.ts            | 20 ---------------
 .../teaser-hero.snapshot.spec.snap.js         |  8 +++---
 .../teaser-hero/teaser-hero.snapshot.spec.ts  |  6 ++---
 src/elements/teaser-hero/teaser-hero.spec.ts  |  8 +++---
 .../teaser-hero/teaser-hero.stories.ts        |  4 +--
 src/elements/teaser-hero/teaser-hero.ts       |  4 +--
 .../teaser-hero/teaser-hero.visual.spec.ts    |  8 +++---
 src/elements/teaser/teaser.ts                 |  2 +-
 .../fullscreen-diff/fullscreen-diff.ts        |  8 +++---
 .../test-case/image-diff/image-diff.ts        | 16 ++++++------
 .../src/components/test-case/test-case.scss   |  2 +-
 .../src/components/test-case/test-case.ts     |  4 +--
 .../test-title-chip-list.scss                 |  6 ++---
 25 files changed, 120 insertions(+), 101 deletions(-)
 create mode 100644 src/elements/chip-label.ts
 rename src/elements/{chip/__snapshots__/chip.snapshot.spec.snap.js => chip-label/__snapshots__/chip-label.snapshot.spec.snap.js} (51%)
 rename src/elements/{chip/chip.scss => chip-label/chip-label.scss} (100%)
 rename src/elements/{chip/chip.snapshot.spec.ts => chip-label/chip-label.snapshot.spec.ts} (66%)
 create mode 100644 src/elements/chip-label/chip-label.spec.ts
 create mode 100644 src/elements/chip-label/chip-label.ssr.spec.ts
 rename src/elements/{chip/chip.stories.ts => chip-label/chip-label.stories.ts} (91%)
 rename src/elements/{chip/chip.ts => chip-label/chip-label.ts} (78%)
 rename src/elements/{chip/chip.visual.spec.ts => chip-label/chip-label.visual.spec.ts} (53%)
 rename src/elements/{chip => chip-label}/readme.md (100%)
 delete mode 100644 src/elements/chip.ts
 delete mode 100644 src/elements/chip/chip.spec.ts
 delete mode 100644 src/elements/chip/chip.ssr.spec.ts

diff --git a/src/elements/chip-label.ts b/src/elements/chip-label.ts
new file mode 100644
index 0000000000..ffae43edb9
--- /dev/null
+++ b/src/elements/chip-label.ts
@@ -0,0 +1 @@
+export * from './chip-label/chip-label.js';
diff --git a/src/elements/chip/__snapshots__/chip.snapshot.spec.snap.js b/src/elements/chip-label/__snapshots__/chip-label.snapshot.spec.snap.js
similarity index 51%
rename from src/elements/chip/__snapshots__/chip.snapshot.spec.snap.js
rename to src/elements/chip-label/__snapshots__/chip-label.snapshot.spec.snap.js
index 65673fb30f..bd4cf10003 100644
--- a/src/elements/chip/__snapshots__/chip.snapshot.spec.snap.js
+++ b/src/elements/chip-label/__snapshots__/chip-label.snapshot.spec.snap.js
@@ -1,17 +1,17 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-chip renders DOM"] = 
-`<sbb-chip
+snapshots["sbb-chip-label renders DOM"] = 
+`<sbb-chip-label
   color="milk"
   size="xxs"
 >
   Label
-</sbb-chip>
+</sbb-chip-label>
 `;
-/* end snapshot sbb-chip renders DOM */
+/* end snapshot sbb-chip-label renders DOM */
 
-snapshots["sbb-chip renders Shadow DOM"] = 
+snapshots["sbb-chip-label renders Shadow DOM"] = 
 `<span class="sbb-chip">
   <span class="sbb-chip__text-wrapper">
     <slot>
@@ -19,9 +19,9 @@ snapshots["sbb-chip renders Shadow DOM"] =
   </span>
 </span>
 `;
-/* end snapshot sbb-chip renders Shadow DOM */
+/* end snapshot sbb-chip-label renders Shadow DOM */
 
-snapshots["sbb-chip renders A11y tree Chrome"] = 
+snapshots["sbb-chip-label renders A11y tree Chrome"] = 
 `<p>
   {
   "role": "WebArea",
@@ -35,9 +35,9 @@ snapshots["sbb-chip renders A11y tree Chrome"] =
 }
 </p>
 `;
-/* end snapshot sbb-chip renders A11y tree Chrome */
+/* end snapshot sbb-chip-label renders A11y tree Chrome */
 
-snapshots["sbb-chip renders A11y tree Firefox"] = 
+snapshots["sbb-chip-label renders A11y tree Firefox"] = 
 `<p>
   {
   "role": "document",
@@ -51,5 +51,5 @@ snapshots["sbb-chip renders A11y tree Firefox"] =
 }
 </p>
 `;
-/* end snapshot sbb-chip renders A11y tree Firefox */
+/* end snapshot sbb-chip-label renders A11y tree Firefox */
 
diff --git a/src/elements/chip/chip.scss b/src/elements/chip-label/chip-label.scss
similarity index 100%
rename from src/elements/chip/chip.scss
rename to src/elements/chip-label/chip-label.scss
diff --git a/src/elements/chip/chip.snapshot.spec.ts b/src/elements/chip-label/chip-label.snapshot.spec.ts
similarity index 66%
rename from src/elements/chip/chip.snapshot.spec.ts
rename to src/elements/chip-label/chip-label.snapshot.spec.ts
index dc47f167e7..99d8f50fcf 100644
--- a/src/elements/chip/chip.snapshot.spec.ts
+++ b/src/elements/chip-label/chip-label.snapshot.spec.ts
@@ -3,16 +3,16 @@ import { html } from 'lit/static-html.js';
 
 import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
 
-import type { SbbChipElement } from './chip.js';
+import type { SbbChipLabelElement } from './chip-label.js';
 
-import './chip.js';
+import './chip-label.js';
 
-describe(`sbb-chip`, () => {
-  let element: SbbChipElement;
+describe(`sbb-chip-label`, () => {
+  let element: SbbChipLabelElement;
 
   describe('renders', () => {
     beforeEach(async () => {
-      element = await fixture(html`<sbb-chip>Label</sbb-chip>`);
+      element = await fixture(html`<sbb-chip-label>Label</sbb-chip-label>`);
     });
 
     it('DOM', async () => {
diff --git a/src/elements/chip-label/chip-label.spec.ts b/src/elements/chip-label/chip-label.spec.ts
new file mode 100644
index 0000000000..cd2bebc1ad
--- /dev/null
+++ b/src/elements/chip-label/chip-label.spec.ts
@@ -0,0 +1,15 @@
+import { assert } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+
+import { fixture } from '../core/testing/private.js';
+
+import { SbbChipLabelElement } from './chip-label.js';
+
+describe(`sbb-chip-label`, () => {
+  it('renders', async () => {
+    const element: SbbChipLabelElement = await fixture(
+      html`<sbb-chip-label>Label</sbb-chip-label>`,
+    );
+    assert.instanceOf(element, SbbChipLabelElement);
+  });
+});
diff --git a/src/elements/chip-label/chip-label.ssr.spec.ts b/src/elements/chip-label/chip-label.ssr.spec.ts
new file mode 100644
index 0000000000..90367b0d64
--- /dev/null
+++ b/src/elements/chip-label/chip-label.ssr.spec.ts
@@ -0,0 +1,20 @@
+import { assert } from '@open-wc/testing';
+import { html } from 'lit';
+
+import { ssrHydratedFixture } from '../core/testing/private.js';
+
+import { SbbChipLabelElement } from './chip-label.js';
+
+describe(`sbb-chip-label ssr`, () => {
+  let root: SbbChipLabelElement;
+
+  beforeEach(async () => {
+    root = await ssrHydratedFixture(html`<sbb-chip-label>Label</sbb-chip-label>`, {
+      modules: ['./chip-label.js'],
+    });
+  });
+
+  it('renders', () => {
+    assert.instanceOf(root, SbbChipLabelElement);
+  });
+});
diff --git a/src/elements/chip/chip.stories.ts b/src/elements/chip-label/chip-label.stories.ts
similarity index 91%
rename from src/elements/chip/chip.stories.ts
rename to src/elements/chip-label/chip-label.stories.ts
index 35d73747a8..b7f66bc63c 100644
--- a/src/elements/chip/chip.stories.ts
+++ b/src/elements/chip-label/chip-label.stories.ts
@@ -8,7 +8,7 @@ import { sbbSpread } from '../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
 
-import './chip.js';
+import './chip-label.js';
 
 const size: InputType = {
   control: {
@@ -43,11 +43,13 @@ const defaultArgs: Args = {
 };
 
 const Template = ({ label, ...args }: Args): TemplateResult => html`
-  <sbb-chip ${sbbSpread(args)}>${label}</sbb-chip>
+  <sbb-chip-label ${sbbSpread(args)}>${label}</sbb-chip-label>
 `;
 
 const TemplateFixedWidth = ({ label, ...args }: Args): TemplateResult => html`
-  <sbb-chip ${sbbSpread(args)} style=${styleMap({ width: '10rem' })}> ${label} </sbb-chip>
+  <sbb-chip-label ${sbbSpread(args)} style=${styleMap({ width: '10rem' })}>
+    ${label}
+  </sbb-chip-label>
 `;
 
 export const MilkXXS: StoryObj = {
@@ -130,7 +132,7 @@ const meta: Meta = {
       extractComponentDescription: () => readme,
     },
   },
-  title: 'elements/sbb-chip',
+  title: 'elements/sbb-chip-label',
 };
 
 export default meta;
diff --git a/src/elements/chip/chip.ts b/src/elements/chip-label/chip-label.ts
similarity index 78%
rename from src/elements/chip/chip.ts
rename to src/elements/chip-label/chip-label.ts
index e6725c5e16..bb9ac96e5b 100644
--- a/src/elements/chip/chip.ts
+++ b/src/elements/chip-label/chip-label.ts
@@ -2,16 +2,16 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import style from './chip.scss?lit&inline';
+import style from './chip-label.scss?lit&inline';
 
 /**
  * It displays brief and compact information.
  *
- * @slot - Use the unnamed slot to add content to the `sbb-chip`.
+ * @slot - Use the unnamed slot to add content to the `sbb-chip-label`.
  */
 export
-@customElement('sbb-chip')
-class SbbChipElement extends LitElement {
+@customElement('sbb-chip-label')
+class SbbChipLabelElement extends LitElement {
   public static override styles: CSSResultGroup = style;
 
   /** Size of the chip. */
@@ -36,6 +36,6 @@ class SbbChipElement extends LitElement {
 declare global {
   interface HTMLElementTagNameMap {
     // eslint-disable-next-line @typescript-eslint/naming-convention
-    'sbb-chip': SbbChipElement;
+    'sbb-chip-label': SbbChipLabelElement;
   }
 }
diff --git a/src/elements/chip/chip.visual.spec.ts b/src/elements/chip-label/chip-label.visual.spec.ts
similarity index 53%
rename from src/elements/chip/chip.visual.spec.ts
rename to src/elements/chip-label/chip-label.visual.spec.ts
index ffc73c4b43..901fa9b4cb 100644
--- a/src/elements/chip/chip.visual.spec.ts
+++ b/src/elements/chip-label/chip-label.visual.spec.ts
@@ -2,9 +2,9 @@ import { html } from 'lit';
 
 import { describeViewports, visualDiffDefault } from '../core/testing/private.js';
 
-import './chip.js';
+import './chip-label.js';
 
-describe(`sbb-chip`, () => {
+describe(`sbb-chip-label`, () => {
   const sizeCases = ['xxs', 'xs', 's'];
   const colorCases = ['milk', 'charcoal', 'white', 'granite'];
 
@@ -14,7 +14,9 @@ describe(`sbb-chip`, () => {
       it(
         `size=${size}`,
         visualDiffDefault.with(async (setup) => {
-          await setup.withFixture(html` <sbb-chip size=${size}> Label </sbb-chip> `);
+          await setup.withFixture(html`
+            <sbb-chip-label size=${size as 'xxs' | 'xs' | 's'}> Label </sbb-chip-label>
+          `);
         }),
       );
     }
@@ -24,9 +26,16 @@ describe(`sbb-chip`, () => {
       it(
         `color=${color}`,
         visualDiffDefault.with(async (setup) => {
-          await setup.withFixture(html` <sbb-chip color=${color}> Label </sbb-chip> `, {
-            backgroundColor: color === 'white' ? 'var(--sbb-color-granite)' : undefined,
-          });
+          await setup.withFixture(
+            html`
+              <sbb-chip-label color=${color as 'milk' | 'charcoal' | 'white' | 'granite'}>
+                Label
+              </sbb-chip-label>
+            `,
+            {
+              backgroundColor: color === 'white' ? 'var(--sbb-color-granite)' : undefined,
+            },
+          );
         }),
       );
     }
@@ -35,7 +44,9 @@ describe(`sbb-chip`, () => {
       `fixed width`,
       visualDiffDefault.with(async (setup) => {
         await setup.withFixture(html`
-          <sbb-chip style="width: 10rem"> This is a very long label which will be cut. </sbb-chip>
+          <sbb-chip-label style="width: 10rem">
+            This is a very long label which will be cut.
+          </sbb-chip-label>
         `);
       }),
     );
diff --git a/src/elements/chip/readme.md b/src/elements/chip-label/readme.md
similarity index 100%
rename from src/elements/chip/readme.md
rename to src/elements/chip-label/readme.md
diff --git a/src/elements/chip.ts b/src/elements/chip.ts
deleted file mode 100644
index fa8c530782..0000000000
--- a/src/elements/chip.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './chip/chip.js';
diff --git a/src/elements/chip/chip.spec.ts b/src/elements/chip/chip.spec.ts
deleted file mode 100644
index 6056d33d32..0000000000
--- a/src/elements/chip/chip.spec.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { assert } from '@open-wc/testing';
-import { html } from 'lit/static-html.js';
-
-import { fixture } from '../core/testing/private.js';
-
-import { SbbChipElement } from './chip.js';
-
-describe(`sbb-chip`, () => {
-  it('renders', async () => {
-    const element: SbbChipElement = await fixture(html`<sbb-chip>Label</sbb-chip>`);
-    assert.instanceOf(element, SbbChipElement);
-  });
-});
diff --git a/src/elements/chip/chip.ssr.spec.ts b/src/elements/chip/chip.ssr.spec.ts
deleted file mode 100644
index f1fd3b3391..0000000000
--- a/src/elements/chip/chip.ssr.spec.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { assert } from '@open-wc/testing';
-import { html } from 'lit';
-
-import { ssrHydratedFixture } from '../core/testing/private.js';
-
-import { SbbChipElement } from './chip.js';
-
-describe(`sbb-chip ssr`, () => {
-  let root: SbbChipElement;
-
-  beforeEach(async () => {
-    root = await ssrHydratedFixture(html`<sbb-chip>Label</sbb-chip>`, {
-      modules: ['./chip.js'],
-    });
-  });
-
-  it('renders', () => {
-    assert.instanceOf(root, SbbChipElement);
-  });
-});
diff --git a/src/elements/teaser-hero/__snapshots__/teaser-hero.snapshot.spec.snap.js b/src/elements/teaser-hero/__snapshots__/teaser-hero.snapshot.spec.snap.js
index 6e383f3db1..89f896b51e 100644
--- a/src/elements/teaser-hero/__snapshots__/teaser-hero.snapshot.spec.snap.js
+++ b/src/elements/teaser-hero/__snapshots__/teaser-hero.snapshot.spec.snap.js
@@ -14,13 +14,13 @@ snapshots["sbb-teaser-hero renders DOM"] =
   target="_blank"
 >
   Break out and explore castles and palaces.
-  <sbb-chip
+  <sbb-chip-label
     color="charcoal"
     size="xxs"
     slot="chip"
   >
     Label
-  </sbb-chip>
+  </sbb-chip-label>
 </sbb-teaser-hero>
 `;
 /* end snapshot sbb-teaser-hero renders DOM */
@@ -93,13 +93,13 @@ snapshots["sbb-teaser-hero renders with slots DOM"] =
     slot="image"
   >
   </sbb-image>
-  <sbb-chip
+  <sbb-chip-label
     color="charcoal"
     size="xxs"
     slot="chip"
   >
     Label
-  </sbb-chip>
+  </sbb-chip-label>
 </sbb-teaser-hero>
 `;
 /* end snapshot sbb-teaser-hero renders with slots DOM */
diff --git a/src/elements/teaser-hero/teaser-hero.snapshot.spec.ts b/src/elements/teaser-hero/teaser-hero.snapshot.spec.ts
index 9ff8fa75fa..867c2e5dcf 100644
--- a/src/elements/teaser-hero/teaser-hero.snapshot.spec.ts
+++ b/src/elements/teaser-hero/teaser-hero.snapshot.spec.ts
@@ -7,7 +7,7 @@ import { waitForImageReady } from '../core/testing.js';
 import type { SbbTeaserHeroElement } from './teaser-hero.js';
 import './teaser-hero.js';
 import '../image.js';
-import '../chip.js';
+import '../chip-label.js';
 
 const imageUrl = import.meta.resolve('../core/testing/assets/lucerne.png');
 
@@ -27,7 +27,7 @@ describe(`sbb-teaser-hero`, () => {
           image-alt="SBB CFF FFS Employee"
         >
           Break out and explore castles and palaces.
-          <sbb-chip slot="chip">Label</sbb-chip>
+          <sbb-chip-label slot="chip">Label</sbb-chip-label>
         </sbb-teaser-hero>`,
       );
       await waitForImageReady(element.shadowRoot!.querySelector('sbb-image')!);
@@ -52,7 +52,7 @@ describe(`sbb-teaser-hero`, () => {
           <span slot="link-content">Find out more</span>
           <sbb-image slot="image" image-src=${imageUrl} alt="SBB CFF FFS Employee"></sbb-image>
           </sbb-image>
-          <sbb-chip slot="chip">Label</sbb-chip>
+          <sbb-chip-label slot="chip">Label</sbb-chip-label>
         </sbb-teaser-hero>`,
       );
       await waitForImageReady(element.querySelector('sbb-image')!);
diff --git a/src/elements/teaser-hero/teaser-hero.spec.ts b/src/elements/teaser-hero/teaser-hero.spec.ts
index ed3c2328f5..7b975100e7 100644
--- a/src/elements/teaser-hero/teaser-hero.spec.ts
+++ b/src/elements/teaser-hero/teaser-hero.spec.ts
@@ -1,13 +1,13 @@
 import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import type { SbbChipElement } from '../chip.js';
+import type { SbbChipLabelElement } from '../chip-label.js';
 import { fixture } from '../core/testing/private.js';
 import { waitForLitRender } from '../core/testing.js';
 import type { SbbImageElement } from '../image.js';
 
 import { SbbTeaserHeroElement } from './teaser-hero.js';
-import '../chip.js';
+import '../chip-label.js';
 
 const imageUrl = import.meta.resolve('../core/testing/assets/lucerne.png');
 
@@ -36,11 +36,11 @@ describe(`sbb-teaser-hero`, () => {
   it('styles slotted components', async () => {
     element = await fixture(
       html`<sbb-teaser-hero href="https://www.sbb.ch" image-src=${imageUrl}>
-        <sbb-chip slot="chip">Label</sbb-chip>
+        <sbb-chip-label slot="chip">Label</sbb-chip-label>
       </sbb-teaser-hero>`,
     );
 
-    const chip = element.querySelector<SbbChipElement>('sbb-chip')!;
+    const chip = element.querySelector<SbbChipLabelElement>('sbb-chip-label')!;
     const image = element.shadowRoot!.querySelector<SbbImageElement>('sbb-image')!;
 
     expect(chip).to.have.attribute('color', 'charcoal');
diff --git a/src/elements/teaser-hero/teaser-hero.stories.ts b/src/elements/teaser-hero/teaser-hero.stories.ts
index fef914a8b1..6a4c6b26fc 100644
--- a/src/elements/teaser-hero/teaser-hero.stories.ts
+++ b/src/elements/teaser-hero/teaser-hero.stories.ts
@@ -9,7 +9,7 @@ import sampleImages from '../core/images.js';
 
 import readme from './readme.md?raw';
 import './teaser-hero.js';
-import '../chip.js';
+import '../chip-label.js';
 
 const accessibilityLabel: InputType = {
   control: {
@@ -112,7 +112,7 @@ const defaultArgs: Args = {
 };
 
 const chip = (content: string): TemplateResult => html`
-  <sbb-chip slot="chip">${content}</sbb-chip>
+  <sbb-chip-label slot="chip">${content}</sbb-chip-label>
 `;
 
 const TemplateSbbTeaserHeroDefault = ({
diff --git a/src/elements/teaser-hero/teaser-hero.ts b/src/elements/teaser-hero/teaser-hero.ts
index 8b7da8037c..33440f6383 100644
--- a/src/elements/teaser-hero/teaser-hero.ts
+++ b/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 - The `sbb-chip` component that will be displayed on top-left corner
+ * @slot chip - The `sbb-chip-label` component that will be displayed on top-left corner
  */
 export
 @customElement('sbb-teaser-hero')
@@ -40,7 +40,7 @@ class SbbTeaserHeroElement extends SbbLinkBaseElement {
   public accessor imageAlt: string = '';
 
   private _chipSlotChanged(): void {
-    this.querySelector('sbb-chip')?.setAttribute('color', 'charcoal');
+    this.querySelector('sbb-chip-label')?.setAttribute('color', 'charcoal');
   }
 
   protected override renderTemplate(): TemplateResult {
diff --git a/src/elements/teaser-hero/teaser-hero.visual.spec.ts b/src/elements/teaser-hero/teaser-hero.visual.spec.ts
index 492233405e..8e44debe36 100644
--- a/src/elements/teaser-hero/teaser-hero.visual.spec.ts
+++ b/src/elements/teaser-hero/teaser-hero.visual.spec.ts
@@ -9,7 +9,7 @@ import {
 import { waitForImageReady } from '../core/testing.js';
 import './teaser-hero.js';
 import '../image.js';
-import '../chip.js';
+import '../chip-label.js';
 
 const imageUrl = import.meta.resolve('../core/testing/assets/placeholder-image.png');
 
@@ -22,7 +22,7 @@ describe(`sbb-teaser-hero`, () => {
           await setup.withFixture(html`
             <sbb-teaser-hero href="#" link-content="Find out more" image-src=${imageUrl}>
               Break out and explore castles and palaces.
-              <sbb-chip slot="chip">Label</sbb-chip>
+              <sbb-chip-label slot="chip">Label</sbb-chip-label>
             </sbb-teaser-hero>
           `);
 
@@ -42,7 +42,7 @@ describe(`sbb-teaser-hero`, () => {
               Break out and explore castles and palaces.
               <span slot="link-content">Find out more</span>
               <sbb-image slot="image" image-src=${imageUrl}></sbb-image>
-              <sbb-chip slot="chip">Label</sbb-chip>
+              <sbb-chip-label slot="chip">Label</sbb-chip-label>
             </sbb-teaser-hero>
           `);
 
@@ -55,7 +55,7 @@ describe(`sbb-teaser-hero`, () => {
         state.with(async (setup) => {
           await setup.withFixture(html`
             <sbb-teaser-hero href="#" image-src=${imageUrl}>
-              <sbb-chip slot="chip">Label</sbb-chip>
+              <sbb-chip-label slot="chip">Label</sbb-chip-label>
             </sbb-teaser-hero>
           `);
 
diff --git a/src/elements/teaser/teaser.ts b/src/elements/teaser/teaser.ts
index b93d5c716a..621accd786 100644
--- a/src/elements/teaser/teaser.ts
+++ b/src/elements/teaser/teaser.ts
@@ -8,7 +8,7 @@ import type { SbbTitleLevel } from '../title.js';
 
 import style from './teaser.scss?lit&inline';
 
-import '../chip.js';
+import '../chip-label.js';
 import '../title.js';
 
 /**
diff --git a/src/visual-regression-app/src/components/test-case/image-diff/fullscreen-diff/fullscreen-diff.ts b/src/visual-regression-app/src/components/test-case/image-diff/fullscreen-diff/fullscreen-diff.ts
index 812f85a23b..a8b39c1107 100644
--- a/src/visual-regression-app/src/components/test-case/image-diff/fullscreen-diff/fullscreen-diff.ts
+++ b/src/visual-regression-app/src/components/test-case/image-diff/fullscreen-diff/fullscreen-diff.ts
@@ -7,7 +7,7 @@ import type { ScreenshotFiles } from '../../../../interfaces.js';
 
 import style from './fullscreen-diff.scss?lit&inline';
 
-import '@sbb-esta/lyne-elements/chip.js';
+import '@sbb-esta/lyne-elements/chip-label.js';
 import '@sbb-esta/lyne-elements/radio-button.js';
 import type { SbbRadioButtonGroupElement } from '@sbb-esta/lyne-elements/radio-button/radio-button-group/radio-button-group.js';
 
@@ -29,8 +29,10 @@ class FullscreenDiff extends LitElement {
       return html``;
     }
     return html`<div class="app-labels">
-        <sbb-chip size="xxs" color="white">${this.screenshotFiles.browserName}</sbb-chip>
-        <sbb-chip size="xxs" color="white">${this.screenshotFiles.viewport}</sbb-chip>
+        <sbb-chip-label size="xxs" color="white"
+          >${this.screenshotFiles.browserName}</sbb-chip-label
+        >
+        <sbb-chip-label size="xxs" color="white">${this.screenshotFiles.viewport}</sbb-chip-label>
       </div>
       <sbb-radio-button-group
         class="app-radio-button-group"
diff --git a/src/visual-regression-app/src/components/test-case/image-diff/image-diff.ts b/src/visual-regression-app/src/components/test-case/image-diff/image-diff.ts
index de8d0a78ea..def1ab8975 100644
--- a/src/visual-regression-app/src/components/test-case/image-diff/image-diff.ts
+++ b/src/visual-regression-app/src/components/test-case/image-diff/image-diff.ts
@@ -11,7 +11,7 @@ import { forceType } from '@sbb-esta/lyne-elements/core/decorators.js';
 import { SbbOverlayElement } from '@sbb-esta/lyne-elements/overlay/overlay.js';
 import type { SbbToggleCheckElement } from '@sbb-esta/lyne-elements/toggle-check/toggle-check.js';
 
-import '@sbb-esta/lyne-elements/chip.js';
+import '@sbb-esta/lyne-elements/chip-label.js';
 import '@sbb-esta/lyne-elements/status.js';
 import '@sbb-esta/lyne-elements/overlay.js';
 import '@sbb-esta/lyne-elements/toggle-check.js';
@@ -77,17 +77,19 @@ class ImageDiff extends LitElement {
     return html`<div class="app-container">
       <div class="app-info-bar">
         <div class="app-labels">
-          <sbb-chip size="xxs" color="white">${this.screenshotFiles.browserName}</sbb-chip>
-          <sbb-chip size="xxs" color="white">${this.screenshotFiles.viewport}</sbb-chip>
+          <sbb-chip-label size="xxs" color="white"
+            >${this.screenshotFiles.browserName}</sbb-chip-label
+          >
+          <sbb-chip-label size="xxs" color="white">${this.screenshotFiles.viewport}</sbb-chip-label>
           ${this._baselineDimension
-            ? html`<sbb-chip size="xxs" color="white">
+            ? html`<sbb-chip-label size="xxs" color="white">
                 Baseline: ${this._baselineDimension}
-              </sbb-chip>`
+              </sbb-chip-label>`
             : nothing}
           ${this._failedDimension
-            ? html`<sbb-chip size="xxs" color="white">
+            ? html`<sbb-chip-label size="xxs" color="white">
                 ${this.screenshotFiles.isNew ? 'New' : 'Failed'}: ${this._failedDimension}
-              </sbb-chip>`
+              </sbb-chip-label>`
             : nothing}
         </div>
         ${!this.screenshotFiles.isNew && this.screenshotFiles.diffFile
diff --git a/src/visual-regression-app/src/components/test-case/test-case.scss b/src/visual-regression-app/src/components/test-case/test-case.scss
index 4926582e9f..a0c5395afe 100644
--- a/src/visual-regression-app/src/components/test-case/test-case.scss
+++ b/src/visual-regression-app/src/components/test-case/test-case.scss
@@ -2,7 +2,7 @@
 
 @include sbb.box-sizing;
 
-sbb-chip {
+sbb-chip-label {
   width: fit-content;
 }
 
diff --git a/src/visual-regression-app/src/components/test-case/test-case.ts b/src/visual-regression-app/src/components/test-case/test-case.ts
index 2ca6bfb818..c8d45f37d6 100644
--- a/src/visual-regression-app/src/components/test-case/test-case.ts
+++ b/src/visual-regression-app/src/components/test-case/test-case.ts
@@ -11,7 +11,7 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { screenshots, type ScreenshotTestCase } from '../../screenshots.js';
 
 import '@sbb-esta/lyne-elements/button/secondary-button-link.js';
-import '@sbb-esta/lyne-elements/chip.js';
+import '@sbb-esta/lyne-elements/chip-label.js';
 import '@sbb-esta/lyne-elements/container.js';
 import '@sbb-esta/lyne-elements/header.js';
 import '@sbb-esta/lyne-elements/notification.js';
@@ -104,7 +104,7 @@ class TestCase extends LitElement {
       <sbb-header expanded>
         <div class="app-progress" style="--app-progress: ${this._progressFraction()}"></div>
         <div class="app-file-name-box sbb-header-shrinkable">
-          <sbb-chip color="charcoal">${this.params?.componentName}</sbb-chip>
+          <sbb-chip-label color="charcoal">${this.params?.componentName}</sbb-chip-label>
           <sbb-title level="2" visual-level="6">
             <span class="app-file-name-ellipsis">${this.params?.testCaseName}</span>
           </sbb-title>
diff --git a/src/visual-regression-app/src/components/test-case/test-title-chip-list/test-title-chip-list.scss b/src/visual-regression-app/src/components/test-case/test-title-chip-list/test-title-chip-list.scss
index 0d4176103a..033e09cd1f 100644
--- a/src/visual-regression-app/src/components/test-case/test-title-chip-list/test-title-chip-list.scss
+++ b/src/visual-regression-app/src/components/test-case/test-title-chip-list/test-title-chip-list.scss
@@ -7,16 +7,16 @@
   gap: var(--sbb-spacing-fixed-1x);
 }
 
-sbb-chip {
+sbb-chip-label {
   margin-block-end: var(--sbb-spacing-fixed-1x);
 }
 
-sbb-chip[color='custom-green'] {
+sbb-chip-label[color='custom-green'] {
   --sbb-chip-color: var(--sbb-color-white);
   --sbb-chip-background-color: var(--sbb-color-green);
 }
 
-sbb-chip[color='custom-red'] {
+sbb-chip-label[color='custom-red'] {
   --sbb-chip-color: var(--sbb-color-white);
   --sbb-chip-background-color: var(--sbb-color-red125);
 }

From 254021cab26b1a9f9a166e2b11caa4756941ff4c Mon Sep 17 00:00:00 2001
From: Mario Castigliano <mario.castigliano@finconsgroup.com>
Date: Wed, 30 Oct 2024 16:47:08 +0100
Subject: [PATCH 2/5] fix: lint

---
 src/elements/teaser/teaser.ts                          |  4 ++--
 .../test-title-chip-list/test-title-chip-list.ts       | 10 ++++++----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/elements/teaser/teaser.ts b/src/elements/teaser/teaser.ts
index 621accd786..00848542e3 100644
--- a/src/elements/teaser/teaser.ts
+++ b/src/elements/teaser/teaser.ts
@@ -49,9 +49,9 @@ class SbbTeaserElement extends SbbLinkBaseElement {
           <slot name="image"></slot>
         </span>
         <span class="sbb-teaser__text">
-          <sbb-chip size="xxs" color="charcoal" class="sbb-teaser__chip">
+          <sbb-chip-label size="xxs" color="charcoal" class="sbb-teaser__chip">
             <slot name="chip">${this.chipContent}</slot>
-          </sbb-chip>
+          </sbb-chip-label>
           <sbb-title level=${this.titleLevel} visual-level="5" class="sbb-teaser__lead">
             <slot name="title">${this.titleContent}</slot>
           </sbb-title>
diff --git a/src/visual-regression-app/src/components/test-case/test-title-chip-list/test-title-chip-list.ts b/src/visual-regression-app/src/components/test-case/test-title-chip-list/test-title-chip-list.ts
index 108a22c0e9..ab27866e0e 100644
--- a/src/visual-regression-app/src/components/test-case/test-title-chip-list/test-title-chip-list.ts
+++ b/src/visual-regression-app/src/components/test-case/test-title-chip-list/test-title-chip-list.ts
@@ -1,7 +1,7 @@
 import { LitElement, html, type TemplateResult, type CSSResultGroup, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import '@sbb-esta/lyne-elements/chip.js';
+import '@sbb-esta/lyne-elements/chip-label.js';
 import style from './test-title-chip-list.scss?lit&inline';
 
 /**
@@ -63,12 +63,14 @@ class TestTitleChipList extends LitElement {
       <div class="chip-list-wrapper">
         ${this._chips.map((c) =>
           c.isBoolean
-            ? html`<sbb-chip size="xs" color=${c.value === 'true' ? 'custom-green' : 'custom-red'}
-                >${c.key}</sbb-chip
+            ? html`<sbb-chip-label
+                size="xs"
+                color=${c.value === 'true' ? 'custom-green' : 'custom-red'}
+                >${c.key}</sbb-chip-label
               >`
             : c.isUndefined
               ? nothing
-              : html`<sbb-chip size="xs">${c.key} = ${c.value}</sbb-chip>`,
+              : html`<sbb-chip-label size="xs">${c.key} = ${c.value}</sbb-chip-label>`,
         )}
       </div>
     `;

From b14e193552ac8551dd894b74792ee78169f2d710 Mon Sep 17 00:00:00 2001
From: Mario Castigliano <mario.castigliano@finconsgroup.com>
Date: Wed, 30 Oct 2024 16:56:53 +0100
Subject: [PATCH 3/5] fix: integrity

---
 src/elements/chip-label/readme.md  |  6 +++---
 src/elements/teaser-hero/readme.md | 12 ++++++------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/elements/chip-label/readme.md b/src/elements/chip-label/readme.md
index d128dcddc7..adfbea599e 100644
--- a/src/elements/chip-label/readme.md
+++ b/src/elements/chip-label/readme.md
@@ -28,6 +28,6 @@ and four different values for the `color` property (`charcoal`, `granite`, `whit
 
 ## Slots
 
-| Name | Description                                            |
-| ---- | ------------------------------------------------------ |
-|      | Use the unnamed slot to add content to the `sbb-chip`. |
+| Name | Description                                                  |
+| ---- | ------------------------------------------------------------ |
+|      | Use the unnamed slot to add content to the `sbb-chip-label`. |
diff --git a/src/elements/teaser-hero/readme.md b/src/elements/teaser-hero/readme.md
index eb9bc5152f..5d77d2d30c 100644
--- a/src/elements/teaser-hero/readme.md
+++ b/src/elements/teaser-hero/readme.md
@@ -48,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`         | 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                                          |
+| Name           | Description                                                              |
+| -------------- | ------------------------------------------------------------------------ |
+|                | Use the unnamed slot to add text content to the panel                    |
+| `chip`         | The `sbb-chip-label` 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                                                |

From 9fc1d4b89da9b1b6ee9c4406b31ee8571551f886 Mon Sep 17 00:00:00 2001
From: Mario Castigliano <mario.castigliano@finconsgroup.com>
Date: Wed, 30 Oct 2024 17:31:35 +0100
Subject: [PATCH 4/5] fix: tests

---
 .../__snapshots__/teaser.snapshot.spec.snap.js       | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/elements/teaser/__snapshots__/teaser.snapshot.spec.snap.js b/src/elements/teaser/__snapshots__/teaser.snapshot.spec.snap.js
index 4de19d15bd..8b7b47ece3 100644
--- a/src/elements/teaser/__snapshots__/teaser.snapshot.spec.snap.js
+++ b/src/elements/teaser/__snapshots__/teaser.snapshot.spec.snap.js
@@ -25,14 +25,14 @@ snapshots["sbb-teaser renders after centered Shadow DOM"] =
       </slot>
     </span>
     <span class="sbb-teaser__text">
-      <sbb-chip
+      <sbb-chip-label
         class="sbb-teaser__chip"
         color="charcoal"
         size="xxs"
       >
         <slot name="chip">
         </slot>
-      </sbb-chip>
+      </sbb-chip-label>
       <sbb-title
         aria-level="5"
         class="sbb-teaser__lead"
@@ -78,14 +78,14 @@ snapshots["sbb-teaser renders after with title level set Shadow DOM"] =
       </slot>
     </span>
     <span class="sbb-teaser__text">
-      <sbb-chip
+      <sbb-chip-label
         class="sbb-teaser__chip"
         color="charcoal"
         size="xxs"
       >
         <slot name="chip">
         </slot>
-      </sbb-chip>
+      </sbb-chip-label>
       <sbb-title
         aria-level="2"
         class="sbb-teaser__lead"
@@ -143,14 +143,14 @@ snapshots["sbb-teaser renders below with projected content Shadow DOM"] =
       </slot>
     </span>
     <span class="sbb-teaser__text">
-      <sbb-chip
+      <sbb-chip-label
         class="sbb-teaser__chip"
         color="charcoal"
         size="xxs"
       >
         <slot name="chip">
         </slot>
-      </sbb-chip>
+      </sbb-chip-label>
       <sbb-title
         aria-level="5"
         class="sbb-teaser__lead"

From 22320272bc2ecfd46f304863a427510cad08504f Mon Sep 17 00:00:00 2001
From: Jeremias Peier <jeremias.peier@sbb.ch>
Date: Mon, 4 Nov 2024 13:38:38 +0100
Subject: [PATCH 5/5] fix: review

---
 .../chip-label.snapshot.spec.snap.js          |  2 +-
 src/elements/chip-label/chip-label.scss       | 20 +++---
 src/elements/chip-label/chip-label.ts         |  2 +-
 src/elements/chip-label/readme.md             |  6 +-
 src/elements/core/styles/mixins/chip.scss     | 70 +++++++++----------
 src/elements/teaser-hero/teaser-hero.scss     |  4 +-
 .../teaser-hero/teaser-hero.stories.ts        |  4 +-
 .../teaser.snapshot.spec.snap.js              |  6 +-
 src/elements/teaser/readme.md                 |  6 +-
 src/elements/teaser/teaser.scss               |  2 +-
 src/elements/teaser/teaser.ts                 |  6 +-
 .../test-title-chip-list.scss                 |  8 +--
 12 files changed, 68 insertions(+), 68 deletions(-)

diff --git a/src/elements/chip-label/__snapshots__/chip-label.snapshot.spec.snap.js b/src/elements/chip-label/__snapshots__/chip-label.snapshot.spec.snap.js
index bd4cf10003..1da3f4c184 100644
--- a/src/elements/chip-label/__snapshots__/chip-label.snapshot.spec.snap.js
+++ b/src/elements/chip-label/__snapshots__/chip-label.snapshot.spec.snap.js
@@ -12,7 +12,7 @@ snapshots["sbb-chip-label renders DOM"] =
 /* end snapshot sbb-chip-label renders DOM */
 
 snapshots["sbb-chip-label renders Shadow DOM"] = 
-`<span class="sbb-chip">
+`<span class="sbb-chip-label">
   <span class="sbb-chip__text-wrapper">
     <slot>
     </slot>
diff --git a/src/elements/chip-label/chip-label.scss b/src/elements/chip-label/chip-label.scss
index afcd0c0023..1417f8d3bd 100644
--- a/src/elements/chip-label/chip-label.scss
+++ b/src/elements/chip-label/chip-label.scss
@@ -8,35 +8,35 @@
 }
 
 :host([color='milk']) {
-  @include sbb.chip-variables--color-milk;
+  @include sbb.chip-label-variables--color-milk;
 }
 
 :host([color='charcoal']) {
-  @include sbb.chip-variables--color-charcoal;
+  @include sbb.chip-label-variables--color-charcoal;
 }
 
 :host([color='white']) {
-  @include sbb.chip-variables--color-white;
+  @include sbb.chip-label-variables--color-white;
 }
 
 :host([color='granite']) {
-  @include sbb.chip-variables--color-granite;
+  @include sbb.chip-label-variables--color-granite;
 }
 
 :host([size='xxs']) {
-  @include sbb.chip-variables--size-xxs;
+  @include sbb.chip-label-variables--size-xxs;
 }
 
 :host([size='xs']) {
-  @include sbb.chip-variables--size-xs;
+  @include sbb.chip-label-variables--size-xs;
 }
 
 :host([size='s']) {
-  @include sbb.chip-variables--size-s;
+  @include sbb.chip-label-variables--size-s;
 }
 
-.sbb-chip {
-  @include sbb.chip-rules;
+.sbb-chip-label {
+  @include sbb.chip-label-rules;
 
   & {
     display: flex;
@@ -44,5 +44,5 @@
 }
 
 .sbb-chip__text-wrapper {
-  @include sbb.chip-rules-ellipsis;
+  @include sbb.chip-label-rules-ellipsis;
 }
diff --git a/src/elements/chip-label/chip-label.ts b/src/elements/chip-label/chip-label.ts
index bb9ac96e5b..fed6e47076 100644
--- a/src/elements/chip-label/chip-label.ts
+++ b/src/elements/chip-label/chip-label.ts
@@ -24,7 +24,7 @@ class SbbChipLabelElement extends LitElement {
 
   protected override render(): TemplateResult {
     return html`
-      <span class="sbb-chip">
+      <span class="sbb-chip-label">
         <span class="sbb-chip__text-wrapper">
           <slot></slot>
         </span>
diff --git a/src/elements/chip-label/readme.md b/src/elements/chip-label/readme.md
index adfbea599e..f4f64a23e9 100644
--- a/src/elements/chip-label/readme.md
+++ b/src/elements/chip-label/readme.md
@@ -10,11 +10,11 @@ It's possible to choose among three different values for the `size` property (`s
 and four different values for the `color` property (`charcoal`, `granite`, `white` and `milk`, which is the default).
 
 ```html
-<sbb-chip color="charcoal" size="s">Label</sbb-chip>
+<sbb-chip-label color="charcoal" size="s">Label</sbb-chip-label>
 
-<sbb-chip color="granite" size="xs">Label</sbb-chip>
+<sbb-chip-label color="granite" size="xs">Label</sbb-chip-label>
 
-<sbb-chip color="white">Label</sbb-chip>
+<sbb-chip-label color="white">Label</sbb-chip-label>
 ```
 
 <!-- Auto Generated Below -->
diff --git a/src/elements/core/styles/mixins/chip.scss b/src/elements/core/styles/mixins/chip.scss
index 5d34b1169e..c5f86a4012 100644
--- a/src/elements/core/styles/mixins/chip.scss
+++ b/src/elements/core/styles/mixins/chip.scss
@@ -2,45 +2,45 @@
 @use './helpers';
 @use './typo';
 
-@mixin chip-variables--color-milk {
-  --sbb-chip-color: var(--sbb-color-granite);
-  --sbb-chip-background-color: var(--sbb-color-milk);
+@mixin chip-label-variables--color-milk {
+  --sbb-chip-label-color: var(--sbb-color-granite);
+  --sbb-chip-label-background-color: var(--sbb-color-milk);
 }
 
-@mixin chip-variables--color-charcoal {
-  --sbb-chip-color: var(--sbb-color-white);
-  --sbb-chip-background-color: var(--sbb-color-charcoal);
+@mixin chip-label-variables--color-charcoal {
+  --sbb-chip-label-color: var(--sbb-color-white);
+  --sbb-chip-label-background-color: var(--sbb-color-charcoal);
 }
 
-@mixin chip-variables--color-white {
-  --sbb-chip-color: var(--sbb-color-granite);
-  --sbb-chip-background-color: var(--sbb-color-white);
+@mixin chip-label-variables--color-white {
+  --sbb-chip-label-color: var(--sbb-color-granite);
+  --sbb-chip-label-background-color: var(--sbb-color-white);
 }
 
-@mixin chip-variables--color-granite {
-  --sbb-chip-color: var(--sbb-color-white);
-  --sbb-chip-background-color: var(--sbb-color-granite);
+@mixin chip-label-variables--color-granite {
+  --sbb-chip-label-color: var(--sbb-color-white);
+  --sbb-chip-label-background-color: var(--sbb-color-granite);
 }
 
-@mixin chip-variables--size-xxs {
-  --sbb-chip-padding-block: 0em;
-  --sbb-chip-padding-inline: var(--sbb-spacing-fixed-2x);
+@mixin chip-label-variables--size-xxs {
+  --sbb-chip-label-padding-block: 0em;
+  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);
   --sbb-text-font-size: var(--sbb-font-size-text-xxs);
 }
 
-@mixin chip-variables--size-xs {
-  --sbb-chip-padding-block: var(--sbb-spacing-fixed-1x);
-  --sbb-chip-padding-inline: var(--sbb-spacing-fixed-3x);
+@mixin chip-label-variables--size-xs {
+  --sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);
+  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-3x);
   --sbb-text-font-size: var(--sbb-font-size-text-xs);
 }
 
-@mixin chip-variables--size-s {
-  --sbb-chip-padding-block: var(--sbb-spacing-fixed-1x);
-  --sbb-chip-padding-inline: var(--sbb-spacing-fixed-4x);
+@mixin chip-label-variables--size-s {
+  --sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);
+  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-4x);
   --sbb-text-font-size: var(--sbb-font-size-text-s);
 }
 
-@mixin chip-rules {
+@mixin chip-label-rules {
   @include typo.text;
 
   // We need an even value to make it work smoothly in Safari
@@ -50,12 +50,12 @@
   justify-content: center;
   height: calc(
     var(--sbb-typo-line-height-body-text) * var(--sbb-text-font-size) +
-      var(--sbb-chip-padding-block) * 2
+      var(--sbb-chip-label-padding-block) * 2
   );
-  background-color: var(--sbb-chip-background-color);
-  padding-inline: var(--sbb-chip-padding-inline);
+  background-color: var(--sbb-chip-label-background-color);
+  padding-inline: var(--sbb-chip-label-padding-inline);
   border-radius: var(--sbb-border-radius-infinity);
-  color: var(--sbb-chip-color);
+  color: var(--sbb-chip-label-color);
 
   // Overflow hidden needed because line-height can be taller than height which can cause weird layout shifting
   overflow: hidden;
@@ -66,7 +66,7 @@
   }
 }
 
-@mixin chip-rules-ellipsis {
+@mixin chip-label-rules-ellipsis {
   @include helpers.ellipsis;
 
   display: inline-block;
@@ -74,22 +74,22 @@
 
 @mixin chip($color: milk, $size: xxs) {
   @if $color == milk {
-    @include chip-variables--color-milk;
+    @include chip-label-variables--color-milk;
   } @else if $color == charcoal {
-    @include chip-variables--color-charcoal;
+    @include chip-label-variables--color-charcoal;
   } @else if $color == white {
-    @include chip-variables--color-white;
+    @include chip-label-variables--color-white;
   } @else if $color == granite {
-    @include chip-variables--color-granite;
+    @include chip-label-variables--color-granite;
   }
 
   @if $size == xxs {
-    @include chip-variables--size-xxs;
+    @include chip-label-variables--size-xxs;
   } @else if $size == xs {
-    @include chip-variables--size-xs;
+    @include chip-label-variables--size-xs;
   } @else if $size == s {
-    @include chip-variables--size-s;
+    @include chip-label-variables--size-s;
   }
 
-  @include chip-rules;
+  @include chip-label-rules;
 }
diff --git a/src/elements/teaser-hero/teaser-hero.scss b/src/elements/teaser-hero/teaser-hero.scss
index dad3d5fa01..929777a159 100644
--- a/src/elements/teaser-hero/teaser-hero.scss
+++ b/src/elements/teaser-hero/teaser-hero.scss
@@ -11,7 +11,7 @@
   outline: none !important;
 
   --sbb-teaser-hero-brightness-hover: var(--sbb-hover-image-brightness);
-  --sbb-teaser-hero-chip-inset: var(--sbb-spacing-responsive-xxxs) auto auto
+  --sbb-teaser-hero-chip-label-inset: var(--sbb-spacing-responsive-xxxs) auto auto
     var(--sbb-spacing-responsive-xxxs);
 
   @include sbb.panel-variables;
@@ -70,6 +70,6 @@ sbb-image {
 
 ::slotted([slot='chip']) {
   position: absolute;
-  inset: var(--sbb-teaser-hero-chip-inset);
+  inset: var(--sbb-teaser-hero-chip-label-inset);
   z-index: 2;
 }
diff --git a/src/elements/teaser-hero/teaser-hero.stories.ts b/src/elements/teaser-hero/teaser-hero.stories.ts
index 6a4c6b26fc..8a1389fda5 100644
--- a/src/elements/teaser-hero/teaser-hero.stories.ts
+++ b/src/elements/teaser-hero/teaser-hero.stories.ts
@@ -111,7 +111,7 @@ const defaultArgs: Args = {
   'chip-label': undefined,
 };
 
-const chip = (content: string): TemplateResult => html`
+const chipLabelTemplate = (content: string): TemplateResult => html`
   <sbb-chip-label slot="chip">${content}</sbb-chip-label>
 `;
 
@@ -121,7 +121,7 @@ const TemplateSbbTeaserHeroDefault = ({
   ...args
 }: Args): TemplateResult => html`
   <sbb-teaser-hero ${sbbSpread(args)}
-    >${content} ${chipLabel ? chip(chipLabel) : nothing}
+    >${content} ${chipLabel ? chipLabelTemplate(chipLabel) : nothing}
   </sbb-teaser-hero>
 `;
 
diff --git a/src/elements/teaser/__snapshots__/teaser.snapshot.spec.snap.js b/src/elements/teaser/__snapshots__/teaser.snapshot.spec.snap.js
index 8b7b47ece3..7afc024946 100644
--- a/src/elements/teaser/__snapshots__/teaser.snapshot.spec.snap.js
+++ b/src/elements/teaser/__snapshots__/teaser.snapshot.spec.snap.js
@@ -26,7 +26,7 @@ snapshots["sbb-teaser renders after centered Shadow DOM"] =
     </span>
     <span class="sbb-teaser__text">
       <sbb-chip-label
-        class="sbb-teaser__chip"
+        class="sbb-teaser__chip-label"
         color="charcoal"
         size="xxs"
       >
@@ -79,7 +79,7 @@ snapshots["sbb-teaser renders after with title level set Shadow DOM"] =
     </span>
     <span class="sbb-teaser__text">
       <sbb-chip-label
-        class="sbb-teaser__chip"
+        class="sbb-teaser__chip-label"
         color="charcoal"
         size="xxs"
       >
@@ -144,7 +144,7 @@ snapshots["sbb-teaser renders below with projected content Shadow DOM"] =
     </span>
     <span class="sbb-teaser__text">
       <sbb-chip-label
-        class="sbb-teaser__chip"
+        class="sbb-teaser__chip-label"
         color="charcoal"
         size="xxs"
       >
diff --git a/src/elements/teaser/readme.md b/src/elements/teaser/readme.md
index 6555ef08e1..77e213e210 100644
--- a/src/elements/teaser/readme.md
+++ b/src/elements/teaser/readme.md
@@ -17,7 +17,7 @@ Simple teaser example:
 ## Slots
 
 The default slot is reserved for the description. The component displays the `image` and the `title` with the self-named slots.
-It's also possible to display a [sbb-chip](/docs/elements-sbb-chip--docs) using the `chip` slot.
+It's also possible to display a [sbb-chip-label](/docs/elements-sbb-chip-label--docs) using the `chip` slot.
 
 ```html
 <sbb-teaser href="https://www.sbb.ch" title-level="2">
@@ -75,7 +75,7 @@ Avoid slotting block elements (e.g. `<div>`) as this violates semantic rules and
 | -------------------- | --------------------- | ------- | ---------------------------------------- | ------------------ | ------------------------------------------------------------------------- |
 | `accessibilityLabel` | `accessibility-label` | public  | `string`                                 | `''`               | This will be forwarded as aria-label to the inner anchor element.         |
 | `alignment`          | `alignment`           | public  | `'after-centered' \| 'after' \| 'below'` | `'after-centered'` | Teaser variant - define the position and the alignment of the text block. |
-| `chipContent`        | `chip-content`        | public  | `string`                                 | `''`               | Content of chip.                                                          |
+| `chipContent`        | `chip-content`        | public  | `string`                                 | `''`               | Content of chip label.                                                    |
 | `download`           | `download`            | public  | `boolean`                                | `false`            | Whether the browser will show the download dialog on click.               |
 | `href`               | `href`                | public  | `string`                                 | `''`               | The href value you want to link to.                                       |
 | `rel`                | `rel`                 | public  | `string`                                 | `''`               | The relationship of the linked URL as space-separated link types.         |
@@ -88,6 +88,6 @@ Avoid slotting block elements (e.g. `<div>`) as this violates semantic rules and
 | Name    | Description                                     |
 | ------- | ----------------------------------------------- |
 |         | Use the unnamed slot to render the description. |
-| `chip`  | Slot used to render the sbb-chip label.         |
+| `chip`  | Slot used to render the sbb-chip-label.         |
 | `image` | Slot used to render the image.                  |
 | `title` | Slot used to render the title.                  |
diff --git a/src/elements/teaser/teaser.scss b/src/elements/teaser/teaser.scss
index bbb5995f3d..1af507f64b 100644
--- a/src/elements/teaser/teaser.scss
+++ b/src/elements/teaser/teaser.scss
@@ -111,7 +111,7 @@
   }
 }
 
-.sbb-teaser__chip {
+.sbb-teaser__chip-label {
   display: block;
   max-width: fit-content;
   margin-block-end: var(--sbb-spacing-fixed-1x);
diff --git a/src/elements/teaser/teaser.ts b/src/elements/teaser/teaser.ts
index 00848542e3..e058171a3d 100644
--- a/src/elements/teaser/teaser.ts
+++ b/src/elements/teaser/teaser.ts
@@ -15,7 +15,7 @@ import '../title.js';
  * It displays an interactive image with caption.
  *
  * @slot image - Slot used to render the image.
- * @slot chip - Slot used to render the sbb-chip label.
+ * @slot chip - Slot used to render the sbb-chip-label.
  * @slot title - Slot used to render the title.
  * @slot - Use the unnamed slot to render the description.
  */
@@ -37,7 +37,7 @@ class SbbTeaserElement extends SbbLinkBaseElement {
   @property({ attribute: 'title-content' })
   public accessor titleContent: string = '';
 
-  /** Content of chip. */
+  /** Content of chip label. */
   @forceType()
   @property({ attribute: 'chip-content', reflect: true, converter: omitEmptyConverter })
   public accessor chipContent: string = '';
@@ -49,7 +49,7 @@ class SbbTeaserElement extends SbbLinkBaseElement {
           <slot name="image"></slot>
         </span>
         <span class="sbb-teaser__text">
-          <sbb-chip-label size="xxs" color="charcoal" class="sbb-teaser__chip">
+          <sbb-chip-label size="xxs" color="charcoal" class="sbb-teaser__chip-label">
             <slot name="chip">${this.chipContent}</slot>
           </sbb-chip-label>
           <sbb-title level=${this.titleLevel} visual-level="5" class="sbb-teaser__lead">
diff --git a/src/visual-regression-app/src/components/test-case/test-title-chip-list/test-title-chip-list.scss b/src/visual-regression-app/src/components/test-case/test-title-chip-list/test-title-chip-list.scss
index 033e09cd1f..227f3545fd 100644
--- a/src/visual-regression-app/src/components/test-case/test-title-chip-list/test-title-chip-list.scss
+++ b/src/visual-regression-app/src/components/test-case/test-title-chip-list/test-title-chip-list.scss
@@ -12,11 +12,11 @@ sbb-chip-label {
 }
 
 sbb-chip-label[color='custom-green'] {
-  --sbb-chip-color: var(--sbb-color-white);
-  --sbb-chip-background-color: var(--sbb-color-green);
+  --sbb-chip-label-color: var(--sbb-color-white);
+  --sbb-chip-label-background-color: var(--sbb-color-green);
 }
 
 sbb-chip-label[color='custom-red'] {
-  --sbb-chip-color: var(--sbb-color-white);
-  --sbb-chip-background-color: var(--sbb-color-red125);
+  --sbb-chip-label-color: var(--sbb-color-white);
+  --sbb-chip-label-background-color: var(--sbb-color-red125);
 }