@ebrains/react 0.3.0-alpha.0 → 0.5.0-alpha.0

package/{eds-card-desc_3.entry.esm.js → eds-avatar_4.entry.esm.js}

@@ -1,9 +1,69 @@
 import { r as registerInstance, h } from './index.esm2.js';
+import { g as gradientBGColorVariants } from './color-2554aad6.esm.js';
 import { c as cva } from './index-39c58238.esm.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
 
+const edsAvatarCss = ".border-inside {\n    position: relative;\n\n    &::after {\n        pointer-events: none;\n    }\n\n    &::after {\n        position: absolute;\n    }\n\n    &::after {\n        inset: 0rem;\n    }\n\n    &::after {\n        z-index: 1;\n    }\n\n    &::after {\n        border-radius: 8px;\n    }\n\n    &::after {\n        border-width: 1px;\n    }\n\n    &::after {\n        border-width: 2px;\n    }\n\n    &::after {\n        border: 2px solid rgba(0, 0, 0, .1);\n    }\n\n    &::after {\n        content: '';\n    }\n}\n\n.border-inside-pill {\n    &::after {\n        border-radius: 100px;\n    }\n\n    &::after {\n        content: '';\n    }\n}\n\n.border-inside-inverse {\n    &::after {\n        border: 2px solid rgba(255, 255, 255, 0.3);\n    }\n\n    &::after {\n        content: '';\n    }\n}\n\n.aspect-1x1 {\n    aspect-ratio: 1/1;\n}\n\n.flex {\n    display: flex;\n}\n\n.inline-flex {\n    display: inline-flex;\n}\n\n.items-center {\n    align-items: center;\n}\n\n.justify-center {\n    justify-content: center;\n}\n\n.overflow-hidden {\n    overflow: hidden;\n}\n\n.px-4 {\n    padding-left: 0.25rem;\n    padding-right: 0.25rem;\n}\n\n.rounded-pill {\n    border-radius: 100px;\n}\n\n.rounded-sm {\n    border-radius: 8px;\n}\n\n.rounded-xs {\n    border-radius: 4px;\n}\n\n\n.bg-dark {\n    background-color: var(--grey-300);\n}\n\n.bg-darker {\n    background-color: var(--grey-400);\n}\n\n.bg-stronger {\n    background-color: var(--grey-900);\n}\n\n.bg-strongest {\n    background-color: var(--black);\n}\n\n.text-accent {\n    color: var(--green-500);\n}\n\n.text-default {\n    color: var(--black);\n}\n\n.\\!no-underline {\n    text-decoration-line: none !important;\n}\n\n.f-ui-01 {\n    font-family: var(--f-ui-01-fontFamily);\n    font-weight: var(--f-ui-01-fontWeight);\n    font-size: var(--f-ui-01-fontSize);\n    line-height: var(--f-ui-01-lineHeight);\n    letter-spacing: var(--f-ui-01-letterSpacing);\n}\n\n.w-32 {\n    width: 2rem;\n}\n\n.w-44 {\n    width: 2.75rem;\n}\n\n.w-\\[54px\\] {\n    width: 54px;\n}";
+const EdsAvatarStyle0 = edsAvatarCss;
+const EdsAvatar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.firstName = 'User';
+    this.lastName = 'Avatar';
+    this.picture = undefined;
+    this.initials = undefined;
+    this.color = undefined;
+    this.rounded = false;
+    this.initialsStrong = false;
+  }
+  /**
+   * Computed initials based on the provided `initials` prop or derived from `firstName` and `lastName`.
+   * @returns {string | undefined} Initials for display in the avatar.
+   */
+  get computedInitials() {
+    if (this.initials) {
+      return (this.initials.match(/.{1,3}/g) || [])[0] || '';
+    } else if (this.firstName && this.lastName) {
+      return `${this.firstName.charAt(0)}${this.lastName.charAt(0)}`.toUpperCase();
+    }
+    return undefined;
+  }
+  /**
+   * Computes the CSS classes for the avatar container based on provided props like `rounded`, `color`, and `picture`.
+   * @returns {string} List of CSS classes to apply to the avatar container.
+   */
+  get containerClasses() {
+    return ['border-inside', 'aspect-1x1', 'flex', 'items-center', 'justify-center', 'overflow-hidden', this.picture ? '' : 'px-4', this.rounded ? 'rounded-pill border-inside-pill w-32' : 'w-[54px] rounded-sm', this.color ? 'border-inside-inverse' : '', this.color === 'grey' ? 'bg-dark' : this.color && !this.picture ? gradientBGColorVariants({
+      color: this.color,
+      direction: 'top',
+      pseudo: false
+    }) : !this.picture ? 'bg-strongest text-accent' : ''].join(' ');
+  }
+  /**
+   * Renders the avatar component. Displays either an image using `eds-img` or initials depending on whether `picture` or `computedInitials` is set.
+   * @returns {JSX.Element} The rendered avatar component.
+   */
+  render() {
+    return h("div", {
+      key: '47ee5ffd12c0f90c536dea77b3ffa9120d67f37f',
+      class: this.containerClasses
+    }, this.picture ? h("eds-img", {
+      src: this.picture,
+      width: 54,
+      height: 54,
+      sizes: "120px",
+      alt: `${this.firstName} ${this.lastName}`,
+      lazyload: true,
+      withBg: true
+    }) : h("abbr", {
+      title: this.computedInitials || `${this.firstName} ${this.lastName}`,
+      class: "!no-underline f-ui-01"
+    }, this.computedInitials));
+  }
+};
+EdsAvatar.style = EdsAvatarStyle0;
 const edsCardDescCss = ".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}";
 const EdsCardDescStyle0 = edsCardDescCss;
 const EdsCardDesc = class {
@@ -19,10 +79,10 @@ const EdsCardDesc = class {
   }
   render() {
     return h("p", {
-      key: '017c115ebff999c74cff1eaeb5c63f97e0f6554d',
+      key: '71495cbd6ef4e7d66c4c22a37f8120624ecf57fb',
       class: `text-light ${this.descClass}`
     }, h("span", {
-      key: 'f87b9b3d593e417ef351882f426d24c0b206ccab',
+      key: '8708178f7b48cc1f31aac749f50fe92b72c39ab8',
       class: this.getTruncateClass()
     }, this.description));
   }
@@ -71,10 +131,10 @@ const EdsCardTitle = class {
     //const Tag = this.getTag();
     const Heading = this.headingLevel;
     return h(Heading, {
-      key: '8aee3bcb0e04508dd21a03ea0f695e040f37c767',
+      key: 'bb97dc6dd53adda14ef251b2ec32952791438986',
       class: this.getTitleClass()
     }, h("a", {
-      key: 'c5fa27fe86037ed6b039c156aecdf1acc9c7c8bc',
+      key: '37b6ac0668257d27fb3f03a6225a2d48e1fd1f79',
       class: "break-words after:absolute after:inset-0 after:z-10 after:content-[''] focus:outline-none",
       href: this.url,
       target: this.externalLink ? '_blank' : undefined,
@@ -108,6 +168,7 @@ const EdsTag = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.label = undefined;
+    this.ariaLabel = '';
     this.intent = 'default';
   }
   /**
@@ -115,15 +176,18 @@ const EdsTag = class {
    * @returns The rendered HTML for the tag component with the applied styles and label.
    */
   render() {
+    var _a;
     const classes = tagStyles({
       intent: this.intent
     });
+    const accessibleLabel = ((_a = this.ariaLabel) === null || _a === void 0 ? void 0 : _a.length) ? this.ariaLabel : this.label;
     return h("span", {
-      key: '546bd7eb2c78760edc12cd7bb3ede5f6ab9099f3',
-      class: classes
+      key: '6a517f42aeb641c95d96ecd6c3090a317a3195c6',
+      class: classes,
+      "aria-label": accessibleLabel
     }, this.label);
   }
 };
 EdsTag.style = EdsTagStyle0;
 
-export { EdsCardDesc as eds_card_desc, EdsCardTitle as eds_card_title, EdsTag as eds_tag };
+export { EdsAvatar as eds_avatar, EdsCardDesc as eds_card_desc, EdsCardTitle as eds_card_title, EdsTag as eds_tag };

package/eds-card-generic.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-0ba8ed56.esm.js';
+import { s as sendAnalytics } from './analytics-1cde8e4a.esm.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
-import './index-39c58238.esm.js';
 
 const edsCardGenericCss = ".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}";
 const EdsCardGenericStyle0 = edsCardGenericCss;
@@ -18,7 +17,7 @@ const EdsCardGeneric = class {
     this.avatar = undefined;
     this.shortAbbreviation = undefined;
     this.headingLevel = 'h3';
-    this.tags = '';
+    this.tags = [];
     this.tiny = false;
     this.bg = true;
     this.withHover = true;
@@ -86,18 +85,18 @@ const EdsCardGeneric = class {
   }
   render() {
     return h("article", {
-      key: '17d1f00f232a4436756fa3846684bbae8c716036',
+      key: 'dcb7cea87bfb52f8886f7ee3dbc3484d615bc00c',
       class: this.articleClasses(),
       onClick: () => this.handleClick()
     }, h("eds-card-title", {
-      key: 'd99ee1716c4e308a3ea446f0f7cedfaeac30f2ed',
+      key: '94dd6ff2679ce9ac4d25ec921cd1162b1584e4fd',
       "heading-level": this.headingLevel,
       titleClass: this.image ? 'f-ui-01' : undefined,
       "card-title": this.cardTitle,
       url: this.url,
       hierarchy: this.hierarchy
     }), this.description && h("eds-card-desc", {
-      key: 'c5bdc76e68a8d660609630aa8184ec3a9508ab61',
+      key: '433c4fe3a518153d89d48af54455286fa415a688',
       class: "mt-8",
       "truncate-lines": "3",
       description: this.description
@@ -108,7 +107,7 @@ const EdsCardGeneric = class {
       picture: this.avatar,
       initials: this.shortAbbreviation
     }) : null, h("div", {
-      key: 'fa993e3c60d357eb0d9a63e612bdd2bf026e7a85',
+      key: '97b75afb4b8de1183d4b212054ff556ba3db8fcb',
       class: "flex flex-wrap gap-y-4"
     }, this.parsedTags.map((tag, index) => h("eds-tag", {
       key: index,

package/eds-card-project.entry.esm.js

@@ -1,5 +1,6 @@
 import { r as registerInstance, h, g as getElement } from './index.esm2.js';
-import { s as sendAnalytics, g as gradientBGColorVariants } from './color-0ba8ed56.esm.js';
+import { s as sendAnalytics } from './analytics-1cde8e4a.esm.js';
+import { g as gradientBGColorVariants } from './color-2554aad6.esm.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
@@ -49,38 +50,38 @@ const EdsCardProject = class {
     }) : 'bg-default', this.bgOnHover && this.color ? 'effect-background bg-default focus-within:bg-transparent hover:bg-transparent' : 'effect-background hover:bg-default', this.vertical ? 'flex-col gap-y-16' : 'flex-col gap-x-16 gap-y-12 lg:flex-row'].join(' ');
     const imageClasses = this.vertical ? '' : 'max-w-120 @md:max-w-192 order-first w-full lg:order-last';
     return h("article", {
-      key: '6af49754300ded8748ac3f40175e262480054969',
+      key: '98c5dbd033ec05d08965559e00f32d9fe18698ef',
       class: cardClasses,
       onClick: event => this.handleClick(event)
     }, h("div", {
-      key: '91e8501312957c44d9dc075f2ec3a9e5a5d425cb',
+      key: 'e083c43e38c3c24fcd996a90267f7cd92d3651b3',
       class: `flex grow flex-col ${this.vertical ? 'min-h-156' : ''}`
     }, h("div", {
-      key: '44e3cf2d67255bb5669b6c721741ed060ba599e7',
+      key: '37de1e46023b533fd8595a3077c4e68c11fb01af',
       class: "lg:max-w-[720px]"
     }, h("eds-card-title", {
-      key: '0cf1d124b975e4d7223bab58db0d5861d348ceb2',
+      key: 'ee31ae2804d2c17c82e8f4c0c3269ac8254331df',
       "heading-level": this.headingLevel,
       titleClass: this.image ? 'f-ui-01' : undefined,
       "card-title": this.titleProject,
       url: this.url
     }), this.editorialTitle && h("span", {
-      key: '85e1158691ae876bc0f3c6d0c5557f394ae935cb',
+      key: 'c6f74ba9b5b522f713e25d3339f541efa68cdddd',
       class: `block ${this.vertical ? 'f-ui-02' : 'mt-4 f-heading-06'}`
     }, this.editorialTitle)), this.categoryTitle && h("div", {
-      key: '9ffdc9f14709600b623c3a5f878b2700864ced79',
+      key: 'ab18e55046777cf4a4f58ebd057641db9b9e0328',
       class: "mt-auto flex items-center gap-x-12 pt-12"
     }, ((_a = this.categoryTitle) === null || _a === void 0 ? void 0 : _a.length) && h("eds-tag", {
-      key: 'ecc5e55430df355c13420add9969855d1d54c27f',
+      key: '3714ee86a74dce7f33a8f953fd726db349ba9271',
       label: this.categoryTitle
     }))), this.parsedImage && h("div", {
-      key: '97de7a06a13d9843cb18fe4eb19303f436e2ce16',
+      key: '2818d15f7ab671b7b2dfb34ec3085b390150f38d',
       class: imageClasses
     }, h("div", {
-      key: '532d3c8252316a68976b4587c3d5b63167c0c598',
+      key: '5166feef3674631298f699449b956655f38f0db9',
       class: "aspect-1x1 w-full"
     }, h("eds-img", Object.assign({
-      key: '37ee3dbbc99ec8c9139b0a89f9c725768eac5f6d',
+      key: '86555a43491da5b2aa3b287e539e603a2c2adaf3',
       sizes: this.vertical ? this.parsedImage.sizes || '' : '192px'
     }, this.parsedImage)))));
   }

package/eds-card-section.entry.esm.js

@@ -8,7 +8,7 @@ const EdsCardSectionStyle0 = edsCardSectionCss;
 const EdsCardSection = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.cards = undefined;
+    this.cards = [];
     this.cols = 4;
   }
   /**
@@ -29,7 +29,7 @@ const EdsCardSection = class {
         return JSON.parse(this.cards);
       } catch (e) {
         // eslint-disable-next-line
-        console.error('Error parsing links prop:', e);
+        console.error('Error parsing cards prop:', e);
         return [];
       }
     }
@@ -44,10 +44,10 @@ const EdsCardSection = class {
    */
   render() {
     return h("section", {
-      key: 'c02b0e71ae4658e2f568e9428a9c61455aeb8ccd',
+      key: '1f221e1ec7c3cdd0e3aed18f6f930c2c5456c64b',
       class: "w-full"
     }, h("ul", {
-      key: '7f5d952d5cc5044c2ec23ca6b6b627901c40ab81',
+      key: '36f984994bb2dc247475c20422f7e6e7da7d058d',
       class: "grid-layout gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, this.parsedCards.map(card => h("li", {
       class: `grid-col-span-12 md:grid-col-span-${this.cols} flex flex-col`

package/eds-card-tags.entry.esm.js

@@ -13,7 +13,7 @@ const EdsCardTags = class {
   }
   render() {
     return h("div", {
-      key: 'b201dc6df5e809d828a055fb5f01fe798e228361',
+      key: '272d53abb9be9086881cb2f8e99f7fb7aae1bb59',
       class: "flex flex-wrap gap-y-4"
     }, this.tags.map((tag, index) => h("eds-tag", {
       key: index,

package/eds-card-tool.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-0ba8ed56.esm.js';
+import { s as sendAnalytics } from './analytics-1cde8e4a.esm.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
-import './index-39c58238.esm.js';
 
 const edsCardToolCss = ".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}";
 const EdsCardToolStyle0 = edsCardToolCss;
@@ -63,11 +62,11 @@ const EdsCardTool = class {
   }
   render() {
     return h("article", {
-      key: 'b46c0464688e45ab29f5b58b6cd2e22ed28e1034',
+      key: 'da61b384e966b148cd1f77eec59671bc4d92e259',
       class: `${this.el.tagName.toLowerCase()} ${this.articleClasses()}`,
       onClick: () => this.handleClick()
     }, h("eds-card-title", {
-      key: 'a4da791280db14754b445b1a52e33cc9a25f765e',
+      key: '00702d032bc25f52b2a2c98255ceb60a1d314f4d',
       "heading-level": this.headingLevel,
       titleClass: this.image ? 'f-ui-01' : undefined,
       "card-title": this.cardTitle,
@@ -75,7 +74,7 @@ const EdsCardTool = class {
       "external-link": this.external,
       hierarchy: this.hierarchy
     }), this.description && h("eds-card-desc", {
-      key: '86f7c6c80b83f244ba7d07d820d5793e1dda2933',
+      key: 'd2b135ed422fb64f142af71330dc666e2f0c2b1f',
       class: "mt-8",
       "truncate-lines": "3",
       description: this.description
@@ -89,7 +88,7 @@ const EdsCardTool = class {
       picture: this.avatar,
       initials: this.shortAbbreviation
     }) : null, h("div", {
-      key: '46307b57160f908aa7066b2a636c4db38e0e7a8e',
+      key: '54111e90175754cb0c1f2eb339e86926914ca0e7',
       class: "flex flex-wrap gap-y-4"
     }, this.parsedTags.map((tag, index) => h("eds-tag", {
       key: index,

package/eds-card-wrapper.entry.esm.js

@@ -19,15 +19,15 @@ const EdsCardWrapper = class {
   render() {
     const articleClasses = [this.tiny ? 'min-h-120' : 'min-h-156', this.withBg ? 'bg-inverse' : 'bg-default', this.withHover ? 'effect-shadow hover:shadow-hover cursor-pointer' : '', 'border-softer effect-focus-within relative flex grow flex-col rounded-lg border-2 p-16'].join(' ');
     return h("article", {
-      key: 'c52f6ad7873050c052b8c0e68b2c812d74f2ddf1',
+      key: 'f21cc9703011026652765b399e2b87b1ef80d220',
       class: articleClasses
     }, h("slot", {
-      key: 'dac6f9fe339c8baa191ee2fd622332ddf25ec08d'
+      key: '9a37adad73d2d49edcc9ca9222d5b188202c5612'
     }), this.hasSlot('footer') && h("div", {
-      key: '301862515ba88f320d1af722bec6120bc3e7d723',
+      key: '87addfc052ed4ae33736724fbd8fbc8aca873b4d',
       class: "mt-auto"
     }, h("slot", {
-      key: '85d939150663a4586934413c9965aa92a9babeef',
+      key: '2e48677f42ac2aa951bc1a82afa9291fea3ddd72',
       name: "footer"
     })));
   }

package/eds-code-block.entry.esm.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index.esm2.js';
+import { r as registerInstance, h, g as getElement } from './index.esm2.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
@@ -2187,26 +2187,70 @@ const EdsCodeBlock = class {
     this.language = undefined;
     this.copied = false;
   }
+  /**
+   * Copies the current code content to the clipboard and sets a temporary copied state.
+   *
+   * @private
+   * @returns {void}
+   */
   copyToClipboard() {
     navigator.clipboard.writeText(this.code).then(() => {
       this.copied = true;
+      /*const analyticsName = this.createHumanFriendlyAnalyticsName(this.code, this.language);
+      sendAnalytics({
+        category: 'ui-component',
+        parentContext: null,
+        tag: this.el.tagName.toLowerCase(),
+        name: analyticsName || '',
+        action: 'copy'
+      });*/
       setTimeout(() => this.copied = false, 2000);
     });
   }
+  /**
+   * Utility function that creates a human-friendly analytics name based on the code and language.
+   * It uses:
+   *  - The language (in uppercase)
+   *  - The number of non-empty lines in the code
+   *  - The first non-empty line of code (truncated to 30 characters, if needed)
+   *
+   * returns A descriptive analytics name.
+   */
+  /*private createHumanFriendlyAnalyticsName(code: string, language: string): string {
+    // Count non-empty lines
+    const lines = code.split('\n').filter(line => line.trim() !== '').length;
+    
+    // Find the first non-empty line and trim it
+    let firstNonEmptyLine = code.split('\n').find(line => line.trim() !== '');
+    firstNonEmptyLine = firstNonEmptyLine ? firstNonEmptyLine.trim() : '';
+       // Truncate the snippet if it’s too long
+    if (firstNonEmptyLine.length > 30) {
+      firstNonEmptyLine = firstNonEmptyLine.substring(0, 30) + '...';
+    }
+       return `CodeBlock:${language.toLowerCase()}|${lines}-line(s)|${firstNonEmptyLine.toLowerCase()}`;
+  }*/
+  /**
+   * Returns the syntax-highlighted HTML for the code.
+   * If the provided language is supported by Prism, this method returns the highlighted code.
+   * Otherwise, it logs a warning and returns the raw code.
+   *
+   * @private
+   * @returns {string} The highlighted HTML string for the code block.
+   */
   getHighlightedCode() {
     if (this.language && Prism$1.languages[this.language]) {
       return Prism$1.highlight(this.code, Prism$1.languages[this.language], this.language);
     }
     // eslint-disable-next-line
-    console.warn(`Unsupported or missing language: ${this.language}`);
+    //console.warn(`Unsupported or missing language: ${this.language}`);
     return this.code; // Fallback if language is not provided or unsupported
   }
   render() {
     return h("div", {
-      key: 'a99c0c8b9546b80bb3f9e21cd53c29540e8b6e06',
+      key: 'cb379e82bcf71345945b0b88397650ecd4992770',
       class: "relative bg-stronger rounded-sm"
     }, h("div", {
-      key: '5856f9d30bb52f791e0d8bb03a6438bc01247f66',
+      key: '945046d4fd747cd64a83155b421a897e380cc612',
       class: "text-inverse flex justify-between items-center p-8"
     }, this.language ? h("span", {
       class: "f-ui-03"
@@ -2217,26 +2261,29 @@ const EdsCodeBlock = class {
     }, h("code", {
       innerHTML: this.getHighlightedCode()
     })), h("span", {
-      key: 'dfb0f69dbbd1032ace5afb7fe98d899816f36610',
+      key: '3f6c7e996101f0bb83fb8c9e6991a205a0b268c8',
       "aria-hidden": "true",
       class: "w-20 h-20 mt-8"
     }, h("eds-icon-wrapper", {
-      key: 'b399384638265f9fcc9a824c47fe73c75bcade33',
+      key: '8ad9beb61058f29e688f6777233c61f7fb3ccfe8',
       icon: this.copied ? 'success' : 'copy',
       onClick: () => this.copyToClipboard()
     })), h("span", {
-      key: '47c2d00b2cf86b99522dbc438726e0fc57fb6a44',
+      key: 'a4f9a07906e1c2d9febb7ae789a3eed76dc422e9',
       class: "sr-only"
     }, "Copy Code")), this.language && h("pre", {
-      key: '038321e9d3d2a38963857ab8b719653f3e8385e3',
+      key: 'e31339126dd3cc885511aaa2bdf6f06f3a113c74',
       class: `language-${this.language} bg-stronger pl-8 pb-8`,
       role: "region",
       "aria-label": `Code block in ${this.language}`
     }, h("code", {
-      key: '72be161dd9781d9bc2f4d9495969175f34c19249',
+      key: '7efacd276f26a00f0f61793f6b8748259e1614b5',
       innerHTML: this.getHighlightedCode()
     })));
   }
+  get el() {
+    return getElement(this);
+  }
 };
 EdsCodeBlock.style = EdsCodeBlockStyle0;
 

package/eds-components-section.entry.esm.js

@@ -45,6 +45,18 @@ const EdsDocsInstallation = () => h("div", null, h("p", null, "Before proceeding
   code: "npm install @ebrains/react",
   language: "html",
   "copy-label": "Copy Code"
+})), h("div", {
+  class: "my-8"
+}, h("eds-code-block", {
+  code: "npm install @ebrains/vue",
+  language: "html",
+  "copy-label": "Copy Code"
+})), h("div", {
+  class: "my-8"
+}, h("eds-code-block", {
+  code: "npm install @ebrains/angular",
+  language: "html",
+  "copy-label": "Copy Code"
 })));
 const EdsDocsReact = () => h("div", null, h("h2", null, "React Wrappers"), h("p", null, "Learn how to use our components in a React Application.Simple install the package below and check out the examples"), h("div", {
   class: "my-8"
@@ -56,7 +68,7 @@ const EdsDocsReact = () => h("div", null, h("h2", null, "React Wrappers"), h("p"
   "section-title": "Example React App",
   "heading-level": "h3"
 }, h("eds-code-block", {
-  code: '\nimport { EdsHeader } from "@ebrains/react";\n\ninterface User {\n  firstname: string;\n  lastname: string;\n}\n\ninterface AuthStatus {\n  authenticated: boolean;\n  user: User | null;\n}\n\nimport { useEffect, useState } from "react";\n\nexport function App() {\n\n  const [authStatus, setAuthStatus] = useState<AuthStatus>({\n    authenticated: false,\n    user: null,\n  });\n  \n  const [activeTabIndex, setActiveTabIndex] = useState<number>(0);\n\n  // Use useEffect to render Stencil components dynamically after the component mounts\n  useEffect(() => {\n    \n    const handleAuthStatusChange = (event: CustomEvent) => {\n      console.log(event.detail);\n      setAuthStatus(event.detail); // Set the entire object\n    };\n\n    const handleTabChange = (\n      event: CustomEvent<{ index: number; name: string }>,\n    ) => {\n      console.log(event.detail);\n      setActiveTabIndex(event.detail.index);\n    };\n\n    document.addEventListener(\n      "authStatusChanged",\n      handleAuthStatusChange as EventListener,\n    );\n    document.addEventListener("tabChange", handleTabChange as EventListener);\n\n    return () => {\n      document.removeEventListener(\n        "authStatusChanged",\n        handleAuthStatusChange as EventListener,\n      );\n      document.removeEventListener(\n        "tabChange",\n        handleTabChange as EventListener,\n      );\n    };\n  }, []); // Empty dependency array ensures this runs only once after mounting\n\n  return (\n    <div id="main">\n      <EdsHeader\n        home-url="/"\n        user-feature={false}\n        keycloak-url="http://localhost:8080"\n        keycloak-realm="nigeor-realm"\n        keycloak-client-id="stencil-app"\n        links="[\n            { "label": "About", "url": "/about" },\n            { "label": "Focus Areas", "url": "/focus-areas" },\n            { "label": "News & Events", "url": "/news-and-events" },\n            { "label": "Contact", "url": "/contact" }\n          ]"\n      ></EdsHeader>\n\n      <div> \n        User is{" "} {authStatus.authenticated ? "authenticated" : "not authenticated"}\n      </div>\n      {authStatus.user && <div>Welcome, {authStatus.user.firstname}</div>}\n      </div>\n    </div>\n  );\n}\n\nexport default App;\n',
+  code: '\nimport {\n  EdsHeader,\n  EdsFullscreenMenu,\n  EdsUser\n} from "@ebrains/react";\n\ninterface User {\n  firstname: string;\n  lastname: string;\n  // Add any other properties your user object might have\n}\n\ninterface AuthStatus {\n  authenticated: boolean;\n  user: User | null;\n}\n\nimport { useEffect, useState } from "react";\n\nexport function App() {\n  const [authStatus, setAuthStatus] = useState<AuthStatus>({\n    authenticated: false,\n    user: null,\n  });\n  const [activeTabIndex, setActiveTabIndex] = useState<number>(0);\n\n  // Use useEffect to render Stencil components dynamically after the component mounts\n  useEffect(() => {\n    const handleAuthStatusChange = (event: CustomEvent) => {\n      console.log(event.detail);\n      setAuthStatus(event.detail); // Set the entire object\n    };\n\n    document.addEventListener(\n      "authStatusChanged",\n      handleAuthStatusChange as EventListener,\n    );\n\n    return () => {\n      document.removeEventListener(\n        "authStatusChanged",\n        handleAuthStatusChange as EventListener,\n      );\n    };\n  }, []);\n\n  return (\n    <div>\n      <EdsHeader\n        homeUrl="/"\n        menuEnabled={true}\n        inverseHeader={false}\n        links={[\n          { label: "About", url: "#" },\n          { label: "Focus Areas", url: "#" },\n          { label: "News & Events", url: "#" },\n          { label: "Contact", url: "#" }\n        ]}\n      >\n        <div className="px-16">\n          <EdsUser\n            keycloak-url="http://localhost:8080"\n            keycloak-realm="nigeor-realm"\n            keycloak-client-id="stencil-app"\n          ></EdsUser>\n        </div>\n      </EdsHeader>\n\n      <EdsFullscreenMenu\n        home-url="/"\n        links={[\n          { label: "About", url: "#" },\n          { label: "Focus Areas", url: "#" },\n          { label: "News & Events", url: "#" },\n          { label: "Contact", url: "#" }\n        ]}\n      ></EdsFullscreenMenu>\n      \n      <div>\n        User is{" "}\n        {authStatus.authenticated ? "authenticated" : "not authenticated"}\n      </div>\n      {authStatus.user && <div>Welcome, {authStatus.user.firstname}</div>}\n\n      <div id="main"></div>\n    </div>\n  );\n}\n\nexport default App;\n\n',
   language: "javascript",
   "copy-label": "Copy Code"
 })));
@@ -137,7 +149,7 @@ const EdsComponentsSection = class {
   }
   render() {
     return h("div", {
-      key: 'ce34514ab73daa5baa011bda56a13d6197f8bfd0',
+      key: '7e582a0eeafc2687229454532b5a7f66f91c1856',
       class: "container"
     }, this.renderContent());
   }

package/eds-docs-palettes.entry.esm.js

@@ -20,7 +20,7 @@ const EdsDocsPalettes = class {
   }
   render() {
     return h("div", {
-      key: '42f0a4598c64661d98054522e88366ec591a2cb3',
+      key: 'e8cd71caa7b23cc4dc28c694ecb9f13e3fd4170a',
       class: "container"
     }, this.renderContent());
   }

package/eds-docs-tokens.entry.esm.js

@@ -36,7 +36,7 @@ const EdsDocsContent = class {
   }
   render() {
     return h("div", {
-      key: '10708d591c4077e4e1fe94073322f01121253bdb',
+      key: 'b140f7650e5e01711dc0778b04af83f9d004efc7',
       class: "container"
     }, this.renderContent());
   }