@ebrains/vue 0.2.0-alpha.0 → 0.4.0-alpha.0

package/{eds-alert_28.entry-DbTB72ow.mjs → eds-accordion_33.entry-DFgdjlJE.mjs}

@@ -1,11 +1,55 @@
-import { r as d, h as e, g as s, c as h } from "./index-DQrtrXyM.mjs";
-import { c as b } from "./index-39c58238-BwYCDOHZ.mjs";
-import { g as u, s as f } from "./color-0ba8ed56-D-UJpBQL.mjs";
-import { t as x } from "./toastManager-d9eee791-CEYNwx25.mjs";
+import { r as s, c as h, h as e, g as d } from "./index-I5Asbjce.mjs";
+import { s as g, g as u } from "./color-bb472c37-DDERsxdk.mjs";
+import { c as f } from "./index-39c58238-BwYCDOHZ.mjs";
+import { t as b } from "./toastManager-d9eee791-CEYNwx25.mjs";
 import { h as p } from "./logo-color-7f1fd803-CFgbXdt8.mjs";
 import { h as y, a as v, b as w, c as k, v as z, d as S, e as C, f as F, g as E } from "./logo-white-no-bg-f382f86f-YhfmNmGG.mjs";
-import { l as I, a as H, c as A, i as W, b as L, g as j } from "./keycloak-13893af6-BLzE1H6E.mjs";
-const O = `:root {
+import { l as I, a as L, c as H, i as A, b as W, g as j } from "./keycloak-13893af6-BLzE1H6E.mjs";
+const O = "blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}.min-h-36{min-height:2.25rem}.min-h-44{min-height:2.75rem}.min-h-56{min-height:3.5rem}.container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.effect-color{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.border-softer{border:2px solid rgba(0, 0, 0, .1)}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.relative{position:relative}.absolute{position:absolute}.inset-x-16{left:1rem;right:1rem}.top-16{top:1rem}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.rounded-md{border-radius:12px}.outline-none{outline:2px solid transparent;outline-offset:2px}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.text-light{color:var(--grey-700)}.z-1{z-index:1}.z-10{z-index:10}.effect-height{transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-property:height}.h-0{height:0rem}.h-auto{height:auto}.pt-20{padding-top:1.25rem}.overflow-hidden{overflow:hidden}.grid{display:grid}.overflow-hidden{overflow:hidden}.rounded-lg{border-radius:16px}.border-2{border-width:2px}.p-16{padding:1rem}.ml-auto{margin-left:auto}.mr-auto{margin-right:auto}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.f-heading-06{font-family:var(--f-heading-06-fontFamily);font-weight:var(--f-heading-06-fontWeight);font-size:var(--f-heading-06-fontSize);line-height:var(--f-heading-06-lineHeight);letter-spacing:var(--f-heading-06-letterSpacing)}.text-left{text-align:left}.text-center{text-align:center}", R = O, M = class {
+  constructor(n) {
+    s(this, n), this.accordionChange = h(this, "accordionChange", 7), this.handleClick = () => {
+      var i;
+      this.isExpanded = !this.isExpanded, this.accordionChange.emit(this.isExpanded), this.setPanelHeight(), g({
+        category: "ui-component",
+        parentContext: null,
+        tag: this.el.tagName.toLowerCase(),
+        name: ((i = this.title) === null || i === void 0 ? void 0 : i.toLowerCase()) || "",
+        action: this.isExpanded ? "expanded" : "collapsed"
+      });
+    }, this.setPanelHeight = () => {
+      this.childContentRef && (this.shortContent = this.wrapperRef.scrollWidth > 830 && !this.description ? this.childContentRef.scrollHeight <= 80 : this.childContentRef.scrollHeight <= 20, this.panelHeight = this.isExpanded && !this.shortContent ? this.childContentRef.scrollHeight : 0);
+    }, this.title = void 0, this.description = void 0, this.switchBg = !0, this.expanded = !1, this.clampText = !0, this.minHeightContent = !1, this.isExpanded = this.expanded, this.panelHeight = 0, this.shortContent = !1;
+  }
+  /**
+   * Lifecycle method that sets up the initial panel height and adds a resize event listener
+   * to recalculate height on window resize.
+   */
+  componentDidLoad() {
+    this.setPanelHeight(), window.addEventListener("resize", this.setPanelHeight);
+  }
+  /**
+   * Lifecycle method that cleans up the resize event listener when the component is removed.
+   */
+  disconnectedCallback() {
+    window.removeEventListener("resize", this.setPanelHeight);
+  }
+  /**
+   * Renders the accordion structure, including header, content, description, and any slotted content.
+   * Adjusts styles based on `switchBg`, `tiny`, `clampText`, and other props.
+   */
+  render() {
+    const n = this.minHeightContent ? "min-h-56" : "";
+    return e("div", { key: "14811b7517511999f97dc8d486f6c1138d89538b", ref: (i) => this.wrapperRef = i, class: `container flex effect-color border-softer relative grid overflow-hidden rounded-lg border-2 p-16 
+          ${this.switchBg && this.isExpanded ? "bg-inverse" : "bg-default"} 
+          ${this.switchBg ? "hover:bg-inverse" : ""} 
+          ${n}` }, e("h3", { key: "a55ab98b74555ab2ff470d824106d3ff2e9b7fec", class: "mr-auto f-heading-06 text-left absolute inset-x-16 top-16 line-clamp-1" }, this.title), e("div", { key: "b3a76425eed4d05404a51d8991070a12cd1609a1", class: "ml-auto" }, e("eds-button", { key: "06ddefe21175e4bc28ef4477f5fd552689e1cd31", id: "accordionId", intent: "tertiary", "aria-expanded": this.isExpanded || this.shortContent, "aria-controls": "accordionId", class: "effect-color flex w-full items-center justify-between rounded-md outline-none focus:outline-none", onClick: this.handleClick, icon: "chevron-down" })), e("div", { key: "7330f2824689a61e82c42f00f79e12d4148df2f9", class: "w-full" }, this.description ? e("span", { class: `text-light ${!this.isExpanded && this.clampText ? "line-clamp-1" : ""}` }, this.description) : null, e("section", { key: "533e8014f43ed6d50424f02bfb793456187badd9", id: "sectionId", "aria-hidden": !this.isExpanded, class: `z-1 effect-height relative h-0 w-full ${!this.isExpanded && this.clampText ? "overflow-hidden" : ""}`, style: { height: this.isExpanded ? "auto" : "0" } }, e("div", { key: "02a0fa8a79942cd2bc760eb62da9cb910252b6cd", ref: (i) => this.childContentRef = i, class: "accordion-content effect-color pt-20", "aria-hidden": !this.isExpanded }, e("span", { key: "33edc6bc83eb4eaa49ae5482841ae642a60ffde8", class: `${!this.isExpanded && this.clampText ? "line-clamp-2" : ""}` }, e("slot", { key: "bbbc3fa2b8fc5be7f55d6a45f0f37dc569706ac8" }))))));
+  }
+  get el() {
+    return d(this);
+  }
+};
+M.style = R;
+const T = `:root {
   font-optical-sizing: auto;
 }
 html,
@@ -612,7 +656,7 @@ img {
 .after\\:border-softest::after {
   border-color: rgba(0, 0, 0, .05 );
 }
-`, R = O, T = b(["w-full bg-dark rounded-lg border-inside after:border-softest after:rounded-lg"], {
+`, B = T, U = f(["w-full bg-dark rounded-lg border-inside after:border-softest after:rounded-lg"], {
   variants: {
     intent: {
       default: "",
@@ -655,17 +699,16 @@ img {
     intent: "default",
     direction: "horizontal"
   }
-}), U = class {
+}), _ = class {
   constructor(n) {
-    d(this, n), this.message = void 0, this.pressableLabel = void 0, this.pressableUrl = void 0, this.direction = "horizontal", this.intent = "default", this.withBtn = !1;
+    s(this, n), this.message = void 0, this.pressableLabel = void 0, this.pressableUrl = void 0, this.direction = "horizontal", this.intent = "default", this.withBtn = !1;
   }
   componentWillLoad() {
     this.withBtn = !!this.pressableLabel;
   }
   componentDidLoad() {
-    this.el.shadowRoot.querySelectorAll("eds-link").forEach((i) => {
-      this.emitContext(i);
-    });
+    const n = this.el.shadowRoot.querySelector("eds-link");
+    this.emitContext(n);
   }
   emitContext(n) {
     const i = new CustomEvent("parentContext", {
@@ -677,18 +720,18 @@ img {
     n.dispatchEvent(i);
   }
   render() {
-    return e("div", { key: "99518cd34cbfc04691f2f827b53105ef88c03af8", class: T({
+    return e("div", { key: "089491004acd618827ef139a7c2ef486726cea9d", class: U({
       intent: this.intent,
       direction: this.direction,
       withBtn: this.withBtn
-    }), role: "alert" }, e("p", { key: "7eca97c849473bb4c8472d11243dc5eb9dded61f", class: "f-ui-01 py-8" }, this.message), this.withBtn && (this.pressableUrl ? e("eds-link", { class: "eds-alert-link", label: this.pressableLabel, url: this.pressableUrl, intent: "secondary" }) : null));
+    }), role: "alert" }, e("p", { key: "9a54555621b492f65b38ecd3cbb44660bf516e51", class: "f-ui-01 py-8" }, this.message), this.withBtn && (this.pressableUrl ? e("eds-link", { class: "eds-alert-link", label: this.pressableLabel, url: this.pressableUrl, intent: "secondary", external: !0 }) : null));
   }
   get el() {
-    return s(this);
+    return d(this);
   }
 };
-U.style = R;
-const M = `.border-inside {
+_.style = B;
+const D = `.border-inside {
     position: relative;
 
     &::after {
@@ -836,9 +879,9 @@ const M = `.border-inside {
 
 .w-\\[54px\\] {
     width: 54px;
-}`, B = M, _ = class {
+}`, Y = D, $ = class {
   constructor(n) {
-    d(this, n), this.firstName = void 0, this.lastName = void 0, this.picture = void 0, this.initials = void 0, this.color = void 0, this.rounded = !1, this.initialsStrong = !1;
+    s(this, n), this.firstName = void 0, this.lastName = void 0, this.picture = void 0, this.initials = void 0, this.color = void 0, this.rounded = !1, this.initialsStrong = !1;
   }
   /**
    * Computed initials based on the provided `initials` prop or derived from `firstName` and `lastName`.
@@ -877,11 +920,129 @@ const M = `.border-inside {
    * @returns {JSX.Element} The rendered avatar component.
    */
   render() {
-    return e("div", { key: "716279a35cc9235da991563d5f84d2dedbdae001", class: this.containerClasses }, this.picture ? e("eds-img", { src: this.picture, width: 54, height: 54, sizes: "120px", alt: `${this.firstName} ${this.lastName}`, lazyload: !0, withBg: !0 }) : e("abbr", { title: this.computedInitials || `${this.firstName} ${this.lastName}`, class: "!no-underline f-ui-01" }, this.computedInitials));
+    return e("div", { key: "3ba716296c615d31ce7f3f41fd57e732adc530bf", class: this.containerClasses }, this.picture ? e("eds-img", { src: this.picture, width: 54, height: 54, sizes: "120px", alt: `${this.firstName} ${this.lastName}`, lazyload: !0, withBg: !0 }) : e("abbr", { title: this.computedInitials || `${this.firstName} ${this.lastName}`, class: "!no-underline f-ui-01" }, this.computedInitials));
   }
 };
-_.style = B;
-const D = `@font-face {
+$.style = Y;
+const N = ".border-soft{border-color:rgba(0, 0, 0, .15)}.border-softer{border-color:rgba(0, 0, 0, .1)}.border-softest{border-color:rgba(0, 0, 0, .05)}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.w-full{width:100%}.border-t-2{border-top-width:2px}", P = N, q = class {
+  constructor(n) {
+    s(this, n), this.extraClass = "";
+  }
+  render() {
+    return e("hr", { key: "58ffdece778da8f323dd130908254690b3f6c8d3", class: `border-softer my-20 inline-block w-full border-t-2 ${this.extraClass}` });
+  }
+};
+q.style = P;
+const X = "blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}.hidden{display:none}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.125rem * var(--tw-space-x-reverse));margin-left:calc(0.125rem * calc(1 - var(--tw-space-x-reverse)))}.px-2{padding-left:0.125rem;padding-right:0.125rem}.w-20{width:1.25rem}.w-28{width:1.75rem}.w-32{width:2rem}.w-44{width:2.75rem}.h-20{height:1.25rem}.h-24{height:1.5rem}.h-28{height:1.75rem}.h-32{height:2rem}@media (min-width: 750px){.md\\:block{display:block}}", V = X, K = class {
+  constructor(n) {
+    s(this, n), this.updateScreenSize = () => {
+      const i = window.innerWidth;
+      i < 769 ? (this.maxVisibleItems = 3, this.isSmallScreen = !0) : i <= 1024 ? (this.maxVisibleItems = 4, this.isSmallScreen = !0) : (this.maxVisibleItems = 6, this.isSmallScreen = !1);
+    }, this.items = [], this.intent = "ghost", this.parsedItems = [], this.isSmallScreen = !1, this.maxVisibleItems = 6;
+  }
+  /**
+   * Watches for changes to the `items` prop and parses it.
+   */
+  parseItems(n) {
+    if (typeof n == "string")
+      try {
+        const i = JSON.parse(n);
+        this.parsedItems = Array.isArray(i) ? i : [];
+      } catch (i) {
+        console.error("Error parsing breadcrumb items:", i), this.parsedItems = [];
+      }
+    else Array.isArray(n) ? this.parsedItems = n : this.parsedItems = [];
+  }
+  /**
+   * Lifecycle method that runs when the component is about to be loaded.
+   * It parses the initial `items` prop value.
+   */
+  componentWillLoad() {
+    this.parseItems(this.items), this.updateScreenSize(), window.addEventListener("resize", this.updateScreenSize);
+  }
+  disconnectedCallback() {
+    window.removeEventListener("resize", this.updateScreenSize);
+  }
+  /**
+   * Lifecycle method that runs when the component has fully loaded.
+   * It emits a custom event for each `eds-link` element contained within the breadcrumb.
+   */
+  componentDidLoad() {
+    this.el.shadowRoot.querySelectorAll("eds-link").forEach((i) => {
+      this.emitContext(i);
+    });
+  }
+  /**
+   * Emits a custom event called `parentContext` for a given link element.
+   * This event provides context information about the breadcrumb component.
+   *
+   * @param linkElement - The link element to which the event will be dispatched.
+   */
+  emitContext(n) {
+    const i = new CustomEvent("parentContext", {
+      detail: {
+        componentName: this.el.tagName.toLowerCase(),
+        identifier: null
+      }
+    });
+    n.dispatchEvent(i);
+  }
+  /**
+   * Truncates breadcrumb items based on the maxVisibleItems value.
+   * Truncates `label` to 10 characters if `isSmallScreen` is true, except for the last label.
+   */
+  getTruncatedItems() {
+    const n = this.parsedItems.length;
+    if (n > this.maxVisibleItems) {
+      const i = this.parsedItems[0], r = this.parsedItems.slice(-2), l = { label: "...", url: "", isHidden: !0 };
+      if (this.maxVisibleItems === 3)
+        return [
+          this.truncateLabel(i),
+          l,
+          ...r.map((t, o) => o === r.length - 1 ? t : this.truncateLabel(t))
+        ];
+      if (this.maxVisibleItems === 4) {
+        const t = this.parsedItems[Math.floor(n / 2)];
+        return [
+          this.truncateLabel(i),
+          this.truncateLabel(t),
+          l,
+          ...r.map((o, a) => a === r.length - 1 ? o : this.truncateLabel(o))
+        ];
+      }
+    }
+    return this.parsedItems.map((i, r) => r === this.parsedItems.length - 1 ? i : this.truncateLabel(i));
+  }
+  /**
+   * Truncates the label of a breadcrumb item to a maximum of 10 characters
+   * if the screen is small.
+   */
+  truncateLabel(n) {
+    return n.label.length > 15 ? Object.assign(Object.assign({}, n), { label: `${n.label.slice(0, 15)}...` }) : n;
+  }
+  /**
+   * Render method for the breadcrumb component.
+   * It creates a navigation element with an ordered list of breadcrumb links.
+   * The last link is disabled and marked as the current page.
+   */
+  render() {
+    const n = this.getTruncatedItems();
+    return e("nav", { key: "d66dd18fe856e4a8d82e47117d2de0288a9e3c56", "aria-label": "Breadcrumb" }, e("ol", { key: "b3a218032b312cb5973c1ca59ab7bedcfc07d676", class: "flex items-center space-x-2" }, n.map((i, r) => {
+      const l = r === n.length - 1;
+      return e("li", { class: "flex items-center" }, i.isHidden ? e("span", { class: "truncate px-2 ", "aria-hidden": "true" }, "...") : e("eds-link", { label: i.label, url: i.url, intent: this.intent, current: l, "aria-label": i.label, size: "small", "icon-small": "false" }), !l && !i.isHidden && e("eds-icon-wrapper", { icon: "chevron-right", class: "w-20 h-20" }));
+    })));
+  }
+  get el() {
+    return d(this);
+  }
+  static get watchers() {
+    return {
+      items: ["parseItems"]
+    };
+  }
+};
+K.style = V;
+const G = `@font-face {
     font-family: "Inter";
     font-weight: 100 900;
     font-display: swap;
@@ -8020,9 +8181,9 @@ const D = `@font-face {
       padding-right: 0rem;
     }
   }
-  `, Y = D, P = class {
+  `, J = G, Q = class {
   constructor(n) {
-    d(this, n), this.button = b([
+    s(this, n), this.button = f([
       "relative inline-flex items-center",
       "py-8",
       "effect-focus effect-color",
@@ -8120,7 +8281,7 @@ const D = `@font-face {
         pill: !1,
         size: "small"
       }
-    }), this.iconCva = b(["flex inline-flex items-center justify-center"], {
+    }), this.iconCva = f(["flex inline-flex items-center justify-center"], {
       variants: {
         size: {
           large: "",
@@ -8181,7 +8342,7 @@ const D = `@font-face {
       n.preventDefault();
       return;
     }
-    f({
+    g({
       category: "ui-component",
       parentContext: this.parentContext,
       tag: this.el.tagName.toLowerCase(),
@@ -8204,31 +8365,31 @@ const D = `@font-face {
       iconOnly: !this.label,
       show: !this.loading
     }), r = this.elementType;
-    return e(r, { key: "04381724e90b1f71960832e705f3a1db46e3a200", "aria-label": this.label || this.ariaLabel || void 0, "aria-disabled": this.elementType === "button" ? this.disabled : void 0, disabled: this.elementType === "button" ? this.disabled : void 0, class: `${n || ""} ${this.extraClass || ""}`, onClick: (l) => this.handleClick(l) }, this.label && e("span", { key: "f9b77e3a0eee7afa676fa2b7a4bdce8b3ac124cd", class: this.loading ? "opacity-0" : "" }, this.label), this.loading && e("span", { key: "0e645a9f7c3d8e87f209ccd1a556ead976143094", class: "absolute inset-0 flex items-center justify-center" }, e("span", { key: "e7810efb3f5e9853f67afb9491f35b19509700e9", class: "loader", style: {
+    return e(r, { key: "e571ed0d3e2f4aa262259afea7d44d19b5685be7", "aria-label": this.label || this.ariaLabel || void 0, "aria-disabled": this.elementType === "button" ? this.disabled : void 0, disabled: this.elementType === "button" ? this.disabled : void 0, class: `${n || ""} ${this.extraClass || ""}`, onClick: (l) => this.handleClick(l) }, this.label && e("span", { key: "8928bd512c6fb592ed8d2d25ad46213a5a7f4bf5", class: this.loading ? "opacity-0" : "" }, this.label), this.loading && e("span", { key: "8fdb5947ef65c60e5cc47f04d8fbe2f8485aa6bf", class: "absolute inset-0 flex items-center justify-center" }, e("span", { key: "5a6cf5d4f2debc279066cb49fa30da7b66f5532b", class: "loader", style: {
       border: `3px solid ${this.intent === "secondary" ? "rgba(255, 255, 255, .3)" : "rgba(0, 0, 0, .3)"}`,
       borderBottomColor: this.intent === "secondary" ? "#fff" : "#000"
     } })), this.icon ? e("eds-icon-wrapper", { class: i, icon: this.icon }) : null);
   }
   get el() {
-    return s(this);
+    return d(this);
   }
 };
-P.style = Y;
-const N = ".f-ui-02-light{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.text-light{color:var(--grey-700)}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}", q = N, $ = class {
+Q.style = J;
+const Z = ".f-ui-02-light{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.text-light{color:var(--grey-700)}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}", nn = Z, en = class {
   constructor(n) {
-    d(this, n), this.description = void 0, this.descClass = "f-ui-03-light", this.truncate = !0, this.truncateLines = "3";
+    s(this, n), this.description = void 0, this.descClass = "f-ui-03-light", this.truncate = !0, this.truncateLines = "3";
   }
   getTruncateClass() {
     return this.truncate && this.truncateLines ? `line-clamp-${this.truncateLines}` : "";
   }
   render() {
-    return e("p", { key: "017c115ebff999c74cff1eaeb5c63f97e0f6554d", class: `text-light ${this.descClass}` }, e("span", { key: "f87b9b3d593e417ef351882f426d24c0b206ccab", class: this.getTruncateClass() }, this.description));
+    return e("p", { key: "ca38bcc0895d5a0c87fda782ef455e45c4b53263", class: `text-light ${this.descClass}` }, e("span", { key: "3108eec08a760b1db7ce1a7be05b68749f8f930b", class: this.getTruncateClass() }, this.description));
   }
 };
-$.style = q;
-const X = ".h-auto{height:auto}.h-full{height:100%}.\\!min-h-20{min-height:1.25rem !important}.min-h-120{min-height:120px}.min-h-156{min-height:156px}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.effect-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.hover\\:shadow-hover:hover{--tw-shadow:0px 0px 16px rgba(0, 0, 0, 0.2);--tw-shadow-colored:0px 0px 16px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.cursor-pointer{cursor:pointer}.border-soft{border-color:rgba(0, 0, 0, .15 )}.border-softer{border:2px solid rgba(0, 0, 0, .1 )}.effect-focus-within{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.effect-focus-within:focus-within{outline-style:solid}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.grow{flex-grow:1}.flex-col{flex-direction:column}.rounded-lg{border-radius:16px}.border-2{border-width:2px}.p-12{padding:0.75rem}.p-16{padding:1rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}.gap-y-4{row-gap:0.25rem}.order-first{order:-9999}.mb-10{margin-bottom:0.625rem}.mb-12{margin-bottom:0.75rem}", V = X, G = class {
+en.style = nn;
+const rn = ".h-auto{height:auto}.h-full{height:100%}.\\!min-h-20{min-height:1.25rem !important}.min-h-120{min-height:120px}.min-h-156{min-height:156px}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.effect-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.hover\\:shadow-hover:hover{--tw-shadow:0px 0px 16px rgba(0, 0, 0, 0.2);--tw-shadow-colored:0px 0px 16px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.cursor-pointer{cursor:pointer}.border-soft{border-color:rgba(0, 0, 0, .15 )}.border-softer{border:2px solid rgba(0, 0, 0, .1 )}.effect-focus-within{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.effect-focus-within:focus-within{outline-style:solid}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.grow{flex-grow:1}.flex-col{flex-direction:column}.rounded-lg{border-radius:16px}.border-2{border-width:2px}.p-12{padding:0.75rem}.p-16{padding:1rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}.gap-y-4{row-gap:0.25rem}.order-first{order:-9999}.mb-10{margin-bottom:0.625rem}.mb-12{margin-bottom:0.75rem}", ln = rn, tn = class {
   constructor(n) {
-    d(this, n), this.parentContext = null, this.cardTitle = void 0, this.url = void 0, this.description = void 0, this.image = void 0, this.avatar = void 0, this.shortAbbreviation = void 0, this.headingLevel = "h3", this.tags = "", this.tiny = !1, this.bg = !0, this.withHover = !0, this.hierarchy = !0, this.parsedImage = null;
+    s(this, n), this.parentContext = null, this.cardTitle = void 0, this.url = void 0, this.description = void 0, this.image = void 0, this.avatar = void 0, this.shortAbbreviation = void 0, this.headingLevel = "h3", this.tags = [], this.tiny = !1, this.bg = !0, this.withHover = !0, this.hierarchy = !0, this.parsedImage = null;
   }
   componentWillLoad() {
     if (this.image)
@@ -8268,7 +8429,7 @@ const X = ".h-auto{height:auto}.h-full{height:100%}.\\!min-h-20{min-height:1.25r
   }
   handleClick() {
     var n;
-    f({
+    g({
       category: "ui-component",
       parentContext: this.parentContext,
       tag: this.el.tagName.toLowerCase(),
@@ -8277,16 +8438,16 @@ const X = ".h-auto{height:auto}.h-full{height:100%}.\\!min-h-20{min-height:1.25r
     });
   }
   render() {
-    return e("article", { key: "17d1f00f232a4436756fa3846684bbae8c716036", class: this.articleClasses(), onClick: () => this.handleClick() }, e("eds-card-title", { key: "d99ee1716c4e308a3ea446f0f7cedfaeac30f2ed", "heading-level": this.headingLevel, titleClass: this.image ? "f-ui-01" : void 0, "card-title": this.cardTitle, url: this.url, hierarchy: this.hierarchy }), this.description && e("eds-card-desc", { key: "c5bdc76e68a8d660609630aa8184ec3a9508ab61", class: "mt-8", "truncate-lines": "3", description: this.description }), this.parsedImage ? e("eds-img", Object.assign({ class: "mt-8" }, this.parsedImage)) : this.avatar || this.shortAbbreviation ? e("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation }) : null, e("div", { key: "fa993e3c60d357eb0d9a63e612bdd2bf026e7a85", class: "flex flex-wrap gap-y-4" }, this.parsedTags.map((n, i) => e("eds-tag", { key: i, intent: n.style, label: n.label }))), " ");
+    return e("article", { key: "5b498abfc65206fe89c9e54e673a81e1b6ed37d5", class: this.articleClasses(), onClick: () => this.handleClick() }, e("eds-card-title", { key: "61a0c6076957e39ab2a059c8587fc2e716e470bc", "heading-level": this.headingLevel, titleClass: this.image ? "f-ui-01" : void 0, "card-title": this.cardTitle, url: this.url, hierarchy: this.hierarchy }), this.description && e("eds-card-desc", { key: "6df3c08512acf60e22001867ab5691aa19f67961", class: "mt-8", "truncate-lines": "3", description: this.description }), this.parsedImage ? e("eds-img", Object.assign({ class: "mt-8" }, this.parsedImage)) : this.avatar || this.shortAbbreviation ? e("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation }) : null, e("div", { key: "712193c8afac6744e2512d8b760daf2c850987b9", class: "flex flex-wrap gap-y-4" }, this.parsedTags.map((n, i) => e("eds-tag", { key: i, intent: n.style, label: n.label }))), " ");
   }
   get el() {
-    return s(this);
+    return d(this);
   }
 };
-G.style = V;
-const J = "a{all:unset;display:inline;color:inherit;text-decoration:none;cursor:pointer}h1,h2,h3,h4,h5,h6{margin:0}.f-heading-01{font-family:var(--f-heading-01-fontFamily);font-weight:var(--f-heading-01-fontWeight);font-size:var(--f-heading-01-fontSize);line-height:var(--f-heading-01-lineHeight);letter-spacing:var(--f-heading-01-letterSpacing)}.f-heading-02{font-family:var(--f-heading-02-fontFamily);font-weight:var(--f-heading-02-fontWeight);font-size:var(--f-heading-02-fontSize);line-height:var(--f-heading-02-lineHeight);letter-spacing:var(--f-heading-02-letterSpacing)}.f-heading-03{font-family:var(--f-heading-03-fontFamily);font-weight:var(--f-heading-03-fontWeight);font-size:var(--f-heading-03-fontSize);line-height:var(--f-heading-03-lineHeight);letter-spacing:var(--f-heading-03-letterSpacing)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.f-heading-06{font-family:var(--f-heading-06-fontFamily);font-weight:var(--f-heading-06-fontWeight);font-size:var(--f-heading-06-fontSize);line-height:var(--f-heading-06-lineHeight);letter-spacing:var(--f-heading-06-letterSpacing)}.break-words{overflow-wrap:break-word}.after\\:absolute::after{position:absolute}.after\\:inset-0::after{inset:0rem}.after\\:z-10::after{z-index:10}.after\\:content-\\[\\'\\'\\]::after{--tw-content:'';content:var(--tw-content)}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}", K = J, Q = class {
+tn.style = ln;
+const on = "a{all:unset;display:inline;color:inherit;text-decoration:none;cursor:pointer}h1,h2,h3,h4,h5,h6{margin:0}.f-heading-01{font-family:var(--f-heading-01-fontFamily);font-weight:var(--f-heading-01-fontWeight);font-size:var(--f-heading-01-fontSize);line-height:var(--f-heading-01-lineHeight);letter-spacing:var(--f-heading-01-letterSpacing)}.f-heading-02{font-family:var(--f-heading-02-fontFamily);font-weight:var(--f-heading-02-fontWeight);font-size:var(--f-heading-02-fontSize);line-height:var(--f-heading-02-lineHeight);letter-spacing:var(--f-heading-02-letterSpacing)}.f-heading-03{font-family:var(--f-heading-03-fontFamily);font-weight:var(--f-heading-03-fontWeight);font-size:var(--f-heading-03-fontSize);line-height:var(--f-heading-03-lineHeight);letter-spacing:var(--f-heading-03-letterSpacing)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.f-heading-06{font-family:var(--f-heading-06-fontFamily);font-weight:var(--f-heading-06-fontWeight);font-size:var(--f-heading-06-fontSize);line-height:var(--f-heading-06-lineHeight);letter-spacing:var(--f-heading-06-letterSpacing)}.break-words{overflow-wrap:break-word}.after\\:absolute::after{position:absolute}.after\\:inset-0::after{inset:0rem}.after\\:z-10::after{z-index:10}.after\\:content-\\[\\'\\'\\]::after{--tw-content:'';content:var(--tw-content)}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}", sn = on, dn = class {
   constructor(n) {
-    d(this, n), this.url = void 0, this.titleClass = void 0, this.headingLevel = "h3", this.externalLink = !1, this.cardTitle = void 0, this.hierarchy = !0;
+    s(this, n), this.url = void 0, this.titleClass = void 0, this.headingLevel = "h3", this.externalLink = !1, this.cardTitle = void 0, this.hierarchy = !0;
   }
   /**
    * Dynamically generate the title class based on the heading level.
@@ -8316,14 +8477,21 @@ const J = "a{all:unset;display:inline;color:inherit;text-decoration:none;cursor:
   }*/
   render() {
     const n = this.headingLevel;
-    return e(n, { key: "8aee3bcb0e04508dd21a03ea0f695e040f37c767", class: this.getTitleClass() }, e("a", { key: "c5fa27fe86037ed6b039c156aecdf1acc9c7c8bc", class: "break-words after:absolute after:inset-0 after:z-10 after:content-[''] focus:outline-none", href: this.url, target: this.externalLink ? "_blank" : void 0, rel: this.externalLink ? "noopener noreferrer" : void 0 }, this.cardTitle));
+    return e(n, { key: "a654161b2c53e944eaefb21be7189a5e0acb06cf", class: this.getTitleClass() }, e("a", { key: "868fd911c1a8c366d726e886bfc7827487013e27", class: "break-words after:absolute after:inset-0 after:z-10 after:content-[''] focus:outline-none", href: this.url, target: this.externalLink ? "_blank" : void 0, rel: this.externalLink ? "noopener noreferrer" : void 0 }, this.cardTitle));
   }
 };
-Q.style = K;
-const Z = ".z-focus{z-index:99}.relative{position:relative}.shadow-small{--tw-shadow:0px 1.5px 2px rgba(0, 0, 0, 0.1);--tw-shadow-colored:0px 1.5px 2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.bg-inverse{background-color:var(--white)}.border-softest{border:2px solid rgba(0, 0, 0, .05)}.z-10{z-index:10}.z-on-top{z-index:99999}.absolute{position:absolute}.top-full{top:100%}.mt-4{margin-top:0.25rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.gap-y-4{row-gap:0.25rem}.rounded-lg{border-radius:16px}.border-2{border-width:2px}.p-8{padding:0.5rem}.left-0{left:0rem}.left-1\\/2{left:50%}.left-4{left:0.25rem}.left-\\[4px\\]{left:4px}.right-0{right:0rem}.right-4{right:0.25rem}.right-8{right:0.5rem}", nn = Z, en = class {
+dn.style = sn;
+const an = ".z-focus{z-index:99}.relative{position:relative}.shadow-small{--tw-shadow:0px 1.5px 2px rgba(0, 0, 0, 0.1);--tw-shadow-colored:0px 1.5px 2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.bg-inverse{background-color:var(--white)}.border-softest{border:2px solid rgba(0, 0, 0, .05)}.z-10{z-index:10}.z-on-top{z-index:99999}.absolute{position:absolute}.top-full{top:100%}.mt-4{margin-top:0.25rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.gap-y-4{row-gap:0.25rem}.rounded-lg{border-radius:16px}.border-2{border-width:2px}.p-8{padding:0.5rem}.left-0{left:0rem}.left-1\\/2{left:50%}.left-4{left:0.25rem}.left-\\[4px\\]{left:4px}.right-0{right:0rem}.right-4{right:0.25rem}.right-8{right:0.5rem}", cn = an, gn = class {
   constructor(n) {
-    d(this, n), this.focusableItems = [], this.handleClick = () => {
-      this.isOpen = !this.isOpen, this.isOpen ? (this.focusIndex = 0, this.focusItem()) : this.closeDropdown();
+    s(this, n), this.focusableItems = [], this.handleClick = () => {
+      var i;
+      this.isOpen = !this.isOpen, this.isOpen ? (this.focusIndex = 0, this.focusItem()) : this.closeDropdown(), g({
+        category: "ui-component",
+        parentContext: null,
+        tag: this.host.tagName.toLowerCase(),
+        name: ((i = this.label) === null || i === void 0 ? void 0 : i.toLowerCase()) || "",
+        action: this.isOpen ? "expanded" : "collapsed"
+      });
     }, this.icon = "chevron-down", this.label = void 0, this.rounded = !1, this.ariaLabel = "Open dropdown", this.asNav = !0, this.dropdownPos = "left", this.dropdownOffset = !0, this.intent = "tertiary", this.isOpen = !1, this.focusIndex = -1;
   }
   /**
@@ -8370,45 +8538,53 @@ const Z = ".z-focus{z-index:99}.relative{position:relative}.shadow-small{--tw-sh
    */
   componentDidLoad() {
     var n;
-    this.focusableItems = Array.from(((n = this.dropdownContent) === null || n === void 0 ? void 0 : n.querySelectorAll("a, button")) || []), this.host.shadowRoot.querySelectorAll("eds-button").forEach((r) => {
-      this.emitContext(r);
-    });
-  }
-  /**
-   * Emits a custom event called `parentContext` for a given button element.
-   * Provides context information about the dropdown component.
-   *
-   * @param linkElement - The button element to which the event will be dispatched.
-   */
-  emitContext(n) {
-    const i = new CustomEvent("parentContext", {
-      detail: {
-        componentName: this.host.tagName.toLowerCase(),
-        identifier: null
-      }
-    });
-    n.dispatchEvent(i);
+    this.focusableItems = Array.from(((n = this.dropdownContent) === null || n === void 0 ? void 0 : n.querySelectorAll("a, button")) || []);
   }
   /**
    * Renders the dropdown component and displays its content when open.
    * @returns {JSX.Element} The rendered dropdown component.
    */
   render() {
-    return e("div", { key: "d49e23ee208cfb000baba83795899487e4d94af7", class: "z-focus relative", ref: (n) => this.dropdownContent = n }, e("eds-button", { key: "6647007c34b47558873e470890893ae4f8e18b5c", label: this.label, "aria-label": this.ariaLabel, icon: this.icon, intent: this.intent, onClick: this.handleClick, "aria-expanded": this.isOpen.toString(), "aria-haspopup": "menu" }), e("nav", { key: "41bbd4e2bf02345393aaa97101b2c3aca2fa4085", class: {
+    return e("div", { key: "809cb733330db434f94f854ed4d1ee375f598297", class: "z-focus relative", ref: (n) => this.dropdownContent = n }, e("eds-button", { key: "c80f2930b335708a2a01d06b565673597bd8d926", label: this.label, "aria-label": this.ariaLabel, icon: this.icon, intent: this.intent, onClick: this.handleClick, "aria-expanded": this.isOpen.toString(), "aria-haspopup": "menu" }), e("nav", { key: "7b3ccb2ab29474a4795d5491960e0713aefcd624", class: {
       "shadow-small bg-inverse border-softest z-10 z-on-top absolute top-full mt-4 flex flex-col gap-y-4 border-2 p-8": !0,
       "left-4": this.dropdownPos === "left" && this.dropdownOffset,
       "left-0": this.dropdownPos === "left" && !this.dropdownOffset,
       "right-4": this.dropdownPos === "right" && this.dropdownOffset,
       "right-0": this.dropdownPos === "right" && !this.dropdownOffset,
       "rounded-lg": this.rounded
-    }, style: { display: this.isOpen ? "block" : "none" }, "aria-label": "Dropdown", "aria-hidden": !this.isOpen }, e("slot", { key: "714bad9f5a8ddf6d5ea246044a83b0a5102494c4" })));
+    }, style: { display: this.isOpen ? "block" : "none" }, "aria-label": "Dropdown", "aria-hidden": !this.isOpen }, e("slot", { key: "c514c5dca893708fd1660a61cfeb1607229bbff5" })));
   }
   get host() {
-    return s(this);
+    return d(this);
   }
 };
-en.style = nn;
-const rn = `@font-face {
+gn.style = cn;
+const xn = "", hn = xn, bn = class {
+  constructor(n) {
+    s(this, n), this.backToTop = () => {
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    }, this.extraClass = "", this.social = !1, this.hasCookiesSetUp = !1, this.enableScrollTop = !1, this.fundedBy = "EBRAINS is funded by the Horizon Europe Framework Programme.", this.rightsReserved = `${(/* @__PURE__ */ new Date()).getFullYear()} EBRAINS. All rights reserved.`, this.cookiesPreference = "Cookies Preferences";
+  }
+  /**
+   * Toggles the cookie preferences popup, if available.
+   * The actual implementation for handling cookie preferences should be defined here.
+   * @private
+   */
+  toggleCookiesPopup() {
+  }
+  /**
+   * Renders the footer component with optional sections and elements,
+   * including social network links, a Horizon Europe funding acknowledgment, and
+   * legal links such as "Cookies Preferences" and copyright information.
+   *
+   * @returns {JSX.Element} The rendered JSX for the footer component.
+   */
+  render() {
+    return e("footer", { key: "8d3d1b5d2acd76f56b2bc12539cb7d277b4dcd7f", class: `${this.extraClass} pb-banner` }, this.social ? e("div", { class: "border-softest border-t-2 pt-20 pb-28 md:pt-28" }, e("div", { class: "container pb-20 xl:pb-40 " }, e("div", { class: "grid-layout" }, e("div", { class: "grid-col-span-12 lg:grid-col-span-5" }, e("eds-social-networks", { class: "mt-28" })), e("nav", { "aria-label": "Secondary nav", class: "grid-col-span-12 lg:grid-col-span-6 lg:grid-col-start-7 grid-layout mt-28 gap-y-12 lg:mt-0" })))) : null, e("div", { key: "7d6e3a414ec8e8f8e2b795faf639948f8819f5cb", class: `border-softest ${this.social ? "border-t-2" : ""} pt-20 pb-28 md:pt-28` }, e("div", { key: "9a475fd146ac0e1bc78c43940ee24ec31212fcb9", class: "container flex flex-wrap items-center gap-20 lg:flex-nowrap" }, e("div", { key: "4b465113cdb882f919fba15e944eb56edbe3c570", class: "flex items-center gap-x-12" }, e("a", { key: "1a8ad1ee5f4dfb77da036b03d0770cba8e5d725e", 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" }, e("eds-img", { key: "4714ea1a01b7b7eef8b3af0c04ffe793d51c4d5e", width: 54, height: 41, src: "https://www.ebrains.eu/flags/4x3/eu.svg" }))), e("div", { key: "c4db6bab70e570e337c82136a0d9d6dad01c1039", class: "f-ui-04 text-light order-last w-full lg:order-none lg:w-auto" }, e("p", { key: "0b030a92c12a3a96fe2baacc13ac21f5bd708a50" }, this.fundedBy), e("div", { key: "4714d0ccf0e3912ae330a6f39ed3607caf2b51a4", class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap" }, e("span", { key: "b4bc2d45871c7d1f9de1d6090959b12fd5246f01", class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline" }, "© ", this.rightsReserved), this.hasCookiesSetUp && e("button", { key: "98b56eee7be6bc1558821933cebf2853b3bb68fc", class: "effect-focus !no-underline underline-offset-4 hover:!underline", onClick: () => this.toggleCookiesPopup() }, this.cookiesPreference))), e("div", { key: "f4bf4a0c99f3be920dd15f68e6f7e390cd85ecce", class: "ml-auto pl-12" }, this.enableScrollTop ? e("eds-button", { "aria-label": "Back to top", intent: "ghostInverse", icon: "chevron-up", onClick: this.backToTop }) : null))));
+  }
+};
+bn.style = hn;
+const fn = `@font-face {
     font-family: "Inter";
     font-weight: 100 900;
     font-display: swap;
@@ -15560,9 +15736,9 @@ const rn = `@font-face {
       padding-right: 0rem;
     }
   }
-  `, ln = rn, tn = class {
+  `, mn = fn, pn = class {
   constructor(n) {
-    d(this, n), this.formSubmitting = h(this, "formSubmitting", 7), this.handleChange = (i, r) => {
+    s(this, n), this.formSubmitting = h(this, "formSubmitting", 7), this.handleChange = (i, r) => {
       const l = i.target;
       this.values = Object.assign(Object.assign({}, this.values), { [r.name]: l.value });
       const t = Object.assign({}, this.errors);
@@ -15599,24 +15775,24 @@ const rn = `@font-face {
         });
         if (!o.ok) {
           const c = await o.json();
-          this.hasError = !0, x.show(c.error || this.errorMessage, "error");
+          this.hasError = !0, b.show(c.error || this.errorMessage, "error");
           return;
         }
         const a = await o.json();
-        this.formSubmitted = !0, x.show(a.message || this.successMessage, "success"), this.formEl.reset();
+        this.formSubmitted = !0, b.show(a.message || this.successMessage, "success"), this.formEl.reset();
       } catch (o) {
-        this.hasError = !0, x.show(`${o}`, "error");
+        this.hasError = !0, b.show(`${o}`, "error");
       } finally {
         this.isSubmitting = !1, this.formSubmitting.emit(this.isSubmitting);
       }
-    }, this.smallAlert = !1, this.setFormUrl = !0, this.submitBtn = !0, this.submitBtnLabel = "Submit", this.successMessage = "Your message has been sent.", this.errorMessage = "Some fields in your form are incorrect.", this.submitBtnHintMessage = "To participate, please sign in using your EBRAINS account. If you do not have an account yet, you can easily create one on the EBRAINS portal.", this.endpoint = void 0, this.name = "form", this.fields = void 0, this.values = {}, this.coupleAuth = !1, this.formSubmitted = !1, this.hasError = !1, this.errors = {}, this.isSubmitting = !1, this.alertMessage = null, this.isAuthenticated = !1, this.authUser = void 0;
+    }, this.setFormUrl = !0, this.submitBtn = !0, this.submitBtnLabel = "Submit", this.successMessage = "Your message has been sent.", this.errorMessage = "Some fields in your form are incorrect.", this.submitBtnHintMessage = "To participate, please sign in using your EBRAINS account. If you do not have an account yet, you can easily create one on the EBRAINS portal.", this.endpoint = void 0, this.name = "form", this.fields = [], this.values = {}, this.coupleAuth = !1, this.formSubmitted = !1, this.hasError = !1, this.errors = {}, this.isSubmitting = !1, this.alertMessage = null, this.isAuthenticated = !1, this.authUser = void 0, this.parsedFields = [];
   }
   onAuthStatusChanged(n) {
     var i;
     this.isAuthenticated = (i = n.detail) === null || i === void 0 ? void 0 : i.authenticated, this.authUser = n.detail.user;
   }
   componentDidLoad() {
-    this.el.querySelectorAll("eds-button").forEach((i) => {
+    this.parseFields(this.fields), this.el.querySelectorAll("eds-button").forEach((i) => {
       this.emitContext(i);
     });
   }
@@ -15640,11 +15816,11 @@ const rn = `@font-face {
   }
   validateFieldGroup(n, i, r) {
     const o = Array.from(this.formEl.querySelectorAll("eds-input-field")).filter((c) => {
-      var g, m;
-      return ((m = (g = c.shadowRoot) === null || g === void 0 ? void 0 : g.querySelectorAll(`input[name="${n}"]`)) === null || m === void 0 ? void 0 : m.length) > 0;
+      var x, m;
+      return ((m = (x = c.shadowRoot) === null || x === void 0 ? void 0 : x.querySelectorAll(`input[name="${n}"]`)) === null || m === void 0 ? void 0 : m.length) > 0;
     }).flatMap((c) => {
-      var g;
-      return Array.from(((g = c.shadowRoot) === null || g === void 0 ? void 0 : g.querySelectorAll(`input[name="${n}"]`)) || []);
+      var x;
+      return Array.from(((x = c.shadowRoot) === null || x === void 0 ? void 0 : x.querySelectorAll(`input[name="${n}"]`)) || []);
     }).some((c) => c.checked), a = [];
     return r && !o && a.push(`At least one option in ${n} is required.`), a;
   }
@@ -15660,7 +15836,7 @@ const rn = `@font-face {
     return i && o && !o.checked && l.push(`${n} is required.`), l;
   }
   validateForm() {
-    this.errors = {}, this.hasError = !1, this.parseFields.forEach((n) => {
+    this.errors = {}, this.hasError = !1, this.parsedFields.forEach((n) => {
       if (n.type !== "hidden")
         if ((n.type === "checkbox" || n.type === "radio") && !n.options) {
           const i = this.validateSingleBox(n.name, n.required);
@@ -15707,24 +15883,172 @@ const rn = `@font-face {
       }
     }), n;
   }
-  get parseFields() {
-    return JSON.parse(this.fields);
+  parseFields(n) {
+    try {
+      typeof n == "string" ? this.parsedFields = JSON.parse(n) : Array.isArray(n) ? this.parsedFields = n : n && typeof n == "object" ? this.parsedFields = n : this.parsedFields = [];
+    } catch (i) {
+      console.error("Error parsing fields prop:", i), this.parsedFields = [];
+    }
   }
   render() {
-    const n = this.parseFields.filter((r) => r.type === "hidden"), i = this.parseFields.filter((r) => r.type !== "hidden");
-    return e("form", { key: "fdb974998dfd27c0d857d0fbfbbe9e769e55d7bb", ref: (r) => this.formEl = r, enctype: "multipart/form-data", autocomplete: "on", method: "post", onSubmit: this.handleSubmit }, e("div", { key: "dfbe5adce9e5685736169e88408590088aba5b1e" }, e("slot", { key: "f5c5356a8b87bf63fdd21901da81291c596f1487" }), n.map((r, l) => e("eds-input", { key: l, type: "hidden", name: r.name, value: r.value })), i.map((r, l) => {
+    const n = this.parsedFields.filter((r) => r.type === "hidden"), i = this.parsedFields.filter((r) => r.type !== "hidden");
+    return e("form", { key: "0a106caa8aa9f056b55acf6fecfbc7090c4411d2", ref: (r) => this.formEl = r, enctype: "multipart/form-data", autocomplete: "on", method: "post", onSubmit: this.handleSubmit }, e("div", { key: "3478d82640378d9a1c0c09394453e2118b1b3ca9" }, e("slot", { key: "9bc37f54c03b2b0f831da917b6ce6bab2ec11084" }), n.map((r, l) => e("eds-input", { key: l, type: "hidden", name: r.name, value: r.value })), i.map((r, l) => {
       var t, o;
       return this.isFieldVisible(r) ? e("eds-input-field", { key: l, name: r.name, id: `${this.name}_${r.name}`, label: r.label, type: r.type, icon: r.icon || null, required: r.required, maxLength: r.maxlength, hint: r.hint, error: ((t = this.errors[r.name]) === null || t === void 0 ? void 0 : t.length) > 0, errorMessage: (o = this.errors[r.name]) === null || o === void 0 ? void 0 : o.join("<br />"), onInput: (a) => this.handleChange(a, r), class: l > 0 ? "mt-20" : "", options: r.options }) : null;
-    })), this.submitBtn && e("div", { key: "2c3165a56d5bec9135a8695cae1b87981167c949", class: "mt-20" }, e("eds-button", { key: "f311628ff58cd03ebbd0f7ccb0623df817d416da", intent: "primary", label: this.submitBtnLabel, disabled: this.isSubmitting || this.coupleAuth && !this.isAuthenticated, loading: this.isSubmitting, onClick: (r) => this.handleSubmit(r) }), this.coupleAuth && !this.isAuthenticated ? e("p", { class: "f-ui-05 text-lighter mt-8 ml-8" }, this.submitBtnHintMessage) : null), this.alertMessage && (this.formSubmitted || this.hasError) && e("div", { key: "1c7adc93081294eb86b71e808933215fe04fa033", class: "mt-20" }, e("eds-alert", { key: "d221dd0674be734a8b7382ea2eeb97509f6bc3a6", message: this.alertMessage, intent: this.hasError ? "error" : "success", direction: "horizontal" })));
+    })), this.submitBtn && e("div", { key: "ca221e8c5c18cf4a107581736728f84cea7831d0", class: "mt-20" }, e("eds-button", { key: "eef3cf052beb62703c1df74d142650194d60c501", intent: "primary", label: this.submitBtnLabel, disabled: this.isSubmitting || this.coupleAuth && !this.isAuthenticated, loading: this.isSubmitting, onClick: (r) => this.handleSubmit(r) }), this.coupleAuth && !this.isAuthenticated ? e("p", { class: "f-ui-05 text-lighter mt-8 ml-8" }, this.submitBtnHintMessage) : null), this.alertMessage && (this.formSubmitted || this.hasError) && e("div", { key: "69861c8776b99e26a08585a5a8c893c85a2d9999", class: "mt-20" }, e("eds-alert", { key: "b4d225d8efcbe6cde95789c367f0ecf94f217c9c", message: this.alertMessage, intent: this.hasError ? "error" : "success", direction: "horizontal" })));
   }
   get el() {
-    return s(this);
+    return d(this);
+  }
+  static get watchers() {
+    return {
+      fields: ["parseFields"]
+    };
   }
 };
-tn.style = ln;
-const on = "", dn = on, sn = class {
+pn.style = mn;
+const le = class {
+  constructor(n) {
+    s(this, n), this.frameLabel = void 0, this.urlLabel = "Open in Storybook", this.errorMessage = "Could not load the requested Storybook content. Please check the URL or try again later.", this.storybookUrl = void 0, this.storyPath = void 0, this.intent = "strong", this.tiny = !1, this.size = "auto", this.bg = !0, this.iframeError = !1;
+  }
+  articleClasses() {
+    return [
+      this.tiny ? "min-h-120" : "min-h-156",
+      this.bg ? "bg-inverse" : "bg-default",
+      "rounded border-softer effect-focus-within relative flex grow flex-col border-2",
+      "w-full h-full"
+    ].join(" ");
+  }
+  getFrameHeight() {
+    switch (this.size) {
+      case "sm":
+        return "100px";
+      case "md":
+        return "200px";
+      case "lg":
+        return "400px";
+      case "xl":
+        return "700px";
+      default:
+        return "auto";
+    }
+  }
+  async checkIframeAvailability() {
+    try {
+      if (!(await fetch(this.frameSrc, { method: "GET" })).ok)
+        throw new Error("Failed to load");
+    } catch {
+      this.iframeError = !0;
+    }
+  }
+  componentWillLoad() {
+    this.checkIframeAvailability();
+  }
+  componentDidLoad() {
+    this.el.querySelectorAll("eds-link").forEach((i) => {
+      this.emitContext(i);
+    });
+  }
+  /**
+   * Emits a custom event called `parentContext` for a given link element.
+   * This event provides context information about the breadcrumb component.
+   *
+   * @param linkElement - The link element to which the event will be dispatched.
+   */
+  emitContext(n) {
+    const i = new CustomEvent("parentContext", {
+      detail: {
+        componentName: this.el.tagName.toLowerCase(),
+        identifier: this.frameLabel
+      }
+    });
+    n.dispatchEvent(i);
+  }
+  get storyLink() {
+    return `${this.storybookUrl}/?path=/story/${this.storyPath}`;
+  }
+  get frameSrc() {
+    return `${this.storybookUrl}/iframe.html?id=${this.storyPath}&viewMode=story`;
+  }
+  render() {
+    return e("div", { key: "0c3a43efc1a125af5999af88c4eb071b5c3bc6c5", class: this.articleClasses() }, e("div", { key: "32303d5e2c2f3b01efe1ceaf828346f873bea6b6", class: "effect-height flex items-center justify-between py-8 px-12" }, e("span", { key: "75f7f6750413dad4af2ea62c12ffb994491d5d01", class: "f-ui-02" }, this.frameLabel), this.iframeError ? null : e("eds-link", { label: this.urlLabel, url: this.storyLink, intent: this.intent, class: "ml-auto", external: !0, disabled: !1, icon: "arrow-diagonal" })), e("div", { key: "1fd99f6eda026814910b0cd93635616b7d3ffe09", class: "border-softer border-t-2" }, this.iframeError ? e("div", { class: "container ml-8 mr-8 mt-16" }, this.errorMessage) : e("iframe", { src: this.frameSrc, width: "100%", height: this.getFrameHeight(), title: this.frameLabel, frameBorder: "0", allowFullScreen: !0 })));
+  }
+  get el() {
+    return d(this);
+  }
+}, un = "", yn = un, vn = class {
+  constructor(n) {
+    s(this, n), this.menuClose = h(this, "menuClose", 7), this.links = void 0, this.menuLinks = void 0, this.homeUrl = "/", this.inverseHeader = !1, this.isMenuOpen = !1;
+  }
+  /**
+   * Listens for the toggleMenu event to open or close the menu.
+   * This event is emitted by the eds-header component.
+   */
+  handleToggleMenu(n) {
+    this.isMenuOpen = n.detail;
+  }
+  /** Opens the menu */
+  openMenu() {
+    this.isMenuOpen = !0;
+  }
+  /** Closes the menu */
+  closeMenu() {
+    this.isMenuOpen = !1, this.menuClose.emit();
+  }
+  // Lifecycle method to add the resize event listener when component loads
+  componentDidLoad() {
+    window.addEventListener("resize", this.handleResize.bind(this));
+  }
+  // Lifecycle method to remove the resize event listener when component unloads
+  disconnectedCallback() {
+    window.removeEventListener("resize", this.handleResize.bind(this));
+  }
+  // Function to close the menu if screen width is larger than a defined breakpoint (1024px)
+  handleResize() {
+    window.innerWidth >= 1024 && (this.isMenuOpen = !1);
+  }
+  /**
+   * Parses the `links` prop into an array of link objects.
+   * Returns an empty array if parsing fails or if `links` is not a valid JSON string or object.
+   *
+   * @returns {any[]} Array of parsed link objects
+   */
+  get parsedLinks() {
+    if (typeof this.links == "object")
+      return this.links;
+    if (typeof this.links == "string")
+      try {
+        return JSON.parse(this.links);
+      } catch (n) {
+        return console.error("Error parsing links prop:", n), [];
+      }
+    return [];
+  }
+  /**
+   * Parses the `menuLinks` prop into an array of link objects.
+   * Returns an empty array if parsing fails or if `menuLinks` is not a valid JSON string or object.
+   *
+   * @returns {any[]} Array of parsed menu link objects
+   */
+  get parsedMenuLinks() {
+    if (typeof this.menuLinks == "object")
+      return this.menuLinks;
+    if (typeof this.menuLinks == "string")
+      try {
+        return JSON.parse(this.menuLinks);
+      } catch (n) {
+        return console.error("Error parsing menuLinks prop:", n), [];
+      }
+    return [];
+  }
+  render() {
+    return this.isMenuOpen ? e("div", { class: "eds-full-screen bg-default fixed inset-0 z-[999999] overflow-y-scroll" }, e("div", { class: "flex min-h-full flex-col" }, e("div", { class: `bg-default w-full sticky top-0 ${this.inverseHeader ? "bg-strongest" : "bg-default"}` }, e("div", { class: "mx-auto flex items-center justify-between" }, e("div", { class: "mr-auto w-[200px] h-[85px]" }, e("eds-logo", { type: this.inverseHeader ? "color-white" : "color", href: this.homeUrl })), e("div", { class: "px-16" }, e("eds-button", { "aria-label": "Close menu", intent: "ghostInverse", icon: "close", onClick: () => this.closeMenu() })))), e("div", { class: "py-16 px-16" }, e("nav", { class: "mt-28 flex flex-col gap-y-8" }, this.parsedLinks.map((n, i) => e("eds-link", { label: n.label, key: i, url: n.url, intent: "tertiary", size: "large", class: "effect-color effect-focus rounded-xs f-heading-02 hover:text-lighter w-fit", onClick: () => this.closeMenu(), icon: "arrow-right" }))), e("eds-block-break", null), e("nav", { class: "mt-28 flex flex-col gap-y-8" }, this.parsedMenuLinks.map((n, i) => e("eds-link", { label: n.label, key: i, url: n.url, intent: "tertiary", size: "large", class: "effect-color effect-focus rounded-xs f-heading-02 hover:text-lighter w-fit", onClick: () => this.closeMenu(), icon: "chevron-right" })))), e("div", { class: "mt-auto" }, e("eds-footer", { social: !0, "extra-class": "bg-darker" })))) : null;
+  }
+};
+vn.style = yn;
+const wn = "", kn = wn, zn = class {
   constructor(n) {
-    d(this, n), this.toggleMenu = h(this, "toggleMenu", 7), this.homeUrl = "/", this.links = void 0, this.inverseHeader = !1, this.userFeature = !1, this.menuEnabled = !1, this.keycloakUrl = void 0, this.keycloakRealm = void 0, this.keycloakClientId = void 0, this.isMenuOpen = !1, this.isUserMenuOpen = !1, this.isAuthenticated = !1;
+    s(this, n), this.toggleMenu = h(this, "toggleMenu", 7), this.homeUrl = "/", this.links = void 0, this.inverseHeader = !1, this.userFeature = !1, this.menuEnabled = !1, this.keycloakUrl = void 0, this.keycloakRealm = void 0, this.keycloakClientId = void 0, this.isMenuOpen = !1, this.isUserMenuOpen = !1, this.isAuthenticated = !1;
   }
   onAuthStatusChanged(n) {
     var i;
@@ -15772,6 +16096,8 @@ const on = "", dn = on, sn = class {
    * @returns {any[]} Array of parsed link objects
    */
   get parsedLinks() {
+    if (Array.isArray(this.links))
+      return this.links;
     if (typeof this.links == "object")
       return this.links;
     if (typeof this.links == "string")
@@ -15783,17 +16109,17 @@ const on = "", dn = on, sn = class {
     return [];
   }
   render() {
-    return e("header", { key: "bd3056a3d8ca0e8472e154eb3da9ba1aca6d1fa1", class: `flex items-center justify-between relative z-10
-       ${this.inverseHeader ? "text-inverse bg-strongest" : "text-default bg-dark"}` }, e("div", { key: "55db7995eab812785789ecc8441079ee5e07af76", class: "mr-auto w-[200px] h-[85px]" }, e("eds-logo", { key: "0464d045dc59d0f78a021a14ffa0254579052529", type: this.inverseHeader ? "color-white" : "color", href: this.homeUrl })), this.parsedLinks && e("nav", { key: "7ab1b2c20cf9d934a29480bd29736ced42ff5a20", class: "absolute left-1/2 top-1/2 grow -translate-x-1/2 -translate-y-1/2 justify-center hidden md:flex" }, e("ul", { key: "7dca9e2715f3831ee806b0e354c19b65deac1490", class: "flex gap-x-2" }, this.parsedLinks.map((n) => e("eds-link", { label: n.label, "aria-label": n.label, url: n.url, intent: "ghost", size: "small", icon: n.icon, external: n.external, "extra-class": "after:effect-opacity aria-current-page:bg-darker whitespace-nowrap !text-current after:!border-transparent after:opacity-0 hover:after:!border-transparent hover:after:opacity-100" })))), e("slot", { key: "d49985a1074f2daed9cab42fa5af8b0ec8cb6ec9" }), this.userFeature ? e("div", { class: "px-16" }, e("eds-user", { "keycloak-url": this.keycloakUrl, "keycloak-realm": this.keycloakRealm, "keycloak-client-id": this.keycloakClientId })) : null, this.menuEnabled ? e("div", { class: "md:hidden flex overflow-hidden px-16" }, e("eds-button", { "aria-label": "Menu", intent: "ghostInverse", icon: "menu", size: "small", onClick: () => this.handleToggleMenu() })) : null);
+    return e("header", { key: "b16e5e84ba7565ebf4ea5892a9a1af84fc94769d", class: `flex items-center justify-between relative z-10
+       ${this.inverseHeader ? "text-inverse bg-strongest" : "text-default bg-dark"}` }, e("div", { key: "00206a2714dedfe205151002cc10c430e75814fb", class: "mr-auto w-[200px] h-[85px]" }, e("eds-logo", { key: "25fc6207d61bb4cc06877dd0b15bf56392b50255", type: this.inverseHeader ? "color-white" : "color", href: this.homeUrl })), this.parsedLinks && e("nav", { key: "8d1ee2947db26e5acb556da845fe1b811a8d18b2", class: "absolute left-1/2 top-1/2 grow -translate-x-1/2 -translate-y-1/2 justify-center hidden md:flex" }, e("ul", { key: "5c70e48f3a617a6abe402659b37741e657440cbc", class: "flex gap-x-2" }, this.parsedLinks.map((n) => e("eds-link", { label: n.label, "aria-label": n.label, url: n.url, intent: "ghost", size: "small", icon: n.icon, external: n.external, "extra-class": "after:effect-opacity aria-current-page:bg-darker whitespace-nowrap !text-current after:!border-transparent after:opacity-0 hover:after:!border-transparent hover:after:opacity-100" })))), e("slot", { key: "773b60e90ecfe336fede86ea6e3b0ec2fd10bd72" }), this.userFeature ? e("div", { class: "px-16" }, e("eds-user", { "keycloak-url": this.keycloakUrl, "keycloak-realm": this.keycloakRealm, "keycloak-client-id": this.keycloakClientId })) : null, this.menuEnabled ? e("div", { class: "md:hidden flex overflow-hidden px-16" }, e("eds-button", { "aria-label": "Menu", intent: "ghostInverse", icon: "menu", size: "small", onClick: () => this.handleToggleMenu() })) : null);
   }
   get hostEl() {
-    return s(this);
+    return d(this);
   }
 };
-sn.style = dn;
-const $n = class {
+zn.style = kn;
+const te = class {
   constructor(n) {
-    d(this, n), this.TagName = null, this.icon = "arrow-right", this.class = "", this.IconComponent = null;
+    s(this, n), this.TagName = null, this.icon = "arrow-right", this.class = "", this.IconComponent = null;
   }
   componentWillLoad() {
     this.loadIconComponent(this.icon);
@@ -15817,7 +16143,7 @@ const $n = class {
       icon: ["iconChanged"]
     };
   }
-}, an = `/*
+}, Sn = `/*
 1. Make replaced elements \`display: block\` by default. (https://github.com/mozdevs/cssremedy/issues/14)
 2. Add \`vertical-align: middle\` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
    This can trigger a poorly considered lint error in some tools but is included by design.
@@ -15899,9 +16225,9 @@ video {
 
 .opacity-100 {
     opacity: 1;
-}`, cn = an, gn = class {
+}`, Cn = Sn, Fn = class {
   constructor(n) {
-    d(this, n), this.img = null, this.handleLoad = () => {
+    s(this, n), this.img = null, this.handleLoad = () => {
       this.loaded = !0, this.showBg = !1;
     }, this.handleTransitionEnd = () => {
       this.showBg = !1;
@@ -15922,13 +16248,13 @@ video {
     }, width: this.width, height: this.height, sizes: this.sizes, src: this.src, srcSet: this.srcset, alt: this.alt }, n, { onLoad: this.handleLoad, onTransitionEnd: this.handleTransitionEnd }))));
   }
   get imgElement() {
-    return s(this);
+    return d(this);
   }
 };
-gn.style = cn;
-const Xn = class {
+Fn.style = Cn;
+const oe = class {
   constructor(n) {
-    d(this, n), this.changeEvent = h(this, "changeEvent", 7), this.handleInput = (i) => {
+    s(this, n), this.changeEvent = h(this, "changeEvent", 7), this.handleInput = (i) => {
       const r = i.target;
       this.innerVal = r.value, this.maxLength && this.type === "textarea" && (this.maxLengthReached = r.value.length >= this.maxLength), this.changeEvent.emit(i);
     }, this.name = void 0, this.inputId = void 0, this.placeholder = void 0, this.disabled = !1, this.hasMessage = !1, this.error = !1, this.checked = void 0, this.type = "text", this.required = !1, this.value = void 0, this.icon = void 0, this.maxLength = void 0, this.options = [], this.extraClass = void 0, this.innerVal = "", this.maxLengthReached = !1;
@@ -15952,14 +16278,14 @@ const Xn = class {
               `, "aria-invalid": this.error ? "true" : "false", "aria-describedby": i, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput }), this.maxLength && this.type === "textarea" && e("span", { key: "2a95bcd05820c60e428c9e5de3cc2c3fc6ceb3db", class: `input-counter f-ui-05 absolute bottom-8 right-8 ${this.maxLengthReached ? "input-counter-error" : ""}` }, this.maxLength), this.icon && e("eds-icon-wrapper", { key: "d20b1b17f45c77e1e7ad63ca5cb12db777074601", class: `absolute top-1/2 left-[4px] -translate-y-1/2 ${this.disabled, "text-lightest"}`, icon: this.icon }));
   }
   get el() {
-    return s(this);
+    return d(this);
   }
   static get watchers() {
     return {
       value: ["onValueChanged"]
     };
   }
-}, xn = `@font-face {
+}, En = `@font-face {
   font-family: "Inter";
   font-weight: 100 900;
   font-display: swap;
@@ -23120,9 +23446,9 @@ input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
             appearance: none; /* Ensure the thumb can be styled */
 }
-`, bn = xn, hn = class {
+`, In = En, Ln = class {
   constructor(n) {
-    d(this, n), this.name = void 0, this.inputId = void 0, this.placeholder = void 0, this.disabled = !1, this.onChange = void 0, this.onInput = void 0, this.type = "text", this.required = !1, this.label = void 0, this.hint = void 0, this.icon = void 0, this.link = void 0, this.message = void 0, this.error = !1, this.checked = void 0, this.errorMessage = void 0, this.value = void 0, this.maxLength = void 0, this.options = void 0;
+    s(this, n), this.name = void 0, this.inputId = void 0, this.placeholder = void 0, this.disabled = !1, this.onChange = void 0, this.onInput = void 0, this.type = "text", this.required = !1, this.label = void 0, this.hint = void 0, this.icon = void 0, this.link = void 0, this.message = void 0, this.error = !1, this.checked = void 0, this.errorMessage = void 0, this.value = void 0, this.maxLength = void 0, this.options = void 0;
   }
   get parsedOptions() {
     if (Array.isArray(this.options))
@@ -23157,24 +23483,24 @@ input[type="range"]::-webkit-slider-thumb {
     })() : e("eds-input", Object.assign({}, n))), e("eds-input-footer", { key: "7c283d5b193f179cdefbb011862358e3c92685c5", name: this.name, message: this.message, "error-message": this.errorMessage, error: this.error, link: this.link }));
   }
 };
-hn.style = bn;
-const Vn = class {
+Ln.style = In;
+const se = class {
   constructor(n) {
-    d(this, n), this.name = void 0, this.errorMessage = void 0, this.message = void 0, this.error = !1, this.link = void 0;
+    s(this, n), this.name = void 0, this.errorMessage = void 0, this.message = void 0, this.error = !1, this.link = void 0;
   }
   render() {
     return e("div", { key: "9ce8da179446c0302754f1285b3733d928da042f", class: "space-y-4" }, this.error && this.errorMessage && e("div", { key: "aab7e8ded78e48864b2245603c3987a6ec3f3959", id: `error_${this.name}`, class: "text-error flex items-center" }, e("eds-icon-wrapper", { key: "152a06328c6cbb40f0d52310ac3ce761de21a26c", icon: "warning" }), e("p", { key: "658825aa4649ad83a150a0dc92d37f1b078de4c3", class: "f-ui-04 ml-4", innerHTML: this.errorMessage })), this.message && e("p", { key: "378ae9ef876e087f66302547958af4543262a441", id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && e("a", { key: "cd396f03bdbd12a47544a44de17cfce35b8d206a", href: this.link.url, class: "f-ui-05 effect-color hover:text-lighter underline underline-offset-4" }, this.link.label));
   }
-}, Gn = class {
+}, de = class {
   constructor(n) {
-    d(this, n), this.label = void 0, this.name = void 0, this.required = !1, this.disabled = !1;
+    s(this, n), this.label = void 0, this.name = void 0, this.required = !1, this.disabled = !1;
   }
   render() {
     return e("label", { key: "d83f8267317c2d5ef500460e938b166c0e6517b1", htmlFor: this.name, class: `input-label ${this.disabled ? "text-lighter" : ""}` }, this.label, this.required && e("span", { key: "85ad9e44af342c191d8aa7aeb7e4c6288c544d6d" }, e("span", { key: "b350ee023f80bc9d5f24ef2fac9f74b2461d27b9", "aria-hidden": "true" }, "*"), e("span", { key: "af55a83d8998ac70817cb2f7cebfb74f276a6387", class: "sr-only" }, "required")));
   }
-}, Jn = class {
+}, ae = class {
   constructor(n) {
-    d(this, n), this.onInput = (i) => {
+    s(this, n), this.onInput = (i) => {
       const r = i.target;
       this.sliderVal = parseInt(r.value, 10);
     }, this.name = void 0, this.inputId = "range", this.disabled = !1, this.required = !1, this.min = 0, this.max = 100, this.step = 1, this.sliderVal = this.max % 2 === 0 ? this.max / 2 : Math.ceil(this.max / 2);
@@ -23203,11 +23529,11 @@ const Vn = class {
     }), e("p", { key: "e04c275e51710ae09eec1603911446e1e65bf648", id: `desc_${this.name}`, class: "block f-ui-05 text-lighter" }, "Current value: ", this.sliderVal));
   }
   get el() {
-    return s(this);
+    return d(this);
   }
-}, Kn = class {
+}, ce = class {
   constructor(n) {
-    d(this, n), this.onInput = (i) => {
+    s(this, n), this.onInput = (i) => {
       console.log("on input:", i);
     }, this.onChange = (i) => {
       console.log("on change:", i.target.value);
@@ -23236,19 +23562,53 @@ const Vn = class {
     }));
   }
   get el() {
-    return s(this);
+    return d(this);
   }
-}, Qn = class {
+}, ge = class {
   constructor(n) {
-    d(this, n), this.changeEvent = h(this, "changeEvent", 7), this.handleChange = (i) => {
+    s(this, n), this.changeEvent = h(this, "changeEvent", 7), this.handleChange = (i) => {
       const r = i.target;
       this.changeEvent.emit(r.value);
-    }, this.inputId = void 0, this.name = void 0, this.placeholder = void 0, this.disabled = !1, this.hasMessage = !1, this.error = !1, this.required = !1, this.options = [], this.value = void 0;
+    }, this.inputId = void 0, this.name = void 0, this.placeholder = void 0, this.disabled = !1, this.hasMessage = !1, this.error = !1, this.required = !1, this.options = [], this.labelKey = "label", this.valueKey = "value", this.value = void 0, this.dynamicOptions = [], this.loading = !1, this.dynamicValueKey = "value", this.dynamicLabelKey = "label";
+  }
+  componentWillLoad() {
+    this.loadOptions();
+  }
+  /**
+   * Watches for changes in the `options` prop and loads the options accordingly.
+   *
+   * If the first object in the options array contains an "endpoint" key,
+   * the component will fetch options from the specified endpoint using the configured keys.
+   * Otherwise, it will treat the options as static.
+   *
+   * @async
+   */
+  async loadOptions() {
+    if (this.options && this.options.length > 0 && this.options[0].endpoint) {
+      const n = this.options[0], i = n.endpoint;
+      this.dynamicValueKey = n.value || "value", this.dynamicLabelKey = n.label || "label", this.loading = !0;
+      try {
+        const r = await fetch(i);
+        r.ok || b.show(`<eds-input-select> HTTP error! Status: ${r.status}`, "error");
+        const l = await r.json();
+        this.dynamicOptions = l;
+      } catch (r) {
+        b.show(`<eds-input-select> Error fetching dynamic options ${r}`, "error");
+      } finally {
+        this.loading = !1;
+      }
+    } else
+      this.dynamicOptions = this.options, this.dynamicValueKey = this.valueKey, this.dynamicLabelKey = this.labelKey;
   }
   render() {
-    return e("div", { key: "9aaa3bf4491078f5b5df6f5f0d3d5f3739f25716", class: "relative" }, e("select", { key: "5f860de772d8d92eb36648bdaaca0c93146e8a68", id: this.inputId || this.name, name: this.name, class: `input invalid:text-lightest pr-32 ${this.error ? "input-error" : ""}`, "aria-invalid": this.error ? "true" : "false", "aria-describedby": this.hasMessage || this.error ? `${this.name}-error` : "", disabled: this.disabled, required: this.required, onChange: this.handleChange }, e("option", { key: "2d1e8fa6c5583e0580cbd92d731b731cdd7ecca8", value: "", disabled: !0, hidden: !0 }, "Please select ", this.name), this.options.map((n, i) => e("option", { key: i, value: n.value }, n.label))), e("span", { key: "f62edaae154ce443c964849689b5dc92d9303958", class: `bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center ${this.disabled ? "text-lightest bg-transparent" : ""}` }, e("eds-icon-wrapper", { key: "07d186b6e0a6742a4f6ce39dd275ff1a6f905927", class: "w-20 h-20", icon: "chevron-right" })));
+    return e("div", { key: "d37107564a86281b3a3920a5eb128f47f6fd4ceb", class: "relative" }, e("select", { key: "a69cd907ef6732ec42a99fd46bbf9a52ef03735a", id: this.inputId || this.name, name: this.name, class: `input invalid:text-lightest pr-32 ${this.error ? "input-error" : ""}`, "aria-invalid": this.error ? "true" : "false", "aria-describedby": this.hasMessage || this.error ? `${this.name}-error` : "", disabled: this.disabled || this.loading, required: this.required, onChange: this.handleChange }, e("option", { key: "8b84a2b7edd7e989411908b16f35c46853889d8e", value: "", disabled: !0, hidden: !0 }, this.loading ? "Loading options..." : `Please select ${this.name}`), this.dynamicOptions.map((n, i) => e("option", { key: i, value: n[this.dynamicValueKey] }, n[this.dynamicLabelKey]))), e("span", { key: "dbccb6161aafc2dc31cc6dd5b3d8c812545eab9a", class: `bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center ${this.disabled || this.loading ? "text-lightest bg-transparent" : ""}` }, e("eds-icon-wrapper", { key: "b0fd24cb54185d8558dfabcb94d05b6257caacd1", class: "w-20 h-20", icon: "chevron-right" })));
+  }
+  static get watchers() {
+    return {
+      options: ["loadOptions"]
+    };
   }
-}, fn = `@font-face {
+}, Hn = `@font-face {
     font-family: "Inter";
     font-weight: 100 900;
     font-display: swap;
@@ -30411,7 +30771,7 @@ const Vn = class {
     align-items: center;
   }
   
-  `, mn = fn, pn = b([
+  `, An = Hn, Wn = f([
   "relative inline-flex justify-center items-center py-8 rounded-sm",
   "effect-color effect-focus aria-disabled:text-lightest",
   "aria-disabled:bg-dark aria-disabled:cursor-not-allowed aria-disabled:!border-transparent aria-disabled:after:!border-transparent"
@@ -30528,11 +30888,11 @@ const Vn = class {
     iconSmall: !1,
     size: "small"
   }
-}), un = class {
+}), jn = class {
   constructor(n) {
-    d(this, n), this.parentContext = null, this.label = void 0, this.intent = void 0, this.icon = void 0, this.iconPos = "right", this.iconSmall = !1, this.size = "small", this.external = !1, this.current = !1, this.download = !1, this.url = void 0, this.ariaLabel = void 0, this.disabled = !1, this.hideLabelOnSmallScreen = !1, this.extraClass = void 0;
+    s(this, n), this.parentContext = null, this.label = void 0, this.intent = void 0, this.icon = void 0, this.iconPos = "right", this.iconSmall = !1, this.size = "small", this.external = !1, this.current = !1, this.download = !1, this.url = void 0, this.ariaLabel = void 0, this.disabled = !1, this.hideLabelOnSmallScreen = !1, this.extraClass = void 0;
   }
-  handleBreadcrumbContext(n) {
+  handleParentContext(n) {
     n.target === this.el && (this.parentContext = n.detail, n.stopPropagation());
   }
   handleClick(n) {
@@ -30541,7 +30901,7 @@ const Vn = class {
       n.preventDefault();
       return;
     }
-    f({
+    g({
       category: "ui-component",
       parentContext: this.parentContext,
       tag: this.el.tagName.toLowerCase(),
@@ -30565,22 +30925,22 @@ const Vn = class {
             `, icon: this.icon })) : null;
   }
   render() {
-    const n = this.disabled ? "span" : "a", i = pn({
+    const n = this.disabled ? "span" : "a", i = Wn({
       intent: this.intent,
       size: this.getLinkSize(),
       iconSmall: this.iconSmall,
       isActive: this.current
     }), r = this.hideLabelOnSmallScreen ? "hidden lg:flex" : "";
-    return e(n, { key: "287497bf5ba99fe467ba08d59f65d24204fbecbc", class: `${i || ""} ${this.extraClass || ""}`, href: this.disabled ? void 0 : this.url, target: this.external && !this.disabled ? "_blank" : void 0, rel: this.external && !this.disabled ? "noopener noreferrer" : void 0, "aria-label": this.label || this.ariaLabel || void 0, "aria-disabled": this.disabled ? "true" : null, download: this.download ? "" : void 0, onClick: (l) => this.handleClick(l) }, e("span", { key: "a244b21dffaad38cb149a925df1feb3d78beed03", class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), e("span", { key: "2ef69a91351ea622d6425699b90b45a0bd5989b1", class: r }, this.label), this.renderRightIcon()));
+    return e(n, { key: "58eb3c1c5c192c2855424864c9e3e9c7a5fe3378", class: `${i || ""} ${this.extraClass || ""}`, href: this.disabled ? void 0 : this.url, target: this.external && !this.disabled ? "_blank" : void 0, rel: this.external && !this.disabled ? "noopener noreferrer" : void 0, "aria-label": this.label || this.ariaLabel || void 0, "aria-disabled": this.disabled ? "true" : null, download: this.download ? "" : void 0, onClick: (l) => this.handleClick(l) }, e("span", { key: "d4033ba589552f60f8dc7559434a3c035d226de4", class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), e("span", { key: "ca520cc66febaf8c8ddfd2fd8ee8a13b71a3078d", class: r }, this.label), this.renderRightIcon()));
   }
   get el() {
-    return s(this);
+    return d(this);
   }
 };
-un.style = mn;
-const yn = ".w-\\[130px\\]{width:130px}.mr-auto{margin-right:auto}.text-current{color:currentColor}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.h-full{height:100%}.w-full{width:100%}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}@media (min-width: 900px){.lg\\:w-\\[150px\\]{width:150px}}", vn = yn, wn = class {
+jn.style = An;
+const On = ".w-\\[130px\\]{width:130px}.mr-auto{margin-right:auto}.text-current{color:currentColor}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.h-full{height:100%}.w-full{width:100%}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}@media (min-width: 900px){.lg\\:w-\\[150px\\]{width:150px}}", Rn = On, Mn = class {
   constructor(n) {
-    d(this, n), this.href = "/", this.orientation = "horizontal", this.type = void 0;
+    s(this, n), this.href = "/", this.orientation = "horizontal", this.type = void 0;
   }
   /**
    * Handles the click event on the logo link.
@@ -30591,7 +30951,7 @@ const yn = ".w-\\[130px\\]{width:130px}.mr-auto{margin-right:auto}.text-current{
    * - `action`: The action, set as "click".
    */
   handleClick() {
-    f({
+    g({
       category: "ui-component",
       tag: this.el.tagName.toLowerCase(),
       name: "logo",
@@ -30628,28 +30988,149 @@ const yn = ".w-\\[130px\\]{width:130px}.mr-auto{margin-right:auto}.text-current{
     return e("a", { key: "3d9435fbc45427865bfa7bacb36bea4c34f08c4e", href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper" }, e("div", { key: "662122c4b687a082c930c034b033e9732ef611be", innerHTML: n }));
   }
   get el() {
-    return s(this);
+    return d(this);
   }
 };
-wn.style = vn;
-const kn = ".w-full{width:100%}.h-full{height:100%}.bg-default{background-color:var(--grey-200)}.rounded-lg{border-radius:16px}.h-24{height:1.5rem}.border{border-width:1px}.border-softer{border:2px solid rgba(0, 0, 0, .1 )}.overflow-hidden{overflow:hidden}.bg-accent{background-color:var(--green-500)}.bg-\\[\\#0034CB\\]{--tw-text-opacity:1;background-color:rgb(0 52 203 / var(--tw-text-opacity))}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}", zn = kn, Sn = class {
+Mn.style = Rn;
+const Tn = ".block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.fixed{position:fixed}.inset-0{inset:0rem}.z-10{z-index:10}.z-50{z-index:50}.max-w-full{max-width:100%}.absolute{position:absolute}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-20{padding-top:1.25rem;padding-bottom:1.25rem}.bg-inverse{background-color:var(--white)}.bg-dark{background-color:var(--grey-300)}.rounded-lg{border-radius:16px}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.left-1\\/2{left:50%}.left-20{left:1.25rem}.right-20{right:1.25rem}.top-1\\/2{top:50%}.top-20{top:1.25rem}.bottom-20{bottom:1.25rem}.grow{flex-grow:1}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.border-b-2{border-bottom-width:2px}.border-softer{border-color:rgba(0, 0, 0, .1)}.pb-8{padding-bottom:0.5rem}.f-heading-03{font-family:var(--f-heading-03-fontFamily);font-weight:var(--f-heading-03-fontWeight);font-size:var(--f-heading-03-fontSize);line-height:var(--f-heading-03-lineHeight);letter-spacing:var(--f-heading-03-letterSpacing)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.ml-8{margin-left:0.5rem}.pt-8{padding-top:0.5rem}.bg-opacity-90{opacity:0.9}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}", Bn = Tn, Un = class {
   constructor(n) {
-    d(this, n), this.value = 0;
+    s(this, n), this.isOpen = !1, this.title = "", this.truncate = !0, this.truncateLines = "1", this.position = "middle";
+  }
+  getTruncateClass() {
+    return this.truncate && this.truncateLines ? `line-clamp-${this.truncateLines}` : "";
+  }
+  /**
+   * Returns the Tailwind CSS classes to position the modal based on the `position` prop.
+   *
+   * @private
+   * @returns {string} The concatenated CSS classes for modal positioning.
+   */
+  getModalPositionClasses() {
+    switch (this.position) {
+      case "top":
+        return "left-1/2 top-20 -translate-x-1/2";
+      case "bottom":
+        return "left-1/2 bottom-20 -translate-x-1/2";
+      case "left":
+        return "left-20 top-1/2 -translate-y-1/2";
+      case "right":
+        return "right-20 top-1/2 -translate-y-1/2";
+      case "middle":
+      default:
+        return "left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2";
+    }
+  }
+  /**
+   * Opens the modal.
+   */
+  async open() {
+    var n;
+    this.isOpen = !0, g({
+      category: "ui-component",
+      parentContext: null,
+      tag: this.el.tagName.toLowerCase(),
+      name: ((n = this.title) === null || n === void 0 ? void 0 : n.toLowerCase()) || "",
+      action: "opened"
+    });
+  }
+  /**
+   * Closes the modal.
+   */
+  async close() {
+    var n;
+    this.isOpen = !1, g({
+      category: "ui-component",
+      parentContext: null,
+      tag: this.el.tagName.toLowerCase(),
+      name: ((n = this.title) === null || n === void 0 ? void 0 : n.toLowerCase()) || "",
+      action: "closed"
+    });
+  }
+  /**
+   * Toggles the modal open or closed.
+   */
+  async toggle() {
+    this.isOpen = !this.isOpen;
   }
   /**
-   * Method to update the progress value externally.
-   * @param newValue The new progress value (0-100).
+   * Lifecycle method that runs when the component has fully loaded.
+   * It emits a custom event for each `eds-button` element contained within the breadcrumb.
+   */
+  componentDidLoad() {
+  }
+  /**
+   * Emits a custom event called `parentContext` for a given button element.
+   * This event provides context information about the eds-modal component.
    */
-  async updateValue(n) {
-    this.value = Math.min(100, Math.max(0, n));
+  /*emitContext(btnElement: HTMLElement) {
+      const event = new CustomEvent<ParentContextDetail>('parentContext', {
+        detail: {
+          componentName: this.el.tagName.toLowerCase(),
+          identifier: null
+        }
+      });
+  
+      btnElement.dispatchEvent(event);
+    }*/
+  render() {
+    return e("div", { key: "eedcdc49c9f4a16ef4537ec02335757aa1143bd9", class: `${this.isOpen ? "block" : "hidden"} fixed inset-0 z-50 flex` }, this.isOpen && e("div", {
+      key: "2b24903b85895fd5eca389d6897aa85c892e762f",
+      class: "fixed inset-0 bg-dark bg-opacity-90",
+      onClick: () => this.close()
+    }), e("div", { key: "d135a2d9eff1764b6335b9b16be54d8fec7d4112", class: `max-w-full absolute px-20 py-20 bg-inverse rounded-lg shadow-lg z-10 ${this.getModalPositionClasses()} grow justify-center` }, e("div", { key: "bc8ea6f95443f01d3e5b88953581e1f2eae4009c", class: "flex justify-between items-center border-b-2 border-softer pb-8" }, e("span", { key: "872b9a4bf44db478d38f18d3459a816c119f352d", class: `f-heading-04 text-lighter ${this.getTruncateClass()}` }, this.title), e("eds-button", { key: "bdf27a3f564d295383985cb1f0ce7df7f13a97fb", intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8" })), e("div", { key: "600cc4d544d0a41d9d2be74aedbb0d2fe2028141", class: "pt-8" }, e("slot", { key: "8ce560804a6d960b4075e4b6d1607dda6530c08d" }))));
+  }
+  get el() {
+    return d(this);
+  }
+};
+Un.style = Bn;
+const _n = "blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.f-ui-02-light{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.mt-12{margin-top:0.75rem}.mt-16{margin-top:1rem}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.gap-4{gap:0.25rem}.effect-color{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.effect-focus{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.hover\\:text-default:hover{color:var(--black)}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.rounded-sm{border-radius:8px}", Dn = _n, Yn = class {
+  constructor(n) {
+    s(this, n), this.socialNetworks = [
+      {
+        label: "Twitter",
+        url: "https://twitter.com/ebrains_eu",
+        icon: "twitter"
+      },
+      {
+        label: "Linkedin",
+        url: "https://www.linkedin.com/company/ebrains-eu/about/",
+        icon: "linkedin"
+      },
+      {
+        label: "Facebook",
+        url: "https://www.facebook.com/people/Ebrains_eu/100046659909324/",
+        icon: "facebook"
+      },
+      {
+        label: "Youtube",
+        url: "https://www.youtube.com/channel/UC6E796cVVR5Xrs2A5jJmleQ",
+        icon: "youtube"
+      },
+      {
+        label: "Mastodon",
+        url: "https://mastodon.social/@ebrains",
+        icon: "mastodon"
+      },
+      {
+        label: "Bluesky",
+        url: "https://bsky.app/profile/ebrains.bsky.social",
+        icon: "bluesky"
+      }
+    ], this.title = "Follow EBRAINS to keep up-to-date";
   }
+  /**
+   * Renders the component's HTML structure with links to EBRAINS social profiles.
+   * Each social network link uses the `eds-link` component with specific classes and styles.
+   *
+   * @returns {JSX.Element} The rendered JSX for the component.
+   */
   render() {
-    const n = this.value;
-    return e("div", { key: "3131f56034a9fd72ca51e448bc2bcc6281669b25", class: "outer w-full bg-default rounded-lg h-24 border border-softer overflow-hidden" }, e("div", { key: "f1665a254f8dbe1ccb9e512e5f2e7c1e5ab88c07", class: "inner h-full rounded-lg bg-accent transition-all duration-300 flex items-center justify-center text-default f-body-02", style: { width: `${n}%` } }, n, "%"));
+    return e("div", { key: "a6a3e2084eb01def71f6fee67ebe8c5f4f613c89" }, e("p", { key: "43b92e9c33f8abef6070a6a3cd77f7573e2ab454", class: "f-ui-02" }, this.title), e("ul", { key: "c0e0dfdeff373885f62250c8bf4385268410406c", class: "mt-12 flex gap-4" }, this.socialNetworks.map((n, i) => e("li", { key: i }, e("eds-link", { "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm", external: !0, "aria-label": n.label, url: n.url, icon: n.icon, intent: "strong" })))));
   }
 };
-Sn.style = zn;
-const Cn = ".f-ui-05{font-family:var(--f-ui-05-fontFamily);font-weight:var(--f-ui-05-fontWeight);font-size:var(--f-ui-05-fontSize);line-height:var(--f-ui-05-lineHeight);letter-spacing:var(--f-ui-05-letterSpacing)}.py-1{padding-top:0.0625rem;padding-bottom:0.0625rem}.px-4{padding-left:0.25rem;padding-right:0.25rem}.border-2{border-width:2px}.rounded-pill{border-radius:100px}.border-default{border:2px solid var(--black)}.text-inverse{color:var(--white)}.bg-strongest{background-color:var(--black)}.text-\\[\\#0034CB\\]{--tw-text-opacity:1;color:rgb(0 52 203 / var(--tw-text-opacity))}.border-\\[\\#0034CB\\]{--tw-border-opacity:1;border:2px solid rgb(0 52 203 / var(--tw-border-opacity))}.text-light{color:var(--grey-700)}.bg-strongest-soft{background-color:rgba(0, 0, 0, .05)}.border-transparent{border-color:var(--transparent)}.border-inverse{border-color:var(--white)}.bg-inverse{background-color:var(--white)}.text-lighter{color:var(--grey-600)}", Fn = Cn, En = b(
+Yn.style = Dn;
+const $n = ".f-ui-05{font-family:var(--f-ui-05-fontFamily);font-weight:var(--f-ui-05-fontWeight);font-size:var(--f-ui-05-fontSize);line-height:var(--f-ui-05-lineHeight);letter-spacing:var(--f-ui-05-letterSpacing)}.py-1{padding-top:0.0625rem;padding-bottom:0.0625rem}.px-4{padding-left:0.25rem;padding-right:0.25rem}.border-2{border-width:2px}.rounded-pill{border-radius:100px}.border-default{border:2px solid var(--black)}.text-inverse{color:var(--white)}.bg-strongest{background-color:var(--black)}.text-\\[\\#0034CB\\]{--tw-text-opacity:1;color:rgb(0 52 203 / var(--tw-text-opacity))}.border-\\[\\#0034CB\\]{--tw-border-opacity:1;border:2px solid rgb(0 52 203 / var(--tw-border-opacity))}.text-light{color:var(--grey-700)}.bg-strongest-soft{background-color:rgba(0, 0, 0, .05)}.border-transparent{border-color:var(--transparent)}.border-inverse{border-color:var(--white)}.bg-inverse{background-color:var(--white)}.text-lighter{color:var(--grey-600)}", Nn = $n, Pn = f(
   ["f-ui-05 py-1 px-4 border-2 rounded-pill"],
   // Base classes
   {
@@ -30667,67 +31148,21 @@ const Cn = ".f-ui-05{font-family:var(--f-ui-05-fontFamily);font-weight:var(--f-u
       intent: "default"
     }
   }
-), In = class {
+), qn = class {
   constructor(n) {
-    d(this, n), this.label = void 0, this.intent = "default";
+    s(this, n), this.label = void 0, this.intent = "default";
   }
   /**
    * Render the component.
    * @returns The rendered HTML for the tag component with the applied styles and label.
    */
   render() {
-    const n = En({ intent: this.intent });
+    const n = Pn({ intent: this.intent });
     return e("span", { key: "546bd7eb2c78760edc12cd7bb3ede5f6ab9099f3", class: n }, this.label);
   }
 };
-In.style = Fn;
-const Zn = class {
-  constructor(n) {
-    d(this, n), this.selectedEvent = null, this.parsedEvents = [], this.events = void 0;
-  }
-  parseEvents(n) {
-    try {
-      const i = JSON.parse(n);
-      this.parsedEvents = Array.isArray(i) ? i.map((r) => Object.assign(Object.assign({}, r), {
-        completed: r.completed === "true" || r.completed === !0
-        // Ensure boolean conversion
-      })) : [];
-    } catch {
-      this.parsedEvents = [];
-    }
-  }
-  componentWillLoad() {
-    this.parseEvents(this.events);
-  }
-  componentDidLoad() {
-    this.el.querySelectorAll("eds-card-generic").forEach((i) => {
-      this.emitContext(i);
-    });
-  }
-  emitContext(n) {
-    const i = new CustomEvent("parentContext", {
-      detail: {
-        componentName: this.el.tagName.toLowerCase(),
-        identifier: null
-      }
-    });
-    n.dispatchEvent(i);
-  }
-  handleEventClick(n) {
-    this.selectedEvent = n, this.modalRef && typeof this.modalRef.open == "function" && this.modalRef.open();
-  }
-  render() {
-    return e("div", { key: "8f40212e04ab17cac2688df56b7330041a605a86", class: "max-w-sidebar mx-auto px-4 py-8" }, e("div", { key: "68421d4fce08e881e2494b5c504bd5db7570e34f", class: "relative" }, e("div", { key: "e43edd7fba6d30b3dd48ffb2b467ff24b46c8da7", class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), e("div", { key: "56dd7cebb5a2761547a5e24ec76652f7052906b2", class: "space-y-16" }, this.parsedEvents.map((n, i) => e("div", { class: "relative flex" }, e("div", { class: `w-1/2 ${i % 2 === 0 ? "pr-4" : ""}` }, i % 2 === 0 && e("eds-card-generic", { cardTitle: n.title, url: "#", description: n.description, "heading-level": "h2", tiny: !0, bg: !n.completed, "with-hover": "false", tags: JSON.stringify(n.completed ? [{ label: "completed", style: "accent" }] : [{ label: "pending", style: "default" }]), onClick: () => this.handleEventClick(n) })), e("div", { class: "flex items-center justify-center relative" }, n.completed ? e("div", { class: "w-32 h-32 bg-accent rounded-full shadow flex items-center justify-center" }) : e("div", { class: "w-32 h-32 bg-strong rounded-full shadow flex items-center justify-center" })), e("div", { class: `w-1/2 ${i % 2 !== 0 ? "pl-4" : ""}` }, i % 2 !== 0 && e("eds-card-generic", { cardTitle: n.title, url: "#", description: n.description, "heading-level": "h2", tiny: !0, bg: !n.completed, "with-hover": "false", tags: JSON.stringify(n.completed ? [{ label: "completed", style: "accent" }] : [{ label: "pending", style: "default" }]), onClick: () => this.handleEventClick(n) })))))));
-  }
-  get el() {
-    return s(this);
-  }
-  static get watchers() {
-    return {
-      events: ["parseEvents"]
-    };
-  }
-}, Hn = b(["relative right-4 bottom-4 w-auto p-12 rounded-lg shadow-md"], {
+qn.style = Nn;
+const Xn = f(["relative right-4 bottom-4 w-auto p-12 rounded-lg shadow-md"], {
   variants: {
     intent: {
       default: "bg-dark text-light",
@@ -30739,12 +31174,32 @@ const Zn = class {
   defaultVariants: {
     intent: "default"
   }
-}), ne = class {
+}), xe = class {
   constructor(n) {
-    d(this, n), this.dismissToast = () => {
+    s(this, n), this.dismissToast = () => {
       this.visible = !1;
     }, this.message = void 0, this.intent = "default", this.duration = 5e3, this.visible = !0;
   }
+  /**
+   * Lifecycle method that sets up the initial panel height and adds a resize event listener
+   * to recalculate height on window resize.
+   */
+  componentDidLoad() {
+    const n = this.el.querySelector("eds-button");
+    this.emitContext(n);
+  }
+  /**
+   * Emits a custom event called `parentContext` for a given button element.
+   */
+  emitContext(n) {
+    const i = new CustomEvent("parentContext", {
+      detail: {
+        componentName: this.el.tagName.toLowerCase(),
+        identifier: null
+      }
+    });
+    n.dispatchEvent(i);
+  }
   connectedCallback() {
     this.dismissTimeout = setTimeout(this.dismissToast, this.duration);
   }
@@ -30754,18 +31209,18 @@ const Zn = class {
   render() {
     if (!this.visible)
       return null;
-    const n = Hn({ intent: this.intent });
+    const n = Xn({ intent: this.intent });
     return e("div", { class: n }, e("div", { class: "flex items-center justify-between gap-4" }, e("p", { class: "f-ui-01" }, this.message), e("eds-button", { intent: "tertiary", icon: "close", "aria-label": "Close Toast", onClick: () => this.dismissToast(), "extra-class": "ml-8" })));
   }
   get el() {
-    return s(this);
+    return d(this);
   }
-}, An = ".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)}}", Wn = An, Ln = class {
+}, Vn = ".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)}}", Kn = Vn, Gn = class {
   constructor(n) {
-    d(this, n), this.toastId = 0, this.toasts = [];
+    s(this, n), this.toastId = 0, this.toasts = [];
   }
   connectedCallback() {
-    x.init(this.hostElement), this.hostElement.addEventListener("show-toast", (n) => {
+    b.init(this.hostElement), this.hostElement.addEventListener("show-toast", (n) => {
       const { message: i, intent: r } = n.detail;
       this.addToast(i, r);
     });
@@ -30784,39 +31239,19 @@ const Zn = class {
     this.toasts = this.toasts.filter((i) => i.id !== n);
   }
   render() {
-    return e("div", { key: "8fc238fb8e0b463c286ca21f2525cae8fd738684", class: "toast-container" }, this.toasts.map((n) => e("div", { key: n.id }, e("eds-toast", { message: n.message, intent: n.intent, onClick: () => this.removeToast(n.id) }))));
+    return e("div", { key: "459148404380e386117387f42183e24a069b2de6", class: "toast-container" }, this.toasts.map((n) => e("div", { key: n.id }, e("eds-toast", { message: n.message, intent: n.intent, onClick: () => this.removeToast(n.id) }))));
   }
   get hostElement() {
-    return s(this);
-  }
-};
-Ln.style = Wn;
-const jn = "", On = jn, Rn = class {
-  constructor(n) {
-    d(this, n), this.applications = void 0;
-  }
-  getParsedApplications() {
-    try {
-      return JSON.parse(this.applications || "[]");
-    } catch {
-      return [];
-    }
-  }
-  calculateProgress(n) {
-    return Math.ceil(n / 9 * 100);
-  }
-  render() {
-    const n = this.getParsedApplications();
-    return n.length === 0 ? e("p", null, "No applications to display.") : e("div", { class: "container mx-auto px-4 py-8" }, e("table", { class: "table-auto w-full border-collapse border border-gray-200" }, e("thead", null, e("tr", { class: "bg-gray-100" }, e("th", { class: "border border-gray-300 px-4 py-2 text-left" }, "Application"), e("th", { class: "border border-gray-300 px-4 py-2 text-left" }, "Current TRL Stage"), e("th", { class: "border border-gray-300 px-4 py-2 text-left" }, "Progress"))), e("tbody", null, n.map((i) => e("tr", null, e("td", { class: "border border-gray-300 px-4 py-2" }, i.name), e("td", { class: "border border-gray-300 px-4 py-2" }, "TRL ", i.currentTrl), e("td", { class: "border border-gray-300 px-4 py-2" }, e("eds-progress-bar", { value: this.calculateProgress(i.currentTrl) })))))));
+    return d(this);
   }
 };
-Rn.style = On;
-const ee = class {
+Gn.style = Kn;
+const he = class {
   constructor(n) {
-    d(this, n), this.authStatusChanged = h(this, "authStatusChanged", 7), this.handleLogin = () => {
+    s(this, n), this.authStatusChanged = h(this, "authStatusChanged", 7), this.handleLogin = () => {
       this.authenticated || I();
     }, this.handleLogout = () => {
-      H(), this.authenticated = !1;
+      L(), this.authenticated = !1, this.user = null;
     }, this.keycloakUrl = void 0, this.keycloakRealm = void 0, this.keycloakClientId = void 0, this.user = null, this.authenticated = !1, this.serverAvailable = !1, this.username = "";
   }
   /**
@@ -30824,11 +31259,11 @@ const ee = class {
    * It initializes authentication by calling the `initAuth` method.
    */
   async componentWillLoad() {
-    if (this.serverAvailable = await A(`${this.keycloakUrl}/realms/${this.keycloakRealm}`), !this.serverAvailable) {
-      x.show("Keycloak server is unavailable.", "error");
+    if (!this.keycloakUrl || !this.keycloakRealm || !this.keycloakClientId) {
+      console.error("Keycloak configuration props are missing.");
       return;
     }
-    await this.initAuth();
+    this.serverAvailable = await H(`${this.keycloakUrl}/realms/${this.keycloakRealm}`), this.serverAvailable && await this.initAuth();
   }
   /**
    * Initializes the Keycloak authentication by configuring Keycloak with the provided props.
@@ -30842,24 +31277,24 @@ const ee = class {
         realm: this.keycloakRealm,
         clientId: this.keycloakClientId
       };
-      await W(n, !0), this.authenticated = L(), this.authenticated && (this.user = j()), this.authStatusChanged.emit({
+      await A(n, !0), W() && (this.user = j(), this.authenticated = !0), this.authStatusChanged.emit({
         authenticated: this.authenticated,
         user: this.user
-      }), x.show(`Welcome back, ${this.user.username}`, "success");
+      });
     } catch (n) {
       console.error("Keycloak initialization failed:", n);
     }
   }
   render() {
     var n;
-    return this.serverAvailable ? e("div", { class: "block" }, this.authenticated ? e("div", { class: "flex items-center" }, e("eds-dropdown", { label: `Welcome, ${(n = this.user) === null || n === void 0 ? void 0 : n.username}`, intent: "tertiary", "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: "chevron-down", class: "text-default" }, e("eds-user-modal", { user: JSON.stringify(this.user), onLogout: this.handleLogout.bind(this) }))) : e("eds-button", { label: "Login", intent: "primary", onClick: this.handleLogin.bind(this), class: "text-default" })) : null;
+    return this.serverAvailable ? e("div", { class: "block" }, this.authenticated ? e("div", { class: "flex items-center" }, e("eds-dropdown", { label: `Welcome, ${(n = this.user) === null || n === void 0 ? void 0 : n.username}`, intent: "tertiary", "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: "chevron-down", class: "text-default" }, e("eds-user-modal", { user: JSON.stringify(this.user), onLogout: this.handleLogout.bind(this) }))) : e("eds-button", { label: "Login", intent: "primary", onClick: this.handleLogin, "extra-class": "text-default" })) : null;
   }
   get hostEl() {
-    return s(this);
+    return d(this);
   }
-}, Tn = "", Un = Tn, Mn = class {
+}, be = class {
   constructor(n) {
-    d(this, n), this.user = void 0, this.links = void 0, this.onLogout = void 0, this.parsedUser = {}, this.parsedLinks = [];
+    s(this, n), this.user = void 0, this.links = void 0, this.onLogout = void 0, this.parsedUser = {}, this.parsedLinks = [];
   }
   parseUserProp(n) {
     this.parsedUser = typeof n == "string" ? JSON.parse(n) : n;
@@ -30879,7 +31314,7 @@ const ee = class {
   }
   render() {
     var n, i, r, l, t;
-    return e("div", { key: "70a619795f9f0e5ed619cce77c95b7661beb2c63", class: "min-w-[280px] p-8" }, e("div", { key: "01bfe265178130ca0398592087f2420f7509d018", class: "flex gap-x-16 pb-16 border-b-2 border-softer" }, e("eds-avatar", { key: "fcb0cc8aa22e11763c342bc4247343485f6ded90", "first-name": (n = this.parsedUser) === null || n === void 0 ? void 0 : n.firstname, "last-name": (i = this.parsedUser) === null || i === void 0 ? void 0 : i.lastname, initials: this.initials, color: "grey", rounded: !0, "initials-strong": !0 }), e("div", { key: "70d5c334cc98e9bdc22e0129a7c3c0b8d616cb0d", class: "max-w-full" }, ((r = this.parsedUser) === null || r === void 0 ? void 0 : r.fullname) && e("p", { key: "f30cccaa393dd1274d156640ed649893de3f2a0b", class: "f-ui-01 text-default w-full text-ellipsis" }, this.parsedUser.fullname), ((l = this.parsedUser) === null || l === void 0 ? void 0 : l.username) && e("p", { key: "5256c0bc39ca675b05d654c6d0ad72da948df58e", class: "f-ui-03-light text-light mt-4" }, this.parsedUser.username), ((t = this.parsedUser) === null || t === void 0 ? void 0 : t.email) && e("p", { key: "892a3d85052c62e11cd775c2d91c55f572df745b", class: "f-ui-03-light text-light mt-4" }, this.parsedUser.email))), e("div", { key: "98e1f6605a8e312a1e7c340d21e0240a1e980e04", class: "text-default mt-16 flex w-full flex-col gap-y-8" }, e("div", { key: "d4ed22d8dc1bf4d1fd7c64b388e53df2a1e48957", class: "border-softer mb-10 border-b-2 pb-16" }, e("eds-link", { key: "98d69c840a87b15d537442ca0c1f2890175532ff", label: "My EBRAINS", "aria-label": "My EBRAINS", url: "https://www.ebrains.eu/dashboard", intent: "primary", "extra-class": "w-full", external: !0 })), e("eds-link", { key: 1, label: "Account Settings", url: "https://iam.ebrains.eu/auth/realms/hbp/account/", intent: "secondary", icon: "arrow-diagonal", external: !0, "extra-class": "w-full" }), this.hasLogout && e("eds-link", { key: "8c3c341626f0ca5fd217aea8939d44c7cf3e0ed3", label: "Sign out", intent: "tertiary", "extra-class": "w-full justify-center", onClick: () => this.onLogout && this.onLogout() })));
+    return e("div", { key: "ad99ddd7c2710ef90840a5571ab6a161178cacc0", class: "min-w-[280px] p-8" }, e("div", { key: "d1da12f3a965fa7503fb3e00566db0796b803352", class: "flex gap-x-16 pb-16 border-b-2 border-softer" }, e("eds-avatar", { key: "c3d3ca80a9d23cc88f8ee6801b29995138c9b7c6", "first-name": (n = this.parsedUser) === null || n === void 0 ? void 0 : n.firstname, "last-name": (i = this.parsedUser) === null || i === void 0 ? void 0 : i.lastname, initials: this.initials, color: "grey", rounded: !0, "initials-strong": !0 }), e("div", { key: "4efe378b3a9ce76d35e642db150be13d0434db72", class: "max-w-full" }, ((r = this.parsedUser) === null || r === void 0 ? void 0 : r.fullname) && e("p", { key: "1068082a2894e3c3e3f77d1eea923f9c39d8766c", class: "f-ui-01 text-default w-full text-ellipsis" }, this.parsedUser.fullname), ((l = this.parsedUser) === null || l === void 0 ? void 0 : l.username) && e("p", { key: "b86e08b806a37c9957bca7f9ee268303e7ace134", class: "f-ui-03-light text-light mt-4" }, this.parsedUser.username), ((t = this.parsedUser) === null || t === void 0 ? void 0 : t.email) && e("p", { key: "b3514920e1eb4906cb7f7705bfbc986166e84946", class: "f-ui-03-light text-light mt-4" }, this.parsedUser.email))), e("div", { key: "61941fa0a19a19087da886a73d85d7e438d2c0b0", class: "text-default mt-16 flex w-full flex-col gap-y-8" }, e("div", { key: "5ad2be1763726c9d794b78a2593106fd8ba1dc7b", class: "border-softer mb-10 border-b-2 pb-16" }, e("eds-link", { key: "dbe3a9de56bf5ccc26426ddb831f2d1a27a0e6ff", label: "My EBRAINS", "aria-label": "My EBRAINS", url: "https://www.ebrains.eu/dashboard", intent: "primary", "extra-class": "w-full", external: !0 })), e("eds-link", { key: 1, label: "Account Settings", url: "https://iam.ebrains.eu/auth/realms/hbp/account/", intent: "secondary", icon: "arrow-diagonal", external: !0, "extra-class": "w-full" }), this.hasLogout && e("eds-link", { key: "642890827e2fa6735bc616e680dbda481c2c0053", label: "Sign out", intent: "tertiary", "extra-class": "w-full justify-center", onClick: () => this.onLogout && this.onLogout() })));
   }
   static get watchers() {
     return {
@@ -30888,34 +31323,38 @@ const ee = class {
     };
   }
 };
-Mn.style = Un;
 export {
-  U as eds_alert,
-  _ as eds_avatar,
-  P as eds_button,
-  $ as eds_card_desc,
-  G as eds_card_generic,
-  Q as eds_card_title,
-  en as eds_dropdown,
-  tn as eds_form,
-  sn as eds_header,
-  $n as eds_icon_wrapper,
-  gn as eds_img,
-  Xn as eds_input,
-  hn as eds_input_field,
-  Vn as eds_input_footer,
-  Gn as eds_input_label,
-  Jn as eds_input_range,
-  Kn as eds_input_search,
-  Qn as eds_input_select,
-  un as eds_link,
-  wn as eds_logo,
-  Sn as eds_progress_bar,
-  In as eds_tag,
-  Zn as eds_timeline,
-  ne as eds_toast,
-  Ln as eds_toast_manager,
-  Rn as eds_trl,
-  ee as eds_user,
-  Mn as eds_user_modal
+  M as eds_accordion,
+  _ as eds_alert,
+  $ as eds_avatar,
+  q as eds_block_break,
+  K as eds_breadcrumb,
+  Q as eds_button,
+  en as eds_card_desc,
+  tn as eds_card_generic,
+  dn as eds_card_title,
+  gn as eds_dropdown,
+  bn as eds_footer,
+  pn as eds_form,
+  le as eds_frame,
+  vn as eds_fullscreen_menu,
+  zn as eds_header,
+  te as eds_icon_wrapper,
+  Fn as eds_img,
+  oe as eds_input,
+  Ln as eds_input_field,
+  se as eds_input_footer,
+  de as eds_input_label,
+  ae as eds_input_range,
+  ce as eds_input_search,
+  ge as eds_input_select,
+  jn as eds_link,
+  Mn as eds_logo,
+  Un as eds_modal,
+  Yn as eds_social_networks,
+  qn as eds_tag,
+  xe as eds_toast,
+  Gn as eds_toast_manager,
+  he as eds_user,
+  be as eds_user_modal
 };