@ebrains/components 2.3.0 → 2.4.0

package/dist/hydrate/index.js

@@ -2335,7 +2335,7 @@ class ColorPrimaryPalette {
         ];
     }
     render() {
-        return (hAsync("ul", { key: '1ccc8d65b69795afe88b003e6aa1d6eb0f6a8a71', class: "not-prose 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: '247df18cb7672b14048e390299894acf0ff44714', class: "not-prose 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,
@@ -2407,7 +2407,7 @@ class ColorSecondaryPalette {
         this.show = undefined;
     }
     render() {
-        return (hAsync("ul", { key: '0c2fe4671a0754b591462dfdc91f8772eb1478c5', class: "not-prose 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: '1712cc4bd243d5bde96aac8334ce26706edf4731', class: "not-prose 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,
@@ -2481,7 +2481,7 @@ class ColorSupportPalette {
         return 'text-default';
     }
     render() {
-        return (hAsync("ul", { key: '1bafc64afc8d77db69e1847fdf05d2f8ca2d3ee0', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => {
+        return (hAsync("ul", { key: 'f8847f5ebf1c015d60cc1b699b4cfbeceff77b59', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => {
             // compute once
             const textClass = this.getTextColor(color.background);
             return (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 ${textClass}` }, color.cmyk), hAsync("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' }, class: textClass })), hAsync("div", { class: "grid" }, hAsync("span", { class: `f-body-02 ${textClass}` }, color.pantoneC), hAsync("span", { class: `f-body-02 ${textClass}` }, color.pantoneU)))));
@@ -2507,26 +2507,25 @@ const DocsOverview = () => (hAsync("div", { class: "static-content container" },
         "."),
     hAsync("eds-code-block", { code: "<script type='module'>\n  import { defineCustomElements } from 'https://unpkg.com/@ebrains/components@latest/loader/index.js'; \n  // Define custom elements\n  defineCustomElements(window);\n</script>", language: "javascript", "copy-label": "Copy Code" }),
     hAsync("p", null, "This snippet is part of the Stencil component loader system. Under the hood, it does the following:"),
-    hAsync("eds-steps", { steps: [
-            {
-                title: 'Import the Loader Module',
-                content: 'The script imports the defineCustomElements function from the Stencil-generated loader module hosted at a CDN. This module contains the registration logic for all your custom components.'
-            },
-            {
-                title: 'Register Custom Elements',
-                content: 'Calling defineCustomElements(window) loops through the available components and registers each one with the browser using customElements.define(). This makes your custom elements available in the DOM.'
-            },
-            {
-                title: 'Lazy Loading in Action',
-                content: "Although all components are registered on startup, their implementation code is lazy-loaded. This means a component's code is only fetched when it is first used, optimizing the initial load time."
-            },
-            {
-                title: 'Optimized Performance',
-                content: 'By registering components early and lazy-loading their implementations, the script helps maintain a fast startup while ensuring that all custom elements are ready for use when needed.'
-            }
-        ] }),
-    hAsync("p", null, "Once included, components can be used in your markup like any other regular HTML elements:"),
-    hAsync("eds-code-block", { code: '<eds-button label="my bytton" intent="primary"></eds-button>', language: "html", "copy-label": "Copy Code" }),
+    hAsync("div", { class: "mt-16" },
+        hAsync("eds-steps", { type: "static", steps: [
+                {
+                    title: 'Import the Loader Module',
+                    content: 'The script imports the defineCustomElements function from the Stencil-generated loader module hosted at a CDN. This module contains the registration logic for all your custom components.'
+                },
+                {
+                    title: 'Register Custom Elements',
+                    content: 'Calling defineCustomElements(window) loops through the available components and registers each one with the browser using customElements.define(). This makes your custom elements available in the DOM.'
+                },
+                {
+                    title: 'Lazy Loading in Action',
+                    content: "Although all components are registered on startup, their implementation code is lazy-loaded. This means a component's code is only fetched when it is first used, optimizing the initial load time."
+                },
+                {
+                    title: 'Optimized Performance',
+                    content: 'By registering components early and lazy-loading their implementations, the script helps maintain a fast startup while ensuring that all custom elements are ready for use when needed.'
+                }
+            ] })),
     hAsync("h2", null, "Load the variables and styles"),
     hAsync("p", null,
         "To directly use only the produced variables (colors, breakpoints, typography) add the tag below to the",
@@ -2538,13 +2537,16 @@ const DocsOverview = () => (hAsync("div", { class: "static-content container" },
         "To directly use the produced css framework with a few predefined custom utility classes, add the tag below to the",
         ' ',
         hAsync("code", null, "head"),
-        ". Use this when you want quick access to ready-made utilities for building your own components or applications and you do not wish to dive deep to css configurations."),
+        ". Use this when you want quick access to ready-made utilities for building your own components or applications and you do not wish to dive deep to dynamic css configurations."),
     hAsync("eds-code-block", { code: '<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@latest/styles/output.css"/>', language: "css", "copy-label": "Copy Code" }),
     hAsync("p", null,
         "Note that, loading either the variables or the predefined CSS framework above,",
         ' ',
         hAsync("b", null, "automatically loads the fonts so you can skip loading them separately"),
-        ".")));
+        "."),
+    hAsync("h2", null, "Example"),
+    hAsync("p", null, "Once included, components can be used in your markup like any other regular HTML elements:"),
+    hAsync("eds-code-block", { code: '<eds-button label="my bytton" intent="primary"></eds-button>', language: "html", "copy-label": "Copy Code" })));
 
 const DocsInstallation = () => (hAsync("div", null,
     hAsync("p", null, "Before proceeding, ensure that Node.js is installed on your machine\u2014you can download the latest version from the official website. If your project doesn\u2019t already use npm and you plan to integrate EBRAINS Components, you'll need to create a package.json file by running npm init and following the on-screen instructions."),
@@ -2573,6 +2575,13 @@ const DocsVue = () => (hAsync("div", null,
     hAsync("h2", null, "Vue Wrappers"),
     hAsync("p", null, "To use the EBRAINS web components in a Vue Application, simple install the package below and check out the examples."),
     hAsync("eds-code-block", { code: "npm install @ebrains/vue", language: "javascript", "copy-label": "Copy Code" }),
+    hAsync("h2", null, "Vue Router Initialization"),
+    hAsync("p", null,
+        "For better component handling and to avoid potential asynchronous initialization issues (such as runtime errors from components that depend on the router context), make sure the application waits for the router to fully initialize before mounting the app. Use the following pattern in your ",
+        hAsync("code", null, "main.ts"),
+        ":"),
+    hAsync("eds-code-block", { code: "import { createApp } from 'vue';\nimport App from './App.vue';\nimport router from './router';\n\nconst app = createApp(App);\napp.use(router);\n\n// Wait for router to finish resolving initial navigation\nrouter.isReady().then(() => {\n  app.mount('#root');\n});\n", language: "javascript", "copy-label": "Copy Code" }),
+    hAsync("p", null, "This ensures that all components relying on routing information (e.g., navigation links, route guards, or async route data) are rendered only after the router is ready, preventing timing-related errors or unexpected behavior at startup."),
     hAsync("h2", null,
         "Passing Properties to Custom Elements Using the ",
         hAsync("b", null, ".prop"),
@@ -2594,7 +2603,7 @@ const DocsVue = () => (hAsync("div", null,
         hAsync("b", null, ".prop"),
         " modifier in Vue ensures that the data you pass to your custom elements is received as intended. It prevents Vue (and the browser) from transforming camelCase property names into lowercase attributes, thereby maintaining the correct data mapping in your Stencil components."),
     hAsync("eds-section-core", { "section-title": "Example Vue App", "heading-level": "h3" },
-        hAsync("eds-code-block", { code: '\n<template>\n  <div>\n    <EdsHeader></EdsHeader>\n    <!-- render the splash until we manually hide it -->\n    <EdsSplashScreen inverse="false" />\n\n    <!-- then show main UI -->\n    <div v-if="!splashVisible" class="container my-16">\n      <EdsSteps \n        :steps="JSON.stringify(stepsdata)"\n        type="linear"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { EdsSplashScreen, EdsSteps, EdsHeader } from "@ebrains/vue";\n\nexport default {\n  name: "App",\n  components: { EdsHeader, EdsSplashScreen, EdsSteps },\n  data() {\n    return {\n      stepsdata: [\n        { title: "Introduction", content: "Begin by familiarizing yourself with the overall process." },\n        { title: "Process Overview", content: "Review the detailed steps and understand the workflow." }\n      ],\n      splashVisible: true\n    };\n  },\n  methods: {\n    delay(ms) {\n      return new Promise(resolve => setTimeout(resolve, ms));\n    },\n    async initialize() {\n      try {\n        // simulate your init work\n        await this.delay(2000);\n\n        // fire the built-in event that EdsSplashScreen listens for\n        window.dispatchEvent(new Event("hideSplash"));\n      } catch (e) {\n        console.error("Init error", e);\n        window.dispatchEvent(new Event("hideSplash"));\n      } finally {\n        // show the rest of the app\n        this.splashVisible = false;\n      }\n    }\n  },\n  mounted() {\n    this.initialize();\n  }\n};\n</script>\n', language: "javascript", "copy-label": "Copy Code" }))));
+        hAsync("eds-code-block", { code: '\n<template>\n  <div>\n    <EdsHeader headerVariant="strong"></EdsHeader>\n    <!-- render the splash until we manually hide it -->\n    <EdsSplashScreen inverse="false" />\n\n    <!-- then show main UI -->\n    <div v-if="!splashVisible" style="padding: 10px;">\n      <EdsSteps \n        :steps="JSON.stringify(stepsdata)"\n        type="linear"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { EdsSplashScreen, EdsSteps, EdsHeader } from "@ebrains/vue";\n\nexport default {\n  name: "App",\n  components: { EdsHeader, EdsSplashScreen, EdsSteps },\n  data() {\n    return {\n      stepsdata: [\n        { title: "Introduction", content: "Begin by familiarizing yourself with the overall process." },\n        { title: "Process Overview", content: "Review the detailed steps and understand the workflow." }\n      ],\n      splashVisible: true\n    };\n  },\n  methods: {\n    delay(ms) {\n      return new Promise(resolve => setTimeout(resolve, ms));\n    },\n    async initialize() {\n      try {\n        // simulate your init work\n        await this.delay(2000);\n\n        // fire the built-in event that EdsSplashScreen listens for\n        window.dispatchEvent(new Event("hideSplash"));\n      } catch (e) {\n        console.error("Init error", e);\n        window.dispatchEvent(new Event("hideSplash"));\n      } finally {\n        // show the rest of the app\n        this.splashVisible = false;\n      }\n    }\n  },\n  mounted() {\n    this.initialize();\n  }\n};\n</script>\n', language: "javascript", "copy-label": "Copy Code" }))));
 
 const DocsAngular = () => (hAsync("div", null,
     hAsync("h2", null, "Angular Wrappers"),
@@ -2632,7 +2641,7 @@ class ComponentsSection {
         }
     }
     render() {
-        return hAsync("div", { key: 'd5f1ea9d290addbfa2a4c21e815597871f6d7639', class: "container" }, this.renderContent());
+        return hAsync("div", { key: '2716938c52b8f67e031d8508745cccb8f015a110', class: "container" }, this.renderContent());
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -2710,7 +2719,7 @@ class CorrectUseOfColors {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync("div", { key: '4cf1cf9e4076104bc15626b1812de8e44bb2c314', class: "container" }, hAsync("p", { key: '044662efdf38d73e10baf84af9a53b0d757c8a3f', class: "f-body-01" }, "This guide demonstrates the correct usage of the", hAsync("eds-link", { key: '08203f71273f93a43bb2984f5fcb6adf91500987', label: "primary", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", hAsync("eds-link", { key: '244c3681fc63df5debbac5094011b9efd557c99f', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), hAsync("div", { key: '1daafe1f19e2552a4ebe785f5533aabecdab8226', class: "flex" }, hAsync("div", { key: 'd3119d8a3b9053173a4ec421782d68a705d63f54', class: "w-full" }, hAsync("ul", { key: 'e59ee9a8e3aecc12cdc573b4147c93487f60a426', class: "not-prose 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: 'f8fd15b68a9d9f8b0a2a63ccc92ceb47d8c0ed17', class: "w-full" }, hAsync("ul", { key: '9f8a13d2177fc7b500fadf3cf3a697578378f9ff', class: "not-prose 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: '890abae9796f720980c4c40753e64ad9d5854184', class: "f-body-01" }, "This guide demonstrates the correct usage of the", hAsync("eds-link", { key: 'b8099a6ebd9bee755ecfe7d450dbc191a2986aa0', label: "purple", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", hAsync("eds-link", { key: 'b9b0094d03544cfc8404730f8ceeb8caf44cfcd1', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), hAsync("div", { key: 'f1cd546f656dc302f24106cc5fa5faa4a3fc2ece', class: "flex" }, hAsync("div", { key: '730022a2670de7b3e7d0ed53eb9d2f9d533fddff', class: "w-full" }, hAsync("ul", { key: '04b3c963c8ea94a30983d880b096682171eae657', class: "not-prose 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: '78d294c8a18771a66f157f2140ca7aadaad9ed6a', class: "w-full" }, hAsync("ul", { key: 'a7ece655dca8bc3a4d159bdc4b6bad4e86f3846d', class: "not-prose 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: '156ee43969b677fd3140426786834631f5743bb8', class: "f-body-01" }, "This guide demonstrates the correct usage of the", hAsync("eds-link", { key: '26704a99b2bcd72ee414e4df1090d3c360f7d601', label: "blue", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", hAsync("eds-link", { key: '7d7db00799454b2dc76d740529f1381b934a65a5', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), hAsync("div", { key: 'be78a8f1ac1f5b8a0f905e6b1b7981234e627c31', class: "flex" }, hAsync("div", { key: 'a379dd032f13978e6e35432388379f7a932a64d2', class: "w-full" }, hAsync("ul", { key: 'bca9a0adde895d36fec1ca43d59679346408de36', class: "not-prose 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: '235c66fc5f649e5efa11966d5d8708a72ed103ed', class: "w-full" }, hAsync("ul", { key: '6155375812c41d5356aa5f04d18d64f917c60e87', class: "not-prose 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: '453656ec8a0bd258c49d55edd978c3406f5a0ffc', class: "f-body-01" }, "This guide demonstrates the correct usage of the", hAsync("eds-link", { key: '76169ca2b6cf12e269d0d7e22af41adc6c99e95a', label: "redish", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", hAsync("eds-link", { key: '0305f4dc08b6adce8bef1b102c846177ca6ff86d', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), hAsync("div", { key: 'eb2e4206bed167eb28540e79c7b7490bd4a9ae1d', class: "flex" }, hAsync("div", { key: 'c05f20dcfa4e806455b1a8805512b12c7a05cdc0', class: "w-full" }, hAsync("ul", { key: 'bc0fd2e75f75db9b26ce7f225ee2f9fce15e65ca', class: "not-prose 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: '335554176ea7a84d08e07162ed0d66ac69a6859c', class: "w-full" }, hAsync("ul", { key: '10c149af45b26455c820d37e0e8109550b79c34f', class: "not-prose 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: '4fe6cbf0872ceb38e8c4ade73f9cd5d71dc02a6d', class: "container" }, hAsync("p", { key: 'a2f95067e472c8ecc8010cc529ec69c48746f243', class: "f-body-01" }, "This guide demonstrates the correct usage of the", hAsync("eds-link", { key: '304fd52f6ef4744d6a531a5d7b8729d505c6d7e5', label: "primary", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", hAsync("eds-link", { key: 'eea7378f6153492e2238417887f2ce786c450293', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), hAsync("div", { key: '87608635aa776aea41fd8d6a9b794fd617e58316', class: "flex" }, hAsync("div", { key: '39197725e0a769ce5aeae4ecf3490c40368a1a69', class: "w-full" }, hAsync("ul", { key: 'fc7bc2dd624ad83209d2e55a31c7fe228e27a05c', class: "not-prose 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: '487f4c9776ef797fed3a504bc988529fafafe5d8', class: "w-full" }, hAsync("ul", { key: '40cc46b58f95bdfe281b8336d57200f0b10ba7bf', class: "not-prose 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: '0d7f40bfb85770112c13562ec947475f3b31a581', class: "f-body-01" }, "This guide demonstrates the correct usage of the", hAsync("eds-link", { key: '2574eb39b09d61126d4caceb1ca39718fb84cc49', label: "purple", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", hAsync("eds-link", { key: '19ae32c4f3db95043b10be2dd1f8542910295db0', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), hAsync("div", { key: '500638a0a9d1a29962dcffa485612bc716b17585', class: "flex" }, hAsync("div", { key: '8564beedaa965489c3224ab8279a35af3f8234a4', class: "w-full" }, hAsync("ul", { key: 'a60d9044f83a891df3f8855699c9add12826b1e2', class: "not-prose 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: '312f36e79e1a1c1d6c009c8e61fdff15aa7d2d36', class: "w-full" }, hAsync("ul", { key: '239670d7c3ff0eb8e8183999250dd4599f7eb57d', class: "not-prose 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: '0ad90e8f9b9b5a6e02f60f1992c3290811f7712c', class: "f-body-01" }, "This guide demonstrates the correct usage of the", hAsync("eds-link", { key: 'df616406dd19b599afba16f1eb7c6efd0ab0a676', label: "blue", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", hAsync("eds-link", { key: '595d7edcb5d5309daff1bda838a87afaeb91d1ac', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), hAsync("div", { key: '553e6261bd0b27dee6993b3b828f0a32e9125fa7', class: "flex" }, hAsync("div", { key: 'c2117c24b17629ab511eff847954b54b5ef7dafe', class: "w-full" }, hAsync("ul", { key: 'a18f9635a15188a3b9ae057d83968a26f225289e', class: "not-prose 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: '31a3b39cebe2d27d0f14769e9031a6342956ae48', class: "w-full" }, hAsync("ul", { key: 'acd7aab003bade1303b98c6e5cfa31f65078315e', class: "not-prose 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: '3d85b99a224355957176c8511e2ce8847a10b15f', class: "f-body-01" }, "This guide demonstrates the correct usage of the", hAsync("eds-link", { key: 'c362a37363f542dc6e93f74fd19e1be47a9c2e26', label: "redish", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", hAsync("eds-link", { key: '30890c8730d50a567611fee53a879511d6c83170', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), hAsync("div", { key: '0711dc09f3de81be950f9b1103fef11579bf269f', class: "flex" }, hAsync("div", { key: '84e885c4a4102791febe68fa3b3f65f7f14cbf66', class: "w-full" }, hAsync("ul", { key: '68f65fecdc6a4875d0ec1dcc3a187b32a13edaa6', class: "not-prose 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: '9eb65cffe9ec2b8cd8505dffaf67bb9da1545327', class: "w-full" }, hAsync("ul", { key: 'b8ec8142577d347f87a4a34984c83a7b2b6390de', class: "not-prose 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,
@@ -2749,7 +2758,7 @@ class DocsContent {
         }
     }
     render() {
-        return hAsync("div", { key: '68fdef1fd6bdc75ce347d326b3329871e2ed5c8d', class: "container" }, this.renderContent());
+        return hAsync("div", { key: 'dfc087cb088b4505939bcf69559639f0a2075255', class: "container" }, this.renderContent());
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -2782,7 +2791,7 @@ class DocsPalettes {
         }
     }
     render() {
-        return hAsync("div", { key: '97f8cff7dfed11b80a3a9e28d3628a72af8dc12d', class: "container" }, this.renderContent());
+        return hAsync("div", { key: 'dd4c39b9b45b3ac9d7e54898e27c09b3c6b4259d', class: "container" }, this.renderContent());
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -2940,10 +2949,10 @@ class EdsAccordion {
      * Adjusts styles based on `switchBg`, `tiny`, `clampText`, and other props.
      */
     render() {
-        return (hAsync("div", { key: 'd162692cb9a99b6a1b9b736b828214c9d425046e', ref: (el) => (this.wrapperRef = el), class: `flex effect-color border-softer relative grid overflow-hidden rounded-lg border-2 p-16 
+        return (hAsync("div", { key: '095474500f7c60f20e4d737188001d2f3084dbcc', ref: (el) => (this.wrapperRef = el), class: `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' : ''}
-          ${this.description ? 'min-h-56' : ''}` }, hAsync("h3", { key: '3770e241daa7e4696c5481c97965fb2ebe0b17f9', ref: (el) => (this.headerRef = el), class: "mr-auto f-heading-06 text-left absolute inset-x-16 break-words top-16 pr-40" }, this.heading), hAsync("div", { key: '56b7b70d16cf3f944bf3cec878bd15c3e18b399b', class: "ml-auto" }, hAsync("eds-button", { key: '4b770831f155f7e77a424b9dd3ec0a8708a0859f', id: "toggleAccordion", intent: this.buttonIntent, "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`, onClick: this.handleClick, icon: "chevron-down" })), hAsync("div", { key: 'c75c4d840bc8be25ee7590d90e3290faf090fdf0', class: `w-full`, style: Number.isFinite(this.headerHeight) ? { marginTop: `${this.headerHeight}px` } : {} }, this.description ? (hAsync("span", { class: `text-light ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}` }, this.description)) : null, hAsync("section", { key: 'b78b8f7fa93a85c886136cac8119d7b94de2a129', id: "accordionSection", "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: '75ba9a9a7082b4ded3dacd6cbaa9ceb3688c5045', ref: (el) => (this.childContentRef = el), class: `accordion-content effect-color pt-4`, "aria-hidden": !this.isExpanded }, hAsync("span", { key: 'e08cefc1d6fe7f3d162de86a17646d88a8686d83', class: `${!this.isExpanded && this.clampText ? 'line-clamp-2' : ''}` }, hAsync("slot", { key: '77d3a7fb997a9f313e3013a17f87c28f7ff8adad' })))))));
+          ${this.description ? 'min-h-56' : ''}` }, hAsync("h3", { key: 'f090fbe3632df8302046f1178e82b8affc4cc821', ref: (el) => (this.headerRef = el), class: "mr-auto f-heading-06 text-left absolute inset-x-16 break-words top-16 pr-40" }, this.heading), hAsync("div", { key: '0a30ab8c27cadbb342fc57f6393111c84f10a664', class: "ml-auto" }, hAsync("eds-button", { key: '01f4658df8181b63b71a2e0d2a67e8f8b58efbb7', id: "toggleAccordion", intent: this.buttonIntent, "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`, onClick: this.handleClick, icon: "chevron-down" })), hAsync("div", { key: '9f3b5a0e425c2dffe3b6fe40fa33b020d64256d8', class: `w-full`, style: Number.isFinite(this.headerHeight) ? { marginTop: `${this.headerHeight}px` } : {} }, this.description ? (hAsync("span", { class: `text-light ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}` }, this.description)) : null, hAsync("section", { key: '414735d7d982de76d8a1b8db24aa9a569eba37c7', id: "accordionSection", "aria-labelledby": "accordionHeader", "aria-hidden": !this.isExpanded, class: `z-1 effect-height relative h-0 w-full ${!this.isExpanded ? 'overflow-hidden' : ''}`, style: { height: this.isExpanded ? 'auto' : '0' } }, hAsync("div", { key: '11097a0646b18f728af494c14aa4cc0e5335defe', ref: (el) => (this.childContentRef = el), class: `accordion-content effect-color pt-4`, "aria-hidden": !this.isExpanded }, hAsync("span", { key: '88414c40490aa77166d23868f16556b9356279a7', class: `${!this.isExpanded && this.clampText ? 'line-clamp-2' : ''}` }, hAsync("slot", { key: '8070a7676ca8fba065f813852a2e0cf4146f3374' })))))));
     }
     get el() { return getElement(this); }
     static get style() { return EdsAccordionStyle0; }
@@ -3120,12 +3129,12 @@ class EdsAlert {
     }
     render() {
         const ariaLabel = this.intent !== 'default' ? `${this.intent} alert` : 'alert';
-        return (hAsync("div", { key: '33781ae5fb8504158e8fe780a76d89566a39e914', class: alertStyles({
+        return (hAsync("div", { key: 'd8f0a45ddbaf3d3eb284751e33ddfdce2e13b67a', class: alertStyles({
                 intent: this.intent,
                 brd: this.brd,
                 direction: this.direction,
                 withBtn: this.withBtn
-            }), role: "alert", "aria-label": ariaLabel, "aria-live": this.intent === 'error' ? 'assertive' : 'polite', "aria-labelledby": "alert-message", "aria-describedby": this.withBtn ? 'alert-action' : undefined }, hAsync("p", { key: 'fb3a1d216279b4076b09ef9544d37c5229b4d706', id: "alert-message", class: "f-ui-01 py-8", innerHTML: this.message }), this.withBtn && (hAsync("div", { key: 'a5edd833ae3924f41edb17068090eeeb4e9f9cfd', id: "alert-action" }, this.pressableUrl ? (hAsync("eds-link", { class: "eds-alert-link", label: this.pressableLabel, url: this.pressableUrl, intent: "secondary", external: true })) : (hAsync("eds-button", { class: "eds-alert-button", label: this.pressableLabel, intent: "secondary", onClick: () => this.handleAction() }))))));
+            }), role: "alert", "aria-label": ariaLabel, "aria-live": this.intent === 'error' ? 'assertive' : 'polite', "aria-labelledby": "alert-message", "aria-describedby": this.withBtn ? 'alert-action' : undefined }, hAsync("p", { key: '179862c141a2ce05fa9f8562be7e64196baa3922', id: "alert-message", class: "f-ui-01 py-8", innerHTML: this.message }), this.withBtn && (hAsync("div", { key: '3677358bd563a3e2ee1b74309dc4fb6c84ac475f', id: "alert-action" }, this.pressableUrl ? (hAsync("eds-link", { class: "eds-alert-link", label: this.pressableLabel, url: this.pressableUrl, intent: "secondary", external: true })) : (hAsync("eds-button", { class: "eds-alert-button", label: this.pressableLabel, intent: "secondary", onClick: () => this.handleAction() }))))));
     }
     get el() { return getElement(this); }
     static get style() { return EdsAlertStyle0; }
@@ -3176,7 +3185,7 @@ class EdsAppRoot {
         this.combinedInitPromise = Promise.all([initKeycloakPromise, authStatusPromise]);
     }
     render() {
-        return (hAsync("div", { key: '814465ac49c8f5688bc8b1006723a531c925c030' }, hAsync("eds-splash-screen", { key: '578982c4b01714129ebf0e7c415bdacea10061f8', inverse: true, initPromise: this.combinedInitPromise }), hAsync("eds-login", { key: 'abc4ef7fed629bc2eda0e2f14f5165b83851794d', "keycloak-url": "http://localhost:8080", "keycloak-realm": "nigeor-realm", "keycloak-client-id": "stencil-app" }), hAsync("main", { key: '1fb96900889c942ec0beb120e1ed869a9d78c6fa' }, this.isAuthenticated ? hAsync("h1", null, "Welcome, authenticated user!") : hAsync("h1", null, "Please log in."))));
+        return (hAsync("div", { key: 'aa412cafecaceba211d0938d42779d33a20b418f' }, hAsync("eds-splash-screen", { key: '78de23a74a0263c09e400cb16d20e014a50913ba', inverse: true, initPromise: this.combinedInitPromise }), hAsync("eds-login", { key: '6a690104e273cbefa9ec4e66c5479c2db0666f39', "keycloak-url": "http://localhost:8080", "keycloak-realm": "nigeor-realm", "keycloak-client-id": "stencil-app" }), hAsync("main", { key: 'e011a7d8a0a78a932f61a218d85aac8f25e8021b' }, this.isAuthenticated ? hAsync("h1", null, "Welcome, authenticated user!") : hAsync("h1", null, "Please log in."))));
     }
     static get cmpMeta() { return {
         "$flags$": 9,
@@ -3259,7 +3268,7 @@ class EdsAvatar {
      * @returns {JSX.Element} The rendered avatar component.
      */
     render() {
-        return (hAsync("div", { key: 'd29c110e340567236716e77c4f003bec5c70ee63', 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: '7b5bf31c794c9bbddd2976fdd5a273842a75603a', 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 {
@@ -3290,7 +3299,7 @@ class EdsBlockBreak {
         this.inverse = false;
     }
     render() {
-        return hAsync("hr", { key: '0e2ec4b9c8b70ff9b65e6c4f2af42f198b1eb7d0', class: `${this.inverse ? 'border-default' : 'border-softer'}  my-16 inline-block w-full border-t-2` });
+        return hAsync("hr", { key: 'dd9b98d66f195135ff2fb1374a56d4c670e43d3e', class: `${this.inverse ? 'border-default' : 'border-softer'}  my-16 inline-block w-full border-t-2` });
     }
     static get style() { return EdsBlockBreakStyle0; }
     static get cmpMeta() { return {
@@ -3450,7 +3459,7 @@ class EdsBreadcrumb {
      */
     render() {
         const itemsToRender = this.getTruncatedItems();
-        return (hAsync("nav", { key: '27ddf744a07f1b697e549cdc6d2a66f65ebe6386', "aria-label": "Breadcrumb" }, hAsync("ol", { key: '43ac089290c0a6f9b3c5cd629def8540966637b8', class: "flex items-center space-x-2" }, itemsToRender.map((item, index) => {
+        return (hAsync("nav", { key: '4894fb9e6b37ef84880a62f4dcd3289dcb9cab38', "aria-label": "Breadcrumb" }, hAsync("ol", { key: 'd69405fcee024465d645d9cdbb17189998a94b95', 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 ? ((() => {
                 const { fullLabel } = this.getLabels(item, isLast);
@@ -3616,7 +3625,6 @@ class EdsButton {
         this.size = 'small';
         this.iconPos = 'right';
         this.iconSmall = false;
-        this.extraClass = undefined;
         this.triggerClick = undefined;
     }
     handleParentContext(event) {
@@ -3667,7 +3675,7 @@ class EdsButton {
         });
         const ElementType = this.elementType;
         const isInteractive = !this.disabled && !this.loading;
-        return (hAsync(Host, { key: 'fe91be3eb9c2a3ece800097392462b3bd76f1264' }, hAsync(ElementType, { key: 'aa1d4e0544beff8759d232d0e897ffdbcd584ea5', tabindex: isInteractive ? '0' : '-1', "aria-label": this.label ? undefined : this.ariaLabel, "aria-disabled": this.disabled || this.loading ? 'true' : undefined, "aria-busy": this.loading ? 'true' : undefined, disabled: this.elementType === 'button' ? this.disabled || this.loading : undefined, role: this.elementType === 'a' ? 'button' : undefined, class: `${classes || ''} ${this.extraClass || ''}`, onClick: (event) => this.handleClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, this.label && (hAsync("span", { key: '2b55edc1b986950ba03a759cffd7346c8611ac0a', class: this.loading ? 'opacity-0' : '', "aria-hidden": this.loading ? 'true' : undefined }, this.label)), this.loading && (hAsync("span", { key: '5b035b8ef848cde63af9a2cc4a3ed72c68e1e03d', class: "absolute inset-0 flex items-center justify-center", "aria-hidden": "true" }, hAsync("span", { key: '2746ef996f0835c76c4ef2cbd39103ad4d07c21f', class: "loader", style: {
+        return (hAsync(Host, { key: '25a7b4ffda3df65e91c77a18becd45bc40973f3c' }, hAsync(ElementType, { key: '0f00d82a37f3189b862015eb2d915f2364b6d75d', tabindex: isInteractive ? '0' : '-1', "aria-label": this.label ? undefined : this.ariaLabel, "aria-disabled": this.disabled || this.loading ? 'true' : undefined, "aria-busy": this.loading ? 'true' : undefined, disabled: this.elementType === 'button' ? this.disabled || this.loading : undefined, role: this.elementType === 'a' ? 'button' : undefined, class: `${classes || ''}`, onClick: (event) => this.handleClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, this.label && (hAsync("span", { key: '6e45dfefb4805eef0574f7462becca6cde85dbc0', class: this.loading ? 'opacity-0' : '', "aria-hidden": this.loading ? 'true' : undefined }, this.label)), this.loading && (hAsync("span", { key: '9909c70db39a039b883854caff816d25f132b866', class: "absolute inset-0 flex items-center justify-center", "aria-hidden": "true" }, hAsync("span", { key: '367cd65a13f81cbcb12d93855dc091a4309566bb', 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: `
@@ -3693,7 +3701,6 @@ class EdsButton {
             "size": [1],
             "iconPos": [1, "icon-pos"],
             "iconSmall": [4, "icon-small"],
-            "extraClass": [1, "extra-class"],
             "triggerClick": [16]
         },
         "$listeners$": [[0, "parentContext", "handleParentContext"]],
@@ -3727,7 +3734,7 @@ class EdsCardDesc {
         return this.truncate && this.truncateLines ? `line-clamp-${this.truncateLines}` : '';
     }
     render() {
-        return (hAsync("p", { key: '1e2ae9b46a477adb8a249a0a06c963d3e44ff297', class: "text-light f-ui-03-light" }, hAsync("span", { key: '072222b2b2249a772c1e26f566d7ac863dd6a1dd', class: this.getTruncateClass() }, this.description)));
+        return (hAsync("p", { key: '3711e4f24ad19f1dedef3083b9b9c8868f3b4e3f', class: "text-light f-ui-03-light" }, hAsync("span", { key: '46b53c5111bc05ffaaa6f8fcd4b1b6ddfae2d413', class: this.getTruncateClass() }, this.description)));
     }
     static get style() { return EdsCardDescStyle0; }
     static get cmpMeta() { return {
@@ -3832,7 +3839,7 @@ class EdsCardGeneric {
         });
     }
     render() {
-        return (hAsync("article", { key: '76e77261a0c6e0c506fe7600d31a492808293d27', class: this.articleClasses(), onClick: () => this.handleClick() }, hAsync("eds-card-title", { key: 'ca26508b05a31310df7fc0c3fa5769f7947e80fc', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.cardTitle, url: this.url, hierarchy: this.hierarchy }), hAsync("div", { key: '00ba325e6a0093cb2be35854f2bcb579ad4eb35b', class: "mt-8 mb-8" }, this.description && (hAsync("eds-card-desc", { key: '7f8b687ac2c2f334549b5d9d438aab5c62a6fcc0', "truncate-lines": "3", description: this.description }))), this.parsedImage ? (hAsync("eds-img", Object.assign({ class: "mt-8 block mx-auto" }, this.parsedImage))) : this.avatar || this.shortAbbreviation ? (hAsync("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, hAsync("div", { key: '63cc046648dbf7d56909b2478d6c15b14e8d9ae4', class: "flex flex-wrap gap-y-4 gap-x-1" }, this.parsedTags.map((tag, index) => (hAsync("eds-tag", { key: index, intent: tag.style, label: tag.label, size: tag.size })))), ' '));
+        return (hAsync("article", { key: '76e77261a0c6e0c506fe7600d31a492808293d27', class: this.articleClasses(), onClick: () => this.handleClick() }, hAsync("eds-card-title", { key: 'ca26508b05a31310df7fc0c3fa5769f7947e80fc', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.cardTitle, url: this.url, hierarchy: this.hierarchy }), hAsync("div", { key: '00ba325e6a0093cb2be35854f2bcb579ad4eb35b', class: "mt-8 mb-8" }, this.description && hAsync("eds-card-desc", { key: '2d775f772092b7873dd1eabc7c3e8606dded0c47', "truncate-lines": "3", description: this.description })), this.parsedImage ? (hAsync("eds-img", Object.assign({ class: "mt-8 block mx-auto" }, this.parsedImage))) : this.avatar || this.shortAbbreviation ? (hAsync("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, hAsync("div", { key: 'e51237f8196212715d1d97ae1e6bfc2625573cb3', class: "flex flex-wrap gap-y-4 gap-x-1" }, this.parsedTags.map((tag, index) => (hAsync("eds-tag", { key: index, intent: tag.style, label: tag.label, size: tag.size })))), ' '));
     }
     get el() { return getElement(this); }
     static get style() { return EdsCardGenericStyle0; }
@@ -4044,7 +4051,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: '65af57bfbe558b895f74dd4d088c243a25c7265d', class: cardClasses, onClick: (event) => this.handleClick(event) }, hAsync("div", { key: 'cf0e9f71cd617a44facf7e35cdf78774e41b3eb1', class: `flex grow flex-col ${this.vertical ? 'min-h-156' : ''}` }, hAsync("div", { key: '82870bbaf7203ac92f25ca241186ba7a32b784d5', class: "lg:max-w-[720px]" }, hAsync("eds-card-title", { key: '0f0356d2e4a7af3a5d50c66382ff5d3f70298e8c', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.titleProject, url: this.url }), this.editorialTitle && (hAsync("span", { key: '3586446f9ad1bb190c93cd54d7e53d6e835b8e37', class: `block ${this.vertical ? 'f-ui-02' : 'mt-4 f-heading-06'}` }, this.editorialTitle))), this.categoryTitle && (hAsync("div", { key: '750c707f04d12ddd1d38aa0377b47f8804070535', 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: '01fbeebd88ee60feede3b21db177b3691ffc2808', label: this.categoryTitle })))), this.parsedImage && (hAsync("div", { key: 'c61baca9d015c9bfb7ec6ce3ec4ea2e41d8ac513', class: imageClasses }, hAsync("div", { key: '04d4828b6648470543ddde09d935aaa7c6133d7e', class: "aspect-1x1 w-full" }, hAsync("eds-img", Object.assign({ key: 'cde6eb483641c02abb6c229470f07aa5b08fbf9b', sizes: this.vertical ? this.parsedImage.sizes || '' : '192px' }, this.parsedImage)))))));
+        return (hAsync("article", { key: '5f72c2dc52a8ef7edb004c6cf9a2035097c5aa28', class: cardClasses, onClick: (event) => this.handleClick(event) }, hAsync("div", { key: '145809ee5e4800d852bb6d9b84a023160098f3c4', class: `flex grow flex-col ${this.vertical ? 'min-h-156' : ''}` }, hAsync("div", { key: '3d77551f7518cf63f16daffc7d59a2dd23b66148', class: "lg:max-w-[720px]" }, hAsync("eds-card-title", { key: '715a73ee7a013d13ef5e9f3f180eedf043998d76', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.titleProject, url: this.url }), this.editorialTitle && (hAsync("span", { key: '418fc9fe39b480f4d1c9e99f2ef4361a6ad3827f', class: `block ${this.vertical ? 'f-ui-02' : 'mt-4 f-heading-06'}` }, this.editorialTitle))), this.categoryTitle && (hAsync("div", { key: '58764ae4d610e2d1205cf09b7274a14a8bfb5694', 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: 'c552bbc88aca3e3b114aef1fbd3e3bdf3e334624', label: this.categoryTitle })))), this.parsedImage && (hAsync("div", { key: '3e85ad957b7d782cc228a508ce8e76ccb7490a9c', class: imageClasses }, hAsync("div", { key: '77e161fd2deb2c6ec3e30ad0ef34f934ba9197d1', class: "aspect-1x1 w-full" }, hAsync("eds-img", Object.assign({ key: 'e9f0f4982bddba64ee979490024af471f4e9d8f8', sizes: this.vertical ? this.parsedImage.sizes || '' : '192px' }, this.parsedImage)))))));
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
@@ -4104,7 +4111,7 @@ class EdsCardSection {
      * @returns {JSX.Element} The rendered section containing a list of cards.
      */
     render() {
-        return (hAsync("section", { key: 'bae0833e4d29cb2874bfb1751d7663751fd64abe', class: "w-full" }, hAsync("ul", { key: '001026f2866cf6101c317f08d32eac4dff46d335', class: "grid-layout grid-cols-4 gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.parsedCards.map((card) => (hAsync("li", { class: `grid-col-span-4 md:grid-col-span-${this.occupyCols} 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: '4b30b9eb2585350196efa901f5b36d903e43af4d', class: "w-full" }, hAsync("ul", { key: 'ab51c67c0f4095e70be1b1c2fdf9975726b50760', class: "grid-layout grid-cols-4 gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.parsedCards.map((card) => (hAsync("li", { class: `grid-col-span-4 md:grid-col-span-${this.occupyCols} 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 {
@@ -4133,7 +4140,7 @@ class EdsCardTags {
         this.tags = [];
     }
     render() {
-        return (hAsync("div", { key: 'dc4a5cdabd7ab34e3c2c67b9a166ae8bc15a9861', 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: 'a0184d0900e08d0ae48dd4d2164c9d7ca0ef8db1', 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 {
@@ -4197,7 +4204,7 @@ class EdsCardTitle {
     render() {
         //const Tag = this.getTag();
         const Heading = this.headingLevel;
-        return (hAsync(Heading, { key: '1fd3f080c09f94d7b7175d51b9d8e38bb0b76286', class: this.getTitleClass() }, hAsync("a", { key: 'dd06cbecbc9eaef8052f34eae28ae17c5f92c918', 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: '5d356d301cfee459ac142895a042e9b1ccd59367', class: this.getTitleClass() }, hAsync("a", { key: '348fffdd2abccf3b08ecab9481718b4a2aa50807', 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 {
@@ -4285,7 +4292,7 @@ class EdsCardTool {
         });
     }
     render() {
-        return (hAsync("article", { key: '00f417ee065537f8b30bc73e5ad9ca0d69b3aed3', class: `${this.el.tagName.toLowerCase()} ${this.articleClasses()}`, onClick: () => this.handleClick() }, hAsync("eds-card-title", { key: '9d8156f655c9344c872631b75cfcaf52fdf23347', "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: 'da7aa3d0d9f7995a824fd7720342e6dd4d94224f', 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: '3e3001ec404a0bbca84deafc89de6aab8bf2fe45', 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: 'bde34da77105309a05bf36cc1cf24888e62dc826', class: `${this.el.tagName.toLowerCase()} ${this.articleClasses()}`, onClick: () => this.handleClick() }, hAsync("eds-card-title", { key: '521f11ef8f9f13cdc35b27e45e20d0bec81cc3f8', "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: '615ccb630818a49e278f1308aa95caec3a02e3fe', 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: '40cfa7d940136d4bce5de0c2b37fca91187110f8', 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; }
@@ -6797,7 +6804,7 @@ class EdsCodeBlock {
         return this.code; // Fallback if language is not provided or unsupported
     }
     render() {
-        return (hAsync("div", { key: '2c5addd195dc8d930db643e95ecc52410dd94052', class: "relative bg-stronger rounded-sm" }, hAsync("div", { key: 'aea2d891f9e5d57d4b8390cff4597cb8edd163a1', 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: '41e2d463bde145f901eae42dda68091a9a42e3ef', "aria-hidden": "true", class: "w-20 h-20 mt-8" }, hAsync("eds-icon-wrapper", { key: '7285b81dd936c770b09b4a36bed8c8ba2a87da99', icon: this.copied ? 'success' : 'copy', onClick: () => this.copyToClipboard() })), hAsync("span", { key: 'a12d74735064478480544cc4b5cf14d7b028b1a8', class: "sr-only" }, "Copy Code")), this.language && (hAsync("pre", { key: '2fcde4f271059ac98cb3b1b6bffbf4564ccf795b', class: `language-${this.language} bg-stronger pl-8 pb-8`, role: "region", "aria-label": `Code block in ${this.language}` }, hAsync("code", { key: '68a8b83f492e7b0eb2916a063e28a4293e6a988f', innerHTML: this.getHighlightedCode() })))));
+        return (hAsync("div", { key: 'bc74b6be37bcb24700d17b48b5398077e485abd7', class: "relative bg-stronger rounded-sm" }, hAsync("div", { key: 'db0395bfd55eb3394ab2149c5c436f2a54e8afb0', 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: '628ad41f15f3a38abe4b7c382074c8f5a8679a8c', "aria-hidden": "true", class: "w-20 h-20 mt-8" }, hAsync("eds-icon-wrapper", { key: '1c95d57a5d8113d6ab7ebf7da713e058c7cc10f1', icon: this.copied ? 'success' : 'copy', onClick: () => this.copyToClipboard() })), hAsync("span", { key: 'a64b2450b631835b6fc2c15047b09ceea5a9fc95', class: "sr-only" }, "Copy Code")), this.language && (hAsync("pre", { key: '51945cbee1504625b54362505b60f1bd1784bdda', class: `language-${this.language} bg-stronger pl-8 pb-8`, role: "region", "aria-label": `Code block in ${this.language}` }, hAsync("code", { key: '55961aa8278177451e13c929ec7f7065afcac93b', innerHTML: this.getHighlightedCode() })))));
     }
     get el() { return getElement(this); }
     static get style() { return EdsCodeBlockStyle0; }
@@ -6845,7 +6852,7 @@ class EdsCookiesPreference {
         }
     }
     render() {
-        return (hAsync("div", { key: '64edfc7f4d83f6185be6c74707115ec478628c6b' }, hAsync("eds-link", { key: 'd2c07e20ae1e67753b17f017bd5efa9b1e722fec', size: "small", intent: this.intent, label: this.buttonText, onClick: () => this.toggleCookiesPopup() }), this.showMatomoNotice && hAsync("eds-matomo-notice", { "force-show": true, key: this.noticeKey })));
+        return (hAsync("div", { key: 'c1754394ac9c249ef4c5959ed0b6a74d8ec365ab' }, hAsync("eds-link", { key: '4bb5d796d14dc242024df4681dea493d4511a8b6', size: "small", intent: this.intent, label: this.buttonText, onClick: () => this.toggleCookiesPopup() }), this.showMatomoNotice && hAsync("eds-matomo-notice", { "force-show": true, key: this.noticeKey })));
     }
     static get style() { return EdsCookiesPreferenceStyle0; }
     static get cmpMeta() { return {
@@ -7034,14 +7041,14 @@ class EdsDropdown {
      * @returns {JSX.Element} The rendered dropdown component.
      */
     render() {
-        return (hAsync("div", { key: 'e31acbda3428f47fe32cfe550cf00c53374da215', class: "z-focus relative", ref: (el) => (this.dropdownContent = el) }, hAsync("eds-button", { key: 'ce3e11ecee4f603c3ba0e003fccf3fe81289f4c8', 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: '59f8533409171401ed73eac8d307e4eafbde9209', ref: (el) => (this.panelEl = el), role: "menu", class: {
+        return (hAsync("div", { key: 'ffc4915b2104e3d2dd347900acd897f56910a674', class: "z-focus relative", ref: (el) => (this.dropdownContent = el) }, hAsync("eds-button", { key: 'ba48bdd7b75fd230bdc2dd564bd477f0349f5426', 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: 'a29b57598a2ed8fcc9593c928df9443fd4449481', ref: (el) => (this.panelEl = el), 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: '675839893bf667a7a05a63e552935bb1a5874b73' }))));
+            }, style: { display: this.isOpen ? 'block' : 'none' }, "aria-label": "Dropdown", "aria-hidden": !this.isOpen }, hAsync("slot", { key: 'ddf003345ef5181b968b4bfd8962805d09d15e89' }))));
     }
     get host() { return getElement(this); }
     static get style() { return EdsDropdownStyle0; }
@@ -7126,7 +7133,7 @@ class EdsFeedback {
         const HeadingTag = this.headingLevel;
         const levelNum = this.headingLevel.replace('h', '');
         const headingClass = `f-heading-${levelNum.padStart(2, '0')} my-4`;
-        return (hAsync("div", { key: 'd197c6324cca1bea1cb69000cfb0a4776285eeea', class: "grid inline" }, hAsync(HeadingTag, { key: '8a09b89f2732d60e470a16b818467768c0f4e474', class: headingClass }, this.label), hAsync("p", { key: '6a2c35b73b8bde9d96841d60d0761581efbd4047', class: "f-body-01 text-light" }, this.description), hAsync("eds-rating", { key: '0fb0acbbe7c473f2de117e0b0028cafc2f959ed8', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (hAsync("span", { key: '8aea027f1c37cbe9ff22555ec00ed183d8c52f0a', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
+        return (hAsync("div", { key: '5405127cfc114d4906617955d7b1069a04ed7b8e', class: "grid inline" }, hAsync(HeadingTag, { key: 'c0a2593d843577323b6a27d0f8fdca3b84063bd5', class: headingClass }, this.label), hAsync("p", { key: '5b7ef9fbd8c5b4a9d3c7c39e3092244d08dde126', class: "f-body-01 text-light" }, this.description), hAsync("eds-rating", { key: '2de1ad00dd21d987bc4a91438500a58a0bcd63a7', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (hAsync("span", { key: '3de038a0ae8ee334edde65194356f021e14e7cb3', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
     }
     get el() { return getElement(this); }
     static get style() { return EdsFeedbackStyle0; }
@@ -7212,9 +7219,11 @@ class EdsFooter {
      * legal links such as "Cookies Preferences" and copyright information.
      */
     render() {
-        return (hAsync("footer", { key: '5e629d1f5f06ce62843f67b296c94b18765d8100' }, this.social ? (hAsync("div", { class: "border-softest border-t-2 pt-20 md:pt-28" }, hAsync("div", { class: "container pb-20" }, hAsync("div", { class: "grid-layout" }, hAsync("div", { class: "grid-col-span-12 lg:grid-col-span-5" }, hAsync("eds-social-networks", { class: "mt-28" })))))) : null, hAsync("div", { key: '68966997037f0dd88c9fb2afcc39514aefa5ff8d', class: `border-softest ${this.social ? 'border-t-2' : ''} pb-28 pt-20 md:pt-28` }, hAsync("div", { key: 'd3ec3c9341e7509b2f4771ce0f83fbf4913b4e3e', class: "container flex items-center gap-20 lg:flex-nowrap" }, hAsync("div", { key: '30774f2c9c1c5113c8f178af2ad5dbc01b01c8d2', class: "flex items-center gap-x-12" }, hAsync("a", { key: '1939784cb357e1a0a9fc6a00c75953c37d7cac90', 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-europe_en", "aria-label": "Learn about Horizon Europe funding" }, hAsync("eds-img", { key: 'b9dc32ad675188d061d01e6b11cda37c4edd5e29', width: 54, height: 41, src: "https://www.ebrains.eu/flags/4x3/eu.svg", alt: "European Union Flag" }))), hAsync("div", { key: '1642eaf31c946bf3f7bd3d235dccd1a66f4de7d8' }, hAsync("div", { key: '4a4b1bf11ebf31a9a0f1735cb0720bdbdab07943', class: "f-ui-04 text-light" }, hAsync("p", { key: '24226946123a5e632d393be9a24971ff9e07b355' }, this.fundedBy), hAsync("div", { key: 'a21829ec3d7d74027a14ee419f37d2ec326b7154', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block" }, hAsync("span", { key: '4791eb4b178cb07f3983f8aa6f3ed0e60918f929', class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline mr-4" }, "\u00A9 ", this.rightsReserved), this.enableCookiesSettings ? (hAsync("eds-link", { label: this.cookiesPreferences, intent: "underline", "extra-class": "f-ui-04", onClick: () => {
+        const year = new Date().getFullYear();
+        const rights = this.rightsReserved || `${year} EBRAINS. All rights reserved.`;
+        return (hAsync("footer", { key: 'bf9d98eea0bd151bf87818b770e85fe0cfa1044f' }, this.social ? (hAsync("div", { class: "border-softest border-t-2 pt-20 md:pt-28" }, hAsync("div", { class: "container pb-20" }, hAsync("div", { class: "grid-layout" }, hAsync("div", { class: "grid-col-span-12 lg:grid-col-span-5" }, hAsync("eds-social-networks", { class: "mt-28" })))))) : null, hAsync("div", { key: 'c0058cd32e2904e4e08ec46b99a0cbbabb5df588', class: `border-softest ${this.social ? 'border-t-2' : ''} pb-28 pt-20 md:pt-28` }, hAsync("div", { key: '4f2993ccded30ca66da34eca632b62abf02e06d5', class: "container flex items-center gap-20 lg:flex-nowrap" }, hAsync("div", { key: '81efd584b5de410522d338bb6ab4b53096a36868', class: "flex items-center gap-x-12" }, hAsync("a", { key: '5a641163b3cb1549ee886e9029b65a012b31cd85', 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-europe_en", "aria-label": "Learn about Horizon Europe funding" }, hAsync("eds-img", { key: '6428f6d0b70f802a7eaa81fcce7641f754c0071a', width: 63, height: 50, src: "https://www.ebrains.eu/flags/4x3/eu.svg", alt: "European Union Flag" }))), hAsync("div", { key: 'c3612f7c694abd66831a6c04f2d9f98bc9f8a2dd' }, hAsync("div", { key: '7d16c929479ee8db9d981d6178f17fd832184e29', class: "f-ui-02 text-light" }, hAsync("p", { key: '86c6e3eec115a886a37618963e973004f130950e' }, this.fundedBy), hAsync("div", { key: '13e4e3925ea8f76865684cba29c91653bba0c45d', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block" }, hAsync("span", { key: '21c77485fffbe352edb8501dab07fd6628de62ba', class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline mr-4" }, "\u00A9 ", rights), this.enableCookiesSettings ? (hAsync("eds-link", { label: this.cookiesPreferences, intent: "underline", size: "small", onClick: () => {
                 this.toggleCookiesConsent();
-            } })) : null))), hAsync("div", { key: '9d1173a7b4db564de8fa2ffb85d2b7db724bef95', class: "ml-auto pl-12" }, this.enableScrollTop ? (hAsync("div", { id: "toTop", class: "transition-all transition duration-75 opacity-0" }, hAsync("eds-button", { id: "backToTop", "aria-label": this.backToTopAriaLabel, intent: "ghostInverse", icon: "chevron-up", onClick: this.backToTop, tabindex: "-1" }))) : null)))));
+            } })) : null))), hAsync("div", { key: '1c8417017493de5e446bfdeec248948d920c1a95', class: "ml-auto pl-12" }, this.enableScrollTop ? (hAsync("div", { id: "toTop", class: "transition-all transition duration-75 opacity-0" }, hAsync("eds-button", { id: "backToTop", "aria-label": this.backToTopAriaLabel, intent: "ghostInverse", icon: "chevron-up", onClick: this.backToTop, tabindex: "-1" }))) : null)))));
     }
     get el() { return getElement(this); }
     static get style() { return EdsFooterStyle0; }
@@ -7527,17 +7536,41 @@ class EdsForm {
         }
         const actual = this.values[field.condition.field];
         const expected = field.condition.value;
-        // Handle loose match between booleans and strings
-        return String(actual) === String(expected);
+        // Handle undefined/null/empty
+        if (actual == null) {
+            return expected == null || expected === '';
+        }
+        // Handle arrays (multi-select, checkboxes)
+        if (Array.isArray(actual)) {
+            return actual.some((val) => this.normalizeValue(val) === this.normalizeValue(expected));
+        }
+        // Handle comma-separated strings (from checkboxes stored as "val1,val2")
+        if (typeof actual === 'string' && actual.includes(',')) {
+            const values = actual.split(',').map((v) => v.trim());
+            return values.some((val) => this.normalizeValue(val) === this.normalizeValue(expected));
+        }
+        // Standard comparison with normalization
+        return this.normalizeValue(actual) === this.normalizeValue(expected);
+    }
+    normalizeValue(value) {
+        if (value == null) {
+            return '';
+        }
+        if (typeof value === 'boolean') {
+            return value ? 'true' : 'false';
+        }
+        if (typeof value === 'number') {
+            return String(value);
+        }
+        if (typeof value === 'string') {
+            return value.trim().toLowerCase();
+        }
+        return String(value).trim().toLowerCase();
     }
     validateForm() {
-        const { errors, hasError } = validateFormFields(this.parsedFields, this.formEl, this.values, (field, values) => {
-            if (!field.condition) {
-                return true;
-            }
-            const parentValue = values[field.condition.field];
-            return parentValue === field.condition.value;
-        });
+        const { errors, hasError } = validateFormFields(this.parsedFields, this.formEl, this.values, (field, _values) => 
+        // Use a temporary object with the condition to reuse isFieldVisible logic
+        this.isFieldVisible(field));
         this.errors = errors;
         this.hasError = hasError;
     }
@@ -7551,8 +7584,22 @@ class EdsForm {
                 if (!field.condition) {
                     return true;
                 }
-                const parentValue = values[field.condition.field];
-                return parentValue === field.condition.value;
+                const actual = values[field.condition.field];
+                const expected = field.condition.value;
+                // Handle undefined/null/empty
+                if (actual == null) {
+                    return expected == null || expected === '';
+                }
+                // Handle arrays
+                if (Array.isArray(actual)) {
+                    return actual.some((val) => this.normalizeValue(val) === this.normalizeValue(expected));
+                }
+                // Handle comma-separated strings
+                if (typeof actual === 'string' && actual.includes(',')) {
+                    const values = actual.split(',').map((v) => v.trim());
+                    return values.some((val) => this.normalizeValue(val) === this.normalizeValue(expected));
+                }
+                return this.normalizeValue(actual) === this.normalizeValue(expected);
             }
         });
         this.values = updatedValues;
@@ -7619,8 +7666,9 @@ class EdsForm {
             const hosts = Array.from(this.formEl.querySelectorAll('eds-input-field'));
             hosts.forEach((host) => {
                 const root = host.shadowRoot;
-                if (!root)
+                if (!root) {
                     return;
+                }
                 const fileInputs = Array.from(root.querySelectorAll('input[type="file"][name]'));
                 console.log(fileInputs);
                 fileInputs.forEach((fi) => {
@@ -7635,14 +7683,13 @@ class EdsForm {
             // (Optional) mark that this payload includes files (handy in logs / policies)
             // formData.set('_has_files', '1');
         }
-        formData.forEach((value, key) => {
-            if (value instanceof File) {
-                console.log(`File field: ${key}, File name: ${value.name}, File size: ${value.size}`);
-            }
-            else {
-                console.log(`Field: ${key}, Value: ${value}`);
-            }
-        });
+        /*formData.forEach((value, key) => {
+          if (value instanceof File) {
+            console.log(`File field: ${key}, File name: ${value.name}, File size: ${value.size}`);
+          } else {
+            console.log(`Field: ${key}, Value: ${value}`);
+          }
+        });*/
         return formData;
     }
     handleChange(e, field) {
@@ -7756,8 +7803,9 @@ class EdsForm {
     handleSubmit(e) {
         var _a, _b;
         e === null || e === void 0 ? void 0 : e.preventDefault();
-        if (this.isSubmitting)
+        if (this.isSubmitting) {
             return;
+        }
         this.isSubmitting = true;
         this.validateForm();
         if (this.hasError) {
@@ -7839,7 +7887,7 @@ class EdsForm {
         else if (field.type === 'nps') {
             return (hAsync("div", { class: "form-group nps-field", key: field.name }, hAsync("div", { class: "flex justify-between" }, field && (hAsync("eds-input-label", { name: `nps-${field.name}`, label: field.question, disabled: field.disabled, required: field.required }))), hAsync("eds-nps", { id: `nps-${field.name}`, "right-label": field.rightLabel, "left-label": field.leftLabel, onNps: (e) => this.handleNPS(e, field) }), hAsync("div", { class: "mt-6" }, hAsync("eds-input-footer", { id: `${field.name}-footer`, name: field.name, "error-message": (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br/>'), error: !!this.errors[field.name] }))));
         }
-        return (hAsync("eds-input-field", { key: field.name, name: field.name, label: field.label, placeholder: field.placeholder, type: field.type, value: this.values[field.name], required: field.required, hint: field.hint, message: field.message, error: !!this.errors[field.name], errorMessage: (_c = this.errors[field.name]) === null || _c === void 0 ? void 0 : _c.join('<br/>'), options: field.options, onInput: (e) => this.handleInput(e, field), onChangeNative: (e) => this.handleChange(e, field) }));
+        return (hAsync("eds-input-field", { key: field.name, name: field.name, label: field.label, placeholder: field.placeholder, type: field.type, value: this.values[field.name], required: field.required, hint: field.hint, message: field.message, link: field.link, error: !!this.errors[field.name], errorMessage: (_c = this.errors[field.name]) === null || _c === void 0 ? void 0 : _c.join('<br/>'), options: field.options, onInput: (e) => this.handleInput(e, field), onChangeNative: (e) => this.handleChange(e, field) }));
     }
     async getData() {
         return this.makeFormData();
@@ -7852,9 +7900,9 @@ class EdsForm {
         const styleClasses = this.formStyle === 'shadow'
             ? 'bg-inverse effect-shadow shadow-hover border-softer relative rounded-lg border-2 p-32'
             : '';
-        return (hAsync("form", { key: 'a2e7de988c60301b92f6b756702bfcc78e9f3d90', class: styleClasses, ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, hAsync("div", { key: '22172631522aa6094d8b163b0774c57ef4404d60', class: "flex flex-col gap-y-24" }, this.title && (hAsync("span", { key: '0597bbacbaf5f3d9ec1ab938cf755a10baafdf21', role: "heading", class: "f-heading-04" }, this.title)), this.description && hAsync("span", { key: '5e636072bc2692071bd0b518af721999cc8b511e', class: "f-body-02 text-light" }, this.description), hAsync("slot", { key: '79d21172208eb77ec6460e817d3c7bc3a680c806' })), hiddenFields.map((field, index) => (hAsync("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), this.parsedGroups
+        return (hAsync("form", { key: 'a4b6cf51242567739fc3ff2da482c41edb4e4e57', class: styleClasses, ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, hAsync("div", { key: '5f7e1d618f8a10a1cd6aa8d512c04064a484cd93', class: "flex flex-col gap-y-24" }, this.title && (hAsync("span", { key: '283d752d3e9f4ede0f50493ba9e5010376ebfb1f', role: "heading", class: "f-heading-04" }, this.title)), this.description && hAsync("span", { key: 'bd5866482b87bdc86a59594b884a9b81c676afdb', class: "f-body-02 text-light" }, this.description), hAsync("slot", { key: 'b2de746ccf8743fdef545a70ab111dfff0d7912f' })), hiddenFields.map((field, index) => (hAsync("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), this.parsedGroups
             .filter((g) => Array.isArray(buckets[g.id]) && buckets[g.id].length > 0)
-            .map((g) => (hAsync("div", { class: "mt-32", key: g.id }, hAsync("span", { class: "f-body-02" }, hAsync("b", null, g.title)), hAsync("div", { class: "border-group mt-32 mb-32 flex flex-col gap-y-24" }, buckets[g.id].map((f) => this.renderField(f)))))), hAsync("div", { key: 'b99941e53dec1c8c4e167d8588d6e86793838d1a', class: "flex flex-col mt-32 gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f))), this.formBtn && (hAsync("div", { key: '27365a4d7d8150ff4e94ffb3d27d011400c8c412', class: "mt-32" }, hAsync("eds-button", { key: '66f89292b95d9549e3718d7e499b0724762127c6', intent: this.buttonIntent, label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
+            .map((g) => (hAsync("div", { class: "mt-32", key: g.id }, hAsync("span", { class: "f-body-02" }, hAsync("b", null, g.title)), hAsync("div", { class: "border-group mt-32 mb-32 flex flex-col gap-y-24" }, buckets[g.id].map((f) => this.renderField(f)))))), hAsync("div", { key: '917c5bd2e6048a91487f0a66bd0426e529295f9e', class: "flex flex-col mt-32 gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f))), this.formBtn && (hAsync("div", { key: '96abbd19ea2869c21146f0b37da7ff6b89fbf66c', class: "mt-32" }, hAsync("eds-button", { key: '066348df32cf27fc6e56c94b9d5c455bc51b4adf', intent: this.buttonIntent, label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -7982,7 +8030,7 @@ class EdsFrame {
         }
     }
     render() {
-        return (hAsync("div", { key: '7b4f5eb19460a178b98586aa38088e3dc5625671', class: this.articleClasses() }, hAsync("div", { key: '98aefbd4cab33f14c9aa3152c122a11b24df4a02', class: "effect-height flex items-center justify-between py-8 px-12" }, hAsync("span", { key: 'd0cdd2f3354bddc99030ee5215f2bc24b139a261', class: "f-ui-02" }, this.frameLabel), !this.iframeError && this.url && this.urlLabel ? (hAsync("eds-link", { label: this.urlLabel, url: this.url, intent: this.intent, class: "ml-auto", external: true, disabled: false, icon: "arrow-diagonal" })) : null), hAsync("div", { key: '030c560bbd0209160c92bc2d152f8d42484dc86b', class: "border-softer" }, 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: '5bcdb5bdd66a7530a82662ff9b6ef06d3a1eb1d3', class: this.articleClasses() }, hAsync("div", { key: '4c9e224f1a6421398cfef1fd89d113513727b6dd', class: "effect-height flex items-center justify-between py-8 px-12" }, hAsync("span", { key: '7704b4f1d1a3e8a728f0ad751891ecbfd118411a', class: "f-ui-02" }, this.frameLabel), !this.iframeError && this.url && this.urlLabel ? (hAsync("eds-link", { label: this.urlLabel, url: this.url, intent: this.intent, class: "ml-auto", external: true, disabled: false, icon: "arrow-diagonal" })) : null), hAsync("div", { key: 'd4372713fc8984d14808171857d6efd40790dec2', class: "border-softer" }, 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 style() { return EdsFrameStyle0; }
@@ -8042,6 +8090,11 @@ class EdsFullscreenMenu {
     handleToggleMenu(event) {
         this.isMenuOpen = !!event.detail;
     }
+    onKeydown(e) {
+        if (e.key === 'Escape' && this.isMenuOpen) {
+            this.closeMenu();
+        }
+    }
     /** Opens the menu */
     openMenu() {
         this.isMenuOpen = true;
@@ -8051,6 +8104,12 @@ class EdsFullscreenMenu {
         this.isMenuOpen = false;
         this.menuClose.emit();
     }
+    async open() {
+        this.isMenuOpen = true;
+    }
+    async close() {
+        this.closeMenu();
+    }
     // Lifecycle method to add the resize event listener when component loads
     componentDidLoad() {
         window.addEventListener('resize', this.handleResize.bind(this));
@@ -8084,7 +8143,7 @@ class EdsFullscreenMenu {
         return parseData(this.menuLinks);
     }
     render() {
-        return this.isMenuOpen ? (hAsync("div", { class: "eds-full-screen bg-default fixed inset-0 z-[999999] overflow-y-scroll" }, hAsync("div", { class: "flex min-h-full flex-col" }, hAsync("div", { class: `w-full sticky top-0 ${this.inverseHeader ? 'bg-strongest' : 'bg-default'}` }, hAsync("div", { class: "mx-auto flex items-center justify-between" }, hAsync("div", { class: "mr-auto w-[200px] h-[85px]" }, hAsync("eds-logo", { type: this.inverseHeader ? 'color-white' : 'color', href: this.homeUrl })), hAsync("div", { class: "px-16" }, hAsync("eds-button", { "aria-label": "Close menu", intent: "ghostInverse", icon: "close", onClick: () => this.closeMenu() })))), hAsync("div", { class: "py-16 px-16" }, hAsync("nav", { class: "mt-28 flex flex-col gap-y-8" }, this.parsedLinks.map((link, index) => (hAsync("eds-link", { label: link.label, key: index, url: link.url, intent: "tertiary", size: "large", class: "effect-color effect-focus rounded-xs f-heading-02 hover:text-lighter w-fit", onClick: () => this.closeMenu(), icon: "arrow-right" })))), hAsync("eds-block-break", null), hAsync("nav", { class: "mt-28 flex flex-col gap-y-8" }, this.parsedMenuLinks.map((link, index) => (hAsync("eds-link", { label: link.label, key: index, url: link.url, intent: "tertiary", size: "large", class: "effect-color effect-focus rounded-xs f-heading-02 hover:text-lighter w-fit", onClick: () => this.closeMenu(), icon: "chevron-right" })))), hAsync("nav", { class: "mt-28 flex flex-col gap-y-8" }, hAsync("slot", null))), hAsync("div", { class: "mt-auto" }, hAsync("eds-footer", { social: true, "extra-class": "bg-darker" }))))) : null;
+        return this.isMenuOpen ? (hAsync("div", { role: "dialog", "aria-modal": "true", "aria-label": "Main menu", class: "eds-full-screen bg-default fixed inset-0 z-[999999] overflow-y-scroll" }, hAsync("div", { class: "flex min-h-full flex-col" }, hAsync("div", { class: `w-full sticky top-0 ${this.inverseHeader ? 'bg-strongest' : 'bg-default'}` }, hAsync("div", { class: "mx-auto flex items-center justify-between" }, hAsync("div", { class: "mr-auto w-[200px] h-[85px]" }, hAsync("eds-logo", { type: this.inverseHeader ? 'color-white' : 'color', href: this.homeUrl })), hAsync("div", { class: "px-16" }, hAsync("eds-button", { "aria-label": "Close menu", intent: "ghostInverse", icon: "close", onClick: () => this.closeMenu() })))), hAsync("div", { class: "py-16 px-16" }, hAsync("nav", { class: "mt-28 flex flex-col gap-y-8" }, this.parsedLinks.map((link, index) => (hAsync("eds-link", { label: link.label, key: index, url: link.url, intent: "tertiary", size: "large", class: "effect-color effect-focus rounded-xs f-heading-02 hover:text-lighter w-fit", onClick: () => this.closeMenu(), icon: "arrow-right" })))), hAsync("eds-block-break", null), hAsync("nav", { class: "mt-28 flex flex-col gap-y-8" }, this.parsedMenuLinks.map((link, index) => (hAsync("eds-link", { label: link.label, key: index, url: link.url, intent: "tertiary", size: "large", class: "effect-color effect-focus rounded-xs f-heading-02 hover:text-lighter w-fit", onClick: () => this.closeMenu(), icon: "chevron-right" })))), hAsync("nav", { class: "mt-28 flex flex-col gap-y-8" }, hAsync("slot", null))), hAsync("div", { class: "mt-auto" }, hAsync("eds-footer", { social: true, "extra-class": "bg-darker" }))))) : null;
     }
     static get style() { return EdsFullscreenMenuStyle0; }
     static get cmpMeta() { return {
@@ -8095,9 +8154,11 @@ class EdsFullscreenMenu {
             "menuLinks": [1, "menu-links"],
             "homeUrl": [1, "home-url"],
             "inverseHeader": [4, "inverse-header"],
-            "isMenuOpen": [32]
+            "isMenuOpen": [32],
+            "open": [64],
+            "close": [64]
         },
-        "$listeners$": [[16, "toggleheadermenu", "handleToggleMenu"]],
+        "$listeners$": [[16, "toggleheadermenu", "handleToggleMenu"], [8, "keydown", "onKeydown"]],
         "$lazyBundleId$": "-",
         "$attrsToReflect$": []
     }; }
@@ -8151,7 +8212,7 @@ class EdsGauge {
         const textStyle = {
             fontSize: `${fontSize}px`
         };
-        return (hAsync("div", { key: '8834b0fc3cb78c0e7926392d04229d67d8deab90', role: "progressbar", "aria-valuemin": this.valueMin, "aria-valuemax": this.valueMax, "aria-valuenow": clamped, "aria-label": `Gauge value: ${clamped} of ${this.valueMax}`, class: "relative inline-block rounded-full overflow-hidden", style: containerStyle }, hAsync("div", { key: 'f9ad68bd6bf19bceb46df1cfe16cdbbc2375099c', class: "absolute bg-inverse rounded-full", style: maskStyle }), hAsync("div", { key: '64a2ba3ba2f104fa018f81949cdabc0fc53eea42', class: "absolute inset-0 flex items-center justify-center" }, hAsync("span", { key: 'ae66f977802793f4e10210e75ddfa53839a9ff6e', class: "f-body-01 text-default", style: textStyle }, clamped))));
+        return (hAsync("div", { key: '33388b250acd0aeaf3bf4888fd5ac72ba0337a42', role: "progressbar", "aria-valuemin": this.valueMin, "aria-valuemax": this.valueMax, "aria-valuenow": clamped, "aria-label": `Gauge value: ${clamped} of ${this.valueMax}`, class: "relative inline-block rounded-full overflow-hidden", style: containerStyle }, hAsync("div", { key: 'b920dd12644a5457b512b65e2c093ef53f339969', class: "absolute bg-inverse rounded-full", style: maskStyle }), hAsync("div", { key: '0149f680aad2c2b2cf4e308b1510d2fb3482a06f', class: "absolute inset-0 flex items-center justify-center" }, hAsync("span", { key: '31fee43895b99a2c19358acce9eee0965eef574a', class: "f-body-01 text-default", style: textStyle }, clamped))));
     }
     static get style() { return EdsGaugeStyle0; }
     static get cmpMeta() { return {
@@ -8196,9 +8257,8 @@ class EdsGlobalSearch {
                 category: 'shared-ui',
                 parentContext: null,
                 tag: this.el.tagName.toLowerCase(),
-                name: `search-input: ${(_a = this.query) === null || _a === void 0 ? void 0 : _a.toLowerCase()}` ||
-                    'unknow seach input query',
-                action: 'click',
+                name: `search-input: ${(_a = this.query) === null || _a === void 0 ? void 0 : _a.toLowerCase()}` || 'unknow seach input query',
+                action: 'click'
             });
             this.debounceTimer = window.setTimeout(() => {
                 this.runSearch();
@@ -8254,8 +8314,7 @@ class EdsGlobalSearch {
                 break;
             case 'Enter':
                 event.preventDefault();
-                if (this.selectedIndex >= 0 &&
-                    this.selectedIndex < this.results.length) {
+                if (this.selectedIndex >= 0 && this.selectedIndex < this.results.length) {
                     this.selectResult(this.results[this.selectedIndex]);
                 }
                 break;
@@ -8289,7 +8348,7 @@ class EdsGlobalSearch {
             this.selectedIndex = -1;
         }
         catch (err) {
-            console.error('Search error:', err);
+            //console.error('Search error:', err);
             this.error = 'Search failed. Please try again.';
             this.results = [];
             this.showDropdown = true;
@@ -8306,7 +8365,7 @@ class EdsGlobalSearch {
             parentContext: null,
             tag: this.el.tagName.toLowerCase(),
             name: `search-select: ${result.url}` || 'unknow search result selection',
-            action: 'click',
+            action: 'click'
         });
         window.open(result.url, '_blank', 'noopener,noreferrer');
     }
@@ -8327,13 +8386,13 @@ class EdsGlobalSearch {
         return this.results.length > 0;
     }
     get showEmpty() {
-        return (this.hasSearched && !this.loading && !this.hasResults && this.query.trim());
+        return this.hasSearched && !this.loading && !this.hasResults && this.query.trim();
     }
     render() {
-        return (hAsync("div", { key: '8fb5d13cbb123d7a6d6a26d0ba59d4c6d1660216', class: "search-wrapper" }, hAsync("eds-input-field", { key: 'a8bf5d6f4aa5746e144b82fad60b77697d0fdb99', icon: "search", "input-id": "search-global", type: "text", name: "search-box-global", placeholder: this.placeholder, value: this.query, onInput: this.handleInput }), this.showDropdown && (hAsync("div", { key: '553cb12c9b2aa9ecfbcf9c1eee9ff9a44549e35a', class: "search-dropdown", ref: (el) => (this.dropdownRef = el) }, this.loading && (hAsync("div", { key: '4f40853beecd11f8812fd97cf07d2394e7b73466', class: "flex text-center justify-center p-64" }, hAsync("eds-spinner", { key: '307a3ba3ec2d296f31f8e5cf1a696786387ea8fa', variant: "primary", size: "sm" }))), this.error && !this.loading && (hAsync("div", { key: '46fc2ed3f48237864c62ce52d5789b72ab007f61', class: "flex text-center justify-center p-16" }, hAsync("span", { key: 'b555370d936f99234d9be576d04766bc674bfd24', class: "text-error f-body-02" }, this.error))), this.showEmpty && (hAsync("div", { key: '7464c4850872ce8dcee55c189b1e78baa1799f14', class: "dropdown-state" }, hAsync("eds-icon-wrapper", { key: '989282ef0fc8fde7018bb80ab172773cc2107942', icon: "search" }), hAsync("div", { key: 'efbdbd61312b7de43c4f9944cbd573573ec22f11' }, hAsync("p", { key: 'fb8bf8c76f101a182f2f0e0c9beac642a872d4cb', class: "f-body-02" }, "No results found"), hAsync("p", { key: '003a1facf39b7efe8f61c58518e7fdef4779f9c3', class: "f-ui-04 text-lightest" }, "Try different keywords")))), this.hasResults && !this.loading && (hAsync("ul", { key: '01b48376f9b290218f93eed314bcc71fa15f83ef', class: "dropdown-results" }, this.results.map((result, index) => (hAsync("li", { key: result.id, "data-index": index, class: {
+        return (hAsync("div", { key: 'be8f46caa1d12a034401686c9860b87032652322', class: "search-wrapper" }, hAsync("eds-input-field", { key: 'c31ac27a5e9f97729da8f7168e22ad09205ffce0', icon: "search", "input-id": "search-global", type: "text", name: "search-box-global", placeholder: this.placeholder, value: this.query, onInput: this.handleInput }), this.showDropdown && (hAsync("div", { key: '57b87393636913be24856bedc805e180171f084e', class: "search-dropdown", ref: (el) => (this.dropdownRef = el) }, this.loading && (hAsync("div", { key: '3ddb78e5a734d69b581e64ee825d12574f98574d', class: "flex text-center justify-center p-64" }, hAsync("eds-spinner", { key: '178c99535ce61b320fd70ab1f3aeb8408c868fe3', variant: "primary", size: "sm" }))), this.error && !this.loading && (hAsync("div", { key: '87feb37ffec93fa12185cd1fffb5c4f8ac54cd55', class: "flex text-center justify-center p-16" }, hAsync("span", { key: '07544fe95721c9e0898364f3bdcfc0b1ca79a48d', class: "text-error f-body-02" }, this.error))), this.showEmpty && (hAsync("div", { key: '6595178cb14ce5e21cdb15f96e039975a8af0c67', class: "dropdown-state" }, hAsync("eds-icon-wrapper", { key: 'f5b614218bb6ef642c3d1f4c7d41f56f28319a9d', icon: "search" }), hAsync("div", { key: '857671d7783d8fe854e6b3203a3755d24f337e5d' }, hAsync("p", { key: '89bae3bfb4efa63e777121088a59d873652de4e9', class: "f-body-02" }, "No results found"), hAsync("p", { key: '1a951b1a6f0daf7506e6e7892a211f92d95b94d4', class: "f-ui-04 text-lightest" }, "Try different keywords")))), this.hasResults && !this.loading && (hAsync("ul", { key: '1c1711dc4332d70cefe965dcfeeabc3c6745ce4d', class: "dropdown-results" }, this.results.map((result, index) => (hAsync("li", { key: result.id, "data-index": index, class: {
                 'result-item': true,
-                'result-item--selected': index === this.selectedIndex,
-            }, onClick: () => this.selectResult(result), onMouseEnter: () => (this.selectedIndex = index) }, hAsync("div", { class: "result-header" }, hAsync("span", { class: "f-body-02" }, result.title)), hAsync("div", { class: "inline" }, hAsync("eds-tag", { intent: "accent", label: result.source }), result.section && (hAsync("span", { class: "result-badge" }, result.section)), hAsync("span", { class: "f-ui-03-light text-lighter ml-8" }, result.url)), result.snippet && (hAsync("p", { class: "result-snippet" }, this.stripHtml(result.snippet)))))))), this.hasResults && !this.loading && (hAsync("div", { key: '3730704ff20781f23403df56a452bf586c06a688', class: "dropdown-footer" }, hAsync("span", { key: '981e0fb42c24116a2b7caa1a341db1435fb57298', class: "footer-hint" }, hAsync("kbd", { key: 'a3afa1202d694af3f87c736f8384b11497729d2c' }, "\u2191"), " ", hAsync("kbd", { key: '4158766047e73eef837b3a7be415b52792473f3e' }, "\u2193"), " navigate \u2022 ", hAsync("kbd", { key: '49dc09c928a6f0d69e4c95cee7ba5b655dfcd56c' }, "\u21B5"), " select \u2022", ' ', hAsync("kbd", { key: '8da9b6f1bef58c7633a484f63e63920646d6b675' }, "esc"), " close")))))));
+                'result-item--selected': index === this.selectedIndex
+            }, onClick: () => this.selectResult(result), onMouseEnter: () => (this.selectedIndex = index) }, hAsync("div", { class: "result-header" }, hAsync("span", { class: "f-body-02" }, result.title)), hAsync("div", { class: "inline" }, hAsync("eds-tag", { intent: "accent", label: result.source }), result.section && hAsync("span", { class: "result-badge" }, result.section), hAsync("span", { class: "f-ui-03-light text-lighter ml-8" }, result.url)), result.snippet && hAsync("p", { class: "result-snippet" }, this.stripHtml(result.snippet))))))), this.hasResults && !this.loading && (hAsync("div", { key: '26e172b579f71b7096481994c0a4af80d3e416d3', class: "dropdown-footer" }, hAsync("span", { key: '57a6432125472aaed3b7b46c106aeec0d0a5ee50', class: "footer-hint" }, hAsync("kbd", { key: 'c8ca5d4b1a2e8f59665290ab78499f8db431a2e9' }, "\u2191"), " ", hAsync("kbd", { key: '89a6520e51bed33cfc37b892480af44e5b77a9c3' }, "\u2193"), " navigate \u2022 ", hAsync("kbd", { key: '4173b9ec77d52d4570e016c3366e27fef225ccb0' }, "\u21B5"), " select \u2022 ", hAsync("kbd", { key: '7f118c184acf52edd545e1f97b4ca991eaa1aa1f' }, "esc"), " close")))))));
     }
     get el() { return getElement(this); }
     static get style() { return EdsGlobalSearchStyle0; }
@@ -8359,7 +8418,7 @@ class EdsGlobalSearch {
     }; }
 }
 
-const edsHeaderCss = ".block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.z-10{z-index:10}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.bg-inverse{background-color:var(--white)}.bg-dark{background-color:var(--grey-300)}.bg-strongest{background-color:var(--black)}.mr-auto{margin-right:auto}.w-\\[200px\\]{width:200px}.h-\\[85px\\]{height:85px}.left-1\\/2{left:50%}.top-1\\/2{top:50%}.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))}.hidden{display:none}.gap-x-2{-moz-column-gap:0.125rem;column-gap:0.125rem}.after\\:effect-opacity::after{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.whitespace-nowrap{white-space:nowrap}.\\!text-current{color:currentColor !important}.overflow-hidden{overflow:hidden}.after\\:\\!border-transparent::after{border-color:var(--transparent) !important}.hover\\:after\\:\\!border-transparent:hover::after{border-color:var(--transparent) !important}.after\\:opacity-0::after{opacity:0}.hover\\:after\\:opacity-100:hover::after{opacity:1}.px-16{padding-left:1rem;padding-right:1rem}@media (min-width: 750px){.md\\:flex{display:flex}.md\\:hidden{display:none}}";
+const edsHeaderCss = ".block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.z-10{z-index:10}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.bg-inverse{background-color:var(--white)}.bg-dark{background-color:var(--grey-300)}.bg-strongest{background-color:var(--black)}.mr-auto{margin-right:auto}.w-\\[200px\\]{width:200px}.h-\\[85px\\]{height:85px}.left-1\\/2{left:50%}.top-1\\/2{top:50%}.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))}.hidden{display:none}.gap-x-2{-moz-column-gap:0.125rem;column-gap:0.125rem}.gap-x-16{-moz-column-gap:1rem;column-gap:1rem}.after\\:effect-opacity::after{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.whitespace-nowrap{white-space:nowrap}.\\!text-current{color:currentColor !important}.overflow-hidden{overflow:hidden}.after\\:\\!border-transparent::after{border-color:var(--transparent) !important}.hover\\:after\\:\\!border-transparent:hover::after{border-color:var(--transparent) !important}.after\\:opacity-0::after{opacity:0}.hover\\:after\\:opacity-100:hover::after{opacity:1}.px-16{padding-left:1rem;padding-right:1rem}@media (min-width: 750px){.md\\:flex{display:flex}.md\\:hidden{display:none}}";
 var EdsHeaderStyle0 = edsHeaderCss;
 
 /**
@@ -8385,14 +8444,10 @@ class EdsHeader {
         this.menuEnabled = false;
         this.isMenuOpen = false;
         this.isUserMenuOpen = false;
-        this.isAuthenticated = false;
-    }
-    onAuthStatusChanged(event) {
-        var _a;
-        this.isAuthenticated = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.authenticated;
     }
     componentDidLoad() {
-        const links = this.hostEl.querySelectorAll('eds-link');
+        var _a, _b;
+        const links = (_b = (_a = this.hostEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('eds-link')) !== null && _b !== void 0 ? _b : [];
         links.forEach((link) => this.emitContext(link));
     }
     emitContext(linkElement) {
@@ -8420,7 +8475,7 @@ class EdsHeader {
         const classes = variantClasses[this.headerVariant] || variantClasses.default;
         // Logo color variant: default and inverse use 'color', strong uses 'color-white'
         const logoType = this.headerVariant === 'strong' ? 'color-white' : 'color';
-        return (hAsync("header", { key: '937c78379bb6f3a97705862b2fa3f0f6ddd76d4c', class: `flex items-center justify-between relative z-10 ${classes}` }, hAsync("div", { key: 'd94837e8414d558f02039501d7b01ab550275ca7', class: "mr-auto w-[200px] h-[85px]" }, hAsync("eds-logo", { key: '02711bc6d80075a215761ce79698555f7b31bffa', type: logoType, href: this.homeUrl })), this.parsedLinks && (hAsync("nav", { key: 'e3f0033cce5a6145a4f457d1c2c7aebb767593f7', 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: '85008ed8ceb8eca869d8730b38a8aa37aeb757ff', 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: "large", 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: '35eb7af751f3da381fada990118fa0a37ce150b1' }), this.menuEnabled && (hAsync("div", { key: '121bba2b027fc21e8c77054f3de533e40fad6b96', class: "md:hidden flex overflow-hidden px-16" }, hAsync("eds-button", { key: '00774810aabf8fa292ecca2210bcd9542a7cb0c2', "aria-label": "Menu", intent: this.headerVariant === 'default' ? 'ghost' : 'ghostInverse', icon: "menu", size: "small", onClick: () => this.handleToggleMenu() })))));
+        return (hAsync("header", { key: 'cf272ed6242b2effa3027081d72b58025c49d055', role: "banner", class: `flex items-center justify-between relative z-10 ${classes}` }, hAsync("div", { key: '16f81e55c3aa28beabfead914488ce1fd70b408d', class: "mr-auto w-[200px] h-[85px]" }, hAsync("eds-logo", { key: '0961fb91dff26c457833b67ef963d60a9902a916', type: logoType, href: this.homeUrl })), this.parsedLinks && (hAsync("nav", { key: 'a034d1bfc21da2245b3c91a2f91f092476d67f97', role: "navigation", "aria-label": "Primary", 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: '06ebd9012b829a30f7cdc27f417116a21d2bfc2f', class: "flex gap-x-16" }, this.parsedLinks.map((link) => (hAsync("eds-link", { label: link.label, "aria-label": link.label, url: link.url, intent: "strong", size: "large", 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: '68c34af928ee215329d354ca1a5ef7850d1112cf', name: "actions" }), this.menuEnabled && (hAsync("div", { key: 'cb4cd94fbf5ebbd770631066f2f69f8ac50a3f5f', class: "md:hidden flex overflow-hidden px-16" }, hAsync("eds-button", { key: '8f2aa4d59705e9410a0fa8b10c9f348fcfe73db3', "aria-label": "Menu", intent: this.headerVariant === 'default' ? 'ghost' : 'ghostInverse', icon: "menu", size: "small", onClick: () => this.handleToggleMenu() })))));
     }
     get hostEl() { return getElement(this); }
     static get style() { return EdsHeaderStyle0; }
@@ -8433,10 +8488,9 @@ class EdsHeader {
             "headerVariant": [513, "header-variant"],
             "menuEnabled": [4, "menu-enabled"],
             "isMenuOpen": [32],
-            "isUserMenuOpen": [32],
-            "isAuthenticated": [32]
+            "isUserMenuOpen": [32]
         },
-        "$listeners$": [[16, "authStatusChanged", "onAuthStatusChanged"]],
+        "$listeners$": undefined,
         "$lazyBundleId$": "-",
         "$attrsToReflect$": [["homeUrl", "home-url"], ["headerVariant", "header-variant"]]
     }; }
@@ -10338,7 +10392,7 @@ var tutorial = `  <svg
     />
   </svg>`;
 
-var upDonw = `  <svg
+var upDown = `  <svg
     width="20"
     height="20"
     viewBox="0 0 20 20"
@@ -10411,7 +10465,7 @@ var svgs = /*#__PURE__*/Object.freeze({
   pub: pub,
   portal: portal,
   user: user,
-  upDonw: upDonw,
+  upDown: upDown,
   search: search,
   success: success,
   tutorial: tutorial,
@@ -10438,7 +10492,7 @@ class EdsIconArrowDiagonal {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: 'f638b55d0ab199bbd7a52d099aa1242410ae1892', class: this.class, innerHTML: arrowDiagonal });
+        return hAsync("span", { key: '29883d8b41d72d84f22e6babbfdac666ba57f5ca', class: this.class, innerHTML: arrowDiagonal });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10461,7 +10515,7 @@ class EdsIconArrowRight {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '476da936a6861dc0a5db691cee31559c845766a2', class: this.class, innerHTML: arrowRight });
+        return hAsync("span", { key: '652d9843e8855eeb7bd9c364fe8600116eb54897', class: this.class, innerHTML: arrowRight });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10484,7 +10538,7 @@ class EdsIconBin {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '8bc63b5438fa6bf2ffa729afd07a793b96f3167d', class: this.class, innerHTML: bin });
+        return hAsync("span", { key: '7ba82b3f303e9d0dc30afef19154637af1d20811', class: this.class, innerHTML: bin });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10507,7 +10561,7 @@ class EdsIconBluesky {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: 'b42f25c9a2405c94d83c917026f376c9803058d1', class: this.class, innerHTML: bluesky });
+        return hAsync("span", { key: '686dbb5f0c3c5f156940c83380c16c169f016219', class: this.class, innerHTML: bluesky });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10530,7 +10584,7 @@ class EdsIconBookmark {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '3a7cb54b31e70a446b093453389432938c2fd9d8', class: this.class, innerHTML: bookmark });
+        return hAsync("span", { key: '66bd28a12ce759d916099635f81aff9b8a66c774', class: this.class, innerHTML: bookmark });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10553,7 +10607,7 @@ class EdsIconChevronDown {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '49925425ac1fd676eb96b973b1419f1f2aec1c81', class: this.class, innerHTML: chevronDown });
+        return hAsync("span", { key: '7efcb724d1d4c35985dc5f858c23c43aaaad1319', class: this.class, innerHTML: chevronDown });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10576,7 +10630,7 @@ class EdsIconChevronLeft {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '38d849e3d7e2b2f5e7df8a5624bcf988b3046b11', class: this.class, innerHTML: chevronLeft });
+        return hAsync("span", { key: '6ee35c634c737769fa20bcfb631aa4e32ee6e9da', class: this.class, innerHTML: chevronLeft });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10599,7 +10653,7 @@ class EdsIconChevronRight {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '5368c37dc49fa654d75f42a774a9a3ad93db5261', class: this.class, innerHTML: chevronRight });
+        return hAsync("span", { key: '60ca9c3f312d711df76743901b5373ee573b99d7', class: this.class, innerHTML: chevronRight });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10622,7 +10676,7 @@ class EdsIconChevronUp {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '6479f32960c973174c4577beef2f7df7b0baebd4', class: this.class, innerHTML: chevronUp });
+        return hAsync("span", { key: '61506941edc3f2da20a848d8f435241027ee131a', class: this.class, innerHTML: chevronUp });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10645,7 +10699,7 @@ class EdsIconClone {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: 'a31ea2174a7c266b62264dad10c486f7dc27f043', class: this.class, innerHTML: clone });
+        return hAsync("span", { key: '25b5552f8f0952bde3058c85d2ef61bb69102c24', class: this.class, innerHTML: clone });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10668,7 +10722,7 @@ class EdsIconClose {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: 'b4283a9fbc348923169a4d56ad6f3b5aad4a13c8', class: this.class, innerHTML: close });
+        return hAsync("span", { key: '50792b8ec547fba6fd0416e80cdaf706079f42b2', class: this.class, innerHTML: close });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10691,7 +10745,7 @@ class EdsIconCopy {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: 'dc06f1a54b9542cb2c0165fb3bdff960ecd81cc0', class: this.class, innerHTML: copy });
+        return hAsync("span", { key: 'f0f8d3264c9ea781865ffd2bc2e5ebd4b44435a3', class: this.class, innerHTML: copy });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10714,7 +10768,7 @@ class EdsIconDownload {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '2fbaad3eebee32d200d0f655b396ea937901f3bd', class: this.class, innerHTML: download });
+        return hAsync("span", { key: '17b9c232930d8efec279f777ced4a7e95cc559bd', class: this.class, innerHTML: download });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10737,7 +10791,7 @@ class EdsIconDraft {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '408c981cebc10ab4bcf91e2765e7971ad0a83975', class: this.class, innerHTML: draft });
+        return hAsync("span", { key: '9a0acb29472fee4627c23cd528a601d80fb065d9', class: this.class, innerHTML: draft });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10760,7 +10814,7 @@ class EdsIconEdit {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: 'eb8558a13bcab457f260b0c3cddc235867b7f45a', class: this.class, innerHTML: edit });
+        return hAsync("span", { key: '603d3cb68e01aadbcb05d232773490b93593a4e7', class: this.class, innerHTML: edit });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10783,7 +10837,7 @@ class EdsIconEu {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '994f1becb4b226a2d2f022d9bd22a690fad5aab4', class: this.class, innerHTML: euSvg });
+        return hAsync("span", { key: '400a5811c1d31a1c8d490e9614d89fe861cb4dd6', class: this.class, innerHTML: euSvg });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10806,7 +10860,7 @@ class EdsIconExternal {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '0825d1c73c5f311f7a9d5394542f6fd74791a543', class: this.class, innerHTML: arrowDiagonal });
+        return hAsync("span", { key: 'dc82ae5d96587a46362008670e4096d8f3ed8941', class: this.class, innerHTML: arrowDiagonal });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10829,7 +10883,7 @@ class EdsIconFacebook {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '8bba88cba6d29b204b4a4ceae3c41129bb6edcaa', class: this.class, innerHTML: facebook });
+        return hAsync("span", { key: '97ff8677a8252ec4cce47f9f857185945aca7cc8', class: this.class, innerHTML: facebook });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10852,7 +10906,7 @@ class EdsIconGitlab {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '4c0a731d1a67884107112bc5941faf2001dbbfd5', class: this.class, innerHTML: gitlabBlack });
+        return hAsync("span", { key: 'ef1ed1fd0fc7bcc7b0904589699656943af3f77e', class: this.class, innerHTML: gitlabBlack });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10875,7 +10929,7 @@ class EdsIconLinkedin {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '36bf44e06217f9b2521f374028a1316fb17ff21a', class: this.class, innerHTML: linkedin });
+        return hAsync("span", { key: 'bfed785cb748dc93f95bb317750b5e82dc6c1dcc', class: this.class, innerHTML: linkedin });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10898,7 +10952,7 @@ class EdsIconLoader {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '2207bbac640cf28a2d6d5d725f681e56c8c53011', class: this.class, innerHTML: loader });
+        return hAsync("span", { key: '59a8089a2505c0e1e8087f7bd078533a1059cd3a', class: this.class, innerHTML: loader });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10921,7 +10975,7 @@ class EdsIconMastodon {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: 'b7ba0f10df196243538aaeefe3db0ee5f594f885', class: this.class, innerHTML: mastodon });
+        return hAsync("span", { key: '5be4622aebcbe17b4b40c31fd4b9dc92a102b85e', class: this.class, innerHTML: mastodon });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10944,7 +10998,7 @@ class EdsIconMenu {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '5f14cbe4b3ca88f7301c1561c092278b31d04326', class: this.class, innerHTML: menu });
+        return hAsync("span", { key: 'd0edf1b3b59b2455e4f0af36bb637cf3fdea2202', class: this.class, innerHTML: menu });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10967,7 +11021,7 @@ class EdsIconMinus {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: 'b19c12426db0068934252c6197ba04789d42f5e2', class: this.class, innerHTML: minus });
+        return hAsync("span", { key: '15a4b124b598595958bfbaf7be0b9a9795cfb105', class: this.class, innerHTML: minus });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10990,7 +11044,7 @@ class EdsIconMore {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: 'b6d2b6d7d156c715e2f7d2192d93a4326b22dfc5', class: this.class, innerHTML: more });
+        return hAsync("span", { key: 'd832774f24d7e335026e35b3b9198f000389a084', class: this.class, innerHTML: more });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -11013,7 +11067,7 @@ class EdsIconPaper {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '497345c7f18b9cceaf00030b7b3ab052f482c7bf', class: this.class, innerHTML: paper });
+        return hAsync("span", { key: '4e9525934775adfffff9c709ee69c0a5ebf03565', class: this.class, innerHTML: paper });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -11036,7 +11090,7 @@ class EdsIconPlus {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: 'd9fdc443e6da9465453f5f201b5782437a45402e', class: this.class, innerHTML: plus });
+        return hAsync("span", { key: '66caca52d82371c81a2c751a4becbbe4a4b24df2', class: this.class, innerHTML: plus });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -11059,7 +11113,7 @@ class EdsIconPortal {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '27be525d5922ed05755e207adc914c7e86fb7033', class: this.class, innerHTML: portal });
+        return hAsync("span", { key: '8c4137eb4257ed474f2f6b9f4330504c0b3dd5b3', class: this.class, innerHTML: portal });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -11082,7 +11136,7 @@ class EdsIconPrivate {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '16aa24573646bd0002f9b259dba4ab7bb150d12e', class: this.class, innerHTML: privat });
+        return hAsync("span", { key: 'cd1790e118743455f95c1dcef5fef5b7eea8d4b7', class: this.class, innerHTML: privat });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -11105,7 +11159,7 @@ class EdsIconPublic {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '1aedbead2feca84807fa4dd3d10092c3a4632365', class: this.class, innerHTML: pub });
+        return hAsync("span", { key: '992b0db1543110d0561199c44407129fcd1c0c2f', class: this.class, innerHTML: pub });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -11128,7 +11182,7 @@ class EdsIconSearch {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '4d7a6781f65c4fc7159dd29a9d02b2d5333915fd', class: this.class, innerHTML: search });
+        return hAsync("span", { key: '14f24d633305efb74dba50aafd31f31b5f2d8e48', class: this.class, innerHTML: search });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -11151,7 +11205,7 @@ class EdsIconStar {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '4410f1ce5f3b350e75b31ba6089540a9281e474b', class: this.class, innerHTML: star });
+        return hAsync("span", { key: '5546e3debfb9ecf0efe34c31b987dc6ca1f2ba6b', class: this.class, innerHTML: star });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -11174,7 +11228,7 @@ class EdsIconStart {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '3f33c676334b9e7dd18708459ebfb3e3a9cf12a4', class: this.class, innerHTML: start });
+        return hAsync("span", { key: 'd17186a319ab9a5755330b641aa4620cb811c7ae', class: this.class, innerHTML: start });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -11197,7 +11251,7 @@ class EdsIconSuccess {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '0130a392a537a653154383ccd21a1516100459e3', class: this.class, innerHTML: success });
+        return hAsync("span", { key: 'd70032613d160c820ec95934b17a43c654fe4d26', class: this.class, innerHTML: success });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -11220,7 +11274,7 @@ class EdsIconThumbsDown {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '747187922f5c94e96c67f5455e4ed3b8afd47885', class: this.class, innerHTML: thumbsDown });
+        return hAsync("span", { key: 'dbc457ba89db7b7b142be6736a8640ffff2d2cb3', class: this.class, innerHTML: thumbsDown });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -11243,7 +11297,7 @@ class EdsIconThumbsUp {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '051029abca2749f24ae3407ff3ae36b20007c924', class: this.class, innerHTML: thumbsUp });
+        return hAsync("span", { key: '867c4f63cd5ceeeabc94ae444fe978df39066618', class: this.class, innerHTML: thumbsUp });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -11266,7 +11320,7 @@ class EdsIconTutorial {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '3d0f88fa7ebbec278f9cc1394ed87809ff7c49d1', class: this.class, innerHTML: tutorial });
+        return hAsync("span", { key: '06c66194f30295a5bd250edcba88aa4473c8ab1b', class: this.class, innerHTML: tutorial });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -11289,7 +11343,7 @@ class EdsIconTwitter {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '063a941c7795658f2dd79fbdafd7ea1f8ed4b2f4', class: this.class, innerHTML: twitter });
+        return hAsync("span", { key: 'e149a8a26c99f8048a42ed42f143a5947b215ea5', class: this.class, innerHTML: twitter });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -11312,7 +11366,7 @@ class EdsIconUnknown {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '27f8330b13ebecd974913f83e3ae142406d08712', class: this.class, innerHTML: unknown });
+        return hAsync("span", { key: 'f07457a22c642dfe24b1073649bfbef3964cff7e', class: this.class, innerHTML: unknown });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -11335,7 +11389,7 @@ class EdsIconUpdown {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: 'ef19f500cdd0289666d512e73952e6ae1ba9e7dc', class: this.class, innerHTML: upDonw });
+        return hAsync("span", { key: 'f08301d06b129ce9cbd91cceedb64d9db2be6e83', class: this.class, innerHTML: upDown });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -11358,7 +11412,7 @@ class EdsIconUser {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '134abbd42c49915f772f5d2aed7b53ecc5a0bd8a', class: this.class, innerHTML: user });
+        return hAsync("span", { key: 'e515aa4524e19bdb254712054ebd6283f22c57c8', class: this.class, innerHTML: user });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -11381,7 +11435,7 @@ class EdsIconView {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '5725348031c6f0b6944e765b1b52e7f5759493aa', class: this.class, innerHTML: view });
+        return hAsync("span", { key: '18dbaa801845137982847a9cfc4a9ca1ff729b0d', class: this.class, innerHTML: view });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -11460,7 +11514,7 @@ class EdsIconYoutube {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '7c8d8693dc6e0a03af0b0a68190d451fee84a013', class: this.class, innerHTML: youtube });
+        return hAsync("span", { key: 'a2dd7d5f2d615999cd5e7970a96117ed90bdcda3', class: this.class, innerHTML: youtube });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -11536,10 +11590,10 @@ class EdsImg {
             imgOpts['loading'] = 'lazy';
             imgOpts['decoding'] = 'async';
         }
-        return (hAsync("div", { key: '7d704bdd14072d6ce69632d6f2de3270ff393b87', class: {
+        return (hAsync("div", { key: '1ff909ca6fe3fe40ca5659cea033b404a45580fb', class: {
                 'items-center justify-center': true,
                 'effect-bg-pattern': this.lazyload && this.showBg
-            } }, hAsync("picture", { key: '724f384b7b9f112727d3ab4ecdab5f769e581b26' }, this.formats.map((format) => (hAsync("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), hAsync("img", Object.assign({ key: '8b12b640a9d66fba117676e6bd81659c72a8e15c', ref: (el) => (this.img = el), class: {
+            } }, hAsync("picture", { key: '92c92a5aaebd84d96a7bf8c291542d6a8cf4d896' }, this.formats.map((format) => (hAsync("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), hAsync("img", Object.assign({ key: 'ac8eb664987b1205d5a96c723840ac3ccd779ac1', ref: (el) => (this.img = el), class: {
                 'effect-opacity object-cover object-center': true,
                 'opacity-100': this.loaded,
                 'opacity-0': !this.loaded
@@ -11621,7 +11675,7 @@ class EdsInput {
     render() {
         const withIcon = !!this.icon;
         const describedBy = this.hasMessage || this.error ? `${this.name}-error` : '';
-        return (hAsync("div", { key: '4c49edfceefe448b6f5bb29284f0b757342a6003', 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", Object.assign({ 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 }, (this.type === 'number'
+        return (hAsync("div", { key: '1800587d54da282566893c538d47aadf9f9bb390', 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", Object.assign({ 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 }, (this.type === 'number'
             ? {
                 min: this.min,
                 max: this.max,
@@ -11632,7 +11686,7 @@ class EdsInput {
               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: 'df877332c68d4783d5f0f8d8beb94c1859cd00da', 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: '94f7d3d75f5c578c10ab72b6140785b0b5988a13', 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: 'cc6cc50cdebea1d4eaecb78bc6ab2b4b92503893', 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: 'ff4b36e873438f7208eb660c77381f87f0805109', 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 {
@@ -11771,7 +11825,7 @@ class EdsInputField {
     }
     render() {
         const inputOpts = Object.assign({ name: this.name, id: this.inputId, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleNativeInput, onChange: this.handleNativeChange, type: this.type, required: this.required, value: this.value, error: this.error, icon: this.icon, checked: this.checked }, (this.type === 'number' ? { min: this.min, max: this.max, step: this.step } : {}));
-        return (hAsync("div", { key: '8351609cb76699040d692f3a99746970a1498bea' }, this.type === 'checkbox' || this.type === 'radio' ? (this.parsedOptions.length > 0 ? (hAsync("fieldset", { class: "space-y-4" }, hAsync("div", { class: "flex justify-between mb-4" }, 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-4 gap-y-4", key: option.value }, hAsync("eds-input", Object.assign({}, inputOpts, { value: option.value, checked: typeof this.value === 'string' && this.value.split(',').includes(String(option.value)) })), hAsync("label", { htmlFor: this.name, class: `input-label-options ${this.disabled ? 'text-lighter' : ''}` }, option.label)))))) : (hAsync("div", { class: "flex items-center gap-x-8" }, hAsync("eds-input", Object.assign({}, inputOpts, { value: this.value, checked: this.value === 'on' || this.checked })), 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 mb-4" }, 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.onChangeNative, disabled: this.disabled, required: this.required })) : this.type === 'search' ? (hAsync("eds-input-search", { name: "search-box" })) : this.type === 'range' ? ((() => {
+        return (hAsync("div", { key: 'aca76f43840c0e8344d548610bc832cd75ff7bd9' }, this.type === 'checkbox' || this.type === 'radio' ? (this.parsedOptions.length > 0 ? (hAsync("fieldset", { class: "space-y-4" }, hAsync("div", { class: "flex justify-between mb-4" }, 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-4 gap-y-4", key: option.value }, hAsync("eds-input", Object.assign({}, inputOpts, { value: option.value, checked: typeof this.value === 'string' && this.value.split(',').includes(String(option.value)) })), hAsync("label", { htmlFor: this.name, class: `input-label-options ${this.disabled ? 'text-lighter' : ''}` }, option.label)))))) : (hAsync("div", { class: "flex items-center gap-x-8" }, hAsync("eds-input", Object.assign({}, inputOpts, { value: this.value, checked: this.value === 'on' || this.checked })), 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 mb-4" }, 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.onChangeNative, disabled: this.disabled, required: this.required })) : this.type === 'search' ? (hAsync("eds-input-search", { name: "search-box" })) : this.type === 'range' ? ((() => {
             var _a, _b, _c;
             const rangeProps = {
                 name: inputOpts.name,
@@ -11784,7 +11838,7 @@ class EdsInputField {
             const opt = this.parsedOptions;
             const numberValue = typeof this.value === 'string' ? parseFloat(this.value) : this.value || 0;
             return (hAsync("eds-input-range", Object.assign({}, rangeProps, { 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, value: numberValue })));
-        })()) : (hAsync("eds-input", Object.assign({}, inputOpts))))), hAsync("div", { key: '171ca8dfbf4b30a62a05d00f5296b1aaa3d964bd', class: "mt-6" }, hAsync("eds-input-footer", { key: 'c6b7d0a9dc574a5e0dba1e62ff77934e96b4dec1', id: `${this.name}-footer`, name: this.name, message: this.message, "error-message": this.errorMessage, error: this.error, link: this.link }))));
+        })()) : (hAsync("eds-input", Object.assign({}, inputOpts))))), hAsync("div", { key: '27dc5705b9627fb597b04837b488326371fac2e2', class: "mt-6" }, hAsync("eds-input-footer", { key: '6e73fb80b91de81ee22cb33b7589916b7eb882fe', id: `${this.name}-footer`, name: this.name, message: this.message, "error-message": this.errorMessage, error: this.error, link: this.link }))));
     }
     static get delegatesFocus() { return true; }
     get hostEl() { return getElement(this); }
@@ -11836,7 +11890,7 @@ class EdsInputFooter {
         this.link = undefined;
     }
     render() {
-        return (hAsync("div", { key: '4c3c1cc26e2b003f49b3cfd1c2388833c305781b' }, this.error && this.errorMessage && (hAsync("div", { key: '7e14e3a77c99ee2700fd0cd8cb1e738c11e34823', id: `error_${this.name}`, class: "text-error flex items-center" }, hAsync("eds-icon-wrapper", { key: '700bc9b58a15e985903fc91abe4e41847d1cf761', icon: "warning" }), hAsync("p", { key: 'a90a0fb49221c15125a54a0413a926174c065319', class: "f-ui-04 ml-4 mb-4", innerHTML: this.errorMessage }))), this.message && hAsync("p", { key: '24d7c4fb5de1bb54237282edf6e51a16f0475474', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (hAsync("a", { key: '2f01a63b36409dfddd19416777f88008f358b1cb', href: this.link.url, class: "f-ui-05 effect-color hover:text-lighter underline underline-offset-4" }, this.link.label))));
+        return (hAsync("div", { key: '6c045ff40d674a27cf4fe4c1a125251edd7455ab' }, this.error && this.errorMessage && (hAsync("div", { key: 'd6edd41359f7efb8f0a3bce487b852c1b26c035a', id: `error_${this.name}`, class: "text-error flex items-center" }, hAsync("eds-icon-wrapper", { key: 'cd24f34b58c81f00046cc1d90a5b993928e72be8', icon: "warning" }), hAsync("p", { key: 'bf718bcf0e04c5af1924381f567d5921bd43edec', class: "f-ui-04 ml-4 mb-4", innerHTML: this.errorMessage }))), this.message && hAsync("p", { key: '4ea38b231e7b7fba679a05c12773a486aa3201bc', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (hAsync("eds-link", { key: 'e2e1255c198b707abb2b2194100b83f7b00de9e7', label: this.link.label, url: this.link.url, intent: "underline", size: "small", external: true }))));
     }
     static get style() { return EdsInputFooterStyle0; }
     static get cmpMeta() { return {
@@ -11867,7 +11921,7 @@ class EdsInputLabel {
         this.disabled = false;
     }
     render() {
-        return (hAsync("label", { key: '51cf53579cea9effbf421c4f4ab45ef63f6770bf', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (hAsync("span", { key: '381c4e1e014d43f726e997767c76565a1979e54a' }, hAsync("span", { key: '08102ef7990f262bf56b6f5bcf70e2ef6ecb0670', "aria-hidden": "true" }, "*"), hAsync("span", { key: '6d3c6f3af5a06c5a1ee2245240cb3fbbef6cf9a8', class: "sr-only" }, "required")))));
+        return (hAsync("label", { key: '5e97f430a0ef1cdc4d0b28618d78402991fda8fe', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (hAsync("span", { key: 'fedf93c4b037f387c4aad3ffab354de94de564d3' }, hAsync("span", { key: '72ae856c25308b676d84d7ee0bf214362218a203', "aria-hidden": "true" }, "*"), hAsync("span", { key: '39fcf9a2b39a0207eb0b6f62c16183885c98f145', class: "sr-only" }, "required")))));
     }
     static get style() { return EdsInputLabelStyle0; }
     static get cmpMeta() { return {
@@ -11933,7 +11987,7 @@ class EdsInputRange {
         return this.inputElement;
     }
     render() {
-        return (hAsync("div", { key: 'c4ce20af554533837b8fc3f7bf69bd649e26b574', class: "relative flex flex-col items-start" }, hAsync("input", { key: '924b247fd81481e648bbf44fec22185284014254', 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", tabindex: "0", role: "slider", "aria-describedby": `desc_${this.name}`, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.sliderVal, onInput: this.onInput, onChange: this.onChange }), hAsync("p", { key: 'a3acfa464938748480e259cac4376a2be3512e6e', id: `desc_${this.name}`, class: "block f-ui-05 mt-4 text-lighter" }, "Current value: ", this.sliderVal)));
+        return (hAsync("div", { key: 'c8106420cb482123e72c8e5b00079d9921749290', class: "relative flex flex-col items-start" }, hAsync("input", { key: '752dfbeb9fb73c8a4b5ad874461b63e73477ca99', 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", tabindex: "0", role: "slider", "aria-describedby": `desc_${this.name}`, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.sliderVal, onInput: this.onInput, onChange: this.onChange }), hAsync("p", { key: 'de123d07b20996d3f0c7c5baff788ab42fa0a386', id: `desc_${this.name}`, class: "block f-ui-05 mt-4 text-lighter" }, "Current value: ", this.sliderVal)));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -12028,7 +12082,7 @@ class EdsInputSearch {
         return this.inputElement;
     }
     render() {
-        return (hAsync("div", { key: 'b1232c04e55c9f0bd7b864271ca855a3de242a73', class: "relative flex items-center" }, hAsync("eds-icon-wrapper", { key: '67e51a49b994fc00cb48f2b55f54217097f4d837', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), hAsync("input", { key: 'a6526f68a35145631254e4a0380a1298242c592e', id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.value || '', required: this.required, disabled: this.disabled, type: "search", "aria-label": this.placeholder, class: `input pl-36 ${this.decorate}`,
+        return (hAsync("div", { key: 'f8484e4e4a971db07a75ca91b66d4b3cddd5cee9', class: "relative flex items-center" }, hAsync("eds-icon-wrapper", { key: '68782ac168c062564d6378bc1bc62e58efeb3555', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), hAsync("input", { key: 'c59e9b91f214fc94fc4fb4c991c3e667ea3c24ae', id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.value || '', required: this.required, disabled: this.disabled, type: "search", "aria-label": this.placeholder, class: `input pl-36 ${this.decorate}`,
             //onInput={this.onInput}
             onChange: this.onChange })));
     }
@@ -12082,12 +12136,12 @@ class EdsInputSelect {
         const selectId = this.inputId || this.name;
         const placeholderText = this.placeholder || `Pick from the list`;
         const describedBy = this.hasMessage || this.error ? `${this.name}-error` : undefined;
-        return (hAsync("div", { key: 'b28b21c38ed5848cf08c0bc626f4ce32eddfb775', class: "relative" }, hAsync("select", { key: '727f578d43cf12568d3d3b35548a30972fc46300', id: selectId, name: this.name, class: {
+        return (hAsync("div", { key: '7f6a81c0f3d1f998c2bd671722cd06992b382540', class: "relative" }, hAsync("select", { key: '3e62519e3973cf1136cda70a3af1cc2a2e093451', id: selectId, name: this.name, class: {
                 input: true,
                 'input-error': this.error,
                 'px-4': true,
                 'py-2': true
-            }, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, disabled: this.disabled, required: this.required, onChange: this.handleChange }, hAsync("option", { key: '9283f69f3c723d65243d8f38b92ee2fcd16d187e', value: "", disabled: true, hidden: true }, placeholderText), this.options.map((opt, index) => (hAsync("option", { key: index, value: opt.value, selected: opt.value === this.value }, opt.label)))), hAsync("span", { key: '63a0a9fc049f10141697028195aa28abb8d246f2', class: "bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center" }, hAsync("eds-icon-wrapper", { key: 'aa756ea1d279a03ca7919518a15cd63b368a20a0', class: "w-20 h-20", icon: "chevron-right" }))));
+            }, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, disabled: this.disabled, required: this.required, onChange: this.handleChange }, hAsync("option", { key: '4292bd21e8c912f3bb0bc727ed2657051a3e03b8', value: "", disabled: true, hidden: true }, placeholderText), this.options.map((opt, index) => (hAsync("option", { key: index, value: opt.value, selected: opt.value === this.value }, opt.label)))), hAsync("span", { key: 'a03c59be80950fd17a89b0adc693654e99496018', class: "bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center" }, hAsync("eds-icon-wrapper", { key: '0183976264d130c3c12b30c829fae36512607ac4', class: "w-20 h-20", icon: "chevron-right" }))));
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -12176,7 +12230,6 @@ const linkStyles = cva([
             false: ''
         },
         size: {
-            underline: 'f-body-02 ',
             small: 'min-h-36 f-ui-02 px-12',
             large: 'min-h-44 f-ui-01 px-16'
         }
@@ -12229,6 +12282,16 @@ const linkStyles = cva([
             intent: 'inverse',
             isActive: true,
             class: 'before:!opacity-100'
+        },
+        {
+            intent: 'underline',
+            size: 'small',
+            class: '!px-0 !py-0 !min-h-0 f-ui-02'
+        },
+        {
+            intent: 'underline',
+            size: 'large',
+            class: '!px-0 !py-0 !min-h-0 f-ui-01'
         }
     ],
     defaultVariants: {
@@ -12255,7 +12318,7 @@ class EdsLink {
         registerInstance(this, hostRef);
         this.parentContext = null; // Accepts the entire event detail or null
         this.label = undefined;
-        this.intent = undefined;
+        this.intent = 'primary';
         this.icon = undefined;
         this.iconPos = 'right';
         this.iconSmall = false;
@@ -12267,7 +12330,6 @@ class EdsLink {
         this.ariaLabel = undefined;
         this.disabled = false;
         this.hideLabelOnSmallScreen = false;
-        this.extraClass = undefined;
     }
     handleParentContext(event) {
         if (event.target !== this.el) {
@@ -12312,9 +12374,6 @@ class EdsLink {
         }
     }
     getLinkSize() {
-        if (this.intent === 'underline') {
-            return 'underline';
-        }
         return this.size;
     }
     renderLeftIcon() {
@@ -12343,12 +12402,13 @@ class EdsLink {
             isActive: this.current,
             hasIcon: !!this.icon
         });
+        const safeUrl = typeof this.url === 'string' && this.url.length ? this.url : undefined;
         const isInteractive = !this.disabled;
         const isIconOnly = !this.label || (this.hideLabelOnSmallScreen && this.icon);
         const labelClasses = this.hideLabelOnSmallScreen
             ? 'hidden lg:flex' // Tailwind example: hidden on small screens, visible on larger
             : '';
-        return (hAsync("a", { key: 'c09fd68443e1c98a1bfb679b669f9fecfb349548', class: `${classes || ''} ${this.extraClass || ''}`, href: isInteractive ? this.url : undefined, target: this.external && isInteractive ? '_blank' : undefined, rel: this.external && isInteractive ? 'noopener noreferrer' : undefined, tabIndex: isInteractive ? 0 : -1, "aria-label": isIconOnly ? this.ariaLabel || 'Link' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-current": this.current ? 'page' : undefined, role: this.disabled ? 'link' : undefined, download: this.download ? '' : undefined, onClick: (event) => this.handleClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, hAsync("span", { key: '5bf88be39965ca8693daa611b4ca9a85cefb30d3', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), this.label && hAsync("span", { key: 'd92b36812200d809cbccfd9da7f2387a7de80699', class: labelClasses }, this.label), this.renderRightIcon())));
+        return (hAsync("a", { key: '2d72b4f56aad829c674edc920d8b8b9f83a6c9c1', class: `${classes || ''}`, href: isInteractive ? safeUrl : undefined, target: this.external && isInteractive ? '_blank' : undefined, rel: this.external && isInteractive ? 'noopener noreferrer' : undefined, tabIndex: isInteractive ? 0 : -1, "aria-label": isIconOnly ? this.ariaLabel || 'Link' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-current": this.current ? 'page' : undefined, role: this.disabled ? 'link' : undefined, download: this.download ? '' : undefined, onClick: (event) => this.handleClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, hAsync("span", { key: '8a8d9d31456c414d2167db7520978aefd9d955dc', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), this.label && hAsync("span", { key: 'b26b2f5aafa647912ced4b747c8b1e1c7a508050', class: labelClasses }, this.label), this.renderRightIcon())));
     }
     get el() { return getElement(this); }
     static get style() { return EdsLinkStyle0; }
@@ -12368,8 +12428,7 @@ class EdsLink {
             "url": [1],
             "ariaLabel": [1, "aria-label"],
             "disabled": [4],
-            "hideLabelOnSmallScreen": [4, "hide-label-on-small-screen"],
-            "extraClass": [1, "extra-class"]
+            "hideLabelOnSmallScreen": [4, "hide-label-on-small-screen"]
         },
         "$listeners$": [[0, "parentContext", "handleParentContext"]],
         "$lazyBundleId$": "-",
@@ -12456,7 +12515,7 @@ class EdsLogo {
     }
     render() {
         const logoContent = this.getLogo();
-        return (hAsync("a", { key: '550cb4d73702a6a7053adfb5ebe67ff4201e98ad', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, hAsync("div", { key: '141b0faa05a2d51d3ca97242aa910e53e910ad9d', innerHTML: logoContent })));
+        return (hAsync("a", { key: '341988e61c1b9f946bd4529f5562af8366704868', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, hAsync("div", { key: '1a1e4516ba223b6132a85889626ca7856ca5a16c', innerHTML: logoContent })));
     }
     get el() { return getElement(this); }
     static get style() { return EdsLogoStyle0; }
@@ -12731,9 +12790,9 @@ class EdsModal {
     render() {
         // Generate a unique id for the title so we can reference it for aria-labelledby.
         const titleId = `modal-title-${this.el.tagName.toLowerCase()}`;
-        return (hAsync("div", { key: 'e0f35ad87e3b21b98d8d37640f660f2fd490d748', id: "eds-modal", class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-9999991 flex`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, this.isOpen && (hAsync("div", { key: 'cd0bc54ff3e25545709c26f19b2a30f838423250', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
+        return (hAsync("div", { key: '25f038fe934339968388e7b5281a8f0b8509f789', id: "eds-modal", class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-9999991 flex`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, this.isOpen && (hAsync("div", { key: '57f180a65ef43fc8f8c5a232c4b80a880fdfc8e9', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
             ,
-            onClick: () => this.close() })), hAsync("div", { key: '314c45094d1f3b7d1b725341a3294fdca9732a26', class: `container absolute bg-inverse z-10 ${this.getModalPositionClasses()} grow justify-center` }, hAsync("div", { key: '8401bca8601d7681d641c04d16a4efe7ba1a4a9f', class: `flex justify-between items-center border-b-2 border-softer px-20 py-20  ${this.inverseHeader ? 'bg-strongest text-inverse' : 'bg-dark text-default'}` }, hAsync("span", { key: '9a761bf7dc2a97d192a0d280533e6bbcba1871d2', id: titleId, class: `f-heading-04 ${this.getTruncateClass()}` }, this.heading), hAsync("eds-button", { key: '631a15d8b010215d68243bcd43ec5c45899474bf', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8 text-default" })), hAsync("div", { key: '6718fd42a10f6f861fb910e1b32d42607cf8b7bf', class: "pt-8 px-20 py-20" }, hAsync("slot", { key: 'ac9289dd32dcd985d79c882cddb3203b57f42101' })))));
+            onClick: () => this.close() })), hAsync("div", { key: 'f8e4005425c463fbfd38c4174f3bc315a648d05f', class: `container absolute bg-inverse z-10 ${this.getModalPositionClasses()} grow justify-center` }, hAsync("div", { key: 'dd9c641489dfea9ec2784de91ca3e819a8c2413c', class: `flex justify-between items-center border-b-2 border-softer px-20 py-20  ${this.inverseHeader ? 'bg-strongest text-inverse' : 'bg-dark text-default'}` }, hAsync("span", { key: '2e596080da1d79bcc91d542f592ab2b22c96b9d6', id: titleId, class: `f-heading-04 ${this.getTruncateClass()}` }, this.heading), hAsync("eds-button", { key: '260a6ccb15c3aed11585b7d81c1c1d4912e3cd3f', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8 text-default" })), hAsync("div", { key: '96f67530d2c0504507e3fb9becf537f5517081d1', class: "pt-8 px-20 py-20" }, hAsync("slot", { key: '3ffc38832d4a4e8d61c5182f7ceda4ea7876fa31' })))));
     }
     get el() { return getElement(this); }
     static get style() { return EdsModalStyle0; }
@@ -12765,71 +12824,84 @@ class EdsNps {
         this.nps = createEvent(this, "nps", 7);
         this.min = 0;
         this.max = 10;
+        this.btnRefs = [];
+        this.onSelect = (value) => {
+            this.selectedValue = value;
+            this.nps.emit(value);
+            // Move focus to the selected button (like your rating component)
+            requestAnimationFrame(() => {
+                var _a, _b;
+                const idx = value - this.min;
+                (_b = (_a = this.btnRefs[idx]) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
+            });
+        };
+        this.handleKeyNav = (e) => {
+            const { key } = e;
+            const navigational = ['ArrowRight', 'ArrowLeft', 'Home', 'End', ' ', 'Enter'];
+            if (!navigational.includes(key)) {
+                return;
+            }
+            e.preventDefault();
+            const count = this.max - this.min + 1;
+            // Derive current index from selectedValue; if none, use 0 (first)
+            let currentIdx = this.selectedValue == null ? 0 : this.selectedValue - this.min;
+            switch (key) {
+                case 'ArrowRight':
+                    currentIdx = Math.min(count - 1, currentIdx + 1);
+                    this.setActiveByIndex(currentIdx, /*commit*/ false);
+                    break;
+                case 'ArrowLeft':
+                    currentIdx = Math.max(0, currentIdx - 1);
+                    this.setActiveByIndex(currentIdx, /*commit*/ false);
+                    break;
+                case 'Home':
+                    this.setActiveByIndex(0, /*commit*/ false);
+                    break;
+                case 'End':
+                    this.setActiveByIndex(count - 1, /*commit*/ false);
+                    break;
+                case ' ':
+                case 'Enter':
+                    // Commit current focused item
+                    this.onSelect(this.min + currentIdx);
+                    break;
+            }
+        };
         this.question = undefined;
         this.leftLabel = undefined;
         this.rightLabel = undefined;
         this.selectedValue = null;
     }
-    handleClick(value) {
+    /** Move visual highlight & roving tabindex; optionally commit selection */
+    setActiveByIndex(index, commit = false) {
+        var _a;
+        const value = this.min + index;
+        // Update highlight so focus movement is visible (like your rating)
         this.selectedValue = value;
-        this.nps.emit(value);
-    }
-    handleKeyNav(e) {
-        const radios = Array.from(this.el.shadowRoot.querySelectorAll('eds-button'));
-        const currentIndex = radios.findIndex((r) => r.tabIndex === 0);
-        switch (e.key) {
-            case 'ArrowRight':
-            case 'ArrowLeft': {
-                e.preventDefault();
-                const delta = e.key === 'ArrowRight' ? 1 : -1;
-                const nextIndex = Math.min(this.max, Math.max(0, currentIndex + delta));
-                this.activateRadio(radios, nextIndex);
-                break;
-            }
-            case 'Home': {
-                e.preventDefault();
-                this.activateRadio(radios, 0);
-                break;
-            }
-            case 'End': {
-                e.preventDefault();
-                this.activateRadio(radios, this.max);
-                break;
-            }
-            case 'Enter':
-            case ' ': {
-                e.preventDefault();
-                if (currentIndex >= 0) {
-                    this.handleClick(this.min + currentIndex);
-                }
-                break;
-            }
-            case 'Escape': {
-                e.preventDefault();
-                if (currentIndex >= 0) {
-                    radios[currentIndex].blur();
-                }
-                break;
-            }
-            default:
-                return;
+        // Focus the button host (ensure eds-button forwards focus to its inner <button>)
+        const target = this.btnRefs[index];
+        typeof (target === null || target === void 0 ? void 0 : target.focusInner) === 'function' ? target.focusInner() : (_a = target === null || target === void 0 ? void 0 : target.focus) === null || _a === void 0 ? void 0 : _a.call(target);
+        if (commit) {
+            this.onSelect(value);
         }
     }
-    activateRadio(radios, index) {
-        const target = radios[index];
-        const value = this.min + index;
-        this.handleClick(value);
-        target.focus();
-    }
     render() {
         const count = this.max - this.min + 1;
-        //onst fallback = 0;
-        return (hAsync("div", { key: '51e0d272693fd42d1f239f8498d9a5744dead8d7', class: "eds-nps" }, hAsync("eds-input-label", { key: 'f9d3b65985e221f9608da3aba22cc1dc4dd54417', id: "nps-question", name: "nps-question", label: this.question }), hAsync("div", { key: '00b22eff70fd1dd3d210e17aaef5df2057f99bb7', role: "group", id: "nps-buttons", "aria-labelledby": "nps-question", class: "grid grid-cols-11", onKeyDown: (e) => this.handleKeyNav(e) }, Array.from({ length: count }, (_, i) => {
+        return (hAsync("div", { key: 'ca0a63dd6554e39b78fe1c607af0fede74c692c7', class: "eds-nps" }, hAsync("eds-input-label", { key: 'bdf231836d8c6dbd46e852753696c4b7dad577c7', id: "nps-question", name: "nps-question", label: this.question }), hAsync("div", { key: '004ad431ca02e57c7848a4c3fd0a4ecff40b6573', id: "nps-buttons", role: "radiogroup", "aria-labelledby": "nps-question", class: "grid grid-cols-11", onKeyDown: this.handleKeyNav }, Array.from({ length: count }, (_, i) => {
             const val = this.min + i;
             const isSelected = val === this.selectedValue;
-            const tabIndex = isSelected ? 0 : -1;
-            return (hAsync("div", { class: "grid-col-span-1", key: val }, hAsync("eds-button", { tabindex: tabIndex, label: `${val}`, "aria-label": `${val}`, intent: isSelected ? 'primary' : 'ghost', "extra-class": "!block !px-0 w-full", triggerClick: () => this.handleClick(val) })));
-        })), hAsync("div", { key: '7289bd6476a2080be3c02011240e2493b84079e5', class: "flex justify-between mt-8" }, hAsync("span", { key: 'ebfcebd9aa3d11cf298e44987debd8edef1f6e40', class: "f-ui-04 text-light ml-4" }, this.leftLabel), hAsync("span", { key: '002f9878b267439af9f83f9ffd1b52eaef46b929', class: "f-ui-04 text-light mr-4" }, this.rightLabel))));
+            // Roving tabindex: focusable is the selected; if none selected yet, first is focusable
+            const tabIndex = isSelected || (this.selectedValue == null && i === 0) ? 0 : -1;
+            return (hAsync("div", { class: "grid-col-span-1", key: val }, hAsync("eds-button", { ref: (el) => (this.btnRefs[i] = el), role: "radio", "aria-checked": isSelected ? 'true' : 'false', "aria-label": `${val}`,
+                // Use onClick so keyboard activation on inner <button> works natively
+                onClick: () => this.onSelect(val), tabIndex: tabIndex, intent: isSelected ? 'primary' : 'ghost', "extra-class": "!block !px-0 w-full", label: `${val}`,
+                // Optional: keep highlight in sync when tabbing into the group
+                onFocus: () => {
+                    // Only move highlight on initial focus or when roving; remove if you
+                    // want focus without highlight.
+                    this.selectedValue = val;
+                } })));
+        })), hAsync("div", { key: 'ffd498e00559a76b44e8d98ed060db86e60fbde7', class: "flex justify-between mt-8" }, hAsync("span", { key: '80065344c34d88ce3f01aac28d2b87ded60ec524', class: "f-ui-04 text-light ml-4" }, this.leftLabel), hAsync("span", { key: '2a67b416e4e7b0bf61aa66cb4546192860bd372f', class: "f-ui-04 text-light mr-4" }, this.rightLabel))));
     }
     get el() { return getElement(this); }
     static get style() { return EdsNpsStyle0; }
@@ -13101,7 +13173,7 @@ class EdsPagination {
     }
     render() {
         const navigableIndex = -1; // Track index for keyboard navigation
-        return (hAsync("div", { key: 'bf34cb68555555ef984592b261929cfb5ef93048' }, this.total > 0 && this.mode === 'default' && (hAsync("p", { key: '47b8034e6fd839151cdaff04d4df43fec520ce40', class: "f-ui-03 text-light mb-28 w-full text-center", "aria-live": "polite", id: "pagination-info" }, hAsync("span", { key: 'd9d340393777b7b6e808fa21d38f691f1002b363', class: "text-light sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (hAsync("nav", { "aria-label": "Pagination Navigation", "aria-describedby": this.mode === 'default' ? 'pagination-info' : undefined, onKeyDown: this.handleKeyDown }, hAsync("ul", { class: "flex items-center justify-center gap-x-8", role: "list" }, hAsync("li", { class: "mr-auto" }, this.useButtons ? (hAsync("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, hAsync("eds-button", { label: this.prevLabel, disabled: this.mode === 'navigator' ? !this.prevUrl : this.isFirstPage(), "aria-label": "Go to previous page", icon: "chevron-left", "icon-pos": "left", size: "small", "icon-small": "true", intent: "ghost", "extra-class": "!p-8 lg:!pr-12 pagination-button", onClick: (event) => {
+        return (hAsync("div", { key: '3ca147814cf1e0003bac73502a0ae2bf96412ce2' }, this.total > 0 && this.mode === 'default' && (hAsync("p", { key: '85e3fe3224888a4fc9029e91c53c5a753506af55', class: "f-ui-03 text-light mb-28 w-full text-center", "aria-live": "polite", id: "pagination-info" }, hAsync("span", { key: '9edeecb5ae0a1c74dcbf11829a4079cdbbfd46e4', class: "text-light sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (hAsync("nav", { "aria-label": "Pagination Navigation", "aria-describedby": this.mode === 'default' ? 'pagination-info' : undefined, onKeyDown: this.handleKeyDown }, hAsync("ul", { class: "flex items-center justify-center gap-x-8", role: "list" }, hAsync("li", { class: "mr-auto" }, this.useButtons ? (hAsync("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, hAsync("eds-button", { label: this.prevLabel, disabled: this.mode === 'navigator' ? !this.prevUrl : this.isFirstPage(), "aria-label": "Go to previous page", icon: "chevron-left", "icon-pos": "left", size: "small", "icon-small": "true", intent: "ghost", "extra-class": "!p-8 lg:!pr-12 pagination-button", onClick: (event) => {
                 if (this.mode === 'default' && !this.isFirstPage()) {
                     this.handlePageClick(event, (this.currentPage || 1) - 1);
                 }
@@ -13308,7 +13380,7 @@ class EdsProgressBar {
         ]
             .filter(Boolean)
             .join(' ');
-        return (hAsync("div", { key: '6a0e7cb42770cecd023f07cd26a3e2716a9c9905', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: outerClasses }, hAsync("div", { key: '854743f0fc1b916ec24c7e657349871f2175fc64', class: fillClasses, style: { width: `${progressValue}%` } }), hAsync("div", { key: '74d46ff06e9b41d81563b49c1939a989e32877d5', class: "absolute inset-0 flex items-center justify-center pointer-events-none z-10" }, hAsync("span", { key: '0c5925f73934b71e96c6d006c4f7b3a21d144b74', class: "text-default f-body-02" }, progressValue, "%"))));
+        return (hAsync("div", { key: 'feb13579d8257dd845e9c61ddfa8a6dd21594c84', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: outerClasses }, hAsync("div", { key: '2cef98e8ea9f099cb0642bf7927512f33fc8cad9', class: fillClasses, style: { width: `${progressValue}%` } }), hAsync("div", { key: '00cdb6afecb2d2fc5da66d287171d6949d081b20', class: "absolute inset-0 flex items-center justify-center pointer-events-none z-10" }, hAsync("span", { key: '43be66f9b0fe11e3fb5c41ba69e00b8c7f7cea1c', class: "text-default f-body-02" }, progressValue, "%"))));
     }
     static get style() { return EdsProgressBarStyle0; }
     static get cmpMeta() { return {
@@ -13391,7 +13463,7 @@ class EdsRating {
         this.onSelect(next);
     }
     render() {
-        return (hAsync("div", { key: '764b3b37545e97f028423fd5760b882e6151f767', id: "rating-buttons", role: "group", "aria-labelledby": "rating", class: "stars flex space-x-1 my-8", onKeyDown: (e) => this.handleKeyNav(e) }, Array.from({ length: this.ratingCount }, (_, index) => {
+        return (hAsync("div", { key: '52cc87859b174e2eb89392c083031ffde587fb7d', id: "rating-buttons", role: "group", "aria-labelledby": "rating", class: "stars flex space-x-1 my-8", onKeyDown: (e) => this.handleKeyNav(e) }, Array.from({ length: this.ratingCount }, (_, index) => {
             const starRating = index + 1;
             const isSelected = starRating <= this.selectedRating;
             // Use the mapping text if available; otherwise, fall back to a generic label.
@@ -13441,7 +13513,7 @@ class EdsSectionCore {
     }
     render() {
         const TagType = this.tag; // Set dynamic tag type (div or section)
-        return (hAsync(TagType, { key: '4765a07e798f1a622c25ec145c31345b27e1815d' }, hAsync("eds-section-heading", { key: 'a320ac532863eaabbc1901ab5d9e9d0c14ae7556', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), hAsync("slot", { key: '8de34d1949c0a7d0d83f977d18d36f435444401d' })));
+        return (hAsync(TagType, { key: '97a75a0b2a26e912499d844df4e3eb10c2c9eb29' }, hAsync("eds-section-heading", { key: 'fe5d0d7a0594bac513551c4a7ea45e34598ec265', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), hAsync("slot", { key: '5f6492d074ffc9996ac39449a037e267a5b399d2' })));
     }
     static get style() { return EdsSectionCoreStyle0; }
     static get cmpMeta() { return {
@@ -13496,12 +13568,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: '960224968ba731050d2b208a07c1faddc386746b', class: {
+        return (hAsync(TagType, { key: '9003f6d452637cdc9ed3bea69689cd92546860b8', class: {
                 'ui-section-header flex flex-wrap items-center justify-between gap-x-12 gap-y-8': true,
                 container: this.withContainer,
                 'pt-48': this.spacingLarge,
                 'pt-28': !this.spacingLarge
-            } }, hAsync(HeadingTag, { key: 'fc93452bfe1bac130654a187d7d42ee18f273147', class: this.getHeadingClass() }, this.sectionTitle)));
+            } }, hAsync(HeadingTag, { key: '2cb120e1bf8e4816cb56c8ba8f8bbae546bd7baf', class: this.getHeadingClass() }, this.sectionTitle)));
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -13519,6 +13591,186 @@ class EdsSectionHeading {
     }; }
 }
 
+const edsSidebarCss = ":host{display:block;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;transition:width 0.3s ease}:host(.collapsed){width:4rem}:host::-webkit-scrollbar{width:8px}:host::-webkit-scrollbar-track{background:transparent}:host::-webkit-scrollbar-thumb{background:rgba(0, 0, 0, 0.2);border-radius:4px}:host::-webkit-scrollbar-thumb:hover{background:rgba(0, 0, 0, 0.3)}.sidebar-nav{padding:0.5rem 0}.sidebar-header{display:flex;justify-content:flex-end;padding:0.5rem 0.75rem;margin-bottom:0.5rem}:host(.collapsed) .sidebar-header{justify-content:center;padding:0.5rem}.collapse-toggle{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;background:none;border:none;cursor:pointer;padding:0;border-radius:0.375rem;transition:background-color 0.15s ease;color:inherit}.collapse-toggle:hover{background-color:rgba(0, 0, 0, 0.08)}.collapse-toggle:focus-visible{outline:2px solid var(--eds-focus-color, #0066cc);outline-offset:2px}.sidebar-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.125rem}.sidebar-item{display:flex;flex-direction:column}.sidebar-item-content{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.75rem;cursor:pointer;user-select:none;word-break:break-word;transition:background-color 0.15s ease;border-radius:0.375rem;margin:0 0.5rem;position:relative}:host(.collapsed) .sidebar-item-content{justify-content:center;padding:0.75rem;margin:0 0.5rem}.sidebar-item-content:hover{background-color:rgba(0, 0, 0, 0.04)}.sidebar-item-content:focus-visible{outline:2px solid var(--eds-focus-color, #0066cc);outline-offset:-2px;z-index:1}.sidebar-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem}.sidebar-content-wrapper{display:flex;align-items:center;gap:0.5rem;flex:1;min-width:0}.sidebar-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem;padding:0;margin:-0.125rem 0;pointer-events:none}.sidebar-link-wrapper{flex:1;min-width:0;pointer-events:none}.sidebar-link{font-weight:400;pointer-events:none}.sidebar-children{list-style:none;margin:0.25rem 0 0 0;padding:0;display:flex;flex-direction:column;gap:0.125rem;overflow:hidden;animation:slideDown 0.2s ease}@keyframes slideDown{from{opacity:0;transform:translateY(-0.25rem)}to{opacity:1;transform:translateY(0)}}.sidebar-item.level-0 .sidebar-item-content{padding-left:0.75rem}:host(.collapsed) .sidebar-item.level-0 .sidebar-item-content{padding-left:0.75rem}.sidebar-item.level-1 .sidebar-item-content{padding-left:2rem}.sidebar-item.level-2 .sidebar-item-content{padding-left:3.25rem}.sidebar-item.level-3 .sidebar-item-content{padding-left:4.5rem}.sidebar-item.level-4 .sidebar-item-content{padding-left:5.75rem}.sidebar-item.level-5 .sidebar-item-content{padding-left:7rem}:host(.theme-default) .sidebar-item-content{border-radius:0.375rem;margin:0 0.5rem;padding:0.5rem 0.75rem}:host(.theme-default.collapsed) .sidebar-item-content{margin:0 0.5rem;border-radius:0.375rem}:host(.theme-default) .sidebar-item-content:hover{background-color:rgba(0, 0, 0, 0.04)}:host(.theme-default) .sidebar-item.active>.sidebar-item-content{background-color:transparent}:host(.theme-default) .sidebar-item.active>.sidebar-item-content .sidebar-link{font-weight:600}:host(.theme-default) .sidebar-item.level-0 .sidebar-item-content{padding-left:0.75rem}:host(.theme-default) .sidebar-item.level-1 .sidebar-item-content{padding-left:2rem}:host(.theme-default) .sidebar-item.level-2 .sidebar-item-content{padding-left:3.25rem}:host(.theme-default) .sidebar-item.level-3 .sidebar-item-content{padding-left:4.5rem}:host(.theme-default) .sidebar-item.level-4 .sidebar-item-content{padding-left:5.75rem}:host(.theme-minimal) .sidebar-item-content{border-radius:0;margin:0;padding-left:1rem;padding-right:1rem}:host(.theme-minimal.collapsed) .sidebar-item-content{margin:0 0.25rem;border-radius:0.375rem}:host(.theme-minimal) .sidebar-item-content:hover{background-color:var(--grey-300)}:host(.theme-minimal) .sidebar-item.active>.sidebar-item-content{background-color:var(--grey-400);border-left:3px solid var(--grey-900);padding-left:calc(1rem - 3px)}:host(.theme-minimal.collapsed) .sidebar-item.active>.sidebar-item-content{border-left:none;border-radius:0.375rem;padding-left:0.75rem}:host(.theme-minimal) .sidebar-item.level-1.active>.sidebar-item-content{padding-left:calc(2rem - 3px)}:host(.theme-minimal) .sidebar-item.level-2.active>.sidebar-item-content{padding-left:calc(3.25rem - 3px)}:host(.theme-minimal) .sidebar-item.level-3.active>.sidebar-item-content{padding-left:calc(4.5rem - 3px)}:host(.theme-minimal) .sidebar-item.level-4.active>.sidebar-item-content{padding-left:calc(5.75rem - 3px)}:host(.theme-minimal) .sidebar-item.level-0 .sidebar-item-content{padding-left:1rem}:host(.theme-minimal) .sidebar-item.level-1 .sidebar-item-content{padding-left:2rem}:host(.theme-minimal) .sidebar-item.level-2 .sidebar-item-content{padding-left:3.25rem}:host(.theme-minimal) .sidebar-item.level-3 .sidebar-item-content{padding-left:4.5rem}:host(.theme-minimal) .sidebar-item.level-4 .sidebar-item-content{padding-left:5.75rem}:host(.theme-minimal) .sidebar-children{position:relative}:host(.theme-ebrains) .sidebar-item-content{padding:0.5rem 1rem;border-radius:0.5rem;margin:0 0.5rem}:host(.theme-ebrains.collapsed) .sidebar-item-content{padding:0.75rem}:host(.theme-ebrains) .sidebar-item-content:hover{background-color:rgba(0, 0, 0, 0.05)}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content{background-color:var(--green-600, #22c55e);color:white}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content .sidebar-link{--eds-link-color:white;--eds-link-hover-color:white}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content .sidebar-toggle{color:white}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content .sidebar-icon{color:white}:host(.theme-ebrains) .sidebar-item.level-0 .sidebar-item-content{padding-left:1rem}:host(.theme-ebrains) .sidebar-item.level-1 .sidebar-item-content{padding-left:2.25rem}:host(.theme-ebrains) .sidebar-item.level-2 .sidebar-item-content{padding-left:3.5rem}:host(.theme-ebrains) .sidebar-item.level-3 .sidebar-item-content{padding-left:4.75rem}:host(.theme-ebrains) .sidebar-item.level-4 .sidebar-item-content{padding-left:6rem}@media (prefers-color-scheme: dark){.collapse-toggle:hover{background-color:rgba(255, 255, 255, 0.08)}:host(.theme-default) .sidebar-item-content:hover{background-color:rgba(255, 255, 255, 0.05)}:host(.theme-default) .sidebar-item.active>.sidebar-item-content{background-color:rgba(0, 102, 204, 0.15)}:host(.theme-minimal) .sidebar-item-content:hover{background-color:rgba(255, 255, 255, 0.06)}:host::-webkit-scrollbar-thumb{background:rgba(255, 255, 255, 0.2)}:host::-webkit-scrollbar-thumb:hover{background:rgba(255, 255, 255, 0.3)}}.sidebar-toggle eds-icon-wrapper,.sidebar-icon eds-icon-wrapper,.collapse-toggle eds-icon-wrapper{transition:transform 0.15s ease;display:flex;align-items:center;justify-content:center}.sidebar-item-content:focus-visible .sidebar-link{text-decoration:underline}.sidebar-item.active>.sidebar-item-content .sidebar-link{font-weight:500}:host(.collapsed) .sidebar-item-content::after{content:attr(title);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:0.5rem;padding:0.5rem 0.75rem;background:rgba(0, 0, 0, 0.9);color:white;border-radius:0.375rem;white-space:nowrap;font-size:0.875rem;opacity:0;pointer-events:none;transition:opacity 0.2s ease;z-index:1000}:host(.collapsed) .sidebar-item-content:hover::after{opacity:1;transition-delay:0.3s}.-ml-4{margin-left:-0.25rem}.mt-2{margin-top:0.125rem}";
+var EdsSidebarStyle0 = edsSidebarCss;
+
+class EdsSidebar {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.sidebar = createEvent(this, "sidebar", 7);
+        this.toggleItem = (itemId, ev) => {
+            if (ev) {
+                ev.stopPropagation();
+            }
+            const newOpen = new Set(this.openItems);
+            if (newOpen.has(itemId)) {
+                newOpen.delete(itemId);
+            }
+            else {
+                newOpen.add(itemId);
+            }
+            this.openItems = newOpen;
+        };
+        this.navigate = (url, ev) => {
+            if (!this.enableRouting || !url) {
+                return;
+            }
+            if (ev) {
+                ev.preventDefault();
+                ev.stopPropagation();
+            }
+            // Emit custom event for routing
+            this.sidebar.emit(url);
+            // Update browser history if available
+            if (typeof window !== 'undefined' && window.history) {
+                window.history.pushState({}, '', url);
+            }
+        };
+        this.handleItemClick = (item, ev) => {
+            var _a;
+            // If item has children, ONLY toggle (don't navigate)
+            if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
+                this.toggleItem(item.id, ev);
+                return;
+            }
+            // Only navigate if no children and has URL
+            if (item.url) {
+                this.navigate(item.url, ev);
+            }
+        };
+        this.items = '[]';
+        this.theme = 'default';
+        this.activeUrl = '';
+        this.enableRouting = true;
+        this.maxLevel = 4;
+        this.openItems = new Set();
+        this.parsedItems = [];
+    }
+    // ---------------------------------------------------------------------------
+    // Lifecycle
+    // ---------------------------------------------------------------------------
+    componentWillLoad() {
+        this.parsedItems = this.parseItems(this.items);
+        this.initializeOpenItems(this.parsedItems);
+    }
+    // ---------------------------------------------------------------------------
+    // Watchers
+    // ---------------------------------------------------------------------------
+    handleItemsChange(newItems) {
+        this.parsedItems = this.parseItems(newItems);
+        this.initializeOpenItems(this.parsedItems);
+    }
+    handleActiveUrlChange() {
+        this.initializeOpenItems(this.parsedItems);
+    }
+    // ---------------------------------------------------------------------------
+    // Utils
+    // ---------------------------------------------------------------------------
+    parseItems(items) {
+        if (Array.isArray(items)) {
+            return items;
+        }
+        if (typeof items === 'string') {
+            if (!items || items.trim() === '') {
+                return [];
+            }
+            try {
+                const parsed = JSON.parse(items);
+                return Array.isArray(parsed) ? parsed : [];
+            }
+            catch (e) {
+                console.error('eds-sidebar: Failed to parse items JSON:', e);
+                console.error('Received string:', items);
+                return [];
+            }
+        }
+        return [];
+    }
+    initializeOpenItems(items, level = 0) {
+        if (level === 0) {
+            // reset before recomputing
+            this.openItems = new Set();
+        }
+        if (level >= this.maxLevel) {
+            return;
+        }
+        items.forEach((item) => {
+            var _a;
+            const isActive = this.activeUrl && item.url === this.activeUrl;
+            const hasActiveChild = this.hasActiveDescendant(item);
+            if (item.open || isActive || hasActiveChild) {
+                this.openItems.add(item.id);
+            }
+            if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
+                this.initializeOpenItems(item.children, level + 1);
+            }
+        });
+    }
+    hasActiveDescendant(item) {
+        var _a;
+        if (item.url === this.activeUrl) {
+            return true;
+        }
+        if (!((_a = item.children) === null || _a === void 0 ? void 0 : _a.length)) {
+            return false;
+        }
+        return item.children.some((child) => this.hasActiveDescendant(child));
+    }
+    // ---------------------------------------------------------------------------
+    // Render
+    // ---------------------------------------------------------------------------
+    renderItem(item, level = 0) {
+        if (level >= this.maxLevel) {
+            return null;
+        }
+        const isOpen = this.openItems.has(item.id);
+        const isActive = !!item.url && this.activeUrl === item.url;
+        const hasChildren = !!(item.children && item.children.length);
+        const itemId = `eds-sidebar-${item.id}`;
+        const childrenId = `${itemId}-children`;
+        return (hAsync("li", { class: {
+                'sidebar-item': true,
+                open: isOpen,
+                active: isActive,
+                'has-children': hasChildren,
+                [`level-${level}`]: true
+            } }, hAsync("div", { class: "sidebar-item-content", onClick: (e) => this.handleItemClick(item, e), role: hasChildren ? 'button' : item.url ? 'link' : 'button', tabindex: "0", "aria-current": isActive ? 'page' : undefined, "aria-expanded": hasChildren ? (isOpen ? 'true' : 'false') : undefined, "aria-controls": hasChildren ? childrenId : undefined, onKeyDown: (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.handleItemClick(item, e);
+                }
+            } }, hasChildren && (hAsync("span", { class: "sidebar-toggle mt-2 -ml-4", "aria-hidden": "true" }, hAsync("eds-icon-wrapper", { icon: isOpen ? 'chevron-down' : 'chevron-right' }))), hAsync("span", { class: "sidebar-link-wrapper" }, hAsync("eds-link", { label: item.title, url: item.url || '#', intent: isActive ? 'strong' : 'weak', size: "small", "aria-label": item.title, "extra-class": "sidebar-link", tabindex: "-1" }))), hasChildren && isOpen && (hAsync("ul", { id: childrenId, class: "sidebar-children" }, item.children.map((child) => this.renderItem(child, level + 1))))));
+    }
+    render() {
+        return (hAsync(Host, { key: '4334d20e5d72671243633253910ab05b4da013da', class: {
+                'eds-sidebar': true,
+                [`theme-${this.theme}`]: true
+            } }, hAsync("nav", { key: '319f6f42416d4229f1b011bf1216b39c8627302d', class: "sidebar-nav", "aria-label": "Sidebar" }, hAsync("ul", { key: '687ceae3eca3e844e8f6a361db4a76d127d27813', class: "sidebar-list" }, this.parsedItems.map((item) => this.renderItem(item, 0))))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "items": ["handleItemsChange"],
+        "activeUrl": ["handleActiveUrlChange"]
+    }; }
+    static get style() { return EdsSidebarStyle0; }
+    static get cmpMeta() { return {
+        "$flags$": 9,
+        "$tagName$": "eds-sidebar",
+        "$members$": {
+            "items": [1],
+            "theme": [1],
+            "activeUrl": [1, "active-url"],
+            "enableRouting": [4, "enable-routing"],
+            "maxLevel": [2, "max-level"],
+            "openItems": [32],
+            "parsedItems": [32]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
 const edsSocialNetworksCss = "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}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.mt-12{margin-top:0.75rem}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.gap-4{gap:0.25rem}.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)}.effect-focus{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.hover\\:text-default:hover{color:var(--black)}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.rounded-sm{border-radius:8px}";
 var EdsSocialNetworksStyle0 = edsSocialNetworksCss;
 
@@ -13575,7 +13827,7 @@ class EdsSocialNetworks {
      * Each social network link uses the `eds-link` component with specific classes and styles.
      */
     render() {
-        return (hAsync("nav", { key: '907adc08d4e02f34994a057146a60b734d6ab81b', "aria-label": "Social media" }, hAsync("p", { key: 'a3620851f2e31d662a812ac74e831f023d2646a4', class: "f-ui-02" }, this.heading), hAsync("ul", { key: 'b8fece03b5ed995a9dba78cf0445a4eb46787bdc', 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": `EBRAINS on ${network.label}`, url: network.url, icon: network.icon, intent: "strong" })))))));
+        return (hAsync("nav", { key: 'f56d034a9c934e1be2003a0fedaf6c9ec4fc5909', "aria-label": "Social media" }, hAsync("p", { key: '66d7c2384206143eef36cdb085780d4a1590fe76', class: "f-ui-02" }, this.heading), hAsync("ul", { key: '0ccb5fd44ee30f77c19fdb67dc1cc19fadd3561e', 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": `EBRAINS on ${network.label}`, url: network.url, icon: network.icon, intent: "strong" })))))));
     }
     static get style() { return EdsSocialNetworksStyle0; }
     static get cmpMeta() { return {
@@ -13666,7 +13918,7 @@ class EdsSpinner {
                 alignItems: 'center',
                 justifyContent: 'center'
             };
-        return (hAsync(Host, { key: 'dbf06a1430e3a69314ec016937a9b3ba89229353' }, hAsync("div", { key: '12a51b0eed154fd2c6b6ae4ce586630a8f61164a', class: "spinner-overlay", style: overlayStyle }, hAsync("span", { key: '0e63b80c45efec7b226b5f4277fe00e4f7bc4f1b', class: "spinner", style: spinnerStyle }), this.message && hAsync("p", { key: '8625d4589ec26c9513d1dc7a53fa17b9874fcf3c', class: "f-body-01" }, this.message))));
+        return (hAsync(Host, { key: 'c50ca410eb23855b3076babb78b4849246722cf7' }, hAsync("div", { key: '9b3722b00777a0dd77288c4c3b29419a9b87640b', class: "spinner-overlay", style: overlayStyle }, hAsync("span", { key: '5479d0195b6d8991613df8ae03eee34b2a095b6b', class: "spinner", style: spinnerStyle }), this.message && hAsync("p", { key: '448c3b0e6ce0aac6c21b53c58b97e423a1739864', class: "f-body-01" }, this.message))));
     }
     static get style() { return EdsSpinnerStyle0; }
     static get cmpMeta() { return {
@@ -13750,7 +14002,7 @@ class EdsSplashScreen {
     }; }
 }
 
-const edsStepsCss = ".steps{position:sticky;margin-left:16px;margin-bottom:12px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;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:-2px;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,.steps h5{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before,.steps h5::before{content:counter(step);position:absolute;left:-40px;top:-2px;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}.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)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.my-16{margin-top:1rem;margin-bottom:1rem}.mt-16{margin-top:1rem}.mb-28{margin-bottom:1.75rem}.ml-8{margin-left:0.5rem}.gap-y-16{row-gap:1rem}.gap-x-16{-moz-column-gap:1rem;column-gap:1rem}.flex{display:flex}.grid{display:grid}.hidden{display:none}.block{display:block}.cursor-pointer{cursor:pointer}.eds-steps__title{cursor:pointer}";
+const edsStepsCss = "blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}.steps{position:sticky;margin-left:16px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;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;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,.steps h5{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before,.steps h5::before{content:counter(step);position:absolute;left:-39px;top:-2px;display:flex;align-items:center;justify-content:center;width:31px;height:31px;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}.steps-img-placeholder{width:100%;height:200px;background:linear-gradient(to bottom, #9CE142, #00C959, #00A595);}.bg-\\[\\#00A595\\]{--tw-bg-opacity:1;background-color:rgb(0 165 149 / var(--tw-bg-opacity))}.relative{position:relative}.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-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-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.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)}.text-center{text-align:center}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.w-full{width:100%}.h-52{height:3.25rem}.h-96{height:6rem}.h-\\[200px\\]{height:200px}.justify-between{justify-content:space-between}.mt-16{margin-top:1rem}.mt-32{margin-top:2rem}.mt-64{margin-top:4rem}.my-16{margin-top:1rem;margin-bottom:1rem}.mb-12{margin-bottom:0.75rem}.mb-16{margin-bottom:1rem}.last\\:mb-0:last-child{margin-bottom:0rem}.last\\:mt-16:last-child{margin-top:1rem}.border-softer{border:2px solid rgba(0, 0, 0, .1)}.relative{position:relative}.flex{display:flex}.inline-flex{display:inline-flex}.grow{flex-grow:1}.rounded{border-radius:0.25rem}.rounded-lg{border-radius:16px}.rounded-t-lg{border-top-left-radius:16px;border-top-right-radius:16px}.border-2{border-width:2px}.p-8{padding:0.5rem}.p-24{padding:1.5rem}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.top-2{top:0.125rem}.bottom-2{bottom:0.125rem}.left-2{left:0.125rem}.right-2{right:0.125rem}.-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))}.overflow-hidden{overflow:hidden}.space-y-8{--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.space-y-16{--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.ml-8{margin-left:0.5rem}.gap-y-16{row-gap:1rem}.gap-x-16{-moz-column-gap:1rem;column-gap:1rem}.flex{display:flex}.grid{display:grid}.hidden{display:none}.block{display:block}.items-center{align-items:center}.px-8{padding-left:0.5rem;padding-right:0.5rem}.pb-20{padding-bottom:1.25rem}.eds-steps__title[role=\"button\"]{cursor:pointer}.eds-steps__title.is-disabled{cursor:not-allowed;color:rgba(0, 0, 0, 0.5);}.eds-steps__title.is-disabled::before{opacity:1;filter:none}.steps--horizontal{display:flex;flex-direction:column;gap:2rem}.horizontal-indicators{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0}.horizontal-step{display:flex;flex-direction:column;align-items:center;gap:0.5rem;cursor:pointer;flex:1;position:relative}.horizontal-step:not(:last-child)::after{content:'';position:absolute;top:1.25rem;left:50%;width:100%;height:2px;background-color:#e0e0e0;z-index:-1}.horizontal-step.is-completed:not(:last-child)::after{background-color:var(--green-500);}.step-indicator{width:2.5rem;height:2.5rem;border-radius:50%;border:2px solid #e0e0e0;display:flex;align-items:center;justify-content:center;background-color:white;transition:all 0.3s ease}.horizontal-step.is-active .step-indicator{border-color:var(--green-500);background-color:var(--green-500);color:var(--white)}.horizontal-step.is-completed .step-indicator{border-color:var(--green-500);background-color:var(--white)}.horizontal-step.is-disabled{opacity:0.5;cursor:not-allowed}.step-number{font-weight:600;font-size:0.875rem}.step-label{font-size:0.875rem;text-align:center;font-weight:500}.horizontal-step.is-active .step-label{color:var(--green-500)}.step-content{padding:2rem 0;margin-left:calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem);margin-right:calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem)}.opacity-50{opacity:0.5}.eds-steps__title[role=\"button\"]{cursor:pointer}";
 var EdsStepsStyle0 = edsStepsCss;
 
 class EdsSteps {
@@ -13761,47 +14013,63 @@ class EdsSteps {
         this.next = createEvent(this, "next", 7);
         this.back = createEvent(this, "back", 7);
         this.handleTitleClick = (index) => {
-            // 1) If clicking the current title, keep your existing toggle behavior
-            if (index === this.activeStep) {
-                this.activeStep = this.activeStep === index ? -1 : index;
+            // In linear mode, do NOT collapse; only navigate if allowed.
+            if (this.type === 'linear') {
+                // prevent jumping forward over disabled steps
+                if (index > this.activeStep) {
+                    for (let i = this.activeStep; i < index; i++) {
+                        if (this.isStepDisabled(i)) {
+                            return;
+                        }
+                    }
+                }
+                this.activeStep = index;
                 this.step.emit(this.activeStep);
                 return;
             }
-            // 2) In linear mode, block jumping *forward* when current step is gated
-            const forwardBlocked = this.type === 'linear' && index > this.activeStep && this.isNextDisabledFor(this.activeStep);
-            if (forwardBlocked) {
+            // Non-linear vertical mode: support optional collapse/expand on current title
+            if (this.orientation === 'vertical' && index === this.activeStep && this.collapsibleTitles) {
+                this.activeStep = this.activeStep === index ? -1 : index;
+                this.step.emit(this.activeStep);
                 return;
-            } // do nothing when Next/Finish would be disabled
-            // 3) Allow jumping back or forward when not gated
+            }
+            // Otherwise, just set
             this.activeStep = index;
             this.step.emit(this.activeStep);
         };
         this.handleNext = () => {
             const lastIndex = this.parsedSteps.length - 1;
+            // On last step
             if (this.activeStep >= lastIndex) {
-                this.activeStep = -1;
                 this.finished.emit();
+                this.activeStep = -1; // collapse the content
+                this.step.emit(this.activeStep); // notify change (-1 sentinel)
                 return;
             }
             const target = this.activeStep + 1;
             this.next.emit(target);
-            if (this.isNextDisabledFor(this.activeStep)) {
+            if (this.isStepDisabled(this.activeStep)) {
                 return;
-            } // block advance only if current is disabled
+            }
             this.activeStep = target;
             this.step.emit(this.activeStep);
-            // 2) if using the boolean form, clear it when moving away from a step
             if (!Array.isArray(this.disableNext)) {
                 this.disableNext = false;
             }
         };
         this.handleBack = () => {
+            const lastIndex = this.parsedSteps.length - 1;
+            // If somehow collapsed, recover to last visible step first
+            if (this.activeStep < 0) {
+                this.activeStep = lastIndex;
+                this.step.emit(this.activeStep);
+                return;
+            }
             if (this.activeStep > 0) {
                 const target = this.activeStep - 1;
                 this.back.emit(target);
                 this.activeStep = target;
                 this.step.emit(this.activeStep);
-                // also clear boolean form on back
                 if (!Array.isArray(this.disableNext)) {
                     this.disableNext = false;
                 }
@@ -13809,51 +14077,91 @@ class EdsSteps {
         };
         this.steps = [];
         this.type = 'static';
+        this.orientation = 'vertical';
         this.nextLabel = 'Next';
         this.backLabel = 'Back';
         this.finishLabel = 'Finish';
         this.disableNext = false;
         this.headingLevel = 'h4';
+        this.collapsibleTitles = false;
         this.activeStep = 0;
     }
+    handleDisableNextChange(newValue) {
+        if (typeof newValue === 'string' && newValue.trim().startsWith('[')) {
+            try {
+                this.disableNext = JSON.parse(newValue);
+            }
+            catch (e) {
+                console.error('Failed to parse disable-next array:', e);
+            }
+        }
+    }
+    componentWillLoad() {
+        this.handleDisableNextChange(this.disableNext);
+    }
     componentDidLoad() {
-        var _a;
         if (this.type === 'linear') {
-            const btns = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('eds-button');
+            const root = this.el.shadowRoot || this.el;
+            const btns = root.querySelectorAll('eds-button');
             btns === null || btns === void 0 ? void 0 : btns.forEach((btn) => this.emitContext(btn));
         }
     }
     activeStepChanged(newValue) {
+        // Clamp to valid range or collapsed sentinel
+        const max = Math.max(0, this.parsedSteps.length - 1);
+        if (newValue > max) {
+            this.activeStep = max;
+            return;
+        }
+        if (newValue < -1) {
+            this.activeStep = -1;
+            return;
+        }
+        // If collapsed (only possible in non-linear mode), do not emit context
+        if (newValue < 0) {
+            return;
+        }
         setTimeout(() => {
-            var _a;
-            const activeStepContainer = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.step')[newValue];
-            if (activeStepContainer) {
-                activeStepContainer.querySelectorAll('eds-button').forEach((btn) => this.emitContext(btn));
-            }
+            const root = this.el.shadowRoot || this.el;
+            const all = root.querySelectorAll('.step');
+            const active = all && newValue < all.length ? all[newValue] : undefined;
+            active === null || active === void 0 ? void 0 : active.querySelectorAll('eds-button').forEach((btn) => this.emitContext(btn));
         }, 50);
     }
     emitContext(linkElement) {
         const event = new CustomEvent('parentContext', {
-            detail: {
-                componentName: this.el.tagName.toLowerCase(),
-                identifier: this.activeStep
-            }
+            detail: { componentName: this.el.tagName.toLowerCase(), identifier: this.activeStep },
+            bubbles: true,
+            composed: true
         });
         linkElement.dispatchEvent(event);
     }
     get parsedSteps() {
         return parseData(this.steps);
     }
+    isStepDisabled(index) {
+        if (Array.isArray(this.disableNext)) {
+            return index < this.disableNext.length ? !!this.disableNext[index] : false;
+        }
+        return index === this.activeStep && !!this.disableNext;
+    }
     isNextDisabledFor(index) {
-        return Array.isArray(this.disableNext)
-            ? !!this.disableNext[index] // per-step
-            : index === this.activeStep && !!this.disableNext; // only active step
+        return this.isStepDisabled(index);
     }
     /** Render the semantic heading element as a clickable control only in linear mode */
     renderHeading(title, index) {
         const Tag = this.headingLevel;
+        const isOpen = this.activeStep === index;
         if (this.type === 'linear') {
-            const forwardBlocked = index > this.activeStep && this.isNextDisabledFor(this.activeStep);
+            let forwardBlocked = false;
+            if (index > this.activeStep) {
+                for (let i = this.activeStep; i < index; i++) {
+                    if (this.isStepDisabled(i)) {
+                        forwardBlocked = true;
+                        break;
+                    }
+                }
+            }
             const onKey = (e) => {
                 if (forwardBlocked) {
                     return;
@@ -13863,24 +14171,61 @@ class EdsSteps {
                     this.handleTitleClick(index);
                 }
             };
-            const isOpen = this.activeStep === index;
             return (hAsync(Tag, { class: `eds-steps__title ${forwardBlocked ? 'is-disabled' : ''}`, role: "button", tabindex: forwardBlocked ? -1 : 0, "aria-disabled": forwardBlocked ? 'true' : 'false', "aria-expanded": isOpen, "aria-controls": `eds-step-panel-${index}`, onClick: () => !forwardBlocked && this.handleTitleClick(index), onKeyDown: onKey }, title));
         }
-        return hAsync(Tag, { class: "eds-steps__title" }, title);
+        return (hAsync(Tag, { class: `eds-steps__title ${this.collapsibleTitles && index !== this.activeStep ? '' : ''}`, onClick: () => this.handleTitleClick(index) }, title));
+    }
+    /** Render horizontal step indicator */
+    renderHorizontalIndicator(step, index) {
+        const isActive = this.activeStep === index;
+        const isCompleted = this.activeStep > index;
+        let forwardBlocked = false;
+        if (index > this.activeStep) {
+            for (let i = this.activeStep; i < index; i++) {
+                if (this.isStepDisabled(i)) {
+                    forwardBlocked = true;
+                    break;
+                }
+            }
+        }
+        const onKey = (e) => {
+            if (forwardBlocked) {
+                return;
+            }
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.handleTitleClick(index);
+            }
+        };
+        return (hAsync("div", { class: `horizontal-step ${isActive ? 'is-active' : ''} ${isCompleted ? 'is-completed' : ''}`, onClick: () => !forwardBlocked && this.handleTitleClick(index), onKeyDown: onKey, role: "button", tabindex: forwardBlocked ? -1 : 0, "aria-label": `Step ${index + 1}: ${step.title}`, "aria-current": isActive ? 'step' : undefined, "aria-disabled": forwardBlocked ? 'true' : 'false' }, hAsync("div", { class: "step-indicator" }, hAsync("span", { class: "step-number" }, index + 1)), hAsync("span", { class: `text-center text-default f-ui-03 ${forwardBlocked ? 'opacity-50' : ''}` }, step.title)));
     }
     render() {
         const steps = this.parsedSteps;
+        // Horizontal Linear
+        if (this.type === 'linear' && this.orientation === 'horizontal') {
+            return (hAsync("div", { class: "steps--horizontal", style: { '--step-count': steps.length.toString() } }, hAsync("div", { class: "horizontal-indicators" }, steps.map((step, index) => this.renderHorizontalIndicator(step, index))), steps.map((step, index) => {
+                const isLast = index === steps.length - 1;
+                if (this.activeStep !== index) {
+                    return null;
+                }
+                const marginClass = this.orientation === 'horizontal' ? 'mt-64' : 'mt-32';
+                return (hAsync("div", { class: "step-content", key: index, id: `eds-step-panel-${index}` }, hAsync("slot", { name: `step-${index}` }, hAsync("div", { class: "f-body-02 text-lighter", innerHTML: step.content })), hAsync("div", { class: `flex items-center justify-between ${marginClass}` }, hAsync("eds-button", { label: this.backLabel, intent: "ghost", icon: "chevron-left", iconPos: "left", iconSmall: true, onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small" }), hAsync("eds-button", { label: isLast ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", iconSmall: true, onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: "small", class: index > 0 ? 'ml-8' : null })), hAsync("slot", { name: `actions-${index}` })));
+            })));
+        }
+        // Vertical Linear
         if (this.type === 'linear') {
             return (hAsync("div", { class: "steps" }, steps.map((step, index) => {
                 const isLast = index === steps.length - 1;
-                return (hAsync("div", { class: "step mb-28", key: index }, this.renderHeading(step.title, index), this.activeStep === index && (hAsync("div", { class: "content grid gap-y-16", id: `eds-step-panel-${index}` }, hAsync("slot", { name: `step-${index}` }, hAsync("div", { class: isLast ? 'f-body-02 text-lighter' : 'f-body-02 text-lighter', innerHTML: step.content })), hAsync("div", { class: "flex items-center mt-16" }, hAsync("eds-button", { label: this.backLabel, intent: "ghost", icon: "chevron-left", iconPos: "left", iconSmall: true, onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small" }), hAsync("eds-button", { label: isLast ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", iconSmall: true, onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: "small", class: "ml-8" })), hAsync("slot", { name: `actions-${index}` })))));
+                const marginClass = this.orientation === 'horizontal' ? 'mt-64' : 'mt-32';
+                return (hAsync("div", { class: "step mb-16", key: index }, this.renderHeading(step.title, index), this.activeStep === index && (hAsync("div", { class: "content grid gap-y-16", id: `eds-step-panel-${index}` }, hAsync("slot", { name: `step-${index}` }, hAsync("div", { class: "my-16 f-body-02 text-lighter", innerHTML: step.content })), hAsync("div", { class: `flex items-center justify-between ${marginClass}` }, hAsync("eds-button", { label: this.backLabel, intent: "ghost", icon: "chevron-left", iconPos: "left", iconSmall: true, onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small" }), hAsync("eds-button", { label: isLast ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", iconSmall: true, onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: "small", class: index > 0 ? 'ml-8' : null })), hAsync("slot", { name: `actions-${index}` })))));
             })));
         }
-        // Static: no navigation buttons
-        return (hAsync("div", { class: "steps" }, steps.map((step, index) => (hAsync("div", { class: "step mb-28", key: index }, this.renderHeading(step.title, index), hAsync("div", { class: "content", id: `eds-step-panel-${index}` }, hAsync("slot", { name: `step-${index}` }, hAsync("div", { class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16', innerHTML: step.content }))))))));
+        // Static
+        return (hAsync("div", { class: "steps" }, steps.map((step, index) => (hAsync("div", { class: "step mb-16", key: index }, this.renderHeading(step.title, index), hAsync("div", { class: "content", id: `eds-step-panel-${index}` }, hAsync("slot", { name: `step-${index}` }, hAsync("div", { class: "f-body-02 text-lighter my-16", innerHTML: step.content }))))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "disableNext": ["handleDisableNextChange"],
         "activeStep": ["activeStepChanged"]
     }; }
     static get style() { return EdsStepsStyle0; }
@@ -13890,11 +14235,13 @@ class EdsSteps {
         "$members$": {
             "steps": [1],
             "type": [1],
+            "orientation": [1],
             "nextLabel": [1, "next-label"],
             "backLabel": [1, "back-label"],
             "finishLabel": [1, "finish-label"],
-            "disableNext": [1028, "disable-next"],
+            "disableNext": [1032, "disable-next"],
             "headingLevel": [513, "heading-level"],
+            "collapsibleTitles": [4, "collapsible-titles"],
             "activeStep": [32]
         },
         "$listeners$": undefined,
@@ -13903,7 +14250,7 @@ class EdsSteps {
     }; }
 }
 
-const edsStepsV2Css = ".steps{position:sticky;margin-left:16px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;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:-2px;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,.steps h5{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before,.steps h5::before{content:counter(step);position:absolute;left:-40px;top:-2px;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}.steps-img-placeholder{width:100%;height:200px;background:linear-gradient(to bottom, #9CE142, #00C959, #00A595);}.bg-\\[\\#00A595\\]{--tw-bg-opacity:1;background-color:rgb(0 165 149 / var(--tw-bg-opacity))}.relative{position:relative}.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-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)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.w-full{width:100%}.h-52{height:3.25rem}.h-96{height:6rem}.h-\\[200px\\]{height:200px}.mt-16{margin-top:1rem}.my-16{margin-top:1rem;margin-bottom:1rem}.mb-12{margin-bottom:0.75rem}.last\\:mb-0:last-child{margin-bottom:0rem}.last\\:mt-16:last-child{margin-top:1rem}.border-softer{border:2px solid rgba(0, 0, 0, .1)}.relative{position:relative}.flex{display:flex}.inline-flex{display:inline-flex}.grow{flex-grow:1}.rounded{border-radius:0.25rem}.rounded-lg{border-radius:16px}.rounded-t-lg{border-top-left-radius:16px;border-top-right-radius:16px}.border-2{border-width:2px}.p-8{padding:0.5rem}.p-24{padding:1.5rem}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.top-2{top:0.125rem}.bottom-2{bottom:0.125rem}.left-2{left:0.125rem}.right-2{right:0.125rem}.-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))}.overflow-hidden{overflow:hidden}.space-y-8{--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.space-y-16{--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.ml-8{margin-left:0.5rem}.gap-y-16{row-gap:1rem}.gap-x-16{-moz-column-gap:1rem;column-gap:1rem}.flex{display:flex}.grid{display:grid}.hidden{display:none}.block{display:block}.px-8{padding-left:0.5rem;padding-right:0.5rem}.pb-20{padding-bottom:1.25rem}.eds-steps__title{cursor:pointer}";
+const edsStepsV2Css = "blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}.steps{position:sticky;margin-left:16px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;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:-41px;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,.steps h5{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before,.steps h5::before{content:counter(step);position:absolute;left:-40px;top:-2px;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}.steps-img-placeholder{width:100%;height:200px;background:linear-gradient(to bottom, #9CE142, #00C959, #00A595);}.bg-\\[\\#00A595\\]{--tw-bg-opacity:1;background-color:rgb(0 165 149 / var(--tw-bg-opacity))}.relative{position:relative}.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-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-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.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)}.text-center{text-align:center}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.w-full{width:100%}.h-52{height:3.25rem}.h-96{height:6rem}.h-\\[200px\\]{height:200px}.justify-between{justify-content:space-between}.mt-16{margin-top:1rem}.mt-32{margin-top:2rem}.mt-64{margin-top:4rem}.my-16{margin-top:1rem;margin-bottom:1rem}.mb-12{margin-bottom:0.75rem}.last\\:mb-0:last-child{margin-bottom:0rem}.last\\:mt-16:last-child{margin-top:1rem}.border-softer{border:2px solid rgba(0, 0, 0, .1)}.relative{position:relative}.flex{display:flex}.inline-flex{display:inline-flex}.grow{flex-grow:1}.rounded{border-radius:0.25rem}.rounded-lg{border-radius:16px}.rounded-t-lg{border-top-left-radius:16px;border-top-right-radius:16px}.border-2{border-width:2px}.p-8{padding:0.5rem}.p-24{padding:1.5rem}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.top-2{top:0.125rem}.bottom-2{bottom:0.125rem}.left-2{left:0.125rem}.right-2{right:0.125rem}.-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))}.overflow-hidden{overflow:hidden}.space-y-8{--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.space-y-16{--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.ml-8{margin-left:0.5rem}.gap-y-16{row-gap:1rem}.gap-x-16{-moz-column-gap:1rem;column-gap:1rem}.flex{display:flex}.grid{display:grid}.hidden{display:none}.block{display:block}.items-center{align-items:center}.px-8{padding-left:0.5rem;padding-right:0.5rem}.pb-20{padding-bottom:1.25rem}.eds-steps__title[role=\"button\"]{cursor:pointer}.eds-steps__title.is-disabled{cursor:not-allowed;color:rgba(0, 0, 0, 0.5);}.eds-steps__title.is-disabled::before{opacity:1;filter:none}.steps--horizontal{display:flex;flex-direction:column;gap:2rem}.horizontal-indicators{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0}.horizontal-step{display:flex;flex-direction:column;align-items:center;gap:0.5rem;cursor:pointer;flex:1;position:relative}.horizontal-step:not(:last-child)::after{content:'';position:absolute;top:1.25rem;left:50%;width:100%;height:2px;background-color:#e0e0e0;z-index:-1}.horizontal-step.is-completed:not(:last-child)::after{background-color:var(--green-500);}.step-indicator{width:2.5rem;height:2.5rem;border-radius:50%;border:2px solid #e0e0e0;display:flex;align-items:center;justify-content:center;background-color:white;transition:all 0.3s ease;z-index:2}.horizontal-step.is-active .step-indicator{border-color:var(--green-500);background-color:var(--green-500);color:var(--white)}.horizontal-step.is-completed .step-indicator{border-color:var(--green-500);background-color:var(--white)}.horizontal-step.is-disabled{opacity:0.5;cursor:not-allowed}.step-number{font-weight:600;font-size:0.875rem}.step-label{font-size:0.875rem;text-align:center;font-weight:500}.horizontal-step.is-active .step-label{color:var(--green-500)}.step-content{padding:2rem 0;margin-left:calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem);margin-right:calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem)}.opacity-50{opacity:0.5}";
 var EdsStepsV2Style0 = edsStepsV2Css;
 
 class EdsStepsV2 {
@@ -13914,48 +14261,74 @@ class EdsStepsV2 {
         this.next = createEvent(this, "next", 7);
         this.back = createEvent(this, "back", 7);
         this.handleTitleClick = (index) => {
-            // If clicking the same title, keep your existing toggle behavior
-            if (index === this.activeStep) {
-                this.activeStep = this.activeStep === index ? -1 : index;
+            // In linear mode, do NOT collapse; only navigate if allowed.
+            if (this.type === 'linear') {
+                if (index > this.activeStep) {
+                    // Prevent jumping forward over disabled steps
+                    for (let i = this.activeStep; i < index; i++) {
+                        if (this.isStepDisabled(i)) {
+                            return;
+                        }
+                    }
+                }
+                this.activeStep = index;
                 this.step.emit(this.activeStep);
                 return;
             }
-            // Block *forward* jumps when progression is gated by disableNext (boolean)
-            const forwardBlocked = this.type === 'linear' && index > this.activeStep && this.isNextDisabledForCurrent();
-            if (forwardBlocked) {
+            // Non-linear vertical mode can toggle collapse of the current title
+            if (this.orientation === 'vertical' && index === this.activeStep) {
+                this.activeStep = this.activeStep === index ? -1 : index;
+                this.step.emit(this.activeStep);
                 return;
             }
-            // Allow back (or forward when not gated)
+            // Otherwise just set
             this.activeStep = index;
             this.step.emit(this.activeStep);
         };
         this.handleNext = () => {
             const lastIndex = this.parsedSteps.length - 1;
+            // On last step: do NOT collapse; keep content visible, just emit finished
             if (this.activeStep >= lastIndex) {
                 this.finished.emit();
-                this.activeStep = -1; // collapse last step
+                this.activeStep = -1; // collapse the content
+                this.step.emit(this.activeStep); // notify change (-1 sentinel)
                 return;
             }
             const target = this.activeStep + 1;
             this.next.emit(target);
-            if (!this.disableNext) {
-                this.activeStep = target;
-                this.step.emit(this.activeStep);
+            if (this.isStepDisabled(this.activeStep)) {
+                return;
+            }
+            this.activeStep = target;
+            this.step.emit(this.activeStep);
+            // clear boolean form when moving away from a step
+            if (!Array.isArray(this.disableNext)) {
+                this.disableNext = false;
             }
         };
         this.handleBack = () => {
+            const lastIndex = this.parsedSteps.length - 1;
+            // Recover from collapsed sentinel if it ever occurs
+            if (this.activeStep < 0) {
+                this.activeStep = lastIndex;
+                this.step.emit(this.activeStep);
+                return;
+            }
             if (this.activeStep > 0) {
                 const target = this.activeStep - 1;
                 this.back.emit(target);
                 this.activeStep = target;
                 this.step.emit(this.activeStep);
+                if (!Array.isArray(this.disableNext)) {
+                    this.disableNext = false;
+                }
             }
         };
         this.steps = [];
         this.type = 'static';
+        this.orientation = 'vertical';
         this.imageSrc = undefined;
         this.imageWidth = undefined;
-        this.bg = true;
         this.message = undefined;
         this.nextLabel = 'Next';
         this.backLabel = 'Back';
@@ -13964,57 +14337,87 @@ class EdsStepsV2 {
         this.headingLevel = 'h4';
         this.activeStep = 0;
     }
-    componentDidLoad() {
-        var _a;
-        if (this.type === 'linear') {
-            const btns = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('eds-button');
-            btns === null || btns === void 0 ? void 0 : btns.forEach((btn) => {
-                this.emitContext(btn);
-            });
+    handleDisableNextChange(newValue) {
+        if (typeof newValue === 'string' && newValue.trim().startsWith('[')) {
+            try {
+                this.disableNext = JSON.parse(newValue);
+            }
+            catch (e) {
+                console.error('Failed to parse disable-next array:', e);
+            }
         }
     }
     activeStepChanged(newValue) {
+        // Clamp and ignore collapsed sentinel
+        const max = Math.max(0, this.parsedSteps.length - 1);
+        if (newValue > max) {
+            this.activeStep = max;
+            return;
+        }
+        if (newValue < -1) {
+            this.activeStep = -1;
+            return;
+        }
+        if (newValue < 0) {
+            return;
+        } // ignore collapsed state if ever set elsewhere
+        // Emit parentContext to buttons inside the newly active step
         setTimeout(() => {
-            var _a;
-            const activeStepContainer = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.step')[newValue];
-            if (activeStepContainer) {
-                const btns = activeStepContainer.querySelectorAll('eds-button');
-                btns.forEach((btn) => {
-                    this.emitContext(btn);
-                });
-            }
+            const host = this.el.shadowRoot || this.el;
+            const activeStepContainer = host.querySelectorAll('.step')[newValue];
+            activeStepContainer === null || activeStepContainer === void 0 ? void 0 : activeStepContainer.querySelectorAll('eds-button').forEach((btn) => this.emitContext(btn));
         }, 50);
     }
+    componentWillLoad() {
+        this.handleDisableNextChange(this.disableNext);
+    }
+    componentDidLoad() {
+        if (this.type === 'linear') {
+            const host = this.el.shadowRoot || this.el;
+            const btns = host.querySelectorAll('eds-button');
+            btns === null || btns === void 0 ? void 0 : btns.forEach((btn) => this.emitContext(btn));
+        }
+    }
     emitContext(linkElement) {
         const event = new CustomEvent('parentContext', {
             detail: {
                 componentName: this.el.tagName.toLowerCase(),
                 identifier: this.activeStep
-            }
+            },
+            bubbles: true,
+            composed: true
         });
         linkElement.dispatchEvent(event);
     }
     articleClasses() {
-        return [
-            this.bg ? 'bg-inverse' : 'bg-default',
-            'border-softer effect-focus-within relative rounded-lg border-2'
-        ].join(' ');
+        return ['border-softer effect-focus-within relative rounded-lg border-2'].join(' ');
     }
-    /**
-     * Parses the steps property into an array of Step objects.
-     */
     get parsedSteps() {
         return parseData(this.steps);
     }
-    isNextDisabledForCurrent() {
-        return !!this.disableNext;
+    isStepDisabled(index) {
+        if (Array.isArray(this.disableNext)) {
+            return index < this.disableNext.length ? !!this.disableNext[index] : false;
+        }
+        return index === this.activeStep && !!this.disableNext;
+    }
+    isNextDisabledFor(index) {
+        return this.isStepDisabled(index);
     }
-    /** Render the semantic heading element */
     renderHeading(title, index) {
         const Tag = this.headingLevel;
         if (this.type === 'linear') {
             const isOpen = this.activeStep === index;
-            const forwardBlocked = index > this.activeStep && this.isNextDisabledForCurrent();
+            // Check if jumping to this step crosses a disabled step
+            let forwardBlocked = false;
+            if (index > this.activeStep) {
+                for (let i = this.activeStep; i < index; i++) {
+                    if (this.isStepDisabled(i)) {
+                        forwardBlocked = true;
+                        break;
+                    }
+                }
+            }
             const onKey = (e) => {
                 if (forwardBlocked) {
                     return;
@@ -14026,16 +14429,46 @@ class EdsStepsV2 {
             };
             return (hAsync(Tag, { class: `eds-steps__title ${forwardBlocked ? 'is-disabled' : ''}`, role: "button", tabindex: forwardBlocked ? -1 : 0, "aria-disabled": forwardBlocked ? 'true' : 'false', "aria-expanded": isOpen, "aria-controls": `eds-step-panel-${index}`, onClick: () => !forwardBlocked && this.handleTitleClick(index), onKeyDown: onKey }, title));
         }
-        return hAsync(Tag, { class: "eds-steps__title" }, title);
+        return (hAsync(Tag, { class: "eds-steps__title", onClick: () => this.handleTitleClick(index) }, title));
+    }
+    /** Render horizontal indicator item */
+    renderHorizontalIndicator(step, index) {
+        const isActive = this.activeStep === index;
+        const isCompleted = this.activeStep > index;
+        let forwardBlocked = false;
+        if (index > this.activeStep) {
+            for (let i = this.activeStep; i < index; i++) {
+                if (this.isStepDisabled(i)) {
+                    forwardBlocked = true;
+                    break;
+                }
+            }
+        }
+        const onKey = (e) => {
+            if (forwardBlocked) {
+                return;
+            }
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.handleTitleClick(index);
+            }
+        };
+        return (hAsync("div", { class: `horizontal-step ${isActive ? 'is-active' : ''} ${isCompleted ? 'is-completed' : ''}`, onClick: () => !forwardBlocked && this.handleTitleClick(index), onKeyDown: onKey, role: "button", tabindex: forwardBlocked ? -1 : 0, "aria-label": `Step ${index + 1}: ${step.title}`, "aria-current": isActive ? 'step' : undefined, "aria-disabled": forwardBlocked ? 'true' : 'false' }, hAsync("div", { class: "step-indicator" }, hAsync("span", { class: "step-number" }, index + 1)), hAsync("span", { class: `text-center text-default f-ui-03 ${forwardBlocked ? 'opacity-50' : ''}` }, step.title)));
     }
     render() {
         const steps = this.parsedSteps;
-        return (hAsync("div", { key: 'b486aa34dfab4902cd6569cc2ce228104ca536cd', class: this.articleClasses() }, this.imageSrc ? (hAsync("div", { class: "w-full mb-12 rounded-t-lg overflow-hidden border-2" }, hAsync("eds-img", { src: this.imageSrc, width: this.imageWidth, "with-bg": "true", "lazy-load": "true", alt: "Step illustration" }))) : (this.message && (hAsync("div", { class: "w-full bg-[#00A595] rounded-t-lg border-2" }, hAsync("div", { class: "p-24" }, hAsync("span", { class: "text-inverse f-heading-04 " }, this.message))))), hAsync("div", { key: 'e2a928ecb67caed4885c9e364621b422249610f1', class: "pb-20 px-8" }, this.type === 'linear' ? (hAsync("div", { class: "steps" }, steps.map((step, index) => (hAsync("div", { class: index === 0 ? 'step' : 'step space-y-16', key: index }, this.renderHeading(step.title, index), this.activeStep === index && (hAsync("div", { class: "content grid gap-y-16", id: `eds-step-panel-${index}` }, hAsync("slot", { name: `step-${index}` }, hAsync("div", { class: index === steps.length - 1 ? 'f-body-02 text-lighter' : 'f-body-02 text-lighter', innerHTML: step.content })), hAsync("div", { class: "flex items-center" }, hAsync("eds-button", { label: this.backLabel, intent: "ghost", icon: "chevron-left", iconPos: "left", iconSmall: true, onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small" }), hAsync("eds-button", { label: index === steps.length - 1 ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", iconSmall: true, onClick: this.handleNext, disabled: this.disableNext, size: "small", class: "ml-8" }))))))))) : (
-        // Static mode: show all steps with their content.
-        hAsync("div", { class: "steps space-y-8" }, steps.map((step, index) => (hAsync("div", { class: "step", key: index }, this.renderHeading(step.title, index), hAsync("div", { class: "content", id: `eds-step-panel-${index}` }, hAsync("slot", { name: `step-${index}` }, hAsync("div", { class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter', innerHTML: step.content })))))))))));
+        const marginClass = this.orientation === 'horizontal' ? 'mt-64' : 'mt-32';
+        return (hAsync("div", { key: '0f9dbb87f9cd269057183ee969addd55e85b2149', class: this.articleClasses() }, this.imageSrc ? (hAsync("div", { class: "w-full mb-12 rounded-t-lg overflow-hidden border-2" }, hAsync("eds-img", { src: this.imageSrc, width: this.imageWidth, "with-bg": "true", "lazy-load": "true", alt: "Step illustration" }))) : (this.message && (hAsync("div", { class: "w-full bg-[#00A595] rounded-t-lg border-2" }, hAsync("div", { class: "p-24" }, hAsync("span", { class: "text-inverse f-heading-04" }, this.message))))), hAsync("div", { key: 'd636d36c2e95d73c23c269b1faf67870eca97c16', class: "mt-16 pb-20 px-8" }, this.type === 'linear' && this.orientation === 'horizontal' ? (hAsync("div", { class: "steps--horizontal", style: { '--step-count': steps.length.toString() } }, hAsync("div", { class: "horizontal-indicators" }, steps.map((step, index) => this.renderHorizontalIndicator(step, index))), steps.map((step, index) => {
+            const isLast = index === steps.length - 1;
+            if (this.activeStep !== index) {
+                return null;
+            }
+            return (hAsync("div", { class: "step-content", key: index, id: `eds-step-panel-${index}` }, hAsync("slot", { name: `step-${index}` }, hAsync("div", { class: "f-body-02 text-lighter", innerHTML: step.content })), hAsync("div", { class: `flex items-center justify-between ${marginClass}` }, hAsync("eds-button", { label: this.backLabel, intent: "ghost", icon: "chevron-left", iconPos: "left", iconSmall: true, onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small" }), hAsync("eds-button", { label: isLast ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", iconSmall: true, onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: "small", class: index > 0 ? 'ml-8' : null })), hAsync("slot", { name: `actions-${index}` })));
+        }))) : this.type === 'linear' ? (hAsync("div", { class: "steps" }, steps.map((step, index) => (hAsync("div", { class: index === 0 ? 'step' : 'step mt-16', key: index }, this.renderHeading(step.title, index), this.activeStep === index && (hAsync("div", { class: "content grid gap-y-16", id: `eds-step-panel-${index}` }, hAsync("slot", { name: `step-${index}` }, hAsync("div", { class: "my-16 f-body-02 text-lighter", innerHTML: step.content })), hAsync("div", { class: `flex items-center justify-between ${marginClass}` }, hAsync("eds-button", { label: this.backLabel, intent: "ghost", icon: "chevron-left", iconPos: "left", iconSmall: true, onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small" }), hAsync("eds-button", { label: index === steps.length - 1 ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", iconSmall: true, onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: "small", class: index > 0 ? 'ml-8' : null }))))))))) : (hAsync("div", { class: "steps space-y-8" }, steps.map((step, index) => (hAsync("div", { class: "step", key: index }, this.renderHeading(step.title, index), hAsync("div", { class: "content", id: `eds-step-panel-${index}` }, hAsync("div", { class: "content-body" }, hAsync("slot", { name: `step-${index}` }, hAsync("div", { class: "my-16 f-body-02 text-lighter", innerHTML: step.content }))))))))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "disableNext": ["handleDisableNextChange"],
         "activeStep": ["activeStepChanged"]
     }; }
     static get style() { return EdsStepsV2Style0; }
@@ -14045,14 +14478,14 @@ class EdsStepsV2 {
         "$members$": {
             "steps": [1],
             "type": [1],
+            "orientation": [1],
             "imageSrc": [1, "image-src"],
             "imageWidth": [2, "image-width"],
-            "bg": [4],
             "message": [1],
             "nextLabel": [1, "next-label"],
             "backLabel": [1, "back-label"],
             "finishLabel": [1, "finish-label"],
-            "disableNext": [4, "disable-next"],
+            "disableNext": [1032, "disable-next"],
             "headingLevel": [513, "heading-level"],
             "activeStep": [32]
         },
@@ -14112,11 +14545,11 @@ class EdsSwitch {
                     : this.labelOff
                 : 'Toggle switch'
             : undefined;
-        return (hAsync("div", { key: 'd73bf797be76e256e065ab8b4fbe68a44802d3f1', class: "switch-container" }, this.labelOff && (hAsync("span", { key: 'f4897e3d9948358a82bd61ea26c86e0d2eba81b5', id: `${switchId}-off`, class: "switch-label switch-label--off mr-8" }, this.labelOff)), hAsync("button", { key: 'a01753fce0fedbf8a25d2cd64c662da8e69fef95', id: switchId, tabindex: this.disabled ? '-1' : '0', type: "button", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-labelledby": labelledBy.length > 0 ? labelledBy.join(' ') : undefined, "aria-label": accessibleLabel, class: {
+        return (hAsync("div", { key: 'a339677097f16cd2dfe180f0a7de26d4963a9f17', class: "switch-container" }, this.labelOff && (hAsync("span", { key: '7db8e71c0f1668fb66f2b1ff049706b80b4683b3', id: `${switchId}-off`, class: "switch-label switch-label--off mr-8" }, this.labelOff)), hAsync("button", { key: 'ce2a8400bc42612bcb22b47ce46762348a7a7b80', id: switchId, tabindex: this.disabled ? '-1' : '0', type: "button", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-labelledby": labelledBy.length > 0 ? labelledBy.join(' ') : undefined, "aria-label": accessibleLabel, class: {
                 switch: true,
                 'switch--checked': this.checked,
                 'switch--disabled': this.disabled
-            }, onClick: this.toggleSwitch, onKeyDown: this.handleKeyDown, disabled: this.disabled }, hAsync("span", { key: 'eee315ce803b246cbe73e9d42635cbaa775febdb', class: "switch-handle" })), this.labelOn && (hAsync("span", { key: 'f1229ffea8041dea2237a032292a4465fc76e216', id: `${switchId}-on`, class: "switch-label switch-label--on ml-8" }, this.labelOn))));
+            }, onClick: this.toggleSwitch, onKeyDown: this.handleKeyDown, disabled: this.disabled }, hAsync("span", { key: 'c7bbace6e78fe2358ee4b91febec51a280305df0', class: "switch-handle" })), this.labelOn && (hAsync("span", { key: 'b4fa05fc1296a6d906abb4a7fa609d721d01248f', id: `${switchId}-on`, class: "switch-label switch-label--on ml-8" }, this.labelOn))));
     }
     get el() { return getElement(this); }
     static get style() { return EdsSwitchStyle0; }
@@ -14135,7 +14568,7 @@ class EdsSwitch {
     }; }
 }
 
-const edsTableCss = "table{text-indent:0;border-color:inherit;border-collapse:collapse;}.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}.pt-32{padding-top:2rem}.pt-40{padding-top:2.5rem}.pt-48{padding-top:3rem}.pb-28{padding-bottom:1.75rem}.pb-60{padding-bottom:3.75rem}.mt-20{margin-top:1.25rem}.mt-28{margin-top:1.75rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.overflow-x-auto{overflow-x:auto}.mt-6{margin-top:0.375rem}.p-0{padding:0rem}.p-4{padding:0.25rem}.m-0{margin:0rem}.border{border-width:1px}.border-softer{border:1px solid rgba(0, 0, 0, .1)}.even\\:bg-inverse-softer:nth-child(even){background-color:rgba(255, 255, 255, .15)}.px-8{padding-left:0.5rem;padding-right:0.5rem}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-8{padding-top:0.5rem;padding-bottom:0.5rem}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.text-center{text-align:center}.break-words{overflow-wrap:anywhere}";
+const edsTableCss = "table{text-indent:0;border-color:inherit;border-collapse:collapse;}tr.table-row-default{background-color:transparent}tr.table-row-color:nth-child(even){background-color:var(--grey-100)}tr.table-row-color:nth-child(odd){background-color:transparent}.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}.pt-32{padding-top:2rem}.pt-40{padding-top:2.5rem}.pt-48{padding-top:3rem}.pb-28{padding-bottom:1.75rem}.pb-60{padding-bottom:3.75rem}.mt-20{margin-top:1.25rem}.mt-28{margin-top:1.75rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.overflow-x-auto{overflow-x:auto}.mt-6{margin-top:0.375rem}.p-0{padding:0rem}.p-4{padding:0.25rem}.m-0{margin:0rem}.border{border-width:1px}.border-softer{border:1px solid rgba(0, 0, 0, .1)}.even\\:bg-inverse-softer:nth-child(even){background-color:rgba(255, 255, 255, .15)}.px-8{padding-left:0.5rem;padding-right:0.5rem}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-8{padding-top:0.5rem;padding-bottom:0.5rem}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.text-center{text-align:center}.break-words{overflow-wrap:anywhere}";
 var EdsTableStyle0 = edsTableCss;
 
 /**
@@ -14181,6 +14614,24 @@ class EdsTable {
             }
             (_a = actionButtons[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
         };
+        this.handleSort = (column) => {
+            if (this.sortColumn === column) {
+                // Toggle direction if same column
+                this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
+            }
+            else {
+                // New column, default to ascending
+                this.sortColumn = column;
+                this.sortDirection = 'asc';
+            }
+            sendAnalytics({
+                category: 'ui-component',
+                parentContext: null,
+                tag: `${this.hostEl.tagName.toLowerCase()}/sort`,
+                name: column,
+                action: this.sortDirection
+            });
+        };
         this.data = null;
         this.config = {};
         this.rowsPerPage = 10;
@@ -14190,6 +14641,8 @@ class EdsTable {
         this.columnSize = 'default';
         this.actions = [];
         this.actionTemplate = undefined;
+        this.sortingEnabled = false;
+        this.theme = 'color';
         this.parsedActions = [];
         this.dataColumns = [];
         this.tbData = [];
@@ -14199,6 +14652,8 @@ class EdsTable {
         this.totalRows = 0;
         this.searchQuery = '';
         this.containerWidth = 0;
+        this.sortColumn = null;
+        this.sortDirection = 'asc';
     }
     handleDataChange() {
         this.parseData();
@@ -14281,10 +14736,10 @@ class EdsTable {
         return this.tbData.filter((row) => Object.values(row).some((value) => value.toString().toLowerCase().includes(this.searchQuery.toLowerCase())));
     }
     getPaginatedRows() {
-        const filteredRows = this.getFilteredRows();
-        this.totalRows = filteredRows.length;
+        const sortedRows = this.getSortedRows();
+        this.totalRows = sortedRows.length;
         const start = (this.currentPage - 1) * this.rowsPerPage;
-        return filteredRows.slice(start, start + this.rowsPerPage);
+        return sortedRows.slice(start, start + this.rowsPerPage);
     }
     handlePageChange(newPage) {
         this.currentPage = newPage;
@@ -14364,22 +14819,52 @@ class EdsTable {
     capitalize(str) {
         return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
     }
+    getSortedRows() {
+        const filtered = this.getFilteredRows();
+        if (!this.sortColumn) {
+            return filtered;
+        }
+        return [...filtered].sort((a, b) => {
+            const aVal = a[this.sortColumn];
+            const bVal = b[this.sortColumn];
+            // Handle null/undefined
+            if (aVal == null) {
+                return 1;
+            }
+            if (bVal == null) {
+                return -1;
+            }
+            // Compare values
+            let comparison = 0;
+            if (typeof aVal === 'number' && typeof bVal === 'number') {
+                comparison = aVal - bVal;
+            }
+            else {
+                comparison = String(aVal).localeCompare(String(bVal));
+            }
+            return this.sortDirection === 'asc' ? comparison : -comparison;
+        });
+    }
     render() {
         const currentContainerWidth = this.hostWidth && this.hostWidth.trim() !== '' ? Number(this.hostWidth) : this.containerWidth || 400;
         const visibleColumnsCount = this.getVisibleColumnsCount();
         const columnWidth = visibleColumnsCount > 0 ? Math.floor((currentContainerWidth / visibleColumnsCount) * this.divisionFactor()) : 100;
         const paginatedRows = this.getPaginatedRows();
         const lastPage = Math.ceil(this.totalRows / this.rowsPerPage);
-        return (hAsync("div", { key: '0c986dec22a52676b110fad1f7f82ef792da796e' }, this.searchEnabled && (hAsync("div", { key: '855c5c3d6c2b86e75a210c0296524bc8029e37f2' }, hAsync("eds-input-field", { key: 1, icon: "search", name: "search", "aria-label": "Search", type: "text", placeholder: "Search...", onInput: (event) => this.handleSearch(event) }))), hAsync("div", { key: '62b18340bbf992dba888c2d24ff306ada8a1a985', class: "mt-20" }, hAsync("table", { key: '656dd0dd7f99611c2bd9beea4cd1f37f57da1384', class: "block overflow-x-auto mt-6 p-0" }, hAsync("thead", { key: '1278ea89f588aa52c215c32bcc03c424e4501fed' }, hAsync("tr", { key: '186e6ac48859dd9f7cbf8c4f4fb5f6bfddfd4d34', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((col) => {
+        return (hAsync("div", { key: '0601cea60a05d044a717219e6ff6385ef915defa' }, this.searchEnabled && (hAsync("div", { key: 'de1affaf192dc5e63b16d534d2f518c206ab7010' }, hAsync("eds-input-field", { key: 1, icon: "search", name: "search", "aria-label": "Search", type: "text", placeholder: "Search...", onInput: (event) => this.handleSearch(event) }))), hAsync("div", { key: '49f71b5a2481d719cb8fe0547f05a5ae83ad5541', class: "mt-20" }, hAsync("table", { key: 'b63ca6615ed681c741fb2d3ff2675f9cc061d194', class: "block overflow-x-auto mt-6 p-0" }, hAsync("thead", { key: '817b534cca3c2492b69b3816a41b54ec850847ab' }, hAsync("tr", { key: '6cb8735ac56c3fe2acc4a257815bc0d07009118c', class: `m-0 p-0 border border-softer table-row-${this.theme}` }, this.columns.map((col) => {
             var _a;
             if (col === 'actions') {
                 return (hAsync("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }));
             }
             if (!((_a = this.parsedConfig[col]) === null || _a === void 0 ? void 0 : _a.hidden)) {
-                return (hAsync("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }, this.capitalize(col)));
+                return (hAsync("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }, hAsync("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.25rem' } }, hAsync("span", null, this.capitalize(col)), this.sortingEnabled && (hAsync("eds-icon-wrapper", { icon: this.sortColumn === col
+                        ? this.sortDirection === 'asc'
+                            ? 'chevron-up'
+                            : 'chevron-down'
+                        : 'chevron-down', "aria-label": `Sort by ${col}`, onClick: () => this.handleSort(col), style: { cursor: 'pointer' } })))));
             }
             return null;
-        }))), hAsync("tbody", { key: 'b27bd372efe64469d2a5001dc6d5b464eb419217' }, paginatedRows.map((row) => (hAsync("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((col) => {
+        }))), hAsync("tbody", { key: '3c8630ed1f47720688bfcdb78c5dbfc84cb238cf' }, paginatedRows.map((row) => (hAsync("tr", { class: `m-0 p-0 border border-softer table-row-${this.theme}` }, this.columns.map((col) => {
             var _a;
             if (col === 'actions') {
                 return (hAsync("td", { class: "text-center border border-softer m-0 f-ui-02 break-words actions-cell", style: { minWidth: `${columnWidth - 4}px` } }, hAsync("div", { role: "toolbar", "aria-label": "Row actions", onKeyDown: this.onActionKeyDown, style: {
@@ -14394,7 +14879,7 @@ class EdsTable {
                 return (hAsync("td", { class: "text-center border border-softer m-0 py-8 f-ui-2 break-words", style: { minWidth: `${columnWidth - 4}px` } }, this.renderCell(row[col], col)));
             }
             return null;
-        }))))))), this.shouldEnablePagination() && (hAsync("div", { key: 'd442153f48c85c6de1a0752d1348d8814811faed', class: "mt-20" }, hAsync("eds-pagination", { key: '4c48c96eacb112002b0110e85dce0dab94350dfb', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
+        }))))))), this.shouldEnablePagination() && (hAsync("div", { key: '09faef418edc676bb2b60c2439e0652a92fe023d', class: "mt-20" }, hAsync("eds-pagination", { key: '9403d33a37505c73fe3bec652ef93f533bdb4f03', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
     }
     get hostEl() { return getElement(this); }
     static get watchers() { return {
@@ -14416,6 +14901,8 @@ class EdsTable {
             "columnSize": [1, "column-size"],
             "actions": [1],
             "actionTemplate": [16],
+            "sortingEnabled": [4, "sorting-enabled"],
+            "theme": [1],
             "parsedActions": [32],
             "dataColumns": [32],
             "tbData": [32],
@@ -14424,7 +14911,9 @@ class EdsTable {
             "parsedConfig": [32],
             "totalRows": [32],
             "searchQuery": [32],
-            "containerWidth": [32]
+            "containerWidth": [32],
+            "sortColumn": [32],
+            "sortDirection": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -14605,12 +15094,12 @@ class EdsTabs {
         }
     }
     render() {
-        return (hAsync("div", { key: 'bab7b3d6a9e6e66ab6476827ecc06a3e3c7244be', id: `${this.identifier}` }, hAsync("div", { key: 'e20639e1842936b6c1fe24b19ca7f94ccc09d18f', class: "scroller-x overflow-x-auto relative z-[1] mx-auto px-16 pt-8 lg:px-28 after:border-soft 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("nav", { key: 'e3f4e385e1bfb1f5abc75697697ab9a6a8124b6b', role: "tablist", ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
+        return (hAsync("div", { key: '36b4771f5dc68c2b2686ece5957b4a54f70d8c38', id: `${this.identifier}` }, hAsync("div", { key: '0b9cac117898a5c8d179c69aaa971c63fed5b12c', class: "scroller-x overflow-x-auto relative z-[1] mx-auto px-16 pt-8 lg:px-28 after:border-soft 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("nav", { key: '6bb2ca84bd9b12e67bb2e6055cb435c66061f547', role: "tablist", ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
             const TabComponent = 'button';
             const tabProps = this.getTabOptions(tab.active, index);
             const isActive = index === this.activeIndex;
             return (hAsync(TabComponent, Object.assign({}, tabProps, { type: "button", role: "tab", "aria-selected": tab.active ? 'true' : 'false', tabIndex: isActive ? 0 : -1, "aria-label": tab.ariaLabel || tab.label, "aria-controls": `panel-${index}`, id: `tab-${index}`, ref: (el) => this.setTabRef(el, index), onClick: () => this.handleTabClick(index, tab.label, true), onKeyDown: (e) => this.onKeyDown(e, index) }), tab.label || tab.ariaLabel));
-        }))), hAsync("div", { key: 'f958fca5abaeeba0b6fcc900b91fa1309508dc57', class: "tab-panels" }, this.parsedTabs.map((_, index) => (hAsync("div", { role: "tabpanel", id: `panel-${index}`, "aria-labelledby": `tab-${index}`, hidden: index !== this.activeIndex, tabIndex: index === this.activeIndex ? 0 : -1, class: "effect-focus" }, hAsync("slot", { name: `panel-${index}` })))))));
+        }))), hAsync("div", { key: '7b17d99c5dda91842171c941228b0a0f82d595d4', class: "tab-panels" }, this.parsedTabs.map((_, index) => (hAsync("div", { role: "tabpanel", id: `panel-${index}`, "aria-labelledby": `tab-${index}`, hidden: index !== this.activeIndex, tabIndex: index === this.activeIndex ? 0 : -1, class: "effect-focus" }, hAsync("slot", { name: `panel-${index}` })))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -14673,7 +15162,7 @@ class EdsTag {
     }
     render() {
         const classes = tagStyles({ intent: this.intent, size: this.size });
-        return hAsync("span", { key: 'a00f436391013091c78f15bc53d91b0b01d8f4bb', class: classes }, this.label);
+        return hAsync("span", { key: '0b37fdd21a8828a00daba55a7157e164e7057a88', class: classes }, this.label);
     }
     static get style() { return EdsTagStyle0; }
     static get cmpMeta() { return {
@@ -14735,7 +15224,7 @@ class EdsTimeline {
         }
     }
     render() {
-        return (hAsync("div", { key: '32a281ea95b422dce623838fb46b2baf2362618d', class: "max-w-sidebar mx-auto px-4 py-8" }, hAsync("div", { key: '8709096bd0e6826888ded5656a68e88a60229927', class: "relative" }, hAsync("div", { key: '41fab313fc2d44e63a5b83b90c24650e8d8de74e', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), hAsync("div", { key: '8b386581105a89c677fe374e8248f67bf3ec07cd', 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: 'cc0184654ced150ab0500a77d89f831530ddc52c', class: "max-w-sidebar mx-auto px-4 py-8" }, hAsync("div", { key: '693b53e776bdf110d7f21e68b9e3f8fb6f5eab4b', class: "relative" }, hAsync("div", { key: '030ef1b15f76a75292b2998cb7083da0e5f16bd4', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), hAsync("div", { key: '0811245c700b23e10a3d2b83504673aee12a8bc4', 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' }]
@@ -14909,7 +15398,7 @@ class EdsToastManager {
         this.toasts = this.toasts.filter((t) => t.id !== id);
     }
     render() {
-        return (hAsync("div", { key: '52a933209ce89505ae72ab7f300fd052d03200ed', 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: 'ac2e0d12975d88e9a22db8b92255a597e7f6ea6f', 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; }
@@ -14948,7 +15437,7 @@ class EdsTooltip {
     }
     render() {
         const positionClass = this.position === 'bottom' ? 'top-full mt-2' : 'bottom-full mb-2';
-        return (hAsync("div", { key: 'c2ae55fbf9fefb2748db770d98f12f679022a416', class: "relative w-full inline-block group" }, hAsync("slot", { key: '5151e3269cb39d3caba960eee7155a3d5171c8cd' }), hAsync("div", { key: '8956683d968d77d88133dc231975d258aca3d1d3', class: `absolute ${positionClass}
+        return (hAsync("div", { key: '1ba27ac30f67a50e39b2bfdff2b4392b4adc948a', class: "relative w-full inline-block group" }, hAsync("slot", { key: 'c84887cde7b92c3684ef61e36039d2e8c96f71f2' }), hAsync("div", { key: 'c7e475e74d977b6ab291ba8a315cdb237742a8e6', class: `absolute ${positionClass}
             rounded-xs bg-strongest text-inverse 
             f-ui-03-light pointer-events-none 
             z-10 px-4 opacity-0 transition-opacity duration-150 ease-in-out
@@ -15012,7 +15501,7 @@ class EdsTrl {
             Application: { format: 'code' },
             'Current TRL Stage': { format: 'text' }
         };
-        return (hAsync("div", { key: 'f83fab1ad31bef37b5239c67e635d26d22714e3f', class: "container mx-auto px-4 py-8" }, hAsync("eds-table", { key: '594b47098606f772f043da8171a11d5dcbb0513f', "table-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: '082770e1b722223f6adb457db7f98950df4aa8df', class: "container mx-auto px-4 py-8" }, hAsync("eds-table", { key: 'b79b7cb53e045cb9b3a640ded6a4d841579112b8', "table-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,
@@ -15077,7 +15566,7 @@ class EdsUser {
     render() {
         const user = this.parsedUser;
         const iconName = this.expanded ? 'chevron-down' : 'chevron-right';
-        return (hAsync("div", { key: '68836f7fc63986d1ef1e5d1775258358db3418c6', class: "block" }, hAsync("div", { key: '3b5be3d2d700ce3e1a800c33adde9b55bb07fda0', class: "flex items-center" }, hAsync("eds-dropdown", { key: 'f3f97f19aac315031f428d190f1e143429bcd860', ref: (el) => (this.dropdownEl = el), label: this.dropdownLabel, intent: this.intent, "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: iconName, class: "text-default", onDropdown: this.handleDropdown }, hAsync("div", { key: '6a6bccaa4e8b0e68460ac50e3edc8d9fc3612e00', class: "min-w-[280px] p-8" }, hAsync("div", { key: '97a9b4d9c0e0873162103461a542cf401be06c2f', class: "flex gap-x-16", "data-dropdown-no-close": true }, hAsync("eds-avatar", { key: 'f89cee9f0ad6549e60ebb3ade437d1dd0c2e6eb6', "first-name": user.given_name, "last-name": user.family_name, initials: this.initials, color: "black" }), hAsync("div", { key: 'b9fc649a35280ecebe57955b85844f3a78c4db04', class: "max-w-full" }, user.name && hAsync("p", { key: 'b2914fca3ddabc4d12fa2c6cee83a98505fd110a', class: "f-ui-01 text-default w-full text-ellipsis" }, user.name), user.preferred_username && hAsync("p", { key: '68ec348104e36b6fbf9c5fc47e254f3cfc4ca85b', class: "f-ui-03-light text-light mt-4" }, user.preferred_username), user.email && hAsync("p", { key: '3b7720aaa30597a49acf61b6c3ff0c1f1cc3bfd8', class: "f-ui-03-light text-light mt-4" }, user.email))), hAsync("div", { key: '28cdba1fb361b84e9cb0a7ce904ec39cf13d022e', class: "text-default flex w-full flex-col gap-y-8" }, hAsync("slot", { key: 'c1cddbb24c72749c4ea07e2e0311da61af6e9886' })))))));
+        return (hAsync("div", { key: '1c4017bd33c81ad29385e164dc8611cfac58eca0', class: "block" }, hAsync("div", { key: 'b692ce5a4b6b424c7e109589bdff5617d4e3b33c', class: "flex items-center" }, hAsync("eds-dropdown", { key: '0df9e3b3c5212433ec88da84edd746a1dce8c763', ref: (el) => (this.dropdownEl = el), label: this.dropdownLabel, intent: this.intent, "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: iconName, class: "text-default", onDropdown: this.handleDropdown }, hAsync("div", { key: 'ef25176f1fc1796dde0b1d56264617d067d06adb', class: "min-w-[280px] p-8" }, hAsync("div", { key: '539532b05094ad47281f7d03c7900b93162e175a', class: "flex gap-x-16", "data-dropdown-no-close": true }, hAsync("eds-avatar", { key: 'ff51082744e2d32e5bc57069ccc99a3214ac3c03', "first-name": user.given_name, "last-name": user.family_name, initials: this.initials, color: "black" }), hAsync("div", { key: '1850d3ad72889a446fb8f5f29cf96d7434bc8c81', class: "max-w-full" }, user.name && hAsync("p", { key: '29a458e82be47f3b4ce801e289253158b6f7372b', class: "f-ui-01 text-default w-full text-ellipsis" }, user.name), user.preferred_username && hAsync("p", { key: 'fbb49fa957c32bd90b15dd71691b975c920049bb', class: "f-ui-03-light text-light mt-4" }, user.preferred_username), user.email && hAsync("p", { key: 'e634ceb7b74062a19f466abb1f50266370a82747', class: "f-ui-03-light text-light mt-4" }, user.email))), hAsync("div", { key: '3a8a04862973d0e28d7c62d84a6928953fd08df3', class: "text-default flex w-full flex-col gap-y-8" }, hAsync("slot", { key: '50627b6ed0b735079d60b66092181334cd1a954a' })))))));
     }
     get hostEl() { return getElement(this); }
     static get style() { return EdsUserStyle0; }
@@ -15133,7 +15622,7 @@ class GradientPrimaryPalette {
         ];
     }
     render() {
-        return (hAsync("ul", { key: 'd32c7b63fb32b92f89a9220e5cd5ff8164865913', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16", style: {
+        return (hAsync("ul", { key: '6858be14a27601106581efe8fd9221daf4f0ddfc', class: "not-prose 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))))))));
     }
@@ -15206,19 +15695,19 @@ class GradientSecondaryPalette {
         ];
     }
     render() {
-        return (hAsync("div", { key: 'f38bc0f352adeca4bb3c12952d8c7e2431d93874' }, hAsync("ul", { key: '9e00842d3198dace6812197b1ced7b776e3808f4', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: 'a1f77c93d7ff5de2ab38018278e47530951076cc', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: '6abb51d7e4cbe6f48610009e65876cd41d8f435d', class: "effect-height flex items-center justify-between p-16", style: {
+        return (hAsync("div", { key: '568e55cca12f97a4afc1a5acffd8ffd64938da44' }, hAsync("ul", { key: '16f19b9d89e83015db81290acfddb3ffc0368aa2', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: 'd1b205d58e171e2a194685888a919d7178291118', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: '3be3ecf27999f572951253260802099e49c60392', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[0].background
-            } }, hAsync("div", { key: 'e7399fcf955836f47e90e1ab822abf2ec0c0ceae', class: "grid" }, hAsync("span", { key: 'fb245a27f7189381ee8103c21c61d0823c12b4c3', class: "f-body-02" }, this.colors[0].rgb), hAsync("span", { key: '6dc6be165b89266e9b45153dc411ab5692e37ebe', class: "f-body-02 w-full" }, this.colors[0].cmyk), hAsync("eds-code-block", { key: '196331f3cd83f67e3fbceddc669c0b4c10ad26d3', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: 'a3547fa7c138e87fa637ef7341dde49595a213e2', class: "grid" }, hAsync("span", { key: '73eee49a4fe2e3fe657dfb5a90b3f8cdd224eff2', class: "f-body-02" }, this.colors[0].pantoneC), hAsync("span", { key: '553c7eb15580455f77b8165bd8a0c8b397d46a4e', class: "f-body-02" }, this.colors[0].pantoneU))), hAsync("div", { key: '1e1c3d2620ef2dac2cd1f7bea0fa99b01c6afcac', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, hAsync("div", { key: '931046b9a1b98bcb147f3d65f1278aa0104b7620', class: "grid" }, hAsync("span", { key: '15341ab5e4937589bd6495e88af46f52b66c13f6', class: "f-body-02" }, this.colors[0].rgb), hAsync("span", { key: 'f73ee08c5e15162f757c1f20084c23dc4cd4fa4f', class: "f-body-02 w-full" }, this.colors[0].cmyk), hAsync("eds-code-block", { key: '414005a29611c2abf4adb9e1429ba46ed946e17c', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: 'ea676e150c48d8b6f92d664955e435445c00b290', class: "grid" }, hAsync("span", { key: '1b379dba41b32ebf0e79feee6c73646686976123', class: "f-body-02" }, this.colors[0].pantoneC), hAsync("span", { key: 'b327219cfb31f7f6cc2ef1bfbba30acb676f1df8', class: "f-body-02" }, this.colors[0].pantoneU))), hAsync("div", { key: 'b8192f45ddef48a5adc24b9dbd023ab39212b9b7', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[1].background
-            } }, hAsync("div", { key: '1679cca6a6f80765ac163e076b26925065479ad8', class: "grid" }, hAsync("span", { key: '948c1931b138ccc0f8da013735cec94a2b8de513', class: "f-body-02" }, this.colors[1].rgb), hAsync("span", { key: '5b7c535631725e8e72b309ce6686bad8b1b384f3', class: "f-body-02 w-full" }, this.colors[1].cmyk), hAsync("eds-code-block", { key: 'ac2bb8a8ebf23134ea273d99dfb35ae5c849b071', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '3ce37f99d9dcc8e049553e9029c8f79bedcab049', class: "grid" }, hAsync("span", { key: 'a1c80f90ec26b79cce11e08a723aec38ba14eeec', class: "f-body-02" }, this.colors[1].pantoneC), hAsync("span", { key: '6828dc88ff57a288317fd36c5ae798615c41e045', class: "f-body-02" }, this.colors[1].pantoneU))))), hAsync("eds-block-break", { key: '7b9f28a342ee184e4201e9b2c1a510be7cccdb79' }), hAsync("ul", { key: '8378f6a199ad85a7a4d0c116f1e18dac51f7f76b', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: 'df24c01a7e221fec7eebe08deb1905b2fd211215', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: 'f0202fc57ba9e6efbab92274144ac109fced963f', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, hAsync("div", { key: '945802383c8208d374156a239bd902e55e54993b', class: "grid" }, hAsync("span", { key: 'dc9b6be317846769a1e8365c0a3a2c974ccfa23b', class: "f-body-02" }, this.colors[1].rgb), hAsync("span", { key: 'bbff2c3bf5769945f07db0813c21d7a14d8495b6', class: "f-body-02 w-full" }, this.colors[1].cmyk), hAsync("eds-code-block", { key: '93d9b9d19f789a9731ed444c74bada150295ce28', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '8b87555408c3539afe4bd90c19f3d2034cc57d54', class: "grid" }, hAsync("span", { key: '2d5b21465eeb219886486f77f2f72351c5f054aa', class: "f-body-02" }, this.colors[1].pantoneC), hAsync("span", { key: 'b16aa8a075b2a7a3676b7f193ba4fa3185e72f49', class: "f-body-02" }, this.colors[1].pantoneU))))), hAsync("eds-block-break", { key: '3878257fda9acf2175bc8a152c62b09ec5c4924f' }), hAsync("ul", { key: '8b98d84de8eab1fdf31b21ec30aef8af95f82f4d', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: '6eec8f2913b8805929a6931856be3fea0b665fdd', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: 'fdc4febd09538cc9d2e0d5efee8394d680859aef', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[2].background
-            } }, hAsync("div", { key: '49111de3251d10ae344587612cff95ac2c61bbfc', class: "grid" }, hAsync("span", { key: 'a4f8b4d521204cf2e9ed34fba25105a31bcf3a2a', class: "f-body-02" }, this.colors[2].rgb), hAsync("span", { key: '577de0d99f7f5e052ca9528ba5543070439ec1c1', class: "f-body-02 w-full" }, this.colors[2].cmyk), hAsync("eds-code-block", { key: 'b98a82856c805c3bd56d5e8c581c09c640e146a1', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '1c53a8f62d1facc76863611d640938469e6647ce', class: "grid" }, hAsync("span", { key: 'e8e4bdb60c34bc9af133195192afd698ab7ae98e', class: "f-body-02" }, this.colors[2].pantoneC), hAsync("span", { key: '7d23875dce9d05f4deca3518006aac4b4baff061', class: "f-body-02" }, this.colors[2].pantoneU))), hAsync("div", { key: '84836d849380828bac1a05b3b1dd3f89a0f063da', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, hAsync("div", { key: '05e44f954e17e71e93983544efb08fb3f8415efb', class: "grid" }, hAsync("span", { key: 'ff3dac59c5d99e3c3a0bea5454771a46546699dc', class: "f-body-02" }, this.colors[2].rgb), hAsync("span", { key: '629424b91fe69ba2348995ea321b5de71b9bb0e1', class: "f-body-02 w-full" }, this.colors[2].cmyk), hAsync("eds-code-block", { key: '3cadcf4a4d666bfea773aeaf797dcebe0224e9c7', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: 'a725f4f13d4c944a18c3158f735d8dd172e35128', class: "grid" }, hAsync("span", { key: '02c30563e47078f08752ab718e923dacfca8cf6b', class: "f-body-02" }, this.colors[2].pantoneC), hAsync("span", { key: '460cfb91e2f9bf5c9f557b844c0bd1d7e904c9d2', class: "f-body-02" }, this.colors[2].pantoneU))), hAsync("div", { key: '14c4755af95cb41e5149db0de90a0f0aef429325', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[3].background
-            } }, hAsync("div", { key: '0034acff755db241107d6bdf205f15b048ef2073', class: "grid" }, hAsync("span", { key: '59c0066f512154c4c8dc75e929d5f84008bf08c7', class: "f-body-02" }, this.colors[3].rgb), hAsync("span", { key: '83f2adc0b2adabc37b53859232b75f1b3c957051', class: "f-body-02 w-full" }, this.colors[3].cmyk), hAsync("eds-code-block", { key: 'dc45ae65d0b116dcd25a0da752034f5527421a82', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '3df3bda4c749e858cd9e484906677bbd99fa67c5', class: "grid" }, hAsync("span", { key: '0730784062ec6c4cb548b1044031361d2cd939a1', class: "f-body-02" }, this.colors[3].pantoneC), hAsync("span", { key: '7a6ae957274e730b25727671ef43feff3af1fd63', class: "f-body-02" }, this.colors[3].pantoneU))))), hAsync("eds-block-break", { key: '6d18529316515757e95dea2820861cb5d4fdd3b7' }), hAsync("ul", { key: '8f7a04a63e9846e6e220ee0ccd89a89901b925d8', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: '32bcb0d0e33b06e5a4f9c2da67ac904d52df5959', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: '3f38bd0f5b0d750daa0c6b80493d6ff9b249ebaf', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, hAsync("div", { key: 'ef619263619ba173c62312b766cb00d6d5098123', class: "grid" }, hAsync("span", { key: 'b5585b81fbc61845e6e5cf0ed23782f904cf3d58', class: "f-body-02" }, this.colors[3].rgb), hAsync("span", { key: '346257d86c37f5058f9b4deddf9166f1522970ce', class: "f-body-02 w-full" }, this.colors[3].cmyk), hAsync("eds-code-block", { key: '59b89beef607a724b2bfed5b9bad2a78e5708b42', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: 'f8e1a2462a31e0a3901618ec76338dde5ae10943', class: "grid" }, hAsync("span", { key: '6e83c3aaae0ae9ec8df2d6eff620059256e4540f', class: "f-body-02" }, this.colors[3].pantoneC), hAsync("span", { key: '714d4e2a90966381c56671c295ec106581eeddef', class: "f-body-02" }, this.colors[3].pantoneU))))), hAsync("eds-block-break", { key: '0014a9aa45398ea35a1f80b6d2e01b4cbc0e99e0' }), hAsync("ul", { key: 'ef5896480deed0bf14c7ebc583b875e31271cff1', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: '130103977198e73dcf1e76c8b247dfd0052e66b4', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: '8f971d70daed0c51ae3794f5eeea9b8d5bbd689a', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[4].background
-            } }, hAsync("div", { key: '0171242f6197b3fb47d12e49837f28361a13c592', class: "grid" }, hAsync("span", { key: '1331a3a2234f83264efc62d4af972968247c3455', class: "f-body-02" }, this.colors[4].rgb), hAsync("span", { key: '9caaef171b78feed4f2d6a5e7a4d81ffd1a87faf', class: "f-body-02 w-full" }, this.colors[4].cmyk), hAsync("eds-code-block", { key: 'e4d152f94f03dea39e1a0a6284d448f545c5c1a1', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '173cb0da7a293350c8aa82f83fd0305b9db3bb74', class: "grid" }, hAsync("span", { key: 'fc5d2f93f3d5963c5da938f86c0147de99426b72', class: "f-body-02" }, this.colors[4].pantoneC), hAsync("span", { key: 'c679055a29a477f85829fc0d9af84b6f6dc7ca08', class: "f-body-02" }, this.colors[4].pantoneU))), hAsync("div", { key: '694abc4966e365267fe4536f891445bc36937290', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, hAsync("div", { key: '8563d07bc98d7a37b1c0eb04957420875247571e', class: "grid" }, hAsync("span", { key: 'b99f1f4d7c044625462542434c6b8941e0b4f8eb', class: "f-body-02" }, this.colors[4].rgb), hAsync("span", { key: '1d5524bcd82d295aa9bb502f04a4b3deb6816a4d', class: "f-body-02 w-full" }, this.colors[4].cmyk), hAsync("eds-code-block", { key: 'f3dec7ffb1d822eec1fbda4e189624c52b3d46b3', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '61135fbeab7e0657b589199cdf8caa39b5a97191', class: "grid" }, hAsync("span", { key: '3feae86bababfb8dd0ae4c78e342b6b40a5353d6', class: "f-body-02" }, this.colors[4].pantoneC), hAsync("span", { key: '458f2c43915ff00eff926dc39afe9a56b822df67', class: "f-body-02" }, this.colors[4].pantoneU))), hAsync("div", { key: '6fdbdbd92c843ddaa42d3cad358317ec7dc92723', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[5].background
-            } }, hAsync("div", { key: '6e51b6e4134b2ba71880b271b7dac46d57de772c', class: "grid" }, hAsync("span", { key: 'a9671b440a17417746d54cae8e7c0ee2208bbce1', class: "f-body-02" }, this.colors[5].rgb), hAsync("span", { key: '4dd3bf0d00389d1ca9cd1529d1b6bdf9acd6291b', class: "f-body-02 w-full" }, this.colors[5].cmyk), hAsync("eds-code-block", { key: 'dc8e6956da3d6c6d539c194e101f8fa88cf1f08a', code: this.colors[5].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '1cd9760de92ebbd5e0f1710140fe41ddad3aae29', class: "grid" }, hAsync("span", { key: 'eec5ff4dd0b743a9b9b8640e4078c4d695dbcc15', class: "f-body-02" }, this.colors[5].pantoneC), hAsync("span", { key: '00db45cedd939950df3e4cd2540d0b80d61bd4b1', class: "f-body-02" }, this.colors[5].pantoneU)))))));
+            } }, hAsync("div", { key: '1f0f2dd84c18ab45e5db4f09cdacc4cffdd6db30', class: "grid" }, hAsync("span", { key: '3050e33955bd0c6486ac385b7d89f404fd2ffb47', class: "f-body-02" }, this.colors[5].rgb), hAsync("span", { key: 'c40759231240722eb9c93878d74f4a2028492b3a', class: "f-body-02 w-full" }, this.colors[5].cmyk), hAsync("eds-code-block", { key: '01746b746ebe1c229169f8c9d0b078bff564edbf', code: this.colors[5].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: 'c11478286125955885b8e4e650f284876af7144b', class: "grid" }, hAsync("span", { key: '013e2e01b741eaff76a5ab017304dd6f2afb91c4', class: "f-body-02" }, this.colors[5].pantoneC), hAsync("span", { key: 'ab81b5c103a1dd18b91227848fdd0ed379e92738', class: "f-body-02" }, this.colors[5].pantoneU)))))));
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -15281,11 +15770,11 @@ class GradientSupportPalette {
         ];
     }
     render() {
-        return (hAsync("ul", { key: '8eefaf781527a438aa6f0dcbbb6a7bfdffd69d38', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: '8492ff1b709fa7d20f76fd18d7e9aa2bbfee17eb', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: '3775884ad3c2b78ac178dbd003779d968022c981', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[0].background } }, hAsync("div", { key: '94d75d01276a3e4e41781550450318dac8f220e4', class: "grid" }, hAsync("span", { key: '729bda27271b7df5e7ec05eff89ff6116539d4b0', class: "f-body-02" }, this.colors[0].rgb), hAsync("span", { key: 'cb4b6bd1e3bfab381047b7375e547c662a5d50de', class: "f-body-02 w-full" }, this.colors[0].cmyk), hAsync("eds-code-block", { key: '43c5df7d9cac3753f4a3c5d81e081f76606a5797', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '98aee106b847f1321591cfbfa2d5c22d0e2b3c2f', class: "grid" }, hAsync("span", { key: 'a3789c31e43eb6887b298eb353fde2be9134dd79', class: "f-body-02" }, this.colors[0].pantoneC || 'N/A'), hAsync("span", { key: '7195d70eaf994b4d1d1eb9a2ec0b684d62289e75', class: "f-body-02" }, this.colors[0].pantoneU || 'N/A')))), hAsync("li", { key: '81654a5fb216096e9818033a2b857eb723c2d373', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: 'd7b5ff16686894d0b06d2a291f6e7ababd5bfb02', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[1].background } }, hAsync("div", { key: 'fdbd11809337e535e819c5ce18d7427ae31ee70e', class: "grid" }, hAsync("span", { key: 'f108c9afa0fa02356395792bd7dd4a8a4c872d02', class: "f-body-02" }, this.colors[1].rgb), hAsync("span", { key: '1e359cd78d80db5040c4cdff4dea30dd9387cfb2', class: "f-body-02 w-full" }, this.colors[1].cmyk), hAsync("eds-code-block", { key: '1969dd093129596136b67cb972bece4e1d295fca', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '6858e8847dc5ce5baf79874a207f02953f84651e', class: "grid" }, hAsync("span", { key: '9eb2a2cafb5f2be23142752d2a48b35d0b8ab0c9', class: "f-body-02" }, this.colors[1].pantoneC || 'N/A'), hAsync("span", { key: 'cc0b17b803f00030b5a6d5dd0070c62031e21125', class: "f-body-02" }, this.colors[1].pantoneU || 'N/A')))), hAsync("li", { key: '1e58c33fe358f33c30f8935f9205ef9c3008f907', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: '2fc8ba7c13678d30002f07eea50f14ae1138d2ee', class: "effect-height flex items-center justify-between p-16", style: {
+        return (hAsync("ul", { key: '8f8703b8b6ef19574984d630d23f4a078e2683c1', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: '6981ecea14309c747455aff6dff44c807391fb22', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: '23dc2b606d633779313a98cde5df750a21c50267', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[0].background } }, hAsync("div", { key: '3649c7d9a2c815cc6ab1f414f062321f29a00701', class: "grid" }, hAsync("span", { key: '732dfac36b9bb5d9df0dfe96bfd4fb36c5288d2e', class: "f-body-02" }, this.colors[0].rgb), hAsync("span", { key: 'f0505ec5aaff33b24b19db784b3b16b9f73f18db', class: "f-body-02 w-full" }, this.colors[0].cmyk), hAsync("eds-code-block", { key: 'ca7457b315b438bf41a7f0b1dfd2205d493e1c06', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: 'd29ebbce1ea5dbf25888388bbc3cd73416642c94', class: "grid" }, hAsync("span", { key: '8e503b62bc19087efe3291f2454eec4b00b18a4a', class: "f-body-02" }, this.colors[0].pantoneC || 'N/A'), hAsync("span", { key: '5a12462534602160bce47b9c9f397557f8f1057d', class: "f-body-02" }, this.colors[0].pantoneU || 'N/A')))), hAsync("li", { key: '491e060c9201186f987ae4f075eee0efca38b6bc', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: 'e2084e7d7cfce5a784efbcdaf0c597b749ecc1d0', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[1].background } }, hAsync("div", { key: '633ced7174a5242a3dff2d51d53add5a20bcbf0a', class: "grid" }, hAsync("span", { key: 'a0000924f7a9614b4dd8651880b51925f0868487', class: "f-body-02" }, this.colors[1].rgb), hAsync("span", { key: '6007da47921d8ae881156f9c57af43a839e71743', class: "f-body-02 w-full" }, this.colors[1].cmyk), hAsync("eds-code-block", { key: '4aa67182a26f57bbeb9dd251db1cbbe0ba1919fe', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '963ac8d736c7b54366d2e2798e77bc04ac01d539', class: "grid" }, hAsync("span", { key: 'd574f8c3b02fdcd9bca10d186916b848b275ae85', class: "f-body-02" }, this.colors[1].pantoneC || 'N/A'), hAsync("span", { key: '97b5290bd127179160eb6fc8b76914cb620b733c', class: "f-body-02" }, this.colors[1].pantoneU || 'N/A')))), hAsync("li", { key: 'f5f7ff4bdad90dff2506112c812fe4c466539f7f', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: '8517f8e52dbb41ece0da2019d072f7e73fc8d2a0', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[2].background
-            } }, hAsync("div", { key: '18c781274b5f5054b454c00a34b45cdda4848826', class: "grid" }, hAsync("span", { key: '28ef2ea60735401f0234cea519d9ecff8c4e2694', class: "f-body-02" }, this.colors[2].rgb), hAsync("span", { key: '2da6879adfc3b5f4992d0b107e40cf02db7a25c1', class: "f-body-02 w-full" }, this.colors[2].cmyk), hAsync("eds-code-block", { key: 'c442dcf09f129891355a8a42b742c10333338e8b', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '9dffa371f8a1c3002c35634eb2fb487011c71f90', class: "grid" }, hAsync("span", { key: '65c50e09e5275ebf7d159228b9cbc07602667ba6', class: "f-body-02" }, this.colors[2].pantoneC), hAsync("span", { key: '7bb7a1a6a1988b2b65783ed792085e257703466b', class: "f-body-02" }, this.colors[2].pantoneU))), hAsync("div", { key: 'cc69e3020f50b302b1e4f3d6b37477fb868f7906', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, hAsync("div", { key: '08db76c840f25159be21cf66f8ab1a5e7c0ec206', class: "grid" }, hAsync("span", { key: 'b46181d8eaa69635063b39efeab603d6961428cc', class: "f-body-02" }, this.colors[2].rgb), hAsync("span", { key: 'a91102f446f351b6be7d27051b947bf72a394606', class: "f-body-02 w-full" }, this.colors[2].cmyk), hAsync("eds-code-block", { key: '98d406eaa5d641640ca5eb95271fc400282c6f69', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: 'a4cf89fe913982b3c296dc745323630518b9834f', class: "grid" }, hAsync("span", { key: 'ea5a30092e75135670580b40263314a1e16fb725', class: "f-body-02" }, this.colors[2].pantoneC), hAsync("span", { key: '0a4fe2b93027193d508f593432c7c2589ceedba9', class: "f-body-02" }, this.colors[2].pantoneU))), hAsync("div", { key: '117711ee44837fe7545490304e714e4e433c608b', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[3].background
-            } }, hAsync("div", { key: 'c59d2d743b0fb9fe5796407df80a81be410be47d', class: "grid" }, hAsync("span", { key: 'bcf7f280d8e1a74dfe157a1c996a89cebcb42d40', class: "f-body-02" }, this.colors[3].rgb), hAsync("span", { key: 'dd7beff9e6336784ba7cb77692f6ac4ea42b8204', class: "f-body-02 w-full" }, this.colors[3].cmyk), hAsync("eds-code-block", { key: '4bafc48fddad31a1c2a4e08cd0148c6df8f332ae', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: 'c1fe6efeec78fed5be26568e0ebea3b56d16f070', class: "grid" }, hAsync("span", { key: '930e80dbed784ddf4364be16649624118541e570', class: "f-body-02" }, this.colors[3].pantoneC), hAsync("span", { key: '8b7357d66a1b47347df67abcda6107572cb019f9', class: "f-body-02" }, this.colors[3].pantoneU)))), hAsync("li", { key: 'dc86699c8029642eb73c4679a49d5ff844f2924c', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: 'dbfa8b4899292fec628dc410d70e0c306d0f378c', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[4].background } }, hAsync("div", { key: '2e3c528ed9efc681a09858e85230f5fdd36cf845', class: "grid" }, hAsync("span", { key: '4b607cdc825ba567d86f3536ec7bb1148e09d854', class: "f-body-02" }, this.colors[4].rgb), hAsync("span", { key: 'dda453cb7a8ebb420896e460802f7d917916ccd4', class: "f-body-02 w-full" }, this.colors[4].cmyk), hAsync("eds-code-block", { key: '8ae119f9f823401ebcf3020069e614e991052529', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '1ac0ea0d52a00a7f8b45206bdd3d647ba221e429', class: "grid" }, hAsync("span", { key: '58c93b7dacd8a2766a8cb5d23c536a065ca64b22', class: "f-body-02" }, this.colors[4].pantoneC || 'N/A'), hAsync("span", { key: '70359540a3662ba14dbd8c08e4033d5bcd4c1a0d', class: "f-body-02" }, this.colors[4].pantoneU || 'N/A'))))));
+            } }, hAsync("div", { key: '49227a94ee6c63902c24ae6e1ce598721f2179e7', class: "grid" }, hAsync("span", { key: '25c2e7c420bf7501c91fb810dcc15b8fabe75211', class: "f-body-02" }, this.colors[3].rgb), hAsync("span", { key: '0a7918f45e4315630fdd51701fd502930db1d62d', class: "f-body-02 w-full" }, this.colors[3].cmyk), hAsync("eds-code-block", { key: '93fd3a9ce6103b162559697d43bd6c79134bd12e', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '9b8af5c7b8c039647035c2252cb9febddf1c12d8', class: "grid" }, hAsync("span", { key: 'c50c154e8587bb41f1c80b61869103d12339308f', class: "f-body-02" }, this.colors[3].pantoneC), hAsync("span", { key: '567798f8d597a9fe26123dd489443e6c752f0b38', class: "f-body-02" }, this.colors[3].pantoneU)))), hAsync("li", { key: '4297335389feff02c051beea3bbfee33677f61ac', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: '0a5cda329ffc92c33e323ded6c74a2f3b6309797', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[4].background } }, hAsync("div", { key: '02babf093dea42599bdd40ae789b795714b638a2', class: "grid" }, hAsync("span", { key: 'a5c2e49f307c005c29b6c3c0d5c37604a20b38d7', class: "f-body-02" }, this.colors[4].rgb), hAsync("span", { key: 'e9281ee3b7c23920e165f90796772c5057f0e591', class: "f-body-02 w-full" }, this.colors[4].cmyk), hAsync("eds-code-block", { key: '0144a15a5f4276c6d686dd7ea2893ead295d81ad', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '84e6de06e4c31803fa99ef2113866e947631be02', class: "grid" }, hAsync("span", { key: '1a21ce9476d86e83c3a61c591d015d917f34bad2', class: "f-body-02" }, this.colors[4].pantoneC || 'N/A'), hAsync("span", { key: 'c81bd5ea778d4694847bcbd0f23c320e5acc9167', class: "f-body-02" }, this.colors[4].pantoneU || 'N/A'))))));
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -15339,7 +15828,7 @@ class IncorrectUseOfColors {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync("div", { key: '9822fa84b1af42bc1f1eb31bae9b60736f27c692', class: "container" }, hAsync("div", { key: 'c67d9626f5ceba5fcde0cb279fb9d15c73166cfb', class: "mb-8" }, hAsync("eds-alert", { key: '898d449b311306781b323968edb0c2d7e03b0d32', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" })), hAsync("div", { key: '2409916ecc2de685042d1f93f02d656270457a19', class: "flex" }, hAsync("div", { key: '305965230c45b879c68004ca985f8d6e9b4482ab', class: "w-full" }, hAsync("ul", { key: 'a66a5a76d3d1d7167b0655e7a1af9310655b9881', class: "not-prose 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: 'e962b2b3bff48395983243ac2cf877d03ced85b6', class: "w-full" }, hAsync("ul", { key: '38a2b41471334181fc3e70dd7eaf10b957bdaada', class: "not-prose 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: 'dc96e5e7e26b90d55edf211a12cca96331fd50ee', class: "container" }, hAsync("div", { key: '7168395a53d0d1ccb01ea8850dc78b9bafbc80db', class: "mb-8" }, hAsync("eds-alert", { key: '66969d5478be8b0e07dc96e62aac4273fe23927c', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" })), hAsync("div", { key: '1b31ee746e23288fc37c17e71bc9c5a4d9333a0a', class: "flex" }, hAsync("div", { key: 'f04c1b2349c82720f7e3d9a29c2aaf0ff9d73af0', class: "w-full" }, hAsync("ul", { key: '2ba63701fdde544e5c510e03676d1b1c74061931', class: "not-prose 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: '7642247ada8ff3201e3a1273a20cb37860a1581d', class: "w-full" }, hAsync("ul", { key: 'ef03781a8ed2067adc0b8cb65ba9268ba0920f04', class: "not-prose 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,
@@ -15362,7 +15851,7 @@ class LogoSpace {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync("div", { key: 'b07b6c2b9e042c3c330de470cf2e792285362a0f', class: "container" }, hAsync("ul", { key: '40cb4cca1a4b42026becc95a46a380e23ed77723', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: 'aabdf6b8bf59cd755976ae99b79dca074e904c71', class: "grid-col-span-6 xxl:grid-col-span-3 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("div", { key: '4f3b6da2c7f238b814c8a8537d6246215e935a26', class: "logo-container mx-auto w-[300px]", innerHTML: vLogoMargins })), hAsync("li", { key: 'b8ee9f87dc5140b964f20600cad7ec65dc6c9837', class: "grid-col-span-6 xxl:grid-col-span-3 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("div", { key: 'ac4e8c0cdd8f2f206f9ead55806b32425279c8ee', class: "text-center mt-16" }, hAsync("p", { key: '0db3cdd9c348fa3855f995363fc3cd872b6da2c4', class: "f-body-01" }, "To ensure legibility, follow these minimum size guidelines:"), hAsync("eds-table", { key: '9bd39257f807324aa45013009ebbe08c1a8b2ee7', data: '[\n                  { "Media": "Print", "Landscape": "0.75 cm", "Portrait": "1.75 cm" },\n                  { "Media": "Web", "Landscape": "29 px", "Portrait": "50 px" }\n                ]', config: '{\n                  "Media": { "format": "bold" }\n                }' }))), hAsync("li", { key: '27789915053632c4fa664363b4e2fbdd5524569c', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }))));
+        return (hAsync("div", { key: '60dcb01fe1791ae536755d50234c38fe1b8355f2', class: "container" }, hAsync("ul", { key: 'f8392d3dd6620cfe57b39a03c4f427eb201faa2a', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: 'f89baf7dfe7257402a93c06faf09d6602a169de3', class: "grid-col-span-6 xxl:grid-col-span-3 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("div", { key: '94ba054bcc5ada258cb95530dcc380184820cc59', class: "logo-container mx-auto w-[300px]", innerHTML: vLogoMargins })), hAsync("li", { key: '226d955d9d0a049d2a99b83a3d1223369c3a75a3', class: "grid-col-span-6 xxl:grid-col-span-3 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("div", { key: 'ebd3897ab3207f1ddebbf4d9cdbbe6a2069c9952', class: "text-center mt-16" }, hAsync("p", { key: '4e56dc98d24514717e4711204d9bad0c59ca816c', class: "f-body-01" }, "To ensure legibility, follow these minimum size guidelines:"), hAsync("eds-table", { key: 'e04e02f59c35d52d647f18a71a37657a5d7115b3', data: '[\n                  { "Media": "Print", "Landscape": "0.75 cm", "Portrait": "1.75 cm" },\n                  { "Media": "Web", "Landscape": "29 px", "Portrait": "50 px" }\n                ]', config: '{\n                  "Media": { "format": "bold" }\n                }' }))), hAsync("li", { key: 'd499f9bf757d0daa9d22fdb41e56058a1d7b3749', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }))));
     }
     static get style() { return LogoSpaceStyle0; }
     static get cmpMeta() { return {
@@ -15386,7 +15875,7 @@ class LogoVariationsHorizontal {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync("div", { key: '148d0694cc666c2048a65f035e3b423f14721a24', class: "container" }, hAsync("ul", { key: '577efdbf7af11206706768435afcf949e704c16a', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: 'e280ee9020e2750a2f3637a01cf623ccc0b94bfe', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("p", { key: 'a5be5fc2dae4b966722d0ad69510f6622882aa99', class: "f-body-01 text-center my-4" }, "#1 Coloured"), hAsync("div", { key: 'e20d0633cc5c1c6f61c8147d55b7dd228c774f99', class: "coloured" }, hAsync("eds-logo", { key: '2a5a4eea4c70fadfcaef15c5b2c498b833231603', type: "no-bg", href: "#" }))), hAsync("li", { key: '6da7cc2329e7abcccfe3d2a0f095320d33b6272e', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("p", { key: '5dcb436091288a40213ad53fff116c0a18fd8626', class: "f-body-01 text-center my-4" }, "#2 Black & White"), hAsync("div", { key: 'e0f165856fb0a693ca2a655b5f6beb8f37810905', class: "bg-default" }, hAsync("eds-logo", { key: 'ca1d9b99e93b458c9a4c59389ade43db1aedd473', type: "black", href: "#" }))), hAsync("li", { key: '8ae1f94da858d44f7efa0d7c2c4d83b8e1780bf6', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("p", { key: 'dcd75bb1f4717a6d8b34f522c25b04a976bcbdea', class: "f-body-01 text-center my-4" }, "#3 Dark"), hAsync("div", { key: '11f500da753124767502a09824007bef6586b445' }, hAsync("eds-logo", { key: '95ed147e3a5284960d5c740841620d622537cc3c', type: "color-white", href: "#" }))))));
+        return (hAsync("div", { key: '0f0c8f6752da65c793c2f7ad20a9e9a038c15f16', class: "container" }, hAsync("ul", { key: 'fb9647dcdb07fc5eec1a84c7458094add83233ba', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: '06069a4da6863f7bd714191610ce44730531c25d', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("p", { key: 'a2c24b224acb98ea80b4d43695a0cae87de8f311', class: "f-body-01 text-center my-4" }, "#1 Coloured"), hAsync("div", { key: 'a672294c291984c387fb5ddfbbf89a5209cf88d3', class: "coloured" }, hAsync("eds-logo", { key: 'f6540444fabfeb1313103ecc860c9543335bf693', type: "no-bg", href: "#" }))), hAsync("li", { key: '769c0e2d304e117ae5925a0d2d981f85cb31281f', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("p", { key: '1c4b6cb455ef32c5b94bead22b7116aec3b9233c', class: "f-body-01 text-center my-4" }, "#2 Black & White"), hAsync("div", { key: '8e3c36097fa1dd5d0fa8cdafe00daaaa035f5463', class: "bg-default" }, hAsync("eds-logo", { key: 'cdd92bd788afa9e127ad6163ce132f2e6d620c95', type: "black", href: "#" }))), hAsync("li", { key: 'e8012388b0209873684706e16306144174212b6c', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("p", { key: '49b42b62f6f769c81526add05822df44941bba5c', class: "f-body-01 text-center my-4" }, "#3 Dark"), hAsync("div", { key: '4ba6fc32175d6b6dd3f38e551eb80f4e5d1144d0' }, hAsync("eds-logo", { key: '3ebe5f6551a960873a82af20a4d415b175b7f8de', type: "color-white", href: "#" }))))));
     }
     static get style() { return LogoVariationsHorizontalStyle0; }
     static get cmpMeta() { return {
@@ -15418,7 +15907,7 @@ class LogoVariationsTabs {
         }
     }
     render() {
-        return hAsync("div", { key: '5e6042f51c956138d571256803766ef2497ca160', class: "container" }, this.renderContent());
+        return hAsync("div", { key: 'b05bf7f07b39c2119f4716da95f34372f75f6137', class: "container" }, this.renderContent());
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -15445,7 +15934,7 @@ class LogoVariationsVertical {
         this.type = undefined;
     }
     render() {
-        return (hAsync("div", { key: '33670ab1d0922b7ce5d561ae1bcb25d85cdf3ecb', class: "container" }, hAsync("ul", { key: '7b05bb7f6e1699766f6d0321762f0ef66ab3b306', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: 'f64a1ad98d1c126581283ed16b665dea3fa1d03e', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("p", { key: '41c416c593cacad33a826c76e6617bc6c6b5b9e3', class: "f-body-01 text-center my-4" }, "#1 Coloured"), hAsync("div", { key: '9bf761058eb7581b949af689a0341dc2a8b85b24', class: "mx-auto coloured w-[300px]" }, hAsync("eds-logo", { key: 'eb04b74cf4feb3054ba5b769fd7690281dbf768b', orientation: "vertical", type: "no-bg", href: "#" }))), hAsync("li", { key: '15eede1e668a9012de6ab03dde25b5e4c51605c6', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("p", { key: '8d99d4f4caf4ef224fb691fdebfd3048075db0c0', class: "f-body-01 text-center my-4" }, "#2 Black & White"), hAsync("div", { key: 'f4b55a2fc4305075270e9e4a6149be5278fe3618', class: "mx-auto bg-default w-[300px]" }, hAsync("eds-logo", { key: '38ca84d79e788b92ce2489e19f35b8ba989313f2', orientation: "vertical", type: "black", href: "#" }))), hAsync("li", { key: 'e6193b54d8b8cda2dc44bce2b983af7e7f3db0b3', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("p", { key: '2564444f18acf01edd3caa3e4df06a0a54cad60a', class: "f-body-01 text-center my-4" }, "#3 Dark"), hAsync("div", { key: '70db409bd6dfd47bb66cef38059a52a9b0556e14', class: "mx-auto w-[300px]" }, hAsync("eds-logo", { key: '567844257939403cee8d4ce76b84dfdc12df97d1', orientation: "vertical", type: "color-white", href: "#" }))))));
+        return (hAsync("div", { key: '7d88d267037ee805159ea73f27b15d2e7ec0e1b6', class: "container" }, hAsync("ul", { key: '848defdb55c164b9fb3cee0b1425acbcbfeda209', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: '9e5d7a1218da406b571ef4a8026aabfd2618846d', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("p", { key: 'ed5bc7c77061eee46c95e719aa938d1374d413c6', class: "f-body-01 text-center my-4" }, "#1 Coloured"), hAsync("div", { key: 'b508a4c0fb271a880e16a375cff36ecfe70d55a7', class: "mx-auto coloured w-[300px]" }, hAsync("eds-logo", { key: 'e92421e0d04d84ae40d36bdd1d7d20b0582da600', orientation: "vertical", type: "no-bg", href: "#" }))), hAsync("li", { key: '1a6c57792d0b9a7fd89036d963556def55a9a3cf', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("p", { key: '56b18c6f6932f92995b5e936dc271f07fdcb2896', class: "f-body-01 text-center my-4" }, "#2 Black & White"), hAsync("div", { key: '8d77de5838230e17a30d6327c71a3e93cf52c8db', class: "mx-auto bg-default w-[300px]" }, hAsync("eds-logo", { key: 'f818a1028b59b30aa2d7ddd35146e81d332f653a', orientation: "vertical", type: "black", href: "#" }))), hAsync("li", { key: '0ce7ef6e6f3e95d43a8133c12a0b2b57bfb9b67a', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("p", { key: '8a0e61ff35121c1c3e60320d4023e44e639cee72', class: "f-body-01 text-center my-4" }, "#3 Dark"), hAsync("div", { key: '412f19f119a71743bae3a824874e1a1dcafcd258', class: "mx-auto w-[300px]" }, hAsync("eds-logo", { key: 'a62f01cb47568231e90facf00ab74481e818a40b', orientation: "vertical", type: "color-white", href: "#" }))))));
     }
     static get style() { return LogoVariationsVerticalStyle0; }
     static get cmpMeta() { return {
@@ -15472,7 +15961,7 @@ class LogoWrongUsage {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync("div", { key: 'a5d22b7db9bf43fa54d7e0fe611b819e374b6f6b', class: "container" }, hAsync("ul", { key: 'a2d9ebad864822e00db5bb207caf599de80be433', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: 'ad449a11eb8e1404a47266adb9072efa0c182752', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("div", { key: '3f9ab867a20bc72e15c5403683d50b0f86c18727', class: "mx-auto no-other-bg-color logo", innerHTML: hLogoColor }), hAsync("p", { key: '8a9ebdfd97d048e046adc85f182657c065d7c5e2', class: "f-ui-02 text-center" }, "Do not use with backgrounds that make legibility difficult")), hAsync("li", { key: '621dc6459bd6934ada8cbbcb99e848464c6d7719', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("div", { key: 'be8c7b7fc30111d6bd7e7803d4a47b58ab8275f9', class: "mx-auto no-other-color logo non-brand-color", innerHTML: hLogoColor }), hAsync("p", { key: '1e458e14065bc2f064c29f03e7047578837e8dbf', class: "f-ui-02 text-center" }, "Do not apply other colors")), hAsync("li", { key: '92f588b1b08e74ae6de62037c611cd2c07c2d0f6', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("div", { key: '1a8b871c1887b96183efc5a884085cd627a5dd03', class: "mx-auto distorted logo", innerHTML: hLogoColor }), hAsync("p", { key: '2ca68cc09eac491203fec3d84b19623dfc1c0433', class: "f-ui-02 text-center" }, "Do not deform the logo")), hAsync("li", { key: 'ee43635fa2d0dff9b9a5ea76127f5a35d1863c2a', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("div", { key: '3176d2dbec423d743b8d05c64d7a21088bf830a1', class: "mx-auto effects logo", innerHTML: hLogoColor }), hAsync("p", { key: '1148d744012e92f34ac48a2b69c3fb6451e4f844', class: "f-ui-02 text-center" }, "Do not apply effects")), hAsync("li", { key: 'acde874cf0fd644ec0edc7350fc038e0ae13719d', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("div", { key: '27b2b50f017142b1e9638baf1865fd804ba9121d', class: "mx-auto rotated logo", innerHTML: hLogoColor }), hAsync("p", { key: '28dfe52d02bdb82f29947227a9a9a699aabf82ef', class: "f-ui-02 text-center" }, "Do not rotate the logo")), hAsync("li", { key: 'e754250d250603022bb031e66e7fd8e8e0f04155', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("div", { key: '042817f8f946a10372439398e4f6dd3c0fc182f6', class: "mx-auto outlined logo", innerHTML: hLogoColor }), hAsync("p", { key: 'f5136df73757f3ebd3c954f3aa5f9e47d7907c64', class: "f-ui-02 text-center" }, "Do not apply outlines")), hAsync("li", { key: '6e30b4684ebe21136ddecef9e879024ce93206ad', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("div", { key: '29ceba568f002cf04a810546ac76ed4d4a0c63fd', class: "mx-auto" }, hAsync("div", { key: '53976603b457baf9d28f4216b2ef54284467ffd7', class: "bg-accent p-16" }, hAsync("div", { key: 'bdce208801ad76f3f8fd1639ca08b3a341ccf014', class: "text-inverse", innerHTML: hLogoColor })), hAsync("p", { key: '97e656465d81823f22593dd8ec936dde966560e0', class: "f-ui-02 text-center" }, "Do not use the green background for the logo version of the logo with backgrounds with the same tones"))))));
+        return (hAsync("div", { key: '37850687dda1175073866d4898102d185ced3e2d', class: "container" }, hAsync("ul", { key: '2734a992d3ee5249c024dbb982fc452334645dff', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: '26514741d093eb98a9898df179a5308864116b2a', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("div", { key: '8162f53c61380494f776122dd5e7183dbaa5a941', class: "mx-auto no-other-bg-color logo", innerHTML: hLogoColor }), hAsync("p", { key: 'c8a6b7af377d7bd214f3fa85d0032af5d9c64b58', class: "f-ui-02 text-center" }, "Do not use with backgrounds that make legibility difficult")), hAsync("li", { key: 'c17db6db70ecaf33bf39942d18d11041d233c6e0', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("div", { key: 'c0e542cfa0cec0729dd56f4b7dd5e3e514a4c375', class: "mx-auto no-other-color logo non-brand-color", innerHTML: hLogoColor }), hAsync("p", { key: '10ee19b46078ea7fcaad394adff676f7a90d39e1', class: "f-ui-02 text-center" }, "Do not apply other colors")), hAsync("li", { key: '7e02bb8a4d1ba255a7a2323bbf7056788822301d', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("div", { key: '7901b9c28eaed72f2816cc4fa16461a64b2b876c', class: "mx-auto distorted logo", innerHTML: hLogoColor }), hAsync("p", { key: '011b641e58c216d125bf0fe0495be11c65710a13', class: "f-ui-02 text-center" }, "Do not deform the logo")), hAsync("li", { key: '4dd09cd947f29519c2c7b3f78dd98bd40a80b54f', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("div", { key: 'c19319983842106734c63c103fb04b5e5fc32e39', class: "mx-auto effects logo", innerHTML: hLogoColor }), hAsync("p", { key: '2de8694d6e8b790086a5d9e2ce8c2454ad02e1fb', class: "f-ui-02 text-center" }, "Do not apply effects")), hAsync("li", { key: '9e70df0ce29692c5f70ac4849fa0765fbf979ad8', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("div", { key: 'd0f778976c8dc89ec22174b56600aa69f15a45a2', class: "mx-auto rotated logo", innerHTML: hLogoColor }), hAsync("p", { key: 'e8d9c2bafc5eebfd2f289fee9cfb916abe77b04a', class: "f-ui-02 text-center" }, "Do not rotate the logo")), hAsync("li", { key: 'd590b661312fd6b56199ee0790a10acda0b8aadb', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("div", { key: 'cfeb7d7a4af9fc595c0d4e083ad670a170ca2885', class: "mx-auto outlined logo", innerHTML: hLogoColor }), hAsync("p", { key: '15f6ff0ba150d42f18a19973d167510ae4c95c6b', class: "f-ui-02 text-center" }, "Do not apply outlines")), hAsync("li", { key: '56c45146f541a7fb8814810a31e8b0393c976281', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, hAsync("div", { key: '1ded3e72b457a639184f4f3f0801eb62af87f536', class: "mx-auto" }, hAsync("div", { key: '67661f2f1273b925779001cb94b345771a74d726', class: "bg-accent p-16" }, hAsync("div", { key: '33d473c812643bf3fbc87170c80638566de1b0b5', class: "text-inverse", innerHTML: hLogoColor })), hAsync("p", { key: '7a5edbc5ae089dd87eef05baa755caf8e4a5bde3', class: "f-ui-02 text-center" }, "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 {
@@ -15516,7 +16005,7 @@ class SvgRepository {
             icon: { format: 'svg' },
             name: { format: 'bold' }
         };
-        return (hAsync("div", { key: '9e4eb1306b8d43f5879b2e7c0ef0019f83c0b3b5', class: "full-width" }, hAsync("eds-table", { key: '3b6349562155ffed788587d39a82d0a2fb9798bb', "table-data": JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true })));
+        return (hAsync("div", { key: '996c9a1b05d34ec171b8c58098fb3fd8e28aa81f', class: "full-width" }, hAsync("eds-table", { key: 'bc8d69bba7a6e6580ee808935fe7845194f6d38b', "table-data": JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true })));
     }
     get hostEl() { return getElement(this); }
     static get style() { return SvgRepositoryStyle0; }
@@ -15773,7 +16262,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: 'db196307702df28bf9e2f7fb0b87298bf84baabb', class: "w-full mt-28" }, Object.entries(sectionsToDisplay).map(([sectionName, sectionContent]) => 
+        return (hAsync("section", { key: '2fcc5dd08b84b47b561c6f32f49c65b90560069f', class: "w-full mt-28" }, Object.entries(sectionsToDisplay).map(([sectionName, sectionContent]) => 
         // Only render sections that exist in `colors`
         sectionContent ? this.renderSection(sectionName, sectionContent) : null)));
     }
@@ -15806,7 +16295,7 @@ class TokenRadii {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync("section", { key: 'bdd584d53625299e4faa9a28f6f259bc5587b125', class: "w-full mt-28" }, hAsync("ul", { key: '3076e4efcca5749cc07e69df70ce2658d6186ec6', class: "not-prose 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: '2afbed04fa53695bfc13275ab6d6f77d314e4d14', class: "w-full mt-28" }, hAsync("ul", { key: '87490ba0d46027993d10cdf5f5deef419cc147c1', class: "not-prose 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,
@@ -15835,7 +16324,7 @@ class TokenRatios {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync("section", { key: '83fc87fd64531611114fe47d977dc54b6af1d327', class: "w-full" }, hAsync("eds-section-core", { key: 'b0b72d4f387cd48f4905c68b9f05ac3058d359c1', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, hAsync("ul", { key: 'af5677bb15a4ffb008fd90bdfdfb1b757a36e138', 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: '4dcf52cac610208030db8af7681cfee611f02a62', class: "w-full" }, hAsync("eds-section-core", { key: 'cb571aba92bc59c7b458281258362ca91becc09b', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, hAsync("ul", { key: '734f5db424dce811f5b6508c49c9f4c9ea4f4474', 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'
@@ -15877,7 +16366,7 @@ class TokenShadows {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync("section", { key: 'a2fbc57c2153391bc53b47a263488118ca3aa01a', class: "w-full mt-28" }, hAsync("ul", { key: 'e4e2d6cbc8d1510ede2b678b24ce8b34b838888f', class: "not-prose 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: '56dcf320ff3ee79c493757a3cfe27c1f7bca33d9', class: "w-full mt-28" }, hAsync("ul", { key: '8113c23d2eaab9abd28acb618c9599d5be1262a6', class: "not-prose 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,
@@ -15897,7 +16386,7 @@ class TokenSpacing {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync("div", { key: '46cb6fe655e9f8b8688f44e2351f3992e8011b2a', class: "w-full" }, hAsync("ul", { key: '9d7205ee2e0b3b0386284dc282fcc5375c43ec26', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: 'b3e9d62bb934c1b413712b182cfdf015484db525', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: '78c8a23dcacfd216a6159da8af3809607ef29702', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: '92a2938c5bdcb38456d96077f78993c711bc789f', class: "spacing-sample m-16 bg-strong" }, hAsync("span", { key: '7738363bee7cc25863bec922f55224044af61b6e', class: "f-body-01 text-inverse" }, "Margin: 1rem / m-16")))), hAsync("li", { key: '96c1f622b7e4136cebd53862b79bbc17ad484a25', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: 'ff4357650e10f9e7a61903c3c9f6a4f4d60d8c73', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: 'cd07be06a51604f81f2868786028066f834cd87d', class: "spacing-sample ml-64 bg-strong" }, hAsync("span", { key: 'ded579013d8765c7802862b57cf2bf7ae03f1b99', class: "f-body-01 text-inverse" }, "Margin Left: 4rem / ml-64")))), hAsync("li", { key: 'a8e244c95f027993755fa567d900ff88ed08669b', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: 'e3662c064d089089ebb796aadede38bbd7ebe69d', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: 'f168cbeaec417b0eccd66ed60f2776bdffdb7bfb', class: "spacing-sample mt-32 bg-strong" }, hAsync("span", { key: '696ec848f217896ae3fc06bf07546fe735d6ccd8', class: "f-body-01 text-inverse" }, "Margin Top: 2rem / mt-32")))), hAsync("li", { key: '5e5d4a63fd7e28114a87dfa5789f5213b6c057f3', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: '14cb262cc18f340e72a922dc793244c17fa9fb05', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: '791781717dc851f2e174277c557212e7e5c15b7a', class: "spacing-sample p-32 bg-strong" }, hAsync("span", { key: 'd1df2d8f2520746e49ec9c85d8e17cf5569c4bc5', class: "f-body-01 text-inverse" }, "Padding: 2rem / p-32")))), hAsync("li", { key: '312e2c71672a05cc54cd492297a1cdcb2b11a395', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: '8cd16bfafd2345b68e50a46c08c7a8f2430ee6ef', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: '8f7e910d8fc43b596b35f3e72a48646e9550e8ba', class: "spacing-sample pt-32 bg-strong" }, hAsync("span", { key: '509c712085a239a435fc11f8ea7a6c9c788be60c', class: "f-body-01 text-inverse" }, "Padding Top: 2rem / pt-32")))), hAsync("li", { key: 'b99c86cd7dd23e7c091dd2c70ec42133d9d2e2ef', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: '0e61fb5d7bf779eddc16c9627d6ca0ff6cf702e1', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: 'e65eb20ca88e563ae43eb0c208feacf7e310870f', class: "spacing-sample pl-32 bg-strong" }, hAsync("span", { key: '2a40e6977caccb37173f60de613c1a72b02f6d3e', class: "f-body-01 text-inverse" }, "Padding Left: 2rem / pl-32")))))));
+        return (hAsync("div", { key: '45442561f72445e84c257ebc9d30f2147303427a', class: "w-full" }, hAsync("ul", { key: 'cca0cba4260ddebb2b0f1e39a9cc96d067d3fa73', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: '8c38c0e0802683d9ba2cb38dff013aa02650bbe0', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: '406aac1f24a9a812b7405b5e323e3cb73574fb79', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: 'ec7f90ce92020a91b57e28545ede5d782d4a7dcc', class: "spacing-sample m-16 bg-strong" }, hAsync("span", { key: 'e84d0c8ccc0c6be14ca41bceece9cc63a8137dfb', class: "f-body-01 text-inverse" }, "Margin: 1rem / m-16")))), hAsync("li", { key: 'dce507afa0eac9ddd430d8b2034b943e844a9b32', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: 'cc986ee89d249ac351c6ed81650668a8ba8ab139', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: '1778c2032e322a0cde34987e5ecaaeec38933892', class: "spacing-sample ml-64 bg-strong" }, hAsync("span", { key: '8ee98a9847db2baf69adf1e5919ecefa86a1dea8', class: "f-body-01 text-inverse" }, "Margin Left: 4rem / ml-64")))), hAsync("li", { key: '589485906ebebf8fdc348e995e6aae0dcd4124fd', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: 'b94fe2cd4f93f7e52fc82423d728f5ffd3cb7dd1', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: '5c6ed8a3c4573eb4f7644e18a4e6c10cab958e2a', class: "spacing-sample mt-32 bg-strong" }, hAsync("span", { key: 'bec15bc9092c36295bf012f82fd34e8eee5954cf', class: "f-body-01 text-inverse" }, "Margin Top: 2rem / mt-32")))), hAsync("li", { key: 'e9568891252c4597431f117f0f8c9136d30c3658', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: '1fac252cd3bfd2cb1f9aa3b419e04f570f57f4e8', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: 'd59e7e5f180ab164837c5b94cf3f61a7084a6385', class: "spacing-sample p-32 bg-strong" }, hAsync("span", { key: '73dc397292ae7ff9c532b4c6c9f2a42c35945493', class: "f-body-01 text-inverse" }, "Padding: 2rem / p-32")))), hAsync("li", { key: 'af9c0e9fb5fd5c314d34f2cf6b2bdc9a63133c0d', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: '498a46c66ec671f41681f458615d69a741784761', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: '6e511b973ff53d748e99728fb1b186796437bbca', class: "spacing-sample pt-32 bg-strong" }, hAsync("span", { key: 'cae79c38937cae94930fa8750fb308ab4329de45', class: "f-body-01 text-inverse" }, "Padding Top: 2rem / pt-32")))), hAsync("li", { key: '67e0ec47dfcbaf8c51969973137c4ba87ee6337d', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: 'aa8003ce3db28c8697d57728c02797324dffbf1f', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: 'aeaa333a1e0fbfaf5d2fcc49c4e8180e94b91b03', class: "spacing-sample pl-32 bg-strong" }, hAsync("span", { key: '708a18ad1ebeb0a24fcea4d06aa42c024bb2258a', class: "f-body-01 text-inverse" }, "Padding Left: 2rem / pl-32")))))));
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -16115,7 +16604,7 @@ class TokenTypography {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync("section", { key: 'ff15f73114d16107a766fe6fe8342315cf2fa542', class: "w-full" }, hAsync("ul", { key: '22e8e89e792fee03f1957e5705fca1938771b9ac', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(typography.typesets)
+        return (hAsync("section", { key: '859a416f39219fa58601b57eab3d3ceeceb072fa', class: "w-full" }, hAsync("ul", { key: '3c29d182685328e8bf1ae8b46909426c2b2164cf', 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,
@@ -16239,6 +16728,7 @@ registerComponents([
   EdsRating,
   EdsSectionCore,
   EdsSectionHeading,
+  EdsSidebar,
   EdsSocialNetworks,
   EdsSpinner,
   EdsSplashScreen,