From 0a184078f1e1f9c5f4fbc9e20e734896ff35f5f7 Mon Sep 17 00:00:00 2001
From: bharatpatel <bharat.patel@thoughtworks.com>
Date: Mon, 9 Dec 2024 17:50:39 +0530
Subject: [PATCH 01/14] feat(Breadcrumb): [BLA-1021] make padding configurable

---
 packages/core-components/src/components.d.ts     |  8 ++++++++
 .../components/breadcrumb/breadcrumb.docs.mdx    |  8 ++++++++
 .../src/components/breadcrumb/breadcrumb.scss    |  5 +++--
 .../components/breadcrumb/breadcrumb.stories.tsx | 15 +++++++++------
 .../src/components/breadcrumb/breadcrumb.tsx     |  9 ++++++++-
 .../src/docs/config/components-args.json         | 16 ++++++++++++++--
 6 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/packages/core-components/src/components.d.ts b/packages/core-components/src/components.d.ts
index d042febb..bd802f92 100644
--- a/packages/core-components/src/components.d.ts
+++ b/packages/core-components/src/components.d.ts
@@ -77,6 +77,10 @@ export namespace Components {
         "noPadding": boolean;
     }
     interface B2bBreadcrumb {
+        /**
+          * Vertical padding for the breadcrumb component
+         */
+        "paddingVertical": number;
     }
     interface B2bBreadcrumbItem {
         /**
@@ -2323,6 +2327,10 @@ declare namespace LocalJSX {
           * Emits the value of the currently selected item whenever an item is selected.
          */
         "onB2b-selected"?: (event: B2bBreadcrumbCustomEvent<BreadCrumbChangeEventDetail>) => void;
+        /**
+          * Vertical padding for the breadcrumb component
+         */
+        "paddingVertical"?: number;
     }
     interface B2bBreadcrumbItem {
         /**
diff --git a/packages/core-components/src/components/breadcrumb/breadcrumb.docs.mdx b/packages/core-components/src/components/breadcrumb/breadcrumb.docs.mdx
index 6b352c95..88b652fc 100644
--- a/packages/core-components/src/components/breadcrumb/breadcrumb.docs.mdx
+++ b/packages/core-components/src/components/breadcrumb/breadcrumb.docs.mdx
@@ -33,6 +33,14 @@ The link provided will open in the same page, similar to `target="self"`.
 Whether the item is currently active. This state must be controlled by consumers. When an item is active, it cannot be hovered and no selection
 event is emitted in order to prevent navigating in place.
 
+### paddingVertical
+
+The `paddingVertical` property allows you to adjust the vertical padding (top and bottom) of the `Breadcrumb` component. This property accepts pixel values as a number.
+
+| Property          | Type     | Default | Description                                            |
+| ----------------- | -------- | ------- | ------------------------------------------------------ |
+| `paddingVertical` | `number` | `0`     | Sets the vertical padding of the breadcrumb component. |
+
 ## Events
 
 ### b2b-selected
diff --git a/packages/core-components/src/components/breadcrumb/breadcrumb.scss b/packages/core-components/src/components/breadcrumb/breadcrumb.scss
index 4231c479..d63dd322 100644
--- a/packages/core-components/src/components/breadcrumb/breadcrumb.scss
+++ b/packages/core-components/src/components/breadcrumb/breadcrumb.scss
@@ -6,7 +6,8 @@
     z-index: 99;
     display: flex;
     flex-flow: row nowrap;
-    padding: 0.75rem 0;
+    padding-top: var(--b2b-breadcrumb-padding-vertical, 0px);
+    padding-bottom: var(--b2b-breadcrumb-padding-vertical, 0px);
     height: var(--b2b-size-90);
     margin-bottom: 1.125rem;
     border-bottom: var(--b2b-size-border-width-50) solid
@@ -16,7 +17,7 @@
       font-size: var(--b2b-size-copy-125);
       line-height: var(--b2b-size-copy-line-height-125);
       display: inline-flex;
-      color: var(--b2b-color-grey-400);
+      color: var(--b2b-color-copy-secondary);
       cursor: pointer;
 
       & a {
diff --git a/packages/core-components/src/components/breadcrumb/breadcrumb.stories.tsx b/packages/core-components/src/components/breadcrumb/breadcrumb.stories.tsx
index e59e6d69..46154e87 100644
--- a/packages/core-components/src/components/breadcrumb/breadcrumb.stories.tsx
+++ b/packages/core-components/src/components/breadcrumb/breadcrumb.stories.tsx
@@ -2,17 +2,20 @@ import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit-html';
 import { getArgTypes } from '../../docs/config/utils';
 
-const Template: Story = ({ href, active }) => {
-  return html` <b2b-breadcrumb>
-    <b2b-breadcrumb-item href="${href}">Start</b2b-breadcrumb-item>
-    <b2b-breadcrumb-item>Weiter</b2b-breadcrumb-item>
-    <b2b-breadcrumb-item active="${active}">Ende</b2b-breadcrumb-item>
-  </b2b-breadcrumb>`;
+const Template: Story = ({ href, active, paddingVertical }) => {
+  return html`
+    <b2b-breadcrumb padding-vertical="${paddingVertical}">
+      <b2b-breadcrumb-item href="${href}">Start</b2b-breadcrumb-item>
+      <b2b-breadcrumb-item>Weiter</b2b-breadcrumb-item>
+      <b2b-breadcrumb-item active="${active}">Ende</b2b-breadcrumb-item>
+    </b2b-breadcrumb>
+  `;
 };
 
 const defaultArgs = {
   href: 'https://www.otto.de',
   active: true,
+  paddingVertical: 0, // Default padding in px
 };
 
 export const story010Default = Template.bind({});
diff --git a/packages/core-components/src/components/breadcrumb/breadcrumb.tsx b/packages/core-components/src/components/breadcrumb/breadcrumb.tsx
index 4f6971d5..b60826da 100644
--- a/packages/core-components/src/components/breadcrumb/breadcrumb.tsx
+++ b/packages/core-components/src/components/breadcrumb/breadcrumb.tsx
@@ -2,6 +2,7 @@ import {
   Component,
   Host,
   h,
+  Prop,
   Event,
   EventEmitter,
   Element,
@@ -17,6 +18,9 @@ import { BreadCrumbChangeEventDetail } from '../../utils/interfaces/interaction.
 export class B2bBreadCrumbComponent {
   @Element() host: HTMLB2bBreadcrumbElement;
 
+  /** Vertical padding for the breadcrumb component */
+  @Prop() paddingVertical: number = 0; // Default value is 0px
+
   /** Emits the value of the currently selected item whenever an item is selected. */
   @Event({ eventName: 'b2b-selected' })
   b2bSelected: EventEmitter<BreadCrumbChangeEventDetail>;
@@ -40,7 +44,10 @@ export class B2bBreadCrumbComponent {
 
   render() {
     return (
-      <Host>
+      <Host
+        style={{
+          '--b2b-breadcrumb-padding-vertical': `${this.paddingVertical}px`,
+        }}>
         <div class="b2b-breadcrumb-nav">
           <slot></slot>
         </div>
diff --git a/packages/core-components/src/docs/config/components-args.json b/packages/core-components/src/docs/config/components-args.json
index f6ff1594..f733dfd0 100644
--- a/packages/core-components/src/docs/config/components-args.json
+++ b/packages/core-components/src/docs/config/components-args.json
@@ -171,7 +171,19 @@
       "description": "Whether the box should have a padding. Per default, padding is enabled"
     }
   },
-  "b2b-breadcrumb": {},
+  "b2b-breadcrumb": {
+    "paddingVertical": {
+      "table": {
+        "type": {
+          "summary": "number"
+        },
+        "defaultValue": {
+          "summary": "0"
+        }
+      },
+      "description": "Vertical padding for the breadcrumb component"
+    }
+  },
   "b2b-breadcrumb-item": {
     "active": {
       "control": {
@@ -4162,4 +4174,4 @@
       "description": "Use when wizard has property custom true. The step number"
     }
   }
-}
\ No newline at end of file
+}

From 47d4a3a9155b4bed7ba061a4676241c586b79185 Mon Sep 17 00:00:00 2001
From: bharatpatel <bharat.patel@thoughtworks.com>
Date: Mon, 9 Dec 2024 17:54:05 +0530
Subject: [PATCH 02/14] test(Breadcrumb): [BLA-1021] Run visual regression test

---
 .github/workflows/on-push.yml | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/.github/workflows/on-push.yml b/.github/workflows/on-push.yml
index d30b2cb2..c53502f4 100644
--- a/.github/workflows/on-push.yml
+++ b/.github/workflows/on-push.yml
@@ -2,7 +2,7 @@ name: On Push
 on:
   push:
     branches:
-      - main
+      - BLA-1021
       - beta
 
 jobs:
@@ -27,13 +27,13 @@ jobs:
     with:
       node_version: 18
 
-  deploy_docker_image:
-    name: Deploy Docker Image
-    needs: [ validations ]
-    if: ${{ !(contains(github.event.head_commit.message, 'chore') || contains(github.event.head_commit.message, 'ci')) }}
-    uses: ./.github/workflows/docker-image.yml
-    with:
-      node_version: 18
-    secrets:
-      DOCKERHUB_USERNAME: ${{ secrets.DOCKER_USERNAME }}
-      DOCKERHUB_TOKEN: ${{ secrets.DOCKER_PASSWORD }}
+#  deploy_docker_image:
+#    name: Deploy Docker Image
+#    needs: [ validations ]
+#    if: ${{ !(contains(github.event.head_commit.message, 'chore') || contains(github.event.head_commit.message, 'ci')) }}
+#    uses: ./.github/workflows/docker-image.yml
+#    with:
+#      node_version: 18
+#    secrets:
+#      DOCKERHUB_USERNAME: ${{ secrets.DOCKER_USERNAME }}
+#      DOCKERHUB_TOKEN: ${{ secrets.DOCKER_PASSWORD }}

From b272c9873781c0ed2741005383d69ec9ffe4b0f9 Mon Sep 17 00:00:00 2001
From: vishwapriya <vishprij@thoughtworks.com>
Date: Tue, 10 Dec 2024 13:48:23 +0530
Subject: [PATCH 03/14] test(Breadcrumb): [BLA-1021] Update snapshot failure

---
 ...eraction-breadcrumb--story-010-default.png | Bin 6678 -> 6678 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)

diff --git a/packages/core-components/__snapshots__/components-interaction-breadcrumb--story-010-default.png b/packages/core-components/__snapshots__/components-interaction-breadcrumb--story-010-default.png
index 8c3f66fda1e8805c1ace684824c6bfdbc3ef21d8..231acadc7b7399ccb62fb73c28a0b93b6348ddd9 100644
GIT binary patch
delta 42
xcmbPcGR<Uz4&&w$Mp4eq7rFHKC+AB}7P*$IQd;n|@)`pWc)I$ztaD0e0suc-4z~aR

delta 52
zcmbPcGR<Uz4&%fRHk%a~6*(vW=X3&Mw#|-Qdi>&t{xc>gsg$ny()XMJ2s~Z=T-G@y
GGywnwN)sdi


From 9baefb39f643544f00a78502791df0a1f764a2fc Mon Sep 17 00:00:00 2001
From: bharatpatel <bharat.patel@thoughtworks.com>
Date: Tue, 10 Dec 2024 14:37:10 +0530
Subject: [PATCH 04/14] Revert "test(Breadcrumb): [BLA-1021] Run visual
 regression test"

This reverts commit 47d4a3a9155b4bed7ba061a4676241c586b79185.
---
 .github/workflows/on-push.yml | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/.github/workflows/on-push.yml b/.github/workflows/on-push.yml
index c53502f4..d30b2cb2 100644
--- a/.github/workflows/on-push.yml
+++ b/.github/workflows/on-push.yml
@@ -2,7 +2,7 @@ name: On Push
 on:
   push:
     branches:
-      - BLA-1021
+      - main
       - beta
 
 jobs:
@@ -27,13 +27,13 @@ jobs:
     with:
       node_version: 18
 
-#  deploy_docker_image:
-#    name: Deploy Docker Image
-#    needs: [ validations ]
-#    if: ${{ !(contains(github.event.head_commit.message, 'chore') || contains(github.event.head_commit.message, 'ci')) }}
-#    uses: ./.github/workflows/docker-image.yml
-#    with:
-#      node_version: 18
-#    secrets:
-#      DOCKERHUB_USERNAME: ${{ secrets.DOCKER_USERNAME }}
-#      DOCKERHUB_TOKEN: ${{ secrets.DOCKER_PASSWORD }}
+  deploy_docker_image:
+    name: Deploy Docker Image
+    needs: [ validations ]
+    if: ${{ !(contains(github.event.head_commit.message, 'chore') || contains(github.event.head_commit.message, 'ci')) }}
+    uses: ./.github/workflows/docker-image.yml
+    with:
+      node_version: 18
+    secrets:
+      DOCKERHUB_USERNAME: ${{ secrets.DOCKER_USERNAME }}
+      DOCKERHUB_TOKEN: ${{ secrets.DOCKER_PASSWORD }}

From 334ddfef4097074dc3526c5457d754320243dc6a Mon Sep 17 00:00:00 2001
From: bharatpatel <bharat.patel@thoughtworks.com>
Date: Tue, 10 Dec 2024 15:15:37 +0530
Subject: [PATCH 05/14] test(Breadcrumb): [BLA-1021] Add story for padding

---
 .../src/components/breadcrumb/breadcrumb.stories.tsx             | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/core-components/src/components/breadcrumb/breadcrumb.stories.tsx b/packages/core-components/src/components/breadcrumb/breadcrumb.stories.tsx
index 46154e87..c11d309b 100644
--- a/packages/core-components/src/components/breadcrumb/breadcrumb.stories.tsx
+++ b/packages/core-components/src/components/breadcrumb/breadcrumb.stories.tsx
@@ -8,6 +8,7 @@ const Template: Story = ({ href, active, paddingVertical }) => {
       <b2b-breadcrumb-item href="${href}">Start</b2b-breadcrumb-item>
       <b2b-breadcrumb-item>Weiter</b2b-breadcrumb-item>
       <b2b-breadcrumb-item active="${active}">Ende</b2b-breadcrumb-item>
+      <b2b-breadcrumb-item padding-vertical="0">padding</b2b-breadcrumb-item>
     </b2b-breadcrumb>
   `;
 };

From 5da0f3c92ea2a9b1528d620fd6995e789e9b4ee0 Mon Sep 17 00:00:00 2001
From: bharatpatel <bharat.patel@thoughtworks.com>
Date: Tue, 10 Dec 2024 15:25:56 +0530
Subject: [PATCH 06/14] Revert "test(Breadcrumb): [BLA-1021] Add story for
 padding"

This reverts commit 334ddfef4097074dc3526c5457d754320243dc6a.
---
 .../src/components/breadcrumb/breadcrumb.stories.tsx             | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/core-components/src/components/breadcrumb/breadcrumb.stories.tsx b/packages/core-components/src/components/breadcrumb/breadcrumb.stories.tsx
index c11d309b..46154e87 100644
--- a/packages/core-components/src/components/breadcrumb/breadcrumb.stories.tsx
+++ b/packages/core-components/src/components/breadcrumb/breadcrumb.stories.tsx
@@ -8,7 +8,6 @@ const Template: Story = ({ href, active, paddingVertical }) => {
       <b2b-breadcrumb-item href="${href}">Start</b2b-breadcrumb-item>
       <b2b-breadcrumb-item>Weiter</b2b-breadcrumb-item>
       <b2b-breadcrumb-item active="${active}">Ende</b2b-breadcrumb-item>
-      <b2b-breadcrumb-item padding-vertical="0">padding</b2b-breadcrumb-item>
     </b2b-breadcrumb>
   `;
 };

From 13598435e244559ce405ce1e2ffc1894c1f533f2 Mon Sep 17 00:00:00 2001
From: bharatpatel <bharat.patel@thoughtworks.com>
Date: Tue, 10 Dec 2024 16:52:09 +0530
Subject: [PATCH 07/14] test(Breadcrumb): [BLA-1021] Add story for padding

---
 .../src/components/breadcrumb/breadcrumb.stories.tsx             | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/core-components/src/components/breadcrumb/breadcrumb.stories.tsx b/packages/core-components/src/components/breadcrumb/breadcrumb.stories.tsx
index 46154e87..94dccc8d 100644
--- a/packages/core-components/src/components/breadcrumb/breadcrumb.stories.tsx
+++ b/packages/core-components/src/components/breadcrumb/breadcrumb.stories.tsx
@@ -8,6 +8,7 @@ const Template: Story = ({ href, active, paddingVertical }) => {
       <b2b-breadcrumb-item href="${href}">Start</b2b-breadcrumb-item>
       <b2b-breadcrumb-item>Weiter</b2b-breadcrumb-item>
       <b2b-breadcrumb-item active="${active}">Ende</b2b-breadcrumb-item>
+      <b2b-breadcrumb padding-vertical="0">padding</b2b-breadcrumb>
     </b2b-breadcrumb>
   `;
 };

From 1254f1326942464182dfafd410a2afd1124b96a4 Mon Sep 17 00:00:00 2001
From: bharatpatel <bharat.patel@thoughtworks.com>
Date: Tue, 10 Dec 2024 17:47:09 +0530
Subject: [PATCH 08/14] test(Breadcrumb): [BLA-1021] Add story for padding

---
 .../src/components/breadcrumb/breadcrumb.stories.tsx     | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/core-components/src/components/breadcrumb/breadcrumb.stories.tsx b/packages/core-components/src/components/breadcrumb/breadcrumb.stories.tsx
index 94dccc8d..0f7948f1 100644
--- a/packages/core-components/src/components/breadcrumb/breadcrumb.stories.tsx
+++ b/packages/core-components/src/components/breadcrumb/breadcrumb.stories.tsx
@@ -8,7 +8,6 @@ const Template: Story = ({ href, active, paddingVertical }) => {
       <b2b-breadcrumb-item href="${href}">Start</b2b-breadcrumb-item>
       <b2b-breadcrumb-item>Weiter</b2b-breadcrumb-item>
       <b2b-breadcrumb-item active="${active}">Ende</b2b-breadcrumb-item>
-      <b2b-breadcrumb padding-vertical="0">padding</b2b-breadcrumb>
     </b2b-breadcrumb>
   `;
 };
@@ -23,6 +22,14 @@ export const story010Default = Template.bind({});
 story010Default.args = { ...defaultArgs };
 story010Default.storyName = 'Default Breadcrumb';
 
+//Story: Padding Vertical Example
+export const story020PaddingVertical = Template.bind({});
+story020PaddingVertical.args = {
+  ...defaultArgs,
+  paddingVertical: 20, // Example with custom paddingVertical
+};
+story020PaddingVertical.storyName = 'Breadcrumb with Custom Vertical Padding';
+
 const breadcrumbArgs = getArgTypes('b2b-breadcrumb');
 
 export default {

From 6c01faa5d344bde783da583f50f606da07fef16c Mon Sep 17 00:00:00 2001
From: bharatpatel <bharat.patel@thoughtworks.com>
Date: Tue, 10 Dec 2024 17:56:04 +0530
Subject: [PATCH 09/14] test(Breadcrumb): [BLA-1021] Add story for padding

---
 .../src/components/breadcrumb/breadcrumb.stories.tsx             | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/core-components/src/components/breadcrumb/breadcrumb.stories.tsx b/packages/core-components/src/components/breadcrumb/breadcrumb.stories.tsx
index 0f7948f1..462cd4e4 100644
--- a/packages/core-components/src/components/breadcrumb/breadcrumb.stories.tsx
+++ b/packages/core-components/src/components/breadcrumb/breadcrumb.stories.tsx
@@ -22,7 +22,6 @@ export const story010Default = Template.bind({});
 story010Default.args = { ...defaultArgs };
 story010Default.storyName = 'Default Breadcrumb';
 
-//Story: Padding Vertical Example
 export const story020PaddingVertical = Template.bind({});
 story020PaddingVertical.args = {
   ...defaultArgs,

From d848adc34845ace6a3ecbd9fc2755e4279ff8e66 Mon Sep 17 00:00:00 2001
From: vishwapriya <vishprij@thoughtworks.com>
Date: Wed, 11 Dec 2024 12:19:28 +0530
Subject: [PATCH 10/14] test(Breadcrumb): [BLA-1021] Write new snapshot test

---
 ...on-breadcrumb--story-020-padding-vertical.png | Bin 0 -> 6678 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 packages/core-components/__snapshots__/components-interaction-breadcrumb--story-020-padding-vertical.png

diff --git a/packages/core-components/__snapshots__/components-interaction-breadcrumb--story-020-padding-vertical.png b/packages/core-components/__snapshots__/components-interaction-breadcrumb--story-020-padding-vertical.png
new file mode 100644
index 0000000000000000000000000000000000000000..7b7ef04371870c73f76abe85f53ee8a03c27282f
GIT binary patch
literal 6678
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
X8DIP}{vrIEMFbuVKGOKvxo`gqVFWlK

literal 0
HcmV?d00001


From 8c8dd8cfdd142da790d95938a7e3edd2a3dd77fa Mon Sep 17 00:00:00 2001
From: vishwapriya <vishprij@thoughtworks.com>
Date: Wed, 11 Dec 2024 12:21:56 +0530
Subject: [PATCH 11/14] style(Breadcrumb): [BLA-1021] Change the pixel
 hardcoding

---
 .../core-components/src/components/breadcrumb/breadcrumb.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core-components/src/components/breadcrumb/breadcrumb.scss b/packages/core-components/src/components/breadcrumb/breadcrumb.scss
index d63dd322..3d23a202 100644
--- a/packages/core-components/src/components/breadcrumb/breadcrumb.scss
+++ b/packages/core-components/src/components/breadcrumb/breadcrumb.scss
@@ -6,8 +6,8 @@
     z-index: 99;
     display: flex;
     flex-flow: row nowrap;
-    padding-top: var(--b2b-breadcrumb-padding-vertical, 0px);
-    padding-bottom: var(--b2b-breadcrumb-padding-vertical, 0px);
+    padding-top: var(--b2b-breadcrumb-padding-vertical, 0);
+    padding-bottom: var(--b2b-breadcrumb-padding-vertical, 0);
     height: var(--b2b-size-90);
     margin-bottom: 1.125rem;
     border-bottom: var(--b2b-size-border-width-50) solid

From d40b55606fab3e3c9dfd1e86cca65a88cfaad72c Mon Sep 17 00:00:00 2001
From: bharatpatel <bharat.patel@thoughtworks.com>
Date: Thu, 12 Dec 2024 10:55:47 +0530
Subject: [PATCH 12/14] feat(Breadcrumb): [BLA-1021] make padding configurable

---
 packages/core-components/src/components.d.ts  | 16 +++-
 .../components/breadcrumb/breadcrumb.docs.mdx | 11 +--
 .../src/components/breadcrumb/breadcrumb.scss | 57 ++++++------
 .../breadcrumb/breadcrumb.stories.tsx         | 19 ++--
 .../src/components/breadcrumb/breadcrumb.tsx  | 12 ++-
 .../src/docs/config/components-args.json      | 86 +++++++++++++++++--
 6 files changed, 147 insertions(+), 54 deletions(-)

diff --git a/packages/core-components/src/components.d.ts b/packages/core-components/src/components.d.ts
index bd802f92..473701b7 100644
--- a/packages/core-components/src/components.d.ts
+++ b/packages/core-components/src/components.d.ts
@@ -78,9 +78,13 @@ export namespace Components {
     }
     interface B2bBreadcrumb {
         /**
-          * Vertical padding for the breadcrumb component
+          * Padding for the bottom of the breadcrumb component
          */
-        "paddingVertical": number;
+        "paddingBottom": number;
+        /**
+          * Padding for the top of the breadcrumb component
+         */
+        "paddingTop": number;
     }
     interface B2bBreadcrumbItem {
         /**
@@ -2328,9 +2332,13 @@ declare namespace LocalJSX {
          */
         "onB2b-selected"?: (event: B2bBreadcrumbCustomEvent<BreadCrumbChangeEventDetail>) => void;
         /**
-          * Vertical padding for the breadcrumb component
+          * Padding for the bottom of the breadcrumb component
+         */
+        "paddingBottom"?: number;
+        /**
+          * Padding for the top of the breadcrumb component
          */
-        "paddingVertical"?: number;
+        "paddingTop"?: number;
     }
     interface B2bBreadcrumbItem {
         /**
diff --git a/packages/core-components/src/components/breadcrumb/breadcrumb.docs.mdx b/packages/core-components/src/components/breadcrumb/breadcrumb.docs.mdx
index 88b652fc..04ae5db1 100644
--- a/packages/core-components/src/components/breadcrumb/breadcrumb.docs.mdx
+++ b/packages/core-components/src/components/breadcrumb/breadcrumb.docs.mdx
@@ -33,13 +33,14 @@ The link provided will open in the same page, similar to `target="self"`.
 Whether the item is currently active. This state must be controlled by consumers. When an item is active, it cannot be hovered and no selection
 event is emitted in order to prevent navigating in place.
 
-### paddingVertical
+### paddingTop & paddingBottom
 
-The `paddingVertical` property allows you to adjust the vertical padding (top and bottom) of the `Breadcrumb` component. This property accepts pixel values as a number.
+The `paddingTop` and `paddingBottom` properties allow you to adjust the top and bottom padding of the `Breadcrumb` component respectively. These properties accept pixel values as numbers.
 
-| Property          | Type     | Default | Description                                            |
-| ----------------- | -------- | ------- | ------------------------------------------------------ |
-| `paddingVertical` | `number` | `0`     | Sets the vertical padding of the breadcrumb component. |
+| Property        | Type     | Default | Description                                |
+| --------------- | -------- | ------- | ------------------------------------------ |
+| `paddingTop`    | `number` | `0`     | Sets the top padding of the breadcrumb.    |
+| `paddingBottom` | `number` | `0`     | Sets the bottom padding of the breadcrumb. |
 
 ## Events
 
diff --git a/packages/core-components/src/components/breadcrumb/breadcrumb.scss b/packages/core-components/src/components/breadcrumb/breadcrumb.scss
index 3d23a202..37c032c9 100644
--- a/packages/core-components/src/components/breadcrumb/breadcrumb.scss
+++ b/packages/core-components/src/components/breadcrumb/breadcrumb.scss
@@ -2,40 +2,39 @@
 @use '../../global/b2b-styles';
 
 :host {
-  .b2b-breadcrumb-nav {
-    z-index: 99;
-    display: flex;
-    flex-flow: row nowrap;
-    padding-top: var(--b2b-breadcrumb-padding-vertical, 0);
-    padding-bottom: var(--b2b-breadcrumb-padding-vertical, 0);
-    height: var(--b2b-size-90);
-    margin-bottom: 1.125rem;
-    border-bottom: var(--b2b-size-border-width-50) solid
-      var(--b2b-color-grey-200);
+  display: block;
+}
 
-    &__item {
-      font-size: var(--b2b-size-copy-125);
-      line-height: var(--b2b-size-copy-line-height-125);
-      display: inline-flex;
-      color: var(--b2b-color-copy-secondary);
-      cursor: pointer;
+.b2b-breadcrumb-nav {
+  z-index: 99;
+  display: flex;
+  flex-flow: row nowrap;
+  height: var(--b2b-size-90);
+  margin-bottom: 1.125rem;
+  border-bottom: var(--b2b-size-border-width-50) solid var(--b2b-color-grey-200);
 
-      & a {
-        color: var(--b2b-color-grey-400);
-        text-decoration: none;
-      }
+  &__item {
+    font-size: var(--b2b-size-copy-125);
+    line-height: var(--b2b-size-copy-line-height-125);
+    display: inline-flex;
+    color: var(--b2b-color-copy-secondary);
+    cursor: pointer;
+
+    & a {
+      color: var(--b2b-color-grey-400);
+      text-decoration: none;
+    }
 
+    &:hover,
+    a:hover {
+      color: var(--b2b-color-red-100);
+    }
+
+    &--active {
       &:hover,
       a:hover {
-        color: var(--b2b-color-red-100);
-      }
-
-      &--active {
-        &:hover,
-        a:hover {
-          cursor: default;
-          color: var(--b2b-color-grey-400);
-        }
+        cursor: default;
+        color: var(--b2b-color-grey-400);
       }
     }
   }
diff --git a/packages/core-components/src/components/breadcrumb/breadcrumb.stories.tsx b/packages/core-components/src/components/breadcrumb/breadcrumb.stories.tsx
index 462cd4e4..b9f7befa 100644
--- a/packages/core-components/src/components/breadcrumb/breadcrumb.stories.tsx
+++ b/packages/core-components/src/components/breadcrumb/breadcrumb.stories.tsx
@@ -2,9 +2,11 @@ import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit-html';
 import { getArgTypes } from '../../docs/config/utils';
 
-const Template: Story = ({ href, active, paddingVertical }) => {
+const Template: Story = ({ href, active, paddingTop, paddingBottom }) => {
   return html`
-    <b2b-breadcrumb padding-vertical="${paddingVertical}">
+    <b2b-breadcrumb
+      padding-top="${paddingTop}"
+      padding-bottom="${paddingBottom}">
       <b2b-breadcrumb-item href="${href}">Start</b2b-breadcrumb-item>
       <b2b-breadcrumb-item>Weiter</b2b-breadcrumb-item>
       <b2b-breadcrumb-item active="${active}">Ende</b2b-breadcrumb-item>
@@ -15,19 +17,22 @@ const Template: Story = ({ href, active, paddingVertical }) => {
 const defaultArgs = {
   href: 'https://www.otto.de',
   active: true,
-  paddingVertical: 0, // Default padding in px
+  paddingTop: 0, // Default padding top in px
+  paddingBottom: 0, // Default padding bottom in px
 };
 
 export const story010Default = Template.bind({});
 story010Default.args = { ...defaultArgs };
 story010Default.storyName = 'Default Breadcrumb';
 
-export const story020PaddingVertical = Template.bind({});
-story020PaddingVertical.args = {
+export const story020PaddingTopBottom = Template.bind({});
+story020PaddingTopBottom.args = {
   ...defaultArgs,
-  paddingVertical: 20, // Example with custom paddingVertical
+  paddingTop: 10, // Example with custom padding top
+  paddingBottom: 15, // Example with custom padding bottom
 };
-story020PaddingVertical.storyName = 'Breadcrumb with Custom Vertical Padding';
+story020PaddingTopBottom.storyName =
+  'Breadcrumb with Custom Top & Bottom Padding';
 
 const breadcrumbArgs = getArgTypes('b2b-breadcrumb');
 
diff --git a/packages/core-components/src/components/breadcrumb/breadcrumb.tsx b/packages/core-components/src/components/breadcrumb/breadcrumb.tsx
index b60826da..e4cf1c57 100644
--- a/packages/core-components/src/components/breadcrumb/breadcrumb.tsx
+++ b/packages/core-components/src/components/breadcrumb/breadcrumb.tsx
@@ -18,8 +18,11 @@ import { BreadCrumbChangeEventDetail } from '../../utils/interfaces/interaction.
 export class B2bBreadCrumbComponent {
   @Element() host: HTMLB2bBreadcrumbElement;
 
-  /** Vertical padding for the breadcrumb component */
-  @Prop() paddingVertical: number = 0; // Default value is 0px
+  /** Padding for the top of the breadcrumb component */
+  @Prop() paddingTop: number = 0; // Default value is 0px
+
+  /** Padding for the bottom of the breadcrumb component */
+  @Prop() paddingBottom: number = 0; // Default value is 0px
 
   /** Emits the value of the currently selected item whenever an item is selected. */
   @Event({ eventName: 'b2b-selected' })
@@ -38,7 +41,7 @@ export class B2bBreadCrumbComponent {
 
   private updateActiveItem = (newItem: HTMLB2bBreadcrumbItemElement) => {
     this.getBreadcrumbItems()
-      .filter(x => x.value != newItem.value)
+      .filter(x => x.value !== newItem.value)
       .forEach(x => (x.active = false));
   };
 
@@ -46,7 +49,8 @@ export class B2bBreadCrumbComponent {
     return (
       <Host
         style={{
-          '--b2b-breadcrumb-padding-vertical': `${this.paddingVertical}px`,
+          paddingTop: `${this.paddingTop}px`,
+          paddingBottom: `${this.paddingBottom}px`,
         }}>
         <div class="b2b-breadcrumb-nav">
           <slot></slot>
diff --git a/packages/core-components/src/docs/config/components-args.json b/packages/core-components/src/docs/config/components-args.json
index f733dfd0..e6b1f1e1 100644
--- a/packages/core-components/src/docs/config/components-args.json
+++ b/packages/core-components/src/docs/config/components-args.json
@@ -172,7 +172,7 @@
     }
   },
   "b2b-breadcrumb": {
-    "paddingVertical": {
+    "paddingBottom": {
       "table": {
         "type": {
           "summary": "number"
@@ -181,7 +181,18 @@
           "summary": "0"
         }
       },
-      "description": "Vertical padding for the breadcrumb component"
+      "description": "Padding for the bottom of the breadcrumb component"
+    },
+    "paddingTop": {
+      "table": {
+        "type": {
+          "summary": "number"
+        },
+        "defaultValue": {
+          "summary": "0"
+        }
+      },
+      "description": "Padding for the top of the breadcrumb component"
     }
   },
   "b2b-breadcrumb-item": {
@@ -2571,9 +2582,16 @@
       "description": "The maximum amount of chips visible. Adjust this depending on available size of the dropdown."
     },
     "optionsList": {
+      "options": [
+        null,
+        null
+      ],
+      "control": {
+        "type": "radio"
+      },
       "table": {
         "type": {
-          "summary": "string[]"
+          "summary": "string"
         },
         "defaultValue": {
           "summary": "[]"
@@ -2609,9 +2627,16 @@
       "description": "The string displayed as the select all label."
     },
     "selectedValues": {
+      "options": [
+        null,
+        null
+      ],
+      "control": {
+        "type": "radio"
+      },
       "table": {
         "type": {
-          "summary": "string[]"
+          "summary": "string"
         },
         "defaultValue": {
           "summary": "[]"
@@ -2711,6 +2736,39 @@
       },
       "description": "The alignment of the text."
     },
+    "display": {
+      "options": [
+        "block",
+        "inline",
+        "inline-block"
+      ],
+      "control": {
+        "type": "radio"
+      },
+      "table": {
+        "type": {
+          "summary": "string"
+        },
+        "defaultValue": {
+          "summary": "'block'"
+        }
+      },
+      "description": "The positioning of the paragraph in the page flow. Defaults to native block behavior."
+    },
+    "margin": {
+      "control": {
+        "type": "boolean"
+      },
+      "table": {
+        "type": {
+          "summary": "boolean"
+        },
+        "defaultValue": {
+          "summary": "true"
+        }
+      },
+      "description": "Whether or not the paragraph has a bottom margin. Defaults to true."
+    },
     "size": {
       "options": [
         "100",
@@ -2729,6 +2787,24 @@
       },
       "description": "The size of the text."
     },
+    "variant": {
+      "options": [
+        "black-100",
+        "grey-400"
+      ],
+      "control": {
+        "type": "radio"
+      },
+      "table": {
+        "type": {
+          "summary": "string"
+        },
+        "defaultValue": {
+          "summary": "'black-100'"
+        }
+      },
+      "description": "The color of the paragraph. Defaults to black."
+    },
     "weight": {
       "options": [
         "bold",
@@ -4174,4 +4250,4 @@
       "description": "Use when wizard has property custom true. The step number"
     }
   }
-}
+}
\ No newline at end of file

From 5c5681bacdd39144a027d316d6fd7c26481429a4 Mon Sep 17 00:00:00 2001
From: vishwapriya <vishprij@thoughtworks.com>
Date: Thu, 12 Dec 2024 11:47:33 +0530
Subject: [PATCH 13/14] test(Breadcrumb): [BLA-1021] Add snapshot test for new
 padding top and bottom

---
 ...-breadcrumb--story-020-padding-top-bottom.png | Bin 0 -> 6678 bytes
 .../components/breadcrumb/breadcrumb.stories.tsx |   3 +--
 2 files changed, 1 insertion(+), 2 deletions(-)
 create mode 100644 packages/core-components/__snapshots__/components-interaction-breadcrumb--story-020-padding-top-bottom.png

diff --git a/packages/core-components/__snapshots__/components-interaction-breadcrumb--story-020-padding-top-bottom.png b/packages/core-components/__snapshots__/components-interaction-breadcrumb--story-020-padding-top-bottom.png
new file mode 100644
index 0000000000000000000000000000000000000000..9ce2e9d170680917f5369cbfbc72f61399236106
GIT binary patch
literal 6678
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
aMbfulXWicXZuuV|NXWsk1C2kNx%OX95HiF7

literal 0
HcmV?d00001

diff --git a/packages/core-components/src/components/breadcrumb/breadcrumb.stories.tsx b/packages/core-components/src/components/breadcrumb/breadcrumb.stories.tsx
index b9f7befa..00562253 100644
--- a/packages/core-components/src/components/breadcrumb/breadcrumb.stories.tsx
+++ b/packages/core-components/src/components/breadcrumb/breadcrumb.stories.tsx
@@ -31,8 +31,7 @@ story020PaddingTopBottom.args = {
   paddingTop: 10, // Example with custom padding top
   paddingBottom: 15, // Example with custom padding bottom
 };
-story020PaddingTopBottom.storyName =
-  'Breadcrumb with Custom Top & Bottom Padding';
+story020PaddingTopBottom.storyName = 'Custom Padding';
 
 const breadcrumbArgs = getArgTypes('b2b-breadcrumb');
 

From 62dd3705f1a96b9e696d3ae735003d82a96fede1 Mon Sep 17 00:00:00 2001
From: bharatpatel <bharat.patel@thoughtworks.com>
Date: Thu, 12 Dec 2024 15:18:05 +0530
Subject: [PATCH 14/14] feat(Breadcrumb): [BLA-1021] Remove the margin bottom

---
 .../core-components/src/components/breadcrumb/breadcrumb.scss    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/core-components/src/components/breadcrumb/breadcrumb.scss b/packages/core-components/src/components/breadcrumb/breadcrumb.scss
index 37c032c9..341cb003 100644
--- a/packages/core-components/src/components/breadcrumb/breadcrumb.scss
+++ b/packages/core-components/src/components/breadcrumb/breadcrumb.scss
@@ -10,7 +10,6 @@
   display: flex;
   flex-flow: row nowrap;
   height: var(--b2b-size-90);
-  margin-bottom: 1.125rem;
   border-bottom: var(--b2b-size-border-width-50) solid var(--b2b-color-grey-200);
 
   &__item {