@ebrains/components 2.4.0 → 3.0.0

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

@@ -39,7 +39,9 @@
 .justify-between {
   justify-content: space-between;
 }
-
+.p-\[24px\] {
+  padding: 24px;
+}
 @media (min-width: 900px) {
   .lg\:w-\[150px\] {
     width: 150px;

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { hLogoColor, hLogoBlack, hLogoColorWhite, hLogoWhite, vLogoBlack, vLogoColor, vLogoColorWhite, vLogoWhite, vLogoWhiteNoBg, hLogoWhiteNoBg } from "../../../../../../../packages/svgs/src/index";
+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.
@@ -22,7 +22,7 @@ export class EdsLogo {
     constructor() {
         this.href = '/';
         this.orientation = 'horizontal';
-        this.type = undefined;
+        this.variant = 'positive';
         this.label = 'Home';
     }
     /**
@@ -45,38 +45,14 @@ export class EdsLogo {
      * Determines the appropriate SVG content based on the `orientation` and `type` props.
      */
     getLogo() {
-        const logos = {
-            horizontal: {
-                color: hLogoColor,
-                black: hLogoBlack,
-                'color-white': hLogoColorWhite,
-                white: hLogoWhite,
-                'no-bg': hLogoWhiteNoBg
-            },
-            vertical: {
-                color: vLogoColor,
-                black: vLogoBlack,
-                'color-white': vLogoColorWhite,
-                white: vLogoWhite,
-                'no-bg': vLogoWhiteNoBg
-            }
-        };
-        // Validate the orientation and type
-        const validOrientation = logos[this.orientation];
-        if (!validOrientation) {
-            //console.error(`Invalid orientation "${this.orientation}". Falling back to "horizontal".`);
-            return hLogoColor; // Default fallback logo
+        if (this.variant == 'negative') {
+            return logoNegative;
         }
-        const validLogo = validOrientation[this.type];
-        if (!validLogo) {
-            //console.error(`Invalid type "${this.type}" for orientation "${this.orientation}". Falling back to "color".`);
-            return validOrientation['color']; // Fallback to color logo
-        }
-        return validLogo;
+        return logoPositive;
     }
     render() {
         const logoContent = this.getLogo();
-        return (h("a", { key: '341988e61c1b9f946bd4529f5562af8366704868', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, h("div", { key: '1a1e4516ba223b6132a85889626ca7856ca5a16c', innerHTML: logoContent })));
+        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 })));
     }
     static get is() { return "eds-logo"; }
     static get encapsulation() { return "shadow"; }
@@ -128,22 +104,23 @@ export class EdsLogo {
                 "reflect": false,
                 "defaultValue": "'horizontal'"
             },
-            "type": {
+            "variant": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'color' | 'black' | 'color-white' | 'white' | 'no-bg'",
-                    "resolved": "\"black\" | \"color\" | \"color-white\" | \"no-bg\" | \"white\"",
+                    "original": "'positive' | 'negative'",
+                    "resolved": "\"negative\" | \"positive\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The type of the logo.\n`'color' | 'black' | 'color-white' | 'white'`"
+                    "text": "The visual variant of the logo.\n`'positive'` for dark logo on light backgrounds, `'negative'` for light logo on dark backgrounds."
                 },
                 "attribute": "type",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "'positive'"
             },
             "label": {
                 "type": "string",

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

@@ -1,38 +1,21 @@
 export default {
     title: 'Components/Logo',
     component: 'eds-logo',
-    argTypes: {
-        href: {
-            control: 'text',
-            defaultValue: 'https://ebrains.eu',
-            description: 'The URL that the logo should link to.'
-        },
-        orientation: {
-            control: 'select',
-            options: ['horizontal', 'vertical'],
-            defaultValue: 'horizontal',
-            description: 'The orientation of the logo to display.'
-        },
-        type: {
-            control: 'select',
-            options: ['color', 'black', 'color-white', 'white'],
-            defaultValue: 'color',
-            description: 'The style of the logo.'
-        }
-    }
+    argTypes: {}
 };
-const Template = ({ href, orientation, type }) => `
-<div class="mr-auto w-[300px]">
+const Template = () => `
+<div class="bg-dark mr-auto w-[300px]">
   <eds-logo 
-    href="${href}" 
-    orientation="${orientation}" 
-    type="${type}">
+     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 = {
-    href: 'https://ebrains.eu',
-    orientation: 'horizontal',
-    type: 'color'
-};
+Default.args = {};

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

@@ -1,3 +1,36 @@
+/* Modal visibility - simple without jarring animations */
+.modal-open {
+    display: flex;
+}
+
+.modal-closed {
+    display: none;
+}
+
+.modal-backdrop {
+    /* No transition - instant appearance */
+}
+
+.backdrop-visible {
+    opacity: 0.9;
+}
+
+.backdrop-hidden {
+    opacity: 0;
+}
+
+.modal-content {
+    /* No transition on positioning to avoid jumping */
+}
+
+.modal-content-visible {
+    opacity: 1;
+}
+
+.modal-content-hidden {
+    opacity: 0;
+}
+
 .block {
     display: block;
 }
@@ -14,6 +47,10 @@
     display: flex;
 }
 
+.flex-col {
+    flex-direction: column;
+}
+
 .inline-flex {
     display: inline-flex;
 }
@@ -72,12 +109,21 @@
     padding-bottom: 1.25rem;
 }
 
+.py-24 {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+}
+
+.leading-normal {
+    line-height: 1.5;
+}
+
 .bg-inverse {
     background-color: var(--white);
 }
 
 .bg-dark {
-    background-color: var(--grey-300);
+    background-color: var(--grey-light);
 }
 
 .rounded-lg {
@@ -124,6 +170,10 @@
     top: 0rem;
 }
 
+.top-16 {
+    top: 1rem;
+}
+
 .left-0 {
     left: 0rem;
 }
@@ -136,6 +186,10 @@
     bottom: 0rem;
 }
 
+.bottom-16 {
+    bottom: 1rem;
+}
+
 .bottom-20 {
     bottom: 1.25rem;
 }
@@ -144,6 +198,22 @@
     flex-grow: 1;
 }
 
+.flex-1 {
+    flex: 1 1 0%;
+}
+
+.flex-shrink-0 {
+    flex-shrink: 0;
+}
+
+.overflow-y-auto {
+    overflow-y: auto;
+}
+
+.max-h-\[90vh\] {
+    max-height: 90vh;
+}
+
 .-translate-x-1\/2 {
     --tw-translate-x: -50%;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -202,18 +272,6 @@
     letter-spacing: var(--f-heading-05-letterSpacing);
 }
 
-.text-light {
-    color: var(--grey-700);
-}
-
-.text-lighter {
-    color: var(--grey-600);
-}
-
-.text-lightest {
-    color: var(--grey-500);
-}
-
 .text-default {
     color: var(--black);
 }
@@ -223,19 +281,19 @@
 }
 
 .bg-dark {
-    background-color: var(--grey-300);
+    background-color: var(--grey-light);
 }
 
 .bg-strong {
-    background-color: var(--grey-700);
+    background-color: var(--grey-dark);
 }
 
 .bg-strongest {
-    background-color: var(--black);
+    background-color: var(--brand-black);
 }
 
-.ml-8 {
-    margin-left: 0.5rem;
+.mr-8 {
+    margin-right: 0.5rem;
 }
 
 .pt-8 {
@@ -246,11 +304,19 @@
     opacity: 0.9;
 }
 
+/* Modal title - proper spacing for descenders */
+.modal-title {
+    line-height: 1.5;
+    padding-bottom: 2px;
+    display: inline-block;
+}
+
 .line-clamp-1 {
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 1;
+    padding-bottom: 2px; /* Space for descenders */
 }
 
 .line-clamp-2 {
@@ -258,6 +324,7 @@
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
+    padding-bottom: 2px; /* Space for descenders */
 }
 
 .line-clamp-3 {
@@ -265,6 +332,7 @@
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 3;
+    padding-bottom: 2px; /* Space for descenders */
 }
 
 .line-clamp-4 {
@@ -272,6 +340,34 @@
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 4;
+    padding-bottom: 2px; /* Space for descenders */
+}
+
+/* Modal size variants with min/max width */
+.modal-small {
+    min-width: 300px;
+    max-width: 500px;
+}
+
+.modal-medium {
+    min-width: 300px;
+    max-width: 700px;
+}
+
+.modal-large {
+    min-width: 300px;
+    max-width: 900px;
+}
+
+@media (max-width: 749px) {
+    /* On mobile, modals should be full width with padding */
+    .modal-small,
+    .modal-medium,
+    .modal-large {
+        min-width: calc(100% - 2rem);
+        max-width: calc(100% - 2rem);
+        margin: 0 1rem;
+    }
 }
 
 @media (min-width: 750px) {
@@ -282,7 +378,7 @@
     .md\:w-auto {
         width: auto;
     }
-    
+
     .md\:min-w-\[500px\] {
         width: 500px;
     }

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

@@ -12,15 +12,28 @@ import { h } from "@stencil/core";
  */
 export class EdsModal {
     constructor() {
+        this.previousActiveElement = null;
         this.heading = '';
-        this.truncate = 1;
+        this.truncate = undefined;
         this.position = 'middle';
+        this.size = 'medium';
         this.inverseHeader = false;
         this.isOpen = false;
     }
     getTruncateClass() {
         return this.truncate ? `line-clamp-${this.truncate}` : '';
     }
+    getSizeClass() {
+        switch (this.size) {
+            case 'small':
+                return 'modal-small';
+            case 'large':
+                return 'modal-large';
+            case 'medium':
+            default:
+                return 'modal-medium';
+        }
+    }
     /**
      * Returns the Tailwind CSS classes to position the modal based on the `position` prop.
      *
@@ -31,8 +44,8 @@ export class EdsModal {
         switch (this.position) {
             case 'top':
                 return [
-                    // mobile: pinned to top, full-width
-                    'top-0',
+                    // mobile: small gap from top, full-width
+                    'top-16',
                     'left-0',
                     'w-full',
                     // desktop: half-width centred and offset down
@@ -42,7 +55,7 @@ export class EdsModal {
                     'md:top-20'
                 ].join(' ');
             case 'bottom':
-                return ['bottom-0', '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':
@@ -51,10 +64,9 @@ export class EdsModal {
             default:
                 return [
                     // mobile: full-width, start from top with a little padding
-                    'top-0',
+                    'top-16',
                     'left-0',
                     'w-full',
-                    'pt-4',
                     // desktop: centred both axes
                     'md:left-1/2',
                     'md:top-1/2',
@@ -64,12 +76,51 @@ export class EdsModal {
                 ].join(' ');
         }
     }
+    trapFocus(event) {
+        var _a;
+        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)
+            return;
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+        if (event.shiftKey) {
+            if (document.activeElement === firstElement) {
+                lastElement.focus();
+                event.preventDefault();
+            }
+        }
+        else {
+            if (document.activeElement === lastElement) {
+                firstElement.focus();
+                event.preventDefault();
+            }
+        }
+    }
+    lockBodyScroll() {
+        document.body.style.overflow = 'hidden';
+    }
+    unlockBodyScroll() {
+        document.body.style.overflow = '';
+    }
     /**
      * Opens the modal.
      */
     async open() {
         var _a;
+        // Store currently focused element
+        this.previousActiveElement = document.activeElement;
         this.isOpen = true;
+        this.lockBodyScroll();
+        // Focus first focusable element in modal after it renders
+        setTimeout(() => {
+            var _a;
+            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) {
+                focusableElements[0].focus();
+            }
+        }, 100);
         sendAnalytics({
             category: 'ui-component',
             parentContext: null,
@@ -84,6 +135,14 @@ export class EdsModal {
     async close() {
         var _a;
         this.isOpen = false;
+        this.unlockBodyScroll();
+        // Return focus to previously focused element
+        if (this.previousActiveElement && typeof this.previousActiveElement.focus === 'function') {
+            setTimeout(() => {
+                var _a;
+                (_a = this.previousActiveElement) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 100);
+        }
         sendAnalytics({
             category: 'ui-component',
             parentContext: null,
@@ -96,7 +155,12 @@ export class EdsModal {
      * Toggles the modal open or closed.
      */
     async toggle() {
-        this.isOpen = !this.isOpen;
+        if (this.isOpen) {
+            await this.close();
+        }
+        else {
+            await this.open();
+        }
     }
     /**
      * Listens for global custom events to open the modal.
@@ -111,19 +175,26 @@ export class EdsModal {
         this.close();
     }
     /**
-     * Closes the modal when the Escape key is pressed.
+     * Closes the modal when the Escape key is pressed and handles focus trapping on Tab.
      */
     handleKeyDown(event) {
-        if (this.isOpen && event.key === 'Escape') {
+        if (!this.isOpen)
+            return;
+        if (event.key === 'Escape') {
             this.close();
         }
+        else if (event.key === 'Tab') {
+            this.trapFocus(event);
+        }
     }
     render() {
         // Generate a unique id for the title so we can reference it for aria-labelledby.
         const titleId = `modal-title-${this.el.tagName.toLowerCase()}`;
-        return (h("div", { key: '25f038fe934339968388e7b5281a8f0b8509f789', id: "eds-modal", class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-9999991 flex`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, this.isOpen && (h("div", { key: '57f180a65ef43fc8f8c5a232c4b80a880fdfc8e9', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
-            ,
-            onClick: () => this.close() })), h("div", { key: 'f8e4005425c463fbfd38c4174f3bc315a648d05f', class: `container absolute bg-inverse z-10 ${this.getModalPositionClasses()} grow justify-center` }, h("div", { key: 'dd9c641489dfea9ec2784de91ca3e819a8c2413c', class: `flex justify-between items-center border-b-2 border-softer px-20 py-20  ${this.inverseHeader ? 'bg-strongest text-inverse' : 'bg-dark text-default'}` }, h("span", { key: '2e596080da1d79bcc91d542f592ab2b22c96b9d6', id: titleId, class: `f-heading-04 ${this.getTruncateClass()}` }, this.heading), h("eds-button", { key: '260a6ccb15c3aed11585b7d81c1c1d4912e3cd3f', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8 text-default" })), h("div", { key: '96f67530d2c0504507e3fb9becf537f5517081d1', class: "pt-8 px-20 py-20" }, h("slot", { key: '3ffc38832d4a4e8d61c5182f7ceda4ea7876fa31' })))));
+        // Don't render anything when modal is closed to prevent blocking clicks
+        if (!this.isOpen) {
+            return null;
+        }
+        return (h("div", { id: "eds-modal", class: "modal-open fixed inset-0 z-9999991 flex", role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, h("div", { class: "modal-backdrop fixed inset-0 bg-dark backdrop-visible", onClick: () => this.close() }), h("div", { class: `container absolute bg-inverse z-10 rounded-lg shadow-lg ${this.getModalPositionClasses()} ${this.getSizeClass()} grow justify-center max-h-[90vh] flex flex-col modal-content modal-content-visible` }, h("div", { class: `flex justify-between items-center border-b-2 border-softer px-20 py-24 flex-shrink-0  ${this.inverseHeader ? 'bg-strongest text-inverse' : 'bg-dark text-default'}` }, h("span", { id: titleId, class: `f-heading-04 mr-8 modal-title ${this.getTruncateClass()}` }, this.heading), h("eds-button", { intent: this.inverseHeader ? 'ghostInverse' : 'secondary', size: "large", icon: "close", "aria-label": "Close modal", onClick: () => this.close() })), h("div", { class: "pt-8 px-20 py-20 overflow-y-auto flex-1" }, h("slot", null)))));
     }
     static get is() { return "eds-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -161,19 +232,18 @@ export class EdsModal {
                 "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "1 | 2 | 3 | 4",
-                    "resolved": "1 | 2 | 3 | 4",
+                    "original": "0 | 1 | 2 | 3 | 4",
+                    "resolved": "0 | 1 | 2 | 3 | 4",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The number of lines to truncate the title to.\nDefault is 3 lines."
+                    "text": "The number of lines to truncate the title to.\nSet to 0 or undefined to disable truncation."
                 },
                 "attribute": "truncate",
-                "reflect": false,
-                "defaultValue": "1"
+                "reflect": false
             },
             "position": {
                 "type": "string",
@@ -193,6 +263,24 @@ export class EdsModal {
                 "reflect": false,
                 "defaultValue": "'middle'"
             },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the modal.\n- `\"small\"`: 500px max width\n- `\"medium\"` (default): 700px max width\n- `\"large\"`: 900px max width"
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'medium'"
+            },
             "inverseHeader": {
                 "type": "boolean",
                 "mutable": false,
@@ -228,6 +316,10 @@ export class EdsModal {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
                         }
                     },
                     "return": "Promise<void>"

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

@@ -16,6 +16,12 @@
 .mr-4 {
   margin-right: 0.25rem;
 }
+.gap-2 {
+  gap: 0.125rem;
+}
+.gap-4 {
+  gap: 0.25rem;
+}
 .grid {
   display: grid;
 }
@@ -69,5 +75,8 @@
   letter-spacing: var(--f-ui-04-letterSpacing);
 }
 .text-light {
-  color: var(--grey-700);
+  color: var(--grey-dark);
+}
+.flex-wrap {
+  flex-wrap: wrap;
 }