@ebrains/components 3.0.0 → 3.2.0

package/dist/cjs/token-spacing.cjs.entry.js

@@ -9,7 +9,7 @@ const TokenSpacing = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: '8ebe0d888150e5fefd1d3047cc82548f12f47f9f', class: "w-full" }, index.h("ul", { key: 'c57af77dfb437bafaf060a6c6ebece84c4683409', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, index.h("li", { key: '6ca948268bd07e50409334b84eeeb362287f131e', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '0f33f8feec6657d21a4e4a1973d4c46cf4f6c526', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: '194c9d5367c75c35f021d0b5c64601a72d1141fd', class: "spacing-sample m-16 bg-strong" }, index.h("span", { key: '252af2371d58a8364718210563b7aa9a76a551a6', class: "f-body-01 text-inverse" }, "Margin: 1rem / m-16")))), index.h("li", { key: '833a8373bbe4db4514c84d4e299e2103b37bc75e', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: 'd364398230aca7af47273a654a8f138d70361c75', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: '707e0b62f500c16dc2d72da8e0bd85adabd7280b', class: "spacing-sample ml-64 bg-strong" }, index.h("span", { key: '846c07af2613e90c3acd1fa66aa422db14a95526', class: "f-body-01 text-inverse" }, "Margin Left: 4rem / ml-64")))), index.h("li", { key: '107899eab78bbb70f62b0aa2df8573f7a940024c', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: 'fb007ac46524cfda56c1033869b3fd7edeec96b8', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: '4312aaa901f7ad1075056517b2d8b0902e708aec', class: "spacing-sample mt-32 bg-strong" }, index.h("span", { key: '62a87119afea530831e3bcbb45da16f3a3cfb1b8', class: "f-body-01 text-inverse" }, "Margin Top: 2rem / mt-32")))), index.h("li", { key: '279e6f5af470cf3f969c37f715def542e4d13140', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '057bcacd976a4d7f0a69ccba3b469e79f6e8c86a', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: '379423e5ef1b3f5be2a322493266305f2cf46b9d', class: "spacing-sample p-32 bg-strong" }, index.h("span", { key: 'a3bd9db6ab5dd4f6204d5009c4328f617f44b78c', class: "f-body-01 text-inverse" }, "Padding: 2rem / p-32")))), index.h("li", { key: '526411b8ab854f67873964446dee7191949f5d54', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: 'c30d0c423a4d3104ca8736fbd2c0de5159ac8f2d', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: '93e0422c2304a0d3a158ba086aa9235a05d621f0', class: "spacing-sample pt-32 bg-strong" }, index.h("span", { key: 'dca707847134a421d60930307613a6528a009f9d', class: "f-body-01 text-inverse" }, "Padding Top: 2rem / pt-32")))), index.h("li", { key: 'a132977bdf19ba79401ccc05f248711eb2793497', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '2fad0e796528bce6c021cbb9d3036d4a23226b82', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: 'be02958fc44ca651c348078dfc84fabbe92afaa1', class: "spacing-sample pl-32 bg-strong" }, index.h("span", { key: '6c94b77b470a1dd9de4dad7a6900d2e053236f52', class: "f-body-01 text-inverse" }, "Padding Left: 2rem / pl-32")))))));
+        return (index.h("div", { key: '21c919b5124094eb34f820327f439c0198758b2a', class: "w-full" }, index.h("ul", { key: '9dea1c4eb37380b4cf00c1e2b4ccc3b69eca5536', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, index.h("li", { key: 'bf719062fc2724411a54076a272acf4d06f8cdad', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '6bab4e4c52e273faead36180c744593c5365d012', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: 'b1327b6ce1ccca9f3ea64cc5eac0987a76209e04', class: "spacing-sample m-16 bg-strong" }, index.h("span", { key: '188476bd66a4dff9fa395275088ef94c92f2afca', class: "f-body-01 text-inverse" }, "Margin: 1rem / m-16")))), index.h("li", { key: '8ba0cdfbde803aa803b21641e4c15917ccbd8988', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: 'b1b88688a7ff18ac204d49c0536875c0b5a717ab', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: 'b72362f8a8460253e39927f1efde1115aed0a873', class: "spacing-sample ml-64 bg-strong" }, index.h("span", { key: '156be8010b2a809d71354ba28c7908f4fe58064f', class: "f-body-01 text-inverse" }, "Margin Left: 4rem / ml-64")))), index.h("li", { key: '228d4fecc2d4b7f5958048d0d15c548455287392', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '9c92a7fe82b51896bc1ee2462f66efa9251c2fcc', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: '7059294203bace35afd2ed57b77807e2db806219', class: "spacing-sample mt-32 bg-strong" }, index.h("span", { key: '2e8ec24a3c550ca536a5701c04e0bed7844bc297', class: "f-body-01 text-inverse" }, "Margin Top: 2rem / mt-32")))), index.h("li", { key: 'd79846088a37e1f03a409d11ba69b3ff3cafa5dd', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '0bd8e24e7369fd83c3de2fe7e841c0f3e97cd80b', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: 'c502d2567fb9dc49516390a9a8405c31ab324f0a', class: "spacing-sample p-32 bg-strong" }, index.h("span", { key: '6f07cec99d6fe8c32053ca3c407c336c7a40a64c', class: "f-body-01 text-inverse" }, "Padding: 2rem / p-32")))), index.h("li", { key: 'f6ddca79e1ab773c7a2f64653fbae0d49c03e071', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: 'bad00c444c75c5a458f66f8b480b69263e9d1548', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: 'd889c0216ded4bc9fce48d68ab7d8008bf9bd045', class: "spacing-sample pt-32 bg-strong" }, index.h("span", { key: '3b00250165aeb560641e99b5859266f1cecd7baf', class: "f-body-01 text-inverse" }, "Padding Top: 2rem / pt-32")))), index.h("li", { key: '53077e307812a3d15f534070e4ceb8dd39e22255', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '9e7e1a60ef73524b630845bc686e9a44714c6de7', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: 'c8e3e113b805376f03f9ffe2f2afa985f5e19739', class: "spacing-sample pl-32 bg-strong" }, index.h("span", { key: '924878b9f3c36c8b83112ed93ba354527037f6bd', class: "f-body-01 text-inverse" }, "Padding Left: 2rem / pl-32")))))));
     }
 };
 

package/dist/cjs/token-typography.cjs.entry.js

@@ -237,7 +237,7 @@ const TokenTypography = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("section", { key: 'a3698b57da5e26052bf013daef956ff5f9e0bd1c', class: "w-full" }, index.h("ul", { key: '924a82c721a636370a15e7a47ca73264c8e1d30e', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(typography.typesets)
+        return (index.h("section", { key: 'cfb9e2e38963772af466109521bbaedbf5852e2a', class: "w-full" }, index.h("ul", { key: '452fa03a44c1082ae4c260245b7dcb2df308ef4f', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(typography.typesets)
             .filter(([typeKey]) => typeKey !== 'displays') // Exclude "displays"
             .flatMap(([typeKey, typeValues]) => Object.entries(typeValues).map(([size, style]) => (index.h("li", { class: "grid-col-span-12 flex flex-col mt-16" }, index.h("div", { class: "w-full p-16 border border-soft rounded", style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1.5rem', alignItems: 'center' } }, index.h("div", { style: {
                 fontFamily: style.fontFamily || typography.families['plex-sans'],
@@ -245,7 +245,13 @@ const TokenTypography = class {
                 fontSize: style.fontSize,
                 lineHeight: style.lineHeight,
                 letterSpacing: style.letterSpacing
-            } }, index.h("span", { class: "text-default" }, `${typeKey}`), index.h("div", { style: { fontSize: '12px', fontWeight: '400', color: '#7A7B7A', marginTop: '4px', fontFamily: '"IBM Plex Mono", monospace' } }, size, " \u00B7 class: f-", typeKey)), index.h("div", null, index.h("eds-code-block", { code: [
+            } }, index.h("span", { class: "text-default" }, `${typeKey}`), index.h("div", { style: {
+                fontSize: '12px',
+                fontWeight: '400',
+                color: '#7A7B7A',
+                marginTop: '4px',
+                fontFamily: '"IBM Plex Mono", monospace'
+            } }, size, " \u00B7 class: f-", typeKey)), index.h("div", null, index.h("eds-code-block", { code: [
                 `/* Utility: f-${typeKey} | Screen: ${size}:f-${typeKey} */`,
                 style.fontSize && `font-size: ${style.fontSize};`,
                 style.lineHeight && `line-height: ${style.lineHeight};`,

package/dist/collection/collection-manifest.json

@@ -4,6 +4,7 @@
     "components/eds-cards/eds-card-cta/eds-card-cta.js",
     "components/eds-cards/eds-card-generic/eds-card-generic.js",
     "components/eds-cards/eds-card-hero/eds-card-hero.js",
+    "components/eds-footer/eds-footer.js",
     "components/eds-sidebar/eds-sidebar.js",
     "components/eds-steps/eds-steps.js",
     "components/eds-steps-v2/eds-steps-v2.js",
@@ -23,7 +24,6 @@
     "components/eds-code-block/eds-code-block.js",
     "components/eds-dropdown/eds-dropdown.js",
     "components/eds-feedback/eds-feedback.js",
-    "components/eds-footer/eds-footer.js",
     "components/eds-form/eds-form.js",
     "components/eds-frame/eds-frame.js",
     "components/eds-fullscreen-menu/eds-fullscreen-menu.js",
@@ -93,8 +93,11 @@
     "shared-ui/eds-cookies-preference/eds-cookies-preference.js",
     "shared-ui/eds-gitlab-contributors/eds-gitlab-contributors.js",
     "shared-ui/eds-global-search/eds-global-search.js",
+    "shared-ui/eds-kg-learning-resources/eds-kg-learning-resources.js",
     "shared-ui/eds-kg-web-services-select/eds-kg-web-services-select.js",
     "shared-ui/eds-matomo-notice/eds-matomo-notice.js",
+    "shared-ui/eds-search-select/eds-search-select.js",
+    "shared-ui/eds-trl-badge/eds-trl-badge.js",
     "shared-ui/examples/eds-app-root/eds-app-root.js"
   ],
   "compiler": {

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

@@ -57,7 +57,8 @@
 }
 
 .accordion-card-inverse .accordion-description {
-  color: var(--grey-dark);
+  /* grey-700 (#666) clears WCAG AA 4.5:1 on white; grey-dark (#7A7B7A) was ~4.27:1. */
+  color: var(--grey-700);
 }
 
 .accordion-card-inverse .accordion-chevron {
@@ -65,7 +66,7 @@
 }
 
 .accordion-card-inverse .accordion-content {
-  color: var(--grey-dark);
+  color: var(--grey-700);
 }
 
 /* ─── Header row ─── */

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

@@ -49,11 +49,8 @@ export class EdsAccordion {
         this.toggleIcon = this.expanded ? 'chevron-down' : 'chevron-right';
     }
     render() {
-        const cardClasses = [
-            'accordion-card',
-            `accordion-card-${this.variant}`
-        ].join(' ');
-        return (h("div", { key: 'e9f44914fce505b97f90415ed72f322ff09fcee7', class: cardClasses }, h("div", { key: 'd4c6ec563b66b14fc74bc872c953bd9e3e501a85', class: "accordion-header", onClick: this.handleClick, onKeyDown: this.handleKeyDown, role: "button", tabindex: 0, "aria-expanded": String(this.isExpanded), "aria-controls": "accordionSection" }, this.icon && (h("div", { key: '9c365bc15aeec93ccc2021206e72e457a2032265', class: "accordion-icon" }, h("eds-icon-wrapper", { key: '73742a6cb431342c62e1fd5661c39927dcb57bef', name: this.icon, size: 24 }))), h("div", { key: '1ba17b07eedccb135dc5138ace783ea211b75d52', class: "accordion-header-text" }, h("h3", { key: 'd8c34e66195fbe2863736d39f5a9e8276f30252a', class: "accordion-title" }, this.heading), this.description && (h("p", { key: 'c24a3614a3f2d1bcd29a39cbd3384c25c1c50e47', class: `accordion-description ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}` }, this.description))), h("eds-icon-wrapper", { key: 'deecdbb3c0ec32079b3b913ed7976ae813b9468a', name: this.toggleIcon, size: 20, class: "accordion-chevron" })), h("section", { key: 'f3767c81d79e2681c6317e3268cf1c966fba6bc2', id: "accordionSection", "aria-hidden": String(!this.isExpanded), class: `accordion-panel ${this.isExpanded ? 'expanded' : ''}` }, h("div", { key: '08ce9281f2e7fc858f30d0b7c0da0b0739824193', class: "accordion-panel-inner" }, h("div", { key: 'c9cdc6312fa279d1c1ee5753c7038b0a9ce3c624', class: "accordion-content" }, h("slot", { key: 'aaec055131ce2ae7830aecfc2fc6ace50f05ded1' }))))));
+        const cardClasses = ['accordion-card', `accordion-card-${this.variant}`].join(' ');
+        return (h("div", { key: 'e437239cc58d208a41d178ad843b56b4cf96c868', class: cardClasses }, h("div", { key: 'd8918b77de629a60332118da38969f237ef5f4a6', class: "accordion-header", onClick: this.handleClick, onKeyDown: this.handleKeyDown, role: "button", tabindex: 0, "aria-expanded": String(this.isExpanded), "aria-controls": "accordionSection" }, this.icon && (h("div", { key: '56d74602ae6f5b2246a42047caae30fd7affd5eb', class: "accordion-icon" }, h("eds-icon-wrapper", { key: '91dec34e9bec65648e943203dfbf7a2c2f85a239', name: this.icon, size: 24 }))), h("div", { key: '3abdd978e4de24e892fe763a2ad42606915b7136', class: "accordion-header-text" }, h("h3", { key: '7a6e750e6b9462577fd71c4a08d5e029c5c31c17', class: "accordion-title" }, this.heading), this.description && (h("p", { key: '1b79cce1a659c8ec48f365c44bbd9593bb11769a', class: `accordion-description ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}` }, this.description))), h("eds-icon-wrapper", { key: 'a911f1daf7776c574ec42a7d007c2c21768d0b05', name: this.toggleIcon, size: 20, class: "accordion-chevron" })), h("section", { key: 'fe743b5bffe37fd352d26f3a1660fd0e0a6633a7', id: "accordionSection", "aria-hidden": String(!this.isExpanded), class: `accordion-panel ${this.isExpanded ? 'expanded' : ''}` }, h("div", { key: '0d9fc37345deb16c1a5793c7deeb41298c4cf209', class: "accordion-panel-inner" }, h("div", { key: '697c71cdf914948ba9d017a2e92f42ce0e2ffc73', class: "accordion-content" }, h("slot", { key: '156b2c0be11111d3876bdbc1852f51a8b44b0284' }))))));
     }
     static get is() { return "eds-accordion"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-accordion/eds-accordion.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/Accordion',
     component: 'eds-accordion',
@@ -16,8 +20,9 @@ export default {
             description: 'Visual variant: default (dark bg) or inverse (light bg)'
         },
         icon: {
-            control: 'text',
-            description: 'Optional icon name displayed in the header'
+            control: { type: 'select' },
+            options: ICON_OPTIONS,
+            description: 'Optional icon name displayed in the header (from the EDS icon set)'
         },
         expanded: {
             control: 'boolean',
@@ -105,23 +110,6 @@ export const WithIconInverse = {
         icon: 'settings'
     }
 };
-export const Expanded = {
-    render: (args) => `
-    <eds-accordion
-      title="${args.title}"
-      description="${args.description}"
-      variant="${args.variant}"
-      expanded="true"
-      clamp-text="${args.clampText}"
-    >
-      This accordion starts in the expanded state.
-    </eds-accordion>
-  `,
-    args: {
-        title: 'Expanded Accordion',
-        description: 'This accordion is expanded by default.'
-    }
-};
 export const WithSlotComponent = {
     render: (args) => `
     <eds-accordion

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

@@ -189,4 +189,18 @@ p {
     flex-direction: column;
     align-items: flex-start;
   }
+
+  /* When the layout collapses to a column, keep the dismiss button pinned
+     to the top-right corner instead of stacking it on its own row. */
+  .alert-dismiss {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    padding: 0.125rem;
+  }
+
+  /* Reserve room so the message never runs under the dismiss button. */
+  .alert-card:has(.alert-dismiss) {
+    padding-right: 2.25rem;
+  }
 }

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

@@ -43,8 +43,9 @@ export class EdsAlert {
         this.edsDismiss.emit();
     }
     render() {
-        if (this.dismissed)
+        if (this.dismissed) {
             return null;
+        }
         const intent = this.normalizedIntent;
         const ariaLabel = intent !== 'default' ? `${intent} alert` : 'alert';
         return (h("div", { class: `alert-card alert-${intent} alert-${this.direction}`, role: "alert", "aria-label": ariaLabel, "aria-live": intent === 'error' || intent === 'warning' ? 'assertive' : 'polite' }, this.intentIcon && (h("div", { class: "alert-icon" }, h("eds-icon-wrapper", { name: this.intentIcon, size: 20 }))), h("div", { class: "alert-body" }, this.message ? (h("p", { class: "alert-message" }, this.message)) : (h("div", { class: "alert-message" }, h("slot", null)))), this.withBtn && (h("div", { class: "alert-action" }, this.pressableUrl ? (h("eds-link", { label: this.pressableLabel, url: this.pressableUrl, intent: "strong" })) : (h("eds-button", { label: this.pressableLabel, intent: "ghost", onClick: () => this.handleAction() })))), this.dismissible && (h("button", { class: "alert-dismiss", onClick: () => this.handleDismiss(), "aria-label": "Dismiss alert" }, h("eds-icon-wrapper", { name: "close", size: 20 })))));

package/dist/collection/components/eds-alert/eds-alert.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/Alert',
     component: 'eds-alert',
@@ -17,8 +21,9 @@ export default {
             description: 'Layout direction'
         },
         icon: {
-            control: 'text',
-            description: 'Optional icon name (e.g. information, warning, error, checkmark-filled, rocket). No icon shown by default.'
+            control: { type: 'select' },
+            options: ICON_OPTIONS,
+            description: 'Optional icon name (from the EDS icon set). No icon shown by default.'
         },
         dismissible: {
             control: 'boolean',
@@ -37,9 +42,12 @@ export default {
         message: 'This is an alert message.',
         intent: 'default',
         direction: 'horizontal',
+        icon: 'information',
         dismissible: false
     }
 };
+// Single control-driven story — use the Controls panel to exercise intent,
+// direction, icon, dismissible and the pressable action.
 export const Default = {
     render: (args) => `
     <eds-alert
@@ -53,151 +61,7 @@ export const Default = {
     ></eds-alert>
   `
 };
-export const Warning = {
-    render: (args) => `
-    <eds-alert
-      message="${args.message}"
-      intent="warning"
-      ${args.icon ? `icon="${args.icon}"` : ''}
-    ></eds-alert>
-  `,
-    args: {
-        message: 'Please review your input before proceeding.',
-        icon: 'warning'
-    }
-};
-export const Error = {
-    render: (args) => `
-    <eds-alert
-      message="${args.message}"
-      intent="error"
-      ${args.icon ? `icon="${args.icon}"` : ''}
-    ></eds-alert>
-  `,
-    args: {
-        message: 'An error occurred while processing your request.',
-        icon: 'error'
-    }
-};
-export const Success = {
-    render: (args) => `
-    <eds-alert
-      message="${args.message}"
-      intent="success"
-      ${args.icon ? `icon="${args.icon}"` : ''}
-    ></eds-alert>
-  `,
-    args: {
-        message: 'Your changes have been saved successfully.',
-        icon: 'checkmark-filled'
-    }
-};
-export const Brand = {
-    render: (args) => `
-    <eds-alert
-      message="${args.message}"
-      intent="brand"
-      ${args.icon ? `icon="${args.icon}"` : ''}
-    ></eds-alert>
-  `,
-    args: {
-        message: 'Welcome to the EBRAINS platform.',
-        icon: 'information'
-    }
-};
-export const WithLink = {
-    render: (args) => `
-    <eds-alert
-      message="${args.message}"
-      intent="${args.intent}"
-      ${args.icon ? `icon="${args.icon}"` : ''}
-      pressable-label="Learn more"
-      pressable-url="https://ebrains.eu"
-    ></eds-alert>
-  `,
-    args: {
-        message: 'A new version is available.',
-        intent: 'default'
-    }
-};
-export const WithButton = {
-    render: (args) => `
-    <eds-alert
-      message="${args.message}"
-      intent="error"
-      ${args.icon ? `icon="${args.icon}"` : ''}
-      pressable-label="Retry"
-    ></eds-alert>
-  `,
-    args: {
-        message: 'Failed to load data.',
-        icon: 'error'
-    }
-};
-export const Dismissible = {
-    render: (args) => `
-    <eds-alert
-      message="${args.message}"
-      intent="warning"
-      ${args.icon ? `icon="${args.icon}"` : ''}
-      dismissible="true"
-    ></eds-alert>
-  `,
-    args: {
-        message: 'This alert can be dismissed.',
-        icon: 'warning'
-    }
-};
-export const WithCustomIcon = {
-    render: (args) => `
-    <eds-alert
-      message="${args.message}"
-      intent="${args.intent}"
-      ${args.icon ? `icon="${args.icon}"` : ''}
-    ></eds-alert>
-  `,
-    args: {
-        message: 'Deployment in progress.',
-        intent: 'default',
-        icon: 'rocket'
-    }
-};
-export const NoIcon = {
-    render: (args) => `
-    <eds-alert
-      message="${args.message}"
-      ${args.icon ? `icon="${args.icon}"` : ''}
-      intent="warning"
-    ></eds-alert>
-  `,
-    args: {
-        message: 'This alert has no icon — just text.'
-    }
-};
-export const Vertical = {
-    render: (args) => `
-    <eds-alert
-      message="${args.message}"
-      intent="warning"
-      direction="vertical"
-      ${args.icon ? `icon="${args.icon}"` : ''}
-      pressable-label="View details"
-      pressable-url="https://ebrains.eu"
-      dismissible="true"
-    ></eds-alert>
-  `,
-    args: {
-        message: 'Your session will expire in 5 minutes.',
-        icon: 'warning'
-    }
-};
-export const SlotContent = {
-    render: () => `
-    <eds-alert intent="default" icon="information">
-      This alert uses <strong>slot content</strong> with <code>HTML markup</code> instead of the message prop.
-    </eds-alert>
-  `
-};
+// Gallery overview of every intent at a glance — not reproducible via Controls.
 export const AllIntents = {
     render: () => `
     <div style="display: flex; flex-direction: column; gap: 1rem;">
@@ -210,3 +74,11 @@ export const AllIntents = {
     </div>
   `
 };
+// Demonstrates slotted HTML content instead of the `message` prop.
+export const SlotContent = {
+    render: () => `
+    <eds-alert intent="default" icon="information">
+      This alert uses <strong>slot content</strong> with <code>HTML markup</code> instead of the message prop.
+    </eds-alert>
+  `
+};

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

@@ -64,7 +64,7 @@ export class EdsAvatar {
      * @returns {JSX.Element} The rendered avatar component.
      */
     render() {
-        return (h("div", { key: '00e163f2dd33c92bdfd8f45b6e2d3384afa32a30', class: this.containerClasses }, this.picture ? (h("eds-img", { src: this.picture, width: 54, height: 54, sizes: "120px", alt: `${this.firstName} ${this.lastName}`, lazyload: true, withBg: true })) : (h("abbr", { title: this.computedInitials || `${this.firstName} ${this.lastName}`, class: "!no-underline f-ui-01" }, this.computedInitials))));
+        return (h("div", { key: '36f8cb598e0e53793ce8a49e9e2419f41ba8f160', class: this.containerClasses }, this.picture ? (h("eds-img", { src: this.picture, width: 54, height: 54, sizes: "120px", alt: `${this.firstName} ${this.lastName}`, lazyload: true, withBg: true })) : (h("abbr", { title: this.computedInitials || `${this.firstName} ${this.lastName}`, class: "!no-underline f-ui-01" }, this.computedInitials))));
     }
     static get is() { return "eds-avatar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,8 +31,8 @@ export const Default = {
     
     <div class="mt-32">
       <span>To try out the picture field use this example:</span>
-      <eds-code-block 
-        code="https://files.ebrains.eu/img/686e0edc-f3be-4d79-aa02-373c32c08d65/ebrains-logo-high-resolution.png?fit=max&q=80&fm=webp&crop=879%2C879%2C597%2C0&w=200" 
+      <eds-code-block
+        code="https://randomuser.me/api/portraits/women/44.jpg"
         language="url"
       ></eds-code-block>
     </div>`,

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

@@ -7,7 +7,7 @@ export class EdsBlockBreak {
         this.inverse = false;
     }
     render() {
-        return h("hr", { key: '7b472ce3dcecc7a0c061d336c4edb1bec098c113', class: `${this.inverse ? 'border-default' : 'border-softer'}  my-16 inline-block w-full border-t-2` });
+        return h("hr", { key: '2531c44fa20745f7860e4647f77ffa038a56d832', class: `${this.inverse ? 'border-default' : 'border-softer'}  my-16 inline-block w-full border-t-2` });
     }
     static get is() { return "eds-block-break"; }
     static get encapsulation() { return "shadow"; }

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

@@ -123,7 +123,7 @@ export class EdsBreadcrumb {
      */
     render() {
         const itemsToRender = this.getTruncatedItems();
-        return (h("nav", { key: 'a068d2deb011c0a303e5a4320f4f5913bfc36d4a', "aria-label": "Breadcrumb" }, h("ol", { key: '63ab81ece8ff48546875320f4fd346638fac3bdc', class: "flex items-center space-x-2" }, itemsToRender.map((item, index) => {
+        return (h("nav", { key: '95c13ac07de20bc04fb57ee990e5d21f928f3a86', "aria-label": "Breadcrumb" }, h("ol", { key: '2a03ff53ac27eaa5e37ddfef32e9a4fe322755dd', class: "flex items-center space-x-2" }, itemsToRender.map((item, index) => {
             const isLast = index === itemsToRender.length - 1;
             return (h("li", { class: "flex items-center" }, !item.isHidden ? ((() => {
                 const { fullLabel } = this.getLabels(item, isLast);

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

@@ -466,6 +466,17 @@ button,
   height: 2.75rem;
 }
 
+/* Min-height variants — used for button sizing so a label that wraps to
+   two lines grows (with its py-12 padding) instead of being clipped at a
+   fixed height. Single-line buttons keep the same height. */
+.min-h-36 {
+  min-height: 2.25rem;
+}
+
+.min-h-44 {
+  min-height: 2.75rem;
+}
+
 .h-48 {
   height: 3rem;
 }
@@ -663,6 +674,10 @@ button,
   background-color: var(--brand-green); /* NEW: #00FF9D */
 }
 
+.bg-brand-light {
+  background-color: var(--green-200); /* light brand tint #d3ffdc — brandLight intent */
+}
+
 .bg-accent-dark {
   background-color: var(--brand-green-dark); /* NEW: #00C87B */
 }

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

@@ -23,7 +23,10 @@ import { cva } from "class-variance-authority";
 export class EdsButton {
     constructor() {
         this.button = cva([
-            'relative items-center py-12 cursor-pointer',
+            'relative items-center cursor-pointer',
+            // Brand-green focus-visible outline (rules live in eds-button.css);
+            // without this class keyboard focus falls back to the browser ring.
+            'effect-focus',
             'aria-disabled:text-lightest aria-disabled:bg-dark aria-disabled:cursor-not-allowed',
             'disabled:text-lightest disabled:bg-dark disabled:cursor-not-allowed'
         ], {
@@ -35,14 +38,14 @@ export class EdsButton {
                     ghost: '',
                     ghostInverse: 'text-inverse',
                     brand: 'bg-accent text-default hover:bg-strongest hover:text-inverse aria-disabled:shadow-none',
+                    // Light-green tint with brand-black text — an on-brand "unselected"
+                    // state (e.g. eds-rating / eds-nps) that brightens to solid brand on
+                    // hover/selection. Lives start-to-finish in the brand palette.
+                    brandLight: 'bg-brand-light text-default hover:bg-accent hover:text-default aria-disabled:shadow-none',
                     brandInverse: 'bg-accent text-default hover:bg-inverse hover:text-default aria-disabled:shadow-none',
                     neutral: 'bg-darker after:border-softest bg-inverse hover:bg-dark hover:text-light text-inverse aria-disabled:shadow-none',
-                    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']
                 },
                 loading: {
                     true: 'pointer-events-none',
@@ -53,8 +56,8 @@ export class EdsButton {
                     true: ''
                 },
                 size: {
-                    small: 'h-36 f-ui-02',
-                    large: 'h-44 f-ui-01'
+                    small: 'min-h-36 f-ui-02 py-8',
+                    large: 'min-h-44 f-ui-01 py-12'
                 },
                 hasIcon: {
                     true: '',
@@ -75,7 +78,7 @@ export class EdsButton {
                 fullWidth: {
                     true: 'w-full flex',
                     false: 'inline-flex w-auto'
-                },
+                }
             },
             compoundVariants: [
                 {
@@ -227,10 +230,10 @@ export class EdsButton {
         const loaderBottomColor = this.intent === 'primary' || this.intent === 'secondaryInverse'
             ? '#FFFFFF' // White for dark backgrounds
             : '#07140D'; // Brand-black for light backgrounds (secondary, brand, etc.)
-        return (h(Host, { key: '6f955c89a01cf823ff8fc34bfa92df85a3aa8327' }, h(ElementType, { key: 'fabf5842d4c9583c7ff9e4415697c62c111dce68', tabindex: isInteractive ? '0' : '-1', "aria-label": this.label ? undefined : this.ariaLabel, "aria-disabled": this.disabled || this.loading ? 'true' : undefined, "aria-busy": this.loading ? 'true' : undefined, disabled: this.elementType === 'button' ? this.disabled || this.loading : undefined, role: this.elementType === 'a' ? 'button' : undefined, class: `${classes || ''}`, onClick: (event) => this.handleClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, this.label && (h("span", { key: '746feb603fd83b54bab92e62ab9aefcd6a232f54', class: `${this.loading ? 'opacity-0' : ''} ${this.icon && (this.intent !== 'cta' && this.intent !== 'cta-brand') ? (this.iconPos === 'right' ? (this.size === 'large' ? 'pr-4' : 'pr-2') : (this.size === 'large' ? 'pl-4' : 'pl-2')) : ''}`, "aria-hidden": this.loading ? 'true' : undefined }, this.label)), this.loading && (h("span", { key: 'e0f54e409080548687304bae2f5d3e1b56863318', class: "absolute inset-0 flex items-center justify-center", "aria-hidden": "true" }, h("span", { key: 'c2472f5d2730ef850a076471fa00c9db91496db7', class: "loader", style: {
+        return (h(Host, { key: 'ad9bb3e0343e6c05c8f43ca9dc502ef28aa001d6' }, h(ElementType, { key: '90b51743bb12a5b4f0b309bb9d38932401ff0fa9', tabindex: isInteractive ? '0' : '-1', "aria-label": this.label ? undefined : this.ariaLabel, "aria-disabled": this.disabled || this.loading ? 'true' : undefined, "aria-busy": this.loading ? 'true' : undefined, disabled: this.elementType === 'button' ? this.disabled || this.loading : undefined, role: this.elementType === 'a' ? 'button' : undefined, class: `${classes || ''}`, onClick: (event) => this.handleClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, this.label && (h("span", { key: '35c7fa9449b445ef16d1ac77cb3ed8036e857687', class: `${this.loading ? 'opacity-0' : ''} ${this.icon && this.intent !== 'cta' && this.intent !== 'cta-brand' ? (this.iconPos === 'right' ? (this.size === 'large' ? 'pr-4' : 'pr-2') : this.size === 'large' ? 'pl-4' : 'pl-2') : ''}`, "aria-hidden": this.loading ? 'true' : undefined }, this.label)), this.loading && (h("span", { key: '5a6a5c78568dae1b77433147e1ae04f9139467de', class: "absolute inset-0 flex items-center justify-center", "aria-hidden": "true" }, h("span", { key: 'e392714658931a190cbfcae756c16831f69f8f0d', class: "loader", style: {
                 border: `3px solid ${loaderBorderColor}`,
                 borderBottomColor: loaderBottomColor
-            } }))), this.icon ? (h("eds-icon-wrapper", { name: this.icon, size: 20, "aria-hidden": "true" })) : null)));
+            } }))), this.icon ? (h("eds-icon-wrapper", { name: this.icon, size: 20, "aria-hidden": "true", class: this.loading ? 'opacity-0' : '' })) : null)));
     }
     static get is() { return "eds-button"; }
     static get encapsulation() { return "shadow"; }
@@ -304,8 +307,8 @@ export class EdsButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary' | 'secondaryInverse' | 'ghost' | 'ghostInverse' | 'brand' | 'brandInverse' | 'neutral' | 'cta' | 'cta-brand'",
-                    "resolved": "\"brand\" | \"brandInverse\" | \"cta\" | \"cta-brand\" | \"ghost\" | \"ghostInverse\" | \"neutral\" | \"primary\" | \"secondary\" | \"secondaryInverse\"",
+                    "original": "| 'primary'\n    | 'secondary'\n    | 'secondaryInverse'\n    | 'ghost'\n    | 'ghostInverse'\n    | 'brand'\n    | 'brandLight'\n    | 'brandInverse'\n    | 'neutral'\n    | 'cta'\n    | 'cta-brand'",
+                    "resolved": "\"brand\" | \"brandInverse\" | \"brandLight\" | \"cta\" | \"cta-brand\" | \"ghost\" | \"ghostInverse\" | \"neutral\" | \"primary\" | \"secondary\" | \"secondaryInverse\"",
                     "references": {}
                 },
                 "required": false,

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

@@ -5,7 +5,10 @@ export default {
         label: { control: 'text' },
         ariaLabel: { control: 'text' },
         elementType: { control: 'select', options: ['button', 'a', 'div'] },
-        intent: { control: 'select', options: ['primary', 'secondary', 'secondaryInverse', 'ghost', 'ghostInverse', 'brand', 'brandInverse', 'neutral'] },
+        intent: {
+            control: 'select',
+            options: ['primary', 'secondary', 'secondaryInverse', 'ghost', 'ghostInverse', 'brand', 'brandInverse', 'neutral']
+        },
         loading: { control: 'boolean' },
         disabled: { control: 'boolean' },
         pill: { control: 'boolean' },

package/dist/collection/components/eds-cards/eds-card-app/eds-card-app.js

@@ -30,14 +30,11 @@ export class EdsCardApp {
         return parseData(this.tags);
     }
     render() {
-        const cardClasses = [
-            'app-card',
-            `app-card-${this.variant}`
-        ].join(' ');
+        const cardClasses = ['app-card', `app-card-${this.variant}`].join(' ');
         // Determine link and category tag intents based on variant
         const linkIntent = this.variant === 'default' ? 'cta-brand' : 'cta';
         const categoryTagIntent = this.variant === 'default' ? 'brand' : 'dark';
-        return (h("div", { key: 'e90fec25a02a9635247da04ca23a932be9cd7ea5', class: cardClasses }, this.category && (h("eds-tag", { key: 'a001a815aa32a96beac3d4af08766479030fe8d4', label: this.category, intent: categoryTagIntent, size: "medium" })), h("h3", { key: '10d4532b4fe9b9a92ad24b09634028c583166bb3', class: "app-title" }, this.title), h("p", { key: 'de1559913d227ff6b023ecdbc5fea29f66cb01a0', class: "app-description" }, this.description), this.parsedTags && this.parsedTags.length > 0 && (h("div", { key: '386a2e72a92ea03c13a4410983b8b5320e83b810', class: "app-tags" }, this.parsedTags.map((tag, index) => (h("span", { key: index, class: "app-tag" }, tag.label))))), this.url && (h("eds-link", { key: '2c1a3d133a6f04b6a3359a3c8d2f47eb19c75202', label: this.linkText, url: this.url, intent: linkIntent, icon: "arrow-right", "icon-pos": "right" }))));
+        return (h("div", { key: '84aa9bd8ccac7cd163a0295e53610d3f149d2fc7', class: cardClasses }, this.category && h("eds-tag", { key: 'ff5f5fc550289df7dc13c9d77e9ee318692c54ef', label: this.category, intent: categoryTagIntent, size: "medium" }), h("h3", { key: '7f3ed9e3c270cf7c7d99f084cd3f7dac93929676', class: "app-title" }, this.title), h("p", { key: '969ed185ab45832e1e10a5446067f6926864696c', class: "app-description" }, this.description), this.parsedTags && this.parsedTags.length > 0 && (h("div", { key: '4a619204bcfe0b85e3e69b58157269f7bed9f44b', class: "app-tags" }, this.parsedTags.map((tag, index) => (h("span", { key: index, class: "app-tag" }, tag.label))))), this.url && (h("eds-link", { key: 'd2f32c5114f60cf2b25e96db84e090d90fe1a9ed', label: this.linkText, url: this.url, intent: linkIntent, icon: "arrow-right", "icon-pos": "right" }))));
     }
     static get is() { return "eds-card-app"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-cards/eds-card-composer/eds-card-desc/eds-card-desc.js

@@ -21,7 +21,7 @@ export class EdsCardDesc {
         return this.truncate && this.truncateLines ? `line-clamp-${this.truncateLines}` : '';
     }
     render() {
-        return (h("p", { key: 'c018c6b42e709c9e5df23ba9a999955ee4da1fdd', class: `f-body-02 ${this.intent === 'secondary' ? 'text-inverse' : 'text-default'}` }, h("span", { key: 'bcfb43e3940a31dc4c0ec18904e4448eb27d0580', class: this.getTruncateClass() }, this.description)));
+        return (h("p", { key: 'd7d9f5d40d82700388753a165a998574bd69e674', class: `f-body-02 ${this.intent === 'secondary' ? 'text-inverse' : 'text-default'}` }, h("span", { key: 'bff2551896e726ce02a78b448a0e3f2a3df0c697', class: this.getTruncateClass() }, this.description)));
     }
     static get is() { return "eds-card-desc"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-cards/eds-card-composer/eds-card-title/eds-card-title.js

@@ -33,7 +33,7 @@ export class EdsCardTitle {
             return (h("span", { class: titleClass }, h("a", { class: `break-words after:absolute after:inset-0 after:z-10 after:content-[''] focus:outline-none ${textColorClass} cursor-pointer`, href: this.url, target: this.externalLink ? '_blank' : undefined, rel: this.externalLink ? 'noopener noreferrer' : undefined }, this.title)));
         }
         // No URL - render as plain text, no overlay, no pointer cursor
-        return (h("span", { class: `${titleClass} ${textColorClass} break-words` }, this.title));
+        return h("span", { class: `${titleClass} ${textColorClass} break-words` }, this.title);
     }
     static get is() { return "eds-card-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-cards/eds-card-cta/eds-card-cta.css

@@ -14,7 +14,9 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  justify-content: center;
+  /* Top-align the content so titles line up across equal-height cards in a
+     grid (centering made titles drift when descriptions differed in length). */
+  justify-content: flex-start;
 }
 
 /* Default variant - dark background with white text */
@@ -79,6 +81,11 @@
   position: relative;
   z-index: 1;
   width: 100%;
+  /* Fill the card so actions can pin to the bottom (buttons line up across
+     cards regardless of description length). */
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
 }
 
 .cta-title {
@@ -103,6 +110,8 @@
   justify-content: center;
   margin-bottom: 1.5rem;
   flex-wrap: wrap;
+  /* Push actions to the bottom of the card so they align across the row. */
+  margin-top: auto;
 }
 
 .cta-links {