@ebrains/components 3.0.0 → 3.2.0

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

@@ -1,3 +1,7 @@
+import { ICONS } from "../../utils/icons";
+// Derived from the single source of truth so the list never drifts.
+// '' = no icon (the render treats it as falsy).
+const ICON_OPTIONS = ['', ...Object.keys(ICONS).sort()];
 export default {
     title: 'Components/Link',
     component: 'eds-link',
@@ -12,8 +16,9 @@ export default {
             description: 'The intent style of the link'
         },
         icon: {
-            control: 'text',
-            description: 'The icon to be displayed next to the label'
+            control: { type: 'select' },
+            options: ICON_OPTIONS,
+            description: 'The icon to be displayed next to the label (from the EDS icon set)'
         },
         iconSmall: {
             control: 'boolean',
@@ -24,6 +29,10 @@ export default {
             options: ['small', 'large'],
             description: 'The size of the link'
         },
+        pill: {
+            control: 'boolean',
+            description: 'If true, renders the link with a pill (fully rounded) shape'
+        },
         external: {
             control: 'boolean',
             description: 'If true, marks the link as external'
@@ -40,10 +49,6 @@ export default {
             control: 'text',
             description: 'The URL for the link'
         },
-        ariaLabel: {
-            control: 'text',
-            description: 'ARIA label for accessibility'
-        },
         download: {
             control: 'boolean',
             description: 'If true, adds the download attribute to the link'
@@ -55,11 +60,11 @@ export default {
         size: 'large',
         icon: 'arrow-right',
         iconSmall: false,
+        pill: true,
         external: false,
         current: false,
         disabled: false,
         url: 'https://example.com',
-        ariaLabel: 'Link to example',
         download: false
     }
 };
@@ -72,11 +77,11 @@ export const Default = {
       size="${args.size}"
       icon="${args.icon}"
       icon-small="${args.iconSmall}"
+      pill="${args.pill}"
       external="${args.external}"
       current="${args.current}"
       disabled="${args.disabled}"
       url="${args.url}"
-      aria-label="${args.ariaLabel}"
       download="${args.download}">
     </eds-link>
   </div>`,

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: '06321ecfcf456f1870cd080043203258306a2451', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, h("div", { key: '0e9da2f98700553f4898d0f60935f1c5cbd97cbc', 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

@@ -26,9 +26,9 @@ export default {
     },
     args: {
         title: 'Default Modal Title',
-        position: 'middle',
+        position: 'top',
         truncate: 1,
-        inverseHeader: false
+        inverseHeader: true
     }
 };
 const Template = ({ title, position, truncate, inverseHeader }) => {
@@ -44,15 +44,15 @@ const Template = ({ title, position, truncate, inverseHeader }) => {
     </eds-modal>
 
     <!-- Button to control modal -->
-    <eds-button intent="primary" label="Open Modal" @click="${openModal}"></eds-button>
+    <eds-button intent="brand" size="large" label="Open Modal" pill="true" @click="${openModal}"></eds-button>
   `;
 };
 export const Default = Template.bind({});
 Default.args = {
     title: 'Default Modal Title',
-    position: 'middle',
+    position: 'top',
     truncate: 1,
-    inverseHeader: false
+    inverseHeader: true
 };
 const TemplateWithForm = ({ title, position, truncate, inverseHeader }) => {
     const openModal = () => {
@@ -74,7 +74,9 @@ const TemplateWithForm = ({ title, position, truncate, inverseHeader }) => {
 
     <!-- Button to control modal -->
     <eds-button
-      intent="primary"
+      intent="brand"
+      size="large"
+      pill="true"
       label="Open Modal with Form"
       @click="${openModal}"
       style="margin-right: 10px;"
@@ -84,6 +86,7 @@ const TemplateWithForm = ({ title, position, truncate, inverseHeader }) => {
 export const ModalWithForm = TemplateWithForm.bind({});
 ModalWithForm.args = {
     title: 'Extended Form Modal',
-    position: 'middle',
-    truncate: 1
+    position: 'top',
+    truncate: 1,
+    inverseHeader: true
 };

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

@@ -1,3 +1,35 @@
+/* Keep the pills compact (next to each other) and shrink the scale block to
+   their width, so the 0/10 labels (justify-between below) line up with the
+   first/last pill instead of the full container edge. */
+/* Breathing room above/below the 0…10 endpoint labels. */
+.eds-nps__labels {
+  padding-top: 0.75rem;
+  padding-bottom: 0.5rem;
+}
+
+.eds-nps__scale {
+  display: block;       /* own line, stacked under the question */
+  width: fit-content;   /* but shrink to the pills' width so labels align */
+  max-width: 100%;
+  padding-top: 0.5rem;  /* space between the question and the pills */
+}
+/* A bit more breathing room between the pills. */
+#nps-buttons {
+  gap: 0.6rem;
+}
+
+/* Non-color cue for the single selected value (not just light-green vs neon):
+   a brand-green-dark ring + slight scale make the pick unmistakable. Keeps
+   eds-button untouched. */
+.eds-nps__btn {
+  border-radius: 9999px;
+  transition: transform 0.15s ease-in-out;
+}
+.eds-nps__btn.is-selected {
+  /* Subtle scale only (no ring/border cue), like eds-rating. */
+  transform: scale(1.12);
+}
+
 .flex {
   display: flex;
 }

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: '932d0a62e52376c1ddaf71e8d21bf5437c2d0b9f', class: "eds-nps" }, h("eds-input-label", { key: '60f5b6849dcc53f2a0d46fa5e44499076bd46174', id: "nps-question", name: "nps-question", label: this.question }), h("div", { key: '14d032aa6dc6b2cc67189f6e11a0fc59ca420cbb', 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' : 'neutral', "extra-class": "!block !px-0 w-full", label: `${val}`, pill: true, onFocus: () => {
+            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: 'f1fd58c7c1003f144b816c9a1d169a2edec4a768', class: "flex justify-between mt-8" }, h("span", { key: '476a3c3b3ef1c43744b8a69e577e597fff887beb', class: "f-ui-04 text-light ml-4" }, this.leftLabel), h("span", { key: '275ec0c204781365c2e57283c1096fadb853dbe5', 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: '6d7dea7a6d544bf79e944dfeb80cffb2f5a0b0cb' }, this.total > 0 && this.mode === 'default' && (h("p", { key: '77da5262419978bf0806155727f64c2c957e3bb1', class: "f-ui-03 text-light mb-28 w-full text-center", "aria-live": "polite", id: "pagination-info" }, h("span", { key: '537551dfe8de1af55d3350cef4fa62f503aba3c1', 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: "secondary", "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);
                 }
@@ -257,7 +257,7 @@ export class EdsPagination {
                 : this.isFirstPage()
                     ? '#'
                     : this.generateLink(this.currentPage - 1).url, 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: "strong", "hide-label-on-small-screen": true, class: "!p-8 lg:!pr-12" }))), this.mode === 'default' &&
-            this.links.map((link, index) => (h("li", { key: index, class: "f-ui-02 flex h-36 items-center justify-center" }, typeof link === 'string' ? (h("span", { class: "flex items-center justify-center", "aria-hidden": "true" }, link)) : this.useButtons ? (h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, h("eds-button", { label: link.label, "aria-label": link.current ? `Current page, page ${link.label}` : `Go to page ${link.label}`, "aria-current": link.current ? 'page' : undefined, size: "small", "extra-class": "!p-8 pagination-button", intent: link.current ? 'primary' : 'secondary', onClick: (event) => this.handlePageClick(event, parseInt(link.label)) }))) : (h("eds-link", { url: link.url, "aria-label": link.ariaLabel, label: link.label, current: link.current, "aria-current": link.current ? 'page' : undefined, size: "small", class: "!p-8", intent: link.current ? 'primary' : 'secondary', onClick: (event) => this.handlePageClick(event, parseInt(link.label)) }))))), h("li", { class: "ml-auto" }, this.useButtons ? (h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, h("eds-button", { label: this.nextLabel, disabled: this.mode === 'navigator' ? !this.nextUrl : this.isLastPage(), "aria-label": "Go to next page", size: "small", "icon-small": "true", icon: "chevron-right", intent: "secondary", "extra-class": "!p-8 lg:!pl-12 pagination-button", onClick: (event) => {
+            this.links.map((link, index) => (h("li", { key: index, class: "f-ui-02 flex h-36 items-center justify-center" }, typeof link === 'string' ? (h("span", { class: "flex items-center justify-center", "aria-hidden": "true" }, link)) : this.useButtons ? (h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, h("eds-button", { label: link.label, "aria-label": link.current ? `Current page, page ${link.label}` : `Go to page ${link.label}`, "aria-current": link.current ? 'page' : undefined, size: "small", "extra-class": "!p-8 pagination-button", intent: link.current ? 'brand' : 'ghost', onClick: (event) => this.handlePageClick(event, parseInt(link.label)) }))) : (h("eds-link", { url: link.url, "aria-label": link.ariaLabel, label: link.label, current: link.current, "aria-current": link.current ? 'page' : undefined, size: "small", class: "!p-8", intent: link.current ? 'primary' : 'secondary', onClick: (event) => this.handlePageClick(event, parseInt(link.label)) }))))), h("li", { class: "ml-auto" }, this.useButtons ? (h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, h("eds-button", { label: this.nextLabel, disabled: this.mode === 'navigator' ? !this.nextUrl : this.isLastPage(), "aria-label": "Go to next page", size: "small", "icon-small": "true", icon: "chevron-right", intent: "ghost", "extra-class": "!p-8 lg:!pl-12 pagination-button", onClick: (event) => {
                 if (this.mode === 'default' && !this.isLastPage()) {
                     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.css

@@ -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

@@ -73,12 +73,12 @@ export class EdsRating {
         this.onSelect(next);
     }
     render() {
-        return (h("div", { key: '89671afe2d02d527001009ee83fb0d4e48550479', 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.
             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' : 'neutral', size: "large" }));
+            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"; }

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: '65cb765fe9b997b5e573f5befd4ca1ea6611f1c5' }, h("eds-section-heading", { key: 'a48c9fef0a45fbed08749e8b4f17d762d38bbb5b', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '7e26bc40132c32670db60f5765b412d00d64c129' })));
+        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: '032f8629ef5ea1c45f40a135a54c32337f7181e9', 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: '37f821426fe05dba66445745da3d23c9ff75345e', 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-sidebar/eds-sidebar.js

@@ -145,10 +145,10 @@ export class EdsSidebar {
             } }, 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: 'a56e293e9b53b0dbffd6268c117f77828ba5f41a', class: {
+        return (h(Host, { key: 'f5221c19e8148ca62a76fb470a4aa6786c3e41b5', class: {
                 'eds-sidebar': true,
                 [`theme-${this.theme}`]: true
-            } }, h("nav", { key: '07ca17add683f976b30e736389eddc473e1e5669', class: "sidebar-nav", "aria-label": "Sidebar" }, h("ul", { key: 'a102418d399f14715eddf34e1c3373cf1be9d4aa', 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"; }

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: '11b876483142bb98c686a4cb722d28022ca9f40c', "aria-label": "Social media" }, h("p", { key: 'daf2865247ed69ab3e4233d191d8abb8d5be584f', class: `f-ui-02 ${textClass}` }, this.heading), h("ul", { key: '47918284e8a158d523d3329eb28f4881ac27233e', 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: '16d20431aaa90a29b6e3d32cbd3403ece1f45345' }, h("div", { key: '0e29dafa5eb3a84f31305614ae083356604a81bf', class: "spinner-overlay", style: overlayStyle }, h("span", { key: 'cf63a83095e35a1ca4328fd14293e6895d8d9811', class: "spinner", style: spinnerStyle }), this.message && h("p", { key: '7bb83c40db5dc985c429ca6ac171145db80c011d', 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"; }