@ebrains/components 0.5.0-alpha.0 → 0.7.0-alpha.0

package/dist/components/eds-tag2.js

@@ -27,23 +27,15 @@ const EdsTag = /*@__PURE__*/ proxyCustomElement(class EdsTag extends HTMLElement
         this.__registerHost();
         this.__attachShadow();
         this.label = undefined;
-        this.ariaLabel = '';
         this.intent = 'default';
     }
-    /**
-     * Render the component.
-     * @returns The rendered HTML for the tag component with the applied styles and label.
-     */
     render() {
-        var _a;
         const classes = tagStyles({ intent: this.intent });
-        const accessibleLabel = ((_a = this.ariaLabel) === null || _a === void 0 ? void 0 : _a.length) ? this.ariaLabel : this.label;
-        return (h("span", { key: '6a517f42aeb641c95d96ecd6c3090a317a3195c6', class: classes, "aria-label": accessibleLabel }, this.label));
+        return h("span", { key: '2f4b0011094538aaa0a7cc855eadc1b39c9dc028', class: classes }, this.label);
     }
     static get style() { return EdsTagStyle0; }
 }, [1, "eds-tag", {
         "label": [1],
-        "ariaLabel": [1, "aria-label"],
         "intent": [1]
     }]);
 function defineCustomElement() {

package/dist/components/eds-timeline.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { p as parseData } from './sharedUtils.js';
 import { d as defineCustomElement$7 } from './eds-avatar2.js';
 import { d as defineCustomElement$6 } from './eds-card-desc2.js';
 import { d as defineCustomElement$5 } from './eds-card-generic2.js';
@@ -15,26 +16,7 @@ const EdsTimeline$1 = /*@__PURE__*/ proxyCustomElement(class EdsTimeline extends
         this.parsedEvents = [];
     }
     parseEvents(newValue) {
-        let parsed;
-        // If events is a string, try to parse it
-        if (typeof newValue === 'string') {
-            try {
-                parsed = JSON.parse(newValue);
-            }
-            catch (e) {
-                // eslint-disable-next-line
-                console.error('Error parsing timeline events JSON', e);
-                parsed = [];
-            }
-        }
-        // If events is already an array, use it directly
-        else if (Array.isArray(newValue)) {
-            parsed = newValue;
-        }
-        // Otherwise, default to an empty array
-        else {
-            parsed = [];
-        }
+        const parsed = parseData(newValue);
         // Map over the parsed events to ensure boolean conversion for "completed"
         this.parsedEvents = Array.isArray(parsed)
             ? parsed.map((event) => (Object.assign(Object.assign({}, event), { completed: event.completed === 'true' || event.completed === true })))
@@ -65,7 +47,7 @@ const EdsTimeline$1 = /*@__PURE__*/ proxyCustomElement(class EdsTimeline extends
         }
     }
     render() {
-        return (h("div", { key: '1ba4a93ce518b52f5821af75ae0587c44db92c6d', class: "max-w-sidebar mx-auto px-4 py-8" }, h("div", { key: '3e019420ddd4bfab7800567c7130299ea47205c6', class: "relative" }, h("div", { key: 'df99ce8fb08232c46449d7485dd7cffcd04b64d6', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), h("div", { key: '1b52694d2e8c3656910c02680aa8ce2e78b02997', class: "space-y-16" }, this.parsedEvents.map((event, index) => (h("div", { class: "relative flex" }, h("div", { class: `w-1/2 ${index % 2 === 0 ? 'pr-4' : ''}` }, index % 2 === 0 && (h("eds-card-generic", { cardTitle: event.title, url: "#", description: event.description, "heading-level": "h2", tiny: true, bg: !event.completed, "with-hover": "false", tags: JSON.stringify(event.completed
+        return (h("div", { key: '6d6eaccb876780be7c9e443a8d8a443fc0b4f779', class: "max-w-sidebar mx-auto px-4 py-8" }, h("div", { key: '122a6273fbd448a026fee899159872366cc01033', class: "relative" }, h("div", { key: 'bbf7359dacf3eb74f096d8c3e59344a6ceb67e8e', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), h("div", { key: 'e86895cccaf84f269a4ae0117deb5ef8bfa6e501', class: "space-y-16" }, this.parsedEvents.map((event, index) => (h("div", { class: "relative flex" }, h("div", { class: `w-1/2 ${index % 2 === 0 ? 'pr-4' : ''}` }, index % 2 === 0 && (h("eds-card-generic", { cardTitle: event.title, url: "#", description: event.description, "heading-level": "h2", tiny: true, bg: !event.completed, "with-hover": "false", tags: JSON.stringify(event.completed
                 ? [{ label: 'completed', style: 'accent' }]
                 : [{ label: 'pending', style: 'default' }]), onClick: () => this.handleEventClick(event) }))), h("div", { class: "flex items-center justify-center relative" }, event.completed ? (h("div", { class: "w-32 h-32 bg-accent rounded-full shadow flex items-center justify-center" })) : (h("div", { class: "w-32 h-32 bg-strong rounded-full shadow flex items-center justify-center" }))), h("div", { class: `w-1/2 ${index % 2 !== 0 ? 'pl-4' : ''}` }, index % 2 !== 0 && (h("eds-card-generic", { cardTitle: event.title, url: "#", description: event.description, "heading-level": "h2", tiny: true, bg: !event.completed, "with-hover": "false", tags: JSON.stringify(event.completed
                 ? [{ label: 'completed', style: 'accent' }]

package/dist/components/eds-toast-manager.js

@@ -4,13 +4,14 @@ 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-toast2.js';
 
-const edsToastManagerCss = ".toast-container{position:fixed;top:1rem;left:50%;transform:translateX(-50%);z-index:50;display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;max-width:36rem;}.toast-wrapper{width:100%;padding:0 1rem;}.eds-toast{box-shadow:0px 4px 6px rgba(0, 0, 0, 0.1);border-radius:0.5rem;animation:fade-in 0.3s ease-out;}@keyframes fade-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}";
+const edsToastManagerCss = ".toast-container{position:fixed;top:1rem;left:50%;transform:translateX(-50%);z-index:99999;display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;max-width:36rem;}.toast-wrapper{width:100%;padding:0 1rem;}.eds-toast{box-shadow:0px 4px 6px rgba(0, 0, 0, 0.1);border-radius:0.5rem;animation:fade-in 0.3s ease-out;}@keyframes fade-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}";
 const EdsToastManagerStyle0 = edsToastManagerCss;
 
 const EdsToastManager$1 = /*@__PURE__*/ proxyCustomElement(class EdsToastManager extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        this.__attachShadow();
         this.toastId = 0;
         this.toasts = [];
     }
@@ -37,11 +38,11 @@ const EdsToastManager$1 = /*@__PURE__*/ proxyCustomElement(class EdsToastManager
         this.toasts = this.toasts.filter((t) => t.id !== id);
     }
     render() {
-        return (h("div", { key: '22cb79fd617ca1701fba63d3d4bf04f73ce1ac77', class: "toast-container" }, this.toasts.map((t) => (h("div", { key: t.id }, h("eds-toast", { message: t.message, intent: t.intent, onClick: () => this.removeToast(t.id) }))))));
+        return (h("div", { key: 'e01e6cf0931155f70153ba5de054c1174e364397', class: "toast-container" }, this.toasts.map((t) => (h("div", { key: t.id }, h("eds-toast", { message: t.message, intent: t.intent, onClick: () => this.removeToast(t.id) }))))));
     }
     get hostElement() { return this; }
     static get style() { return EdsToastManagerStyle0; }
-}, [0, "eds-toast-manager", {
+}, [1, "eds-toast-manager", {
         "toasts": [32]
     }]);
 function defineCustomElement$1() {

package/dist/components/eds-toast2.js

@@ -3,6 +3,9 @@ import { c as cva } from './index2.js';
 import { d as defineCustomElement$2 } from './eds-button2.js';
 import { d as defineCustomElement$1 } from './eds-icon-wrapper2.js';
 
+const edsToastCss = ".relative{position:relative}.right-4{right:0.25rem}.bottom-4{bottom:0.25rem}.w-auto{width:auto}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-4{gap:0.25rem}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.ml-8{margin-left:0.5rem}.p-12{padding:0.75rem}.rounded-lg{border-radius:16px}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),\n        0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),\n        var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.bg-dark{background-color:var(--grey-300)}.bg-success{background-color:var(--green-200)}.bg-error{background-color:var(--red-200)}.bg-warning{background-color:var(--yellow-200)}.text-light{color:var(--grey-700)}.text-current{color:currentColor}.text-default{color:var(--black)}";
+const EdsToastStyle0 = edsToastCss;
+
 const toastStyles = cva(['relative right-4 bottom-4 w-auto p-12 rounded-lg shadow-md'], {
     variants: {
         intent: {
@@ -20,6 +23,7 @@ const EdsToast = /*@__PURE__*/ proxyCustomElement(class EdsToast extends HTMLEle
     constructor() {
         super();
         this.__registerHost();
+        this.__attachShadow();
         /**
          * Dismisses the toast.
          */
@@ -31,26 +35,24 @@ const EdsToast = /*@__PURE__*/ proxyCustomElement(class EdsToast extends HTMLEle
         this.duration = 5000;
         this.visible = true;
     }
-    /**
-     * Lifecycle method that sets up the initial panel height and adds a resize event listener
-     * to recalculate height on window resize.
-     */
     componentDidLoad() {
-        // Emit context for each eds-button element after the component is fully loaded
-        const btn = this.el.querySelector('eds-button');
+        const btn = this.el.shadowRoot.querySelector('eds-button');
         this.emitContext(btn);
     }
     /**
      * Emits a custom event called `parentContext` for a given button element.
+     * This event provides context information about the toast component.
+     *
+     * @param btnElement - The link element to which the event will be dispatched.
      */
-    emitContext(linkElement) {
+    emitContext(btnElement) {
         const event = new CustomEvent('parentContext', {
             detail: {
                 componentName: this.el.tagName.toLowerCase(),
                 identifier: null
             }
         });
-        linkElement.dispatchEvent(event);
+        btnElement.dispatchEvent(event);
     }
     connectedCallback() {
         // Auto-dismiss the toast after the specified duration
@@ -65,10 +67,11 @@ const EdsToast = /*@__PURE__*/ proxyCustomElement(class EdsToast extends HTMLEle
             return null;
         }
         const classes = toastStyles({ intent: this.intent });
-        return (h("div", { class: classes, role: "alert", "aria-live": "assertive" }, h("div", { class: "flex items-center justify-between gap-4" }, h("p", { class: "f-ui-01" }, this.message), h("eds-button", { intent: "tertiary", icon: "close", "aria-label": "Close Toast", onClick: () => this.dismissToast(), "extra-class": "ml-8" }))));
+        return (h("div", { class: classes, role: "alert", "aria-live": "assertive" }, h("div", { class: "flex items-center justify-between gap-4" }, h("span", { class: "f-ui-01" }, this.message), h("eds-button", { intent: "tertiary", icon: "close", "aria-label": "Close Toast", onClick: () => this.dismissToast(), "extra-class": "ml-8" }))));
     }
     get el() { return this; }
-}, [0, "eds-toast", {
+    static get style() { return EdsToastStyle0; }
+}, [1, "eds-toast", {
         "message": [1],
         "intent": [1],
         "duration": [2],

package/dist/components/eds-tooltip.js

@@ -94,7 +94,7 @@ const EdsTooltip$1 = /*@__PURE__*/ proxyCustomElement(class EdsTooltip extends H
         }
     }
     render() {
-        return (h("div", { key: '1635b034319df4827a62ed58267d81db277ad19d', class: "relative" }, h("slot", { key: '6cdfd0f6d456b984464c5091a2829cdba69ba895' }), this.isVisible && this.isPositioned && this.content && (h("div", { key: '7e736731dc700e0273fdfe15202426d2db086aef', class: "rounded-xs bg-strongest text-inverse f-ui-03-light pointer-events-none absolute z-10 whitespace-nowrap p-6", role: "tooltip", style: {
+        return (h("div", { key: '0d00052874b171639b9185412d8a3a9f917e6df5', class: "relative" }, h("slot", { key: '2cb9cdc51248c3c6cedcaf8ee113530f2675b870' }), this.isVisible && this.isPositioned && this.content && (h("div", { key: 'af54333ca0c8cf44dcc2b779a7378a9ecf256877', class: "rounded-xs bg-strongest text-inverse f-ui-03-light pointer-events-none absolute z-10 whitespace-nowrap p-6", role: "tooltip", style: {
                 top: this.tooltipStyle.top,
                 left: this.tooltipStyle.left,
                 transform: this.tooltipStyle.transform

package/dist/components/eds-trl.js

@@ -53,7 +53,7 @@ const EdsTrl$1 = /*@__PURE__*/ proxyCustomElement(class EdsTrl extends HTMLEleme
             Application: { format: 'code' },
             'Current TRL Stage': { format: 'text' }
         };
-        return (h("div", { key: 'a329a001d6275fcfe7df9bddf83bd289effe4151', class: "container mx-auto px-4 py-8" }, h("eds-table", { key: '93aebfd840b16416789b15eec0daa16d9126aa9f', data: JSON.stringify(tableData), config: JSON.stringify(tableConfig), "rows-per-page": "2", "pagination-enabled": "true", "search-enabled": "true", "column-size": "default" })));
+        return (h("div", { key: 'bd46e540a0dd3c09a91d1cff266b94a2bf9fba95', class: "container mx-auto px-4 py-8" }, h("eds-table", { key: 'd3ef10fc7e5ccd6029d1e62c2bb78765e78c8a13', data: JSON.stringify(tableData), config: JSON.stringify(tableConfig), "rows-per-page": "2", "pagination-enabled": "true", "search-enabled": "true", "column-size": "default" })));
     }
 }, [0, "eds-trl", {
         "applications": [1]

package/dist/components/eds-user.js

@@ -1,117 +1,40 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { l as login, a as logout, c as checkServerAvailability, i as initKeycloak, b as isAuthenticated, g as getUser } from './keycloak.js';
-import { t as toast } from './toastManager.js';
-import { d as defineCustomElement$8 } from './eds-avatar2.js';
-import { d as defineCustomElement$7 } from './eds-button2.js';
-import { d as defineCustomElement$6 } from './eds-dropdown2.js';
-import { d as defineCustomElement$5 } from './eds-icon-wrapper2.js';
-import { d as defineCustomElement$4 } from './eds-img2.js';
-import { d as defineCustomElement$3 } from './eds-link2.js';
-import { d as defineCustomElement$2 } from './eds-user-modal2.js';
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$7 } from './eds-avatar2.js';
+import { d as defineCustomElement$6 } from './eds-button2.js';
+import { d as defineCustomElement$5 } from './eds-dropdown2.js';
+import { d as defineCustomElement$4 } from './eds-icon-wrapper2.js';
+import { d as defineCustomElement$3 } from './eds-img2.js';
+import { d as defineCustomElement$2 } from './eds-link2.js';
 
 const EdsUser$1 = /*@__PURE__*/ proxyCustomElement(class EdsUser extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.authStatusChanged = createEvent(this, "authStatusChanged", 7);
-        /**
-         * Handles user login by invoking the Keycloak `login` function.
-         * Only triggers login if the user is not already authenticated.
-         */
-        this.handleLogin = () => {
-            if (!this.authenticated) {
-                try {
-                    login();
-                }
-                catch (error) {
-                    toast.show(error.message, 'error');
-                }
-            }
-        };
-        /**
-         * Handles user logout by invoking the Keycloak `logout` function.
-         * Resets the `authenticated` state to `false` after logout.
-         */
-        this.handleLogout = async () => {
-            try {
-                await logout();
-            }
-            catch (error) {
-                toast.show(error.message, 'error');
-            }
-            this.authenticated = false;
-            this.user = null;
-        };
-        this.keycloakUrl = undefined;
-        this.keycloakRealm = undefined;
-        this.keycloakClientId = undefined;
-        this.user = null;
-        this.authenticated = false;
-        this.username = '';
-        this.serverAvailable = false;
+        this.user = undefined;
     }
     /**
      * Lifecycle method that runs when the component is about to load.
      * It initializes authentication by calling the `initAuth` method.
      */
-    async componentWillLoad() {
-        // Check if required props are provided (optional check)
-        if (!this.keycloakUrl || !this.keycloakRealm || !this.keycloakClientId) {
-            // eslint-disable-next-line
-            console.error('Keycloak configuration props are missing.');
-            return;
-        }
-        this.serverAvailable = await checkServerAvailability(`${this.keycloakUrl}/realms/${this.keycloakRealm}`);
-        if (!this.serverAvailable) {
-            toast.show('Keycloak server is unavailable.', 'error');
-            return; // Do not proceed further
-        }
-        await this.initAuth();
-    }
-    /**
-     * Initializes the Keycloak authentication by configuring Keycloak with the provided props.
-     * Sets the `authenticated` state and `user` data if the user is authenticated.
-     * Emits `authStatusChanged` event with the authentication status.
-     */
-    async initAuth() {
-        try {
-            await initKeycloak({
-                url: this.keycloakUrl,
-                realm: this.keycloakRealm,
-                clientId: this.keycloakClientId
-            }, true);
-            if (isAuthenticated()) {
-                this.user = getUser();
-                this.authenticated = true;
-                this.authStatusChanged.emit({
-                    authenticated: this.authenticated,
-                    user: this.user
-                }); // Emit auth status change
-            }
-        }
-        catch (error) {
-            toast.show(error.message, 'error');
-        }
+    async componentWillLoad() { }
+    get initials() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const initials = `${((_b = (_a = this.user) === null || _a === void 0 ? void 0 : _a.given_name) === null || _b === void 0 ? void 0 : _b.charAt(0)) || ''}${((_d = (_c = this.user) === null || _c === void 0 ? void 0 : _c.family_name) === null || _d === void 0 ? void 0 : _d.charAt(0)) || ''}`.toUpperCase();
+        return initials || ((_g = (_f = (_e = this.user) === null || _e === void 0 ? void 0 : _e.name) === null || _f === void 0 ? void 0 : _f.charAt(0)) === null || _g === void 0 ? void 0 : _g.toUpperCase()) || '';
     }
     render() {
-        var _a;
-        return (h("div", { key: '22ee744979511dd2f8a1e1a15bb99215eadd535b', class: "block" }, !this.authenticated ? (h("eds-button", { label: "Login", intent: "primary", onClick: this.handleLogin, "extra-class": "text-default" })) : (h("div", { class: "flex items-center" }, h("eds-dropdown", { label: `Welcome, ${(_a = this.user) === null || _a === void 0 ? void 0 : _a.username}`, intent: "tertiary", "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: "chevron-down", class: "text-default" }, h("eds-user-modal", { user: JSON.stringify(this.user), onLogout: this.handleLogout.bind(this) }))))));
+        var _a, _b, _c, _d, _e, _f;
+        return (h("div", { key: '68bc37b43d006a35e088a647d41b2257fbef25a7', class: "block" }, h("div", { key: '3f4badcb645238de9ac8aaad78e1c132407f5b0d', class: "flex items-center" }, h("eds-dropdown", { key: '7f065f82c5845fd0ebc9c6b465ac56a695a99b77', label: `Welcome, ${(_a = this.user) === null || _a === void 0 ? void 0 : _a.preferred_username}`, intent: "tertiary", "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: "chevron-down", class: "text-default" }, h("div", { key: '2b1e9279c8d4feae16bf64c15837b61b945af447', class: "min-w-[280px] p-8" }, h("div", { key: 'efa9aef50bc1eb4961e53a89f6e07cc5ff78d67b', class: "flex gap-x-16 pb-16 border-b-2 border-softer" }, h("eds-avatar", { key: '2b78a6768ecb101138ab742d812d407e1b4fdd89', "first-name": (_b = this.user) === null || _b === void 0 ? void 0 : _b.given_name, "last-name": (_c = this.user) === null || _c === void 0 ? void 0 : _c.family_name, initials: this.initials, color: "grey", rounded: true, "initials-strong": true }), h("div", { key: 'd538dfe8df5e8af92fa204493b8b59b0d0e9f61a', class: "max-w-full" }, ((_d = this.user) === null || _d === void 0 ? void 0 : _d.name) && h("p", { key: 'a644c3cdda0ce7bf2f62438a3866692f4222efeb', class: "f-ui-01 text-default w-full text-ellipsis" }, this.user.name), ((_e = this.user) === null || _e === void 0 ? void 0 : _e.preferred_username) && (h("p", { key: '2a6cf5f0324d27ebdfd2b331e5f232c23e544ad5', class: "f-ui-03-light text-light mt-4" }, this.user.preferred_username)), ((_f = this.user) === null || _f === void 0 ? void 0 : _f.email) && h("p", { key: '02b9dd4f2999b68107eabc2c1e2a1bc3bb98f26a', class: "f-ui-03-light text-light mt-4" }, this.user.email))), h("div", { key: '3a68427dc603f0a3fb2652bfbea292eb718046dd', class: "text-default mt-16 flex w-full flex-col gap-y-8" }, h("div", { key: '3f3f617385efc57502794f78079b8486b6801425', class: "border-softer mb-10 border-b-2 pb-16" }, h("eds-link", { key: '62fbc143f710605c7d840277dc90054a1162831d', label: "My EBRAINS", "aria-label": "My EBRAINS", url: "https://www.ebrains.eu/dashboard", intent: "primary", "extra-class": "w-full", external: true })), h("eds-link", { key: 1, label: "Account Settings", url: "https://iam.ebrains.eu/auth/realms/hbp/account/", intent: "secondary", icon: "arrow-diagonal", external: true, "extra-class": "w-full" }), h("slot", { key: 'f48a4c872784b60e421fda6e48f67f4c85b101d7' })))))));
     }
     get hostEl() { return this; }
-}, [0, "eds-user", {
-        "keycloakUrl": [1, "keycloak-url"],
-        "keycloakRealm": [1, "keycloak-realm"],
-        "keycloakClientId": [1, "keycloak-client-id"],
-        "user": [32],
-        "authenticated": [32],
-        "username": [32],
-        "serverAvailable": [32]
+}, [4, "eds-user", {
+        "user": [16]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["eds-user", "eds-avatar", "eds-button", "eds-dropdown", "eds-icon-wrapper", "eds-img", "eds-link", "eds-user-modal"];
+    const components = ["eds-user", "eds-avatar", "eds-button", "eds-dropdown", "eds-icon-wrapper", "eds-img", "eds-link"];
     components.forEach(tagName => { switch (tagName) {
         case "eds-user":
             if (!customElements.get(tagName)) {
@@ -119,36 +42,31 @@ function defineCustomElement$1() {
             }
             break;
         case "eds-avatar":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "eds-button":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "eds-dropdown":
+        case "eds-button":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "eds-icon-wrapper":
+        case "eds-dropdown":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "eds-img":
+        case "eds-icon-wrapper":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "eds-link":
+        case "eds-img":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "eds-user-modal":
+        case "eds-link":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/dist/components/eds-vertical-stepper.js

@@ -39,7 +39,7 @@ const EdsVerticalStepper$1 = /*@__PURE__*/ proxyCustomElement(class EdsVerticalS
     }
     render() {
         const steps = this.parsedSteps;
-        return (h("div", { key: '08fa2f85c49dbe217b2f9d068bee486e432f5315', class: "stepper-container" }, h("div", { key: '6f7e0a0ccaa2882794a6be0216201d1bf924e2b2', class: "stepper" }, steps.map((step, index) => (h("div", { class: "step", key: index }, h("div", { class: "step-label" }, h("span", null, step.label), index === steps.length - 1 && h("span", { class: "f-ui-03 text-lightest ml-4" }, "(Last step)")), this.activeStep === index && (h("div", { class: "step-content" }, h("p", null, step.description), h("div", { class: "step-buttons" }, h("eds-button", { label: index === steps.length - 1 ? 'Finish' : 'Continue', 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' })))))))), this.activeStep === steps.length && (h("div", { key: '8a5ebfed582b25d828758e1762a063df6c745093', class: "" }, h("eds-alert", { key: 'a142fb50b8df533dd97f770aeaa453f2379ea7cb', intent: "success", message: "All steps completed - you're finished!" }), h("eds-button", { key: '5cfba059c9a152f179e7c31fa5d7a222c00defe2', label: "Start again", onClick: this.handleReset, "extra-class": "mt-4" })))));
+        return (h("div", { key: '89344ad340f9eb8d20f463d3990ec4832cbdc900', class: "stepper-container" }, h("div", { key: 'da8d7fae2b30cfc93d04d5d8c3a61d95ccf91383', class: "stepper" }, steps.map((step, index) => (h("div", { class: "step", key: index }, h("div", { class: "step-label" }, h("span", null, step.label), index === steps.length - 1 && h("span", { class: "f-ui-03 text-lightest ml-4" }, "(Last step)")), this.activeStep === index && (h("div", { class: "step-content" }, h("p", null, step.description), h("div", { class: "step-buttons" }, h("eds-button", { label: index === steps.length - 1 ? 'Finish' : 'Continue', 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' })))))))), this.activeStep === steps.length && (h("div", { key: '1e3272723281d9a10603b4d1e79badfdd6591cc5', class: "" }, h("eds-alert", { key: '7cc81e7e7097891364ff9894d383fd7bb9f7fce4', intent: "success", message: "All steps completed - you're finished!" }), h("eds-button", { key: 'a4d68698fa7831c7e2b6afae435979ccac46a726', label: "Start again", onClick: this.handleReset, "extra-class": "mt-4" })))));
     }
     static get style() { return EdsVerticalStepperStyle0; }
 }, [1, "eds-vertical-stepper", {

package/dist/components/formUtils.js

@@ -0,0 +1,223 @@
+// utils/validators.ts
+function validateField(name, value, type, required, maxLength) {
+    const errors = [];
+    if (required && !value) {
+        errors.push(`${name} is required.`);
+    }
+    if (maxLength && typeof value === 'string' && value.length > maxLength) {
+        errors.push(`${name} must be at most ${maxLength} characters.`);
+    }
+    if (type === 'email' && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.toString())) {
+        errors.push('Invalid email format.');
+    }
+    return errors;
+}
+function validateFieldGroup(name, required, formEl) {
+    // Find all eds-input-field components that contain inputs with the given name.
+    const groupFields = Array.from(formEl.querySelectorAll('eds-input-field')).filter((edsField) => { var _a, _b; return ((_b = (_a = edsField.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`input[name="${name}"]`)) === null || _b === void 0 ? void 0 : _b.length) > 0; });
+    // Collect all input elements with the matching name inside those components.
+    const groupElements = groupFields.flatMap((edsField) => { var _a; return Array.from(((_a = edsField.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`input[name="${name}"]`)) || []); });
+    // Check if at least one input is checked.
+    const isChecked = groupElements.some((el) => el.checked);
+    const errors = [];
+    if (required && !isChecked) {
+        errors.push(`At least one option in ${name} is required.`);
+    }
+    return errors;
+}
+function validateSingleBox(name, required, formEl) {
+    var _a;
+    const errors = [];
+    // Find the eds-input-field component containing the input with the given name.
+    const edsField = Array.from(formEl.querySelectorAll('eds-input-field')).find((field) => { var _a; return (_a = field.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[name="${name}"]`); });
+    // If no such field is found and it's required, return an error.
+    if (!edsField) {
+        if (required) {
+            errors.push(`${name} is required.`);
+        }
+        return errors;
+    }
+    // Query within the component's shadow root.
+    const inputEl = (_a = edsField.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[name="${name}"]`);
+    if (required && inputEl && !inputEl.checked) {
+        errors.push(`${name} is required.`);
+    }
+    return errors;
+}
+
+/**
+ * Finds the first input element for a given field name inside eds-input-field components.
+ */
+function findFieldElement(formEl, name) {
+    const elements = Array.from(formEl.querySelectorAll('eds-input-field'));
+    for (const element of elements) {
+        if (element.shadowRoot) {
+            const input = element.shadowRoot.querySelector(`[name="${name}"]`);
+            if (input) {
+                return input;
+            }
+        }
+    }
+    return null;
+}
+/**
+ * Validates all fields and returns an object containing the errors and a flag indicating any errors.
+ */
+function validateFormFields(parsedFields, formEl, values, 
+// eslint-disable-next-line
+isFieldVisible) {
+    const errors = {};
+    let hasError = false;
+    parsedFields.forEach((field) => {
+        // Only validate fields that are visible.
+        if (!isFieldVisible(field, values)) {
+            // If a field is hidden, clear its error.
+            delete errors[field.name];
+            return;
+        }
+        if (field.type !== 'hidden') {
+            if ((field.type === 'checkbox' || field.type === 'radio') && !field.options) {
+                // Single checkbox or radio without multiple options
+                const fieldErrors = validateSingleBox(field.name, field.required, formEl);
+                if (fieldErrors.length > 0) {
+                    errors[field.name] = fieldErrors;
+                    hasError = true;
+                }
+            }
+            else if (field.options && (field.type === 'checkbox' || field.type === 'radio')) {
+                // Checkbox or radio group with options
+                const fieldErrors = validateFieldGroup(field.name, field.required, formEl);
+                if (fieldErrors.length > 0) {
+                    errors[field.name] = fieldErrors;
+                    hasError = true;
+                }
+            }
+            else {
+                // For all other types, find the first matching element.
+                const inputEl = findFieldElement(formEl, field.name);
+                if (inputEl) {
+                    const value = inputEl.value;
+                    const fieldErrors = validateField(field.name, value, field.type, field.required, field.maxlength);
+                    if (fieldErrors.length > 0) {
+                        errors[field.name] = fieldErrors;
+                        hasError = true;
+                    }
+                }
+            }
+        }
+    });
+    return { errors, hasError };
+}
+
+/**
+ * Validates a field based on its type and returns an array of error messages.
+ * @param field - The field configuration object.
+ * @param value - The input value (if applicable).
+ * @param formEl - The form element used for DOM queries.
+ */
+function validateInputField(field, value, formEl) {
+    if (field.type === 'checkbox' || field.type === 'radio') {
+        if (field.options) {
+            return validateFieldGroup(field.name, field.required, formEl);
+        }
+        return validateSingleBox(field.name, field.required, formEl);
+    }
+    return validateField(field.name, value, field.type, field.required, field.maxlength);
+}
+
+/**
+ * Updates state values based on draft data and, after a delay, updates the corresponding DOM inputs.
+ */
+function getFormInitData({ initData, parsedFields, currentValues, formEl, isFieldVisible }) {
+    // Pass 1: Update state for all fields.
+    const updatedValues = Object.assign({}, currentValues);
+    parsedFields.forEach((field) => {
+        const value = initData[field.name];
+        if (value !== undefined) {
+            updatedValues[field.name] = value;
+        }
+    });
+    // Pass 2: Delay DOM updates to ensure nested fields are rendered.
+    setTimeout(() => {
+        parsedFields.forEach((field) => {
+            // Only update if the field is visible.
+            if (isFieldVisible(field, updatedValues)) {
+                const value = initData[field.name];
+                if (value !== undefined) {
+                    if (field.type === 'checkbox' || field.type === 'radio') {
+                        // Query all eds-input-field components and update matching inputs.
+                        const elements = Array.from(formEl.querySelectorAll('eds-input-field'));
+                        elements.forEach((element) => {
+                            if (element.shadowRoot) {
+                                const inputs = Array.from(element.shadowRoot.querySelectorAll(`[name="${field.name}"]`));
+                                // Convert stored comma-separated value into a trimmed array.
+                                const valuesArray = value.split(',').map((v) => v.trim());
+                                inputs.forEach((inputEl) => {
+                                    // eslint-disable-next-line
+                                    inputEl.checked = valuesArray.includes(inputEl.value);
+                                });
+                            }
+                        });
+                    }
+                    else {
+                        // For non-checkbox/radio inputs, update the first matching element using findFieldElement.
+                        const inputEl = findFieldElement(formEl, field.name);
+                        if (inputEl) {
+                            inputEl.value = value;
+                        }
+                    }
+                }
+            }
+        });
+    }, 50); // A 50ms delay to allow re-render
+    return { updatedValues };
+}
+/**
+ * Updates state values based on draft data and, after a delay, updates the corresponding DOM inputs.
+ */
+function getFormDraftData({ draftData, parsedFields, currentValues, formEl, isFieldVisible }) {
+    // Pass 1: Update state for all fields.
+    const updatedValues = Object.assign({}, currentValues);
+    parsedFields.forEach((field) => {
+        const value = draftData[field.name];
+        if (value !== undefined) {
+            updatedValues[field.name] = value;
+        }
+    });
+    // Pass 2: Delay DOM updates to ensure nested fields are rendered.
+    setTimeout(() => {
+        parsedFields.forEach((field) => {
+            // Only update if the field is visible.
+            if (isFieldVisible(field, updatedValues)) {
+                const value = draftData[field.name];
+                if (value !== undefined) {
+                    if (field.type === 'checkbox' || field.type === 'radio') {
+                        // Query all eds-input-field components and update matching inputs.
+                        const elements = Array.from(formEl.querySelectorAll('eds-input-field'));
+                        elements.forEach((element) => {
+                            if (element.shadowRoot) {
+                                const inputs = Array.from(element.shadowRoot.querySelectorAll(`[name="${field.name}"]`));
+                                // Convert stored comma-separated value into a trimmed array.
+                                const valuesArray = value.split(',').map((v) => v.trim());
+                                inputs.forEach((inputEl) => {
+                                    // eslint-disable-next-line
+                                    inputEl.checked = valuesArray.includes(inputEl.value);
+                                });
+                            }
+                        });
+                    }
+                    else {
+                        // For non-checkbox/radio inputs, update the first matching element using findFieldElement.
+                        const inputEl = findFieldElement(formEl, field.name);
+                        if (inputEl) {
+                            inputEl.value = value;
+                        }
+                    }
+                }
+            }
+        });
+    }, 50); // A 50ms delay to allow re-render
+    return { updatedValues };
+}
+
+export { validateInputField as a, getFormInitData as b, getFormDraftData as g, validateFormFields as v };

package/dist/components/incorrect-use-of-colors.js

@@ -43,7 +43,7 @@ const IncorrectUseOfColors$1 = /*@__PURE__*/ proxyCustomElement(class IncorrectU
         this.__registerHost();
     }
     render() {
-        return (h("div", { key: 'cb22d37293f3b3b5fe3772cfe83234a5d81e1094', class: "container" }, h("eds-alert", { key: '9aa7a510440c32f92242b3e09f9e818cd2509b06', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" }), h("div", { key: '4d22cba75b7dd45a5a9a7d2b2eba5404875f1403', class: "flex" }, h("div", { key: 'c7f08b3e4ef2692c545edd4185a005ddd6526a23', class: "w-full" }, h("ul", { key: '28561abcdc93a4899a5d7481fdd47c439f734ff6', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: 'f8836d4805fdd416ee75712f749d5cee3f612559', class: "w-full" }, h("ul", { key: '5842acd55d3a827355f2814c709d057676fb5d0f', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, incorrect.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
+        return (h("div", { key: '6906da67ca0b6e67545b0daac34d476e4c80c75f', class: "container" }, h("eds-alert", { key: '0930bacd11792156dd000b14ed7e82a1fa41012f', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" }), h("div", { key: 'da773bedfa3591351b2425e14d084213e5d90fdb', class: "flex" }, h("div", { key: '894b7e13066eb40ee1ea19a62bf7a059407313c7', class: "w-full" }, h("ul", { key: 'fba6f9c9d34edd373841a9888971de7b08b6450d', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: 'af7e2036fbe979299f2657a7ab3472d7d4196db2', class: "w-full" }, h("ul", { key: 'ad46e717be4200796424c6f72f022d6e163975ff', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, incorrect.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
     }
 }, [0, "incorrect-use-of-colors"]);
 function defineCustomElement$1() {

package/dist/components/logo-space.js

@@ -11,7 +11,7 @@ const LogoSpace$1 = /*@__PURE__*/ proxyCustomElement(class LogoSpace extends HTM
         this.__attachShadow();
     }
     render() {
-        return (h("div", { key: 'fc5040b294d45ecbf8e3ee0ab26875c63efa3625', class: "container my-20" }, h("div", { key: 'acad9c182cb46fd58f37d9195c9e20658df81767', class: "w-[300px]" }, h("div", { key: '4caac9e94b715c967958fe6bd9e5d988622c8729', class: "bg-dark" }, h("div", { key: 'd82b6156de96fd91e996c0ab775b9503395ba04f', class: "logo-container", innerHTML: vLogoMargins })))));
+        return (h("div", { key: '99d8b66bf2f31a5563ff9872077c7c3879dc8813', class: "container my-20" }, h("div", { key: '76b8453c9d261b1b4772fc7e234b415f1ae3493b', class: "w-[300px]" }, h("div", { key: '03b7569121f1c2c1f74e1117805f754c4f548a70', class: "bg-dark" }, h("div", { key: '374de6bab6ef662acc860625a21a1002e6195b6e', class: "logo-container", innerHTML: vLogoMargins })))));
     }
     static get style() { return LogoSpaceStyle0; }
 }, [1, "logo-space"]);