@ebrains/components 2.1.0 → 2.3.0

package/dist/components/eds-nps2.js

@@ -72,13 +72,13 @@ const EdsNps = /*@__PURE__*/ proxyCustomElement(class EdsNps extends HTMLElement
     }
     render() {
         const count = this.max - this.min + 1;
-        const fallback = 0;
-        return (h("div", { key: 'd675e1e4ecc306511c0324d0b76ee66237cb6738', class: "eds-nps" }, h("eds-input-label", { key: '2eede06f6ee166c36b0cf315a35435c89c3c0ba5', id: "nps-question", name: "nps-question", label: this.question }), h("div", { key: '16105649fe6b3b229127c9a741367a6381db774f', role: "group", id: "nps-buttons", "aria-labelledby": "nps-question", class: "grid grid-cols-11", onKeyDown: (e) => this.handleKeyNav(e) }, Array.from({ length: count }, (_, i) => {
+        //onst fallback = 0;
+        return (h("div", { key: '51e0d272693fd42d1f239f8498d9a5744dead8d7', class: "eds-nps" }, h("eds-input-label", { key: 'f9d3b65985e221f9608da3aba22cc1dc4dd54417', id: "nps-question", name: "nps-question", label: this.question }), h("div", { key: '00b22eff70fd1dd3d210e17aaef5df2057f99bb7', role: "group", id: "nps-buttons", "aria-labelledby": "nps-question", class: "grid grid-cols-11", onKeyDown: (e) => this.handleKeyNav(e) }, Array.from({ length: count }, (_, i) => {
             const val = this.min + i;
             const isSelected = val === this.selectedValue;
-            const tabIndex = this.selectedValue === null ? (i === fallback ? 0 : -1) : isSelected ? 0 : -1;
+            const tabIndex = isSelected ? 0 : -1;
             return (h("div", { class: "grid-col-span-1", key: val }, h("eds-button", { tabindex: tabIndex, label: `${val}`, "aria-label": `${val}`, intent: isSelected ? 'primary' : 'ghost', "extra-class": "!block !px-0 w-full", triggerClick: () => this.handleClick(val) })));
-        })), h("div", { key: 'e7bd70a4f1a8083d9c3e08fdf8de55999a27d92d', class: "flex justify-between mt-8" }, h("span", { key: 'ea3fbbac20a162e7cf5f2d5e3321c8bc9297014e', class: "f-ui-04 text-light ml-4" }, this.leftLabel), h("span", { key: '3ff59cde0c532587ead8b8a1eaaff6c630e7e7ac', class: "f-ui-04 text-light mr-4" }, this.rightLabel))));
+        })), h("div", { key: '7289bd6476a2080be3c02011240e2493b84079e5', class: "flex justify-between mt-8" }, h("span", { key: 'ebfcebd9aa3d11cf298e44987debd8edef1f6e40', class: "f-ui-04 text-light ml-4" }, this.leftLabel), h("span", { key: '002f9878b267439af9f83f9ffd1b52eaef46b929', class: "f-ui-04 text-light mr-4" }, this.rightLabel))));
     }
     get el() { return this; }
     static get style() { return EdsNpsStyle0; }

package/dist/components/eds-pagination2.js

@@ -3,7 +3,7 @@ import { d as defineCustomElement$3 } from './eds-button2.js';
 import { d as defineCustomElement$2 } from './eds-icon-wrapper2.js';
 import { d as defineCustomElement$1 } from './eds-link2.js';
 
-const edsPaginationCss = "ul,menu{list-style:none;margin:0;padding:0}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.f-ui-02-light{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}.text-light{color:var(--grey-700)}.text-lightest{color:var(--grey-500)}.mb-28{margin-bottom:1.75rem}.w-full{width:100%}.w-20{width:1.25rem}.h-20{height:1.25rem}.h-28{height:1.75rem}.h-32{height:2rem}.h-36{height:2.25rem}.text-center{text-align:center}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-x-8{-moz-column-gap:0.5rem;column-gap:0.5rem}.mr-auto{margin-right:auto}.ml-auto{margin-left:auto}.\\!p-8{padding:0.5rem !important}.ml-4{margin-left:0.25rem}.mr-4{margin-right:0.25rem}.hidden{display:none}.gap-1{gap:0.0625rem}.py-4{padding-top:0.25rem;padding-bottom:0.25rem}.transition-colors{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}@media (min-width: 900px){.lg\\:\\!pr-12{padding-right:0.75rem !important}.lg\\:flex{display:flex}}";
+const edsPaginationCss = "ul,menu{list-style:none;margin:0;padding:0}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.f-ui-02-light{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}.text-light{color:var(--grey-700)}.text-lightest{color:var(--grey-500)}.mb-28{margin-bottom:1.75rem}.w-full{width:100%}.w-20{width:1.25rem}.h-20{height:1.25rem}.h-28{height:1.75rem}.h-32{height:2rem}.h-36{height:2.25rem}.text-center{text-align:center}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-x-8{-moz-column-gap:0.5rem;column-gap:0.5rem}.mr-auto{margin-right:auto}.ml-auto{margin-left:auto}.\\!p-8{padding:0.5rem !important}.ml-4{margin-left:0.25rem}.mr-4{margin-right:0.25rem}.hidden{display:none}.gap-1{gap:0.0625rem}.py-4{padding-top:0.25rem;padding-bottom:0.25rem}.transition-colors{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media (min-width: 900px){.lg\\:\\!pr-12{padding-right:0.75rem !important}.lg\\:flex{display:flex}}";
 const EdsPaginationStyle0 = edsPaginationCss;
 
 const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination extends HTMLElement {
@@ -236,7 +236,7 @@ const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination exten
         if (newPage !== this.currentPage) {
             this.links = this.links.map((link) => typeof link === 'object' ? Object.assign(Object.assign({}, link), { current: parseInt(link.label) === newPage }) : link);
             const pageChangeEvent = new CustomEvent('page', {
-                detail: newPage,
+                detail: { value: newPage },
                 bubbles: true,
                 composed: true
             });
@@ -246,7 +246,7 @@ const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination exten
     }
     render() {
         const navigableIndex = -1; // Track index for keyboard navigation
-        return (h("div", { key: '753a7e573a09e7fcb66eac9e11e00f690c49543d' }, this.total > 0 && this.mode === 'default' && (h("p", { key: '6286d71622614a835d471812a55d5c6bef37a13e', class: "f-ui-03 text-light mb-28 w-full text-center", "aria-live": "polite", id: "pagination-info" }, h("span", { key: 'daa7bfa31e736a40c46641fed88653d51eeabc67', class: "text-light sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (h("nav", { "aria-label": "Pagination Navigation", "aria-describedby": this.mode === 'default' ? 'pagination-info' : undefined, onKeyDown: this.handleKeyDown }, h("ul", { class: "flex items-center justify-center gap-x-8", role: "list" }, h("li", { class: "mr-auto" }, this.useButtons ? (h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, h("eds-button", { label: this.prevLabel, disabled: this.mode === 'navigator' ? !this.prevUrl : this.isFirstPage(), "aria-label": "Go to previous page", icon: "chevron-left", "icon-pos": "left", size: "small", "icon-small": "true", intent: "ghost", "extra-class": "!p-8 lg:!pr-12 pagination-button", onClick: (event) => {
+        return (h("div", { key: 'bf34cb68555555ef984592b261929cfb5ef93048' }, this.total > 0 && this.mode === 'default' && (h("p", { key: '47b8034e6fd839151cdaff04d4df43fec520ce40', class: "f-ui-03 text-light mb-28 w-full text-center", "aria-live": "polite", id: "pagination-info" }, h("span", { key: 'd9d340393777b7b6e808fa21d38f691f1002b363', class: "text-light sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (h("nav", { "aria-label": "Pagination Navigation", "aria-describedby": this.mode === 'default' ? 'pagination-info' : undefined, onKeyDown: this.handleKeyDown }, h("ul", { class: "flex items-center justify-center gap-x-8", role: "list" }, h("li", { class: "mr-auto" }, this.useButtons ? (h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, h("eds-button", { label: this.prevLabel, disabled: this.mode === 'navigator' ? !this.prevUrl : this.isFirstPage(), "aria-label": "Go to previous page", icon: "chevron-left", "icon-pos": "left", size: "small", "icon-small": "true", intent: "ghost", "extra-class": "!p-8 lg:!pr-12 pagination-button", onClick: (event) => {
                 if (this.mode === 'default' && !this.isFirstPage()) {
                     this.handlePageClick(event, (this.currentPage || 1) - 1);
                 }

package/dist/components/eds-progress-bar2.js

@@ -46,7 +46,7 @@ const EdsProgressBar = /*@__PURE__*/ proxyCustomElement(class EdsProgressBar ext
         ]
             .filter(Boolean)
             .join(' ');
-        return (h("div", { key: '2a620231eaa84ba7e89e05da48175624fdc92d31', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: outerClasses }, h("div", { key: '660e2c84ad358c0de1d9548b730308505e79bcd6', class: fillClasses, style: { width: `${progressValue}%` } }), h("div", { key: '4d0fa2a209d315b658f80906b95a0bf255c82c78', class: "absolute inset-0 flex items-center justify-center pointer-events-none z-10" }, h("span", { key: '0d423e16659d84b2d050f7d60ced4aefeeef9022', class: "text-default f-body-02" }, progressValue, "%"))));
+        return (h("div", { key: '6a0e7cb42770cecd023f07cd26a3e2716a9c9905', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: outerClasses }, h("div", { key: '854743f0fc1b916ec24c7e657349871f2175fc64', class: fillClasses, style: { width: `${progressValue}%` } }), h("div", { key: '74d46ff06e9b41d81563b49c1939a989e32877d5', class: "absolute inset-0 flex items-center justify-center pointer-events-none z-10" }, h("span", { key: '0c5925f73934b71e96c6d006c4f7b3a21d144b74', class: "text-default f-body-02" }, progressValue, "%"))));
     }
     static get style() { return EdsProgressBarStyle0; }
 }, [1, "eds-progress-bar", {

package/dist/components/eds-rating2.js

@@ -70,12 +70,12 @@ const EdsRating = /*@__PURE__*/ proxyCustomElement(class EdsRating extends HTMLE
         this.onSelect(next);
     }
     render() {
-        return (h("div", { key: 'bd72970d86f2dbb21d58671fc85feea3011749b3', id: "rating-buttons", role: "radiogroup", "aria-labelledby": "rating", class: "stars flex space-x-1 my-8", onKeyDown: (e) => this.handleKeyNav(e) }, Array.from({ length: this.ratingCount }, (_, index) => {
+        return (h("div", { key: '764b3b37545e97f028423fd5760b882e6151f767', id: "rating-buttons", role: "group", "aria-labelledby": "rating", class: "stars flex space-x-1 my-8", onKeyDown: (e) => this.handleKeyNav(e) }, Array.from({ length: this.ratingCount }, (_, index) => {
             const starRating = index + 1;
             const isSelected = starRating <= this.selectedRating;
             // Use the mapping text if available; otherwise, fall back to a generic label.
             const checked = this.selectedRating === starRating;
-            return (h("eds-button", { ref: (el) => (this.buttonRefs[index] = el), icon: this.ratingType, role: "radio", "aria-checked": checked, "aria-label": `${starRating} ${this.ratingType}${starRating > 1 ? 's' : ''}`, onClick: () => this.onSelect(starRating), tabIndex: checked || (this.selectedRating === 0 && index === 0) ? 0 : -1, intent: isSelected ? 'primary' : 'ghost', size: "large", "extra-class": "p-2" // Optional padding or styling for the star button
+            return (h("eds-button", { ref: (el) => (this.buttonRefs[index] = el), icon: this.ratingType, "aria-label": `${starRating} ${this.ratingType}${starRating > 1 ? 's' : ''}`, onClick: () => this.onSelect(starRating), tabIndex: checked || (this.selectedRating === 0 && index === 0) ? 0 : -1, intent: isSelected ? 'primary' : 'ghost', size: "large", "extra-class": "p-2" // Optional padding or styling for the star button
             }));
         })));
     }

package/dist/components/eds-section-core2.js

@@ -15,7 +15,7 @@ const EdsSectionCore = /*@__PURE__*/ proxyCustomElement(class EdsSectionCore ext
     }
     render() {
         const TagType = this.tag; // Set dynamic tag type (div or section)
-        return (h(TagType, { key: 'b77b5af1c6f3acbc2696a9608b55199ed4110d71' }, h("eds-section-heading", { key: '464dd4c67d69d1ef3ed1d932081c3195a2b51503', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: 'b5dbd4f55aee2df3bcbc44e21a134544ffd733f7' })));
+        return (h(TagType, { key: '4765a07e798f1a622c25ec145c31345b27e1815d' }, h("eds-section-heading", { key: 'a320ac532863eaabbc1901ab5d9e9d0c14ae7556', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '8de34d1949c0a7d0d83f977d18d36f435444401d' })));
     }
     static get style() { return EdsSectionCoreStyle0; }
 }, [1, "eds-section-core", {

package/dist/components/eds-section-heading2.js

@@ -26,12 +26,12 @@ const EdsSectionHeading = /*@__PURE__*/ proxyCustomElement(class EdsSectionHeadi
     render() {
         const TagType = this.tag; // Dynamically set tag type for the container
         const HeadingTag = this.headingLevel; // Dynamically set heading level
-        return (h(TagType, { key: '4ae69ea354156a0e35a8884a63d7556ead8ada24', class: {
+        return (h(TagType, { key: '960224968ba731050d2b208a07c1faddc386746b', 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: 'a3549fb733687c3ff31f17bdc362275eb0b29e31', class: this.getHeadingClass() }, this.sectionTitle)));
+            } }, h(HeadingTag, { key: 'fc93452bfe1bac130654a187d7d42ee18f273147', class: this.getHeadingClass() }, this.sectionTitle)));
     }
 }, [0, "eds-section-heading", {
         "sectionTitle": [1, "section-title"],

package/dist/components/eds-social-networks2.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { d as defineCustomElement$2 } from './eds-icon-wrapper2.js';
 import { d as defineCustomElement$1 } from './eds-link2.js';
 
-const edsSocialNetworksCss = "blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.f-ui-02-light{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.mt-12{margin-top:0.75rem}.mt-16{margin-top:1rem}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.gap-4{gap:0.25rem}.effect-color{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.effect-focus{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.hover\\:text-default:hover{color:var(--black)}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.rounded-sm{border-radius:8px}";
+const edsSocialNetworksCss = "blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.mt-12{margin-top:0.75rem}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.gap-4{gap:0.25rem}.effect-color{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.effect-focus{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.hover\\:text-default:hover{color:var(--black)}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.rounded-sm{border-radius:8px}";
 const EdsSocialNetworksStyle0 = edsSocialNetworksCss;
 
 const EdsSocialNetworks = /*@__PURE__*/ proxyCustomElement(class EdsSocialNetworks extends HTMLElement {
@@ -54,11 +54,9 @@ const EdsSocialNetworks = /*@__PURE__*/ proxyCustomElement(class EdsSocialNetwor
     /**
      * 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.
-     *
-     * @returns {JSX.Element} The rendered JSX for the component.
      */
     render() {
-        return (h("div", { key: '7241de6d0a20687523e17a4455dff1dfac59a191' }, h("p", { key: '8292c0dde1b3518ada53dddc2ea0134ff3035e83', class: "f-ui-02" }, this.heading), h("ul", { key: 'b30922e6d1f51a52300c889464824fafad775f74', 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": network.label, url: network.url, icon: network.icon, intent: "strong" })))))));
+        return (h("nav", { key: '907adc08d4e02f34994a057146a60b734d6ab81b', "aria-label": "Social media" }, h("p", { key: 'a3620851f2e31d662a812ac74e831f023d2646a4', class: "f-ui-02" }, this.heading), h("ul", { key: 'b8fece03b5ed995a9dba78cf0445a4eb46787bdc', 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" })))))));
     }
     static get style() { return EdsSocialNetworksStyle0; }
 }, [1, "eds-social-networks", {

package/dist/components/eds-spinner2.js

@@ -78,7 +78,7 @@ const EdsSpinner = /*@__PURE__*/ proxyCustomElement(class EdsSpinner extends HTM
                 alignItems: 'center',
                 justifyContent: 'center'
             };
-        return (h(Host, { key: 'cbf9cead7c7c6bc5314c074f7249c920eb60d326' }, h("div", { key: 'd22c71a76af3f53c649e547538e0f1627cd9ecd0', class: "spinner-overlay", style: overlayStyle }, h("span", { key: '83b42f7ee9ba4d356bd82097989b8be1db8a8ef9', class: "spinner", style: spinnerStyle }), this.message && h("p", { key: '0a2c4efe46b8f86a037d29de699534441bf7585e', class: "f-body-01" }, this.message))));
+        return (h(Host, { key: 'dbf06a1430e3a69314ec016937a9b3ba89229353' }, h("div", { key: '12a51b0eed154fd2c6b6ae4ce586630a8f61164a', class: "spinner-overlay", style: overlayStyle }, h("span", { key: '0e63b80c45efec7b226b5f4277fe00e4f7bc4f1b', class: "spinner", style: spinnerStyle }), this.message && h("p", { key: '8625d4589ec26c9513d1dc7a53fa17b9874fcf3c', class: "f-body-01" }, this.message))));
     }
     static get style() { return EdsSpinnerStyle0; }
 }, [1, "eds-spinner", {

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

@@ -4,7 +4,7 @@ import { d as defineCustomElement$4 } from './eds-button2.js';
 import { d as defineCustomElement$3 } from './eds-icon-wrapper2.js';
 import { d as defineCustomElement$2 } from './eds-img2.js';
 
-const edsStepsV2Css = "h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}.steps{position:sticky;margin-left:16px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.steps-img-placeholder{width:100%;height:200px;background:linear-gradient(to bottom, #9CE142, #00C959, #00A595);}.bg-\\[\\#00A595\\]{--tw-bg-opacity:1;background-color:rgb(0 165 149 / var(--tw-bg-opacity))}.relative{position:relative}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.w-full{width:100%}.h-52{height:3.25rem}.h-96{height:6rem}.h-\\[200px\\]{height:200px}.mt-16{margin-top:1rem}.my-16{margin-top:1rem;margin-bottom:1rem}.mb-12{margin-bottom:0.75rem}.last\\:mb-0:last-child{margin-bottom:0rem}.last\\:mt-16:last-child{margin-top:1rem}.border-softer{border:2px solid rgba(0, 0, 0, .1)}.relative{position:relative}.flex{display:flex}.inline-flex{display:inline-flex}.grow{flex-grow:1}.rounded{border-radius:0.25rem}.rounded-lg{border-radius:16px}.rounded-t-lg{border-top-left-radius:16px;border-top-right-radius:16px}.border-2{border-width:2px}.p-8{padding:0.5rem}.p-24{padding:1.5rem}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.top-2{top:0.125rem}.bottom-2{bottom:0.125rem}.left-2{left:0.125rem}.right-2{right:0.125rem}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.overflow-hidden{overflow:hidden}.space-y-8{--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.space-y-16{--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}";
+const edsStepsV2Css = ".steps{position:sticky;margin-left:16px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-40px;top:-2px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4,.steps h5{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before,.steps h5::before{content:counter(step);position:absolute;left:-40px;top:-2px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.steps-img-placeholder{width:100%;height:200px;background:linear-gradient(to bottom, #9CE142, #00C959, #00A595);}.bg-\\[\\#00A595\\]{--tw-bg-opacity:1;background-color:rgb(0 165 149 / var(--tw-bg-opacity))}.relative{position:relative}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.w-full{width:100%}.h-52{height:3.25rem}.h-96{height:6rem}.h-\\[200px\\]{height:200px}.mt-16{margin-top:1rem}.my-16{margin-top:1rem;margin-bottom:1rem}.mb-12{margin-bottom:0.75rem}.last\\:mb-0:last-child{margin-bottom:0rem}.last\\:mt-16:last-child{margin-top:1rem}.border-softer{border:2px solid rgba(0, 0, 0, .1)}.relative{position:relative}.flex{display:flex}.inline-flex{display:inline-flex}.grow{flex-grow:1}.rounded{border-radius:0.25rem}.rounded-lg{border-radius:16px}.rounded-t-lg{border-top-left-radius:16px;border-top-right-radius:16px}.border-2{border-width:2px}.p-8{padding:0.5rem}.p-24{padding:1.5rem}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.top-2{top:0.125rem}.bottom-2{bottom:0.125rem}.left-2{left:0.125rem}.right-2{right:0.125rem}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.overflow-hidden{overflow:hidden}.space-y-8{--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.space-y-16{--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.ml-8{margin-left:0.5rem}.gap-y-16{row-gap:1rem}.gap-x-16{-moz-column-gap:1rem;column-gap:1rem}.flex{display:flex}.grid{display:grid}.hidden{display:none}.block{display:block}.px-8{padding-left:0.5rem;padding-right:0.5rem}.pb-20{padding-bottom:1.25rem}.eds-steps__title{cursor:pointer}";
 const EdsStepsV2Style0 = edsStepsV2Css;
 
 const EdsStepsV2$1 = /*@__PURE__*/ proxyCustomElement(class EdsStepsV2 extends HTMLElement {
@@ -13,15 +13,44 @@ const EdsStepsV2$1 = /*@__PURE__*/ proxyCustomElement(class EdsStepsV2 extends H
         this.__registerHost();
         this.__attachShadow();
         this.step = createEvent(this, "step", 7);
+        this.finished = createEvent(this, "finished", 7);
+        this.next = createEvent(this, "next", 7);
+        this.back = createEvent(this, "back", 7);
+        this.handleTitleClick = (index) => {
+            // If clicking the same title, keep your existing toggle behavior
+            if (index === this.activeStep) {
+                this.activeStep = this.activeStep === index ? -1 : index;
+                this.step.emit(this.activeStep);
+                return;
+            }
+            // Block *forward* jumps when progression is gated by disableNext (boolean)
+            const forwardBlocked = this.type === 'linear' && index > this.activeStep && this.isNextDisabledForCurrent();
+            if (forwardBlocked) {
+                return;
+            }
+            // Allow back (or forward when not gated)
+            this.activeStep = index;
+            this.step.emit(this.activeStep);
+        };
         this.handleNext = () => {
-            this.activeStep = this.activeStep + 1;
-            if (this.activeStep < this.parsedSteps.length) {
+            const lastIndex = this.parsedSteps.length - 1;
+            if (this.activeStep >= lastIndex) {
+                this.finished.emit();
+                this.activeStep = -1; // collapse last step
+                return;
+            }
+            const target = this.activeStep + 1;
+            this.next.emit(target);
+            if (!this.disableNext) {
+                this.activeStep = target;
                 this.step.emit(this.activeStep);
             }
         };
         this.handleBack = () => {
             if (this.activeStep > 0) {
-                this.activeStep = this.activeStep - 1;
+                const target = this.activeStep - 1;
+                this.back.emit(target);
+                this.activeStep = target;
                 this.step.emit(this.activeStep);
             }
         };
@@ -31,6 +60,11 @@ const EdsStepsV2$1 = /*@__PURE__*/ proxyCustomElement(class EdsStepsV2 extends H
         this.imageWidth = undefined;
         this.bg = true;
         this.message = undefined;
+        this.nextLabel = 'Next';
+        this.backLabel = 'Back';
+        this.finishLabel = 'Finish';
+        this.disableNext = false;
+        this.headingLevel = 'h4';
         this.activeStep = 0;
     }
     componentDidLoad() {
@@ -69,24 +103,39 @@ const EdsStepsV2$1 = /*@__PURE__*/ proxyCustomElement(class EdsStepsV2 extends H
             'border-softer effect-focus-within relative rounded-lg border-2'
         ].join(' ');
     }
-    handleStepClick(index) {
-        this.step.emit(index);
-        // In linear mode, update the active step on header click.
-        if (this.type === 'linear') {
-            this.activeStep = index;
-        }
-    }
     /**
      * Parses the steps property into an array of Step objects.
      */
     get parsedSteps() {
         return parseData(this.steps);
     }
+    isNextDisabledForCurrent() {
+        return !!this.disableNext;
+    }
+    /** Render the semantic heading element */
+    renderHeading(title, index) {
+        const Tag = this.headingLevel;
+        if (this.type === 'linear') {
+            const isOpen = this.activeStep === index;
+            const forwardBlocked = index > this.activeStep && this.isNextDisabledForCurrent();
+            const onKey = (e) => {
+                if (forwardBlocked) {
+                    return;
+                }
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.handleTitleClick(index);
+                }
+            };
+            return (h(Tag, { class: `eds-steps__title ${forwardBlocked ? 'is-disabled' : ''}`, role: "button", tabindex: forwardBlocked ? -1 : 0, "aria-disabled": forwardBlocked ? 'true' : 'false', "aria-expanded": isOpen, "aria-controls": `eds-step-panel-${index}`, onClick: () => !forwardBlocked && this.handleTitleClick(index), onKeyDown: onKey }, title));
+        }
+        return h(Tag, { class: "eds-steps__title" }, title);
+    }
     render() {
         const steps = this.parsedSteps;
-        return (h("div", { key: 'bbcec2dd9a5096eb0cecf0d413892e5708822f52', 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 bg-[#00A595] rounded-t-lg border-2" }, h("div", { class: "p-24" }, h("span", { class: "text-inverse f-heading-04 " }, this.message))))), h("div", { key: 'db0618aad7d5986fcb0889f1c439be73f83a00df', class: "p-8" }, this.type === 'linear' ? (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: index === 0 ? 'step' : 'step space-y-16', key: index }, h("h3", { onClick: () => this.handleStepClick(index) }, step.title), this.activeStep === index && (h("div", { class: "content" }, h("slot", { name: `step-${index}` }, h("div", { class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16', innerHTML: step.content })), h("eds-button", { label: index === steps.length - 1 ? 'Finish' : 'Continue', intent: "primary", class: "next-btn", onClick: this.handleNext }), h("eds-button", { label: "Back", intent: "ghostInverse", onClick: this.handleBack, disabled: index === 0, "extra-class": index === 0 ? 'hidden' : 'ml-8 block' })))))))) : (
+        return (h("div", { key: 'b486aa34dfab4902cd6569cc2ce228104ca536cd', 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 bg-[#00A595] rounded-t-lg border-2" }, h("div", { class: "p-24" }, h("span", { class: "text-inverse f-heading-04 " }, this.message))))), h("div", { key: 'e2a928ecb67caed4885c9e364621b422249610f1', class: "pb-20 px-8" }, this.type === 'linear' ? (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: index === 0 ? 'step' : 'step space-y-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: index === steps.length - 1 ? 'f-body-02 text-lighter' : 'f-body-02 text-lighter', innerHTML: step.content })), h("div", { class: "flex items-center" }, 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: index === steps.length - 1 ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", iconSmall: true, onClick: this.handleNext, disabled: this.disableNext, size: "small", class: "ml-8" }))))))))) : (
         // Static mode: show all steps with their content.
-        h("div", { class: "steps space-y-8" }, steps.map((step, index) => (h("div", { class: "step", key: index }, h("h3", { onClick: () => this.handleStepClick(index) }, step.title), h("div", { class: "content" }, h("slot", { name: `step-${index}` }, h("div", { class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16', innerHTML: step.content })))))))))));
+        h("div", { class: "steps space-y-8" }, 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("slot", { name: `step-${index}` }, h("div", { class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter', innerHTML: step.content })))))))))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -100,6 +149,11 @@ const EdsStepsV2$1 = /*@__PURE__*/ proxyCustomElement(class EdsStepsV2 extends H
         "imageWidth": [2, "image-width"],
         "bg": [4],
         "message": [1],
+        "nextLabel": [1, "next-label"],
+        "backLabel": [1, "back-label"],
+        "finishLabel": [1, "finish-label"],
+        "disableNext": [4, "disable-next"],
+        "headingLevel": [513, "heading-level"],
         "activeStep": [32]
     }, undefined, {
         "activeStep": ["activeStepChanged"]

package/dist/components/eds-steps2.js

@@ -3,7 +3,7 @@ import { p as parseData } from './sharedUtils.js';
 import { d as defineCustomElement$2 } from './eds-button2.js';
 import { d as defineCustomElement$1 } from './eds-icon-wrapper2.js';
 
-const edsStepsCss = ".steps{position:sticky;margin-left:16px;margin-bottom:12px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.my-16{margin-top:1rem;margin-bottom:1rem}.mb-28{margin-bottom:1.75rem}";
+const edsStepsCss = ".steps{position:sticky;margin-left:16px;margin-bottom:12px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-40px;top:-2px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4,.steps h5{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before,.steps h5::before{content:counter(step);position:absolute;left:-40px;top:-2px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.my-16{margin-top:1rem;margin-bottom:1rem}.mt-16{margin-top:1rem}.mb-28{margin-bottom:1.75rem}.ml-8{margin-left:0.5rem}.gap-y-16{row-gap:1rem}.gap-x-16{-moz-column-gap:1rem;column-gap:1rem}.flex{display:flex}.grid{display:grid}.hidden{display:none}.block{display:block}.cursor-pointer{cursor:pointer}.eds-steps__title{cursor:pointer}";
 const EdsStepsStyle0 = edsStepsCss;
 
 const EdsSteps = /*@__PURE__*/ proxyCustomElement(class EdsSteps extends HTMLElement {
@@ -12,33 +12,70 @@ const EdsSteps = /*@__PURE__*/ proxyCustomElement(class EdsSteps extends HTMLEle
         this.__registerHost();
         this.__attachShadow();
         this.step = createEvent(this, "step", 7);
-        this.handleNext = () => {
-            this.activeStep = this.activeStep + 1;
-            if (this.activeStep < this.parsedSteps.length) {
+        this.finished = createEvent(this, "finished", 7);
+        this.next = createEvent(this, "next", 7);
+        this.back = createEvent(this, "back", 7);
+        this.handleTitleClick = (index) => {
+            // 1) If clicking the current title, keep your existing toggle behavior
+            if (index === this.activeStep) {
+                this.activeStep = this.activeStep === index ? -1 : index;
                 this.step.emit(this.activeStep);
+                return;
+            }
+            // 2) In linear mode, block jumping *forward* when current step is gated
+            const forwardBlocked = this.type === 'linear' && index > this.activeStep && this.isNextDisabledFor(this.activeStep);
+            if (forwardBlocked) {
+                return;
+            } // do nothing when Next/Finish would be disabled
+            // 3) Allow jumping back or forward when not gated
+            this.activeStep = index;
+            this.step.emit(this.activeStep);
+        };
+        this.handleNext = () => {
+            const lastIndex = this.parsedSteps.length - 1;
+            if (this.activeStep >= lastIndex) {
+                this.activeStep = -1;
+                this.finished.emit();
+                return;
+            }
+            const target = this.activeStep + 1;
+            this.next.emit(target);
+            if (this.isNextDisabledFor(this.activeStep)) {
+                return;
+            } // block advance only if current is disabled
+            this.activeStep = target;
+            this.step.emit(this.activeStep);
+            // 2) if using the boolean form, clear it when moving away from a step
+            if (!Array.isArray(this.disableNext)) {
+                this.disableNext = false;
             }
         };
         this.handleBack = () => {
             if (this.activeStep > 0) {
-                this.activeStep = this.activeStep - 1;
+                const target = this.activeStep - 1;
+                this.back.emit(target);
+                this.activeStep = target;
                 this.step.emit(this.activeStep);
+                // also clear boolean form on back
+                if (!Array.isArray(this.disableNext)) {
+                    this.disableNext = false;
+                }
             }
         };
         this.steps = [];
         this.type = 'static';
+        this.nextLabel = 'Next';
+        this.backLabel = 'Back';
+        this.finishLabel = 'Finish';
+        this.disableNext = false;
+        this.headingLevel = 'h4';
         this.activeStep = 0;
     }
-    /**
-     * Lifecycle method that runs when the component has fully loaded.
-     * It emits a custom event for each `eds-button` element contained within the breadcrumb.
-     */
     componentDidLoad() {
         var _a;
         if (this.type === 'linear') {
             const btns = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('eds-button');
-            btns === null || btns === void 0 ? void 0 : btns.forEach((btn) => {
-                this.emitContext(btn);
-            });
+            btns === null || btns === void 0 ? void 0 : btns.forEach((btn) => this.emitContext(btn));
         }
     }
     activeStepChanged(newValue) {
@@ -46,19 +83,10 @@ const EdsSteps = /*@__PURE__*/ proxyCustomElement(class EdsSteps extends HTMLEle
             var _a;
             const activeStepContainer = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.step')[newValue];
             if (activeStepContainer) {
-                const btns = activeStepContainer.querySelectorAll('eds-button');
-                btns.forEach((btn) => {
-                    this.emitContext(btn);
-                });
+                activeStepContainer.querySelectorAll('eds-button').forEach((btn) => this.emitContext(btn));
             }
         }, 50);
     }
-    /**
-     * Emits a custom event called `parentContext` for a given link element.
-     * This event provides context information about the breadcrumb component.
-     *
-     * @param linkElement - The link element to which the event will be dispatched.
-     */
     emitContext(linkElement) {
         const event = new CustomEvent('parentContext', {
             detail: {
@@ -68,26 +96,43 @@ const EdsSteps = /*@__PURE__*/ proxyCustomElement(class EdsSteps extends HTMLEle
         });
         linkElement.dispatchEvent(event);
     }
-    handleStepClick(index) {
-        this.step.emit(index);
-        // In linear mode, update the active step on header click.
-        if (this.type === 'linear') {
-            this.activeStep = index;
-        }
-    }
-    /**
-     * Parse the JSON string into an array of steps.
-     */
     get parsedSteps() {
         return parseData(this.steps);
     }
+    isNextDisabledFor(index) {
+        return Array.isArray(this.disableNext)
+            ? !!this.disableNext[index] // per-step
+            : index === this.activeStep && !!this.disableNext; // only active step
+    }
+    /** Render the semantic heading element as a clickable control only in linear mode */
+    renderHeading(title, index) {
+        const Tag = this.headingLevel;
+        if (this.type === 'linear') {
+            const forwardBlocked = index > this.activeStep && this.isNextDisabledFor(this.activeStep);
+            const onKey = (e) => {
+                if (forwardBlocked) {
+                    return;
+                }
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.handleTitleClick(index);
+                }
+            };
+            const isOpen = this.activeStep === index;
+            return (h(Tag, { class: `eds-steps__title ${forwardBlocked ? 'is-disabled' : ''}`, role: "button", tabindex: forwardBlocked ? -1 : 0, "aria-disabled": forwardBlocked ? 'true' : 'false', "aria-expanded": isOpen, "aria-controls": `eds-step-panel-${index}`, onClick: () => !forwardBlocked && this.handleTitleClick(index), onKeyDown: onKey }, title));
+        }
+        return h(Tag, { class: "eds-steps__title" }, title);
+    }
     render() {
         const steps = this.parsedSteps;
         if (this.type === 'linear') {
-            return (h("div", null, h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step mb-28", key: index }, h("h3", { onClick: () => this.handleStepClick(index) }, step.title), this.activeStep === index && (h("div", { class: "content" }, h("slot", { name: `step-${index}` }, h("div", { class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16', innerHTML: step.content })), h("eds-button", { label: index === steps.length - 1 ? 'Finish' : 'Continue', intent: "primary", class: "next-btn", onClick: this.handleNext }), h("eds-button", { label: "Back", intent: "ghostInverse", onClick: this.handleBack, disabled: index === 0, "extra-class": index === 0 ? 'hidden' : 'ml-8 block' })))))))));
+            return (h("div", { class: "steps" }, steps.map((step, index) => {
+                const isLast = index === steps.length - 1;
+                return (h("div", { class: "step mb-28", 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: isLast ? 'f-body-02 text-lighter' : 'f-body-02 text-lighter', innerHTML: step.content })), h("div", { class: "flex items-center mt-16" }, 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: "ml-8" })), h("slot", { name: `actions-${index}` })))));
+            })));
         }
-        // Static mode: show all steps with their content, no navigation buttons.
-        return (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step mb-28", key: index }, h("h3", null, step.title), h("div", { class: "content" }, h("slot", { name: `step-${index}` }, h("div", { class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16', innerHTML: step.content }))))))));
+        // Static: no navigation buttons
+        return (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step mb-28", key: index }, this.renderHeading(step.title, index), h("div", { class: "content", id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16', innerHTML: step.content }))))))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -97,6 +142,11 @@ const EdsSteps = /*@__PURE__*/ proxyCustomElement(class EdsSteps extends HTMLEle
 }, [1, "eds-steps", {
         "steps": [1],
         "type": [1],
+        "nextLabel": [1, "next-label"],
+        "backLabel": [1, "back-label"],
+        "finishLabel": [1, "finish-label"],
+        "disableNext": [1028, "disable-next"],
+        "headingLevel": [513, "heading-level"],
         "activeStep": [32]
     }, undefined, {
         "activeStep": ["activeStepChanged"]

package/dist/components/eds-switch.js

@@ -53,11 +53,11 @@ const EdsSwitch$1 = /*@__PURE__*/ proxyCustomElement(class EdsSwitch extends HTM
                     : this.labelOff
                 : 'Toggle switch'
             : undefined;
-        return (h("div", { key: 'f4c99a2ec360af6030de11698bab82833b3f415f', class: "switch-container" }, this.labelOff && (h("span", { key: '8bb8d063e744c194c0d44a0c371ae8224f9611cb', id: `${switchId}-off`, class: "switch-label switch-label--off mr-8" }, this.labelOff)), h("button", { key: 'ccc49c8ac6f639707c90822e24f3ae3ab8f2c26c', id: switchId, tabindex: this.disabled ? '-1' : '0', type: "button", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-labelledby": labelledBy.length > 0 ? labelledBy.join(' ') : undefined, "aria-label": accessibleLabel, class: {
+        return (h("div", { key: 'd73bf797be76e256e065ab8b4fbe68a44802d3f1', class: "switch-container" }, this.labelOff && (h("span", { key: 'f4897e3d9948358a82bd61ea26c86e0d2eba81b5', id: `${switchId}-off`, class: "switch-label switch-label--off mr-8" }, this.labelOff)), h("button", { key: 'a01753fce0fedbf8a25d2cd64c662da8e69fef95', id: switchId, tabindex: this.disabled ? '-1' : '0', type: "button", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-labelledby": labelledBy.length > 0 ? labelledBy.join(' ') : undefined, "aria-label": accessibleLabel, class: {
                 switch: true,
                 'switch--checked': this.checked,
                 'switch--disabled': this.disabled
-            }, onClick: this.toggleSwitch, onKeyDown: this.handleKeyDown, disabled: this.disabled }, h("span", { key: '2275930bc9909c0a95c6c10e28f715fe1afe9294', class: "switch-handle" })), this.labelOn && (h("span", { key: 'd789fd15943c1fadf1f87c55059261eaf5e05a8f', id: `${switchId}-on`, class: "switch-label switch-label--on ml-8" }, this.labelOn))));
+            }, onClick: this.toggleSwitch, onKeyDown: this.handleKeyDown, disabled: this.disabled }, h("span", { key: 'eee315ce803b246cbe73e9d42635cbaa775febdb', class: "switch-handle" })), this.labelOn && (h("span", { key: 'f1229ffea8041dea2237a032292a4465fc76e216', id: `${switchId}-on`, class: "switch-label switch-label--on ml-8" }, this.labelOn))));
     }
     get el() { return this; }
     static get style() { return EdsSwitchStyle0; }