diff --git a/.changeset/empty-coins-dig.md b/.changeset/empty-coins-dig.md
new file mode 100644
index 0000000000..bb8bcdae36
--- /dev/null
+++ b/.changeset/empty-coins-dig.md
@@ -0,0 +1,7 @@
+---
+'@swisspost/design-system-styles': major
+'@swisspost/design-system-components': minor
+'@swisspost/design-system-documentation': patch
+---
+
+Removed the HTML stepper component and replaced it with new `post-stepper` and `post-stepper-item` web components.
diff --git a/packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.html b/packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.html
index 5ffb87877a..26a81835e2 100644
--- a/packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.html
+++ b/packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.html
@@ -140,3 +140,18 @@ <h2>Post Tooltip</h2>
     Hi there 👋
   </post-tooltip>
 </div>
+
+<div class="my-24">
+  <h2>Post Stepper</h2>
+  <post-stepper
+    completedLabel="Completed step"
+    currentLabel="Current step"
+    activeStepLabel="Step #index:"
+    [currentIndex]="1"
+  >
+    <post-stepper-item> Step 1 </post-stepper-item>
+    <post-stepper-item> Step 2 </post-stepper-item>
+    <post-stepper-item> Step 3 </post-stepper-item>
+    <post-stepper-item> Step 4 </post-stepper-item>
+  </post-stepper>
+</div>
diff --git a/packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.ts b/packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.ts
index ebc96d67a3..7262c74683 100644
--- a/packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.ts
+++ b/packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.ts
@@ -21,6 +21,8 @@ import {
   PostTabs,
   PostTooltip,
   PostTooltipTrigger,
+  PostStepper,
+  PostStepperItem,
 } from 'components';
 
 @Component({
@@ -49,6 +51,8 @@ import {
     PostTabs,
     PostTooltip,
     PostTooltipTrigger,
+    PostStepper,
+    PostStepperItem,
   ],
 })
 export class HomeComponent {
diff --git a/packages/components/cypress/e2e/stepper.cy.ts b/packages/components/cypress/e2e/stepper.cy.ts
new file mode 100644
index 0000000000..e3ec22f525
--- /dev/null
+++ b/packages/components/cypress/e2e/stepper.cy.ts
@@ -0,0 +1,194 @@
+describe('stepper', { baseUrl: null }, () => {
+  beforeEach(() => {
+    cy.visit('./cypress/fixtures/post-stepper.test.html');
+  });
+
+  afterEach(() => {
+    cy.reload();
+  });
+
+  it('should render the post-stepper component', () => {
+    cy.get('post-stepper').should('exist');
+  });
+
+  // Errors
+
+  it('should log an error if the current label is missing', () => {
+    cy.window().then(win => {
+      cy.spy(win.console, 'error').as('consoleError');
+    });
+    cy.get('post-stepper').invoke('attr', 'current-label', null);
+    cy.get('@consoleError').should('be.called');
+  });
+
+  it('should log an error if the completed label is missing', () => {
+    cy.window().then(win => {
+      cy.spy(win.console, 'error').as('consoleError');
+    });
+    cy.get('post-stepper').invoke('attr', 'completed-label', null);
+    cy.get('@consoleError').should('be.called');
+  });
+
+  it('should log an error if the mobile step label does not contain #index', () => {
+    cy.window().then(win => {
+      cy.spy(win.console, 'error').as('consoleError');
+    });
+    cy.get('post-stepper').invoke('attr', 'active-step-label', 'Step:');
+    cy.get('@consoleError').should('be.called');
+  });
+
+  it('should log an error if the mobile step label is missing', () => {
+    cy.window().then(win => {
+      cy.spy(win.console, 'error').as('consoleError');
+    });
+    cy.get('post-stepper').invoke('attr', 'active-step-label', null);
+    cy.get('@consoleError').should('be.called');
+  });
+
+  // Dynamic classes
+
+  it('should set all inactive classes when current-index is negative', () => {
+    cy.get('post-stepper')
+      .invoke('attr', 'current-index', -1)
+      .wait(100)
+      .find('post-stepper-item')
+      .then($items => {
+        expect($items.filter('.stepper-item-inactive').length).to.equal(5);
+      });
+  });
+
+  it('should set first step as active when current-index is 0', () => {
+    cy.get('post-stepper')
+      .invoke('attr', 'current-index', 0)
+      .wait(100)
+      .find('post-stepper-item')
+      .then($items => {
+        expect($items[0]).to.have.class('stepper-item-current');
+        expect($items.filter('.stepper-item-inactive').length).to.equal(4);
+      });
+  });
+
+  it('should set third step as active when current-index is 2', () => {
+    cy.get('post-stepper')
+      .invoke('attr', 'current-index', 2)
+      .wait(100)
+      .find('post-stepper-item')
+      .then($items => {
+        expect($items[2]).to.have.class('stepper-item-current');
+        expect($items.filter('.stepper-item-completed').length).to.equal(2);
+        expect($items.filter('.stepper-item-inactive').length).to.equal(2);
+      });
+  });
+
+  it('should set all steps as complete but the last when current-index is last element', () => {
+    cy.get('post-stepper')
+      .invoke('attr', 'current-index', 4)
+      .wait(100)
+      .find('post-stepper-item')
+      .then($items => {
+        expect($items[4]).to.have.class('stepper-item-current');
+        expect($items.filter('.stepper-item-completed').length).to.equal(4);
+        expect($items.filter('.stepper-item-inactive').length).to.equal(0);
+      });
+  });
+
+  it('should set all steps as complete when current-index is bigger than the steps length', () => {
+    cy.get('post-stepper')
+      .invoke('attr', 'current-index', 5)
+      .wait(100)
+      .find('post-stepper-item')
+      .then($items => {
+        expect($items.filter('.stepper-item-current').length).to.equal(0);
+        expect($items.filter('.stepper-item-completed').length).to.equal(5);
+        expect($items.filter('.stepper-item-inactive').length).to.equal(0);
+      });
+  });
+
+  // Accessibility and labels
+
+  it('should set aria-current="step" on the current step', () => {
+    cy.get('post-stepper')
+      .invoke('attr', 'current-index', 1)
+      .wait(100)
+      .find('post-stepper-item')
+      .eq(1)
+      .should('have.attr', 'aria-current', 'step');
+  });
+
+  it('should set aria-live="polite" on the current step', () => {
+    cy.get('post-stepper')
+      .invoke('attr', 'current-index', 1)
+      .wait(100)
+      .find('post-stepper-item')
+      .eq(1)
+      .should('have.attr', 'aria-live', 'polite');
+  });
+
+  it('should not have aria-live="polite" on future step', () => {
+    cy.get('post-stepper')
+      .invoke('attr', 'current-index', 1)
+      .wait(100)
+      .find('post-stepper-item')
+      .eq(2)
+      .should('not.have.attr', 'aria-live');
+  });
+
+  it('should set current label on the current step', () => {
+    cy.get('post-stepper')
+      .invoke('attr', 'current-index', 1)
+      .wait(100)
+      .find('post-stepper-item')
+      .eq(1)
+      .find('.step-hidden-label')
+      .should('have.text', 'Current step:');
+  });
+
+  it('should set completed label on completed step', () => {
+    cy.get('post-stepper')
+      .invoke('attr', 'current-index', 1)
+      .wait(100)
+      .find('post-stepper-item')
+      .eq(0)
+      .find('.step-hidden-label')
+      .should('have.text', 'Completed step:');
+  });
+
+  it('should set correct mobile label on stepper', () => {
+    cy.get('post-stepper')
+      .invoke('attr', 'current-index', 1)
+      .wait(100)
+      .find('.active-step')
+      .should('have.text', 'Step 2 : Step 2');
+  });
+
+  // Dynamically added/removed steps
+
+  it('should add correct class when a new step is added dynamically', () => {
+    cy.get('post-stepper').find('post-stepper-item').should('have.length', 5);
+    cy.get('post-stepper').then($stepper => {
+      $stepper[0].appendChild(document.createElement('post-stepper-item'));
+      cy.get('post-stepper')
+        .wait(100)
+        .find('post-stepper-item')
+        .should('have.length', 6)
+        .last()
+        .should('have.class', 'stepper-item-inactive');
+    });
+  });
+
+  it('should throw an error if there is only one step', () => {
+    cy.window().then(win => {
+      cy.spy(win.console, 'error').as('consoleError');
+    });
+    cy.get('post-stepper').find('post-stepper-item').should('have.length', 5);
+
+    cy.get('post-stepper').then($stepper => {
+      const stepper = $stepper[0];
+      const allButFirstStep = stepper.querySelectorAll('post-stepper-item:not(:first-child)');
+      allButFirstStep.forEach(step => step.remove());
+    });
+
+    cy.get('post-stepper').find('post-stepper-item').should('have.length', 1);
+    cy.get('@consoleError').should('be.called');
+  });
+});
diff --git a/packages/components/cypress/fixtures/post-stepper.test.html b/packages/components/cypress/fixtures/post-stepper.test.html
new file mode 100644
index 0000000000..951fc8a2d9
--- /dev/null
+++ b/packages/components/cypress/fixtures/post-stepper.test.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link
+      href="../../node_modules/@swisspost/design-system-styles/post-default.css"
+      rel="stylesheet"
+    />
+    <script src="../../dist/post-components/post-components.esm.js" type="module"></script>
+  </head>
+  <body>
+    <post-stepper
+      completed-label="Completed step"
+      current-label="Current step"
+      active-step-label="Step #index :"
+    >
+      <post-stepper-item> Step 1</post-stepper-item>
+      <post-stepper-item> Step 2</post-stepper-item>
+      <post-stepper-item> Step 3</post-stepper-item>
+      <post-stepper-item> Step 4</post-stepper-item>
+      <post-stepper-item> Step 5</post-stepper-item>
+    </post-stepper>
+  </body>
+</html>
diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
index c61dd61335..737f376abd 100644
--- a/packages/components/src/components.d.ts
+++ b/packages/components/src/components.d.ts
@@ -477,6 +477,27 @@ export namespace Components {
          */
         "stars": number;
     }
+    interface PostStepper {
+        /**
+          * Label for the "Step N:" indicator for mobile view. Use `#index` as a placeholder — it will be replaced with the current step number at runtime.
+         */
+        "activeStepLabel": string;
+        /**
+          * "Completed step" label for accessibility
+         */
+        "completedLabel": string;
+        /**
+          * Defines the currently active step
+          * @default -1
+         */
+        "currentIndex": number;
+        /**
+          * "Current step" label for accessibility
+         */
+        "currentLabel": string;
+    }
+    interface PostStepperItem {
+    }
     interface PostTabHeader {
         /**
           * The name of the panel controlled by the tab header.
@@ -877,6 +898,18 @@ declare global {
         prototype: HTMLPostRatingElement;
         new (): HTMLPostRatingElement;
     };
+    interface HTMLPostStepperElement extends Components.PostStepper, HTMLStencilElement {
+    }
+    var HTMLPostStepperElement: {
+        prototype: HTMLPostStepperElement;
+        new (): HTMLPostStepperElement;
+    };
+    interface HTMLPostStepperItemElement extends Components.PostStepperItem, HTMLStencilElement {
+    }
+    var HTMLPostStepperItemElement: {
+        prototype: HTMLPostStepperItemElement;
+        new (): HTMLPostStepperItemElement;
+    };
     interface HTMLPostTabHeaderElement extends Components.PostTabHeader, HTMLStencilElement {
     }
     var HTMLPostTabHeaderElement: {
@@ -955,6 +988,8 @@ declare global {
         "post-popover-trigger": HTMLPostPopoverTriggerElement;
         "post-popovercontainer": HTMLPostPopovercontainerElement;
         "post-rating": HTMLPostRatingElement;
+        "post-stepper": HTMLPostStepperElement;
+        "post-stepper-item": HTMLPostStepperItemElement;
         "post-tab-header": HTMLPostTabHeaderElement;
         "post-tab-panel": HTMLPostTabPanelElement;
         "post-tabs": HTMLPostTabsElement;
@@ -1374,6 +1409,27 @@ declare namespace LocalJSX {
          */
         "stars"?: number;
     }
+    interface PostStepper {
+        /**
+          * Label for the "Step N:" indicator for mobile view. Use `#index` as a placeholder — it will be replaced with the current step number at runtime.
+         */
+        "activeStepLabel": string;
+        /**
+          * "Completed step" label for accessibility
+         */
+        "completedLabel": string;
+        /**
+          * Defines the currently active step
+          * @default -1
+         */
+        "currentIndex"?: number;
+        /**
+          * "Current step" label for accessibility
+         */
+        "currentLabel": string;
+    }
+    interface PostStepperItem {
+    }
     interface PostTabHeader {
         /**
           * The name of the panel controlled by the tab header.
@@ -1471,6 +1527,8 @@ declare namespace LocalJSX {
         "post-popover-trigger": PostPopoverTrigger;
         "post-popovercontainer": PostPopovercontainer;
         "post-rating": PostRating;
+        "post-stepper": PostStepper;
+        "post-stepper-item": PostStepperItem;
         "post-tab-header": PostTabHeader;
         "post-tab-panel": PostTabPanel;
         "post-tabs": PostTabs;
@@ -1519,6 +1577,8 @@ declare module "@stencil/core" {
             "post-popover-trigger": LocalJSX.PostPopoverTrigger & JSXBase.HTMLAttributes<HTMLPostPopoverTriggerElement>;
             "post-popovercontainer": LocalJSX.PostPopovercontainer & JSXBase.HTMLAttributes<HTMLPostPopovercontainerElement>;
             "post-rating": LocalJSX.PostRating & JSXBase.HTMLAttributes<HTMLPostRatingElement>;
+            "post-stepper": LocalJSX.PostStepper & JSXBase.HTMLAttributes<HTMLPostStepperElement>;
+            "post-stepper-item": LocalJSX.PostStepperItem & JSXBase.HTMLAttributes<HTMLPostStepperItemElement>;
             "post-tab-header": LocalJSX.PostTabHeader & JSXBase.HTMLAttributes<HTMLPostTabHeaderElement>;
             "post-tab-panel": LocalJSX.PostTabPanel & JSXBase.HTMLAttributes<HTMLPostTabPanelElement>;
             "post-tabs": LocalJSX.PostTabs & JSXBase.HTMLAttributes<HTMLPostTabsElement>;
diff --git a/packages/components/src/components/post-popover/readme.md b/packages/components/src/components/post-popover/readme.md
index f9e1110c89..7acc272cb6 100644
--- a/packages/components/src/components/post-popover/readme.md
+++ b/packages/components/src/components/post-popover/readme.md
@@ -1,5 +1,7 @@
 # post-popover
 
+
+
 <!-- Auto Generated Below -->
 
 
diff --git a/packages/components/src/components/post-stepper-item/post-stepper-item.scss b/packages/components/src/components/post-stepper-item/post-stepper-item.scss
new file mode 100644
index 0000000000..19fe286343
--- /dev/null
+++ b/packages/components/src/components/post-stepper-item/post-stepper-item.scss
@@ -0,0 +1,258 @@
+@use '@swisspost/design-system-styles/mixins/icons';
+@use '@swisspost/design-system-styles/mixins/utilities';
+@use '@swisspost/design-system-styles/mixins/media';
+@use '@swisspost/design-system-styles/functions/tokens';
+@use '@swisspost/design-system-styles/tokens/components';
+@use '@swisspost/design-system-styles/tokens/elements';
+
+tokens.$default-map: components.$post-stepper;
+
+@include icons.custom-property('success-solid');
+
+post-stepper-item {
+  grid-row: 1;
+  position: relative;
+  padding-inline-start: 0;
+
+  &:not(:first-child) {
+    padding-inline-start: calc(#{tokens.get('stepper-indicator')} / 2);
+  }
+
+  &:not(:last-child) {
+    padding-inline-end: calc(#{tokens.get('stepper-indicator')} / 2);
+    grid-column: span 2;
+  }
+
+  // progress bar
+  &::before,
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    inset-block-start: calc((#{tokens.get('stepper-indicator')} - 2px) / 2);
+    height: 2px;
+    background-color: tokens.get('stepper-connector-next');
+    inset-inline: 0;
+  }
+
+  &:not(:first-child, :last-child) {
+    &::before {
+      inset-inline-end: 50%;
+    }
+
+    &::after {
+      inset-inline-start: 50%;
+    }
+  }
+
+  &.stepper-item-current:not(:last-child)::after,
+  &.stepper-item-current:first-child::before,
+  &.stepper-item-current + *:last-child::after,
+  &.stepper-item-current + *::before {
+    background-color: tokens.get('stepper-connector-active');
+  }
+
+  &.stepper-item-current:not(:first-child)::before,
+  &.stepper-item-current:last-child::after,
+  &.stepper-item-completed::after,
+  &.stepper-item-completed::before,
+  &.stepper-item-completed + *::before {
+    background-color: tokens.get('stepper-connector-completed');
+    z-index: 1;
+  }
+}
+
+.stepper-item-content {
+  // stylelint-disable-next-line value-no-vendor-prefix
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  position: relative;
+  z-index: 2;
+  overflow: hidden;
+  text-decoration: none;
+  color: tokens.get('stepper-text-disabled-fg');
+  width: fit-content;
+  word-break: break-word;
+  font-size: tokens.get('stepper-step-label-font-size');
+
+  post-stepper-item:not(:first-child, :last-child) > & {
+    margin-inline: auto;
+    text-align: center;
+  }
+
+  post-stepper-item:last-child > & {
+    margin-inline-start: auto;
+    margin-inline-end: calc(40px / -2); // negative margin matching the container padding
+    text-align: end;
+  }
+
+  // Completed steps
+  .stepper-item-completed > & {
+    color: tokens.get('stepper-text-enabled-fg');
+  }
+
+  // Current step
+  .stepper-item-current > & {
+    font-weight: tokens.get('stepper-step-label-selected-font-weight');
+    color: tokens.get('stepper-text-enabled-fg');
+
+    &::before {
+      font-weight: tokens.get('body-font-weight', elements.$post-body);
+      color: tokens.get('stepper-enabled-fg');
+    }
+  }
+}
+
+// step indicator
+.stepper-item-content::before {
+  counter-increment: step-index;
+  content: counter(step-index);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  height: tokens.get('stepper-indicator');
+  width: tokens.get('stepper-indicator');
+  box-sizing: border-box;
+  margin-block-end: tokens.get('stepper-gap-text-start');
+  color: tokens.get('stepper-enabled-fg');
+  background-color: tokens.get('stepper-enabled-bg');
+  border: tokens.get('stepper-border-width') solid tokens.get('stepper-enabled-stroke');
+  border-radius: tokens.get('stepper-border-radius-round');
+  text-indent: initial;
+
+  post-stepper-item:not(:first-child, :last-child) > & {
+    margin-inline: auto;
+  }
+
+  post-stepper-item:last-child > & {
+    margin-inline-start: auto;
+  }
+
+  // Completed steps
+  .stepper-item-completed > & {
+    color: transparent; // Hides the number on completed step
+    background-color: tokens.get('stepper-completed-stroke');
+    border-color: tokens.get('stepper-completed-stroke');
+  }
+
+  // Future steps
+  .stepper-item-inactive > & {
+    color: tokens.get('stepper-disabled-fg');
+    background-color: tokens.get('stepper-disabled-bg');
+    border-color: tokens.get('stepper-disabled-stroke');
+  }
+}
+
+$checkIconSize: calc(
+  #{tokens.get('stepper-indicator')} - (#{tokens.get('stepper-border-width')} * 2)
+);
+
+// check icon
+.stepper-item-content::after {
+  display: block;
+  position: absolute;
+  inset-block-start: tokens.get('stepper-border-width');
+  z-index: 1;
+  background-color: tokens.get('stepper-enabled-fg');
+  @include icons.mask-image('success-solid');
+  width: $checkIconSize;
+  height: $checkIconSize;
+  color: tokens.get('stepper-completed-bg');
+
+  post-stepper-item:first-child > & {
+    inset-inline-start: tokens.get('stepper-border-width');
+  }
+
+  post-stepper-item:not(:first-child, :last-child) > & {
+    inset-inline-start: calc(50% - ($checkIconSize / 2));
+  }
+
+  post-stepper-item:last-child > & {
+    inset-inline-end: tokens.get('stepper-border-width');
+  }
+
+  // show only for completed steps
+  .stepper-item-completed > & {
+    content: '';
+  }
+}
+
+// smaller screens
+@include media.max(md) {
+  post-stepper-item {
+    flex-grow: 1;
+    margin-inline: 0;
+    padding: 0 !important;
+
+    &::before {
+      content: unset;
+    }
+
+    &::after {
+      inset-inline-start: 0 !important;
+    }
+
+    &:last-child {
+      flex: 0 0 32px;
+
+      &::after {
+        content: unset;
+      }
+    }
+    .stepper-item-content {
+      margin-inline: 0 !important;
+
+      > span {
+        display: none;
+      }
+    }
+  }
+}
+
+@include utilities.high-contrast-mode {
+  post-stepper-item {
+    &::before,
+    &::after {
+      background-color: CanvasText !important;
+    }
+
+    &.stepper-item-current:not(:first-child)::before,
+    &.stepper-item-current:last-child::after,
+    &.stepper-item-completed::after,
+    &.stepper-item-completed::before,
+    &.stepper-item-completed + *::before {
+      background-color: Highlight !important;
+    }
+  }
+
+  .stepper-item-content {
+    &::before {
+      forced-color-adjust: none;
+    }
+
+    .stepper-item-current > &::before {
+      background-color: Canvas;
+      color: CanvasText;
+    }
+
+    .stepper-item-completed > &::before,
+    .stepper-item-inactive > &::before {
+      border-color: Canvas;
+      background-color: CanvasText;
+    }
+
+    .stepper-item-inactive > &::before {
+      color: Canvas;
+    }
+
+    &::after {
+      color: Canvas;
+    }
+  }
+}
+
+.visually-hidden {
+  @include utilities.visuallyhidden();
+}
diff --git a/packages/components/src/components/post-stepper-item/post-stepper-item.tsx b/packages/components/src/components/post-stepper-item/post-stepper-item.tsx
new file mode 100644
index 0000000000..584b310fef
--- /dev/null
+++ b/packages/components/src/components/post-stepper-item/post-stepper-item.tsx
@@ -0,0 +1,22 @@
+import { Component, h, Host } from '@stencil/core';
+import { version } from '@root/package.json';
+
+@Component({
+  tag: 'post-stepper-item',
+  styleUrl: 'post-stepper-item.scss',
+  shadow: false,
+})
+export class PostStepperItem {
+  render() {
+    return (
+      <Host data-version={version} role="listitem">
+        <span class="stepper-item-content">
+          <span class="step-hidden-label visually-hidden"></span>
+          <span class="label">
+            <slot></slot>
+          </span>
+        </span>
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/post-stepper-item/readme.md b/packages/components/src/components/post-stepper-item/readme.md
new file mode 100644
index 0000000000..70033f179c
--- /dev/null
+++ b/packages/components/src/components/post-stepper-item/readme.md
@@ -0,0 +1,8 @@
+# post-stepper-item
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-stepper/post-stepper.scss b/packages/components/src/components/post-stepper/post-stepper.scss
new file mode 100644
index 0000000000..6e6f82f79b
--- /dev/null
+++ b/packages/components/src/components/post-stepper/post-stepper.scss
@@ -0,0 +1,40 @@
+@use '@swisspost/design-system-styles/mixins/utilities';
+@use '@swisspost/design-system-styles/functions/tokens';
+@use '@swisspost/design-system-styles/tokens/components';
+@use '@swisspost/design-system-styles/mixins/media';
+
+tokens.$default-map: components.$post-stepper;
+
+ol {
+  @include utilities.reset-list;
+  // start a counter for the step numbers
+  counter-reset: step-index;
+
+  display: grid;
+  position: relative;
+  overflow: hidden;
+
+  // the first column is half a step wide to make sure the separators are the same size even on small screens
+  grid-template-columns: calc(40px / 2);
+
+  // all other columns are 1 fraction of the available space ase we don't know the number of steps
+  grid-auto-columns: minmax(0, 1fr);
+
+  // we use a padding and negative margin on the last step for the same reason we need the first column
+  padding-inline-end: calc(40px / 2);
+
+  @include media.max(md) {
+    display: flex;
+    padding-inline-end: 0;
+  }
+}
+
+.active-step {
+  font-size: tokens.get('stepper-step-label-font-size');
+  font-weight: tokens.get('stepper-step-label-selected-font-weight');
+  color: tokens.get('stepper-text-enabled-fg');
+
+  @include media.min(md) {
+    display: none;
+  }
+}
diff --git a/packages/components/src/components/post-stepper/post-stepper.tsx b/packages/components/src/components/post-stepper/post-stepper.tsx
new file mode 100644
index 0000000000..2d4094818d
--- /dev/null
+++ b/packages/components/src/components/post-stepper/post-stepper.tsx
@@ -0,0 +1,154 @@
+import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';
+import { version } from '@root/package.json';
+import { checkRequiredAndPattern, checkRequiredAndType } from '@/utils';
+
+@Component({
+  tag: 'post-stepper',
+  styleUrl: 'post-stepper.scss',
+  shadow: true,
+})
+export class PostStepper {
+  @Element() host: HTMLPostStepperElement;
+
+  private stepItems: NodeListOf<HTMLPostStepperItemElement>;
+
+  /**
+   * Active step label is for visual purposes on mobile only
+   */
+  @State() mobileActiveStepLabel: string;
+
+  /**
+   * Active step name is for visual purposes on mobile only
+   */
+  @State() mobileActiveStepName: string;
+
+  /**
+   * "Current step" label for accessibility
+   */
+  @Prop({ reflect: true }) currentLabel!: string;
+
+  @Watch('currentLabel')
+  validateCurrentLabel() {
+    checkRequiredAndType(this, 'currentLabel', 'string');
+  }
+
+  /**
+   * "Completed step" label for accessibility
+   */
+  @Prop({ reflect: true }) completedLabel!: string;
+
+  @Watch('completedLabel')
+  validateCompletedLabel() {
+    checkRequiredAndType(this, 'completedLabel', 'string');
+  }
+
+  /**
+   * Label for the "Step N:" indicator for mobile view.
+   * Use `#index` as a placeholder — it will be replaced with the current step number at runtime.
+   */
+  @Prop({ reflect: true }) activeStepLabel!: string;
+
+  @Watch('activeStepLabel')
+  validateActiveStepLabel() {
+    checkRequiredAndPattern(this, 'activeStepLabel', /#index\b/);
+    this.updateActiveStepLabel();
+  }
+
+  /**
+   * Defines the currently active step
+   */
+  @Prop() currentIndex: number = -1;
+
+  @Watch('currentIndex')
+  validateCurrentIndex() {
+    checkRequiredAndType(this, 'currentIndex', 'number');
+    this.updateSteps();
+  }
+
+  componentDidLoad() {
+    this.validateCompletedLabel();
+    this.validateCurrentLabel();
+    this.validateActiveStepLabel();
+
+    // Wait for slotchange
+    setTimeout(() => {
+      this.validateCurrentIndex();
+    });
+  }
+
+  private updateActiveStepLabel() {
+    if (this.activeStepLabel) {
+      const labelTemplate = this.activeStepLabel;
+      this.mobileActiveStepLabel = labelTemplate.replace(/#index/g, `${this.currentIndex + 1}`);
+      this.updateMobileActiveStepVisibility();
+    }
+  }
+
+  private updateSteps() {
+    this.stepItems = this.host.querySelectorAll('post-stepper-item');
+
+    if (!this.stepItems || this.stepItems.length < 3) {
+      console.error('The post-stepper component should have at least three steps.');
+      return;
+    }
+
+    this.updateActiveStepLabel();
+
+    this.stepItems.forEach((el, i) => {
+      if (this.currentIndex === i) {
+        this.mobileActiveStepName = el.querySelector('.label').innerHTML;
+      }
+
+      // Update "post-stepper-item" classes to show correct status
+      el.classList.toggle('stepper-item-completed', this.currentIndex > i);
+      el.classList.toggle('stepper-item-current', this.currentIndex === i);
+      el.classList.toggle('stepper-item-inactive', this.currentIndex < i);
+
+      // Update accessibility label depending on status (Completed/Current/-)
+      const hiddenLabel = el.querySelector('.step-hidden-label');
+      if (hiddenLabel) {
+        let labelText = '';
+
+        if (this.currentIndex > i) {
+          labelText = `${this.completedLabel}:`;
+        } else if (this.currentIndex === i) {
+          labelText = `${this.currentLabel}:`;
+        }
+
+        hiddenLabel.textContent = labelText;
+      }
+
+      // Update accessibility aria attributes
+      if (this.currentIndex === i) {
+        el.setAttribute('aria-current', 'step');
+        el.setAttribute('aria-live', 'polite');
+      } else {
+        el.removeAttribute('aria-current');
+        el.removeAttribute('aria-live');
+      }
+    });
+
+    this.updateMobileActiveStepVisibility();
+  }
+
+  private updateMobileActiveStepVisibility() {
+    if (this.currentIndex >= this.stepItems.length || this.currentIndex < 0) {
+      this.mobileActiveStepLabel = '';
+      this.mobileActiveStepName = '';
+    }
+  }
+
+  render() {
+    return (
+      <Host data-version={version}>
+        <ol>
+          <slot onSlotchange={() => this.updateSteps()}></slot>
+        </ol>
+        <div class="active-step" aria-hidden="true">
+          {this.mobileActiveStepLabel}
+          <span innerHTML={this.mobileActiveStepName}></span>
+        </div>
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/post-stepper/readme.md b/packages/components/src/components/post-stepper/readme.md
new file mode 100644
index 0000000000..2f6f7ecfd8
--- /dev/null
+++ b/packages/components/src/components/post-stepper/readme.md
@@ -0,0 +1,20 @@
+# post-stepper
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property                       | Attribute           | Description                                                                                                                                     | Type     | Default     |
+| ------------------------------ | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------- |
+| `activeStepLabel` _(required)_ | `active-step-label` | Label for the "Step N:" indicator for mobile view. Use `#index` as a placeholder — it will be replaced with the current step number at runtime. | `string` | `undefined` |
+| `completedLabel` _(required)_  | `completed-label`   | "Completed step" label for accessibility                                                                                                        | `string` | `undefined` |
+| `currentIndex`                 | `current-index`     | Defines the currently active step                                                                                                               | `number` | `-1`        |
+| `currentLabel` _(required)_    | `current-label`     | "Current step" label for accessibility                                                                                                          | `string` | `undefined` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/documentation/src/stories/components/stepper/stepper.docs.mdx b/packages/documentation/src/stories/components/stepper/stepper.docs.mdx
index ef3a9dee62..d18b8adf4a 100644
--- a/packages/documentation/src/stories/components/stepper/stepper.docs.mdx
+++ b/packages/documentation/src/stories/components/stepper/stepper.docs.mdx
@@ -1,5 +1,4 @@
 import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-import StylesPackageImport from '@/shared/styles-package-import.mdx';
 import meta, * as StepperStories from './stepper.stories';
 import PackageTag from '@/shared/package-tag';
 
@@ -8,15 +7,15 @@ import PackageTag from '@/shared/package-tag';
 <div className="docs-title">
   # Stepper
 
-  <link-design of={JSON.stringify(StepperStories)}></link-design>
+<link-design of={JSON.stringify(StepperStories)}></link-design>
+
 </div>
 
-<PackageTag meta={meta}/>
+<PackageTag meta={meta} />
 
 <div className="lead mb-16">
-  The stepped progression component provides an interactive visual overview of a process. It shows
-  at a glance the amount of steps a user is required to go through, and serves as a guide for each
-  step, indicating its status.
+  A stepper guides users through any linear, multistep process by showing the user their completed,
+  current, and future steps in an interactive manner.
 </div>
 
 <Canvas sourceState="shown" of={StepperStories.Default} />
@@ -24,30 +23,7 @@ import PackageTag from '@/shared/package-tag';
   <Controls of={StepperStories.Default} />
 </div>
 
-<StylesPackageImport components={['stepper']} />
-
-## Examples
-
-### Navigational Stepper
-
-You can use a stepper to allow users to navigate to specific steps.
-To do so, use `a` elements for the `.stepper-link` of the steps you want to be navigable, and use `span` for the steps you want not to be navigable.
-Then, wrap the stepper inside a `<nav>`.
-
-However, it is better not to use an `a` for the current step since the user is already on the page.
-
-<Canvas of={StepperStories.NavigationalStepper} />
-
-### Informational Stepper
-
-If you wish to display the stepper for informational purposes only, you can use `<span>` elements for the `.stepper-link` on all the steps.
-In this case, there's no need to wrap the stepper inside a `<nav>`.
-
-<Canvas of={StepperStories.InformationalStepper} />
-
-### Long Labels
-
-When dealing with longer labels that may wrap into multiple lines, it is recommended to use a `title` attribute for the `.stepper-link`.
-This will truncate the label with an ellipsis if it exceeds two lines, while allowing the user to read the full label by hovering over it with the mouse.
+## Installation
 
-<Canvas of={StepperStories.LongLabels} />
+The `<post-stepper>` element is part of the `@swisspost/design-system-components` package.
+For more information, read the [getting started with components guide](/?path=/docs/edfb619b-fda1-4570-bf25-20830303d483--docs).
diff --git a/packages/documentation/src/stories/components/stepper/stepper.snapshot.stories.ts b/packages/documentation/src/stories/components/stepper/stepper.snapshot.stories.ts
index 0e01348e8c..8e3c13f27b 100644
--- a/packages/documentation/src/stories/components/stepper/stepper.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/stepper/stepper.snapshot.stories.ts
@@ -15,19 +15,15 @@ type Story = StoryObj;
 
 export const Stepper: Story = {
   render: (_args: Args, context: StoryContext) => {
-    const longSteps = [
-      'Curabitur sed velit ullamcorper, molestie nunc a, dignissim ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-      'Ut sed consectetur odio. Curabitur vel pulvinar est. Maecenas quam arcu, sagittis et libero aliquet, egestas luctus nisi.',
-      'Nam pretium nec neque sed vulputate. Sed non augue libero. Vivamus consequat mauris id ligula cursus, sit amet faucibus ipsum.',
-      'Sed vulputate lacinia eros, sit amet mattis sem luctus sit amet. Vestibulum pharetra tortor a laoreet malesuada.',
-    ];
     return schemes(
       () => html`
         <div class="d-flex flex-column gap-16 p-16">
           ${bombArgs({
+            stepsAmount: meta.argTypes?.stepsAmount?.options,
             currentStepNumber: meta.argTypes?.currentStepNumber?.options,
-          }).map((args: Args) => meta.render?.({ ...context.args, ...args }, context))}
-          ${meta.render?.({ ...context.args, ...{ steps: longSteps } }, context)}
+          })
+            .filter(args => args.currentStepNumber <= args.stepsAmount)
+            .map((args: Args) => meta.render?.({ ...context.args, ...args }, context))}
         </div>
       `,
     );
diff --git a/packages/documentation/src/stories/components/stepper/stepper.stories.ts b/packages/documentation/src/stories/components/stepper/stepper.stories.ts
index 53f18e918d..eb98d009ac 100644
--- a/packages/documentation/src/stories/components/stepper/stepper.stories.ts
+++ b/packages/documentation/src/stories/components/stepper/stepper.stories.ts
@@ -1,16 +1,13 @@
 import { Args, StoryObj } from '@storybook/web-components-vite';
 import { html } from 'lit';
 import { MetaComponent } from '@root/types';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { useArgs } from 'storybook/preview-api';
-
-const defaultSteps = ['Sender', 'Product', 'Other details', 'Order summary'];
 
 const meta: MetaComponent = {
   id: '7dc546d9-e248-4d06-befe-3ad62fcd310f',
   title: 'Components/Stepper',
-  tags: ['package:Styles', 'status:Stable'],
-  render: renderStepper,
+  tags: ['package:WebComponents', 'status:InProgress'],
+  component: 'post-stepper',
+  render,
   parameters: {
     badges: [],
     controls: {
@@ -18,50 +15,45 @@ const meta: MetaComponent = {
     },
     design: {
       type: 'figma',
-      url: 'https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=20952-29106&mode=design&t=38qLaYwWdirTcHdb-4',
+      url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations---Components-Next-Level?node-id=21-176&p=f&t=SlP83fyysFMbjBGJ-0',
     },
   },
   args: {
-    currentStepNumber: 3,
-    navigatableSteps: 'all',
-    processName: 'Registration Form',
-    steps: defaultSteps,
+    currentIndex: 2,
+    completedLabel: 'Completed step',
+    currentLabel: 'Current step',
+    activeStepLabel: 'Step #index:',
+    stepsAmount: 5,
   },
   argTypes: {
-    navigatableSteps: {
-      name: 'Navigatable Steps',
-      description: 'Defines which steps in the current process the user can navigate to.',
+    currentIndex: {
+      name: 'current-index',
       control: {
-        type: 'radio',
+        type: 'select',
         labels: {
-          all: 'All steps',
-          completedOnly: 'Completed Steps only',
-          none: 'None',
+          '-1': 'Not started',
+          0: 'Step 1',
+          1: 'Step 2',
+          2: 'Step 3',
+          3: 'Step 4',
+          4: 'Step 5',
+          5: 'Step 6',
+          6: 'Step 7',
+          7: 'Step 8',
+          8: 'Step 9',
+          9: 'Step 10',
+          10: 'Completed',
         },
       },
-      options: ['all', 'completedOnly', 'none'],
-      table: {
-        category: 'General',
-      },
+      options: [-1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
     },
-    currentStepNumber: {
-      name: 'Current Step Number',
-      description: 'The number of the step the user is currently at in the process.',
+    stepsAmount: {
+      name: 'Steps amount',
+      description: 'The amount of steps in the stepper.',
       control: {
         type: 'select',
       },
-      options: Object.keys(defaultSteps).map(key => parseInt(key, 10) + 1),
-      table: {
-        category: 'General',
-      },
-    },
-    processName: {
-      name: 'Process Name',
-      description:
-        'A straightforward, self-explanatory name for the current process, used for assistive technologies.',
-      control: {
-        type: 'text',
-      },
+      options: [3, 4, 5, 6, 7, 8, 9, 10],
       table: {
         category: 'General',
       },
@@ -70,89 +62,19 @@ const meta: MetaComponent = {
 };
 export default meta;
 
-// RENDERER
-function getStepperItem(
-  args: Args,
-  step: string,
-  index: number,
-  updateStep: (newStep: number, event: Event) => void,
-) {
-  const currentStepIndex = args.currentStepNumber - 1;
-  const isCompletedStep = index < currentStepIndex;
-  const isCurrentStep = index === currentStepIndex;
-  const isNextStep = index > currentStepIndex;
-  const isLink =
-    (isCompletedStep && args.navigatableSteps !== 'none') ||
-    (isNextStep && args.navigatableSteps === 'all');
-
-  let status = 'Current';
-  if (isCompletedStep) status = 'Completed';
-  if (isNextStep) status = 'Next';
-
-  const text = html`<span class="visually-hidden">${status} step:</span> ${step}`;
-  const title = step !== defaultSteps[index] ? step : undefined;
-
+function render(args: Args) {
   return html`
-    <li aria-current=${ifDefined(isCurrentStep ? 'step' : undefined)} class="stepper-item">
-      ${isLink
-        ? html`
-            <a
-              class="stepper-link"
-              href="../step-${index + 1}"
-              title=${ifDefined(title)}
-              @click=${(e: Event) => {
-                e.preventDefault();
-                updateStep(index + 1, e);
-              }}
-            >
-              ${text}
-            </a>
-          `
-        : html`<span class="stepper-link" title=${ifDefined(title)}>${text}</span>`}
-    </li>
+    <post-stepper
+      completed-label="${args.completedLabel}"
+      current-label="${args.currentLabel}"
+      active-step-label="${args.activeStepLabel}"
+      current-index="${args.currentIndex}"
+    >
+      ${Array.from({ length: args.stepsAmount }).map(
+        (a, i) => html` <post-stepper-item> Step ${i + 1} label</post-stepper-item> `,
+      )}
+    </post-stepper>
   `;
 }
 
-function renderStepper(args: Args) {
-  const [_, updateArgs] = useArgs();
-
-  const updateStep = (newStepNumber: number, event: Event) => {
-    event.preventDefault();
-    updateArgs({ currentStepNumber: newStepNumber });
-  };
-
-  const isNav = args.navigatableSteps !== 'none';
-
-  const stepper = html`<ol
-    class="stepper"
-    aria-label=${ifDefined(isNav ? undefined : args.processName + ' Progress')}
-  >
-    ${args.steps.map((step: string, index: number) =>
-      getStepperItem(args, step, index, updateStep),
-    )}
-  </ol>`;
-
-  return args.navigatableSteps === 'none'
-    ? stepper
-    : html`<nav aria-label="${args.processName}">${stepper}</nav>`;
-}
-
 export const Default: StoryObj = {};
-
-export const NavigationalStepper: StoryObj = {
-  args: {
-    navigatableSteps: 'completedOnly',
-  },
-};
-
-export const InformationalStepper: StoryObj = {
-  args: {
-    navigatableSteps: 'none',
-  },
-};
-
-export const LongLabels: StoryObj = {
-  args: {
-    steps: ['Personal information and shipping address', ...defaultSteps.slice(1)],
-  },
-};
diff --git a/packages/documentation/src/stories/misc/migration-guide/migrationv9-10.component.ts b/packages/documentation/src/stories/misc/migration-guide/migrationv9-10.component.ts
index d34b011498..c6365141c4 100644
--- a/packages/documentation/src/stories/misc/migration-guide/migrationv9-10.component.ts
+++ b/packages/documentation/src/stories/misc/migration-guide/migrationv9-10.component.ts
@@ -68,6 +68,7 @@ export class MigrationV99Component extends LitElement {
       spinner_sizes: false,
       standard_html_alert: false,
       spinner: false,
+      stepper: false,
     },
     components: {
       alert: false,
@@ -354,6 +355,21 @@ export class MigrationV99Component extends LitElement {
                       </label>
                     </div>
                   </li>
+                  <li class="mb-16">
+                    <div class="form-check">
+                      <input
+                        id="components.popover_trigger"
+                        class="form-check-input"
+                        type="checkbox"
+                        ?checked="${this.state.components.popover_trigger}"
+                      />
+                      <label class="form-check-label" for="components.popover_trigger">
+                        The <code>post-popover</code> now uses its own
+                        <code>post-popover-trigger</code> component instead of an element with a
+                        <code>data-popover-target</code> attribute.
+                      </label>
+                    </div>
+                  </li>
                 </ul>
               </section>
 
@@ -1433,19 +1449,20 @@ export class MigrationV99Component extends LitElement {
                       </label>
                     </div>
                   </li>
+
                   <li class="mb-16">
                     <div class="form-check">
                       <input
-                        id="components.popover_trigger"
+                        id="others.stepper"
                         class="form-check-input"
                         type="checkbox"
-                        ?checked="${this.state.components.popover_trigger}"
+                        ?checked="${this.state.others.stepper}"
                       />
-                      <label class="form-check-label" for="components.popover_trigger">
-                        The <code>post-popover</code> now uses its own
-                        <code>post-popover-trigger</code> component instead of an element with a
-                        <code>data-popover-target</code> attribute.
-                        <span class="tag tag-sm tag-danger">breaking</span>
+                      <label class="form-check-label" for="others.stepper">
+                        Removed the stepper HTML component.
+                        <span class="info"
+                          >You can now use the <code>post-stepper</code> web component.</span
+                        >
                       </label>
                     </div>
                   </li>
diff --git a/packages/documentation/src/stories/misc/migration-guide/types.ts b/packages/documentation/src/stories/misc/migration-guide/types.ts
index f8ab3c65bf..29c196e02a 100644
--- a/packages/documentation/src/stories/misc/migration-guide/types.ts
+++ b/packages/documentation/src/stories/misc/migration-guide/types.ts
@@ -140,6 +140,7 @@ export interface V910Checks {
     accent_colors: boolean;
     spinner_sizes: boolean;
     standard_html_alert: boolean;
+    stepper: boolean;
     spinner: boolean;
   };
   components: {
diff --git a/packages/nextjs-integration/src/app/ssr/page.tsx b/packages/nextjs-integration/src/app/ssr/page.tsx
index 543a756f5e..1dc3d5394f 100644
--- a/packages/nextjs-integration/src/app/ssr/page.tsx
+++ b/packages/nextjs-integration/src/app/ssr/page.tsx
@@ -20,6 +20,8 @@ import {
   PostTabPanel,
   PostTooltipTrigger,
   PostTooltip,
+  PostStepper,
+  PostStepperItem,
 } from '@swisspost/design-system-components-react/server';
 
 export default function Home() {
@@ -175,6 +177,19 @@ export default function Home() {
       <PostTooltip id="tooltip-one" className="palette palette-accent" placement="top">
         Hi there 👋
       </PostTooltip>
+
+      <h2>Post Stepper</h2>
+      <PostStepper
+        completedLabel="Completed step"
+        currentLabel="Current step"
+        activeStepLabel="Step #index:"
+        currentIndex={1}
+      >
+        <PostStepperItem> Step 1 </PostStepperItem>
+        <PostStepperItem> Step 2 </PostStepperItem>
+        <PostStepperItem> Step 3 </PostStepperItem>
+        <PostStepperItem> Step 4 </PostStepperItem>
+      </PostStepper>
     </>
   );
 }
diff --git a/packages/styles/src/components/_index.scss b/packages/styles/src/components/_index.scss
index 16f1eca25d..7aa9cdb67c 100644
--- a/packages/styles/src/components/_index.scss
+++ b/packages/styles/src/components/_index.scss
@@ -33,7 +33,6 @@
 @use 'segmented-button';
 @use 'skiplinks';
 @use 'spinner';
-@use 'stepper';
 @use 'subnavigation';
 @use 'tables';
 @use 'tabs';
diff --git a/packages/styles/src/components/stepper.scss b/packages/styles/src/components/stepper.scss
deleted file mode 100644
index 2f6606f56a..0000000000
--- a/packages/styles/src/components/stepper.scss
+++ /dev/null
@@ -1,379 +0,0 @@
-@use './../mixins/icons' as icons-mx;
-@use './../mixins/utilities' as utilities-mx;
-
-@use './../variables/color';
-@use './../variables/commons';
-@use './../variables/components/stepper';
-
-@use './../mixins/media';
-
-@use './../functions/tokens';
-@use './../tokens/utilities';
-
-tokens.$default-map: utilities.$post-spacing;
-
-@include icons-mx.custom-property('checkmark');
-
-// for backward compatibility
-.stepper-container {
-  margin-bottom: 20px;
-
-  @include media.min(md) {
-    margin-bottom: tokens.get('utility-margin-32');
-  }
-
-  @include media.min(xl) {
-    margin-bottom: tokens.get('utility-margin-40');
-  }
-
-  > .stepper-bar {
-    display: none;
-  }
-}
-
-.stepper {
-  @include utilities-mx.reset-list;
-  // start a counter for the step numbers
-  counter-reset: step-index;
-
-  display: grid;
-  position: relative;
-  overflow: hidden;
-
-  // the first column is half a step wide to make sure the separators are the same size even on small screens
-  grid-template-columns: calc(stepper.$stepper-indicator-size / 2);
-
-  // all other columns are 1 fraction of the available space ase we don't know the number of steps
-  grid-auto-columns: minmax(0, 1fr);
-
-  // we use a padding and negative margin on the last step for the same reason we need the first column
-  padding-inline-end: calc(stepper.$stepper-indicator-size / 2);
-}
-
-.stepper-item {
-  grid-row: 1;
-  position: relative;
-  padding-inline-start: 0;
-
-  &:not(:first-child) {
-    padding-inline-start: calc(stepper.$stepper-link-spacing / 2);
-  }
-
-  &:not(:last-child) {
-    padding-inline-end: calc(stepper.$stepper-link-spacing / 2);
-    grid-column: span 2;
-  }
-
-  // progress bar
-  &::before,
-  &::after {
-    content: '';
-    display: block;
-    position: absolute;
-    inset-block-start: calc((stepper.$stepper-indicator-size - stepper.$stepper-bar-height) / 2);
-    height: stepper.$stepper-bar-height;
-    background-color: stepper.$stepper-bar-color;
-    inset-inline: 0;
-  }
-
-  &:not(:first-child, :last-child) {
-    &::before {
-      inset-inline-end: 50%;
-    }
-
-    &::after {
-      inset-inline-start: 50%;
-    }
-  }
-
-  // current and completed steps are preceded by a yellow segment (except for the first step)
-  &:not(&[aria-current='step'] ~ *, :first-child)::before,
-  // steps that are not the current step or preceded by a current step are followed by a yellow segment
-    &:not([aria-current='step'], .stepper-item[aria-current='step'] ~ *)::after {
-    background-color: stepper.$stepper-bar-fill-color;
-    z-index: 1;
-  }
-}
-
-.stepper-link {
-  // -webkit-box is needed for line-clamp: https://caniuse.com/css-line-clamp
-  // stylelint-disable-next-line value-no-vendor-prefix
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  position: relative;
-  z-index: 2;
-  overflow: hidden;
-  text-decoration: none;
-  color: stepper.$stepper-link-color;
-  width: fit-content;
-  line-height: stepper.$stepper-link-line-height;
-  word-break: break-word;
-
-  // not adding ellipsis if the like doesn't have a title for accessibility reasons
-  &:not([title]) {
-    -webkit-line-clamp: initial;
-  }
-
-  .stepper-item:not(:first-child, :last-child) > & {
-    margin-inline: auto;
-    text-align: center;
-  }
-
-  .stepper-item:last-child > & {
-    margin-inline-start: auto;
-    margin-inline-end: calc(
-      stepper.$stepper-indicator-size / -2
-    ); // negative margin matching the container padding
-    text-align: end;
-  }
-
-  .stepper-item[aria-current='step'] > & {
-    color: stepper.$stepper-link-current-color;
-    font-weight: stepper.$stepper-link-current-font-weight;
-  }
-}
-
-// step indicator
-.stepper-link::before {
-  counter-increment: step-index;
-  content: counter(step-index);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1;
-  height: stepper.$stepper-indicator-size;
-  width: stepper.$stepper-indicator-size;
-  box-sizing: border-box;
-  margin-block-end: stepper.$stepper-link-gap;
-  color: stepper.$stepper-indicator-color;
-  background-color: stepper.$stepper-indicator-bg;
-  border: stepper.$stepper-indicator-border-width solid stepper.$stepper-indicator-border-color;
-  border-radius: 50%;
-  font-weight: stepper.$stepper-indicator-font-weight;
-  text-indent: initial;
-  transition: stepper.$stepper-indicator-transition;
-
-  .stepper-item:not(:first-child, :last-child) > & {
-    margin-inline: auto;
-  }
-
-  .stepper-item:last-child > & {
-    margin-inline-start: auto;
-  }
-
-  .stepper-item:not([aria-current='step'], .stepper-item[aria-current='step'] ~ *) > & {
-    color: transparent;
-  }
-
-  .stepper-item[aria-current='step'] ~ .stepper-item > & {
-    color: stepper.$stepper-indicator-future-color;
-    background-color: stepper.$stepper-indicator-future-bg;
-  }
-}
-
-// check icon
-.stepper-link::after {
-  @include icons-mx.mask-image('checkmark');
-  display: block;
-  position: absolute;
-  top: calc((stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size) / 2);
-  z-index: 1;
-  height: stepper.$stepper-indicator-check-icon-size;
-  width: stepper.$stepper-indicator-check-icon-size;
-  transition: stepper.$stepper-indicator-transition;
-  color: stepper.$stepper-indicator-color;
-
-  .stepper-item:first-child > & {
-    left: calc(
-      (#{stepper.$stepper-indicator-size} - stepper.$stepper-indicator-check-icon-size) / 2
-    );
-  }
-
-  .stepper-item:not(:first-child, :last-child) > & {
-    left: calc(50% - (stepper.$stepper-indicator-check-icon-size / 2));
-  }
-
-  .stepper-item:last-child > & {
-    right: calc((stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size) / 2);
-  }
-
-  // show only for completed steps
-  .stepper-item:not([aria-current='step'], .stepper-item[aria-current='step'] ~ *) > & {
-    content: '';
-  }
-}
-
-// hover/focus state
-.stepper-link:is(a[href]) {
-  @include utilities-mx.focus-style {
-    border-radius: commons.$border-radius;
-  }
-
-  @include utilities-mx.focus-hover-style-custom() {
-    color: stepper.$stepper-link-color;
-
-    .stepper-item[aria-current='step'] > & {
-      color: stepper.$stepper-link-current-color;
-    }
-
-    // step indicator
-    &::before,
-    .stepper-item[aria-current='step'] ~ .stepper-item > &::before {
-      color: stepper.$stepper-indicator-hover-color;
-      background-color: stepper.$stepper-indicator-hover-bg;
-    }
-
-    // check icon
-    &::after {
-      color: stepper.$stepper-indicator-hover-color;
-    }
-  }
-}
-
-// smaller screens
-@include media.max(sm) {
-  .stepper-item:first-child,
-  .stepper-item:last-child {
-    padding-inline: 0;
-  }
-
-  .stepper-item[aria-current='step'] {
-    // using "display: contents" on the stepper-item and stepper-link so that label, indicator and progress bar can be directly placed in the grid
-    display: contents;
-
-    > .stepper-link {
-      display: contents;
-    }
-
-    // progress bar
-    &::before {
-      grid-row: -1;
-      margin-block-start: calc((stepper.$stepper-indicator-size - stepper.$stepper-bar-height) / 2);
-      position: static;
-    }
-
-    &:not(:last-child) > .stepper-link::before {
-      grid-row: -1;
-    }
-
-    &:not(:first-child, :last-child)::after {
-      inset-inline-start: 0;
-    }
-  }
-
-  .stepper-item:not([aria-current='step']) {
-    grid-row: -1;
-    justify-self: stretch;
-
-    // hide completed and future step labels
-    > .stepper-link {
-      -webkit-line-clamp: initial;
-      line-height: 0;
-      text-indent: 100%;
-    }
-  }
-
-  .stepper-link {
-    white-space: nowrap;
-    width: 100%;
-  }
-
-  // step indicator
-  .stepper-link::before {
-    .stepper-item[aria-current='step']:first-child > & {
-      order: -1;
-    }
-
-    .stepper-item[aria-current='step']:not(:first-child, :last-child) > & {
-      margin-inline-start: 0;
-      transform: translateX(-50%);
-    }
-
-    .stepper-item[aria-current='step']:last-child > & {
-      position: absolute;
-      z-index: 2;
-      inset-block-start: 0;
-      inset-inline-end: 0;
-    }
-  }
-}
-
-@include utilities-mx.high-contrast-mode {
-  .stepper-item {
-    &::before,
-    &::after {
-      background-color: CanvasText;
-    }
-
-    &:not(&[aria-current='step'] ~ &, :first-child)::before,
-    &:not([aria-current='step']:not(:last-child), &[aria-current='step'] ~ *)::after {
-      background-color: Highlight;
-    }
-  }
-
-  .stepper-link {
-    &::before {
-      forced-color-adjust: none;
-    }
-
-    .stepper-item[aria-current='step'] > & {
-      &::before {
-        background-color: Canvas;
-        color: CanvasText;
-      }
-    }
-
-    .stepper-item[aria-current='step'] ~ .stepper-item > &,
-    .stepper-item:not([aria-current='step']) > & {
-      &::before {
-        color: Canvas;
-        border-color: Canvas;
-        background-color: CanvasText;
-      }
-    }
-
-    &::after {
-      color: Canvas;
-    }
-  }
-
-  .stepper-link:is(a[href]) {
-    .stepper-item[aria-current='step'] > & {
-      @include utilities-mx.focus-hover-style-custom() {
-        &::before {
-          border-color: Highlight;
-        }
-      }
-    }
-
-    .stepper-item[aria-current='step'] ~ .stepper-item > & {
-      &::before {
-        color: Canvas;
-      }
-
-      @include utilities-mx.focus-hover-style-custom() {
-        &::before {
-          background-color: Highlight;
-          color: HighlightText;
-        }
-      }
-    }
-
-    .stepper-item:not([aria-current='step']) > & {
-      &::before {
-        background-color: LinkText;
-      }
-
-      @include utilities-mx.focus-hover-style-custom() {
-        &::before {
-          background-color: Highlight;
-        }
-
-        &::after {
-          color: HighlightText;
-        }
-      }
-    }
-  }
-}
diff --git a/packages/styles/src/variables/components/_stepper.scss b/packages/styles/src/variables/components/_stepper.scss
deleted file mode 100644
index 844a4ff937..0000000000
--- a/packages/styles/src/variables/components/_stepper.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-@use './../type';
-@use './../color';
-@use './../animation';
-
-@use '../../tokens/utilities';
-@use '../../functions/tokens';
-
-tokens.$default-map: utilities.$post-spacing;
-
-$stepper-bar-height: tokens.get('utility-gap-4');
-$stepper-bar-color: color.$gray-40;
-$stepper-bar-fill-color: color.$yellow;
-
-$stepper-indicator-size: tokens.get('utility-gap-40');
-$stepper-indicator-border-width: tokens.get('utility-gap-4');
-$stepper-indicator-border-color: rgb(var(--post-bg-rgb, 255 255 255));
-$stepper-indicator-font-weight: type.$font-weight-bold;
-$stepper-indicator-bg: color.$yellow;
-$stepper-indicator-color: color.$black;
-$stepper-indicator-check-icon-size: tokens.get('utility-gap-24');
-$stepper-indicator-transition:
-  color animation.$transition-base-timing,
-  background-color animation.$transition-base-timing;
-
-$stepper-indicator-hover-color: color.$white;
-$stepper-indicator-hover-bg: color.$black;
-
-$stepper-indicator-future-bg: color.$gray-60;
-$stepper-indicator-future-color: color.$white;
-
-$stepper-link-line-height: type.$line-height-sm;
-$stepper-link-gap: tokens.get('utility-gap-8');
-$stepper-link-spacing: tokens.get('utility-gap-16');
-$stepper-link-color: color.$gray-60;
-
-$stepper-link-current-color: color.$gray-80;
-$stepper-link-current-font-weight: type.$font-weight-bold;