@ebrains/components 2.4.0 → 3.0.0

package/dist/collection/components/eds-code-block/eds-code-block.css

@@ -1,78 +1,25 @@
 :host {
   display: block;
-  font-family: var(--font-family, 'Courier New', monospace);
-}
-
-pre[class*="language-"] {
-  white-space: pre-wrap;
-  /* Preserve line breaks */
-  word-break: break-word;
-  /* Prevent horizontal scrolling for long lines */
-}
-
-.language {
-  font-weight: bold;
-  text-transform: uppercase;
-}
-
-pre {
-  margin: 0;
-  border-radius: 8px;
-  color: var(--purple-200);
-  overflow: auto;
-}
-
-code {
-  font-family: 'Courier New', monospace;
-}
-
-/* Example color coding for syntax highlighting */
-.token.keyword {
-  color: var(--purple-500);
-}
-
-.token.string {
-  color: var(--green-500);
-}
-
-.token.function {
-  color: var(--cyan-500);
-}
-
-.token.comment {
-  color: var(--grey-700);
 }
 
+/* Outer container */
 .relative {
   position: relative;
 }
 
-.bg-stronger {
-  background-color: var(--grey-900);
+.bg-strongest {
+  background-color: #07140D;
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .rounded-sm {
-  border-radius: 8px;
-}
-
-.rounded-xs {
-  border-radius: 4px;
+  border-radius: 12px;
+  overflow: hidden;
 }
 
+/* Header bar */
 .text-inverse {
-  color: var(--white);
-}
-
-.text-light {
-  color: var(--grey-700);
-}
-
-.text-lighter {
-  color: var(--grey-600);
-}
-
-.text-lightest {
-  color: var(--grey-500);
+  color: #E5E7EB;
 }
 
 .flex {
@@ -83,114 +30,131 @@ code {
   align-items: center;
 }
 
-.justify-center {
-  justify-content: center;
-}
-
 .justify-between {
   justify-content: space-between;
 }
 
-.p-0 {
-  padding: 0rem;
+.p-8 {
+  padding: 0.75rem 1rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 }
 
-.p-12 {
-  padding: 0.75rem;
+/* Language badge */
+.f-ui-03 {
+  font-family: 'IBM Plex Mono', 'Courier New', monospace;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: #00FF9D;
+  background: rgba(0, 255, 157, 0.1);
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  line-height: 1.4;
 }
 
-.p-16 {
-  padding: 1rem;
+/* Copy icon */
+.w-20 {
+  width: 1.25rem;
 }
 
-.p-20 {
-  padding: 1.25rem;
+.h-20 {
+  height: 1.25rem;
 }
 
-.p-6 {
-  padding: 0.375rem;
+.mt-8 {
+  margin-top: 0;
+  cursor: pointer;
+  color: #9CA3AF;
+  transition: color 0.2s ease;
 }
 
-.p-8 {
-  padding: 0.5rem;
+.mt-8:hover {
+  color: white;
 }
 
-.pl-8 {
-  padding-left: 0.5rem;
+/* Code area */
+pre {
+  margin: 0;
+  color: #D1D5DB;
+  overflow-x: auto;
 }
 
-.mb-10 {
-  margin-bottom: 0.625rem;
+pre[class*="language-"] {
+  white-space: pre-wrap;
+  word-break: break-word;
 }
 
-.mb-12 {
-  margin-bottom: 0.75rem;
+.bg-stronger {
+  background: transparent;
 }
 
-.mb-28 {
-  margin-bottom: 1.75rem;
+.pl-8 {
+  padding: 1.25rem 1.5rem;
 }
 
-.pb-16 {
-  padding-bottom: 1rem;
+.pb-8 {
+  padding-bottom: 1.25rem;
 }
 
-.pb-20 {
-  padding-bottom: 1.25rem;
+code {
+  font-family: 'IBM Plex Mono', 'Courier New', monospace;
+  font-size: 0.875rem;
+  line-height: 1.7;
 }
 
-.pb-28 {
-  padding-bottom: 1.75rem;
+/* Syntax highlighting */
+.token.keyword {
+  color: #ff79c6;
 }
 
-.pb-60 {
-  padding-bottom: 3.75rem;
+.token.string {
+  color: #00FF9D;
 }
 
-.pb-8 {
-  padding-bottom: 0.5rem;
+.token.function {
+  color: #8be9fd;
 }
 
-.mt-16 {
-  margin-top: 1rem;
+.token.comment {
+  color: #6B7280;
+  font-style: italic;
 }
 
-.mt-2 {
-  margin-top: 0.125rem;
+.token.tag {
+  color: #ff79c6;
 }
 
-.mt-20 {
-  margin-top: 1.25rem;
+.token.attr-name {
+  color: #8be9fd;
 }
 
-.mt-28 {
-  margin-top: 1.75rem;
+.token.attr-value {
+  color: #00FF9D;
 }
 
-.w-20 {
-  width: 1.25rem;
+.token.punctuation {
+  color: #d8d8d8;
 }
 
-.h-20 {
-  height: 1.25rem;
+.token.operator {
+  color: #8be9fd;
 }
 
-.f-ui-03 {
-  font-family: var(--f-ui-03-fontFamily);
-  font-weight: var(--f-ui-03-fontWeight);
-  font-size: var(--f-ui-03-fontSize);
-  line-height: var(--f-ui-03-lineHeight);
-  letter-spacing: var(--f-ui-03-letterSpacing);
+.token.number {
+  color: #ffb87e;
+}
+
+.token.boolean {
+  color: #d18fff;
 }
 
-.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);
+.token.property {
+  color: #8be9fd;
 }
 
+/* Screen reader only */
 .sr-only {
   position: absolute;
   width: 1px;
@@ -201,4 +165,4 @@ code {
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border-width: 0;
-}
+}

package/dist/collection/components/eds-code-block/eds-code-block.js

@@ -80,7 +80,7 @@ export class EdsCodeBlock {
         return this.code; // Fallback if language is not provided or unsupported
     }
     render() {
-        return (h("div", { key: 'bc74b6be37bcb24700d17b48b5398077e485abd7', class: "relative bg-stronger rounded-sm" }, h("div", { key: 'db0395bfd55eb3394ab2149c5c436f2a54e8afb0', 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: '628ad41f15f3a38abe4b7c382074c8f5a8679a8c', "aria-hidden": "true", class: "w-20 h-20 mt-8" }, h("eds-icon-wrapper", { key: '1c95d57a5d8113d6ab7ebf7da713e058c7cc10f1', icon: this.copied ? 'success' : 'copy', onClick: () => this.copyToClipboard() })), h("span", { key: 'a64b2450b631835b6fc2c15047b09ceea5a9fc95', class: "sr-only" }, "Copy Code")), this.language && (h("pre", { key: '51945cbee1504625b54362505b60f1bd1784bdda', class: `language-${this.language} bg-stronger pl-8 pb-8`, role: "region", "aria-label": `Code block in ${this.language}` }, h("code", { key: '55961aa8278177451e13c929ec7f7065afcac93b', innerHTML: this.getHighlightedCode() })))));
+        return (h("div", { key: '16c785c0fbac538fb0e20c42ed613f5211bea089', class: "relative bg-strongest rounded-sm" }, h("div", { key: '24967e8c714dc62c2366cae6bf6a19566fdeedbf', 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: 'd84c547a7fda762a51279462e6c33642d3ed93b1', "aria-hidden": "true", class: "w-20 h-20 mt-8" }, h("eds-icon-wrapper", { key: 'e784206acb815fdb2df3f7013b32e18b42f47e0d', name: this.copied ? 'checkmark-filled' : 'copy', onClick: () => this.copyToClipboard() })), h("span", { key: '8f68b5adda295c370cfff19602cb8cc140d9a10d', class: "sr-only" }, "Copy Code")), this.language && (h("pre", { key: 'a3c42360f4a5026d8e6f5328f5ed5d8ca724c3ca', class: `language-${this.language} bg-stronger pl-8 pb-8`, role: "region", "aria-label": `Code block in ${this.language}` }, h("code", { key: '96ce7f1cf1cee401bd1a90368c56934116d97d29', innerHTML: this.getHighlightedCode() })))));
     }
     static get is() { return "eds-code-block"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-dropdown/eds-dropdown.js

@@ -50,14 +50,13 @@ export class EdsDropdown {
                 action: this.isOpen ? 'expanded' : 'collapsed'
             });
         };
-        this.icon = undefined;
+        this.icon = 'chevron-down';
         this.label = undefined;
-        this.rounded = false;
         this.ariaLabel = 'Open dropdown';
         this.asNav = true;
         this.dropdownPos = 'left';
         this.dropdownOffset = true;
-        this.intent = 'tertiary';
+        this.intent = 'ghost';
         this.autoClose = true;
         this.noCloseSelector = '[data-dropdown-no-close]';
         this.isOpen = false;
@@ -166,14 +165,13 @@ export class EdsDropdown {
      * @returns {JSX.Element} The rendered dropdown component.
      */
     render() {
-        return (h("div", { key: 'ffc4915b2104e3d2dd347900acd897f56910a674', class: "z-focus relative", ref: (el) => (this.dropdownContent = el) }, h("eds-button", { key: 'ba48bdd7b75fd230bdc2dd564bd477f0349f5426', 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: 'a29b57598a2ed8fcc9593c928df9443fd4449481', ref: (el) => (this.panelEl = el), role: "menu", class: {
+        return (h("div", { key: '52f349afae529afc12461642abf17fcf4870ca6f', class: "z-focus relative", ref: (el) => (this.dropdownContent = el) }, h("eds-button", { key: 'ed1f3366306f7e3d708473e14fc8de5723dba03f', label: this.label, "aria-label": this.ariaLabel, icon: this.icon, iconSmall: false, intent: this.intent, onClick: this.handleClick, "aria-expanded": this.isOpen.toString(), "aria-haspopup": "menu", size: "small", pill: true }), h("nav", { key: 'fb9a559a97ad866b62d4cb2a0f7f828548e24c75', 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: 'ddf003345ef5181b968b4bfd8962805d09d15e89' }))));
+                'right-0': this.dropdownPos === 'right' && !this.dropdownOffset
+            }, style: { display: this.isOpen ? 'block' : 'none' }, "aria-label": "Dropdown", "aria-hidden": !this.isOpen }, h("slot", { key: '6205de74b039cb784bf9b104edfd6f7a03cc5ed1' }))));
     }
     static get is() { return "eds-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -193,12 +191,18 @@ export class EdsDropdown {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "IconName",
+                    "resolved": "\"copy\" | \"arrow-right\" | \"chevron-right\" | \"chevron-left\" | \"chevron-down\" | \"chevron-up\" | \"arrow-left\" | \"arrow-up-right\" | \"close\" | \"add\" | \"edit\" | \"checkmark\" | \"download\" | \"upload\" | \"view\" | \"exit\" | \"caretSort\" | \"bookmark\" | \"createLink\" | \"activity\" | \"account\" | \"analytics\" | \"template\" | \"documentExport\" | \"documentDownload\" | \"trashCan\" | \"chooseItem\" | \"copyLink\" | \"dragHorizontal\" | \"dragVertical\" | \"login\" | \"logout\" | \"move\" | \"replicate\" | \"sortAscending\" | \"sortDescending\" | \"requestQuote\" | \"reset\" | \"resultDraft\" | \"share\" | \"play\" | \"book\" | \"chatOff\" | \"forum\" | \"shareKnowledge\" | \"time\" | \"help\" | \"customerService\" | \"code\" | \"rocket\" | \"compass\" | \"menu\" | \"search\" | \"settings\" | \"notification\" | \"user\" | \"group\" | \"save\" | \"document\" | \"folder\" | \"image\" | \"calendar\" | \"information\" | \"warning\" | \"error\" | \"checkmark-filled\" | \"star\" | \"thumbs-up\" | \"thumbs-down\" | \"twitter\" | \"linkedin\" | \"facebook\" | \"youtube\" | \"mastodon\" | \"bluesky\"",
+                    "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "../../utils/icons",
+                            "id": "../../../packages/components/src/utils/icons.ts::IconName"
+                        }
+                    }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "type",
@@ -210,7 +214,8 @@ export class EdsDropdown {
                     "text": "Icon displayed on the dropdown button."
                 },
                 "attribute": "icon",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "'chevron-down'"
             },
             "label": {
                 "type": "string",
@@ -232,30 +237,6 @@ export class EdsDropdown {
                 "attribute": "label",
                 "reflect": false
             },
-            "rounded": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "type",
-                            "text": "{boolean}"
-                        }, {
-                            "name": "default",
-                            "text": "false"
-                        }],
-                    "text": "Whether the dropdown nav list placeholder has rounded (pill) styling."
-                },
-                "attribute": "rounded",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "ariaLabel": {
                 "type": "string",
                 "mutable": false,
@@ -356,8 +337,8 @@ export class EdsDropdown {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary' | 'tertiary' | 'ghost' | 'ghostInverse'",
-                    "resolved": "\"ghost\" | \"ghostInverse\" | \"primary\" | \"secondary\" | \"tertiary\"",
+                    "original": "'primary' | 'secondary' | 'brand' | 'ghost' | 'neutral'",
+                    "resolved": "\"brand\" | \"ghost\" | \"neutral\" | \"primary\" | \"secondary\"",
                     "references": {}
                 },
                 "required": false,
@@ -365,16 +346,16 @@ export class EdsDropdown {
                 "docs": {
                     "tags": [{
                             "name": "type",
-                            "text": "{'primary' | 'secondary' | 'tertiary' | 'ghost' | 'ghostInverse'}"
+                            "text": "{'primary' | 'secondary' }"
                         }, {
                             "name": "default",
                             "text": "'tertiary'"
                         }],
-                    "text": "Visual intent of the dropdown button.\nOptions include: 'primary', 'secondary', 'tertiary', 'ghost', 'ghostInverse'."
+                    "text": "Visual intent of the dropdown button.\nOptions include: 'primary', 'secondary'."
                 },
                 "attribute": "intent",
                 "reflect": false,
-                "defaultValue": "'tertiary'"
+                "defaultValue": "'ghost'"
             },
             "autoClose": {
                 "type": "boolean",

package/dist/collection/components/eds-feedback/eds-feedback.js

@@ -52,7 +52,7 @@ export class EdsFeedback {
         const HeadingTag = this.headingLevel;
         const levelNum = this.headingLevel.replace('h', '');
         const headingClass = `f-heading-${levelNum.padStart(2, '0')} my-4`;
-        return (h("div", { key: '5405127cfc114d4906617955d7b1069a04ed7b8e', class: "grid inline" }, h(HeadingTag, { key: 'c0a2593d843577323b6a27d0f8fdca3b84063bd5', class: headingClass }, this.label), h("p", { key: '5b7ef9fbd8c5b4a9d3c7c39e3092244d08dde126', class: "f-body-01 text-light" }, this.description), h("eds-rating", { key: '2de1ad00dd21d987bc4a91438500a58a0bcd63a7', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: '3de038a0ae8ee334edde65194356f021e14e7cb3', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
+        return (h("div", { key: '7d01b8aef2854cfdb739553e7f43ed9516199e1e', class: "grid inline" }, h(HeadingTag, { key: 'a0c4a4f93598b955e90416d50260aaa3f644615a', class: headingClass }, this.label), h("p", { key: 'acb2db8fc209faf2d39622e2e858fa1e7403e1b4', class: "f-body-01 text-light" }, this.description), h("eds-rating", { key: 'b0db57c9e3539a5edfecf67cc3a12dd87d74fad9', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: '8d6bf62a18fdb12dddba932be9a5115396fdfd6f', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
     }
     static get is() { return "eds-feedback"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-feedback/eds-feedback.stories.js

@@ -30,7 +30,7 @@ export default {
         }
     },
     args: {
-        headingLevel: 'h1',
+        headingLevel: 'h3',
         type: 'star',
         count: 5,
         label: 'Rate your Experience!',
@@ -55,6 +55,7 @@ export const CustomTextMapping = {
       <eds-feedback
         type="${args.type}"
         count="${args.count}"
+        heading-level="${args.headingLevel}"
         label="${args.label}"
         description="${args.description}"
         text-mapping='${JSON.stringify(args.textMapping)}'
@@ -71,6 +72,7 @@ export const ThumbsUp = {
       <eds-feedback
         type="${args.type}"
         count="${args.count}"
+        heading-level="${args.headingLevel}"
         label="${args.label}"
         description="${args.description}"
         text-mapping='${JSON.stringify(args.textMapping)}'
@@ -87,6 +89,7 @@ export const ThumbsDown = {
       <eds-feedback
         type="${args.type}"
         count="${args.count}"
+        heading-level="${args.headingLevel}"
         label="${args.label}"
         description="${args.description}"
         text-mapping='${JSON.stringify(args.textMapping)}'
@@ -104,6 +107,7 @@ export const TenItems = {
         type="${args.type}"
         count="${args.count}"
         label="${args.label}"
+        heading-level="${args.headingLevel}"
         description="${args.description}"
         text-mapping='${JSON.stringify(args.textMapping)}'
       ></eds-feedback>

package/dist/collection/components/eds-footer/eds-footer.css

@@ -5,6 +5,10 @@ p {
   margin: 0;
 }
 
+footer {
+    position: relative;
+}
+
 .cursor-pointer {
     cursor: pointer;
 }
@@ -25,13 +29,21 @@ p {
 }
 
 .bg-darker {
-    background-color: var(--grey-400);
+    background-color: var(--grey-light);
+}
+
+.bg-strongest {
+    background-color: var(--brand-black);
 }
 
 .border-softest {
     border-color: rgba(0, 0, 0, .05);
 }
 
+.border-inverse-softer {
+    border-color: rgba(255, 255, 255, .15);
+}
+
 .border-t-2 {
     border-top-width: 2px;
 }
@@ -103,7 +115,11 @@ p {
 .effect-focus {
     outline-width: 3px;
     outline-offset: 2px;
-    outline-color: var(--green-500);
+    outline-color: var(--brand-green);
+}
+
+.effect-focus:focus-visible {
+    outline-style: solid;
 }
 
 .focus-visible\:rounded-xs:focus-visible {
@@ -130,6 +146,18 @@ p {
     width: 100%;
 }
 
+.h-auto {
+    height: auto;
+}
+
+.f-ui-02 {
+    font-family: var(--f-ui-02-fontFamily);
+    font-weight: var(--f-ui-02-fontWeight);
+    font-size: var(--f-ui-02-fontSize);
+    line-height: var(--f-ui-02-lineHeight);
+    letter-spacing: var(--f-ui-02-letterSpacing);
+}
+
 .f-ui-04 {
     font-family: var(--f-ui-04-fontFamily);
     font-weight: var(--f-ui-04-fontWeight);
@@ -139,7 +167,15 @@ p {
 }
 
 .text-light {
-    color: var(--grey-700);
+    color: var(--grey-light);
+}
+
+.text-default {
+    color: var(--brand-black);
+}
+
+.text-inverse {
+    color: var(--white);
 }
 
 .mt-4 {
@@ -186,6 +222,22 @@ p {
   opacity: 0;
 }
 
+.transition-all {
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+}
+
+.transition {
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+}
+
+.duration-75 {
+    transition-duration: 75ms;
+}
+
 @media (min-width: 750px) {
     .md\:pt-28 {
         padding-top: 1.75rem;

package/dist/collection/components/eds-footer/eds-footer.js

@@ -24,6 +24,7 @@ export class EdsFooter {
             window.scrollTo({ top: 0, behavior: 'smooth' });
         };
         this.social = false;
+        this.variant = 'default';
         this.enableScrollTop = false;
         this.fundedBy = 'EBRAINS is funded by the Horizon Europe Framework Programme.';
         this.rightsReserved = `${new Date().getFullYear()} EBRAINS. All rights reserved.`;
@@ -60,9 +61,13 @@ export class EdsFooter {
     render() {
         const year = new Date().getFullYear();
         const rights = this.rightsReserved || `${year} EBRAINS. All rights reserved.`;
-        return (h("footer", { key: 'bf9d98eea0bd151bf87818b770e85fe0cfa1044f' }, 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: 'c0058cd32e2904e4e08ec46b99a0cbbabb5df588', class: `border-softest ${this.social ? 'border-t-2' : ''} pb-28 pt-20 md:pt-28` }, h("div", { key: '4f2993ccded30ca66da34eca632b62abf02e06d5', class: "container flex items-center gap-20 lg:flex-nowrap" }, h("div", { key: '81efd584b5de410522d338bb6ab4b53096a36868', class: "flex items-center gap-x-12" }, h("a", { key: '5a641163b3cb1549ee886e9029b65a012b31cd85', 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: '6428f6d0b70f802a7eaa81fcce7641f754c0071a', width: 63, height: 50, src: "https://www.ebrains.eu/flags/4x3/eu.svg", alt: "European Union Flag" }))), h("div", { key: 'c3612f7c694abd66831a6c04f2d9f98bc9f8a2dd' }, h("div", { key: '7d16c929479ee8db9d981d6178f17fd832184e29', class: "f-ui-02 text-light" }, h("p", { key: '86c6e3eec115a886a37618963e973004f130950e' }, this.fundedBy), h("div", { key: '13e4e3925ea8f76865684cba29c91653bba0c45d', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block" }, h("span", { key: '21c77485fffbe352edb8501dab07fd6628de62ba', class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline mr-4" }, "\u00A9 ", rights), this.enableCookiesSettings ? (h("eds-link", { label: this.cookiesPreferences, intent: "underline", size: "small", onClick: () => {
+        const isInverse = this.variant === 'inverse';
+        const footerClasses = isInverse ? 'bg-strongest text-inverse' : '';
+        const borderClasses = isInverse ? 'border-inverse-softer' : 'border-softest';
+        const textClasses = isInverse ? 'text-inverse' : 'text-default';
+        return (h("footer", { key: 'ffe47afda9981e367f24d2525a5b21e96f4f3d10', class: footerClasses }, this.social ? (h("div", { class: `${borderClasses} 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", variant: this.variant })))))) : null, h("div", { key: '2e884f06ca55ea5837aabfd7d726a79b72365ab3', class: `${borderClasses} ${this.social ? 'border-t-2' : ''} pb-28 pt-20 md:pt-28` }, h("div", { key: 'f601602dd39c564ce77d978325cbacaa752bd5f0', class: "container flex items-center gap-20 lg:flex-nowrap" }, h("div", { key: '94d6bf12bca8a37560124de2a9114a4566494883', class: "flex items-center gap-x-12" }, h("a", { key: '8c9bf0a41cce7e043311b39c6418d2dc3541694f', 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("svg", { key: '5d0c96911aa0069dd7c0ef6a5690d5ac59dbc737', class: "h-auto w-full", width: "63", height: "50", viewBox: "0 0 640 480", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'bab3fd3f37857e99c2a525b7a9553d4c706d247c', d: "M0 0h640v480H0V0z", fill: "#039" }), h("path", { key: 'e77d6f1fc21f36083196adcb4f6b7a3e70105b0f', d: "M325.032 93.15l17.513-.398-14.401 9.972 5.789 16.53L320 108.639l-13.933 10.615 5.789-16.531-14.399-9.97 17.51.396L320 76.374l5.032 16.775zm0 284.444l17.513-.398-14.401 9.972 5.789 16.53L320 393.083l-13.933 10.615 5.789-16.531-14.399-9.97 17.51.397L320 360.818l5.032 16.776zm-147.25-158.983l5.029 16.761 17.511-.397-14.4 9.969 5.79 16.533-13.933-10.616-13.932 10.616 5.788-16.531-14.401-9.971 17.511.397 5.028-16.761.004-.015.001.003.001-.003.003.015zm77.885-105.334l17.511-.397-14.401 9.971 5.79 16.531-13.932-10.614-13.933 10.615 5.788-16.531-14.4-9.971h.005l-.003-.001 17.51.397 5.033-16.775 5.032 16.775zm-52.729 52.729l17.511-.398h.002l-14.402 9.971 5.79 16.531-13.933-10.615-13.932 10.615 5.789-16.532-14.4-9.97 17.51.397 5.033-16.776 5.032 16.777zm-5.001 125.803l5.027 16.759 17.513-.397-14.401 9.971 5.79 16.531-.005-.005.003.006-13.932-10.615-13.933 10.615 5.788-16.532-14.398-9.97 17.51.396 5.029-16.759.004-.016v.003l.002-.003.003.016zm51.445 47.71l5.027 16.76 17.513-.397-14.401 9.97 5.791 16.532-.004-.004.002.004-13.933-10.615-13.933 10.615 5.788-16.532-14.398-9.97 17.51.397 5.029-16.76.004-.016v.003l.002-.003.003.016zm217.873-104.147l17.511-.397-14.401 9.969 5.79 16.533-13.934-10.616-13.931 10.616 5.789-16.533-14.399-9.969 17.509.397 5.034-16.776 5.032 16.776zm-63.958-95.997l-5.786-16.522 14.401-9.972-17.511.398-5.033-16.778-5.034 16.777-17.51-.398 14.4 9.972-5.789 16.53 13.932-10.614 13.934 10.614-.004-.007zm38.797 42.122l13.934 10.614-.004-.007-5.787-16.524 14.401-9.971-17.51.399-5.033-16.778-5.033 16.777-17.51-.398h-.001l14.399 9.972-5.787 16.529 13.931-10.613zm5.007 127.071l17.51-.397-14.4 9.971 5.79 16.531-13.933-10.614-13.932 10.615 5.788-16.531-14.401-9.971h.005l-.003-.001 17.51.397 5.033-16.775 5.033 16.775zm-51.446 47.711l17.511-.397-14.4 9.97 5.79 16.532-13.933-10.615-13.933 10.615 5.789-16.531-14.401-9.971h.002l17.51.397 5.033-16.776 5.032 16.776z", fill: "#FC0" })))), h("div", { key: '3057a627d8cc6e524f6381f21bb34b549d45021f' }, h("div", { key: 'd6397eaa434f15d415bff0c5171b4f71295dabc3', class: `f-ui-02 ${textClasses}` }, h("p", { key: 'cc9e370cd5b4238fcd76bc8f1f84c54af2873bab' }, this.fundedBy), h("div", { key: '9af9a16cf3cc6fc4223c1b5eac13f96894b92962', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block" }, h("span", { key: 'e86c83c7504f60831dc9d4239b3e2b551b2765b6', class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline mr-4" }, "\u00A9 ", rights), this.enableCookiesSettings ? (h("eds-link", { label: this.cookiesPreferences, intent: "underline", size: "small", onClick: () => {
                 this.toggleCookiesConsent();
-            } })) : null))), h("div", { key: '1c8417017493de5e446bfdeec248948d920c1a95', 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: 'd2dcb8a3a99c5aa368d6d710e125e3a9f8fefd25', 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: isInverse ? 'ghostInverse' : 'ghost', size: "large", icon: "chevron-up", onClick: this.backToTop, tabindex: "-1" }))) : null)))));
     }
     static get is() { return "eds-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -99,6 +104,27 @@ export class EdsFooter {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'inverse'",
+                    "resolved": "\"default\" | \"inverse\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{'default' | 'inverse'}"
+                        }],
+                    "text": "Controls the visual variant of the footer.\n- 'default': Light background with dark text\n- 'inverse': Dark/black background with white text"
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
             "enableScrollTop": {
                 "type": "boolean",
                 "mutable": false,