@ebrains/components 3.1.0 → 3.2.0

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

@@ -55,12 +55,8 @@ const linkStyles = cva([
                 'rounded-full',
                 'aria-disabled:bg-dark aria-disabled:text-lightest'
             ],
-            cta: [
-                'cta-link !px-0 !py-0 !min-h-0 !h-auto'
-            ],
-            'cta-brand': [
-                'cta-link-brand !px-0 !py-0 !min-h-0 !h-auto'
-            ]
+            cta: ['cta-link !px-0 !py-0 !min-h-0 !h-auto'],
+            'cta-brand': ['cta-link-brand !px-0 !py-0 !min-h-0 !h-auto']
         },
         iconSmall: {
             true: '',
@@ -290,7 +286,7 @@ export class EdsLink {
         const labelClasses = this.hideLabelOnSmallScreen
             ? 'hidden lg:flex' // Tailwind example: hidden on small screens, visible on larger
             : '';
-        return (h("a", { key: 'd167c16280b7f0b4c1fcf14f0f0d3468111e715b', class: `${classes || ''}`, href: isInteractive ? safeUrl : undefined, target: this.external && isInteractive ? '_blank' : undefined, rel: this.external && isInteractive ? 'noopener noreferrer' : undefined, tabIndex: isInteractive ? 0 : -1, "aria-label": isIconOnly ? this.ariaLabel || 'Link' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-current": this.current ? 'page' : undefined, role: this.disabled ? 'link' : undefined, download: this.download ? '' : undefined, onClick: (event) => this.handleClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, h("span", { key: '000476a609888f5f848722015ce5e6137f26e371', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), this.label && (h("span", { key: '15232cde31d23c5a466189c69fbdb9db48f08274', class: `${labelClasses} ${this.icon ? (this.iconPos === 'right' ? (this.size === 'large' ? 'pr-4' : 'pr-2') : (this.size === 'large' ? 'pl-4' : 'pl-2')) : ''}` }, this.label)), this.renderRightIcon())));
+        return (h("a", { key: 'a447ffc8ba377ceb4fe0dc199ad7225e222d4cf3', class: `${classes || ''}`, href: isInteractive ? safeUrl : undefined, target: this.external && isInteractive ? '_blank' : undefined, rel: this.external && isInteractive ? 'noopener noreferrer' : undefined, tabIndex: isInteractive ? 0 : -1, "aria-label": isIconOnly ? this.ariaLabel || 'Link' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-current": this.current ? 'page' : undefined, role: this.disabled ? 'link' : undefined, download: this.download ? '' : undefined, onClick: (event) => this.handleClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, h("span", { key: '72d84592cfd7e48e983e281d8e8f1d8a2b739e26', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), this.label && (h("span", { key: 'a101036d3206e7f610c04dfc9d0a4dcd5c1a2b4f', class: `${labelClasses} ${this.icon ? (this.iconPos === 'right' ? (this.size === 'large' ? 'pr-4' : 'pr-2') : this.size === 'large' ? 'pl-4' : 'pl-2') : ''}` }, this.label)), this.renderRightIcon())));
     }
     static get is() { return "eds-link"; }
     static get encapsulation() { return "shadow"; }
@@ -327,7 +323,7 @@ export class EdsLink {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary' | 'secondaryInverse' | 'ghost' | 'strong' | 'weak' | 'inverse' | 'underline' | 'underlineInverse' | 'brand' | 'brandInverse' | 'cta' | 'cta-brand'",
+                    "original": "| 'primary'\n    | 'secondary'\n    | 'secondaryInverse'\n    | 'ghost'\n    | 'strong'\n    | 'weak'\n    | 'inverse'\n    | 'underline'\n    | 'underlineInverse'\n    | 'brand'\n    | 'brandInverse'\n    | 'cta'\n    | 'cta-brand'",
                     "resolved": "\"brand\" | \"brandInverse\" | \"cta\" | \"cta-brand\" | \"ghost\" | \"inverse\" | \"primary\" | \"secondary\" | \"secondaryInverse\" | \"strong\" | \"underline\" | \"underlineInverse\" | \"weak\"",
                     "references": {}
                 },

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

@@ -2,36 +2,28 @@ import { h } from "@stencil/core";
 import { logoNegative, logoPositive } from "../../../../../../../packages/svgs/src/index";
 import { sendAnalytics } from "../../utils/analytics";
 /**
- * `EdsLogo` is a logo component designed to display a clickable logo that can link to a specified URL.
- *
- * Key Features:
- * - Supports various logo styles and orientations.
- * - Emits a custom `matomoEvent` for tracking click interactions.
+ * `EdsLogo` renders the clickable EBRAINS brand mark (inline SVG).
  *
  * Props:
- * - `href` (string): The URL to navigate to when the logo is clicked (defaults to the root path `/`).
- * - `orientation` (string): The orientation of the logo (`horizontal` or `vertical`).
- * - `type` (string): The style of the logo (`color`, `black`, `color-white`, `white`).
+ * - `variant` (attribute `type`): `'positive'` (dark logo for light
+ *   backgrounds) or `'negative'` (light logo for dark backgrounds).
+ * - `href`: where the logo links to (defaults to `/`). The logo is the
+ *   click-to-home affordance in eds-header, eds-fullscreen-menu and the
+ *   eds-form brand hero.
  *
- * Events:
- * - `matomoEvent`: Emitted when the logo is clicked, carrying metadata for analytics tracking, including the event `category`, `tag`, `name`, and `action`.
+ * Clicks emit an analytics event (category/tag/name/action).
  *
- * This component is ideal for navigation and branding, with options for style customization and interaction tracking.
+ * NOTE: the SVG has a viewBox but no intrinsic width, so the host needs a
+ * sized block parent to render (e.g. eds-header wraps it in a fixed-width
+ * container).
  */
 export class EdsLogo {
     constructor() {
         this.href = '/';
-        this.orientation = 'horizontal';
         this.variant = 'positive';
-        this.label = 'Home';
     }
     /**
-     * Handles the click event on the logo link.
-     * Emits a `matomoEvent` for analytics tracking with details about the interaction.
-     * - `category`: Component type (e.g., "ui-component").
-     * - `tag`: The HTML tag name of the component.
-     * - `name`: Event name, set as "logo".
-     * - `action`: The action, set as "click".
+     * Emits an analytics event when the logo link is clicked.
      */
     handleClick() {
         sendAnalytics({
@@ -41,18 +33,9 @@ export class EdsLogo {
             action: 'click'
         });
     }
-    /**
-     * Determines the appropriate SVG content based on the `orientation` and `type` props.
-     */
-    getLogo() {
-        if (this.variant == 'negative') {
-            return logoNegative;
-        }
-        return logoPositive;
-    }
     render() {
-        const logoContent = this.getLogo();
-        return (h("a", { key: '3f8257c9481079f011278b114e13effe9057d823', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, h("div", { key: '4dac45a1a0c38c6e1613995aad2005b41acac775', innerHTML: logoContent })));
+        const logoContent = this.variant === 'negative' ? logoNegative : logoPositive;
+        return (h("a", { key: '3576feaa13063508c317d8b31817165de79ced77', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": "Home" }, h("div", { key: 'b43ef52813a59ba47e4a07c3d410b007a27ca186', innerHTML: logoContent })));
     }
     static get is() { return "eds-logo"; }
     static get encapsulation() { return "shadow"; }
@@ -86,24 +69,6 @@ export class EdsLogo {
                 "reflect": false,
                 "defaultValue": "'/'"
             },
-            "orientation": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'horizontal' | 'vertical'",
-                    "resolved": "\"horizontal\" | \"vertical\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The orientation of the logo to display.\n- `\"horizontal\"` displays the logo horizontally.\n- `\"vertical\"` displays the logo vertically."
-                },
-                "attribute": "orientation",
-                "reflect": false,
-                "defaultValue": "'horizontal'"
-            },
             "variant": {
                 "type": "string",
                 "mutable": false,
@@ -121,24 +86,6 @@ export class EdsLogo {
                 "attribute": "type",
                 "reflect": false,
                 "defaultValue": "'positive'"
-            },
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "label",
-                "reflect": false,
-                "defaultValue": "'Home'"
             }
         };
     }

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

@@ -1,21 +1,40 @@
 export default {
     title: 'Components/Logo',
     component: 'eds-logo',
-    argTypes: {}
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['positive', 'negative'],
+            description: 'Logo variant (attribute `type`): positive = dark logo for light backgrounds, negative = light logo for dark backgrounds.'
+        },
+        href: {
+            control: 'text',
+            description: 'Where the logo links to. Defaults to "/" — the click-to-home affordance in headers and the brand form hero.'
+        }
+    },
+    args: {
+        variant: 'positive',
+        href: 'https://ebrains.eu'
+    }
+};
+/* The SVG has a viewBox but no intrinsic width, so it needs a sized block
+   parent (same reason eds-header wraps it in a fixed-width container). The
+   surface flips with the variant so both are legible. */
+export const Default = {
+    render: (args) => `
+    <div class="${args.variant === 'negative' ? 'bg-strongest' : 'bg-dark'} p-16 w-[300px]">
+      <eds-logo type="${args.variant}" href="${args.href}"></eds-logo>
+    </div>`
+};
+/** Both variants side by side, on their intended surfaces. */
+export const Variants = {
+    render: () => `
+    <div class="flex flex-col gap-y-16">
+      <div class="bg-dark p-16 w-[300px]">
+        <eds-logo type="positive" href="https://ebrains.eu"></eds-logo>
+      </div>
+      <div class="bg-strongest p-16 w-[300px]">
+        <eds-logo type="negative" href="https://ebrains.eu"></eds-logo>
+      </div>
+    </div>`
 };
-const Template = () => `
-<div class="bg-dark mr-auto w-[300px]">
-  <eds-logo 
-     href="https://ebrains.eu"  
-    type="positive">
-  </eds-logo>
-</div> 
-<div class="bg-strongest mr-auto w-[300px]">
-  <eds-logo 
-    href="https://ebrains.eu" 
-    type="negative">
-  </eds-logo>
-</div>  
-`;
-export const Default = Template.bind({});
-Default.args = {};

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

@@ -55,7 +55,15 @@ export class EdsModal {
                     'md:top-20'
                 ].join(' ');
             case 'bottom':
-                return ['bottom-16', 'left-0', 'w-full', 'md:left-1/2', 'md:w-auto', 'md:-translate-x-1/2', 'md:bottom-20'].join(' ');
+                return [
+                    'bottom-16',
+                    'left-0',
+                    'w-full',
+                    'md:left-1/2',
+                    'md:w-auto',
+                    'md:-translate-x-1/2',
+                    'md:bottom-20'
+                ].join(' ');
             /*case 'left':
               …
             case 'right':
@@ -78,11 +86,13 @@ export class EdsModal {
     }
     trapFocus(event) {
         var _a;
-        if (event.key !== 'Tab')
+        if (event.key !== 'Tab') {
             return;
+        }
         const focusableElements = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-        if (!focusableElements || focusableElements.length === 0)
+        if (!focusableElements || focusableElements.length === 0) {
             return;
+        }
         const firstElement = focusableElements[0];
         const lastElement = focusableElements[focusableElements.length - 1];
         if (event.shiftKey) {
@@ -91,11 +101,9 @@ export class EdsModal {
                 event.preventDefault();
             }
         }
-        else {
-            if (document.activeElement === lastElement) {
-                firstElement.focus();
-                event.preventDefault();
-            }
+        else if (document.activeElement === lastElement) {
+            firstElement.focus();
+            event.preventDefault();
         }
     }
     lockBodyScroll() {
@@ -178,8 +186,9 @@ export class EdsModal {
      * Closes the modal when the Escape key is pressed and handles focus trapping on Tab.
      */
     handleKeyDown(event) {
-        if (!this.isOpen)
+        if (!this.isOpen) {
             return;
+        }
         if (event.key === 'Escape') {
             this.close();
         }

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

@@ -74,7 +74,9 @@ const TemplateWithForm = ({ title, position, truncate, inverseHeader }) => {
 
     <!-- Button to control modal -->
     <eds-button
-      intent="brand" size="large" pill="true"
+      intent="brand"
+      size="large"
+      pill="true"
       label="Open Modal with Form"
       @click="${openModal}"
       style="margin-right: 10px;"

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

@@ -75,14 +75,14 @@ export class EdsNps {
     }
     render() {
         const count = this.max - this.min + 1;
-        return (h("div", { key: '412ddeabf0cc97829202063af25f17e3309b0754', class: "eds-nps" }, h("eds-input-label", { key: '100a47e710fa75d6a5761a87ca68e8bc8910e248', id: "nps-question", name: "nps-question", label: this.question }), h("div", { key: '9a7a63112e17f4c725005e1ae8e42c98107db7c4', class: "eds-nps__scale" }, h("div", { key: '501029dad573cd31d956ae3cae67f2db9f2649f1', id: "nps-buttons", role: "radiogroup", "aria-labelledby": "nps-question", onKeyDown: this.handleKeyNav, class: "flex flex-wrap gap-2 my-8" }, Array.from({ length: count }, (_, i) => {
+        return (h("div", { key: 'edbeca6a946c3b355161d09707d6732dd5a79e67', class: "eds-nps" }, h("eds-input-label", { key: 'cf2b345b98407ee204a914e50183f5f895698adb', id: "nps-question", name: "nps-question", label: this.question }), h("div", { key: '423d0d8b676c8d3a72efd71f092a6b041a42c007', class: "eds-nps__scale" }, h("div", { key: 'b93fdd4168213fd5835a1253c5731c8dfa860572', id: "nps-buttons", role: "radiogroup", "aria-labelledby": "nps-question", onKeyDown: this.handleKeyNav, class: "flex flex-wrap gap-2 my-8" }, Array.from({ length: count }, (_, i) => {
             const val = this.min + i;
             const isSelected = val === this.internalValue;
             const tabIndex = isSelected || (this.internalValue == null && i === 0) ? 0 : -1;
             return (h("div", { class: "flex", key: val }, h("eds-button", { ref: (el) => (this.btnRefs[i] = el), size: "large", role: "radio", "aria-checked": isSelected ? 'true' : 'false', "aria-label": `${val}`, onClick: () => this.onSelect(val), tabIndex: tabIndex, intent: isSelected ? 'brand' : 'brandLight', class: isSelected ? 'eds-nps__btn is-selected' : 'eds-nps__btn', "extra-class": "!block !px-0 w-full", label: `${val}`, pill: true, onFocus: () => {
                     this.internalValue = val;
                 } })));
-        })), h("div", { key: 'aa15457591f1edf6e59eed384bcfbb25d49c9fd5', class: "flex justify-between eds-nps__labels" }, h("span", { key: 'a468b290491e368e3084f17ce40c6aa39e00ad3a', class: "f-ui-04 text-light ml-4" }, this.leftLabel), h("span", { key: '146b9eea4bbc360f7765e69e319738c77beae69d', class: "f-ui-04 text-light mr-4" }, this.rightLabel)))));
+        })), h("div", { key: '035bf1b3da3c481084201b1edb76a4d3e900a878', class: "flex justify-between eds-nps__labels" }, h("span", { key: '218622e6374ffa7b137b38dde7654e7b671cea6a', class: "f-ui-04 text-light ml-4" }, this.leftLabel), h("span", { key: '66d04e813fa6eee2fb52b7f48540b647016e0fe7', class: "f-ui-04 text-light mr-4" }, this.rightLabel)))));
     }
     static get is() { return "eds-nps"; }
     static get encapsulation() { return "shadow"; }

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

@@ -248,7 +248,7 @@ export class EdsPagination {
     }
     render() {
         const navigableIndex = -1; // Track index for keyboard navigation
-        return (h("div", { key: '5c11fd306f0ebf47a452e44d633e18b2e3860d78' }, this.total > 0 && this.mode === 'default' && (h("p", { key: 'fe8b7f7b6c7785152f1edd90a750f4a9a7e2768b', class: "f-ui-03 text-light mb-28 w-full text-center", "aria-live": "polite", id: "pagination-info" }, h("span", { key: '5e2c67535dbf765dc662770164404f0de69315a1', class: "text-light sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (h("nav", { "aria-label": "Pagination Navigation", "aria-describedby": this.mode === 'default' ? 'pagination-info' : undefined, onKeyDown: this.handleKeyDown }, h("ul", { class: "flex items-center justify-center gap-x-8", role: "list" }, h("li", { class: "mr-auto" }, this.useButtons ? (h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, h("eds-button", { label: this.prevLabel, disabled: this.mode === 'navigator' ? !this.prevUrl : this.isFirstPage(), "aria-label": "Go to previous page", icon: "chevron-left", "icon-pos": "left", size: "small", "icon-small": "true", intent: "ghost", "extra-class": "!p-8 lg:!pr-12 pagination-button", onClick: (event) => {
+        return (h("div", { key: '7968465b6c55f17657aa5bd3271448a9d780bec7' }, this.total > 0 && this.mode === 'default' && (h("p", { key: 'e266baaf3b45095b1e0d90c493d254405fa317b7', class: "f-ui-03 text-light mb-28 w-full text-center", "aria-live": "polite", id: "pagination-info" }, h("span", { key: '2acbccf0cb69248fb36b2479eb925d5cb728a3b5', class: "text-light sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (h("nav", { "aria-label": "Pagination Navigation", "aria-describedby": this.mode === 'default' ? 'pagination-info' : undefined, onKeyDown: this.handleKeyDown }, h("ul", { class: "flex items-center justify-center gap-x-8", role: "list" }, h("li", { class: "mr-auto" }, this.useButtons ? (h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, h("eds-button", { label: this.prevLabel, disabled: this.mode === 'navigator' ? !this.prevUrl : this.isFirstPage(), "aria-label": "Go to previous page", icon: "chevron-left", "icon-pos": "left", size: "small", "icon-small": "true", intent: "ghost", "extra-class": "!p-8 lg:!pr-12 pagination-button", onClick: (event) => {
                 if (this.mode === 'default' && !this.isFirstPage()) {
                     this.handlePageClick(event, (this.currentPage || 1) - 1);
                 }

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

@@ -38,14 +38,7 @@ export class EdsProgressBar {
         ]
             .filter(Boolean)
             .join(' ');
-        const fillClasses = [
-            'inner',
-            'h-full',
-            'transition-all',
-            'duration-300',
-            'bg-accent',
-            'z-0'
-        ]
+        const fillClasses = ['inner', 'h-full', 'transition-all', 'duration-300', 'bg-accent', 'z-0']
             .filter(Boolean)
             .join(' ');
         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, "%"))));

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

@@ -73,7 +73,7 @@ export class EdsRating {
         this.onSelect(next);
     }
     render() {
-        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) => {
+        return (h("div", { key: '57a4d7bc36daac45ba1b2a6924a6976919614c99', 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.internalRating;
             // Use the mapping text if available; otherwise, fall back to a generic label.

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: '635230d1ec9a0dcc945990a6a58dc3508345d984' }, h("eds-section-heading", { key: '0b6b94df22af707cbd6964132f3a5190b4b7e83c', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '8834c29c25249fb5c384fb5d51866eadb93a97d6' })));
+        return (h(TagType, { key: 'cee3905fc5e268c768fbc58b413ee074591888b7' }, h("eds-section-heading", { key: '9ba05e76c5e348b1209283b7f95a475408758c3b', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '8e5d27261133cd900d13940ce928946b1c378277' })));
     }
     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: '7275284a1158ab982f1e53117b72738d0a001c97', class: {
+        return (h(TagType, { key: '8791e5d816bfdc80087f3f7e5dbab60d0ac4a523', 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: 'a3c68baa56a0337348405c88544225ed7c7ff0ed', class: this.getHeadingClass() }, this.sectionTitle)));
+            } }, h(HeadingTag, { key: 'e2e7ca5effc12e6c9c8c3418c4097920ec80e53e', class: this.getHeadingClass() }, this.sectionTitle)));
     }
     static get is() { return "eds-section-heading"; }
     static get properties() {

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

@@ -55,7 +55,7 @@ export class EdsSocialNetworks {
         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 })))))));
+        return (h("nav", { key: '42abfdc0d94bad2fa273de7a476099df0a5103ff', "aria-label": "Social media" }, h("p", { key: 'c2eb9600afd49b5b178392f0f46efd58909f8843', class: `f-ui-02 ${textClass}` }, this.heading), h("ul", { key: 'b71a410550b06d89947ee9475af98c19cbe7e130', 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"; }

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

@@ -71,7 +71,7 @@ export class EdsSpinner {
                 alignItems: 'center',
                 justifyContent: 'center'
             };
-        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))));
+        return (h(Host, { key: '4b78f045f987eb40289d2829bab08f28324f13d2' }, h("div", { key: '05fcd319080518845630c6fd4bccda02032c3c5f', class: "spinner-overlay", style: overlayStyle }, h("span", { key: 'c1e24a0e3f3f9704ad9a118724f3437124e4f36f', class: "spinner", style: spinnerStyle }), this.message && h("p", { key: '947cd986f00100e950b1c2380b651c6baebca142', class: "f-ui-01" }, this.message))));
     }
     static get is() { return "eds-spinner"; }
     static get encapsulation() { return "shadow"; }

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

@@ -372,30 +372,54 @@ pre {
 
 .horizontal-indicators {
   display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 1rem 0;
+  align-items: flex-start;
+  gap: 0;
+  padding: 0;
+  /* Breathing room above (from the header); fields sit right below the steps. */
+  margin-top: 1.75rem;
+  margin-bottom: 0;
 }
 
+/* Left-aligned layout: every step left-aligns its circle so the FIRST circle
+   hugs the indicators' left edge — the same left edge as the form content below
+   it (see .step-content) — instead of being centred inside a flex cell. */
 .horizontal-step {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: 0.5rem;
+  align-items: flex-start;
+  gap: 0.6rem;
   cursor: pointer;
-  flex: 1;
+  flex: 1 1 0;
+  min-width: 0;
   position: relative;
 }
 
+/* The last step only needs room for its own circle + label; without this it
+   would reserve a full flex cell and leave a large empty gap after the final
+   circle. */
+.horizontal-step:last-child {
+  flex: 0 0 auto;
+}
+
+/* Left-aligned circles → the connector runs from just after this circle to the
+   next circle's left edge (one cell-width away). */
 .horizontal-step:not(:last-child)::after {
   content: '';
   position: absolute;
-  top: 1.25rem;
-  left: 50%;
-  width: 100%;
-  height: 2px;
+  top: 1.375rem; /* vertical centre of the 2.75rem circle */
+  left: calc(2.75rem + 0.4rem); /* just past this circle */
+  width: calc(100% - 2.75rem - 0.8rem); /* up to the next circle */
+  height: 3px;
+  border-radius: 2px;
   background-color: #e0e0e0;
-  z-index: -1;
+  transform: translateY(-50%);
+  z-index: 1;
+}
+
+/* Titles sit left-aligned under their (left-aligned) circle. */
+.horizontal-step > span {
+  text-align: left;
+  align-self: stretch;
 }
 
 .horizontal-step.is-completed:not(:last-child)::after {
@@ -403,8 +427,8 @@ pre {
 }
 
 .step-indicator {
-  width: 2.5rem;
-  height: 2.5rem;
+  width: 2.75rem;
+  height: 2.75rem;
   border-radius: 50%;
   border: 2px solid #e0e0e0;
   display: flex;
@@ -412,6 +436,7 @@ pre {
   justify-content: center;
   background-color: white;
   transition: all 0.3s ease;
+  flex: 0 0 auto;
 }
 
 .horizontal-step.is-active .step-indicator {
@@ -431,14 +456,18 @@ pre {
 }
 
 .step-number {
-  font-weight: 600;
-  font-size: 0.875rem;
+  font-family: var(--font-family-mono, 'IBM Plex Mono', monospace);
+  font-weight: 500;
+  font-size: 0.95rem;
 }
 
 .step-label {
-  font-size: 0.875rem;
-  text-align: center;
+  font-family: var(--font-family-mono, 'IBM Plex Mono', monospace);
+  font-size: 9.5px;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
   font-weight: 500;
+  color: var(--dark-grey, #7a7b7a);
 }
 
 .horizontal-step.is-active .step-label {
@@ -447,17 +476,15 @@ pre {
 
 .step-content {
   padding: 0.5rem 0;
-  /* Align content to start under the first step indicator */
-  margin-left: calc((100% / var(--step-count, 1)) * 0.20 - 1.25rem);
-  margin-right: calc((100% / var(--step-count, 1)) * 0.20 - 1.25rem);
+  /* Flush-left: the form shares the indicators' left edge (the first circle),
+     instead of the old step-count-based magic margin. */
+  margin-left: 0;
+  margin-right: 0;
 }
 
-/* Adjust margins for larger screens (> 700px) */
 @media (min-width: 700px) {
   .step-content {
     padding: 1.5rem 0;
-    margin-left: calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem);
-    margin-right: calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem);
   }
 }
 
@@ -488,12 +515,16 @@ pre {
 /* Brand theme - Horizontal step indicators */
 .theme-brand .step-indicator {
   background-color: var(--grey-light);
+  border-color: transparent; /* flat grey upcoming circle (matches mockup) */
+  color: var(--dark-grey, #7a7b7a);
 }
 
 .theme-brand .horizontal-step.is-active .step-indicator {
   border-color: var(--brand-green);
   background-color: var(--brand-green);
   color: var(--brand-black);
+  /* Soft green ring around the current step (matches mockup). */
+  box-shadow: 0 0 0 4px rgba(0, 255, 157, 0.2);
 }
 
 .theme-brand .horizontal-step.is-completed .step-indicator {
@@ -506,9 +537,9 @@ pre {
   background-color: var(--brand-green);
 }
 
-.theme-brand .horizontal-step.is-active .step-label {
+.theme-brand .horizontal-step.is-active .step-label,
+.theme-brand .horizontal-step.is-completed .step-label {
   color: var(--brand-black);
-  font-weight: 600;
 }
 
 .theme-brand .step-number {