@ebrains/components 2.2.0 → 2.3.0

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-x-1{-moz-column-gap:0.0625rem;column-gap:0.0625rem}.gap-y-4{row-gap:0.25rem}.order-first{order:-9999}.mb-10{margin-bottom:0.625rem}.mb-12{margin-bottom:0.75rem}.mx-auto{margin-left:auto;margin-right:auto}.block{display:block}";
+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}.flex-wrap{flex-wrap:wrap}.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-x-1{-moz-column-gap:0.0625rem;column-gap:0.0625rem}.gap-y-4{row-gap:0.25rem}.order-first{order:-9999}.mb-8{margin-bottom:0.5rem}.mb-10{margin-bottom:0.625rem}.mb-12{margin-bottom:0.75rem}.mx-auto{margin-left:auto;margin-right:auto}.block{display:block}";
 const EdsCardGenericStyle0 = edsCardGenericCss;
 
 const EdsCardGeneric = /*@__PURE__*/ proxyCustomElement(class EdsCardGeneric extends HTMLElement {
@@ -85,7 +85,7 @@ const EdsCardGeneric = /*@__PURE__*/ proxyCustomElement(class EdsCardGeneric ext
         });
     }
     render() {
-        return (h("article", { key: '0d0a2bfb5ab1f08cdada2180977ff7bd77594030', class: this.articleClasses(), onClick: () => this.handleClick() }, h("eds-card-title", { key: '4c262de23e15ee9112b8562d22fb5a35cf59938f', "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: '867cbc0ee0b24aa3acbfed5d7efbffc11ea85ccd', class: "mt-8", "truncate-lines": "3", description: this.description })), this.parsedImage ? (h("eds-img", Object.assign({ class: "mt-8 block mx-auto" }, this.parsedImage))) : this.avatar || this.shortAbbreviation ? (h("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, h("div", { key: '66fe518e05e4fcaf99ea815b0c2f3d525a2a9989', class: "flex flex-wrap gap-y-4 gap-x-1" }, this.parsedTags.map((tag, index) => (h("eds-tag", { key: index, intent: tag.style, label: tag.label })))), ' '));
+        return (h("article", { key: '76e77261a0c6e0c506fe7600d31a492808293d27', class: this.articleClasses(), onClick: () => this.handleClick() }, h("eds-card-title", { key: 'ca26508b05a31310df7fc0c3fa5769f7947e80fc', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.cardTitle, url: this.url, hierarchy: this.hierarchy }), h("div", { key: '00ba325e6a0093cb2be35854f2bcb579ad4eb35b', class: "mt-8 mb-8" }, this.description && (h("eds-card-desc", { key: '7f8b687ac2c2f334549b5d9d438aab5c62a6fcc0', "truncate-lines": "3", description: this.description }))), this.parsedImage ? (h("eds-img", Object.assign({ class: "mt-8 block mx-auto" }, this.parsedImage))) : this.avatar || this.shortAbbreviation ? (h("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, h("div", { key: '63cc046648dbf7d56909b2478d6c15b14e8d9ae4', class: "flex flex-wrap gap-y-4 gap-x-1" }, this.parsedTags.map((tag, index) => (h("eds-tag", { key: index, intent: tag.style, label: tag.label, size: tag.size })))), ' '));
     }
     get el() { return this; }
     static get style() { return EdsCardGenericStyle0; }

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

@@ -187,7 +187,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: 'b4587158532ddc495a1cda29941b69934b93c7d3', class: cardClasses, onClick: (event) => this.handleClick(event) }, h("div", { key: '96ab6c6b9f5e89db0ca29c678c0ff3d7643976de', class: `flex grow flex-col ${this.vertical ? 'min-h-156' : ''}` }, h("div", { key: '6b1e39c1b3445c2eff43f03efc0d14307e044428', class: "lg:max-w-[720px]" }, h("eds-card-title", { key: 'a5a2c5916c35dec35d261da0bf10a3905ce0452e', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.titleProject, url: this.url }), this.editorialTitle && (h("span", { key: '65f034e9ae8f7abbc37fb8fc3b03a440467c33f5', class: `block ${this.vertical ? 'f-ui-02' : 'mt-4 f-heading-06'}` }, this.editorialTitle))), this.categoryTitle && (h("div", { key: '690f9157169e6344af51407fca8c25f7cf35ac74', 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: '651b1f0424b45348c854b7ec98e4dae1e4952bbd', label: this.categoryTitle })))), this.parsedImage && (h("div", { key: 'b761288da975f05bb558b0e60767292c20e767e8', class: imageClasses }, h("div", { key: 'bf027b4359774454d9f866f4bb17872a1c0ba724', class: "aspect-1x1 w-full" }, h("eds-img", Object.assign({ key: '19b4c37dcbe7c463afd3ece46d5c348c681771c8', sizes: this.vertical ? this.parsedImage.sizes || '' : '192px' }, this.parsedImage)))))));
+        return (h("article", { key: '65af57bfbe558b895f74dd4d088c243a25c7265d', class: cardClasses, onClick: (event) => this.handleClick(event) }, h("div", { key: 'cf0e9f71cd617a44facf7e35cdf78774e41b3eb1', class: `flex grow flex-col ${this.vertical ? 'min-h-156' : ''}` }, h("div", { key: '82870bbaf7203ac92f25ca241186ba7a32b784d5', class: "lg:max-w-[720px]" }, h("eds-card-title", { key: '0f0356d2e4a7af3a5d50c66382ff5d3f70298e8c', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.titleProject, url: this.url }), this.editorialTitle && (h("span", { key: '3586446f9ad1bb190c93cd54d7e53d6e835b8e37', class: `block ${this.vertical ? 'f-ui-02' : 'mt-4 f-heading-06'}` }, this.editorialTitle))), this.categoryTitle && (h("div", { key: '750c707f04d12ddd1d38aa0377b47f8804070535', 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: '01fbeebd88ee60feede3b21db177b3691ffc2808', label: this.categoryTitle })))), this.parsedImage && (h("div", { key: 'c61baca9d015c9bfb7ec6ce3ec4ea2e41d8ac513', class: imageClasses }, h("div", { key: '04d4828b6648470543ddde09d935aaa7c6133d7e', class: "aspect-1x1 w-full" }, h("eds-img", Object.assign({ key: 'cde6eb483641c02abb6c229470f07aa5b08fbf9b', sizes: this.vertical ? this.parsedImage.sizes || '' : '192px' }, this.parsedImage)))))));
     }
     get el() { return this; }
 }, [0, "eds-card-project", {

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

@@ -35,7 +35,7 @@ const EdsCardSection$1 = /*@__PURE__*/ proxyCustomElement(class EdsCardSection e
      * @returns {JSX.Element} The rendered section containing a list of cards.
      */
     render() {
-        return (h("section", { key: 'eb64be830a5a1b752fadd0a8a76be9240b70cfe8', class: "w-full" }, h("ul", { key: 'd4eb8d8492a67f7491535953e0e37172fc9e09ff', class: "grid-layout grid-cols-4 gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.parsedCards.map((card) => (h("li", { class: `grid-col-span-4 md:grid-col-span-${this.occupyCols} flex flex-col` }, h("eds-card-generic", { cardTitle: card.title, description: card.description, avatar: card.avatar, headingLevel: card.headingLevel, tags: card.tags, url: card.url, bg: card.bg, tiny: card.tiny, image: card.image, withHover: card.withHover })))))));
+        return (h("section", { key: 'bae0833e4d29cb2874bfb1751d7663751fd64abe', class: "w-full" }, h("ul", { key: '001026f2866cf6101c317f08d32eac4dff46d335', class: "grid-layout grid-cols-4 gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.parsedCards.map((card) => (h("li", { class: `grid-col-span-4 md:grid-col-span-${this.occupyCols} flex flex-col` }, h("eds-card-generic", { cardTitle: card.title, description: card.description, avatar: card.avatar, headingLevel: card.headingLevel, tags: card.tags, url: card.url, bg: card.bg, tiny: card.tiny, image: card.image, withHover: card.withHover })))))));
     }
     static get style() { return EdsCardSectionStyle0; }
 }, [1, "eds-card-section", {

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: '2acec4bb37d05bb40910cdd198e2ffac9f16610d', 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: 'dc4a5cdabd7ab34e3c2c67b9a166ae8bc15a9861', 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: 'f3a72db6143e59ef04e589397126dcbf5b4d2d47', class: this.getTitleClass() }, h("a", { key: '4fe1c9af922959b26824f01a0e5b52137c3854f2', 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: '1fd3f080c09f94d7b7175d51b9d8e38bb0b76286', class: this.getTitleClass() }, h("a", { key: 'dd06cbecbc9eaef8052f34eae28ae17c5f92c918', 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: '2ae8e814b1509d167912424bb5093dba780f70e7', class: `${this.el.tagName.toLowerCase()} ${this.articleClasses()}`, onClick: () => this.handleClick() }, h("eds-card-title", { key: '1d0e4312589a917bc96b2c2dd3455ad0edc54b25', "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: '70b074fa7755e20627c50383e1a04a684dd1bab6', 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: 'eb5b236057ef9044701d9662cdc2fa359d5c8053', 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: '00f417ee065537f8b30bc73e5ad9ca0d69b3aed3', class: `${this.el.tagName.toLowerCase()} ${this.articleClasses()}`, onClick: () => this.handleClick() }, h("eds-card-title", { key: '9d8156f655c9344c872631b75cfcaf52fdf23347', "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: 'da7aa3d0d9f7995a824fd7720342e6dd4d94224f', 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: '3e3001ec404a0bbca84deafc89de6aab8bf2fe45', 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-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: '3cfaec27c58d05868313150f1a358ff64c8eafbd', class: "relative bg-stronger rounded-sm" }, h("div", { key: 'ed91821385f30305348750dbfffec5fdd7b4dbb8', 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: '3e419585214883c878a8e84c440dbd29d590002d', "aria-hidden": "true", class: "w-20 h-20 mt-8" }, h("eds-icon-wrapper", { key: '051fa9c714d5c077d5d96ec9b92f8a744ec123bc', icon: this.copied ? 'success' : 'copy', onClick: () => this.copyToClipboard() })), h("span", { key: '707950ce89cb0c24b1afac42a8801d13659b6bab', class: "sr-only" }, "Copy Code")), this.language && (h("pre", { key: '59923dd4c16cfecafffa2edaaac5ef7579c3f128', class: `language-${this.language} bg-stronger pl-8 pb-8`, role: "region", "aria-label": `Code block in ${this.language}` }, h("code", { key: '8c708992c04029d71685ad8922383ecdda05ac3c', innerHTML: this.getHighlightedCode() })))));
+        return (h("div", { key: '2c5addd195dc8d930db643e95ecc52410dd94052', class: "relative bg-stronger rounded-sm" }, h("div", { key: 'aea2d891f9e5d57d4b8390cff4597cb8edd163a1', 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: '41e2d463bde145f901eae42dda68091a9a42e3ef', "aria-hidden": "true", class: "w-20 h-20 mt-8" }, h("eds-icon-wrapper", { key: '7285b81dd936c770b09b4a36bed8c8ba2a87da99', icon: this.copied ? 'success' : 'copy', onClick: () => this.copyToClipboard() })), h("span", { key: 'a12d74735064478480544cc4b5cf14d7b028b1a8', class: "sr-only" }, "Copy Code")), this.language && (h("pre", { key: '2fcde4f271059ac98cb3b1b6bffbf4564ccf795b', class: `language-${this.language} bg-stronger pl-8 pb-8`, role: "region", "aria-label": `Code block in ${this.language}` }, h("code", { key: '68a8b83f492e7b0eb2916a063e28a4293e6a988f', innerHTML: this.getHighlightedCode() })))));
     }
     get el() { return this; }
     static get style() { return EdsCodeBlockStyle0; }

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

@@ -33,7 +33,7 @@ const EdsCookiesPreference$1 = /*@__PURE__*/ proxyCustomElement(class EdsCookies
         }
     }
     render() {
-        return (h("div", { key: '030dd5db2221d5613fae0fb215cac7c20c815c2b' }, h("eds-link", { key: '61d1bdf5e4299e65d980a08d25bec93b089f5330', 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: '64edfc7f4d83f6185be6c74707115ec478628c6b' }, h("eds-link", { key: 'd2c07e20ae1e67753b17f017bd5efa9b1e722fec', 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; }
 }, [0, "eds-cookies-preference", {

package/dist/components/eds-dropdown2.js

@@ -17,10 +17,12 @@ const EdsDropdown = /*@__PURE__*/ proxyCustomElement(class EdsDropdown extends H
          * Toggles the visibility of the dropdown and manages focus.
          */
         this.handleClick = () => {
-            var _a;
+            var _a, _b;
             this.isOpen = !this.isOpen;
             if (this.isOpen) {
-                this.focusIndex = 0;
+                // refresh focusables each open in case slot changed
+                this.focusableItems = Array.from(((_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.querySelectorAll('a, button, [role="menuitem"]')) || []);
+                this.focusIndex = this.focusableItems.length ? 0 : -1;
                 this.focusItem();
             }
             else {
@@ -31,7 +33,7 @@ const EdsDropdown = /*@__PURE__*/ proxyCustomElement(class EdsDropdown extends H
                 category: 'ui-component',
                 parentContext: null,
                 tag: this.host.tagName.toLowerCase(),
-                name: ((_a = this.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+                name: ((_b = this.label) === null || _b === void 0 ? void 0 : _b.toLowerCase()) || '',
                 action: this.isOpen ? 'expanded' : 'collapsed'
             });
         };
@@ -43,9 +45,14 @@ const EdsDropdown = /*@__PURE__*/ proxyCustomElement(class EdsDropdown extends H
         this.dropdownPos = 'left';
         this.dropdownOffset = true;
         this.intent = 'tertiary';
+        this.autoClose = true;
+        this.noCloseSelector = '[data-dropdown-no-close]';
         this.isOpen = false;
         this.focusIndex = -1;
     }
+    async close() {
+        this.closeDropdown();
+    }
     /**
      * Closes the dropdown when a click occurs outside of it.
      * @param {Event} e - The click event.
@@ -105,19 +112,55 @@ const EdsDropdown = /*@__PURE__*/ proxyCustomElement(class EdsDropdown extends H
         var _a;
         this.focusableItems = Array.from(((_a = this.dropdownContent) === null || _a === void 0 ? void 0 : _a.querySelectorAll('a, button')) || []);
     }
+    handleHostInternalClick(ev) {
+        var _a;
+        if (!this.isOpen || !this.panelEl) {
+            return;
+        }
+        const path = (((_a = ev.composedPath) === null || _a === void 0 ? void 0 : _a.call(ev)) || []);
+        const clickedInsidePanel = path.includes(this.panelEl);
+        if (!clickedInsidePanel) {
+            return;
+        }
+        // Check if element has explicit close attribute
+        const hasCloseAttribute = path.some((t) => {
+            var _a;
+            const n = t;
+            return (_a = n === null || n === void 0 ? void 0 : n.closest) === null || _a === void 0 ? void 0 : _a.call(n, '[data-dropdown-close]');
+        });
+        // If element has data-dropdown-close, always close regardless of autoClose setting
+        if (hasCloseAttribute) {
+            setTimeout(() => this.closeDropdown(), 0);
+            return;
+        }
+        // If autoClose is disabled and no explicit close attribute, don't close
+        if (!this.autoClose) {
+            return;
+        }
+        // Auto-close mode: close unless clicked element opts out
+        const shouldNotClose = path.some((t) => {
+            var _a;
+            const n = t;
+            return (_a = n === null || n === void 0 ? void 0 : n.closest) === null || _a === void 0 ? void 0 : _a.call(n, this.noCloseSelector);
+        });
+        if (!shouldNotClose) {
+            // Defer to allow the item's own click (e.g., router navigation) to run first
+            setTimeout(() => this.closeDropdown(), 0);
+        }
+    }
     /**
      * Renders the dropdown component and displays its content when open.
      * @returns {JSX.Element} The rendered dropdown component.
      */
     render() {
-        return (h("div", { key: '31e8b1fd4e146cbcad4d74bd78dff1cd1e1950bd', class: "z-focus relative", ref: (el) => (this.dropdownContent = el) }, h("eds-button", { key: '7021a0b0ff66780a324d7d9d1f6cff250ab64178', 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: '904fd2a7f727a8b3966eab6cf9ebdb0efa474ae0', role: "menu", class: {
+        return (h("div", { key: 'e31acbda3428f47fe32cfe550cf00c53374da215', class: "z-focus relative", ref: (el) => (this.dropdownContent = el) }, h("eds-button", { key: 'ce3e11ecee4f603c3ba0e003fccf3fe81289f4c8', 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: '59f8533409171401ed73eac8d307e4eafbde9209', ref: (el) => (this.panelEl = el), 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: 'b416621930c7117775fef2ee91bdca0f660302f5' }))));
+            }, style: { display: this.isOpen ? 'block' : 'none' }, "aria-label": "Dropdown", "aria-hidden": !this.isOpen }, h("slot", { key: '675839893bf667a7a05a63e552935bb1a5874b73' }))));
     }
     get host() { return this; }
     static get style() { return EdsDropdownStyle0; }
@@ -130,9 +173,12 @@ const EdsDropdown = /*@__PURE__*/ proxyCustomElement(class EdsDropdown extends H
         "dropdownPos": [1, "dropdown-pos"],
         "dropdownOffset": [4, "dropdown-offset"],
         "intent": [1],
+        "autoClose": [4, "auto-close"],
+        "noCloseSelector": [1, "no-close-selector"],
         "isOpen": [32],
-        "focusIndex": [32]
-    }, [[8, "click", "handleWindowClick"], [8, "keydown", "handleKeyDown"]]]);
+        "focusIndex": [32],
+        "close": [64]
+    }, [[8, "click", "handleWindowClick"], [8, "keydown", "handleKeyDown"], [0, "click", "handleHostInternalClick"]]]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/eds-feedback.js

@@ -63,7 +63,7 @@ const EdsFeedback$1 = /*@__PURE__*/ proxyCustomElement(class EdsFeedback extends
         const HeadingTag = this.headingLevel;
         const levelNum = this.headingLevel.replace('h', '');
         const headingClass = `f-heading-${levelNum.padStart(2, '0')} my-4`;
-        return (h("div", { key: '58d69e0acbaca740439666bb9da015eaa81d160a', class: "grid inline" }, h(HeadingTag, { key: 'f7b066a56636e6555ace1b4947e00c293961b4ca', class: headingClass }, this.label), h("p", { key: '9bfb1903e25ba6c1d53849874f3309845c1b86dc', class: "f-body-01 text-light" }, this.description), h("eds-rating", { key: '785ea01ac3d2f40bb148d52c9c18698c89424175', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: '16d5b1ab0ab56a5e320a878f8259dc643b533e16', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
+        return (h("div", { key: 'd197c6324cca1bea1cb69000cfb0a4776285eeea', class: "grid inline" }, h(HeadingTag, { key: '8a09b89f2732d60e470a16b818467768c0f4e474', class: headingClass }, this.label), h("p", { key: '6a2c35b73b8bde9d96841d60d0761581efbd4047', class: "f-body-01 text-light" }, this.description), h("eds-rating", { key: '0fb0acbbe7c473f2de117e0b0028cafc2f959ed8', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: '8aea027f1c37cbe9ff22555ec00ed183d8c52f0a', 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

@@ -57,9 +57,9 @@ const EdsFooter = /*@__PURE__*/ proxyCustomElement(class EdsFooter extends HTMLE
      * legal links such as "Cookies Preferences" and copyright information.
      */
     render() {
-        return (h("footer", { key: '844c47f7e5119a577b03d1bf4bb598e891d7f8c7' }, 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: '0a6f03f13cf5513758740ce6f3d3357cac413826', class: `border-softest ${this.social ? 'border-t-2' : ''} pb-28 pt-20 md:pt-28` }, h("div", { key: '1751d052c529e46de47bbe09ef24621b546b1514', class: "container flex items-center gap-20 lg:flex-nowrap" }, h("div", { key: '86b3c5fac384d1ae0f310d43f9a4492ce96866cf', class: "flex items-center gap-x-12" }, h("a", { key: '7fed16c8a7bb7c15ea59438427987303a5a0ae14', 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-europe_en", "aria-label": "Learn about Horizon Europe funding" }, h("eds-img", { key: '491b2691d011359df1dc24a2408347574a893ca8', width: 54, height: 41, src: "https://www.ebrains.eu/flags/4x3/eu.svg", alt: "European Union Flag" }))), h("div", { key: '50e5d853ee86066c932dd5fa3f04706d21b0d3aa' }, h("div", { key: 'ba36e26f29e1aee7d7da4cd91235419b18ab813a', class: "f-ui-04 text-light" }, h("p", { key: '120302d9cdad309da91bcd9f82e81f707f5f5b48' }, this.fundedBy), h("div", { key: '222a27fb7f085750312654c11d03793f02e29676', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block" }, h("span", { key: '56db11dc4295c21c5e9d54cbc5568c5889f2dbb9', class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline mr-4" }, "\u00A9 ", this.rightsReserved), this.enableCookiesSettings ? (h("eds-link", { label: this.cookiesPreferences, intent: "underline", "extra-class": "f-ui-04", onClick: () => {
+        return (h("footer", { key: '5e629d1f5f06ce62843f67b296c94b18765d8100' }, 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: '68966997037f0dd88c9fb2afcc39514aefa5ff8d', class: `border-softest ${this.social ? 'border-t-2' : ''} pb-28 pt-20 md:pt-28` }, h("div", { key: 'd3ec3c9341e7509b2f4771ce0f83fbf4913b4e3e', class: "container flex items-center gap-20 lg:flex-nowrap" }, h("div", { key: '30774f2c9c1c5113c8f178af2ad5dbc01b01c8d2', class: "flex items-center gap-x-12" }, h("a", { key: '1939784cb357e1a0a9fc6a00c75953c37d7cac90', 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-europe_en", "aria-label": "Learn about Horizon Europe funding" }, h("eds-img", { key: 'b9dc32ad675188d061d01e6b11cda37c4edd5e29', width: 54, height: 41, src: "https://www.ebrains.eu/flags/4x3/eu.svg", alt: "European Union Flag" }))), h("div", { key: '1642eaf31c946bf3f7bd3d235dccd1a66f4de7d8' }, h("div", { key: '4a4b1bf11ebf31a9a0f1735cb0720bdbdab07943', class: "f-ui-04 text-light" }, h("p", { key: '24226946123a5e632d393be9a24971ff9e07b355' }, this.fundedBy), h("div", { key: 'a21829ec3d7d74027a14ee419f37d2ec326b7154', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block" }, h("span", { key: '4791eb4b178cb07f3983f8aa6f3ed0e60918f929', class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline mr-4" }, "\u00A9 ", this.rightsReserved), this.enableCookiesSettings ? (h("eds-link", { label: this.cookiesPreferences, intent: "underline", "extra-class": "f-ui-04", onClick: () => {
                 this.toggleCookiesConsent();
-            } })) : null))), h("div", { key: '221f15b6c92e91835dcc2efa3d2247b055690a22', class: "ml-auto pl-12" }, this.enableScrollTop ? (h("div", { id: "toTop", class: "transition-all transition duration-75 opacity-0" }, h("eds-button", { id: "backToTop", "aria-label": this.backToTopAriaLabel, intent: "ghostInverse", icon: "chevron-up", onClick: this.backToTop, tabindex: "-1" }))) : null)))));
+            } })) : null))), h("div", { key: '9d1173a7b4db564de8fa2ffb85d2b7db724bef95', class: "ml-auto pl-12" }, this.enableScrollTop ? (h("div", { id: "toTop", class: "transition-all transition duration-75 opacity-0" }, h("eds-button", { id: "backToTop", "aria-label": this.backToTopAriaLabel, intent: "ghostInverse", icon: "chevron-up", onClick: this.backToTop, tabindex: "-1" }))) : null)))));
     }
     get el() { return this; }
     static get style() { return EdsFooterStyle0; }

package/dist/components/eds-form.js

@@ -234,8 +234,8 @@ const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLEle
         this.__attachShadow();
         this.form = createEvent(this, "form", 7);
         this.name = 'eds-form';
-        this.title = undefined;
-        this.description = undefined;
+        this.title = 'Form Title';
+        this.description = 'Form Description';
         this.setFormUrl = true;
         this.formBtn = true;
         this.formBtnLabel = 'Submit';
@@ -366,6 +366,7 @@ const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLEle
         return formData;
     }
     makeFormData() {
+        var _a;
         const formData = new FormData();
         // Add the form name
         formData.append('form_name', this.name);
@@ -377,6 +378,37 @@ const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLEle
             // Append each key-value pair to the FormData object.
             formData.append(key, this.values[key]);
         });
+        // 2) Only do the (slower) DOM scan if we actually have file fields in the config
+        const hasFileField = (_a = this.parsedFields) === null || _a === void 0 ? void 0 : _a.some((f) => (f === null || f === void 0 ? void 0 : f.type) === 'file');
+        if (hasFileField && this.formEl) {
+            // Find file inputs inside each eds-input-field's shadowRoot
+            const hosts = Array.from(this.formEl.querySelectorAll('eds-input-field'));
+            hosts.forEach((host) => {
+                const root = host.shadowRoot;
+                if (!root)
+                    return;
+                const fileInputs = Array.from(root.querySelectorAll('input[type="file"][name]'));
+                console.log(fileInputs);
+                fileInputs.forEach((fi) => {
+                    const name = fi.name;
+                    const files = fi.files ? Array.from(fi.files) : [];
+                    if (files.length > 0) {
+                        // Append each file under the same field name (backend can use request.files.getlist(name))
+                        files.forEach((file) => formData.append(name, file));
+                    }
+                });
+            });
+            // (Optional) mark that this payload includes files (handy in logs / policies)
+            // formData.set('_has_files', '1');
+        }
+        formData.forEach((value, key) => {
+            if (value instanceof File) {
+                console.log(`File field: ${key}, File name: ${value.name}, File size: ${value.size}`);
+            }
+            else {
+                console.log(`Field: ${key}, Value: ${value}`);
+            }
+        });
         return formData;
     }
     handleChange(e, field) {
@@ -487,11 +519,11 @@ const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLEle
             message: `${field.name} updated`
         });
     }
-    handleSubmit() {
+    handleSubmit(e) {
         var _a, _b;
-        if (this.isSubmitting) {
+        e === null || e === void 0 ? void 0 : e.preventDefault();
+        if (this.isSubmitting)
             return;
-        }
         this.isSubmitting = true;
         this.validateForm();
         if (this.hasError) {
@@ -586,9 +618,9 @@ const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLEle
         const styleClasses = this.formStyle === 'shadow'
             ? 'bg-inverse effect-shadow shadow-hover border-softer relative rounded-lg border-2 p-32'
             : '';
-        return (h("form", { key: 'ecf49eb81f18b444d059d3bdea4600f4ae594ea9', class: styleClasses, ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: '65137fb770f274431c7906326cdf49e0fee73b18', class: "flex flex-col gap-y-24" }, this.title && (h("span", { key: 'e4c5b4a7883c4569a657cc234f18f995480ec8df', role: "heading", class: "f-heading-04" }, this.title)), this.description && h("span", { key: '65528e4600127f1cff4ce0e5be6f8a6bddc4c864', class: "f-body-02 text-light" }, this.description), h("slot", { key: '6230035a050386763723c2b60bd5e81b912762d7' })), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), this.parsedGroups
+        return (h("form", { key: 'a2e7de988c60301b92f6b756702bfcc78e9f3d90', class: styleClasses, ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: '22172631522aa6094d8b163b0774c57ef4404d60', class: "flex flex-col gap-y-24" }, this.title && (h("span", { key: '0597bbacbaf5f3d9ec1ab938cf755a10baafdf21', role: "heading", class: "f-heading-04" }, this.title)), this.description && h("span", { key: '5e636072bc2692071bd0b518af721999cc8b511e', class: "f-body-02 text-light" }, this.description), h("slot", { key: '79d21172208eb77ec6460e817d3c7bc3a680c806' })), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), this.parsedGroups
             .filter((g) => Array.isArray(buckets[g.id]) && buckets[g.id].length > 0)
-            .map((g) => (h("div", { class: "container mt-32", key: g.id }, h("span", { class: "f-body-02" }, h("b", null, g.title)), h("div", { class: "border-group mt-32 mb-32 flex flex-col gap-y-24" }, buckets[g.id].map((f) => this.renderField(f)))))), h("div", { key: '8116d30248f8461a842365470da9915200531028', class: "flex flex-col mt-32 gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f))), this.formBtn && (h("div", { key: 'e2f1d3ca6a9f6a3b44c45e576150505c49e41dd1', class: "mt-32" }, h("eds-button", { key: 'e312bf08b5db526c00497fafaa9476a225919aaf', intent: this.buttonIntent, label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
+            .map((g) => (h("div", { class: "mt-32", key: g.id }, h("span", { class: "f-body-02" }, h("b", null, g.title)), h("div", { class: "border-group mt-32 mb-32 flex flex-col gap-y-24" }, buckets[g.id].map((f) => this.renderField(f)))))), h("div", { key: 'b99941e53dec1c8c4e167d8588d6e86793838d1a', class: "flex flex-col mt-32 gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f))), this.formBtn && (h("div", { key: '27365a4d7d8150ff4e94ffb3d27d011400c8c412', class: "mt-32" }, h("eds-button", { key: '66f89292b95d9549e3718d7e499b0724762127c6', intent: this.buttonIntent, label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/eds-frame.js

@@ -76,7 +76,7 @@ const EdsFrame$1 = /*@__PURE__*/ proxyCustomElement(class EdsFrame extends HTMLE
         }
     }
     render() {
-        return (h("div", { key: '665bc189cd905a55a9c6ac31eb2ec82853552f34', class: this.articleClasses() }, h("div", { key: '6ad6183a94cd0cb26d3e5641c5e584e8afc652d7', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: '85bd9a7a4475ca3664cadf17ef1e729643c758f6', class: "f-ui-02" }, this.frameLabel), !this.iframeError && this.url && this.urlLabel ? (h("eds-link", { label: this.urlLabel, url: this.url, intent: this.intent, class: "ml-auto", external: true, disabled: false, icon: "arrow-diagonal" })) : null), h("div", { key: '4799d59442cabb05f3bfea26a02db22a429266e6', class: "border-softer" }, this.iframeError ? (h("div", { class: "container ml-8 mr-8 mt-16" }, this.errorMessage)) : (h("iframe", { src: this.frameSrc, width: "100%", height: this.getFrameHeight(), title: this.frameLabel, frameBorder: "0", allowFullScreen: true })))));
+        return (h("div", { key: '7b4f5eb19460a178b98586aa38088e3dc5625671', class: this.articleClasses() }, h("div", { key: '98aefbd4cab33f14c9aa3152c122a11b24df4a02', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: 'd0cdd2f3354bddc99030ee5215f2bc24b139a261', class: "f-ui-02" }, this.frameLabel), !this.iframeError && this.url && this.urlLabel ? (h("eds-link", { label: this.urlLabel, url: this.url, intent: this.intent, class: "ml-auto", external: true, disabled: false, icon: "arrow-diagonal" })) : null), h("div", { key: '030c560bbd0209160c92bc2d152f8d42484dc86b', class: "border-softer" }, this.iframeError ? (h("div", { class: "container ml-8 mr-8 mt-16" }, this.errorMessage)) : (h("iframe", { src: this.frameSrc, width: "100%", height: this.getFrameHeight(), title: this.frameLabel, frameBorder: "0", allowFullScreen: true })))));
     }
     get el() { return this; }
     static get style() { return EdsFrameStyle0; }

package/dist/components/eds-gauge.js

@@ -50,7 +50,7 @@ const EdsGauge$1 = /*@__PURE__*/ proxyCustomElement(class EdsGauge extends HTMLE
         const textStyle = {
             fontSize: `${fontSize}px`
         };
-        return (h("div", { key: '798a7345ee5c3eeb59b5fe29a39827ce347dc756', role: "progressbar", "aria-valuemin": this.valueMin, "aria-valuemax": this.valueMax, "aria-valuenow": clamped, "aria-label": `Gauge value: ${clamped} of ${this.valueMax}`, class: "relative inline-block rounded-full overflow-hidden", style: containerStyle }, h("div", { key: 'f255f7036a5b11de88fbb32648388905932eb56e', class: "absolute bg-inverse rounded-full", style: maskStyle }), h("div", { key: '2a6dd1d88b32cb2c534f253703a8caa0099f2a43', class: "absolute inset-0 flex items-center justify-center" }, h("span", { key: 'ccbf1852d2f43b925f565c7117aca4a878e7f636', class: "f-body-01 text-default", style: textStyle }, clamped))));
+        return (h("div", { key: '8834b0fc3cb78c0e7926392d04229d67d8deab90', role: "progressbar", "aria-valuemin": this.valueMin, "aria-valuemax": this.valueMax, "aria-valuenow": clamped, "aria-label": `Gauge value: ${clamped} of ${this.valueMax}`, class: "relative inline-block rounded-full overflow-hidden", style: containerStyle }, h("div", { key: 'f9ad68bd6bf19bceb46df1cfe16cdbbc2375099c', class: "absolute bg-inverse rounded-full", style: maskStyle }), h("div", { key: '64a2ba3ba2f104fa018f81949cdabc0fc53eea42', class: "absolute inset-0 flex items-center justify-center" }, h("span", { key: 'ae66f977802793f4e10210e75ddfa53839a9ff6e', class: "f-body-01 text-default", style: textStyle }, clamped))));
     }
     static get style() { return EdsGaugeStyle0; }
 }, [1, "eds-gauge", {

package/dist/components/eds-global-search.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface EdsGlobalSearch extends Components.EdsGlobalSearch, HTMLElement {}
+export const EdsGlobalSearch: {
+    prototype: EdsGlobalSearch;
+    new (): EdsGlobalSearch;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;