@ebrains/components 2.3.1 → 2.4.0

package/dist/components/eds-sidebar.js

@@ -0,0 +1,208 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './eds-icon-wrapper2.js';
+import { d as defineCustomElement$2 } from './eds-link2.js';
+
+const edsSidebarCss = ":host{display:block;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;transition:width 0.3s ease}:host(.collapsed){width:4rem}:host::-webkit-scrollbar{width:8px}:host::-webkit-scrollbar-track{background:transparent}:host::-webkit-scrollbar-thumb{background:rgba(0, 0, 0, 0.2);border-radius:4px}:host::-webkit-scrollbar-thumb:hover{background:rgba(0, 0, 0, 0.3)}.sidebar-nav{padding:0.5rem 0}.sidebar-header{display:flex;justify-content:flex-end;padding:0.5rem 0.75rem;margin-bottom:0.5rem}:host(.collapsed) .sidebar-header{justify-content:center;padding:0.5rem}.collapse-toggle{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;background:none;border:none;cursor:pointer;padding:0;border-radius:0.375rem;transition:background-color 0.15s ease;color:inherit}.collapse-toggle:hover{background-color:rgba(0, 0, 0, 0.08)}.collapse-toggle:focus-visible{outline:2px solid var(--eds-focus-color, #0066cc);outline-offset:2px}.sidebar-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.125rem}.sidebar-item{display:flex;flex-direction:column}.sidebar-item-content{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.75rem;cursor:pointer;user-select:none;word-break:break-word;transition:background-color 0.15s ease;border-radius:0.375rem;margin:0 0.5rem;position:relative}:host(.collapsed) .sidebar-item-content{justify-content:center;padding:0.75rem;margin:0 0.5rem}.sidebar-item-content:hover{background-color:rgba(0, 0, 0, 0.04)}.sidebar-item-content:focus-visible{outline:2px solid var(--eds-focus-color, #0066cc);outline-offset:-2px;z-index:1}.sidebar-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem}.sidebar-content-wrapper{display:flex;align-items:center;gap:0.5rem;flex:1;min-width:0}.sidebar-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem;padding:0;margin:-0.125rem 0;pointer-events:none}.sidebar-link-wrapper{flex:1;min-width:0;pointer-events:none}.sidebar-link{font-weight:400;pointer-events:none}.sidebar-children{list-style:none;margin:0.25rem 0 0 0;padding:0;display:flex;flex-direction:column;gap:0.125rem;overflow:hidden;animation:slideDown 0.2s ease}@keyframes slideDown{from{opacity:0;transform:translateY(-0.25rem)}to{opacity:1;transform:translateY(0)}}.sidebar-item.level-0 .sidebar-item-content{padding-left:0.75rem}:host(.collapsed) .sidebar-item.level-0 .sidebar-item-content{padding-left:0.75rem}.sidebar-item.level-1 .sidebar-item-content{padding-left:2rem}.sidebar-item.level-2 .sidebar-item-content{padding-left:3.25rem}.sidebar-item.level-3 .sidebar-item-content{padding-left:4.5rem}.sidebar-item.level-4 .sidebar-item-content{padding-left:5.75rem}.sidebar-item.level-5 .sidebar-item-content{padding-left:7rem}:host(.theme-default) .sidebar-item-content{border-radius:0.375rem;margin:0 0.5rem;padding:0.5rem 0.75rem}:host(.theme-default.collapsed) .sidebar-item-content{margin:0 0.5rem;border-radius:0.375rem}:host(.theme-default) .sidebar-item-content:hover{background-color:rgba(0, 0, 0, 0.04)}:host(.theme-default) .sidebar-item.active>.sidebar-item-content{background-color:transparent}:host(.theme-default) .sidebar-item.active>.sidebar-item-content .sidebar-link{font-weight:600}:host(.theme-default) .sidebar-item.level-0 .sidebar-item-content{padding-left:0.75rem}:host(.theme-default) .sidebar-item.level-1 .sidebar-item-content{padding-left:2rem}:host(.theme-default) .sidebar-item.level-2 .sidebar-item-content{padding-left:3.25rem}:host(.theme-default) .sidebar-item.level-3 .sidebar-item-content{padding-left:4.5rem}:host(.theme-default) .sidebar-item.level-4 .sidebar-item-content{padding-left:5.75rem}:host(.theme-minimal) .sidebar-item-content{border-radius:0;margin:0;padding-left:1rem;padding-right:1rem}:host(.theme-minimal.collapsed) .sidebar-item-content{margin:0 0.25rem;border-radius:0.375rem}:host(.theme-minimal) .sidebar-item-content:hover{background-color:var(--grey-300)}:host(.theme-minimal) .sidebar-item.active>.sidebar-item-content{background-color:var(--grey-400);border-left:3px solid var(--grey-900);padding-left:calc(1rem - 3px)}:host(.theme-minimal.collapsed) .sidebar-item.active>.sidebar-item-content{border-left:none;border-radius:0.375rem;padding-left:0.75rem}:host(.theme-minimal) .sidebar-item.level-1.active>.sidebar-item-content{padding-left:calc(2rem - 3px)}:host(.theme-minimal) .sidebar-item.level-2.active>.sidebar-item-content{padding-left:calc(3.25rem - 3px)}:host(.theme-minimal) .sidebar-item.level-3.active>.sidebar-item-content{padding-left:calc(4.5rem - 3px)}:host(.theme-minimal) .sidebar-item.level-4.active>.sidebar-item-content{padding-left:calc(5.75rem - 3px)}:host(.theme-minimal) .sidebar-item.level-0 .sidebar-item-content{padding-left:1rem}:host(.theme-minimal) .sidebar-item.level-1 .sidebar-item-content{padding-left:2rem}:host(.theme-minimal) .sidebar-item.level-2 .sidebar-item-content{padding-left:3.25rem}:host(.theme-minimal) .sidebar-item.level-3 .sidebar-item-content{padding-left:4.5rem}:host(.theme-minimal) .sidebar-item.level-4 .sidebar-item-content{padding-left:5.75rem}:host(.theme-minimal) .sidebar-children{position:relative}:host(.theme-ebrains) .sidebar-item-content{padding:0.5rem 1rem;border-radius:0.5rem;margin:0 0.5rem}:host(.theme-ebrains.collapsed) .sidebar-item-content{padding:0.75rem}:host(.theme-ebrains) .sidebar-item-content:hover{background-color:rgba(0, 0, 0, 0.05)}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content{background-color:var(--green-600, #22c55e);color:white}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content .sidebar-link{--eds-link-color:white;--eds-link-hover-color:white}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content .sidebar-toggle{color:white}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content .sidebar-icon{color:white}:host(.theme-ebrains) .sidebar-item.level-0 .sidebar-item-content{padding-left:1rem}:host(.theme-ebrains) .sidebar-item.level-1 .sidebar-item-content{padding-left:2.25rem}:host(.theme-ebrains) .sidebar-item.level-2 .sidebar-item-content{padding-left:3.5rem}:host(.theme-ebrains) .sidebar-item.level-3 .sidebar-item-content{padding-left:4.75rem}:host(.theme-ebrains) .sidebar-item.level-4 .sidebar-item-content{padding-left:6rem}@media (prefers-color-scheme: dark){.collapse-toggle:hover{background-color:rgba(255, 255, 255, 0.08)}:host(.theme-default) .sidebar-item-content:hover{background-color:rgba(255, 255, 255, 0.05)}:host(.theme-default) .sidebar-item.active>.sidebar-item-content{background-color:rgba(0, 102, 204, 0.15)}:host(.theme-minimal) .sidebar-item-content:hover{background-color:rgba(255, 255, 255, 0.06)}:host::-webkit-scrollbar-thumb{background:rgba(255, 255, 255, 0.2)}:host::-webkit-scrollbar-thumb:hover{background:rgba(255, 255, 255, 0.3)}}.sidebar-toggle eds-icon-wrapper,.sidebar-icon eds-icon-wrapper,.collapse-toggle eds-icon-wrapper{transition:transform 0.15s ease;display:flex;align-items:center;justify-content:center}.sidebar-item-content:focus-visible .sidebar-link{text-decoration:underline}.sidebar-item.active>.sidebar-item-content .sidebar-link{font-weight:500}:host(.collapsed) .sidebar-item-content::after{content:attr(title);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:0.5rem;padding:0.5rem 0.75rem;background:rgba(0, 0, 0, 0.9);color:white;border-radius:0.375rem;white-space:nowrap;font-size:0.875rem;opacity:0;pointer-events:none;transition:opacity 0.2s ease;z-index:1000}:host(.collapsed) .sidebar-item-content:hover::after{opacity:1;transition-delay:0.3s}.-ml-4{margin-left:-0.25rem}.mt-2{margin-top:0.125rem}";
+const EdsSidebarStyle0 = edsSidebarCss;
+
+const EdsSidebar$1 = /*@__PURE__*/ proxyCustomElement(class EdsSidebar extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.sidebar = createEvent(this, "sidebar", 7);
+        this.toggleItem = (itemId, ev) => {
+            if (ev) {
+                ev.stopPropagation();
+            }
+            const newOpen = new Set(this.openItems);
+            if (newOpen.has(itemId)) {
+                newOpen.delete(itemId);
+            }
+            else {
+                newOpen.add(itemId);
+            }
+            this.openItems = newOpen;
+        };
+        this.navigate = (url, ev) => {
+            if (!this.enableRouting || !url) {
+                return;
+            }
+            if (ev) {
+                ev.preventDefault();
+                ev.stopPropagation();
+            }
+            // Emit custom event for routing
+            this.sidebar.emit(url);
+            // Update browser history if available
+            if (typeof window !== 'undefined' && window.history) {
+                window.history.pushState({}, '', url);
+            }
+        };
+        this.handleItemClick = (item, ev) => {
+            var _a;
+            // If item has children, ONLY toggle (don't navigate)
+            if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
+                this.toggleItem(item.id, ev);
+                return;
+            }
+            // Only navigate if no children and has URL
+            if (item.url) {
+                this.navigate(item.url, ev);
+            }
+        };
+        this.items = '[]';
+        this.theme = 'default';
+        this.activeUrl = '';
+        this.enableRouting = true;
+        this.maxLevel = 4;
+        this.openItems = new Set();
+        this.parsedItems = [];
+    }
+    // ---------------------------------------------------------------------------
+    // Lifecycle
+    // ---------------------------------------------------------------------------
+    componentWillLoad() {
+        this.parsedItems = this.parseItems(this.items);
+        this.initializeOpenItems(this.parsedItems);
+    }
+    // ---------------------------------------------------------------------------
+    // Watchers
+    // ---------------------------------------------------------------------------
+    handleItemsChange(newItems) {
+        this.parsedItems = this.parseItems(newItems);
+        this.initializeOpenItems(this.parsedItems);
+    }
+    handleActiveUrlChange() {
+        this.initializeOpenItems(this.parsedItems);
+    }
+    // ---------------------------------------------------------------------------
+    // Utils
+    // ---------------------------------------------------------------------------
+    parseItems(items) {
+        if (Array.isArray(items)) {
+            return items;
+        }
+        if (typeof items === 'string') {
+            if (!items || items.trim() === '') {
+                return [];
+            }
+            try {
+                const parsed = JSON.parse(items);
+                return Array.isArray(parsed) ? parsed : [];
+            }
+            catch (e) {
+                console.error('eds-sidebar: Failed to parse items JSON:', e);
+                console.error('Received string:', items);
+                return [];
+            }
+        }
+        return [];
+    }
+    initializeOpenItems(items, level = 0) {
+        if (level === 0) {
+            // reset before recomputing
+            this.openItems = new Set();
+        }
+        if (level >= this.maxLevel) {
+            return;
+        }
+        items.forEach((item) => {
+            var _a;
+            const isActive = this.activeUrl && item.url === this.activeUrl;
+            const hasActiveChild = this.hasActiveDescendant(item);
+            if (item.open || isActive || hasActiveChild) {
+                this.openItems.add(item.id);
+            }
+            if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
+                this.initializeOpenItems(item.children, level + 1);
+            }
+        });
+    }
+    hasActiveDescendant(item) {
+        var _a;
+        if (item.url === this.activeUrl) {
+            return true;
+        }
+        if (!((_a = item.children) === null || _a === void 0 ? void 0 : _a.length)) {
+            return false;
+        }
+        return item.children.some((child) => this.hasActiveDescendant(child));
+    }
+    // ---------------------------------------------------------------------------
+    // Render
+    // ---------------------------------------------------------------------------
+    renderItem(item, level = 0) {
+        if (level >= this.maxLevel) {
+            return null;
+        }
+        const isOpen = this.openItems.has(item.id);
+        const isActive = !!item.url && this.activeUrl === item.url;
+        const hasChildren = !!(item.children && item.children.length);
+        const itemId = `eds-sidebar-${item.id}`;
+        const childrenId = `${itemId}-children`;
+        return (h("li", { class: {
+                'sidebar-item': true,
+                open: isOpen,
+                active: isActive,
+                'has-children': hasChildren,
+                [`level-${level}`]: true
+            } }, h("div", { class: "sidebar-item-content", onClick: (e) => this.handleItemClick(item, e), role: hasChildren ? 'button' : item.url ? 'link' : 'button', tabindex: "0", "aria-current": isActive ? 'page' : undefined, "aria-expanded": hasChildren ? (isOpen ? 'true' : 'false') : undefined, "aria-controls": hasChildren ? childrenId : undefined, onKeyDown: (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.handleItemClick(item, e);
+                }
+            } }, hasChildren && (h("span", { class: "sidebar-toggle mt-2 -ml-4", "aria-hidden": "true" }, h("eds-icon-wrapper", { icon: isOpen ? 'chevron-down' : 'chevron-right' }))), h("span", { class: "sidebar-link-wrapper" }, h("eds-link", { label: item.title, url: item.url || '#', intent: isActive ? 'strong' : 'weak', size: "small", "aria-label": item.title, "extra-class": "sidebar-link", tabindex: "-1" }))), hasChildren && isOpen && (h("ul", { id: childrenId, class: "sidebar-children" }, item.children.map((child) => this.renderItem(child, level + 1))))));
+    }
+    render() {
+        return (h(Host, { key: '4334d20e5d72671243633253910ab05b4da013da', class: {
+                'eds-sidebar': true,
+                [`theme-${this.theme}`]: true
+            } }, h("nav", { key: '319f6f42416d4229f1b011bf1216b39c8627302d', class: "sidebar-nav", "aria-label": "Sidebar" }, h("ul", { key: '687ceae3eca3e844e8f6a361db4a76d127d27813', class: "sidebar-list" }, this.parsedItems.map((item) => this.renderItem(item, 0))))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "items": ["handleItemsChange"],
+        "activeUrl": ["handleActiveUrlChange"]
+    }; }
+    static get style() { return EdsSidebarStyle0; }
+}, [1, "eds-sidebar", {
+        "items": [1],
+        "theme": [1],
+        "activeUrl": [1, "active-url"],
+        "enableRouting": [4, "enable-routing"],
+        "maxLevel": [2, "max-level"],
+        "openItems": [32],
+        "parsedItems": [32]
+    }, undefined, {
+        "items": ["handleItemsChange"],
+        "activeUrl": ["handleActiveUrlChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-sidebar", "eds-icon-wrapper", "eds-link"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-sidebar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsSidebar$1);
+            }
+            break;
+        case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "eds-link":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const EdsSidebar = EdsSidebar$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsSidebar, defineCustomElement };

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

@@ -56,7 +56,7 @@ const EdsSocialNetworks = /*@__PURE__*/ proxyCustomElement(class EdsSocialNetwor
      * Each social network link uses the `eds-link` component with specific classes and styles.
      */
     render() {
-        return (h("nav", { key: 'fd46b4205a2f03697d14a5a274698726aa9f406a', "aria-label": "Social media" }, h("p", { key: 'b2b5bacadc28417e948832562fbf413ed812aa1a', class: "f-ui-02" }, this.heading), h("ul", { key: '675682966b92c971be9afddc39c632070192da77', 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" })))))));
+        return (h("nav", { key: 'f56d034a9c934e1be2003a0fedaf6c9ec4fc5909', "aria-label": "Social media" }, h("p", { key: '66d7c2384206143eef36cdb085780d4a1590fe76', class: "f-ui-02" }, this.heading), h("ul", { key: '0ccb5fd44ee30f77c19fdb67dc1cc19fadd3561e', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm", external: true, "aria-label": `EBRAINS on ${network.label}`, url: network.url, icon: network.icon, intent: "strong" })))))));
     }
     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: 'e4c2f4762d214028c2e97666040e05ad5651debf' }, h("div", { key: 'e12572cb0195a84402847b0fc723ad2198196661', class: "spinner-overlay", style: overlayStyle }, h("span", { key: '6aa3b28a4e79951a5bbb46f6d7d845baf3761d14', class: "spinner", style: spinnerStyle }), this.message && h("p", { key: '5817378b525ecb8d8a211105b73a2db00067fbe3', class: "f-body-01" }, this.message))));
+        return (h(Host, { key: 'c50ca410eb23855b3076babb78b4849246722cf7' }, h("div", { key: '9b3722b00777a0dd77288c4c3b29419a9b87640b', class: "spinner-overlay", style: overlayStyle }, h("span", { key: '5479d0195b6d8991613df8ae03eee34b2a095b6b', class: "spinner", style: spinnerStyle }), this.message && h("p", { key: '448c3b0e6ce0aac6c21b53c58b97e423a1739864', class: "f-body-01" }, this.message))));
     }
     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 = ".steps{position:sticky;margin-left:16px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-40px;top:-2px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4,.steps h5{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before,.steps h5::before{content:counter(step);position:absolute;left:-40px;top:-2px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.steps-img-placeholder{width:100%;height:200px;background:linear-gradient(to bottom, #9CE142, #00C959, #00A595);}.bg-\\[\\#00A595\\]{--tw-bg-opacity:1;background-color:rgb(0 165 149 / var(--tw-bg-opacity))}.relative{position:relative}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.w-full{width:100%}.h-52{height:3.25rem}.h-96{height:6rem}.h-\\[200px\\]{height:200px}.mt-16{margin-top:1rem}.my-16{margin-top:1rem;margin-bottom:1rem}.mb-12{margin-bottom:0.75rem}.last\\:mb-0:last-child{margin-bottom:0rem}.last\\:mt-16:last-child{margin-top:1rem}.border-softer{border:2px solid rgba(0, 0, 0, .1)}.relative{position:relative}.flex{display:flex}.inline-flex{display:inline-flex}.grow{flex-grow:1}.rounded{border-radius:0.25rem}.rounded-lg{border-radius:16px}.rounded-t-lg{border-top-left-radius:16px;border-top-right-radius:16px}.border-2{border-width:2px}.p-8{padding:0.5rem}.p-24{padding:1.5rem}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.top-2{top:0.125rem}.bottom-2{bottom:0.125rem}.left-2{left:0.125rem}.right-2{right:0.125rem}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.overflow-hidden{overflow:hidden}.space-y-8{--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.space-y-16{--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.ml-8{margin-left:0.5rem}.gap-y-16{row-gap:1rem}.gap-x-16{-moz-column-gap:1rem;column-gap:1rem}.flex{display:flex}.grid{display:grid}.hidden{display:none}.block{display:block}.px-8{padding-left:0.5rem;padding-right:0.5rem}.pb-20{padding-bottom:1.25rem}.eds-steps__title{cursor:pointer}";
+const 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(--black)}.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}.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: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}.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(--green-500);}.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(--green-500);background-color:var(--green-500);color:var(--white)}.horizontal-step.is-completed .step-indicator{border-color:var(--green-500);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(--green-500)}.step-content{padding:2rem 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}";
 const EdsStepsV2Style0 = edsStepsV2Css;
 
 const EdsStepsV2$1 = /*@__PURE__*/ proxyCustomElement(class EdsStepsV2 extends HTMLElement {
@@ -17,48 +17,74 @@ const EdsStepsV2$1 = /*@__PURE__*/ proxyCustomElement(class EdsStepsV2 extends H
         this.next = createEvent(this, "next", 7);
         this.back = createEvent(this, "back", 7);
         this.handleTitleClick = (index) => {
-            // If clicking the same title, keep your existing toggle behavior
-            if (index === this.activeStep) {
-                this.activeStep = this.activeStep === index ? -1 : index;
+            // In linear mode, do NOT collapse; only navigate if allowed.
+            if (this.type === 'linear') {
+                if (index > this.activeStep) {
+                    // Prevent jumping forward over disabled steps
+                    for (let i = this.activeStep; i < index; i++) {
+                        if (this.isStepDisabled(i)) {
+                            return;
+                        }
+                    }
+                }
+                this.activeStep = index;
                 this.step.emit(this.activeStep);
                 return;
             }
-            // Block *forward* jumps when progression is gated by disableNext (boolean)
-            const forwardBlocked = this.type === 'linear' && index > this.activeStep && this.isNextDisabledForCurrent();
-            if (forwardBlocked) {
+            // Non-linear vertical mode can toggle collapse of the current title
+            if (this.orientation === 'vertical' && index === this.activeStep) {
+                this.activeStep = this.activeStep === index ? -1 : index;
+                this.step.emit(this.activeStep);
                 return;
             }
-            // Allow back (or forward when not gated)
+            // Otherwise just set
             this.activeStep = index;
             this.step.emit(this.activeStep);
         };
         this.handleNext = () => {
             const lastIndex = this.parsedSteps.length - 1;
+            // On last step: do NOT collapse; keep content visible, just emit finished
             if (this.activeStep >= lastIndex) {
                 this.finished.emit();
-                this.activeStep = -1; // collapse last step
+                this.activeStep = -1; // collapse the content
+                this.step.emit(this.activeStep); // notify change (-1 sentinel)
                 return;
             }
             const target = this.activeStep + 1;
             this.next.emit(target);
-            if (!this.disableNext) {
-                this.activeStep = target;
-                this.step.emit(this.activeStep);
+            if (this.isStepDisabled(this.activeStep)) {
+                return;
+            }
+            this.activeStep = target;
+            this.step.emit(this.activeStep);
+            // clear boolean form when moving away from a step
+            if (!Array.isArray(this.disableNext)) {
+                this.disableNext = false;
             }
         };
         this.handleBack = () => {
+            const lastIndex = this.parsedSteps.length - 1;
+            // Recover from collapsed sentinel if it ever occurs
+            if (this.activeStep < 0) {
+                this.activeStep = lastIndex;
+                this.step.emit(this.activeStep);
+                return;
+            }
             if (this.activeStep > 0) {
                 const target = this.activeStep - 1;
                 this.back.emit(target);
                 this.activeStep = target;
                 this.step.emit(this.activeStep);
+                if (!Array.isArray(this.disableNext)) {
+                    this.disableNext = false;
+                }
             }
         };
         this.steps = [];
         this.type = 'static';
+        this.orientation = 'vertical';
         this.imageSrc = undefined;
         this.imageWidth = undefined;
-        this.bg = true;
         this.message = undefined;
         this.nextLabel = 'Next';
         this.backLabel = 'Back';
@@ -67,57 +93,87 @@ const EdsStepsV2$1 = /*@__PURE__*/ proxyCustomElement(class EdsStepsV2 extends H
         this.headingLevel = 'h4';
         this.activeStep = 0;
     }
-    componentDidLoad() {
-        var _a;
-        if (this.type === 'linear') {
-            const btns = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('eds-button');
-            btns === null || btns === void 0 ? void 0 : btns.forEach((btn) => {
-                this.emitContext(btn);
-            });
+    handleDisableNextChange(newValue) {
+        if (typeof newValue === 'string' && newValue.trim().startsWith('[')) {
+            try {
+                this.disableNext = JSON.parse(newValue);
+            }
+            catch (e) {
+                console.error('Failed to parse disable-next array:', e);
+            }
         }
     }
     activeStepChanged(newValue) {
+        // Clamp and ignore collapsed sentinel
+        const max = Math.max(0, this.parsedSteps.length - 1);
+        if (newValue > max) {
+            this.activeStep = max;
+            return;
+        }
+        if (newValue < -1) {
+            this.activeStep = -1;
+            return;
+        }
+        if (newValue < 0) {
+            return;
+        } // ignore collapsed state if ever set elsewhere
+        // Emit parentContext to buttons inside the newly active step
         setTimeout(() => {
-            var _a;
-            const activeStepContainer = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.step')[newValue];
-            if (activeStepContainer) {
-                const btns = activeStepContainer.querySelectorAll('eds-button');
-                btns.forEach((btn) => {
-                    this.emitContext(btn);
-                });
-            }
+            const host = this.el.shadowRoot || this.el;
+            const activeStepContainer = host.querySelectorAll('.step')[newValue];
+            activeStepContainer === null || activeStepContainer === void 0 ? void 0 : activeStepContainer.querySelectorAll('eds-button').forEach((btn) => this.emitContext(btn));
         }, 50);
     }
+    componentWillLoad() {
+        this.handleDisableNextChange(this.disableNext);
+    }
+    componentDidLoad() {
+        if (this.type === 'linear') {
+            const host = this.el.shadowRoot || this.el;
+            const btns = host.querySelectorAll('eds-button');
+            btns === null || btns === void 0 ? void 0 : btns.forEach((btn) => this.emitContext(btn));
+        }
+    }
     emitContext(linkElement) {
         const event = new CustomEvent('parentContext', {
             detail: {
                 componentName: this.el.tagName.toLowerCase(),
                 identifier: this.activeStep
-            }
+            },
+            bubbles: true,
+            composed: true
         });
         linkElement.dispatchEvent(event);
     }
     articleClasses() {
-        return [
-            this.bg ? 'bg-inverse' : 'bg-default',
-            'border-softer effect-focus-within relative rounded-lg border-2'
-        ].join(' ');
+        return ['border-softer effect-focus-within relative rounded-lg border-2'].join(' ');
     }
-    /**
-     * Parses the steps property into an array of Step objects.
-     */
     get parsedSteps() {
         return parseData(this.steps);
     }
-    isNextDisabledForCurrent() {
-        return !!this.disableNext;
+    isStepDisabled(index) {
+        if (Array.isArray(this.disableNext)) {
+            return index < this.disableNext.length ? !!this.disableNext[index] : false;
+        }
+        return index === this.activeStep && !!this.disableNext;
+    }
+    isNextDisabledFor(index) {
+        return this.isStepDisabled(index);
     }
-    /** Render the semantic heading element */
     renderHeading(title, index) {
         const Tag = this.headingLevel;
         if (this.type === 'linear') {
             const isOpen = this.activeStep === index;
-            const forwardBlocked = index > this.activeStep && this.isNextDisabledForCurrent();
+            // Check if jumping to this step crosses a disabled step
+            let forwardBlocked = false;
+            if (index > this.activeStep) {
+                for (let i = this.activeStep; i < index; i++) {
+                    if (this.isStepDisabled(i)) {
+                        forwardBlocked = true;
+                        break;
+                    }
+                }
+            }
             const onKey = (e) => {
                 if (forwardBlocked) {
                     return;
@@ -129,33 +185,64 @@ const EdsStepsV2$1 = /*@__PURE__*/ proxyCustomElement(class EdsStepsV2 extends H
             };
             return (h(Tag, { class: `eds-steps__title ${forwardBlocked ? 'is-disabled' : ''}`, role: "button", tabindex: forwardBlocked ? -1 : 0, "aria-disabled": forwardBlocked ? 'true' : 'false', "aria-expanded": isOpen, "aria-controls": `eds-step-panel-${index}`, onClick: () => !forwardBlocked && this.handleTitleClick(index), onKeyDown: onKey }, title));
         }
-        return h(Tag, { class: "eds-steps__title" }, title);
+        return (h(Tag, { class: "eds-steps__title", onClick: () => this.handleTitleClick(index) }, title));
+    }
+    /** Render horizontal indicator item */
+    renderHorizontalIndicator(step, index) {
+        const isActive = this.activeStep === index;
+        const isCompleted = this.activeStep > index;
+        let forwardBlocked = false;
+        if (index > this.activeStep) {
+            for (let i = this.activeStep; i < index; i++) {
+                if (this.isStepDisabled(i)) {
+                    forwardBlocked = true;
+                    break;
+                }
+            }
+        }
+        const onKey = (e) => {
+            if (forwardBlocked) {
+                return;
+            }
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                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)));
     }
     render() {
         const steps = this.parsedSteps;
-        return (h("div", { key: 'b486aa34dfab4902cd6569cc2ce228104ca536cd', class: this.articleClasses() }, this.imageSrc ? (h("div", { class: "w-full mb-12 rounded-t-lg overflow-hidden border-2" }, h("eds-img", { src: this.imageSrc, width: this.imageWidth, "with-bg": "true", "lazy-load": "true", alt: "Step illustration" }))) : (this.message && (h("div", { class: "w-full bg-[#00A595] rounded-t-lg border-2" }, h("div", { class: "p-24" }, h("span", { class: "text-inverse f-heading-04 " }, this.message))))), h("div", { key: 'e2a928ecb67caed4885c9e364621b422249610f1', class: "pb-20 px-8" }, this.type === 'linear' ? (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: index === 0 ? 'step' : 'step space-y-16', key: index }, this.renderHeading(step.title, index), this.activeStep === index && (h("div", { class: "content grid gap-y-16", id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: index === steps.length - 1 ? 'f-body-02 text-lighter' : 'f-body-02 text-lighter', innerHTML: step.content })), h("div", { class: "flex items-center" }, h("eds-button", { label: this.backLabel, intent: "ghost", icon: "chevron-left", iconPos: "left", iconSmall: true, onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small" }), h("eds-button", { label: index === steps.length - 1 ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", iconSmall: true, onClick: this.handleNext, disabled: this.disableNext, size: "small", class: "ml-8" }))))))))) : (
-        // Static mode: show all steps with their content.
-        h("div", { class: "steps space-y-8" }, steps.map((step, index) => (h("div", { class: "step", key: index }, this.renderHeading(step.title, index), h("div", { class: "content", id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter', innerHTML: step.content })))))))))));
+        const marginClass = this.orientation === 'horizontal' ? 'mt-64' : 'mt-32';
+        return (h("div", { key: '0f9dbb87f9cd269057183ee969addd55e85b2149', 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: 'd636d36c2e95d73c23c269b1faf67870eca97c16', class: "mt-16 pb-20 px-8" }, this.type === 'linear' && this.orientation === 'horizontal' ? (h("div", { class: "steps--horizontal", style: { '--step-count': steps.length.toString() } }, h("div", { class: "horizontal-indicators" }, steps.map((step, index) => this.renderHorizontalIndicator(step, index))), steps.map((step, index) => {
+            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: "ghost", icon: "chevron-left", iconPos: "left", iconSmall: true, onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small" }), h("eds-button", { label: isLast ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", iconSmall: true, onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: "small", class: index > 0 ? 'ml-8' : null })), h("slot", { name: `actions-${index}` })));
+        }))) : this.type === 'linear' ? (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: index === 0 ? 'step' : 'step mt-16', key: index }, this.renderHeading(step.title, index), this.activeStep === index && (h("div", { class: "content grid gap-y-16", id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: "my-16 f-body-02 text-lighter", innerHTML: step.content })), h("div", { class: `flex items-center justify-between ${marginClass}` }, h("eds-button", { label: this.backLabel, intent: "ghost", icon: "chevron-left", iconPos: "left", iconSmall: true, onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small" }), h("eds-button", { label: index === steps.length - 1 ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", iconSmall: true, onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: "small", class: index > 0 ? 'ml-8' : null }))))))))) : (h("div", { class: "steps space-y-8" }, steps.map((step, index) => (h("div", { class: "step", key: index }, this.renderHeading(step.title, index), h("div", { class: "content", id: `eds-step-panel-${index}` }, h("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; }
     static get watchers() { return {
+        "disableNext": ["handleDisableNextChange"],
         "activeStep": ["activeStepChanged"]
     }; }
     static get style() { return EdsStepsV2Style0; }
 }, [1, "eds-steps-v2", {
         "steps": [1],
         "type": [1],
+        "orientation": [1],
         "imageSrc": [1, "image-src"],
         "imageWidth": [2, "image-width"],
-        "bg": [4],
         "message": [1],
         "nextLabel": [1, "next-label"],
         "backLabel": [1, "back-label"],
         "finishLabel": [1, "finish-label"],
-        "disableNext": [4, "disable-next"],
+        "disableNext": [1032, "disable-next"],
         "headingLevel": [513, "heading-level"],
         "activeStep": [32]
     }, undefined, {
+        "disableNext": ["handleDisableNextChange"],
         "activeStep": ["activeStepChanged"]
     }]);
 function defineCustomElement$1() {