@ebrains/components 2.4.0 → 3.0.0

package/dist/collection/components/eds-section/eds-section-heading/eds-section-heading.js

@@ -36,12 +36,12 @@ export class EdsSectionHeading {
     render() {
         const TagType = this.tag; // Dynamically set tag type for the container
         const HeadingTag = this.headingLevel; // Dynamically set heading level
-        return (h(TagType, { key: '9003f6d452637cdc9ed3bea69689cd92546860b8', class: {
+        return (h(TagType, { key: '032f8629ef5ea1c45f40a135a54c32337f7181e9', class: {
                 'ui-section-header flex flex-wrap items-center justify-between gap-x-12 gap-y-8': true,
                 container: this.withContainer,
                 'pt-48': this.spacingLarge,
                 'pt-28': !this.spacingLarge
-            } }, h(HeadingTag, { key: '2cb120e1bf8e4816cb56c8ba8f8bbae546bd7baf', class: this.getHeadingClass() }, this.sectionTitle)));
+            } }, h(HeadingTag, { key: '37f821426fe05dba66445745da3d23c9ff75345e', class: this.getHeadingClass() }, this.sectionTitle)));
     }
     static get is() { return "eds-section-heading"; }
     static get properties() {

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

@@ -265,19 +265,24 @@
 }
 
 :host(.theme-minimal) .sidebar-item-content:hover {
-  background-color: var(--grey-300);
+  background-color: rgba(0, 255, 157, 0.05);
+  color: var(--brand-black, #07140D);
 }
 
 :host(.theme-minimal) .sidebar-item.active > .sidebar-item-content {
-  background-color: var(--grey-400);
-  border-left: 3px solid var(--grey-900);
+  background-color: rgba(0, 255, 157, 0.1);
+  border-left: 3px solid var(--brand-green-dark, #00C87B);
   padding-left: calc(1rem - 3px);
+  color: var(--brand-black, #07140D);
+  font-weight: 500;
 }
 
 :host(.theme-minimal.collapsed) .sidebar-item.active > .sidebar-item-content {
   border-left: none;
   border-radius: 0.375rem;
   padding-left: 0.75rem;
+  background-color: rgba(0, 255, 157, 0.1);
+  color: var(--brand-black, #07140D);
 }
 
 /* Adjust active state indents for each level */
@@ -339,7 +344,7 @@
 }
 
 :host(.theme-ebrains) .sidebar-item.active > .sidebar-item-content {
-  background-color: var(--green-600, #22c55e);
+  background-color: var(--brand-green-dark, #22c55e);
   color: white;
 }
 

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

@@ -142,13 +142,13 @@ export class EdsSidebar {
                     e.preventDefault();
                     this.handleItemClick(item, e);
                 }
-            } }, hasChildren && (h("span", { class: "sidebar-toggle mt-2 -ml-4", "aria-hidden": "true" }, h("eds-icon-wrapper", { icon: isOpen ? 'chevron-down' : 'chevron-right' }))), h("span", { class: "sidebar-link-wrapper" }, h("eds-link", { label: item.title, url: item.url || '#', intent: isActive ? 'strong' : 'weak', size: "small", "aria-label": item.title, "extra-class": "sidebar-link", tabindex: "-1" }))), hasChildren && isOpen && (h("ul", { id: childrenId, class: "sidebar-children" }, item.children.map((child) => this.renderItem(child, level + 1))))));
+            } }, hasChildren && (h("span", { class: "sidebar-toggle -ml-4", "aria-hidden": "true" }, h("eds-icon-wrapper", { name: isOpen ? 'chevron-down' : 'chevron-right' }))), h("span", { class: "sidebar-link-wrapper" }, h("eds-link", { label: item.title, url: item.url || '#', intent: isActive ? 'strong' : 'weak', size: "small", "aria-label": item.title, "extra-class": "sidebar-link", tabindex: "-1" }))), hasChildren && isOpen && (h("ul", { id: childrenId, class: "sidebar-children" }, item.children.map((child) => this.renderItem(child, level + 1))))));
     }
     render() {
-        return (h(Host, { key: '4334d20e5d72671243633253910ab05b4da013da', class: {
+        return (h(Host, { key: 'a56e293e9b53b0dbffd6268c117f77828ba5f41a', class: {
                 'eds-sidebar': true,
                 [`theme-${this.theme}`]: true
-            } }, h("nav", { key: '319f6f42416d4229f1b011bf1216b39c8627302d', class: "sidebar-nav", "aria-label": "Sidebar" }, h("ul", { key: '687ceae3eca3e844e8f6a361db4a76d127d27813', class: "sidebar-list" }, this.parsedItems.map((item) => this.renderItem(item, 0))))));
+            } }, h("nav", { key: '07ca17add683f976b30e736389eddc473e1e5669', class: "sidebar-nav", "aria-label": "Sidebar" }, h("ul", { key: 'a102418d399f14715eddf34e1c3373cf1be9d4aa', class: "sidebar-list" }, this.parsedItems.map((item) => this.renderItem(item, 0))))));
     }
     static get is() { return "eds-sidebar"; }
     static get encapsulation() { return "shadow"; }
@@ -173,7 +173,7 @@ export class EdsSidebar {
                     "references": {
                         "SidebarItem": {
                             "location": "local",
-                            "path": "/Users/nigeor/Documents/Projects/EBRAINS/ebrains-ui-ecosystem/packages/components/src/components/eds-sidebar/eds-sidebar.tsx",
+                            "path": "/Users/nikolaosgeorgomanolis/Documents/EBRAINS/Projects/ebrains-ui-ecosystem/packages/components/src/components/eds-sidebar/eds-sidebar.tsx",
                             "id": "../../../packages/components/src/components/eds-sidebar/eds-sidebar.tsx::SidebarItem"
                         }
                     }

package/dist/collection/components/eds-social-networks/eds-social-networks.css

@@ -34,6 +34,14 @@ menu {
     padding: 0;
 }
 
+.f-ui-01 {
+  font-family: var(--f-ui-01-fontFamily);
+  font-weight: var(--f-ui-01-fontWeight);
+  font-size: var(--f-ui-01-fontSize);
+  line-height: var(--f-ui-01-lineHeight);
+  letter-spacing: var(--f-ui-01-letterSpacing);
+}
+
 .f-ui-02 {
     font-family: var(--f-ui-02-fontFamily);
     font-weight: var(--f-ui-02-fontWeight);
@@ -83,6 +91,10 @@ menu {
     color: var(--grey-600);
 }
 
+.text-inverse {
+    color: var(--white);
+}
+
 .hover\:text-default:hover {
     color: var(--black);
 }

package/dist/collection/components/eds-social-networks/eds-social-networks.js

@@ -45,13 +45,17 @@ export class EdsSocialNetworks {
             }
         ];
         this.heading = 'Follow EBRAINS to keep up-to-date';
+        this.variant = 'default';
     }
     /**
      * Renders the component's HTML structure with links to EBRAINS social profiles.
      * Each social network link uses the `eds-link` component with specific classes and styles.
      */
     render() {
-        return (h("nav", { key: 'f56d034a9c934e1be2003a0fedaf6c9ec4fc5909', "aria-label": "Social media" }, h("p", { key: '66d7c2384206143eef36cdb085780d4a1590fe76', class: "f-ui-02" }, this.heading), h("ul", { key: '0ccb5fd44ee30f77c19fdb67dc1cc19fadd3561e', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm", external: true, "aria-label": `EBRAINS on ${network.label}`, url: network.url, icon: network.icon, intent: "strong" })))))));
+        const isInverse = this.variant === 'inverse';
+        const textClass = isInverse ? 'text-inverse' : '';
+        const linkIntent = isInverse ? 'inverse' : 'strong';
+        return (h("nav", { key: '11b876483142bb98c686a4cb722d28022ca9f40c', "aria-label": "Social media" }, h("p", { key: 'daf2865247ed69ab3e4233d191d8abb8d5be584f', class: `f-ui-02 ${textClass}` }, this.heading), h("ul", { key: '47918284e8a158d523d3329eb28f4881ac27233e', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { external: true, "aria-label": `EBRAINS on ${network.label}`, url: network.url, icon: network.icon, intent: linkIntent })))))));
     }
     static get is() { return "eds-social-networks"; }
     static get encapsulation() { return "shadow"; }
@@ -84,6 +88,27 @@ export class EdsSocialNetworks {
                 "attribute": "title",
                 "reflect": false,
                 "defaultValue": "'Follow EBRAINS to keep up-to-date'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'inverse'",
+                    "resolved": "\"default\" | \"inverse\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{'default' | 'inverse'}"
+                        }],
+                    "text": "Controls the visual variant of the social networks.\n- 'default': Light background with dark text\n- 'inverse': Dark/black background with white text"
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'default'"
             }
         };
     }

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

@@ -15,10 +15,10 @@
   }
 }
 
-.f-body-01 {
-  font-family: var(--f-body-01-fontFamily);
-  font-weight: var(--f-body-01-fontWeight);
-  font-size: var(--f-body-01-fontSize);
-  line-height: var(--f-body-01-lineHeight);
-  letter-spacing: var(--f-body-01-letterSpacing);
+.f-ui-01 {
+  font-family: var(--f-ui-01-fontFamily);
+  font-weight: var(--f-ui-01-fontWeight);
+  font-size: var(--f-ui-01-fontSize);
+  line-height: var(--f-ui-01-lineHeight);
+  letter-spacing: var(--f-ui-01-letterSpacing);
 }

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

@@ -4,7 +4,7 @@ export class EdsSpinner {
         this.size = 'md';
         this.variant = 'secondary';
         this.message = undefined;
-        this.background = 'var(--grey-200)';
+        this.background = 'var(--grey-light)';
         this.fullscreen = false;
     }
     get spinnerSize() {
@@ -39,8 +39,8 @@ export class EdsSpinner {
     }
     render() {
         // derive colors from variant
-        const borderColor = this.variant === 'primary' ? 'var(--grey-900)' : 'var(--grey-400)';
-        const bottomColor = this.variant === 'primary' ? 'var(--green-400)' : 'var(--grey-900)';
+        const borderColor = this.variant === 'primary' ? 'var(--brand-black)' : 'var(--grey-dark)';
+        const bottomColor = this.variant === 'primary' ? 'var(--brand-green)' : 'var(--brand-black)';
         const spinnerStyle = Object.assign({ width: this.spinnerSize, height: this.spinnerSize, border: `${this.spinnerThickness} solid ${borderColor}`, borderBottomColor: bottomColor }, (!this.fullscreen && { display: 'inline-block' }));
         // Overlay style: use fixed positioning for fullscreen,
         // and absolute positioning for inline mode.
@@ -71,7 +71,7 @@ export class EdsSpinner {
                 alignItems: 'center',
                 justifyContent: 'center'
             };
-        return (h(Host, { key: 'c50ca410eb23855b3076babb78b4849246722cf7' }, h("div", { key: '9b3722b00777a0dd77288c4c3b29419a9b87640b', class: "spinner-overlay", style: overlayStyle }, h("span", { key: '5479d0195b6d8991613df8ae03eee34b2a095b6b', class: "spinner", style: spinnerStyle }), this.message && h("p", { key: '448c3b0e6ce0aac6c21b53c58b97e423a1739864', class: "f-body-01" }, this.message))));
+        return (h(Host, { key: '16d20431aaa90a29b6e3d32cbd3403ece1f45345' }, h("div", { key: '0e29dafa5eb3a84f31305614ae083356604a81bf', class: "spinner-overlay", style: overlayStyle }, h("span", { key: 'cf63a83095e35a1ca4328fd14293e6895d8d9811', class: "spinner", style: spinnerStyle }), this.message && h("p", { key: '7bb83c40db5dc985c429ca6ac171145db80c011d', class: "f-ui-01" }, this.message))));
     }
     static get is() { return "eds-spinner"; }
     static get encapsulation() { return "shadow"; }
@@ -156,7 +156,7 @@ export class EdsSpinner {
                 },
                 "attribute": "background",
                 "reflect": false,
-                "defaultValue": "'var(--grey-200)'"
+                "defaultValue": "'var(--grey-light)'"
             },
             "fullscreen": {
                 "type": "boolean",

package/dist/collection/components/eds-splash-screen/eds-splash-screen.css

@@ -11,19 +11,19 @@
     align-items: center;
     justify-content: center;
   }
-  
+
   .logo-container {
-    width: 200px;
-    height: 200px;
-    margin-bottom: 1rem;
+    width: 300px;
+    height: 60px;
+    animation: loading-pulse 1.5s ease-in-out infinite;
   }
-  
-  .content-container {
-    position: relative;  /* Establishes a positioning context for the spinner overlay */
-    width: 5rem;
-    height: 5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+
+  @keyframes loading-pulse {
+    0%, 100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.6;
+    }
   }
   

package/dist/collection/components/eds-splash-screen/eds-splash-screen.js

@@ -39,7 +39,7 @@ export class EdsSplashScreen {
         if (!this.isVisible) {
             return null;
         }
-        return (h(Host, null, h("div", { class: "splash-overlay", style: { background: this.inverse ? 'black' : 'var(--grey-200)' } }, h("div", { class: "logo-container" }, this.inverse ? (h("eds-logo", { orientation: "vertical", type: "color-white" })) : (h("eds-logo", { orientation: "vertical", type: "color" }))), h("div", { class: "content-container" }, h("eds-spinner", { size: "xs", background: "none", fullscreen: false })))));
+        return (h(Host, null, h("div", { class: "splash-overlay", style: { background: this.inverse ? 'var(--brand-black)' : 'var(--grey-light)' } }, h("div", { class: "logo-container" }, this.inverse ? h("eds-logo", { variant: "negative" }) : h("eds-logo", { variant: "positive" })))));
     }
     static get is() { return "eds-splash-screen"; }
     static get encapsulation() { return "shadow"; }

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

@@ -65,7 +65,7 @@ pre {
 .steps h5::before {
   content: counter(step);
   position: absolute;
-  left: -39px;
+  left: -40px;
   top: -2px;
   display: flex;
   align-items: center;
@@ -142,7 +142,7 @@ pre {
 }
 
 .text-default {
-  color: var(--black);
+  color: var(--brand-black);
 }
 
 .text-inverse {
@@ -150,11 +150,11 @@ pre {
 }
 
 .text-light {
-  color: var(--grey-700);
+  color: var(--grey-light);
 }
 
 .text-lighter {
-  color: var(--grey-600);
+  color: var(--grey-dark);
 }
 
 .w-full {
@@ -256,7 +256,7 @@ pre {
 }
 
 .bg-default {
-  background-color: var(--grey-200);
+  background-color: var(--grey-light);
 }
 
 .bg-inverse {
@@ -399,7 +399,7 @@ pre {
 }
 
 .horizontal-step.is-completed:not(:last-child)::after {
-  background-color: var(--green-500); /* green */
+  background-color: var(--brand-green-dark); /* green */
 }
 
 .step-indicator {
@@ -415,13 +415,13 @@ pre {
 }
 
 .horizontal-step.is-active .step-indicator {
-  border-color: var(--green-500); /* green */
-  background-color: var(--green-500);
+  border-color: var(--brand-green-dark); /* green */
+  background-color: var(--brand-green-dark);
   color: var(--white);
 }
 
 .horizontal-step.is-completed .step-indicator {
-  border-color: var(--green-500); /* green */
+  border-color: var(--brand-green-dark); /* green */
   background-color: var(--white);
 }
 
@@ -442,14 +442,23 @@ pre {
 }
 
 .horizontal-step.is-active .step-label {
-  color: var(--green-500);
+  color: var(--brand-green-dark);
 }
 
 .step-content {
-  padding: 2rem 0;
+  padding: 0.5rem 0;
   /* Align content to start under the first step indicator */
-  margin-left: calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem);
-  margin-right: calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem);
+  margin-left: calc((100% / var(--step-count, 1)) * 0.20 - 1.25rem);
+  margin-right: calc((100% / var(--step-count, 1)) * 0.20 - 1.25rem);
+}
+
+/* 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);
+  }
 }
 
 .opacity-50 {
@@ -458,6 +467,83 @@ pre {
 
 
 /* Cursor pointer only applies in linear mode via role="button" */
-.eds-steps__title[role="button"] { 
-  cursor: pointer; 
+.eds-steps__title[role="button"] {
+  cursor: pointer;
+}
+
+/* ============================================
+   BRAND THEME STYLES
+   ============================================ */
+
+/* Brand theme - Vertical steps */
+.theme-brand.steps h3::before,
+.theme-brand.steps h4::before,
+.theme-brand.steps h5::before {
+  background: var(--brand-green); /* #00FF9D */
+  color: var(--brand-black); /* #07140D */
+  border-color: var(--brand-green);
+  font-weight: 600;
+}
+
+/* Brand theme - Horizontal step indicators */
+.theme-brand .step-indicator {
+  background-color: var(--grey-light);
+}
+
+.theme-brand .horizontal-step.is-active .step-indicator {
+  border-color: var(--brand-green);
+  background-color: var(--brand-green);
+  color: var(--brand-black);
+}
+
+.theme-brand .horizontal-step.is-completed .step-indicator {
+  border-color: var(--brand-green);
+  background-color: var(--brand-green);
+  color: var(--brand-black);
+}
+
+.theme-brand .horizontal-step.is-completed:not(:last-child)::after {
+  background-color: var(--brand-green);
+}
+
+.theme-brand .horizontal-step.is-active .step-label {
+  color: var(--brand-black);
+  font-weight: 600;
+}
+
+.theme-brand .step-number {
+  font-weight: 600;
+}
+
+/* Default theme - explicitly define to ensure clarity */
+.theme-default.steps h3::before,
+.theme-default.steps h4::before,
+.theme-default.steps h5::before {
+  background: var(--grey-900);
+  color: #fff;
+  border-color: #ccc;
+}
+
+.theme-default .step-indicator {
+  background-color: white;
+  border-color: #e0e0e0;
+}
+
+.theme-default .horizontal-step.is-active .step-indicator {
+  border-color: var(--brand-green-dark);
+  background-color: var(--brand-green-dark);
+  color: var(--white);
+}
+
+.theme-default .horizontal-step.is-completed .step-indicator {
+  border-color: var(--brand-green-dark);
+  background-color: var(--white);
+}
+
+.theme-default .horizontal-step.is-completed:not(:last-child)::after {
+  background-color: var(--brand-green-dark);
+}
+
+.theme-default .horizontal-step.is-active .step-label {
+  color: var(--brand-green-dark);
 }

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

@@ -68,9 +68,11 @@ export class EdsSteps {
         this.steps = [];
         this.type = 'static';
         this.orientation = 'vertical';
+        this.theme = 'default';
         this.nextLabel = 'Next';
         this.backLabel = 'Back';
         this.finishLabel = 'Finish';
+        this.showFinish = true;
         this.disableNext = false;
         this.headingLevel = 'h4';
         this.collapsibleTitles = false;
@@ -191,27 +193,28 @@ export class EdsSteps {
     }
     render() {
         const steps = this.parsedSteps;
+        const themeClass = this.theme === 'brand' ? 'theme-brand' : 'theme-default';
         // Horizontal Linear
         if (this.type === 'linear' && this.orientation === 'horizontal') {
-            return (h("div", { class: "steps--horizontal", 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", { 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;
                 }
                 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: "ghost", icon: "chevron-left", iconPos: "left", iconSmall: true, onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small" }), h("eds-button", { label: isLast ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", iconSmall: true, 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: "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}` })));
             })));
         }
         // Vertical Linear
         if (this.type === 'linear') {
-            return (h("div", { class: "steps" }, steps.map((step, index) => {
+            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: "ghost", icon: "chevron-left", iconPos: "left", iconSmall: true, onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small" }), h("eds-button", { label: isLast ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", iconSmall: true, 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: "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}` })))));
             })));
         }
         // Static
-        return (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step mb-16", key: index }, this.renderHeading(step.title, index), h("div", { class: "content", id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: "f-body-02 text-lighter my-16", innerHTML: step.content }))))))));
+        return (h("div", { class: `steps ${themeClass}` }, steps.map((step, index) => (h("div", { class: "step mb-16", key: index }, this.renderHeading(step.title, index), h("div", { class: "content", id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: "f-body-02 text-lighter my-16", innerHTML: step.content }))))))));
     }
     static get is() { return "eds-steps"; }
     static get encapsulation() { return "shadow"; }
@@ -236,7 +239,7 @@ export class EdsSteps {
                     "references": {
                         "Step": {
                             "location": "local",
-                            "path": "/Users/nigeor/Documents/Projects/EBRAINS/ebrains-ui-ecosystem/packages/components/src/components/eds-steps/eds-steps.tsx",
+                            "path": "/Users/nikolaosgeorgomanolis/Documents/EBRAINS/Projects/ebrains-ui-ecosystem/packages/components/src/components/eds-steps/eds-steps.tsx",
                             "id": "../../../packages/components/src/components/eds-steps/eds-steps.tsx::Step"
                         }
                     }
@@ -287,6 +290,24 @@ export class EdsSteps {
                 "reflect": false,
                 "defaultValue": "'vertical'"
             },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'brand'",
+                    "resolved": "\"brand\" | \"default\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual theme for the steps component.\n- 'default': Grey step circles with white text\n- 'brand': Brand green step circles with black text (CTA style)"
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
             "nextLabel": {
                 "type": "string",
                 "mutable": false,
@@ -341,6 +362,24 @@ export class EdsSteps {
                 "reflect": false,
                 "defaultValue": "'Finish'"
             },
+            "showFinish": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show or hide the finish button on the last step"
+                },
+                "attribute": "show-finish",
+                "reflect": false,
+                "defaultValue": "true"
+            },
             "disableNext": {
                 "type": "any",
                 "mutable": true,

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

@@ -23,7 +23,7 @@ export default {
         headingLevel: {
             name: 'heading-level',
             control: { type: 'select' },
-            options: ['h3', 'h4', 'h5'],
+            options: ['h3', 'h4'],
             description: 'Semantic heading tag to render for each step title.'
         },
         nextLabel: {
@@ -38,9 +38,9 @@ export default {
             control: 'text',
             description: 'Label for the Finish button on the last step (linear mode).'
         },
-        disableNext: {
+        showFinish: {
             control: 'boolean',
-            description: 'Disables the Next/Finish button to block progression (linear mode).'
+            description: 'Show or hide the Finish button on the last step (linear mode). Default: true.'
         }
     },
     args: {
@@ -55,11 +55,12 @@ export default {
         nextLabel: 'Next',
         backLabel: 'Back',
         finishLabel: 'Finish',
-        disableNext: false
+        showFinish: true
     }
 };
 const renderSteps = (args) => {
-    const disableAttr = typeof args.disableNext === 'boolean' && args.disableNext ? ' disable-next' : '';
+    //const disableAttr = typeof args.disableNext === 'boolean' ? ` disable-next="${args.disableNext}"` : '';
+    const showFinishAttr = typeof args.showFinish === 'boolean' ? ` show-finish="${args.showFinish}"` : '';
     // orientation only matters in linear mode
     const orientationAttr = args.type === 'linear' && args.orientation ? ` orientation="${args.orientation}"` : '';
     return `
@@ -69,7 +70,7 @@ const renderSteps = (args) => {
       heading-level="${args.headingLevel}"
       next-label="${args.nextLabel}"
       back-label="${args.backLabel}"
-      finish-label="${args.finishLabel}"${disableAttr}${orientationAttr}
+      finish-label="${args.finishLabel}"${showFinishAttr}${orientationAttr}
     ></eds-steps>
   `;
 };
@@ -90,28 +91,3 @@ export const LinearHorizontal = {
     },
     render: (args) => renderSteps(args)
 };
-export const LinearBlocked = {
-    args: {
-        type: 'linear',
-        orientation: 'vertical',
-        disableNext: true
-    },
-    render: (args) => renderSteps(args)
-};
-export const CustomLabels = {
-    args: {
-        type: 'linear',
-        orientation: 'vertical',
-        nextLabel: 'Continue',
-        backLabel: 'Previous',
-        finishLabel: 'Create form'
-    },
-    render: (args) => renderSteps(args)
-};
-export const HeadingLevels = {
-    args: {
-        type: 'static',
-        headingLevel: 'h3'
-    },
-    render: (args) => renderSteps(args)
-};