@ebrains/components 3.0.0 → 3.2.0

package/dist/collection/components/eds-steps/eds-steps.css

@@ -372,30 +372,54 @@ pre {
 
 .horizontal-indicators {
   display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 1rem 0;
+  align-items: flex-start;
+  gap: 0;
+  padding: 0;
+  /* Breathing room above (from the header); fields sit right below the steps. */
+  margin-top: 1.75rem;
+  margin-bottom: 0;
 }
 
+/* Left-aligned layout: every step left-aligns its circle so the FIRST circle
+   hugs the indicators' left edge — the same left edge as the form content below
+   it (see .step-content) — instead of being centred inside a flex cell. */
 .horizontal-step {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: 0.5rem;
+  align-items: flex-start;
+  gap: 0.6rem;
   cursor: pointer;
-  flex: 1;
+  flex: 1 1 0;
+  min-width: 0;
   position: relative;
 }
 
+/* The last step only needs room for its own circle + label; without this it
+   would reserve a full flex cell and leave a large empty gap after the final
+   circle. */
+.horizontal-step:last-child {
+  flex: 0 0 auto;
+}
+
+/* Left-aligned circles → the connector runs from just after this circle to the
+   next circle's left edge (one cell-width away). */
 .horizontal-step:not(:last-child)::after {
   content: '';
   position: absolute;
-  top: 1.25rem;
-  left: 50%;
-  width: 100%;
-  height: 2px;
+  top: 1.375rem; /* vertical centre of the 2.75rem circle */
+  left: calc(2.75rem + 0.4rem); /* just past this circle */
+  width: calc(100% - 2.75rem - 0.8rem); /* up to the next circle */
+  height: 3px;
+  border-radius: 2px;
   background-color: #e0e0e0;
-  z-index: -1;
+  transform: translateY(-50%);
+  z-index: 1;
+}
+
+/* Titles sit left-aligned under their (left-aligned) circle. */
+.horizontal-step > span {
+  text-align: left;
+  align-self: stretch;
 }
 
 .horizontal-step.is-completed:not(:last-child)::after {
@@ -403,8 +427,8 @@ pre {
 }
 
 .step-indicator {
-  width: 2.5rem;
-  height: 2.5rem;
+  width: 2.75rem;
+  height: 2.75rem;
   border-radius: 50%;
   border: 2px solid #e0e0e0;
   display: flex;
@@ -412,6 +436,7 @@ pre {
   justify-content: center;
   background-color: white;
   transition: all 0.3s ease;
+  flex: 0 0 auto;
 }
 
 .horizontal-step.is-active .step-indicator {
@@ -431,14 +456,18 @@ pre {
 }
 
 .step-number {
-  font-weight: 600;
-  font-size: 0.875rem;
+  font-family: var(--font-family-mono, 'IBM Plex Mono', monospace);
+  font-weight: 500;
+  font-size: 0.95rem;
 }
 
 .step-label {
-  font-size: 0.875rem;
-  text-align: center;
+  font-family: var(--font-family-mono, 'IBM Plex Mono', monospace);
+  font-size: 9.5px;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
   font-weight: 500;
+  color: var(--dark-grey, #7a7b7a);
 }
 
 .horizontal-step.is-active .step-label {
@@ -447,17 +476,15 @@ pre {
 
 .step-content {
   padding: 0.5rem 0;
-  /* Align content to start under the first step indicator */
-  margin-left: calc((100% / var(--step-count, 1)) * 0.20 - 1.25rem);
-  margin-right: calc((100% / var(--step-count, 1)) * 0.20 - 1.25rem);
+  /* Flush-left: the form shares the indicators' left edge (the first circle),
+     instead of the old step-count-based magic margin. */
+  margin-left: 0;
+  margin-right: 0;
 }
 
-/* Adjust margins for larger screens (> 700px) */
 @media (min-width: 700px) {
   .step-content {
     padding: 1.5rem 0;
-    margin-left: calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem);
-    margin-right: calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem);
   }
 }
 
@@ -488,12 +515,16 @@ pre {
 /* Brand theme - Horizontal step indicators */
 .theme-brand .step-indicator {
   background-color: var(--grey-light);
+  border-color: transparent; /* flat grey upcoming circle (matches mockup) */
+  color: var(--dark-grey, #7a7b7a);
 }
 
 .theme-brand .horizontal-step.is-active .step-indicator {
   border-color: var(--brand-green);
   background-color: var(--brand-green);
   color: var(--brand-black);
+  /* Soft green ring around the current step (matches mockup). */
+  box-shadow: 0 0 0 4px rgba(0, 255, 157, 0.2);
 }
 
 .theme-brand .horizontal-step.is-completed .step-indicator {
@@ -506,9 +537,9 @@ pre {
   background-color: var(--brand-green);
 }
 
-.theme-brand .horizontal-step.is-active .step-label {
+.theme-brand .horizontal-step.is-active .step-label,
+.theme-brand .horizontal-step.is-completed .step-label {
   color: var(--brand-black);
-  font-weight: 600;
 }
 
 .theme-brand .step-number {

package/dist/collection/components/eds-steps/eds-steps.js

@@ -2,6 +2,9 @@ import { h } from "@stencil/core";
 import { parseData } from "../../utils/sharedUtils";
 export class EdsSteps {
     constructor() {
+        this.onResize = () => {
+            this.isMobile = typeof window !== 'undefined' && window.innerWidth < 750;
+        };
         this.handleTitleClick = (index) => {
             // In linear mode, do NOT collapse; only navigate if allowed.
             if (this.type === 'linear') {
@@ -29,11 +32,11 @@ export class EdsSteps {
         };
         this.handleNext = () => {
             const lastIndex = this.parsedSteps.length - 1;
-            // On last step
+            // On last step: stay put and just emit finished. Collapsing (activeStep = -1)
+            // left the form as an empty shell when the host rejected the submit (e.g.
+            // single-submission already used); the success path navigates away.
             if (this.activeStep >= lastIndex) {
                 this.finished.emit();
-                this.activeStep = -1; // collapse the content
-                this.step.emit(this.activeStep); // notify change (-1 sentinel)
                 return;
             }
             const target = this.activeStep + 1;
@@ -77,6 +80,7 @@ export class EdsSteps {
         this.headingLevel = 'h4';
         this.collapsibleTitles = false;
         this.activeStep = 0;
+        this.isMobile = false;
     }
     handleDisableNextChange(newValue) {
         if (typeof newValue === 'string' && newValue.trim().startsWith('[')) {
@@ -88,8 +92,23 @@ export class EdsSteps {
             }
         }
     }
+    /** Nav button size: comfortable on desktop, compact on mobile. */
+    get navBtnSize() {
+        return this.isMobile ? 'small' : 'large';
+    }
     componentWillLoad() {
         this.handleDisableNextChange(this.disableNext);
+        this.onResize();
+    }
+    connectedCallback() {
+        if (typeof window !== 'undefined') {
+            window.addEventListener('resize', this.onResize);
+        }
+    }
+    disconnectedCallback() {
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('resize', this.onResize);
+        }
     }
     componentDidLoad() {
         if (this.type === 'linear') {
@@ -189,7 +208,7 @@ export class EdsSteps {
                 this.handleTitleClick(index);
             }
         };
-        return (h("div", { class: `horizontal-step ${isActive ? 'is-active' : ''} ${isCompleted ? 'is-completed' : ''}`, onClick: () => !forwardBlocked && this.handleTitleClick(index), onKeyDown: onKey, role: "button", tabindex: forwardBlocked ? -1 : 0, "aria-label": `Step ${index + 1}: ${step.title}`, "aria-current": isActive ? 'step' : undefined, "aria-disabled": forwardBlocked ? 'true' : 'false' }, h("div", { class: "step-indicator" }, h("span", { class: "step-number" }, index + 1)), h("span", { class: `text-center text-default f-ui-03 ${forwardBlocked ? 'opacity-50' : ''}` }, step.title)));
+        return (h("div", { class: `horizontal-step ${isActive ? 'is-active' : ''} ${isCompleted ? 'is-completed' : ''}`, onClick: () => !forwardBlocked && this.handleTitleClick(index), onKeyDown: onKey, role: "button", tabindex: forwardBlocked ? -1 : 0, "aria-label": `Step ${index + 1}: ${step.title}`, "aria-current": isActive ? 'step' : undefined, "aria-disabled": forwardBlocked ? 'true' : 'false' }, h("div", { class: "step-indicator" }, h("span", { class: "step-number" }, index + 1)), h("span", { class: `step-label ${forwardBlocked ? 'opacity-50' : ''}` }, step.title)));
     }
     render() {
         const steps = this.parsedSteps;
@@ -202,7 +221,7 @@ export class EdsSteps {
                     return null;
                 }
                 const marginClass = this.orientation === 'horizontal' ? 'mt-64' : 'mt-32';
-                return (h("div", { class: "step-content", key: index, id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: "f-body-02 text-lighter", innerHTML: step.content })), h("div", { class: `flex items-center justify-between ${marginClass}` }, h("eds-button", { label: this.backLabel, intent: "secondary", icon: "chevron-left", iconPos: "left", onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small" }), (!isLast || this.showFinish) && (h("eds-button", { label: isLast ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: "small", class: index > 0 ? 'ml-8' : null }))), h("slot", { name: `actions-${index}` })));
+                return (h("div", { class: "step-content", key: index, id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: "f-body-02 text-lighter", innerHTML: step.content })), h("div", { class: `flex items-center justify-between ${marginClass}` }, h("eds-button", { label: this.backLabel, intent: "primary", icon: "chevron-left", iconPos: "left", onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: this.navBtnSize, iconSmall: this.isMobile }), (!isLast || this.showFinish) && (h("eds-button", { label: isLast ? this.finishLabel : this.nextLabel, intent: isLast ? 'brand' : 'primary', icon: "chevron-right", onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: this.navBtnSize, iconSmall: this.isMobile, class: index > 0 ? 'ml-8' : null }))), h("slot", { name: `actions-${index}` })));
             })));
         }
         // Vertical Linear
@@ -210,7 +229,7 @@ export class EdsSteps {
             return (h("div", { class: `steps ${themeClass}` }, steps.map((step, index) => {
                 const isLast = index === steps.length - 1;
                 const marginClass = this.orientation === 'horizontal' ? 'mt-64' : 'mt-32';
-                return (h("div", { class: "step mb-16", key: index }, this.renderHeading(step.title, index), this.activeStep === index && (h("div", { class: "content grid gap-y-16", id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: "my-16 f-body-02 text-lighter", innerHTML: step.content })), h("div", { class: `flex items-center justify-between ${marginClass}` }, h("eds-button", { label: this.backLabel, intent: "secondary", icon: "chevron-left", iconPos: "left", onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small" }), (!isLast || this.showFinish) && (h("eds-button", { label: isLast ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: "small", class: index > 0 ? 'ml-8' : null }))), h("slot", { name: `actions-${index}` })))));
+                return (h("div", { class: "step mb-16", key: index }, this.renderHeading(step.title, index), this.activeStep === index && (h("div", { class: "content grid gap-y-16", id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: "my-16 f-body-02 text-lighter", innerHTML: step.content })), h("div", { class: `flex items-center justify-between ${marginClass}` }, h("eds-button", { label: this.backLabel, intent: "primary", icon: "chevron-left", iconPos: "left", onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: this.navBtnSize, iconSmall: this.isMobile }), (!isLast || this.showFinish) && (h("eds-button", { label: isLast ? this.finishLabel : this.nextLabel, intent: isLast ? 'brand' : 'primary', icon: "chevron-right", onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: this.navBtnSize, iconSmall: this.isMobile, class: index > 0 ? 'ml-8' : null }))), h("slot", { name: `actions-${index}` })))));
             })));
         }
         // Static
@@ -441,7 +460,8 @@ export class EdsSteps {
     }
     static get states() {
         return {
-            "activeStep": {}
+            "activeStep": {},
+            "isMobile": {}
         };
     }
     static get events() {

package/dist/collection/components/eds-steps-v2/eds-steps-v2.css

@@ -36,6 +36,8 @@ pre {
   content: counter(step);
   position: absolute;
   left: -41px;
+  top: 50%;
+  transform: translateY(-50%);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -61,12 +63,34 @@ pre {
   position: relative;
 }
 
+/* Step content wrapper. A little more top breathing room on small screens
+   (where the stepper sits directly above the fields), tighter on desktop. */
+.steps-body {
+  margin-top: 16px;
+}
+
+/* On small screens the vertical step titles read large next to the field
+   labels — drop them to a compact UI size. */
+@media (max-width: 749px) {
+  .steps h3,
+  .steps h4,
+  .steps h5 {
+    font-size: var(--f-ui-01-fontSize);
+    line-height: var(--f-ui-01-lineHeight);
+  }
+  .steps-body {
+    margin-top: 32px;
+  }
+}
+
 .steps h4::before,
 .steps h5::before {
   content: counter(step);
   position: absolute;
   left: -40px;
-  top: -2px;
+  /* Vertically centre the circle on the title line, regardless of font size. */
+  top: 50%;
+  transform: translateY(-50%);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -193,6 +217,14 @@ pre {
   margin-top: 4rem;
 }
 
+.mb-16 {
+  margin-bottom: 1rem;
+}
+
+.mb-32 {
+  margin-bottom: 2rem;
+}
+
 .my-16 {
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -377,9 +409,12 @@ pre {
 
 .horizontal-indicators {
   display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 1rem 0;
+  align-items: flex-start;
+  gap: 0;
+  padding: 0;
+  /* Breathing room above (from the header); fields sit right below the steps. */
+  margin-top: 1.75rem;
+  margin-bottom: 0;
 }
 
 /* Helper class for aligning content with first step indicator */
@@ -388,34 +423,55 @@ pre {
   padding-right: 0;
 }
 
+/* Left-aligned layout: every step left-aligns its circle so the FIRST circle
+   hugs the indicators' left edge — the same left edge as the form content below
+   it (see .step-content) — instead of being centred inside a flex cell. */
 .horizontal-step {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: 0.5rem;
+  align-items: flex-start;
+  gap: 0.6rem;
   cursor: pointer;
-  flex: 1;
+  flex: 1 1 0;
+  min-width: 0;
   position: relative;
 }
 
+/* The last step only needs room for its own circle + label; without this it
+   would reserve a full flex cell and leave a large empty gap after the final
+   circle. */
+.horizontal-step:last-child {
+  flex: 0 0 auto;
+}
+
+/* Left-aligned circles → the connector runs from just after this circle to the
+   next circle's left edge (one cell-width away). */
 .horizontal-step:not(:last-child)::after {
   content: '';
   position: absolute;
-  top: 1.25rem;
-  left: calc(50% + 2rem); /* Start after the circle */
-  width: calc(100% - 3rem); /* Width to reach next step with gap */
-  height: 2px;
+  top: 1.375rem; /* vertical centre of the 2.75rem circle */
+  left: calc(2.75rem + 0.4rem); /* just past this circle */
+  width: calc(100% - 2.75rem - 0.8rem); /* up to the next circle */
+  height: 3px;
+  border-radius: 2px;
   background-color: #e0e0e0;
+  transform: translateY(-50%);
   z-index: 1;
 }
 
+/* Titles sit left-aligned under their (left-aligned) circle. */
+.horizontal-step > span {
+  text-align: left;
+  align-self: stretch;
+}
+
 .horizontal-step.is-completed:not(:last-child)::after {
   background-color: var(--brand-green); /* brand green */
 }
 
 .step-indicator {
-  width: 2.5rem;
-  height: 2.5rem;
+  width: 2.75rem;
+  height: 2.75rem;
   border-radius: 50%;
   border: 2px solid #e0e0e0;
   display: flex;
@@ -423,7 +479,8 @@ pre {
   justify-content: center;
   background-color: white;
   transition: all 0.3s ease;
-  z-index:2
+  flex: 0 0 auto;
+  z-index: 2;
 }
 
 .horizontal-step.is-active .step-indicator {
@@ -443,14 +500,18 @@ pre {
 }
 
 .step-number {
-  font-weight: 600;
-  font-size: 0.875rem;
+  font-family: var(--font-family-mono, 'IBM Plex Mono', monospace);
+  font-weight: 500;
+  font-size: 0.95rem;
 }
 
 .step-label {
-  font-size: 0.875rem;
-  text-align: center;
+  font-family: var(--font-family-mono, 'IBM Plex Mono', monospace);
+  font-size: 9.5px;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
   font-weight: 500;
+  color: var(--dark-grey, #7a7b7a);
 }
 
 .horizontal-step.is-active .step-label {
@@ -459,17 +520,15 @@ pre {
 
 .step-content {
   padding: 0.5rem 0;
-  /* Align content to start under the first step indicator */
-  margin-left: calc((100% / var(--step-count, 1)) * 0.20 - 1.25rem);
-  margin-right: calc((100% / var(--step-count, 1)) * 0.20 - 1.25rem);
+  /* Flush-left: the form shares the indicators' left edge (the first circle),
+     instead of the old step-count-based magic margin. */
+  margin-left: 0;
+  margin-right: 0;
 }
 
-/* Adjust margins for larger screens (> 700px) */
 @media (min-width: 700px) {
   .step-content {
     padding: 1.5rem 0;
-    margin-left: calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem);
-    margin-right: calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem);
   }
 }
 
@@ -511,7 +570,9 @@ pre {
 .theme-brand.steps .step-checkmark-icon {
   position: absolute;
   left: -39px;
-  top: 0px;
+  /* Match the centred number circle. */
+  top: 50%;
+  transform: translateY(-50%);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -524,18 +585,22 @@ pre {
   left: -41px;
   width: 32px;
   height: 32px;
-  top: 2px;
+  top: 50%;
 }
 
 /* Brand theme - Horizontal step indicators */
 .theme-brand .step-indicator {
   background-color: var(--grey-light);
+  border-color: transparent; /* flat grey upcoming circle (matches mockup) */
+  color: var(--dark-grey, #7a7b7a);
 }
 
 .theme-brand .horizontal-step.is-active .step-indicator {
   border-color: var(--brand-green);
   background-color: var(--brand-green);
   color: var(--brand-black);
+  /* Soft green ring around the current step (matches mockup). */
+  box-shadow: 0 0 0 4px rgba(0, 255, 157, 0.2);
 }
 
 .theme-brand .horizontal-step.is-completed .step-indicator {
@@ -557,9 +622,9 @@ pre {
   background-color: var(--brand-green);
 }
 
-.theme-brand .horizontal-step.is-active .step-label {
+.theme-brand .horizontal-step.is-active .step-label,
+.theme-brand .horizontal-step.is-completed .step-label {
   color: var(--brand-black);
-  font-weight: 600;
 }
 
 .theme-brand .step-number {

package/dist/collection/components/eds-steps-v2/eds-steps-v2.js

@@ -2,6 +2,9 @@ import { h } from "@stencil/core";
 import { parseData } from "../../utils/sharedUtils";
 export class EdsStepsV2 {
     constructor() {
+        this.onResize = () => {
+            this.isMobile = typeof window !== 'undefined' && window.innerWidth < 750;
+        };
         this.handleTitleClick = (index) => {
             // In linear mode, do NOT collapse; only navigate if allowed.
             if (this.type === 'linear') {
@@ -29,11 +32,12 @@ export class EdsStepsV2 {
         };
         this.handleNext = () => {
             const lastIndex = this.parsedSteps.length - 1;
-            // On last step: do NOT collapse; keep content visible, just emit finished
+            // On last step: stay on the last step and just emit finished. Collapsing
+            // here (activeStep = -1) left the form as an empty "Step 0" shell whenever
+            // the host's submit was rejected (e.g. single-submission already used) —
+            // the success path navigates away, so there's nothing to collapse for.
             if (this.activeStep >= lastIndex) {
                 this.finished.emit();
-                this.activeStep = -1; // collapse the content
-                this.step.emit(this.activeStep); // notify change (-1 sentinel)
                 return;
             }
             const target = this.activeStep + 1;
@@ -77,9 +81,15 @@ export class EdsStepsV2 {
         this.backLabel = 'Back';
         this.finishLabel = 'Finish';
         this.showFinish = true;
+        this.card = true;
         this.disableNext = false;
         this.headingLevel = 'h4';
         this.activeStep = 0;
+        this.isMobile = false;
+    }
+    /** Nav button size: comfortable on desktop, compact on mobile. */
+    get navBtnSize() {
+        return this.isMobile ? 'small' : 'large';
     }
     handleDisableNextChange(newValue) {
         if (typeof newValue === 'string' && newValue.trim().startsWith('[')) {
@@ -114,6 +124,17 @@ export class EdsStepsV2 {
     }
     componentWillLoad() {
         this.handleDisableNextChange(this.disableNext);
+        this.onResize();
+    }
+    connectedCallback() {
+        if (typeof window !== 'undefined') {
+            window.addEventListener('resize', this.onResize);
+        }
+    }
+    disconnectedCallback() {
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('resize', this.onResize);
+        }
     }
     componentDidLoad() {
         if (this.type === 'linear') {
@@ -134,7 +155,9 @@ export class EdsStepsV2 {
         linkElement.dispatchEvent(event);
     }
     articleClasses() {
-        return ['border-softer relative rounded-lg border-2'].join(' ');
+        // The card chrome is opt-out so a host that already provides the frame
+        // (e.g. a multi-step form's outer form-style wrapper) isn't double-bordered.
+        return this.card ? 'border-softer relative rounded-lg border-2' : 'relative';
     }
     get parsedSteps() {
         return parseData(this.steps);
@@ -198,21 +221,26 @@ export class EdsStepsV2 {
                 this.handleTitleClick(index);
             }
         };
-        return (h("div", { class: `horizontal-step ${isActive ? 'is-active' : ''} ${isCompleted ? 'is-completed' : ''}`, onClick: () => !forwardBlocked && this.handleTitleClick(index), onKeyDown: onKey, role: "button", tabindex: forwardBlocked ? -1 : 0, "aria-label": `Step ${index + 1}: ${step.title}`, "aria-current": isActive ? 'step' : undefined, "aria-disabled": forwardBlocked ? 'true' : 'false' }, h("div", { class: "step-indicator" }, isCompleted ? (h("eds-icon-wrapper", { name: "checkmark", size: 20 })) : (h("span", { class: "step-number" }, index + 1))), h("span", { class: `text-center text-default f-ui-03 ${forwardBlocked ? 'opacity-50' : ''}` }, step.title)));
+        return (h("div", { class: `horizontal-step ${isActive ? 'is-active' : ''} ${isCompleted ? 'is-completed' : ''}`, onClick: () => !forwardBlocked && this.handleTitleClick(index), onKeyDown: onKey, role: "button", tabindex: forwardBlocked ? -1 : 0, "aria-label": `Step ${index + 1}: ${step.title}`, "aria-current": isActive ? 'step' : undefined, "aria-disabled": forwardBlocked ? 'true' : 'false' }, h("div", { class: "step-indicator" }, isCompleted ? (h("eds-icon-wrapper", { name: "checkmark", size: 20 })) : (h("span", { class: "step-number" }, index + 1))), h("span", { class: `step-label ${forwardBlocked ? 'opacity-50' : ''}` }, step.title)));
     }
     render() {
         const steps = this.parsedSteps;
-        const marginClass = this.orientation === 'horizontal' ? 'mt-64' : 'mt-32';
+        // Top margin separates the buttons from the fields; bottom margin gives them
+        // breathing room from whatever follows (e.g. the next vertical step).
+        const marginClass = this.orientation === 'horizontal' ? 'mt-64 mb-16' : 'mt-32 mb-32';
         const themeClass = this.theme === 'brand' ? 'theme-brand' : 'theme-default';
-        return (h("div", { key: '0f95d17cc699c020419593bec5ed76c4515501c9', class: this.articleClasses() }, this.imageSrc ? (h("div", { class: "w-full mb-12 rounded-t-lg overflow-hidden border-2" }, h("eds-img", { src: this.imageSrc, width: this.imageWidth, "with-bg": "true", "lazy-load": "true", alt: "Step illustration" }))) : (this.message && (h("div", { class: `w-full ${this.theme === 'brand' ? 'bg-strongest' : 'bg-darker'} rounded-t-lg border-2` }, h("div", { class: "p-24" }, h("span", { class: `${this.theme === 'brand' ? 'text-accent' : 'text-inverse'} f-heading-04` }, this.message))))), h("div", { key: 'ed26ac9fc5cc4d7c409d29c3cd623e37a5abc944', class: "mt-16 pb-20 px-8" }, this.type === 'linear' && this.orientation === 'horizontal' ? (h("div", { class: `steps--horizontal ${themeClass}`, style: { '--step-count': steps.length.toString() } }, h("div", { class: "horizontal-indicators" }, steps.map((step, index) => this.renderHorizontalIndicator(step, index))), steps.map((step, index) => {
+        return (h("div", { key: '84383c5655004ccc0bcc144f3765c2d0b000cad6', class: this.articleClasses() }, this.imageSrc ? (h("div", { class: "w-full mb-12 rounded-t-lg overflow-hidden border-2" }, h("eds-img", { src: this.imageSrc, width: this.imageWidth, "with-bg": "true", "lazy-load": "true", alt: "Step illustration" }))) : (this.message && (h("div", { class: `w-full ${this.theme === 'brand' ? 'bg-strongest' : 'bg-darker'} rounded-t-lg border-2` }, h("div", { class: "p-24" }, h("span", { class: `${this.theme === 'brand' ? 'text-accent' : 'text-inverse'} f-heading-04` }, this.message))))), h("div", { key: 'd5fb5bbf6a48b90bf0db1e79a61ba5e445986368', class: "steps-body pb-20", style: {
+                paddingLeft: 'var(--eds-steps-padding-x, 0.5rem)',
+                paddingRight: 'var(--eds-steps-padding-x, 0.5rem)'
+            } }, this.type === 'linear' && this.orientation === 'horizontal' ? (h("div", { class: `steps--horizontal ${themeClass}`, style: { '--step-count': steps.length.toString() } }, h("div", { class: "horizontal-indicators" }, steps.map((step, index) => this.renderHorizontalIndicator(step, index))), steps.map((step, index) => {
             const isLast = index === steps.length - 1;
             if (this.activeStep !== index) {
                 return null;
             }
-            return (h("div", { class: "step-content", key: index, id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: "f-body-02 text-lighter", innerHTML: step.content })), h("div", { class: `flex items-center justify-between ${marginClass}` }, h("eds-button", { label: this.backLabel, intent: "primary", icon: "arrow-left", iconPos: "left", onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small", pill: true }), (!isLast || this.showFinish) && (h("eds-button", { label: isLast ? this.finishLabel : this.nextLabel, intent: "primary", icon: "arrow-right", onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: "small", class: index > 0 ? 'ml-8' : null, pill: true }))), h("slot", { name: `actions-${index}` })));
+            return (h("div", { class: "step-content", key: index, id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: "f-body-02 text-lighter", innerHTML: step.content })), h("div", { class: `flex items-center justify-between ${marginClass}` }, h("eds-button", { label: this.backLabel, intent: "primary", icon: "arrow-left", iconPos: "left", onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: this.navBtnSize, iconSmall: this.isMobile, pill: true }), (!isLast || this.showFinish) && (h("eds-button", { label: isLast ? this.finishLabel : this.nextLabel, intent: isLast ? 'brand' : 'primary', icon: "arrow-right", onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: this.navBtnSize, iconSmall: this.isMobile, class: index > 0 ? 'ml-8' : null, pill: true }))), h("slot", { name: `actions-${index}` })));
         }))) : this.type === 'linear' ? (h("div", { class: `steps ${themeClass}` }, steps.map((step, index) => {
             const isCompleted = this.activeStep > index;
-            return (h("div", { class: `${index === 0 ? 'step' : 'step mt-16'} ${isCompleted ? 'is-completed' : ''}`, key: index }, this.renderHeading(step.title, index), this.activeStep === index && (h("div", { class: "content grid gap-y-16", id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: "my-16 f-body-02 text-lighter", innerHTML: step.content })), h("div", { class: `flex items-center justify-between ${marginClass}` }, h("eds-button", { label: this.backLabel, intent: "secondary", icon: "chevron-left", iconPos: "left", onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small", pill: true }), (index < steps.length - 1 || this.showFinish) && (h("eds-button", { label: index === steps.length - 1 ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: "small", class: index > 0 ? 'ml-8' : null, pill: true })))))));
+            return (h("div", { class: `${index === 0 ? 'step' : 'step mt-16'} ${isCompleted ? 'is-completed' : ''}`, key: index }, this.renderHeading(step.title, index), this.activeStep === index && (h("div", { class: "content grid gap-y-16", id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: "my-16 f-body-02 text-lighter", innerHTML: step.content })), h("div", { class: `flex items-center justify-between ${marginClass}` }, h("eds-button", { label: this.backLabel, intent: "primary", icon: "chevron-left", iconPos: "left", onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: this.navBtnSize, iconSmall: this.isMobile, pill: true }), (index < steps.length - 1 || this.showFinish) && (h("eds-button", { label: index === steps.length - 1 ? this.finishLabel : this.nextLabel, intent: index === steps.length - 1 ? 'brand' : 'primary', icon: "chevron-right", onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: this.navBtnSize, iconSmall: this.isMobile, class: index > 0 ? 'ml-8' : null, pill: true })))))));
         }))) : (h("div", { class: `steps space-y-8 ${themeClass}` }, steps.map((step, index) => (h("div", { class: "step", key: index }, this.renderHeading(step.title, index), h("div", { class: "content", id: `eds-step-panel-${index}` }, h("div", { class: "content-body" }, h("slot", { name: `step-${index}` }, h("div", { class: "my-16 f-body-02 text-lighter", innerHTML: step.content }))))))))))));
     }
     static get is() { return "eds-steps-v2"; }
@@ -430,6 +458,24 @@ export class EdsStepsV2 {
                 "reflect": false,
                 "defaultValue": "true"
             },
+            "card": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the stepper draws its own bordered card. Default true. Set to false\nwhen the host already provides the card chrome (e.g. a multi-step form whose\nform-style border lives on an outer wrapper) to avoid a double border."
+                },
+                "attribute": "card",
+                "reflect": false,
+                "defaultValue": "true"
+            },
             "disableNext": {
                 "type": "any",
                 "mutable": true,
@@ -473,7 +519,8 @@ export class EdsStepsV2 {
     }
     static get states() {
         return {
-            "activeStep": {}
+            "activeStep": {},
+            "isMobile": {}
         };
     }
     static get events() {