@ebrains/components 0.4.0-alpha.0 → 0.5.0-alpha.0

package/dist/hydrate/index.js

@@ -2309,7 +2309,7 @@ class ColorPrimaryPalette {
         ];
     }
     render() {
-        return (hAsync("ul", { key: '581f0978ebeda33a156d2baf3cc41a10897da1cf', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, hAsync("div", { class: "grid" }, hAsync("span", { class: "f-body-02" }, color.rgb), hAsync("span", { class: "f-body-02 w-full" }, color.cmyk), hAsync("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { class: "grid" }, hAsync("span", { class: "f-body-02" }, color.pantoneC), hAsync("span", { class: "f-body-02" }, color.pantoneU))))))));
+        return (hAsync("ul", { key: 'b9b1f4d9c692d3b6f80dd5e50f7c840ed2dd6139', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, hAsync("div", { class: "grid" }, hAsync("span", { class: "f-body-02" }, color.rgb), hAsync("span", { class: "f-body-02 w-full" }, color.cmyk), hAsync("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { class: "grid" }, hAsync("span", { class: "f-body-02" }, color.pantoneC), hAsync("span", { class: "f-body-02" }, color.pantoneU))))))));
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -2381,7 +2381,7 @@ class ColorSecondaryPalette {
         this.show = undefined;
     }
     render() {
-        return (hAsync("ul", { key: '7f2e8e7efa207bedaa1e19c0f7d87459a5c22693', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, hAsync("div", { class: "grid" }, hAsync("span", { class: "f-body-02" }, color.rgb), hAsync("span", { class: "f-body-02 w-full" }, color.cmyk), hAsync("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { class: "grid" }, hAsync("span", { class: "f-body-02" }, color.pantoneC), hAsync("span", { class: "f-body-02" }, color.pantoneU))))))));
+        return (hAsync("ul", { key: 'f3b7eccec4f67008e8ed73c1a0ff23a542e3c516', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, hAsync("div", { class: "grid" }, hAsync("span", { class: "f-body-02" }, color.rgb), hAsync("span", { class: "f-body-02 w-full" }, color.cmyk), hAsync("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { class: "grid" }, hAsync("span", { class: "f-body-02" }, color.pantoneC), hAsync("span", { class: "f-body-02" }, color.pantoneU))))))));
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -2446,7 +2446,7 @@ class ColorSupportPalette {
         ];
     }
     render() {
-        return (hAsync("ul", { key: '6cd3d5f3128a49e9ac77abc11f46ca880bc6c195', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, hAsync("div", { class: "grid" }, hAsync("span", { class: "f-body-02" }, color.rgb), hAsync("span", { class: "f-body-02 w-full" }, color.cmyk), hAsync("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { class: "grid" }, hAsync("span", { class: "f-body-02" }, color.pantoneC || 'N/A'), hAsync("span", { class: "f-body-02" }, color.pantoneU || 'N/A'))))))));
+        return (hAsync("ul", { key: 'bef8701ffa7aec7ea1f0f21a2dfbe1157647bb0a', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, hAsync("div", { class: "grid" }, hAsync("span", { class: "f-body-02" }, color.rgb), hAsync("span", { class: "f-body-02 w-full" }, color.cmyk), hAsync("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { class: "grid" }, hAsync("span", { class: "f-body-02" }, color.pantoneC || 'N/A'), hAsync("span", { class: "f-body-02" }, color.pantoneU || 'N/A'))))))));
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -2522,7 +2522,7 @@ class CorrectUseOfColors {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync("div", { key: '33f38f14e5b6e7271ae26608fb1a1ed0c7930c7c', class: "container" }, hAsync("p", { key: '4857375e983add7d8e5e0a0d9896641774be018e', class: "f-body-01" }, "This guide demonstrates the correct usage of the", hAsync("eds-link", { key: '1c6bd69472074babf8f830fdba9be31e73afcd88', label: "primary", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", hAsync("eds-link", { key: 'ae3429fadbea001f01731d3c15f28865d668a50a', label: "support", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), hAsync("div", { key: 'd8c6b9ab88abbf6194a4fb26120244982b59c2c4', class: "flex" }, hAsync("div", { key: 'fc7f854940caabb9e032999f51732b64555e96e7', class: "w-full" }, hAsync("ul", { key: '99c6a2e47c683ac38f2a14feec80177c0cf1c174', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary$1.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), hAsync("div", { key: '91048e89cff083356c589c0f1bfecdd482e0c797', class: "w-full" }, hAsync("ul", { key: '6ee69388227089a5224a6d249c8e1eea4efde128', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), hAsync("p", { key: 'c0a8e42942f2655648aa2ec3ce74bbf8d043ba63', class: "f-body-01" }, "This guide demonstrates the correct usage of the", hAsync("eds-link", { key: '3f272298bcd7d0e6ad791edc408ef636349fbf7d', label: "purple", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", hAsync("eds-link", { key: '9a0b28f388483944aa4b053b9f8e807c1383431e', label: "support", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), hAsync("div", { key: '27ab1cdb936918fafe122c5a569c83322043bb79', class: "flex" }, hAsync("div", { key: '037b9916ff3a3e8c2e9db64b650d44a57aedbcf9', class: "w-full" }, hAsync("ul", { key: '60f4f6290b31a29852fb934c678edcaa61c8e930', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, purple$1.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), hAsync("div", { key: '36397292a31417703736b3be5b77e17241675dd9', class: "w-full" }, hAsync("ul", { key: '20a9e6bb396c184c2718a18554eb1b4828817379', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), hAsync("p", { key: '0b89819b9fce1dff39b06b70873d651b7a1c84ac', class: "f-body-01" }, "This guide demonstrates the correct usage of the", hAsync("eds-link", { key: '9b3e7d46ac8116ff5f47f895bb06e89cd49c4e03', label: "blue", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", hAsync("eds-link", { key: '94c3384e546bcae55d5634064a37436b4cdaab0f', label: "support", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), hAsync("div", { key: '7e3fe503559fa6865b824fd7f93dfdf8ed368f34', class: "flex" }, hAsync("div", { key: '4ed98a3b92ba8b73e3cd67dec625b4b8dfb34ee1', class: "w-full" }, hAsync("ul", { key: '0ccfd018568eb834ae05771976122736f5944205', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, blue.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), hAsync("div", { key: 'd2cef9f5bd8ce7fb103e22a8964cee88853c1162', class: "w-full" }, hAsync("ul", { key: '24301ce590bd1530316f351202bd76fafaa7dda5', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), hAsync("p", { key: '748852527301ab6465b593f5f271dc6dcef9d198', class: "f-body-01" }, "This guide demonstrates the correct usage of the", hAsync("eds-link", { key: 'f035467c04170412a1b06f05b8675b6be57e8aa2', label: "redish", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", hAsync("eds-link", { key: '6e4eb577c6582a160b8282b54a6edfc58f20926b', label: "support", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), hAsync("div", { key: '9209fd1ab3092cd21dd81a3328171c8de4fb8bca', class: "flex" }, hAsync("div", { key: 'dc71b931a70fbd31a4f72814b23a1d97933bc721', class: "w-full" }, hAsync("ul", { key: 'd3f6f25439b6fbc8e8c08b39bf46de9ce52482fa', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, red$1.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), hAsync("div", { key: '78d64d48a72836043c53e485269402bf566a5d98', class: "w-full" }, hAsync("ul", { key: '6eb824d03f4d0e2d3966963c899473e242b31dc6', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
+        return (hAsync("div", { key: '58274bc750821893f1ff6db6af0c92557e2037dc', class: "container" }, hAsync("p", { key: 'f16ae70777dc595edb9f8ef20df33721816a472a', class: "f-body-01" }, "This guide demonstrates the correct usage of the", hAsync("eds-link", { key: 'c98c49daddf43987002dd69ab1c00dffbae5e69a', label: "primary", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", hAsync("eds-link", { key: 'e466f6f7e05f68896114551f59673c707d5fd30f', label: "support", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), hAsync("div", { key: '32dfc27beebbbab3949c7695293800a2ff552ceb', class: "flex" }, hAsync("div", { key: 'e01d74cf63c84f66d868e180589b45cbc59ebff7', class: "w-full" }, hAsync("ul", { key: '162e9c5ed57689a94c5c59e2664bba2adfcd60fc', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary$1.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), hAsync("div", { key: 'bb71abb645789030487eccdd0abaf9b223c12ec8', class: "w-full" }, hAsync("ul", { key: 'f85702460f89881d6b8642decad848affdc7002f', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), hAsync("p", { key: '7b5b8b9c0013a91c97f24c239bde32a727695707', class: "f-body-01" }, "This guide demonstrates the correct usage of the", hAsync("eds-link", { key: '81dc2c31eb283a2f64a1fd32329b35b1d04afc12', label: "purple", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", hAsync("eds-link", { key: 'd90877918d973595a7b8bdacd6bb80f1f04cab5b', label: "support", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), hAsync("div", { key: '81cf06bb6932b2120b210e7d1ee9d556cedc949b', class: "flex" }, hAsync("div", { key: '2cc1571fe83620fcfa8f961af93b7b0e8e970eb2', class: "w-full" }, hAsync("ul", { key: 'b6b1f7f874dbd8784a0253187438c2eb6282a815', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, purple$1.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), hAsync("div", { key: '49a874de125699d800aee6256bb5b3bf9a0bf907', class: "w-full" }, hAsync("ul", { key: '10d41b5ab948c87c8db43fbddefbe3453c5384a9', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), hAsync("p", { key: 'bc7c40435b87cd31b5bbb2315b3f50fa88b5bafb', class: "f-body-01" }, "This guide demonstrates the correct usage of the", hAsync("eds-link", { key: 'd5a9f4c30d9108bd8c8207ee0130a15b9c7ff53f', label: "blue", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", hAsync("eds-link", { key: '35c2440f2c606cd4e8e69b33850ca908f6f36a4a', label: "support", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), hAsync("div", { key: 'cf9dde65d107b20c67e0036e891ad37c1d685477', class: "flex" }, hAsync("div", { key: '807350f20ee902df273ce35c217bcaa134502d13', class: "w-full" }, hAsync("ul", { key: '8198d1e59cb9477978a0b78714e7884a75ce52c0', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, blue.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), hAsync("div", { key: 'ed4f89cd3d5544a199d0a516e23ee877c16dad6a', class: "w-full" }, hAsync("ul", { key: '47f8617629f34252b2d533f5932dd14b9117f601', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), hAsync("p", { key: '7b99385726cda59f07b66ff99e050588d5778421', class: "f-body-01" }, "This guide demonstrates the correct usage of the", hAsync("eds-link", { key: 'f3719f08484d40ceb9ece89474f473cf9e44ee53', label: "redish", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", hAsync("eds-link", { key: 'f1ee0fbf78a5da5f6a7a0836f63cc3312f68a547', label: "support", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), hAsync("div", { key: '833dcd6ad96a0c36a127c5384d0858b879bf0b05', class: "flex" }, hAsync("div", { key: 'cf1297f1dfed3e70c184cdb3f4e116292ce1e57f', class: "w-full" }, hAsync("ul", { key: '9d8d9e0f78348cee56f6c91b3289a90f25c088e4', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, red$1.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), hAsync("div", { key: '836dfd427a087ee512970bf52ee0612a24cfaa72', class: "w-full" }, hAsync("ul", { key: '08e2b7603c2c093b2bd8931d1993aca89801ad1d', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -2534,170 +2534,6 @@ class CorrectUseOfColors {
     }; }
 }
 
-[
-    ['eds-header', {
-            'home-url': '/',
-            'user-feature': 'false',
-            'keycloak-url': 'http://localhost:8080',
-            'keycloak-realm': 'nigeor-realm',
-            'keycloak-client-id': 'stencil-app',
-            links: JSON.stringify([
-                { label: 'About', url: '/about' },
-                { label: 'Focus Areas', url: '/focus-areas' },
-                { label: 'News & Events', url: '/news-and-events' },
-                { label: 'Contact', url: '/contact' },
-            ]),
-        }],
-    ['eds-block-break', {}],
-    ['eds-footer', {}],
-    ['eds-block-break', {}],
-    ['eds-tabs', {
-            tabs: JSON.stringify([
-                { label: 'Home', url: '#', active: true, ariaLabel: 'Home Tab' },
-                { label: 'Profile', url: '#', active: false, ariaLabel: 'Profile Tab' },
-                { label: 'Settings', url: '#', active: false, ariaLabel: 'Settings Tab' },
-            ]),
-        }],
-    ['eds-block-break', {}],
-    ['eds-card-section', {
-            cards: JSON.stringify([
-                { title: 'Card 1', description: 'Description 1', tags: 'tag1, tag2', url: '/link1' },
-                { title: 'Card 2', description: 'Description 2', tags: 'tag3', url: '/link2' },
-            ]),
-            cols: '4',
-        }],
-    ['eds-block-break', {}],
-    ['eds-link', {
-            label: 'Main Link Click Me',
-            url: 'https://example.com',
-            intent: 'primary'
-        }],
-    ['eds-block-break', {}],
-    ['eds-avatar', { 'first-name': 'John', 'last-name': 'Doe' }],
-    ['eds-block-break', {}],
-    ['eds-breadcrumb', {
-            items: JSON.stringify([
-                { label: 'Home', url: '/' },
-                { label: 'Products', url: '/products' },
-                { label: 'Electronics', url: '/products/electronics' },
-                { label: 'Laptops', url: '/products/electronics/laptops' },
-            ]),
-            intent: 'primary',
-        }],
-    ['eds-block-break', {}],
-    ['eds-card-generic', {
-            'card-title': 'The Future of AI in Healthcare',
-            url: 'https://example.com/ai-healthcare',
-            description: 'Explore how AI is transforming the healthcare industry with cutting-edge technologies and research.',
-            avatar: 'https://files.ebrains.eu/img/686e0edc-f3be-4d79-aa02-373c32c08d65/ebrains-logo-high-resolution.png?fit=max&q=80&fm=webp&crop=879%2C879%2C597%2C0&w=200',
-            'short-abbreviation': 'AI',
-            'heading-level': 'h2',
-            tags: 'Technology,AI,Healthcare',
-            tiny: 'false',
-            bg: 'true',
-            'with-hover': 'true',
-        }],
-    ['eds-block-break', {}],
-    ['eds-code-block', {
-            code: 'Hello',
-            language: 'javascript',
-        }],
-    ['eds-block-break', {}],
-    ['eds-dropdown', {
-            'aria-label': 'More options',
-            'rounded-btn': 'true',
-            'dropdown-pos': 'right',
-            'dropdown-offset': 'true',
-        }],
-    ['eds-block-break', {}],
-    ['eds-form', {
-            name: 'extended-form',
-            endpoint: 'http://127.0.0.1:5000/api/data',
-            fields: JSON.stringify([
-                { name: 'username', label: 'Username', type: 'text', required: true, maxlength: 10 },
-                { name: 'email', label: 'Email', type: 'email', required: true },
-                { name: 'number', label: 'Number', type: 'number', required: true },
-                { name: 'password', label: 'Password', type: 'password', required: true, maxlength: 50 },
-                { name: 'date', label: 'Date', type: 'date', required: true },
-                { name: 'file', label: 'File', type: 'file', required: false },
-                { name: 'hiddenField', type: 'hidden', value: 'hiddenValue' },
-                { name: 'bio', label: 'Biography', type: 'textarea', required: true, maxlength: 300 },
-                { name: 'role', label: 'Role', type: 'select', required: true, options: [
-                        { label: 'Admin', value: 'admin' },
-                        { label: 'Editor', value: 'editor' },
-                        { label: 'Viewer', value: 'viewer' },
-                    ] },
-                { name: 'preferences', type: 'checkbox', label: 'Select your preferences', options: [
-                        { value: 'option1', label: 'Option 1' },
-                        { value: 'option2', label: 'Option 2' },
-                        { value: 'option3', label: 'Option 3' },
-                    ], required: true },
-                { name: 'gender', type: 'radio', label: 'Select your gender', options: [
-                        { value: 'female', label: 'Female' },
-                        { value: 'male', label: 'Male' },
-                    ], required: true },
-                { name: 'newsletter', label: 'newsletter', type: 'checkbox', value: 'subscribe', required: true },
-                { name: 'range', label: 'Range bar', type: 'range', min: '0', max: '10', step: '1', required: true },
-            ]),
-            'success-message': 'Form submitted successfully!',
-            'error-message': 'Please fix the errors in the form.',
-            'submit-btn': 'true',
-            'small-alert': 'false',
-            'set-form-url': 'true',
-        }],
-    ['eds-block-break', {}],
-    ['eds-img', {
-            src: 'https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.jpg',
-            alt: 'EBRAINS Bernstein Conference',
-            width: '400',
-            height: '225',
-            srcset: 'https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.jpg 720w, https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.jpg 1080w, https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.jpg 1440w',
-            sizes: '(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw',
-            formats: JSON.stringify([
-                { type: 'image/webp', srcset: 'https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.webp 720w, https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.webp 1080w' },
-                { type: 'image/jpeg', srcset: 'https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.jpg 720w, https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.jpg 1080w' },
-            ]),
-            lazyload: 'true',
-            'with-bg': 'true',
-        }],
-    ['eds-block-break', {}],
-    ['eds-input-field', {
-            name: 'username',
-            'input-id': 'username',
-            label: 'Username',
-            placeholder: 'Enter your username',
-            required: 'true',
-            hint: 'Your unique username',
-            message: 'This field is required',
-            'error-message': 'Invalid username',
-            type: 'text',
-        }],
-    ['eds-block-break', {}],
-    ['eds-pagination', {
-            'current-page': '1',
-            'last-page': '10',
-            'per-page': '5',
-            total: '50',
-            mode: 'default',
-        }],
-    ['eds-block-break', {}],
-    ['eds-progress-bar', { value: '75' }],
-    ['eds-table', {
-            data: JSON.stringify([
-                { Property: 'username', Type: 'string', Required: 'Yes' },
-                { Property: 'password', Type: 'string', Required: 'Yes' },
-                { Property: 'email', Type: 'string', Required: 'No' },
-            ]),
-            config: JSON.stringify({
-                Type: { format: 'uppercase' },
-                Property: { format: 'code' },
-                Required: { hidden: true },
-            }),
-        }],
-    ['eds-block-break', {}],
-    ['eds-tag', { label: 'Default Tag', intent: 'default' }],
-];
-
 // Helper function to check if Matomo is initialized
 function isMatomoAvailable() {
     return typeof window !== 'undefined' && typeof window._paq !== 'undefined';
@@ -2709,6 +2545,7 @@ function pushToMatomo(action, ...args) {
         window._paq.push([action, ...args]);
     }
     else {
+        // eslint-disable-next-line
         console.warn('Matomo is not available or not initialized.');
     }
 }
@@ -2716,8 +2553,10 @@ function pushToMatomo(action, ...args) {
 function sendAnalytics(eventData) {
     var _a;
     if (!isMatomoAvailable()) {
+        // eslint-disable-next-line
         console.warn('Matomo is not available or not initialized.');
-        //console.log({ ...eventData });
+        // eslint-disable-next-line
+        console.log(Object.assign({}, eventData));
         return;
     }
     // Conditionally build the name field
@@ -2730,190 +2569,18 @@ function sendAnalytics(eventData) {
     const name = nameParts.join('/');
     //console.log('trackEvent', eventData.category, eventData.action, name)
     pushToMatomo('trackEvent', eventData.category, eventData.action, name);
+    // eslint-disable-next-line
     console.log(Object.assign({}, eventData));
 }
 // Function to opt-in the user
 function matomoOptIn() {
     if (isMatomoAvailable()) {
         window._paq.push(['rememberConsentGiven']);
+        // eslint-disable-next-line
         console.log('User has opted in to tracking');
     }
 }
 
-function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
-
-const falsyToString = (value)=>typeof value === "boolean" ? "".concat(value) : value === 0 ? "0" : value;
-const cx = clsx;
-const cva = (base, config)=>{
-    return (props)=>{
-        var ref;
-        if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
-        const { variants , defaultVariants  } = config;
-        const getVariantClassNames = Object.keys(variants).map((variant)=>{
-            const variantProp = props === null || props === void 0 ? void 0 : props[variant];
-            const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
-            if (variantProp === null) return null;
-            const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
-            return variants[variant][variantKey];
-        });
-        const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param)=>{
-            let [key, value] = param;
-            if (value === undefined) {
-                return acc;
-            }
-            acc[key] = value;
-            return acc;
-        }, {});
-        const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (ref = config.compoundVariants) === null || ref === void 0 ? void 0 : ref.reduce((acc, param1)=>{
-            let { class: cvClass , className: cvClassName , ...compoundVariantOptions } = param1;
-            return Object.entries(compoundVariantOptions).every((param)=>{
-                let [key, value] = param;
-                return Array.isArray(value) ? value.includes({
-                    ...defaultVariants,
-                    ...propsWithoutUndefined
-                }[key]) : ({
-                    ...defaultVariants,
-                    ...propsWithoutUndefined
-                })[key] === value;
-            }) ? [
-                ...acc,
-                cvClass,
-                cvClassName
-            ] : acc;
-        }, []);
-        return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
-    };
-};
-
-const GRADIANT_TOKENS = ['green', 'yellow', 'among-blue', 'purple'];
-const gradientBGColorVariants = cva([], {
-    variants: {
-        color: GRADIANT_TOKENS.reduce((acc, token) => (Object.assign(Object.assign({}, acc), { [token]: '' })), {}),
-        direction: {
-            top: '',
-            bottom: ''
-        },
-        pseudo: {
-            true: 'before:effect-opacity effect-bg-behind',
-            false: ''
-        },
-        hover: {
-            true: 'before:opacity-0 hover:before:opacity-100',
-            false: ''
-        }
-    },
-    compoundVariants: [
-        // region GREEN
-        {
-            color: 'green',
-            direction: 'top',
-            pseudo: true,
-            className: 'before:bg-gradient-01-top'
-        },
-        {
-            color: 'green',
-            pseudo: true,
-            direction: 'bottom',
-            className: 'before:bg-gradient-01-bottom'
-        },
-        {
-            color: 'green',
-            direction: 'top',
-            pseudo: false,
-            className: 'bg-gradient-01-top'
-        },
-        {
-            color: 'green',
-            pseudo: false,
-            direction: 'bottom',
-            className: 'bg-gradient-01-bottom'
-        },
-        // endregion
-        // region YELLOW
-        {
-            color: 'yellow',
-            direction: 'top',
-            pseudo: true,
-            className: 'before:bg-gradient-02-top'
-        },
-        {
-            color: 'yellow',
-            direction: 'bottom',
-            pseudo: true,
-            className: 'before:bg-gradient-02-bottom'
-        },
-        {
-            color: 'yellow',
-            direction: 'top',
-            pseudo: false,
-            className: 'bg-gradient-02-top'
-        },
-        {
-            color: 'yellow',
-            direction: 'bottom',
-            pseudo: false,
-            className: 'bg-gradient-02-bottom'
-        },
-        // endregion
-        // region PURPLE
-        {
-            color: 'purple',
-            direction: 'top',
-            pseudo: true,
-            class: 'before:bg-gradient-03-top'
-        },
-        {
-            color: 'purple',
-            direction: 'bottom',
-            pseudo: true,
-            class: 'before:bg-gradient-03-bottom'
-        },
-        {
-            color: 'purple',
-            direction: 'top',
-            pseudo: false,
-            class: 'bg-gradient-03-top'
-        },
-        {
-            color: 'purple',
-            direction: 'bottom',
-            pseudo: false,
-            class: 'bg-gradient-03-bottom'
-        },
-        // endregion
-        // region AMONG-BLUE
-        {
-            color: 'among-blue',
-            direction: 'top',
-            pseudo: true,
-            class: 'before:bg-gradient-04-top'
-        },
-        {
-            color: 'among-blue',
-            direction: 'bottom',
-            pseudo: true,
-            class: 'before:bg-gradient-04-bottom'
-        },
-        {
-            color: 'among-blue',
-            direction: 'top',
-            pseudo: false,
-            class: 'bg-gradient-04-top'
-        },
-        {
-            color: 'among-blue',
-            direction: 'bottom',
-            pseudo: false,
-            class: 'bg-gradient-04-bottom'
-        }
-        // endregion
-    ],
-    defaultVariants: {
-        direction: 'top',
-        pseudo: true
-    }
-});
-
 const edsAccordionCss = "blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}.min-h-36{min-height:2.25rem}.min-h-44{min-height:2.75rem}.min-h-56{min-height:3.5rem}.container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.effect-color{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.border-softer{border:2px solid rgba(0, 0, 0, .1)}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.relative{position:relative}.absolute{position:absolute}.inset-x-16{left:1rem;right:1rem}.top-16{top:1rem}.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}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.rounded-md{border-radius:12px}.outline-none{outline:2px solid transparent;outline-offset:2px}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.text-light{color:var(--grey-700)}.z-1{z-index:1}.z-10{z-index:10}.effect-height{transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-property:height}.h-0{height:0rem}.h-auto{height:auto}.pt-20{padding-top:1.25rem}.overflow-hidden{overflow:hidden}.grid{display:grid}.overflow-hidden{overflow:hidden}.rounded-lg{border-radius:16px}.border-2{border-width:2px}.p-16{padding:1rem}.ml-auto{margin-left:auto}.mr-auto{margin-right:auto}.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)}.f-heading-06{font-family:var(--f-heading-06-fontFamily);font-weight:var(--f-heading-06-fontWeight);font-size:var(--f-heading-06-fontSize);line-height:var(--f-heading-06-lineHeight);letter-spacing:var(--f-heading-06-letterSpacing)}.text-left{text-align:left}.text-center{text-align:center}";
 var EdsAccordionStyle0 = edsAccordionCss;
 
@@ -3000,10 +2667,10 @@ class EdsAccordion {
      */
     render() {
         const minHeightContentClass = this.minHeightContent ? 'min-h-56' : '';
-        return (hAsync("div", { key: '14811b7517511999f97dc8d486f6c1138d89538b', ref: (el) => (this.wrapperRef = el), class: `container flex effect-color border-softer relative grid overflow-hidden rounded-lg border-2 p-16 
+        return (hAsync("div", { key: '00bd9a34ceb469bef74c827bd1f48bf3d4b545b6', ref: (el) => (this.wrapperRef = el), class: `container flex effect-color border-softer relative grid overflow-hidden rounded-lg border-2 p-16 
           ${this.switchBg && this.isExpanded ? 'bg-inverse' : 'bg-default'} 
           ${this.switchBg ? 'hover:bg-inverse' : ''} 
-          ${minHeightContentClass}` }, hAsync("h3", { key: 'a55ab98b74555ab2ff470d824106d3ff2e9b7fec', class: "mr-auto f-heading-06 text-left absolute inset-x-16 top-16 line-clamp-1" }, this.title), hAsync("div", { key: 'b3a76425eed4d05404a51d8991070a12cd1609a1', class: "ml-auto" }, hAsync("eds-button", { key: '06ddefe21175e4bc28ef4477f5fd552689e1cd31', id: "accordionId", intent: "tertiary", "aria-expanded": this.isExpanded || this.shortContent, "aria-controls": "accordionId", class: `effect-color flex w-full items-center justify-between rounded-md outline-none focus:outline-none`, onClick: this.handleClick, icon: "chevron-down" })), hAsync("div", { key: '7330f2824689a61e82c42f00f79e12d4148df2f9', class: `w-full` }, this.description ? (hAsync("span", { class: `text-light ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}` }, this.description)) : null, hAsync("section", { key: '533e8014f43ed6d50424f02bfb793456187badd9', id: "sectionId", "aria-hidden": !this.isExpanded, class: `z-1 effect-height relative h-0 w-full ${!this.isExpanded && this.clampText ? 'overflow-hidden' : ''}`, style: { height: this.isExpanded ? 'auto' : '0' } }, hAsync("div", { key: '02a0fa8a79942cd2bc760eb62da9cb910252b6cd', ref: (el) => (this.childContentRef = el), class: `accordion-content effect-color pt-20`, "aria-hidden": !this.isExpanded }, hAsync("span", { key: '33edc6bc83eb4eaa49ae5482841ae642a60ffde8', class: `${!this.isExpanded && this.clampText ? 'line-clamp-2' : ''}` }, hAsync("slot", { key: 'bbbc3fa2b8fc5be7f55d6a45f0f37dc569706ac8' })))))));
+          ${minHeightContentClass}` }, hAsync("h3", { key: 'ab6a953797e0a8379a01a9a2f00a4988d4fc8357', class: "mr-auto f-heading-06 text-left absolute inset-x-16 top-16 line-clamp-1" }, this.title), hAsync("div", { key: 'cfd6f4ad2ec5e412cdf2348d188dfcf90770012d', class: "ml-auto" }, hAsync("eds-button", { key: 'beaee69d610727b397645fc0a507b234003fde5e', id: "toggleAccordion", intent: "tertiary", "aria-expanded": this.isExpanded || this.shortContent, "aria-label": "Toggle accordion", "aria-controls": "accordionSection", class: `effect-color flex w-full items-center justify-between rounded-md outline-none focus:outline-none`, onClick: this.handleClick, icon: "chevron-down" })), hAsync("div", { key: '795f14c0930a0b0862a86451cc7b7e807cb79c37', class: `w-full` }, this.description ? (hAsync("span", { class: `text-light ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}` }, this.description)) : null, hAsync("section", { key: '28f6cba233cdee58743faaacc992bf7497c2ff2e', id: "accordionSection", role: "region", "aria-labelledby": "accordionHeader", "aria-hidden": !this.isExpanded, class: `z-1 effect-height relative h-0 w-full ${!this.isExpanded && this.clampText ? 'overflow-hidden' : ''}`, style: { height: this.isExpanded ? 'auto' : '0' } }, hAsync("div", { key: '939e442c55babfd3f1750d20d9b95f664c3a67c8', ref: (el) => (this.childContentRef = el), class: `accordion-content effect-color pt-20`, "aria-hidden": !this.isExpanded }, hAsync("span", { key: '648d16ed84cb3da227a10e6370004c6479789aed', class: `${!this.isExpanded && this.clampText ? 'line-clamp-2' : ''}` }, hAsync("slot", { key: '90ca94f15e408b4b05c0eac4bd20fa21766cbb19' })))))));
     }
     get el() { return getElement(this); }
     static get style() { return EdsAccordionStyle0; }
@@ -3027,6 +2694,51 @@ class EdsAccordion {
     }; }
 }
 
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+
+const falsyToString = (value)=>typeof value === "boolean" ? "".concat(value) : value === 0 ? "0" : value;
+const cx = clsx;
+const cva = (base, config)=>{
+    return (props)=>{
+        var ref;
+        if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+        const { variants , defaultVariants  } = config;
+        const getVariantClassNames = Object.keys(variants).map((variant)=>{
+            const variantProp = props === null || props === void 0 ? void 0 : props[variant];
+            const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
+            if (variantProp === null) return null;
+            const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
+            return variants[variant][variantKey];
+        });
+        const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param)=>{
+            let [key, value] = param;
+            if (value === undefined) {
+                return acc;
+            }
+            acc[key] = value;
+            return acc;
+        }, {});
+        const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (ref = config.compoundVariants) === null || ref === void 0 ? void 0 : ref.reduce((acc, param1)=>{
+            let { class: cvClass , className: cvClassName , ...compoundVariantOptions } = param1;
+            return Object.entries(compoundVariantOptions).every((param)=>{
+                let [key, value] = param;
+                return Array.isArray(value) ? value.includes({
+                    ...defaultVariants,
+                    ...propsWithoutUndefined
+                }[key]) : ({
+                    ...defaultVariants,
+                    ...propsWithoutUndefined
+                })[key] === value;
+            }) ? [
+                ...acc,
+                cvClass,
+                cvClassName
+            ] : acc;
+        }, []);
+        return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+    };
+};
+
 const edsAlertCss = ":root {\n  font-optical-sizing: auto;\n}\nhtml,\nbody {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n/*\n:focus[data-focus-method=\"mouse\"],\n:focus[data-focus-method=\"touch\"] {\n  outline: none !important;\n}\n*/\n/*FADE*/\n/*FADE TRANSLATE Y*/\n/*SLIDE LEFT*/\n/*SLIDE BOTTOM*/\n/*COLLAPSE Y*/\n*, ::before, ::after {\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n}\n::backdrop {\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n}\n/*\n! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com\n*/\n/*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: currentColor; /* 2 */\n}\n::before,\n::after {\n}\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n5. Use the user's configured `sans` font-feature-settings by default.\n6. Use the user's configured `sans` font-variation-settings by default.\n7. Disable tap highlights on iOS\n*/\nhtml {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n  -moz-tab-size: 4; /* 3 */\n  -o-tab-size: 4;\n     tab-size: 4; /* 3 */\n  font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n  font-feature-settings: normal; /* 5 */\n  font-variation-settings: normal; /* 6 */\n  -webkit-tap-highlight-color: transparent; /* 7 */\n}\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\nbody {\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n}\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n/*\nRemove the default font size and weight for headings.\n*/\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n/*\nAdd the correct font weight in Edge and Safari.\n*/\nb,\nstrong {\n  font-weight: bolder;\n}\n/*\n1. Use the user's configured `mono` font-family by default.\n2. Use the user's configured `mono` font-feature-settings by default.\n3. Use the user's configured `mono` font-variation-settings by default.\n4. Correct the odd `em` font sizing in all browsers.\n*/\ncode,\npre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n  font-feature-settings: normal; /* 2 */\n  font-variation-settings: normal; /* 3 */\n  font-size: 1em; /* 4 */\n}\n/*\nAdd the correct font size in all browsers.\n*/\nsmall {\n  font-size: 80%;\n}\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\nsub {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\nsub {\n  bottom: -0.25em;\n}\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse; /* 3 */\n}\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\nbutton,\ninput,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-feature-settings: inherit; /* 1 */\n  font-variation-settings: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  font-weight: inherit; /* 1 */\n  line-height: inherit; /* 1 */\n  letter-spacing: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\nbutton,\nselect {\n  text-transform: none;\n}\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\nbutton,\ninput:where([type='button']),\ninput:where([type='submit']) {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n}\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n[type='search'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n/*\nAdd the correct display in Chrome and Safari.\n*/\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\np,\npre {\n  margin: 0;\n}\nfieldset {\n  margin: 0;\n  padding: 0;\n}\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n/*\nReset default styling for dialogs.\n*/\ndialog {\n  padding: 0;\n}\n/*\nPrevent resizing textareas horizontally by default.\n*/\ntextarea {\n  resize: vertical;\n}\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n/*\nSet the default cursor for buttons.\n*/\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\nimg,\niframe,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\nimg {\n  max-width: 100%;\n  height: auto;\n}\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n  display: none;\n}\n:root {\n  --inner-gutter: 8px;\n}\n@media (min-width: 750px) {\n  :root {\n    --inner-gutter: 12px;\n  }\n}\n@media (min-width: 900px) {\n  :root {\n    --inner-gutter: 16px;\n  }\n}\n@media (min-width: 1024px) {\n  :root {\n    --inner-gutter: 16px;\n  }\n}\n@media (min-width: 1280px) {\n  :root {\n    --inner-gutter: 16px;\n  }\n}\n@media (min-width: 2200px) {\n  :root {\n    --inner-gutter: 16px;\n  }\n}\n:root {\n}\n@media (min-width: 900px) {\n  :root {\n}\n}\n:root {\n  --sans: Inter, Helvetica, Arial, sans-serif;\n  --f-ui-01-fontFamily: var(--sans);\n  --f-ui-01-fontWeight: 800;\n  --f-ui-01-fontSize: 18px;\n  --f-ui-01-lineHeight: 110%;\n  --f-ui-01-letterSpacing: -0.01em;\n}\n.f-ui-01 {\n  font-family: var(--f-ui-01-fontFamily);\n  font-weight: var(--f-ui-01-fontWeight);\n  font-size: var(--f-ui-01-fontSize);\n  line-height: var(--f-ui-01-lineHeight);\n  letter-spacing: var(--f-ui-01-letterSpacing);\n}\n@media (min-width: 750px) {\n  :root {\n}\n}\n@media (min-width: 900px) {\n  :root {\n}\n}\n@media (min-width: 1024px) {\n  :root {\n}\n}\n.f-ui-01 b, .f-ui-01 strong {\n  font-weight: var(--f-ui-01---bold-weight, bold);\n}\n:root {\n  --grey-300: #e6e6e6;\n  --green-200: #d3ffdc;\n  --yellow-200: #ffffcb;\n  --red-200: #ffe0e1;\n}\n@media (min-width: 750px) {\n  .md\\:grid-line-x > *::before {\n    content: attr(👻);\n    inset-inline-start: 0;\n    inset-inline-end: 0;\n    top: 0;\n    bottom: calc(var(--inner-gutter) / -2);\n    border-top: 0 solid transparent;\n    border-bottom: 0 solid transparent;\n  }\n  .md\\:grid-line-xfull > *::before {\n    content: attr(👻);\n    inset-inline-start: calc(var(--inner-gutter) / -2);\n    inset-inline-end: calc(var(--inner-gutter) / -2);\n    top: 0;\n    bottom: calc(var(--inner-gutter) / -2);\n    border-top: 0 solid transparent;\n    border-bottom: 0 solid transparent;\n  }\n  .md\\:grid-line-x-0 > *::before {\n    content: none;\n  }\n  .md\\:grid-line-y > *::after {\n    content: attr(👻);\n    inset-inline-start: 0;\n    inset-inline-end: calc(var(--inner-gutter) / -2);\n    top: 0;\n    bottom: 0;\n    border-inline-start: 0 solid transparent;\n    border-inline-end: 0 solid transparent;\n  }\n  .md\\:grid-line-yfull > *::after {\n    content: attr(👻);\n    inset-inline-start: 0;\n    inset-inline-end: calc(var(--inner-gutter) / -2);\n    top: calc(var(--inner-gutter) / -1);\n    bottom: 0;\n    border-inline-start: 0 solid transparent;\n    border-inline-end: 0 solid transparent;\n  }\n  .md\\:grid-line-y-0 > *::after {\n    content: none;\n  }\n}\n@media (min-width: 900px) {\n  .lg\\:grid-line-x > *::before {\n    content: attr(👻);\n    inset-inline-start: 0;\n    inset-inline-end: 0;\n    top: 0;\n    bottom: calc(var(--inner-gutter) / -2);\n    border-top: 0 solid transparent;\n    border-bottom: 0 solid transparent;\n  }\n  .lg\\:grid-line-xfull > *::before {\n    content: attr(👻);\n    inset-inline-start: calc(var(--inner-gutter) / -2);\n    inset-inline-end: calc(var(--inner-gutter) / -2);\n    top: 0;\n    bottom: calc(var(--inner-gutter) / -2);\n    border-top: 0 solid transparent;\n    border-bottom: 0 solid transparent;\n  }\n  .lg\\:grid-line-x-0 > *::before {\n    content: none;\n  }\n  .lg\\:grid-line-y > *::after {\n    content: attr(👻);\n    inset-inline-start: 0;\n    inset-inline-end: calc(var(--inner-gutter) / -2);\n    top: 0;\n    bottom: 0;\n    border-inline-start: 0 solid transparent;\n    border-inline-end: 0 solid transparent;\n  }\n  .lg\\:grid-line-yfull > *::after {\n    content: attr(👻);\n    inset-inline-start: 0;\n    inset-inline-end: calc(var(--inner-gutter) / -2);\n    top: calc(var(--inner-gutter) / -1);\n    bottom: 0;\n    border-inline-start: 0 solid transparent;\n    border-inline-end: 0 solid transparent;\n  }\n  .lg\\:grid-line-y-0 > *::after {\n    content: none;\n  }\n}\n.border-inside {\n  position: relative;\n\n    &::after {\n    pointer-events: none;\n  }\n\n    &::after {\n    position: absolute;\n  }\n\n    &::after {\n    inset: 0rem;\n  }\n\n    &::after {\n    z-index: 1;\n  }\n\n    &::after {\n    border-radius: 8px;\n  }\n\n    &::after {\n    border-width: 1px;\n  }\n\n    &::after {\n    border-width: 2px;\n  }\n\n    &::after {\n    border-color: rgba(0, 0, 0, .1 );\n  }\n\n    &::after {\n      content: '';\n    }\n}\n/** region TRANSITIONS */\n/** endregion */\n/* region FOCUS */\n/* endregion */\n/* region BG */\n/* endregion */\n/*region shadow*/\n/*endregion*/\n.flex {\n  display: flex;\n}\n.w-full {\n  width: 100%;\n}\n.flex-row {\n  flex-direction: row;\n}\n.items-center {\n  align-items: center;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.gap-x-12 {\n  -moz-column-gap: 0.75rem;\n       column-gap: 0.75rem;\n}\n.space-y-12 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));\n}\n.rounded-lg {\n  border-radius: 16px;\n}\n.bg-dark {\n  background-color: var(--grey-300);\n}\n.bg-error {\n  background-color: var(--red-200);\n}\n.bg-success {\n  background-color: var(--green-200);\n}\n.bg-warning {\n  background-color: var(--yellow-200);\n}\n.p-16 {\n  padding: 1rem;\n}\n.p-20 {\n  padding: 1.25rem;\n}\n.px-12 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.px-20 {\n  padding-left: 1.25rem;\n  padding-right: 1.25rem;\n}\n.py-12 {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n.py-20 {\n  padding-top: 1.25rem;\n  padding-bottom: 1.25rem;\n}\n.py-8 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.pr-12 {\n  padding-right: 0.75rem;\n}\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n[class*=underline-] {\n  text-decoration-line: underline;\n}\n.after\\:rounded-lg::after {\n  border-radius: 16px;\n}\n.after\\:border-softest::after {\n  border-color: rgba(0, 0, 0, .05 );\n}\n";
 var EdsAlertStyle0 = edsAlertCss;
 
@@ -3100,9 +2812,12 @@ class EdsAlert {
         this.withBtn = Boolean(this.pressableLabel);
     }
     componentDidLoad() {
-        // Query all 'eds-link' elements, including those inside shadow DOM
-        const lnk = this.el.shadowRoot.querySelector('eds-link');
-        this.emitContext(lnk);
+        var _a;
+        // Query for the 'eds-link' element inside the shadow root.
+        const lnk = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('eds-link');
+        if (lnk) {
+            this.emitContext(lnk);
+        }
     }
     emitContext(linkElement) {
         const event = new CustomEvent('parentContext', {
@@ -3114,11 +2829,11 @@ class EdsAlert {
         linkElement.dispatchEvent(event);
     }
     render() {
-        return (hAsync("div", { key: '089491004acd618827ef139a7c2ef486726cea9d', class: alertStyles({
+        return (hAsync("div", { key: '519742081f681d6d67bc1b42c89fe1b6d005fe0f', class: alertStyles({
                 intent: this.intent,
                 direction: this.direction,
                 withBtn: this.withBtn
-            }), role: "alert" }, hAsync("p", { key: '9a54555621b492f65b38ecd3cbb44660bf516e51', class: "f-ui-01 py-8" }, this.message), this.withBtn &&
+            }), role: "alert" }, hAsync("p", { key: '6a5d11fdc2a975512b12c307286b0a8b06998bec', class: "f-ui-01 py-8" }, this.message), this.withBtn &&
             (this.pressableUrl ? (hAsync("eds-link", { class: "eds-alert-link", label: this.pressableLabel, url: this.pressableUrl, intent: "secondary", external: true })) : null)));
     }
     get el() { return getElement(this); }
@@ -3140,6 +2855,135 @@ class EdsAlert {
     }; }
 }
 
+const GRADIANT_TOKENS = ['green', 'yellow', 'among-blue', 'purple'];
+const gradientBGColorVariants = cva([], {
+    variants: {
+        color: GRADIANT_TOKENS.reduce((acc, token) => (Object.assign(Object.assign({}, acc), { [token]: '' })), {}),
+        direction: {
+            top: '',
+            bottom: ''
+        },
+        pseudo: {
+            true: 'before:effect-opacity effect-bg-behind',
+            false: ''
+        },
+        hover: {
+            true: 'before:opacity-0 hover:before:opacity-100',
+            false: ''
+        }
+    },
+    compoundVariants: [
+        // region GREEN
+        {
+            color: 'green',
+            direction: 'top',
+            pseudo: true,
+            className: 'before:bg-gradient-01-top'
+        },
+        {
+            color: 'green',
+            pseudo: true,
+            direction: 'bottom',
+            className: 'before:bg-gradient-01-bottom'
+        },
+        {
+            color: 'green',
+            direction: 'top',
+            pseudo: false,
+            className: 'bg-gradient-01-top'
+        },
+        {
+            color: 'green',
+            pseudo: false,
+            direction: 'bottom',
+            className: 'bg-gradient-01-bottom'
+        },
+        // endregion
+        // region YELLOW
+        {
+            color: 'yellow',
+            direction: 'top',
+            pseudo: true,
+            className: 'before:bg-gradient-02-top'
+        },
+        {
+            color: 'yellow',
+            direction: 'bottom',
+            pseudo: true,
+            className: 'before:bg-gradient-02-bottom'
+        },
+        {
+            color: 'yellow',
+            direction: 'top',
+            pseudo: false,
+            className: 'bg-gradient-02-top'
+        },
+        {
+            color: 'yellow',
+            direction: 'bottom',
+            pseudo: false,
+            className: 'bg-gradient-02-bottom'
+        },
+        // endregion
+        // region PURPLE
+        {
+            color: 'purple',
+            direction: 'top',
+            pseudo: true,
+            class: 'before:bg-gradient-03-top'
+        },
+        {
+            color: 'purple',
+            direction: 'bottom',
+            pseudo: true,
+            class: 'before:bg-gradient-03-bottom'
+        },
+        {
+            color: 'purple',
+            direction: 'top',
+            pseudo: false,
+            class: 'bg-gradient-03-top'
+        },
+        {
+            color: 'purple',
+            direction: 'bottom',
+            pseudo: false,
+            class: 'bg-gradient-03-bottom'
+        },
+        // endregion
+        // region AMONG-BLUE
+        {
+            color: 'among-blue',
+            direction: 'top',
+            pseudo: true,
+            class: 'before:bg-gradient-04-top'
+        },
+        {
+            color: 'among-blue',
+            direction: 'bottom',
+            pseudo: true,
+            class: 'before:bg-gradient-04-bottom'
+        },
+        {
+            color: 'among-blue',
+            direction: 'top',
+            pseudo: false,
+            class: 'bg-gradient-04-top'
+        },
+        {
+            color: 'among-blue',
+            direction: 'bottom',
+            pseudo: false,
+            class: 'bg-gradient-04-bottom'
+        }
+        // endregion
+    ],
+    defaultVariants: {
+        direction: 'top',
+        pseudo: true
+    }
+});
+
 const edsAvatarCss = ".border-inside {\n    position: relative;\n\n    &::after {\n        pointer-events: none;\n    }\n\n    &::after {\n        position: absolute;\n    }\n\n    &::after {\n        inset: 0rem;\n    }\n\n    &::after {\n        z-index: 1;\n    }\n\n    &::after {\n        border-radius: 8px;\n    }\n\n    &::after {\n        border-width: 1px;\n    }\n\n    &::after {\n        border-width: 2px;\n    }\n\n    &::after {\n        border: 2px solid rgba(0, 0, 0, .1);\n    }\n\n    &::after {\n        content: '';\n    }\n}\n\n.border-inside-pill {\n    &::after {\n        border-radius: 100px;\n    }\n\n    &::after {\n        content: '';\n    }\n}\n\n.border-inside-inverse {\n    &::after {\n        border: 2px solid rgba(255, 255, 255, 0.3);\n    }\n\n    &::after {\n        content: '';\n    }\n}\n\n.aspect-1x1 {\n    aspect-ratio: 1/1;\n}\n\n.flex {\n    display: flex;\n}\n\n.inline-flex {\n    display: inline-flex;\n}\n\n.items-center {\n    align-items: center;\n}\n\n.justify-center {\n    justify-content: center;\n}\n\n.overflow-hidden {\n    overflow: hidden;\n}\n\n.px-4 {\n    padding-left: 0.25rem;\n    padding-right: 0.25rem;\n}\n\n.rounded-pill {\n    border-radius: 100px;\n}\n\n.rounded-sm {\n    border-radius: 8px;\n}\n\n.rounded-xs {\n    border-radius: 4px;\n}\n\n\n.bg-dark {\n    background-color: var(--grey-300);\n}\n\n.bg-darker {\n    background-color: var(--grey-400);\n}\n\n.bg-stronger {\n    background-color: var(--grey-900);\n}\n\n.bg-strongest {\n    background-color: var(--black);\n}\n\n.text-accent {\n    color: var(--green-500);\n}\n\n.text-default {\n    color: var(--black);\n}\n\n.\\!no-underline {\n    text-decoration-line: none !important;\n}\n\n.f-ui-01 {\n    font-family: var(--f-ui-01-fontFamily);\n    font-weight: var(--f-ui-01-fontWeight);\n    font-size: var(--f-ui-01-fontSize);\n    line-height: var(--f-ui-01-lineHeight);\n    letter-spacing: var(--f-ui-01-letterSpacing);\n}\n\n.w-32 {\n    width: 2rem;\n}\n\n.w-44 {\n    width: 2.75rem;\n}\n\n.w-\\[54px\\] {\n    width: 54px;\n}";
 var EdsAvatarStyle0 = edsAvatarCss;
 
@@ -3158,8 +3002,8 @@ var EdsAvatarStyle0 = edsAvatarCss;
 class EdsAvatar {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.firstName = undefined;
-        this.lastName = undefined;
+        this.firstName = 'User';
+        this.lastName = 'Avatar';
         this.picture = undefined;
         this.initials = undefined;
         this.color = undefined;
@@ -3212,7 +3056,7 @@ class EdsAvatar {
      * @returns {JSX.Element} The rendered avatar component.
      */
     render() {
-        return (hAsync("div", { key: '3ba716296c615d31ce7f3f41fd57e732adc530bf', class: this.containerClasses }, this.picture ? (hAsync("eds-img", { src: this.picture, width: 54, height: 54, sizes: "120px", alt: `${this.firstName} ${this.lastName}`, lazyload: true, withBg: true })) : (hAsync("abbr", { title: this.computedInitials || `${this.firstName} ${this.lastName}`, class: "!no-underline f-ui-01" }, this.computedInitials))));
+        return (hAsync("div", { key: '47ee5ffd12c0f90c536dea77b3ffa9120d67f37f', class: this.containerClasses }, this.picture ? (hAsync("eds-img", { src: this.picture, width: 54, height: 54, sizes: "120px", alt: `${this.firstName} ${this.lastName}`, lazyload: true, withBg: true })) : (hAsync("abbr", { title: this.computedInitials || `${this.firstName} ${this.lastName}`, class: "!no-underline f-ui-01" }, this.computedInitials))));
     }
     static get style() { return EdsAvatarStyle0; }
     static get cmpMeta() { return {
@@ -3250,7 +3094,7 @@ class EdsBlockBreak {
         this.extraClass = '';
     }
     render() {
-        return hAsync("hr", { key: '58ffdece778da8f323dd130908254690b3f6c8d3', class: `border-softer my-20 inline-block w-full border-t-2 ${this.extraClass}` });
+        return hAsync("hr", { key: '8cb39dda5d7f909b459390fe7e3f86dfd147ba98', class: `border-softer my-20 inline-block w-full border-t-2 ${this.extraClass}` });
     }
     static get style() { return EdsBlockBreakStyle0; }
     static get cmpMeta() { return {
@@ -3317,8 +3161,7 @@ class EdsBreadcrumb {
                 this.parsedItems = Array.isArray(parsed) ? parsed : [];
             }
             catch (e) {
-                // eslint-disable-next-line
-                console.error('Error parsing breadcrumb items:', e);
+                //console.error('Error parsing breadcrumb items:', e);
                 this.parsedItems = [];
             }
         }
@@ -3346,9 +3189,9 @@ class EdsBreadcrumb {
      * It emits a custom event for each `eds-link` element contained within the breadcrumb.
      */
     componentDidLoad() {
-        // Emit context for each eds-link element after the component is fully loaded
-        const links = this.el.shadowRoot.querySelectorAll('eds-link');
-        links.forEach((link) => {
+        var _a;
+        const links = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('eds-link');
+        links === null || links === void 0 ? void 0 : links.forEach((link) => {
             this.emitContext(link);
         });
     }
@@ -3368,54 +3211,49 @@ class EdsBreadcrumb {
         linkElement.dispatchEvent(event);
     }
     /**
-     * Truncates breadcrumb items based on the maxVisibleItems value.
-     * Truncates `label` to 10 characters if `isSmallScreen` is true, except for the last label.
+     * Returns breadcrumb items with potential truncation if there are too many.
+     * It inserts an ellipsis item where necessary.
      */
     getTruncatedItems() {
         const totalItems = this.parsedItems.length;
+        const ellipsis = { label: '...', url: '', isHidden: true };
         if (totalItems > this.maxVisibleItems) {
             const firstItem = this.parsedItems[0];
             const lastItems = this.parsedItems.slice(-2);
-            const ellipsis = { label: '...', url: '', isHidden: true };
             if (this.maxVisibleItems === 3) {
-                return [
-                    this.truncateLabel(firstItem),
-                    ellipsis,
-                    ...lastItems.map((item, index) => (index === lastItems.length - 1 ? item : this.truncateLabel(item)))
-                ];
+                return [firstItem, ellipsis, ...lastItems];
             }
             else if (this.maxVisibleItems === 4) {
                 const middleItem = this.parsedItems[Math.floor(totalItems / 2)];
-                return [
-                    this.truncateLabel(firstItem),
-                    this.truncateLabel(middleItem),
-                    ellipsis,
-                    ...lastItems.map((item, index) => (index === lastItems.length - 1 ? item : this.truncateLabel(item)))
-                ];
+                return [firstItem, middleItem, ellipsis, ...lastItems];
             }
         }
-        return this.parsedItems.map((item, index) => index === this.parsedItems.length - 1 ? item : this.truncateLabel(item));
+        return this.parsedItems;
     }
     /**
-     * Truncates the label of a breadcrumb item to a maximum of 10 characters
-     * if the screen is small.
+     * Helper to determine the display label and full label.
+     * If the label is longer than 15 characters and the item is not the current (last) item,
+     * we display a truncated version but use the full label for aria attributes.
      */
-    truncateLabel(item) {
-        if (item.label.length > 15) {
-            return Object.assign(Object.assign({}, item), { label: `${item.label.slice(0, 15)}...` });
+    getLabels(item, isCurrent) {
+        if (!isCurrent && item.label.length > 15) {
+            return { displayLabel: `${item.label.slice(0, 15)}...`, fullLabel: item.label };
         }
-        return item;
+        return { displayLabel: item.label, fullLabel: item.label };
     }
     /**
      * Render method for the breadcrumb component.
      * It creates a navigation element with an ordered list of breadcrumb links.
-     * The last link is disabled and marked as the current page.
+     * The last link is marked as the current page.
      */
     render() {
         const itemsToRender = this.getTruncatedItems();
-        return (hAsync("nav", { key: 'd66dd18fe856e4a8d82e47117d2de0288a9e3c56', "aria-label": "Breadcrumb" }, hAsync("ol", { key: 'b3a218032b312cb5973c1ca59ab7bedcfc07d676', class: "flex items-center space-x-2" }, itemsToRender.map((item, index) => {
+        return (hAsync("nav", { key: 'd177957e1b3218c21991bbdc9636a8e32befe990', "aria-label": "Breadcrumb" }, hAsync("ol", { key: 'd10336ddee99b9fb84d17e53093c57c6a025982f', class: "flex items-center space-x-2" }, itemsToRender.map((item, index) => {
             const isLast = index === itemsToRender.length - 1;
-            return (hAsync("li", { class: "flex items-center" }, !item.isHidden ? (hAsync("eds-link", { label: item.label, url: item.url, intent: this.intent, current: isLast, "aria-label": item.label, size: "small", "icon-small": "false" })) : (hAsync("span", { class: "truncate px-2 ", "aria-hidden": "true" }, "...")), !isLast && !item.isHidden && (hAsync("eds-icon-wrapper", { icon: "chevron-right", class: "w-20 h-20" }))));
+            return (hAsync("li", { class: "flex items-center" }, !item.isHidden ? ((() => {
+                const { displayLabel, fullLabel } = this.getLabels(item, isLast);
+                return (hAsync("eds-link", Object.assign({ label: displayLabel, url: item.url, intent: this.intent, current: isLast, "aria-label": fullLabel, size: "small", "icon-small": "false" }, (isLast ? { 'aria-current': 'page' } : {}))));
+            })()) : (hAsync("span", { class: "truncate px-2", "aria-hidden": "true" }, "...")), !isLast && !item.isHidden && (hAsync("eds-icon-wrapper", { icon: "chevron-right", class: "w-20 h-20" }))));
         }))));
     }
     get el() { return getElement(this); }
@@ -3608,9 +3446,8 @@ class EdsButton {
                 iconOnly: false
             }
         });
-        this.parentContext = null; // Accepts the entire event detail or null
         this.label = undefined;
-        this.ariaLabel = undefined;
+        this.ariaLabel = 'Button';
         this.elementType = 'button';
         this.intent = 'secondary';
         this.loading = false;
@@ -3623,15 +3460,19 @@ class EdsButton {
         this.extraClass = undefined;
         this.triggerClick = undefined;
     }
-    handleParentContext(event) {
-        if (event.target !== this.el) {
-            // Ignore the event if it's not targeted at this specific instance
-            return;
-        }
-        //console.log(event.detail);
-        this.parentContext = event.detail;
-        event.stopPropagation();
+    /*private parentContext: ParentContextDetail | null = null; // Accepts the entire event detail or null
+  
+    @Listen('parentContext')
+    handleParentContext(event: CustomEvent) {
+      if (event.target !== this.el) {
+        // Ignore the event if it's not targeted at this specific instance
+        return;
+      }
+      //console.log(event.detail);
+      this.parentContext = event.detail;
+      event.stopPropagation();
     }
+    */
     handleClick(event) {
         var _a, _b;
         if (this.disabled) {
@@ -3641,7 +3482,7 @@ class EdsButton {
         }
         sendAnalytics({
             category: 'ui-component',
-            parentContext: this.parentContext,
+            parentContext: null,
             tag: this.el.tagName.toLowerCase(),
             name: ((_a = this.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || ((_b = this.ariaLabel) === null || _b === void 0 ? void 0 : _b.toLowerCase()) || '',
             action: 'click'
@@ -3668,7 +3509,7 @@ class EdsButton {
             show: !this.loading
         });
         const ElementType = this.elementType;
-        return (hAsync(ElementType, { key: 'e571ed0d3e2f4aa262259afea7d44d19b5685be7', "aria-label": this.label || this.ariaLabel || undefined, "aria-disabled": this.elementType === 'button' ? this.disabled : undefined, disabled: this.elementType === 'button' ? this.disabled : undefined, class: `${classes || ''} ${this.extraClass || ''}`, onClick: (event) => this.handleClick(event) }, this.label && hAsync("span", { key: '8928bd512c6fb592ed8d2d25ad46213a5a7f4bf5', class: this.loading ? 'opacity-0' : '' }, this.label), this.loading && (hAsync("span", { key: '8fdb5947ef65c60e5cc47f04d8fbe2f8485aa6bf', class: "absolute inset-0 flex items-center justify-center" }, hAsync("span", { key: '5a6cf5d4f2debc279066cb49fa30da7b66f5532b', class: "loader", style: {
+        return (hAsync(ElementType, { key: '52cda715164eeca59e35b45f617a2d6d1b05a94c', "aria-label": this.label || this.ariaLabel || undefined, "aria-disabled": this.elementType === 'button' ? this.disabled : undefined, disabled: this.elementType === 'button' ? this.disabled : undefined, class: `${classes || ''} ${this.extraClass || ''}`, onClick: (event) => this.handleClick(event) }, this.label && hAsync("span", { key: '866cd0272d9f381b3ecb892e588c860ca8b41051', class: this.loading ? 'opacity-0' : '' }, this.label), this.loading && (hAsync("span", { key: 'fcba01e3404724869c59f4e21bd5db459643d840', class: "absolute inset-0 flex items-center justify-center" }, hAsync("span", { key: 'e44955e5641e757e66eb4961097fb4d60e4def7c', class: "loader", style: {
                 border: `3px solid ${this.intent === 'secondary' ? 'rgba(255, 255, 255, .3)' : 'rgba(0, 0, 0, .3)'}`,
                 borderBottomColor: this.intent === 'secondary' ? '#fff' : '#000'
             } }))), this.icon ? hAsync("eds-icon-wrapper", { class: iconClasses, icon: this.icon }) : null));
@@ -3693,7 +3534,7 @@ class EdsButton {
             "extraClass": [1, "extra-class"],
             "triggerClick": [16]
         },
-        "$listeners$": [[0, "parentContext", "handleParentContext"]],
+        "$listeners$": undefined,
         "$lazyBundleId$": "-",
         "$attrsToReflect$": []
     }; }
@@ -3722,7 +3563,7 @@ class EdsCardDesc {
         return this.truncate && this.truncateLines ? `line-clamp-${this.truncateLines}` : '';
     }
     render() {
-        return (hAsync("p", { key: 'ca38bcc0895d5a0c87fda782ef455e45c4b53263', class: `text-light ${this.descClass}` }, hAsync("span", { key: '3108eec08a760b1db7ce1a7be05b68749f8f930b', class: this.getTruncateClass() }, this.description)));
+        return (hAsync("p", { key: '71495cbd6ef4e7d66c4c22a37f8120624ecf57fb', class: `text-light ${this.descClass}` }, hAsync("span", { key: '8708178f7b48cc1f31aac749f50fe92b72c39ab8', class: this.getTruncateClass() }, this.description)));
     }
     static get style() { return EdsCardDescStyle0; }
     static get cmpMeta() { return {
@@ -3842,7 +3683,7 @@ class EdsCardGeneric {
         });
     }
     render() {
-        return (hAsync("article", { key: '5b498abfc65206fe89c9e54e673a81e1b6ed37d5', class: this.articleClasses(), onClick: () => this.handleClick() }, hAsync("eds-card-title", { key: '61a0c6076957e39ab2a059c8587fc2e716e470bc', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.cardTitle, url: this.url, hierarchy: this.hierarchy }), this.description && (hAsync("eds-card-desc", { key: '6df3c08512acf60e22001867ab5691aa19f67961', class: "mt-8", "truncate-lines": "3", description: this.description })), this.parsedImage ? (hAsync("eds-img", Object.assign({ class: "mt-8" }, this.parsedImage))) : this.avatar || this.shortAbbreviation ? (hAsync("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, hAsync("div", { key: '712193c8afac6744e2512d8b760daf2c850987b9', class: "flex flex-wrap gap-y-4" }, this.parsedTags.map((tag, index) => (hAsync("eds-tag", { key: index, intent: tag.style, label: tag.label })))), ' '));
+        return (hAsync("article", { key: 'dcb7cea87bfb52f8886f7ee3dbc3484d615bc00c', class: this.articleClasses(), onClick: () => this.handleClick() }, hAsync("eds-card-title", { key: '94dd6ff2679ce9ac4d25ec921cd1162b1584e4fd', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.cardTitle, url: this.url, hierarchy: this.hierarchy }), this.description && (hAsync("eds-card-desc", { key: '433c4fe3a518153d89d48af54455286fa415a688', class: "mt-8", "truncate-lines": "3", description: this.description })), this.parsedImage ? (hAsync("eds-img", Object.assign({ class: "mt-8" }, this.parsedImage))) : this.avatar || this.shortAbbreviation ? (hAsync("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, hAsync("div", { key: '97b75afb4b8de1183d4b212054ff556ba3db8fcb', class: "flex flex-wrap gap-y-4" }, this.parsedTags.map((tag, index) => (hAsync("eds-tag", { key: index, intent: tag.style, label: tag.label })))), ' '));
     }
     get el() { return getElement(this); }
     static get style() { return EdsCardGenericStyle0; }
@@ -3926,7 +3767,7 @@ class EdsCardProject {
             this.vertical ? 'flex-col gap-y-16' : 'flex-col gap-x-16 gap-y-12 lg:flex-row'
         ].join(' ');
         const imageClasses = this.vertical ? '' : 'max-w-120 @md:max-w-192 order-first w-full lg:order-last';
-        return (hAsync("article", { key: '6af49754300ded8748ac3f40175e262480054969', class: cardClasses, onClick: (event) => this.handleClick(event) }, hAsync("div", { key: '91e8501312957c44d9dc075f2ec3a9e5a5d425cb', class: `flex grow flex-col ${this.vertical ? 'min-h-156' : ''}` }, hAsync("div", { key: '44e3cf2d67255bb5669b6c721741ed060ba599e7', class: "lg:max-w-[720px]" }, hAsync("eds-card-title", { key: '0cf1d124b975e4d7223bab58db0d5861d348ceb2', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.titleProject, url: this.url }), this.editorialTitle && (hAsync("span", { key: '85e1158691ae876bc0f3c6d0c5557f394ae935cb', class: `block ${this.vertical ? 'f-ui-02' : 'mt-4 f-heading-06'}` }, this.editorialTitle))), this.categoryTitle && (hAsync("div", { key: '9ffdc9f14709600b623c3a5f878b2700864ced79', class: "mt-auto flex items-center gap-x-12 pt-12" }, ((_a = this.categoryTitle) === null || _a === void 0 ? void 0 : _a.length) && hAsync("eds-tag", { key: 'ecc5e55430df355c13420add9969855d1d54c27f', label: this.categoryTitle })))), this.parsedImage && (hAsync("div", { key: '97de7a06a13d9843cb18fe4eb19303f436e2ce16', class: imageClasses }, hAsync("div", { key: '532d3c8252316a68976b4587c3d5b63167c0c598', class: "aspect-1x1 w-full" }, hAsync("eds-img", Object.assign({ key: '37ee3dbbc99ec8c9139b0a89f9c725768eac5f6d', sizes: this.vertical ? this.parsedImage.sizes || '' : '192px' }, this.parsedImage)))))));
+        return (hAsync("article", { key: '98c5dbd033ec05d08965559e00f32d9fe18698ef', class: cardClasses, onClick: (event) => this.handleClick(event) }, hAsync("div", { key: 'e083c43e38c3c24fcd996a90267f7cd92d3651b3', class: `flex grow flex-col ${this.vertical ? 'min-h-156' : ''}` }, hAsync("div", { key: '37de1e46023b533fd8595a3077c4e68c11fb01af', class: "lg:max-w-[720px]" }, hAsync("eds-card-title", { key: 'ee31ae2804d2c17c82e8f4c0c3269ac8254331df', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.titleProject, url: this.url }), this.editorialTitle && (hAsync("span", { key: 'c6f74ba9b5b522f713e25d3339f541efa68cdddd', class: `block ${this.vertical ? 'f-ui-02' : 'mt-4 f-heading-06'}` }, this.editorialTitle))), this.categoryTitle && (hAsync("div", { key: 'ab18e55046777cf4a4f58ebd057641db9b9e0328', class: "mt-auto flex items-center gap-x-12 pt-12" }, ((_a = this.categoryTitle) === null || _a === void 0 ? void 0 : _a.length) && hAsync("eds-tag", { key: '3714ee86a74dce7f33a8f953fd726db349ba9271', label: this.categoryTitle })))), this.parsedImage && (hAsync("div", { key: '2818d15f7ab671b7b2dfb34ec3085b390150f38d', class: imageClasses }, hAsync("div", { key: '5166feef3674631298f699449b956655f38f0db9', class: "aspect-1x1 w-full" }, hAsync("eds-img", Object.assign({ key: '86555a43491da5b2aa3b287e539e603a2c2adaf3', sizes: this.vertical ? this.parsedImage.sizes || '' : '192px' }, this.parsedImage)))))));
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
@@ -4003,7 +3844,7 @@ class EdsCardSection {
      * @returns {JSX.Element} The rendered section containing a list of cards.
      */
     render() {
-        return (hAsync("section", { key: 'da139da167230819e494a6426c2431f209a2e557', class: "w-full" }, hAsync("ul", { key: '3e8affe5c9aee91c4487480c72c437339265101a', class: "grid-layout gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.parsedCards.map((card) => (hAsync("li", { class: `grid-col-span-12 md:grid-col-span-${this.cols} flex flex-col` }, hAsync("eds-card-generic", { cardTitle: card.title, description: card.description, avatar: card.avatar, headingLevel: card.headingLevel, tags: card.tags, url: card.url, bg: card.bg, tiny: card.tiny, image: card.image, withHover: card.withHover })))))));
+        return (hAsync("section", { key: '1f221e1ec7c3cdd0e3aed18f6f930c2c5456c64b', class: "w-full" }, hAsync("ul", { key: '36f984994bb2dc247475c20422f7e6e7da7d058d', class: "grid-layout gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.parsedCards.map((card) => (hAsync("li", { class: `grid-col-span-12 md:grid-col-span-${this.cols} flex flex-col` }, hAsync("eds-card-generic", { cardTitle: card.title, description: card.description, avatar: card.avatar, headingLevel: card.headingLevel, tags: card.tags, url: card.url, bg: card.bg, tiny: card.tiny, image: card.image, withHover: card.withHover })))))));
     }
     static get style() { return EdsCardSectionStyle0; }
     static get cmpMeta() { return {
@@ -4032,7 +3873,7 @@ class EdsCardTags {
         this.tags = [];
     }
     render() {
-        return (hAsync("div", { key: '60a129de62d45736eba0884cc24c9738f3a0f55c', class: "flex flex-wrap gap-y-4" }, this.tags.map((tag, index) => (hAsync("eds-tag", { key: index, intent: this.accent ? 'accent' : 'default', label: tag })))));
+        return (hAsync("div", { key: '272d53abb9be9086881cb2f8e99f7fb7aae1bb59', class: "flex flex-wrap gap-y-4" }, this.tags.map((tag, index) => (hAsync("eds-tag", { key: index, intent: this.accent ? 'accent' : 'default', label: tag })))));
     }
     static get style() { return EdsCardTagsStyle0; }
     static get cmpMeta() { return {
@@ -4096,7 +3937,7 @@ class EdsCardTitle {
     render() {
         //const Tag = this.getTag();
         const Heading = this.headingLevel;
-        return (hAsync(Heading, { key: 'a654161b2c53e944eaefb21be7189a5e0acb06cf', class: this.getTitleClass() }, hAsync("a", { key: '868fd911c1a8c366d726e886bfc7827487013e27', class: "break-words after:absolute after:inset-0 after:z-10 after:content-[''] focus:outline-none", href: this.url, target: this.externalLink ? '_blank' : undefined, rel: this.externalLink ? 'noopener noreferrer' : undefined }, this.cardTitle)));
+        return (hAsync(Heading, { key: 'bb97dc6dd53adda14ef251b2ec32952791438986', class: this.getTitleClass() }, hAsync("a", { key: '37b6ac0668257d27fb3f03a6225a2d48e1fd1f79', class: "break-words after:absolute after:inset-0 after:z-10 after:content-[''] focus:outline-none", href: this.url, target: this.externalLink ? '_blank' : undefined, rel: this.externalLink ? 'noopener noreferrer' : undefined }, this.cardTitle)));
     }
     static get style() { return EdsCardTitleStyle0; }
     static get cmpMeta() { return {
@@ -4184,7 +4025,7 @@ class EdsCardTool {
         });
     }
     render() {
-        return (hAsync("article", { key: 'b46c0464688e45ab29f5b58b6cd2e22ed28e1034', class: `${this.el.tagName.toLowerCase()} ${this.articleClasses()}`, onClick: () => this.handleClick() }, hAsync("eds-card-title", { key: 'a4da791280db14754b445b1a52e33cc9a25f765e', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.cardTitle, url: this.url, "external-link": this.external, hierarchy: this.hierarchy }), this.description && (hAsync("eds-card-desc", { key: '86f7c6c80b83f244ba7d07d820d5793e1dda2933', class: "mt-8", "truncate-lines": "3", description: this.description })), this.image ? (hAsync("eds-img", { src: this.image, alt: "Sample Image", width: 200, height: 150 })) : this.avatar || this.shortAbbreviation ? (hAsync("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, hAsync("div", { key: '46307b57160f908aa7066b2a636c4db38e0e7a8e', class: "flex flex-wrap gap-y-4" }, this.parsedTags.map((tag, index) => (hAsync("eds-tag", { key: index, intent: tag.style, label: tag.label }))))));
+        return (hAsync("article", { key: 'da61b384e966b148cd1f77eec59671bc4d92e259', class: `${this.el.tagName.toLowerCase()} ${this.articleClasses()}`, onClick: () => this.handleClick() }, hAsync("eds-card-title", { key: '00702d032bc25f52b2a2c98255ceb60a1d314f4d', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.cardTitle, url: this.url, "external-link": this.external, hierarchy: this.hierarchy }), this.description && (hAsync("eds-card-desc", { key: 'd2b135ed422fb64f142af71330dc666e2f0c2b1f', class: "mt-8", "truncate-lines": "3", description: this.description })), this.image ? (hAsync("eds-img", { src: this.image, alt: "Sample Image", width: 200, height: 150 })) : this.avatar || this.shortAbbreviation ? (hAsync("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, hAsync("div", { key: '54111e90175754cb0c1f2eb339e86926914ca0e7', class: "flex flex-wrap gap-y-4" }, this.parsedTags.map((tag, index) => (hAsync("eds-tag", { key: index, intent: tag.style, label: tag.label }))))));
     }
     get el() { return getElement(this); }
     static get style() { return EdsCardToolStyle0; }
@@ -4235,7 +4076,7 @@ class EdsCardWrapper {
             this.withHover ? 'effect-shadow hover:shadow-hover cursor-pointer' : '',
             'border-softer effect-focus-within relative flex grow flex-col rounded-lg border-2 p-16'
         ].join(' ');
-        return (hAsync("article", { key: '7c12b1d147f061e189b5dda5d517ec4eae0c3691', class: articleClasses }, hAsync("slot", { key: 'f506bad73ed38ae36931f88f7d7c5f5d94705e4f' }), this.hasSlot('footer') && (hAsync("div", { key: '783f480be269e4a2f61aa8d4396e757fe41bfcc6', class: "mt-auto" }, hAsync("slot", { key: 'f07ddaa2d930518a5c8ac82efab3cb0dd6647bdd', name: "footer" })))));
+        return (hAsync("article", { key: 'f21cc9703011026652765b399e2b87b1ef80d220', class: articleClasses }, hAsync("slot", { key: '9a37adad73d2d49edcc9ca9222d5b188202c5612' }), this.hasSlot('footer') && (hAsync("div", { key: '87addfc052ed4ae33736724fbd8fbc8aca873b4d', class: "mt-auto" }, hAsync("slot", { key: '2e48677f42ac2aa951bc1a82afa9291fea3ddd72', name: "footer" })))));
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
@@ -6660,7 +6501,7 @@ Prism.languages.py = Prism.languages.python;
 const edsCodeBlockCss = ":host{display:block;font-family:var(--font-family, 'Courier New', monospace)}pre[class*=\"language-\"]{white-space:pre-wrap;word-break:break-word;}.language{font-weight:bold;text-transform:uppercase}pre{margin:0;border-radius:8px;color:var(--purple-200);overflow:auto}code{font-family:'Courier New', monospace}.token.keyword{color:var(--purple-500)}.token.string{color:var(--green-500)}.token.function{color:var(--cyan-500)}.token.comment{color:var(--grey-700)}.relative{position:relative}.bg-stronger{background-color:var(--grey-900)}.rounded-sm{border-radius:8px}.rounded-xs{border-radius:4px}.text-inverse{color:var(--white)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.p-0{padding:0rem}.p-12{padding:0.75rem}.p-16{padding:1rem}.p-20{padding:1.25rem}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.pl-8{padding-left:0.5rem}.mb-10{margin-bottom:0.625rem}.mb-12{margin-bottom:0.75rem}.mb-28{margin-bottom:1.75rem}.pb-16{padding-bottom:1rem}.pb-20{padding-bottom:1.25rem}.pb-28{padding-bottom:1.75rem}.pb-60{padding-bottom:3.75rem}.pb-8{padding-bottom:0.5rem}.mt-16{margin-top:1rem}.mt-2{margin-top:0.125rem}.mt-20{margin-top:1.25rem}.mt-28{margin-top:1.75rem}.w-20{width:1.25rem}.h-20{height:1.25rem}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}";
 var EdsCodeBlockStyle0 = edsCodeBlockCss;
 
-//import { sendAnalytics } from '@ebrains/utils';
+//import { sendAnalytics } from '../../utils/analytics';
 /**
  * A component that displays a code block with syntax highlighting.
  *
@@ -6732,11 +6573,11 @@ class EdsCodeBlock {
             return Prism$1.highlight(this.code, Prism$1.languages[this.language], this.language);
         }
         // eslint-disable-next-line
-        console.warn(`Unsupported or missing language: ${this.language}`);
+        //console.warn(`Unsupported or missing language: ${this.language}`);
         return this.code; // Fallback if language is not provided or unsupported
     }
     render() {
-        return (hAsync("div", { key: '00eba9265ee17605f699d1e5606013b68e900b29', class: "relative bg-stronger rounded-sm" }, hAsync("div", { key: '1192584f04de5ff74e91c88597a3360b92053456', class: "text-inverse flex justify-between items-center p-8" }, this.language ? (hAsync("span", { class: "f-ui-03" }, this.language.toUpperCase())) : (hAsync("pre", { class: "bg-stronger pl-8", role: "region", "aria-label": "Code block without language" }, hAsync("code", { innerHTML: this.getHighlightedCode() }))), hAsync("span", { key: '3666b6529a16a8cc64f448527db4ddee08f977a3', "aria-hidden": "true", class: "w-20 h-20 mt-8" }, hAsync("eds-icon-wrapper", { key: 'f222d95a2e548429f6c4de96a7646e3cef1f360f', icon: this.copied ? 'success' : 'copy', onClick: () => this.copyToClipboard() })), hAsync("span", { key: '8c539deda773909c01a41eb04ee51380c0a9c4bb', class: "sr-only" }, "Copy Code")), this.language && (hAsync("pre", { key: '99541dedb32c543da5e780ffee4460333fbb3724', class: `language-${this.language} bg-stronger pl-8 pb-8`, role: "region", "aria-label": `Code block in ${this.language}` }, hAsync("code", { key: '4e6ae6fcfae3de8c1fe5ad9d22309e0c8bee0c2c', innerHTML: this.getHighlightedCode() })))));
+        return (hAsync("div", { key: 'cb379e82bcf71345945b0b88397650ecd4992770', class: "relative bg-stronger rounded-sm" }, hAsync("div", { key: '945046d4fd747cd64a83155b421a897e380cc612', class: "text-inverse flex justify-between items-center p-8" }, this.language ? (hAsync("span", { class: "f-ui-03" }, this.language.toUpperCase())) : (hAsync("pre", { class: "bg-stronger pl-8", role: "region", "aria-label": "Code block without language" }, hAsync("code", { innerHTML: this.getHighlightedCode() }))), hAsync("span", { key: '3f6c7e996101f0bb83fb8c9e6991a205a0b268c8', "aria-hidden": "true", class: "w-20 h-20 mt-8" }, hAsync("eds-icon-wrapper", { key: '8ad9beb61058f29e688f6777233c61f7fb3ccfe8', icon: this.copied ? 'success' : 'copy', onClick: () => this.copyToClipboard() })), hAsync("span", { key: 'a4f9a07906e1c2d9febb7ae789a3eed76dc422e9', class: "sr-only" }, "Copy Code")), this.language && (hAsync("pre", { key: 'e31339126dd3cc885511aaa2bdf6f06f3a113c74', class: `language-${this.language} bg-stronger pl-8 pb-8`, role: "region", "aria-label": `Code block in ${this.language}` }, hAsync("code", { key: '7efacd276f26a00f0f61793f6b8748259e1614b5', innerHTML: this.getHighlightedCode() })))));
     }
     get el() { return getElement(this); }
     static get style() { return EdsCodeBlockStyle0; }
@@ -6786,7 +6627,11 @@ const EdsDocsInstallation = () => (hAsync("div", null,
     hAsync("div", { class: "my-8" },
         hAsync("eds-code-block", { code: "npm install @ebrains/assets", language: "html", "copy-label": "Copy Code" })),
     hAsync("div", { class: "my-8" },
-        hAsync("eds-code-block", { code: "npm install @ebrains/react", language: "html", "copy-label": "Copy Code" }))));
+        hAsync("eds-code-block", { code: "npm install @ebrains/react", language: "html", "copy-label": "Copy Code" })),
+    hAsync("div", { class: "my-8" },
+        hAsync("eds-code-block", { code: "npm install @ebrains/vue", language: "html", "copy-label": "Copy Code" })),
+    hAsync("div", { class: "my-8" },
+        hAsync("eds-code-block", { code: "npm install @ebrains/angular", language: "html", "copy-label": "Copy Code" }))));
 
 const EdsDocsReact = () => (hAsync("div", null,
     hAsync("h2", null, "React Wrappers"),
@@ -6794,7 +6639,7 @@ const EdsDocsReact = () => (hAsync("div", null,
     hAsync("div", { class: "my-8" },
         hAsync("eds-code-block", { code: "npm install @ebrains/react", language: "javascript", "copy-label": "Copy Code" })),
     hAsync("eds-section-core", { "section-title": "Example React App", "heading-level": "h3" },
-        hAsync("eds-code-block", { code: '\nimport { EdsHeader } from "@ebrains/react";\n\ninterface User {\n  firstname: string;\n  lastname: string;\n}\n\ninterface AuthStatus {\n  authenticated: boolean;\n  user: User | null;\n}\n\nimport { useEffect, useState } from "react";\n\nexport function App() {\n\n  const [authStatus, setAuthStatus] = useState<AuthStatus>({\n    authenticated: false,\n    user: null,\n  });\n  \n  const [activeTabIndex, setActiveTabIndex] = useState<number>(0);\n\n  // Use useEffect to render Stencil components dynamically after the component mounts\n  useEffect(() => {\n    \n    const handleAuthStatusChange = (event: CustomEvent) => {\n      console.log(event.detail);\n      setAuthStatus(event.detail); // Set the entire object\n    };\n\n    const handleTabChange = (\n      event: CustomEvent<{ index: number; name: string }>,\n    ) => {\n      console.log(event.detail);\n      setActiveTabIndex(event.detail.index);\n    };\n\n    document.addEventListener(\n      "authStatusChanged",\n      handleAuthStatusChange as EventListener,\n    );\n    document.addEventListener("tabChange", handleTabChange as EventListener);\n\n    return () => {\n      document.removeEventListener(\n        "authStatusChanged",\n        handleAuthStatusChange as EventListener,\n      );\n      document.removeEventListener(\n        "tabChange",\n        handleTabChange as EventListener,\n      );\n    };\n  }, []); // Empty dependency array ensures this runs only once after mounting\n\n  return (\n    <div id="main">\n      <EdsHeader\n        home-url="/"\n        user-feature={false}\n        keycloak-url="http://localhost:8080"\n        keycloak-realm="nigeor-realm"\n        keycloak-client-id="stencil-app"\n        links="[\n            { "label": "About", "url": "/about" },\n            { "label": "Focus Areas", "url": "/focus-areas" },\n            { "label": "News & Events", "url": "/news-and-events" },\n            { "label": "Contact", "url": "/contact" }\n          ]"\n      ></EdsHeader>\n\n      <div> \n        User is{" "} {authStatus.authenticated ? "authenticated" : "not authenticated"}\n      </div>\n      {authStatus.user && <div>Welcome, {authStatus.user.firstname}</div>}\n      </div>\n    </div>\n  );\n}\n\nexport default App;\n', language: "javascript", "copy-label": "Copy Code" }))));
+        hAsync("eds-code-block", { code: '\nimport {\n  EdsHeader,\n  EdsFullscreenMenu,\n  EdsUser\n} from "@ebrains/react";\n\ninterface User {\n  firstname: string;\n  lastname: string;\n  // Add any other properties your user object might have\n}\n\ninterface AuthStatus {\n  authenticated: boolean;\n  user: User | null;\n}\n\nimport { useEffect, useState } from "react";\n\nexport function App() {\n  const [authStatus, setAuthStatus] = useState<AuthStatus>({\n    authenticated: false,\n    user: null,\n  });\n  const [activeTabIndex, setActiveTabIndex] = useState<number>(0);\n\n  // Use useEffect to render Stencil components dynamically after the component mounts\n  useEffect(() => {\n    const handleAuthStatusChange = (event: CustomEvent) => {\n      console.log(event.detail);\n      setAuthStatus(event.detail); // Set the entire object\n    };\n\n    document.addEventListener(\n      "authStatusChanged",\n      handleAuthStatusChange as EventListener,\n    );\n\n    return () => {\n      document.removeEventListener(\n        "authStatusChanged",\n        handleAuthStatusChange as EventListener,\n      );\n    };\n  }, []);\n\n  return (\n    <div>\n      <EdsHeader\n        homeUrl="/"\n        menuEnabled={true}\n        inverseHeader={false}\n        links={[\n          { label: "About", url: "#" },\n          { label: "Focus Areas", url: "#" },\n          { label: "News & Events", url: "#" },\n          { label: "Contact", url: "#" }\n        ]}\n      >\n        <div className="px-16">\n          <EdsUser\n            keycloak-url="http://localhost:8080"\n            keycloak-realm="nigeor-realm"\n            keycloak-client-id="stencil-app"\n          ></EdsUser>\n        </div>\n      </EdsHeader>\n\n      <EdsFullscreenMenu\n        home-url="/"\n        links={[\n          { label: "About", url: "#" },\n          { label: "Focus Areas", url: "#" },\n          { label: "News & Events", url: "#" },\n          { label: "Contact", url: "#" }\n        ]}\n      ></EdsFullscreenMenu>\n      \n      <div>\n        User is{" "}\n        {authStatus.authenticated ? "authenticated" : "not authenticated"}\n      </div>\n      {authStatus.user && <div>Welcome, {authStatus.user.firstname}</div>}\n\n      <div id="main"></div>\n    </div>\n  );\n}\n\nexport default App;\n\n', language: "javascript", "copy-label": "Copy Code" }))));
 
 const EdsDocsVue = () => (hAsync("div", null,
     hAsync("h2", null, "Vue Wrappers"),
@@ -6862,7 +6707,7 @@ class EdsComponentsSection {
         }
     }
     render() {
-        return hAsync("div", { key: 'ce34514ab73daa5baa011bda56a13d6197f8bfd0', class: "container" }, this.renderContent());
+        return hAsync("div", { key: '7e582a0eeafc2687229454532b5a7f66f91c1856', class: "container" }, this.renderContent());
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -6903,7 +6748,7 @@ class EdsDocsContent {
         }
     }
     render() {
-        return hAsync("div", { key: '10708d591c4077e4e1fe94073322f01121253bdb', class: "container" }, this.renderContent());
+        return hAsync("div", { key: 'b140f7650e5e01711dc0778b04af83f9d004efc7', class: "container" }, this.renderContent());
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -6936,7 +6781,7 @@ class EdsDocsPalettes {
         }
     }
     render() {
-        return hAsync("div", { key: '42f0a4598c64661d98054522e88366ec591a2cb3', class: "container" }, this.renderContent());
+        return hAsync("div", { key: 'e8cd71caa7b23cc4dc28c694ecb9f13e3fd4170a', class: "container" }, this.renderContent());
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -7062,14 +6907,14 @@ class EdsDropdown {
      * @returns {JSX.Element} The rendered dropdown component.
      */
     render() {
-        return (hAsync("div", { key: '809cb733330db434f94f854ed4d1ee375f598297', class: "z-focus relative", ref: (el) => (this.dropdownContent = el) }, hAsync("eds-button", { key: 'c80f2930b335708a2a01d06b565673597bd8d926', label: this.label, "aria-label": this.ariaLabel, icon: this.icon, intent: this.intent, onClick: this.handleClick, "aria-expanded": this.isOpen.toString(), "aria-haspopup": "menu" }), hAsync("nav", { key: '7b3ccb2ab29474a4795d5491960e0713aefcd624', class: {
+        return (hAsync("div", { key: '84f4cea78ea1c40c7897a356fe03ac83922fccb8', class: "z-focus relative", ref: (el) => (this.dropdownContent = el) }, hAsync("eds-button", { key: '99dc51632dc82830054502a2d6d77d9fcefe9337', label: this.label, "aria-label": this.ariaLabel, icon: this.icon, intent: this.intent, onClick: this.handleClick, "aria-expanded": this.isOpen.toString(), "aria-haspopup": "menu" }), hAsync("nav", { key: 'a63613a7ecf709fd1d22d77da4b2d286905fef3e', role: "menu", class: {
                 'shadow-small bg-inverse border-softest z-10 z-on-top absolute top-full mt-4 flex flex-col gap-y-4 border-2 p-8': true,
                 'left-4': this.dropdownPos === 'left' && this.dropdownOffset,
                 'left-0': this.dropdownPos === 'left' && !this.dropdownOffset,
                 'right-4': this.dropdownPos === 'right' && this.dropdownOffset,
                 'right-0': this.dropdownPos === 'right' && !this.dropdownOffset,
                 'rounded-lg': this.rounded
-            }, style: { display: this.isOpen ? 'block' : 'none' }, "aria-label": "Dropdown", "aria-hidden": !this.isOpen }, hAsync("slot", { key: 'c514c5dca893708fd1660a61cfeb1607229bbff5' }))));
+            }, style: { display: this.isOpen ? 'block' : 'none' }, "aria-label": "Dropdown", "aria-hidden": !this.isOpen }, hAsync("slot", { key: 'dda70b865ed03dc7ad36a32934587bbcb0a16c1b' }))));
     }
     get host() { return getElement(this); }
     static get style() { return EdsDropdownStyle0; }
@@ -7146,7 +6991,7 @@ class EdsFooter {
      * @returns {JSX.Element} The rendered JSX for the footer component.
      */
     render() {
-        return (hAsync("footer", { key: '8d3d1b5d2acd76f56b2bc12539cb7d277b4dcd7f', class: `${this.extraClass} pb-banner` }, this.social ? (hAsync("div", { class: "border-softest border-t-2 pt-20 pb-28 md:pt-28" }, hAsync("div", { class: "container pb-20 xl:pb-40 " }, hAsync("div", { class: "grid-layout" }, hAsync("div", { class: "grid-col-span-12 lg:grid-col-span-5" }, hAsync("eds-social-networks", { class: "mt-28" })), hAsync("nav", { "aria-label": "Secondary nav", class: "grid-col-span-12 lg:grid-col-span-6 lg:grid-col-start-7 grid-layout mt-28 gap-y-12 lg:mt-0" }))))) : null, hAsync("div", { key: '7d6e3a414ec8e8f8e2b795faf639948f8819f5cb', class: `border-softest ${this.social ? 'border-t-2' : ''} pt-20 pb-28 md:pt-28` }, hAsync("div", { key: '9a475fd146ac0e1bc78c43940ee24ec31212fcb9', class: "container flex flex-wrap items-center gap-20 lg:flex-nowrap" }, hAsync("div", { key: '4b465113cdb882f919fba15e944eb56edbe3c570', class: "flex items-center gap-x-12" }, hAsync("a", { key: '1a8ad1ee5f4dfb77da036b03d0770cba8e5d725e', target: "_blank", rel: "noopener noreferrer", class: "effect-focus focus-visible:rounded-xs flex w-[54px] ml-0", href: "https://research-and-innovation.ec.europa.eu/funding/funding-opportunities/funding-programmes-and-open-calls/horizon-2020_en" }, hAsync("eds-img", { key: '4714ea1a01b7b7eef8b3af0c04ffe793d51c4d5e', width: 54, height: 41, src: "https://www.ebrains.eu/flags/4x3/eu.svg" }))), hAsync("div", { key: 'c4db6bab70e570e337c82136a0d9d6dad01c1039', class: "f-ui-04 text-light order-last w-full lg:order-none lg:w-auto" }, hAsync("p", { key: '0b030a92c12a3a96fe2baacc13ac21f5bd708a50' }, this.fundedBy), hAsync("div", { key: '4714d0ccf0e3912ae330a6f39ed3607caf2b51a4', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap" }, hAsync("span", { key: 'b4bc2d45871c7d1f9de1d6090959b12fd5246f01', class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline" }, "\u00A9 ", this.rightsReserved), this.hasCookiesSetUp && (hAsync("button", { key: '98b56eee7be6bc1558821933cebf2853b3bb68fc', class: "effect-focus !no-underline underline-offset-4 hover:!underline", onClick: () => this.toggleCookiesPopup() }, this.cookiesPreference)))), hAsync("div", { key: 'f4bf4a0c99f3be920dd15f68e6f7e390cd85ecce', class: "ml-auto pl-12" }, this.enableScrollTop ? (hAsync("eds-button", { "aria-label": "Back to top", intent: "ghostInverse", icon: "chevron-up", onClick: this.backToTop })) : null)))));
+        return (hAsync("footer", { key: 'ba6500548e8f719b8670063918c61b391ddb8387', class: `${this.extraClass} pb-banner` }, this.social ? (hAsync("div", { class: "border-softest border-t-2 pt-20 pb-28 md:pt-28" }, hAsync("div", { class: "container pb-20 xl:pb-40 " }, hAsync("div", { class: "grid-layout" }, hAsync("div", { class: "grid-col-span-12 lg:grid-col-span-5" }, hAsync("eds-social-networks", { class: "mt-28" })), hAsync("nav", { "aria-label": "Secondary nav", class: "grid-col-span-12 lg:grid-col-span-6 lg:grid-col-start-7 grid-layout mt-28 gap-y-12 lg:mt-0" }))))) : null, hAsync("div", { key: '1221cca6d40c4de8ed7ceefa84198817bf904630', class: `border-softest ${this.social ? 'border-t-2' : ''} pt-20 pb-28 md:pt-28` }, hAsync("div", { key: 'ad55b938fb2961074822d6bf458f0ea7a15baa84', class: "container flex flex-wrap items-center gap-20 lg:flex-nowrap" }, hAsync("div", { key: '91c13fdd98508a812e5dcfa86056b5adc035623d', class: "flex items-center gap-x-12" }, hAsync("a", { key: '4ddd8715a5cabbff2209f8ceb389900c9eddcd74', target: "_blank", rel: "noopener noreferrer", class: "effect-focus focus-visible:rounded-xs flex w-[54px] ml-0", href: "https://research-and-innovation.ec.europa.eu/funding/funding-opportunities/funding-programmes-and-open-calls/horizon-2020_en" }, hAsync("eds-img", { key: 'df5f16284084d9171cd3d567dd249a0ef98bde79', width: 54, height: 41, src: "https://www.ebrains.eu/flags/4x3/eu.svg" }))), hAsync("div", { key: '0ff4328cc30f06c1a85ffc726d5b6b0dc53e49b9', class: "f-ui-04 text-light order-last w-full lg:order-none lg:w-auto" }, hAsync("p", { key: '2cb2b4f072a141e58c9a2185c9179d475f9690bd' }, this.fundedBy), hAsync("div", { key: 'b31d1e18933fb1be11d8454f9a5301dedc839015', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap" }, hAsync("span", { key: 'aab95785cfb2bc7d490ac9426ef5e421f9418dc9', class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline" }, "\u00A9 ", this.rightsReserved), this.hasCookiesSetUp && (hAsync("button", { key: 'fbd5bf3560faf0ee34d740bda423595c3cd21ad8', class: "effect-focus !no-underline underline-offset-4 hover:!underline", onClick: () => this.toggleCookiesPopup() }, this.cookiesPreference)))), hAsync("div", { key: '0427234b6679ae05b673a5c6efb8447306f61876', class: "ml-auto pl-12" }, this.enableScrollTop ? (hAsync("eds-button", { "aria-label": "Back to top", intent: "ghostInverse", icon: "chevron-up", onClick: this.backToTop })) : null)))));
     }
     static get style() { return EdsFooterStyle0; }
     static get cmpMeta() { return {
@@ -7262,13 +7107,20 @@ class EdsForm {
             this.hasError = Object.keys(newErrors).length > 0;
         };
         this.handleSubmit = async (e) => {
-            var _a;
+            var _a, _b, _c;
             e.preventDefault();
             if (this.isSubmitting) {
                 return;
             }
             this.validateForm();
             if (this.hasError) {
+                sendAnalytics({
+                    category: 'ui-component',
+                    parentContext: null,
+                    tag: this.el.tagName.toLowerCase(),
+                    name: `${(_a = this.submitBtnLabel) === null || _a === void 0 ? void 0 : _a.toLowerCase()}/error` || '',
+                    action: 'click'
+                });
                 this.alertMessage = this.errorMessage;
                 return;
             }
@@ -7289,7 +7141,7 @@ class EdsForm {
                 formData.set('form_url', window.location.href);
             }
             if (this.authUser) {
-                formData.set('form_user', (_a = this.authUser) === null || _a === void 0 ? void 0 : _a.email);
+                formData.set('form_user', (_b = this.authUser) === null || _b === void 0 ? void 0 : _b.email);
             }
             /*const formDataObject = Object.fromEntries((formData as any).entries());
             console.log(JSON.stringify(formDataObject));*/
@@ -7315,6 +7167,13 @@ class EdsForm {
                 //this.alertMessage = data.message || this.successMessage;
                 toast.show(data.message || this.successMessage, 'success');
                 this.formEl.reset();
+                sendAnalytics({
+                    category: 'ui-component',
+                    parentContext: null,
+                    tag: this.el.tagName.toLowerCase(),
+                    name: `${(_c = this.submitBtnLabel) === null || _c === void 0 ? void 0 : _c.toLowerCase()}/success` || '',
+                    action: 'click'
+                });
             }
             catch (err) {
                 this.hasError = true;
@@ -7355,20 +7214,21 @@ class EdsForm {
     componentDidLoad() {
         this.parseFields(this.fields);
         // Emit context for each eds-link element after the component is fully loaded
-        const links = this.el.querySelectorAll('eds-button');
+        /*const links = this.el.querySelectorAll('eds-button');
         links.forEach((link) => {
-            this.emitContext(link);
-        });
-    }
-    emitContext(linkElement) {
-        const event = new CustomEvent('parentContext', {
-            detail: {
-                componentName: this.el.tagName.toLowerCase(),
-                identifier: null
-            }
-        });
-        linkElement.dispatchEvent(event);
+          this.emitContext(link);
+        });*/
     }
+    /*emitContext(linkElement: HTMLElement) {
+      const event = new CustomEvent<ParentContextDetail>('parentContext', {
+        detail: {
+          componentName: this.el.tagName.toLowerCase(),
+          identifier: null
+        }
+      });
+  
+      linkElement.dispatchEvent(event);
+    }*/
     // Visibility helper
     isFieldVisible(field) {
         if (!field.condition) {
@@ -7533,13 +7393,13 @@ class EdsForm {
     render() {
         const hiddenFields = this.parsedFields.filter((field) => field.type === 'hidden');
         const otherFields = this.parsedFields.filter((field) => field.type !== 'hidden');
-        return (hAsync("form", { key: '0a106caa8aa9f056b55acf6fecfbc7090c4411d2', ref: (el) => (this.formEl = el), enctype: "multipart/form-data", autocomplete: "on", method: "post", onSubmit: this.handleSubmit }, hAsync("div", { key: '3478d82640378d9a1c0c09394453e2118b1b3ca9' }, hAsync("slot", { key: '9bc37f54c03b2b0f831da917b6ce6bab2ec11084' }), hiddenFields.map((field, index) => (hAsync("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), otherFields.map((field, index) => {
+        return (hAsync("form", { key: '3d4ae34d48c0551f9de6dacb50ceee15b487b5de', ref: (el) => (this.formEl = el), enctype: "multipart/form-data", autocomplete: "on", method: "post", onSubmit: this.handleSubmit }, hAsync("div", { key: '344c56dcba3de5a1b55255d794a78fb0f19d04b5' }, hAsync("slot", { key: '3ca6d203458d67fa66840fac55f94d71acc2ee4d' }), hiddenFields.map((field, index) => (hAsync("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), otherFields.map((field, index) => {
             var _a, _b;
             if (!this.isFieldVisible(field)) {
                 return null;
             }
             return (hAsync("eds-input-field", { key: index, name: field.name, id: `${this.name}_${field.name}`, label: field.label, type: field.type, icon: field.icon || null, required: field.required, maxLength: field.maxlength, hint: field.hint, error: ((_a = this.errors[field.name]) === null || _a === void 0 ? void 0 : _a.length) > 0, errorMessage: (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br />'), onInput: (e) => this.handleChange(e, field), class: index > 0 ? 'mt-20' : '', options: field.options }));
-        })), this.submitBtn && (hAsync("div", { key: 'ca221e8c5c18cf4a107581736728f84cea7831d0', class: "mt-20" }, hAsync("eds-button", { key: 'eef3cf052beb62703c1df74d142650194d60c501', intent: "primary", label: this.submitBtnLabel, disabled: this.isSubmitting || (this.coupleAuth && !this.isAuthenticated), loading: this.isSubmitting, onClick: (e) => this.handleSubmit(e) }), this.coupleAuth && !this.isAuthenticated ? (hAsync("p", { class: "f-ui-05 text-lighter mt-8 ml-8" }, this.submitBtnHintMessage)) : null)), this.alertMessage && (this.formSubmitted || this.hasError) && (hAsync("div", { key: '69861c8776b99e26a08585a5a8c893c85a2d9999', class: "mt-20" }, hAsync("eds-alert", { key: 'b4d225d8efcbe6cde95789c367f0ecf94f217c9c', message: this.alertMessage, intent: this.hasError ? 'error' : 'success', direction: "horizontal" })))));
+        })), this.submitBtn && (hAsync("div", { key: '22915285f3522f6d260e358eea964c59a9557a55', class: "mt-20" }, hAsync("eds-button", { key: '9e2191ba8cc49d7ac2a6588c0fa468214773c791', intent: "primary", label: this.submitBtnLabel, disabled: this.isSubmitting || (this.coupleAuth && !this.isAuthenticated), loading: this.isSubmitting, onClick: (e) => this.handleSubmit(e) }), this.coupleAuth && !this.isAuthenticated ? (hAsync("p", { class: "f-ui-05 text-lighter mt-8 ml-8" }, this.submitBtnHintMessage)) : null)), this.alertMessage && (this.formSubmitted || this.hasError) && (hAsync("div", { key: '8045c3dff26286a6735157b82afd56ec9001ba14', class: "mt-20" }, hAsync("eds-alert", { key: 'dc8c8f74e8aada9023f110bb862afee1fb629601', message: this.alertMessage, intent: this.hasError ? 'error' : 'success', direction: "horizontal" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -7669,7 +7529,7 @@ class EdsFrame {
         return `${this.storybookUrl}/iframe.html?id=${this.storyPath}&viewMode=story`;
     }
     render() {
-        return (hAsync("div", { key: '0c3a43efc1a125af5999af88c4eb071b5c3bc6c5', class: this.articleClasses() }, hAsync("div", { key: '32303d5e2c2f3b01efe1ceaf828346f873bea6b6', class: "effect-height flex items-center justify-between py-8 px-12" }, hAsync("span", { key: '75f7f6750413dad4af2ea62c12ffb994491d5d01', class: "f-ui-02" }, this.frameLabel), !this.iframeError ? (hAsync("eds-link", { label: this.urlLabel, url: this.storyLink, intent: this.intent, class: "ml-auto", external: true, disabled: false, icon: "arrow-diagonal" })) : null), hAsync("div", { key: '1fd99f6eda026814910b0cd93635616b7d3ffe09', class: "border-softer border-t-2" }, this.iframeError ? (hAsync("div", { class: "container ml-8 mr-8 mt-16" }, this.errorMessage)) : (hAsync("iframe", { src: this.frameSrc, width: "100%", height: this.getFrameHeight(), title: this.frameLabel, frameBorder: "0", allowFullScreen: true })))));
+        return (hAsync("div", { key: '20786dd40414d29f98d496e29720bd78b9d7cf8e', class: this.articleClasses() }, hAsync("div", { key: '208612330c9d2872c68aeb310e164c8a915a51ef', class: "effect-height flex items-center justify-between py-8 px-12" }, hAsync("span", { key: 'ada2a40384ffaffadc8887580aa6184422008a68', class: "f-ui-02" }, this.frameLabel), !this.iframeError ? (hAsync("eds-link", { label: this.urlLabel, url: this.storyLink, intent: this.intent, class: "ml-auto", external: true, disabled: false, icon: "arrow-diagonal" })) : null), hAsync("div", { key: '26a5ae1c81b60b05b6f4859ffa4dbd13bb2557f3', class: "border-softer border-t-2" }, this.iframeError ? (hAsync("div", { class: "container ml-8 mr-8 mt-16" }, this.errorMessage)) : (hAsync("iframe", { src: this.frameSrc, width: "100%", height: this.getFrameHeight(), title: this.frameLabel, frameBorder: "0", allowFullScreen: true })))));
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
@@ -7835,11 +7695,7 @@ class EdsHeader {
         this.homeUrl = '/';
         this.links = undefined;
         this.inverseHeader = false;
-        this.userFeature = false;
         this.menuEnabled = false;
-        this.keycloakUrl = undefined;
-        this.keycloakRealm = undefined;
-        this.keycloakClientId = undefined;
         this.isMenuOpen = false;
         this.isUserMenuOpen = false;
         this.isAuthenticated = false;
@@ -7912,8 +7768,8 @@ class EdsHeader {
         return [];
     }
     render() {
-        return (hAsync("header", { key: 'b16e5e84ba7565ebf4ea5892a9a1af84fc94769d', class: `flex items-center justify-between relative z-10
-       ${this.inverseHeader ? 'text-inverse bg-strongest' : 'text-default bg-dark'}` }, hAsync("div", { key: '00206a2714dedfe205151002cc10c430e75814fb', class: "mr-auto w-[200px] h-[85px]" }, hAsync("eds-logo", { key: '25fc6207d61bb4cc06877dd0b15bf56392b50255', type: this.inverseHeader ? 'color-white' : 'color', href: this.homeUrl })), this.parsedLinks && (hAsync("nav", { key: '8d1ee2947db26e5acb556da845fe1b811a8d18b2', class: "absolute left-1/2 top-1/2 grow -translate-x-1/2 -translate-y-1/2 justify-center hidden md:flex" }, hAsync("ul", { key: '5c70e48f3a617a6abe402659b37741e657440cbc', class: "flex gap-x-2" }, this.parsedLinks.map((link) => (hAsync("eds-link", { label: link.label, "aria-label": link.label, url: link.url, intent: "ghost", size: "small", icon: link.icon, external: link.external, "extra-class": "after:effect-opacity aria-current-page:bg-darker whitespace-nowrap !text-current after:!border-transparent after:opacity-0 hover:after:!border-transparent hover:after:opacity-100" })))))), hAsync("slot", { key: '773b60e90ecfe336fede86ea6e3b0ec2fd10bd72' }), this.userFeature ? (hAsync("div", { class: "px-16" }, hAsync("eds-user", { "keycloak-url": this.keycloakUrl, "keycloak-realm": this.keycloakRealm, "keycloak-client-id": this.keycloakClientId }))) : null, this.menuEnabled ? (hAsync("div", { class: "md:hidden flex overflow-hidden px-16" }, hAsync("eds-button", { "aria-label": "Menu", intent: "ghostInverse", icon: "menu", size: "small", onClick: () => this.handleToggleMenu() }))) : null));
+        return (hAsync("header", { key: 'ce002da29cee5446f64694ba93ec67f89c180ac4', class: `flex items-center justify-between relative z-10
+       ${this.inverseHeader ? 'text-inverse bg-strongest' : 'text-default bg-dark'}` }, hAsync("div", { key: '579593f3180b27d129fd9ca380d6b74d0efcbd1e', class: "mr-auto w-[200px] h-[85px]" }, hAsync("eds-logo", { key: 'c72d87a2ff7cd1ea2b0390cd364e376d1f52c67f', type: this.inverseHeader ? 'color-white' : 'color', href: this.homeUrl })), this.parsedLinks && (hAsync("nav", { key: '6755e304c48624049af8426d4d9b19d0cb156dda', class: "absolute left-1/2 top-1/2 grow -translate-x-1/2 -translate-y-1/2 justify-center hidden md:flex" }, hAsync("ul", { key: '390f9b6c6c950719598eec88b4befb4224cb0c03', class: "flex gap-x-2" }, this.parsedLinks.map((link) => (hAsync("eds-link", { label: link.label, "aria-label": link.label, url: link.url, intent: "ghost", size: "small", icon: link.icon, external: link.external, "extra-class": "after:effect-opacity aria-current-page:bg-darker whitespace-nowrap !text-current after:!border-transparent after:opacity-0 hover:after:!border-transparent hover:after:opacity-100" })))))), hAsync("slot", { key: 'bc7b093739cc3058e4eb3d4eddbb0b49856b5710' }), this.menuEnabled ? (hAsync("div", { class: "md:hidden flex overflow-hidden px-16" }, hAsync("eds-button", { "aria-label": "Menu", intent: "ghostInverse", icon: "menu", size: "small", onClick: () => this.handleToggleMenu() }))) : null));
     }
     get hostEl() { return getElement(this); }
     static get style() { return EdsHeaderStyle0; }
@@ -7924,11 +7780,7 @@ class EdsHeader {
             "homeUrl": [513, "home-url"],
             "links": [1],
             "inverseHeader": [4, "inverse-header"],
-            "userFeature": [4, "user-feature"],
             "menuEnabled": [4, "menu-enabled"],
-            "keycloakUrl": [1, "keycloak-url"],
-            "keycloakRealm": [1, "keycloak-realm"],
-            "keycloakClientId": [1, "keycloak-client-id"],
             "isMenuOpen": [32],
             "isUserMenuOpen": [32],
             "isAuthenticated": [32]
@@ -9746,7 +9598,7 @@ class EdsIconArrowDiagonal {
         this.addClass = '';
     }
     render() {
-        return hAsync("span", { key: '08ebdce5cfbe75bf4bfab8f72493e2178be55c3c', class: this.addClass, innerHTML: arrowDiagonal });
+        return hAsync("span", { key: 'd85a4d425e0c255efe4763d4a13f13b6ff727c2c', class: this.addClass, innerHTML: arrowDiagonal });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -9769,7 +9621,7 @@ class EdsIconArrowRight {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '6d704324784e6c3d9c221dcaf83bd86a8a6a94ab', class: this.class, innerHTML: arrowRight });
+        return hAsync("span", { key: '4a2b33b86753acab8270a45c7b250603b128bc88', class: this.class, innerHTML: arrowRight });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -9792,7 +9644,7 @@ class EdsIconBluesky {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '8b5d4cfeedf6d7e9bea48d7ba892527d484c858d', class: this.class, innerHTML: bluesky });
+        return hAsync("span", { key: '845a157678b9d059b2c9bd8a6265d3a62f33c31a', class: this.class, innerHTML: bluesky });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -9815,7 +9667,7 @@ class EdsIconChevronDown {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: 'bc01e9e10033245e02403b6b919911018eef9919', class: this.class, innerHTML: chevronDown });
+        return hAsync("span", { key: 'fa8022d27b91e909d4cd5522c6d0406be698a412', class: this.class, innerHTML: chevronDown });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -9838,7 +9690,7 @@ class EdsIconChevronLeft {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: 'd74bd0b2ddfd5bd61c97309aebb71d7c29f0cf43', class: this.class, innerHTML: chevronLeft });
+        return hAsync("span", { key: 'c723d7f1bbd596063ae7e66123b8038af5320a54', class: this.class, innerHTML: chevronLeft });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -9861,7 +9713,7 @@ class EdsIconChevronRight {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '998491aed74bd3edd1fb8545f85ab52cf2703b3f', class: this.class, innerHTML: chevronRight });
+        return hAsync("span", { key: 'f770cd9151077e8708c76d2082613c65a20c420f', class: this.class, innerHTML: chevronRight });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -9884,7 +9736,7 @@ class EdsIconChevronUp {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: 'd0723afa766fc6dac454ec84602bd50ba4e49950', class: this.class, innerHTML: chevronUp });
+        return hAsync("span", { key: '40d18a840277f2aba5d314a36fca5c1f8fd99cc6', class: this.class, innerHTML: chevronUp });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -9907,7 +9759,7 @@ class EdsIconClose {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '365ad476b1be9c708e73598cad1dd42a908fa1cd', class: this.class, innerHTML: close });
+        return hAsync("span", { key: '947f6615e8ee155be98b379a9c771cc0d453becd', class: this.class, innerHTML: close });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -9930,7 +9782,7 @@ class EdsIconCopy {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '770c34b98ec0e0a7e16de4d7b5b41b4afec9911e', class: this.class, innerHTML: copy });
+        return hAsync("span", { key: '1e23d4493d5a1d07bc794da20cc4e445a87d56b0', class: this.class, innerHTML: copy });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -9953,7 +9805,7 @@ class EdsIconEu {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: 'cc6e5f7d7333ff7ed4a6f716e0ee90806fa782f9', class: this.class, innerHTML: euSvg });
+        return hAsync("span", { key: '14254e1b9d43562e6f3f943de22aa8dd4d89a044', class: this.class, innerHTML: euSvg });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -9976,7 +9828,7 @@ class EdsIconFacebook {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: 'f859db4f8b6679e138e6d72d1d0f5e5bd1bcf997', class: this.class, innerHTML: facebook });
+        return hAsync("span", { key: '902598891dfe926f92ce5d30dc135896c6eccd43', class: this.class, innerHTML: facebook });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -9999,7 +9851,7 @@ class EdsIconGitlab {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '5a91cfc15c4dec2b50ce57fb0f1d6cc8f57b03e8', class: this.class, innerHTML: gitlabBlack });
+        return hAsync("span", { key: '128f9265dfc1aee95586ba0a3fd20dd131678893', class: this.class, innerHTML: gitlabBlack });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10022,7 +9874,7 @@ class EdsIconLinkedin {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: 'b8e0661a74a92c72b6db109cb48db12da48dcf92', class: this.class, innerHTML: linkedin });
+        return hAsync("span", { key: '0f9675a371ca7bb460882c04bf2bb0c103273a0d', class: this.class, innerHTML: linkedin });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10045,7 +9897,7 @@ class EdsIconLoader {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '260c4eeb69ff79d943571c1461346b9019ea513a', class: this.class, innerHTML: loader });
+        return hAsync("span", { key: 'f11c60068baa2d2398056b3d7f04129d9deb4517', class: this.class, innerHTML: loader });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10068,7 +9920,7 @@ class EdsIconMastodon {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '902598891dfe926f92ce5d30dc135896c6eccd43', class: this.class, innerHTML: mastodon });
+        return hAsync("span", { key: '1f68e5d0b6f8455f40bf94f6095eceff00b7887e', class: this.class, innerHTML: mastodon });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10091,7 +9943,7 @@ class EdsIconMenu {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '9d15be28017eb074a69846a2a639861de997130b', class: this.class, innerHTML: menu });
+        return hAsync("span", { key: '0084602c8e870b70caa66479f71bed3bd0cce94e', class: this.class, innerHTML: menu });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10114,7 +9966,7 @@ class EdsIconMore {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '0f7d61104f8f2b0a83c5b60a6ce81c6ab91ecb9c', class: this.class, innerHTML: more });
+        return hAsync("span", { key: 'dd9df55fa03c1b27f2f931c7d07ccc69ee940ff4', class: this.class, innerHTML: more });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10137,7 +9989,7 @@ class EdsIconSearch {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '6795d973d3a1fff27c2fd6181235d0284abaf3b7', class: this.class, innerHTML: search });
+        return hAsync("span", { key: '42acc730afd956c2884b0789b3ea37ccf323630b', class: this.class, innerHTML: search });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10160,7 +10012,7 @@ class EdsIconSuccess {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '15e428fd72496249adfe372847d5c683cd3412b1', class: this.class, innerHTML: success });
+        return hAsync("span", { key: '8b5d4cfeedf6d7e9bea48d7ba892527d484c858d', class: this.class, innerHTML: success });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10183,7 +10035,7 @@ class EdsIconTwitter {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: 'cfa2d903e79d5a17fb7511e078c0d26bd6d3abd6', class: this.class, innerHTML: twitter });
+        return hAsync("span", { key: 'a06ab2e79a1ec7603244ec09649ccc2c9ea1950c', class: this.class, innerHTML: twitter });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10206,7 +10058,7 @@ class EdsIconUser {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: 'dc06f1a54b9542cb2c0165fb3bdff960ecd81cc0', class: this.class, innerHTML: user });
+        return hAsync("span", { key: 'cb31d12146ff577195650b502f51005092404a30', class: this.class, innerHTML: user });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10285,7 +10137,7 @@ class EdsIconYoutube {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: 'ecd12a21c5797f93f7d8abe67803b27862967b2f', class: this.class, innerHTML: youtube });
+        return hAsync("span", { key: '4eba69bfec926b7a3490feee15b5947a8ab8a7b9', class: this.class, innerHTML: youtube });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10329,11 +10181,16 @@ class EdsImg {
             this.loaded = true;
             this.showBg = false;
         };
+        // On error, remove the background effect so users know the image failed to load.
+        this.handleError = () => {
+            this.loaded = true;
+            this.showBg = false;
+        };
         this.handleTransitionEnd = () => {
             this.showBg = false;
         };
         this.src = undefined;
-        this.alt = undefined;
+        this.alt = '';
         this.width = undefined;
         this.height = undefined;
         this.srcset = undefined;
@@ -10356,14 +10213,14 @@ class EdsImg {
             imgOpts['loading'] = 'lazy';
             imgOpts['decoding'] = 'async';
         }
-        return (hAsync("div", { key: 'fde8a77bb251e3be2ec3a42b8d83f585eae65b2c', class: {
+        return (hAsync("div", { key: '733be8df2b9e3db1b5b13aaa47c16a9c26f345d7', class: {
                 'items-center justify-center': true,
                 'effect-bg-pattern': this.lazyload && this.showBg
-            } }, hAsync("picture", { key: 'e512cbd9134f14f5418856cf451cddfb93ca1760' }, this.formats.map((format) => (hAsync("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), hAsync("img", Object.assign({ key: '98339035b8d055d8bb8de654ce1f4ba410ef3865', ref: (el) => (this.img = el), class: {
+            } }, hAsync("picture", { key: '3a6a0289bcf8a2851278eb6c6fbe64bfe7004014' }, this.formats.map((format) => (hAsync("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), hAsync("img", Object.assign({ key: 'b5d92e20a28f67a13d926f081b5f85dbd981ff78', ref: (el) => (this.img = el), class: {
                 'effect-opacity object-cover object-center': true,
                 'opacity-100': this.loaded,
                 'opacity-0': !this.loaded
-            }, width: this.width, height: this.height, sizes: this.sizes, src: this.src, srcSet: this.srcset, alt: this.alt }, imgOpts, { onLoad: this.handleLoad, onTransitionEnd: this.handleTransitionEnd })))));
+            }, width: this.width, height: this.height, sizes: this.sizes, src: this.src, srcSet: this.srcset, alt: this.alt }, imgOpts, { onLoad: this.handleLoad, onError: this.handleError, onTransitionEnd: this.handleTransitionEnd })))));
     }
     get imgElement() { return getElement(this); }
     static get style() { return EdsImgStyle0; }
@@ -10440,12 +10297,12 @@ class EdsInput {
     render() {
         const withIcon = !!this.icon;
         const describedBy = this.hasMessage || this.error ? `${this.name}-error` : '';
-        return (hAsync("div", { key: 'aed6c5b0bc70ed712c74041b1bafce771c0da2d3', class: "relative flex items-center" }, this.type === 'textarea' ? (hAsync("textarea", { id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, class: `min-h-80 input input-textarea ${withIcon ? 'input-with-icon' : ''} ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput })) : this.type === 'select' ? (hAsync("select", { id: this.inputId || this.name, name: this.name, required: this.required, disabled: this.disabled, class: `input input-select ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, onInput: this.handleInput, onChange: this.handleInput }, this.options.map((option) => (hAsync("option", { value: option.value, selected: option.value === this.innerVal, key: option.value }, option.label))))) : (hAsync("input", { id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, type: this.type, checked: ['radio', 'checkbox'].includes(this.type) ? this.checked : undefined, class: `
+        return (hAsync("div", { key: 'e67c7566fe5a1574d6ff0fff61178b163c5881f9', class: "relative flex items-center" }, this.type === 'textarea' ? (hAsync("textarea", { id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, class: `min-h-80 input input-textarea ${withIcon ? 'input-with-icon' : ''} ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput })) : this.type === 'select' ? (hAsync("select", { id: this.inputId || this.name, name: this.name, required: this.required, disabled: this.disabled, class: `input input-select ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, onInput: this.handleInput, onChange: this.handleInput }, this.options.map((option) => (hAsync("option", { value: option.value, selected: option.value === this.innerVal, key: option.value }, option.label))))) : (hAsync("input", { id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, type: this.type, checked: ['radio', 'checkbox'].includes(this.type) ? this.checked : undefined, class: `
               ${this.extraClass || ''} 
               input ${this.type === 'radio' ? 'input-radio' : this.type === 'checkbox' ? 'input-checkbox' : ''}
               ${withIcon && this.type !== 'radio' && this.type !== 'checkbox' ? 'input-icon pl-36' : ''} 
               ${this.error ? 'input-error' : ''}
-              `, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput })), this.maxLength && this.type === 'textarea' && (hAsync("span", { key: '2a95bcd05820c60e428c9e5de3cc2c3fc6ceb3db', class: `input-counter f-ui-05 absolute bottom-8 right-8 ${this.maxLengthReached ? 'input-counter-error' : ''}` }, this.maxLength)), this.icon && (hAsync("eds-icon-wrapper", { key: 'd20b1b17f45c77e1e7ad63ca5cb12db777074601', class: `absolute top-1/2 left-[4px] -translate-y-1/2 ${this.disabled ? 'text-lightest' : 'text-lightest'}`, icon: this.icon }))));
+              `, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput })), this.maxLength && this.type === 'textarea' && (hAsync("span", { key: '35bc563715e65073898259d12b4ef2c467b14439', class: `input-counter f-ui-05 absolute bottom-8 right-8 ${this.maxLengthReached ? 'input-counter-error' : ''}` }, this.maxLength)), this.icon && (hAsync("eds-icon-wrapper", { key: '54cab667a1b8b1bb906c2359cdbd2fb23171ba8b', class: `absolute top-1/2 left-[4px] -translate-y-1/2 ${this.disabled ? 'text-lightest' : 'text-lightest'}`, icon: this.icon }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -10546,11 +10403,11 @@ class EdsInputField {
             icon: this.icon,
             checked: this.checked
         };
-        return (hAsync("div", { key: 'e1e4c68a8ca48b9526217b1c1eeaecbf3c73a652', class: "space-y-8" }, this.type === 'checkbox' || this.type === 'radio' ? (this.parsedOptions.length > 0 ? (hAsync("fieldset", { class: "space-y-4 mt-8" }, hAsync("div", { class: "flex justify-between" }, this.label && (hAsync("eds-input-label", { name: this.inputId || this.name, label: this.label, required: this.required })), this.hint && hAsync("p", { class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint)), this.parsedOptions.map((option) => (hAsync("div", { class: "flex items-center gap-x-2", key: option.value }, hAsync("eds-input", Object.assign({}, inputOpts, { value: option.value })), hAsync("eds-input-label", { name: `${this.name}-${option.value}`, label: option.label })))))) : (hAsync("div", { class: "flex items-center gap-x-8" }, hAsync("eds-input", Object.assign({}, inputOpts)), this.label && (hAsync("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required }))))) : (hAsync("div", null, hAsync("div", { class: "flex justify-between" }, this.label && (hAsync("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required })), this.hint && hAsync("p", { class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint)), this.type === 'select' ? (hAsync("eds-input-select", Object.assign({}, inputOpts, { options: this.parsedOptions }))) : this.type === 'file' ? (hAsync("input", { type: "file", id: this.inputId || this.name, name: this.name, onChange: this.onChange, disabled: this.disabled, required: this.required })) : this.type === 'search' ? (hAsync("eds-input-search", { name: "search-box" })) : this.type === 'range' ? ((() => {
+        return (hAsync("div", { key: '6c2e228bc3940212ad4df6ed99bdd69b99342afb', class: "space-y-8" }, this.type === 'checkbox' || this.type === 'radio' ? (this.parsedOptions.length > 0 ? (hAsync("fieldset", { class: "space-y-4 mt-8" }, hAsync("div", { class: "flex justify-between" }, this.label && (hAsync("eds-input-label", { name: this.inputId || this.name, label: this.label, required: this.required })), this.hint && (hAsync("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint))), this.parsedOptions.map((option) => (hAsync("div", { class: "flex items-center gap-x-2", key: option.value }, hAsync("eds-input", Object.assign({}, inputOpts, { value: option.value })), hAsync("eds-input-label", { name: `${this.name}-${option.value}`, label: option.label })))))) : (hAsync("div", { class: "flex items-center gap-x-8" }, hAsync("eds-input", Object.assign({}, inputOpts)), this.label && (hAsync("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required }))))) : (hAsync("div", null, hAsync("div", { class: "flex justify-between" }, this.label && (hAsync("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required })), this.hint && (hAsync("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint))), this.type === 'select' ? (hAsync("eds-input-select", Object.assign({}, inputOpts, { options: this.parsedOptions }))) : this.type === 'file' ? (hAsync("input", { type: "file", id: this.inputId || this.name, name: this.name, onChange: this.onChange, disabled: this.disabled, required: this.required })) : this.type === 'search' ? (hAsync("eds-input-search", { name: "search-box" })) : this.type === 'range' ? ((() => {
             var _a, _b, _c;
             const opt = this.parsedOptions;
             return (hAsync("eds-input-range", { min: (_a = opt[0]) === null || _a === void 0 ? void 0 : _a.value, max: (_b = opt[1]) === null || _b === void 0 ? void 0 : _b.value, step: (_c = opt[2]) === null || _c === void 0 ? void 0 : _c.value, name: "range-slider" }));
-        })()) : (hAsync("eds-input", Object.assign({}, inputOpts))))), hAsync("eds-input-footer", { key: '7c283d5b193f179cdefbb011862358e3c92685c5', name: this.name, message: this.message, "error-message": this.errorMessage, error: this.error, link: this.link })));
+        })()) : (hAsync("eds-input", Object.assign({}, inputOpts))))), hAsync("eds-input-footer", { key: '16f2dd9061fc779b081c973e25d1bf9fb26fcf8b', id: `${this.name}-footer`, name: this.name, message: this.message, "error-message": this.errorMessage, error: this.error, link: this.link })));
     }
     static get style() { return EdsInputFieldStyle0; }
     static get cmpMeta() { return {
@@ -10596,7 +10453,7 @@ class EdsInputFooter {
         this.link = undefined;
     }
     render() {
-        return (hAsync("div", { key: '9ce8da179446c0302754f1285b3733d928da042f', class: "space-y-4" }, this.error && this.errorMessage && (hAsync("div", { key: 'aab7e8ded78e48864b2245603c3987a6ec3f3959', id: `error_${this.name}`, class: "text-error flex items-center" }, hAsync("eds-icon-wrapper", { key: '152a06328c6cbb40f0d52310ac3ce761de21a26c', icon: "warning" }), hAsync("p", { key: '658825aa4649ad83a150a0dc92d37f1b078de4c3', class: "f-ui-04 ml-4", innerHTML: this.errorMessage }))), this.message && hAsync("p", { key: '378ae9ef876e087f66302547958af4543262a441', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (hAsync("a", { key: 'cd396f03bdbd12a47544a44de17cfce35b8d206a', href: this.link.url, class: "f-ui-05 effect-color hover:text-lighter underline underline-offset-4" }, this.link.label))));
+        return (hAsync("div", { key: 'c088f6c9bf4c3ca1efce1a1ff41ece8d4f8a6756', class: "space-y-4" }, this.error && this.errorMessage && (hAsync("div", { key: '7404a329f2b5da7f9444f986178c5e4dbbe838ad', id: `error_${this.name}`, class: "text-error flex items-center" }, hAsync("eds-icon-wrapper", { key: '8f9d83b1d8dda824cac17d9c2ce3cb6cc5a58945', icon: "warning" }), hAsync("p", { key: 'f223076bc18088e264b4888d18bb9673f803d875', class: "f-ui-04 ml-4", innerHTML: this.errorMessage }))), this.message && hAsync("p", { key: '40bdbc35ba4985802177d7f9b2c44f893e4cb40c', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (hAsync("a", { key: 'e6297a49f63ce2ab14bac8df0186fb42fab4416d', href: this.link.url, class: "f-ui-05 effect-color hover:text-lighter underline underline-offset-4" }, this.link.label))));
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10626,7 +10483,7 @@ class EdsInputLabel {
         this.disabled = false;
     }
     render() {
-        return (hAsync("label", { key: 'd83f8267317c2d5ef500460e938b166c0e6517b1', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (hAsync("span", { key: '85ad9e44af342c191d8aa7aeb7e4c6288c544d6d' }, hAsync("span", { key: 'b350ee023f80bc9d5f24ef2fac9f74b2461d27b9', "aria-hidden": "true" }, "*"), hAsync("span", { key: 'af55a83d8998ac70817cb2f7cebfb74f276a6387', class: "sr-only" }, "required")))));
+        return (hAsync("label", { key: '38be7206acfad300657a99218c3138e91069d710', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (hAsync("span", { key: '1e80610f66d51a1c46918086bb5b5153c0e35a3c' }, hAsync("span", { key: '83d15d62c0539f1847746b4a2b9c9971b4852da8', "aria-hidden": "true" }, "*"), hAsync("span", { key: '3f45f5a436c41cf7e55570a2abe8844c8daa7525', class: "sr-only" }, "required")))));
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10674,9 +10531,9 @@ class EdsInputRange {
         return this.inputElement;
     }
     render() {
-        return (hAsync("div", { key: '8927f714cae6dd2237202190eade7b31cc7adc03', class: "relative flex flex-col items-start space-y-2" }, hAsync("input", { key: '1b3ba13453992c84e00d3b3261a9d2008f45634f', id: this.inputId || this.name, name: this.name, min: this.min, max: this.max, step: this.step, value: this.sliderVal, required: this.required, disabled: this.disabled, type: "range", class: "w-full py-6 input",
+        return (hAsync("div", { key: '6a70b857cfbeb152e6f099b6dfc91cc9fec5bf11', class: "relative flex flex-col items-start space-y-2" }, hAsync("input", { key: 'da4c0158b1d33804404f4373b3c55c53b5b2f53b', id: this.inputId || this.name, name: this.name, min: this.min, max: this.max, step: this.step, value: this.sliderVal, required: this.required, disabled: this.disabled, type: "range", class: "w-full py-6 input",
             //aria-describedby={describedBy}
-            onInput: this.onInput }), hAsync("p", { key: 'e04c275e51710ae09eec1603911446e1e65bf648', id: `desc_${this.name}`, class: "block f-ui-05 text-lighter" }, "Current value: ", this.sliderVal)));
+            onInput: this.onInput }), hAsync("p", { key: '66bc2e755e4eb38015e32441599a9f9bade7c679', id: `desc_${this.name}`, class: "block f-ui-05 text-lighter" }, "Current value: ", this.sliderVal)));
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
@@ -10733,7 +10590,7 @@ class EdsInputSearch {
         return this.inputElement;
     }
     render() {
-        return (hAsync("div", { key: '4a6a629fcaefa3ec3bbfb577e1a1f85e8d4f0ee0', class: "relative flex items-center" }, hAsync("eds-icon-wrapper", { key: '7cb203fabdf6f1160d95d7ca125f0ca33affd1c6', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest" }), hAsync("input", { key: 'fe32c40b6e438526b8ef6a74783a6455fb91a467', id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.value || '', required: this.required, disabled: this.disabled, type: "search", class: "search-input w-full py-6 input input-icon pl-36",
+        return (hAsync("div", { key: 'df7ee546beed6eedfba5a19e0fdf349d9aaece90', class: "relative flex items-center" }, hAsync("eds-icon-wrapper", { key: '4663fdd0a9ba4eace47dc90f9c7f50fc2e6f7925', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest" }), hAsync("input", { key: 'e3e72f3dea068cbab3d398de36dd09e4a7f1ce93', id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.value || '', required: this.required, disabled: this.disabled, type: "search", class: "search-input w-full py-6 input input-icon pl-36",
             //aria-describedby={describedBy}
             onInput: this.onInput, onChange: this.onChange })));
     }
@@ -10806,6 +10663,7 @@ class EdsInputSelect {
         this.loading = false;
         this.dynamicValueKey = 'value';
         this.dynamicLabelKey = 'label';
+        this.hasFetched = false;
     }
     componentWillLoad() {
         this.loadOptions();
@@ -10822,6 +10680,9 @@ class EdsInputSelect {
     async loadOptions() {
         // If the first option contains an "endpoint" key, assume dynamic fetch mode.
         if (this.options && this.options.length > 0 && this.options[0].endpoint) {
+            if (this.hasFetched) {
+                return;
+            }
             const config = this.options[0];
             const endpoint = config.endpoint;
             this.dynamicValueKey = config.value || 'value';
@@ -10835,6 +10696,7 @@ class EdsInputSelect {
                 const data = await response.json();
                 // Assume the API returns an array of objects.
                 this.dynamicOptions = data;
+                this.hasFetched = true;
             }
             catch (error) {
                 //console.error('Error fetching dynamic options:', error);
@@ -10851,8 +10713,11 @@ class EdsInputSelect {
             this.dynamicLabelKey = this.labelKey;
         }
     }
+    getValueByPath(obj, path) {
+        return path.split('.').reduce((acc, part) => acc && acc[part], obj);
+    }
     render() {
-        return (hAsync("div", { key: 'd37107564a86281b3a3920a5eb128f47f6fd4ceb', class: "relative" }, hAsync("select", { key: 'a69cd907ef6732ec42a99fd46bbf9a52ef03735a', id: this.inputId || this.name, name: this.name, class: `input invalid:text-lightest pr-32 ${this.error ? 'input-error' : ''}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.hasMessage || this.error ? `${this.name}-error` : '', disabled: this.disabled || this.loading, required: this.required, onChange: this.handleChange }, hAsync("option", { key: '8b84a2b7edd7e989411908b16f35c46853889d8e', value: "", disabled: true, hidden: true }, this.loading ? 'Loading options...' : `Please select ${this.name}`), this.dynamicOptions.map((option, index) => (hAsync("option", { key: index, value: option[this.dynamicValueKey] }, option[this.dynamicLabelKey])))), hAsync("span", { key: 'dbccb6161aafc2dc31cc6dd5b3d8c812545eab9a', class: `bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center ${this.disabled || this.loading ? 'text-lightest bg-transparent' : ''}` }, hAsync("eds-icon-wrapper", { key: 'b0fd24cb54185d8558dfabcb94d05b6257caacd1', class: "w-20 h-20", icon: "chevron-right" }))));
+        return (hAsync("div", { key: 'c1469a270fa5e775ac4d17f1c7e259d02477d7a2', class: "relative" }, hAsync("select", { key: '3aab6ec60d386e51ce27c1cfc26059132d96957f', id: this.inputId || this.name, name: this.name, class: `input invalid:text-lightest pr-32 ${this.error ? 'input-error' : ''}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.hasMessage || this.error ? `${this.name}-error` : '', disabled: this.disabled || this.loading, required: this.required, onChange: this.handleChange }, hAsync("option", { key: 'ee3aa20ed1b99bddd7bafa3aac43f3c06db07b8f', value: "", disabled: true, hidden: true }, this.loading ? 'Loading options...' : `Please select ${this.name}`), this.dynamicOptions.map((option, index) => (hAsync("option", { key: index, value: this.getValueByPath(option, this.dynamicValueKey) }, this.getValueByPath(option, this.dynamicLabelKey))))), hAsync("span", { key: '7e70051ac49efd053f00521b51ad19e88cf5cdb7', class: `bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center ${this.disabled || this.loading ? 'text-lightest bg-transparent' : ''}` }, hAsync("eds-icon-wrapper", { key: '2ef2d0d744216a1f931ac0bfe1058f54c9af4402', class: "w-20 h-20", icon: "chevron-right" }))));
     }
     static get watchers() { return {
         "options": ["loadOptions"]
@@ -10875,7 +10740,8 @@ class EdsInputSelect {
             "dynamicOptions": [32],
             "loading": [32],
             "dynamicValueKey": [32],
-            "dynamicLabelKey": [32]
+            "dynamicLabelKey": [32],
+            "hasFetched": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -11072,7 +10938,7 @@ class EdsLink {
     }
     renderRightIcon() {
         if (this.icon && this.iconPos === 'right') {
-            return (hAsync("span", { class: !this.external && !this.label ? '' : 'flex' }, hAsync("eds-icon-wrapper", { class: `
+            return (hAsync("span", { class: !this.external && !this.label ? '' : 'flex ml-4' }, hAsync("eds-icon-wrapper", { class: `
               flex inline-flex items-center justify-center
               ${this.size === 'large' ? 'h-32 w-32' : 'h-20 w-20'}
             `, icon: this.icon })));
@@ -11080,6 +10946,7 @@ class EdsLink {
         return null;
     }
     render() {
+        // If the link is disabled, use a <span>; otherwise, use an <a> element.
         const ComponentType = this.disabled ? 'span' : 'a';
         const classes = linkStyles({
             intent: this.intent,
@@ -11087,10 +10954,12 @@ class EdsLink {
             iconSmall: this.iconSmall,
             isActive: this.current
         });
+        // If no visible label is provided, ensure ariaLabel is set.
+        const computedAriaLabel = this.ariaLabel || this.label || 'link';
         const labelClasses = this.hideLabelOnSmallScreen
             ? 'hidden lg:flex' // Tailwind example: hidden on small screens, visible on larger
             : '';
-        return (hAsync(ComponentType, { key: '58eb3c1c5c192c2855424864c9e3e9c7a5fe3378', class: `${classes || ''} ${this.extraClass || ''}`, href: !this.disabled ? this.url : undefined, target: this.external && !this.disabled ? '_blank' : undefined, rel: this.external && !this.disabled ? 'noopener noreferrer' : undefined, "aria-label": this.label || this.ariaLabel || undefined, "aria-disabled": this.disabled ? 'true' : null, download: this.download ? '' : undefined, onClick: (event) => this.handleClick(event) }, hAsync("span", { key: 'd4033ba589552f60f8dc7559434a3c035d226de4', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), hAsync("span", { key: 'ca520cc66febaf8c8ddfd2fd8ee8a13b71a3078d', class: labelClasses }, this.label), this.renderRightIcon())));
+        return (hAsync(ComponentType, { key: '965b2bf54c59752e7ed3cafbc167a8f2d1a2a9b1', class: `${classes || ''} ${this.extraClass || ''}`, href: !this.disabled ? this.url : undefined, target: this.external && !this.disabled ? '_blank' : undefined, rel: this.external && !this.disabled ? 'noopener noreferrer' : undefined, "aria-label": computedAriaLabel, "aria-disabled": this.disabled ? 'true' : null, "aria-current": this.current ? 'page' : undefined, download: this.download ? '' : undefined, onClick: (event) => this.handleClick(event) }, hAsync("span", { key: '7df72410c98bab3c0ef204e5cd33f1e069976d24', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), hAsync("span", { key: '208b4fa88695bd8e8ed961d4c7639b117341110c', class: labelClasses }, this.label), this.renderRightIcon())));
     }
     get el() { return getElement(this); }
     static get style() { return EdsLinkStyle0; }
@@ -11181,7 +11050,7 @@ function Keycloak (config) {
         );
     }
 
-    kc.init = function (initOptions) {
+    kc.init = function (initOptions = {}) {
         if (kc.didInitialize) {
             throw new Error("A 'Keycloak' instance can only be initialized once.");
         }
@@ -11193,9 +11062,9 @@ function Keycloak (config) {
         callbackStorage = createCallbackStorage();
         var adapters = ['default', 'cordova', 'cordova-native'];
 
-        if (initOptions && adapters.indexOf(initOptions.adapter) > -1) {
+        if (adapters.indexOf(initOptions.adapter) > -1) {
             adapter = loadAdapter(initOptions.adapter);
-        } else if (initOptions && typeof initOptions.adapter === "object") {
+        } else if (typeof initOptions.adapter === "object") {
             adapter = initOptions.adapter;
         } else {
             if (window.Cordova || window.cordova) {
@@ -11205,101 +11074,99 @@ function Keycloak (config) {
             }
         }
 
-        if (initOptions) {
-            if (typeof initOptions.useNonce !== 'undefined') {
-                useNonce = initOptions.useNonce;
-            }
-
-            if (typeof initOptions.checkLoginIframe !== 'undefined') {
-                loginIframe.enable = initOptions.checkLoginIframe;
-            }
+        if (typeof initOptions.useNonce !== 'undefined') {
+            useNonce = initOptions.useNonce;
+        }
 
-            if (initOptions.checkLoginIframeInterval) {
-                loginIframe.interval = initOptions.checkLoginIframeInterval;
-            }
+        if (typeof initOptions.checkLoginIframe !== 'undefined') {
+            loginIframe.enable = initOptions.checkLoginIframe;
+        }
 
-            if (initOptions.onLoad === 'login-required') {
-                kc.loginRequired = true;
-            }
+        if (initOptions.checkLoginIframeInterval) {
+            loginIframe.interval = initOptions.checkLoginIframeInterval;
+        }
 
-            if (initOptions.responseMode) {
-                if (initOptions.responseMode === 'query' || initOptions.responseMode === 'fragment') {
-                    kc.responseMode = initOptions.responseMode;
-                } else {
-                    throw 'Invalid value for responseMode';
-                }
-            }
+        if (initOptions.onLoad === 'login-required') {
+            kc.loginRequired = true;
+        }
 
-            if (initOptions.flow) {
-                switch (initOptions.flow) {
-                    case 'standard':
-                        kc.responseType = 'code';
-                        break;
-                    case 'implicit':
-                        kc.responseType = 'id_token token';
-                        break;
-                    case 'hybrid':
-                        kc.responseType = 'code id_token token';
-                        break;
-                    default:
-                        throw 'Invalid value for flow';
-                }
-                kc.flow = initOptions.flow;
+        if (initOptions.responseMode) {
+            if (initOptions.responseMode === 'query' || initOptions.responseMode === 'fragment') {
+                kc.responseMode = initOptions.responseMode;
+            } else {
+                throw 'Invalid value for responseMode';
             }
+        }
 
-            if (initOptions.timeSkew != null) {
-                kc.timeSkew = initOptions.timeSkew;
+        if (initOptions.flow) {
+            switch (initOptions.flow) {
+                case 'standard':
+                    kc.responseType = 'code';
+                    break;
+                case 'implicit':
+                    kc.responseType = 'id_token token';
+                    break;
+                case 'hybrid':
+                    kc.responseType = 'code id_token token';
+                    break;
+                default:
+                    throw 'Invalid value for flow';
             }
+            kc.flow = initOptions.flow;
+        }
 
-            if(initOptions.redirectUri) {
-                kc.redirectUri = initOptions.redirectUri;
-            }
+        if (initOptions.timeSkew != null) {
+            kc.timeSkew = initOptions.timeSkew;
+        }
 
-            if (initOptions.silentCheckSsoRedirectUri) {
-                kc.silentCheckSsoRedirectUri = initOptions.silentCheckSsoRedirectUri;
-            }
+        if(initOptions.redirectUri) {
+            kc.redirectUri = initOptions.redirectUri;
+        }
 
-            if (typeof initOptions.silentCheckSsoFallback === 'boolean') {
-                kc.silentCheckSsoFallback = initOptions.silentCheckSsoFallback;
-            } else {
-                kc.silentCheckSsoFallback = true;
-            }
+        if (initOptions.silentCheckSsoRedirectUri) {
+            kc.silentCheckSsoRedirectUri = initOptions.silentCheckSsoRedirectUri;
+        }
 
-            if (typeof initOptions.pkceMethod !== "undefined") {
-                if (initOptions.pkceMethod !== "S256" && initOptions.pkceMethod !== false) {
-                    throw new TypeError(`Invalid value for pkceMethod', expected 'S256' or false but got ${initOptions.pkceMethod}.`);
-                }
+        if (typeof initOptions.silentCheckSsoFallback === 'boolean') {
+            kc.silentCheckSsoFallback = initOptions.silentCheckSsoFallback;
+        } else {
+            kc.silentCheckSsoFallback = true;
+        }
 
-                kc.pkceMethod = initOptions.pkceMethod;
-            } else {
-                kc.pkceMethod = "S256";
+        if (typeof initOptions.pkceMethod !== "undefined") {
+            if (initOptions.pkceMethod !== "S256" && initOptions.pkceMethod !== false) {
+                throw new TypeError(`Invalid value for pkceMethod', expected 'S256' or false but got ${initOptions.pkceMethod}.`);
             }
 
-            if (typeof initOptions.enableLogging === 'boolean') {
-                kc.enableLogging = initOptions.enableLogging;
-            } else {
-                kc.enableLogging = false;
-            }
+            kc.pkceMethod = initOptions.pkceMethod;
+        } else {
+            kc.pkceMethod = "S256";
+        }
+
+        if (typeof initOptions.enableLogging === 'boolean') {
+            kc.enableLogging = initOptions.enableLogging;
+        } else {
+            kc.enableLogging = false;
+        }
 
-            if (initOptions.logoutMethod === 'POST') {
-                kc.logoutMethod = 'POST';
-            } else {
-                kc.logoutMethod = 'GET';
-            }
+        if (initOptions.logoutMethod === 'POST') {
+            kc.logoutMethod = 'POST';
+        } else {
+            kc.logoutMethod = 'GET';
+        }
 
-            if (typeof initOptions.scope === 'string') {
-                kc.scope = initOptions.scope;
-            }
+        if (typeof initOptions.scope === 'string') {
+            kc.scope = initOptions.scope;
+        }
 
-            if (typeof initOptions.acrValues === 'string') {
-                kc.acrValues = initOptions.acrValues;
-            }
+        if (typeof initOptions.acrValues === 'string') {
+            kc.acrValues = initOptions.acrValues;
+        }
 
-            if (typeof initOptions.messageReceiveTimeout === 'number' && initOptions.messageReceiveTimeout > 0) {
-                kc.messageReceiveTimeout = initOptions.messageReceiveTimeout;
-            } else {
-                kc.messageReceiveTimeout = 10000;
-            }
+        if (typeof initOptions.messageReceiveTimeout === 'number' && initOptions.messageReceiveTimeout > 0) {
+            kc.messageReceiveTimeout = initOptions.messageReceiveTimeout;
+        } else {
+            kc.messageReceiveTimeout = 10000;
         }
 
         if (!kc.responseMode) {
@@ -11328,7 +11195,7 @@ function Keycloak (config) {
                     options.prompt = 'none';
                 }
 
-                if (initOptions && initOptions.locale) {
+                if (initOptions.locale) {
                     options.locale = initOptions.locale;
                 }
                 kc.login(options).then(function () {
@@ -11402,42 +11269,40 @@ function Keycloak (config) {
                 }).catch(function (error) {
                     initPromise.setError(error);
                 });
-            } else if (initOptions) {
-                if (initOptions.token && initOptions.refreshToken) {
-                    setToken(initOptions.token, initOptions.refreshToken, initOptions.idToken);
+            }
 
-                    if (loginIframe.enable) {
-                        setupCheckLoginIframe().then(function() {
-                            checkLoginIframe().then(function (unchanged) {
-                                if (unchanged) {
-                                    kc.onAuthSuccess && kc.onAuthSuccess();
-                                    initPromise.setSuccess();
-                                    scheduleCheckIframe();
-                                } else {
-                                    initPromise.setSuccess();
-                                }
-                            }).catch(function (error) {
-                                initPromise.setError(error);
-                            });
-                        });
-                    } else {
-                        kc.updateToken(-1).then(function() {
-                            kc.onAuthSuccess && kc.onAuthSuccess();
-                            initPromise.setSuccess();
-                        }).catch(function(error) {
-                            kc.onAuthError && kc.onAuthError();
-                            if (initOptions.onLoad) {
-                                onLoad();
+            if (initOptions.token && initOptions.refreshToken) {
+                setToken(initOptions.token, initOptions.refreshToken, initOptions.idToken);
+
+                if (loginIframe.enable) {
+                    setupCheckLoginIframe().then(function() {
+                        checkLoginIframe().then(function (unchanged) {
+                            if (unchanged) {
+                                kc.onAuthSuccess && kc.onAuthSuccess();
+                                initPromise.setSuccess();
+                                scheduleCheckIframe();
                             } else {
-                                initPromise.setError(error);
+                                initPromise.setSuccess();
                             }
+                        }).catch(function (error) {
+                            initPromise.setError(error);
                         });
-                    }
-                } else if (initOptions.onLoad) {
-                    onLoad();
+                    });
                 } else {
-                    initPromise.setSuccess();
+                    kc.updateToken(-1).then(function() {
+                        kc.onAuthSuccess && kc.onAuthSuccess();
+                        initPromise.setSuccess();
+                    }).catch(function(error) {
+                        kc.onAuthError && kc.onAuthError();
+                        if (initOptions.onLoad) {
+                            onLoad();
+                        } else {
+                            initPromise.setError(error);
+                        }
+                    });
                 }
+            } else if (initOptions.onLoad) {
+                onLoad();
             } else {
                 initPromise.setSuccess();
             }
@@ -11798,7 +11663,7 @@ function Keycloak (config) {
 
                                 kc.onAuthRefreshError && kc.onAuthRefreshError();
                                 for (var p = refreshQueue.pop(); p != null; p = refreshQueue.pop()) {
-                                    p.setError(true);
+                                    p.setError("Failed to refresh token: An unexpected HTTP error occurred while attempting to refresh the token.");
                                 }
                             }
                         }
@@ -12366,7 +12231,7 @@ function Keycloak (config) {
     function check3pCookiesSupported() {
         var promise = createPromise();
 
-        if (loginIframe.enable || kc.silentCheckSsoRedirectUri) {
+        if ((loginIframe.enable || kc.silentCheckSsoRedirectUri) && typeof kc.endpoints.thirdPartyCookiesIframe === 'function') {
             var iframe = document.createElement('iframe');
             iframe.setAttribute('src', kc.endpoints.thirdPartyCookiesIframe());
             iframe.setAttribute('sandbox', 'allow-storage-access-by-user-activation allow-scripts allow-same-origin');
@@ -12386,7 +12251,7 @@ function Keycloak (config) {
                         "[KEYCLOAK] Your browser is blocking access to 3rd-party cookies, this means:\n\n" +
                         " - It is not possible to retrieve tokens without redirecting to the Keycloak server (a.k.a. no support for silent authentication).\n" +
                         " - It is not possible to automatically detect changes to the session status (such as the user logging out in another tab).\n\n" +
-                        "For more information see: https://www.keycloak.org/docs/latest/securing_apps/#_modern_browsers"
+                        "For more information see: https://www.keycloak.org/securing-apps/javascript-adapter#_modern_browsers"
                     );
 
                     loginIframe.enable = false;
@@ -12424,34 +12289,37 @@ function Keycloak (config) {
                         return;
                     }
 
-                    const logoutUrl = kc.createLogoutUrl(options);
-                    const response = await fetch(logoutUrl, {
-                        method: "POST",
-                        headers: {
-                            "Content-Type": "application/x-www-form-urlencoded"
-                        },
-                        body: new URLSearchParams({
-                            id_token_hint: kc.idToken,
-                            client_id: kc.clientId,
-                            post_logout_redirect_uri: adapter.redirectUri(options, false)
-                        })
-                    });
+                    // Create form to send POST request.
+                    const form = document.createElement("form");
 
-                    if (response.redirected) {
-                        window.location.href = response.url;
-                        return;
-                    }
+                    form.setAttribute("method", "POST");
+                    form.setAttribute("action", kc.createLogoutUrl(options));
+                    form.style.display = "none";
 
-                    if (response.ok) {
-                        window.location.reload();
-                        return;
+                    // Add data to form as hidden input fields.
+                    const data = {
+                        id_token_hint: kc.idToken,
+                        client_id: kc.clientId,
+                        post_logout_redirect_uri: adapter.redirectUri(options, false)
+                    };
+
+                    for (const [name, value] of Object.entries(data)) {
+                        const input = document.createElement("input");
+
+                        input.setAttribute("type", "hidden");
+                        input.setAttribute("name", name);
+                        input.setAttribute("value", value);
+
+                        form.appendChild(input);
                     }
 
-                    throw new Error("Logout failed, request returned an error code.");
+                    // Append form to page and submit it to perform logout and redirect.
+                    document.body.appendChild(form);
+                    form.submit();
                 },
 
-                register: function(options) {
-                    window.location.assign(kc.createRegisterUrl(options));
+                register: async function(options) {
+                    window.location.assign(await kc.createRegisterUrl(options));
                     return createPromise().promise;
                 },
 
@@ -12604,9 +12472,9 @@ function Keycloak (config) {
                     return promise.promise;
                 },
 
-                register : function(options) {
+                register : async function(options) {
                     var promise = createPromise();
-                    var registerUrl = kc.createRegisterUrl();
+                    var registerUrl = await kc.createRegisterUrl();
                     var cordovaOptions = createCordovaOptions(options);
                     var ref = cordovaOpenWindowWrapper(registerUrl, '_blank', cordovaOptions);
                     ref.addEventListener('loadstart', function(event) {
@@ -12673,9 +12541,9 @@ function Keycloak (config) {
                     return promise.promise;
                 },
 
-                register : function(options) {
+                register : async function(options) {
                     var promise = createPromise();
-                    var registerUrl = kc.createRegisterUrl(options);
+                    var registerUrl = await kc.createRegisterUrl(options);
                     universalLinks.subscribe('keycloak' , function(event) {
                         universalLinks.unsubscribe('keycloak');
                         window.cordova.plugins.browsertab.close();
@@ -12711,6 +12579,8 @@ function Keycloak (config) {
         throw 'invalid adapter type: ' + type;
     }
 
+    const STORAGE_KEY_PREFIX = 'kc-callback-';
+
     var LocalStorage = function() {
         if (!(this instanceof LocalStorage)) {
             return new LocalStorage();
@@ -12721,48 +12591,96 @@ function Keycloak (config) {
 
         var cs = this;
 
-        function clearExpired() {
-            var time = new Date().getTime();
-            for (var i = 0; i < localStorage.length; i++)  {
-                var key = localStorage.key(i);
-                if (key && key.indexOf('kc-callback-') == 0) {
-                    var value = localStorage.getItem(key);
-                    if (value) {
-                        try {
-                            var expires = JSON.parse(value).expires;
-                            if (!expires || expires < time) {
-                                localStorage.removeItem(key);
-                            }
-                        } catch (err) {
-                            localStorage.removeItem(key);
-                        }
-                    }
+        /**
+         * Clears all values from local storage that are no longer valid.
+         */
+        function clearInvalidValues() {
+            const currentTime = Date.now();
+
+            for (const [key, value] of getStoredEntries()) {
+                // Attempt to parse the expiry time from the value.
+                const expiry = parseExpiry(value);
+
+                // Discard the value if it is malformed or expired.
+                if (expiry === null || expiry < currentTime) {
+                    localStorage.removeItem(key);
                 }
             }
         }
 
+        /**
+         * Clears all known values from local storage.
+         */
+        function clearAllValues() {
+            for (const [key] of getStoredEntries()) {
+                localStorage.removeItem(key);
+            }
+        }
+
+        /**
+         * Gets all entries stored in local storage that are known to be managed by this class.
+         * @returns {Array<[string, unknown]>} An array of key-value pairs.
+         */
+        function getStoredEntries() {
+            return Object.entries(localStorage).filter(([key]) => key.startsWith(STORAGE_KEY_PREFIX));
+        }
+
+        /**
+         * Parses the expiry time from a value stored in local storage.
+         * @param {unknown} value
+         * @returns {number | null} The expiry time in milliseconds, or `null` if the value is malformed.
+         */
+        function parseExpiry(value) {
+            let parsedValue;
+
+            // Attempt to parse the value as JSON.
+            try {
+                parsedValue = JSON.parse(value);
+            } catch (error) {
+                return null;
+            }
+
+            // Attempt to extract the 'expires' property.
+            if (isObject(parsedValue) && 'expires' in parsedValue && typeof parsedValue.expires === 'number') {
+                return parsedValue.expires;
+            }
+
+            return null;
+        }
+
         cs.get = function(state) {
             if (!state) {
                 return;
             }
 
-            var key = 'kc-callback-' + state;
+            var key = STORAGE_KEY_PREFIX + state;
             var value = localStorage.getItem(key);
             if (value) {
                 localStorage.removeItem(key);
                 value = JSON.parse(value);
             }
 
-            clearExpired();
+            clearInvalidValues();
             return value;
         };
 
         cs.add = function(state) {
-            clearExpired();
+            clearInvalidValues();
+
+            const key = STORAGE_KEY_PREFIX + state.state;
+            const value = JSON.stringify({
+                ...state,
+                // Set the expiry time to 1 hour from now.
+                expires: Date.now() + (60 * 60 * 1000)
+            });
 
-            var key = 'kc-callback-' + state.state;
-            state.expires = new Date().getTime() + (60 * 60 * 1000);
-            localStorage.setItem(key, JSON.stringify(state));
+            try {
+                localStorage.setItem(key, value);
+            } catch (error) {
+                // If the storage is full, clear all known values and try again.
+                clearAllValues();
+                localStorage.setItem(key, value);
+            }
         };
     };
 
@@ -12778,15 +12696,15 @@ function Keycloak (config) {
                 return;
             }
 
-            var value = getCookie('kc-callback-' + state);
-            setCookie('kc-callback-' + state, '', cookieExpiration(-100));
+            var value = getCookie(STORAGE_KEY_PREFIX + state);
+            setCookie(STORAGE_KEY_PREFIX + state, '', cookieExpiration(-100));
             if (value) {
                 return JSON.parse(value);
             }
         };
 
         cs.add = function(state) {
-            setCookie('kc-callback-' + state.state, JSON.stringify(state), cookieExpiration(60));
+            setCookie(STORAGE_KEY_PREFIX + state.state, JSON.stringify(state), cookieExpiration(60));
         };
 
         cs.removeItem = function(key) {
@@ -12940,8 +12858,15 @@ function isObject(input) {
 }
 
 let keycloak = null;
+let keycloakInitPromise = null;
 // Initialize Keycloak with an optional silent check
 function initKeycloak(config, silentCheck = true) {
+    // If already initializing or initialized, return the cached promise
+    if (keycloakInitPromise) {
+        // eslint-disable-next-line
+        console.log('Keycloak already initialized, returning from cache');
+        return keycloakInitPromise;
+    }
     if (!keycloak) {
         keycloak = new Keycloak({
             url: config.url,
@@ -12949,7 +12874,7 @@ function initKeycloak(config, silentCheck = true) {
             clientId: config.clientId
         });
     }
-    return keycloak
+    keycloakInitPromise = keycloak
         .init({
         onLoad: silentCheck ? 'check-sso' : 'login-required',
         checkLoginIframe: false
@@ -12961,6 +12886,7 @@ function initKeycloak(config, silentCheck = true) {
         console.error('Failed to initialize Keycloak:', error);
         return false;
     });
+    return keycloakInitPromise;
 }
 function getUser() {
     if ((keycloak === null || keycloak === void 0 ? void 0 : keycloak.authenticated) && (keycloak === null || keycloak === void 0 ? void 0 : keycloak.idTokenParsed)) {
@@ -12983,8 +12909,7 @@ function login() {
         keycloak.login();
     }
     else {
-        // eslint-disable-next-line
-        console.error('Keycloak is not initialized.');
+        throw new Error('Keycloak is not initialized.');
     }
 }
 // Log out the user
@@ -12993,8 +12918,7 @@ function logout() {
         keycloak.logout();
     }
     else {
-        // eslint-disable-next-line
-        console.error('Keycloak is not initialized.');
+        throw new Error('Keycloak is not initialized.');
     }
 }
 // Check if the user is authenticated
@@ -13011,75 +12935,85 @@ async function checkServerAvailability(url) {
     }
 }
 
-/**
- * `EdsLogin` is a login component that integrates Keycloak authentication,
- * allowing users to log in and out and manage authentication states.
- * This component is used to handle user login, logout, and authentication status display.
- *
- * This component is ideal for applications that require Keycloak-based authentication,
- * providing a simple login/logout interface and managing user session states.
- */
 class EdsLogin {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.authStatusChanged = createEvent(this, "authStatusChanged", 7);
-        // Method to handle user logout
-        this.handleLogout = () => {
-            logout();
-            this.authenticated = false; // Reset authentication state after logout
+        /**
+         * Handles user login by invoking the Keycloak `login` function.
+         * Only triggers login if the user is not already authenticated.
+         */
+        this.handleLogin = async () => {
+            if (!this.authenticated) {
+                try {
+                    await login();
+                    toast.show('You are authenticated', 'success');
+                }
+                catch (error) {
+                    toast.show(error.message, 'error');
+                }
+            }
+        };
+        /**
+         * Handles user logout by invoking the Keycloak `logout` function.
+         * Resets the `authenticated` state to `false` after logout.
+         */
+        this.handleLogout = async () => {
+            try {
+                await logout();
+            }
+            catch (error) {
+                toast.show(error.message, 'error');
+            }
+            this.authenticated = false;
+            this.user = null;
         };
-        this.keycloakUrl = '';
-        this.keycloakRealm = '';
-        this.keycloakClientId = '';
+        this.keycloakUrl = undefined;
+        this.keycloakRealm = undefined;
+        this.keycloakClientId = undefined;
         this.authenticated = false;
         this.user = null;
     }
-    // Lifecycle method to check authentication status before the component loads
+    /**
+     * Lifecycle method that runs when the component is about to load.
+     * It initializes authentication by calling the `initAuth` method.
+     */
     async componentWillLoad() {
-        await this.checkAuthentication();
+        // Check if required props are provided (optional check)
+        if (!this.keycloakUrl || !this.keycloakRealm || !this.keycloakClientId) {
+            // eslint-disable-next-line
+            console.error('Keycloak configuration props are missing.');
+            return;
+        }
+        await this.initAuth();
     }
-    // Method to initialize Keycloak and check if the user is authenticated
-    async checkAuthentication() {
+    /**
+     * Initializes the Keycloak authentication by configuring Keycloak with the provided props.
+     * Sets the `authenticated` state and `user` data if the user is authenticated.
+     * Emits `authStatusChanged` event with the authentication status.
+     */
+    async initAuth() {
         try {
-            const keycloakConfig = {
+            await initKeycloak({
                 url: this.keycloakUrl,
                 realm: this.keycloakRealm,
                 clientId: this.keycloakClientId
-            };
-            await initKeycloak(keycloakConfig);
-            // eslint-disable-next-line
-            // Set authentication state and fetch user data if authenticated
-            this.authenticated = isAuthenticated();
-            if (this.authenticated) {
+            }, true);
+            if (isAuthenticated()) {
                 this.user = getUser();
-            }
-            this.authStatusChanged.emit({
-                authenticated: this.authenticated,
-                user: this.user
-            }); // Emit auth status change
-        }
-        catch (error) {
-            // eslint-disable-next-line
-            console.error('Keycloak initialization or login check failed:', error);
-        }
-    }
-    // Method to handle user login
-    async handleLogin() {
-        try {
-            if (!this.authenticated) {
-                login(); // Start the Keycloak login process
+                this.authenticated = true;
+                this.authStatusChanged.emit({
+                    authenticated: this.authenticated,
+                    user: this.user
+                }); // Emit auth status change
             }
         }
         catch (error) {
-            // eslint-disable-next-line
-            console.error('Login failed:', error);
+            toast.show(error.message, 'error');
         }
     }
-    getBtnLabel() {
-        return this.authenticated ? 'Logout' : 'Login';
-    }
     render() {
-        return (hAsync("eds-button", { key: '35f298ecf951d5b1087f988262ae7d312c5e2d38', label: this.getBtnLabel(), intent: "primary", "extra-class": "text-default", "aria-label": this.getBtnLabel(), triggerClick: this.authenticated ? this.handleLogout : this.handleLogin.bind(this) }));
+        return (hAsync("div", { key: 'cd30a135920ae77959330a43a8544bb9c231986e', class: "block" }, !this.authenticated && (hAsync("eds-button", { key: '98fa63c46b063a67c215ff9160c6dfbfee2265f7', label: "Login", intent: "primary", "extra-class": "text-default", "aria-label": "Login", triggerClick: this.handleLogin.bind(this) }))));
     }
     static get cmpMeta() { return {
         "$flags$": 9,
@@ -13123,6 +13057,7 @@ class EdsLogo {
         this.href = '/';
         this.orientation = 'horizontal';
         this.type = undefined;
+        this.label = 'Home';
     }
     /**
      * Handles the click event on the logo link.
@@ -13175,7 +13110,7 @@ class EdsLogo {
     }
     render() {
         const logoContent = this.getLogo();
-        return (hAsync("a", { key: '3d9435fbc45427865bfa7bacb36bea4c34f08c4e', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper" }, hAsync("div", { key: '662122c4b687a082c930c034b033e9732ef611be', innerHTML: logoContent })));
+        return (hAsync("a", { key: 'ee8de4071b0137020341982b4c5cb2c938f1c4df', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, hAsync("div", { key: '1eb620afbcc5a2a5c6914cc1c91a45ca62d0068c', innerHTML: logoContent })));
     }
     get el() { return getElement(this); }
     static get style() { return EdsLogoStyle0; }
@@ -13185,7 +13120,8 @@ class EdsLogo {
         "$members$": {
             "href": [1],
             "orientation": [1],
-            "type": [1]
+            "type": [1],
+            "label": [1]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -13212,7 +13148,7 @@ class EdsLogoVariations {
         }
     }
     render() {
-        return hAsync("div", { key: '9d6ce0e75030d6e636aab423181b0ce999f6f1b0', class: "container" }, this.renderContent());
+        return hAsync("div", { key: '0494cbb3e7b4902e91a0c78c691bc3405b9f11cc', class: "container" }, this.renderContent());
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -13345,7 +13281,6 @@ class EdsMatomoNotice {
 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}.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-20{top:1.25rem}.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)}.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}";
 var EdsModalStyle0 = edsModalCss;
 
-//import { sendAnalytics } from '@ebrains/utils';
 /**
  * `EdsModal` is a modal dialog component that can be toggled open or closed.
  *
@@ -13424,32 +13359,19 @@ class EdsModal {
         this.isOpen = !this.isOpen;
     }
     /**
-     * Lifecycle method that runs when the component has fully loaded.
-     * It emits a custom event for each `eds-button` element contained within the breadcrumb.
-     */
-    componentDidLoad() {
-        // Emit context for each eds-link element after the component is fully loaded
-        //const btn = this.el.shadowRoot.querySelector('eds-button');
-        //this.emitContext(btn);
-    }
-    /**
-     * Emits a custom event called `parentContext` for a given button element.
-     * This event provides context information about the eds-modal component.
+     * Closes the modal when the Escape key is pressed.
      */
-    /*emitContext(btnElement: HTMLElement) {
-      const event = new CustomEvent<ParentContextDetail>('parentContext', {
-        detail: {
-          componentName: this.el.tagName.toLowerCase(),
-          identifier: null
+    handleKeyDown(event) {
+        if (this.isOpen && event.key === 'Escape') {
+            this.close();
         }
-      });
-  
-      btnElement.dispatchEvent(event);
-    }*/
+    }
     render() {
-        return (hAsync("div", { key: 'eedcdc49c9f4a16ef4537ec02335757aa1143bd9', class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-50 flex` }, this.isOpen && (hAsync("div", { key: '2b24903b85895fd5eca389d6897aa85c892e762f', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
+        // Generate a unique id for the title so we can reference it for aria-labelledby.
+        const titleId = `modal-title-${this.el.tagName.toLowerCase()}`;
+        return (hAsync("div", { key: 'cd976fb0cd0c0663279dcd4dbd5823e26b6c32f7', class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-50 flex`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, this.isOpen && (hAsync("div", { key: '40a2febed5d0ec15d5370183c97cfd05abd72007', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
             ,
-            onClick: () => this.close() })), hAsync("div", { key: 'd135a2d9eff1764b6335b9b16be54d8fec7d4112', class: `max-w-full absolute px-20 py-20 bg-inverse rounded-lg shadow-lg z-10 ${this.getModalPositionClasses()} grow justify-center` }, hAsync("div", { key: 'bc8ea6f95443f01d3e5b88953581e1f2eae4009c', class: "flex justify-between items-center border-b-2 border-softer pb-8" }, hAsync("span", { key: '872b9a4bf44db478d38f18d3459a816c119f352d', class: `f-heading-04 text-lighter ${this.getTruncateClass()}` }, this.title), hAsync("eds-button", { key: 'bdf27a3f564d295383985cb1f0ce7df7f13a97fb', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8" })), hAsync("div", { key: '600cc4d544d0a41d9d2be74aedbb0d2fe2028141', class: "pt-8" }, hAsync("slot", { key: '8ce560804a6d960b4075e4b6d1607dda6530c08d' })))));
+            onClick: () => this.close() })), hAsync("div", { key: '50f2c23d80a2007aca4d0a8911816141e43b71ee', class: `max-w-full absolute px-20 py-20 bg-inverse rounded-lg shadow-lg z-10 ${this.getModalPositionClasses()} grow justify-center` }, hAsync("div", { key: 'e1cba5879bc488a99b896c48c8a780336b2195e7', class: "flex justify-between items-center border-b-2 border-softer pb-8" }, hAsync("span", { key: '8f018e3d2890346d23e7dcb115676051048bcacb', id: titleId, class: `f-heading-04 text-lighter ${this.getTruncateClass()}` }, this.title), hAsync("eds-button", { key: '4ae4013dd45573648817ac95ee4370ed615aa6a0', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8" })), hAsync("div", { key: 'ac4e3d8f273d04ad02e0123c23b36b89bfc89db2', class: "pt-8" }, hAsync("slot", { key: '60917e9f750bfd7948e580acc817cffe6424608a' })))));
     }
     get el() { return getElement(this); }
     static get style() { return EdsModalStyle0; }
@@ -13466,7 +13388,7 @@ class EdsModal {
             "close": [64],
             "toggle": [64]
         },
-        "$listeners$": undefined,
+        "$listeners$": [[8, "keydown", "handleKeyDown"]],
         "$lazyBundleId$": "-",
         "$attrsToReflect$": []
     }; }
@@ -13506,7 +13428,7 @@ class EdsNavigator {
         linkElement.dispatchEvent(event);
     }
     render() {
-        return (hAsync("ul", { key: '1ab60197bbc9ee86d77134138744dce39df2aaa7', class: "flex lg:flex grow items-center justify-center gap-x-8" }, this.prevLabel && (hAsync("eds-link", { key: 'b29fd121d33c1e919d24a5d460d8d6864f1ff9db', label: this.prevLabel, url: this.prevUrl || undefined, disabled: !this.prevUrl, "aria-label": this.prevLabel, size: this.linkSize, intent: this.linkIntent, class: "mr-auto !p-8 lg:!pr-12" }, hAsync("eds-icon-wrapper", { key: '64620ccfaf2e006a6414bcd7e874a352b9d2d56b', icon: "chevron-left" }), this.prevLabel)), this.nextLabel && (hAsync("eds-link", { key: 'ae6425f0f01c8f5bcbdae27d9bea9dc3a5b09d3b', label: this.nextLabel, url: this.nextUrl || undefined, disabled: !this.nextUrl, "aria-label": this.nextLabel, size: this.linkSize, intent: this.linkIntent, class: "ml-auto !p-8 lg:!pl-12" }, this.nextLabel, hAsync("eds-icon-wrapper", { key: 'd286fc26f17ee6cf6828990e98df7865fbbfd352', icon: "chevron-right", class: "w-20 h-20" })))));
+        return (hAsync("ul", { key: '712287e683436cc98c2d6ef195501add1929522e', class: "flex lg:flex grow items-center justify-center gap-x-8" }, this.prevLabel && (hAsync("eds-link", { key: '4fda36ce37897284d7062f88133f147831d96a6f', label: this.prevLabel, url: this.prevUrl || undefined, disabled: !this.prevUrl, "aria-label": this.prevLabel, size: this.linkSize, intent: this.linkIntent, class: "mr-auto !p-8 lg:!pr-12" }, hAsync("eds-icon-wrapper", { key: '9bfa6bbbdc68641f65bec49f207d96f075b9a5b0', icon: "chevron-left" }), this.prevLabel)), this.nextLabel && (hAsync("eds-link", { key: '6ee8ebee011a2c30a74645b072c7c37929d0a55f', label: this.nextLabel, url: this.nextUrl || undefined, disabled: !this.nextUrl, "aria-label": this.nextLabel, size: this.linkSize, intent: this.linkIntent, class: "ml-auto !p-8 lg:!pl-12" }, this.nextLabel, hAsync("eds-icon-wrapper", { key: '44ebd4dcce0e367df7d9035bb445e49fde35e913', icon: "chevron-right", class: "w-20 h-20" })))));
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
@@ -13704,7 +13626,7 @@ class EdsPagination {
         }
     }
     render() {
-        return (hAsync("div", { key: '584e0918b070eac25a7c4bfceff59b000b60076c' }, this.total > 0 && this.mode === 'default' && (hAsync("p", { key: 'c688bd8e1f1d15904fc274454093f03213f59e38', class: "f-ui-03 text-lightest mb-28 w-full text-center" }, hAsync("span", { key: 'c2472919bad41f76e26d518da27509e545ed9db6', class: "sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (hAsync("nav", { "aria-label": "Pagination" }, hAsync("ul", { class: "flex items-center justify-center gap-x-8" }, hAsync("li", { class: "mr-auto" }, hAsync("eds-link", { label: this.prevLabel, url: this.mode === 'navigator'
+        return (hAsync("div", { key: '8c8418eec263acc153a928b752775458f897504f' }, this.total > 0 && this.mode === 'default' && (hAsync("p", { key: '02a5a69772a4812f10b29e8df117b72df210614d', class: "f-ui-03 text-lightest mb-28 w-full text-center" }, hAsync("span", { key: 'ef9804843100c722643c24e31a05f86f2d55efa0', class: "sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (hAsync("nav", { "aria-label": "Pagination" }, hAsync("ul", { class: "flex items-center justify-center gap-x-8" }, hAsync("li", { class: "mr-auto" }, hAsync("eds-link", { label: this.prevLabel, url: this.mode === 'navigator'
                 ? this.prevUrl || '#' // Use prevUrl if provided, otherwise disable with '#'
                 : this.isFirstPage()
                     ? '#'
@@ -13782,7 +13704,7 @@ class EdsProgressBar {
     }
     render() {
         const progressValue = this.value;
-        return (hAsync("div", { key: '3131f56034a9fd72ca51e448bc2bcc6281669b25', class: "outer w-full bg-default rounded-lg h-24 border border-softer overflow-hidden" }, hAsync("div", { key: 'f1665a254f8dbe1ccb9e512e5f2e7c1e5ab88c07', class: `inner h-full rounded-lg bg-accent transition-all duration-300 flex items-center justify-center text-default f-body-02`, style: { width: `${progressValue}%` } }, progressValue, "%")));
+        return (hAsync("div", { key: '0f47fedbf9d44887f65b399e184215f0937b1df1', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: "outer w-full bg-default rounded-lg h-24 border border-softer overflow-hidden" }, hAsync("div", { key: 'a2d095d778842c969832ea6b1ba7f7ef917d1390', class: `inner h-full rounded-lg bg-accent transition-all duration-300 flex items-center justify-center text-default f-body-02`, style: { width: `${progressValue}%` } }, progressValue, "%")));
     }
     static get style() { return EdsProgressBarStyle0; }
     static get cmpMeta() { return {
@@ -13798,7 +13720,7 @@ class EdsProgressBar {
     }; }
 }
 
-const edsRatingCss = ":host{display:inline-block;font-size:2rem}.stars{display:flex;gap:0.25rem;cursor:pointer}.star{color:var(--star-empty-color, #ccc);transition:color 0.2s ease-in-out}.star.filled{color:var(--green-500);}.star:hover,.star.filled:hover{transform:scale(1.2)}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-ui-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}";
+const edsRatingCss = ":host{display:inline-block;font-size:2rem}.stars{display:flex;gap:0.25rem;cursor:pointer}.star{color:var(--star-empty-color, #ccc);transition:color 0.2s ease-in-out}.star.filled{color:var(--green-500);}.star:hover,.star.filled:hover{transform:scale(1.2)}.f-heading-02{font-family:var(--f-heading-02-fontFamily);font-weight:var(--f-heading-02-fontWeight);font-size:var(--f-heading-02-fontSize);line-height:var(--f-heading-02-lineHeight);letter-spacing:var(--f-heading-02-letterSpacing)}.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)}.f-heading-06{font-family:var(--f-heading-06-fontFamily);font-weight:var(--f-heading-06-fontWeight);font-size:var(--f-heading-06-fontSize);line-height:var(--f-heading-06-lineHeight);letter-spacing:var(--f-heading-06-letterSpacing)}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-ui-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.mt-4{margin-top:0.25rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}";
 var EdsRatingStyle0 = edsRatingCss;
 
 class EdsRating {
@@ -13812,7 +13734,6 @@ class EdsRating {
     }
     /**
      * Parses the `textMapping` prop into an array of strings.
-     * Returns an empty array if parsing fails.
      */
     get parsedMappings() {
         if (typeof this.textMapping === 'object') {
@@ -13823,8 +13744,7 @@ class EdsRating {
                 return JSON.parse(this.textMapping);
             }
             catch (e) {
-                // eslint-disable-next-line
-                console.error('Error parsing textMapping prop:', e);
+                //console.error('Error parsing textMapping prop:', e);
                 return [];
             }
         }
@@ -13839,10 +13759,14 @@ class EdsRating {
         this.ratingChange.emit(rating);
     }
     render() {
-        return (hAsync("div", { key: 'c9147c2635f091d93f329d2b56a5fee8dce9126c', class: "relative w-full flex flex-col" }, hAsync("span", { key: '39a84bc3d9bcd4b729a35737c883eca7144d13ac', class: "f-body-01" }, this.label), hAsync("div", { key: '3cb84acf399cac0b23393c71df2f2b36aab4f43e', class: "stars" }, Array.from({ length: this.stars }, (_, index) => (hAsync("span", { class: {
-                star: true,
-                filled: index < this.selectedRating
-            }, onClick: () => this.handleClick(index + 1) }, "\u2605")))), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (hAsync("span", { key: '60605ec21b542825da0dad629fc1618d9cf63b25', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
+        return (hAsync("div", { key: 'b613863ad54ae9b381a5741bce4b188eff806ef0', class: "relative w-full flex flex-col" }, hAsync("span", { key: 'f35cef9c3691aab73995e2ca6e2554cc19bae837', class: "f-heading-05" }, this.label), hAsync("div", { key: '37082eb4bbadf5c211c197f3f81501d0b0e61404', role: "radiogroup", "aria-label": this.label, class: "stars flex space-x-2" }, Array.from({ length: this.stars }, (_, index) => {
+            const starRating = index + 1;
+            const isSelected = starRating <= this.selectedRating;
+            // Use the mapping text if available; otherwise, fall back to a generic label.
+            const mappingText = this.parsedMappings[starRating - 1] || `Rating ${starRating}`;
+            return (hAsync("eds-button", { label: "\u2605", role: "radio", "aria-checked": isSelected ? 'true' : 'false', "aria-label": mappingText, onClick: () => this.handleClick(starRating), tabIndex: this.selectedRating === 0 && index === 0 ? 0 : isSelected ? 0 : -1, intent: isSelected ? 'primary' : 'ghost', size: "small", "extra-class": "p-2" // Optional padding or styling for the star button
+            }));
+        })), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (hAsync("span", { key: '61b4b92e476cfa0dd9bf405cb080dedd995ff9c6', class: "f-ui-04 text-lighter mt-4" }, this.parsedMappings[this.selectedRating - 1]))));
     }
     static get style() { return EdsRatingStyle0; }
     static get cmpMeta() { return {
@@ -13882,7 +13806,7 @@ class EdsSectionCore {
     }
     render() {
         const TagType = this.tag; // Set dynamic tag type (div or section)
-        return (hAsync(TagType, { key: '849c35d9cd587cf14b0d6bc6efd1310a85d447f2' }, hAsync("eds-section-heading", { key: '7ed4486fcf6e7c653026869c9468be9471db1775', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), hAsync("slot", { key: '5d95ea6516ecaaab4e07a40b84cd20deb3d8d3b2' })));
+        return (hAsync(TagType, { key: 'e7ef9e7a589d8cde8aa54d73dff8421d74a7d0ac' }, hAsync("eds-section-heading", { key: '379c6bc644612d3e0865ce2acd8eacb4d67c7769', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), hAsync("slot", { key: '5828a28c2c8ac65fbc56652f733f148a0d0198b7' })));
     }
     static get style() { return EdsSectionCoreStyle0; }
     static get cmpMeta() { return {
@@ -13934,12 +13858,12 @@ class EdsSectionHeading {
     render() {
         const TagType = this.tag; // Dynamically set tag type for the container
         const HeadingTag = this.headingLevel; // Dynamically set heading level
-        return (hAsync(TagType, { key: '2c6466c0a02bf8598153c18eafb37affc3dac395', class: {
+        return (hAsync(TagType, { key: 'c15f83f8aaa4fb01c884fb1390965fcf9dbd61fb', class: {
                 'ui-section-header flex flex-wrap items-center justify-between gap-x-12 gap-y-8 pb-20': true,
                 container: this.withContainer,
                 'pt-48': this.spacingLarge,
                 'pt-28': !this.spacingLarge
-            } }, hAsync(HeadingTag, { key: 'fc7f0f09e02e8c63697e46811c465792497126e0', class: this.getHeadingClass() }, this.sectionTitle)));
+            } }, hAsync(HeadingTag, { key: 'e65e13820553eefa5aec8bc9740e5e9da828ac92', class: this.getHeadingClass() }, this.sectionTitle)));
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -14015,7 +13939,7 @@ class EdsSocialNetworks {
      * @returns {JSX.Element} The rendered JSX for the component.
      */
     render() {
-        return (hAsync("div", { key: 'a6a3e2084eb01def71f6fee67ebe8c5f4f613c89' }, hAsync("p", { key: '43b92e9c33f8abef6070a6a3cd77f7573e2ab454', class: "f-ui-02" }, this.title), hAsync("ul", { key: 'c0e0dfdeff373885f62250c8bf4385268410406c', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (hAsync("li", { key: index }, hAsync("eds-link", { "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm", external: true, "aria-label": network.label, url: network.url, icon: network.icon, intent: "strong" })))))));
+        return (hAsync("div", { key: '615a7cb2c26060d2d4cde875291a081b7de12e19' }, hAsync("p", { key: '9e19ad59fcc94508cb60cd4aafa87c3878fb2ebc', class: "f-ui-02" }, this.title), hAsync("ul", { key: 'a4811d16447ab148a7c129f188405f3f7050df70', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (hAsync("li", { key: index }, hAsync("eds-link", { "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm", external: true, "aria-label": network.label, url: network.url, icon: network.icon, intent: "strong" })))))));
     }
     static get style() { return EdsSocialNetworksStyle0; }
     static get cmpMeta() { return {
@@ -14030,6 +13954,76 @@ class EdsSocialNetworks {
     }; }
 }
 
+const edsStepsCss = ".steps{position:sticky;margin-left:16px;margin-bottom:12px;border-left:1px solid var(--soft-color, #ddd);padding-left:24px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4{counter-increment:step;font-size:1.125rem;font-weight:500;position:relative;margin-top:1em;margin-bottom:1em}.steps h4::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}";
+var EdsStepsStyle0 = edsStepsCss;
+
+class EdsSteps {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.stepClick = createEvent(this, "stepClick", 7);
+        this.handleNext = () => {
+            if (this.activeStep < this.parsedSteps.length) {
+                this.activeStep = this.activeStep + 1;
+            }
+        };
+        this.handleBack = () => {
+            if (this.activeStep > 0) {
+                this.activeStep = this.activeStep - 1;
+            }
+        };
+        this.handleReset = () => {
+            this.activeStep = 0;
+        };
+        this.steps = [];
+        this.type = 'static';
+        this.activeStep = 0;
+    }
+    handleStepClick(index) {
+        this.stepClick.emit(index);
+        // In linear mode, update the active step on header click.
+        if (this.type === 'linear') {
+            this.activeStep = index;
+        }
+    }
+    /**
+     * Parse the JSON string into an array of steps.
+     */
+    get parsedSteps() {
+        if (typeof this.steps === 'string') {
+            try {
+                const stepsStr = this.steps;
+                return JSON.parse(stepsStr);
+            }
+            catch (error) {
+                //console.error('Invalid steps JSON', error);
+                return [];
+            }
+        }
+        return this.steps;
+    }
+    render() {
+        const steps = this.parsedSteps;
+        if (this.type === 'linear') {
+            return (hAsync("div", null, hAsync("div", { class: "steps" }, steps.map((step, index) => (hAsync("div", { class: "step mb-28", key: index }, hAsync("h3", { onClick: () => this.handleStepClick(index) }, step.title), this.activeStep === index && (hAsync("div", { class: "content" }, hAsync("div", { class: "f-body-02 text-lighter my-16" }, step.content), hAsync("eds-button", { label: index === steps.length - 1 ? 'Finish' : 'Continue', class: "next-btn", onClick: this.handleNext }), hAsync("eds-button", { label: "Back", intent: "ghostInverse", onClick: this.handleBack, disabled: index === 0, "extra-class": index === 0 ? 'hidden' : 'ml-8 block' }))))))), this.activeStep === steps.length && (hAsync("div", { class: "completed" }, hAsync("eds-alert", { intent: "success", message: "All steps completed - you're finished!" }), hAsync("eds-button", { label: "Start again", onClick: this.handleReset, "extra-class": "mt-4" })))));
+        }
+        // Static mode: show all steps with their content, no navigation buttons.
+        return (hAsync("div", { class: "steps" }, steps.map((step, index) => (hAsync("div", { class: "step mb-28", key: index }, hAsync("h3", null, step.title), hAsync("div", { class: "content" }, hAsync("div", { class: "f-body-02 text-lighter my-16" }, step.content)))))));
+    }
+    static get style() { return EdsStepsStyle0; }
+    static get cmpMeta() { return {
+        "$flags$": 0,
+        "$tagName$": "eds-steps",
+        "$members$": {
+            "steps": [1],
+            "type": [1],
+            "activeStep": [32]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
 /**
  * @internal
  */
@@ -14058,7 +14052,7 @@ class EdsSvgRepository {
             icon: { format: 'svg' },
             name: { format: 'bold' }
         };
-        return (hAsync("eds-table", { key: 'a1d4a1db6f0886a43513fc34707cdd6140ab685d', data: JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true, "host-width": this.hostWidth }));
+        return (hAsync("eds-table", { key: 'a7d7fa426da72e174880a300202390c1016b74df', data: JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true, "host-width": this.hostWidth }));
     }
     get hostEl() { return getElement(this); }
     static get cmpMeta() { return {
@@ -14071,6 +14065,50 @@ class EdsSvgRepository {
     }; }
 }
 
+const edsSwitchCss = ":host{display:inline-block}.switch-container{display:inline-flex;align-items:center}.switch-label{font-size:14px;margin:0 8px}button.switch{position:relative;display:inline-flex;align-items:center;width:50px;height:26px;border:none;border-radius:13px;background-color:#ccc;padding:0;cursor:pointer;transition:background-color 0.2s}button.switch:focus{outline:none;box-shadow:0 0 0 2px #007aff}button.switch.switch--checked{background-color:var(--green-500)}button.switch.switch--disabled{opacity:0.6;cursor:not-allowed}.switch-handle{position:absolute;width:22px;height:22px;border-radius:50%;background-color:#fff;top:2px;left:2px;transition:transform 0.2s}button.switch.switch--checked .switch-handle{transform:translateX(24px)}";
+var EdsSwitchStyle0 = edsSwitchCss;
+
+class EdsSwitch {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.change = createEvent(this, "change", 7);
+        this.toggleSwitch = () => {
+            if (this.disabled) {
+                return;
+            }
+            this.checked = !this.checked;
+            this.change.emit(this.checked);
+        };
+        this.checked = false;
+        this.disabled = false;
+        this.labelOn = '';
+        this.labelOff = '';
+    }
+    render() {
+        // Compute an accessible name based on state.
+        const accessibleLabel = this.labelOn || this.labelOff ? (this.checked ? this.labelOn : this.labelOff) : 'Toggle switch';
+        return (hAsync("div", { key: 'd4c727cbb562921b2bcba269e84f25c359c7061b', class: "switch-container" }, this.labelOff && hAsync("span", { key: '90b18fff27bd21501466deb5879e5fe6ff607043', class: "switch-label switch-label--off" }, this.labelOff), hAsync("button", { key: '8675f5d9f972d3932710fa7f9b28f74f95a83003', type: "button", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": accessibleLabel, class: {
+                switch: true,
+                'switch--checked': this.checked,
+                'switch--disabled': this.disabled
+            }, onClick: this.toggleSwitch, disabled: this.disabled }, hAsync("span", { key: '26aa30a01b10419c1665b1fd58b5696a02d1504a', class: "switch-handle" })), this.labelOn && hAsync("span", { key: '3680d67555e9193a97e129c0639b411263e070a8', class: "switch-label switch-label--on" }, this.labelOn)));
+    }
+    static get style() { return EdsSwitchStyle0; }
+    static get cmpMeta() { return {
+        "$flags$": 9,
+        "$tagName$": "eds-switch",
+        "$members$": {
+            "checked": [1540],
+            "disabled": [4],
+            "labelOn": [1, "label-on"],
+            "labelOff": [1, "label-off"]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": [["checked", "checked"]]
+    }; }
+}
+
 /**
  * @internal
  */
@@ -14102,7 +14140,7 @@ class EdsTab {
         this.ariaLabel = undefined;
     }
     render() {
-        return (hAsync("a", { key: 'ba4c995637d8d305249f018a0451775f45907716', "aria-label": this.label, "aria-current": this.active, class: this.tabCva({ active: this.active }) }, this.label));
+        return (hAsync("a", { key: 'a55be2a07e554ab13a0d7e913710382d6126da57', "aria-label": this.label, "aria-current": this.active, class: this.tabCva({ active: this.active }) }, this.label));
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -14280,15 +14318,15 @@ class EdsTable {
                     ? this.hostEl.getRootNode().host.getBoundingClientRect().width
                     : 400;
         const columnWidth = visibleColumnsCount > 0 ? Math.floor((containerWidth / visibleColumnsCount) * this.divisionFactor()) : 100;
-        return (hAsync("div", { key: '69fd87330d2049eeb91751c781c7aa753fa89883' }, this.searchEnabled && (hAsync("div", { key: '2f9680dd17b852b140fe560f7979e1dd58236c5a' }, hAsync("eds-input-field", { key: 1, name: "search", "aria-label": "Search", type: "text", placeholder: "Search...",
+        return (hAsync("div", { key: '66ca59804bc8054655ed0d942104516fe4cd259b' }, this.searchEnabled && (hAsync("div", { key: 'df7267fc443da042e4b6ff81ded5800a2213bd73' }, hAsync("eds-input-field", { key: 1, name: "search", "aria-label": "Search", type: "text", placeholder: "Search...",
             // @ts-ignore
-            onInput: (event) => this.handleSearch(event) }))), hAsync("div", { key: 'd67edb24308e526a3e860a90250d58cf8bfee9c8', class: "mt-20" }, hAsync("table", { key: '9a2ef219110e459ac670a0f9c2e62c600f6b5acd', class: "block overflow-x-auto mt-6 p-0" }, hAsync("thead", { key: '81bae222447e805d06642dda19903d5bf99f2b01' }, hAsync("tr", { key: '582d7ea661823b81ccdf3adc9769fe53cf56f04c', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
+            onInput: (event) => this.handleSearch(event) }))), hAsync("div", { key: '80ac1fcb3802f9f5d5eabe016fb7345b88908b36', class: "mt-20" }, hAsync("table", { key: '09acf39378b1a4c8bfe40b496ec6bf71a2d761ca', class: "block overflow-x-auto mt-6 p-0" }, hAsync("thead", { key: '8b844806cfef10d1a59da54a385ee8ed6c167050' }, hAsync("tr", { key: '1b3cff91bdaf225e9f3b337e245cd80ad4772b6a', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
             var _a;
-            return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && (hAsync("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth}px` } }, column));
-        }))), hAsync("tbody", { key: 'ce7f87e665c394c5e9f2201ef2658e888ea07948' }, paginatedRows.map((row) => (hAsync("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
+            return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && (hAsync("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 5}px` } }, column));
+        }))), hAsync("tbody", { key: '93dfd3abd196779c288f85bb6a357ad3e9c01418' }, paginatedRows.map((row) => (hAsync("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
             var _a;
-            return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && (hAsync("td", { class: "text-center border border-softer m-0 py-8 f-ui-2 break-words", style: { minWidth: `${columnWidth}px` } }, this.renderCell(row[column], column)));
-        }))))))), this.shouldEnablePagination() && (hAsync("div", { key: '0fe6aed0d03c3aa491cd1bb17cd3bdc1e35372a0', class: "mt-20" }, hAsync("eds-pagination", { key: '5192f3f4b2ee93d5864d1afed3341a122c826d97', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
+            return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && (hAsync("td", { class: "text-center border border-softer m-0 py-8 f-ui-2 break-words", style: { minWidth: `${columnWidth - 5}px` } }, this.renderCell(row[column], column)));
+        }))))))), this.shouldEnablePagination() && (hAsync("div", { key: '516b65d78a9ea91060c1dfcb3306bbd3ac2c6f58', class: "mt-20" }, hAsync("eds-pagination", { key: 'abe3a593827d99437a06e204ea9d8ef92f80aba7', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
     }
     get hostEl() { return getElement(this); }
     static get watchers() { return {
@@ -14452,7 +14490,7 @@ class EdsTabs {
         });
     }
     render() {
-        return (hAsync("div", { key: '540bb667084b36ae2151ec39ef6b54a9ac6a4c4a', id: `${this.id}`, class: "after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']" }, hAsync("div", { key: 'f0266d39c943b82725ded757cce0b35fb85fa874', class: "scroller-x overflow-x-auto max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28" }, hAsync("nav", { key: 'fcedf94e6f6c14635291d9c8e6d672efc8055433', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
+        return (hAsync("div", { key: 'f5c9e076fc1fb95b57e0148d85865ce62c14fbe7', id: `${this.id}`, class: "after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']" }, hAsync("div", { key: '7d382167fb62999e39b784ce8bfba24267c87a64', class: "scroller-x overflow-x-auto max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28" }, hAsync("nav", { key: '99bbfabd817bada1984ddf87a274bf9304a1e6a0', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
             //const TabComponent = tab.active ? 'span' : 'a';
             const tabProps = this.getTabOptions(tab.active, index);
             return (hAsync("eds-tab", Object.assign({}, tabProps, { label: tab.label || tab.ariaLabel, url: tab.url, active: index === this.activeIndex, onClick: () => this.handleTabClick(index, tab.label) })));
@@ -14594,11 +14632,11 @@ class EdsTabsContent {
         });
     }
     render() {
-        return (hAsync("div", { key: '7bc954d9251bd15b5e3a49d5c74b83805f802b07', class: "after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']" }, hAsync("div", { key: '1bfda380604f1eae1cc5be147a5e3e6b537e0396', class: "scroller-x max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28" }, hAsync("nav", { key: 'b2ed26b52fd629ec99b01c7dc8e612eae4f3886d', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
+        return (hAsync("div", { key: 'aa94a55d3ae658797df6ae75724238a17a80a169', class: "after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']" }, hAsync("div", { key: '0e38c695467c272198a605efdb2705b14239756e', class: "scroller-x max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28" }, hAsync("nav", { key: '525f56d02b41e236d3b713fb972b6803e3f908d5', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
             //const TabComponent = tab.active ? 'span' : 'a';
             const tabProps = this.getTabOptions(tab.active, index);
             return (hAsync("eds-tab", Object.assign({}, tabProps, { label: tab.label, url: tab.url, active: index === this.activeIndex, ariaLabel: tab.ariaLabel, onClick: () => this.handleTabClick(index, tab.label) })));
-        })), hAsync("slot", { key: '5072b877786a23358d540d6d242d5fbdb3c63d7f' }))));
+        })), hAsync("slot", { key: 'e5da088cec99dd0e40560b70fbd9940ac5a7f56f' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -14653,6 +14691,7 @@ class EdsTag {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.label = undefined;
+        this.ariaLabel = '';
         this.intent = 'default';
     }
     /**
@@ -14660,8 +14699,10 @@ class EdsTag {
      * @returns The rendered HTML for the tag component with the applied styles and label.
      */
     render() {
+        var _a;
         const classes = tagStyles({ intent: this.intent });
-        return hAsync("span", { key: '546bd7eb2c78760edc12cd7bb3ede5f6ab9099f3', class: classes }, this.label);
+        const accessibleLabel = ((_a = this.ariaLabel) === null || _a === void 0 ? void 0 : _a.length) ? this.ariaLabel : this.label;
+        return (hAsync("span", { key: '6a517f42aeb641c95d96ecd6c3090a317a3195c6', class: classes, "aria-label": accessibleLabel }, this.label));
     }
     static get style() { return EdsTagStyle0; }
     static get cmpMeta() { return {
@@ -14669,6 +14710,7 @@ class EdsTag {
         "$tagName$": "eds-tag",
         "$members$": {
             "label": [1],
+            "ariaLabel": [1, "aria-label"],
             "intent": [1]
         },
         "$listeners$": undefined,
@@ -14735,7 +14777,7 @@ class EdsTimeline {
         }
     }
     render() {
-        return (hAsync("div", { key: '6016cb89d3fe3250482b42d8a0bf500fe18cee5d', class: "max-w-sidebar mx-auto px-4 py-8" }, hAsync("div", { key: '994cc7af75950a0f09d108804efff796602aeb93', class: "relative" }, hAsync("div", { key: '77b15ae60feb380ea20c6466b49d0efd5d8f5180', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), hAsync("div", { key: '60bb384ce4eedd7bfc3b15a7a637e2b89318d619', class: "space-y-16" }, this.parsedEvents.map((event, index) => (hAsync("div", { class: "relative flex" }, hAsync("div", { class: `w-1/2 ${index % 2 === 0 ? 'pr-4' : ''}` }, index % 2 === 0 && (hAsync("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 (hAsync("div", { key: '1ba4a93ce518b52f5821af75ae0587c44db92c6d', class: "max-w-sidebar mx-auto px-4 py-8" }, hAsync("div", { key: '3e019420ddd4bfab7800567c7130299ea47205c6', class: "relative" }, hAsync("div", { key: 'df99ce8fb08232c46449d7485dd7cffcd04b64d6', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), hAsync("div", { key: '1b52694d2e8c3656910c02680aa8ce2e78b02997', class: "space-y-16" }, this.parsedEvents.map((event, index) => (hAsync("div", { class: "relative flex" }, hAsync("div", { class: `w-1/2 ${index % 2 === 0 ? 'pr-4' : ''}` }, index % 2 === 0 && (hAsync("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: 'completed', style: 'accent' }]
                 : [{ label: 'pending', style: 'default' }]), onClick: () => this.handleEventClick(event) }))), hAsync("div", { class: "flex items-center justify-center relative" }, event.completed ? (hAsync("div", { class: "w-32 h-32 bg-accent rounded-full shadow flex items-center justify-center" })) : (hAsync("div", { class: "w-32 h-32 bg-strong rounded-full shadow flex items-center justify-center" }))), hAsync("div", { class: `w-1/2 ${index % 2 !== 0 ? 'pl-4' : ''}` }, index % 2 !== 0 && (hAsync("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: 'completed', style: 'accent' }]
@@ -14820,7 +14862,7 @@ class EdsToast {
             return null;
         }
         const classes = toastStyles({ intent: this.intent });
-        return (hAsync("div", { class: classes }, hAsync("div", { class: "flex items-center justify-between gap-4" }, hAsync("p", { class: "f-ui-01" }, this.message), hAsync("eds-button", { intent: "tertiary", icon: "close", "aria-label": "Close Toast", onClick: () => this.dismissToast(), "extra-class": "ml-8" }))));
+        return (hAsync("div", { class: classes, role: "alert", "aria-live": "assertive" }, hAsync("div", { class: "flex items-center justify-between gap-4" }, hAsync("p", { class: "f-ui-01" }, this.message), hAsync("eds-button", { intent: "tertiary", icon: "close", "aria-label": "Close Toast", onClick: () => this.dismissToast(), "extra-class": "ml-8" }))));
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
@@ -14870,7 +14912,7 @@ class EdsToastManager {
         this.toasts = this.toasts.filter((t) => t.id !== id);
     }
     render() {
-        return (hAsync("div", { key: '459148404380e386117387f42183e24a069b2de6', class: "toast-container" }, this.toasts.map((t) => (hAsync("div", { key: t.id }, hAsync("eds-toast", { message: t.message, intent: t.intent, onClick: () => this.removeToast(t.id) }))))));
+        return (hAsync("div", { key: '22cb79fd617ca1701fba63d3d4bf04f73ce1ac77', class: "toast-container" }, this.toasts.map((t) => (hAsync("div", { key: t.id }, hAsync("eds-toast", { message: t.message, intent: t.intent, onClick: () => this.removeToast(t.id) }))))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return EdsToastManagerStyle0; }
@@ -14980,7 +15022,7 @@ class EdsTooltip {
         }
     }
     render() {
-        return (hAsync("div", { key: '673ab0ee31378410f9c83bb5fd37b27d00a7b018', class: "relative" }, hAsync("slot", { key: '0c0138dfdf9aafecc1e0e925c84d4b0ca957f82d' }), this.isVisible && this.isPositioned && this.content && (hAsync("div", { key: '798d01cf631f2e5b3af9d9bb11a847041a6ee2ba', class: "rounded-xs bg-strongest text-inverse f-ui-03-light pointer-events-none absolute z-10 whitespace-nowrap p-6", role: "tooltip", style: {
+        return (hAsync("div", { key: '1635b034319df4827a62ed58267d81db277ad19d', class: "relative" }, hAsync("slot", { key: '6cdfd0f6d456b984464c5091a2829cdba69ba895' }), this.isVisible && this.isPositioned && this.content && (hAsync("div", { key: '7e736731dc700e0273fdfe15202426d2db086aef', class: "rounded-xs bg-strongest text-inverse f-ui-03-light pointer-events-none absolute z-10 whitespace-nowrap p-6", role: "tooltip", style: {
                 top: this.tooltipStyle.top,
                 left: this.tooltipStyle.left,
                 transform: this.tooltipStyle.transform
@@ -15047,7 +15089,7 @@ class EdsTrl {
             Application: { format: 'code' },
             'Current TRL Stage': { format: 'text' }
         };
-        return (hAsync("div", { key: '868a7c45e6495d7a2ed8a4ad2974ac31f74535a6', class: "container mx-auto px-4 py-8" }, hAsync("eds-table", { key: 'ed3e2a949d0e1d66a5e80018fa5fcac9bbe64620', data: JSON.stringify(tableData), config: JSON.stringify(tableConfig), "rows-per-page": "2", "pagination-enabled": "true", "search-enabled": "true", "column-size": "default" })));
+        return (hAsync("div", { key: 'a329a001d6275fcfe7df9bddf83bd289effe4151', class: "container mx-auto px-4 py-8" }, hAsync("eds-table", { key: '93aebfd840b16416789b15eec0daa16d9126aa9f', data: JSON.stringify(tableData), config: JSON.stringify(tableConfig), "rows-per-page": "2", "pagination-enabled": "true", "search-enabled": "true", "column-size": "default" })));
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -15079,15 +15121,25 @@ class EdsUser {
          */
         this.handleLogin = () => {
             if (!this.authenticated) {
-                login();
+                try {
+                    login();
+                }
+                catch (error) {
+                    toast.show(error.message, 'error');
+                }
             }
         };
         /**
          * Handles user logout by invoking the Keycloak `logout` function.
          * Resets the `authenticated` state to `false` after logout.
          */
-        this.handleLogout = () => {
-            logout();
+        this.handleLogout = async () => {
+            try {
+                await logout();
+            }
+            catch (error) {
+                toast.show(error.message, 'error');
+            }
             this.authenticated = false;
             this.user = null;
         };
@@ -15096,8 +15148,8 @@ class EdsUser {
         this.keycloakClientId = undefined;
         this.user = null;
         this.authenticated = false;
-        this.serverAvailable = false;
         this.username = '';
+        this.serverAvailable = false;
     }
     /**
      * Lifecycle method that runs when the component is about to load.
@@ -15112,7 +15164,7 @@ class EdsUser {
         }
         this.serverAvailable = await checkServerAvailability(`${this.keycloakUrl}/realms/${this.keycloakRealm}`);
         if (!this.serverAvailable) {
-            //toast.show('Keycloak server is unavailable.', 'error');
+            toast.show('Keycloak server is unavailable.', 'error');
             return; // Do not proceed further
         }
         await this.initAuth();
@@ -15124,35 +15176,27 @@ class EdsUser {
      */
     async initAuth() {
         try {
-            const keycloakConfig = {
+            await initKeycloak({
                 url: this.keycloakUrl,
                 realm: this.keycloakRealm,
                 clientId: this.keycloakClientId
-            };
-            await initKeycloak(keycloakConfig, true);
-            // Set authentication state and fetch user data if authenticated
-            //this.authenticated = isAuthenticated();
+            }, true);
             if (isAuthenticated()) {
                 this.user = getUser();
                 this.authenticated = true;
+                this.authStatusChanged.emit({
+                    authenticated: this.authenticated,
+                    user: this.user
+                }); // Emit auth status change
             }
-            this.authStatusChanged.emit({
-                authenticated: this.authenticated,
-                user: this.user
-            }); // Emit auth status change
         }
         catch (error) {
-            // eslint-disable-next-line
-            console.error('Keycloak initialization failed:', error);
+            toast.show(error.message, 'error');
         }
     }
     render() {
         var _a;
-        // If the server is unavailable, render null
-        if (!this.serverAvailable) {
-            return null;
-        }
-        return (hAsync("div", { class: "block" }, !this.authenticated ? (hAsync("eds-button", { label: "Login", intent: "primary", onClick: this.handleLogin, "extra-class": "text-default" })) : (hAsync("div", { class: "flex items-center" }, hAsync("eds-dropdown", { label: `Welcome, ${(_a = this.user) === null || _a === void 0 ? void 0 : _a.username}`, intent: "tertiary", "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: "chevron-down", class: "text-default" }, hAsync("eds-user-modal", { user: JSON.stringify(this.user), onLogout: this.handleLogout.bind(this) }))))));
+        return (hAsync("div", { key: '22ee744979511dd2f8a1e1a15bb99215eadd535b', class: "block" }, !this.authenticated ? (hAsync("eds-button", { label: "Login", intent: "primary", onClick: this.handleLogin, "extra-class": "text-default" })) : (hAsync("div", { class: "flex items-center" }, hAsync("eds-dropdown", { label: `Welcome, ${(_a = this.user) === null || _a === void 0 ? void 0 : _a.username}`, intent: "tertiary", "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: "chevron-down", class: "text-default" }, hAsync("eds-user-modal", { user: JSON.stringify(this.user), onLogout: this.handleLogout.bind(this) }))))));
     }
     get hostEl() { return getElement(this); }
     static get cmpMeta() { return {
@@ -15164,8 +15208,8 @@ class EdsUser {
             "keycloakClientId": [1, "keycloak-client-id"],
             "user": [32],
             "authenticated": [32],
-            "serverAvailable": [32],
-            "username": [32]
+            "username": [32],
+            "serverAvailable": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -15205,7 +15249,7 @@ class EdsUserModal {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (hAsync("div", { key: 'ad99ddd7c2710ef90840a5571ab6a161178cacc0', class: "min-w-[280px] p-8" }, hAsync("div", { key: 'd1da12f3a965fa7503fb3e00566db0796b803352', class: "flex gap-x-16 pb-16 border-b-2 border-softer" }, hAsync("eds-avatar", { key: 'c3d3ca80a9d23cc88f8ee6801b29995138c9b7c6', "first-name": (_a = this.parsedUser) === null || _a === void 0 ? void 0 : _a.firstname, "last-name": (_b = this.parsedUser) === null || _b === void 0 ? void 0 : _b.lastname, initials: this.initials, color: "grey", rounded: true, "initials-strong": true }), hAsync("div", { key: '4efe378b3a9ce76d35e642db150be13d0434db72', class: "max-w-full" }, ((_c = this.parsedUser) === null || _c === void 0 ? void 0 : _c.fullname) && (hAsync("p", { key: '1068082a2894e3c3e3f77d1eea923f9c39d8766c', class: "f-ui-01 text-default w-full text-ellipsis" }, this.parsedUser.fullname)), ((_d = this.parsedUser) === null || _d === void 0 ? void 0 : _d.username) && hAsync("p", { key: 'b86e08b806a37c9957bca7f9ee268303e7ace134', class: "f-ui-03-light text-light mt-4" }, this.parsedUser.username), ((_e = this.parsedUser) === null || _e === void 0 ? void 0 : _e.email) && hAsync("p", { key: 'b3514920e1eb4906cb7f7705bfbc986166e84946', class: "f-ui-03-light text-light mt-4" }, this.parsedUser.email))), hAsync("div", { key: '61941fa0a19a19087da886a73d85d7e438d2c0b0', class: "text-default mt-16 flex w-full flex-col gap-y-8" }, hAsync("div", { key: '5ad2be1763726c9d794b78a2593106fd8ba1dc7b', class: "border-softer mb-10 border-b-2 pb-16" }, hAsync("eds-link", { key: 'dbe3a9de56bf5ccc26426ddb831f2d1a27a0e6ff', label: "My EBRAINS", "aria-label": "My EBRAINS", url: "https://www.ebrains.eu/dashboard", intent: "primary", "extra-class": "w-full", external: true })), hAsync("eds-link", { key: 1, label: "Account Settings", url: "https://iam.ebrains.eu/auth/realms/hbp/account/", intent: "secondary", icon: "arrow-diagonal", external: true, "extra-class": "w-full" }), this.hasLogout && (hAsync("eds-link", { key: '642890827e2fa6735bc616e680dbda481c2c0053', label: "Sign out", intent: "tertiary", "extra-class": "w-full justify-center", onClick: () => this.onLogout && this.onLogout() })))));
+        return (hAsync("div", { key: '4a80335b6a59b9653130ca75a6e42c04fce68f4f', class: "min-w-[280px] p-8" }, hAsync("div", { key: '9c97f6be46216587692d4852174cecfaacb70593', class: "flex gap-x-16 pb-16 border-b-2 border-softer" }, hAsync("eds-avatar", { key: 'c778f6bdfb21068ca7c2deff6e298f61af6dbc67', "first-name": (_a = this.parsedUser) === null || _a === void 0 ? void 0 : _a.firstname, "last-name": (_b = this.parsedUser) === null || _b === void 0 ? void 0 : _b.lastname, initials: this.initials, color: "grey", rounded: true, "initials-strong": true }), hAsync("div", { key: '7f453546c9cc54597069abb3e4b50312fe7bf364', class: "max-w-full" }, ((_c = this.parsedUser) === null || _c === void 0 ? void 0 : _c.fullname) && (hAsync("p", { key: '34e080ef159535820c09378701de0e6f4fd96009', class: "f-ui-01 text-default w-full text-ellipsis" }, this.parsedUser.fullname)), ((_d = this.parsedUser) === null || _d === void 0 ? void 0 : _d.username) && hAsync("p", { key: '2f85764e7d015dc3f3b22ca8a07126f8f57216ef', class: "f-ui-03-light text-light mt-4" }, this.parsedUser.username), ((_e = this.parsedUser) === null || _e === void 0 ? void 0 : _e.email) && hAsync("p", { key: '002dec51e979c29f2343f55e004449e4cee4075c', class: "f-ui-03-light text-light mt-4" }, this.parsedUser.email))), hAsync("div", { key: '740b78c504257fb755ba7ba04dd25f023d37ed33', class: "text-default mt-16 flex w-full flex-col gap-y-8" }, hAsync("div", { key: 'ac307937bdd3fc86cce502e5eeb3e922d931f418', class: "border-softer mb-10 border-b-2 pb-16" }, hAsync("eds-link", { key: 'bdd0f1ef62ac78ffb1b40ed6873475df360cec66', label: "My EBRAINS", "aria-label": "My EBRAINS", url: "https://www.ebrains.eu/dashboard", intent: "primary", "extra-class": "w-full", external: true })), hAsync("eds-link", { key: 1, label: "Account Settings", url: "https://iam.ebrains.eu/auth/realms/hbp/account/", intent: "secondary", icon: "arrow-diagonal", external: true, "extra-class": "w-full" }), this.hasLogout && (hAsync("eds-link", { key: 'd73016ad71f3b356b7fb7d0a2a84124eabb05da5', label: "Sign out", intent: "tertiary", "extra-class": "w-full justify-center", onClick: () => this.onLogout && this.onLogout() })))));
     }
     static get watchers() { return {
         "user": ["parseUserProp"],
@@ -15227,6 +15271,55 @@ class EdsUserModal {
     }; }
 }
 
+const edsVerticalStepperCss = ":host{display:block}.stepper-container{margin:0 auto}.stepper{position:sticky;margin-left:16px;margin-bottom:12px;border-left:1px solid var(--soft-color, #ddd);padding-left:24px;counter-reset:step}.step{margin-bottom:24px}.step-label{counter-increment:step;font-size:1.25rem;font-weight:600;position:relative;margin-top:1em;margin-bottom:1em}.step-label::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.optional{font-size:0.8rem;color:#888;margin-left:8px}.step-content{margin-top:8px}.step-buttons{margin-top:12px}.step-buttons button{margin-right:8px;padding:6px 12px;font-size:0.875rem}.completed{padding:16px;border:1px solid #ddd;margin-top:16px;text-align:center}";
+var EdsVerticalStepperStyle0 = edsVerticalStepperCss;
+
+class EdsVerticalStepper {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.handleNext = () => {
+            if (this.activeStep < this.parsedSteps.length) {
+                this.activeStep = this.activeStep + 1;
+            }
+        };
+        this.handleBack = () => {
+            if (this.activeStep > 0) {
+                this.activeStep = this.activeStep - 1;
+            }
+        };
+        this.handleReset = () => {
+            this.activeStep = 0;
+        };
+        this.steps = '[]';
+        this.activeStep = 0;
+    }
+    get parsedSteps() {
+        try {
+            return JSON.parse(this.steps);
+        }
+        catch (error) {
+            //console.error('Invalid steps JSON', error);
+            return [];
+        }
+    }
+    render() {
+        const steps = this.parsedSteps;
+        return (hAsync("div", { key: '08fa2f85c49dbe217b2f9d068bee486e432f5315', class: "stepper-container" }, hAsync("div", { key: '6f7e0a0ccaa2882794a6be0216201d1bf924e2b2', class: "stepper" }, steps.map((step, index) => (hAsync("div", { class: "step", key: index }, hAsync("div", { class: "step-label" }, hAsync("span", null, step.label), index === steps.length - 1 && hAsync("span", { class: "f-ui-03 text-lightest ml-4" }, "(Last step)")), this.activeStep === index && (hAsync("div", { class: "step-content" }, hAsync("p", null, step.description), hAsync("div", { class: "step-buttons" }, hAsync("eds-button", { label: index === steps.length - 1 ? 'Finish' : 'Continue', class: "next-btn", onClick: this.handleNext }), hAsync("eds-button", { label: "Back", intent: "ghostInverse", onClick: this.handleBack, disabled: index === 0, "extra-class": index === 0 ? 'hidden' : 'ml-8 block' })))))))), this.activeStep === steps.length && (hAsync("div", { key: '8a5ebfed582b25d828758e1762a063df6c745093', class: "" }, hAsync("eds-alert", { key: 'a142fb50b8df533dd97f770aeaa453f2379ea7cb', intent: "success", message: "All steps completed - you're finished!" }), hAsync("eds-button", { key: '5cfba059c9a152f179e7c31fa5d7a222c00defe2', label: "Start again", onClick: this.handleReset, "extra-class": "mt-4" })))));
+    }
+    static get style() { return EdsVerticalStepperStyle0; }
+    static get cmpMeta() { return {
+        "$flags$": 9,
+        "$tagName$": "eds-vertical-stepper",
+        "$members$": {
+            "steps": [1],
+            "activeStep": [32]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
 /**
  * @internal
  */
@@ -15262,7 +15355,7 @@ class GradientPrimaryPalette {
         ];
     }
     render() {
-        return (hAsync("ul", { key: '922dbe263e6db86ed17d98d65d38e1d6f4ef25df', class: "gap-y-8 md:gap-y-12 lg:gap-y-16", style: {
+        return (hAsync("ul", { key: '783eb92c379de99659e65e7cb02a1f0ca9df8758', class: "gap-y-8 md:gap-y-12 lg:gap-y-16", style: {
                 background: 'linear-gradient(to bottom, #9CE142 0%, #00C959 50%, #00A595 100%)'
             } }, this.colors.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "effect-height flex items-center justify-between p-16" }, hAsync("div", { class: "grid" }, hAsync("span", { class: "f-body-02" }, color.rgb), hAsync("span", { class: "f-body-02 w-full" }, color.cmyk), hAsync("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { class: "grid" }, hAsync("span", { class: "f-body-02" }, color.pantoneC), hAsync("span", { class: "f-body-02" }, color.pantoneU))))))));
     }
@@ -15335,19 +15428,19 @@ class GradientSecondaryPalette {
         ];
     }
     render() {
-        return (hAsync("div", { key: '29353679b15fce11ec2e357704cffd6a2d1389d4' }, hAsync("ul", { key: '7a262e1c8f17226c6639a00e1829d4f0927f988d', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: 'f3dfcbe6da3ee882ae9100f95fe68788cd82195f', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: '83e3ac5d6f64e18e38e179251d58ff3ed23019a3', class: "effect-height flex items-center justify-between p-16", style: {
+        return (hAsync("div", { key: '4bb98c83660ec855ba6b7faeb83386450c27f5fd' }, hAsync("ul", { key: '55b537cacdc2e3df835615e1658f82810633c485', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: 'd2f0d5c21e96579ef9a29540df473f821e2b29b6', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: 'e29f3000a3ee702caba1e1867b5d63be74b0d657', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[0].background
-            } }, hAsync("div", { key: 'ebc2424dd2950cc2704351456d4d974051e0dd93', class: "grid" }, hAsync("span", { key: '3fdfb110070a8795a1bb1aea12447bc2556937cc', class: "f-body-02" }, this.colors[0].rgb), hAsync("span", { key: '0b929d1ddd40e67bc8cd0248fc7bf0c0f8a11cb7', class: "f-body-02 w-full" }, this.colors[0].cmyk), hAsync("eds-code-block", { key: '3f4ab8d6b91afeaba20c273b8ede74593d452bf0', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '80b6a23a151e6b71630071f2d51c03e6b8c957ff', class: "grid" }, hAsync("span", { key: 'c86531490e51f5559d4293bc75bb2477d23d1593', class: "f-body-02" }, this.colors[0].pantoneC), hAsync("span", { key: '5bbc4e02eb2845508c6de7715f5fe202a36249a5', class: "f-body-02" }, this.colors[0].pantoneU))), hAsync("div", { key: '050d2770d4c2e6395dc5350c9f29860ecf3d7e46', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, hAsync("div", { key: 'b1337194dd634b5820cc33707958fd0a2e0e92a6', class: "grid" }, hAsync("span", { key: '0385f9d05575613fcb99e8e01ee04c427ba66a8d', class: "f-body-02" }, this.colors[0].rgb), hAsync("span", { key: 'bbebf9ca89b0972376225d1708a356777dc6fcca', class: "f-body-02 w-full" }, this.colors[0].cmyk), hAsync("eds-code-block", { key: 'cb70085fe98e4c3e9f535e626b386b1c51b26fc8', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: 'cfd3721992823321bb75c0e544b28fa13cabd7eb', class: "grid" }, hAsync("span", { key: '00834f078742102f17dfa76a6ab024b0ccbcb7c9', class: "f-body-02" }, this.colors[0].pantoneC), hAsync("span", { key: '35d7c496211ab03ce17e17e839c27bcc5a9ef56f', class: "f-body-02" }, this.colors[0].pantoneU))), hAsync("div", { key: 'baae2cbc6859b137a8588b0e9dd56d0c9e3c3acd', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[1].background
-            } }, hAsync("div", { key: '20a5a6748573d6e059ec81d00a737355cfd7f934', class: "grid" }, hAsync("span", { key: 'a63a0ea4301f11e4984f3749c087041acedb94b4', class: "f-body-02" }, this.colors[1].rgb), hAsync("span", { key: 'd986ecee52e15de1bbd58c48109f8c89d0cf19a2', class: "f-body-02 w-full" }, this.colors[1].cmyk), hAsync("eds-code-block", { key: 'd35bb3c1cb26aa9a3828cecfde1b32f428e8b1af', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '8a616b789a99d3721ccc1f102131c2aba1951106', class: "grid" }, hAsync("span", { key: '03d172bbc56a4535d20051bb2ab1bfb4c0889586', class: "f-body-02" }, this.colors[1].pantoneC), hAsync("span", { key: '66f1656d1d41f1616175285cf8f7e7089c9f2657', class: "f-body-02" }, this.colors[1].pantoneU))))), hAsync("eds-block-break", { key: '85a7244a69f0d3af26ea5f148917183e2431140e' }), hAsync("ul", { key: 'eb44b6b21fc75b1fd22e1aee42fac1aa99155b0d', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: 'ecb50392387996034d1f4211d5336d2071927844', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: 'f45bf292bf11cb440731ff7bc67e5b364cb7b6c1', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, hAsync("div", { key: '55e3d9d0ce260c574da96b4775ce5f3e3e7fbaf0', class: "grid" }, hAsync("span", { key: 'c29acb597734c8422532cb303af1eaf04be73bbb', class: "f-body-02" }, this.colors[1].rgb), hAsync("span", { key: 'f1d9139118ce788e0c59d0fb7e8304b8d2ad2b6b', class: "f-body-02 w-full" }, this.colors[1].cmyk), hAsync("eds-code-block", { key: 'f8d92e3e205baf3c60a776ef6928da3f45682397', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '09c594d5fe6a642bb0b8dc813911516cb933488e', class: "grid" }, hAsync("span", { key: '62caf5d0012613e3ce291efc0539224e20da2180', class: "f-body-02" }, this.colors[1].pantoneC), hAsync("span", { key: '6a6ced363a3b8a3c05298fd82ab9b7ec81d580f3', class: "f-body-02" }, this.colors[1].pantoneU))))), hAsync("eds-block-break", { key: '126929a680751e2028b373be442814d677911978' }), hAsync("ul", { key: '522cc84b4b8e1765a97c08927d640981e0a37328', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: '4db01022fbe75477a88e7c8e7474e431c126dd63', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: '92c1d309578f357745dcde72aae7c54b48d1a378', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[2].background
-            } }, hAsync("div", { key: '981db4da9bdbc0f60ba6e8fd83840101a815550f', class: "grid" }, hAsync("span", { key: 'd6aaf058991f0d7e1c4d5d7bfa17b0342880cb9c', class: "f-body-02" }, this.colors[2].rgb), hAsync("span", { key: 'cd63d8d64b9fa30f7a568125f61d3735c3596f0b', class: "f-body-02 w-full" }, this.colors[2].cmyk), hAsync("eds-code-block", { key: 'aca8d6c9668168c6d4b71cb5039e0af4cd419e30', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: 'ed16477727fe22372cbcd730c4e9cc67f5b35ed8', class: "grid" }, hAsync("span", { key: '4b6989756eb826d93b5b7d71e874f62914d221df', class: "f-body-02" }, this.colors[2].pantoneC), hAsync("span", { key: 'a4e3d7e9f3582a0fc5dfabbfc9feb5bb969c2933', class: "f-body-02" }, this.colors[2].pantoneU))), hAsync("div", { key: 'd23b28073abf3c16b3f8d58744fb5f66877cdd94', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, hAsync("div", { key: 'f789570aa4141bd4dbdbe737fca7a666beb5e635', class: "grid" }, hAsync("span", { key: '2d3840caf5ec39e08271b4400f9ce0e425bc796c', class: "f-body-02" }, this.colors[2].rgb), hAsync("span", { key: '41cd0250155a4d8413fb5b35677c6121c3539ab3', class: "f-body-02 w-full" }, this.colors[2].cmyk), hAsync("eds-code-block", { key: 'c36680567bbfd9085b2151748a4dfa7e557925d8', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '14241bc8d0354da8eba7fb06eafc6841b182796a', class: "grid" }, hAsync("span", { key: '97bde70e3d904c55fdf1e7d8b13aff954b905644', class: "f-body-02" }, this.colors[2].pantoneC), hAsync("span", { key: 'c5734847ceebbcf235c058c7987415cd47bdba86', class: "f-body-02" }, this.colors[2].pantoneU))), hAsync("div", { key: '0c016fdccdbb1c372b28da2c47eacbbfb7af32a8', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[3].background
-            } }, hAsync("div", { key: '1c96adb58e67d7cada4b4ba382ca2fcd37f0dfd8', class: "grid" }, hAsync("span", { key: 'beaab441ab5852d1141b509a161123ab0f743e7c', class: "f-body-02" }, this.colors[3].rgb), hAsync("span", { key: 'd2e57f4fd72ff1ef9c84f27e81c8c6b03ec50f66', class: "f-body-02 w-full" }, this.colors[3].cmyk), hAsync("eds-code-block", { key: '48772cedf0b4ad119e14696e58203efce7bb3559', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '0e233bc33432cdd2149ab20b64464d03de22bcef', class: "grid" }, hAsync("span", { key: 'b0f41ae03bfd3bedf2ebd60b6a4b30c677395da0', class: "f-body-02" }, this.colors[3].pantoneC), hAsync("span", { key: '433f30e367352cbd24668dac2ecf741b9f81febe', class: "f-body-02" }, this.colors[3].pantoneU))))), hAsync("eds-block-break", { key: 'a862789d835c146d140b634782eefa7b48139597' }), hAsync("ul", { key: '9fe132435b11fa93057df3d747dfe36f04bfd997', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: 'e8438aedc62f4d0195a3c4c1c714ba99c6f7b67f', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: '9928ba20be7b9100e437345a4c5b03bf6d495707', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, hAsync("div", { key: '0d34612dbff071b4abd0aa2e0b89885ab1088a60', class: "grid" }, hAsync("span", { key: 'ab9628602287dc6543c086cb6b34dd22d40af58c', class: "f-body-02" }, this.colors[3].rgb), hAsync("span", { key: '7ca06f7d0801cf664762b274815747e75023b596', class: "f-body-02 w-full" }, this.colors[3].cmyk), hAsync("eds-code-block", { key: 'a910ecaee2d78c6be8af632b497a4fe2d9651a9e', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '420889ad4cb54cd70ed3d10053f836e0b226eee6', class: "grid" }, hAsync("span", { key: 'cc92bf72e7dd47a8d492ef263c46d22c7f5b64b2', class: "f-body-02" }, this.colors[3].pantoneC), hAsync("span", { key: 'd740c9446d7521e4b6f3e049149d687c74615493', class: "f-body-02" }, this.colors[3].pantoneU))))), hAsync("eds-block-break", { key: 'a6c5dea6ed19042213dcb8c0d12cb3120078c284' }), hAsync("ul", { key: '7eede8a017fc381b57f07c1d3c4cf62b4b9a7f63', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: '1202837ab3483b3cb9dd71992e71ea59594596e5', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: '5280e99341777daa28196e0be215f58b64d5be37', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[4].background
-            } }, hAsync("div", { key: '1cd2d6a8ec580b4094335d3c56acfbb398a96c28', class: "grid" }, hAsync("span", { key: 'dbbd548a12bcc861526309132e685a97714de1d5', class: "f-body-02" }, this.colors[4].rgb), hAsync("span", { key: '93d38512e45747e4277169ee3221c36f96862f29', class: "f-body-02 w-full" }, this.colors[4].cmyk), hAsync("eds-code-block", { key: 'b04c9679ea48bf89e70cc969ecd42984ce3c7286', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '4a6130bdeb963c9674100528e2ef24a2245acbab', class: "grid" }, hAsync("span", { key: '7f49f52d514e36d7886a1aecb3c92c7148dcf595', class: "f-body-02" }, this.colors[4].pantoneC), hAsync("span", { key: '0d9a53c5262183a24114f762175f1d9fe5299950', class: "f-body-02" }, this.colors[4].pantoneU))), hAsync("div", { key: '26a6e6ca4a67e5ff01d4fcb75e40fdb1456ca62f', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, hAsync("div", { key: '0a29d5eba0d80789df6e2df892f72a210558bc5f', class: "grid" }, hAsync("span", { key: 'b53837c45946fd2a2e2f44d1ed6ffe86fa15de5d', class: "f-body-02" }, this.colors[4].rgb), hAsync("span", { key: '236bb0f5c879da738a5b758982262ef23537e863', class: "f-body-02 w-full" }, this.colors[4].cmyk), hAsync("eds-code-block", { key: 'ae5ed445fb1a5203745d71b9507cc1247c244d95', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: 'b1ee585cd3ae08d506b42e435e00f885b49f8994', class: "grid" }, hAsync("span", { key: '35c51bc7d60ba9fde2b6eac0ce035e0aceaad92c', class: "f-body-02" }, this.colors[4].pantoneC), hAsync("span", { key: 'c8796f41fe7ef23bafa9139c19b0807f712a8382', class: "f-body-02" }, this.colors[4].pantoneU))), hAsync("div", { key: 'e849871809560f669619b23a695f20103d5872e8', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[5].background
-            } }, hAsync("div", { key: 'ff5052b9aa74a3edb7d3ba6d1c75b9073b969b31', class: "grid" }, hAsync("span", { key: 'b69e9f4646835b689fd46c6f84b8b35dba1500a1', class: "f-body-02" }, this.colors[5].rgb), hAsync("span", { key: 'a459cc1600cb4072e6d1cfbcae75d17cf14fbbfe', class: "f-body-02 w-full" }, this.colors[5].cmyk), hAsync("eds-code-block", { key: '55f9185213f01a7891a4e8ff54f4f26759370ef8', code: this.colors[5].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '2f3bbbcdf402f0da4bade772b3cadb1b8cb3370c', class: "grid" }, hAsync("span", { key: '818372e4673ef5c8e35085702a559b744a5cbe8c', class: "f-body-02" }, this.colors[5].pantoneC), hAsync("span", { key: '2bc994826618735b82fd93fe039328a2ff4f6f95', class: "f-body-02" }, this.colors[5].pantoneU)))))));
+            } }, hAsync("div", { key: 'ef1de66807f52f07f65dcdcebb82db99e4488e96', class: "grid" }, hAsync("span", { key: '60e08fa96458ca4e403ac7f44d57fa68c5bdcab8', class: "f-body-02" }, this.colors[5].rgb), hAsync("span", { key: '8c0ca774be1ff12054bfb29ea2b56c12b776f84c', class: "f-body-02 w-full" }, this.colors[5].cmyk), hAsync("eds-code-block", { key: '2ad43b9dc6d62df3ed3e057262aca05558781f50', code: this.colors[5].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '6f9ca87ef408575620079ca088ae00252cccd0fc', class: "grid" }, hAsync("span", { key: 'ccd038680073b25d8584f06fd1baab655cf6125c', class: "f-body-02" }, this.colors[5].pantoneC), hAsync("span", { key: '8705f39198fa91da2b26d334dc1c89cd9f511492', class: "f-body-02" }, this.colors[5].pantoneU)))))));
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -15410,11 +15503,11 @@ class GradientSupportPalette {
         ];
     }
     render() {
-        return (hAsync("ul", { key: 'e5444717497402cac34586943ffd10abd2e77148', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: '84f6b65181b6f2237b7ef261445a2e58935975ab', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: 'b9eb17a05b1a479e46adf3908ede6d2a74e47e91', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[0].background } }, hAsync("div", { key: '74cb2cf74997cf993557cbf06158578a45439965', class: "grid" }, hAsync("span", { key: '29c00a82880aff024927e29c95fde61016553d5d', class: "f-body-02" }, this.colors[0].rgb), hAsync("span", { key: 'db89f95d9c30eb90ba6d7f9cd12c793f8a500b00', class: "f-body-02 w-full" }, this.colors[0].cmyk), hAsync("eds-code-block", { key: 'd050e9d7910ed8ac88f4f791a2c8a1edaadcb0ac', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: 'd2b688154a3d1f61df4dcc1f735eae9747011d01', class: "grid" }, hAsync("span", { key: '2a204759a52f881b2d6b0d40116bf00bbda3aed2', class: "f-body-02" }, this.colors[0].pantoneC || 'N/A'), hAsync("span", { key: '9023f33ba5182558f12dfb119ed4338649638bd7', class: "f-body-02" }, this.colors[0].pantoneU || 'N/A')))), hAsync("li", { key: '55a4cf54a4dbc1b5c7f9962c571cbb971cba0d93', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: 'b4190fda8834ddfe5e53e90d357cc1835e7d16ce', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[1].background } }, hAsync("div", { key: 'cf5415f31d46d7a966fa3da040aec720c0241673', class: "grid" }, hAsync("span", { key: '4fb475890391784e8be7c40d0c74c02a492739f7', class: "f-body-02" }, this.colors[1].rgb), hAsync("span", { key: '02f5bd1fcb7be45141963bb1d723646195978d49', class: "f-body-02 w-full" }, this.colors[1].cmyk), hAsync("eds-code-block", { key: '781791e59a86c8687d9afe6d729161acf05fc9dd', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: 'dd84d9b36892ff47481babfb2fbb8a9082f43219', class: "grid" }, hAsync("span", { key: 'df5ef60b6866f46bafcd93d8f82498090102a520', class: "f-body-02" }, this.colors[1].pantoneC || 'N/A'), hAsync("span", { key: 'a8cf80fcb9f7fef12daf32055c61fdb33ee38d67', class: "f-body-02" }, this.colors[1].pantoneU || 'N/A')))), hAsync("li", { key: '2ed0376ad5484fadac08c530450e993fa6145328', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: '30ba72591ea4537407b2220a85a961fce0fc54e5', class: "effect-height flex items-center justify-between p-16", style: {
+        return (hAsync("ul", { key: 'e1b86872cead72320e3e4cf6cd22e672500cfcab', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: '6a39321c305bb9c0f4c79932252faf0c08fd11e6', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: '255fb9153e49030054666f086b2e0ac4d6d3dc0e', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[0].background } }, hAsync("div", { key: 'fb08851f97cefa4b06a00f7063b558607f5df19e', class: "grid" }, hAsync("span", { key: '4a8a0dc633cca7c36e6ca981e6b85775005ce80f', class: "f-body-02" }, this.colors[0].rgb), hAsync("span", { key: '0bebfc5eb567e030e993037f527df3af46615ff2', class: "f-body-02 w-full" }, this.colors[0].cmyk), hAsync("eds-code-block", { key: 'aa06e607647a762ed7150a5aceaeda8c7854a050', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '5c143dd4c8afff2365aad02f68d444fd2234d90f', class: "grid" }, hAsync("span", { key: '47c9334efb42ee8259033bf1a323519d0a048bc7', class: "f-body-02" }, this.colors[0].pantoneC || 'N/A'), hAsync("span", { key: 'bca6d9635f5bcb16ef54154b2d3a2b6734cef7e7', class: "f-body-02" }, this.colors[0].pantoneU || 'N/A')))), hAsync("li", { key: 'e78077ac00556ec5faa7d0ec7e3dc2b9ae7643f2', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: '10f182a6515a0006f3903dfcf783349870c2e6c2', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[1].background } }, hAsync("div", { key: '4ef41025e6e2bb0ebe05933f7fad707c4136c852', class: "grid" }, hAsync("span", { key: 'c2b3c48904efe628b148e080e1487dc8fba70b63', class: "f-body-02" }, this.colors[1].rgb), hAsync("span", { key: 'ae12e16d9a070b29492a385ff21b6371b9826f85', class: "f-body-02 w-full" }, this.colors[1].cmyk), hAsync("eds-code-block", { key: 'a6e980da23e2c5d0312a9d1a12432388fbba1d56', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: 'a38408a780756f4e81c8d791e52eb87056755eaf', class: "grid" }, hAsync("span", { key: '0180f83000b733914c33696ef4b6d7257efba396', class: "f-body-02" }, this.colors[1].pantoneC || 'N/A'), hAsync("span", { key: 'fdaab526fcb07f4a58e4daae616da144c2f46666', class: "f-body-02" }, this.colors[1].pantoneU || 'N/A')))), hAsync("li", { key: 'c771a8d62610c7255835896fe678136838c05235', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: 'debe404f676d76d4ee6e0bf70fc1fb596b768a72', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[2].background
-            } }, hAsync("div", { key: '641ea920703268846558c852fe087fa9546e14b7', class: "grid" }, hAsync("span", { key: 'f672422e13deb40e9dfaddd6f9855b2de28eab5b', class: "f-body-02" }, this.colors[2].rgb), hAsync("span", { key: '008794c76fb2713438c198c914e718efbbfc7b5e', class: "f-body-02 w-full" }, this.colors[2].cmyk), hAsync("eds-code-block", { key: 'ee1cfa3a78f670c74e00e96b6415f85715334526', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '295c044bb9cc9ed3a85bb488225db4401f0ea542', class: "grid" }, hAsync("span", { key: '9d7dbf15fd44ce3d3e45a39324ad3a60d7ae30f0', class: "f-body-02" }, this.colors[2].pantoneC), hAsync("span", { key: 'd639d12c3215caf3f4f1e8a4ae062b540b6af50d', class: "f-body-02" }, this.colors[2].pantoneU))), hAsync("div", { key: '04e95d8b1a6f7dcdbc465263382e36d05f79d602', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, hAsync("div", { key: 'db1beec1c3ad71ef5fcacaa0d14618acc01666f4', class: "grid" }, hAsync("span", { key: 'cc6e9c599d26813756dc0eb0c240169ea5b2856a', class: "f-body-02" }, this.colors[2].rgb), hAsync("span", { key: '9f45b4ec7cd579040a135f63aa3b7aadb8f10ada', class: "f-body-02 w-full" }, this.colors[2].cmyk), hAsync("eds-code-block", { key: '2ce58a56fcfd1a3b8f7855296c929c37b634bfca', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: 'd494a074655c8bcf35d4021b700eafcd9acdfb54', class: "grid" }, hAsync("span", { key: '626ae49228b52ff921b5ce2bc15b12a540618691', class: "f-body-02" }, this.colors[2].pantoneC), hAsync("span", { key: 'db8c4d3f246851fd18794e317d20f1a1f9be59b9', class: "f-body-02" }, this.colors[2].pantoneU))), hAsync("div", { key: 'f27de0de4bfff2bc26ef573a11b770f55f461425', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[3].background
-            } }, hAsync("div", { key: 'e67079bbbdfa1853a2f069f08c52a8388cce688a', class: "grid" }, hAsync("span", { key: '43be6b7785066c0d51aa87e987fb672a758de8bb', class: "f-body-02" }, this.colors[3].rgb), hAsync("span", { key: '791e968b11a9dafefac8fe0eda01b04ab4911802', class: "f-body-02 w-full" }, this.colors[3].cmyk), hAsync("eds-code-block", { key: '5831fd1e75f8ed0d2edc29fbc439389275adf59e', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '09329acac8fbc33edada7a7c10c675631a240ea2', class: "grid" }, hAsync("span", { key: '42f70fa2578b40e189b95cd1d4c56ccd84cdce69', class: "f-body-02" }, this.colors[3].pantoneC), hAsync("span", { key: '2b8dfefd1e2dff08aa17b234a04cff60e3eb9d7a', class: "f-body-02" }, this.colors[3].pantoneU)))), hAsync("li", { key: 'e3a39fb7ad23526623bfea88cdab8d320847365d', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: 'cfde16c94675c5c9b510e3752f875655c9d098e2', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[4].background } }, hAsync("div", { key: '1f8a8bd2e746c187323841ced84eec52d2c2f2f1', class: "grid" }, hAsync("span", { key: '920fc68ae73790a37c927dabf687ccaf5e248841', class: "f-body-02" }, this.colors[4].rgb), hAsync("span", { key: '40205cf5666e6ba44ca07a09dc08e54f2f9cad56', class: "f-body-02 w-full" }, this.colors[4].cmyk), hAsync("eds-code-block", { key: '8a855110b362569cc9926a09772d12f133aa20b6', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: 'a69c90cfac79b0a7ba5fbd921117a12ce997c228', class: "grid" }, hAsync("span", { key: 'bc06aaaaececad3b81e4884380e17fe773f97570', class: "f-body-02" }, this.colors[4].pantoneC || 'N/A'), hAsync("span", { key: '15baae3dafc6b53322e1a67956af1f533ea402f7', class: "f-body-02" }, this.colors[4].pantoneU || 'N/A'))))));
+            } }, hAsync("div", { key: '386d0e341c37f0baef2c62a13fcba88640b5ec3a', class: "grid" }, hAsync("span", { key: '5b5f541490612b70841e2ea62bad3b8f86587301', class: "f-body-02" }, this.colors[3].rgb), hAsync("span", { key: '88b7fd61a6fe4f15bb37d067e8b9f28fe329de0d', class: "f-body-02 w-full" }, this.colors[3].cmyk), hAsync("eds-code-block", { key: '7d96a904aa3703ffba953ede2e68aae605aa5921', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '8a20e30b1c43b8f50eb8cbde0e735a54d4129e26', class: "grid" }, hAsync("span", { key: 'd843ddf7b0328f99400c106e7705aed0626d2f32', class: "f-body-02" }, this.colors[3].pantoneC), hAsync("span", { key: '57ce96cc38ae1f0b91f512841e0738384e543cb1', class: "f-body-02" }, this.colors[3].pantoneU)))), hAsync("li", { key: '5d96a25dcd51b35b01952ebc94c75cfa1045b8da', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: '713e347acd6ee623562db92a24b87a2f36086875', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[4].background } }, hAsync("div", { key: 'a62ed8e1fda6deb45b131c4d7cefe355862b33ba', class: "grid" }, hAsync("span", { key: 'bb419133f1bfcd07f05d551a4dafa54331ee1c09', class: "f-body-02" }, this.colors[4].rgb), hAsync("span", { key: '774de6f18b6ab9d5539cc6889949b7ef9a0511db', class: "f-body-02 w-full" }, this.colors[4].cmyk), hAsync("eds-code-block", { key: '87d83ce275bfbba7a8930e1e0fcecf14dee2af59', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '4e4acde29f939b2e7b2d4925490da515b8bcabf1', class: "grid" }, hAsync("span", { key: 'c2276899357a54e0be5d35fcb9cbc01257882a12', class: "f-body-02" }, this.colors[4].pantoneC || 'N/A'), hAsync("span", { key: 'c78d9648c05583b858d75ff0f6aff57a62ff1628', class: "f-body-02" }, this.colors[4].pantoneU || 'N/A'))))));
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -15468,7 +15561,7 @@ class IncorrectUseOfColors {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync("div", { key: '2e660e9a788e46e68d6695ae8aa475bbb1ca395e', class: "container" }, hAsync("eds-alert", { key: '1dc4552a33d88055a3a0c33eeb18c53a8379039a', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" }), hAsync("div", { key: 'fd6bf7f0205422b1bd3ceb3f8374d5a9a73aaca0', class: "flex" }, hAsync("div", { key: 'dae745447f5e9792136f059b1dcfc868e473dfd5', class: "w-full" }, hAsync("ul", { key: 'daeec7514f4027ec3f688f05fb4f1e027b846a81', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), hAsync("div", { key: '1ca202afa9384e78e3ed9c0674e06c51184d3a5a', class: "w-full" }, hAsync("ul", { key: '7bdef2e7d64f3c5553193d127bac69ee89a93686', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, incorrect.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
+        return (hAsync("div", { key: 'cb22d37293f3b3b5fe3772cfe83234a5d81e1094', class: "container" }, hAsync("eds-alert", { key: '9aa7a510440c32f92242b3e09f9e818cd2509b06', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" }), hAsync("div", { key: '4d22cba75b7dd45a5a9a7d2b2eba5404875f1403', class: "flex" }, hAsync("div", { key: 'c7f08b3e4ef2692c545edd4185a005ddd6526a23', class: "w-full" }, hAsync("ul", { key: '28561abcdc93a4899a5d7481fdd47c439f734ff6', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), hAsync("div", { key: 'f8836d4805fdd416ee75712f749d5cee3f612559', class: "w-full" }, hAsync("ul", { key: '5842acd55d3a827355f2814c709d057676fb5d0f', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, incorrect.map((color) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -15491,7 +15584,7 @@ class LogoSpace {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync("div", { key: '004134f2770f755a3ae0d158b9ec6987a64dcc8b', class: "container my-20" }, hAsync("div", { key: '49b57e44a4a68b5d6393ee3284af58d56aa5c014', class: "w-[300px]" }, hAsync("div", { key: '4812ffe1b1df94ece0e2d391648aea812c7c9028', class: "bg-dark" }, hAsync("div", { key: 'ce3bbecdba5bbabb14d1b0e197318cf4180f8699', class: "logo-container", innerHTML: vLogoMargins })))));
+        return (hAsync("div", { key: 'fc5040b294d45ecbf8e3ee0ab26875c63efa3625', class: "container my-20" }, hAsync("div", { key: 'acad9c182cb46fd58f37d9195c9e20658df81767', class: "w-[300px]" }, hAsync("div", { key: '4caac9e94b715c967958fe6bd9e5d988622c8729', class: "bg-dark" }, hAsync("div", { key: 'd82b6156de96fd91e996c0ab775b9503395ba04f', class: "logo-container", innerHTML: vLogoMargins })))));
     }
     static get style() { return LogoSpaceStyle0; }
     static get cmpMeta() { return {
@@ -15515,7 +15608,7 @@ class LogoVariationsHorizontal {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync("div", { key: '577cade970766dbbbd654258efe78920d8c0dbaf' }, hAsync("div", { key: '1c577dafe342384bffce716b4bcb9494685f2283', class: "container my-16" }, hAsync("h3", { key: 'b9f78264dbbe144cc9c7823c48874b3618af3919', class: "f-heading03" }, "Coloured Background"), hAsync("div", { key: 'c07b24eb1a3338d33a3b95c0228a1a7f297a0976', class: "coloured lg:w-[500px] md:w-[300px]" }, hAsync("eds-logo", { key: 'ed173d7c59ae22ad55814cf64222a5ce52d108d4', type: "no-bg", href: "#" }))), hAsync("div", { key: '7d939b469a8ce14f609e529121a830d9a47af857', class: "container my-16" }, hAsync("h3", { key: 'f110490f66e3d27f204e289a5eb85461c13594fa', class: "f-heading03" }, "Black and White Background"), hAsync("div", { key: 'd05bd8166d2a60aac723436b96e2451ae4459c04', class: "bg-default lg:w-[500px] md:w-[300px]" }, hAsync("eds-logo", { key: 'ce24bb6db3038d781a4d1917012c0d4ed7f23b1a', type: "black", href: "#" }))), hAsync("div", { key: '32fbbb1568604bdfd04c6ca6c14a558a3c490ed8', class: "container my-16" }, hAsync("h3", { key: 'ef03e68319669f548c7826d6387072af8d3f5a66', class: "f-heading03" }, "Dark Background "), hAsync("div", { key: 'a6b082f14400be771f43074c1f7f0bc348e77673', class: "lg:w-[500px] md:w-[300px]" }, hAsync("eds-logo", { key: '569f77f1b43b4a65a39720017b34273d6f3d7baa', type: "color-white", href: "#" })))));
+        return (hAsync("div", { key: '17506a830e62dd31e1415d2be8b4553c3068bfd0' }, hAsync("div", { key: '4ae7fe3624155cf1b2a749bed360d8b55cd2bede', class: "container my-16" }, hAsync("h3", { key: 'e6daae3d262a53fb374162b5e3313fa98e11bf6b', class: "f-heading03" }, "Coloured Background"), hAsync("div", { key: 'ab405030d5cac7ec5fe95f638dfeaa0e48f70af7', class: "coloured lg:w-[500px] md:w-[300px]" }, hAsync("eds-logo", { key: '05441cfb40658a2bd01f7f9a8c28e28d340b6dc1', type: "no-bg", href: "#" }))), hAsync("div", { key: '82731279160c6c666889d32f329cf8469f853783', class: "container my-16" }, hAsync("h3", { key: '73269548408d466223d44f9293f589e7e4b99bae', class: "f-heading03" }, "Black and White Background"), hAsync("div", { key: '1d3e89b35eca34712e184ce42ba2f7632439ce4f', class: "bg-default lg:w-[500px] md:w-[300px]" }, hAsync("eds-logo", { key: 'fc59306d8098f4764ab0f72fdbb5009bea5f3c44', type: "black", href: "#" }))), hAsync("div", { key: '355ce3ef5cbd6872ce86ec847c3394deb29f2846', class: "container my-16" }, hAsync("h3", { key: '57adbc464a1e2f2d5818112f00149840c2c0758a', class: "f-heading03" }, "Dark Background "), hAsync("div", { key: '84e43ad22d556672c1b0e82a9ed3e2c988649598', class: "lg:w-[500px] md:w-[300px]" }, hAsync("eds-logo", { key: '0d0d38e691d763189c88ae803f9b02523b362ff8', type: "color-white", href: "#" })))));
     }
     static get style() { return LogoVariationsHorizontalStyle0; }
     static get cmpMeta() { return {
@@ -15541,7 +15634,7 @@ class LogoVariationsVertical {
         this.type = undefined;
     }
     render() {
-        return (hAsync("div", { key: '70bc4a46031bb4456ba28bef27efbbfe5e7cf6f2' }, hAsync("div", { key: '84ab774067350c75982d41b6d97500e19d3fe5e5', class: "container my-16" }, hAsync("h3", { key: 'c080f9b4cfa18a3a48fb703f749c62531a322267', class: "f-heading03" }, "Coloured Background"), hAsync("div", { key: 'a9a871769d76e97c879f49437187ca553a633dd2', class: "coloured w-[200px]" }, hAsync("eds-logo", { key: '668f2607e0394ab1b25ddfbef4cd3e3880e1b4f9', orientation: "vertical", type: "no-bg", href: "#" }))), hAsync("div", { key: 'd1674061f47b242930599337d605b51831214d7a', class: "container my-16" }, hAsync("h3", { key: '8b1470587ad99fdf379c0c4b4646098d14f087e8', class: "f-heading03" }, "Black and White Background"), hAsync("div", { key: 'bbb9997369a93ce84450a7d289948049fcfa5bf6', class: "bg-default w-[200px]" }, hAsync("eds-logo", { key: '4f3dc6ad9f9db6f605d54df3c8adecea051cf34e', orientation: "vertical", type: "black", href: "#" }))), hAsync("div", { key: '0f54fde04fbef65477809b45371ac15914b1433b', class: "container my-16" }, hAsync("h3", { key: '5c46f1d7b09bf3e113e2733531611943ad21be4e', class: "f-heading03" }, "Dark Background "), hAsync("div", { key: '88609875109aae85cb5333426a3bc270314d9fb5', class: "w-[200px]" }, hAsync("eds-logo", { key: '0eeeba0006e25a8a4f0c4fb5c0d38b089e0a22f4', orientation: "vertical", type: "color-white", href: "#" })))));
+        return (hAsync("div", { key: 'fee70336cee863d905a6537392f1ddf6bda1d449' }, hAsync("div", { key: 'f04e0928bbd1875982190f5fe685c43a0e712704', class: "container my-16" }, hAsync("h3", { key: 'd10318ccf82f90743af6279afea3afa36ec411dc', class: "f-heading03" }, "Coloured Background"), hAsync("div", { key: '06cca782bfc5564172c1a745652c66d5304ad9c8', class: "coloured w-[200px]" }, hAsync("eds-logo", { key: '175bbd4acc1b184e8d372b78246524b2d4ae6758', orientation: "vertical", type: "no-bg", href: "#" }))), hAsync("div", { key: 'a7eb431d1ee679bc8c28aed0932325c99d4e0798', class: "container my-16" }, hAsync("h3", { key: '0a5d4e193f9b8e36c81beb5fcc81eccaa2433ee9', class: "f-heading03" }, "Black and White Background"), hAsync("div", { key: 'c2d6c02f46629f32155bfb0ef1eee7522cd4b6c1', class: "bg-default w-[200px]" }, hAsync("eds-logo", { key: 'a97c323c7af4c98fab5da6721450b80e2c8d85cb', orientation: "vertical", type: "black", href: "#" }))), hAsync("div", { key: 'ac99317a56b7ce01f324efc3423593a20164f932', class: "container my-16" }, hAsync("h3", { key: '908f915f49802906b1d0d5cb008ed4cdb3b5a68a', class: "f-heading03" }, "Dark Background "), hAsync("div", { key: '94e25cd1734ec0ef18d3742f908a08ceec50aa6f', class: "w-[200px]" }, hAsync("eds-logo", { key: '7f74de4532f6696e7168f0fc9c5dc28afed91f98', orientation: "vertical", type: "color-white", href: "#" })))));
     }
     static get style() { return LogoVariationsVerticalStyle0; }
     static get cmpMeta() { return {
@@ -15568,7 +15661,7 @@ class LogoWrongUsage {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync("ul", { key: 'e2fbd7802c153f970a457011a5dcaf3163d6290f', class: "container grid-layout gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("span", { key: '07d6a5b930dd8ae652e63310c4232e8c3e6858b2', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, hAsync("div", { key: '5d3dd01a67f41f839e79aa3d449ba319dcc0209c', class: "example" }, hAsync("div", { key: '6b51ea71b6b4072ec6c66223a4f92c1232e8691a', class: "bg-dark " }, hAsync("div", { key: '03a476635bc1112f1ea2d4ed10df0415ead7f0f8', class: "no-other-bg-color logo", innerHTML: hLogoColor })), hAsync("p", { key: '084116335e9f8ed4c9d2a04a9551097dc2a53c4a', class: "f-ui-02" }, "Do not use with backgrounds that make legibility difficult"))), hAsync("span", { key: 'e67f1bdeee28928f4f6f8fb5d1e0b59160edd949', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, hAsync("div", { key: 'b0e909eb57a6771b32a93dd0932ef5b848a19ff2', class: "example" }, hAsync("div", { key: '19bc9f29ddbffd1c308cb429100f0af3d58237a1', class: "no-other-color p-16" }, hAsync("div", { key: '301c5cb926b9ad167f1ba096f99a874577617fb1', class: "logo non-brand-color", innerHTML: hLogoColor })), hAsync("p", { key: 'b41ab53c2af9efeafb46d41a515eba2f801d49e4', class: "f-ui-02" }, "Do not apply other colors"))), hAsync("span", { key: '826ae54f62c5a3880adf1833dbc19bbb9e1ec6f2', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, hAsync("div", { key: '092d5fc3176845532ecf577c66d6e3a349ebfe45', class: "example" }, hAsync("div", { key: '1d1d3cc86e728fc21f898c59ff1511c5fa728f9f', class: "bg-light p-16" }, hAsync("div", { key: 'df05102398d3de9916a23d0998529d8ca8a66257', class: "logo distorted", innerHTML: hLogoColor })), hAsync("p", { key: '377e38a762855d563d087eb275481de6a17ddbbb', class: "f-ui-02" }, "Do not deform the logo"))), hAsync("span", { key: '766c4ea568c8bf2fa1efa207ff5f602e5128aef3', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, hAsync("div", { key: 'cf4e883370c0ee284167bea7f2c0c603932d1682', class: "example" }, hAsync("div", { key: 'de160646456f91316bf966db6568c20ff382dd3b', class: "bg-white p-16" }, hAsync("div", { key: '5aa03093e5e483547919eaeca58643e54a286405', class: "logo effects", innerHTML: hLogoColor })), hAsync("p", { key: 'aa65e295008001d6fe2b2168d8f7f43a770ec8e3', class: "f-ui-02" }, "Do not apply effects"))), hAsync("span", { key: 'd0eb2536e430b6e9fdb9a37d638d5c31ee81e205', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, hAsync("div", { key: '43ec87b4632c2709404aff9d3e7bbcb2910426ca', class: "example" }, hAsync("div", { key: '36cd6dc2b23070e5c7fdfc09444d3ccbb8681216', class: "bg-white p-16" }, hAsync("div", { key: 'a1077b322d113220e05ee3edce627c60547cb49a', class: "logo rotated", innerHTML: hLogoColor })), hAsync("p", { key: '86c384f5cf362d16bd6ac5ac8448e3e0d591fa18', class: "f-ui-02" }, "Do not rotate the logo"))), hAsync("span", { key: 'b267f6024a4e7bad6348d323606922888db5264b', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, hAsync("div", { key: '0bd0c5d62e454ce133a187e7d3917afc0c26c551', class: "example" }, hAsync("div", { key: '71e4c1681cfbb64970237b410e0925a0f22e1141', class: "bg-light p-16" }, hAsync("div", { key: '01ab5d75102b9f476fecebcc31c975f6d4720c12', class: "logo outlined", innerHTML: hLogoColor })), hAsync("p", { key: '0734a049d710d1f6406989668f60da1249e29c7b', class: "f-ui-02" }, "Do not apply outlines"))), hAsync("span", { key: '830b7b2a8cdf6dfc7f395dc92db42fbe626a7ae4', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }), hAsync("span", { key: 'ca40bb4ea839eacf62e93f7fbec41f076f7b12a6', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, hAsync("div", { key: '641a963ba81294eefe8fc00dd0a3bdca91af94a2', class: "example" }, hAsync("div", { key: '70691be08e9081899fb2928d5d287aaebef3b399', class: "bg-accent p-16" }, hAsync("div", { key: '556135fd6596b530bf959bb9984641f185cd9f96', class: "text-inverse", innerHTML: hLogoColor })), hAsync("p", { key: '7eaded302e41fc1d04f2033add829dfaba6e8012', class: "f-ui-02" }, "Do not use the green background for the logo version of the logo with backgrounds with the same tones")))));
+        return (hAsync("ul", { key: '3b7b6626be122a983b8e75560519c5cf7e31140a', class: "container grid-layout gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("span", { key: 'ec2af2fbd7ca5fe85b15be216bec42a9289b40f1', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, hAsync("div", { key: 'cef460808c414cc1a14e380d7862523e9d53b214', class: "example" }, hAsync("div", { key: '759ea5b73ced15cf2caef3566f2f1fdeb2122612', class: "bg-dark " }, hAsync("div", { key: '9d0b7aef45f578f1c6e0d84f80583f8116688cf7', class: "no-other-bg-color logo", innerHTML: hLogoColor })), hAsync("p", { key: '223611a3bedea685dd1904922f472fee474ddf11', class: "f-ui-02" }, "Do not use with backgrounds that make legibility difficult"))), hAsync("span", { key: '49e6907610dfaede93ddf179dafbc93f340832ec', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, hAsync("div", { key: 'f11f675e9b002bc5d571907faeabfa7c8a2ea4f4', class: "example" }, hAsync("div", { key: 'b63ab2771e06f9d56c1ae995be5b23612b670e6e', class: "no-other-color p-16" }, hAsync("div", { key: '91d331a3fd50976496cd9eff08e5150d5fb8c368', class: "logo non-brand-color", innerHTML: hLogoColor })), hAsync("p", { key: 'b34ec2c20218499972367287e730e3ea75d94bb2', class: "f-ui-02" }, "Do not apply other colors"))), hAsync("span", { key: '20d1babcf42bd66e56633f78e5e7a38689b1c831', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, hAsync("div", { key: '057c8a11c93076e2b9663baa49f101f90c3007be', class: "example" }, hAsync("div", { key: '767471f768d48de8a230dac229f86a751590bfb6', class: "bg-light p-16" }, hAsync("div", { key: 'd5e807d0cdea5958b0c2d93c3207924616fece63', class: "logo distorted", innerHTML: hLogoColor })), hAsync("p", { key: 'c357e9516bb82a3f431270c56a23fd614684d126', class: "f-ui-02" }, "Do not deform the logo"))), hAsync("span", { key: '789d0af543f4ccc9a270c3a332f1dcb2dc79b77f', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, hAsync("div", { key: 'a5e0d0a85a4e1656a0e7d01dc41f59711971b403', class: "example" }, hAsync("div", { key: 'a7eb16e39e2f954e42f5f8c0c2ed152fb53f7c2a', class: "bg-white p-16" }, hAsync("div", { key: '46ec9c3b424cf4661cda4adc31989a8c355376d4', class: "logo effects", innerHTML: hLogoColor })), hAsync("p", { key: '2c7e8e98a0306d08f30e857e5476703993ffda2c', class: "f-ui-02" }, "Do not apply effects"))), hAsync("span", { key: '846791ec992abd3f0632070cb09d9ef3dcfa67b7', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, hAsync("div", { key: '82fb8f93a6cb8789bf4a56e589975ad353bc88c2', class: "example" }, hAsync("div", { key: '8c7e30c775364fa1d79b118e5aff5cd1e883101f', class: "bg-white p-16" }, hAsync("div", { key: 'a18af5ffaba038fff7a442ab626f783a8a1f08ba', class: "logo rotated", innerHTML: hLogoColor })), hAsync("p", { key: '8ad738506d45e065ad5c96df9f5bf569a632e446', class: "f-ui-02" }, "Do not rotate the logo"))), hAsync("span", { key: 'f556f0d638d48bcd95d0cc198e0408bb109cd92f', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, hAsync("div", { key: '153d0704622a633e8937bb0a481941cca7446a8f', class: "example" }, hAsync("div", { key: 'e4d9e874f931413d924635432df55de18d329f2f', class: "bg-light p-16" }, hAsync("div", { key: '2435bddf3af2928878338793e895cc080b7e1f7a', class: "logo outlined", innerHTML: hLogoColor })), hAsync("p", { key: '64c46cd279b062ab87ce34187bd979c58f1c9312', class: "f-ui-02" }, "Do not apply outlines"))), hAsync("span", { key: 'd28391400911e4b8481a707a197915d2f9fffbf2', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }), hAsync("span", { key: '4aa8af822ff81bb7313145ccc24dbb79a7041f26', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, hAsync("div", { key: '63fc69af51c57497cde82c7377dc5cc56bcd264e', class: "example" }, hAsync("div", { key: '54029b8e273baddb810ea869b341a66f0b9a9e9a', class: "bg-accent p-16" }, hAsync("div", { key: 'd82bbfa6ea877ec8af75230093548fffd086b1b4', class: "text-inverse", innerHTML: hLogoColor })), hAsync("p", { key: 'f12f0cd6baedc08020ebd206c1c5c2fd8a6c7eda', class: "f-ui-02" }, "Do not use the green background for the logo version of the logo with backgrounds with the same tones")))));
     }
     static get style() { return LogoWrongUsageStyle0; }
     static get cmpMeta() { return {
@@ -15824,7 +15917,7 @@ class TokenList {
     render() {
         // Check if `show` prop is provided; if not, display all sections
         const sectionsToDisplay = this.show ? { [this.show]: colors[this.show] } : colors;
-        return (hAsync("section", { key: 'ac8573b341ad313eba0f9f082dcc72cfc81208b3', class: "w-full mt-28" }, Object.entries(sectionsToDisplay).map(([sectionName, sectionContent]) => 
+        return (hAsync("section", { key: '43d7e8b3192d4a2d596ca99a4dce072ea7387924', class: "w-full mt-28" }, Object.entries(sectionsToDisplay).map(([sectionName, sectionContent]) => 
         // Only render sections that exist in `colors`
         sectionContent ? this.renderSection(sectionName, sectionContent) : null)));
     }
@@ -15857,7 +15950,7 @@ class TokenRadii {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync("section", { key: '84dabcd5a39d49e116f8fc9e9b26e00455c7fbb3', class: "w-full mt-28" }, hAsync("ul", { key: 'a821c747c45b8898ab2e7626d2ead91814549335', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(radii).map(([key, value]) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { class: `w-full p-16 block lg:flex items-center justify-center text-center border-3 border-soft rounded-${key}` }, hAsync("eds-code-block", { language: "Utility Class", code: `rounded-${key}`, class: "mx-auto min-w-[200px] sm:mb-4 sm:max-w-[200px] mr-auto" }), hAsync("eds-code-block", { code: `border-radius:${value}`, language: "css", class: "mx-auto min-w-[200px] sm:max-w-[200px] ml-auto" }))))))));
+        return (hAsync("section", { key: '0b0ccb9adcfa77ea898828ddbb244e959f93e2e4', class: "w-full mt-28" }, hAsync("ul", { key: '7c81d0a9725565c4e2587369528568d640e7b1a3', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(radii).map(([key, value]) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { class: `w-full p-16 block lg:flex items-center justify-center text-center border-3 border-soft rounded-${key}` }, hAsync("eds-code-block", { language: "Utility Class", code: `rounded-${key}`, class: "mx-auto min-w-[200px] sm:mb-4 sm:max-w-[200px] mr-auto" }), hAsync("eds-code-block", { code: `border-radius:${value}`, language: "css", class: "mx-auto min-w-[200px] sm:max-w-[200px] ml-auto" }))))))));
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -15886,7 +15979,7 @@ class TokenRatios {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync("section", { key: '9c4dc70bd40a40fbeedc88280ea3fdd4b2597e40', class: "w-full" }, hAsync("eds-section-core", { key: '039b72b762e48f62a4fa58d5af7803d0ed73bf6a', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, hAsync("ul", { key: 'be3e37d842a24536488b7bc03f24399faa1304ff', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(ratios).map(([key, value]) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { class: "container ratio-box flex items-center justify-center text-center border-2 border-soft", style: {
+        return (hAsync("section", { key: '0fb029d34cba573e04e15030b3fdd1497ac9974e', class: "w-full" }, hAsync("eds-section-core", { key: 'd6914b95ef74d590d58b0c90600fc44f5d9d6678', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, hAsync("ul", { key: 'f08511f07380707795b810fd0f34c1acdc47d37d', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(ratios).map(([key, value]) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { class: "container ratio-box flex items-center justify-center text-center border-2 border-soft", style: {
                 aspectRatio: value.replace('/', ':'), // Cast to string to resolve TypeScript error
                 width: '100%', // Full width to show the aspect ratio correctly
                 maxWidth: '300px'
@@ -15928,7 +16021,7 @@ class TokenShadows {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync("section", { key: '4575feac8b5bff23aed39733e638fbb62916988f', class: "w-full mt-28" }, hAsync("ul", { key: 'c9833aa0d698a7ec33911011ccb9227d43c8261a', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(shadowTokens).map(([category, tokens]) => Object.entries(tokens).map(([key, value]) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col items-center mt-16" }, hAsync("div", { class: "w-full p-16 block lg:flex items-center justify-center text-center border-2 border-soft", style: { boxShadow: value } }, hAsync("eds-code-block", { code: `${category}-${key}`, language: "Utility Class", class: "mr-auto sm:mb-4 min-w-[200px]" }), hAsync("eds-code-block", { code: `${value}`, language: "css", class: "ml-auto min-w-[200px]" })))))))));
+        return (hAsync("section", { key: '18d2b4cdcc3b6d6ce8864a9c36e869be9b9e5cb4', class: "w-full mt-28" }, hAsync("ul", { key: 'b258c50ab37a0445d523187c773e92f6569dd6ad', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(shadowTokens).map(([category, tokens]) => Object.entries(tokens).map(([key, value]) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col items-center mt-16" }, hAsync("div", { class: "w-full p-16 block lg:flex items-center justify-center text-center border-2 border-soft", style: { boxShadow: value } }, hAsync("eds-code-block", { code: `${category}-${key}`, language: "Utility Class", class: "mr-auto sm:mb-4 min-w-[200px]" }), hAsync("eds-code-block", { code: `${value}`, language: "css", class: "ml-auto min-w-[200px]" })))))))));
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -15948,7 +16041,7 @@ class TokenSpacing {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync("div", { key: '5f72b8386e92973faca8b22ebadcffa5b8ca8744', class: "w-full" }, hAsync("ul", { key: '619cc2546059aaac566dc89f56b098f72f7c2bde', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: 'b90587543210e02a577854ce061472ef8f3bdc7a', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: 'd98ea95c641209ba592aae8c695e278549840420', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: '6dd84540a213d98fa09480eac823fe030dfb2404', class: "spacing-sample m-32 bg-darker" }, hAsync("span", { key: 'ad0493ba8d97cdcc15535505db4d726d6f69bd38', class: "text-white" }, "Margin: 2rem / m-32")))), hAsync("li", { key: 'a0914d288cdb4b9caef6956af0069cd0937ee019', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: '95adc2b10d3962378de300e00b749b691fda88af', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: '8bad94397c9fe8112b49933a508958000f9cd99d', class: "spacing-sample ml-64 bg-darker" }, hAsync("span", { key: '04229385104243a5ce9a194c4f8056f7341a6736', class: "text-white" }, "Margin Left: 4rem / ml-64")))), hAsync("li", { key: 'f34e1fd5ccafc528ed9359766deaa5c615a2e14b', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: '38e12800b2c8502ea2f9e912af929f71d3ec9699', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: 'f4e93d89576ab3de7f44ce3a85d9838f21bfa7f6', class: "spacing-sample mt-32 bg-darker" }, hAsync("span", { key: 'e85e2e1c7c4c7e765dfafd25dc9f2c33b6bd5069', class: "text-white" }, "Margin Top: 2rem / mt-32")))), hAsync("li", { key: 'b42299c17c024a5906bd09c80a2f309b461b6fde', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: 'f54a9e32893ac6f1b0384e79e2959d1e65a251e2', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: '4209fa0c979a1d55d42d7b892bc94cc0f3788e88', class: "spacing-sample p-32 bg-darker" }, hAsync("span", { key: '1d9249c56d3a42500dfb8cc1d3eae1f89e79cdcd', class: "text-white" }, "Padding: 2rem / p-32")))), hAsync("li", { key: 'ad6f2e33e15c4c21bdfed8478b3d2faa905490fa', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: '9950970e66b8a382e7b0158b54e980a5e5f45774', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: '40e96cd046eaddf3a23387995affbfc399d171ae', class: "spacing-sample pt-32 bg-darker" }, hAsync("span", { key: '2d120273f7a6d4429061d0ade2164ada9a14b506', class: "text-white" }, "Padding Top: 2rem / pt-32")))), hAsync("li", { key: '8c3327edc63f8959c0cb01cce0a8407bf3a605af', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: 'c0be38039770c54577f073e1a707110cd0807ab5', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: 'd8085da375e734ed11fe580f1a9004f6fddef679', class: "spacing-sample pl-32 bg-darker" }, hAsync("span", { key: '029857c00659221390438d8477734d0f130d1b97', class: "text-white" }, "Padding Left: 2rem / pl-32")))))));
+        return (hAsync("div", { key: '144e643ff3f26d09b932b3bfa2086164134728c0', class: "w-full" }, hAsync("ul", { key: '901ef03cdff10b00eb4c8bdbda083760fcde7f24', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: '330a1a3bae65fde46111f2213d25e436fd2a91cf', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: '1d2a762f9cf33ea03af1d63892f9ab53293ee1e7', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: 'adb666cc7517d3bf05d3599c75adb94833522848', class: "spacing-sample m-32 bg-darker" }, hAsync("span", { key: 'b7b11b55a5ccc619c2aa9890d1051995ba9a22f7', class: "text-white" }, "Margin: 2rem / m-32")))), hAsync("li", { key: '0cf9be1778f86479eca5db5d38964cdffeb4d336', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: '5327b962b290dcaf1479cee8a0ae4c85d195be6f', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: '7ada04bb258adad1d06562a6f35d44fcfe21ab5a', class: "spacing-sample ml-64 bg-darker" }, hAsync("span", { key: '5b50ff36cd166f19704cc431ea607fa95fdfe2aa', class: "text-white" }, "Margin Left: 4rem / ml-64")))), hAsync("li", { key: '93c162e7bd651e4e7876e9098327b5d0d6a14001', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: 'baad427ed16e9f64f268cf4b5172426dee3fbf81', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: '4e9cf544dd6ef7bace03d025a887e0c21b7fe3b4', class: "spacing-sample mt-32 bg-darker" }, hAsync("span", { key: '64858f80ac6535ad5d1f5e0dda7ed0b4ea61c9ba', class: "text-white" }, "Margin Top: 2rem / mt-32")))), hAsync("li", { key: 'a5f0b462645727b11bdd874b7883cde9e3208e04', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: '90fd6d72e160d5e16088c715153370b53ba07e36', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: 'c46fbff19edc9b0389b3a3347e96846e8e01d0ea', class: "spacing-sample p-32 bg-darker" }, hAsync("span", { key: '0acbde0ab78642e37e25103260804a096cb9e996', class: "text-white" }, "Padding: 2rem / p-32")))), hAsync("li", { key: 'cdb0d711cad94887bd001defe30f0334dd948d16', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: '6874126bd20267fdd9d0031002e24a71e0a39693', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: '8ab168cab95089dffdc8bff3b9bb2f9cb1fc3832', class: "spacing-sample pt-32 bg-darker" }, hAsync("span", { key: '4366fbd79ce583f9399bc739da790b01759eb5ea', class: "text-white" }, "Padding Top: 2rem / pt-32")))), hAsync("li", { key: 'affbabf8b1d8c4abdd61f51ac12cac4c5e3460a7', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: '6e9eae3de01dd4ff99b19fdfc62eb4a301d5071d', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: '5e6788281bc9f57aab48cd768fa81fb98e1e31c3', class: "spacing-sample pl-32 bg-darker" }, hAsync("span", { key: '8fe02840d35475a60536f13abf97bd98cb53b07e', class: "text-white" }, "Padding Left: 2rem / pl-32")))))));
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -16166,7 +16259,7 @@ class TokenTypography {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync("section", { key: '23815518d694435812ed3d7b9aab850043941b96', class: "w-full" }, hAsync("ul", { key: '366ed5bc5933c5b8a563d33b70471f507a21386c', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(typography.typesets)
+        return (hAsync("section", { key: 'b831c9707b00d17768f585e2015de8a7289b11d2', class: "w-full" }, hAsync("ul", { key: '472e46f2c903597d24e8f24cf28b6f475c7d7a82', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(typography.typesets)
             .filter(([typeKey]) => typeKey !== 'displays') // Exclude "displays"
             .flatMap(([typeKey, typeValues]) => Object.entries(typeValues).map(([size, style]) => (hAsync("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { class: "w-full p-4 block lg:flex items-center border border-soft rounded" }, hAsync("div", { class: "mr-auto hidden lg:block", style: {
                 fontFamily: typography.families.sans,
@@ -16267,7 +16360,9 @@ registerComponents([
   EdsSectionCore,
   EdsSectionHeading,
   EdsSocialNetworks,
+  EdsSteps,
   EdsSvgRepository,
+  EdsSwitch,
   EdsTab,
   EdsTable,
   EdsTabs,
@@ -16280,6 +16375,7 @@ registerComponents([
   EdsTrl,
   EdsUser,
   EdsUserModal,
+  EdsVerticalStepper,
   GradientPrimaryPalette,
   GradientSecondaryPalette,
   GradientSupportPalette,