@ebrains/components 3.1.0 → 3.2.0

package/dist/components/eds-search-select2.js

@@ -4,7 +4,7 @@ import { d as defineCustomElement$3 } from './eds-input-footer2.js';
 import { d as defineCustomElement$2 } from './eds-input-label2.js';
 import { d as defineCustomElement$1 } from './eds-link2.js';
 
-const edsSearchSelectCss = ":host{display:block;width:100%;font-family:var(--f-ui-02-fontFamily, 'IBM Plex Sans', system-ui, sans-serif)}.eds-ss{position:relative;display:block;width:100%}.eds-ss__labelrow{display:flex;justify-content:space-between;margin-bottom:0.25rem}.eds-ss__hint{margin-top:0.5rem;margin-left:0.5rem;font-family:var(--f-ui-05-fontFamily);font-weight:var(--f-ui-05-fontWeight);font-size:var(--f-ui-05-fontSize);line-height:var(--f-ui-05-lineHeight);letter-spacing:var(--f-ui-05-letterSpacing);color:var(--grey-600)}.eds-ss__control{position:relative}.eds-ss__box{display:flex;flex-wrap:wrap;align-items:center;gap:0.35rem;width:100%;box-sizing:border-box;min-height:2.5rem;padding:6px 0.75rem;padding-right:3.75rem;border-width:2px;border-style:solid;border-color:rgba(0, 0, 0, 0.1);border-radius:8px;background:var(--white, #fff);transition-property:color, background-color, border-color;transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-duration:300ms}.eds-ss__box:hover{border-color:var(--brand-black)}.eds-ss__box:focus-within{border-color:var(--brand-black);outline:3px solid var(--brand-green);outline-offset:2px}.eds-ss__box.is-error{border-color:var(--red-700)}.eds-ss__box.is-disabled{cursor:not-allowed;background-color:var(--grey-300)}.eds-ss__input{flex:1;min-width:6rem;border:none;outline:none;background:transparent;padding:4px 0;color:var(--brand-black);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)}.eds-ss__input::placeholder{color:var(--grey-500)}.eds-ss__input:disabled{cursor:not-allowed;color:var(--grey-500)}.eds-ss__chip{display:inline-flex;align-items:center;gap:0.35rem;padding:4px 0.4rem 4px 0.7rem;background:rgba(0, 200, 123, 0.12);color:var(--brand-green-dark, #00A867);border-radius:6px;font-family:var(--f-ui-02-fontFamily);font-size:var(--f-ui-02-fontSize);font-weight:600;line-height:1.4;max-width:100%}.eds-ss__chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eds-ss__chip-x{flex-shrink:0;border:none;background:none;cursor:pointer;color:var(--brand-green-dark, #00A867);font-size:1.2rem;line-height:1;padding:0 2px}.eds-ss__chip-x:hover{color:var(--brand-black, #07140D)}.eds-ss__clear,.eds-ss__chevron{position:absolute;top:50%;transform:translateY(-50%)}.eds-ss__chevron{right:6px;width:1.75rem;height:1.75rem;display:flex;align-items:center;justify-content:center;background-color:var(--grey-300);border-radius:4px;color:var(--brand-black);pointer-events:none}.eds-ss__clear{right:2.6rem;color:var(--grey-600, #6e6e6e);background:none;border:none;cursor:pointer;font-size:1.05rem;line-height:1}.eds-ss__clear:hover{color:var(--brand-black, #07140D)}.eds-ss__list{position:absolute;z-index:50;left:0;right:0;margin:0.25rem 0 0;padding:0.25rem;list-style:none;max-height:18rem;overflow-y:auto;background:var(--white, #fff);border:2px solid rgba(0, 0, 0, 0.1);border-radius:8px;box-shadow:0 8px 24px rgba(0, 0, 0, 0.12)}.eds-ss__option{padding:0.5rem 0.6rem;border-radius:6px;cursor:pointer;color:var(--brand-black, #07140D);font-family:var(--f-ui-02-fontFamily);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.eds-ss__option.is-active{background:rgba(0, 200, 123, 0.1)}.eds-ss__option.is-selected{font-weight:600;color:var(--brand-green-dark, #00A867)}.eds-ss__status,.eds-ss__more{padding:0.5rem 0.6rem;font-family:var(--f-ui-05-fontFamily);font-size:var(--f-ui-05-fontSize);line-height:var(--f-ui-05-lineHeight);color:var(--grey-600, #6e6e6e)}.eds-ss__status.is-error{color:var(--red-700, #d64545)}.eds-ss__more{border-top:1px solid rgba(0, 0, 0, 0.1);margin-top:0.25rem;font-style:italic}";
+const edsSearchSelectCss = ":host{display:block;width:100%;font-family:var(--f-ui-02-fontFamily, 'IBM Plex Sans', system-ui, sans-serif)}.eds-ss{position:relative;display:block;width:100%}.eds-ss__labelrow{display:flex;justify-content:space-between;margin-bottom:0.25rem}.eds-ss__hint{margin-top:0.5rem;margin-left:0.5rem;font-family:var(--f-ui-05-fontFamily);font-weight:var(--f-ui-05-fontWeight);font-size:var(--f-ui-05-fontSize);line-height:var(--f-ui-05-lineHeight);letter-spacing:var(--f-ui-05-letterSpacing);color:var(--grey-600)}.eds-ss__control{position:relative}.eds-ss__box{display:flex;flex-wrap:wrap;align-items:center;gap:0.35rem;width:100%;box-sizing:border-box;min-height:2.5rem;padding:6px 0.75rem;padding-right:3.75rem;border-width:2px;border-style:solid;border-color:rgba(0, 0, 0, 0.1);border-radius:8px;background:var(--white, #fff);transition-property:color, background-color, border-color;transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-duration:300ms}.eds-ss__box:hover{border-color:var(--brand-black)}.eds-ss__box:focus-within{border-color:var(--brand-black);outline:3px solid var(--brand-green);outline-offset:2px}.eds-ss__box.is-error{border-color:var(--red-700)}.eds-ss__box.is-disabled{cursor:not-allowed;background-color:var(--grey-300)}.eds-ss__input{flex:1;min-width:6rem;border:none;outline:none;background:transparent;padding:4px 0;color:var(--brand-black);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)}.eds-ss__input::placeholder{color:var(--grey-500);opacity:1}.eds-ss__input:disabled{cursor:not-allowed;color:var(--grey-500)}.eds-ss__chip{display:inline-flex;align-items:center;gap:0.35rem;padding:4px 0.4rem 4px 0.7rem;background:rgba(0, 200, 123, 0.12);color:var(--brand-green-dark, #00A867);border-radius:6px;font-family:var(--f-ui-02-fontFamily);font-size:var(--f-ui-02-fontSize);font-weight:600;line-height:1.4;max-width:100%}.eds-ss__chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eds-ss__chip-x{flex-shrink:0;border:none;background:none;cursor:pointer;color:var(--brand-green-dark, #00A867);font-size:1.2rem;line-height:1;padding:0 2px}.eds-ss__chip-x:hover{color:var(--brand-black, #07140D)}.eds-ss__clear,.eds-ss__chevron{position:absolute;top:50%;transform:translateY(-50%)}.eds-ss__chevron{right:6px;width:1.75rem;height:1.75rem;display:flex;align-items:center;justify-content:center;background-color:var(--grey-300);border-radius:4px;color:var(--brand-black);pointer-events:none}.eds-ss__clear{right:2.6rem;color:var(--grey-600, #6e6e6e);background:none;border:none;cursor:pointer;font-size:1.05rem;line-height:1}.eds-ss__clear:hover{color:var(--brand-black, #07140D)}.eds-ss__list{position:absolute;z-index:50;left:0;right:0;margin:0.25rem 0 0;padding:0.25rem;list-style:none;max-height:18rem;overflow-y:auto;background:var(--white, #fff);border:2px solid rgba(0, 0, 0, 0.1);border-radius:8px;box-shadow:0 8px 24px rgba(0, 0, 0, 0.12)}.eds-ss__option{padding:0.5rem 0.6rem;border-radius:6px;cursor:pointer;color:var(--brand-black, #07140D);font-family:var(--f-ui-02-fontFamily);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.eds-ss__option.is-active{background:rgba(0, 200, 123, 0.1)}.eds-ss__option.is-selected{font-weight:600;color:var(--brand-green-dark, #00A867)}.eds-ss__status,.eds-ss__more{padding:0.5rem 0.6rem;font-family:var(--f-ui-05-fontFamily);font-size:var(--f-ui-05-fontSize);line-height:var(--f-ui-05-lineHeight);color:var(--grey-600, #6e6e6e)}.eds-ss__status.is-error{color:var(--red-700, #d64545)}.eds-ss__more{border-top:1px solid rgba(0, 0, 0, 0.1);margin-top:0.25rem;font-style:italic}.mt-6{margin-top:0.375rem}";
 const EdsSearchSelectStyle0 = edsSearchSelectCss;
 
 const EdsSearchSelect = /*@__PURE__*/ proxyCustomElement(class EdsSearchSelect extends HTMLElement {
@@ -41,8 +41,9 @@ const EdsSearchSelect = /*@__PURE__*/ proxyCustomElement(class EdsSearchSelect e
         this.onKeyDown = (e) => {
             if (e.key === 'ArrowDown') {
                 e.preventDefault();
-                if (!this.open)
+                if (!this.open) {
                     return this.openMenu();
+                }
                 this.activeIndex = Math.min(this.activeIndex + 1, this.visibleItems.length - 1);
             }
             else if (e.key === 'ArrowUp') {
@@ -69,8 +70,9 @@ const EdsSearchSelect = /*@__PURE__*/ proxyCustomElement(class EdsSearchSelect e
         // would be false even for our own clicks and wrongly close on open. composedPath()
         // walks through every shadow boundary and contains our host iff the click was ours.
         this.onDocumentClick = (e) => {
-            if (this.open && !e.composedPath().includes(this.host))
+            if (this.open && !e.composedPath().includes(this.host)) {
                 this.closeMenu();
+            }
         };
         this.name = undefined;
         this.label = undefined;
@@ -130,15 +132,17 @@ const EdsSearchSelect = /*@__PURE__*/ proxyCustomElement(class EdsSearchSelect e
     }
     cacheLabels(opts) {
         (opts || []).forEach((o) => {
-            if (o && o.value != null)
+            if (o && o.value != null) {
                 this.labelCache[String(o.value)] = o.label;
+            }
         });
     }
     /** The current selection as a value array (works for single + multi). */
     get selectedValues() {
         const v = this.value;
-        if (Array.isArray(v))
+        if (Array.isArray(v)) {
             return v.map(String).filter((s) => s !== '');
+        }
         if (typeof v === 'string' && v !== '') {
             return this.multiple ? v.split(',').filter(Boolean) : [v];
         }
@@ -172,10 +176,10 @@ const EdsSearchSelect = /*@__PURE__*/ proxyCustomElement(class EdsSearchSelect e
     // --- Data --------------------------------------------------------------
     filterInline(q) {
         const needle = q.trim().toLowerCase();
-        if (!needle)
+        if (!needle) {
             return this.inlineOptions;
-        return this.inlineOptions.filter((o) => o.label.toLowerCase().includes(needle) ||
-            String(o.value).toLowerCase().includes(needle));
+        }
+        return this.inlineOptions.filter((o) => o.label.toLowerCase().includes(needle) || String(o.value).toLowerCase().includes(needle));
     }
     async fetchRemote(q) {
         this.loading = true;
@@ -184,8 +188,9 @@ const EdsSearchSelect = /*@__PURE__*/ proxyCustomElement(class EdsSearchSelect e
             const params = new URLSearchParams({ [this.searchParam]: q, limit: String(this.limit) });
             const url = `${this.apiBase}/datasets/${encodeURIComponent(this.source)}/search?${params}`;
             const resp = await fetch(url);
-            if (!resp.ok)
+            if (!resp.ok) {
                 throw new Error(`Search failed: ${resp.statusText}`);
+            }
             const data = await resp.json();
             this.items = data.items || [];
             this.cacheLabels(this.items);
@@ -228,14 +233,16 @@ const EdsSearchSelect = /*@__PURE__*/ proxyCustomElement(class EdsSearchSelect e
     }
     // --- Interaction -------------------------------------------------------
     openMenu() {
-        if (this.disabled)
+        if (this.disabled) {
             return;
+        }
         this.open = true;
         this.activeIndex = -1;
         // Populate on first open (initial page for remote, full list for inline).
         // Immediate fetch on open — debounce only applies to typing.
-        if (!this.items.length || this.isRemote)
+        if (!this.items.length || this.isRemote) {
             this.runSearch(this.query, true);
+        }
     }
     closeMenu() {
         this.open = false;
@@ -278,14 +285,28 @@ const EdsSearchSelect = /*@__PURE__*/ proxyCustomElement(class EdsSearchSelect e
     render() {
         const selected = this.selectedValues;
         const hasSelection = selected.length > 0;
-        const inputValue = this.multiple ? this.query : (this.open ? this.query : this.selectedLabel);
+        const inputValue = this.multiple ? this.query : this.open ? this.query : this.selectedLabel;
         const placeholder = this.multiple
-            ? (hasSelection ? '' : this.placeholder)
-            : (hasSelection && !this.open ? this.selectedLabel : this.placeholder);
-        return (h("div", { key: 'f5224332aa395be2a9dd8a1312dcd1b631ad2129', class: "eds-ss" }, (this.label || this.hint) && (h("div", { key: 'e28da19abdedb4107a7b7be2a59e6444780f8251', class: "eds-ss__labelrow" }, this.label && (h("eds-input-label", { key: '81933dbc2d370b8ddbbf8f4286c3420e4f140ca7', name: `${this.name}-input`, label: this.label, required: this.required, disabled: this.disabled })), this.hint && (h("p", { key: '1ff5b7a62cc20bb2ce710ca2e06c728d94aef895', id: `${this.name}-hint`, class: "eds-ss__hint" }, this.hint)))), h("div", { key: '84fbdccc6326707ac854e06d7209dd149d9c26a7', class: "eds-ss__control relative" }, h("div", { key: 'ae99c3d9c706fa6619459d8d6c9baa3df610169e', class: { 'eds-ss__box': true, 'is-error': this.error || !!this.fetchError, 'is-disabled': this.disabled } }, this.multiple &&
-            selected.map((v) => (h("span", { class: "eds-ss__chip", key: v }, h("span", { class: "eds-ss__chip-label" }, this.labelFor(v)), !this.disabled && (h("button", { type: "button", class: "eds-ss__chip-x", "aria-label": `Remove ${this.labelFor(v)}`, onMouseDown: (e) => { e.preventDefault(); this.removeValue(v, e); } }, "\u00D7"))))), h("input", { key: '18dcd5787c7636c09be7285fb85b77f5cae334c8', id: `${this.name}-input`, class: "eds-ss__input", type: "text", role: "combobox", autocomplete: "off", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": this.listboxId, "aria-autocomplete": "list", placeholder: placeholder, value: inputValue, disabled: this.disabled, required: this.required && !hasSelection, onFocus: () => this.openMenu(), onInput: this.onInput, onKeyDown: this.onKeyDown })), !this.multiple && hasSelection && !this.disabled && (h("button", { key: 'c927fa49fb58b7abec13f6d436f1d1452f9644c5', type: "button", class: "eds-ss__clear", "aria-label": "Clear selection", onClick: this.clear }, "\u00D7")), h("span", { key: 'bff4bf41fb388f849ef9c0928f4aa88e065d718d', class: "eds-ss__chevron", "aria-hidden": "true" }, h("eds-icon-wrapper", { key: '7871955d6fc5626914995d51c1b4b3511b60febe', name: "chevron-right", size: 20 }))), this.open && (h("ul", { key: 'e529fe82576be45a0e99d4a020aa4f721b71686b', class: "eds-ss__list", id: this.listboxId, role: "listbox" }, this.loading && h("li", { key: 'fe8d73dfa0d6a5cf7e9bea4220511a22489884f8', class: "eds-ss__status" }, "Searching\u2026"), !this.loading && this.fetchError && h("li", { key: 'b708b1de4eee8e45287fd23f0bf63327032616d6', class: "eds-ss__status is-error" }, this.fetchError), !this.loading && !this.fetchError && this.visibleItems.length === 0 && (h("li", { key: '9400ac7a022f38935f05df3705e2a65acb9d4a04', class: "eds-ss__status" }, "No matches")), !this.loading &&
+            ? hasSelection
+                ? ''
+                : this.placeholder
+            : hasSelection && !this.open
+                ? this.selectedLabel
+                : this.placeholder;
+        return (h("div", { key: 'c07301b4d8b6dceeea092423faeefdb51df5882a', class: "eds-ss" }, (this.label || this.hint) && (h("div", { key: '852ddc433b142caed852c7503d68aab968808480', class: "eds-ss__labelrow" }, this.label && (h("eds-input-label", { key: 'd44b4925954172a7ad5dec8e71b363630fc8cd3b', name: `${this.name}-input`, label: this.label, required: this.required, disabled: this.disabled })), this.hint && (h("p", { key: '964933f90c1526383364fa4a76b6b31846a6e3e0', id: `${this.name}-hint`, class: "eds-ss__hint" }, this.hint)))), h("div", { key: '69b226ececf5431ce220f5686e01f18aba100b8d', class: "eds-ss__control relative" }, h("div", { key: '942ba3e7020e2a9ae1eb4176b1d7b7444368baa3', class: { 'eds-ss__box': true, 'is-error': this.error || !!this.fetchError, 'is-disabled': this.disabled } }, this.multiple &&
+            selected.map((v) => (h("span", { class: "eds-ss__chip", key: v }, h("span", { class: "eds-ss__chip-label" }, this.labelFor(v)), !this.disabled && (h("button", { type: "button", class: "eds-ss__chip-x", "aria-label": `Remove ${this.labelFor(v)}`, onMouseDown: (e) => {
+                    e.preventDefault();
+                    this.removeValue(v, e);
+                } }, "\u00D7"))))), h("input", { key: 'c41ce7b8e648f0c9e688ae94b0a1a25945ad8715', id: `${this.name}-input`, class: "eds-ss__input", type: "text", role: "combobox", autocomplete: "off", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": this.listboxId, "aria-autocomplete": "list", placeholder: placeholder, value: inputValue, disabled: this.disabled, required: this.required && !hasSelection, onFocus: () => this.openMenu(), onInput: this.onInput, onKeyDown: this.onKeyDown })), !this.multiple && hasSelection && !this.disabled && (h("button", { key: '331e43093fc5749fc369bf976119610b2a310576', type: "button", class: "eds-ss__clear", "aria-label": "Clear selection", onClick: this.clear }, "\u00D7")), h("span", { key: '11b78efe2584e65cb533fb88746ad38da47f2b8d', class: "eds-ss__chevron", "aria-hidden": "true" }, h("eds-icon-wrapper", { key: 'ca62bbe9b3f90b1625208584a6b9e5a154acc5be', name: "chevron-right", size: 20 }))), this.open && (h("ul", { key: 'f4739dc147217d1d575494d0bdd83427f898ddc3', class: "eds-ss__list", id: this.listboxId, role: "listbox" }, this.loading && h("li", { key: 'def95414349449021ec318cae0e3990621992e3e', class: "eds-ss__status" }, "Searching\u2026"), !this.loading && this.fetchError && h("li", { key: '32d940c717170d0e53200ff552bf513e3e6e5fe1', class: "eds-ss__status is-error" }, this.fetchError), !this.loading && !this.fetchError && this.visibleItems.length === 0 && (h("li", { key: 'bea6ededb51b4baab76eca8a237d4a740d3478da', class: "eds-ss__status" }, "No matches")), !this.loading &&
             !this.fetchError &&
-            this.visibleItems.map((opt, i) => (h("li", { key: opt.value, class: { 'eds-ss__option': true, 'is-active': i === this.activeIndex, 'is-selected': selected.includes(String(opt.value)) }, role: "option", "aria-selected": selected.includes(String(opt.value)) ? 'true' : 'false', onMouseEnter: () => (this.activeIndex = i), onMouseDown: (e) => { e.preventDefault(); this.select(opt); } }, opt.label))), !this.loading && !this.fetchError && this.hiddenCount > 0 && (h("li", { key: '8e82d65e9da3755ad10ffaf0fc4a45f5bc365a48', class: "eds-ss__more" }, "+", this.hiddenCount, " more \u2014 keep typing to narrow")))), h("eds-input-footer", { key: '0564f006a874a3556118ce99441cbfabc230ac57', name: this.name, message: this.message, error: this.error, "error-message": this.errorMessage })));
+            this.visibleItems.map((opt, i) => (h("li", { key: opt.value, class: {
+                    'eds-ss__option': true,
+                    'is-active': i === this.activeIndex,
+                    'is-selected': selected.includes(String(opt.value))
+                }, role: "option", "aria-selected": selected.includes(String(opt.value)) ? 'true' : 'false', onMouseEnter: () => (this.activeIndex = i), onMouseDown: (e) => {
+                    e.preventDefault();
+                    this.select(opt);
+                } }, opt.label))), !this.loading && !this.fetchError && this.hiddenCount > 0 && (h("li", { key: '8d6fe6aa8041a948a19004a03728b1439469e28e', class: "eds-ss__more" }, "+", this.hiddenCount, " more \u2014 keep typing to narrow")))), h("div", { key: 'dfb6a12b7eff98bd05b674d385db1dc2e6a17ac2', class: "mt-6" }, h("eds-input-footer", { key: '2f0b9dbc247dea65d3c7abea1a6384b496e586b8', name: this.name, message: this.message, error: this.error, "error-message": this.errorMessage }))));
     }
     get host() { return this; }
     static get watchers() { return {

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: '635230d1ec9a0dcc945990a6a58dc3508345d984' }, h("eds-section-heading", { key: '0b6b94df22af707cbd6964132f3a5190b4b7e83c', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '8834c29c25249fb5c384fb5d51866eadb93a97d6' })));
+        return (h(TagType, { key: 'cee3905fc5e268c768fbc58b413ee074591888b7' }, h("eds-section-heading", { key: '9ba05e76c5e348b1209283b7f95a475408758c3b', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '8e5d27261133cd900d13940ce928946b1c378277' })));
     }
     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: '7275284a1158ab982f1e53117b72738d0a001c97', class: {
+        return (h(TagType, { key: '8791e5d816bfdc80087f3f7e5dbab60d0ac4a523', 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: 'a3c68baa56a0337348405c88544225ed7c7ff0ed', class: this.getHeadingClass() }, this.sectionTitle)));
+            } }, h(HeadingTag, { key: 'e2e7ca5effc12e6c9c8c3418c4097920ec80e53e', class: this.getHeadingClass() }, this.sectionTitle)));
     }
 }, [0, "eds-section-heading", {
         "sectionTitle": [1, "section-title"],

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

@@ -60,7 +60,7 @@ const EdsSocialNetworks = /*@__PURE__*/ proxyCustomElement(class EdsSocialNetwor
         const isInverse = this.variant === 'inverse';
         const textClass = isInverse ? 'text-inverse' : '';
         const linkIntent = isInverse ? 'inverse' : 'strong';
-        return (h("nav", { key: '924bdf5a32b65cd0968ad92461cb8203f3305fce', "aria-label": "Social media" }, h("p", { key: 'f406d71ed2d7ff9048e5db05f5ad62566081aa45', class: `f-ui-02 ${textClass}` }, this.heading), h("ul", { key: '40d000bc78780d7ec3c0c9bf2e10ec0a26f3b72e', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { external: true, "aria-label": `EBRAINS on ${network.label}`, url: network.url, icon: network.icon, intent: linkIntent })))))));
+        return (h("nav", { key: '42abfdc0d94bad2fa273de7a476099df0a5103ff', "aria-label": "Social media" }, h("p", { key: 'c2eb9600afd49b5b178392f0f46efd58909f8843', class: `f-ui-02 ${textClass}` }, this.heading), h("ul", { key: 'b71a410550b06d89947ee9475af98c19cbe7e130', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { external: true, "aria-label": `EBRAINS on ${network.label}`, url: network.url, icon: network.icon, intent: linkIntent })))))));
     }
     static get 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: 'c09fa07856848a03aab44bbb56ecdd66a986bb40' }, h("div", { key: '544c653e9e0457d2063eaefc5ff1fe88de89f14e', class: "spinner-overlay", style: overlayStyle }, h("span", { key: 'e389aa572863a265c9aa68d587ad744f1c8db0a7', class: "spinner", style: spinnerStyle }), this.message && h("p", { key: '5e554fe1b870e673c5b3da3ec2a227e92dd9863d', class: "f-ui-01" }, this.message))));
+        return (h(Host, { key: '4b78f045f987eb40289d2829bab08f28324f13d2' }, h("div", { key: '05fcd319080518845630c6fd4bccda02032c3c5f', class: "spinner-overlay", style: overlayStyle }, h("span", { key: 'c1e24a0e3f3f9704ad9a118724f3437124e4f36f', class: "spinner", style: spinnerStyle }), this.message && h("p", { key: '947cd986f00100e950b1c2380b651c6baebca142', class: "f-ui-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 = "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:-41px;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)}.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-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)}.text-center{text-align:center}.text-default{color:var(--brand-black)}.text-accent{color:var(--brand-green)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-light)}.text-lighter{color:var(--grey-dark)}.w-full{width:100%}.h-52{height:3.25rem}.h-96{height:6rem}.h-\\[200px\\]{height:200px}.justify-between{justify-content:space-between}.mt-16{margin-top:1rem}.mt-32{margin-top:2rem}.mt-64{margin-top:4rem}.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:none}.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:0}.p-8{padding:0.5rem}.p-24{padding:1.5rem}.bg-default{background-color:var(--grey-light)}.bg-inverse{background-color:var(--white)}.bg-strongest{background-color:var(--brand-black)}.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}.items-center{align-items:center}.px-8{padding-left:0.5rem;padding-right:0.5rem}.pb-20{padding-bottom:1.25rem}.eds-steps__title[role=\"button\"]{cursor:pointer}.eds-steps__title.is-disabled{cursor:not-allowed;color:rgba(0, 0, 0, 0.5);}.eds-steps__title.is-disabled::before{opacity:1;filter:none}.steps--horizontal{display:flex;flex-direction:column;gap:2rem}.horizontal-indicators{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0}.step-content-aligned{padding-left:0;padding-right:0}.horizontal-step{display:flex;flex-direction:column;align-items:center;gap:0.5rem;cursor:pointer;flex:1;position:relative}.horizontal-step:not(:last-child)::after{content:'';position:absolute;top:1.25rem;left:calc(50% + 2rem);width:calc(100% - 3rem);height:2px;background-color:#e0e0e0;z-index:1}.horizontal-step.is-completed:not(:last-child)::after{background-color:var(--brand-green);}.step-indicator{width:2.5rem;height:2.5rem;border-radius:50%;border:2px solid #e0e0e0;display:flex;align-items:center;justify-content:center;background-color:white;transition:all 0.3s ease;z-index:2}.horizontal-step.is-active .step-indicator{border-color:var(--brand-green-dark);background-color:var(--brand-green-dark);color:var(--white)}.horizontal-step.is-completed .step-indicator{border-color:var(--brand-green-dark);background-color:var(--white)}.horizontal-step.is-disabled{opacity:0.5;cursor:not-allowed}.step-number{font-weight:600;font-size:0.875rem}.step-label{font-size:0.875rem;text-align:center;font-weight:500}.horizontal-step.is-active .step-label{color:var(--brand-green-dark)}.step-content{padding:0.5rem 0;margin-left:calc((100% / var(--step-count, 1)) * 0.20 - 1.25rem);margin-right:calc((100% / var(--step-count, 1)) * 0.20 - 1.25rem)}@media (min-width: 700px){.step-content{padding:1.5rem 0;margin-left:calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem);margin-right:calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem)}}.opacity-50{opacity:0.5}.bg-dark{background-color:var(--grey-light)}.bg-darker{background-color:var(--grey-dark)}.theme-brand.steps h3::before,.theme-brand.steps h4::before,.theme-brand.steps h5::before{background:var(--brand-green);color:var(--brand-black);border-color:var(--brand-green);font-weight:600}.theme-brand.steps h3.is-completed::before,.theme-brand.steps h4.is-completed::before,.theme-brand.steps h5.is-completed::before{content:'';}.theme-brand.steps .step-checkmark-icon{position:absolute;left:-39px;top:0px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;z-index:1}.theme-brand.steps h3 .step-checkmark-icon{left:-41px;width:32px;height:32px;top:2px}.theme-brand .step-indicator{background-color:var(--grey-light)}.theme-brand .horizontal-step.is-active .step-indicator{border-color:var(--brand-green);background-color:var(--brand-green);color:var(--brand-black)}.theme-brand .horizontal-step.is-completed .step-indicator{border-color:var(--brand-green);background-color:var(--brand-green);color:var(--brand-black)}.theme-brand .horizontal-step.is-completed .step-number{display:none}.theme-brand .horizontal-step:not(:last-child)::after{background-color:var(--grey-light);}.theme-brand .horizontal-step.is-completed:not(:last-child)::after{background-color:var(--brand-green)}.theme-brand .horizontal-step.is-active .step-label{color:var(--brand-black);font-weight:600}.theme-brand .step-number{font-weight:600}.theme-default.steps h3::before,.theme-default.steps h4::before,.theme-default.steps h5::before{background:var(--grey-900);color:#fff;border-color:#ccc}.theme-default .step-indicator{background-color:white;border-color:#e0e0e0}.theme-default .horizontal-step.is-active .step-indicator{border-color:var(--brand-green-dark);background-color:var(--brand-green-dark);color:var(--white)}.theme-default .horizontal-step.is-completed .step-indicator{border-color:var(--brand-green-dark);background-color:var(--white)}.theme-default .horizontal-step.is-completed:not(:last-child)::after{background-color:var(--brand-green-dark)}.theme-default .horizontal-step.is-active .step-label{color:var(--brand-green-dark)}.effect-focus-within{outline-width:3px;outline-offset:2px;outline-color:var(--brand-green)}.effect-focus-within:focus-within{outline-style:solid}";
+const edsStepsV2Css = "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:-41px;top:50%;transform:translateY(-50%);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-body{margin-top:16px}@media (max-width: 749px){.steps h3,.steps h4,.steps h5{font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight)}.steps-body{margin-top:32px}}.steps h4::before,.steps h5::before{content:counter(step);position:absolute;left:-40px;top:50%;transform:translateY(-50%);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)}.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-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)}.text-center{text-align:center}.text-default{color:var(--brand-black)}.text-accent{color:var(--brand-green)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-light)}.text-lighter{color:var(--grey-dark)}.w-full{width:100%}.h-52{height:3.25rem}.h-96{height:6rem}.h-\\[200px\\]{height:200px}.justify-between{justify-content:space-between}.mt-16{margin-top:1rem}.mt-32{margin-top:2rem}.mt-64{margin-top:4rem}.mb-16{margin-bottom:1rem}.mb-32{margin-bottom:2rem}.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:none}.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:0}.p-8{padding:0.5rem}.p-24{padding:1.5rem}.bg-default{background-color:var(--grey-light)}.bg-inverse{background-color:var(--white)}.bg-strongest{background-color:var(--brand-black)}.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}.items-center{align-items:center}.px-8{padding-left:0.5rem;padding-right:0.5rem}.pb-20{padding-bottom:1.25rem}.eds-steps__title[role=\"button\"]{cursor:pointer}.eds-steps__title.is-disabled{cursor:not-allowed;color:rgba(0, 0, 0, 0.5);}.eds-steps__title.is-disabled::before{opacity:1;filter:none}.steps--horizontal{display:flex;flex-direction:column;gap:2rem}.horizontal-indicators{display:flex;align-items:flex-start;gap:0;padding:0;margin-top:1.75rem;margin-bottom:0}.step-content-aligned{padding-left:0;padding-right:0}.horizontal-step{display:flex;flex-direction:column;align-items:flex-start;gap:0.6rem;cursor:pointer;flex:1 1 0;min-width:0;position:relative}.horizontal-step:last-child{flex:0 0 auto}.horizontal-step:not(:last-child)::after{content:'';position:absolute;top:1.375rem;left:calc(2.75rem + 0.4rem);width:calc(100% - 2.75rem - 0.8rem);height:3px;border-radius:2px;background-color:#e0e0e0;transform:translateY(-50%);z-index:1}.horizontal-step>span{text-align:left;align-self:stretch}.horizontal-step.is-completed:not(:last-child)::after{background-color:var(--brand-green);}.step-indicator{width:2.75rem;height:2.75rem;border-radius:50%;border:2px solid #e0e0e0;display:flex;align-items:center;justify-content:center;background-color:white;transition:all 0.3s ease;flex:0 0 auto;z-index:2}.horizontal-step.is-active .step-indicator{border-color:var(--brand-green-dark);background-color:var(--brand-green-dark);color:var(--white)}.horizontal-step.is-completed .step-indicator{border-color:var(--brand-green-dark);background-color:var(--white)}.horizontal-step.is-disabled{opacity:0.5;cursor:not-allowed}.step-number{font-family:var(--font-family-mono, 'IBM Plex Mono', monospace);font-weight:500;font-size:0.95rem}.step-label{font-family:var(--font-family-mono, 'IBM Plex Mono', monospace);font-size:9.5px;letter-spacing:0.07em;text-transform:uppercase;font-weight:500;color:var(--dark-grey, #7a7b7a)}.horizontal-step.is-active .step-label{color:var(--brand-green-dark)}.step-content{padding:0.5rem 0;margin-left:0;margin-right:0}@media (min-width: 700px){.step-content{padding:1.5rem 0}}.opacity-50{opacity:0.5}.bg-dark{background-color:var(--grey-light)}.bg-darker{background-color:var(--grey-dark)}.theme-brand.steps h3::before,.theme-brand.steps h4::before,.theme-brand.steps h5::before{background:var(--brand-green);color:var(--brand-black);border-color:var(--brand-green);font-weight:600}.theme-brand.steps h3.is-completed::before,.theme-brand.steps h4.is-completed::before,.theme-brand.steps h5.is-completed::before{content:'';}.theme-brand.steps .step-checkmark-icon{position:absolute;left:-39px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:30px;height:30px;z-index:1}.theme-brand.steps h3 .step-checkmark-icon{left:-41px;width:32px;height:32px;top:50%}.theme-brand .step-indicator{background-color:var(--grey-light);border-color:transparent;color:var(--dark-grey, #7a7b7a)}.theme-brand .horizontal-step.is-active .step-indicator{border-color:var(--brand-green);background-color:var(--brand-green);color:var(--brand-black);box-shadow:0 0 0 4px rgba(0, 255, 157, 0.2)}.theme-brand .horizontal-step.is-completed .step-indicator{border-color:var(--brand-green);background-color:var(--brand-green);color:var(--brand-black)}.theme-brand .horizontal-step.is-completed .step-number{display:none}.theme-brand .horizontal-step:not(:last-child)::after{background-color:var(--grey-light);}.theme-brand .horizontal-step.is-completed:not(:last-child)::after{background-color:var(--brand-green)}.theme-brand .horizontal-step.is-active .step-label,.theme-brand .horizontal-step.is-completed .step-label{color:var(--brand-black)}.theme-brand .step-number{font-weight:600}.theme-default.steps h3::before,.theme-default.steps h4::before,.theme-default.steps h5::before{background:var(--grey-900);color:#fff;border-color:#ccc}.theme-default .step-indicator{background-color:white;border-color:#e0e0e0}.theme-default .horizontal-step.is-active .step-indicator{border-color:var(--brand-green-dark);background-color:var(--brand-green-dark);color:var(--white)}.theme-default .horizontal-step.is-completed .step-indicator{border-color:var(--brand-green-dark);background-color:var(--white)}.theme-default .horizontal-step.is-completed:not(:last-child)::after{background-color:var(--brand-green-dark)}.theme-default .horizontal-step.is-active .step-label{color:var(--brand-green-dark)}.effect-focus-within{outline-width:3px;outline-offset:2px;outline-color:var(--brand-green)}.effect-focus-within:focus-within{outline-style:solid}";
 const EdsStepsV2Style0 = edsStepsV2Css;
 
 const EdsStepsV2$1 = /*@__PURE__*/ proxyCustomElement(class EdsStepsV2 extends HTMLElement {
@@ -16,6 +16,9 @@ const EdsStepsV2$1 = /*@__PURE__*/ proxyCustomElement(class EdsStepsV2 extends H
         this.finished = createEvent(this, "finished", 7);
         this.next = createEvent(this, "next", 7);
         this.back = createEvent(this, "back", 7);
+        this.onResize = () => {
+            this.isMobile = typeof window !== 'undefined' && window.innerWidth < 750;
+        };
         this.handleTitleClick = (index) => {
             // In linear mode, do NOT collapse; only navigate if allowed.
             if (this.type === 'linear') {
@@ -43,11 +46,12 @@ const EdsStepsV2$1 = /*@__PURE__*/ proxyCustomElement(class EdsStepsV2 extends H
         };
         this.handleNext = () => {
             const lastIndex = this.parsedSteps.length - 1;
-            // On last step: do NOT collapse; keep content visible, just emit finished
+            // On last step: stay on the last step and just emit finished. Collapsing
+            // here (activeStep = -1) left the form as an empty "Step 0" shell whenever
+            // the host's submit was rejected (e.g. single-submission already used) —
+            // the success path navigates away, so there's nothing to collapse for.
             if (this.activeStep >= lastIndex) {
                 this.finished.emit();
-                this.activeStep = -1; // collapse the content
-                this.step.emit(this.activeStep); // notify change (-1 sentinel)
                 return;
             }
             const target = this.activeStep + 1;
@@ -91,9 +95,15 @@ const EdsStepsV2$1 = /*@__PURE__*/ proxyCustomElement(class EdsStepsV2 extends H
         this.backLabel = 'Back';
         this.finishLabel = 'Finish';
         this.showFinish = true;
+        this.card = true;
         this.disableNext = false;
         this.headingLevel = 'h4';
         this.activeStep = 0;
+        this.isMobile = false;
+    }
+    /** Nav button size: comfortable on desktop, compact on mobile. */
+    get navBtnSize() {
+        return this.isMobile ? 'small' : 'large';
     }
     handleDisableNextChange(newValue) {
         if (typeof newValue === 'string' && newValue.trim().startsWith('[')) {
@@ -128,6 +138,17 @@ const EdsStepsV2$1 = /*@__PURE__*/ proxyCustomElement(class EdsStepsV2 extends H
     }
     componentWillLoad() {
         this.handleDisableNextChange(this.disableNext);
+        this.onResize();
+    }
+    connectedCallback() {
+        if (typeof window !== 'undefined') {
+            window.addEventListener('resize', this.onResize);
+        }
+    }
+    disconnectedCallback() {
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('resize', this.onResize);
+        }
     }
     componentDidLoad() {
         if (this.type === 'linear') {
@@ -148,7 +169,9 @@ const EdsStepsV2$1 = /*@__PURE__*/ proxyCustomElement(class EdsStepsV2 extends H
         linkElement.dispatchEvent(event);
     }
     articleClasses() {
-        return ['border-softer relative rounded-lg border-2'].join(' ');
+        // The card chrome is opt-out so a host that already provides the frame
+        // (e.g. a multi-step form's outer form-style wrapper) isn't double-bordered.
+        return this.card ? 'border-softer relative rounded-lg border-2' : 'relative';
     }
     get parsedSteps() {
         return parseData(this.steps);
@@ -212,21 +235,26 @@ const EdsStepsV2$1 = /*@__PURE__*/ proxyCustomElement(class EdsStepsV2 extends H
                 this.handleTitleClick(index);
             }
         };
-        return (h("div", { class: `horizontal-step ${isActive ? 'is-active' : ''} ${isCompleted ? 'is-completed' : ''}`, onClick: () => !forwardBlocked && this.handleTitleClick(index), onKeyDown: onKey, role: "button", tabindex: forwardBlocked ? -1 : 0, "aria-label": `Step ${index + 1}: ${step.title}`, "aria-current": isActive ? 'step' : undefined, "aria-disabled": forwardBlocked ? 'true' : 'false' }, h("div", { class: "step-indicator" }, isCompleted ? (h("eds-icon-wrapper", { name: "checkmark", size: 20 })) : (h("span", { class: "step-number" }, index + 1))), h("span", { class: `text-center text-default f-ui-03 ${forwardBlocked ? 'opacity-50' : ''}` }, step.title)));
+        return (h("div", { class: `horizontal-step ${isActive ? 'is-active' : ''} ${isCompleted ? 'is-completed' : ''}`, onClick: () => !forwardBlocked && this.handleTitleClick(index), onKeyDown: onKey, role: "button", tabindex: forwardBlocked ? -1 : 0, "aria-label": `Step ${index + 1}: ${step.title}`, "aria-current": isActive ? 'step' : undefined, "aria-disabled": forwardBlocked ? 'true' : 'false' }, h("div", { class: "step-indicator" }, isCompleted ? (h("eds-icon-wrapper", { name: "checkmark", size: 20 })) : (h("span", { class: "step-number" }, index + 1))), h("span", { class: `step-label ${forwardBlocked ? 'opacity-50' : ''}` }, step.title)));
     }
     render() {
         const steps = this.parsedSteps;
-        const marginClass = this.orientation === 'horizontal' ? 'mt-64' : 'mt-32';
+        // Top margin separates the buttons from the fields; bottom margin gives them
+        // breathing room from whatever follows (e.g. the next vertical step).
+        const marginClass = this.orientation === 'horizontal' ? 'mt-64 mb-16' : 'mt-32 mb-32';
         const themeClass = this.theme === 'brand' ? 'theme-brand' : 'theme-default';
-        return (h("div", { key: 'e1d78d18506adb662bbcc100f6f886e33c21a996', class: this.articleClasses() }, this.imageSrc ? (h("div", { class: "w-full mb-12 rounded-t-lg overflow-hidden border-2" }, h("eds-img", { src: this.imageSrc, width: this.imageWidth, "with-bg": "true", "lazy-load": "true", alt: "Step illustration" }))) : (this.message && (h("div", { class: `w-full ${this.theme === 'brand' ? 'bg-strongest' : 'bg-darker'} rounded-t-lg border-2` }, h("div", { class: "p-24" }, h("span", { class: `${this.theme === 'brand' ? 'text-accent' : 'text-inverse'} f-heading-04` }, this.message))))), h("div", { key: '5b69e2c641d96025b34377fc647679f94d0e4e44', class: "mt-16 pb-20 px-8" }, this.type === 'linear' && this.orientation === 'horizontal' ? (h("div", { class: `steps--horizontal ${themeClass}`, style: { '--step-count': steps.length.toString() } }, h("div", { class: "horizontal-indicators" }, steps.map((step, index) => this.renderHorizontalIndicator(step, index))), steps.map((step, index) => {
+        return (h("div", { key: '84383c5655004ccc0bcc144f3765c2d0b000cad6', class: this.articleClasses() }, this.imageSrc ? (h("div", { class: "w-full mb-12 rounded-t-lg overflow-hidden border-2" }, h("eds-img", { src: this.imageSrc, width: this.imageWidth, "with-bg": "true", "lazy-load": "true", alt: "Step illustration" }))) : (this.message && (h("div", { class: `w-full ${this.theme === 'brand' ? 'bg-strongest' : 'bg-darker'} rounded-t-lg border-2` }, h("div", { class: "p-24" }, h("span", { class: `${this.theme === 'brand' ? 'text-accent' : 'text-inverse'} f-heading-04` }, this.message))))), h("div", { key: 'd5fb5bbf6a48b90bf0db1e79a61ba5e445986368', class: "steps-body pb-20", style: {
+                paddingLeft: 'var(--eds-steps-padding-x, 0.5rem)',
+                paddingRight: 'var(--eds-steps-padding-x, 0.5rem)'
+            } }, this.type === 'linear' && this.orientation === 'horizontal' ? (h("div", { class: `steps--horizontal ${themeClass}`, style: { '--step-count': steps.length.toString() } }, h("div", { class: "horizontal-indicators" }, steps.map((step, index) => this.renderHorizontalIndicator(step, index))), steps.map((step, index) => {
             const isLast = index === steps.length - 1;
             if (this.activeStep !== index) {
                 return null;
             }
-            return (h("div", { class: "step-content", key: index, id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: "f-body-02 text-lighter", innerHTML: step.content })), h("div", { class: `flex items-center justify-between ${marginClass}` }, h("eds-button", { label: this.backLabel, intent: "primary", icon: "arrow-left", iconPos: "left", onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small", pill: true }), (!isLast || this.showFinish) && (h("eds-button", { label: isLast ? this.finishLabel : this.nextLabel, intent: "primary", icon: "arrow-right", onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: "small", class: index > 0 ? 'ml-8' : null, pill: true }))), h("slot", { name: `actions-${index}` })));
+            return (h("div", { class: "step-content", key: index, id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: "f-body-02 text-lighter", innerHTML: step.content })), h("div", { class: `flex items-center justify-between ${marginClass}` }, h("eds-button", { label: this.backLabel, intent: "primary", icon: "arrow-left", iconPos: "left", onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: this.navBtnSize, iconSmall: this.isMobile, pill: true }), (!isLast || this.showFinish) && (h("eds-button", { label: isLast ? this.finishLabel : this.nextLabel, intent: isLast ? 'brand' : 'primary', icon: "arrow-right", onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: this.navBtnSize, iconSmall: this.isMobile, class: index > 0 ? 'ml-8' : null, pill: true }))), h("slot", { name: `actions-${index}` })));
         }))) : this.type === 'linear' ? (h("div", { class: `steps ${themeClass}` }, steps.map((step, index) => {
             const isCompleted = this.activeStep > index;
-            return (h("div", { class: `${index === 0 ? 'step' : 'step mt-16'} ${isCompleted ? 'is-completed' : ''}`, key: index }, this.renderHeading(step.title, index), this.activeStep === index && (h("div", { class: "content grid gap-y-16", id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: "my-16 f-body-02 text-lighter", innerHTML: step.content })), h("div", { class: `flex items-center justify-between ${marginClass}` }, h("eds-button", { label: this.backLabel, intent: "secondary", icon: "chevron-left", iconPos: "left", onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small", pill: true }), (index < steps.length - 1 || this.showFinish) && (h("eds-button", { label: index === steps.length - 1 ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: "small", class: index > 0 ? 'ml-8' : null, pill: true })))))));
+            return (h("div", { class: `${index === 0 ? 'step' : 'step mt-16'} ${isCompleted ? 'is-completed' : ''}`, key: index }, this.renderHeading(step.title, index), this.activeStep === index && (h("div", { class: "content grid gap-y-16", id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: "my-16 f-body-02 text-lighter", innerHTML: step.content })), h("div", { class: `flex items-center justify-between ${marginClass}` }, h("eds-button", { label: this.backLabel, intent: "primary", icon: "chevron-left", iconPos: "left", onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: this.navBtnSize, iconSmall: this.isMobile, pill: true }), (index < steps.length - 1 || this.showFinish) && (h("eds-button", { label: index === steps.length - 1 ? this.finishLabel : this.nextLabel, intent: index === steps.length - 1 ? 'brand' : 'primary', icon: "chevron-right", onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: this.navBtnSize, iconSmall: this.isMobile, class: index > 0 ? 'ml-8' : null, pill: true })))))));
         }))) : (h("div", { class: `steps space-y-8 ${themeClass}` }, steps.map((step, index) => (h("div", { class: "step", key: index }, this.renderHeading(step.title, index), h("div", { class: "content", id: `eds-step-panel-${index}` }, h("div", { class: "content-body" }, h("slot", { name: `step-${index}` }, h("div", { class: "my-16 f-body-02 text-lighter", innerHTML: step.content }))))))))))));
     }
     get el() { return this; }
@@ -247,9 +275,11 @@ const EdsStepsV2$1 = /*@__PURE__*/ proxyCustomElement(class EdsStepsV2 extends H
         "backLabel": [1, "back-label"],
         "finishLabel": [1, "finish-label"],
         "showFinish": [4, "show-finish"],
+        "card": [4],
         "disableNext": [1032, "disable-next"],
         "headingLevel": [513, "heading-level"],
-        "activeStep": [32]
+        "activeStep": [32],
+        "isMobile": [32]
     }, undefined, {
         "disableNext": ["handleDisableNextChange"],
         "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 = "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;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:31px;height:31px;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)}.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-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)}.text-center{text-align:center}.text-default{color:var(--brand-black)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-light)}.text-lighter{color:var(--grey-dark)}.w-full{width:100%}.h-52{height:3.25rem}.h-96{height:6rem}.h-\\[200px\\]{height:200px}.justify-between{justify-content:space-between}.mt-16{margin-top:1rem}.mt-32{margin-top:2rem}.mt-64{margin-top:4rem}.my-16{margin-top:1rem;margin-bottom:1rem}.mb-12{margin-bottom:0.75rem}.mb-16{margin-bottom:1rem}.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-light)}.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}.items-center{align-items:center}.px-8{padding-left:0.5rem;padding-right:0.5rem}.pb-20{padding-bottom:1.25rem}.eds-steps__title[role=\"button\"]{cursor:pointer}.eds-steps__title.is-disabled{cursor:not-allowed;color:rgba(0, 0, 0, 0.5);}.eds-steps__title.is-disabled::before{opacity:1;filter:none}.steps--horizontal{display:flex;flex-direction:column;gap:2rem}.horizontal-indicators{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0}.horizontal-step{display:flex;flex-direction:column;align-items:center;gap:0.5rem;cursor:pointer;flex:1;position:relative}.horizontal-step:not(:last-child)::after{content:'';position:absolute;top:1.25rem;left:50%;width:100%;height:2px;background-color:#e0e0e0;z-index:-1}.horizontal-step.is-completed:not(:last-child)::after{background-color:var(--brand-green-dark);}.step-indicator{width:2.5rem;height:2.5rem;border-radius:50%;border:2px solid #e0e0e0;display:flex;align-items:center;justify-content:center;background-color:white;transition:all 0.3s ease}.horizontal-step.is-active .step-indicator{border-color:var(--brand-green-dark);background-color:var(--brand-green-dark);color:var(--white)}.horizontal-step.is-completed .step-indicator{border-color:var(--brand-green-dark);background-color:var(--white)}.horizontal-step.is-disabled{opacity:0.5;cursor:not-allowed}.step-number{font-weight:600;font-size:0.875rem}.step-label{font-size:0.875rem;text-align:center;font-weight:500}.horizontal-step.is-active .step-label{color:var(--brand-green-dark)}.step-content{padding:0.5rem 0;margin-left:calc((100% / var(--step-count, 1)) * 0.20 - 1.25rem);margin-right:calc((100% / var(--step-count, 1)) * 0.20 - 1.25rem)}@media (min-width: 700px){.step-content{padding:1.5rem 0;margin-left:calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem);margin-right:calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem)}}.opacity-50{opacity:0.5}.eds-steps__title[role=\"button\"]{cursor:pointer}.theme-brand.steps h3::before,.theme-brand.steps h4::before,.theme-brand.steps h5::before{background:var(--brand-green);color:var(--brand-black);border-color:var(--brand-green);font-weight:600}.theme-brand .step-indicator{background-color:var(--grey-light)}.theme-brand .horizontal-step.is-active .step-indicator{border-color:var(--brand-green);background-color:var(--brand-green);color:var(--brand-black)}.theme-brand .horizontal-step.is-completed .step-indicator{border-color:var(--brand-green);background-color:var(--brand-green);color:var(--brand-black)}.theme-brand .horizontal-step.is-completed:not(:last-child)::after{background-color:var(--brand-green)}.theme-brand .horizontal-step.is-active .step-label{color:var(--brand-black);font-weight:600}.theme-brand .step-number{font-weight:600}.theme-default.steps h3::before,.theme-default.steps h4::before,.theme-default.steps h5::before{background:var(--grey-900);color:#fff;border-color:#ccc}.theme-default .step-indicator{background-color:white;border-color:#e0e0e0}.theme-default .horizontal-step.is-active .step-indicator{border-color:var(--brand-green-dark);background-color:var(--brand-green-dark);color:var(--white)}.theme-default .horizontal-step.is-completed .step-indicator{border-color:var(--brand-green-dark);background-color:var(--white)}.theme-default .horizontal-step.is-completed:not(:last-child)::after{background-color:var(--brand-green-dark)}.theme-default .horizontal-step.is-active .step-label{color:var(--brand-green-dark)}";
+const edsStepsCss = "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;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:31px;height:31px;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)}.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-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)}.text-center{text-align:center}.text-default{color:var(--brand-black)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-light)}.text-lighter{color:var(--grey-dark)}.w-full{width:100%}.h-52{height:3.25rem}.h-96{height:6rem}.h-\\[200px\\]{height:200px}.justify-between{justify-content:space-between}.mt-16{margin-top:1rem}.mt-32{margin-top:2rem}.mt-64{margin-top:4rem}.my-16{margin-top:1rem;margin-bottom:1rem}.mb-12{margin-bottom:0.75rem}.mb-16{margin-bottom:1rem}.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-light)}.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}.items-center{align-items:center}.px-8{padding-left:0.5rem;padding-right:0.5rem}.pb-20{padding-bottom:1.25rem}.eds-steps__title[role=\"button\"]{cursor:pointer}.eds-steps__title.is-disabled{cursor:not-allowed;color:rgba(0, 0, 0, 0.5);}.eds-steps__title.is-disabled::before{opacity:1;filter:none}.steps--horizontal{display:flex;flex-direction:column;gap:2rem}.horizontal-indicators{display:flex;align-items:flex-start;gap:0;padding:0;margin-top:1.75rem;margin-bottom:0}.horizontal-step{display:flex;flex-direction:column;align-items:flex-start;gap:0.6rem;cursor:pointer;flex:1 1 0;min-width:0;position:relative}.horizontal-step:last-child{flex:0 0 auto}.horizontal-step:not(:last-child)::after{content:'';position:absolute;top:1.375rem;left:calc(2.75rem + 0.4rem);width:calc(100% - 2.75rem - 0.8rem);height:3px;border-radius:2px;background-color:#e0e0e0;transform:translateY(-50%);z-index:1}.horizontal-step>span{text-align:left;align-self:stretch}.horizontal-step.is-completed:not(:last-child)::after{background-color:var(--brand-green-dark);}.step-indicator{width:2.75rem;height:2.75rem;border-radius:50%;border:2px solid #e0e0e0;display:flex;align-items:center;justify-content:center;background-color:white;transition:all 0.3s ease;flex:0 0 auto}.horizontal-step.is-active .step-indicator{border-color:var(--brand-green-dark);background-color:var(--brand-green-dark);color:var(--white)}.horizontal-step.is-completed .step-indicator{border-color:var(--brand-green-dark);background-color:var(--white)}.horizontal-step.is-disabled{opacity:0.5;cursor:not-allowed}.step-number{font-family:var(--font-family-mono, 'IBM Plex Mono', monospace);font-weight:500;font-size:0.95rem}.step-label{font-family:var(--font-family-mono, 'IBM Plex Mono', monospace);font-size:9.5px;letter-spacing:0.07em;text-transform:uppercase;font-weight:500;color:var(--dark-grey, #7a7b7a)}.horizontal-step.is-active .step-label{color:var(--brand-green-dark)}.step-content{padding:0.5rem 0;margin-left:0;margin-right:0}@media (min-width: 700px){.step-content{padding:1.5rem 0}}.opacity-50{opacity:0.5}.eds-steps__title[role=\"button\"]{cursor:pointer}.theme-brand.steps h3::before,.theme-brand.steps h4::before,.theme-brand.steps h5::before{background:var(--brand-green);color:var(--brand-black);border-color:var(--brand-green);font-weight:600}.theme-brand .step-indicator{background-color:var(--grey-light);border-color:transparent;color:var(--dark-grey, #7a7b7a)}.theme-brand .horizontal-step.is-active .step-indicator{border-color:var(--brand-green);background-color:var(--brand-green);color:var(--brand-black);box-shadow:0 0 0 4px rgba(0, 255, 157, 0.2)}.theme-brand .horizontal-step.is-completed .step-indicator{border-color:var(--brand-green);background-color:var(--brand-green);color:var(--brand-black)}.theme-brand .horizontal-step.is-completed:not(:last-child)::after{background-color:var(--brand-green)}.theme-brand .horizontal-step.is-active .step-label,.theme-brand .horizontal-step.is-completed .step-label{color:var(--brand-black)}.theme-brand .step-number{font-weight:600}.theme-default.steps h3::before,.theme-default.steps h4::before,.theme-default.steps h5::before{background:var(--grey-900);color:#fff;border-color:#ccc}.theme-default .step-indicator{background-color:white;border-color:#e0e0e0}.theme-default .horizontal-step.is-active .step-indicator{border-color:var(--brand-green-dark);background-color:var(--brand-green-dark);color:var(--white)}.theme-default .horizontal-step.is-completed .step-indicator{border-color:var(--brand-green-dark);background-color:var(--white)}.theme-default .horizontal-step.is-completed:not(:last-child)::after{background-color:var(--brand-green-dark)}.theme-default .horizontal-step.is-active .step-label{color:var(--brand-green-dark)}";
 const EdsStepsStyle0 = edsStepsCss;
 
 const EdsSteps = /*@__PURE__*/ proxyCustomElement(class EdsSteps extends HTMLElement {
@@ -15,6 +15,9 @@ const EdsSteps = /*@__PURE__*/ proxyCustomElement(class EdsSteps extends HTMLEle
         this.finished = createEvent(this, "finished", 7);
         this.next = createEvent(this, "next", 7);
         this.back = createEvent(this, "back", 7);
+        this.onResize = () => {
+            this.isMobile = typeof window !== 'undefined' && window.innerWidth < 750;
+        };
         this.handleTitleClick = (index) => {
             // In linear mode, do NOT collapse; only navigate if allowed.
             if (this.type === 'linear') {
@@ -42,11 +45,11 @@ const EdsSteps = /*@__PURE__*/ proxyCustomElement(class EdsSteps extends HTMLEle
         };
         this.handleNext = () => {
             const lastIndex = this.parsedSteps.length - 1;
-            // On last step
+            // On last step: stay put and just emit finished. Collapsing (activeStep = -1)
+            // left the form as an empty shell when the host rejected the submit (e.g.
+            // single-submission already used); the success path navigates away.
             if (this.activeStep >= lastIndex) {
                 this.finished.emit();
-                this.activeStep = -1; // collapse the content
-                this.step.emit(this.activeStep); // notify change (-1 sentinel)
                 return;
             }
             const target = this.activeStep + 1;
@@ -90,6 +93,7 @@ const EdsSteps = /*@__PURE__*/ proxyCustomElement(class EdsSteps extends HTMLEle
         this.headingLevel = 'h4';
         this.collapsibleTitles = false;
         this.activeStep = 0;
+        this.isMobile = false;
     }
     handleDisableNextChange(newValue) {
         if (typeof newValue === 'string' && newValue.trim().startsWith('[')) {
@@ -101,8 +105,23 @@ const EdsSteps = /*@__PURE__*/ proxyCustomElement(class EdsSteps extends HTMLEle
             }
         }
     }
+    /** Nav button size: comfortable on desktop, compact on mobile. */
+    get navBtnSize() {
+        return this.isMobile ? 'small' : 'large';
+    }
     componentWillLoad() {
         this.handleDisableNextChange(this.disableNext);
+        this.onResize();
+    }
+    connectedCallback() {
+        if (typeof window !== 'undefined') {
+            window.addEventListener('resize', this.onResize);
+        }
+    }
+    disconnectedCallback() {
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('resize', this.onResize);
+        }
     }
     componentDidLoad() {
         if (this.type === 'linear') {
@@ -202,7 +221,7 @@ const EdsSteps = /*@__PURE__*/ proxyCustomElement(class EdsSteps extends HTMLEle
                 this.handleTitleClick(index);
             }
         };
-        return (h("div", { class: `horizontal-step ${isActive ? 'is-active' : ''} ${isCompleted ? 'is-completed' : ''}`, onClick: () => !forwardBlocked && this.handleTitleClick(index), onKeyDown: onKey, role: "button", tabindex: forwardBlocked ? -1 : 0, "aria-label": `Step ${index + 1}: ${step.title}`, "aria-current": isActive ? 'step' : undefined, "aria-disabled": forwardBlocked ? 'true' : 'false' }, h("div", { class: "step-indicator" }, h("span", { class: "step-number" }, index + 1)), h("span", { class: `text-center text-default f-ui-03 ${forwardBlocked ? 'opacity-50' : ''}` }, step.title)));
+        return (h("div", { class: `horizontal-step ${isActive ? 'is-active' : ''} ${isCompleted ? 'is-completed' : ''}`, onClick: () => !forwardBlocked && this.handleTitleClick(index), onKeyDown: onKey, role: "button", tabindex: forwardBlocked ? -1 : 0, "aria-label": `Step ${index + 1}: ${step.title}`, "aria-current": isActive ? 'step' : undefined, "aria-disabled": forwardBlocked ? 'true' : 'false' }, h("div", { class: "step-indicator" }, h("span", { class: "step-number" }, index + 1)), h("span", { class: `step-label ${forwardBlocked ? 'opacity-50' : ''}` }, step.title)));
     }
     render() {
         const steps = this.parsedSteps;
@@ -215,7 +234,7 @@ const EdsSteps = /*@__PURE__*/ proxyCustomElement(class EdsSteps extends HTMLEle
                     return null;
                 }
                 const marginClass = this.orientation === 'horizontal' ? 'mt-64' : 'mt-32';
-                return (h("div", { class: "step-content", key: index, id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: "f-body-02 text-lighter", innerHTML: step.content })), h("div", { class: `flex items-center justify-between ${marginClass}` }, h("eds-button", { label: this.backLabel, intent: "secondary", icon: "chevron-left", iconPos: "left", onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small" }), (!isLast || this.showFinish) && (h("eds-button", { label: isLast ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: "small", class: index > 0 ? 'ml-8' : null }))), h("slot", { name: `actions-${index}` })));
+                return (h("div", { class: "step-content", key: index, id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: "f-body-02 text-lighter", innerHTML: step.content })), h("div", { class: `flex items-center justify-between ${marginClass}` }, h("eds-button", { label: this.backLabel, intent: "primary", icon: "chevron-left", iconPos: "left", onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: this.navBtnSize, iconSmall: this.isMobile }), (!isLast || this.showFinish) && (h("eds-button", { label: isLast ? this.finishLabel : this.nextLabel, intent: isLast ? 'brand' : 'primary', icon: "chevron-right", onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: this.navBtnSize, iconSmall: this.isMobile, class: index > 0 ? 'ml-8' : null }))), h("slot", { name: `actions-${index}` })));
             })));
         }
         // Vertical Linear
@@ -223,7 +242,7 @@ const EdsSteps = /*@__PURE__*/ proxyCustomElement(class EdsSteps extends HTMLEle
             return (h("div", { class: `steps ${themeClass}` }, steps.map((step, index) => {
                 const isLast = index === steps.length - 1;
                 const marginClass = this.orientation === 'horizontal' ? 'mt-64' : 'mt-32';
-                return (h("div", { class: "step mb-16", key: index }, this.renderHeading(step.title, index), this.activeStep === index && (h("div", { class: "content grid gap-y-16", id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: "my-16 f-body-02 text-lighter", innerHTML: step.content })), h("div", { class: `flex items-center justify-between ${marginClass}` }, h("eds-button", { label: this.backLabel, intent: "secondary", icon: "chevron-left", iconPos: "left", onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small" }), (!isLast || this.showFinish) && (h("eds-button", { label: isLast ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: "small", class: index > 0 ? 'ml-8' : null }))), h("slot", { name: `actions-${index}` })))));
+                return (h("div", { class: "step mb-16", key: index }, this.renderHeading(step.title, index), this.activeStep === index && (h("div", { class: "content grid gap-y-16", id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: "my-16 f-body-02 text-lighter", innerHTML: step.content })), h("div", { class: `flex items-center justify-between ${marginClass}` }, h("eds-button", { label: this.backLabel, intent: "primary", icon: "chevron-left", iconPos: "left", onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: this.navBtnSize, iconSmall: this.isMobile }), (!isLast || this.showFinish) && (h("eds-button", { label: isLast ? this.finishLabel : this.nextLabel, intent: isLast ? 'brand' : 'primary', icon: "chevron-right", onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: this.navBtnSize, iconSmall: this.isMobile, class: index > 0 ? 'ml-8' : null }))), h("slot", { name: `actions-${index}` })))));
             })));
         }
         // Static
@@ -247,7 +266,8 @@ const EdsSteps = /*@__PURE__*/ proxyCustomElement(class EdsSteps extends HTMLEle
         "disableNext": [1032, "disable-next"],
         "headingLevel": [513, "heading-level"],
         "collapsibleTitles": [4, "collapsible-titles"],
-        "activeStep": [32]
+        "activeStep": [32],
+        "isMobile": [32]
     }, undefined, {
         "disableNext": ["handleDisableNextChange"],
         "activeStep": ["activeStepChanged"]

package/dist/components/eds-switch2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { s as sendAnalytics } from './analytics.js';
 
-const edsSwitchCss = ":host{display:inline-block}.switch-container{display:inline-flex;align-items:center}.switch-label{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)}button.switch{position:relative;display:inline-flex;align-items:center;width:50px;height:26px;border:none;border-radius:13px;background-color:var(--grey-dark);padding:0;cursor:pointer;transition:background-color 0.2s}button.switch.switch--checked{background-color:var(--brand-green)}button.switch.switch--disabled{opacity:0.6;cursor:not-allowed}.switch-handle{position:absolute;width:22px;height:22px;border-radius:50%;background-color:#fff;top:2px;left:2px;transition:transform 0.2s}button.switch.switch--checked .switch-handle{transform:translateX(24px)}.ml-8{margin-left:0.5rem}.mr-8{margin-right:0.5rem}.switch:focus{outline:2px solid #005fcc;outline-offset:2px}.switch:focus:not(:focus-visible){outline:none}.switch:focus-visible{outline-width:3px;outline-offset:2px;outline-color:var(--brand-green)}.segmented-container{display:inline-flex;gap:0.5rem;background:var(--grey-light);padding:0.5rem;border-radius:2rem}.segmented-btn{padding:0.5rem 1.5rem;background:transparent;border:none;border-radius:1.5rem;font-family:var(--f-ui-02-fontFamily);font-size:0.9rem;font-weight:500;cursor:pointer;transition:all 0.3s;color:var(--grey-dark);white-space:nowrap}.segmented-btn--active{background:var(--brand-green);color:var(--brand-black)}.segmented-btn:hover:not(.segmented-btn--active):not(.segmented-btn--disabled){color:var(--brand-black)}.segmented-btn--disabled{opacity:0.6;cursor:not-allowed}.segmented-btn:focus{outline:2px solid #005fcc;outline-offset:2px}.segmented-btn:focus:not(:focus-visible){outline:none}.segmented-btn:focus-visible{outline-width:3px;outline-offset:2px;outline-color:var(--brand-green)}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);letter-spacing:var(--f-ui-03-letterSpacing)}";
+const edsSwitchCss = ":host{display:inline-block}.switch-container{display:inline-flex;align-items:center}.switch-label{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)}button.switch{position:relative;display:inline-flex;align-items:center;width:50px;height:26px;border:none;border-radius:13px;background-color:var(--grey-dark);padding:0;cursor:pointer;transition:background-color 0.2s}button.switch.switch--checked{background-color:var(--brand-green)}button.switch.switch--disabled{opacity:0.6;cursor:not-allowed}.switch-handle{position:absolute;width:22px;height:22px;border-radius:50%;background-color:#fff;top:2px;left:2px;transition:transform 0.2s}button.switch.switch--checked .switch-handle{transform:translateX(24px)}.ml-8{margin-left:0.5rem}.mr-8{margin-right:0.5rem}.switch:focus{outline:2px solid #005fcc;outline-offset:2px}.switch:focus:not(:focus-visible){outline:none}.switch:focus-visible{outline-width:3px;outline-offset:2px;outline-color:var(--brand-green)}.segmented-container{display:inline-flex;gap:0.5rem;background:var(--grey-light);padding:0.5rem;border-radius:2rem}.segmented-btn{padding:0.5rem 1.5rem;background:transparent;border:none;border-radius:1.5rem;font-family:var(--plex-sans, 'IBM Plex Sans', system-ui, sans-serif);font-size:14px;font-weight:500;cursor:pointer;transition:all 0.3s;color:var(--body-l, #5a5f5c);white-space:nowrap}.segmented-btn--active{background:var(--brand-green);color:var(--brand-black)}.segmented-btn:hover:not(.segmented-btn--active):not(.segmented-btn--disabled){color:var(--brand-black)}.segmented-container--dark{background:#fff;border:1px solid var(--grey-300, #e2e2e2);padding:4px;gap:3px}.segmented-container--dark .segmented-btn{padding:9px 30px;border-radius:999px;transition:0.14s}.segmented-container--dark .segmented-btn--active{background:var(--brand-black, #07140d);color:#fff}.segmented-btn--disabled{opacity:0.6;cursor:not-allowed}.segmented-btn:focus{outline:2px solid #005fcc;outline-offset:2px}.segmented-btn:focus:not(:focus-visible){outline:none}.segmented-btn:focus-visible{outline-width:3px;outline-offset:2px;outline-color:var(--brand-green)}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);letter-spacing:var(--f-ui-03-letterSpacing)}";
 const EdsSwitchStyle0 = edsSwitchCss;
 
 const EdsSwitch = /*@__PURE__*/ proxyCustomElement(class EdsSwitch extends HTMLElement {
@@ -39,7 +39,7 @@ const EdsSwitch = /*@__PURE__*/ proxyCustomElement(class EdsSwitch extends HTMLE
         this.variant = 'toggle';
     }
     render() {
-        if (this.variant === 'segmented') {
+        if (this.variant === 'segmented' || this.variant === 'segmented-dark') {
             return this.renderSegmented();
         }
         return this.renderToggle();
@@ -67,7 +67,10 @@ const EdsSwitch = /*@__PURE__*/ proxyCustomElement(class EdsSwitch extends HTMLE
             }, onClick: this.toggleSwitch, onKeyDown: this.handleKeyDown, disabled: this.disabled }, h("span", { class: "switch-handle" })), this.labelOn && (h("span", { id: `${switchId}-on`, class: "switch-label switch-label--on ml-8" }, this.labelOn))));
     }
     renderSegmented() {
-        return (h("div", { class: "segmented-container", role: "group", "aria-label": "View toggle" }, h("button", { type: "button", tabindex: this.disabled ? '-1' : '0', class: {
+        return (h("div", { class: {
+                'segmented-container': true,
+                'segmented-container--dark': this.variant === 'segmented-dark'
+            }, role: "group", "aria-label": "View toggle" }, h("button", { type: "button", tabindex: this.disabled ? '-1' : '0', class: {
                 'segmented-btn': true,
                 'segmented-btn--active': !this.checked,
                 'segmented-btn--disabled': this.disabled
@@ -75,7 +78,7 @@ const EdsSwitch = /*@__PURE__*/ proxyCustomElement(class EdsSwitch extends HTMLE
                 if (!this.disabled && this.checked) {
                     this.toggleSwitch();
                 }
-            }, onKeyDown: this.handleKeyDown, disabled: this.disabled, "aria-pressed": !this.checked ? 'true' : 'false' }, h("span", { class: "f-ui-03" }, this.labelOff)), h("button", { type: "button", tabindex: this.disabled ? '-1' : '0', class: {
+            }, onKeyDown: this.handleKeyDown, disabled: this.disabled, "aria-pressed": !this.checked ? 'true' : 'false' }, h("span", null, this.labelOff)), h("button", { type: "button", tabindex: this.disabled ? '-1' : '0', class: {
                 'segmented-btn': true,
                 'segmented-btn--active': this.checked,
                 'segmented-btn--disabled': this.disabled
@@ -83,7 +86,7 @@ const EdsSwitch = /*@__PURE__*/ proxyCustomElement(class EdsSwitch extends HTMLE
                 if (!this.disabled && !this.checked) {
                     this.toggleSwitch();
                 }
-            }, onKeyDown: this.handleKeyDown, disabled: this.disabled, "aria-pressed": this.checked ? 'true' : 'false' }, h("span", { class: "f-ui-03" }, this.labelOn))));
+            }, onKeyDown: this.handleKeyDown, disabled: this.disabled, "aria-pressed": this.checked ? 'true' : 'false' }, h("span", null, this.labelOn))));
     }
     get el() { return this; }
     static get style() { return EdsSwitchStyle0; }

package/dist/components/eds-table2.js

@@ -327,9 +327,7 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
         const paginatedRows = this.getPaginatedRows();
         const lastPage = Math.ceil(this.totalRows / this.rowsPerPage);
         const showControls = this.showViewToggle || this.searchEnabled;
-        return (h("div", { key: '1e8a2f5f19df240ee3a57951641b60b947342fad' }, showControls && (h("div", { key: '778fe091226330448bba089189e9dd6a6aa977a9', class: "controls-container flex-col flex-md-row items-start items-md-center justify-between gap-16 mb-16" }, this.showViewToggle && (h("div", { key: '7ef287464bb2fba846be5341f4bb0e71d982be0e', class: "view-toggle-wrapper" }, h("eds-switch", { key: '2d3a494a5b354a14c8e882a153633bd5e85a40ab', variant: "segmented", labelOff: "Table View", labelOn: "Card View", checked: this.view === 'card', onUiswitch: this.handleViewChange }))), this.searchEnabled && (h("div", { key: 'dfcf6d0bdc23cb10481121881a7656b02a0599c1', class: `search-wrapper w-full ${this.showViewToggle ? 'w-md-400' : ''}` }, h("eds-input-field", { key: 1, icon: "search", name: "search", "aria-label": "Search", type: "text", placeholder: "Search...", onInput: (event) => this.handleSearch(event) }))))), this.view === 'card'
-            ? this.renderCardView(paginatedRows)
-            : this.renderTableView(paginatedRows), this.shouldEnablePagination() && (h("div", { key: '3f7faafdd6147855cb8812ff6303c335c7fd1f35', class: "mt-20" }, h("eds-pagination", { key: '17705ba01a8ca8cc79bacfce34e55f11ce53d70c', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
+        return (h("div", { key: '8a025e9e12285aa3444b2f83e0b68af55cbe32e6' }, showControls && (h("div", { key: 'f97864d8b61db7ec4fa623ecadc3c225464a6c84', class: "controls-container flex-col flex-md-row items-start items-md-center justify-between gap-16 mb-16" }, this.showViewToggle && (h("div", { key: 'ddf8b1c0fb59fe81efa22a4dc02b414d41ae7208', class: "view-toggle-wrapper" }, h("eds-switch", { key: 'c3631986b456a88559face6a2ce7ce8acd5d01c2', variant: "segmented", labelOff: "Table View", labelOn: "Card View", checked: this.view === 'card', onUiswitch: this.handleViewChange }))), this.searchEnabled && (h("div", { key: 'a02d7f163dd2bb34bb26ae60bd5b018ed07291d9', class: `search-wrapper w-full ${this.showViewToggle ? 'w-md-400' : ''}` }, h("eds-input-field", { key: 1, icon: "search", name: "search", "aria-label": "Search", type: "text", placeholder: "Search...", onInput: (event) => this.handleSearch(event) }))))), this.view === 'card' ? this.renderCardView(paginatedRows) : this.renderTableView(paginatedRows), this.shouldEnablePagination() && (h("div", { key: 'ecf412674a951b4d19e87385270cb49e64e590f6', class: "mt-20" }, h("eds-pagination", { key: 'fe1365ecb4d249548ba0c936a48b6141ff14ad0e', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
     }
     get hostEl() { return this; }
     static get watchers() { return {