@ebrains/components 1.0.0 → 1.2.0

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

@@ -20,7 +20,7 @@ export class EdsSectionCore {
     }
     render() {
         const TagType = this.tag; // Set dynamic tag type (div or section)
-        return (h(TagType, { key: 'ff0b28dffb8aca2ad0ac1ee3eea7ebda75078f96' }, h("eds-section-heading", { key: '23e9bb2b084c6b8a534dd310fbe10e0de0211187', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '9cae6378bdb5304191d393967025570f94fdcdb2' })));
+        return (h(TagType, { key: '43f8d599041ae0c9761988fdec4872ec4a8ca037' }, h("eds-section-heading", { key: 'd120ddd851a0485e2edb43e2a6f508a661f35c07', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '9818b82a3eebcb741f5bccc9781e4212f2c5fa3d' })));
     }
     static get is() { return "eds-section-core"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,12 +36,12 @@ export class EdsSectionHeading {
     render() {
         const TagType = this.tag; // Dynamically set tag type for the container
         const HeadingTag = this.headingLevel; // Dynamically set heading level
-        return (h(TagType, { key: 'bb32f87fd944ebf08ebcde3980c18cd4bed18783', class: {
+        return (h(TagType, { key: '740ed8b3208e07091a1f4c79888e172dec33773a', 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: '0cd8ea8aada58e30675579c82ba130b40257c7c6', class: this.getHeadingClass() }, this.sectionTitle)));
+            } }, h(HeadingTag, { key: '4d4ceef35b7cb06bfbff2fdae47e66dd7ac10c49', class: this.getHeadingClass() }, this.sectionTitle)));
     }
     static get is() { return "eds-section-heading"; }
     static get properties() {

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

@@ -37,7 +37,7 @@ export class EdsSpinner {
                 alignItems: 'center',
                 justifyContent: 'center'
             };
-        return (h(Host, { key: '214876a56949c147e74c1a7072406234c2fb1a02' }, h("div", { key: 'b75b639fa38aafaf13e1eb727e28c5e67f3edafe', class: "spinner-overlay", style: overlayStyle }, h("span", { key: '87ba2ef7e1e9601ac0ae8132e9c891b4149a20b5', class: "spinner", style: spinnerStyle }))));
+        return (h(Host, { key: 'f687ccbbb05840b7699202f3758ec4a8d0de1bc4' }, h("div", { key: '4bb5c697f1ccd90d2d65d519fcfb3ec809b106ac', class: "spinner-overlay", style: overlayStyle }, h("span", { key: 'a07722d9ee9c94d03d9766a4b297a498998c00be', class: "spinner", style: spinnerStyle }))));
     }
     static get is() { return "eds-spinner"; }
     static get encapsulation() { return "shadow"; }

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

@@ -23,11 +23,11 @@ export class EdsSwitch {
     render() {
         // Compute an accessible name based on state.
         const accessibleLabel = this.labelOn || this.labelOff ? (this.checked ? this.labelOn : this.labelOff) : 'Toggle switch';
-        return (h("div", { key: '442876be1bad7ea8c9e383bc68b192a2744c38f9', class: "switch-container" }, this.labelOff && h("span", { key: 'e4a7b01c0188d26e5b6524741b1c8ef66e357e35', class: "switch-label switch-label--off mr-8" }, this.labelOff), h("button", { key: 'f56b3762622671acf793568a96567193c38999c7', type: "button", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": accessibleLabel, class: {
+        return (h("div", { key: '385c1463b11e83ff5b982218e0f28c54299210fd', class: "switch-container" }, this.labelOff && h("span", { key: 'f7e825a34487a1cec466b5172d77c2802029607c', class: "switch-label switch-label--off mr-8" }, this.labelOff), h("button", { key: 'fd1e8ffab675ee79edc6b99de4dfff42545d91af', type: "button", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": accessibleLabel, class: {
                 switch: true,
                 'switch--checked': this.checked,
                 'switch--disabled': this.disabled
-            }, onClick: this.toggleSwitch, disabled: this.disabled }, h("span", { key: 'b76e89a1e37130542dd86ce3aed8c5690aeeda63', class: "switch-handle" })), this.labelOn && h("span", { key: '4e5d4f8a2f19bb612a17fa73e441e7e718b71508', class: "switch-label switch-label--on ml-8" }, this.labelOn)));
+            }, onClick: this.toggleSwitch, disabled: this.disabled }, h("span", { key: '0d185957ffe2577ffc8798c298820c84c838a2a4', class: "switch-handle" })), this.labelOn && h("span", { key: 'f12b752ff94a363bb9593bd00cf43e7110e4399e', class: "switch-label switch-label--on ml-8" }, this.labelOn)));
     }
     static get is() { return "eds-switch"; }
     static get encapsulation() { return "shadow"; }

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

@@ -95,6 +95,11 @@ table {
     background-color: rgba(255, 255, 255, .15);
 }
 
+.px-8 {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+}
+
 .px-20 {
     padding-left: 1.25rem;
     padding-right: 1.25rem;

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

@@ -1,3 +1,31 @@
+/**
+ * <eds-table
+      table-data='[
+        { "Property": "username", "Type": "string", "Required": "Yes" },
+        { "Property": "password", "Type": "string", "Required": "Yes" },
+        { "Property": "email", "Type": "string", "Required": "No" }
+      ]'
+      config='{
+        "Type": { "format": "uppercase" },
+        "Property": { "format": "code" },
+        "Required": { "hidden": true }
+      }'
+      actions='[
+        { "name": "view",  "label": "View"  },
+        { "name": "edit",  "label": "Edit"  },
+        { "name": "delete", "type": "checkbox" }
+      ]'
+    ></eds-table>
+
+    <script>
+      const table = document.querySelector('eds-table');
+      table.addEventListener('rowaction', e => {
+        const { action, row } = e.detail;
+        console.log(e.detail)
+        // etc.
+      });
+    </script>
+ */
 import { sendAnalytics } from "../../utils/analytics";
 import { h } from "@stencil/core";
 import { parseData } from "../../utils/sharedUtils";
@@ -25,6 +53,10 @@ export class EdsTable {
         this.searchEnabled = false;
         this.hostWidth = undefined;
         this.columnSize = 'default';
+        this.actions = [];
+        this.actionTemplate = undefined;
+        this.parsedActions = [];
+        this.dataColumns = [];
         this.tbData = [];
         this.columns = [];
         this.currentPage = 1;
@@ -39,8 +71,18 @@ export class EdsTable {
     handleConfigChange() {
         this.parseConfig();
     }
+    handleActionsChange() {
+        try {
+            this.parsedActions = typeof this.actions === 'string' ? JSON.parse(this.actions) : this.actions;
+        }
+        catch (_a) {
+            console.error('Failed to parse actions JSON');
+            this.parsedActions = [];
+        }
+    }
     componentWillLoad() {
         this.parseConfig();
+        this.handleActionsChange();
         this.data ? this.parseData() : this.endpoint && this.fetchData();
     }
     componentDidLoad() {
@@ -69,24 +111,20 @@ export class EdsTable {
     parseData() {
         try {
             this.tbData = parseData(this.data);
-            //this.tbData = typeof this.data === 'string' ? JSON.parse(this.data) : this.data || [];
             this.totalRows = this.tbData.length;
             this.updateColumns();
             this.currentPage = 1;
         }
         catch (error) {
-            // eslint-disable-next-line
             console.error('Failed to parse data:', error);
             this.tbData = [];
         }
     }
     parseConfig() {
         try {
-            //this.parsedConfig = parseData(this.config);
             this.parsedConfig = typeof this.config === 'string' ? JSON.parse(this.config) : this.config;
         }
         catch (error) {
-            // eslint-disable-next-line
             console.error('Failed to parse config:', error);
             this.parsedConfig = {};
         }
@@ -98,7 +136,6 @@ export class EdsTable {
             this.data = data;
         }
         catch (error) {
-            // eslint-disable-next-line
             console.error('Failed to fetch data:', error);
         }
     }
@@ -134,24 +171,52 @@ export class EdsTable {
     handleSearch(event) {
         this.searchQuery = event.target.value;
         this.currentPage = 1;
-        /*sendAnalytics({
-          category: 'ui-component',
-          parentContext: null,
-          tag: `${this.hostEl.tagName.toLowerCase()}/eds-input-field/search`,
-          name: `${this.searchQuery}` || '',
-          action: 'page'
-        });*/
     }
     renderCell(value, column) {
         var _a;
         const format = (_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.format;
         return format === 'uppercase' ? (value === null || value === void 0 ? void 0 : value.toString().toUpperCase()) : format === 'svg' ? (h("div", { innerHTML: value })) : format === 'bold' ? (h("strong", null, value)) : format === 'code' ? (h("code", null, value)) : (value);
     }
+    /**
+     * Renders one action (button or checkbox) for a specific action‐name.
+     * Used by the “Actions” column below.
+     */
+    renderSingleActionCell(actionName, row) {
+        var _a;
+        const act = this.parsedActions.find((a) => a.name === actionName);
+        if (this.actionTemplate) {
+            return this.actionTemplate(row);
+        }
+        const type = act.type || 'button';
+        if (type === 'checkbox') {
+            const boundField = (_a = act.field) !== null && _a !== void 0 ? _a : act.name;
+            const checked = !!row[boundField];
+            return (h("eds-input-field", { name: `chc-${actionName}`, label: act.label, type: "checkbox", checked: checked, onChange: (e) => this.emitAction(act.name, row, e.target.checked) }));
+        }
+        return h("eds-link", { label: act.label, intent: "weak", onClick: () => this.emitAction(act.name, row) });
+    }
+    emitAction(actionName, row, checked) {
+        sendAnalytics({
+            category: 'ui-component',
+            parentContext: null,
+            tag: `${this.hostEl.tagName.toLowerCase()}/action`,
+            name: actionName,
+            action: 'click'
+        });
+        this.rowaction.emit({ action: actionName, row, checked: !!checked });
+    }
     shouldEnablePagination() {
         return this.paginationEnabled && this.totalRows > this.rowsPerPage;
     }
     updateColumns() {
+        var _a, _b;
+        // 1) Grab all data‐keys from the first row (if any) as before:
         this.columns = this.tbData.length > 0 ? Object.keys(this.tbData[0]) : [];
+        // 2) Instead of pushing each action.name, we add just a single “actions” column
+        //    (you can call it anything; we’ll detect it in render())
+        if (((_b = (_a = this.parsedActions) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0 && this.tbData.length > 0) {
+            this.columns.push('actions');
+        }
     }
     getVisibleColumnsCount() {
         return this.columns.filter((column) => { var _a; return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden); }).length;
@@ -166,23 +231,39 @@ export class EdsTable {
         }
         return divisionFactor;
     }
+    capitalize(str) {
+        return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+    }
     render() {
-        // Use containerWidth state that is updated on resize.
         const currentContainerWidth = this.hostWidth && this.hostWidth.trim() !== '' ? Number(this.hostWidth) : this.containerWidth || 400;
-        // Calculate the number of visible columns and the column width.
         const visibleColumnsCount = this.getVisibleColumnsCount();
         const columnWidth = visibleColumnsCount > 0 ? Math.floor((currentContainerWidth / visibleColumnsCount) * this.divisionFactor()) : 100;
         const paginatedRows = this.getPaginatedRows();
         const lastPage = Math.ceil(this.totalRows / this.rowsPerPage);
-        return (h("div", { key: '81735ac374853c8c92b3f50e26263ff9d71b326c' }, this.searchEnabled && (h("div", { key: '0b2ab8dbb343033f605e2028890bd963cd650998' }, h("eds-input-field", { key: 1, name: "search", "aria-label": "Search", type: "text", placeholder: "Search...",
-            // @ts-ignore
-            onInput: (event) => this.handleSearch(event) }))), h("div", { key: 'eb3eebe6fb124d4e1983b2fb7e636707817d36bd', class: "mt-20" }, h("table", { key: '03b312ac20bdec28843a46907a3cc4fba69f62ae', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: 'ccab58dc46ae765df28da97ded6b1dd14d45d7f1' }, h("tr", { key: '904a125aad610cebe42b0bce46615be38f0ee17a', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
+        return (h("div", { key: '5034177431626ab2bfc5fd0118c006d11a4f6e96' }, this.searchEnabled && (h("div", { key: '86e1a6ffc4bed69f290b3a53031341ab276eaf04' }, h("eds-input-field", { key: 1, name: "search", "aria-label": "Search", type: "text", placeholder: "Search...", onInput: (event) => this.handleSearch(event) }))), h("div", { key: 'bc11838d819ecf89c5ba1cc1cfe7ac0af0e82b59', class: "mt-20" }, h("table", { key: '97f16b65eb1d9387e9ca7588184c9e68c1afcc2e', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: 'f4d64ada28c225db1b224277513e663a99de1cec' }, h("tr", { key: 'c6a69e159cceada0f7143c0acb787e5c23242ae7', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((col) => {
             var _a;
-            return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && (h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }, column));
-        }))), h("tbody", { key: 'a4c54c9c89d15546020dbb684e5486decde33f30' }, paginatedRows.map((row) => (h("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
+            // 3) For the “actions” column, override the header to “Actions”
+            if (col === 'actions') {
+                // You can choose a smaller min‐width here if you wish:
+                return (h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }, "Actions"));
+            }
+            // Otherwise, render column name or action label if you do want to override:
+            if (!((_a = this.parsedConfig[col]) === null || _a === void 0 ? void 0 : _a.hidden)) {
+                return (h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }, this.capitalize(col)));
+            }
+            return null;
+        }))), h("tbody", { key: '133af82fdd1f820e853734ab48123cb3db527e15' }, paginatedRows.map((row) => (h("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((col) => {
             var _a;
-            return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && (h("td", { class: "text-center border border-softer m-0 py-8 f-ui-2 break-words", style: { minWidth: `${columnWidth - 4}px` } }, this.renderCell(row[column], column)));
-        }))))))), this.shouldEnablePagination() && (h("div", { key: '2a248cbbe81ac8c1ad4dfbb49a9615f15931bac6', class: "mt-20" }, h("eds-pagination", { key: '11701d81922ca4c8b36fe82be32316a175eddbcd', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
+            if (col === 'actions') {
+                // 4) Render ALL actions inside a single <td> for this row:
+                return (h("td", { class: "text-center border border-softer m-0 f-ui-02 break-words actions-cell", style: { minWidth: `${columnWidth - 4}px` } }, h("div", { style: { display: 'flex', gap: '0.5rem', justifyContent: 'center', flexWrap: 'wrap' } }, this.parsedActions.map((act) => (h("span", { style: { whiteSpace: 'nowrap' } }, this.renderSingleActionCell(act.name, row)))))));
+            }
+            if (!((_a = this.parsedConfig[col]) === null || _a === void 0 ? void 0 : _a.hidden)) {
+                // Regular data cell:
+                return (h("td", { class: "text-center border border-softer m-0 py-8 f-ui-2 break-words", style: { minWidth: `${columnWidth - 4}px` } }, this.renderCell(row[col], col)));
+            }
+            return null;
+        }))))))), this.shouldEnablePagination() && (h("div", { key: '85032d06cd0ac5dae9b504d423fceba3cd074861', class: "mt-20" }, h("eds-pagination", { key: '8caf6f57960e222c04d45f57a5811cd7bd524f4c', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
     }
     static get is() { return "eds-table"; }
     static get encapsulation() { return "shadow"; }
@@ -239,7 +320,7 @@ export class EdsTable {
                 "mutable": false,
                 "complexType": {
                     "original": "| string\n    | {\n        [key: string]: {\n          hidden?: boolean;\n          format?: 'uppercase' | 'bold' | 'code';\n        };\n      }",
-                    "resolved": "string | { [key: string]: { hidden?: boolean; format?: \"code\" | \"bold\" | \"uppercase\"; }; }",
+                    "resolved": "string | { [key: string]: { hidden?: boolean; format?: \"code\" | \"uppercase\" | \"bold\"; }; }",
                     "references": {}
                 },
                 "required": false,
@@ -340,11 +421,58 @@ export class EdsTable {
                 "attribute": "column-size",
                 "reflect": false,
                 "defaultValue": "'default'"
+            },
+            "actions": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | TableAction[]",
+                    "resolved": "TableAction[] | string",
+                    "references": {
+                        "TableAction": {
+                            "location": "local",
+                            "path": "/Users/nigeor/Documents/Projects/EBRAINS/ebrains-ui-ecosystem/packages/components/src/components/eds-table/eds-table.tsx",
+                            "id": "../../../packages/components/src/components/eds-table/eds-table.tsx::TableAction"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of actions to render in each row.\nEach action should have:\n - `name`: a unique key (e.g. \"view\", \"delete\")\n - `label`: what shows in the button (or you could pass an icon name here)"
+                },
+                "attribute": "actions",
+                "reflect": false,
+                "defaultValue": "[]"
+            },
+            "actionTemplate": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(row: any) => VNode",
+                    "resolved": "(row: any) => VNode",
+                    "references": {
+                        "VNode": {
+                            "location": "import",
+                            "path": "@stencil/core",
+                            "id": "../../../node_modules/@stencil/core/internal/stencil-core/index.d.ts::VNode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional: allow the consumer to supply a full JSX render\u2010prop\ninstead of simple name/label pairs. If provided, this takes priority."
+                }
             }
         };
     }
     static get states() {
         return {
+            "parsedActions": {},
+            "dataColumns": {},
             "tbData": {},
             "columns": {},
             "currentPage": {},
@@ -354,6 +482,24 @@ export class EdsTable {
             "containerWidth": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "rowaction",
+                "name": "rowaction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define the event with the payload type"
+                },
+                "complexType": {
+                    "original": "{ action: string; row: any; checked: boolean }",
+                    "resolved": "{ action: string; row: any; checked: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
     static get elementRef() { return "hostEl"; }
     static get watchers() {
         return [{
@@ -362,6 +508,9 @@ export class EdsTable {
             }, {
                 "propName": "config",
                 "methodName": "handleConfigChange"
+            }, {
+                "propName": "actions",
+                "methodName": "handleActionsChange"
             }, {
                 "propName": "data",
                 "methodName": "parseData"

package/dist/collection/eds-docs-ui/components-section/functional/react.js

@@ -1,2 +1,2 @@
 import { h } from "@stencil/core";
-export const DocsReact = () => (h("div", null, h("h2", null, "React Wrappers"), h("p", null, "To use the EBRAINS web components in a React Application, simple install the package below and check out the examples"), h("eds-code-block", { code: "npm install @ebrains/react", language: "javascript", "copy-label": "Copy Code" }), h("eds-section-core", { "section-title": "Example React App", "heading-level": "h3" }, h("p", null, "This code displays a Stencil-based splash screen that stays visible until an initialization promise resolves (or errors), then hides itself and reveals the main React app content."), h("eds-code-block", { code: "\nimport React, { useMemo, useState } from 'react';\nimport {\n  EdsHeader\n  EdsSplashScreen,\n  EdsMatomoNotice,\n  EdsSteps\n} from '@ebrains/react';\nimport './app.css';\n\n// simulate 2s\nfunction fakeInit(): Promise<void> {\n  return new Promise(resolve => setTimeout(resolve, 2000));\n}\n\nexport function App() {\n  // 1) create init promise\n  const initPromise = useMemo(() => fakeInit(), []);\n\n  // 2) is splash still visible\n  const [splashVisible, setSplashVisible] = useState(true);\n  const [initError, setInitError] = useState<string | null>(null);\n\n  // 3) show the UI after the splash has hidden\n  const showApp = !splashVisible && !initError;\n\n  return (\n    <div>\n      {splashVisible && (\n        <EdsSplashScreen\n          inverse={false}\n          initPromise={initPromise}\n          onSplash={(e: CustomEvent) => {\n            if (e.detail.type === 'hidden') {\n              setSplashVisible(false);\n            } else if (e.detail.type === 'error') {\n              setInitError(e.detail.message);\n              setSplashVisible(false);\n            }\n          }}\n        />\n      )}\n\n      {initError && (\n        <div className='error'>\n          Failed to initialize: {initError}\n        </div>\n      )}\n\n      {/* Show App only when ready */}\n      {showApp && (\n        <>\n          <EdsHeader></EdsHeader>\n          <EdsSteps\n            steps={[\n              {\n                title: 'Introduction',\n                content: 'Begin by familiarizing yourself with the overall process.'\n              },\n              {\n                title: 'Process Overview',\n                content: 'Review the detailed steps and understand the workflow.'\n              }\n            ]}\n            type='linear'\n          />\n\n          <EdsMatomoNotice />\n\n          <div id='root'></div>\n        </>\n      )}\n    </div>\n  );\n}\nexport default App;\n", language: "javascript", "copy-label": "Copy Code" }))));
+export const DocsReact = () => (h("div", null, h("h2", null, "React Wrappers"), h("p", null, "To use the EBRAINS web components in a React Application, simple install the package below and check out the examples"), h("eds-code-block", { code: "npm install @ebrains/react", language: "javascript", "copy-label": "Copy Code" }), h("eds-section-core", { "section-title": "Example React App", "heading-level": "h3" }, h("p", null, "This code displays a Stencil-based splash screen that stays visible until an initialization promise resolves (or errors), then hides itself and reveals the main React app content."), h("eds-code-block", { code: "\nimport React, { useMemo, useState } from 'react';\nimport {\n  EdsHeader,\n  EdsSplashScreen,\n  EdsMatomoNotice,\n  EdsSteps\n} from '@ebrains/react';\nimport './app.css';\n\n// simulate 2s\nfunction fakeInit(): Promise<void> {\n  return new Promise(resolve => setTimeout(resolve, 2000));\n}\n\nexport function App() {\n  // 1) create init promise\n  const initPromise = useMemo(() => fakeInit(), []);\n\n  // 2) is splash still visible\n  const [splashVisible, setSplashVisible] = useState(true);\n  const [initError, setInitError] = useState<string | null>(null);\n\n  // 3) show the UI after the splash has hidden\n  const showApp = !splashVisible && !initError;\n\n  return (\n    <div>\n      {splashVisible && (\n        <EdsSplashScreen\n          inverse={false}\n          initPromise={initPromise}\n          onSplash={(e: CustomEvent) => {\n            if (e.detail.type === 'hidden') {\n              setSplashVisible(false);\n            } else if (e.detail.type === 'error') {\n              setInitError(e.detail.message);\n              setSplashVisible(false);\n            }\n          }}\n        />\n      )}\n\n      {initError && (\n        <div className='error'>\n          Failed to initialize: {initError}\n        </div>\n      )}\n\n      {/* Show App only when ready */}\n      {showApp && (\n        <>\n          <EdsHeader></EdsHeader>\n          <EdsSteps\n            steps={[\n              {\n                title: 'Introduction',\n                content: 'Begin by familiarizing yourself with the overall process.'\n              },\n              {\n                title: 'Process Overview',\n                content: 'Review the detailed steps and understand the workflow.'\n              }\n            ]}\n            type='linear'\n          />\n\n          <EdsMatomoNotice />\n\n          <div id='root'></div>\n        </>\n      )}\n    </div>\n  );\n}\nexport default App;\n", language: "javascript", "copy-label": "Copy Code" }))));

package/dist/collection/shared-ui/eds-footer/eds-footer.js

@@ -43,9 +43,9 @@ export class EdsFooter {
      * @returns {JSX.Element} The rendered JSX for the footer component.
      */
     render() {
-        return (h("footer", { key: '7bbc8cd8e0e3a153dc30bb3569e83afc0bc09b0a' }, this.social ? (h("div", { class: "border-softest border-t-2 pt-20 md:pt-28" }, h("div", { class: "container pb-20" }, h("div", { class: "grid-layout" }, h("div", { class: "grid-col-span-12 lg:grid-col-span-5" }, h("eds-social-networks", { class: "mt-28" })))))) : null, h("div", { key: '9ee8ada698546344b18e557ee1de76042cd727ed', class: `border-softest ${this.social ? 'border-t-2' : ''} pb-28 pt-20 md:pt-28` }, h("div", { key: 'e795e5bba0273b4147c66ed667142997bc0cbaff', class: "container flex items-center gap-20 lg:flex-nowrap" }, h("div", { key: 'fa09a0dbccb035b1e4f496aa447aca241bcc2415', class: "flex items-center gap-x-12" }, h("a", { key: '273bbee5c7353fa4ab0ac30f30a190bae250546c', target: "_blank", rel: "noopener noreferrer", class: "effect-focus focus-visible:rounded-xs flex w-[54px] ml-0", href: "https://research-and-innovation.ec.europa.eu/funding/funding-opportunities/funding-programmes-and-open-calls/horizon-2020_en", "aria-label": "Learn about Horizon 2020 funding" }, h("eds-img", { key: '4568610de97ad886e26195bde656609e2584b792', width: 54, height: 41, src: "https://www.ebrains.eu/flags/4x3/eu.svg", alt: "European Union Flag" }))), h("div", { key: '65dc6a5b0da9d69b0b43ed738c9612293ef64e96' }, h("div", { key: 'a89180b8f308502dfd864d5aab0702f262718cc8', class: "f-ui-04 text-light" }, h("p", { key: '54a69763c38a7986008f9b553fb6b75e5a36d255' }, this.fundedBy), h("div", { key: '9378c48e766a2df4d14805c8777d5d98a2d016ce', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block" }, h("span", { key: 'ef939799150dd7ea91f72de94b1e564039c1e900', class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline mr-4" }, "\u00A9 ", this.rightsReserved), this.enableCookiesSettings ? (h("eds-link", { label: this.cookiesPreferences, intent: "underline", "extra-class": "f-ui-04", onClick: () => {
+        return (h("footer", { key: '7bbc8cd8e0e3a153dc30bb3569e83afc0bc09b0a' }, this.social ? (h("div", { class: "border-softest border-t-2 pt-20 md:pt-28" }, h("div", { class: "container pb-20" }, h("div", { class: "grid-layout" }, h("div", { class: "grid-col-span-12 lg:grid-col-span-5" }, h("eds-social-networks", { class: "mt-28" })))))) : null, h("div", { key: '9ee8ada698546344b18e557ee1de76042cd727ed', class: `border-softest ${this.social ? 'border-t-2' : ''} pb-28 pt-20 md:pt-28` }, h("div", { key: 'e795e5bba0273b4147c66ed667142997bc0cbaff', class: "container flex items-center gap-20 lg:flex-nowrap" }, h("div", { key: 'fa09a0dbccb035b1e4f496aa447aca241bcc2415', class: "flex items-center gap-x-12" }, h("a", { key: '578d6a8463e65d07278f8328c108ee266cfba2b8', target: "_blank", rel: "noopener noreferrer", class: "effect-focus focus-visible:rounded-xs flex w-[54px] ml-0", href: "https://research-and-innovation.ec.europa.eu/funding/funding-opportunities/funding-programmes-and-open-calls/horizon-europe_en", "aria-label": "Learn about Horizon Europe funding" }, h("eds-img", { key: '5b9e987c2ecf62fb4f44c1faacad7c569a149805', width: 54, height: 41, src: "https://www.ebrains.eu/flags/4x3/eu.svg", alt: "European Union Flag" }))), h("div", { key: 'df75949c0718b8fb7dd449a6e7df39d332da366f' }, h("div", { key: 'f83d31b16d0601cd456d5cb72e9fa2adb29a2b66', class: "f-ui-04 text-light" }, h("p", { key: 'dcdf09d78ca64c5391d56fe5ed69bab987cbf67b' }, this.fundedBy), h("div", { key: 'af279fb5dfdf0a8f1f85e6ce7446dc3a0eeac397', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block" }, h("span", { key: '026b41fa6162ffb6825ccf98364b4caf64b6457a', class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline mr-4" }, "\u00A9 ", this.rightsReserved), this.enableCookiesSettings ? (h("eds-link", { label: this.cookiesPreferences, intent: "underline", "extra-class": "f-ui-04", onClick: () => {
                 this.toggleCookiesConsent();
-            } })) : null))), h("div", { key: '3b5388855844f5857e4d6a2b8d19d204b681ca40', class: "ml-auto pl-12" }, this.enableScrollTop ? (h("eds-button", { id: "backToTop", "aria-hidden": "true", "aria-label": this.backToTopAriaLabel, intent: "ghostInverse", icon: "chevron-up", onClick: this.backToTop, class: "transition-all transition duration-75 opacity-0 " })) : null)))));
+            } })) : null))), h("div", { key: '27cb561815d6918567ab8cfa1148019aca8aeda0', class: "ml-auto pl-12" }, this.enableScrollTop ? (h("eds-button", { id: "backToTop", "aria-hidden": "true", "aria-label": this.backToTopAriaLabel, intent: "ghostInverse", icon: "chevron-up", onClick: this.backToTop, class: "transition-all transition duration-75 opacity-0 " })) : null)))));
     }
     static get is() { return "eds-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/shared-ui/eds-form/eds-form.js

@@ -31,6 +31,9 @@ export class EdsForm {
         this.errors = {};
         this.parsedFields = [];
     }
+    async setData(newData) {
+        this.populateFormWithInitData(newData);
+    }
     componentWillLoad() {
         this.parseFields(this.fields);
         // Emit context for each eds-link element after the component is fully loaded
@@ -203,6 +206,14 @@ export class EdsForm {
         // Update the errors state and the hasError flag.
         this.errors = newErrors;
         this.hasError = Object.keys(newErrors).length > 0;
+        // Emit the updated form state.
+        this.form.emit({
+            event: 'input',
+            field: field.name,
+            value: target.type === 'checkbox' ? this.values[field.name] : target.value,
+            message: `${field.name} updated`
+            //data: this.makeFormData()
+        });
     }
     handleSubmit() {
         var _a, _b;
@@ -263,13 +274,13 @@ export class EdsForm {
     render() {
         const hiddenFields = this.parsedFields.filter((field) => field.type === 'hidden');
         const otherFields = this.parsedFields.filter((field) => field.type !== 'hidden');
-        return (h("form", { key: '76fbc3f587eaac0bd53553663f072e5066914ae5', ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: '64d99d4ac7e1cb8e4bfe436bb236648201dcbc29' }, h("slot", { key: '9c257d29146b620367773726e65eaf680d3d010b' }), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), otherFields.map((field, index) => {
+        return (h("form", { key: '1418bbac3ea7c994bf363602e6ddd18ed3c6c661', ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: 'ae6f05d50a1c32312e585d55f0b5d64b0dd1fc9c' }, h("slot", { key: '09c9ddd0d3b77ae9cbcb54389b799af7a6fc6c9e' }), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), otherFields.map((field, index) => {
             var _a, _b;
             if (!this.isFieldVisible(field)) {
                 return null;
             }
-            return (h("eds-input-field", { key: index, name: field.name, id: `${this.name}_${field.name}`, label: field.label, placeholder: field.placeholder, value: this.values[field.name] || null, type: field.type, icon: field.icon || null, disabled: field.disabled, required: field.required, maxLength: field.maxlength, hint: field.hint, link: field.link, message: field.message, error: ((_a = this.errors[field.name]) === null || _a === void 0 ? void 0 : _a.length) > 0, errorMessage: (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br />'), onInput: (e) => this.handleInput(e, field), onChange: (e) => this.handleChange(e, field), class: index > 0 ? 'mt-20' : '', options: field.options }));
-        })), this.formBtn && (h("div", { key: 'ba7908ab85c6368aeff6824fd402b78b514d2292', class: "mt-20" }, h("eds-button", { key: '84efe452f55b2898e5747a01b0dc6033ba14da7a', intent: "primary", label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
+            return (h("eds-input-field", { key: index, name: field.name, id: `${this.name}_${field.name}`, label: field.label, placeholder: field.placeholder, value: this.values[field.name] || null, type: field.type, icon: field.icon || null, disabled: field.disabled, required: field.required, maxLength: field.maxlength, hint: field.hint, link: field.link, message: field.message, error: ((_a = this.errors[field.name]) === null || _a === void 0 ? void 0 : _a.length) > 0, errorMessage: (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br />'), onInput: (e) => this.handleInput(e, field), onChangeNative: (e) => this.handleChange(e, field), class: index > 0 ? 'mt-20' : '', options: field.options }));
+        })), this.formBtn && (h("div", { key: 'c97041c2e421c21a38513d3b456991167f5d1cdb', class: "mt-20" }, h("eds-button", { key: '96c35271f7227b9acd467fe822745bd41d3eaa80', intent: "primary", label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
     }
     static get is() { return "eds-form"; }
     static get encapsulation() { return "shadow"; }
@@ -440,6 +451,27 @@ export class EdsForm {
     }
     static get methods() {
         return {
+            "setData": {
+                "complexType": {
+                    "signature": "(newData: { [key: string]: any; }) => Promise<void>",
+                    "parameters": [{
+                            "name": "newData",
+                            "type": "{ [key: string]: any; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
             "getData": {
                 "complexType": {
                     "signature": "() => Promise<FormData>",

package/dist/collection/shared-ui/eds-steps/eds-steps.js

@@ -74,10 +74,10 @@ export class EdsSteps {
     render() {
         const steps = this.parsedSteps;
         if (this.type === 'linear') {
-            return (h("div", null, h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step mb-28", key: index }, h("h3", { onClick: () => this.handleStepClick(index) }, step.title), this.activeStep === index && (h("div", { class: "content" }, h("div", { class: "f-body-02 text-lighter my-16" }, step.content), h("eds-button", { label: index === steps.length - 1 ? 'Finish' : 'Continue', intent: "primary", class: "next-btn", onClick: this.handleNext }), h("eds-button", { label: "Back", intent: "ghostInverse", onClick: this.handleBack, disabled: index === 0, "extra-class": index === 0 ? 'hidden' : 'ml-8 block' })))))))));
+            return (h("div", null, h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step mb-28", key: index }, h("h3", { onClick: () => this.handleStepClick(index) }, step.title), this.activeStep === index && (h("div", { class: "content" }, h("slot", { name: `step-${index}` }, h("div", { class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16', innerHTML: step.content })), h("eds-button", { label: index === steps.length - 1 ? 'Finish' : 'Continue', intent: "primary", class: "next-btn", onClick: this.handleNext }), h("eds-button", { label: "Back", intent: "ghostInverse", onClick: this.handleBack, disabled: index === 0, "extra-class": index === 0 ? 'hidden' : 'ml-8 block' })))))))));
         }
         // Static mode: show all steps with their content, no navigation buttons.
-        return (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step mb-28", key: index }, h("h3", null, step.title), h("div", { class: "content" }, h("div", { class: "f-body-02 text-lighter my-16" }, step.content)))))));
+        return (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step mb-28", key: index }, h("h3", null, step.title), h("div", { class: "content" }, h("slot", { name: `step-${index}` }, h("div", { class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16', innerHTML: step.content }))))))));
     }
     static get is() { return "eds-steps"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/shared-ui/eds-steps-v2/eds-steps-v2.css

@@ -165,6 +165,11 @@ pre {
   margin-top: 1rem;
 }
 
+.my-16 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
 .mb-12 {
   margin-bottom: 0.75rem;
 }
@@ -258,4 +263,16 @@ pre {
 
 .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));
 }

package/dist/collection/shared-ui/eds-steps-v2/eds-steps-v2.js

@@ -17,6 +17,7 @@ export class EdsStepsV2 {
         this.steps = [];
         this.type = 'static';
         this.imageSrc = undefined;
+        this.imageWidth = undefined;
         this.bg = true;
         this.message = undefined;
         this.activeStep = 0;
@@ -72,9 +73,9 @@ export class EdsStepsV2 {
     }
     render() {
         const steps = this.parsedSteps;
-        return (h("div", { key: 'e86620aed9aafbf0c8e0cde0230b2147df952379', 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, "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: '773e51621fbfbc7b828d196d1e64a9752d02e5a4', class: "p-8" }, this.type === 'linear' ? (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step space-y-8", key: index }, h("h3", { onClick: () => this.handleStepClick(index) }, step.title), this.activeStep === index && (h("div", { class: "content" }, h("div", { class: "f-body-02 text-lighter mt-16", innerHTML: step.content }), h("eds-button", { label: index === steps.length - 1 ? 'Finish' : 'Continue', intent: "primary", class: "next-btn", onClick: this.handleNext }), h("eds-button", { label: "Back", intent: "ghostInverse", onClick: this.handleBack, disabled: index === 0, "extra-class": index === 0 ? 'hidden' : 'ml-8 block' })))))))) : (
+        return (h("div", { key: 'bbcec2dd9a5096eb0cecf0d413892e5708822f52', class: this.articleClasses() }, this.imageSrc ? (h("div", { class: "w-full mb-12 rounded-t-lg overflow-hidden border-2" }, h("eds-img", { src: this.imageSrc, width: this.imageWidth, "with-bg": "true", "lazy-load": "true", alt: "Step illustration" }))) : (this.message && (h("div", { class: "w-full bg-[#00A595] rounded-t-lg border-2" }, h("div", { class: "p-24" }, h("span", { class: "text-inverse f-heading-04 " }, this.message))))), h("div", { key: 'db0618aad7d5986fcb0889f1c439be73f83a00df', class: "p-8" }, this.type === 'linear' ? (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: index === 0 ? 'step' : 'step space-y-16', key: index }, h("h3", { onClick: () => this.handleStepClick(index) }, step.title), this.activeStep === index && (h("div", { class: "content" }, h("slot", { name: `step-${index}` }, h("div", { class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16', innerHTML: step.content })), h("eds-button", { label: index === steps.length - 1 ? 'Finish' : 'Continue', intent: "primary", class: "next-btn", onClick: this.handleNext }), h("eds-button", { label: "Back", intent: "ghostInverse", onClick: this.handleBack, disabled: index === 0, "extra-class": index === 0 ? 'hidden' : 'ml-8 block' })))))))) : (
         // Static mode: show all steps with their content.
-        h("div", { class: "steps space-y-8" }, steps.map((step, index) => (h("div", { class: "step", key: index }, h("h3", { onClick: () => this.handleStepClick(index) }, step.title), h("div", { class: "content" }, h("div", { class: "f-body-02 text-lighter mt-16", innerHTML: step.content }))))))))));
+        h("div", { class: "steps space-y-8" }, steps.map((step, index) => (h("div", { class: "step", key: index }, h("h3", { onClick: () => this.handleStepClick(index) }, step.title), h("div", { class: "content" }, h("slot", { name: `step-${index}` }, h("div", { class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16', innerHTML: step.content })))))))))));
     }
     static get is() { return "eds-steps-v2"; }
     static get encapsulation() { return "shadow"; }
@@ -149,6 +150,23 @@ export class EdsStepsV2 {
                 "attribute": "image-src",
                 "reflect": false
             },
+            "imageWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional image width for the eds-img component."
+                },
+                "attribute": "image-width",
+                "reflect": false
+            },
             "bg": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/shared-ui/eds-user/eds-user.js

@@ -33,7 +33,7 @@ export class EdsUser {
     }
     render() {
         const user = this.parsedUser;
-        return (h("div", { key: '9e2a8da09c2c15080e3b1ccf5b8e0e93b679d34b', class: "block" }, h("div", { key: 'ccc34b3c7b0ab8d515eebfa1962264365d20c788', class: "flex items-center" }, h("eds-dropdown", { key: '5283fb61297cd5f631d04da9ca19371a3778068c', label: `Welcome, ${user.preferred_username}`, intent: "tertiary", "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: "chevron-down", class: "text-default" }, h("div", { key: 'd39e041e54fb59a409520e8b88f6f569d55cc6fc', class: "min-w-[280px] p-8" }, h("div", { key: '50e571e30a6902b8443b9766dfb1018c76a2f68e', class: "flex gap-x-16" }, h("eds-avatar", { key: '88a675a256466366aba1028831626253d11d2474', "first-name": user.given_name, "last-name": user.family_name, initials: this.initials, color: "grey" }), h("div", { key: '99626794a7fa243bc599e9e77b0bc1b717d14c96', class: "max-w-full" }, user.name && h("p", { key: '1f1e33e19fd2b266f442b596953100f6b5e6dfcd', class: "f-ui-01 text-default w-full text-ellipsis" }, user.name), user.preferred_username && h("p", { key: 'a36ebac6fdae9fa059887f7cc5d1009179f8eef9', class: "f-ui-03-light text-light mt-4" }, user.preferred_username), user.email && h("p", { key: '976cd925af318831a22f1d43242e0295614bb2a1', class: "f-ui-03-light text-light mt-4" }, user.email))), h("eds-block-break", { key: '7d189caaab8a9b593017312d6e3d6943c36de22b' }), h("div", { key: 'efcfc9a2c1f774abfab09b09682d7839bd1d5d2c', class: "text-default flex w-full flex-col gap-y-8" }, h("slot", { key: 'f54425f35d804753b94bb61e1d8e211a1583ac3b' })))))));
+        return (h("div", { key: '9e2a8da09c2c15080e3b1ccf5b8e0e93b679d34b', class: "block" }, h("div", { key: 'ccc34b3c7b0ab8d515eebfa1962264365d20c788', class: "flex items-center" }, h("eds-dropdown", { key: 'dc4920fd442baa9f13d9f2b9a21065b5184eba83', label: `Hi, ${user.preferred_username}`, intent: "tertiary", "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: "chevron-down", class: "text-default" }, h("div", { key: '0522db7fc229186c645665a4c9eeedc46fb5823b', class: "min-w-[280px] p-8" }, h("div", { key: 'af7b9daec713d24f8a1415415d19cdf48905c0cb', class: "flex gap-x-16" }, h("eds-avatar", { key: 'c3ea7307d9beb597fe93d3942b7724f8526298ad', "first-name": user.given_name, "last-name": user.family_name, initials: this.initials, color: "grey" }), h("div", { key: '7af823b5f38a3d7acf16c633471dcfe74bca5e3c', class: "max-w-full" }, user.name && h("p", { key: '5973dfbac0efceeddb0dc211d9c502a1ad3b0dde', class: "f-ui-01 text-default w-full text-ellipsis" }, user.name), user.preferred_username && h("p", { key: '5989927760ed2a2d1365661bbdc112a3a3d23bbf', class: "f-ui-03-light text-light mt-4" }, user.preferred_username), user.email && h("p", { key: 'ee36be95298c0c7a748537012d48a85884955904', class: "f-ui-03-light text-light mt-4" }, user.email))), h("eds-block-break", { key: 'fb3ef5cad6e81f51983e54914412131c3bd4cbc2' }), h("div", { key: 'e3784f3f4931378bf55d766d4a1cf5e24a75d462', class: "text-default flex w-full flex-col gap-y-8" }, h("slot", { key: 'c0052bb56286d9a3fdc686c8407e105499a38084' })))))));
     }
     static get is() { return "eds-user"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/components-section.js

@@ -80,7 +80,7 @@ const DocsReact = () => (h("div", null,
     h("eds-code-block", { code: "npm install @ebrains/react", language: "javascript", "copy-label": "Copy Code" }),
     h("eds-section-core", { "section-title": "Example React App", "heading-level": "h3" },
         h("p", null, "This code displays a Stencil-based splash screen that stays visible until an initialization promise resolves (or errors), then hides itself and reveals the main React app content."),
-        h("eds-code-block", { code: "\nimport React, { useMemo, useState } from 'react';\nimport {\n  EdsHeader\n  EdsSplashScreen,\n  EdsMatomoNotice,\n  EdsSteps\n} from '@ebrains/react';\nimport './app.css';\n\n// simulate 2s\nfunction fakeInit(): Promise<void> {\n  return new Promise(resolve => setTimeout(resolve, 2000));\n}\n\nexport function App() {\n  // 1) create init promise\n  const initPromise = useMemo(() => fakeInit(), []);\n\n  // 2) is splash still visible\n  const [splashVisible, setSplashVisible] = useState(true);\n  const [initError, setInitError] = useState<string | null>(null);\n\n  // 3) show the UI after the splash has hidden\n  const showApp = !splashVisible && !initError;\n\n  return (\n    <div>\n      {splashVisible && (\n        <EdsSplashScreen\n          inverse={false}\n          initPromise={initPromise}\n          onSplash={(e: CustomEvent) => {\n            if (e.detail.type === 'hidden') {\n              setSplashVisible(false);\n            } else if (e.detail.type === 'error') {\n              setInitError(e.detail.message);\n              setSplashVisible(false);\n            }\n          }}\n        />\n      )}\n\n      {initError && (\n        <div className='error'>\n          Failed to initialize: {initError}\n        </div>\n      )}\n\n      {/* Show App only when ready */}\n      {showApp && (\n        <>\n          <EdsHeader></EdsHeader>\n          <EdsSteps\n            steps={[\n              {\n                title: 'Introduction',\n                content: 'Begin by familiarizing yourself with the overall process.'\n              },\n              {\n                title: 'Process Overview',\n                content: 'Review the detailed steps and understand the workflow.'\n              }\n            ]}\n            type='linear'\n          />\n\n          <EdsMatomoNotice />\n\n          <div id='root'></div>\n        </>\n      )}\n    </div>\n  );\n}\nexport default App;\n", language: "javascript", "copy-label": "Copy Code" }))));
+        h("eds-code-block", { code: "\nimport React, { useMemo, useState } from 'react';\nimport {\n  EdsHeader,\n  EdsSplashScreen,\n  EdsMatomoNotice,\n  EdsSteps\n} from '@ebrains/react';\nimport './app.css';\n\n// simulate 2s\nfunction fakeInit(): Promise<void> {\n  return new Promise(resolve => setTimeout(resolve, 2000));\n}\n\nexport function App() {\n  // 1) create init promise\n  const initPromise = useMemo(() => fakeInit(), []);\n\n  // 2) is splash still visible\n  const [splashVisible, setSplashVisible] = useState(true);\n  const [initError, setInitError] = useState<string | null>(null);\n\n  // 3) show the UI after the splash has hidden\n  const showApp = !splashVisible && !initError;\n\n  return (\n    <div>\n      {splashVisible && (\n        <EdsSplashScreen\n          inverse={false}\n          initPromise={initPromise}\n          onSplash={(e: CustomEvent) => {\n            if (e.detail.type === 'hidden') {\n              setSplashVisible(false);\n            } else if (e.detail.type === 'error') {\n              setInitError(e.detail.message);\n              setSplashVisible(false);\n            }\n          }}\n        />\n      )}\n\n      {initError && (\n        <div className='error'>\n          Failed to initialize: {initError}\n        </div>\n      )}\n\n      {/* Show App only when ready */}\n      {showApp && (\n        <>\n          <EdsHeader></EdsHeader>\n          <EdsSteps\n            steps={[\n              {\n                title: 'Introduction',\n                content: 'Begin by familiarizing yourself with the overall process.'\n              },\n              {\n                title: 'Process Overview',\n                content: 'Review the detailed steps and understand the workflow.'\n              }\n            ]}\n            type='linear'\n          />\n\n          <EdsMatomoNotice />\n\n          <div id='root'></div>\n        </>\n      )}\n    </div>\n  );\n}\nexport default App;\n", language: "javascript", "copy-label": "Copy Code" }))));
 
 const DocsVue = () => (h("div", null,
     h("h2", null, "Vue Wrappers"),