@ebrains/components 3.1.0 → 3.2.0

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: 'e1d78d18506adb662bbcc100f6f886e33c21a996', 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: '5b69e2c641d96025b34377fc647679f94d0e4e44', 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() {

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

@@ -5,12 +5,7 @@ export default {
     argTypes: {
         steps: {
             control: 'object',
-            description: 'Array of step objects',
-            defaultValue: [
-                { title: 'Step One', content: '<p>Details for step one.</p>' },
-                { title: 'Step Two', content: '<p>Details for step two.</p>' },
-                { title: 'Step Three', content: '<p>Details for step three.</p>' }
-            ]
+            description: 'Array of step objects'
         },
         orientation: {
             control: { type: 'select' },
@@ -20,17 +15,28 @@ export default {
         type: {
             control: 'select',
             options: ['static', 'linear'],
-            description: 'Stepper type: static (all steps) or linear (one at a time)',
-            defaultValue: 'static'
+            description: 'Stepper type: static (all steps) or linear (one at a time)'
+        },
+        theme: {
+            control: 'select',
+            options: ['default', 'brand'],
+            description: 'Visual theme. "brand" is the dark/green look multi-step brand forms use.'
+        },
+        card: {
+            control: 'boolean',
+            description: 'Draw the stepper\'s own card chrome (border/background). Set false when an outer wrapper already carries it — e.g. the brand multi-step form card.'
+        },
+        disableNext: {
+            control: 'boolean',
+            description: 'Disable the Next button (boolean for all steps, or an array/JSON string per step) — used to gate advancing until the current step validates.'
         },
         imageSrc: {
             control: 'text',
             description: 'URL of the image to display above the steps'
         },
-        bg: {
-            control: 'boolean',
-            description: 'Whether to apply inverse background to container',
-            defaultValue: true
+        imageWidth: {
+            control: 'number',
+            description: 'Rendered width (px) of the image above the steps'
         },
         message: {
             control: 'text',
@@ -40,8 +46,7 @@ export default {
             name: 'heading-level',
             control: { type: 'select' },
             options: ['h3', 'h4', 'h5'],
-            description: 'Semantic heading tag to render for each step title',
-            defaultValue: 'h4'
+            description: 'Semantic heading tag to render for each step title'
         },
         nextLabel: {
             control: 'text',
@@ -68,8 +73,11 @@ export default {
         ],
         orientation: 'vertical',
         type: 'static',
+        theme: 'default',
+        card: true,
+        disableNext: false,
         imageSrc: '',
-        bg: true,
+        imageWidth: undefined,
         message: 'No image available',
         headingLevel: 'h4',
         nextLabel: 'Next',
@@ -78,15 +86,17 @@ export default {
         showFinish: true
     }
 };
-const Template = ({ steps, type, orientation, imageSrc, imageWidth, bg, message, headingLevel, nextLabel, backLabel, finishLabel, showFinish }) => html `
+const Template = ({ steps, type, orientation, theme, card, disableNext, imageSrc, imageWidth, message, headingLevel, nextLabel, backLabel, finishLabel, showFinish }) => html `
   <div class="grid grid-layout grid-cols-2">
     <eds-steps-v2
       .steps=${steps}
       type="${type}"
       orientation="${orientation}"
+      theme="${theme || 'default'}"
+      .card=${card}
+      .disableNext=${disableNext}
       .imageSrc=${imageSrc}
       .imageWidth=${imageWidth}
-      ?bg=${bg}
       message="${message || ''}"
       heading-level="${headingLevel}"
       next-label="${nextLabel}"
@@ -131,3 +141,56 @@ LinearHorizontal.parameters = {
         }
     }
 };
+/* How brand multi-step forms actually mount the stepper (FormsPage): linear +
+   horizontal, theme="brand", and card=false because the OUTER brand card
+   carries the chrome — recreated here with a dark rounded wrapper. */
+export const BrandTheme = ({ steps, disableNext }) => html `
+  <div class="grid grid-layout grid-cols-2">
+    <div class="bg-inverse rounded-xs overflow-hidden" style="--eds-steps-padding-x: 2rem;">
+      <div class="bg-strongest p-32">
+        <p class="f-heading-05 text-inverse m-0">Attendee Confirmation Survey</p>
+      </div>
+      <eds-steps-v2
+        .steps=${steps}
+        type="linear"
+        orientation="horizontal"
+        theme="brand"
+        .card=${false}
+        .disableNext=${disableNext}
+        next-label="Next"
+        back-label="Back"
+        finish-label="Submit"
+        ?show-finish=${true}
+      ></eds-steps-v2>
+    </div>
+  </div>
+`;
+BrandTheme.storyName = 'Brand Theme (multi-step form)';
+BrandTheme.args = {
+    steps: [
+        { title: 'Step 1', content: '<p>About you — name, email, institution.</p>' },
+        { title: 'Step 2', content: '<p>Logistics — attendance, dietary needs, sessions.</p>' }
+    ],
+    disableNext: false
+};
+BrandTheme.parameters = {
+    docs: {
+        description: {
+            story: 'theme="brand" + card=false, exactly as multi-step brand forms mount it: the outer card provides the chrome (dark hero above), the stepper renders flush. Toggle disableNext to see the gated Next button.'
+        }
+    }
+};
+export const DisabledNext = Template.bind({});
+DisabledNext.storyName = 'Linear — Next disabled';
+DisabledNext.args = {
+    type: 'linear',
+    orientation: 'horizontal',
+    disableNext: true
+};
+DisabledNext.parameters = {
+    docs: {
+        description: {
+            story: 'disableNext gates advancing (forms set it while the current step has validation errors). Accepts a boolean for all steps or an array/JSON string per step.'
+        }
+    }
+};