@ebrains/components 2.4.0 → 3.0.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: '25f038fe934339968388e7b5281a8f0b8509f789', id: "eds-modal", class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-9999991 flex`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, this.isOpen && (index.h("div", { key: '57f180a65ef43fc8f8c5a232c4b80a880fdfc8e9', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
-            ,
-            onClick: () => this.close() })), index.h("div", { key: 'f8e4005425c463fbfd38c4174f3bc315a648d05f', class: `container absolute bg-inverse z-10 ${this.getModalPositionClasses()} grow justify-center` }, index.h("div", { key: 'dd9c641489dfea9ec2784de91ca3e819a8c2413c', class: `flex justify-between items-center border-b-2 border-softer px-20 py-20  ${this.inverseHeader ? 'bg-strongest text-inverse' : 'bg-dark text-default'}` }, index.h("span", { key: '2e596080da1d79bcc91d542f592ab2b22c96b9d6', id: titleId, class: `f-heading-04 ${this.getTruncateClass()}` }, this.heading), index.h("eds-button", { key: '260a6ccb15c3aed11585b7d81c1c1d4912e3cd3f', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8 text-default" })), index.h("div", { key: '96f67530d2c0504507e3fb9becf537f5517081d1', class: "pt-8 px-20 py-20" }, index.h("slot", { key: '3ffc38832d4a4e8d61c5182f7ceda4ea7876fa31' })))));
+        // 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: '97a75a0b2a26e912499d844df4e3eb10c2c9eb29' }, index.h("eds-section-heading", { key: 'fe5d0d7a0594bac513551c4a7ea45e34598ec265', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), index.h("slot", { key: '5f6492d074ffc9996ac39449a037e267a5b399d2' })));
+        return (index.h(TagType, { key: '65cb765fe9b997b5e573f5befd4ca1ea6611f1c5' }, index.h("eds-section-heading", { key: 'a48c9fef0a45fbed08749e8b4f17d762d38bbb5b', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), index.h("slot", { key: '7e26bc40132c32670db60f5765b412d00d64c129' })));
     }
 };
 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: '9003f6d452637cdc9ed3bea69689cd92546860b8', class: {
+        return (index.h(TagType, { key: '032f8629ef5ea1c45f40a135a54c32337f7181e9', 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: '2cb120e1bf8e4816cb56c8ba8f8bbae546bd7baf', class: this.getHeadingClass() }, this.sectionTitle)));
+            } }, index.h(HeadingTag, { key: '37f821426fe05dba66445745da3d23c9ff75345e', 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: 'cc0184654ced150ab0500a77d89f831530ddc52c', class: "max-w-sidebar mx-auto px-4 py-8" }, index.h("div", { key: '693b53e776bdf110d7f21e68b9e3f8fb6f5eab4b', class: "relative" }, index.h("div", { key: '030ef1b15f76a75292b2998cb7083da0e5f16bd4', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), index.h("div", { key: '0811245c700b23e10a3d2b83504673aee12a8bc4', 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: '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
                 ? [{ 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: 'ac2e0d12975d88e9a22db8b92255a597e7f6ea6f', 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: '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) }))))));
     }
     get hostElement() { return index.getElement(this); }
 };

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: 'dc96e5e7e26b90d55edf211a12cca96331fd50ee', class: "container" }, index.h("div", { key: '7168395a53d0d1ccb01ea8850dc78b9bafbc80db', class: "mb-8" }, index.h("eds-alert", { key: '66969d5478be8b0e07dc96e62aac4273fe23927c', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" })), index.h("div", { key: '1b31ee746e23288fc37c17e71bc9c5a4d9333a0a', class: "flex" }, index.h("div", { key: 'f04c1b2349c82720f7e3d9a29c2aaf0ff9d73af0', class: "w-full" }, index.h("ul", { key: '2ba63701fdde544e5c510e03676d1b1c74061931', 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: '7642247ada8ff3201e3a1273a20cb37860a1581d', class: "w-full" }, index.h("ul", { key: 'ef03781a8ed2067adc0b8cb65ba9268ba0920f04', 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: '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 } })))))))));
     }
 };