@ebrains/components 0.7.0-alpha.1 → 0.9.0-beta

package/dist/components/eds-card-desc2.js

@@ -17,7 +17,7 @@ const EdsCardDesc = /*@__PURE__*/ proxyCustomElement(class EdsCardDesc extends H
         return this.truncate && this.truncateLines ? `line-clamp-${this.truncateLines}` : '';
     }
     render() {
-        return (h("p", { key: '71495cbd6ef4e7d66c4c22a37f8120624ecf57fb', class: `text-light ${this.descClass}` }, h("span", { key: '8708178f7b48cc1f31aac749f50fe92b72c39ab8', class: this.getTruncateClass() }, this.description)));
+        return (h("p", { key: '96ba520be4ef9acf871a6e992d5ea74aaf17c962', class: `text-light ${this.descClass}` }, h("span", { key: '951358bd0c992426175e3c1b3c580f2f9be4027f', class: this.getTruncateClass() }, this.description)));
     }
     static get style() { return EdsCardDescStyle0; }
 }, [1, "eds-card-desc", {

package/dist/components/eds-card-generic2.js

@@ -7,7 +7,7 @@ import { d as defineCustomElement$3 } from './eds-card-title2.js';
 import { d as defineCustomElement$2 } from './eds-img2.js';
 import { d as defineCustomElement$1 } from './eds-tag2.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 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;
 
 const EdsCardGeneric = /*@__PURE__*/ proxyCustomElement(class EdsCardGeneric extends HTMLElement {

package/dist/components/eds-card-project.js

@@ -59,7 +59,7 @@ const EdsCardProject$1 = /*@__PURE__*/ proxyCustomElement(class EdsCardProject e
             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: '98c5dbd033ec05d08965559e00f32d9fe18698ef', class: cardClasses, onClick: (event) => this.handleClick(event) }, h("div", { key: 'e083c43e38c3c24fcd996a90267f7cd92d3651b3', class: `flex grow flex-col ${this.vertical ? 'min-h-156' : ''}` }, h("div", { key: '37de1e46023b533fd8595a3077c4e68c11fb01af', class: "lg:max-w-[720px]" }, h("eds-card-title", { 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: 'c6f74ba9b5b522f713e25d3339f541efa68cdddd', class: `block ${this.vertical ? 'f-ui-02' : 'mt-4 f-heading-06'}` }, this.editorialTitle))), this.categoryTitle && (h("div", { 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: '3714ee86a74dce7f33a8f953fd726db349ba9271', label: this.categoryTitle })))), this.parsedImage && (h("div", { key: '2818d15f7ab671b7b2dfb34ec3085b390150f38d', class: imageClasses }, h("div", { key: '5166feef3674631298f699449b956655f38f0db9', class: "aspect-1x1 w-full" }, h("eds-img", Object.assign({ key: '86555a43491da5b2aa3b287e539e603a2c2adaf3', sizes: this.vertical ? this.parsedImage.sizes || '' : '192px' }, this.parsedImage)))))));
+        return (h("article", { key: '067a30c2b0860d71dc13d1d3d875a7e288de842b', class: cardClasses, onClick: (event) => this.handleClick(event) }, h("div", { key: '3e2e62ecc9ad5973c359b7bbceefd8c2ac682d0b', class: `flex grow flex-col ${this.vertical ? 'min-h-156' : ''}` }, h("div", { key: 'e07a666f80d6955b5cf16c18a999a756dcfe10f0', class: "lg:max-w-[720px]" }, h("eds-card-title", { key: 'b1ef62c888e9d69f1146fc218a7012015ddc78e1', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.titleProject, url: this.url }), this.editorialTitle && (h("span", { key: '79cf1af876a0a358a9f65036a1ff1c4944604435', class: `block ${this.vertical ? 'f-ui-02' : 'mt-4 f-heading-06'}` }, this.editorialTitle))), this.categoryTitle && (h("div", { key: 'ce7e525b0bdbbc94d3e2ec8055c692be9d521042', 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: '23e3527a3772970642dcb07a4abc381415132155', label: this.categoryTitle })))), this.parsedImage && (h("div", { key: '178ef2273b2506070c045c3f2e7a287d4b175414', class: imageClasses }, h("div", { key: 'f77fb56cd2ed1bdcafd07db9adcf0f7b6a44cdb7', class: "aspect-1x1 w-full" }, h("eds-img", Object.assign({ key: 'b9734f48ab685280b801cfb75cc96f5aa109ca6f', sizes: this.vertical ? this.parsedImage.sizes || '' : '192px' }, this.parsedImage)))))));
     }
     get el() { return this; }
 }, [0, "eds-card-project", {

package/dist/components/eds-card-tags.js

@@ -13,7 +13,7 @@ const EdsCardTags$1 = /*@__PURE__*/ proxyCustomElement(class EdsCardTags extends
         this.tags = [];
     }
     render() {
-        return (h("div", { key: '272d53abb9be9086881cb2f8e99f7fb7aae1bb59', class: "flex flex-wrap gap-y-4" }, this.tags.map((tag, index) => (h("eds-tag", { key: index, intent: this.accent ? 'accent' : 'default', label: tag })))));
+        return (h("div", { key: 'df8937e32907eb978f27565d04f7ca56f2485c87', class: "flex flex-wrap gap-y-4" }, this.tags.map((tag, index) => (h("eds-tag", { key: index, intent: this.accent ? 'accent' : 'default', label: tag })))));
     }
     static get style() { return EdsCardTagsStyle0; }
 }, [1, "eds-card-tags", {

package/dist/components/eds-card-title2.js

@@ -47,7 +47,7 @@ const EdsCardTitle = /*@__PURE__*/ proxyCustomElement(class EdsCardTitle extends
     render() {
         //const Tag = this.getTag();
         const Heading = this.headingLevel;
-        return (h(Heading, { key: 'bb97dc6dd53adda14ef251b2ec32952791438986', class: this.getTitleClass() }, h("a", { 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, rel: this.externalLink ? 'noopener noreferrer' : undefined }, this.cardTitle)));
+        return (h(Heading, { key: '57ce97f35ee52623d32fac0b6b1a576ca8b5aa70', class: this.getTitleClass() }, h("a", { key: '60fb313d2b8753974658f73aaddd359a63548a79', class: "break-words after:absolute after:inset-0 after:z-10 after:content-[''] focus:outline-none", href: this.url, target: this.externalLink ? '_blank' : undefined, rel: this.externalLink ? 'noopener noreferrer' : undefined }, this.cardTitle)));
     }
     static get style() { return EdsCardTitleStyle0; }
 }, [1, "eds-card-title", {

package/dist/components/eds-card-tool.js

@@ -73,7 +73,7 @@ const EdsCardTool$1 = /*@__PURE__*/ proxyCustomElement(class EdsCardTool extends
         });
     }
     render() {
-        return (h("article", { key: 'da61b384e966b148cd1f77eec59671bc4d92e259', class: `${this.el.tagName.toLowerCase()} ${this.articleClasses()}`, onClick: () => this.handleClick() }, h("eds-card-title", { key: '00702d032bc25f52b2a2c98255ceb60a1d314f4d', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.cardTitle, url: this.url, "external-link": this.external, hierarchy: this.hierarchy }), this.description && (h("eds-card-desc", { key: 'd2b135ed422fb64f142af71330dc666e2f0c2b1f', class: "mt-8", "truncate-lines": "3", description: this.description })), this.image ? (h("eds-img", { src: this.image, alt: "Sample Image", width: 200, height: 150 })) : this.avatar || this.shortAbbreviation ? (h("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, h("div", { key: '54111e90175754cb0c1f2eb339e86926914ca0e7', class: "flex flex-wrap gap-y-4" }, this.parsedTags.map((tag, index) => (h("eds-tag", { key: index, intent: tag.style, label: tag.label }))))));
+        return (h("article", { key: '5ecce6667d066e78586f795ab260bed569434c4f', class: `${this.el.tagName.toLowerCase()} ${this.articleClasses()}`, onClick: () => this.handleClick() }, h("eds-card-title", { key: 'a6ff863ade669db7494c763d563809dbfddb3f2c', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.cardTitle, url: this.url, "external-link": this.external, hierarchy: this.hierarchy }), this.description && (h("eds-card-desc", { key: '6f5328fba79a564e6e0d737b2d64a31e50ea6434', class: "mt-8", "truncate-lines": "3", description: this.description })), this.image ? (h("eds-img", { src: this.image, alt: "Sample Image", width: 200, height: 150 })) : this.avatar || this.shortAbbreviation ? (h("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, h("div", { key: 'b1a42a1db9274ebf1098143d56e1ad8a08825c4c', class: "flex flex-wrap gap-y-4" }, this.parsedTags.map((tag, index) => (h("eds-tag", { key: index, intent: tag.style, label: tag.label }))))));
     }
     get el() { return this; }
     static get style() { return EdsCardToolStyle0; }

package/dist/components/eds-card-wrapper.js

@@ -21,7 +21,7 @@ const EdsCardWrapper$1 = /*@__PURE__*/ proxyCustomElement(class EdsCardWrapper e
             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: 'f21cc9703011026652765b399e2b87b1ef80d220', class: articleClasses }, h("slot", { key: '9a37adad73d2d49edcc9ca9222d5b188202c5612' }), this.hasSlot('footer') && (h("div", { key: '87addfc052ed4ae33736724fbd8fbc8aca873b4d', class: "mt-auto" }, h("slot", { key: '2e48677f42ac2aa951bc1a82afa9291fea3ddd72', name: "footer" })))));
+        return (h("article", { key: 'b860e65a1a943216793a5ce2f5a08d01249fc671', class: articleClasses }, h("slot", { key: '3ea351da205f375ed746695762efc1f28d1fc3f0' }), this.hasSlot('footer') && (h("div", { key: '84d24bd248033d4855dd63dfa5042585ae61d64d', class: "mt-auto" }, h("slot", { key: 'c7a2530d70a93705097b9ac3b8be1a21551dd1fb', name: "footer" })))));
     }
     get el() { return this; }
 }, [4, "eds-card-wrapper", {

package/dist/components/eds-code-block2.js

@@ -2479,7 +2479,7 @@ const EdsCodeBlock = /*@__PURE__*/ proxyCustomElement(class EdsCodeBlock extends
         return this.code; // Fallback if language is not provided or unsupported
     }
     render() {
-        return (h("div", { key: 'cb379e82bcf71345945b0b88397650ecd4992770', class: "relative bg-stronger rounded-sm" }, h("div", { key: '945046d4fd747cd64a83155b421a897e380cc612', class: "text-inverse flex justify-between items-center p-8" }, this.language ? (h("span", { class: "f-ui-03" }, this.language.toUpperCase())) : (h("pre", { class: "bg-stronger pl-8", role: "region", "aria-label": "Code block without language" }, h("code", { innerHTML: this.getHighlightedCode() }))), h("span", { key: '3f6c7e996101f0bb83fb8c9e6991a205a0b268c8', "aria-hidden": "true", class: "w-20 h-20 mt-8" }, h("eds-icon-wrapper", { key: '8ad9beb61058f29e688f6777233c61f7fb3ccfe8', icon: this.copied ? 'success' : 'copy', onClick: () => this.copyToClipboard() })), h("span", { key: 'a4f9a07906e1c2d9febb7ae789a3eed76dc422e9', class: "sr-only" }, "Copy Code")), this.language && (h("pre", { key: 'e31339126dd3cc885511aaa2bdf6f06f3a113c74', class: `language-${this.language} bg-stronger pl-8 pb-8`, role: "region", "aria-label": `Code block in ${this.language}` }, h("code", { key: '7efacd276f26a00f0f61793f6b8748259e1614b5', innerHTML: this.getHighlightedCode() })))));
+        return (h("div", { key: '98f5fe5e215e87c1eb024969b5e4f3ae1bd0cb0d', class: "relative bg-stronger rounded-sm" }, h("div", { key: '173be873a0f41398bd080758d5a0bbdcc977dcf5', class: "text-inverse flex justify-between items-center p-8" }, this.language ? (h("span", { class: "f-ui-03" }, this.language.toUpperCase())) : (h("pre", { class: "bg-stronger pl-8", role: "region", "aria-label": "Code block without language" }, h("code", { innerHTML: this.getHighlightedCode() }))), h("span", { key: 'f8cb36cf89d19bf306c57168e61ccfde9a4d18ff', "aria-hidden": "true", class: "w-20 h-20 mt-8" }, h("eds-icon-wrapper", { key: '74f214c47dc647c2c254f3f9f96fba71e35133df', icon: this.copied ? 'success' : 'copy', onClick: () => this.copyToClipboard() })), h("span", { key: '74e628574b481d68c2d2132a12fd07bb62c86fde', class: "sr-only" }, "Copy Code")), this.language && (h("pre", { key: '19d2b813b6e86451a8a9047b954d99340fc3cd85', class: `language-${this.language} bg-stronger pl-8 pb-8`, role: "region", "aria-label": `Code block in ${this.language}` }, h("code", { key: '974eb2e2ef0d7dc90e012e421d64bf5b735761d1', innerHTML: this.getHighlightedCode() })))));
     }
     get el() { return this; }
     static get style() { return EdsCodeBlockStyle0; }

package/dist/components/eds-cookies-preference.js

@@ -12,7 +12,6 @@ const EdsCookiesPreference$1 = /*@__PURE__*/ proxyCustomElement(class EdsCookies
     constructor() {
         super();
         this.__registerHost();
-        this.__attachShadow();
         this.buttonText = 'Cookies Preferences';
         this.intent = undefined;
         this.showMatomoNotice = false;
@@ -34,10 +33,10 @@ const EdsCookiesPreference$1 = /*@__PURE__*/ proxyCustomElement(class EdsCookies
         }
     }
     render() {
-        return (h("div", { key: '48f67648644ae9c8e645791ad3cbba5491866dc5' }, h("eds-link", { key: '50154721f0f44e811ebe362e18bcf8cfb77b8f64', size: "small", intent: this.intent, label: this.buttonText, onClick: () => this.toggleCookiesPopup() }), this.showMatomoNotice && h("eds-matomo-notice", { "force-show": true, key: this.noticeKey })));
+        return (h("div", { key: 'fe3330180b8f3a5ff6b02156f5d76afb8cdf7edd' }, h("eds-link", { key: 'c5d63e486cb63bcb28b89babe606ac1eae525fe0', size: "small", intent: this.intent, label: this.buttonText, onClick: () => this.toggleCookiesPopup() }), this.showMatomoNotice && h("eds-matomo-notice", { "force-show": true, key: this.noticeKey })));
     }
     static get style() { return EdsCookiesPreferenceStyle0; }
-}, [1, "eds-cookies-preference", {
+}, [0, "eds-cookies-preference", {
         "buttonText": [1, "button-text"],
         "intent": [1],
         "showMatomoNotice": [32],

package/dist/components/eds-dropdown2.js

@@ -51,7 +51,8 @@ const EdsDropdown = /*@__PURE__*/ proxyCustomElement(class EdsDropdown extends H
      * @param {Event} e - The click event.
      */
     handleWindowClick(e) {
-        if (!this.host.contains(e.target)) {
+        const path = (e.composedPath && e.composedPath()) || [];
+        if (!path.includes(this.host)) {
             this.closeDropdown();
             this.dropdown.emit({ expanded: false });
         }
@@ -109,14 +110,14 @@ const EdsDropdown = /*@__PURE__*/ proxyCustomElement(class EdsDropdown extends H
      * @returns {JSX.Element} The rendered dropdown component.
      */
     render() {
-        return (h("div", { key: '3edd3453afbd52ee9e3c4d925baa46e07cfdbfc0', class: "z-focus relative", ref: (el) => (this.dropdownContent = el) }, h("eds-button", { key: '7c69acb6d6213af2cec8c1e00c68d83a5d23d676', label: this.label, "aria-label": this.ariaLabel, icon: this.icon, intent: this.intent, onClick: this.handleClick, "aria-expanded": this.isOpen.toString(), "aria-haspopup": "menu" }), h("nav", { key: '5048b1c3cb42418736d471c2331330afef49cbc5', role: "menu", class: {
+        return (h("div", { key: '03ab7911a018f273afdd58986fea1a0d9b86aa30', class: "z-focus relative", ref: (el) => (this.dropdownContent = el) }, h("eds-button", { key: '4145f8e8918ef36121bb54ef4e614263b077e4d5', label: this.label, "aria-label": this.ariaLabel, icon: this.icon, intent: this.intent, onClick: this.handleClick, "aria-expanded": this.isOpen.toString(), "aria-haspopup": "menu" }), h("nav", { key: '5848addad59482f2c0b350739aa5440167379e86', role: "menu", 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': true,
                 '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 }, h("slot", { key: '842f316e9a7910aa8b34823e883c54c1979668d1' }))));
+            }, style: { display: this.isOpen ? 'block' : 'none' }, "aria-label": "Dropdown", "aria-hidden": !this.isOpen }, h("slot", { key: '8427053528abc74e2acf9b544363870b57f98fef' }))));
     }
     get host() { return this; }
     static get style() { return EdsDropdownStyle0; }

package/dist/components/eds-feedback.js

@@ -4,7 +4,7 @@ import { d as defineCustomElement$4 } from './eds-button2.js';
 import { d as defineCustomElement$3 } from './eds-icon-wrapper2.js';
 import { d as defineCustomElement$2 } from './eds-rating2.js';
 
-const edsFeedbackCss = "h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.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-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)}.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-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}.inline{display:inline}.grid{display:grid}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.my-4{margin-top:0.25rem;margin-bottom:0.25rem}.my-8{margin-top:0.5rem;margin-bottom:0.5rem}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}";
+const edsFeedbackCss = "h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.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-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)}.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-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}.inline{display:inline}.grid{display:grid}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.my-4{margin-top:0.25rem;margin-bottom:0.25rem}.my-8{margin-top:0.5rem;margin-bottom:0.5rem}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}";
 const EdsFeedbackStyle0 = edsFeedbackCss;
 
 const EdsFeedback$1 = /*@__PURE__*/ proxyCustomElement(class EdsFeedback extends HTMLElement {
@@ -58,7 +58,7 @@ const EdsFeedback$1 = /*@__PURE__*/ proxyCustomElement(class EdsFeedback extends
         this.selectedRating = e.detail;
     }
     render() {
-        return (h("div", { key: '125299e9780486a10213fc3c59b15e7a4fb62616', class: "grid inline" }, h("p", { key: '6a02d78d34a590bc213cd5bf311ec8bed44f8959', class: "f-heading-03 my-4" }, this.label), h("p", { key: '76146fbade2f864ba7b72429a85218ebf6a24ea7', class: "f-body-02 text-light" }, this.description), h("eds-rating", { key: '38e0ec9219adaf85f674fab6be471112f06e42ff', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: 'beab34888d3db63ca2ee374a2d10d407bfc948cc', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
+        return (h("div", { key: '5fbf2af8386c318134b64c1323553bc00ee2fe2c', class: "grid inline" }, h("h1", { key: 'f5ec1e3cbbfa9c1d549a69c76e01609253c6dfea', class: "f-heading-01 my-4" }, this.label), h("p", { key: '60348466e10a5295fdb861f512c1037cdf8fbf27', class: "f-body-01 text-light" }, this.description), h("eds-rating", { key: 'ed559e7844c20081e82ccc0cddd4a34691a7ad1d', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: 'b4ab49d3c936649c75714ef2cd9fc09f9a213437', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
     }
     get el() { return this; }
     static get style() { return EdsFeedbackStyle0; }

package/dist/components/eds-footer2.js

@@ -1,17 +1,19 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { d as defineCustomElement$5 } from './eds-button2.js';
 import { d as defineCustomElement$4 } from './eds-icon-wrapper2.js';
 import { d as defineCustomElement$3 } from './eds-img2.js';
 import { d as defineCustomElement$2 } from './eds-link2.js';
 import { d as defineCustomElement$1 } from './eds-social-networks2.js';
 
-const edsFooterCss = "";
+const edsFooterCss = "p{margin:0}.cursor-pointer{cursor:pointer}.ml-4{margin-left:0.25rem}.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}.bg-darker{background-color:var(--grey-400)}.border-softest{border-color:rgba(0, 0, 0, .05)}.border-t-2{border-top-width:2px}.pt-20{padding-top:1.25rem}.pb-28{padding-bottom:1.75rem}.grid-layout{display:grid;grid-template-columns:repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);grid-gap:var(--inner-gutter)}.grid-col-span-12{--container-grid-columns:12;grid-column:span 12 / span 12}.mt-28{margin-top:1.75rem}.gap-y-12{row-gap:0.75rem}.gap-x-12{-moz-column-gap:0.75rem;column-gap:0.75rem}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-20{gap:1.25rem}.effect-focus{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.focus-visible\\:rounded-xs:focus-visible{border-radius:4px}.flex{display:flex}.w-\\[54px\\]{width:54px}.ml-0{margin-left:0rem}.order-last{order:9999}.w-full{width:100%}.f-ui-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}.text-light{color:var(--grey-700)}.mt-4{margin-top:0.25rem}.gap-12{gap:0.75rem}.inline-block{display:inline-block}.\\!no-underline{text-decoration-line:none !important}.decoration-2{text-decoration-thickness:2px}.underline-offset-4{text-underline-offset:4px}.hover\\:\\!underline:hover{text-decoration-line:underline !important}.ml-auto{margin-left:auto}.pl-12{padding-left:0.75rem}@media (min-width: 750px){.md\\:pt-28{padding-top:1.75rem}}@media (min-width: 900px){.lg\\:grid-col-span-5{--container-grid-columns:5;grid-column:span 5 / span 5}.lg\\:grid-col-span-6{--container-grid-columns:6;grid-column:span 6 / span 6}.lg\\:grid-col-start-7{grid-column-start:7}.lg\\:mt-0{margin-top:0rem}.lg\\:flex-nowrap{flex-wrap:nowrap}.lg\\:order-none{order:0}.lg\\:w-auto{width:auto}}@media (min-width: 1024px){.xl\\:pb-40{padding-bottom:2.5rem}}";
 const EdsFooterStyle0 = edsFooterCss;
 
 const EdsFooter = /*@__PURE__*/ proxyCustomElement(class EdsFooter extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        this.__attachShadow();
+        this.cookies = createEvent(this, "cookies", 7);
         /**
          * Scrolls the page smoothly back to the top.
          * Called when the "Back to top" button is clicked.
@@ -20,13 +22,16 @@ const EdsFooter = /*@__PURE__*/ proxyCustomElement(class EdsFooter extends HTMLE
         this.backToTop = () => {
             window.scrollTo({ top: 0, behavior: 'smooth' });
         };
-        this.extraClass = '';
         this.social = false;
         this.enableScrollTop = false;
         this.fundedBy = 'EBRAINS is funded by the Horizon Europe Framework Programme.';
         this.rightsReserved = `${new Date().getFullYear()} EBRAINS. All rights reserved.`;
+        this.enableCookiesSettings = false;
         this.showMatomoNotice = false;
     }
+    toggleCookiesConsent() {
+        this.cookies.emit('toggle');
+    }
     /**
      * Renders the footer component with optional sections and elements,
      * including social network links, a Horizon Europe funding acknowledgment, and
@@ -35,15 +40,17 @@ const EdsFooter = /*@__PURE__*/ proxyCustomElement(class EdsFooter extends HTMLE
      * @returns {JSX.Element} The rendered JSX for the footer component.
      */
     render() {
-        return (h("footer", { key: 'fc315d7ddfa4ede5514083d842bba36c991fef8a', class: `${this.extraClass} pb-banner` }, this.social ? (h("div", { class: "border-softest border-t-2 pt-20 pb-28 md:pt-28" }, h("div", { class: "container pb-20 xl:pb-40 " }, h("div", { class: "grid-layout" }, h("div", { class: "grid-col-span-12 lg:grid-col-span-5" }, h("eds-social-networks", { class: "mt-28" })), h("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, h("div", { key: '9d00bf38cabc8cea80be80b0e26f57fa70e635fb', class: `border-softest ${this.social ? 'border-t-2' : ''} pt-20 pb-28 md:pt-28` }, h("div", { key: '67342d2033716108d6b7137029709d0048dd06f2', class: "container flex flex-wrap items-center gap-20 lg:flex-nowrap" }, h("div", { key: '44bbeddacf48ed1d3a8f716cb9a044f7175aabab', class: "flex items-center gap-x-12" }, h("a", { key: '34ce75ccde53cfd7771d7d325d989a23d148011f', target: "_blank", rel: "noopener noreferrer", class: "effect-focus focus-visible:rounded-xs flex w-[54px] ml-0", href: "https://research-and-innovation.ec.europa.eu/funding/funding-opportunities/funding-programmes-and-open-calls/horizon-2020_en", "aria-label": "Learn about Horizon 2020 funding" }, h("eds-img", { key: 'f06317200fe90580ca1d2d512e665252d11b4799', width: 54, height: 41, src: "https://www.ebrains.eu/flags/4x3/eu.svg", alt: "European Union Flag" }))), h("div", { key: '6a81ccd4f5196c6567a60c6a43c468178154f9ad', class: "order-last w-full lg:order-none lg:w-auto" }, h("div", { key: 'e10de8b2e966cd0a2febcc8e8c5189b7694f856c', class: "f-ui-04 text-light" }, h("p", { key: '26f14c5c27859d1fea9985800d8e35023ca8ade9' }, this.fundedBy), h("div", { key: '7eabdf80c9c9e42793eff579c2ec92d934611bb2', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block" }, h("span", { key: 'abe3d9e7091e15f09782cdde3e59228f6e143805', class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline" }, "\u00A9 ", this.rightsReserved)))), h("div", { key: '0c3371aec2ff5f9e348bef2171e4bc5a353960e2', class: "ml-auto pl-12" }, this.enableScrollTop ? (h("eds-button", { "aria-label": "Back to top", intent: "ghostInverse", icon: "chevron-up", onClick: this.backToTop })) : null)))));
+        return (h("footer", { key: '63daf387ac4ae4d3aea75345d1599b0cce0aa28e', class: `pb-banner` }, this.social ? (h("div", { class: "border-softest border-t-2 pt-20 md:pt-28" }, h("div", { class: "container pb-20" }, h("div", { class: "grid-layout" }, h("div", { class: "grid-col-span-12 lg:grid-col-span-5" }, h("eds-social-networks", { class: "mt-28" })))))) : null, h("div", { key: '31a6ca4ea417c61d0e927092cf6dffb18bfd9547', class: `border-softest ${this.social ? 'border-t-2' : ''} pb-28 pt-20 md:pt-28` }, h("div", { key: '91ff15aa4b47ae73642d0c36e569fd598a9f2ac9', class: "container flex items-center gap-20 lg:flex-nowrap" }, h("div", { key: '57b332abdbc53662253f00add0491779c7421e5e', class: "flex items-center gap-x-12" }, h("a", { key: 'c9b659030dfeb3d1485219e1882a9ff1dde4cd42', target: "_blank", rel: "noopener noreferrer", class: "effect-focus focus-visible:rounded-xs flex w-[54px] ml-0", href: "https://research-and-innovation.ec.europa.eu/funding/funding-opportunities/funding-programmes-and-open-calls/horizon-2020_en", "aria-label": "Learn about Horizon 2020 funding" }, h("eds-img", { key: 'cbd71badd41f5c1c1220c5d0042651eda2a73e51', width: 54, height: 41, src: "https://www.ebrains.eu/flags/4x3/eu.svg", alt: "European Union Flag" }))), h("div", { key: 'a012c699d5088292d171432b074eb61dd160e22f' }, h("div", { key: '1e4ab16ccb53b12468b3d53f30d671a35cc625ce', class: "f-ui-04 text-light" }, h("p", { key: 'f31aadca310d2a24153c135f1f49f96dbe69c768' }, this.fundedBy), h("div", { key: 'cb885e8666536e4e940309cc1fb0b79725ec737e', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block" }, h("span", { key: '328fc8376cb062846dc665278a6e00c0c19cc7f4', class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline" }, "\u00A9 ", this.rightsReserved), this.enableCookiesSettings ? (h("eds-link", { label: "Cookies preferences", intent: "weak", "extra-class": "f-ui-04 ml-4 cursor-pointer effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline", onClick: () => {
+                this.toggleCookiesConsent();
+            } })) : null))), h("div", { key: '4965f9293058a1d750f5aa6598e829152b37f34d', class: "ml-auto pl-12" }, this.enableScrollTop ? (h("eds-button", { id: "backToTop", "aria-hidden": "true", "aria-label": "Back to Top", intent: "ghostInverse", icon: "chevron-up", onClick: this.backToTop, class: "transition-all transition duration-75 opacity-0 " })) : null)))));
     }
     static get style() { return EdsFooterStyle0; }
-}, [0, "eds-footer", {
-        "extraClass": [1, "extra-class"],
+}, [1, "eds-footer", {
         "social": [4],
         "enableScrollTop": [4, "enable-scroll-top"],
         "fundedBy": [1, "funded-by"],
         "rightsReserved": [1, "rights-reserved"],
+        "enableCookiesSettings": [4, "enable-cookies-settings"],
         "showMatomoNotice": [32]
     }]);
 function defineCustomElement() {