@ebrains/components 2.0.0 → 2.2.0

package/dist/components/eds-pagination2.js

@@ -1,8 +1,9 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+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-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 {
@@ -10,17 +11,65 @@ const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination exten
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * Handles keyboard navigation within the pagination
+         */
+        this.handleKeyDown = (e) => {
+            if (this.mode !== 'default' || !this.useButtons) {
+                return;
+            }
+            const navigableItems = this.getNavigableItems();
+            if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+                e.preventDefault();
+                const increment = e.key === 'ArrowRight' ? 1 : -1;
+                let currentIndex = this.focusedIndex;
+                // If no item is focused, start from current page or first item
+                if (currentIndex === -1) {
+                    const currentPageIndex = navigableItems.findIndex((item) => item.type === 'page' && item.page === this.currentPage);
+                    currentIndex = currentPageIndex !== -1 ? currentPageIndex : 0;
+                }
+                let newIndex = currentIndex + increment;
+                // Wrap around navigation
+                if (newIndex >= navigableItems.length) {
+                    newIndex = 0;
+                }
+                else if (newIndex < 0) {
+                    newIndex = navigableItems.length - 1;
+                }
+                this.focusedIndex = newIndex;
+                this.focusPaginationItem(newIndex);
+            }
+            else if (e.key === 'Home') {
+                e.preventDefault();
+                this.focusedIndex = 0;
+                this.focusPaginationItem(0);
+            }
+            else if (e.key === 'End') {
+                e.preventDefault();
+                const lastIndex = navigableItems.length - 1;
+                this.focusedIndex = lastIndex;
+                this.focusPaginationItem(lastIndex);
+            }
+        };
+        /**
+         * Handles focus events for pagination items
+         */
+        this.handleItemFocus = (index) => {
+            this.focusedIndex = index;
+        };
         this.currentPage = undefined;
         this.lastPage = undefined;
         this.perPage = 10;
         this.total = 0;
         this.url = '';
         this.mode = 'default';
+        this.useButtons = true;
         this.prevLabel = 'Prev';
         this.nextLabel = 'Next';
         this.prevUrl = '';
         this.nextUrl = '';
         this.links = [];
+        this.focusedIndex = -1;
     }
     /** Lifecycle hook to generate pagination links on component load */
     componentWillLoad() {
@@ -29,24 +78,17 @@ const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination exten
         }
     }
     componentDidLoad() {
-        // Emit context for each eds-link element after the component is fully loaded
-        const links = this.hostEl.shadowRoot.querySelectorAll('eds-link');
-        links.forEach((lnk) => {
-            this.emitContext(lnk);
-        });
-        /*if (links.length > 0) {
-          // Emit context for the first link
-          this.emitContext(links[0]);
-    
-          // Emit context for the last link, if it's different from the first
-          if (links.length > 1) {
-            this.emitContext(links[links.length - 1]);
-          }
-        }*/
+        // Only emit context for links, not buttons
+        if (!this.useButtons) {
+            const links = this.hostEl.shadowRoot.querySelectorAll('eds-link');
+            links.forEach((lnk) => {
+                this.emitContext(lnk);
+            });
+        }
     }
     /**
      * Emits a custom event called `parentContext` for a given link element.
-     * This event provides context information about the breadcrumb component.
+     * This event provides context information about the pagination component.
      *
      * @param linkElement - The link element to which the event will be dispatched.
      */
@@ -64,6 +106,34 @@ const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination exten
             this.generateLinks();
         }
     }
+    /**
+     * Gets all navigable pagination items for keyboard navigation
+     */
+    getNavigableItems() {
+        const items = [];
+        // Previous button
+        items.push({ type: 'prev', disabled: this.isFirstPage() });
+        // Page numbers
+        this.links.forEach((link) => {
+            if (typeof link === 'object') {
+                items.push({ type: 'page', page: parseInt(link.label), disabled: false });
+            }
+        });
+        // Next button
+        items.push({ type: 'next', disabled: this.isLastPage() });
+        return items.filter((item) => !item.disabled);
+    }
+    /**
+     * Focuses a specific pagination item by index
+     */
+    focusPaginationItem(index) {
+        var _a;
+        const buttons = (_a = this.hostEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.pagination-button');
+        const targetButton = buttons === null || buttons === void 0 ? void 0 : buttons[index];
+        if (targetButton) {
+            targetButton.focus();
+        }
+    }
     /**
      * Checks if the current page is the first page
      * @returns {boolean} - true if current page is the first page
@@ -86,7 +156,7 @@ const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination exten
     generateLink(page) {
         const urlHasQuery = this.url.includes('?');
         return {
-            ariaLabel: `Page ${page}`,
+            ariaLabel: `Go to page ${page}`,
             url: `${this.url}${urlHasQuery ? '&' : '?'}page=${page}`,
             label: page.toString(),
             current: this.currentPage === page,
@@ -106,7 +176,6 @@ const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination exten
      * Creates a pagination range based on delta, current, and total pages
      * @param {number} current - Current page number
      * @param {number} total - Total number of pages
-     * @param {number} delta - Range of pages to display around the current page
      * @returns {(number | string)[]} - Range of page numbers or ellipses
      */
     getPaginationGenerator(current, total) {
@@ -121,7 +190,7 @@ const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination exten
         else {
             // Always show the first page
             range.push(1);
-            // Add ellipsis if there’s a gap between the first page and the current range start
+            // Add ellipsis if there's a gap between the first page and the current range start
             if (current - delta > 2) {
                 range.push('...');
             }
@@ -129,7 +198,7 @@ const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination exten
             for (let i = Math.max(2, current - delta); i <= Math.min(total - 1, current + delta); i++) {
                 range.push(i);
             }
-            // Add ellipsis if there’s a gap between the current range end and the last page
+            // Add ellipsis if there's a gap between the current range end and the last page
             if (current + delta < total - 1) {
                 range.push('...');
             }
@@ -144,9 +213,11 @@ const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination exten
      */
     pageResults() {
         if (this.total > 0) {
+            const start = this.perPage * ((this.currentPage || 1) - 1) + 1;
+            const end = Math.min(this.perPage * (this.currentPage || 1), this.total);
             return this.total > this.perPage
-                ? `${this.perPage * ((this.currentPage || 1) - 1) + 1} - ${this.perPage * (this.currentPage || 1) >= this.total ? this.total : this.perPage * (this.currentPage || 1)} of ${this.total}`
-                : `${this.total}`;
+                ? `Showing ${start} to ${end} of ${this.total} results`
+                : `Showing ${this.total} result${this.total !== 1 ? 's' : ''}`;
         }
         return '';
     }
@@ -159,11 +230,13 @@ const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination exten
         if (this.mode === 'navigator') {
             return; // No page clicking logic for navigator mode
         }
-        event.preventDefault(); // Prevent default link navigation
+        if (this.useButtons) {
+            event.preventDefault(); // Prevent default for buttons
+        }
         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
             });
@@ -172,38 +245,25 @@ const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination exten
         }
     }
     render() {
-        return (h("div", { key: '978896bd8c550afdc30281e1a8d9858022857551' }, this.total > 0 && this.mode === 'default' && (h("p", { key: '10781adbf2c4754580c31eecc180fc426b5e09a1', class: "f-ui-03 text-lightest mb-28 w-full text-center" }, h("span", { key: '29765740419772ac83736495c859d2d75097904c', class: "sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (h("nav", { "aria-label": "Pagination" }, h("ul", { class: "flex items-center justify-center gap-x-8" }, h("li", { class: "mr-auto" }, h("eds-link", { label: this.prevLabel, url: this.mode === 'navigator'
-                ? this.prevUrl || '#' // Use prevUrl if provided, otherwise disable with '#'
+        const navigableIndex = -1; // Track index for keyboard navigation
+        return (h("div", { key: '9379c40daaca176e67fb59918f1ca387cb4759b9' }, this.total > 0 && this.mode === 'default' && (h("p", { key: 'd09f7f6b7de136987d5b52564bc60afb3775299a', class: "f-ui-03 text-light mb-28 w-full text-center", "aria-live": "polite", id: "pagination-info" }, h("span", { key: '4af8f097a79c8fb0495838f06424f43e5e5dcddc', 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);
+                }
+            } }))) : (h("eds-link", { label: this.prevLabel, url: this.mode === 'navigator'
+                ? this.prevUrl || '#'
                 : this.isFirstPage()
                     ? '#'
-                    : this.generateLink(this.currentPage - 1).url, disabled: this.mode === 'navigator'
-                ? !this.prevUrl // Disable if prevUrl is not provided
-                : this.isFirstPage(), "aria-label": "Previous page", icon: "chevron-left", "icon-pos": "left", size: "small", "icon-small": "true", intent: "strong", "hide-label-on-small-screen": true, class: "!p-8 lg:!pr-12", onClick: (event) => {
-                if (this.mode === 'default') {
-                    if (this.isFirstPage()) {
-                        event.preventDefault(); // Prevent click if disabled
-                    }
-                    else {
-                        this.handlePageClick(event, (this.currentPage || 1) - 1);
-                    }
+                    : this.generateLink(this.currentPage - 1).url, 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: "strong", "hide-label-on-small-screen": true, class: "!p-8 lg:!pr-12" }))), this.mode === 'default' &&
+            this.links.map((link, index) => (h("li", { key: index, class: "f-ui-02 flex h-36 items-center justify-center" }, typeof link === 'string' ? (h("span", { class: "flex items-center justify-center", "aria-hidden": "true" }, link)) : this.useButtons ? (h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, h("eds-button", { label: link.label, "aria-label": link.current ? `Current page, page ${link.label}` : `Go to page ${link.label}`, "aria-current": link.current ? 'page' : undefined, size: "small", "extra-class": "!p-8 pagination-button", intent: link.current ? 'secondary' : 'ghost', onClick: (event) => this.handlePageClick(event, parseInt(link.label)) }))) : (h("eds-link", { url: link.url, "aria-label": link.ariaLabel, label: link.label, current: link.current, "aria-current": link.current ? 'page' : undefined, size: "small", class: "!p-8", intent: link.current ? 'secondary' : 'ghost', onClick: (event) => this.handlePageClick(event, parseInt(link.label)) }))))), h("li", { class: "ml-auto" }, this.useButtons ? (h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, h("eds-button", { label: this.nextLabel, disabled: this.mode === 'navigator' ? !this.nextUrl : this.isLastPage(), "aria-label": "Go to next page", size: "small", "icon-small": "true", icon: "chevron-right", intent: "ghost", "extra-class": "!p-8 lg:!pl-12 pagination-button", onClick: (event) => {
+                if (this.mode === 'default' && !this.isLastPage()) {
+                    this.handlePageClick(event, (this.currentPage || 1) + 1);
                 }
-            } })), this.mode === 'default' &&
-            this.links.map((link, index) => (h("li", { key: index, class: "f-ui-02 flex h-36 items-center justify-center" }, typeof link === 'string' ? (h("span", { class: "flex items-center justify-center" }, link)) : (h("eds-link", { url: link.url, "aria-label": link.ariaLabel, label: link.label, current: link.current, size: "small", class: "!p-8", intent: link.current ? 'secondary' : 'ghost', onClick: (event) => this.handlePageClick(event, parseInt(link.label)) }))))), h("li", { class: "ml-auto" }, h("eds-link", { label: this.nextLabel, url: this.mode === 'navigator'
-                ? this.nextUrl || '#' // Use nextUrl if provided, otherwise disable with '#'
+            } }))) : (h("eds-link", { label: this.nextLabel, url: this.mode === 'navigator'
+                ? this.nextUrl || '#'
                 : this.isLastPage()
                     ? '#'
-                    : this.generateLink(this.currentPage + 1).url, disabled: this.mode === 'navigator'
-                ? !this.nextUrl // Disable if nextUrl is not provided
-                : this.isLastPage(), "aria-label": "Next page", size: "small", "icon-small": "true", icon: "chevron-right", intent: "strong", "hide-label-on-small-screen": true, class: "!p-8 lg:!pl-12 flex items-center gap-1 py-4 transition-colors", onClick: (event) => {
-                if (this.mode === 'default') {
-                    if (this.isLastPage()) {
-                        event.preventDefault(); // Prevent click if disabled
-                    }
-                    else {
-                        this.handlePageClick(event, (this.currentPage || 1) + 1);
-                    }
-                }
-            } }))))) : null));
+                    : this.generateLink(this.currentPage + 1).url, disabled: this.mode === 'navigator' ? !this.nextUrl : this.isLastPage(), "aria-label": "Go to next page", size: "small", "icon-small": "true", icon: "chevron-right", intent: "strong", "hide-label-on-small-screen": true, class: "!p-8 lg:!pl-12 flex items-center gap-1 py-4 transition-colors" })))))) : null));
     }
     get hostEl() { return this; }
     static get watchers() { return {
@@ -218,11 +278,13 @@ const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination exten
         "total": [2],
         "url": [1],
         "mode": [1],
+        "useButtons": [4, "use-buttons"],
         "prevLabel": [1, "prev-label"],
         "nextLabel": [1, "next-label"],
         "prevUrl": [1, "prev-url"],
         "nextUrl": [1, "next-url"],
-        "links": [32]
+        "links": [32],
+        "focusedIndex": [32]
     }, undefined, {
         "currentPage": ["onPageOrLastPageChange"],
         "lastPage": ["onPageOrLastPageChange"]
@@ -231,13 +293,18 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["eds-pagination", "eds-icon-wrapper", "eds-link"];
+    const components = ["eds-pagination", "eds-button", "eds-icon-wrapper", "eds-link"];
     components.forEach(tagName => { switch (tagName) {
         case "eds-pagination":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, EdsPagination);
             }
             break;
+        case "eds-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
         case "eds-icon-wrapper":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();

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: '8406651d280d0a7f55ac627aa08fed80ff01028e', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: outerClasses }, h("div", { key: '0b784248450d7766879be03a2e1f83484090da2c', class: fillClasses, style: { width: `${progressValue}%` } }), h("div", { key: '421253aa1f8dd3ea83936452607c4bcd49f47eb3', class: "absolute inset-0 flex items-center justify-center pointer-events-none z-10" }, h("span", { key: 'ae649fcb7ed22741f3fedd129f0c0cb41254b721', class: "text-default f-body-02" }, progressValue, "%"))));
+        return (h("div", { key: '6c273c0fae28e5a1af49eb7e6be7b9fca717a503', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: outerClasses }, h("div", { key: 'a46a83e9086471adde1837e59d909096d59e7882', class: fillClasses, style: { width: `${progressValue}%` } }), h("div", { key: '193f2efa8259e7facacba374fff8087e9702c246', class: "absolute inset-0 flex items-center justify-center pointer-events-none z-10" }, h("span", { key: 'e3454f3507d2a30245671698752a7f0f26baff57', class: "text-default f-body-02" }, progressValue, "%"))));
     }
     static get style() { return EdsProgressBarStyle0; }
 }, [1, "eds-progress-bar", {

package/dist/components/eds-rating2.js

@@ -11,6 +11,7 @@ const EdsRating = /*@__PURE__*/ proxyCustomElement(class EdsRating extends HTMLE
         this.__registerHost();
         this.__attachShadow();
         this.rating = createEvent(this, "rating", 7);
+        this.buttonRefs = [];
         this.ratingType = 'star';
         this.ratingCount = 5;
         this.selectedRating = 0;
@@ -44,16 +45,37 @@ const EdsRating = /*@__PURE__*/ proxyCustomElement(class EdsRating extends HTMLE
      * Handles the click event on a star.
      * @param rating - The selected rating value.
      */
-    handleClick(rating) {
+    onSelect(rating) {
         this.selectedRating = rating;
         this.rating.emit(rating);
+        setTimeout(() => {
+            const btn = this.buttonRefs[rating - 1];
+            btn === null || btn === void 0 ? void 0 : btn.focus();
+        }, 0);
+    }
+    handleKeyNav(e) {
+        const { key } = e;
+        if (!['ArrowRight', 'ArrowLeft', 'ArrowDown', 'ArrowUp'].includes(key)) {
+            return;
+        }
+        e.preventDefault();
+        const increment = key === 'ArrowRight' || key === 'ArrowDown' ? 1 : -1;
+        let next = (this.selectedRating || 1) + increment;
+        if (next > this.ratingCount) {
+            next = 1;
+        }
+        if (next < 1) {
+            next = this.ratingCount;
+        }
+        this.onSelect(next);
     }
     render() {
-        return (h("div", { key: '7f70d2d6691257ba0658ab9500ab7200af28366a', role: "radiogroup", class: "stars flex space-x-1 my-8" }, Array.from({ length: this.ratingCount }, (_, index) => {
+        return (h("div", { key: 'a7fc18897f2901f60432432899da18861e76edf6', 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.
-            return (h("eds-button", { icon: this.ratingType, role: "radio", "aria-checked": isSelected ? 'true' : 'false', "aria-label": this.ratingType, onClick: () => this.handleClick(starRating), tabIndex: this.selectedRating === 0 && index === 0 ? 0 : isSelected ? 0 : -1, intent: isSelected ? 'primary' : 'ghost', size: "large", "extra-class": "p-2" // Optional padding or styling for the star button
+            const checked = this.selectedRating === starRating;
+            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: 'b3469cabf7e1a59c7908f5440b76d0c3bed0395d' }, h("eds-section-heading", { key: '38e11acb4b491579573bee449680776d3ec23de3', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '133fc1150fb7e300544388adc673c1446b36ac39' })));
+        return (h(TagType, { key: '99f87da56df0ac4b5b28ce721288507beb0cd431' }, h("eds-section-heading", { key: '101137aa9637a95580393a52e7f41d71e8ae8e8b', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '0b6a6131d8e1e2528982571cf7ba617736a34173' })));
     }
     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: '1b819df75c9d61eebe7d11b9116dba7278a34d91', class: {
+        return (h(TagType, { key: '2af16d4d21378244ba843b619b3fd4f283b3e179', 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: '8f99c7c15982f9190117f8eb71725af66afd0741', class: this.getHeadingClass() }, this.sectionTitle)));
+            } }, h(HeadingTag, { key: '8caa529d940fd5d2f7e8f49f7b8e5f2572712f9e', 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: '7bd6202c426d23ded6af47b26e025f2d1b42904a' }, h("p", { key: '0c66f58474ff55cc06bd9f3f15f3deb251c9fb87', class: "f-ui-02" }, this.heading), h("ul", { key: '3e082ae50c77e2d8612b823aa3e474672d65d42f', 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: '62692c53f820ff5d6569e42af692063ad8918cdd', "aria-label": "Social media" }, h("p", { key: 'a571612ba3c1b669e0145484bec4d480b17c1979', class: "f-ui-02" }, this.heading), h("ul", { key: 'c0cc02cd5eebf16130f7b09fb8f11319695fdccb', 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: 'b2ba16cd90ebf036143f6ab52b996497464814c1' }, h("div", { key: 'f619fb03d0364ae7032931559d591fab6ad40123', class: "spinner-overlay", style: overlayStyle }, h("span", { key: '7c1e397ab319de1f67320e3836225e3733a483fd', class: "spinner", style: spinnerStyle }), this.message && h("p", { key: 'ddf6e08c8d2d00f114f815bab28b06c19a56cd6d', class: "f-body-01" }, this.message))));
+        return (h(Host, { key: 'b10a5d28d0b06e7b36276fb814e3b8b57b767094' }, h("div", { key: '8f2205bb74775c16660d35f80bf880ac9c39d725', class: "spinner-overlay", style: overlayStyle }, h("span", { key: 'f681700791c6c10ea63473f34719a873757bcf5e', class: "spinner", style: spinnerStyle }), this.message && h("p", { key: 'b0afdd60a6c74fd740626cb7da3402a9a5075e34', 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}";
 const EdsStepsV2Style0 = edsStepsV2Css;
 
 const EdsStepsV2$1 = /*@__PURE__*/ proxyCustomElement(class EdsStepsV2 extends HTMLElement {
@@ -13,15 +13,29 @@ 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.handleNext = () => {
-            this.activeStep = this.activeStep + 1;
-            if (this.activeStep < this.parsedSteps.length) {
+            const lastIndex = this.parsedSteps.length - 1;
+            if (this.activeStep >= lastIndex) {
+                // Finish
+                this.finished.emit();
+                return;
+            }
+            // Next
+            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 +45,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 +88,22 @@ 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);
     }
+    /** Render the semantic heading element */
+    renderHeading(title) {
+        const Tag = this.headingLevel;
+        return h(Tag, null, 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: '1ff00f17a85e9a3a9d7bef23694560acd77e7ee4', 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: 'a0328e80df5d9447cfa5378eb9e45925f1f68c69', 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), this.activeStep === index && (h("div", { class: "content grid gap-y-16" }, 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), 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', innerHTML: step.content })))))))))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -100,6 +117,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"]