@ebrains/components 3.1.0 → 3.2.0

package/dist/collection/components/eds-code-block/eds-code-block.css

@@ -2,159 +2,125 @@
   display: block;
 }
 
-/* Outer container */
-.relative {
+/* Dark code card — matches the embed-panel snippet mockup. */
+.codewrap {
   position: relative;
-}
-
-.bg-strongest {
-  background-color: #07140D;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.rounded-sm {
+  background: #08170f;
+  border: 1px solid rgba(255, 255, 255, 0.07);
   border-radius: 12px;
   overflow: hidden;
 }
 
-/* Header bar */
-.text-inverse {
-  color: #E5E7EB;
-}
-
-.flex {
+/* Top bar: language chip (left) + copy button (right). */
+.codetop {
   display: flex;
-}
-
-.items-center {
   align-items: center;
-}
-
-.justify-between {
   justify-content: space-between;
+  padding: 11px 13px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
 }
 
-.p-8 {
-  padding: 0.75rem 1rem;
-  background: rgba(255, 255, 255, 0.05);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-}
-
-/* Language badge */
-.f-ui-03 {
-  font-family: 'IBM Plex Mono', 'Courier New', monospace;
-  font-size: 0.6875rem;
-  font-weight: 500;
-  text-transform: uppercase;
+.langchip {
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-size: 9.5px;
   letter-spacing: 0.1em;
-  color: #00FF9D;
+  text-transform: uppercase;
+  color: #00ff9d;
   background: rgba(0, 255, 157, 0.1);
-  padding: 0.25rem 0.5rem;
-  border-radius: 4px;
-  line-height: 1.4;
+  border: 1px solid rgba(0, 255, 157, 0.25);
+  border-radius: 5px;
+  padding: 4px 8px;
+  line-height: 1;
 }
 
-/* Copy icon */
-.w-20 {
-  width: 1.25rem;
-}
-
-.h-20 {
-  height: 1.25rem;
-}
-
-.mt-8 {
-  margin-top: 0;
+.copy {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  background: transparent;
+  border: none;
   cursor: pointer;
-  color: #9CA3AF;
-  transition: color 0.2s ease;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-size: 10.5px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: rgba(235, 242, 238, 0.62);
+  padding: 5px 7px;
+  border-radius: 6px;
+  transition: color 0.14s, background 0.14s;
 }
-
-.mt-8:hover {
-  color: white;
+.copy:hover {
+  color: #00ff9d;
+  background: rgba(0, 255, 157, 0.08);
+}
+/* The glyph inherits the button's colour (greens on hover). */
+.copy eds-icon-wrapper {
+  color: inherit;
+  display: inline-flex;
 }
 
-/* Code area */
+/* Code area — horizontal scroll on long lines, never wraps mid-tag. */
 pre {
   margin: 0;
-  color: #D1D5DB;
+  padding: 16px 15px;
   overflow-x: auto;
+  white-space: pre;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-size: 12.5px;
+  line-height: 1.75;
+  color: #cfe3d8;
 }
 
-pre[class*="language-"] {
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.bg-stronger {
-  background: transparent;
-}
-
-.pl-8 {
-  padding: 1.25rem 1.5rem;
+code {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
 }
 
-.pb-8 {
-  padding-bottom: 1.25rem;
+/* Prism token colours mapped to the mockup palette. */
+.token.tag {
+  color: #ff7b9c;
 }
-
-code {
-  font-family: 'IBM Plex Mono', 'Courier New', monospace;
-  font-size: 0.875rem;
-  line-height: 1.7;
+.token.attr-name {
+  color: #9fe8ff;
 }
-
-/* Syntax highlighting */
-.token.keyword {
-  color: #ff79c6;
+.token.attr-value {
+  color: #00ff9d;
 }
-
 .token.string {
-  color: #00FF9D;
+  color: #00ff9d;
 }
-
-.token.function {
-  color: #8be9fd;
+.token.punctuation {
+  color: #6f8579;
+}
+/* Quotes / `=` inside an attribute read as part of the (green) string. */
+.token.attr-value .token.punctuation {
+  color: #00ff9d;
 }
-
 .token.comment {
-  color: #6B7280;
+  color: #6f8579;
   font-style: italic;
 }
-
-.token.tag {
-  color: #ff79c6;
-}
-
-.token.attr-name {
-  color: #8be9fd;
-}
-
-.token.attr-value {
-  color: #00FF9D;
+.token.keyword {
+  color: #ff7b9c;
 }
-
-.token.punctuation {
-  color: #d8d8d8;
+.token.function {
+  color: #9fe8ff;
 }
-
 .token.operator {
-  color: #8be9fd;
+  color: #9fe8ff;
 }
-
 .token.number {
   color: #ffb87e;
 }
-
 .token.boolean {
   color: #d18fff;
 }
-
 .token.property {
-  color: #8be9fd;
+  color: #9fe8ff;
 }
 
-/* Screen reader only */
+/* Screen-reader only */
 .sr-only {
   position: absolute;
   width: 1px;

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

@@ -80,7 +80,7 @@ export class EdsCodeBlock {
         return this.code; // Fallback if language is not provided or unsupported
     }
     render() {
-        return (h("div", { key: '4d73fa52c489b6995dd8a6d83c05e323bb1f5431', class: "relative bg-strongest rounded-sm" }, h("div", { key: 'c0df3237009310833b417f5ede5b7c204f2752bc', class: "text-inverse flex justify-between items-center p-8" }, this.language ? (h("span", { class: "f-ui-03" }, this.language.toUpperCase())) : (h("pre", { class: "bg-stronger pl-8", role: "region", "aria-label": "Code block without language" }, h("code", { innerHTML: this.getHighlightedCode() }))), h("span", { key: '016505a0749baaa52c6e4aa77f00b4da31e7ec45', "aria-hidden": "true", class: "w-20 h-20 mt-8" }, h("eds-icon-wrapper", { key: '21474f1b28af95251aca639c349aaac489d8519b', name: this.copied ? 'checkmark-filled' : 'copy', onClick: () => this.copyToClipboard() })), h("span", { key: '64450529ad3cf3dab7e74f8455307cdb3298bbc4', class: "sr-only" }, "Copy Code")), this.language && (h("pre", { key: 'affcb4719ef29d7ed9ed676eab975c98ceca31fa', class: `language-${this.language} bg-stronger pl-8 pb-8`, role: "region", "aria-label": `Code block in ${this.language}` }, h("code", { key: '43fa1b80c2e02233076c4da15a5aa04f0b49bfc3', innerHTML: this.getHighlightedCode() })))));
+        return (h("div", { key: '70292c4efd3cfaa9e825fe5f50ca4c04807bfbf6', class: "codewrap" }, h("div", { key: '8af431690673102d18e43fe225267244ecf7ed1c', class: "codetop" }, h("span", { key: '484e4eb6636cd91314a17a3f048f8486f7dccb0a', class: "langchip" }, this.language ? this.language.toUpperCase() : 'CODE'), h("button", { key: '9a866e116ce719c59985b62850a351a4a87c30a8', type: "button", class: "copy", "aria-label": "Copy code", onClick: () => this.copyToClipboard() }, h("eds-icon-wrapper", { key: 'bfb0c5fe395e5a1f814e32fe21edff4829394225', name: this.copied ? 'checkmark-filled' : 'copy', size: 16 }), this.copied ? 'Copied' : 'Copy')), h("pre", { key: 'cda2b6d9eee175ea01ee99ce68912813efa12a48', class: this.language ? `language-${this.language}` : '', role: "region", "aria-label": this.language ? `Code block in ${this.language}` : 'Code block' }, h("code", { key: '2ebb1b9ac0f24a6c3c82e486745a476a4b4d5b7c', innerHTML: this.getHighlightedCode() }))));
     }
     static get is() { return "eds-code-block"; }
     static get encapsulation() { return "shadow"; }

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

@@ -16,25 +16,26 @@ const DEFAULT_COLUMNS = [
             { label: 'Documentation', href: 'https://design.ebrains.eu/get-started/', external: true },
             { label: 'Components', href: 'https://design.ebrains.eu/ui-components/', external: true },
             { label: 'Foundations', href: 'https://design.ebrains.eu/foundations/', external: true },
-            { label: 'Analytics', href: 'https://design.ebrains.eu/analytics/', external: true },
-        ],
+            { label: 'Analytics', href: 'https://design.ebrains.eu/analytics/', external: true }
+        ]
     },
     {
         heading: 'Community',
         links: [
             { label: 'GitLab', href: 'https://gitlab.ebrains.eu/ri/tech-hub/ebrains-ui-ecosystem/', external: true },
             { label: 'Storybook', href: 'https://storybook.design.ebrains.eu', external: true },
-            { label: 'Report Issues', href: 'https://gitlab.ebrains.eu/ri/tech-hub/ebrains-ui-ecosystem/-/issues', external: true },
-            { label: 'Contribute', href: 'https://design.ebrains.eu/get-started/contributing/', external: true },
-        ],
+            {
+                label: 'Report Issues',
+                href: 'https://gitlab.ebrains.eu/ri/tech-hub/ebrains-ui-ecosystem/-/issues',
+                external: true
+            },
+            { label: 'Contribute', href: 'https://design.ebrains.eu/get-started/contributing/', external: true }
+        ]
     },
     {
         heading: 'Legal',
-        links: [
-            { label: 'MIT License' },
-            { label: 'Cookie Preferences', action: 'cookies' },
-        ],
-    },
+        links: [{ label: 'MIT License' }, { label: 'Cookie Preferences', action: 'cookies' }]
+    }
 ];
 /**
  * `EdsFooter` is the EBRAINS-wide footer component.
@@ -96,15 +97,18 @@ export class EdsFooter {
      * keeps the footer working with sensible defaults.
      */
     parseColumns(value) {
-        if (value === undefined || value === null || value === '')
+        if (value === undefined || value === null || value === '') {
             return DEFAULT_COLUMNS;
-        if (Array.isArray(value))
+        }
+        if (Array.isArray(value)) {
             return value;
+        }
         if (typeof value === 'string') {
             try {
                 const parsed = JSON.parse(value);
-                if (Array.isArray(parsed))
+                if (Array.isArray(parsed)) {
                     return parsed;
+                }
                 console.warn('eds-footer: `columns` JSON parsed but is not an array; using defaults');
                 return DEFAULT_COLUMNS;
             }
@@ -120,8 +124,9 @@ export class EdsFooter {
         this.backBtn = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#toTop');
     }
     handleScroll() {
-        if (!this.backBtn)
+        if (!this.backBtn) {
             return;
+        }
         const shouldShow = window.scrollY > 100 && document.body.scrollHeight > window.innerHeight;
         this.backBtn.style.opacity = shouldShow ? '1' : '0';
         this.backBtn.style.pointerEvents = shouldShow ? 'auto' : 'none';
@@ -139,8 +144,9 @@ export class EdsFooter {
      */
     renderLink(link, index) {
         if (link.action === 'cookies') {
-            if (!this.enableCookiesSettings)
+            if (!this.enableCookiesSettings) {
                 return null;
+            }
             return (h("li", { key: `cookies-${index}` }, h("a", { href: "javascript:void(0)", class: "footer-link", onClick: this.emitCookies, role: "button" }, this.cookiesPreferences || link.label)));
         }
         if (link.href) {
@@ -157,9 +163,8 @@ export class EdsFooter {
         // selector independently rather than relying on prop-based
         // inline styles, so theme tokens stay overridable from outside
         // via the host's CSS custom properties.
-        const rootClasses = ['eds-footer-root', isInverse ? 'theme-inverse' : 'theme-default']
-            .join(' ');
-        return (h("footer", { key: 'b09063376e3bd78845302473a96884bd473cea09', class: rootClasses }, this.social ? (h("div", { class: "footer-social" }, h("div", { class: "footer-container" }, h("eds-social-networks", { variant: this.variant })))) : null, h("div", { key: '3aeb8f496bb4c3c73da907ba9b9fbb72841be213', class: "footer-container" }, h("div", { key: 'e7e33ce7dee8079a9aff17d45963dfaff9576121', class: "footer-grid" }, h("div", { key: 'e6fc738e086774e114c5ceef1b82fea2e2840990', class: "footer-brand" }, h("div", { key: '96f7030269174c122ffe0117897a79b00020dd29', class: "footer-brand-row" }, h("a", { key: '5967c33efff435ceee2a45c21cae67749b91b9ba', target: "_blank", rel: "noopener noreferrer", class: "footer-flag-link", href: "https://research-and-innovation.ec.europa.eu/funding/funding-opportunities/funding-programmes-and-open-calls/horizon-europe_en", "aria-label": "Learn about Horizon Europe funding" }, h("svg", { key: '3de7debe64d431152e47a4daefb7c9facf7bf951', class: "footer-flag-svg", width: "63", height: "50", viewBox: "0 0 640 480", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '50e3f0c5ae41e3e7cc5689ddf01a8944a6c5d2eb', d: "M0 0h640v480H0V0z", fill: "#039" }), h("path", { key: '2c0f61e6de734d7214accd10cefd3a39e31f36a1', d: "M325.032 93.15l17.513-.398-14.401 9.972 5.789 16.53L320 108.639l-13.933 10.615 5.789-16.531-14.399-9.97 17.51.396L320 76.374l5.032 16.775zm0 284.444l17.513-.398-14.401 9.972 5.789 16.53L320 393.083l-13.933 10.615 5.789-16.531-14.399-9.97 17.51.397L320 360.818l5.032 16.776zm-147.25-158.983l5.029 16.761 17.511-.397-14.4 9.969 5.79 16.533-13.933-10.616-13.932 10.616 5.788-16.531-14.401-9.971 17.511.397 5.028-16.761.004-.015.001.003.001-.003.003.015zm77.885-105.334l17.511-.397-14.401 9.971 5.79 16.531-13.932-10.614-13.933 10.615 5.788-16.531-14.4-9.971h.005l-.003-.001 17.51.397 5.033-16.775 5.032 16.775zm-52.729 52.729l17.511-.398h.002l-14.402 9.971 5.79 16.531-13.933-10.615-13.932 10.615 5.789-16.532-14.4-9.97 17.51.397 5.033-16.776 5.032 16.777zm-5.001 125.803l5.027 16.759 17.513-.397-14.401 9.971 5.79 16.531-.005-.005.003.006-13.932-10.615-13.933 10.615 5.788-16.532-14.398-9.97 17.51.396 5.029-16.759.004-.016v.003l.002-.003.003.016zm51.445 47.71l5.027 16.76 17.513-.397-14.401 9.97 5.791 16.532-.004-.004.002.004-13.933-10.615-13.933 10.615 5.788-16.532-14.398-9.97 17.51.397 5.029-16.76.004-.016v.003l.002-.003.003.016zm217.873-104.147l17.511-.397-14.401 9.969 5.79 16.533-13.934-10.616-13.931 10.616 5.789-16.533-14.399-9.969 17.509.397 5.034-16.776 5.032 16.776zm-63.958-95.997l-5.786-16.522 14.401-9.972-17.511.398-5.033-16.778-5.034 16.777-17.51-.398 14.4 9.972-5.789 16.53 13.932-10.614 13.934 10.614-.004-.007zm38.797 42.122l13.934 10.614-.004-.007-5.787-16.524 14.401-9.971-17.51.399-5.033-16.778-5.033 16.777-17.51-.398h-.001l14.399 9.972-5.787 16.529 13.931-10.613zm5.007 127.071l17.51-.397-14.4 9.971 5.79 16.531-13.933-10.614-13.932 10.615 5.788-16.531-14.401-9.971h.005l-.003-.001 17.51.397 5.033-16.775 5.033 16.775zm-51.446 47.711l17.511-.397-14.4 9.97 5.79 16.532-13.933-10.615-13.933 10.615 5.789-16.531-14.401-9.971h.002l17.51.397 5.033-16.776 5.032 16.776z", fill: "#FC0" }))), h("p", { key: '9ff8e10db0e213754bfc73bcce1b3dd36bc62e30', class: "footer-funded" }, this.fundedBy)), h("p", { key: 'a24c4fbfe48c4c3c8d076f24da9c84b739a982d8', class: "footer-copyright" }, "\u00A9 ", rights)), this.resolvedColumns.map((col, ci) => (h("div", { class: "footer-column", key: `col-${ci}` }, h("h4", { class: "footer-column-heading" }, col.heading), h("ul", { class: "footer-column-list" }, (col.links || []).map((link, li) => this.renderLink(link, li)))))))), this.enableScrollTop ? (h("div", { id: "toTop", class: "footer-back-to-top" }, h("eds-button", { id: "backToTop", "aria-label": this.backToTopAriaLabel, intent: isInverse ? 'ghostInverse' : 'ghost', size: "large", icon: "chevron-up", onClick: this.backToTop, tabindex: "-1" }))) : null));
+        const rootClasses = ['eds-footer-root', isInverse ? 'theme-inverse' : 'theme-default'].join(' ');
+        return (h("footer", { key: 'e7d7584fcd2dcfd2e4e469c5e9e2621f010036fe', class: rootClasses }, this.social ? (h("div", { class: "footer-social" }, h("div", { class: "footer-container" }, h("eds-social-networks", { variant: this.variant })))) : null, h("div", { key: '4233c2f5665ff8fd49f1949ef450b87149f1d9ba', class: "footer-container" }, h("div", { key: '6a90c75dc5a099727e58fb21c706e7d310c2e58f', class: "footer-grid" }, h("div", { key: '450704c6200bf603a296c383872eecdf4ef94fd9', class: "footer-brand" }, h("div", { key: '380ba7f532a8f94627e206e33480be697861dc57', class: "footer-brand-row" }, h("a", { key: '2cbc262b8630d7106b1ff4c9b9e97f7421df05bd', target: "_blank", rel: "noopener noreferrer", class: "footer-flag-link", href: "https://research-and-innovation.ec.europa.eu/funding/funding-opportunities/funding-programmes-and-open-calls/horizon-europe_en", "aria-label": "Learn about Horizon Europe funding" }, h("svg", { key: 'a1374ae892acdd10d5294e3197e9b37e8adb7b38', class: "footer-flag-svg", width: "63", height: "50", viewBox: "0 0 640 480", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '11b83b7931271e829803de01822a6618e66c8b17', d: "M0 0h640v480H0V0z", fill: "#039" }), h("path", { key: '2e5b724042df62f59964709ec2e6954767690805', d: "M325.032 93.15l17.513-.398-14.401 9.972 5.789 16.53L320 108.639l-13.933 10.615 5.789-16.531-14.399-9.97 17.51.396L320 76.374l5.032 16.775zm0 284.444l17.513-.398-14.401 9.972 5.789 16.53L320 393.083l-13.933 10.615 5.789-16.531-14.399-9.97 17.51.397L320 360.818l5.032 16.776zm-147.25-158.983l5.029 16.761 17.511-.397-14.4 9.969 5.79 16.533-13.933-10.616-13.932 10.616 5.788-16.531-14.401-9.971 17.511.397 5.028-16.761.004-.015.001.003.001-.003.003.015zm77.885-105.334l17.511-.397-14.401 9.971 5.79 16.531-13.932-10.614-13.933 10.615 5.788-16.531-14.4-9.971h.005l-.003-.001 17.51.397 5.033-16.775 5.032 16.775zm-52.729 52.729l17.511-.398h.002l-14.402 9.971 5.79 16.531-13.933-10.615-13.932 10.615 5.789-16.532-14.4-9.97 17.51.397 5.033-16.776 5.032 16.777zm-5.001 125.803l5.027 16.759 17.513-.397-14.401 9.971 5.79 16.531-.005-.005.003.006-13.932-10.615-13.933 10.615 5.788-16.532-14.398-9.97 17.51.396 5.029-16.759.004-.016v.003l.002-.003.003.016zm51.445 47.71l5.027 16.76 17.513-.397-14.401 9.97 5.791 16.532-.004-.004.002.004-13.933-10.615-13.933 10.615 5.788-16.532-14.398-9.97 17.51.397 5.029-16.76.004-.016v.003l.002-.003.003.016zm217.873-104.147l17.511-.397-14.401 9.969 5.79 16.533-13.934-10.616-13.931 10.616 5.789-16.533-14.399-9.969 17.509.397 5.034-16.776 5.032 16.776zm-63.958-95.997l-5.786-16.522 14.401-9.972-17.511.398-5.033-16.778-5.034 16.777-17.51-.398 14.4 9.972-5.789 16.53 13.932-10.614 13.934 10.614-.004-.007zm38.797 42.122l13.934 10.614-.004-.007-5.787-16.524 14.401-9.971-17.51.399-5.033-16.778-5.033 16.777-17.51-.398h-.001l14.399 9.972-5.787 16.529 13.931-10.613zm5.007 127.071l17.51-.397-14.4 9.971 5.79 16.531-13.933-10.614-13.932 10.615 5.788-16.531-14.401-9.971h.005l-.003-.001 17.51.397 5.033-16.775 5.033 16.775zm-51.446 47.711l17.511-.397-14.4 9.97 5.79 16.532-13.933-10.615-13.933 10.615 5.789-16.531-14.401-9.971h.002l17.51.397 5.033-16.776 5.032 16.776z", fill: "#FC0" }))), h("p", { key: '20e15f10baf1ddf47bc35e4d339a8efaf4b4bb49', class: "footer-funded" }, this.fundedBy)), h("p", { key: '126e04d4a993422b5554fb87dfb9b388e8d2a4af', class: "footer-copyright" }, "\u00A9 ", rights)), this.resolvedColumns.map((col, ci) => (h("div", { class: "footer-column", key: `col-${ci}` }, h("h4", { class: "footer-column-heading" }, col.heading), h("ul", { class: "footer-column-list" }, (col.links || []).map((link, li) => this.renderLink(link, li)))))))), this.enableScrollTop ? (h("div", { id: "toTop", class: "footer-back-to-top" }, h("eds-button", { id: "backToTop", "aria-label": this.backToTopAriaLabel, intent: isInverse ? 'ghostInverse' : 'ghost', size: "large", icon: "chevron-up", onClick: this.backToTop, tabindex: "-1" }))) : null));
     }
     static get is() { return "eds-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -94,8 +94,9 @@ export default {
 // stays valid even if a link label or href contains one. Shared by every
 // render function below.
 function columnsAttr(columns) {
-    if (columns == null)
+    if (columns == null) {
         return '';
+    }
     const json = JSON.stringify(columns).replace(/'/g, ''');
     return `columns='${json}'`;
 }
@@ -110,9 +111,7 @@ function columnsAttr(columns) {
  */
 export const Default = {
     render: (args) => {
-        const notice = args.enableCookiesSettings
-            ? `<eds-matomo-notice></eds-matomo-notice>`
-            : '';
+        const notice = args.enableCookiesSettings ? `<eds-matomo-notice></eds-matomo-notice>` : '';
         return `
       <eds-alert message="When cookies consent is enabled, please include <code>eds-matomo-notice</code> in your page" class="mb-16"></eds-alert>
       ${notice}