@ebrains/components 2.4.1 → 3.1.0

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

@@ -5,21 +5,34 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-50bc1aa4.js');
 const analytics = require('./analytics-28713bf7.js');
 
-const edsModalCss = ".block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.fixed{position:fixed}.inset-0{inset:0rem}.z-10{z-index:10}.z-50{z-index:50}.z-50{z-index:50}.z-9999991{z-index:9999991}.w-full{width:100%}.min-w-full{min-width:100%}.max-w-full{max-width:100%}.absolute{position:absolute}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-20{padding-top:1.25rem;padding-bottom:1.25rem}.bg-inverse{background-color:var(--white)}.bg-dark{background-color:var(--grey-300)}.rounded-lg{border-radius:16px}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.left-1\\/2{left:50%}.left-20{left:1.25rem}.right-20{right:1.25rem}.top-1\\/2{top:50%}.top-0{top:0rem}.left-0{left:0rem}.top-20{top:1.25rem}.bottom-0{bottom:0rem}.bottom-20{bottom:1.25rem}.grow{flex-grow:1}.-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))}.-translate-y-1\\/2{--tw-translate-y:-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))}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.border-b-2{border-bottom-width:2px}.border-softer{border-color:rgba(0, 0, 0, .1)}.pb-8{padding-bottom:0.5rem}.f-heading-03{font-family:var(--f-heading-03-fontFamily);font-weight:var(--f-heading-03-fontWeight);font-size:var(--f-heading-03-fontSize);line-height:var(--f-heading-03-lineHeight);letter-spacing:var(--f-heading-03-letterSpacing)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);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)}.text-inverse{color:var(--white)}.bg-dark{background-color:var(--grey-300)}.bg-strong{background-color:var(--grey-700)}.bg-strongest{background-color:var(--black)}.ml-8{margin-left:0.5rem}.pt-8{padding-top:0.5rem}.bg-opacity-90{opacity:0.9}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}@media (min-width: 750px){.md\\:bottom-20{bottom:1.25rem}.md\\:w-auto{width:auto}.md\\:min-w-\\[500px\\]{width:500px}.md\\:top-20{top:1.25rem}.md\\:top-1\\/2{top:50%}.md\\:left-1\\/2{left:50%}.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:-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))}.md\\:-translate-y-1\\/2{--tw-translate-y:-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))}.md\\:gap-y-12{row-gap:0.75rem}}";
+const edsModalCss = ".modal-open{display:flex}.modal-closed{display:none}.modal-backdrop{}.backdrop-visible{opacity:0.9}.backdrop-hidden{opacity:0}.modal-content{}.modal-content-visible{opacity:1}.modal-content-hidden{opacity:0}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.flex-col{flex-direction:column}.inline-flex{display:inline-flex}.hidden{display:none}.fixed{position:fixed}.inset-0{inset:0rem}.z-10{z-index:10}.z-50{z-index:50}.z-50{z-index:50}.z-9999991{z-index:9999991}.w-full{width:100%}.min-w-full{min-width:100%}.max-w-full{max-width:100%}.absolute{position:absolute}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-20{padding-top:1.25rem;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-light)}.rounded-lg{border-radius:16px}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.left-1\\/2{left:50%}.left-20{left:1.25rem}.right-20{right:1.25rem}.top-1\\/2{top:50%}.top-0{top:0rem}.top-16{top:1rem}.left-0{left:0rem}.top-20{top:1.25rem}.bottom-0{bottom:0rem}.bottom-16{bottom:1rem}.bottom-20{bottom:1.25rem}.grow{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))}.-translate-y-1\\/2{--tw-translate-y:-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))}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.border-b-2{border-bottom-width:2px}.border-softer{border-color:rgba(0, 0, 0, .1)}.pb-8{padding-bottom:0.5rem}.f-heading-03{font-family:var(--f-heading-03-fontFamily);font-weight:var(--f-heading-03-fontWeight);font-size:var(--f-heading-03-fontSize);line-height:var(--f-heading-03-lineHeight);letter-spacing:var(--f-heading-03-letterSpacing)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.bg-dark{background-color:var(--grey-light)}.bg-strong{background-color:var(--grey-dark)}.bg-strongest{background-color:var(--brand-black)}.mr-8{margin-right:0.5rem}.pt-8{padding-top:0.5rem}.bg-opacity-90{opacity:0.9}.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;}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;padding-bottom:2px;}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;padding-bottom:2px;}.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;padding-bottom:2px;}.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){.modal-small,.modal-medium,.modal-large{min-width:calc(100% - 2rem);max-width:calc(100% - 2rem);margin:0 1rem}}@media (min-width: 750px){.md\\:bottom-20{bottom:1.25rem}.md\\:w-auto{width:auto}.md\\:min-w-\\[500px\\]{width:500px}.md\\:top-20{top:1.25rem}.md\\:top-1\\/2{top:50%}.md\\:left-1\\/2{left:50%}.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:-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))}.md\\:-translate-y-1\\/2{--tw-translate-y:-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))}.md\\:gap-y-12{row-gap:0.75rem}}";
 const EdsModalStyle0 = edsModalCss;
 
 const EdsModal = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        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.
      *
@@ -30,8 +43,8 @@ const EdsModal = class {
         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
@@ -41,7 +54,7 @@ const EdsModal = class {
                     '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':
@@ -50,10 +63,9 @@ const EdsModal = class {
             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',
@@ -63,12 +75,51 @@ const EdsModal = class {
                 ].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);
         analytics.sendAnalytics({
             category: 'ui-component',
             parentContext: null,
@@ -83,6 +134,14 @@ const EdsModal = class {
     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);
+        }
         analytics.sendAnalytics({
             category: 'ui-component',
             parentContext: null,
@@ -95,7 +154,12 @@ const EdsModal = class {
      * 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.
@@ -110,19 +174,26 @@ const EdsModal = class {
         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 (index.h("div", { key: '6b7cbab7db29bb09415bb9538d69ac9a238a7776', id: "eds-modal", class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-9999991 flex`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, this.isOpen && (index.h("div", { key: '56f00980b2f843b5c1ce85502409d4711d89fad7', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
-            ,
-            onClick: () => this.close() })), index.h("div", { key: '687e1975bb8a17b0a6eb42038f72117dc71ca876', class: `container absolute bg-inverse z-10 ${this.getModalPositionClasses()} grow justify-center` }, index.h("div", { key: '653886c1ee090152b0a9d8dbb6e554762496167f', 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'}` }, index.h("span", { key: 'efefadd7e6630d9d9b498e68480a41b604c16c9f', id: titleId, class: `f-heading-04 ${this.getTruncateClass()}` }, this.heading), index.h("eds-button", { key: '79a156bd0640990911f1480a4e6becc7c4c20d7b', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8 text-default" })), index.h("div", { key: '802a6cc72f1bb41e8f907baa8d37cb5a01baf0cf', class: "pt-8 px-20 py-20" }, index.h("slot", { key: '1a59aaa764e4c4ed972de7a700ddf8f716e40e58' })))));
+        // Don't render anything when modal is closed to prevent blocking clicks
+        if (!this.isOpen) {
+            return null;
+        }
+        return (index.h("div", { id: "eds-modal", class: "modal-open fixed inset-0 z-9999991 flex", role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, index.h("div", { class: "modal-backdrop fixed inset-0 bg-dark backdrop-visible", onClick: () => this.close() }), index.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` }, index.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'}` }, index.h("span", { id: titleId, class: `f-heading-04 mr-8 modal-title ${this.getTruncateClass()}` }, this.heading), index.h("eds-button", { intent: this.inverseHeader ? 'ghostInverse' : 'secondary', size: "large", icon: "close", "aria-label": "Close modal", onClick: () => this.close() })), index.h("div", { class: "pt-8 px-20 py-20 overflow-y-auto flex-1" }, index.h("slot", null)))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -53,7 +53,7 @@ const EdsPie = class {
             const angle = (s.value / total) * 360;
             const start = cumulative, end = cumulative + angle;
             cumulative = end;
-            const color = s.color || palette.shift() || 'var(--color-chart-neutral-1)';
+            const color = s.color || palette.shift() || '#8c8c8c';
             return Object.assign(Object.assign({}, s), { start, end, color });
         });
         const diameter = this.size;
@@ -68,7 +68,7 @@ const EdsPie = class {
         const ariaLabel = processed
             .map((s) => `${s.label}: ${this.display === 'percent' ? `${Math.round((s.value / total) * 100)}%` : s.value}`)
             .join(', ');
-        return (index.h(index.Host, null, index.h("div", { class: "wrapper" }, index.h("svg", { width: diameter, height: diameter, role: "img", "aria-label": `Pie chart: ${ariaLabel}`, class: "pie-chart" }, index.h("title", null, "Pie chart"), index.h("g", null, processed.map((s) => (index.h("path", { key: s.id, d: this.describeArc(radius, radius, outerRadius, s.start, s.end), fill: s.color }))), innerRadius > 0 && index.h("circle", { cx: radius, cy: radius, r: innerRadius, fill: "var(--white)" }), processed.map((s) => {
+        return (index.h(index.Host, null, index.h("div", { class: "wrapper" }, index.h("svg", { width: diameter, height: diameter, role: "img", "aria-label": `Pie chart: ${ariaLabel}`, class: "pie-chart" }, index.h("title", null, "Pie chart"), index.h("g", null, processed.map((s) => (index.h("path", { key: s.id, d: this.describeArc(radius, radius, outerRadius, s.start, s.end), fill: s.color }))), innerRadius > 0 && index.h("circle", { cx: radius, cy: radius, r: innerRadius, fill: "#FFFFFF" }), processed.map((s) => {
             const midAngle = s.start + (s.end - s.start) / 2;
             const { x, y } = this.polarToCartesian(radius, radius, labelRadius, midAngle);
             const text = this.display === 'percent' ? `${Math.round((s.value / total) * 100)}%` : String(s.value);
@@ -79,26 +79,26 @@ const EdsPie = class {
 EdsPie.MAX_SLICES = 9;
 EdsPie.PALETTES = {
     semantic: [
-        'var(--color-chart-accent)',
-        'var(--color-chart-strong)',
-        'var(--color-chart-accent-dark)',
-        'var(--color-chart-lighter)',
-        'var(--color-chart-accent-light)',
-        'var(--color-chart-lightest)',
-        'var(--color-chart-accent-lighter)',
-        'var(--color-chart-darker)',
-        'var(--color-chart-accent-lightest)'
+        '#00e766', // green-500
+        '#666666', // grey-700
+        '#00c959', // green-600
+        '#8c8c8c', // grey-500
+        '#63fb92', // green-400
+        '#d8d8d8', // grey-400
+        '#9dffb4', // green-300
+        '#e6e6e6', // grey-300
+        '#d3ffdc', // green-200
     ],
     mono: [
-        'var(--grey-700)',
-        'var(--grey-500)',
-        'var(--grey-300)',
-        'var(--grey-100)',
-        'var(--grey-800)',
-        'var(--grey-600)',
-        'var(--grey-400)',
-        'var(--grey-200)',
-        'var(--grey-900)'
+        '#666666', // grey-700
+        '#8c8c8c', // grey-500
+        '#e6e6e6', // grey-300
+        '#f8f8f8', // grey-100
+        '#4d4d4d', // grey-800
+        '#6e6e6e', // grey-600
+        '#d8d8d8', // grey-400
+        '#f2f2f2', // grey-200
+        '#242424', // grey-900
     ]
 };
 EdsPie.style = EdsPieStyle0;

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: '3c75c9cda6a41c0d4243c3c111d7cc95f3efb97b' }, index.h("eds-section-heading", { key: '05b4d011aa1b8f489fe8aa0fd6d43b824da03370', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), index.h("slot", { key: '1749580398e56d38d83d5f5fdd87f43867a554cb' })));
+        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: '18614645f329d9ccfe6104b544ff306c6190173a', 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: 'ce699077313e9ee8d8a66e68af667451351a35a6', class: this.getHeadingClass() }, this.sectionTitle)));
+            } }, index.h(HeadingTag, { key: 'a3c68baa56a0337348405c88544225ed7c7ff0ed', class: this.getHeadingClass() }, this.sectionTitle)));
     }
 };
 

package/dist/cjs/eds-splash-screen.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-50bc1aa4.js');
 
-const edsSplashScreenCss = ".splash-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999999;background-color:var(--grey-200);display:flex;flex-direction:column;align-items:center;justify-content:center}.logo-container{width:200px;height:200px;margin-bottom:1rem}.content-container{position:relative;width:5rem;height:5rem;display:flex;align-items:center;justify-content:center}";
+const edsSplashScreenCss = ".splash-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999999;background-color:var(--grey-200);display:flex;flex-direction:column;align-items:center;justify-content:center}.logo-container{width:300px;height:60px;animation:loading-pulse 1.5s ease-in-out infinite}@keyframes loading-pulse{0%,100%{opacity:1}50%{opacity:0.6}}";
 const EdsSplashScreenStyle0 = edsSplashScreenCss;
 
 const EdsSplashScreen = class {
@@ -49,7 +49,7 @@ const EdsSplashScreen = class {
         if (!this.isVisible) {
             return null;
         }
-        return (index.h(index.Host, null, index.h("div", { class: "splash-overlay", style: { background: this.inverse ? 'black' : 'var(--grey-200)' } }, index.h("div", { class: "logo-container" }, this.inverse ? (index.h("eds-logo", { orientation: "vertical", type: "color-white" })) : (index.h("eds-logo", { orientation: "vertical", type: "color" }))), index.h("div", { class: "content-container" }, index.h("eds-spinner", { size: "xs", background: "none", fullscreen: false })))));
+        return (index.h(index.Host, null, index.h("div", { class: "splash-overlay", style: { background: this.inverse ? 'var(--brand-black)' : 'var(--grey-light)' } }, index.h("div", { class: "logo-container" }, this.inverse ? index.h("eds-logo", { variant: "negative" }) : index.h("eds-logo", { variant: "positive" })))));
     }
     static get watchers() { return {
         "initPromise": ["watchInitPromise"]

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

@@ -47,9 +47,9 @@ const EdsTimeline = class {
         }
     }
     render() {
-        return (index.h("div", { key: '0e33d3aed6e58d34209012bf65b0388b501f1667', class: "max-w-sidebar mx-auto px-4 py-8" }, index.h("div", { key: 'ac0c5cfa6685d79cce06faa4481568ce1018c562', class: "relative" }, index.h("div", { key: '96be2703fc36ecbe8b872d7ed79873375ef05de9', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), index.h("div", { key: '9d4e75de9f35a00c76edf08f7e570c62c325741d', 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", { cardTitle: event.title, url: "#", description: event.description, "heading-level": "h2", tiny: true, bg: !event.completed, "with-hover": "false", 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", { cardTitle: event.title, url: "#", description: event.description, "heading-level": "h2", tiny: true, bg: !event.completed, "with-hover": "false", tags: JSON.stringify(event.completed
+                : [{ 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' }]
                 : [{ label: 'pending', style: 'default' }]), onClick: () => this.handleEventClick(event) }))))))))));
     }

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: '871b9d1b34f1e03b77754a1bfd82b5e506d12592', 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/eu-271d44ae.js

@@ -0,0 +1,9 @@
+'use strict';
+
+const euSvg = `<svg width="63" height="50" viewBox="0 0 640 480" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0 0h640v480H0V0z" fill="#039"/>
+  <path 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"/>
+</svg>
+`;
+
+exports.euSvg = euSvg;

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: '46ba571846c2b481f3ace83fa6ba4a87bcd30782', class: "container" }, index.h("div", { key: '9dc5ab29cf5eaad08c8b83207e7aeb90b6ab4a4d', class: "mb-8" }, index.h("eds-alert", { key: '8e7f6cef090d49b6bbc7073287160c1043c55a93', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" })), index.h("div", { key: 'f1179f91e386c3eafea6a0ddfe8f4cec957d8e45', class: "flex" }, index.h("div", { key: 'a2e2bdde2b2e7db03cdc7c4bcf3340a1de588502', class: "w-full" }, index.h("ul", { key: 'de6f792de1485bb7771b5feb911185ad8e433dab', 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: 'b018dc2bf1644efc96807184e7996bb32221ecc3', class: "w-full" }, index.h("ul", { key: '6ec1aff24d751fde41e3f4a878f641a84bf91854', 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 } })))))))));
     }
 };