@ebrains/components 3.0.0 → 3.1.0

package/dist/cjs/eds-app-root.cjs.entry.js

@@ -30,7 +30,7 @@ const EdsAppRoot = class {
         this.combinedInitPromise = Promise.all([initKeycloakPromise, authStatusPromise]);
     }
     render() {
-        return (index.h("div", { key: '10a75e7e117b2f3ab3d0ba8f2a26c122b2e0eed4' }, index.h("eds-splash-screen", { key: 'ab527af22c9a9fe861bbed4759946428e3e7fdf0', inverse: true, initPromise: this.combinedInitPromise }), index.h("eds-login", { key: '78e7face11e06df76b9dd29e99b7d968cc2cf32e', "keycloak-url": "http://localhost:8080", "keycloak-realm": "nigeor-realm", "keycloak-client-id": "stencil-app" }), index.h("main", { key: '30f463e667ccc25062bbf2764fdabc8937b6097c' }, this.isAuthenticated ? index.h("h1", null, "Welcome, authenticated user!") : index.h("h1", null, "Please log in."))));
+        return (index.h("div", { key: 'c9192fb7e315fa8fe41c9ee512f4573951865208' }, index.h("eds-splash-screen", { key: 'e3d413597cc370692c593abd4017d97e1c172219', inverse: true, initPromise: this.combinedInitPromise }), index.h("eds-login", { key: '2821e64738053db4809663aa918f98c4df358201', "keycloak-url": "http://localhost:8080", "keycloak-realm": "nigeor-realm", "keycloak-client-id": "stencil-app" }), index.h("main", { key: '4680b74ec0f74b8060b020f726f6696b41b43a9e' }, this.isAuthenticated ? index.h("h1", null, "Welcome, authenticated user!") : index.h("h1", null, "Please log in."))));
     }
 };
 

package/dist/cjs/eds-cookies-preference.cjs.entry.js

@@ -31,7 +31,7 @@ const EdsCookiesPreference = class {
         }
     }
     render() {
-        return (index.h("div", { key: '3926e6e4972c901880f57859280330ad315dc263' }, index.h("eds-link", { key: '8c513565cb94589c1d441aa4b0badf79ab464169', size: "small", intent: this.intent, label: this.buttonText, onClick: () => this.toggleCookiesPopup() }), this.showMatomoNotice && index.h("eds-matomo-notice", { "force-show": true, key: this.noticeKey })));
+        return (index.h("div", { key: '0a1f75fe95820dd8f994193f86b52b684f5fd240' }, index.h("eds-link", { key: 'd3b5740fa53b30a39296b23cd95da1ad2d8d730d', size: "small", intent: this.intent, label: this.buttonText, onClick: () => this.toggleCookiesPopup() }), this.showMatomoNotice && index.h("eds-matomo-notice", { "force-show": true, key: this.noticeKey })));
     }
 };
 EdsCookiesPreference.style = EdsCookiesPreferenceStyle0;

package/dist/cjs/eds-feedback.cjs.entry.js

@@ -62,7 +62,7 @@ const EdsFeedback = class {
         const HeadingTag = this.headingLevel;
         const levelNum = this.headingLevel.replace('h', '');
         const headingClass = `f-heading-${levelNum.padStart(2, '0')} my-4`;
-        return (index.h("div", { key: '7d01b8aef2854cfdb739553e7f43ed9516199e1e', class: "grid inline" }, index.h(HeadingTag, { key: 'a0c4a4f93598b955e90416d50260aaa3f644615a', class: headingClass }, this.label), index.h("p", { key: 'acb2db8fc209faf2d39622e2e858fa1e7403e1b4', class: "f-body-01 text-light" }, this.description), index.h("eds-rating", { key: 'b0db57c9e3539a5edfecf67cc3a12dd87d74fad9', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (index.h("span", { key: '8d6bf62a18fdb12dddba932be9a5115396fdfd6f', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
+        return (index.h("div", { key: '5eddbd664389530e209698e5e435c853c8f50b9f', class: "grid inline" }, index.h(HeadingTag, { key: '22d1d4a44a116f78bbfa66946d8b7a9f95779524', class: headingClass }, this.label), index.h("p", { key: 'd3e5abefa5d0e1e32281b5088251fb9c304b8d2a', class: "f-body-01 text-light" }, this.description), index.h("eds-rating", { key: '65f1e772ac885d20f46e147aedeb55ab2ec871fe', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (index.h("span", { key: 'f660ceb9889d560ec1687c6f17bdbbe6a89f90ee', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/eds-frame.cjs.entry.js

@@ -76,7 +76,7 @@ const EdsFrame = class {
         }
     }
     render() {
-        return (index.h("div", { key: '0fa74cf426f9d934a035b5e3f6c9e5722c40beab', class: this.articleClasses() }, index.h("div", { key: '65ab4084241ce1b5337e9bfaaffb5c2aaceec28e', class: "effect-height flex items-center justify-between py-8 px-12" }, index.h("span", { key: 'f1cda1a4d61b47550d9d8cd08986f2253710c4ea', class: "f-ui-02" }, this.frameLabel), !this.iframeError && this.url && this.urlLabel ? (index.h("eds-link", { label: this.urlLabel, url: this.url, intent: this.intent, class: "ml-auto", external: true, disabled: false, icon: "arrow-up-right" })) : null), index.h("div", { key: 'e02ffe4f38f1375a0694f2acec72406824745437', class: "border-softer" }, this.iframeError ? (index.h("div", { class: "container ml-8 mr-8 mt-16" }, this.errorMessage)) : (index.h("iframe", { src: this.frameSrc, width: "100%", height: this.getFrameHeight(), title: this.frameLabel, frameBorder: "0", allowFullScreen: true })))));
+        return (index.h("div", { key: 'ddbc978054f645eb990cde6bdd26647bd01eeb1a', class: this.articleClasses() }, index.h("div", { key: '0a16fbd950742b8a75428b3705deaa03ef785a5b', class: "effect-height flex items-center justify-between py-8 px-12" }, index.h("span", { key: '0c2a84cae101ec1e5352ed7be7b874b6ec45f37d', class: "f-ui-02" }, this.frameLabel), !this.iframeError && this.url && this.urlLabel ? (index.h("eds-link", { label: this.urlLabel, url: this.url, intent: this.intent, class: "ml-auto", external: true, disabled: false, icon: "arrow-up-right" })) : null), index.h("div", { key: 'c001f1b33c5136820155b0299e83b6dc49fbbd43', class: "border-softer" }, this.iframeError ? (index.h("div", { class: "container ml-8 mr-8 mt-16" }, this.errorMessage)) : (index.h("iframe", { src: this.frameSrc, width: "100%", height: this.getFrameHeight(), title: this.frameLabel, frameBorder: "0", allowFullScreen: true })))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/eds-gauge.cjs.entry.js

@@ -51,7 +51,7 @@ const EdsGauge = class {
         const textStyle = {
             fontSize: `${fontSize}px`
         };
-        return (index.h("div", { key: 'f5801b63984f42bad206445de4e865c0e161b88e', role: "progressbar", "aria-valuemin": this.valueMin, "aria-valuemax": this.valueMax, "aria-valuenow": clamped, "aria-label": `Gauge value: ${clamped} of ${this.valueMax}`, class: "relative inline-block rounded-full overflow-hidden", style: containerStyle }, index.h("div", { key: '1a982401ba1853e937dfbb9aeb4736d4665abab1', class: "absolute bg-inverse rounded-full", style: maskStyle }), index.h("div", { key: '0db002b1a3a3f49fe3fd0f3aa4d3fd0e2ee6a45d', class: "absolute inset-0 flex items-center justify-center" }, index.h("span", { key: 'a011eaaab9e6f3d15d706bf9309ae7bafa689387', class: "f-body-01 text-default", style: textStyle }, clamped))));
+        return (index.h("div", { key: '5629f8adbc6f144aad49062883cb85ecf24fc16c', role: "progressbar", "aria-valuemin": this.valueMin, "aria-valuemax": this.valueMax, "aria-valuenow": clamped, "aria-label": `Gauge value: ${clamped} of ${this.valueMax}`, class: "relative inline-block rounded-full overflow-hidden", style: containerStyle }, index.h("div", { key: 'd668b54b0a5f4bf260a2f1153781c59741bd8694', class: "absolute bg-inverse rounded-full", style: maskStyle }), index.h("div", { key: 'f08feba97d30ed893a72a7e07e412aa82ea8cd3d', class: "absolute inset-0 flex items-center justify-center" }, index.h("span", { key: '2a8dccde44677d4a4b742cd992144d6cf399ee9b', class: "f-body-01 text-default", style: textStyle }, clamped))));
     }
 };
 EdsGauge.style = EdsGaugeStyle0;

package/dist/cjs/eds-gitlab-contributors.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-50bc1aa4.js');
 
-const edsGitlabContributorsCss = ".container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.flex{display:flex}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.grid{display:grid}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.gap-2{gap:0.5rem;}.gap-4{gap:1rem;}.gap-6{gap:1.5rem;}.p-5{padding:1.25rem;}.p-12{padding:3rem;}.pb-2{padding-bottom:0.25rem;}.pb-4{padding-bottom:1rem;}.mb-6{margin-bottom:1.5rem;}.m-0{margin:0}.mt-auto{margin-top:auto}.w-full{width:100%}.min-w-0{min-width:0}.text-xs{font-size:0.75rem;line-height:1rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-semibold{font-weight:600}.whitespace-nowrap{white-space:nowrap}.overflow-hidden{overflow:hidden}.text-ellipsis{text-overflow:ellipsis}.no-underline{text-decoration:none}.text-gray-600{color:var(--eds-color-gray-600, #4b5563)}.text-gray-900{color:var(--eds-color-gray-900, #111827)}.border-gray-200{border-color:var(--eds-color-gray-200, #e5e7eb)}.bg-white{background-color:var(--eds-color-white, #ffffff)}.text-primary-600{color:var(--eds-color-primary-600, #2563eb)}.hover\\:text-primary-600:hover{color:var(--eds-color-primary-600, #2563eb)}.border-primary-300{border-color:var(--eds-color-primary-300, #93c5fd)}.hover\\:border-primary-300:hover{border-color:var(--eds-color-primary-300, #93c5fd)}.text-success-600{color:var(--eds-color-success-600, #16a34a)}.text-error-600{color:var(--eds-color-error-600, #dc2626)}.border{border-width:1px}.border-b{border-bottom-width:1px}.rounded-lg{border-radius:var(--eds-radius-lg, 0.5rem);}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-colors{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-200{transition-duration:200ms}.shadow-md{box-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)}.hover\\:shadow-md:hover{box-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)}.-translate-y-0\\.5{transform:translateY(-0.125rem);}.hover\\:-translate-y-0\\.5:hover{transform:translateY(-0.125rem)}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}@media (min-width: 640px){.sm\\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}}@media (min-width: 768px){.md\\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}}@media (min-width: 1024px){.lg\\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.lg\\:grid-cols-5{grid-template-columns:repeat(5, minmax(0, 1fr))}}.contributor-card{will-change:transform, box-shadow, border-color}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.text-default{color:var(--black)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}";
+const edsGitlabContributorsCss = ".container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.flex{display:flex}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.grid{display:grid}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.gap-2{gap:0.5rem;}.gap-4{gap:1rem;}.gap-6{gap:1.5rem;}.p-5{padding:1.25rem;}.p-12{padding:3rem;}.pb-2{padding-bottom:0.25rem;}.pb-4{padding-bottom:1rem;}.mb-6{margin-bottom:1.5rem;}.m-0{margin:0}.mt-auto{margin-top:auto}.w-full{width:100%}.min-w-0{min-width:0}.text-xs{font-size:0.75rem;line-height:1rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-semibold{font-weight:600}.whitespace-nowrap{white-space:nowrap}.overflow-hidden{overflow:hidden}.text-ellipsis{text-overflow:ellipsis}.no-underline{text-decoration:none}.text-gray-600{color:var(--eds-color-gray-600, #4b5563)}.text-gray-900{color:var(--eds-color-gray-900, #111827)}.border-gray-200{border-color:var(--eds-color-gray-200, #e5e7eb)}.bg-white{background-color:var(--eds-color-white, #ffffff)}.text-primary-600{color:var(--eds-color-primary-600, #2563eb)}.hover\\:text-primary-600:hover{color:var(--eds-color-primary-600, #2563eb)}.border-primary-300{border-color:var(--eds-color-primary-300, #93c5fd)}.hover\\:border-primary-300:hover{border-color:var(--eds-color-primary-300, #93c5fd)}.text-success-600{color:var(--eds-color-success-600, #16a34a)}.text-error-600{color:var(--eds-color-error-600, #dc2626)}.border{border-width:1px}.border-b{border-bottom-width:1px}.rounded-lg{border-radius:var(--eds-radius-lg, 0.5rem);}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-colors{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-200{transition-duration:200ms}.shadow-md{box-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)}.hover\\:shadow-md:hover{box-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)}.-translate-y-0\\.5{transform:translateY(-0.125rem);}.hover\\:-translate-y-0\\.5:hover{transform:translateY(-0.125rem)}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}@media (min-width: 640px){.sm\\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}}@media (min-width: 768px){.md\\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}}@media (min-width: 1024px){.lg\\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.lg\\:grid-cols-5{grid-template-columns:repeat(5, minmax(0, 1fr))}}.contributor-card{will-change:transform, box-shadow, border-color}.loading{position:relative;min-height:8rem;padding:1rem 1.25rem;color:var(--grey-dark, #7A7B7A);font-size:0.9375rem;border:1px solid rgba(0, 0, 0, 0.08);border-radius:0.25rem;background-color:rgba(0, 0, 0, 0.02)}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.text-default{color:var(--black)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}";
 const EdsGitlabContributorsStyle0 = edsGitlabContributorsCss;
 
 const EdsGitlabContributors = class {
@@ -225,7 +225,14 @@ const EdsGitlabContributors = class {
     }
     render() {
         if (this.loading) {
-            return (index.h("div", { class: "flex flex-col items-center justify-center p-12 gap-4" }, index.h("eds-spinner", { size: "md" }), index.h("p", { class: "text-base text-gray-600 m-0" }, "Loading contributors...")));
+            // Spinner placeholder mirrors eds-kg-learning-resources exactly —
+            // same `.loading` wrapper (position: relative + min-height so the
+            // absolutely-positioned spinner anchors inside the box instead of
+            // escaping to the page), same eds-spinner props (sm/primary/
+            // transparent + message-as-prop), and the same role+aria-live for
+            // screen-reader announcement. Keep these two components in sync if
+            // the loading affordance ever changes.
+            return (index.h("div", { class: "loading", role: "status", "aria-live": "polite" }, index.h("eds-spinner", { size: "sm", variant: "primary", background: "transparent", message: "Loading contributors..." })));
         }
         if (this.error) {
             return (index.h("eds-alert", { message: "Error loading contributors", intent: "error" }));

package/dist/cjs/eds-icon-bluesky.cjs.entry.js

@@ -11,7 +11,7 @@ const EdsIconBluesky = class {
         this.class = '';
     }
     render() {
-        return index.h("span", { key: 'c2d0ffef1833f4a53a4447d517c6505ce9be70a4', class: this.class, innerHTML: bluesky.bluesky });
+        return index.h("span", { key: 'f2c2ad35173c7bfeae50e5b4de8f59e362d9656f', class: this.class, innerHTML: bluesky.bluesky });
     }
 };
 

package/dist/cjs/eds-icon-eu.cjs.entry.js

@@ -11,7 +11,7 @@ const EdsIconEu = class {
         this.class = '';
     }
     render() {
-        return index.h("span", { key: 'c4a043469698de97b7433749599ee04746df7f8e', class: this.class, innerHTML: eu.euSvg });
+        return index.h("span", { key: '56f0efdfb37b2dd4474dc2e69ef649915a9f4bbc', class: this.class, innerHTML: eu.euSvg });
     }
 };
 

package/dist/cjs/eds-icon-facebook.cjs.entry.js

@@ -11,7 +11,7 @@ const EdsIconFacebook = class {
         this.class = '';
     }
     render() {
-        return index.h("span", { key: '8498500cd0da2784b889a7b2b2ca9ff4e8414ab6', class: this.class, innerHTML: facebook.facebook });
+        return index.h("span", { key: '798a3ad6a040dfce879fe62c0a32c83cbd529ad0', class: this.class, innerHTML: facebook.facebook });
     }
 };
 

package/dist/cjs/eds-icon-gitlab.cjs.entry.js

@@ -11,7 +11,7 @@ const EdsIconGitlab = class {
         this.class = '';
     }
     render() {
-        return index.h("span", { key: '41c0a44af7394753c8c656f5a1de86b1446f05e3', class: this.class, innerHTML: mono.gitlabBlack });
+        return index.h("span", { key: 'd1c7c0c1e3cae3b45377e305792192df46ef064a', class: this.class, innerHTML: mono.gitlabBlack });
     }
 };
 

package/dist/cjs/eds-icon-linkedin.cjs.entry.js

@@ -11,7 +11,7 @@ const EdsIconLinkedin = class {
         this.class = '';
     }
     render() {
-        return index.h("span", { key: '02a55590ddf6ee6b873370913e9e7cbfe5390c79', class: this.class, innerHTML: linkedin.linkedin });
+        return index.h("span", { key: 'd8c97d9140baa6609917021bbc67fc7cca47ee32', class: this.class, innerHTML: linkedin.linkedin });
     }
 };
 

package/dist/cjs/eds-icon-mastodon.cjs.entry.js

@@ -11,7 +11,7 @@ const EdsIconMastodon = class {
         this.class = '';
     }
     render() {
-        return index.h("span", { key: '633a54b9f7bdeec8d704d7994de959a8e12ebe4f', class: this.class, innerHTML: mastodon.mastodon });
+        return index.h("span", { key: '8498500cd0da2784b889a7b2b2ca9ff4e8414ab6', class: this.class, innerHTML: mastodon.mastodon });
     }
 };
 

package/dist/cjs/eds-icon-twitter.cjs.entry.js

@@ -11,7 +11,7 @@ const EdsIconTwitter = class {
         this.class = '';
     }
     render() {
-        return index.h("span", { key: '6f20d0106096d427556e05b663e3fa133852470e', class: this.class, innerHTML: twitter.twitter });
+        return index.h("span", { key: '1d2f811831f0c876e8b1133c0df03b6f15acaccb', class: this.class, innerHTML: twitter.twitter });
     }
 };
 

package/dist/cjs/eds-icon-youtube.cjs.entry.js

@@ -11,7 +11,7 @@ const EdsIconYoutube = class {
         this.class = '';
     }
     render() {
-        return index.h("span", { key: 'e07946107d2e0e5a0705bc52d27a436e0f4d5956', class: this.class, innerHTML: youtube.youtube });
+        return index.h("span", { key: '7ebb80fd84ed9ed7c227b1f1ddf213d0502160f9', class: this.class, innerHTML: youtube.youtube });
     }
 };
 

package/dist/cjs/eds-input-search.cjs.entry.js

@@ -0,0 +1,76 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-50bc1aa4.js');
+const analytics = require('./analytics-28713bf7.js');
+
+const EdsInputSearch = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.search = index.createEvent(this, "search", 7);
+        /**
+         * Keydown event listener to detect Command+K (Mac) or Ctrl+K (Windows/Linux)
+         * and focus the input element when triggered.
+         *
+         * @param e - The keyboard event.
+         */
+        this.keydownListener = (e) => {
+            // Check for Command+K (Mac) or Ctrl+K (Windows/Linux)
+            if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
+                e.preventDefault();
+                // Focus the input if it's available and not disabled
+                if (this.inputElement && !this.disabled) {
+                    this.inputElement.focus();
+                }
+            }
+        };
+        /*onInput = (e: any) => {
+          // eslint-disable-next-line
+          console.log('on input:', e);
+        };*/
+        this.onChange = (e) => {
+            // eslint-disable-next-line
+            this.search.emit({
+                event: 'change',
+                value: e.target.value
+            });
+            analytics.sendAnalytics({
+                category: 'ui-component',
+                parentContext: null,
+                tag: this.el.tagName.toLowerCase(),
+                name: e.target.value || '',
+                action: 'search'
+            });
+        };
+        this.name = undefined;
+        this.inputId = 'search-main';
+        this.placeholder = 'Search...';
+        this.value = undefined;
+        this.disabled = false;
+        this.required = false;
+        this.decorate = undefined;
+        this.label = 'Search';
+    }
+    componentDidLoad() {
+        // Assign the native input element after the component loads
+        this.inputElement = this.el.querySelector('input');
+        document.addEventListener('keydown', this.keydownListener);
+    }
+    disconnectedCallback() {
+        // Clean up the event listener when the component is removed
+        document.removeEventListener('keydown', this.keydownListener);
+    }
+    async getInputElement() {
+        // Return the native input element
+        return this.inputElement;
+    }
+    render() {
+        return (index.h("div", { key: '52676b3559e14b5153f7d8f0fa6cd12e49354d87', class: "relative flex items-center" }, index.h("eds-icon-wrapper", { key: '754e8753607c01dab63d156d306f3325547049aa', name: "search", class: "absolute top-1/2 left-[14px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), index.h("input", { key: 'b49d523195711316c0817de67776d379a6c7248b', id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.value || '', required: this.required, disabled: this.disabled, type: "search", "aria-label": this.placeholder, class: `input pl-36 ${this.decorate}`,
+            //onInput={this.onInput}
+            onChange: this.onChange })));
+    }
+    get el() { return index.getElement(this); }
+};
+
+exports.eds_input_search = EdsInputSearch;

package/dist/cjs/eds-section-core_2.cjs.entry.js

@@ -16,7 +16,7 @@ const EdsSectionCore = class {
     }
     render() {
         const TagType = this.tag; // Set dynamic tag type (div or section)
-        return (index.h(TagType, { key: '65cb765fe9b997b5e573f5befd4ca1ea6611f1c5' }, index.h("eds-section-heading", { key: 'a48c9fef0a45fbed08749e8b4f17d762d38bbb5b', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), index.h("slot", { key: '7e26bc40132c32670db60f5765b412d00d64c129' })));
+        return (index.h(TagType, { key: '635230d1ec9a0dcc945990a6a58dc3508345d984' }, index.h("eds-section-heading", { key: '0b6b94df22af707cbd6964132f3a5190b4b7e83c', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), index.h("slot", { key: '8834c29c25249fb5c384fb5d51866eadb93a97d6' })));
     }
 };
 EdsSectionCore.style = EdsSectionCoreStyle0;
@@ -46,12 +46,12 @@ const EdsSectionHeading = class {
     render() {
         const TagType = this.tag; // Dynamically set tag type for the container
         const HeadingTag = this.headingLevel; // Dynamically set heading level
-        return (index.h(TagType, { key: '032f8629ef5ea1c45f40a135a54c32337f7181e9', class: {
+        return (index.h(TagType, { key: '7275284a1158ab982f1e53117b72738d0a001c97', 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
-            } }, index.h(HeadingTag, { key: '37f821426fe05dba66445745da3d23c9ff75345e', class: this.getHeadingClass() }, this.sectionTitle)));
+            } }, index.h(HeadingTag, { key: 'a3c68baa56a0337348405c88544225ed7c7ff0ed', class: this.getHeadingClass() }, this.sectionTitle)));
     }
 };
 

package/dist/cjs/eds-timeline.cjs.entry.js

@@ -47,7 +47,7 @@ const EdsTimeline = class {
         }
     }
     render() {
-        return (index.h("div", { key: '9670bbe26e6f092d88c73268838d9349dca0c323', class: "max-w-sidebar mx-auto px-4 py-8" }, index.h("div", { key: '202722dc0cb384ce68b2239915f44bf90d87a77e', class: "relative" }, index.h("div", { key: '59760e5a62518dc6c3cc7fcfa711e060837f4c49', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), index.h("div", { key: '2f1f6c5f5e7f2a770fc762b1b886dd199f0cf953', class: "space-y-16" }, this.parsedEvents.map((event, index$1) => (index.h("div", { class: "relative flex" }, index.h("div", { class: `w-1/2 ${index$1 % 2 === 0 ? 'pr-4' : ''}` }, index$1 % 2 === 0 && (index.h("eds-card-generic", { title: event.title, url: "#", description: event.description, intent: "secondary", tags: JSON.stringify(event.completed
+        return (index.h("div", { key: '78b199b18d361ae3223e4f1fe9a2043d61f4271b', class: "max-w-sidebar mx-auto px-4 py-8" }, index.h("div", { key: 'afdfdf7dc573a7f273703a02e38e755a9815bdf7', class: "relative" }, index.h("div", { key: '7affc96f356ee901ca263c7347ae60b84869f28b', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), index.h("div", { key: '7ba006234bd1365890e75b7f59aa118265ba727c', class: "space-y-16" }, this.parsedEvents.map((event, index$1) => (index.h("div", { class: "relative flex" }, index.h("div", { class: `w-1/2 ${index$1 % 2 === 0 ? 'pr-4' : ''}` }, index$1 % 2 === 0 && (index.h("eds-card-generic", { title: event.title, url: "#", description: event.description, intent: "secondary", tags: JSON.stringify(event.completed
                 ? [{ label: 'completed', style: 'accent' }]
                 : [{ label: 'pending', style: 'default' }]), onClick: () => this.handleEventClick(event) }))), index.h("div", { class: "flex items-center justify-center relative" }, event.completed ? (index.h("div", { class: "w-32 h-32 bg-accent rounded-full shadow flex items-center justify-center" })) : (index.h("div", { class: "w-32 h-32 bg-strong rounded-full shadow flex items-center justify-center" }))), index.h("div", { class: `w-1/2 ${index$1 % 2 !== 0 ? 'pl-4' : ''}` }, index$1 % 2 !== 0 && (index.h("eds-card-generic", { title: event.title, url: "#", description: event.description, intent: "secondary", tags: JSON.stringify(event.completed
                 ? [{ label: 'completed', style: 'accent' }]

package/dist/cjs/eds-toast-manager.cjs.entry.js

@@ -66,7 +66,7 @@ const EdsToastManager = class {
         this.toasts = this.toasts.filter((t) => t.id !== id);
     }
     render() {
-        return (index.h("div", { key: 'd707822f33892171428aa926822dff5ffefac219', class: "toast-container" }, this.toasts.map((t) => (index.h("div", { key: t.id }, index.h("eds-toast", { message: t.message, intent: t.intent, onClick: () => this.removeToast(t.id) }))))));
+        return (index.h("div", { key: '989e469e815c6af6b46a14fddee85e4707f86704', class: "toast-container" }, this.toasts.map((t) => (index.h("div", { key: t.id }, index.h("eds-toast", { message: t.message, intent: t.intent, onClick: () => this.removeToast(t.id) }))))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/eds-trl-badge.cjs.entry.js

@@ -0,0 +1,181 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-50bc1aa4.js');
+
+/* eslint-disable */
+/**
+ * Official EBRAINS sphere mark, extracted from
+ * packages/assets/EBRAINS_logo_25/new_ebrains_logo_rgb/250901_new_ebrains_logo_rgb_positive.svg
+ * (the gradient-filled wave segments only — wordmark dropped).
+ *
+ * Gradient ids carry a `__UID__` placeholder so each badge instance can
+ * namespace them (no <defs> collisions when several badges share a page).
+ * Gradient template inheritance uses SVG2 `href` (no xlink namespace needed).
+ * Use markDefs() inside the badge <defs> and markGroup() in the body.
+ */
+const MARK_DEFS = `<linearGradient id="__UID__Unbenannter_Verlauf_29" x1="-26.7" y1="64.8" x2="155" y2="-19.9" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#03a98f"/> <stop offset=".1" stop-color="#10a97b"/> <stop offset=".3" stop-color="#23aa5f"/> <stop offset="1" stop-color="#00ff9d"/> </linearGradient><linearGradient id="__UID__Unbenannter_Verlauf_291" x1="38.6" y1="205" x2="220.3" y2="120.2" href="#__UID__Unbenannter_Verlauf_29"/><linearGradient id="__UID__Unbenannter_Verlauf_292" x1="33" y1="193" x2="214.8" y2="108.3" href="#__UID__Unbenannter_Verlauf_29"/><linearGradient id="__UID__Unbenannter_Verlauf_293" x1="-3.5" y1="114.7" x2="178.3" y2="30" href="#__UID__Unbenannter_Verlauf_29"/><linearGradient id="__UID__Unbenannter_Verlauf_294" x1="4.5" y1="131.8" x2="186.2" y2="47.1" href="#__UID__Unbenannter_Verlauf_29"/><linearGradient id="__UID__Unbenannter_Verlauf_295" x1="28.6" y1="183.6" x2="210.4" y2="98.9" href="#__UID__Unbenannter_Verlauf_29"/><linearGradient id="__UID__Unbenannter_Verlauf_296" x1="3.8" y1="130.3" x2="185.5" y2="45.5" href="#__UID__Unbenannter_Verlauf_29"/><linearGradient id="__UID__Unbenannter_Verlauf_297" x1="18" y1="160.6" x2="199.7" y2="75.9" href="#__UID__Unbenannter_Verlauf_29"/>`;
+const MARK_PATHS = `<path fill="url(#__UID__Unbenannter_Verlauf_29)" d="M67.3,19.9c11.2-2.3,22.5-1,32.1,1.5.8.2,1.2-.8.5-1.3-11.6-7.3-20.9-11.4-26.6-13.5l-18.3,4.9c-3.4.9-6.4,2.7-8.9,5.1l-29.6,29.6c-2.5,2.5-4.2,5.5-5.1,8.9l-.7,2.6c1.7-1.5,3.4-3.2,5.2-4.9,12.6-12,29.9-28.4,51.3-32.9Z"/><path fill="url(#__UID__Unbenannter_Verlauf_291)" d="M33.8,172.2l12.3,12.3c2.5,2.5,5.5,4.2,8.9,5.1l40.4,10.8c3.4.9,6.9.9,10.2,0l40.4-10.8c3.4-.9,6.4-2.7,8.9-5.1l2.8-2.8c-80-32.2-119-12.3-123.9-9.5Z"/><path fill="url(#__UID__Unbenannter_Verlauf_292)" d="M97.7,137.4c-25.1.2-51.1.4-78.8,19.8l10.5,10.5h.1c2-1.5,42.4-27.9,132.8,9.1h.2c0,.1,18.6-18.4,18.6-18.4-7.8-2.8-58.6-21-83.1-21h-.3Z"/><path fill="url(#__UID__Unbenannter_Verlauf_293)" d="M137.2,41h0c2.6,2.4,5.3,5,8,7.7,26.3,26.3,43.8,37.2,53.9,41.8l-9.5-35.5c-.9-3.4-2.7-6.4-5.1-8.9l-29.6-29.6c-2.5-2.5-5.5-4.2-8.9-5.1L105.7.7c-3.4-.9-6.9-.9-10.2,0l-12.1,3.2c12.4,5.6,31.5,16.5,53.7,37,0,0,.1.1.2.2Z"/><path fill="url(#__UID__Unbenannter_Verlauf_294)" d="M132.7,86.1c4.9,1.6,26.3,12,26.3,12,1.7.7,7.3,3.3,8.9,4.1.7.3,1.3-.6.8-1.1-1.5-1.4-5.8-5-10.9-8.6,0,0-21.8-15.4-27.2-18.5-7.8-4.3-47.4-26.7-81.3-10C25.8,75.6,8,89.7.6,96c-.8,3.2-.7,6.5.1,9.7l3.4,12.8c7.2-6.7,20.2-17.2,40.4-28.2,35.4-19.2,61.9-12.8,88.2-4.2Z"/><path fill="url(#__UID__Unbenannter_Verlauf_295)" d="M55.9,128c-3.1,1.7-17.5,10.3-17.5,10.3,0,0-4.9,3-.2,1.9,2-.5,7.8-3.1,9.7-3.6,0,0,19.1-7,49.8-5.4.1,0,.2,0,.4,0,27.6,0,84.2,21,86.6,21.9l1.1.5c1.8-2.2,3.2-4.7,3.9-7.5l2.7-10.2c-14.1-5.9-55.1-22.3-81-22.3s-55.3,14.3-55.5,14.4Z"/><path fill="url(#__UID__Unbenannter_Verlauf_296)" d="M131.7,44.5c-2-1.7-4.9-3.9-8.5-6.3-1.8-1.3-3.6-2.3-5.4-3.2-8.1-4.1-29.1-13.1-49.2-9-19.7,4.1-35.5,19.2-48.2,31.3-4.7,4.5-8.7,8.3-12.4,11.1l-4.6,17.2c9.4-7.4,24.4-18,43.2-27.2,36.9-18.1,79.2,5.4,87.3,10.3,12.1,7.3,47.9,34.4,64,46.8l2.6-9.8c.7-2.5.8-5,.5-7.5-10.4-3.8-29.7-14.5-60.2-45-3.1-3.1-6.1-5.9-9.1-8.6Z"/><path fill="url(#__UID__Unbenannter_Verlauf_297)" d="M47.5,95.8c-22.1,12-35.5,23.6-41.5,29.6l5.5,20.7c.3,1.2.8,2.4,1.4,3.5,9.5-9.3,38.6-26.3,39.8-27,1-.6,25.6-15.3,58.7-15.3s67.5,16,82.6,22.4l1.1-4.2c-9.9-6.7-37.4-24.5-64.4-33.5-24.9-8.3-50-14.3-83.2,3.8Z"/>`;
+/** Gradient <defs> for the mark, namespaced with `uid`. */
+function markDefs(uid) {
+    return MARK_DEFS.replace(/__UID__/g, uid);
+}
+/**
+ * The mark paths wrapped in a positioned, scaled group.
+ * The source artwork lives in a ~201×201 canvas; `size` is the rendered px.
+ */
+function markGroup(uid, x, y, size = 16) {
+    const s = (size / 201.1).toFixed(4);
+    const paths = MARK_PATHS.replace(/__UID__/g, uid);
+    return `<g transform="translate(${x},${y}) scale(${s})">${paths}</g>`;
+}
+
+const edsTrlBadgeCss = ":host{display:inline-block;line-height:0;}.link{display:inline-block;line-height:0;text-decoration:none;color:inherit}.link svg{display:block}";
+const EdsTrlBadgeStyle0 = edsTrlBadgeCss;
+
+let _uid = 0;
+const EdsTrlBadge = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** Per-instance suffix so the mark's gradient ids never collide. */
+        this.uid = `trl${++_uid}-`;
+        this.level = undefined;
+        this.assessed = undefined;
+        this.methodology = undefined;
+        this.theme = 'dark';
+        this.variant = 'tone';
+        this.size = undefined;
+        this.label = 'EBRAINS TRL';
+        this.href = undefined;
+    }
+    esc(s) {
+        return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+    }
+    /** Maturity tier → value/pip colour (brand palette). */
+    levelColor() {
+        const n = Number(this.level);
+        if (n >= 7)
+            return '#00FF9D';
+        if (n >= 4)
+            return '#00C87B';
+        return '#7A7B7A';
+    }
+    /** Readable value text on a coloured segment (black on green, light on grey). */
+    valueText() {
+        return Number(this.level) >= 4 ? '#07140D' : '#ECECEC';
+    }
+    fullText() {
+        const parts = [`${this.label} ${this.level}`];
+        if (this.assessed)
+            parts.push(`assessed ${this.assessed}`);
+        if (this.methodology)
+            parts.push(`methodology ${this.methodology}`);
+        return parts.join(' · ');
+    }
+    /** Build the inner markup + intrinsic dimensions for the chosen variant. */
+    build() {
+        const CW = EdsTrlBadge.CW;
+        const uid = this.uid;
+        const clip = `${uid}clip`;
+        const valColor = this.levelColor();
+        const logoSpace = 28; // 8 margin + ~16 mark + 4 gap
+        const mono = `font-family="'IBM Plex Mono',monospace"`;
+        const lvl = this.esc(String(this.level));
+        if (this.variant === 'full') {
+            const tail = (this.assessed ? ` · assessed ${this.esc(this.assessed)}` : '') +
+                (this.methodology ? ` · methodology ${this.esc(this.methodology)}` : '');
+            const w = Math.ceil(logoSpace + this.fullText().length * CW + 10);
+            const inner = `<defs><clipPath id="${clip}"><rect width="${w}" height="24" rx="6"/></clipPath>${markDefs(uid)}</defs>` +
+                `<g clip-path="url(#${clip})"><rect width="${w}" height="24" fill="#07140D"/></g>${markGroup(uid, 8, 4, 16)}` +
+                `<text x="30" y="15.5" ${mono} font-size="11" letter-spacing=".2">` +
+                `<tspan fill="#ECECEC">${this.esc(this.label)} </tspan>` +
+                `<tspan fill="${valColor}" font-weight="600">${lvl}</tspan>` +
+                `<tspan fill="#7A7B7A">${this.esc(tail)}</tspan></text>`;
+            return { w, h: 24, inner };
+        }
+        if (this.variant === 'pill') {
+            const txt = `TRL ${this.level}`;
+            const w = Math.ceil(logoSpace + txt.length * CW + 14);
+            const tx = logoSpace + (w - logoSpace) / 2 - 4;
+            const inner = `<defs>${markDefs(uid)}</defs>` +
+                `<rect width="${w}" height="24" rx="12" fill="#07140D"/>${markGroup(uid, 7, 4, 16)}` +
+                `<text x="${tx}" y="16" ${mono} font-size="11" font-weight="500" letter-spacing=".5" text-anchor="middle">` +
+                `<tspan fill="#ECECEC">TRL </tspan><tspan fill="${valColor}" font-weight="600">${lvl}</tspan></text>`;
+            return { w, h: 24, inner };
+        }
+        if (this.variant === 'outline') {
+            const dark = this.theme !== 'light';
+            const bg = dark ? '#0c1c14' : '#ffffff';
+            const stroke = dark ? '#34473d' : '#07140D';
+            const labelColor = dark ? '#ECECEC' : '#07140D';
+            const sep = dark ? '#5a6b62' : '#9aa39d';
+            const value = dark ? valColor : (Number(this.level) >= 4 ? '#00966a' : '#7A7B7A');
+            const w = Math.ceil(logoSpace + (this.label + ' · ' + this.level).length * CW + 12);
+            const inner = `<defs>${markDefs(uid)}</defs>` +
+                `<rect x=".5" y=".5" width="${w - 1}" height="23" rx="6" fill="${bg}" stroke="${stroke}"/>${markGroup(uid, 8, 4, 16)}` +
+                `<text x="30" y="16" ${mono} font-size="11" letter-spacing=".3">` +
+                `<tspan fill="${labelColor}">${this.esc(this.label)} </tspan>` +
+                `<tspan fill="${sep}">· </tspan>` +
+                `<tspan fill="${value}" font-weight="600">${lvl}</tspan></text>`;
+            return { w, h: 24, inner };
+        }
+        if (this.variant === 'scale') {
+            const dark = this.theme !== 'light';
+            const bg = dark ? '#07140D' : '#ECECEC';
+            const labelColor = dark ? '#ECECEC' : '#07140D';
+            const emptyPip = dark ? '#2f4339' : '#c4ccc7';
+            const sep = dark ? '#5a6b62' : '#9aa39d';
+            const n = Math.max(0, Math.min(9, Number(this.level) || 0));
+            const pipStart = Math.ceil(30 + this.label.length * CW + 12);
+            const pipStep = 9, pipW = 6, pipH = 8, pipY = 9;
+            let pips = '';
+            for (let i = 0; i < 9; i++) {
+                const x = pipStart + i * pipStep;
+                pips += `<rect x="${x}" y="${pipY}" width="${pipW}" height="${pipH}" rx="1" fill="${i < n ? valColor : emptyPip}"/>`;
+            }
+            const valueX = pipStart + 9 * pipStep + 5;
+            const w = Math.ceil(valueX + `${this.level}/9`.length * CW + 8);
+            const inner = `<defs>${markDefs(uid)}</defs>` +
+                `<rect width="${w}" height="26" rx="6" fill="${bg}"/>${markGroup(uid, 8, 5, 16)}` +
+                `<text x="30" y="17" ${mono} font-size="11" letter-spacing=".3" fill="${labelColor}">${this.esc(this.label)}</text>` +
+                `<g>${pips}</g>` +
+                `<text x="${valueX}" y="17" ${mono} font-size="11" font-weight="500">` +
+                `<tspan fill="${valColor}">${lvl}</tspan><tspan fill="${sep}">/9</tspan></text>`;
+            return { w, h: 26, inner };
+        }
+        // tone (default) — dark or light theme
+        const dark = this.theme !== 'light';
+        const labelBg = dark ? '#07140D' : '#ECECEC';
+        const labelTextColor = dark ? '#ECECEC' : '#07140D';
+        const valTextColor = dark ? this.valueText() : '#07140D';
+        const labelSegW = Math.ceil(logoSpace + this.label.length * CW + 12);
+        const valSegW = Math.ceil(12 + String(this.level).length * CW + 12);
+        const w = labelSegW + valSegW;
+        const inner = `<defs><clipPath id="${clip}"><rect width="${w}" height="24" rx="6"/></clipPath>${markDefs(uid)}</defs>` +
+            `<g clip-path="url(#${clip})"><rect width="${labelSegW}" height="24" fill="${labelBg}"/>` +
+            `<rect x="${labelSegW}" width="${valSegW}" height="24" fill="${valColor}"/></g>${markGroup(uid, 8, 4, 16)}` +
+            `<text x="${logoSpace + (labelSegW - logoSpace) / 2}" y="16" ${mono} font-size="11" letter-spacing=".4" fill="${labelTextColor}" text-anchor="middle">${this.esc(this.label)}</text>` +
+            `<text x="${labelSegW + valSegW / 2}" y="16" ${mono} font-size="11" font-weight="600" fill="${valTextColor}" text-anchor="middle">${lvl}</text>`;
+        return { w, h: 24, inner };
+    }
+    buildSvg() {
+        const { w, h, inner } = this.build();
+        const aria = this.esc(this.fullText());
+        const k = this.size ? this.size / h : 1;
+        const outW = Math.round(w * k);
+        const outH = Math.round(h * k);
+        return `<svg xmlns="http://www.w3.org/2000/svg" width="${outW}" height="${outH}" ` +
+            `viewBox="0 0 ${w} ${h}" role="img" aria-label="${aria}"><title>${aria}</title>${inner}</svg>`;
+    }
+    render() {
+        const svg = this.buildSvg();
+        return (index.h(index.Host, { key: 'eddfb49f35ff9771d76eef13a024b840b3a24cca' }, this.href ? (index.h("a", { class: "link", href: this.href, "aria-label": this.fullText(), innerHTML: svg })) : (index.h("span", { class: "link", innerHTML: svg }))));
+    }
+};
+// IBM Plex Mono advance width at 11px (used to size segments to the text).
+EdsTrlBadge.CW = 6.8;
+EdsTrlBadge.style = EdsTrlBadgeStyle0;
+
+exports.eds_trl_badge = EdsTrlBadge;

package/dist/cjs/incorrect-use-of-colors.cjs.entry.js

@@ -43,7 +43,7 @@ const IncorrectUseOfColors = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: '424c9b01d69068fa058b25dd89df08154912dfe7', class: "container" }, index.h("div", { key: '5a9dae817344c3c92b8bdb55b806b1f96e26496d', class: "mb-8" }, index.h("eds-alert", { key: 'afeaa6e5320151800d31c3fecb85669000409a14', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" })), index.h("div", { key: '87241b25b9f9e326183ba4496983d93bef766380', class: "flex" }, index.h("div", { key: 'c018e1fffc8198b3e48e1df6b1e8d560e1c7b84a', class: "w-full" }, index.h("ul", { key: '97845ca2dfe71ac0feb27762c4b3c71c80ca626c', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), index.h("div", { key: '05adf9099f1b043d08577cf1f233551d83fc4242', class: "w-full" }, index.h("ul", { key: '55792bcf3ecb93df6884d7366aa8c7f2c3cf5ad5', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, incorrect.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
+        return (index.h("div", { key: '2688817c691de1f39d1c25845642e99af13e1b00', class: "container" }, index.h("div", { key: '823b5f324f9b7fe4143dd982e71f535b9c576dd6', class: "mb-8" }, index.h("eds-alert", { key: '95cf4b07317e116636979fb2d72b4fe925b09fa2', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" })), index.h("div", { key: 'd4bfceeb122dddf376808ae187379c07ed0e1a06', class: "flex" }, index.h("div", { key: '82eac813cc9b29424640fb2517992e3384d19a6e', class: "w-full" }, index.h("ul", { key: 'da2ca77bd91a25c6a451910a6b3bf939e5e8abc9', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), index.h("div", { key: '538560ac8db9f9d023a5afbf4cd67dff80f6e7b6', class: "w-full" }, index.h("ul", { key: '4b601f722730fbe1cbb78c1185d79b34654d3f76', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, incorrect.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
     }
 };
 

package/dist/cjs/index-50bc1aa4.js

@@ -74,10 +74,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           }
           switch(bundleId) {
               
-                case 'eds-accordion_52.cjs':
+                case 'eds-accordion_53.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
-                        './eds-accordion_52.cjs.entry.js')); }).then(processMod, consoleError);
+                        './eds-accordion_53.cjs.entry.js')); }).then(processMod, consoleError);
                 case 'components-section.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
@@ -150,6 +150,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
                         './eds-icon-youtube.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'eds-input-search.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './eds-input-search.cjs.entry.js')); }).then(processMod, consoleError);
                 case 'eds-modal.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
@@ -166,6 +170,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
                         './eds-toast-manager.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'eds-trl-badge.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './eds-trl-badge.cjs.entry.js')); }).then(processMod, consoleError);
                 case 'incorrect-use-of-colors.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */