@ebrains/components 2.1.0 → 2.2.0

package/dist/hydrate/index.js

@@ -2334,7 +2334,7 @@ class ColorPrimaryPalette {
         ];
     }
     render() {
-        return (hAsync("ul", { key: '1de5ded5c58ad27b388c8c1af7938944cbea5096', 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: '80a1683bf07afddfc75d803735a7ebb6e175275e', 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,
@@ -2406,7 +2406,7 @@ class ColorSecondaryPalette {
         this.show = undefined;
     }
     render() {
-        return (hAsync("ul", { key: '8346b6b6278e8e0c837722d760aa314586ece7f4', 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: '8897905f5b4e2a95b0697e90bc9b0476b9110c10', 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,
@@ -2480,7 +2480,7 @@ class ColorSupportPalette {
         return 'text-default';
     }
     render() {
-        return (hAsync("ul", { key: '70965eb05a6b535bf4477e7413f7fd681c4f9768', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => {
+        return (hAsync("ul", { key: 'f0ba44197d75db8e8c35b1c774fcb9a5cf57b955', 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)))));
@@ -2525,7 +2525,7 @@ const DocsOverview = () => (hAsync("div", { class: "static-content container" },
             }
         ] }),
     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 \n  label="my bytton" \n  intent="primary">\n</eds-button>', language: "html", "copy-label": "Copy Code" }),
+    hAsync("eds-code-block", { code: '<eds-button label="my bytton" intent="primary"></eds-button>', language: "html", "copy-label": "Copy Code" }),
     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",
@@ -2543,9 +2543,7 @@ const DocsOverview = () => (hAsync("div", { class: "static-content container" },
         "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"),
-        ". If you wish, however, to load the fonts, add the tag below to the ",
-        hAsync("code", null, "head")),
-    hAsync("eds-code-block", { code: '<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@latest/styles/base/fonts.css"/>', language: "css", "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."),
@@ -2633,7 +2631,7 @@ class ComponentsSection {
         }
     }
     render() {
-        return hAsync("div", { key: 'dc274e3d76a296c8a8b18abcc4fc8741a6b9eddd', class: "container" }, this.renderContent());
+        return hAsync("div", { key: 'a5c54560de99e81caaabafc4342522602ffe35a1', class: "container" }, this.renderContent());
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -2711,7 +2709,7 @@ class CorrectUseOfColors {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync("div", { key: '6a68ca6961f662740e3981dc788b99e3d4a0d420', class: "container" }, hAsync("p", { key: '3b7f675d96b1101c2d2a623082ab1987e06754de', class: "f-body-01" }, "This guide demonstrates the correct usage of the", hAsync("eds-link", { key: 'cd4b48453834b32cf70aded20b3ebfc0109732cc', 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: '9c2d1c2d669bfef26b0ea45b113f727420d4a8c5', 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: '651d2e4bce17a2740372c1b56e772f12c906e45c', class: "flex" }, hAsync("div", { key: 'dd7b40bf2c9be26367cf4d65df0e93d5590b34e9', class: "w-full" }, hAsync("ul", { key: '62cb53477517807ad9535ca3b4474cf115f5ec03', 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: 'bb8be387a4abe956a4941db1b381d25eee435453', class: "w-full" }, hAsync("ul", { key: '60834108dbdcc6872ff5cfd1509f08ca94847854', 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: 'b3cdb208264e8d62b144dc9eb912501d3d59e35d', class: "f-body-01" }, "This guide demonstrates the correct usage of the", hAsync("eds-link", { key: '8b358d8027c603aab384028568acfba889df7f25', 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: '9712b5e1c2433f9b707469e4d9fde547ec14f7d9', 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: 'cfb5e4ada2dab6de1e4df810f9eaae0abbabd864', class: "flex" }, hAsync("div", { key: 'c83e1bcd91700f4fc9eada969f9d349b6976b835', class: "w-full" }, hAsync("ul", { key: 'c0c6a2a223013a5cb7b0545d59eaea8b66454f65', 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: '7b1ce7da35db835a2db620c0b4d97199f85070e5', class: "w-full" }, hAsync("ul", { key: '2a2f9e1d29a523d5b419ae27aa1df8f892f440e7', 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: 'c6746faf400941b4eb92eb2b520a3a817615da9d', class: "f-body-01" }, "This guide demonstrates the correct usage of the", hAsync("eds-link", { key: '89405406d127380e8b5872357cfba121a17adc3c', 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: 'a7c21a6afb1eb69e9e4cb5046f65c9a4fb193837', 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: '6097c0091a2c06e6e9e9e13db41329200a78d2d6', class: "flex" }, hAsync("div", { key: 'e8c272ad9b1066500d940044fd86a6c6dc52264f', class: "w-full" }, hAsync("ul", { key: '2902c01c108d7893d7e30e6401560034a2ed7a0f', 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: 'eca739bb09d6b509c1433069595a7e6fe9be38f2', class: "w-full" }, hAsync("ul", { key: 'cf0578a5943f54a98c6433e584397c0787ad0b4b', 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: 'ead17e9a75227b4731116506bfbf9a2c656b37a9', class: "f-body-01" }, "This guide demonstrates the correct usage of the", hAsync("eds-link", { key: 'd4e615ea5cc1c0a144ef0c2e0bd019ae9d58e3e8', 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: '52fe22c1055d44e4b6d772c0863abb72ffa49b5b', 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: '28487bfa952d4b2611ae1b03f71fdc6d5c46f2e7', class: "flex" }, hAsync("div", { key: '5cd6b4413b345bc81a69fcdfc0a723e4f1c2f438', class: "w-full" }, hAsync("ul", { key: 'c9ef7fe0eff085bb342d501f6505435220985214', 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: '65a67a40bc7cf64c19bbb1448813b1c34633cc60', class: "w-full" }, hAsync("ul", { key: '4f26bdccba86cba74da820c500f630d88b846631', 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: '2ece8530e14e2578756ea7a4b7c6de47692ea437', class: "container" }, hAsync("p", { key: '2c1de740ce1273bff57584a89d126996b89a2585', class: "f-body-01" }, "This guide demonstrates the correct usage of the", hAsync("eds-link", { key: '3ce5ec41aff1fa649799bb1b24e2c78ce3d5709e', 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: 'f067c4b8812fb79ddd8302a6e469131bb5ca2540', 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: '07216a1e8bc1c8944d7cd266fd88fd779a47af2e', class: "flex" }, hAsync("div", { key: '86594b56c689f5013ad372f61591256b96983d1e', class: "w-full" }, hAsync("ul", { key: '890766f2292df846fddf466b950ad572bd012732', 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: 'c118abd619f14e52c4987a7994603ff61976a30a', class: "w-full" }, hAsync("ul", { key: '68ff730e9d179c7c29701f82f08d0086af20d00b', 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: '183bb8155e1584b04b493934edaa437d5cf4b783', class: "f-body-01" }, "This guide demonstrates the correct usage of the", hAsync("eds-link", { key: 'a040517846fb066a35816d293ac04bc7872b3b26', 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: '386c5220437d6e6659488e7bef5b3ffe52caf4ee', 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: '0d63252310aaa25e69938f3347454094d8722071', class: "flex" }, hAsync("div", { key: 'e4afc567b16e421b47d60679f1ea35e6663d06c6', class: "w-full" }, hAsync("ul", { key: '479d5422ddc0fbc7bb7364fd004c91b6091eb23c', 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: 'cd991c92db354f80862ae1542396ea32b95c208a', class: "w-full" }, hAsync("ul", { key: 'b88178a45d9f371feab17accb2e7316ef8471380', 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: '3777953463dcb70490b0c2ce6c42dc2dcbbf1d30', class: "f-body-01" }, "This guide demonstrates the correct usage of the", hAsync("eds-link", { key: '13fe2cb15600d4c8d38cb62537222b7cc254b4ea', 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: 'e8156e3295aefedc79483b2f07abeb840980c76e', 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: 'a37aa06966858518d02108f3dc62666fdac001ad', class: "flex" }, hAsync("div", { key: '58dd02808202c7a3e1b09b9ca2dbd560e76cd336', class: "w-full" }, hAsync("ul", { key: '0db69e93ff385af493c2b4e6797108d3b20eb4ff', 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: 'f7135c48160aec5de8d7a8f550b416e54ea2c7e8', class: "w-full" }, hAsync("ul", { key: 'f0d5d0a49bcc9ea372266683b6c029b427db73bf', 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: '0a42fea17681992eec8f8c107b49cc90934730b4', class: "f-body-01" }, "This guide demonstrates the correct usage of the", hAsync("eds-link", { key: '17c3efd3b9a55bea075920137d2a58cb910115c1', 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: '60e5ed7491f4d1814973f6c9f7fbfe8b96626f9d', 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: '87b6b39208abc11441edc407a81208f4cda8bf49', class: "flex" }, hAsync("div", { key: 'a123aa0926649903d2167293788e02ebfced78b9', class: "w-full" }, hAsync("ul", { key: '2e791bb7cd1c15cccb46942e92a3fa9f6241742a', 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: '3b7effab5bce2b76d6ac73c8d2353eb0d69cb021', class: "w-full" }, hAsync("ul", { key: '2412301e05f2f711e5b48f86eff270795f363ee6', 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,
@@ -2750,7 +2748,7 @@ class DocsContent {
         }
     }
     render() {
-        return hAsync("div", { key: '86455a5f05b74d8d751a5d17ecf58c0046e8d0a3', class: "container" }, this.renderContent());
+        return hAsync("div", { key: '17148efe64117050084010b77d85de64bdfe2000', class: "container" }, this.renderContent());
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -2783,7 +2781,7 @@ class DocsPalettes {
         }
     }
     render() {
-        return hAsync("div", { key: '82b8de086298568ed7bbb4717da0f6f19ff9677c', class: "container" }, this.renderContent());
+        return hAsync("div", { key: '8ef26f3be50f9083f1430ec0c9dbf5213ac1268e', class: "container" }, this.renderContent());
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -3177,7 +3175,7 @@ class EdsAppRoot {
         this.combinedInitPromise = Promise.all([initKeycloakPromise, authStatusPromise]);
     }
     render() {
-        return (hAsync("div", { key: '36bb7790b9e035749548410ba1d54092c7a40810' }, hAsync("eds-splash-screen", { key: '7be473b1c48f0ab2549077d7619a1dbd3a1fd90c', inverse: true, initPromise: this.combinedInitPromise }), hAsync("eds-login", { key: '824affc8c670317f2c1b8a22b9fe6223a477d364', "keycloak-url": "http://localhost:8080", "keycloak-realm": "nigeor-realm", "keycloak-client-id": "stencil-app" }), hAsync("main", { key: 'c5f6f9dae8608a49d3c47139f33735236a65091c' }, this.isAuthenticated ? hAsync("h1", null, "Welcome, authenticated user!") : hAsync("h1", null, "Please log in."))));
+        return (hAsync("div", { key: '01c80f8c47f13066a4b9e6978951c2a264efbd15' }, hAsync("eds-splash-screen", { key: 'bb17fc106515c71c7d70196a933301987c69ae4b', inverse: true, initPromise: this.combinedInitPromise }), hAsync("eds-login", { key: 'dbedc547296adc5ca8c9c9ff3e7c85e33e104e92', "keycloak-url": "http://localhost:8080", "keycloak-realm": "nigeor-realm", "keycloak-client-id": "stencil-app" }), hAsync("main", { key: '24ce16d73eb316e5fdbc0a3bdd16b44cc6a740a4' }, this.isAuthenticated ? hAsync("h1", null, "Welcome, authenticated user!") : hAsync("h1", null, "Please log in."))));
     }
     static get cmpMeta() { return {
         "$flags$": 9,
@@ -6846,7 +6844,7 @@ class EdsCookiesPreference {
         }
     }
     render() {
-        return (hAsync("div", { key: '76c90b0245f703ffd80e9aa8ccc587c74b813df2' }, hAsync("eds-link", { key: '5df4bcf1261c5afb610576e72720e0689cb2eb21', 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: '030dd5db2221d5613fae0fb215cac7c20c815c2b' }, hAsync("eds-link", { key: '61d1bdf5e4299e65d980a08d25bec93b089f5330', 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 {
@@ -7071,7 +7069,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: '5e1c1694270cd7504ca8ba942b6f108af5f0572e', class: "grid inline" }, hAsync(HeadingTag, { key: 'da068fd8d6fb9e9789472c418896688e40ab9d32', class: headingClass }, this.label), hAsync("p", { key: '5f896de20bc86c5f3b6596f1d73a3ef8419d8c56', class: "f-body-01 text-light" }, this.description), hAsync("eds-rating", { key: '4909638b6f5cec693075285f99f6881541c09d29', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (hAsync("span", { key: 'cdafafb8e206ecc4bbb74edc16de94a5c26defc9', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
+        return (hAsync("div", { key: '58d69e0acbaca740439666bb9da015eaa81d160a', class: "grid inline" }, hAsync(HeadingTag, { key: 'f7b066a56636e6555ace1b4947e00c293961b4ca', class: headingClass }, this.label), hAsync("p", { key: '9bfb1903e25ba6c1d53849874f3309845c1b86dc', class: "f-body-01 text-light" }, this.description), hAsync("eds-rating", { key: '785ea01ac3d2f40bb148d52c9c18698c89424175', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (hAsync("span", { key: '16d5b1ab0ab56a5e320a878f8259dc643b533e16', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
     }
     get el() { return getElement(this); }
     static get style() { return EdsFeedbackStyle0; }
@@ -7155,13 +7153,11 @@ class EdsFooter {
      * Renders the footer component with optional sections and elements,
      * including social network links, a Horizon Europe funding acknowledgment, and
      * legal links such as "Cookies Preferences" and copyright information.
-     *
-     * @returns {JSX.Element} The rendered JSX for the footer component.
      */
     render() {
-        return (hAsync("footer", { key: '4912d7994a636d5159d863339f0119e7b6bb1bc3' }, 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: 'fb1db2c19f29a0fd1474565759992be78c404251', class: `border-softest ${this.social ? 'border-t-2' : ''} pb-28 pt-20 md:pt-28` }, hAsync("div", { key: 'c7c6c6eb43f2ccb00df8b05247120763b3f665d3', class: "container flex items-center gap-20 lg:flex-nowrap" }, hAsync("div", { key: '45a29c7988edbf99ef5573dc77c9cc9a22faa666', class: "flex items-center gap-x-12" }, hAsync("a", { key: '0fbc8e7d275a07af6da8b520bddf62f4c13aecac', 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: 'ec9e972f19d34cb13ea2022ab09ab6373d54be27', width: 54, height: 41, src: "https://www.ebrains.eu/flags/4x3/eu.svg", alt: "European Union Flag" }))), hAsync("div", { key: '0281a7e09166bbd2e02913467fe3235585d0bf0a' }, hAsync("div", { key: '97b96a7f6718cbc79ff98874e5dc90d6e1ed614e', class: "f-ui-04 text-light" }, hAsync("p", { key: '810b11a720bdcb92ce587a125ac8d026f31e9872' }, this.fundedBy), hAsync("div", { key: '2973f13cc831fa3d1131b182958fa425b94897fd', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block" }, hAsync("span", { key: 'b4cb01b0601c8117ae427fc5ab9c43c20edc6536', 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: () => {
+        return (hAsync("footer", { key: '844c47f7e5119a577b03d1bf4bb598e891d7f8c7' }, 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: '0a6f03f13cf5513758740ce6f3d3357cac413826', class: `border-softest ${this.social ? 'border-t-2' : ''} pb-28 pt-20 md:pt-28` }, hAsync("div", { key: '1751d052c529e46de47bbe09ef24621b546b1514', class: "container flex items-center gap-20 lg:flex-nowrap" }, hAsync("div", { key: '86b3c5fac384d1ae0f310d43f9a4492ce96866cf', class: "flex items-center gap-x-12" }, hAsync("a", { key: '7fed16c8a7bb7c15ea59438427987303a5a0ae14', 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: '491b2691d011359df1dc24a2408347574a893ca8', width: 54, height: 41, src: "https://www.ebrains.eu/flags/4x3/eu.svg", alt: "European Union Flag" }))), hAsync("div", { key: '50e5d853ee86066c932dd5fa3f04706d21b0d3aa' }, hAsync("div", { key: 'ba36e26f29e1aee7d7da4cd91235419b18ab813a', class: "f-ui-04 text-light" }, hAsync("p", { key: '120302d9cdad309da91bcd9f82e81f707f5f5b48' }, this.fundedBy), hAsync("div", { key: '222a27fb7f085750312654c11d03793f02e29676', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block" }, hAsync("span", { key: '56db11dc4295c21c5e9d54cbc5568c5889f2dbb9', 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: () => {
                 this.toggleCookiesConsent();
-            } })) : null))), hAsync("div", { key: 'd0b26e1911f55b44fb8a5253bab62b8db9141411', 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: '221f15b6c92e91835dcc2efa3d2247b055690a22', 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; }
@@ -7326,9 +7322,10 @@ isFieldVisible) {
                 const npsEl = findNpsElement(formEl);
                 if (npsEl && npsEl.shadowRoot) {
                     const raw = (_a = npsEl.shadowRoot
-                        .querySelector('div[role="radio"][aria-checked="true"] eds-button')) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-label');
-                    const value = raw !== null ? parseInt(raw, 10) : null;
-                    if (value === null) {
+                        .querySelector('eds-button[tabindex="0"]')) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-label');
+                    const parsed = raw !== null ? parseInt(raw, 10) : NaN;
+                    const value = Number.isInteger(parsed) && parsed >= 0 && parsed <= 10 ? parsed : NaN;
+                    if (isNaN(value)) {
                         // eslint-disable-next-line
                         if (field.required) {
                             errors[field.name] = ['This field is required.'];
@@ -7394,7 +7391,7 @@ function getFormInitData({ initData, parsedFields, currentValues
     return { updatedValues };
 }
 
-const edsFormCss = ".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}.flex{display:flex}.flex-col{flex-direction:column}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.f-body-01 b,.f-body-01 strong{font-weight:var(--f-body-01---bold-weight, bold)}.f-body-02 b,.f-body-02 strong{font-weight:var(--f-body-02---bold-weight, bold)}.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)}.rounded-sm{border-radius:8px}.border-softer{border-color:rgba(0, 0, 0, .1)}.border-2{border-width:2px}.mt-20{margin-top:1.25rem}.mt-32{margin-top:2rem}.mb-32{margin-bottom:2rem}.pt-28{padding-top:1.75rem}.pl-8{padding-left:0.5rem}.pl-16{padding-left:1rem}.border-l-2{border-left-width:2px}.gap-y-8{row-gap:0.5rem}.gap-y-16{row-gap:1rem}.gap-y-24{row-gap:1.5rem}.border-group{border-left:1px solid var(--soft-color, #ddd);padding-left:1rem}";
+const edsFormCss = ".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}.flex{display:flex}.flex-col{flex-direction:column}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-body-01 b,.f-body-01 strong{font-weight:var(--f-body-01---bold-weight, bold)}.f-body-02 b,.f-body-02 strong{font-weight:var(--f-body-02---bold-weight, bold)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.text-light{color:var(--grey-700)}.rounded-sm{border-radius:8px}.border-softer{border-color:rgba(0, 0, 0, .1)}.border-2{border-width:2px}.mt-20{margin-top:1.25rem}.mt-32{margin-top:2rem}.mb-32{margin-bottom:2rem}.pt-28{padding-top:1.75rem}.pl-8{padding-left:0.5rem}.pl-16{padding-left:1rem}.border-l-2{border-left-width:2px}.gap-y-8{row-gap:0.5rem}.gap-y-16{row-gap:1rem}.gap-y-24{row-gap:1.5rem}.border-group{border-left:1px solid var(--soft-color, #ddd);padding-left:1rem}.bg-inverse{background-color:var(--white)}.effect-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.shadow-hover{--tw-shadow:0px 0px 16px rgba(0, 0, 0, 0.2);--tw-shadow-colored:0px 0px 16px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.cursor-pointer{cursor:pointer}.effect-focus-within{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.effect-focus-within:focus-within{outline-style:solid}.relative{position:relative}.rounded-lg{border-radius:16px}.px-16{padding-left:1rem;padding-right:1rem}.pb-16{padding-bottom:1rem}.p-32{padding:2rem}";
 var EdsFormStyle0 = edsFormCss;
 
 /**
@@ -7414,13 +7411,17 @@ class EdsForm {
         registerInstance(this, hostRef);
         this.form = createEvent(this, "form", 7);
         this.name = 'eds-form';
+        this.title = undefined;
+        this.description = undefined;
         this.setFormUrl = true;
         this.formBtn = true;
         this.formBtnLabel = 'Submit';
+        this.buttonIntent = 'primary';
         this.errorMessage = 'Some fields in your form are incorrect.';
         this.fields = [];
         this.groups = [];
         this.initData = {};
+        this.formStyle = 'default';
         this.values = {};
         this.isSubmitting = false;
         this.hasError = false;
@@ -7718,10 +7719,15 @@ class EdsForm {
     }
     get groupedFields() {
         const map = {};
-        // initialize buckets for each group
+        // initialize buckets for each declared group
         this.parsedGroups.forEach((g) => (map[g.id] = []));
+        // always keep an ungrouped bucket
         map['__ungrouped'] = [];
+        // only bucket fields that are currently visible
         this.parsedFields.forEach((f) => {
+            if (!this.isFieldVisible(f)) {
+                return;
+            }
             const gid = f.groupId || '__ungrouped';
             if (!map[gid]) {
                 map[gid] = [];
@@ -7742,7 +7748,7 @@ class EdsForm {
             return (hAsync("div", { class: "form-group rating-field", key: field.name }, hAsync("div", { class: "flex justify-between" }, field && (hAsync("eds-input-label", { name: `rating-${field.name}`, label: field.label, disabled: field.disabled, required: field.required }))), hAsync("eds-rating", { id: `rating-${field.name}`, "rating-type": field.ratingType, "rating-count": field.ratingCount, "selected-rating": val, onRating: (e) => this.handleRating(e, field) }), hAsync("div", { class: "mt-6" }, hAsync("eds-input-footer", { id: `${field.name}-footer`, name: field.name, message: field.message, "error-message": (_a = this.errors[field.name]) === null || _a === void 0 ? void 0 : _a.join('<br/>'), error: !!this.errors[field.name], link: field.link }))));
         }
         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, message: field.message, "error-message": (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br/>'), error: !!this.errors[field.name], link: field.link }))));
+            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) }));
     }
@@ -7753,9 +7759,13 @@ class EdsForm {
         const hiddenFields = this.parsedFields.filter((field) => field.type === 'hidden');
         //const otherFields = this.parsedFields.filter((field) => field.type !== 'hidden');
         const buckets = this.groupedFields;
-        return (hAsync("form", { key: 'a66997f39b5be347a4d502f77bcd1da9d1a274ac', ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, hAsync("div", { key: 'f8800d2ebe64b3279234ab8ebe20e535dc822872' }, hAsync("slot", { key: 'b4194073b281dec35a79a6cc974fdf7476a67807' }), hiddenFields.map((field, index) => (hAsync("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), this.parsedGroups
+        // build the shadow/bg classes if formStyle="shadow"
+        const styleClasses = this.formStyle === 'shadow'
+            ? 'bg-inverse effect-shadow shadow-hover border-softer relative rounded-lg border-2 p-32'
+            : '';
+        return (hAsync("form", { key: 'ecf49eb81f18b444d059d3bdea4600f4ae594ea9', class: styleClasses, ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, hAsync("div", { key: '65137fb770f274431c7906326cdf49e0fee73b18', class: "flex flex-col gap-y-24" }, this.title && (hAsync("span", { key: 'e4c5b4a7883c4569a657cc234f18f995480ec8df', role: "heading", class: "f-heading-04" }, this.title)), this.description && hAsync("span", { key: '65528e4600127f1cff4ce0e5be6f8a6bddc4c864', class: "f-body-02 text-light" }, this.description), hAsync("slot", { key: '6230035a050386763723c2b60bd5e81b912762d7' })), 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: "container mt-20", 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: '2fc83ebb6b0a472f6853618602c37ee83adae9ff', class: "flex flex-col mt-20 gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f)))), this.formBtn && (hAsync("div", { key: '91b569b1a4513945f3228c374ae45b52ea17f91d', class: "mt-32" }, hAsync("eds-button", { key: '1a8feaecd5a7f292f8aeae3db900700b4f7fb8d4', intent: "primary", label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
+            .map((g) => (hAsync("div", { class: "container 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: '8116d30248f8461a842365470da9915200531028', class: "flex flex-col mt-32 gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f))), this.formBtn && (hAsync("div", { key: 'e2f1d3ca6a9f6a3b44c45e576150505c49e41dd1', class: "mt-32" }, hAsync("eds-button", { key: 'e312bf08b5db526c00497fafaa9476a225919aaf', intent: this.buttonIntent, label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -7768,13 +7778,17 @@ class EdsForm {
         "$tagName$": "eds-form",
         "$members$": {
             "name": [1],
+            "title": [1],
+            "description": [1],
             "setFormUrl": [4, "set-form-url"],
             "formBtn": [4, "form-btn"],
             "formBtnLabel": [1, "form-btn-label"],
+            "buttonIntent": [1, "button-intent"],
             "errorMessage": [1, "error-message"],
             "fields": [1],
             "groups": [1],
             "initData": [16],
+            "formStyle": [1, "form-style"],
             "values": [32],
             "isSubmitting": [32],
             "hasError": [32],
@@ -7879,7 +7893,7 @@ class EdsFrame {
         }
     }
     render() {
-        return (hAsync("div", { key: '9f5b6280292996b66fb3380678fae7748aba8cb3', class: this.articleClasses() }, hAsync("div", { key: '6e4f6e0ce9b44fe94ff4622285258747503d9034', class: "effect-height flex items-center justify-between py-8 px-12" }, hAsync("span", { key: '36bb5a7b005b4c23a7042e5cf06769efe29b07db', 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: '9d64e26eaa9e79d68e13d6a0faf67c8ca68d2097', 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: '665bc189cd905a55a9c6ac31eb2ec82853552f34', class: this.articleClasses() }, hAsync("div", { key: '6ad6183a94cd0cb26d3e5641c5e584e8afc652d7', class: "effect-height flex items-center justify-between py-8 px-12" }, hAsync("span", { key: '85bd9a7a4475ca3664cadf17ef1e729643c758f6', 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: '4799d59442cabb05f3bfea26a02db22a429266e6', 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; }
@@ -7928,11 +7942,16 @@ class EdsFullscreenMenu {
         this.isMenuOpen = false;
     }
     /**
-     * Listens for the toggleMenu event to open or close the menu.
-     * This event is emitted by the eds-header component.
+     * Listens on `body` for `toggleheadermenu` to open/close the menu.
+     * The event detail should be a boolean (`true` = open, `false` = close).
+     *
+     * @example
+     * ```js
+     * document.body.dispatchEvent(new CustomEvent('toggleheadermenu', { detail: true }));
+     * ```
      */
     handleToggleMenu(event) {
-        this.isMenuOpen = event.detail; // Set isMenuOpen based on the event payload
+        this.isMenuOpen = !!event.detail;
     }
     /** Opens the menu */
     openMenu() {
@@ -8124,7 +8143,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: '812ad4427cbb3f4b0ca9e305870c35d63487dc59', class: `flex items-center justify-between relative z-10 ${classes}` }, hAsync("div", { key: '531acdceb12ca45fea125091dee4d8a0ff39a10b', class: "mr-auto w-[200px] h-[85px]" }, hAsync("eds-logo", { key: 'bb2708b3c8eacc575117bfed404b7c9db4fd05e2', type: logoType, href: this.homeUrl })), this.parsedLinks && (hAsync("nav", { key: 'a80192d7666416c29025a1ac5812946f14feec3f', 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: 'fae258c468367837a9738bcbe2442709fdc601a0', 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: '9588ef20e19fda76115074c39d902eebead3c845' }), this.menuEnabled && (hAsync("div", { key: 'ce2e43645a1c33ca7d6495acd820ad0a93cefdf9', class: "md:hidden flex overflow-hidden px-16" }, hAsync("eds-button", { key: 'ed73c7e7a6544f60eea9dbf43379ffe4967c0dbd', "aria-label": "Menu", intent: this.headerVariant === 'default' ? 'ghost' : 'ghostInverse', icon: "menu", size: "small", onClick: () => this.handleToggleMenu() })))));
+        return (hAsync("header", { key: 'a0f5bb7d9e850e9414db804019674d6bcbc8ea0b', class: `flex items-center justify-between relative z-10 ${classes}` }, hAsync("div", { key: '678d5b1583e6fa47c0eac8ce734e8ec34cd76ad9', class: "mr-auto w-[200px] h-[85px]" }, hAsync("eds-logo", { key: '12ce9c42b266bbddfd75d2a8f0097708480a2490', type: logoType, href: this.homeUrl })), this.parsedLinks && (hAsync("nav", { key: 'eb388b679d4e268dc7fc011bc2a6406a619287c8', 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: 'c3f8689bb257166c50dd678287c8ad4f54eb315a', 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: '3f689a811a60052393a795937a908cf7d0604cc6' }), this.menuEnabled && (hAsync("div", { key: '506b953b455b72085d83bdaafc6855992075ddbe', class: "md:hidden flex overflow-hidden px-16" }, hAsync("eds-button", { key: '5b526affd813549a6142efab255d6486a5e2dd66', "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; }
@@ -10211,7 +10230,7 @@ class EdsIconBluesky {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: 'db8fea43b7888da43821083ecc706a16c949932e', class: this.class, innerHTML: bluesky });
+        return hAsync("span", { key: 'dd1f0043450c0970da5487a4c7c69859d3d97e2f', class: this.class, innerHTML: bluesky });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10409,6 +10428,29 @@ class EdsIconCopy {
     }; }
 }
 
+/**
+ * @internal
+ */
+class EdsIconDownload {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.class = '';
+    }
+    render() {
+        return hAsync("span", { key: '1fc6b1410cf98a4a992c0d98d78ec27aeac65b7c', class: this.class, innerHTML: download });
+    }
+    static get cmpMeta() { return {
+        "$flags$": 0,
+        "$tagName$": "eds-icon-download",
+        "$members$": {
+            "class": [1]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
 /**
  * @internal
  */
@@ -10418,7 +10460,7 @@ class EdsIconDraft {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '13898eb065f5a243104bc79293a5e6afcd276230', class: this.class, innerHTML: draft });
+        return hAsync("span", { key: 'e76f56aaba4a67096e6314e61d53bc2512941552', class: this.class, innerHTML: draft });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10441,7 +10483,7 @@ class EdsIconEdit {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '1758d925314772dc29c4349f71f186ba775d2b41', class: this.class, innerHTML: edit });
+        return hAsync("span", { key: '54502ee7a072ad54a5c22367b89c1d00afcaaafe', class: this.class, innerHTML: edit });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10464,7 +10506,7 @@ class EdsIconEu {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: 'ac8c58eacb11b11be7928d7799a3eb6c8063597f', class: this.class, innerHTML: euSvg });
+        return hAsync("span", { key: '89fde5fbed839d6fdedc0399bf1475abf22d205d', class: this.class, innerHTML: euSvg });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10487,7 +10529,7 @@ class EdsIconExternal {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: 'e24ee8e9243fa2dcbe8df4fa9d84db5bbc136ec4', class: this.class, innerHTML: arrowDiagonal });
+        return hAsync("span", { key: '1abc7edbab033c99ffaede9ebe0f210849fe8d61', class: this.class, innerHTML: arrowDiagonal });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10510,7 +10552,7 @@ class EdsIconFacebook {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '6a6cbdd8f9e6b982af701b97681a98944c5c1797', class: this.class, innerHTML: facebook });
+        return hAsync("span", { key: '1981b2c066cfa5f0fb4326017df4bfbdfff09873', class: this.class, innerHTML: facebook });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10533,7 +10575,7 @@ class EdsIconGitlab {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: 'e6ce69e460242b20779766f62a3c7d23dad345d1', class: this.class, innerHTML: gitlabBlack });
+        return hAsync("span", { key: 'b35f2e94d903549d867579f2e008c323a441019c', class: this.class, innerHTML: gitlabBlack });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10556,7 +10598,7 @@ class EdsIconLinkedin {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '1981b2c066cfa5f0fb4326017df4bfbdfff09873', class: this.class, innerHTML: linkedin });
+        return hAsync("span", { key: '8bba88cba6d29b204b4a4ceae3c41129bb6edcaa', class: this.class, innerHTML: linkedin });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10579,7 +10621,7 @@ class EdsIconLoader {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '9383784da3e52d22395288f8eba5b6f4ee826aa5', class: this.class, innerHTML: loader });
+        return hAsync("span", { key: 'b97da1b406718c7611d1e17d7a9c6b4670600740', class: this.class, innerHTML: loader });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10602,7 +10644,7 @@ class EdsIconMastodon {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '8bba88cba6d29b204b4a4ceae3c41129bb6edcaa', class: this.class, innerHTML: mastodon });
+        return hAsync("span", { key: '36bf44e06217f9b2521f374028a1316fb17ff21a', class: this.class, innerHTML: mastodon });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10625,7 +10667,7 @@ class EdsIconMenu {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '15fa7c4b7d2dea5740d0926bb1ff6490b23667f8', class: this.class, innerHTML: menu });
+        return hAsync("span", { key: '4322703c9e449819dc30946118893d365fa20124', class: this.class, innerHTML: menu });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10648,7 +10690,7 @@ class EdsIconMinus {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '0e8b57b9ae1a2e53ef6f50948c49b9a9218f66cc', class: this.class, innerHTML: minus });
+        return hAsync("span", { key: '9b9efb71d724cc1eb0e9bebd7256fe11b39e4da3', class: this.class, innerHTML: minus });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10671,7 +10713,7 @@ class EdsIconMore {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '5f14cbe4b3ca88f7301c1561c092278b31d04326', class: this.class, innerHTML: more });
+        return hAsync("span", { key: 'f7ebc68658fcf8c0df627871481cce90cd7800fb', class: this.class, innerHTML: more });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10694,7 +10736,7 @@ class EdsIconPaper {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: 'b19c12426db0068934252c6197ba04789d42f5e2', class: this.class, innerHTML: paper });
+        return hAsync("span", { key: 'eaa676b09d81da31b600a910b99b416c1a5420d3', class: this.class, innerHTML: paper });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10717,7 +10759,7 @@ class EdsIconPlus {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '520b8d5a7d45f101ef526432b45e4407446685cd', class: this.class, innerHTML: plus });
+        return hAsync("span", { key: '825957824697ceeec9d6f81007c4dd1dfc208b28', class: this.class, innerHTML: plus });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10740,7 +10782,7 @@ class EdsIconPortal {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: 'f9b20e12497e199b7f596f4f457167080e81ccd1', class: this.class, innerHTML: portal });
+        return hAsync("span", { key: '4c557c9fe9168f361c55aae7a7c6874d78ec620d', class: this.class, innerHTML: portal });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10763,7 +10805,7 @@ class EdsIconPrivate {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: 'a342e11087242f9b37365bcbfec2036bd2009c85', class: this.class, innerHTML: privat });
+        return hAsync("span", { key: 'fe423636431e96ce42d0b8236b04c11c92633a18', class: this.class, innerHTML: privat });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10786,7 +10828,7 @@ class EdsIconPublic {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: 'e53f2ac899326e460b27b91772da9d2bee873fb3', class: this.class, innerHTML: pub });
+        return hAsync("span", { key: '4c0a1ff37a1bfa79173c6b91da33fb808ef1b918', class: this.class, innerHTML: pub });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10809,7 +10851,7 @@ class EdsIconSearch {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '6da0ae2a33a1680caecbaa6bbe1313329d32ef7e', class: this.class, innerHTML: search });
+        return hAsync("span", { key: 'c788833c6a51e489ca432697a9c46d9b5756a519', class: this.class, innerHTML: search });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10832,7 +10874,7 @@ class EdsIconStar {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '4c4243f9e6c5c02a2d70eda34b28efe1ba7c696b', class: this.class, innerHTML: star });
+        return hAsync("span", { key: '297e73664320032b2f78dd3c43aa0852545c0723', class: this.class, innerHTML: star });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10855,7 +10897,7 @@ class EdsIconStart {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: 'a788a6ded2b42ad1138be4f74464d4dc08dc485f', class: this.class, innerHTML: start });
+        return hAsync("span", { key: '360d1178d8f9f8485718f5ab1ed823ac16be2987', class: this.class, innerHTML: start });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10878,7 +10920,7 @@ class EdsIconSuccess {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '68917ac759cd684a6f3f3f67cb174d7291841070', class: this.class, innerHTML: success });
+        return hAsync("span", { key: '281f7141b6b45b60e8f11f85430af0cd8364d91f', class: this.class, innerHTML: success });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10901,7 +10943,7 @@ class EdsIconThumbsDown {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: 'fb0abd584eb41fcdf76479aa2953da2ed6a9f8ed', class: this.class, innerHTML: thumbsDown });
+        return hAsync("span", { key: 'b119fa870a00fbad7cffeb30b0ab76d2165eb76d', class: this.class, innerHTML: thumbsDown });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10924,7 +10966,7 @@ class EdsIconThumbsUp {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '53bc35a16795640e1fc5ac9a5ddd66015b98adb3', class: this.class, innerHTML: thumbsUp });
+        return hAsync("span", { key: '86834f96ac586f4bd7404ebdcd8ac0e496f063bb', class: this.class, innerHTML: thumbsUp });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10947,7 +10989,7 @@ class EdsIconTutorial {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: 'bbe35e4b8e341eb54820a661c6a6200e83fd0f3f', class: this.class, innerHTML: tutorial });
+        return hAsync("span", { key: 'f7457ee049fe477b51776527b58d459312c52cf4', class: this.class, innerHTML: tutorial });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10970,7 +11012,7 @@ class EdsIconTwitter {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: 'de551285a98e6e5340769e9d1422acb2e7bc826f', class: this.class, innerHTML: twitter });
+        return hAsync("span", { key: '6f1d0b5e073ef4d754aecb600a8578fc59950496', class: this.class, innerHTML: twitter });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -10993,7 +11035,7 @@ class EdsIconUnknown {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: 'c102d3ac082dab21cb23a322ded78d607ece10f5', class: this.class, innerHTML: unknown });
+        return hAsync("span", { key: '3b2750a85a74227efe458ceaa2d0995ab0c472b3', class: this.class, innerHTML: unknown });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -11016,7 +11058,7 @@ class EdsIconUpdown {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: 'b2bf11e364727f13859be3c2ed00931ec3379d9d', class: this.class, innerHTML: upDonw });
+        return hAsync("span", { key: '1768da9f606b60dd3dc1c8ef76673c6b17eb1b37', class: this.class, innerHTML: upDonw });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -11039,7 +11081,7 @@ class EdsIconUser {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '24acd317006255e7a5b29bd70b667c8ca9271f6c', class: this.class, innerHTML: user });
+        return hAsync("span", { key: 'ccb41b3ad799e44dab0664dadd5407f6aef9b39c', class: this.class, innerHTML: user });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -11062,7 +11104,7 @@ class EdsIconView {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '652ea6ae2a82611114e71ed2d2422ad579f7ab54', class: this.class, innerHTML: view });
+        return hAsync("span", { key: 'af0fae74516d7f51af3616aa09c16b80b603504f', class: this.class, innerHTML: view });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -11141,7 +11183,7 @@ class EdsIconYoutube {
         this.class = '';
     }
     render() {
-        return hAsync("span", { key: '6f1d0b5e073ef4d754aecb600a8578fc59950496', class: this.class, innerHTML: youtube });
+        return hAsync("span", { key: '063a941c7795658f2dd79fbdafd7ea1f8ed4b2f4', class: this.class, innerHTML: youtube });
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -11217,10 +11259,10 @@ class EdsImg {
             imgOpts['loading'] = 'lazy';
             imgOpts['decoding'] = 'async';
         }
-        return (hAsync("div", { key: '605bff5657ca79678517527a9462b31608e5af7a', class: {
+        return (hAsync("div", { key: 'fec0dcf2ec178a953f4ced8a71b037030983670d', class: {
                 'items-center justify-center': true,
                 'effect-bg-pattern': this.lazyload && this.showBg
-            } }, hAsync("picture", { key: '0d0def26688c1ec7214211d02875160965e2ce48' }, this.formats.map((format) => (hAsync("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), hAsync("img", Object.assign({ key: 'c9c307a5fdf25d9792db2a76f4d08fcd27b50401', ref: (el) => (this.img = el), class: {
+            } }, hAsync("picture", { key: '0df010a6ed50519be0a2017bf12db7d1ab2fb208' }, this.formats.map((format) => (hAsync("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), hAsync("img", Object.assign({ key: 'ea4275b2cc6be0cce5ab63f97d05454e3c4ee1dc', ref: (el) => (this.img = el), class: {
                 'effect-opacity object-cover object-center': true,
                 'opacity-100': this.loaded,
                 'opacity-0': !this.loaded
@@ -11302,7 +11344,7 @@ class EdsInput {
     render() {
         const withIcon = !!this.icon;
         const describedBy = this.hasMessage || this.error ? `${this.name}-error` : '';
-        return (hAsync("div", { key: 'a26224d6345099df6bc5110d42b701980603f7f7', 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: '0a6386205f78655569bf93960a4e2664563e4014', 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,
@@ -11313,7 +11355,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: 'beb48d08d18b5ca5b054b1b579e2f9527af222e9', 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: '06948fe33c35c5830edd50a37411281865ef6d12', 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: 'c78bf1501f682cde9a193ea6726baf2433566516', 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: 'c07e7d5d8394292cf365f32838dfd837ccf168d6', 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 {
@@ -11452,7 +11494,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: '615165ebb5980d2da414ad4028e053b46358eb4e' }, this.type === 'checkbox' || this.type === 'radio' ? (this.parsedOptions.length > 0 ? (hAsync("fieldset", { class: "space-y-4 mt-8" }, hAsync("div", { class: "flex justify-between" }, this.label && (hAsync("eds-input-label", { name: this.inputId || this.name, label: this.label, required: this.required })), this.hint && (hAsync("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint))), this.parsedOptions.map((option) => (hAsync("div", { class: "flex items-center gap-x-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" }, 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: 'eaa1d9c1095204c82bd01eab0f19f80eeee64d05' }, this.type === 'checkbox' || this.type === 'radio' ? (this.parsedOptions.length > 0 ? (hAsync("fieldset", { class: "space-y-4 mt-8" }, 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,
@@ -11465,7 +11507,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: '4ca8edfb4538caab53e89f16008683aea28adfbc', class: "mt-6" }, hAsync("eds-input-footer", { key: '68053a16f607a277a5c806f3c830b24acf3b1f50', 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: '60e6c848d41591b2e9ec8c5cf8dd656ec8562c38', class: "mt-6" }, hAsync("eds-input-footer", { key: 'e9298e01dbab9aa6a98a486286b32024766348d1', 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); }
@@ -11517,7 +11559,7 @@ class EdsInputFooter {
         this.link = undefined;
     }
     render() {
-        return (hAsync("div", { key: '58bce34f2ec417696ba03d6c8c0c77fa1d900f9a' }, this.error && this.errorMessage && (hAsync("div", { key: 'be14dc0f6e9494c1ee436fd8f822112eab6d2ce2', id: `error_${this.name}`, class: "text-error flex items-center" }, hAsync("eds-icon-wrapper", { key: 'aaa2010441b0bfe9445e4b6401115b29606ac507', icon: "warning" }), hAsync("p", { key: '277ac1de538e873c7da9b592e60dfd276738025d', class: "f-ui-04 ml-4 mb-4", innerHTML: this.errorMessage }))), this.message && hAsync("p", { key: '4f07c6efe398bb002322a35279e68b237eac860e', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (hAsync("a", { key: '50d042530985eeafd7334b0bb38fd2c14aed0e3f', href: this.link.url, class: "f-ui-05 effect-color hover:text-lighter underline underline-offset-4" }, this.link.label))));
+        return (hAsync("div", { key: '54571d8f3c08a7a4f12e40728e02a7210ab0d345' }, this.error && this.errorMessage && (hAsync("div", { key: 'db35f0c0dfa931d55d57a9c4ad3fffaeb4cea914', id: `error_${this.name}`, class: "text-error flex items-center" }, hAsync("eds-icon-wrapper", { key: '63e401d86876829d8d2bbab887a66ef0dbd1837f', icon: "warning" }), hAsync("p", { key: '81f8b0819a7cb119353c8ac38ab1df0cafb9d36f', class: "f-ui-04 ml-4 mb-4", innerHTML: this.errorMessage }))), this.message && hAsync("p", { key: 'e5018623e2d8578864dc1f0b06d54e4a60ff9020', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (hAsync("a", { key: 'e7b6bde26ae02cf07ac8b8e6461282a4ba1355ed', href: this.link.url, class: "f-ui-05 effect-color hover:text-lighter underline underline-offset-4" }, this.link.label))));
     }
     static get style() { return EdsInputFooterStyle0; }
     static get cmpMeta() { return {
@@ -11548,7 +11590,7 @@ class EdsInputLabel {
         this.disabled = false;
     }
     render() {
-        return (hAsync("label", { key: '622cd7e26774448ca86c1168d0a287d7b61d3e29', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (hAsync("span", { key: 'c3162e765af70dd972e3cd0ca360cd3f52003f76' }, hAsync("span", { key: '5bca5243c95399fefff4fa21b6c1477a287a3cb4', "aria-hidden": "true" }, "*"), hAsync("span", { key: 'bc1c229ac387161e4aa314498dbbc77fbab62955', class: "sr-only" }, "required")))));
+        return (hAsync("label", { key: '90e0659383fd3be9a166457de5429385fe3bfe02', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (hAsync("span", { key: '4d417c45dd636bfd5872d846e5eb89ff3694a4d4' }, hAsync("span", { key: '3924011891ee03e530fe25b269bf4231f3acd9cb', "aria-hidden": "true" }, "*"), hAsync("span", { key: '2f343b6b4ab4cbd538189cfa404210cf676eefe7', class: "sr-only" }, "required")))));
     }
     static get style() { return EdsInputLabelStyle0; }
     static get cmpMeta() { return {
@@ -11614,7 +11656,7 @@ class EdsInputRange {
         return this.inputElement;
     }
     render() {
-        return (hAsync("div", { key: '51c9adb300d50eecb48de1547c0a0475692aa97b', class: "relative flex flex-col items-start" }, hAsync("input", { key: '65ac18497d2a4307d7f5161951b87bb38cdad892', 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: '9b717fce31d2340f3b4bc4b5583e6b1e7764314f', id: `desc_${this.name}`, class: "block f-ui-05 mt-4 text-lighter" }, "Current value: ", this.sliderVal)));
+        return (hAsync("div", { key: '3fa2ef579847e66bcacc35afe202192b78a06975', class: "relative flex flex-col items-start" }, hAsync("input", { key: '669cc03e44dfa1ae8eae758f82f41939de1be625', 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: 'b3865e1bfacb423da277f4b76dfd0f3294f96cc6', 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 {
@@ -11709,7 +11751,7 @@ class EdsInputSearch {
         return this.inputElement;
     }
     render() {
-        return (hAsync("div", { key: '40f0faa26610671e0a89055e5a51fb17ab17c470', class: "relative flex items-center" }, hAsync("eds-icon-wrapper", { key: '910f6681ae719608c6f2787de4b3871742dd290a', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), hAsync("input", { key: '77534918bd9f2bcd4014e5b201a4f7eb2c0753b4', 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: 'ad7c42baf7c54ede5dca7dd2a6916557f46d33d6', class: "relative flex items-center" }, hAsync("eds-icon-wrapper", { key: '6de80c397bae5e541de1ce3c2937bed860b58363', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), hAsync("input", { key: '9637c5569c97061fde3735ecb58b6a6f81a10e15', 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 })));
     }
@@ -11763,12 +11805,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: 'f154a5f34a0d09cf6a02e24f13ed9af46532c76c', class: "relative" }, hAsync("select", { key: '0982936337bcbec3e2b81f7edc1436506841c782', id: selectId, name: this.name, class: {
+        return (hAsync("div", { key: '06be08db809ec9970ca4d7bdbdcdf1c8f2bc8840', class: "relative" }, hAsync("select", { key: 'e4319592e6c2f0c71e0dc75ca2d854506bda70bc', 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: '7656fa514dec6b8b05bbb8d02636bf5e2ee8d213', 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: '8464aa5ef3eab675f493b582736c25a7edd88224', 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: '092271b13e4d496a85c55fbb5f1756805cd5d3de', 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: 'a0ece38948f84a10ea8cd4c0a01b3f8b9730c7ef', 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: '8ce085e43d0ba6340e52b0666dc0a31abbf1a2f9', 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: '8b91b3fa3a819d04ede5d7816fcb2f04e66fd03b', class: "w-20 h-20", icon: "chevron-right" }))));
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -12029,7 +12071,7 @@ class EdsLink {
         const labelClasses = this.hideLabelOnSmallScreen
             ? 'hidden lg:flex' // Tailwind example: hidden on small screens, visible on larger
             : '';
-        return (hAsync("a", { key: '929b7318ec6475113125e40d789476df76e59e38', 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: '4b965dcb07ebca43577b0dcd9f2d11495caa761a', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), this.label && hAsync("span", { key: 'a4327fe130fb8c3962096eff3415ad62e19230f4', class: labelClasses }, this.label), this.renderRightIcon())));
+        return (hAsync("a", { key: 'bc82c9ea21f98ed71c812c8366ba8368c3ac5bf4', 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: 'eed89377d27a476a7d7e70a8c40f3100b8089a0b', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), this.label && hAsync("span", { key: 'c6d09f0c54e092e53350014d6d89b67c35a8be71', class: labelClasses }, this.label), this.renderRightIcon())));
     }
     get el() { return getElement(this); }
     static get style() { return EdsLinkStyle0; }
@@ -12137,7 +12179,7 @@ class EdsLogo {
     }
     render() {
         const logoContent = this.getLogo();
-        return (hAsync("a", { key: 'fff2a45eb8b41f59026ff7033824484339e3c0a9', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, hAsync("div", { key: 'bc13988a739af1c94d5eadbabf558cbbb10927b8', innerHTML: logoContent })));
+        return (hAsync("a", { key: 'e5c4e4701d698282dc85561c8c434f0790fb2401', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, hAsync("div", { key: '32cc8649fe67b6c4a874b5c1aaa6d4d793b4c4c7', innerHTML: logoContent })));
     }
     get el() { return getElement(this); }
     static get style() { return EdsLogoStyle0; }
@@ -12412,9 +12454,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: '14c35228e2aaf72d59f1766fd8e69fcd06ea5270', id: "eds-modal", class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-9999999 flex`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, this.isOpen && (hAsync("div", { key: '34b5dad3a31cd9a66135ce9d93d48215712529b9', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
+        return (hAsync("div", { key: '29700a7b84c8728c11232aaaa526638dc6cd3156', id: "eds-modal", class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-9999999 flex`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, this.isOpen && (hAsync("div", { key: '0cc973541fcde90a0b69a8d3b8a95e54d987fd7d', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
             ,
-            onClick: () => this.close() })), hAsync("div", { key: '5268780d170f080404d2c3ab0bb3f355b50895cb', class: `container absolute bg-inverse z-10 ${this.getModalPositionClasses()} grow justify-center` }, hAsync("div", { key: '20c094f3fb3cd31280118d687dec311a8aa59f57', 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: 'de7ff288945cd6e0a8c97d9c40cf02cc5ba4ea41', id: titleId, class: `f-heading-04 ${this.getTruncateClass()}` }, this.heading), hAsync("eds-button", { key: 'a46dc51081ad99856cfa81ccdf2ab060f644c7cb', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8 text-default" })), hAsync("div", { key: '45557580b90ae4f5d176eaa4805ce527d6e59eec', class: "pt-8 px-20 py-20" }, hAsync("slot", { key: 'b67c888a32c615c5073768ec3cd4e342a34a84c6' })))));
+            onClick: () => this.close() })), hAsync("div", { key: 'd69445a547c27fccc868bee1dae9537e3e4c9d68', class: `container absolute bg-inverse z-10 ${this.getModalPositionClasses()} grow justify-center` }, hAsync("div", { key: 'e4d3ddcadf49051ebb0fe5c1d12d40f8992a5549', 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: '6a9e5c1cb187e4684b267859f2150f485d6fcced', id: titleId, class: `f-heading-04 ${this.getTruncateClass()}` }, this.heading), hAsync("eds-button", { key: '7c9cd571b76cc87e13f9b153c4d24844b40e47c7', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8 text-default" })), hAsync("div", { key: '150e61106d25a1a0ecf470abf14ac5c5ba836b64', class: "pt-8 px-20 py-20" }, hAsync("slot", { key: '30100f97aa7504023e43b51fc9bebad20097b480' })))));
     }
     get el() { return getElement(this); }
     static get style() { return EdsModalStyle0; }
@@ -12504,13 +12546,13 @@ class EdsNps {
     }
     render() {
         const count = this.max - this.min + 1;
-        const fallback = 0;
-        return (hAsync("div", { key: 'd675e1e4ecc306511c0324d0b76ee66237cb6738', class: "eds-nps" }, hAsync("eds-input-label", { key: '2eede06f6ee166c36b0cf315a35435c89c3c0ba5', id: "nps-question", name: "nps-question", label: this.question }), hAsync("div", { key: '16105649fe6b3b229127c9a741367a6381db774f', role: "group", id: "nps-buttons", "aria-labelledby": "nps-question", class: "grid grid-cols-11", onKeyDown: (e) => this.handleKeyNav(e) }, Array.from({ length: count }, (_, i) => {
+        //onst fallback = 0;
+        return (hAsync("div", { key: '3831baab086cbf44a3d1511885f15bbab23c9cd2', class: "eds-nps" }, hAsync("eds-input-label", { key: 'f9bd8a812d1b65a634dfaa7aae704218dc79468c', id: "nps-question", name: "nps-question", label: this.question }), hAsync("div", { key: '398f5225c5b4071c2570a74a9e642f5059bb7813', role: "group", id: "nps-buttons", "aria-labelledby": "nps-question", class: "grid grid-cols-11", onKeyDown: (e) => this.handleKeyNav(e) }, Array.from({ length: count }, (_, i) => {
             const val = this.min + i;
             const isSelected = val === this.selectedValue;
-            const tabIndex = this.selectedValue === null ? (i === fallback ? 0 : -1) : isSelected ? 0 : -1;
+            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: 'e7bd70a4f1a8083d9c3e08fdf8de55999a27d92d', class: "flex justify-between mt-8" }, hAsync("span", { key: 'ea3fbbac20a162e7cf5f2d5e3321c8bc9297014e', class: "f-ui-04 text-light ml-4" }, this.leftLabel), hAsync("span", { key: '3ff59cde0c532587ead8b8a1eaaff6c630e7e7ac', class: "f-ui-04 text-light mr-4" }, this.rightLabel))));
+        })), hAsync("div", { key: '0acafaae3f2ce522ffbc245c5733ca509d4bf3c1', class: "flex justify-between mt-8" }, hAsync("span", { key: '001e0be00b07ae2e831ea6af0c577a5eeecb9a56', class: "f-ui-04 text-light ml-4" }, this.leftLabel), hAsync("span", { key: '99a12d89ea577fb2bb9c34241a2b9f0f254c284a', class: "f-ui-04 text-light mr-4" }, this.rightLabel))));
     }
     get el() { return getElement(this); }
     static get style() { return EdsNpsStyle0; }
@@ -12529,7 +12571,7 @@ class EdsNps {
     }; }
 }
 
-const edsPaginationCss = "ul,menu{list-style:none;margin:0;padding:0}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.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-02-light{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}.text-light{color:var(--grey-700)}.text-lightest{color:var(--grey-500)}.mb-28{margin-bottom:1.75rem}.w-full{width:100%}.w-20{width:1.25rem}.h-20{height:1.25rem}.h-28{height:1.75rem}.h-32{height:2rem}.h-36{height:2.25rem}.text-center{text-align:center}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-x-8{-moz-column-gap:0.5rem;column-gap:0.5rem}.mr-auto{margin-right:auto}.ml-auto{margin-left:auto}.\\!p-8{padding:0.5rem !important}.ml-4{margin-left:0.25rem}.mr-4{margin-right:0.25rem}.hidden{display:none}.gap-1{gap:0.0625rem}.py-4{padding-top:0.25rem;padding-bottom:0.25rem}.transition-colors{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:150ms}@media (min-width: 900px){.lg\\:\\!pr-12{padding-right:0.75rem !important}.lg\\:flex{display:flex}}";
+const edsPaginationCss = "ul,menu{list-style:none;margin:0;padding:0}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.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-02-light{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}.text-light{color:var(--grey-700)}.text-lightest{color:var(--grey-500)}.mb-28{margin-bottom:1.75rem}.w-full{width:100%}.w-20{width:1.25rem}.h-20{height:1.25rem}.h-28{height:1.75rem}.h-32{height:2rem}.h-36{height:2.25rem}.text-center{text-align:center}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-x-8{-moz-column-gap:0.5rem;column-gap:0.5rem}.mr-auto{margin-right:auto}.ml-auto{margin-left:auto}.\\!p-8{padding:0.5rem !important}.ml-4{margin-left:0.25rem}.mr-4{margin-right:0.25rem}.hidden{display:none}.gap-1{gap:0.0625rem}.py-4{padding-top:0.25rem;padding-bottom:0.25rem}.transition-colors{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:150ms}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media (min-width: 900px){.lg\\:\\!pr-12{padding-right:0.75rem !important}.lg\\:flex{display:flex}}";
 var EdsPaginationStyle0 = edsPaginationCss;
 
 /**
@@ -12772,7 +12814,7 @@ class EdsPagination {
         if (newPage !== this.currentPage) {
             this.links = this.links.map((link) => typeof link === 'object' ? Object.assign(Object.assign({}, link), { current: parseInt(link.label) === newPage }) : link);
             const pageChangeEvent = new CustomEvent('page', {
-                detail: newPage,
+                detail: { value: newPage },
                 bubbles: true,
                 composed: true
             });
@@ -12782,7 +12824,7 @@ class EdsPagination {
     }
     render() {
         const navigableIndex = -1; // Track index for keyboard navigation
-        return (hAsync("div", { key: '753a7e573a09e7fcb66eac9e11e00f690c49543d' }, this.total > 0 && this.mode === 'default' && (hAsync("p", { key: '6286d71622614a835d471812a55d5c6bef37a13e', class: "f-ui-03 text-light mb-28 w-full text-center", "aria-live": "polite", id: "pagination-info" }, hAsync("span", { key: 'daa7bfa31e736a40c46641fed88653d51eeabc67', 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: '9379c40daaca176e67fb59918f1ca387cb4759b9' }, this.total > 0 && this.mode === 'default' && (hAsync("p", { key: 'd09f7f6b7de136987d5b52564bc60afb3775299a', class: "f-ui-03 text-light mb-28 w-full text-center", "aria-live": "polite", id: "pagination-info" }, hAsync("span", { key: '4af8f097a79c8fb0495838f06424f43e5e5dcddc', 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);
                 }
@@ -12989,7 +13031,7 @@ class EdsProgressBar {
         ]
             .filter(Boolean)
             .join(' ');
-        return (hAsync("div", { key: '2a620231eaa84ba7e89e05da48175624fdc92d31', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: outerClasses }, hAsync("div", { key: '660e2c84ad358c0de1d9548b730308505e79bcd6', class: fillClasses, style: { width: `${progressValue}%` } }), hAsync("div", { key: '4d0fa2a209d315b658f80906b95a0bf255c82c78', class: "absolute inset-0 flex items-center justify-center pointer-events-none z-10" }, hAsync("span", { key: '0d423e16659d84b2d050f7d60ced4aefeeef9022', class: "text-default f-body-02" }, progressValue, "%"))));
+        return (hAsync("div", { key: '6c273c0fae28e5a1af49eb7e6be7b9fca717a503', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: outerClasses }, hAsync("div", { key: 'a46a83e9086471adde1837e59d909096d59e7882', class: fillClasses, style: { width: `${progressValue}%` } }), hAsync("div", { key: '193f2efa8259e7facacba374fff8087e9702c246', class: "absolute inset-0 flex items-center justify-center pointer-events-none z-10" }, hAsync("span", { key: 'e3454f3507d2a30245671698752a7f0f26baff57', class: "text-default f-body-02" }, progressValue, "%"))));
     }
     static get style() { return EdsProgressBarStyle0; }
     static get cmpMeta() { return {
@@ -13072,12 +13114,12 @@ class EdsRating {
         this.onSelect(next);
     }
     render() {
-        return (hAsync("div", { key: 'bd72970d86f2dbb21d58671fc85feea3011749b3', id: "rating-buttons", role: "radiogroup", "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: 'a7fc18897f2901f60432432899da18861e76edf6', 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.
             const checked = this.selectedRating === starRating;
-            return (hAsync("eds-button", { ref: (el) => (this.buttonRefs[index] = el), icon: this.ratingType, role: "radio", "aria-checked": checked, "aria-label": `${starRating} ${this.ratingType}${starRating > 1 ? 's' : ''}`, onClick: () => this.onSelect(starRating), tabIndex: checked || (this.selectedRating === 0 && index === 0) ? 0 : -1, intent: isSelected ? 'primary' : 'ghost', size: "large", "extra-class": "p-2" // Optional padding or styling for the star button
+            return (hAsync("eds-button", { ref: (el) => (this.buttonRefs[index] = el), icon: this.ratingType, "aria-label": `${starRating} ${this.ratingType}${starRating > 1 ? 's' : ''}`, onClick: () => this.onSelect(starRating), tabIndex: checked || (this.selectedRating === 0 && index === 0) ? 0 : -1, intent: isSelected ? 'primary' : 'ghost', size: "large", "extra-class": "p-2" // Optional padding or styling for the star button
             }));
         })));
     }
@@ -13122,7 +13164,7 @@ class EdsSectionCore {
     }
     render() {
         const TagType = this.tag; // Set dynamic tag type (div or section)
-        return (hAsync(TagType, { key: 'b77b5af1c6f3acbc2696a9608b55199ed4110d71' }, hAsync("eds-section-heading", { key: '464dd4c67d69d1ef3ed1d932081c3195a2b51503', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), hAsync("slot", { key: 'b5dbd4f55aee2df3bcbc44e21a134544ffd733f7' })));
+        return (hAsync(TagType, { key: '99f87da56df0ac4b5b28ce721288507beb0cd431' }, hAsync("eds-section-heading", { key: '101137aa9637a95580393a52e7f41d71e8ae8e8b', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), hAsync("slot", { key: '0b6a6131d8e1e2528982571cf7ba617736a34173' })));
     }
     static get style() { return EdsSectionCoreStyle0; }
     static get cmpMeta() { return {
@@ -13177,12 +13219,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: '4ae69ea354156a0e35a8884a63d7556ead8ada24', class: {
+        return (hAsync(TagType, { key: '2af16d4d21378244ba843b619b3fd4f283b3e179', 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: 'a3549fb733687c3ff31f17bdc362275eb0b29e31', class: this.getHeadingClass() }, this.sectionTitle)));
+            } }, hAsync(HeadingTag, { key: '8caa529d940fd5d2f7e8f49f7b8e5f2572712f9e', class: this.getHeadingClass() }, this.sectionTitle)));
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -13200,7 +13242,7 @@ class EdsSectionHeading {
     }; }
 }
 
-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)}.f-ui-02-light{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-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)}.mt-12{margin-top:0.75rem}.mt-16{margin-top:1rem}.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}";
+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;
 
 /**
@@ -13254,11 +13296,9 @@ class EdsSocialNetworks {
     /**
      * Renders the component's HTML structure with links to EBRAINS social profiles.
      * Each social network link uses the `eds-link` component with specific classes and styles.
-     *
-     * @returns {JSX.Element} The rendered JSX for the component.
      */
     render() {
-        return (hAsync("div", { key: '7241de6d0a20687523e17a4455dff1dfac59a191' }, hAsync("p", { key: '8292c0dde1b3518ada53dddc2ea0134ff3035e83', class: "f-ui-02" }, this.heading), hAsync("ul", { key: 'b30922e6d1f51a52300c889464824fafad775f74', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (hAsync("li", { key: index }, hAsync("eds-link", { "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm", external: true, "aria-label": network.label, url: network.url, icon: network.icon, intent: "strong" })))))));
+        return (hAsync("nav", { key: '62692c53f820ff5d6569e42af692063ad8918cdd', "aria-label": "Social media" }, hAsync("p", { key: 'a571612ba3c1b669e0145484bec4d480b17c1979', class: "f-ui-02" }, this.heading), hAsync("ul", { key: 'c0cc02cd5eebf16130f7b09fb8f11319695fdccb', 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 {
@@ -13349,7 +13389,7 @@ class EdsSpinner {
                 alignItems: 'center',
                 justifyContent: 'center'
             };
-        return (hAsync(Host, { key: 'cbf9cead7c7c6bc5314c074f7249c920eb60d326' }, hAsync("div", { key: 'd22c71a76af3f53c649e547538e0f1627cd9ecd0', class: "spinner-overlay", style: overlayStyle }, hAsync("span", { key: '83b42f7ee9ba4d356bd82097989b8be1db8a8ef9', class: "spinner", style: spinnerStyle }), this.message && hAsync("p", { key: '0a2c4efe46b8f86a037d29de699534441bf7585e', class: "f-body-01" }, this.message))));
+        return (hAsync(Host, { key: 'b10a5d28d0b06e7b36276fb814e3b8b57b767094' }, hAsync("div", { key: '8f2205bb74775c16660d35f80bf880ac9c39d725', class: "spinner-overlay", style: overlayStyle }, hAsync("span", { key: 'f681700791c6c10ea63473f34719a873757bcf5e', class: "spinner", style: spinnerStyle }), this.message && hAsync("p", { key: 'b0afdd60a6c74fd740626cb7da3402a9a5075e34', class: "f-body-01" }, this.message))));
     }
     static get style() { return EdsSpinnerStyle0; }
     static get cmpMeta() { return {
@@ -13433,40 +13473,60 @@ 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:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.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}.mb-28{margin-bottom:1.75rem}";
+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}";
 var EdsStepsStyle0 = edsStepsCss;
 
 class EdsSteps {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.step = createEvent(this, "step", 7);
+        this.finished = createEvent(this, "finished", 7);
+        this.next = createEvent(this, "next", 7);
+        this.back = createEvent(this, "back", 7);
         this.handleNext = () => {
-            this.activeStep = this.activeStep + 1;
-            if (this.activeStep < this.parsedSteps.length) {
-                this.step.emit(this.activeStep);
+            const lastIndex = this.parsedSteps.length - 1;
+            if (this.activeStep >= lastIndex) {
+                this.finished.emit();
+                return;
+            }
+            const target = this.activeStep + 1;
+            this.next.emit(target);
+            if (this.isNextDisabledFor(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 = () => {
             if (this.activeStep > 0) {
-                this.activeStep = this.activeStep - 1;
+                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;
+                }
             }
         };
         this.steps = [];
         this.type = 'static';
+        this.nextLabel = 'Next';
+        this.backLabel = 'Back';
+        this.finishLabel = 'Finish';
+        this.disableNext = false;
+        this.headingLevel = 'h4';
         this.activeStep = 0;
     }
-    /**
-     * Lifecycle method that runs when the component has fully loaded.
-     * It emits a custom event for each `eds-button` element contained within the breadcrumb.
-     */
     componentDidLoad() {
         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);
-            });
+            btns === null || btns === void 0 ? void 0 : btns.forEach((btn) => this.emitContext(btn));
         }
     }
     activeStepChanged(newValue) {
@@ -13474,19 +13534,10 @@ class EdsSteps {
             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);
-                });
+                activeStepContainer.querySelectorAll('eds-button').forEach((btn) => this.emitContext(btn));
             }
         }, 50);
     }
-    /**
-     * Emits a custom event called `parentContext` for a given link element.
-     * This event provides context information about the breadcrumb component.
-     *
-     * @param linkElement - The link element to which the event will be dispatched.
-     */
     emitContext(linkElement) {
         const event = new CustomEvent('parentContext', {
             detail: {
@@ -13496,26 +13547,29 @@ class EdsSteps {
         });
         linkElement.dispatchEvent(event);
     }
-    handleStepClick(index) {
-        this.step.emit(index);
-        // In linear mode, update the active step on header click.
-        if (this.type === 'linear') {
-            this.activeStep = index;
-        }
-    }
-    /**
-     * Parse the JSON string into an array of steps.
-     */
     get parsedSteps() {
         return parseData(this.steps);
     }
+    isNextDisabledFor(index) {
+        return Array.isArray(this.disableNext)
+            ? !!this.disableNext[index] // per-step
+            : index === this.activeStep && !!this.disableNext; // only active step
+    }
+    /** Render the semantic heading element */
+    renderHeading(title) {
+        const Tag = this.headingLevel;
+        return hAsync(Tag, null, title);
+    }
     render() {
         const steps = this.parsedSteps;
         if (this.type === 'linear') {
-            return (hAsync("div", null, hAsync("div", { class: "steps" }, steps.map((step, index) => (hAsync("div", { class: "step mb-28", key: index }, hAsync("h3", { onClick: () => this.handleStepClick(index) }, step.title), this.activeStep === index && (hAsync("div", { class: "content" }, hAsync("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 })), hAsync("eds-button", { label: index === steps.length - 1 ? 'Finish' : 'Continue', intent: "primary", class: "next-btn", onClick: this.handleNext }), hAsync("eds-button", { label: "Back", intent: "ghostInverse", onClick: this.handleBack, disabled: index === 0, "extra-class": index === 0 ? 'hidden' : 'ml-8 block' })))))))));
+            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), this.activeStep === index && (hAsync("div", { class: "content grid gap-y-16" }, 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}` })))));
+            })));
         }
-        // Static mode: show all steps with their content, no navigation buttons.
-        return (hAsync("div", { class: "steps" }, steps.map((step, index) => (hAsync("div", { class: "step mb-28", key: index }, hAsync("h3", null, step.title), hAsync("div", { class: "content" }, hAsync("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: no navigation buttons
+        return (hAsync("div", { class: "steps" }, steps.map((step, index) => (hAsync("div", { class: "step mb-28", key: index }, this.renderHeading(step.title), hAsync("div", { class: "content" }, 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 }))))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -13528,30 +13582,49 @@ class EdsSteps {
         "$members$": {
             "steps": [1],
             "type": [1],
+            "nextLabel": [1, "next-label"],
+            "backLabel": [1, "back-label"],
+            "finishLabel": [1, "finish-label"],
+            "disableNext": [1028, "disable-next"],
+            "headingLevel": [513, "heading-level"],
             "activeStep": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
+        "$attrsToReflect$": [["headingLevel", "heading-level"]]
     }; }
 }
 
-const edsStepsV2Css = "h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}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;top:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.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))}";
+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}";
 var EdsStepsV2Style0 = edsStepsV2Css;
 
 class EdsStepsV2 {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.step = createEvent(this, "step", 7);
+        this.finished = createEvent(this, "finished", 7);
+        this.next = createEvent(this, "next", 7);
+        this.back = createEvent(this, "back", 7);
         this.handleNext = () => {
-            this.activeStep = this.activeStep + 1;
-            if (this.activeStep < this.parsedSteps.length) {
+            const lastIndex = this.parsedSteps.length - 1;
+            if (this.activeStep >= lastIndex) {
+                // Finish
+                this.finished.emit();
+                return;
+            }
+            // Next
+            const target = this.activeStep + 1;
+            this.next.emit(target);
+            if (!this.disableNext) {
+                this.activeStep = target;
                 this.step.emit(this.activeStep);
             }
         };
         this.handleBack = () => {
             if (this.activeStep > 0) {
-                this.activeStep = this.activeStep - 1;
+                const target = this.activeStep - 1;
+                this.back.emit(target);
+                this.activeStep = target;
                 this.step.emit(this.activeStep);
             }
         };
@@ -13561,6 +13634,11 @@ class EdsStepsV2 {
         this.imageWidth = undefined;
         this.bg = true;
         this.message = undefined;
+        this.nextLabel = 'Next';
+        this.backLabel = 'Back';
+        this.finishLabel = 'Finish';
+        this.disableNext = false;
+        this.headingLevel = 'h4';
         this.activeStep = 0;
     }
     componentDidLoad() {
@@ -13599,24 +13677,22 @@ class EdsStepsV2 {
             'border-softer effect-focus-within relative rounded-lg border-2'
         ].join(' ');
     }
-    handleStepClick(index) {
-        this.step.emit(index);
-        // In linear mode, update the active step on header click.
-        if (this.type === 'linear') {
-            this.activeStep = index;
-        }
-    }
     /**
      * Parses the steps property into an array of Step objects.
      */
     get parsedSteps() {
         return parseData(this.steps);
     }
+    /** Render the semantic heading element */
+    renderHeading(title) {
+        const Tag = this.headingLevel;
+        return hAsync(Tag, null, title);
+    }
     render() {
         const steps = this.parsedSteps;
-        return (hAsync("div", { key: 'bbcec2dd9a5096eb0cecf0d413892e5708822f52', 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: 'db0618aad7d5986fcb0889f1c439be73f83a00df', class: "p-8" }, this.type === 'linear' ? (hAsync("div", { class: "steps" }, steps.map((step, index) => (hAsync("div", { class: index === 0 ? 'step' : 'step space-y-16', key: index }, hAsync("h3", { onClick: () => this.handleStepClick(index) }, step.title), this.activeStep === index && (hAsync("div", { class: "content" }, 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 })), hAsync("eds-button", { label: index === steps.length - 1 ? 'Finish' : 'Continue', intent: "primary", class: "next-btn", onClick: this.handleNext }), hAsync("eds-button", { label: "Back", intent: "ghostInverse", onClick: this.handleBack, disabled: index === 0, "extra-class": index === 0 ? 'hidden' : 'ml-8 block' })))))))) : (
+        return (hAsync("div", { key: '1ff00f17a85e9a3a9d7bef23694560acd77e7ee4', 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: 'a0328e80df5d9447cfa5378eb9e45925f1f68c69', 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), this.activeStep === index && (hAsync("div", { class: "content grid gap-y-16" }, 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 }, hAsync("h3", { onClick: () => this.handleStepClick(index) }, step.title), hAsync("div", { class: "content" }, 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 })))))))))));
+        hAsync("div", { class: "steps space-y-8" }, steps.map((step, index) => (hAsync("div", { class: "step", key: index }, this.renderHeading(step.title), hAsync("div", { class: "content" }, 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 })))))))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -13633,11 +13709,16 @@ class EdsStepsV2 {
             "imageWidth": [2, "image-width"],
             "bg": [4],
             "message": [1],
+            "nextLabel": [1, "next-label"],
+            "backLabel": [1, "back-label"],
+            "finishLabel": [1, "finish-label"],
+            "disableNext": [4, "disable-next"],
+            "headingLevel": [513, "heading-level"],
             "activeStep": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
+        "$attrsToReflect$": [["headingLevel", "heading-level"]]
     }; }
 }
 
@@ -13691,11 +13772,11 @@ class EdsSwitch {
                     : this.labelOff
                 : 'Toggle switch'
             : undefined;
-        return (hAsync("div", { key: 'f4c99a2ec360af6030de11698bab82833b3f415f', class: "switch-container" }, this.labelOff && (hAsync("span", { key: '8bb8d063e744c194c0d44a0c371ae8224f9611cb', id: `${switchId}-off`, class: "switch-label switch-label--off mr-8" }, this.labelOff)), hAsync("button", { key: 'ccc49c8ac6f639707c90822e24f3ae3ab8f2c26c', 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: '95a833cbe8e736d7e747f6fdd8504dd8c169ea60', class: "switch-container" }, this.labelOff && (hAsync("span", { key: 'a88de63c35409ab244a6cba5bd70a10728a08b2a', id: `${switchId}-off`, class: "switch-label switch-label--off mr-8" }, this.labelOff)), hAsync("button", { key: 'd6573f05164f2b57063e9a97c3b983f32700bd7a', 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: '2275930bc9909c0a95c6c10e28f715fe1afe9294', class: "switch-handle" })), this.labelOn && (hAsync("span", { key: 'd789fd15943c1fadf1f87c55059261eaf5e05a8f', 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: '35e6da3bb76779bfaad04d8990dec419524fb543', class: "switch-handle" })), this.labelOn && (hAsync("span", { key: 'b14243d9d45dbdddb9473ad2c5696e07be9831d3', id: `${switchId}-on`, class: "switch-label switch-label--on ml-8" }, this.labelOn))));
     }
     get el() { return getElement(this); }
     static get style() { return EdsSwitchStyle0; }
@@ -13714,7 +13795,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}.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;}.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;
 
 /**
@@ -13852,7 +13933,7 @@ class EdsTable {
         }
         const paginationEl = this.hostEl.shadowRoot.querySelector('eds-pagination');
         if (paginationEl && !paginationEl.hasAttribute('listener-attached')) {
-            paginationEl.addEventListener('page', (event) => this.handlePageChange(event.detail));
+            paginationEl.addEventListener('page', (event) => this.handlePageChange(event.detail.value));
             paginationEl.setAttribute('listener-attached', 'true');
         }
     }
@@ -13901,7 +13982,9 @@ class EdsTable {
             return (hAsync("eds-input-field", { name: `chc-${actionName}`, label: act.label, type: "checkbox", checked: checked, onChange: (e) => this.emitAction(act.name, row, e.target.checked) }));
         }
         // Let all action buttons be focusable naturally
-        return (hAsync("eds-button", { label: act.label, icon: act.icon, pill: true, size: "small", intent: "ghost", tabIndex: 0, onClick: () => this.emitAction(act.name, row) }));
+        const showLabel = act.showLabel === true;
+        const btn = (hAsync("eds-button", { icon: act.icon, label: showLabel ? act.label : null, iconPos: "left", pill: true, size: "small", intent: "ghost", tabIndex: 0, onClick: () => this.emitAction(act.name, row) }));
+        return showLabel ? btn : hAsync("eds-tooltip", { content: act.label }, btn);
     }
     emitAction(actionName, row, checked) {
         sendAnalytics({
@@ -13947,7 +14030,7 @@ class EdsTable {
         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: '87e7cc3c87618ede91bb51d7a07cd597a438d6c5' }, this.searchEnabled && (hAsync("div", { key: '6b77700a913e272eef4c932d40c5c5d001ff6b5c' }, hAsync("eds-input-field", { key: 1, name: "search", "aria-label": "Search", type: "text", placeholder: "Search...", onInput: (event) => this.handleSearch(event) }))), hAsync("div", { key: '6f2ffc7a3ba2cc8e8194670a7ecb9e237f7dc60a', class: "mt-20" }, hAsync("table", { key: '0227d3029f30ab9928cd01ba8dc2eccde2073f47', class: "block overflow-x-auto mt-6 p-0" }, hAsync("thead", { key: 'c1f844d8413b596d5ca07d6b79ebd36c8a17f51f' }, hAsync("tr", { key: 'caadaaf66314e3ea7d47a748b6e899389a7e2d55', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((col) => {
+        return (hAsync("div", { key: '67cfdabc741af13585699e43e67ba0d204a60706' }, this.searchEnabled && (hAsync("div", { key: '208240b9832f9b2e9645cc9d7315a43bd47b54b3' }, 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: '893924497d1535b7d29bc0b64ba48f4a3e366c43', class: "mt-20" }, hAsync("table", { key: 'a019fa4f2886d4c2aa4bddc88dc7b6d7aa63fdcb', class: "block overflow-x-auto mt-6 p-0" }, hAsync("thead", { key: 'a6360fea59c605878e443a23cf45d0f8a9644140' }, hAsync("tr", { key: '09702e8838f32c52bf6314b59ec598c6fa55d609', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, 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` } }));
@@ -13956,7 +14039,7 @@ class EdsTable {
                 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 null;
-        }))), hAsync("tbody", { key: 'da9286063f16a5c346ce8854361cb15573166a19' }, paginatedRows.map((row) => (hAsync("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((col) => {
+        }))), hAsync("tbody", { key: '5cdb3697e6c84921a823b40714a497f02c82e360' }, paginatedRows.map((row) => (hAsync("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, 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: {
@@ -13971,7 +14054,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: 'b7e7991225cf9fb16ca882dc42c7adead202aac5', class: "mt-20" }, hAsync("eds-pagination", { key: '011f209f89300357e6052ee4d118f353419d5a45', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
+        }))))))), this.shouldEnablePagination() && (hAsync("div", { key: 'f5af2cd6e65c3ed55ec2810ec4b1e3f891866271', class: "mt-20" }, hAsync("eds-pagination", { key: '32965384707df502fb197712c73bb290e38ce040', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
     }
     get hostEl() { return getElement(this); }
     static get watchers() { return {
@@ -14182,12 +14265,12 @@ class EdsTabs {
         }
     }
     render() {
-        return (hAsync("div", { key: 'e3bd802f08f460d5f3e89860669fefe2a8006e59', id: `${this.identifier}` }, hAsync("div", { key: 'bcbd4afb8febec0520075c8e34269f184e2d9738', 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: '32e93b3ee6831918fd863fb23f1a5af1ae979201', role: "tablist", ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
+        return (hAsync("div", { key: '7cb51cf475d45ee3e43877ee4d42565f5930613a', id: `${this.identifier}` }, hAsync("div", { key: '4f3c6d23f9084f07e5728b72310b96798d20b724', 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: '4d55e72e9f437cef8be06931445f619196a973a7', 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: 'ffe610574d342933121cbaca9bcb8fb483fde60b', 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: 'e75f877da39c25e912853fea5dc2438fc15c67b5', 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 {
@@ -14250,7 +14333,7 @@ class EdsTag {
     }
     render() {
         const classes = tagStyles({ intent: this.intent, size: this.size });
-        return hAsync("span", { key: '939fafa4bc525b747956931f49b27e6125ecbb34', class: classes }, this.label);
+        return hAsync("span", { key: 'e3fe041e8783a7d1bb5a281eb154e3c07851da38', class: classes }, this.label);
     }
     static get style() { return EdsTagStyle0; }
     static get cmpMeta() { return {
@@ -14312,7 +14395,7 @@ class EdsTimeline {
         }
     }
     render() {
-        return (hAsync("div", { key: '3abe8b96a25fa575acc503eafa345c63b0c4c971', class: "max-w-sidebar mx-auto px-4 py-8" }, hAsync("div", { key: '23039a03d10a38aa96310be6456283b5d36041e7', class: "relative" }, hAsync("div", { key: '2bf447e7dd77a33b953ee1c7b49c72bb3e79a938', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), hAsync("div", { key: 'db44af20a0e09666b402e77ec739262a3506da48', 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: 'c3362fa23185787a8d5a974f1f53978569e28a63', class: "max-w-sidebar mx-auto px-4 py-8" }, hAsync("div", { key: '59f85c0ae88876cf891b8fd2852cb15426f05c2a', class: "relative" }, hAsync("div", { key: '89fc0969c72ba183dee530a428d6d1d9421b2764', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), hAsync("div", { key: '190262fe1b382ac41fba398d05e640d0db746fe9', 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' }]
@@ -14486,7 +14569,7 @@ class EdsToastManager {
         this.toasts = this.toasts.filter((t) => t.id !== id);
     }
     render() {
-        return (hAsync("div", { key: '85027aad9484f391686c4126e984a84e8045511c', 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: '27172b1f3c76ebb460c35ea070eeff330390ed7d', 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; }
@@ -14502,7 +14585,7 @@ class EdsToastManager {
     }; }
 }
 
-const edsTooltipCss = ".relative{position:relative}.absolute{position:absolute}.inline-block{display:inline-block}.rounded-xs{border-radius:4px}.bg-strongest{background-color:var(--black)}.text-inverse{color:var(--white)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.pointer-events-none{pointer-events:none}.left-1\\/2{left:50%}.z-10{z-index:10}.transform{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-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))}.whitespace-nowrap{white-space:nowrap}.p-6{padding:0.375rem}.top-full{top:100%}.bottom-full{bottom:100%}.right-full{right:100%}.left-full{left:100%}.mr-2{margin-right:0.125rem}.ml-2{margin-left:0.125rem}.mt-2{margin-top:0.125rem}.mb-2{margin-bottom:0.125rem}.opacity-0{opacity:0}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-150{transition-duration:150ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.group:hover .group-hover\\:opacity-100{opacity:1}.max-w-\\[20rem\\]{max-width:20rem}.whitespace-normal{white-space:normal}.break-words{overflow-wrap:break-word}.w-full{width:100%}";
+const edsTooltipCss = ".relative{position:relative}.absolute{position:absolute}.inline-block{display:inline-block}.rounded-xs{border-radius:4px}.bg-strongest{background-color:var(--black)}.text-inverse{color:var(--white)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.pointer-events-none{pointer-events:none}.left-1\\/2{left:50%}.z-10{z-index:10}.transform{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-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))}.whitespace-nowrap{white-space:nowrap}.p-6{padding:0.375rem}.px-4{padding-left:0.25rem;padding-right:0.25rem}.top-full{top:100%}.bottom-full{bottom:100%}.right-full{right:100%}.left-full{left:100%}.mr-2{margin-right:0.125rem}.ml-2{margin-left:0.125rem}.mt-2{margin-top:0.125rem}.mb-2{margin-bottom:0.125rem}.opacity-0{opacity:0}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-150{transition-duration:150ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.group:hover .group-hover\\:opacity-100{opacity:1}.max-w-\\[20rem\\]{max-width:20rem}.whitespace-normal{white-space:normal}.break-words{overflow-wrap:break-word}.w-full{width:100%}";
 var EdsTooltipStyle0 = edsTooltipCss;
 
 /**
@@ -14525,10 +14608,10 @@ class EdsTooltip {
     }
     render() {
         const positionClass = this.position === 'bottom' ? 'top-full mt-2' : 'bottom-full mb-2';
-        return (hAsync("div", { key: 'ee76b787881bdaef986b73fb2775c900a8c33d05', class: "relative w-full inline-block group" }, hAsync("slot", { key: 'a5f9ade50e829efab02ef28ecff3edeedae9d469' }), hAsync("div", { key: '31bdc63d6263090578f6600ae32027c2b050b2bf', class: `absolute ${positionClass}
+        return (hAsync("div", { key: '135df7d17db03fb3bb7bbcc50ad9ee5d84a2bca2', class: "relative w-full inline-block group" }, hAsync("slot", { key: '4c12874eeb942e33f9c62ea6f1077fd051f683b6' }), hAsync("div", { key: '8bb7173d16889b2ae550dc0269d9e47e1dae00ac', class: `absolute ${positionClass}
             rounded-xs bg-strongest text-inverse 
             f-ui-03-light pointer-events-none 
-            z-10 p-4 opacity-0 transition-opacity duration-150 ease-in-out
+            z-10 px-4 opacity-0 transition-opacity duration-150 ease-in-out
             group-hover:opacity-100 whitespace-normal break-words`, role: "tooltip" }, this.content)));
     }
     get el() { return getElement(this); }
@@ -14589,7 +14672,7 @@ class EdsTrl {
             Application: { format: 'code' },
             'Current TRL Stage': { format: 'text' }
         };
-        return (hAsync("div", { key: '51e2ef0877ef34a3c413d8bb690d659525845a92', class: "container mx-auto px-4 py-8" }, hAsync("eds-table", { key: 'b682cb9ce8182302b82042173fcc93aed65f7006', "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: '42873472d353599cbc2903b00ff03f0f802f1120', class: "container mx-auto px-4 py-8" }, hAsync("eds-table", { key: '980a4d934f0554fefd34f8c4631f305d45f81bc3', "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,
@@ -14615,7 +14698,12 @@ var EdsUserStyle0 = edsUserCss;
 class EdsUser {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.handleDropdown = (e) => {
+            this.expanded = e.detail.expanded;
+        };
         this.user = undefined;
+        this.intent = 'tertiary';
+        this.expanded = false;
     }
     /**
      * Helper getter to ensure we work with a User object.
@@ -14641,7 +14729,8 @@ class EdsUser {
     }
     render() {
         const user = this.parsedUser;
-        return (hAsync("div", { key: '8a1f10cc85d8e2707042c85bc597b76fb2d25da4', class: "block" }, hAsync("div", { key: 'a744de3d113920b8ff0d01ce273672b2bff57c97', class: "flex items-center" }, hAsync("eds-dropdown", { key: 'e9230372d79936a785050ebb3e41f40e73282a57', label: `Hi, ${user.preferred_username}`, intent: "tertiary", "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: "chevron-down", class: "text-default" }, hAsync("div", { key: '7d4bd0ee0985c840a18764cac784726ff1c987fb', class: "min-w-[280px] p-8" }, hAsync("div", { key: '603d6807988dd79cd4e7827918ff8932d8463fc3', class: "flex gap-x-16" }, hAsync("eds-avatar", { key: '65ba89139cb6e3b6cb90c2072eb68cc7dc1da49c', "first-name": user.given_name, "last-name": user.family_name, initials: this.initials, color: "grey" }), hAsync("div", { key: 'df35b758918ebccbdfe6630bd356e647522404e1', class: "max-w-full" }, user.name && hAsync("p", { key: '7174f34445bb1a0b77a3c1b893421bd104832485', class: "f-ui-01 text-default w-full text-ellipsis" }, user.name), user.preferred_username && hAsync("p", { key: '72d853f5014c03803dce7aa0a74d96847ed8c875', class: "f-ui-03-light text-light mt-4" }, user.preferred_username), user.email && hAsync("p", { key: 'e406e2f3ca8504220ee9586a1d176c15c7236502', class: "f-ui-03-light text-light mt-4" }, user.email))), hAsync("div", { key: '8fd3b42ab4eb3d1d70a0b827e3a03af8503c55d1', class: "text-default flex w-full flex-col gap-y-8" }, hAsync("slot", { key: '6a477155c256543b7793947d52feb3f5abb0df6e' })))))));
+        const iconName = this.expanded ? 'chevron-down' : 'chevron-right';
+        return (hAsync("div", { key: '965387104c4bd6cd3223c08f16d90146c098594c', class: "block" }, hAsync("div", { key: '37fe5539cb058112ebe0d910439acb55b5abccd8', class: "flex items-center" }, hAsync("eds-dropdown", { key: '17afc8dbae191aec1202ba04d85c41ed656a8c5b', label: `Hi, ${user.preferred_username}`, intent: this.intent, "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: iconName, class: "text-default", onDropdown: this.handleDropdown }, hAsync("div", { key: '0228c1728b0b73e2504d2608339f9be408be09b8', class: "min-w-[280px] p-8" }, hAsync("div", { key: 'b83148ff8249bde91842b036da5506f9f5cbb145', class: "flex gap-x-16" }, hAsync("eds-avatar", { key: '243a05bae2e4e592dc386b1897d824232d0bcfa6', "first-name": user.given_name, "last-name": user.family_name, initials: this.initials, color: "black" }), hAsync("div", { key: '6938f54621aa89e61aa6639e8c88af4e262e0fec', class: "max-w-full" }, user.name && hAsync("p", { key: '224ce5cf6819a9dd0c3794410a94da30cc4213bf', class: "f-ui-01 text-default w-full text-ellipsis" }, user.name), user.preferred_username && hAsync("p", { key: '096ac761149763ef4305ef5e9bf1f4b593a0fe4f', class: "f-ui-03-light text-light mt-4" }, user.preferred_username), user.email && hAsync("p", { key: '79f7da3c6c5efc1f521991c403184cf050b3d2e7', class: "f-ui-03-light text-light mt-4" }, user.email))), hAsync("div", { key: '52ce98bcc290902605ebd427ee8ab72ac9af3d62', class: "text-default flex w-full flex-col gap-y-8" }, hAsync("slot", { key: '88d1b250c434830347e0eb813214382ce899c485' })))))));
     }
     get hostEl() { return getElement(this); }
     static get style() { return EdsUserStyle0; }
@@ -14649,7 +14738,9 @@ class EdsUser {
         "$flags$": 9,
         "$tagName$": "eds-user",
         "$members$": {
-            "user": [1025]
+            "user": [1025],
+            "intent": [1],
+            "expanded": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -14692,7 +14783,7 @@ class GradientPrimaryPalette {
         ];
     }
     render() {
-        return (hAsync("ul", { key: 'af35aa4016013cbed62463881c380330f80066a2', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16", style: {
+        return (hAsync("ul", { key: '1a8020d4141fdd0e5849eeec1f474a9e423df044', 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))))))));
     }
@@ -14765,19 +14856,19 @@ class GradientSecondaryPalette {
         ];
     }
     render() {
-        return (hAsync("div", { key: '8a494bd6783e8138f33dcfd37498fd69b249a2e8' }, hAsync("ul", { key: 'a2e6c31c2e2f3745ce1e4c01cc9afae02e8ebb87', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: '4ed12da885c34a07657aef2a841c87a37ae9c8f7', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: '337f66d14b0ce65b19f198b7efaf9230ca50b82c', class: "effect-height flex items-center justify-between p-16", style: {
+        return (hAsync("div", { key: '3f2934f897c4cc6f620542a1ba4283c1d5a33df9' }, hAsync("ul", { key: 'aaaf0f3c8930efd24ed43c2a921821442dd73050', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: '52df1b6804670c365e43dc704d9ac5b8b15715a8', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: 'c301ab6086f2c1c9596336a2ad971242d1e21083', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[0].background
-            } }, hAsync("div", { key: 'c8c692658db9434f57e5ac264c3c9064910e9661', class: "grid" }, hAsync("span", { key: '9fd7ae1b75ff6b6c807dbaad783f6495dc2dd9bd', class: "f-body-02" }, this.colors[0].rgb), hAsync("span", { key: '9d4e59b1fab74ff781c8d73db3dd468b10ce0455', class: "f-body-02 w-full" }, this.colors[0].cmyk), hAsync("eds-code-block", { key: '96f8a8fa41459228e4d8097a616926f85765cf39', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: 'd7a68794a9682b619be1e087c983149d491c96db', class: "grid" }, hAsync("span", { key: '58bd1ad1029c3b121ac0d4bb5c70ae303e0352bb', class: "f-body-02" }, this.colors[0].pantoneC), hAsync("span", { key: '3193953b5f25d007cf19d93a1f68f20404687f1e', class: "f-body-02" }, this.colors[0].pantoneU))), hAsync("div", { key: 'cfbdd6e419b1616438c6331a1d25c18c4425acd8', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, hAsync("div", { key: '2b25b2b94472be6cf429f3698f0b867b779d5289', class: "grid" }, hAsync("span", { key: 'dcd99303196abf883d50d9f0e3d952a5ab8213ea', class: "f-body-02" }, this.colors[0].rgb), hAsync("span", { key: 'b7bf94422eddb9d39463f261275cc2d2264c09a1', class: "f-body-02 w-full" }, this.colors[0].cmyk), hAsync("eds-code-block", { key: '9ba5dec72e690f1612361102191dfa35da9f6260', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '594086b8cca19613c8470f018f01dc4f006cf0ea', class: "grid" }, hAsync("span", { key: '2c5b9af8a63edb49b863a491b2d05c03bf1d4074', class: "f-body-02" }, this.colors[0].pantoneC), hAsync("span", { key: 'ca8b44a7f414459f63398ed1f77c60e9ab5f3cc1', class: "f-body-02" }, this.colors[0].pantoneU))), hAsync("div", { key: 'f97f1c58886e6802e4c4ef7601570bcf39a34d33', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[1].background
-            } }, hAsync("div", { key: 'd7cbace55477934af72160da781b7a8e3aa8e06a', class: "grid" }, hAsync("span", { key: '92751b8b5769b239e36ac130e339f8e360727cc4', class: "f-body-02" }, this.colors[1].rgb), hAsync("span", { key: '82fe5bf3213d8d581322b33fd5e71edac1c88fb3', class: "f-body-02 w-full" }, this.colors[1].cmyk), hAsync("eds-code-block", { key: '898008dc0c37aa6dac6cc41f2034cddd65768c14', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '4e447137643b72b3c6bf7c77d9487db3b6565774', class: "grid" }, hAsync("span", { key: 'dd6377e2669c91b70681faceef9a1a2e85aacc36', class: "f-body-02" }, this.colors[1].pantoneC), hAsync("span", { key: '06fc395fb9c0caf71d889031d5122da97c2d437c', class: "f-body-02" }, this.colors[1].pantoneU))))), hAsync("eds-block-break", { key: '7be7b3c75d184f3aa717f6319aeeac025760122e' }), hAsync("ul", { key: 'b97e4bde35db0630a312b97d501ce1c59f0c3e14', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: '6a92a1a7d3e3680901e18dd48eb6658f4fb0fb20', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: 'e90a2a1cae3c1cde6b4326b56b72c61e1892140b', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, hAsync("div", { key: 'fe4232938f50f1ed4438fbda528e825924317bb1', class: "grid" }, hAsync("span", { key: '17fd45986226dc01589a6214c9c409ea7b83a2b7', class: "f-body-02" }, this.colors[1].rgb), hAsync("span", { key: '78a16b2a247b3b7ef9ba55fcea86a46414d48dd4', class: "f-body-02 w-full" }, this.colors[1].cmyk), hAsync("eds-code-block", { key: '5ba4c6cb2a15ba812ad2155f03279e45a4eb5470', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: 'e3459241ff6aee17dcca8b40c6d032c39eb85dcb', class: "grid" }, hAsync("span", { key: 'cc3085e05ddc7d1837ab73aba82562ca10dc5ad8', class: "f-body-02" }, this.colors[1].pantoneC), hAsync("span", { key: '40e81ff1064c79bc1217d7548d9af3f0aa71820b', class: "f-body-02" }, this.colors[1].pantoneU))))), hAsync("eds-block-break", { key: '7748f6c8cc03b4e8107da154294263408238bc72' }), hAsync("ul", { key: '371c71de57cce47d517fbc5e070b5abc7249d1d1', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: '368f86411b9f0b09ade201b7ed95e2e571c92b86', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: 'e311b5b80115d467ffd03b222017d422def6c157', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[2].background
-            } }, hAsync("div", { key: '61b77e314f1b0ba1a2091c8095ec202532c18606', class: "grid" }, hAsync("span", { key: '03dab364cc0dfec33698c44a204c454fb541e212', class: "f-body-02" }, this.colors[2].rgb), hAsync("span", { key: 'e691950b5345a2ede462f4e83cca168bdeb9ec15', class: "f-body-02 w-full" }, this.colors[2].cmyk), hAsync("eds-code-block", { key: '0221d7e314a813dc2c5b79911951bca9c0b41b25', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '3a0a7685f28da21ad72e03fde2466ef261d732c6', class: "grid" }, hAsync("span", { key: 'cb7b332c10b45eb9fd5db2d3fd8042e2bad64466', class: "f-body-02" }, this.colors[2].pantoneC), hAsync("span", { key: 'a2ce20d6c1f79933e63286f21cf2a2b46bae7c77', class: "f-body-02" }, this.colors[2].pantoneU))), hAsync("div", { key: '22accd3b0973aef372c31e6e1f9098c20af0fe62', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, hAsync("div", { key: '7b8dfb5ee427559431a5ebb64d0fe62b0611e809', class: "grid" }, hAsync("span", { key: '607edea5d452ed3b6cde489eb1bd86d4b0fff9af', class: "f-body-02" }, this.colors[2].rgb), hAsync("span", { key: '6cdeef4b8a3c443274334cfd42c2793b54e1fe02', class: "f-body-02 w-full" }, this.colors[2].cmyk), hAsync("eds-code-block", { key: '0632e3bb77e36fe5dca4cc4177ff9cabd52a0139', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '0036eb061196835f1406a7e50aab44fcab32d308', class: "grid" }, hAsync("span", { key: 'c26f3a1e9a0ab48883e0e70986c21b11a0b7b014', class: "f-body-02" }, this.colors[2].pantoneC), hAsync("span", { key: '46f7a99fcfbf3aa8a6b9d03f4b3fe4733d1d2133', class: "f-body-02" }, this.colors[2].pantoneU))), hAsync("div", { key: 'f4c1504965dc6e26aeeb580f16b2934f3f5038df', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[3].background
-            } }, hAsync("div", { key: '20ac41e5ab5abf006915a588948b0a80ba6b6500', class: "grid" }, hAsync("span", { key: 'c45d31d03b5eed96970e573ffe9d6d7b0a4f55f2', class: "f-body-02" }, this.colors[3].rgb), hAsync("span", { key: 'c8615974f6fefcce9236f1dab2aa05acf79f476e', class: "f-body-02 w-full" }, this.colors[3].cmyk), hAsync("eds-code-block", { key: '4edca81579a78d5a981abd588d614e92b41e80f2', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: 'efb4443370dc4577f4bb0638f7189d8ebb41f7f6', class: "grid" }, hAsync("span", { key: 'e6859deb262bbb09411b23a829461a13bca7036c', class: "f-body-02" }, this.colors[3].pantoneC), hAsync("span", { key: 'a7b10ce34dbf351ed7c9ffddae8a078af2b2dfc7', class: "f-body-02" }, this.colors[3].pantoneU))))), hAsync("eds-block-break", { key: '1e7693f7830a8b23fbfe88a4db8ce86b8d0685f0' }), hAsync("ul", { key: 'e968be89adb2e35e19b3c6b373b6e12f4e746a16', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: '96c60c4a9e257a292782d9effc9f0c72abf11b9e', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: 'c4568e420e1aa059777280831c2384eab3d92bcd', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, hAsync("div", { key: 'be7223a1145d57111f1db9aff6ff362f6338e526', class: "grid" }, hAsync("span", { key: 'de3f52cc909b249e3bfb327a8d4404cf22d9f79f', class: "f-body-02" }, this.colors[3].rgb), hAsync("span", { key: '44ee6cf212e334ef7b825add5754288382d98cc7', class: "f-body-02 w-full" }, this.colors[3].cmyk), hAsync("eds-code-block", { key: 'e3f55aaa3015811c4186e09a68ec3c5fde3a8e0a', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: 'fd2196253e2d01363143862935eeac2b9e16ee4a', class: "grid" }, hAsync("span", { key: 'd27d7ed13497d0e3c81a9d01a02b4fa48390613e', class: "f-body-02" }, this.colors[3].pantoneC), hAsync("span", { key: '85f65a7bf51b56e03e17448eaf8a2b1cf67b13f9', class: "f-body-02" }, this.colors[3].pantoneU))))), hAsync("eds-block-break", { key: 'c4571ad26fc567e66106c8d4925aa1234cf6a343' }), hAsync("ul", { key: 'cd9d2007239b792d15a9f31242cec6748ee0962b', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: '9d668bd5fe1fa168996a878c1dca6da6c2575794', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: '46e2911bf0d340aabff6e2e3f374bd9d165c0ff9', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[4].background
-            } }, hAsync("div", { key: 'd6deb40f0bc0f42ba8dc5ce1f81f0ddffac1909c', class: "grid" }, hAsync("span", { key: 'dfe457e42121384072c1fa914a4b20dc4b838d01', class: "f-body-02" }, this.colors[4].rgb), hAsync("span", { key: 'ff18c95c23f62a02e56f017a3c4fd135942ca475', class: "f-body-02 w-full" }, this.colors[4].cmyk), hAsync("eds-code-block", { key: 'bd2c5dc66d42965991741eaa399c620dfd7ccd8e', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '95a9105cf2f1c2ce4f585d20cd3d7f51ab176860', class: "grid" }, hAsync("span", { key: '205d05eef3ead993524a70a6da8a1b99293d325b', class: "f-body-02" }, this.colors[4].pantoneC), hAsync("span", { key: '8bd0e5c38a50e61d1c4743b069ac33bbcabd6a90', class: "f-body-02" }, this.colors[4].pantoneU))), hAsync("div", { key: '1e23753de89b1954149cc3855dd18c35d8eff021', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, hAsync("div", { key: '9871887c8fdfb870081bd6811ec7d1345d903602', class: "grid" }, hAsync("span", { key: '417a74c81f179931fb935a979f2cd6b8d9d36a10', class: "f-body-02" }, this.colors[4].rgb), hAsync("span", { key: '6a4d66af1fc49a403eb3b9d618191752631912d6', class: "f-body-02 w-full" }, this.colors[4].cmyk), hAsync("eds-code-block", { key: 'f5b3dfafd77f41040fd364f12f9993eee6efa678', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '78b8cd5951f2c058bdc989ef9e8ecd33fd4e227e', class: "grid" }, hAsync("span", { key: '81c591df12b07254704c4c888e79ee795182aae8', class: "f-body-02" }, this.colors[4].pantoneC), hAsync("span", { key: '546eb21d683067f23c0c392413945c5ff59d0992', class: "f-body-02" }, this.colors[4].pantoneU))), hAsync("div", { key: 'a1d7d8ac8f18b76a2b0174be4e20a538ba58e836', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[5].background
-            } }, hAsync("div", { key: '89d94b65035bede7a8e6783ce12b28f0d19bc517', class: "grid" }, hAsync("span", { key: '68b5166da0440b8b71a353f112151f87ce5f0863', class: "f-body-02" }, this.colors[5].rgb), hAsync("span", { key: '5c5440685df35b5d7a46c3aaca50f34103d227da', class: "f-body-02 w-full" }, this.colors[5].cmyk), hAsync("eds-code-block", { key: 'bf98ce42ca5c85792f69233aa9339b76e404355e', code: this.colors[5].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: 'd3405eb9f4b55be2ca453857006b2e168f55b723', class: "grid" }, hAsync("span", { key: '7c5cc7a21f351c7054113feb2d08c73aa433b729', class: "f-body-02" }, this.colors[5].pantoneC), hAsync("span", { key: 'ab88dec48dc6bfbcf0ae6952bdc83898b9f3fe01', class: "f-body-02" }, this.colors[5].pantoneU)))))));
+            } }, hAsync("div", { key: '30ff0da22696dd631e21ddd8354b4fc0a54f430d', class: "grid" }, hAsync("span", { key: '7546e1a8e2ebaf41e2241dd536581308cc4a92b0', class: "f-body-02" }, this.colors[5].rgb), hAsync("span", { key: '650027eddd52b22d4e735ba459eb325e10f6c1af', class: "f-body-02 w-full" }, this.colors[5].cmyk), hAsync("eds-code-block", { key: '5b119196ead9e34bc4360c270f02bcc21e31dafe', code: this.colors[5].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '07af615883c1648cbca851527bf7ebcaef6ec1cf', class: "grid" }, hAsync("span", { key: '4cf871344f93b002d32022a270a7ff0ba5de7c92', class: "f-body-02" }, this.colors[5].pantoneC), hAsync("span", { key: 'e4240bbaed87c2a5c6eb717d186d6eca0e84952f', class: "f-body-02" }, this.colors[5].pantoneU)))))));
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -14840,11 +14931,11 @@ class GradientSupportPalette {
         ];
     }
     render() {
-        return (hAsync("ul", { key: 'cd8f1b760d9d12703e63d444206cd7cb8272dc23', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: '4e06317b161b310f1d0a6c03ec4511e30121a9d1', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: '09ee064b51f1f60eb94449a81889fcc1b04b034b', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[0].background } }, hAsync("div", { key: 'd03882aca184094d6bd6c7c1847fd825b5df391e', class: "grid" }, hAsync("span", { key: '56401b8b651fc59ab649017e24072b7aa9e66b09', class: "f-body-02" }, this.colors[0].rgb), hAsync("span", { key: 'f438f24aa6caee90e0aa8b45a8e3ef3905115165', class: "f-body-02 w-full" }, this.colors[0].cmyk), hAsync("eds-code-block", { key: '1185f4d1820c900e97e376aecfdb15c079bf47d6', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '81e189f2d4d59444419b4323595f233b5a7dd5c5', class: "grid" }, hAsync("span", { key: 'ed9c1690bc1a39a4ca10922d6954987025b75ab2', class: "f-body-02" }, this.colors[0].pantoneC || 'N/A'), hAsync("span", { key: '389c2782c0a19abdaa8bcb3bec35b08f7dc49699', class: "f-body-02" }, this.colors[0].pantoneU || 'N/A')))), hAsync("li", { key: '224ddf84a71da323318a93aed512785d765ff78c', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: '6f65b95fafa248d35f3bbc6b2ca1796e75d5c75d', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[1].background } }, hAsync("div", { key: 'a5f7ce54255461e8955b770ba045873c4337317e', class: "grid" }, hAsync("span", { key: '344026348686a6c356012bddcb6019d2e33d2d1a', class: "f-body-02" }, this.colors[1].rgb), hAsync("span", { key: 'd21a077ed8b57fc7b03d3c9e8aad84a1d6921b7e', class: "f-body-02 w-full" }, this.colors[1].cmyk), hAsync("eds-code-block", { key: 'dfc3a8574e020c3e140a582e2f6548d7df18fc2f', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '370a21f614bfa27de7cd920d33a4bda8271cb9b2', class: "grid" }, hAsync("span", { key: 'dcd05c27f71e94ab52ab88647d7c16bdd8cb6824', class: "f-body-02" }, this.colors[1].pantoneC || 'N/A'), hAsync("span", { key: '3f596aa4db89c9444ab19a1fe6130532ea7a18de', class: "f-body-02" }, this.colors[1].pantoneU || 'N/A')))), hAsync("li", { key: '4360df4a8f5439fef848bef1aff0ba7e907c0873', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: '7559365a22a412e249f860b2ccd42a40c686575e', class: "effect-height flex items-center justify-between p-16", style: {
+        return (hAsync("ul", { key: '19fa0d13f425559a057eac44251af122fa28d8f2', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: '04b62c9e98c068d300d76584eee86c7a441d7308', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: '51b00b545676c2f755f5209c39d299bbe5bfb3eb', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[0].background } }, hAsync("div", { key: '0f9074bc3de0bc69e7500ea57d43a454af8e453b', class: "grid" }, hAsync("span", { key: '41d0e3badfab9220b9ef6c1b3fe089238cb1ee4b', class: "f-body-02" }, this.colors[0].rgb), hAsync("span", { key: '8f02aa05d411d781215b7b41234f5ea816ed5af8', class: "f-body-02 w-full" }, this.colors[0].cmyk), hAsync("eds-code-block", { key: '08ec618c5fcc6ebeb7d92c5dda2fb58c7af26293', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: 'e9aaf995a542a3d4497f4e2129fa8e9b99d0e8f1', class: "grid" }, hAsync("span", { key: 'ab62f5c7d81f83570bd25f9ae8c0872bdffdee49', class: "f-body-02" }, this.colors[0].pantoneC || 'N/A'), hAsync("span", { key: '20d1b270e55f172373e498b96fde480e75436893', class: "f-body-02" }, this.colors[0].pantoneU || 'N/A')))), hAsync("li", { key: 'c12be45607f611fb7ef295a1942949ed4197d3c2', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: '82119d77e7b21d5fff3dbfb2ae6352417f927397', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[1].background } }, hAsync("div", { key: 'c76edf55a482aeb8fcdc6d7c442337db086d2874', class: "grid" }, hAsync("span", { key: '5a828a7f6c8ea95afe08e220b4474d09abb8ba38', class: "f-body-02" }, this.colors[1].rgb), hAsync("span", { key: '39ecebe4bdebf12b27bad8267a20bdae7bc91c5c', class: "f-body-02 w-full" }, this.colors[1].cmyk), hAsync("eds-code-block", { key: '478d7cf0b85dc6fd125a4e879628737a89b34ef9', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '639acf9fb8e989bc42b18908ba6e063f2943a619', class: "grid" }, hAsync("span", { key: '604c16acc523e86e355a4d9cb21b577d4305b153', class: "f-body-02" }, this.colors[1].pantoneC || 'N/A'), hAsync("span", { key: '681d72b5503e3e4886661879b73d611238802be0', class: "f-body-02" }, this.colors[1].pantoneU || 'N/A')))), hAsync("li", { key: '13b78355e265c0ae0b69af342d7c335349bf9656', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: 'eb7de148459e79667b8a0abea79f29c0a29f4c04', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[2].background
-            } }, hAsync("div", { key: '3027a68e48323ad82a7b9507902d43d3ebd5a9b5', class: "grid" }, hAsync("span", { key: '6889a4ba793f3f82c90e2b1b87b90d1d1e9fc551', class: "f-body-02" }, this.colors[2].rgb), hAsync("span", { key: '688e28e641c900a105605e8f6dd65efe8d1c663a', class: "f-body-02 w-full" }, this.colors[2].cmyk), hAsync("eds-code-block", { key: 'f344601cb7b1c0210478c4c8297365655d1db5b3', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: 'bbd401b28071a53db3e2648545c6de8004da98cd', class: "grid" }, hAsync("span", { key: 'e7eb3868b58336671fc8862b2dd67dd8c664b6d2', class: "f-body-02" }, this.colors[2].pantoneC), hAsync("span", { key: '97c2788da2fed4b22f11057d13ea2bd6f6041f9c', class: "f-body-02" }, this.colors[2].pantoneU))), hAsync("div", { key: '8ea814cb2456d959a510b3bf2fe1348a796bf390', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, hAsync("div", { key: '8053120d580f111fbb1f3d9554567892a50a140c', class: "grid" }, hAsync("span", { key: '0e4c72fcb479d8ce3625443d4c09430f905c8cf4', class: "f-body-02" }, this.colors[2].rgb), hAsync("span", { key: '1cc8f9ecd5f3c753d227d5d8f0b8a79b218167b9', class: "f-body-02 w-full" }, this.colors[2].cmyk), hAsync("eds-code-block", { key: '68b0940f2317af55229b792088abe9021ece3382', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '4213b6f6e59300a79d01108a0a530042c2eb164b', class: "grid" }, hAsync("span", { key: '3942f091461176f14e7115d4ec26454dc84a77af', class: "f-body-02" }, this.colors[2].pantoneC), hAsync("span", { key: '7d56bffc0bbcd7fedc2b429eda6cd843ce75084c', class: "f-body-02" }, this.colors[2].pantoneU))), hAsync("div", { key: '6e54e4369bc24fe897372626d2b8f524c899979e', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[3].background
-            } }, hAsync("div", { key: '4a223c4bad5b21ff8f80dcbca228a66500ab6a87', class: "grid" }, hAsync("span", { key: 'acfb82921e62c37dc091a10b2f093c41d50c32da', class: "f-body-02" }, this.colors[3].rgb), hAsync("span", { key: '1d8a0866567e954772be7fc950579a62aa719ade', class: "f-body-02 w-full" }, this.colors[3].cmyk), hAsync("eds-code-block", { key: 'e8fe52aefd86c81713f08bcd1cb8f27789bd9ca1', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '9925c5173dd15f16fe2b08eb522adf0d8ac37ef1', class: "grid" }, hAsync("span", { key: '78f7131ca9a960688c8957a79c4033573f7cfee1', class: "f-body-02" }, this.colors[3].pantoneC), hAsync("span", { key: '0fb4a0cfec9531e0e00b2d749d66ae6696a6db4a', class: "f-body-02" }, this.colors[3].pantoneU)))), hAsync("li", { key: '017c338c94189ad75c79ff9db903d18246a4af80', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: 'd75b7e97684b6ffe19bfcfdb8315f771c42de0f1', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[4].background } }, hAsync("div", { key: '63b0fc0c825edcba9f633a5b6972fdd72574ce3b', class: "grid" }, hAsync("span", { key: '389132cc0be0358b4805356ea216a9cfd4297514', class: "f-body-02" }, this.colors[4].rgb), hAsync("span", { key: '902d41927973b8bf690cda7ca701a103f91dd511', class: "f-body-02 w-full" }, this.colors[4].cmyk), hAsync("eds-code-block", { key: 'f9fffe844840148e801e3b1c1c2891b2bec96bf7', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '7ecb1dc3d5e0c63cf191b1300f19cd88489e9bed', class: "grid" }, hAsync("span", { key: '9233731334557d6b37d96d9d7e328cb9b24e2766', class: "f-body-02" }, this.colors[4].pantoneC || 'N/A'), hAsync("span", { key: '5030f6c36dd0e07785c0f11092c9452d80763101', class: "f-body-02" }, this.colors[4].pantoneU || 'N/A'))))));
+            } }, hAsync("div", { key: 'c10240910d81584325f5fb8fe99ea2bdf471fcca', class: "grid" }, hAsync("span", { key: 'b463043e7fcec06836ea668caaf8f88d662c0b50', class: "f-body-02" }, this.colors[3].rgb), hAsync("span", { key: 'd4cb38555b59b84b8c28e6f94a194198237087d8', class: "f-body-02 w-full" }, this.colors[3].cmyk), hAsync("eds-code-block", { key: 'e11e259fdf1b28d83f425bbb627c3cfb4a4eb80b', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: 'bdd93a1bd8f270ddb2ccc6a8ab0643092d4c57c9', class: "grid" }, hAsync("span", { key: 'a9874a23df6404e94c467322a416d161ae07a31b', class: "f-body-02" }, this.colors[3].pantoneC), hAsync("span", { key: '84fc3e06a694fc63d991a84f92e1ef4a74ef3db8', class: "f-body-02" }, this.colors[3].pantoneU)))), hAsync("li", { key: '43d5a6b41ab34621e54769e32cdb896e09e4f94a', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, hAsync("div", { key: '4cd11ea97f536e8eb36b04aca8b3da178d282817', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[4].background } }, hAsync("div", { key: 'bc41de6560f69b0818f9655430099d80fc65146a', class: "grid" }, hAsync("span", { key: '8d075abf0d186b80377dee9f4ccb3770e9c16ab3', class: "f-body-02" }, this.colors[4].rgb), hAsync("span", { key: '78d0f7796b14ed72742e5f4cb88688179b0f1630', class: "f-body-02 w-full" }, this.colors[4].cmyk), hAsync("eds-code-block", { key: 'ddec227e11cb2b73e14ba7b5600f18d19788bc31', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), hAsync("div", { key: '5f2ea3156897994045de1b86bc1cf77230a5a93d', class: "grid" }, hAsync("span", { key: '72b20e3cd6bea5de93311ee02d245570f7164ad4', class: "f-body-02" }, this.colors[4].pantoneC || 'N/A'), hAsync("span", { key: '48e0fc418cac0932891c20266099c9f6293f366a', class: "f-body-02" }, this.colors[4].pantoneU || 'N/A'))))));
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -14898,7 +14989,7 @@ class IncorrectUseOfColors {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync("div", { key: '99f72ce6be806d58cdbe053d86a07e7769e7c298', class: "container" }, hAsync("div", { key: '4689bc35f56681d07747158f45bed8960bd764bb', class: "mb-8" }, hAsync("eds-alert", { key: 'bda983921ff3779dc947d13ff7b3c4f0509154ea', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" })), hAsync("div", { key: 'ef02b05fb6fb761cae3cc5120478d9670ae65508', class: "flex" }, hAsync("div", { key: '968ccc8bc1acec2856325c921d737f0ac2d0e26d', class: "w-full" }, hAsync("ul", { key: 'aafe0547a6f6185216cf5ba08cca1e5ed97f7fb8', 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: 'f8af94ee21c7ed37b177fa3b5285e9bfe76e8e46', class: "w-full" }, hAsync("ul", { key: 'ef52e37263e0bfda9d631f7aa6abe2074cbebe78', 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: 'd09d8204f4369476882f0614e96c07c953b34f54', class: "container" }, hAsync("div", { key: 'a80342ee08961192aa3a664f66406b220cd208ed', class: "mb-8" }, hAsync("eds-alert", { key: '242c9bae130e9a7487412da4f75ab30a2db49335', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" })), hAsync("div", { key: 'f9d60933f46189f848938a5beb1ca5fadfa84934', class: "flex" }, hAsync("div", { key: 'd7f33f14834c5a97aafbdb447f723e1a20b5e498', class: "w-full" }, hAsync("ul", { key: '0e3b7baf000534530164f373884a6957419539a7', 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: 'd0422452dbb56de94fee33562b07867fb9bfd6ac', class: "w-full" }, hAsync("ul", { key: 'e5daf06bbcec1227ccf03b3f3a8a6016a33c289c', 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,
@@ -14921,7 +15012,7 @@ class LogoSpace {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync("div", { key: '715c9aab5f553f14a183efcec753ac3a7d2a6ef7', class: "container" }, hAsync("ul", { key: 'd552744d7c502654c1863a0e2bfe939aa5ab0447', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: '06ea3756aa8416e11a0f8c3995e70112808791e8', 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: '186172fddc2a100fb5f757ce7175501f7b838896', class: "logo-container mx-auto w-[300px]", innerHTML: vLogoMargins })), hAsync("li", { key: '6131a46a1f7d4efac1feb05ffbd88ca35ba07d08', 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: 'df5acbe2348d1fcf069ddb55ce8c7180ecea0959', class: "text-center mt-16" }, hAsync("p", { key: '65b120c29fd408808ab2b6ca3e038915f386c033', class: "f-body-01" }, "To ensure legibility, follow these minimum size guidelines:"), hAsync("eds-table", { key: '137055ef0dd2e79db8dd0cfac8c297385c693338', 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: 'cbaf5b78b83fa1874d2555ae07dcd849007d9b28', 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: '2ff3cdb12cbd61fc4053418d1a678409c05755f2', class: "container" }, hAsync("ul", { key: 'abfc33d14841a457959f5b15e8542465e8a0f883', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: 'd81281a2d146a19d036678cb794f5224236ce521', 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: '9d3774468a2b09098b84a8354683b2c6940491f5', class: "logo-container mx-auto w-[300px]", innerHTML: vLogoMargins })), hAsync("li", { key: 'cb4d4a3ff951b25fba627bd98cc1319dcb803158', 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: 'fa2f563d8ad8100b6d12c626f41b4552d99c743e', class: "text-center mt-16" }, hAsync("p", { key: 'bda0bb099f9e82b9462bee494f7d417bdd9984b9', class: "f-body-01" }, "To ensure legibility, follow these minimum size guidelines:"), hAsync("eds-table", { key: '92b100f67e3a7dd84d817b5dbc8cdfe76d6b2408', 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: '4d6ad4aacf24c4386493fe74ed928321627602ac', 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 {
@@ -14945,7 +15036,7 @@ class LogoVariationsHorizontal {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync("div", { key: '42b4022e993bb4e340a4f930706ed61d487856af', class: "container" }, hAsync("ul", { key: '368cb376390f9cd4f311c34f35e227916bccc3aa', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: 'c144cf24fe85d4ca731cbcb47aee2ae6bbfb9500', 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: '9ebdf9fae31f6370bd469cf4c3964e5fa5dae53b', class: "f-body-01 text-center my-4" }, "#1 Coloured"), hAsync("div", { key: '347dfdc62a77f9bc2774870d0bce4803a9def6a1', class: "coloured" }, hAsync("eds-logo", { key: '642ed4f4dd0720b457e8871d8d39a3e6f8817919', type: "no-bg", href: "#" }))), hAsync("li", { key: '4b97f489fdc512de54c0f2c0bbf206f6d64fec57', 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: '217c5485599de77021d5b008952a7463a95e8d22', class: "f-body-01 text-center my-4" }, "#2 Black & White"), hAsync("div", { key: 'c3e7f3b4b770662cc83c261af241306e8449cddb', class: "bg-default" }, hAsync("eds-logo", { key: '1d0a90da209d8dbc28b91ccd3d3e112ed189428d', type: "black", href: "#" }))), hAsync("li", { key: 'f8879a7c790e1b5f0555d6d764e828fbc6a4e263', 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: '93f6729dc8f3e4cf0257e57c4b034e94cfefa99d', class: "f-body-01 text-center my-4" }, "#3 Dark"), hAsync("div", { key: 'd45eaff596387f93aabc377fa96f1b386b8c5e42' }, hAsync("eds-logo", { key: '4a8209824ad3dcec06be65303dc9f0cf01613a8f', type: "color-white", href: "#" }))))));
+        return (hAsync("div", { key: 'd8357d0a4234d0c411881928a6daabdda928f272', class: "container" }, hAsync("ul", { key: '30e3d8efd0f5fd173f48c6e1e02005e7da813ce9', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: '751d2de97fe8774614b15de1feda7f59c8da2ef0', 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: 'd0ba9b152a505a591cabf5a54b720b6e718173e0', class: "f-body-01 text-center my-4" }, "#1 Coloured"), hAsync("div", { key: '81b91d5c53a7ac440364083dd06222f32bf5dc51', class: "coloured" }, hAsync("eds-logo", { key: '921cac572b2da3871eff8c2912de79babb909c91', type: "no-bg", href: "#" }))), hAsync("li", { key: '74cebe6855e0e23d95a3ec74927b569c29b34d07', 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: 'ed5484e8ff8f85251f85a61fb53d21639dbb914b', class: "f-body-01 text-center my-4" }, "#2 Black & White"), hAsync("div", { key: '7a5f1894fe514a323e8955c01d1ab071187c2a5c', class: "bg-default" }, hAsync("eds-logo", { key: '9a072cdaf4f7f901b8cb91d3fe9bc85ddb0e8eba', type: "black", href: "#" }))), hAsync("li", { key: 'ea3f60807f78264c6305061dc292d1d17f7fd173', 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: '530e8f71e5d6f56a9f8981ad454ecbd00162030e', class: "f-body-01 text-center my-4" }, "#3 Dark"), hAsync("div", { key: 'b74d2cfb21a8d6f8288444cfed8ba9dc80d929b7' }, hAsync("eds-logo", { key: 'f31c76f4f3e3f03f02d2712a272ba893f7832a7a', type: "color-white", href: "#" }))))));
     }
     static get style() { return LogoVariationsHorizontalStyle0; }
     static get cmpMeta() { return {
@@ -14977,7 +15068,7 @@ class LogoVariationsTabs {
         }
     }
     render() {
-        return hAsync("div", { key: 'ac936a8594bc4f5f8573da7ac2751103fe287e48', class: "container" }, this.renderContent());
+        return hAsync("div", { key: 'a7e8981363410d2a325478150990092516e74f2e', class: "container" }, this.renderContent());
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -15004,7 +15095,7 @@ class LogoVariationsVertical {
         this.type = undefined;
     }
     render() {
-        return (hAsync("div", { key: '9384d3b91a4b09c780a1bb8d6b49f441f7a7a22a', class: "container" }, hAsync("ul", { key: '60a89752afab4d76da7a3fc070bff2f7cc98d4b0', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: '6a8b35e2eaa5b0b5f4aa233fbcaa2a21b1e340c7', 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: 'f9893c662898f97567d4a56eaf2d5a620e087743', class: "f-body-01 text-center my-4" }, "#1 Coloured"), hAsync("div", { key: '6fad2d66a3e34c11344210c3b8d92279d566f866', class: "mx-auto coloured w-[300px]" }, hAsync("eds-logo", { key: '66740c018c8f3aa3fbeb2cab8c392713b7e004ed', orientation: "vertical", type: "no-bg", href: "#" }))), hAsync("li", { key: '7a5a2ee2fab87b6ea7892134b5b1fb939cc5665c', 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: '79bd10816b9dfe8ab28d444d7dfb4b361afea94f', class: "f-body-01 text-center my-4" }, "#2 Black & White"), hAsync("div", { key: '10f00983923848d8e89b6d7c7990972a76fbaf80', class: "mx-auto bg-default w-[300px]" }, hAsync("eds-logo", { key: '3e10d0887921355c0974ad8a4c04cc86e901440d', orientation: "vertical", type: "black", href: "#" }))), hAsync("li", { key: 'eeaabdfa7d788647845d5488decfd06815fc2c47', 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: '1b058b1513f09eb8a1043ab3ff8a4cda28246576', class: "f-body-01 text-center my-4" }, "#3 Dark"), hAsync("div", { key: 'bd3698e6210ecbe356f0c334a983b21ef6b7b5e3', class: "mx-auto w-[300px]" }, hAsync("eds-logo", { key: 'c9321f6b80b68e74a02dbf77ba83f2bc2567c538', orientation: "vertical", type: "color-white", href: "#" }))))));
+        return (hAsync("div", { key: '983decc613dcf98cc903eb0220e4604e6eaff4d0', class: "container" }, hAsync("ul", { key: '4c76eb52168bc862e3d9ba4afcfce2feadb92ab8', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: '4e51746424e45dcae4bd01fe5ff30a9634333e2f', 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: '18227e8430d94259740bcbcfe100540831d2a857', class: "f-body-01 text-center my-4" }, "#1 Coloured"), hAsync("div", { key: '374be81aba7532670ff470026317a49d78f54762', class: "mx-auto coloured w-[300px]" }, hAsync("eds-logo", { key: 'fdfe6b1cc100dff3a53c9065bc16803043df97e5', orientation: "vertical", type: "no-bg", href: "#" }))), hAsync("li", { key: '5aaf638a69109964188bbcad753f420177859107', 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: 'aadc470260f28236f3f4628ebf5c7261915f1fb2', class: "f-body-01 text-center my-4" }, "#2 Black & White"), hAsync("div", { key: '3fed72cb0a3f38c6619d78a6995746a3cee5ee0e', class: "mx-auto bg-default w-[300px]" }, hAsync("eds-logo", { key: 'bcf169b31b33615c82b768f20a0b648236644c65', orientation: "vertical", type: "black", href: "#" }))), hAsync("li", { key: '62f0c6803ca0ec6090db435388da6754054c2007', 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: '32813722dca892164d108df2ef0a3048cb4ebbbd', class: "f-body-01 text-center my-4" }, "#3 Dark"), hAsync("div", { key: 'e33669ea223f6d923d71e2a8568140ae5ef739e3', class: "mx-auto w-[300px]" }, hAsync("eds-logo", { key: '4176811098a57727ed30bfc1db82fa16aa06bd6c', orientation: "vertical", type: "color-white", href: "#" }))))));
     }
     static get style() { return LogoVariationsVerticalStyle0; }
     static get cmpMeta() { return {
@@ -15031,7 +15122,7 @@ class LogoWrongUsage {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync("div", { key: 'db92af6471b73d6342c4c218ef26b7439e72e9c9', class: "container" }, hAsync("ul", { key: '57239717b1f53107a5bfbc94794568ea9fe3b392', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: 'c32313633ff55e2fbb28bca75f4d0e9bc2eb85d0', 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: 'ec127af6b1b3c5e0aed8c4c5bf6fb34166a50e89', class: "mx-auto no-other-bg-color logo", innerHTML: hLogoColor }), hAsync("p", { key: '130ae0f920e4b4231d00bf46804176f9c2d2750a', class: "f-ui-02 text-center" }, "Do not use with backgrounds that make legibility difficult")), hAsync("li", { key: '4efd7dd8cbc1fdefd65a94891c465373ac05391e', 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: 'ea7fbe7c25663e944d80d1feb52ab972edf73aa8', class: "mx-auto no-other-color logo non-brand-color", innerHTML: hLogoColor }), hAsync("p", { key: '373939ac376d7f95a77e84e35b8c2773cecca0e0', class: "f-ui-02 text-center" }, "Do not apply other colors")), hAsync("li", { key: '23351f40af859f9a36b108db8c95dbdefe7f889a', 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: '6606581d39d6b1834eebc720be8695bec9052c5a', class: "mx-auto distorted logo", innerHTML: hLogoColor }), hAsync("p", { key: '10d459c1e0db7351b8d247bb0ab2c3db1f39cfc3', class: "f-ui-02 text-center" }, "Do not deform the logo")), hAsync("li", { key: '9253a8fdab1547c0a9282e44d7dfb586107c0916', 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: '7db0f94ca0d2a7c6b3cde529028c2789794b31b5', class: "mx-auto effects logo", innerHTML: hLogoColor }), hAsync("p", { key: '39280d53b73bb6ad80d3398e508941604f4fc856', class: "f-ui-02 text-center" }, "Do not apply effects")), hAsync("li", { key: '24d87e264048c1f675cc0182c6dbf049af15f622', 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: '35cac43885a2364650ab3e758071b1fd685019fa', class: "mx-auto rotated logo", innerHTML: hLogoColor }), hAsync("p", { key: 'cd3d762cd6889f764bedc6b4ccd241e1b52413f6', class: "f-ui-02 text-center" }, "Do not rotate the logo")), hAsync("li", { key: '0a5c20a333830b85c2943b44c3ad1c3066c582cc', 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: 'e2ced6578e0ea0574b1025c708061436beaa0c32', class: "mx-auto outlined logo", innerHTML: hLogoColor }), hAsync("p", { key: 'e41cf94b8ba85c372fe3118497a61f5fd9d127a0', class: "f-ui-02 text-center" }, "Do not apply outlines")), hAsync("li", { key: '87b548c1183299d29b14e3159ec712e27e72632f', 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: '1a96f1f9ffa1d9c3e29fa3c107893d440f259922', class: "mx-auto" }, hAsync("div", { key: 'a2cfab02c9328045d9833fa143d53cdb5cc249fc', class: "bg-accent p-16" }, hAsync("div", { key: 'fee8c2a733e1822b1b97db56f6b835a9694ee071', class: "text-inverse", innerHTML: hLogoColor })), hAsync("p", { key: 'a978cd92ca70c5dd3437e251e603bc33099bb250', 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: 'fa573cdaaa0d55c820b5a355bff48d5f1d10544a', class: "container" }, hAsync("ul", { key: '5c1941d3c45fa4814ffbdfaf30af106542862802', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: 'fd02c67fbe23ebb78289e5281c5b4917a44c950e', 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: '246527a7926c377c287a3c8073b06952b54dc694', class: "mx-auto no-other-bg-color logo", innerHTML: hLogoColor }), hAsync("p", { key: '88ebc748214a558e6cee28b8624f287de2faf80c', class: "f-ui-02 text-center" }, "Do not use with backgrounds that make legibility difficult")), hAsync("li", { key: 'dbf4655e3bbbad7566f64f5b8eb474c749967c38', 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: '5d2c9c916bc81ce831daf99c6293024aa9b0b2f0', class: "mx-auto no-other-color logo non-brand-color", innerHTML: hLogoColor }), hAsync("p", { key: 'f9a37e0a587b60bf607efd2e1f3aa4114f67ef33', class: "f-ui-02 text-center" }, "Do not apply other colors")), hAsync("li", { key: '3e1126e6636e0064ce852cc4249a684b77d7ba0a', 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: 'a1eb4d8ea7764734f24b39cb95b36d6718f331a3', class: "mx-auto distorted logo", innerHTML: hLogoColor }), hAsync("p", { key: 'e3d0156ec563c657c03beaa61a7ae068e78df09c', class: "f-ui-02 text-center" }, "Do not deform the logo")), hAsync("li", { key: '062a45841b978d79fe82e5773ba82c98e8f9eb6c', 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: 'd0f276a91bf1ea13b4f482e39e9f83b7ef3f2593', class: "mx-auto effects logo", innerHTML: hLogoColor }), hAsync("p", { key: '62f67b5f28839a5bb3706e78004c1989feced677', class: "f-ui-02 text-center" }, "Do not apply effects")), hAsync("li", { key: 'c4d0025e06c8385935a4b6162d65f78bc3d7b94d', 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: 'c6118e7d56abcf4a54f6f590d9a77a9397fa3209', class: "mx-auto rotated logo", innerHTML: hLogoColor }), hAsync("p", { key: 'a6c71000e3cf8b6d3a28c8f8c0df0840fdf2a749', class: "f-ui-02 text-center" }, "Do not rotate the logo")), hAsync("li", { key: 'd558e277275a305f3d491eba94aad8c1e7eec471', 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: '56947add9521b76a88ea05f8f64b6f0f656a9863', class: "mx-auto outlined logo", innerHTML: hLogoColor }), hAsync("p", { key: '0de198ca711a32e9b0f6ff7275af9dc2bce3c1b6', class: "f-ui-02 text-center" }, "Do not apply outlines")), hAsync("li", { key: '12b7c15e994ae6b40041da68eaa609ee0ec499a7', 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: '9ef38af84bee3b83b04f881e6481769fc39991ff', class: "mx-auto" }, hAsync("div", { key: '7f793491cf76a2c937ab0ca820dfd3f2a5779728', class: "bg-accent p-16" }, hAsync("div", { key: '60bfff8e962a543dcda5db9d1bdf75a3702f8b38', class: "text-inverse", innerHTML: hLogoColor })), hAsync("p", { key: '8a0a6a43def963fd5bd00e857ab7e21d60e54454', 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 {
@@ -15075,7 +15166,7 @@ class SvgRepository {
             icon: { format: 'svg' },
             name: { format: 'bold' }
         };
-        return (hAsync("div", { key: '7182d9e62bbee54fe4787d4fdd00e454d4f9df44', class: "full-width" }, hAsync("eds-table", { key: '4f9e0681ce92a66ca09fd933663caf465208306d', "table-data": JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true })));
+        return (hAsync("div", { key: '36ab796174ab215a5e8f834f0d6291853305e732', class: "full-width" }, hAsync("eds-table", { key: '31fca470f340fa54137887ef426f4f7e1fc72f73', "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; }
@@ -15332,7 +15423,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: 'b8b778fe87179f77bb71705d89026c500b0293fb', class: "w-full mt-28" }, Object.entries(sectionsToDisplay).map(([sectionName, sectionContent]) => 
+        return (hAsync("section", { key: 'c5a0dc7f4e58c77624481262b1a6ac31df5425ee', class: "w-full mt-28" }, Object.entries(sectionsToDisplay).map(([sectionName, sectionContent]) => 
         // Only render sections that exist in `colors`
         sectionContent ? this.renderSection(sectionName, sectionContent) : null)));
     }
@@ -15365,7 +15456,7 @@ class TokenRadii {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync("section", { key: '584f5f90e1e3813692870fbd8fd382956729dbf1', class: "w-full mt-28" }, hAsync("ul", { key: '81786b7835d62739d6ec034609e77209e15e3b38', 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: 'd0e212f61414068b55b2ce1a3d9c7c2a51743908', class: "w-full mt-28" }, hAsync("ul", { key: 'f656822bfc1a95bb4435eec2db9573e4362d1c59', 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,
@@ -15394,7 +15485,7 @@ class TokenRatios {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync("section", { key: '255775984f1d0edd52f48814776dfb5739b4885e', class: "w-full" }, hAsync("eds-section-core", { key: '7fd28e74db00800fcaa4adb13dd6b0b9cace371d', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, hAsync("ul", { key: '1e4c0af9a699e69c5bc6c86df821c457bb20614a', 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: '0215729c6c798288f74b3e9a589763c8a71c6fd3', class: "w-full" }, hAsync("eds-section-core", { key: '9ac3c1b933b7bb7cc6c8dd9aeface59ba3646750', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, hAsync("ul", { key: 'd4ae2c487aa2402740dfd1465823fe3d04c19e18', 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'
@@ -15436,7 +15527,7 @@ class TokenShadows {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync("section", { key: '8ca055cb3616c9bc3f6e8c1032671ff53a540156', class: "w-full mt-28" }, hAsync("ul", { key: '7b72868285aaffe0f31628b5ab142e39aaccd964', 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: '2f8e9eef279ee176ba1c72660181a4a36a184985', class: "w-full mt-28" }, hAsync("ul", { key: 'a5ddc9f6faab20c73b6dbb08364925d3b221e848', 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,
@@ -15456,7 +15547,7 @@ class TokenSpacing {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync("div", { key: '9967174337c771b175eb51d9cd77ec227071178e', class: "w-full" }, hAsync("ul", { key: 'db8df572ea997ea83600cb522c761ec5c99788bc', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: '25a7b31970e56ce8ff62c81a69daac121984d9d6', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: '1a1dfa005e39237c2fedb210c0082293770387c6', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: '473024ed6927d1a140eee0e021af92790c3ec5b0', class: "spacing-sample m-16 bg-strong" }, hAsync("span", { key: '7b691bf830943134160396ddcd8f71e419eb29e2', class: "f-body-01 text-inverse" }, "Margin: 1rem / m-16")))), hAsync("li", { key: '38f1d4d7e78b1efdbc55cf732b6be2ac3a62b5b7', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: '3a0fc8cdfa13bf0998a4829c36a74b17a6ee2314', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: 'ec730379e1041a68c9d980bb6b5d4b16560debb0', class: "spacing-sample ml-64 bg-strong" }, hAsync("span", { key: 'fd6f3ab787f1d43fb0b060e8408a1464eacd9875', class: "f-body-01 text-inverse" }, "Margin Left: 4rem / ml-64")))), hAsync("li", { key: '60a45420ca9cd7f4dab1524c8d6be31b39295b0c', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: 'ec433621396341959df05dd4becf2844c4266ea5', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: 'e2ae2d3a3f0eb5226fae09d70eff099ed79ca0e6', class: "spacing-sample mt-32 bg-strong" }, hAsync("span", { key: '1da10931bb4dae62a1a1c020c89463634a3c1630', class: "f-body-01 text-inverse" }, "Margin Top: 2rem / mt-32")))), hAsync("li", { key: 'f2f6ff5c992df7d4d426a3488cb7aa7ad9b7bc85', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: '23700500e04f2ec99fb5329092b7e430f7ac4274', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: 'bc304e082326c02787a62681fa86d20382fbb2d7', class: "spacing-sample p-32 bg-strong" }, hAsync("span", { key: '32692a307c58603ac232bb1004b88e0b5bff0c3d', class: "f-body-01 text-inverse" }, "Padding: 2rem / p-32")))), hAsync("li", { key: '6fc5032427724389d29d200347e3f5de984d6ec5', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: 'f66687c53866291f4f455153e34813d53bbb6d68', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: 'c4305cf37d1f08f50be085664d9a4da0c4859805', class: "spacing-sample pt-32 bg-strong" }, hAsync("span", { key: '4bd0c2056950a34d119c11ffd04e1dce1b8136c5', class: "f-body-01 text-inverse" }, "Padding Top: 2rem / pt-32")))), hAsync("li", { key: '67053133a6c121e02b7cab1da4cf4bc025dcc28d', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: 'dc7c1198e284eb0d71d183017e99fca72c3fb2a7', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: '3e69f16b8673007197f18b736e07a9e2c86e7eeb', class: "spacing-sample pl-32 bg-strong" }, hAsync("span", { key: '5a112de1bf2ce66ea278da76b8890aff02cce8af', class: "f-body-01 text-inverse" }, "Padding Left: 2rem / pl-32")))))));
+        return (hAsync("div", { key: 'e01032fc0640d466fbf25d52c786c2ad09282deb', class: "w-full" }, hAsync("ul", { key: '067499a0d422c6759393a729018a0e428ac5bb73', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, hAsync("li", { key: '18811cd88f3627f824c09ed57522b624c905704a', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: '6f810ada1266d71181c85ae01f6d0f03d74c5d62', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: 'be8c8193dd759eb651230904f482bdd29ece17d9', class: "spacing-sample m-16 bg-strong" }, hAsync("span", { key: '3275ae8d2dcc26a097fcec9e47e865d122e8a7a0', class: "f-body-01 text-inverse" }, "Margin: 1rem / m-16")))), hAsync("li", { key: '1501280856acd0f86ed6d18deb2994e2b938d550', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: '9c6bd09fb408bf28e1ff7259ee82858657055d53', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: '66ce0e318e1ef01c95634678d8dad929261c3559', class: "spacing-sample ml-64 bg-strong" }, hAsync("span", { key: '746c47d3d838c4a2afc3e33f97ea92e4152505a4', class: "f-body-01 text-inverse" }, "Margin Left: 4rem / ml-64")))), hAsync("li", { key: '1e743a6b9907f8d533b6bb0e47204ca9f2ac1540', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: '9b127a0fc072a67d2a03af42718407f7c570981c', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: '603d387bfc95e7eaaa688d9bed69d17dcdbeb023', class: "spacing-sample mt-32 bg-strong" }, hAsync("span", { key: '19105f04e3571991899dcd237a2e88285200fa2a', class: "f-body-01 text-inverse" }, "Margin Top: 2rem / mt-32")))), hAsync("li", { key: 'a4bba328ebdb74767c06aed1ddf90251ff53c774', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: '8c0ddf065902880ea676a0178d8d384696d11d44', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: 'c73eb82ac1b447d2441be39f1e07e4864bba2a49', class: "spacing-sample p-32 bg-strong" }, hAsync("span", { key: '6c76e373c0827ed4449abfd0fa1b69db2e02ef10', class: "f-body-01 text-inverse" }, "Padding: 2rem / p-32")))), hAsync("li", { key: '23699817570e914c03849e8bc5ab3c72b732470c', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: '253d94e4ddabd622302bbc38a5e866b9a9dc8826', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: 'c366056f299a7fd53eb589cedbf8f40aa996d032', class: "spacing-sample pt-32 bg-strong" }, hAsync("span", { key: '22b94a1f3f4605af8f11dcd10b03f112ad426798', class: "f-body-01 text-inverse" }, "Padding Top: 2rem / pt-32")))), hAsync("li", { key: '18418c7ea84aaaefe187e484774e96d5233946ab', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, hAsync("div", { key: '953b9ebfb47560f768bdf606fdc455eae18fa351', class: "container p-8 item-center border-2 border-soft" }, hAsync("div", { key: '1ee32fc2918a078e421e0641c84e76c2bf48e839', class: "spacing-sample pl-32 bg-strong" }, hAsync("span", { key: '15f50b76c805eb9fc1610d8027cd710f6c8c89b4', class: "f-body-01 text-inverse" }, "Padding Left: 2rem / pl-32")))))));
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -15674,7 +15765,7 @@ class TokenTypography {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync("section", { key: 'b638ddc335ade66f9eb0af8752f56945270fc5ee', class: "w-full" }, hAsync("ul", { key: '40f638bc0eccdcc79aecaf5da8fc9c1332122d49', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(typography.typesets)
+        return (hAsync("section", { key: 'a50023eb5ce02aebb63994e4319450f3a330617d', class: "w-full" }, hAsync("ul", { key: '757a1845f16da440eaa8ba332b39f62ccb69ed89', 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,
@@ -15746,6 +15837,7 @@ registerComponents([
   EdsIconClone,
   EdsIconClose,
   EdsIconCopy,
+  EdsIconDownload,
   EdsIconDraft,
   EdsIconEdit,
   EdsIconEu,