@ebrains/react 2.4.1 → 3.0.0

package/eds-modal.entry.esm.js

@@ -4,20 +4,33 @@ import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
 
-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) {
     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.
    *
@@ -28,12 +41,12 @@ const EdsModal = class {
     switch (this.position) {
       case 'top':
         return [
-        // mobile: pinned to top, full-width
-        'top-0', 'left-0', 'w-full',
+        // mobile: small gap from top, full-width
+        'top-16', 'left-0', 'w-full',
         // desktop: half-width centred and offset down
         'md:left-1/2', 'md:w-auto', 'md:-translate-x-1/2', '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':
@@ -42,17 +55,53 @@ const EdsModal = class {
       default:
         return [
         // mobile: full-width, start from top with a little padding
-        'top-0', 'left-0', 'w-full', 'pt-4',
+        'top-16', 'left-0', 'w-full',
         // desktop: centred both axes
         'md:left-1/2', 'md:top-1/2', 'md:w-auto', 'md:-translate-x-1/2', 'md:-translate-y-1/2'].join(' ');
     }
   }
+  trapFocus(event) {
+    var _a;
+    if (event.key !== 'Tab') return;
+    const focusableElements = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+    if (!focusableElements || focusableElements.length === 0) return;
+    const firstElement = focusableElements[0];
+    const lastElement = focusableElements[focusableElements.length - 1];
+    if (event.shiftKey) {
+      if (document.activeElement === firstElement) {
+        lastElement.focus();
+        event.preventDefault();
+      }
+    } else {
+      if (document.activeElement === lastElement) {
+        firstElement.focus();
+        event.preventDefault();
+      }
+    }
+  }
+  lockBodyScroll() {
+    document.body.style.overflow = 'hidden';
+  }
+  unlockBodyScroll() {
+    document.body.style.overflow = '';
+  }
   /**
    * Opens the modal.
    */
   async open() {
     var _a;
+    // Store currently focused element
+    this.previousActiveElement = document.activeElement;
     this.isOpen = true;
+    this.lockBodyScroll();
+    // Focus first focusable element in modal after it renders
+    setTimeout(() => {
+      var _a;
+      const focusableElements = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+      if (focusableElements && focusableElements.length > 0) {
+        focusableElements[0].focus();
+      }
+    }, 100);
     sendAnalytics({
       category: 'ui-component',
       parentContext: null,
@@ -67,6 +116,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);
+    }
     sendAnalytics({
       category: 'ui-component',
       parentContext: null,
@@ -79,7 +136,11 @@ 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.
@@ -94,52 +155,48 @@ 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()}`;
+    // Don't render anything when modal is closed to prevent blocking clicks
+    if (!this.isOpen) {
+      return null;
+    }
     return h("div", {
-      key: '6b7cbab7db29bb09415bb9538d69ac9a238a7776',
       id: "eds-modal",
-      class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-9999991 flex`,
+      class: "modal-open fixed inset-0 z-9999991 flex",
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": titleId
-    }, this.isOpen && h("div", {
-      key: '56f00980b2f843b5c1ce85502409d4711d89fad7',
-      class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
-      ,
-
+    }, h("div", {
+      class: "modal-backdrop fixed inset-0 bg-dark backdrop-visible",
       onClick: () => this.close()
     }), h("div", {
-      key: '687e1975bb8a17b0a6eb42038f72117dc71ca876',
-      class: `container absolute bg-inverse z-10 ${this.getModalPositionClasses()} grow justify-center`
+      class: `container absolute bg-inverse z-10 rounded-lg shadow-lg ${this.getModalPositionClasses()} ${this.getSizeClass()} grow justify-center max-h-[90vh] flex flex-col modal-content modal-content-visible`
     }, h("div", {
-      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'}`
+      class: `flex justify-between items-center border-b-2 border-softer px-20 py-24 flex-shrink-0  ${this.inverseHeader ? 'bg-strongest text-inverse' : 'bg-dark text-default'}`
     }, h("span", {
-      key: 'efefadd7e6630d9d9b498e68480a41b604c16c9f',
       id: titleId,
-      class: `f-heading-04 ${this.getTruncateClass()}`
+      class: `f-heading-04 mr-8 modal-title ${this.getTruncateClass()}`
     }, this.heading), h("eds-button", {
-      key: '79a156bd0640990911f1480a4e6becc7c4c20d7b',
-      intent: "tertiary",
+      intent: this.inverseHeader ? 'ghostInverse' : 'secondary',
+      size: "large",
       icon: "close",
       "aria-label": "Close modal",
-      onClick: () => this.close(),
-      "extra-class": "ml-8 text-default"
+      onClick: () => this.close()
     })), h("div", {
-      key: '802a6cc72f1bb41e8f907baa8d37cb5a01baf0cf',
-      class: "pt-8 px-20 py-20"
-    }, h("slot", {
-      key: '1a59aaa764e4c4ed972de7a700ddf8f716e40e58'
-    }))));
+      class: "pt-8 px-20 py-20 overflow-y-auto flex-1"
+    }, h("slot", null))));
   }
   get el() {
     return getElement(this);

package/eds-pie.entry.esm.js

@@ -54,7 +54,7 @@ const EdsPie = class {
       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,
@@ -87,7 +87,7 @@ const EdsPie = class {
       cx: radius,
       cy: radius,
       r: innerRadius,
-      fill: "var(--white)"
+      fill: "#FFFFFF"
     }), processed.map(s => {
       const midAngle = s.start + (s.end - s.start) / 2;
       const {
@@ -123,8 +123,42 @@ 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)'],
-  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)']
+  semantic: ['#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: ['#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/eds-section-core_2.entry.esm.js

@@ -15,13 +15,13 @@ const EdsSectionCore = class {
   render() {
     const TagType = this.tag; // Set dynamic tag type (div or section)
     return h(TagType, {
-      key: '3c75c9cda6a41c0d4243c3c111d7cc95f3efb97b'
+      key: '65cb765fe9b997b5e573f5befd4ca1ea6611f1c5'
     }, h("eds-section-heading", {
-      key: '05b4d011aa1b8f489fe8aa0fd6d43b824da03370',
+      key: 'a48c9fef0a45fbed08749e8b4f17d762d38bbb5b',
       headingLevel: this.headingLevel,
       sectionTitle: this.sectionTitle
     }), h("slot", {
-      key: '1749580398e56d38d83d5f5fdd87f43867a554cb'
+      key: '7e26bc40132c32670db60f5765b412d00d64c129'
     }));
   }
 };
@@ -52,7 +52,7 @@ const EdsSectionHeading = class {
     const TagType = this.tag; // Dynamically set tag type for the container
     const HeadingTag = this.headingLevel; // Dynamically set heading level
     return h(TagType, {
-      key: '18614645f329d9ccfe6104b544ff306c6190173a',
+      key: '032f8629ef5ea1c45f40a135a54c32337f7181e9',
       class: {
         'ui-section-header flex flex-wrap items-center justify-between gap-x-12 gap-y-8': true,
         container: this.withContainer,
@@ -60,7 +60,7 @@ const EdsSectionHeading = class {
         'pt-28': !this.spacingLarge
       }
     }, h(HeadingTag, {
-      key: 'ce699077313e9ee8d8a66e68af667451351a35a6',
+      key: '37f821426fe05dba66445745da3d23c9ff75345e',
       class: this.getHeadingClass()
     }, this.sectionTitle));
   }

package/eds-splash-screen.entry.esm.js

@@ -3,7 +3,7 @@ import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
 
-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 {
   constructor(hostRef) {
@@ -55,22 +55,14 @@ const EdsSplashScreen = class {
     return h(Host, null, h("div", {
       class: "splash-overlay",
       style: {
-        background: this.inverse ? 'black' : 'var(--grey-200)'
+        background: this.inverse ? 'var(--brand-black)' : 'var(--grey-light)'
       }
     }, h("div", {
       class: "logo-container"
     }, this.inverse ? h("eds-logo", {
-      orientation: "vertical",
-      type: "color-white"
+      variant: "negative"
     }) : h("eds-logo", {
-      orientation: "vertical",
-      type: "color"
-    })), h("div", {
-      class: "content-container"
-    }, h("eds-spinner", {
-      size: "xs",
-      background: "none",
-      fullscreen: false
+      variant: "positive"
     }))));
   }
   static get watchers() {

package/eds-timeline.entry.esm.js

@@ -46,29 +46,26 @@ const EdsTimeline = class {
   }
   render() {
     return h("div", {
-      key: '0e33d3aed6e58d34209012bf65b0388b501f1667',
+      key: '9670bbe26e6f092d88c73268838d9349dca0c323',
       class: "max-w-sidebar mx-auto px-4 py-8"
     }, h("div", {
-      key: 'ac0c5cfa6685d79cce06faa4481568ce1018c562',
+      key: '202722dc0cb384ce68b2239915f44bf90d87a77e',
       class: "relative"
     }, h("div", {
-      key: '96be2703fc36ecbe8b872d7ed79873375ef05de9',
+      key: '59760e5a62518dc6c3cc7fcfa711e060837f4c49',
       class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0"
     }), h("div", {
-      key: '9d4e75de9f35a00c76edf08f7e570c62c325741d',
+      key: '2f1f6c5f5e7f2a770fc762b1b886dd199f0cf953',
       class: "space-y-16"
     }, this.parsedEvents.map((event, index) => h("div", {
       class: "relative flex"
     }, h("div", {
       class: `w-1/2 ${index % 2 === 0 ? 'pr-4' : ''}`
     }, index % 2 === 0 && h("eds-card-generic", {
-      cardTitle: event.title,
+      title: event.title,
       url: "#",
       description: event.description,
-      "heading-level": "h2",
-      tiny: true,
-      bg: !event.completed,
-      "with-hover": "false",
+      intent: "secondary",
       tags: JSON.stringify(event.completed ? [{
         label: 'completed',
         style: 'accent'
@@ -86,13 +83,10 @@ const EdsTimeline = class {
     })), h("div", {
       class: `w-1/2 ${index % 2 !== 0 ? 'pl-4' : ''}`
     }, index % 2 !== 0 && h("eds-card-generic", {
-      cardTitle: event.title,
+      title: event.title,
       url: "#",
       description: event.description,
-      "heading-level": "h2",
-      tiny: true,
-      bg: !event.completed,
-      "with-hover": "false",
+      intent: "secondary",
       tags: JSON.stringify(event.completed ? [{
         label: 'completed',
         style: 'accent'

package/eds-toast-manager.entry.esm.js

@@ -74,7 +74,7 @@ const EdsToastManager = class {
   }
   render() {
     return h("div", {
-      key: '871b9d1b34f1e03b77754a1bfd82b5e506d12592',
+      key: 'd707822f33892171428aa926822dff5ffefac219',
       class: "toast-container"
     }, this.toasts.map(t => h("div", {
       key: t.id

package/eu-8ac3e99c.esm.js

@@ -0,0 +1,7 @@
+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>
+`;
+
+export { euSvg as e };

package/incorrect-use-of-colors.entry.esm.js

@@ -29,23 +29,23 @@ const IncorrectUseOfColors = class {
   }
   render() {
     return h("div", {
-      key: '46ba571846c2b481f3ace83fa6ba4a87bcd30782',
+      key: '424c9b01d69068fa058b25dd89df08154912dfe7',
       class: "container"
     }, h("div", {
-      key: '9dc5ab29cf5eaad08c8b83207e7aeb90b6ab4a4d',
+      key: '5a9dae817344c3c92b8bdb55b806b1f96e26496d',
       class: "mb-8"
     }, h("eds-alert", {
-      key: '8e7f6cef090d49b6bbc7073287160c1043c55a93',
+      key: 'afeaa6e5320151800d31c3fecb85669000409a14',
       message: "Note that, each of the four colour tones cannot be mixed in the same composition.",
       intent: "error"
     })), h("div", {
-      key: 'f1179f91e386c3eafea6a0ddfe8f4cec957d8e45',
+      key: '87241b25b9f9e326183ba4496983d93bef766380',
       class: "flex"
     }, h("div", {
-      key: 'a2e2bdde2b2e7db03cdc7c4bcf3340a1de588502',
+      key: 'c018e1fffc8198b3e48e1df6b1e8d560e1c7b84a',
       class: "w-full"
     }, h("ul", {
-      key: 'de6f792de1485bb7771b5feb911185ad8e433dab',
+      key: '97845ca2dfe71ac0feb27762c4b3c71c80ca626c',
       class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, primary.map(color => h("li", {
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
@@ -55,10 +55,10 @@ const IncorrectUseOfColors = class {
         backgroundColor: color.background
       }
     }))))), h("div", {
-      key: 'b018dc2bf1644efc96807184e7996bb32221ecc3',
+      key: '05adf9099f1b043d08577cf1f233551d83fc4242',
       class: "w-full"
     }, h("ul", {
-      key: '6ec1aff24d751fde41e3f4a878f641a84bf91854',
+      key: '55792bcf3ecb93df6884d7366aa8c7f2c3cf5ad5',
       class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, incorrect.map(color => h("li", {
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"

package/index.esm.js

@@ -1,4 +1,4 @@
-export { E as EdsAccordion, a as EdsAlert, b as EdsAvatar, d as EdsBlockBreak, e as EdsBreadcrumb, f as EdsButton, i as EdsCardGeneric, j as EdsCardSection, k as EdsCodeBlock, l as EdsDropdown, m as EdsFeedback, n as EdsFooter, o as EdsForm, p as EdsFullscreenMenu, q as EdsGauge, s as EdsGlobalSearch, t as EdsHeader, u as EdsIconWrapper, v as EdsImg, w as EdsInputField, x as EdsInputFooter, y as EdsInputLabel, z as EdsLink, A as EdsLogo, B as EdsMatomoNotice, C as EdsModal, D as EdsNps, F as EdsPagination, G as EdsPie, I as EdsProgressBar, J as EdsRating, K as EdsSidebar, L as EdsSocialNetworks, M as EdsSpinner, N as EdsSplashScreen, O as EdsSteps, P as EdsStepsV2, Q as EdsSwitch, R as EdsTable, S as EdsTabs, T as EdsTag, U as EdsToast, V as EdsTooltip, W as EdsUser } from './index.esm2.js';
+export { E as EdsAccordion, a as EdsAlert, b as EdsAvatar, d as EdsBlockBreak, e as EdsBreadcrumb, f as EdsButton, i as EdsCardApp, j as EdsCardCta, k as EdsCardFeature, l as EdsCardGeneric, m as EdsCardHero, n as EdsCardStat, o as EdsCodeBlock, p as EdsDropdown, q as EdsFeedback, s as EdsFooter, t as EdsForm, u as EdsGauge, v as EdsGlobalSearch, w as EdsHeader, x as EdsIconWrapper, y as EdsImg, z as EdsInputDropzone, A as EdsInputField, B as EdsInputFile, C as EdsInputFooter, D as EdsInputLabel, F as EdsKgWebServicesSelect, G as EdsLink, I as EdsLogo, J as EdsMatomoNotice, K as EdsModal, L as EdsNps, M as EdsPagination, N as EdsPie, O as EdsProgressBar, P as EdsRating, Q as EdsSidebar, R as EdsSocialNetworks, S as EdsSpinner, T as EdsSplashScreen, U as EdsSteps, V as EdsStepsV2, W as EdsSwitch, X as EdsTable, Y as EdsTabs, Z as EdsTag, _ as EdsToast, $ as EdsTooltip, a0 as EdsUser } from './index.esm2.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';