@ebrains/react 0.4.0-alpha.0 → 0.6.0-alpha.0

package/eds-social-networks.entry.esm.js

@@ -0,0 +1,74 @@
+import { r as registerInstance, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsSocialNetworksCss = "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}";
+const EdsSocialNetworksStyle0 = edsSocialNetworksCss;
+const EdsSocialNetworks = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Array of social network objects, each containing label, URL, and icon.
+     * These are used to render the social network links.
+     *
+     * @private
+     * @type {SocialNetworks[]}
+     */
+    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() {
+    return h("div", {
+      key: '9efc31261e88c70f9c808251124178d807140594'
+    }, h("p", {
+      key: '383101de2aaba05e1024f3ba86d788ad5d92173c',
+      class: "f-ui-02"
+    }, this.title), h("ul", {
+      key: 'e27243a4e7b8aab085c4ef091d67df57dba70664',
+      class: "mt-12 flex gap-4"
+    }, this.socialNetworks.map((network, index) => h("li", {
+      key: index
+    }, h("eds-link", {
+      "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm",
+      external: true,
+      "aria-label": network.label,
+      url: network.url,
+      icon: network.icon,
+      intent: "strong"
+    })))));
+  }
+};
+EdsSocialNetworks.style = EdsSocialNetworksStyle0;
+
+export { EdsSocialNetworks as eds_social_networks };

package/eds-steps.entry.esm.js

@@ -0,0 +1,98 @@
+import { r as registerInstance, c as createEvent, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsStepsCss = ".steps{position:sticky;margin-left:16px;margin-bottom:12px;border-left:1px solid var(--soft-color, #ddd);padding-left:24px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.text-default{color:var(--black)}.text-error{color:var(--red-700)}.text-extra-light{color:var(--grey-300)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.mb-28{margin-bottom:1.75rem}";
+const EdsStepsStyle0 = edsStepsCss;
+const EdsSteps = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.stepClick = createEvent(this, "stepClick", 7);
+    this.handleNext = () => {
+      if (this.activeStep < this.parsedSteps.length) {
+        this.activeStep = this.activeStep + 1;
+      }
+    };
+    this.handleBack = () => {
+      if (this.activeStep > 0) {
+        this.activeStep = this.activeStep - 1;
+      }
+    };
+    this.steps = [];
+    this.type = 'static';
+    this.activeStep = 0;
+  }
+  handleStepClick(index) {
+    this.stepClick.emit(index);
+    // In linear mode, update the active step on header click.
+    if (this.type === 'linear') {
+      this.activeStep = index;
+    }
+  }
+  /**
+   * Parse the JSON string into an array of steps.
+   */
+  get parsedSteps() {
+    if (typeof this.steps === 'string') {
+      try {
+        const stepsStr = this.steps;
+        return JSON.parse(stepsStr);
+      } catch (error) {
+        //console.error('Invalid steps JSON', error);
+        return [];
+      }
+    }
+    return this.steps;
+  }
+  /*private handleReset = () => {
+    this.activeStep = 0;
+  };*/
+  render() {
+    const steps = this.parsedSteps;
+    if (this.type === 'linear') {
+      return h("div", null, h("div", {
+        class: "steps"
+      }, steps.map((step, index) => h("div", {
+        class: "step mb-28",
+        key: index
+      }, h("h3", {
+        onClick: () => this.handleStepClick(index)
+      }, step.title), this.activeStep === index && h("div", {
+        class: "content"
+      }, h("div", {
+        class: "f-body-02 text-lighter my-16"
+      }, step.content), h("eds-button", {
+        label: index === steps.length - 1 ? 'Finish' : 'Continue',
+        intent: "primary",
+        class: "next-btn",
+        onClick: this.handleNext
+      }), h("eds-button", {
+        label: "Back",
+        intent: "ghostInverse",
+        onClick: this.handleBack,
+        disabled: index === 0,
+        "extra-class": index === 0 ? 'hidden' : 'ml-8 block'
+      }))))), this.activeStep === steps.length && h("div", {
+        class: "completed"
+      }, h("eds-alert", {
+        intent: "success",
+        message: "All steps completed - you're finished!"
+      })));
+    }
+    // Static mode: show all steps with their content, no navigation buttons.
+    return h("div", {
+      class: "steps"
+    }, steps.map((step, index) => h("div", {
+      class: "step mb-28",
+      key: index
+    }, h("h3", null, step.title), h("div", {
+      class: "content"
+    }, h("div", {
+      class: "f-body-02 text-lighter my-16"
+    }, step.content)))));
+  }
+};
+EdsSteps.style = EdsStepsStyle0;
+
+export { EdsSteps as eds_steps };

package/eds-svg-repository.entry.esm.js

@@ -308,7 +308,7 @@ const EdsSvgRepository = class {
       }
     };
     return h("eds-table", {
-      key: 'a1d4a1db6f0886a43513fc34707cdd6140ab685d',
+      key: 'a7d7fa426da72e174880a300202390c1016b74df',
       data: JSON.stringify(svgData),
       config: JSON.stringify(tableConfig),
       "rows-per-page": 10,

package/eds-switch.entry.esm.js

@@ -0,0 +1,58 @@
+import { r as registerInstance, c as createEvent, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsSwitchCss = ":host{display:inline-block}.switch-container{display:inline-flex;align-items:center}.switch-label{font-size:14px;margin:0 8px}button.switch{position:relative;display:inline-flex;align-items:center;width:50px;height:26px;border:none;border-radius:13px;background-color:#ccc;padding:0;cursor:pointer;transition:background-color 0.2s}button.switch:focus{outline:none;box-shadow:0 0 0 2px #007aff}button.switch.switch--checked{background-color:var(--green-500)}button.switch.switch--disabled{opacity:0.6;cursor:not-allowed}.switch-handle{position:absolute;width:22px;height:22px;border-radius:50%;background-color:#fff;top:2px;left:2px;transition:transform 0.2s}button.switch.switch--checked .switch-handle{transform:translateX(24px)}";
+const EdsSwitchStyle0 = edsSwitchCss;
+const EdsSwitch = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.change = createEvent(this, "change", 7);
+    this.toggleSwitch = () => {
+      if (this.disabled) {
+        return;
+      }
+      this.checked = !this.checked;
+      this.change.emit(this.checked);
+    };
+    this.checked = false;
+    this.disabled = false;
+    this.labelOn = '';
+    this.labelOff = '';
+  }
+  render() {
+    // Compute an accessible name based on state.
+    const accessibleLabel = this.labelOn || this.labelOff ? this.checked ? this.labelOn : this.labelOff : 'Toggle switch';
+    return h("div", {
+      key: 'd4c727cbb562921b2bcba269e84f25c359c7061b',
+      class: "switch-container"
+    }, this.labelOff && h("span", {
+      key: '90b18fff27bd21501466deb5879e5fe6ff607043',
+      class: "switch-label switch-label--off"
+    }, this.labelOff), h("button", {
+      key: '8675f5d9f972d3932710fa7f9b28f74f95a83003',
+      type: "button",
+      role: "switch",
+      "aria-checked": this.checked ? 'true' : 'false',
+      "aria-disabled": this.disabled ? 'true' : 'false',
+      "aria-label": accessibleLabel,
+      class: {
+        switch: true,
+        'switch--checked': this.checked,
+        'switch--disabled': this.disabled
+      },
+      onClick: this.toggleSwitch,
+      disabled: this.disabled
+    }, h("span", {
+      key: '26aa30a01b10419c1665b1fd58b5696a02d1504a',
+      class: "switch-handle"
+    })), this.labelOn && h("span", {
+      key: '3680d67555e9193a97e129c0639b411263e070a8',
+      class: "switch-label switch-label--on"
+    }, this.labelOn));
+  }
+};
+EdsSwitch.style = EdsSwitchStyle0;
+
+export { EdsSwitch as eds_switch };

package/eds-tab.entry.esm.js

@@ -28,7 +28,7 @@ const EdsTab = class {
   }
   render() {
     return h("a", {
-      key: 'ba4c995637d8d305249f018a0451775f45907716',
+      key: 'a55be2a07e554ab13a0d7e913710382d6126da57',
       "aria-label": this.label,
       "aria-current": this.active,
       class: this.tabCva({

package/eds-tabs-content.entry.esm.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index.esm2.js';
-import { s as sendAnalytics } from './color-bb472c37.esm.js';
+import { s as sendAnalytics } from './analytics-44b1416b.esm.js';
 import { c as cva } from './index-39c58238.esm.js';
 import 'react';
 import 'react/jsx-runtime';
@@ -108,13 +108,13 @@ const EdsTabsContent = class {
   }
   render() {
     return h("div", {
-      key: '7bc954d9251bd15b5e3a49d5c74b83805f802b07',
+      key: 'd94df79c55522088de5445587758a5eea028b313',
       class: "after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']"
     }, h("div", {
-      key: '1bfda380604f1eae1cc5be147a5e3e6b537e0396',
+      key: 'e7d01a2e6b424c25749c0d70305fb1c8c55bef74',
       class: "scroller-x max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28"
     }, h("nav", {
-      key: 'b2ed26b52fd629ec99b01c7dc8e612eae4f3886d',
+      key: 'ef8ff8a02e570dfcf8143997ace793a65917e6ca',
       ref: el => this.tabContainer = el,
       class: "inline-flex",
       "aria-label": this.navAriaLabel
@@ -129,7 +129,7 @@ const EdsTabsContent = class {
         onClick: () => this.handleTabClick(index, tab.label)
       }));
     })), h("slot", {
-      key: '5072b877786a23358d540d6d242d5fbdb3c63d7f'
+      key: '8f014081c3bc2a8a3013aea3aff32690d6f71c85'
     })));
   }
   get el() {

package/eds-tabs.entry.esm.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index.esm2.js';
-import { s as sendAnalytics } from './color-bb472c37.esm.js';
+import { s as sendAnalytics } from './analytics-44b1416b.esm.js';
 import { c as cva } from './index-39c58238.esm.js';
 import 'react';
 import 'react/jsx-runtime';
@@ -119,14 +119,14 @@ const EdsTabs = class {
   }
   render() {
     return h("div", {
-      key: '540bb667084b36ae2151ec39ef6b54a9ac6a4c4a',
+      key: '5a0c7dbdd059b2a1efdf31e91725dd1d49c88bd4',
       id: `${this.id}`,
       class: "after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']"
     }, h("div", {
-      key: 'f0266d39c943b82725ded757cce0b35fb85fa874',
+      key: '74bb7e66b88d845359caf285430fca079abfab03',
       class: "scroller-x overflow-x-auto max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28"
     }, h("nav", {
-      key: 'fcedf94e6f6c14635291d9c8e6d672efc8055433',
+      key: '71ca3465da106b2d1ed59eca28eabfe60a1ac0fc',
       ref: el => this.tabContainer = el,
       class: "inline-flex",
       "aria-label": this.navAriaLabel

package/eds-timeline.entry.esm.js

@@ -61,16 +61,16 @@ const EdsTimeline = class {
   }
   render() {
     return h("div", {
-      key: '6016cb89d3fe3250482b42d8a0bf500fe18cee5d',
+      key: '1ba4a93ce518b52f5821af75ae0587c44db92c6d',
       class: "max-w-sidebar mx-auto px-4 py-8"
     }, h("div", {
-      key: '994cc7af75950a0f09d108804efff796602aeb93',
+      key: '3e019420ddd4bfab7800567c7130299ea47205c6',
       class: "relative"
     }, h("div", {
-      key: '77b15ae60feb380ea20c6466b49d0efd5d8f5180',
+      key: 'df99ce8fb08232c46449d7485dd7cffcd04b64d6',
       class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0"
     }), h("div", {
-      key: '60bb384ce4eedd7bfc3b15a7a637e2b89318d619',
+      key: '1b52694d2e8c3656910c02680aa8ce2e78b02997',
       class: "space-y-16"
     }, this.parsedEvents.map((event, index) => h("div", {
       class: "relative flex"

package/eds-tooltip.entry.esm.js

@@ -1,9 +1,8 @@
 import { r as registerInstance, h, g as getElement } from './index.esm2.js';
-import { s as sendAnalytics } from './color-bb472c37.esm.js';
+import { s as sendAnalytics } from './analytics-44b1416b.esm.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
-import './index-39c58238.esm.js';
 
 const edsTooltipCss = ".relative{position:relative}.absolute{position:absolute}.rounded-sm{border-radius:8px}.rounded-xs{border-radius:4px}.bg-stronger{background-color:var(--grey-900)}.bg-strongest{background-color:var(--black)}.text-inverse{color:var(--white)}.text-default{color:var(--black)}.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)}.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)}.pointer-events-none{pointer-events:none}.-top-8{top:-0.5rem}.left-1\\/2{left:50%}.z-10{z-index:10}.block{display:block}.-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))}.-translate-y-full{--tw-translate-y:-100%;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))}.whitespace-nowrap{white-space:nowrap}.py-2{padding-top:0.125rem;padding-bottom:0.125rem}.px-4{padding-left:0.25rem;padding-right:0.25rem}.p-4{padding:0.25rem}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.p-12{padding:0.75rem}.p-16{padding:1rem}.p-20{padding:1.25rem}";
 const EdsTooltipStyle0 = edsTooltipCss;
@@ -102,12 +101,12 @@ const EdsTooltip = class {
   }
   render() {
     return h("div", {
-      key: '673ab0ee31378410f9c83bb5fd37b27d00a7b018',
+      key: '1635b034319df4827a62ed58267d81db277ad19d',
       class: "relative"
     }, h("slot", {
-      key: '0c0138dfdf9aafecc1e0e925c84d4b0ca957f82d'
+      key: '6cdfd0f6d456b984464c5091a2829cdba69ba895'
     }), this.isVisible && this.isPositioned && this.content && h("div", {
-      key: '798d01cf631f2e5b3af9d9bb11a847041a6ee2ba',
+      key: '7e736731dc700e0273fdfe15202426d2db086aef',
       class: "rounded-xs bg-strongest text-inverse f-ui-03-light pointer-events-none absolute z-10 whitespace-nowrap p-6",
       role: "tooltip",
       style: {

package/eds-trl.entry.esm.js

@@ -51,10 +51,10 @@ const EdsTrl = class {
       }
     };
     return h("div", {
-      key: '868a7c45e6495d7a2ed8a4ad2974ac31f74535a6',
+      key: 'a329a001d6275fcfe7df9bddf83bd289effe4151',
       class: "container mx-auto px-4 py-8"
     }, h("eds-table", {
-      key: 'ed3e2a949d0e1d66a5e80018fa5fcac9bbe64620',
+      key: '93aebfd840b16416789b15eec0daa16d9126aa9f',
       data: JSON.stringify(tableData),
       config: JSON.stringify(tableConfig),
       "rows-per-page": "2",

package/eds-user.entry.esm.js

@@ -0,0 +1,118 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index.esm2.js';
+import { l as login, a as logout, c as checkServerAvailability, i as initKeycloak, b as isAuthenticated, g as getUser } from './keycloak-d502ec16.esm.js';
+import { t as toast } from './toastManager-d9eee791.esm.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const EdsUser = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.authStatusChanged = createEvent(this, "authStatusChanged", 7);
+    /**
+     * Handles user login by invoking the Keycloak `login` function.
+     * Only triggers login if the user is not already authenticated.
+     */
+    this.handleLogin = () => {
+      if (!this.authenticated) {
+        try {
+          login();
+        } catch (error) {
+          toast.show(error.message, 'error');
+        }
+      }
+    };
+    /**
+     * Handles user logout by invoking the Keycloak `logout` function.
+     * Resets the `authenticated` state to `false` after logout.
+     */
+    this.handleLogout = async () => {
+      try {
+        await logout();
+      } catch (error) {
+        toast.show(error.message, 'error');
+      }
+      this.authenticated = false;
+      this.user = null;
+    };
+    this.keycloakUrl = undefined;
+    this.keycloakRealm = undefined;
+    this.keycloakClientId = undefined;
+    this.user = null;
+    this.authenticated = false;
+    this.username = '';
+    this.serverAvailable = false;
+  }
+  /**
+   * Lifecycle method that runs when the component is about to load.
+   * It initializes authentication by calling the `initAuth` method.
+   */
+  async componentWillLoad() {
+    // Check if required props are provided (optional check)
+    if (!this.keycloakUrl || !this.keycloakRealm || !this.keycloakClientId) {
+      // eslint-disable-next-line
+      console.error('Keycloak configuration props are missing.');
+      return;
+    }
+    this.serverAvailable = await checkServerAvailability(`${this.keycloakUrl}/realms/${this.keycloakRealm}`);
+    if (!this.serverAvailable) {
+      toast.show('Keycloak server is unavailable.', 'error');
+      return; // Do not proceed further
+    }
+    await this.initAuth();
+  }
+  /**
+   * Initializes the Keycloak authentication by configuring Keycloak with the provided props.
+   * Sets the `authenticated` state and `user` data if the user is authenticated.
+   * Emits `authStatusChanged` event with the authentication status.
+   */
+  async initAuth() {
+    try {
+      await initKeycloak({
+        url: this.keycloakUrl,
+        realm: this.keycloakRealm,
+        clientId: this.keycloakClientId
+      }, true);
+      if (isAuthenticated()) {
+        this.user = getUser();
+        this.authenticated = true;
+        this.authStatusChanged.emit({
+          authenticated: this.authenticated,
+          user: this.user
+        }); // Emit auth status change
+      }
+    } catch (error) {
+      toast.show(error.message, 'error');
+    }
+  }
+  render() {
+    var _a;
+    return h("div", {
+      key: '8fe0aaf06ed421d8ca6e512247b4d15b092c895f',
+      class: "block"
+    }, !this.authenticated ? h("eds-button", {
+      label: "Login",
+      intent: "primary",
+      onClick: this.handleLogin,
+      "extra-class": "text-default"
+    }) : h("div", {
+      class: "flex items-center"
+    }, h("eds-dropdown", {
+      label: `Welcome, ${(_a = this.user) === null || _a === void 0 ? void 0 : _a.username}`,
+      intent: "tertiary",
+      "aria-label": "User Menu",
+      "dropdown-pos": "right",
+      "dropdown-offset": "false",
+      icon: "chevron-down",
+      class: "text-default"
+    }, h("eds-user-modal", {
+      user: JSON.stringify(this.user),
+      onLogout: this.handleLogout.bind(this)
+    }))));
+  }
+  get hostEl() {
+    return getElement(this);
+  }
+};
+
+export { EdsUser as eds_user };

package/eds-vertical-stepper.entry.esm.js

@@ -0,0 +1,81 @@
+import { r as registerInstance, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsVerticalStepperCss = ":host{display:block}.stepper-container{margin:0 auto}.stepper{position:sticky;margin-left:16px;margin-bottom:12px;border-left:1px solid var(--soft-color, #ddd);padding-left:24px;counter-reset:step}.step{margin-bottom:24px}.step-label{counter-increment:step;font-size:1.25rem;font-weight:600;position:relative;margin-top:1em;margin-bottom:1em}.step-label::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.optional{font-size:0.8rem;color:#888;margin-left:8px}.step-content{margin-top:8px}.step-buttons{margin-top:12px}.step-buttons button{margin-right:8px;padding:6px 12px;font-size:0.875rem}.completed{padding:16px;border:1px solid #ddd;margin-top:16px;text-align:center}";
+const EdsVerticalStepperStyle0 = edsVerticalStepperCss;
+const EdsVerticalStepper = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.handleNext = () => {
+      if (this.activeStep < this.parsedSteps.length) {
+        this.activeStep = this.activeStep + 1;
+      }
+    };
+    this.handleBack = () => {
+      if (this.activeStep > 0) {
+        this.activeStep = this.activeStep - 1;
+      }
+    };
+    this.handleReset = () => {
+      this.activeStep = 0;
+    };
+    this.steps = '[]';
+    this.activeStep = 0;
+  }
+  get parsedSteps() {
+    try {
+      return JSON.parse(this.steps);
+    } catch (error) {
+      //console.error('Invalid steps JSON', error);
+      return [];
+    }
+  }
+  render() {
+    const steps = this.parsedSteps;
+    return h("div", {
+      key: '08fa2f85c49dbe217b2f9d068bee486e432f5315',
+      class: "stepper-container"
+    }, h("div", {
+      key: '6f7e0a0ccaa2882794a6be0216201d1bf924e2b2',
+      class: "stepper"
+    }, steps.map((step, index) => h("div", {
+      class: "step",
+      key: index
+    }, h("div", {
+      class: "step-label"
+    }, h("span", null, step.label), index === steps.length - 1 && h("span", {
+      class: "f-ui-03 text-lightest ml-4"
+    }, "(Last step)")), this.activeStep === index && h("div", {
+      class: "step-content"
+    }, h("p", null, step.description), h("div", {
+      class: "step-buttons"
+    }, h("eds-button", {
+      label: index === steps.length - 1 ? 'Finish' : 'Continue',
+      class: "next-btn",
+      onClick: this.handleNext
+    }), h("eds-button", {
+      label: "Back",
+      intent: "ghostInverse",
+      onClick: this.handleBack,
+      disabled: index === 0,
+      "extra-class": index === 0 ? 'hidden' : 'ml-8 block'
+    })))))), this.activeStep === steps.length && h("div", {
+      key: '8a5ebfed582b25d828758e1762a063df6c745093',
+      class: ""
+    }, h("eds-alert", {
+      key: 'a142fb50b8df533dd97f770aeaa453f2379ea7cb',
+      intent: "success",
+      message: "All steps completed - you're finished!"
+    }), h("eds-button", {
+      key: '5cfba059c9a152f179e7c31fa5d7a222c00defe2',
+      label: "Start again",
+      onClick: this.handleReset,
+      "extra-class": "mt-4"
+    })));
+  }
+};
+EdsVerticalStepper.style = EdsVerticalStepperStyle0;
+
+export { EdsVerticalStepper as eds_vertical_stepper };

package/incorrect-use-of-colors.entry.esm.js

@@ -29,20 +29,20 @@ const IncorrectUseOfColors = class {
   }
   render() {
     return h("div", {
-      key: '2e660e9a788e46e68d6695ae8aa475bbb1ca395e',
+      key: 'cb22d37293f3b3b5fe3772cfe83234a5d81e1094',
       class: "container"
     }, h("eds-alert", {
-      key: '1dc4552a33d88055a3a0c33eeb18c53a8379039a',
+      key: '9aa7a510440c32f92242b3e09f9e818cd2509b06',
       message: "Note that, each of the four colour tones cannot be mixed in the same composition.",
       intent: "error"
     }), h("div", {
-      key: 'fd6bf7f0205422b1bd3ceb3f8374d5a9a73aaca0',
+      key: '4d22cba75b7dd45a5a9a7d2b2eba5404875f1403',
       class: "flex"
     }, h("div", {
-      key: 'dae745447f5e9792136f059b1dcfc868e473dfd5',
+      key: 'c7f08b3e4ef2692c545edd4185a005ddd6526a23',
       class: "w-full"
     }, h("ul", {
-      key: 'daeec7514f4027ec3f688f05fb4f1e027b846a81',
+      key: '28561abcdc93a4899a5d7481fdd47c439f734ff6',
       class: "gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, primary.map(color => h("li", {
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
@@ -52,10 +52,10 @@ const IncorrectUseOfColors = class {
         backgroundColor: color.background
       }
     }))))), h("div", {
-      key: '1ca202afa9384e78e3ed9c0674e06c51184d3a5a',
+      key: 'f8836d4805fdd416ee75712f749d5cee3f612559',
       class: "w-full"
     }, h("ul", {
-      key: '7bdef2e7d64f3c5553193d127bac69ee89a93686',
+      key: '5842acd55d3a827355f2814c709d057676fb5d0f',
       class: "gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, incorrect.map(color => h("li", {
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"

package/index.esm.js

@@ -1,4 +1,4 @@
-export { E as EdsAccordion, a as EdsAlert, b as EdsAvatar, d as EdsBlockBreak, e as EdsBreadcrumb, f as EdsButton, i as EdsCardDesc, j as EdsCardGeneric, k as EdsCardSection, l as EdsCodeBlock, m as EdsDropdown, n as EdsFooter, o as EdsForm, p as EdsFrame, q as EdsFullscreenMenu, s as EdsHeader, t as EdsIconWrapper, u as EdsImg, v as EdsInputField, w as EdsLink, x as EdsLogin, y as EdsLogo, z as EdsMatomoNotice, A as EdsModal, B as EdsPagination, C as EdsProgressBar, D as EdsRating, F as EdsSectionCore, G as EdsSectionHeading, H as EdsSocialNetworks, I as EdsTable, J as EdsTabs, K as EdsTag, L as EdsTimeline, M as EdsToast, N as EdsToastManager, O as EdsTooltip, P as EdsUser } from './index.esm2.js';
+export { E as EdsAccordion, a as EdsAlert, b as EdsAvatar, d as EdsBlockBreak, e as EdsBreadcrumb, f as EdsButton, i as EdsCardDesc, j as EdsCardGeneric, k as EdsCardSection, l as EdsCodeBlock, m as EdsDropdown, n as EdsFooter, o as EdsForm, p as EdsFrame, q as EdsFullscreenMenu, s as EdsHeader, t as EdsIconWrapper, u as EdsImg, v as EdsInputField, w as EdsLink, x as EdsLogin, y as EdsLogo, z as EdsMatomoNotice, A as EdsModal, B as EdsPagination, C as EdsProgressBar, D as EdsRating, F as EdsSectionCore, G as EdsSectionHeading, H as EdsSocialNetworks, I as EdsSteps, J as EdsSwitch, K as EdsTable, L as EdsTabs, M as EdsTag, N as EdsTimeline, O as EdsToast, P as EdsToastManager, Q as EdsTooltip, R as EdsUser, S as EdsVerticalStepper } from './index.esm2.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';