@ebrains/components 2.4.1 → 3.1.0

package/dist/collection/components/eds-progress-bar/eds-progress-bar.js

@@ -2,7 +2,9 @@ import { h } from "@stencil/core";
 export class EdsProgressBar {
     constructor() {
         this.value = 0;
-        this.rounded = true;
+        this.showLabel = false;
+        this.variant = 'default';
+        this.labelPaddingX = '3rem';
     }
     /**
      * Method to update the progress value externally.
@@ -13,7 +15,17 @@ export class EdsProgressBar {
     }
     render() {
         const progressValue = Math.min(100, Math.max(0, this.value));
-        // Outer container classes (conditionally rounded)
+        const isBrand = this.variant === 'brand';
+        if (isBrand) {
+            // Build inline styles for label container with custom padding
+            const labelContainerStyle = {
+                paddingLeft: this.labelPaddingX,
+                paddingRight: this.labelPaddingX
+            };
+            // Brand style - minimal container with gradient fill and top-aligned text
+            return (h("div", { class: "w-full" }, this.showLabel && (h("div", { class: "flex items-center pt-16 pb-12 bg-inverse", style: labelContainerStyle }, h("span", { class: "f-ui-03 text-brand-green-dark" }, "Progress: ", progressValue, "%"))), h("div", { role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: "w-full h-10 bg-grey-light overflow-hidden relative" }, h("div", { class: "h-full brand-gradient brand-glow transition-width", style: { width: `${progressValue}%` } }))));
+        }
+        // Default style - original implementation
         const outerClasses = [
             'outer',
             'w-full',
@@ -22,24 +34,21 @@ export class EdsProgressBar {
             'border',
             'border-softer',
             'overflow-hidden',
-            this.rounded ? 'rounded-lg' : '',
             'relative'
         ]
             .filter(Boolean)
             .join(' ');
-        // Fill bar classes (conditionally rounded only when >0)
         const fillClasses = [
             'inner',
             'h-full',
             'transition-all',
             'duration-300',
             'bg-accent',
-            progressValue > 0 && this.rounded ? 'rounded-lg' : '',
             'z-0'
         ]
             .filter(Boolean)
             .join(' ');
-        return (h("div", { key: 'a3a56c8ed86104fb26ce5a3f7d583d02705b59d0', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: outerClasses }, h("div", { key: 'ef56ff5501bfec77174a90dafabdd35210936c9d', class: fillClasses, style: { width: `${progressValue}%` } }), h("div", { key: '69eec5cd3a6b8fec6defa621b69559da47df66a6', class: "absolute inset-0 flex items-center justify-center pointer-events-none z-10" }, h("span", { key: '7fdeea8fbe2e600daca350e67a27fbed9708c1e1', class: "text-default f-body-02" }, progressValue, "%"))));
+        return (h("div", { role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: outerClasses }, h("div", { class: fillClasses, style: { width: `${progressValue}%` } }), h("div", { class: "absolute inset-0 flex items-center justify-center pointer-events-none z-10" }, h("span", { class: "text-default f-ui-01" }, progressValue, "%"))));
     }
     static get is() { return "eds-progress-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -73,7 +82,7 @@ export class EdsProgressBar {
                 "reflect": false,
                 "defaultValue": "0"
             },
-            "rounded": {
+            "showLabel": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -85,11 +94,47 @@ export class EdsProgressBar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether to render with rounded corners."
+                    "text": ""
                 },
-                "attribute": "rounded",
+                "attribute": "show-label",
                 "reflect": false,
-                "defaultValue": "true"
+                "defaultValue": "false"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'brand'",
+                    "resolved": "\"brand\" | \"default\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant for the progress bar.\n- \"default\": Standard progress bar with border and centered text\n- \"brand\": EBRAINS branded progress bar with gradient, glow, and top text"
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
+            "labelPaddingX": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Horizontal padding for the label container (CSS value).\nExamples: \"3rem\", \"48px\", \"2rem\"\nDefault: \"3rem\""
+                },
+                "attribute": "label-padding-x",
+                "reflect": false,
+                "defaultValue": "'3rem'"
             }
         };
     }

package/dist/collection/components/eds-progress-bar/eds-progress-bar.stories.js

@@ -3,22 +3,95 @@ export default {
     component: 'eds-progress-bar',
     argTypes: {
         value: {
-            control: {
-                type: 'range',
-                min: 0,
-                max: 100
-            },
-            description: 'The progress value (0-100)'
+            control: { type: 'range', min: 0, max: 100 },
+            description: 'The progress value (0-100).'
         },
-        rounded: { control: 'boolean' }
+        variant: {
+            control: 'select',
+            options: ['default', 'brand'],
+            description: 'Visual variant: default (standard) or brand (EBRAINS styled).'
+        },
+        showLabel: {
+            control: 'boolean',
+            description: 'Show label above progress bar (brand variant only).'
+        },
+        labelPaddingX: {
+            control: 'text',
+            description: 'Horizontal padding for the label container (CSS value).'
+        }
     },
     args: {
-        value: 50 // Default value
+        value: 50,
+        variant: 'default',
+        showLabel: false,
+        labelPaddingX: '3rem'
     }
 };
 export const Default = {
-    render: (args) => `<eds-progress-bar value="${args.value}" rounded="${args.rounded}"></eds-progress-bar>`,
+    render: (args) => `
+    <eds-progress-bar
+      value="${args.value}"
+      variant="default">
+    </eds-progress-bar>`,
+    args: {
+        value: 50
+    }
+};
+export const DefaultEmpty = {
+    render: () => `
+    <eds-progress-bar value="0" variant="default"></eds-progress-bar>`
+};
+export const DefaultComplete = {
+    render: () => `
+    <eds-progress-bar value="100" variant="default"></eds-progress-bar>`
+};
+export const Brand = {
+    render: (args) => `
+    <eds-progress-bar
+      value="${args.value}"
+      variant="brand"
+      ${args.showLabel ? 'show-label' : ''}>
+    </eds-progress-bar>`,
+    args: {
+        value: 65,
+        showLabel: false
+    }
+};
+export const BrandWithLabel = {
+    render: (args) => `
+    <eds-progress-bar
+      value="${args.value}"
+      variant="brand"
+      show-label
+      label-padding-x="${args.labelPaddingX}">
+    </eds-progress-bar>`,
     args: {
-        value: 50 // Default progress value for the story
+        value: 75,
+        labelPaddingX: '3rem'
     }
 };
+export const BrandComplete = {
+    render: () => `
+    <eds-progress-bar value="100" variant="brand" show-label></eds-progress-bar>`
+};
+export const Comparison = {
+    render: () => `
+    <div style="display: flex; flex-direction: column; gap: 2rem;">
+      <div>
+        <p style="margin-bottom: 0.5rem; font-weight: 500;">Default — 40%</p>
+        <eds-progress-bar value="40" variant="default"></eds-progress-bar>
+      </div>
+      <div>
+        <p style="margin-bottom: 0.5rem; font-weight: 500;">Brand — 40%</p>
+        <eds-progress-bar value="40" variant="brand" show-label></eds-progress-bar>
+      </div>
+      <div>
+        <p style="margin-bottom: 0.5rem; font-weight: 500;">Default — 80%</p>
+        <eds-progress-bar value="80" variant="default"></eds-progress-bar>
+      </div>
+      <div>
+        <p style="margin-bottom: 0.5rem; font-weight: 500;">Brand — 80%</p>
+        <eds-progress-bar value="80" variant="brand" show-label></eds-progress-bar>
+      </div>
+    </div>`
+};

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

@@ -19,7 +19,7 @@
 }
 
 .star.filled {
-    color: var(--green-500);
+    color: var(--brand-green);
     /* Default filled star color */
 }
 
@@ -28,6 +28,15 @@
     transform: scale(1.2);
 }
 
+/* Non-color cue so "filled" reads instantly (not just light-green vs neon):
+   selected stars scale up. Keeps eds-button untouched. */
+.eds-rating__btn {
+    transition: transform 0.15s ease-in-out;
+}
+.eds-rating__btn.is-selected {
+    transform: scale(1.05);
+}
+
 .flex {
     display: flex;
 }

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

@@ -5,6 +5,19 @@ export class EdsRating {
         this.ratingType = 'star';
         this.ratingCount = 5;
         this.selectedRating = 0;
+        this.internalRating = 0;
+    }
+    /**
+     * Watch for changes to the selectedRating prop and sync internal state.
+     */
+    handleSelectedRatingChange(newValue) {
+        this.internalRating = newValue;
+    }
+    /**
+     * Initialize internal rating from prop on component load.
+     */
+    componentWillLoad() {
+        this.internalRating = this.selectedRating;
     }
     /**
      * Lifecycle method that runs when the component has fully loaded.
@@ -26,7 +39,7 @@ export class EdsRating {
         const event = new CustomEvent('parentContext', {
             detail: {
                 componentName: this.el.tagName.toLowerCase(),
-                identifier: this.selectedRating
+                identifier: this.internalRating
             }
         });
         btnElement.dispatchEvent(event);
@@ -36,7 +49,7 @@ export class EdsRating {
      * @param rating - The selected rating value.
      */
     onSelect(rating) {
-        this.selectedRating = rating;
+        this.internalRating = rating;
         this.rating.emit(rating);
         setTimeout(() => {
             const btn = this.buttonRefs[rating - 1];
@@ -50,7 +63,7 @@ export class EdsRating {
         }
         e.preventDefault();
         const increment = key === 'ArrowRight' || key === 'ArrowDown' ? 1 : -1;
-        let next = (this.selectedRating || 1) + increment;
+        let next = (this.internalRating || 1) + increment;
         if (next > this.ratingCount) {
             next = 1;
         }
@@ -60,13 +73,12 @@ export class EdsRating {
         this.onSelect(next);
     }
     render() {
-        return (h("div", { key: '5d1cf924d2a59b4141eac1bd4f122c9cf640cf9c', id: "rating-buttons", role: "group", "aria-labelledby": "rating", class: "stars flex space-x-1 my-8", onKeyDown: (e) => this.handleKeyNav(e) }, Array.from({ length: this.ratingCount }, (_, index) => {
+        return (h("div", { key: '01857f12c63fbe53b95152902ddba594aa736f6f', id: "rating-buttons", role: "group", "aria-labelledby": "rating", class: "stars flex space-x-1 my-8", onKeyDown: (e) => this.handleKeyNav(e) }, Array.from({ length: this.ratingCount }, (_, index) => {
             const starRating = index + 1;
-            const isSelected = starRating <= this.selectedRating;
+            const isSelected = starRating <= this.internalRating;
             // Use the mapping text if available; otherwise, fall back to a generic label.
-            const checked = this.selectedRating === starRating;
-            return (h("eds-button", { ref: (el) => (this.buttonRefs[index] = el), icon: this.ratingType, "aria-label": `${starRating} ${this.ratingType}${starRating > 1 ? 's' : ''}`, onClick: () => this.onSelect(starRating), tabIndex: checked || (this.selectedRating === 0 && index === 0) ? 0 : -1, intent: isSelected ? 'primary' : 'ghost', size: "large", "extra-class": "p-2" // Optional padding or styling for the star button
-            }));
+            const checked = this.internalRating === starRating;
+            return (h("eds-button", { ref: (el) => (this.buttonRefs[index] = el), icon: this.ratingType, "aria-label": `${starRating} ${this.ratingType}${starRating > 1 ? 's' : ''}`, onClick: () => this.onSelect(starRating), tabIndex: checked || (this.internalRating === 0 && index === 0) ? 0 : -1, intent: isSelected ? 'brand' : 'brandLight', class: isSelected ? 'eds-rating__btn is-selected' : 'eds-rating__btn', size: "large" }));
         })));
     }
     static get is() { return "eds-rating"; }
@@ -87,9 +99,15 @@ export class EdsRating {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'star' | 'thumbs-up' | 'thumbs-down'",
-                    "resolved": "\"star\" | \"thumbs-down\" | \"thumbs-up\"",
-                    "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,
@@ -118,12 +136,30 @@ export class EdsRating {
                 "attribute": "rating-count",
                 "reflect": false,
                 "defaultValue": "5"
+            },
+            "selectedRating": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current selected rating value (controlled from parent)."
+                },
+                "attribute": "selected-rating",
+                "reflect": false,
+                "defaultValue": "0"
             }
         };
     }
     static get states() {
         return {
-            "selectedRating": {}
+            "internalRating": {}
         };
     }
     static get events() {
@@ -145,4 +181,10 @@ export class EdsRating {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "selectedRating",
+                "methodName": "handleSelectedRatingChange"
+            }];
+    }
 }

package/dist/collection/components/eds-section/eds-section-core/eds-section-core.js

@@ -20,7 +20,7 @@ export class EdsSectionCore {
     }
     render() {
         const TagType = this.tag; // Set dynamic tag type (div or section)
-        return (h(TagType, { key: '3c75c9cda6a41c0d4243c3c111d7cc95f3efb97b' }, h("eds-section-heading", { key: '05b4d011aa1b8f489fe8aa0fd6d43b824da03370', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '1749580398e56d38d83d5f5fdd87f43867a554cb' })));
+        return (h(TagType, { key: '635230d1ec9a0dcc945990a6a58dc3508345d984' }, h("eds-section-heading", { key: '0b6b94df22af707cbd6964132f3a5190b4b7e83c', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '8834c29c25249fb5c384fb5d51866eadb93a97d6' })));
     }
     static get is() { return "eds-section-core"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-section/eds-section-heading/eds-section-heading.js

@@ -36,12 +36,12 @@ export class EdsSectionHeading {
     render() {
         const TagType = this.tag; // Dynamically set tag type for the container
         const HeadingTag = this.headingLevel; // Dynamically set heading level
-        return (h(TagType, { key: '18614645f329d9ccfe6104b544ff306c6190173a', class: {
+        return (h(TagType, { key: '7275284a1158ab982f1e53117b72738d0a001c97', class: {
                 'ui-section-header flex flex-wrap items-center justify-between gap-x-12 gap-y-8': true,
                 container: this.withContainer,
                 'pt-48': this.spacingLarge,
                 'pt-28': !this.spacingLarge
-            } }, h(HeadingTag, { key: 'ce699077313e9ee8d8a66e68af667451351a35a6', class: this.getHeadingClass() }, this.sectionTitle)));
+            } }, h(HeadingTag, { key: 'a3c68baa56a0337348405c88544225ed7c7ff0ed', class: this.getHeadingClass() }, this.sectionTitle)));
     }
     static get is() { return "eds-section-heading"; }
     static get properties() {

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

@@ -265,19 +265,24 @@
 }
 
 :host(.theme-minimal) .sidebar-item-content:hover {
-  background-color: var(--grey-300);
+  background-color: rgba(0, 255, 157, 0.05);
+  color: var(--brand-black, #07140D);
 }
 
 :host(.theme-minimal) .sidebar-item.active > .sidebar-item-content {
-  background-color: var(--grey-400);
-  border-left: 3px solid var(--grey-900);
+  background-color: rgba(0, 255, 157, 0.1);
+  border-left: 3px solid var(--brand-green-dark, #00C87B);
   padding-left: calc(1rem - 3px);
+  color: var(--brand-black, #07140D);
+  font-weight: 500;
 }
 
 :host(.theme-minimal.collapsed) .sidebar-item.active > .sidebar-item-content {
   border-left: none;
   border-radius: 0.375rem;
   padding-left: 0.75rem;
+  background-color: rgba(0, 255, 157, 0.1);
+  color: var(--brand-black, #07140D);
 }
 
 /* Adjust active state indents for each level */
@@ -339,7 +344,7 @@
 }
 
 :host(.theme-ebrains) .sidebar-item.active > .sidebar-item-content {
-  background-color: var(--green-600, #22c55e);
+  background-color: var(--brand-green-dark, #22c55e);
   color: white;
 }
 

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

@@ -142,13 +142,13 @@ export class EdsSidebar {
                     e.preventDefault();
                     this.handleItemClick(item, e);
                 }
-            } }, hasChildren && (h("span", { class: "sidebar-toggle mt-2 -ml-4", "aria-hidden": "true" }, h("eds-icon-wrapper", { icon: isOpen ? 'chevron-down' : 'chevron-right' }))), h("span", { class: "sidebar-link-wrapper" }, h("eds-link", { label: item.title, url: item.url || '#', intent: isActive ? 'strong' : 'weak', size: "small", "aria-label": item.title, "extra-class": "sidebar-link", tabindex: "-1" }))), hasChildren && isOpen && (h("ul", { id: childrenId, class: "sidebar-children" }, item.children.map((child) => this.renderItem(child, level + 1))))));
+            } }, hasChildren && (h("span", { class: "sidebar-toggle -ml-4", "aria-hidden": "true" }, h("eds-icon-wrapper", { name: isOpen ? 'chevron-down' : 'chevron-right' }))), h("span", { class: "sidebar-link-wrapper" }, h("eds-link", { label: item.title, url: item.url || '#', intent: isActive ? 'strong' : 'weak', size: "small", "aria-label": item.title, "extra-class": "sidebar-link", tabindex: "-1" }))), hasChildren && isOpen && (h("ul", { id: childrenId, class: "sidebar-children" }, item.children.map((child) => this.renderItem(child, level + 1))))));
     }
     render() {
-        return (h(Host, { key: '4334d20e5d72671243633253910ab05b4da013da', class: {
+        return (h(Host, { key: 'f5221c19e8148ca62a76fb470a4aa6786c3e41b5', class: {
                 'eds-sidebar': true,
                 [`theme-${this.theme}`]: true
-            } }, h("nav", { key: '319f6f42416d4229f1b011bf1216b39c8627302d', class: "sidebar-nav", "aria-label": "Sidebar" }, h("ul", { key: '687ceae3eca3e844e8f6a361db4a76d127d27813', class: "sidebar-list" }, this.parsedItems.map((item) => this.renderItem(item, 0))))));
+            } }, h("nav", { key: '0a975a10a3892f6eabaf2a1c2be21963f0e76549', class: "sidebar-nav", "aria-label": "Sidebar" }, h("ul", { key: '498436fa1f4ec7ff2f3feea843fe58b415d20a3f', class: "sidebar-list" }, this.parsedItems.map((item) => this.renderItem(item, 0))))));
     }
     static get is() { return "eds-sidebar"; }
     static get encapsulation() { return "shadow"; }
@@ -173,7 +173,7 @@ export class EdsSidebar {
                     "references": {
                         "SidebarItem": {
                             "location": "local",
-                            "path": "/Users/nigeor/Documents/Projects/EBRAINS/ebrains-ui-ecosystem/packages/components/src/components/eds-sidebar/eds-sidebar.tsx",
+                            "path": "/Users/nikolaosgeorgomanolis/Documents/EBRAINS/Projects/ebrains-ui-ecosystem/packages/components/src/components/eds-sidebar/eds-sidebar.tsx",
                             "id": "../../../packages/components/src/components/eds-sidebar/eds-sidebar.tsx::SidebarItem"
                         }
                     }

package/dist/collection/components/eds-social-networks/eds-social-networks.css

@@ -34,6 +34,14 @@ menu {
     padding: 0;
 }
 
+.f-ui-01 {
+  font-family: var(--f-ui-01-fontFamily);
+  font-weight: var(--f-ui-01-fontWeight);
+  font-size: var(--f-ui-01-fontSize);
+  line-height: var(--f-ui-01-lineHeight);
+  letter-spacing: var(--f-ui-01-letterSpacing);
+}
+
 .f-ui-02 {
     font-family: var(--f-ui-02-fontFamily);
     font-weight: var(--f-ui-02-fontWeight);
@@ -83,6 +91,10 @@ menu {
     color: var(--grey-600);
 }
 
+.text-inverse {
+    color: var(--white);
+}
+
 .hover\:text-default:hover {
     color: var(--black);
 }

package/dist/collection/components/eds-social-networks/eds-social-networks.js

@@ -45,13 +45,17 @@ export class EdsSocialNetworks {
             }
         ];
         this.heading = 'Follow EBRAINS to keep up-to-date';
+        this.variant = 'default';
     }
     /**
      * Renders the component's HTML structure with links to EBRAINS social profiles.
      * Each social network link uses the `eds-link` component with specific classes and styles.
      */
     render() {
-        return (h("nav", { key: 'a18759794a383be1ce670ff3ac9f251b3c7327a5', "aria-label": "Social media" }, h("p", { key: '404fbffecd29c6efdfc8ade90f0da9d68e6c7b8e', class: "f-ui-02" }, this.heading), h("ul", { key: '959079149753b1c13e974dd610e3109e1f54c6f6', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm", external: true, "aria-label": `EBRAINS on ${network.label}`, url: network.url, icon: network.icon, intent: "strong" })))))));
+        const isInverse = this.variant === 'inverse';
+        const textClass = isInverse ? 'text-inverse' : '';
+        const linkIntent = isInverse ? 'inverse' : 'strong';
+        return (h("nav", { key: '924bdf5a32b65cd0968ad92461cb8203f3305fce', "aria-label": "Social media" }, h("p", { key: 'f406d71ed2d7ff9048e5db05f5ad62566081aa45', class: `f-ui-02 ${textClass}` }, this.heading), h("ul", { key: '40d000bc78780d7ec3c0c9bf2e10ec0a26f3b72e', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { external: true, "aria-label": `EBRAINS on ${network.label}`, url: network.url, icon: network.icon, intent: linkIntent })))))));
     }
     static get is() { return "eds-social-networks"; }
     static get encapsulation() { return "shadow"; }
@@ -84,6 +88,27 @@ export class EdsSocialNetworks {
                 "attribute": "title",
                 "reflect": false,
                 "defaultValue": "'Follow EBRAINS to keep up-to-date'"
+            },
+            "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 social networks.\n- 'default': Light background with dark text\n- 'inverse': Dark/black background with white text"
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'default'"
             }
         };
     }

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

@@ -15,10 +15,10 @@
   }
 }
 
-.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-ui-01 {
+  font-family: var(--f-ui-01-fontFamily);
+  font-weight: var(--f-ui-01-fontWeight);
+  font-size: var(--f-ui-01-fontSize);
+  line-height: var(--f-ui-01-lineHeight);
+  letter-spacing: var(--f-ui-01-letterSpacing);
 }

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

@@ -4,7 +4,7 @@ export class EdsSpinner {
         this.size = 'md';
         this.variant = 'secondary';
         this.message = undefined;
-        this.background = 'var(--grey-200)';
+        this.background = 'var(--grey-light)';
         this.fullscreen = false;
     }
     get spinnerSize() {
@@ -39,8 +39,8 @@ export class EdsSpinner {
     }
     render() {
         // derive colors from variant
-        const borderColor = this.variant === 'primary' ? 'var(--grey-900)' : 'var(--grey-400)';
-        const bottomColor = this.variant === 'primary' ? 'var(--green-400)' : 'var(--grey-900)';
+        const borderColor = this.variant === 'primary' ? 'var(--brand-black)' : 'var(--grey-dark)';
+        const bottomColor = this.variant === 'primary' ? 'var(--brand-green)' : 'var(--brand-black)';
         const spinnerStyle = Object.assign({ width: this.spinnerSize, height: this.spinnerSize, border: `${this.spinnerThickness} solid ${borderColor}`, borderBottomColor: bottomColor }, (!this.fullscreen && { display: 'inline-block' }));
         // Overlay style: use fixed positioning for fullscreen,
         // and absolute positioning for inline mode.
@@ -71,7 +71,7 @@ export class EdsSpinner {
                 alignItems: 'center',
                 justifyContent: 'center'
             };
-        return (h(Host, { key: '28271d7eced2bc3d69538aa490d623167affd590' }, h("div", { key: '2a8987cb80c67a42f18ac0db8c0078a90d9fd97a', class: "spinner-overlay", style: overlayStyle }, h("span", { key: 'c6267576391c24c41ceb0141dd897f590033b26f', class: "spinner", style: spinnerStyle }), this.message && h("p", { key: 'ae67369899652f6ecc9c9411fd62a68a437553c5', class: "f-body-01" }, this.message))));
+        return (h(Host, { key: 'c09fa07856848a03aab44bbb56ecdd66a986bb40' }, h("div", { key: '544c653e9e0457d2063eaefc5ff1fe88de89f14e', class: "spinner-overlay", style: overlayStyle }, h("span", { key: 'e389aa572863a265c9aa68d587ad744f1c8db0a7', class: "spinner", style: spinnerStyle }), this.message && h("p", { key: '5e554fe1b870e673c5b3da3ec2a227e92dd9863d', class: "f-ui-01" }, this.message))));
     }
     static get is() { return "eds-spinner"; }
     static get encapsulation() { return "shadow"; }
@@ -156,7 +156,7 @@ export class EdsSpinner {
                 },
                 "attribute": "background",
                 "reflect": false,
-                "defaultValue": "'var(--grey-200)'"
+                "defaultValue": "'var(--grey-light)'"
             },
             "fullscreen": {
                 "type": "boolean",

package/dist/collection/components/eds-splash-screen/eds-splash-screen.css

@@ -11,19 +11,19 @@
     align-items: center;
     justify-content: center;
   }
-  
+
   .logo-container {
-    width: 200px;
-    height: 200px;
-    margin-bottom: 1rem;
+    width: 300px;
+    height: 60px;
+    animation: loading-pulse 1.5s ease-in-out infinite;
   }
-  
-  .content-container {
-    position: relative;  /* Establishes a positioning context for the spinner overlay */
-    width: 5rem;
-    height: 5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+
+  @keyframes loading-pulse {
+    0%, 100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.6;
+    }
   }
   

package/dist/collection/components/eds-splash-screen/eds-splash-screen.js

@@ -39,7 +39,7 @@ export class EdsSplashScreen {
         if (!this.isVisible) {
             return null;
         }
-        return (h(Host, null, h("div", { class: "splash-overlay", style: { background: this.inverse ? 'black' : 'var(--grey-200)' } }, h("div", { class: "logo-container" }, this.inverse ? (h("eds-logo", { orientation: "vertical", type: "color-white" })) : (h("eds-logo", { orientation: "vertical", type: "color" }))), h("div", { class: "content-container" }, h("eds-spinner", { size: "xs", background: "none", fullscreen: false })))));
+        return (h(Host, null, h("div", { class: "splash-overlay", style: { background: this.inverse ? 'var(--brand-black)' : 'var(--grey-light)' } }, h("div", { class: "logo-container" }, this.inverse ? h("eds-logo", { variant: "negative" }) : h("eds-logo", { variant: "positive" })))));
     }
     static get is() { return "eds-splash-screen"; }
     static get encapsulation() { return "shadow"; }