@ebrains/components 0.9.3-beta → 1.1.0

package/dist/collection/eds-docs-ui/colors/use-of-colors/correct-use-of-colors.js

@@ -60,7 +60,7 @@ const red = [
  */
 export class CorrectUseOfColors {
     render() {
-        return (h("div", { key: '9f7fbb8254528663d833da6bb683c2bb19e2837b', class: "container" }, h("p", { key: '71cdde5e7a803ccfbe49bfea00f208a23a10ab8d', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: 'fecaba6a82952070d3deb88cf22e335e6e0d7a08', label: "primary", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '0fb583c3d4542134f921649aef5f07738e00b086', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '3bfb272e2e2d5ab823f157aa1add3511f34a4c27', class: "flex" }, h("div", { key: 'baaf45c1f7b749b6f8f4035b1c62942e320d77d3', class: "w-full" }, h("ul", { key: '7e6d1a2051e98d7af54ef7061f39edaf2c7beb0a', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '1bf98fe26e99af8473077ac13d3d9b8c405bf1c4', class: "w-full" }, h("ul", { key: '1402fcefd163737b10c5b0d12014bc6e3fd66780', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), h("p", { key: 'b9bc90a0d0cc539349f10c51a1b3dfd19bb453ea', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '40a8a92005d47099d518281ed61f31888169dfcd', label: "purple", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '7b530b15d10ce8591b2cd42299f2d6a0b6de575e', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: 'c2b1599f407579d58e36effc3d4ba0115f4fa453', class: "flex" }, h("div", { key: '514a3c8c3a04f8e5607a606bf310b6173b973ba8', class: "w-full" }, h("ul", { key: '81c56759b2aaf2153cf6150f892ba23f67b8296e', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, purple.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: 'ef65f00f5fbf77af47292e570e98d465d553a03a', class: "w-full" }, h("ul", { key: '8fb9499e6c4587db8a188aad5120c1a1bd93b049', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), h("p", { key: '045fe17ef474b7d7c55ee50b183ea8e40439f034', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '20147150cb42c6105559457d364c28b09f9ba171', label: "blue", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '37093d1dda45c1c114e95533bbf560934d529e4a', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '1d53f16c58afa8f537d384434a6ac68e2d14c707', class: "flex" }, h("div", { key: 'cdd9390005122023dec3b5abcb88bf996e833c70', class: "w-full" }, h("ul", { key: 'e76d12d0b57b810c95788e9ccb0d39d4ab9ceb4e', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, blue.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '3ff4f5c0ba01b4723e8e664633f7220c9703905f', class: "w-full" }, h("ul", { key: 'f69b766d268d5e1d10972723a4ebdc5d9e0cae07', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), h("p", { key: '6591ea37bd86b328c1c55a5150f8ce44d24f8f52', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '47110ceefffb0f391443845425d0e9d07a15e779', label: "redish", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '0e034de1c3c0ea2f1c0e71f1e1a0024e6bc66d79', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '0b0d5484f0d3569bfdc529ef49af00a6c41a25ce', class: "flex" }, h("div", { key: '66e8d6d41bab4c18846885814b5a7aad6c08d240', class: "w-full" }, h("ul", { key: 'b9093c38be4aaca5045c62911cd6c789fdc12438', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, red.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: 'eb682711d6439a79719062057440de519ba48ecb', class: "w-full" }, h("ul", { key: '79805bba02241029b99027dab0f9cf6673e0e1c3', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
+        return (h("div", { key: 'eb7fe8a13ba44aa0b8327fd042177817577aa9ca', class: "container" }, h("p", { key: 'b9e731a3184cc72a0dd4c31bc207185789b1c747', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '9ac1f24993a47743b62504a9ac5cfaa67ea94867', label: "primary", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '82eb7946b881f69719a7785ded23355e34aa3023', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: 'a1bde4ba25a05fdc3a43bd008748f0ae74224142', class: "flex" }, h("div", { key: 'e6399a78c1d41e79041ad0e91356468e9e94a004', class: "w-full" }, h("ul", { key: '438acfe268f49ca5b77c20af74213283ac68e851', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '41cf8ea398e273788e32889e705debd21f102a9f', class: "w-full" }, h("ul", { key: 'b200fe46847e64efee26fb863151f08e2a175220', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), h("p", { key: '9fe567482bfbad7fc0bc4083756622259fd83e45', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: 'bd26b1b4c4ac1082eef246f9d1b6b13245b1d69f', label: "purple", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: 'b3a9897628cdcb7086397d7f7662591da4debdd4', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: 'fc54b467ddd6faa62e81fe56170f0ed43fccd52e', class: "flex" }, h("div", { key: '930d475074e002439847f152d95ed1f764536791', class: "w-full" }, h("ul", { key: 'ad8085fd5a4dcc8cd4cc2a4c0d6522673b0f69c3', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, purple.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: 'c9d7c736f8248fa7f1b689ec7a8eed24853de384', class: "w-full" }, h("ul", { key: '9191d41ef9f3947f91420e925f4ae5029aaf0e73', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), h("p", { key: 'ed9e3ebc14a1ecd0744d8adf6b58df54a325565f', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '5104e373031bc9381db7e274fba47f3d36d8fc14', label: "blue", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '2d0ff6d98eaf2b195725eb87b1cf8c264071787c', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: 'a660e8df517ab4c1b4b47fa777bd0e5c06156161', class: "flex" }, h("div", { key: '7346d762b781cf27fdf784a1100608b74a28eaca', class: "w-full" }, h("ul", { key: '91a7f50ffb513045c7d52987ecd33f3707332083', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, blue.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: 'e4d61bb10342c7c27e19a5fc43a3823e2ac36db7', class: "w-full" }, h("ul", { key: 'ab40fb356845c3c15255a591299d3aa3a4bcd415', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), h("p", { key: '15c61baa18cac41eefdfd631e6e62d8ad665fd00', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '8abd1e309700248f865906e667ffdb2db172c923', label: "redish", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '9cc22cdc51c4e6b5ea28afd62e5b7fe10b6f57bf', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '8cb15f36de63b4425be410d395b56829427a2b13', class: "flex" }, h("div", { key: 'e47f595ad0af29333fdb3090eae08b65b908e87d', class: "w-full" }, h("ul", { key: '27b7f0ee1650d169f17bee8a776ced534c2f8b37', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, red.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '40ed8de907089964f83ce2ebd2734b00ba378847', class: "w-full" }, h("ul", { key: '8b1bdd17aa9e0c60484120b58e67ec3d09ddc533', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
     }
     static get is() { return "correct-use-of-colors"; }
 }

package/dist/collection/eds-docs-ui/colors/use-of-colors/incorrect-use-of-colors.js

@@ -38,7 +38,7 @@ const incorrect = [
  */
 export class IncorrectUseOfColors {
     render() {
-        return (h("div", { key: '1cfc3c78012371498476886214e85fbf6e387626', class: "container" }, h("eds-alert", { key: '33449eeae0bca270a82d32de75d5d7c54d8b8c6c', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" }), h("div", { key: 'd436f34bf074c175c6308b822c820604a5e272bc', class: "flex" }, h("div", { key: '5f839c0f214b774f13af1499fe3e5f8485f959c5', class: "w-full" }, h("ul", { key: '5cbb81288c0e61431aed523d77f2c6d231c8ce7e', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '3622c7c8376208843d3e59c6548e41d9ca8c2b21', class: "w-full" }, h("ul", { key: 'd74e34f45e1d377be5f1087a345dee219b1fc5a3', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, incorrect.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
+        return (h("div", { key: '3503dcc0e2d3f5b08eec400e74484e5725d7b4af', class: "container" }, h("div", { key: '657857e8826e60c498450326306234c59b4e770b', class: "mb-8" }, h("eds-alert", { key: '88512240affc65314593f8573b3a13f58fb2806d', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" })), h("div", { key: '8614d445187d2614e5833b8c89c66b178762574e', class: "flex" }, h("div", { key: '1b36d52dbcbb65e1edb4513899ec898d691193c0', class: "w-full" }, h("ul", { key: '13fb2eaca0ad3fb93487f6c0c976142a18870b4d', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: 'adec93113e4c02168906e1da65f48c20e9b2c7dc', class: "w-full" }, h("ul", { key: 'd0b43589866f53c92084b270afb3571ed2723fc8', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, incorrect.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
     }
     static get is() { return "incorrect-use-of-colors"; }
 }

package/dist/collection/eds-docs-ui/components-section/components-section.js

@@ -28,7 +28,7 @@ export class ComponentsSection {
         }
     }
     render() {
-        return h("div", { key: 'ee1dd33b05afae12511c5876db4e8bd771117853', class: "container" }, this.renderContent());
+        return h("div", { key: 'd68c9ede251456d88ef2a033691927c87c8ec163', class: "container" }, this.renderContent());
     }
     static get is() { return "components-section"; }
     static get properties() {

package/dist/collection/eds-docs-ui/components-section/functional/angular.js

@@ -1,2 +1,2 @@
 import { h } from "@stencil/core";
-export const DocsAngular = () => (h("div", null, h("h2", null, "Angular Wrappers"), h("p", null, "To use the EBRAINS web components in an Angular Application, simple install the package below and check out the examples."), h("eds-code-block", { code: "npm install @ebrains/angular", language: "javascript", "copy-label": "Copy Code" }), h("p", null, "Define the custom elements"), h("eds-code-block", { code: "import { defineCustomElements } from '@ebrains/components/loader';\ndefineCustomElements();", language: "javascript", "copy-label": "Copy Code" }), h("p", null, "Angular Custom Elements Schema"), h("eds-code-block", { code: 'import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";', language: "javascript", "copy-label": "Copy Code" }), h("eds-section-core", { "section-title": "Example Angular App", "heading-level": "h3" }, h("eds-code-block", { code: '\n<div class="container">\n  <eds-breadcrumb\n    intent="tertiary"\n    items="[\n      { "label": "Home", "url": "#" },\n      { "label": "Products", "url": "#" },\n    ]">\n  </eds-breadcrumb>\n  <eds-footer></eds-footer>\n</div>', language: "javascript", "copy-label": "Copy Code" }))));
+export const DocsAngular = () => (h("div", null, h("h2", null, "Angular Wrappers"), h("p", null, "To use the EBRAINS web components in an Angular Application, simple install the package below and check out the examples. The Angular Stencil output type used for this package = `standalone`."), h("eds-code-block", { code: "npm install @ebrains/angular", language: "javascript", "copy-label": "Copy Code" }), h("p", null, "Install the components dependency as this important for the angular package to work properly."), h("eds-code-block", { code: "npm install @ebrains/components", language: "javascript", "copy-label": "Copy Code" }), h("p", null, "Define the custom elements"), h("eds-code-block", { code: "import { defineCustomElements } from '@ebrains/components/loader';\ndefineCustomElements();", language: "javascript", "copy-label": "Copy Code" }), h("eds-section-core", { "section-title": "Example Angular App", "heading-level": "h3" }, h("eds-code-block", { code: '\n<div class="container">\n  <eds-breadcrumb\n    intent="tertiary"\n    items="[\n      { "label": "Home", "url": "#" },\n      { "label": "Products", "url": "#" },\n    ]">\n  </eds-breadcrumb>\n  <eds-footer></eds-footer>\n</div>', language: "javascript", "copy-label": "Copy Code" }))));

package/dist/collection/eds-docs-ui/components-section/functional/installation.js

@@ -1,2 +1,2 @@
 import { h } from "@stencil/core";
-export const DocsInstallation = () => (h("div", null, h("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."), h("div", { class: "my-8" }, h("eds-code-block", { code: "npm install @ebrains/components", language: "html", "copy-label": "Copy Code" })), h("div", { class: "my-8" }, h("eds-code-block", { code: "npm install @ebrains/assets", language: "html", "copy-label": "Copy Code" })), h("div", { class: "my-8" }, h("eds-code-block", { code: "npm install @ebrains/react", language: "html", "copy-label": "Copy Code" })), h("div", { class: "my-8" }, h("eds-code-block", { code: "npm install @ebrains/vue", language: "html", "copy-label": "Copy Code" })), h("div", { class: "my-8" }, h("eds-code-block", { code: "npm install @ebrains/angular", language: "html", "copy-label": "Copy Code" }))));
+export const DocsInstallation = () => (h("div", null, h("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."), h("div", { class: "my-8" }, h("eds-code-block", { code: "npm install @ebrains/components", language: "html", "copy-label": "Copy Code" })), h("div", { class: "my-8" }, h("eds-code-block", { code: "npm install @ebrains/react", language: "html", "copy-label": "Copy Code" })), h("div", { class: "my-8" }, h("eds-code-block", { code: "npm install @ebrains/vue", language: "html", "copy-label": "Copy Code" })), h("div", { class: "my-8" }, h("eds-code-block", { code: "npm install @ebrains/angular", language: "html", "copy-label": "Copy Code" })), h("div", { class: "my-8" }, h("eds-code-block", { code: "npm install @ebrains/assets", language: "html", "copy-label": "Copy Code" })), h("div", { class: "my-8" }, h("eds-code-block", { code: "npm install @ebrains/svgs", language: "html", "copy-label": "Copy Code" }))));

package/dist/collection/eds-docs-ui/components-section/functional/overview.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-export const DocsOverview = () => (h("div", { class: "static-content container" }, h("h2", null, "Load the module"), h("p", null, "Integrating the EBRAINS UI Components to a project without a JavaScript framework is straight forward. If you\u2019re working on a simple HTML page, you can start using the components immediately by adding the tags below to the", ' ', h("code", null, "head"), "."), h("eds-code-block", { code: "<script type='module'>\n  import { defineCustomElements } from 'https://unpkg.com/@ebrains/components@latest/loader/index.js'; \n  // Define custom elements\n  defineCustomElements(window);\n</script>", language: "javascript", "copy-label": "Copy Code" }), h("p", null, "This snippet is part of the Stencil component loader system. Under the hood, it does the following:"), h("eds-steps", { steps: [
+export const DocsOverview = () => (h("div", { class: "static-content container" }, h("h2", null, "Load the module"), h("p", null, "Integrating the EBRAINS UI Components to a project ", h("b", null, "with or without a JavaScript framework"), " is straight forward. If you\u2019re working on a simple HTML page, you can start using the components immediately by adding the tags below to the ", h("code", null, "head"), "."), h("eds-code-block", { code: "<script type='module'>\n  import { defineCustomElements } from 'https://unpkg.com/@ebrains/components@latest/loader/index.js'; \n  // Define custom elements\n  defineCustomElements(window);\n</script>", language: "javascript", "copy-label": "Copy Code" }), h("p", null, "This snippet is part of the Stencil component loader system. Under the hood, it does the following:"), h("eds-steps", { steps: [
         {
             title: 'Import the Loader Module',
             content: 'The script imports the defineCustomElements function from the Stencil-generated loader module hosted at a CDN. This module contains the registration logic for all your custom components.'
@@ -16,4 +16,4 @@ export const DocsOverview = () => (h("div", { class: "static-content container"
             title: 'Optimized Performance',
             content: 'By registering components early and lazy-loading their implementations, the script helps maintain a fast startup while ensuring that all custom elements are ready for use when needed.'
         }
-    ] }), h("p", null, "Once included, components can be used in your markup like any other regular HTML elements:"), h("eds-code-block", { code: '<eds-button \n  label="my bytton" \n  intent="primary">\n</eds-button>', language: "html", "copy-label": "Copy Code" }), h("h2", null, "Load the styles"), h("p", null, "To directly use the produced css framework with a few predefined custom utility classes, add the tag below to the", ' ', h("code", null, "head")), h("eds-code-block", { code: '<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@latest/styles/output.css"/>', language: "css", "copy-label": "Copy Code" }), h("p", null, "To directly use only the produced variables add the tag below to the ", h("code", null, "head")), h("eds-code-block", { code: '<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@latest/styles/vars.css"/>', language: "css", "copy-label": "Copy Code" }), h("p", null, "Note that, loading the predefined CSS framework above,", ' ', h("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 ", h("code", null, "head")), h("eds-code-block", { code: '<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@latest/styles/base/fonts.css"/>', language: "css", "copy-label": "Copy Code" })));
+    ] }), h("p", null, "Once included, components can be used in your markup like any other regular HTML elements:"), h("eds-code-block", { code: '<eds-button \n  label="my bytton" \n  intent="primary">\n</eds-button>', language: "html", "copy-label": "Copy Code" }), h("h2", null, "Load the variables and styles"), h("p", null, "To directly use only the produced variables (colors, breakpoints, typography) add the tag below to the", ' ', h("code", null, "head"), ". This approach is recommended when you\u2019re working solely with the web components and want minimal integration. That said, the components are configured to require only these CSS variables and nothing more."), h("eds-code-block", { code: '<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@latest/styles/vars.css"/>', language: "css", "copy-label": "Copy Code" }), h("p", null, "To directly use the produced css framework with a few predefined custom utility classes, add the tag below to the", ' ', h("code", null, "head"), ". Use this when you want quick access to ready-made utilities for building your own components or applications and you do not wish to dive deep to css configurations."), h("eds-code-block", { code: '<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@latest/styles/output.css"/>', language: "css", "copy-label": "Copy Code" }), h("p", null, "Note that, loading either the variables or the predefined CSS framework above,", ' ', h("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 ", h("code", null, "head")), h("eds-code-block", { code: '<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@latest/styles/base/fonts.css"/>', language: "css", "copy-label": "Copy Code" })));

package/dist/collection/eds-docs-ui/components-section/functional/react.js

@@ -1,2 +1,2 @@
 import { h } from "@stencil/core";
-export const DocsReact = () => (h("div", null, h("h2", null, "React Wrappers"), h("p", null, "To use the EBRAINS web components in a React Application, simple install the package below and check out the examples"), h("eds-code-block", { code: "npm install @ebrains/react", language: "javascript", "copy-label": "Copy Code" }), h("eds-section-core", { "section-title": "Example React App", "heading-level": "h3" }, h("p", null, "This code displays a Stencil-based splash screen that stays visible until an initialization promise resolves (or errors), then hides itself and reveals the main React app content."), h("eds-code-block", { code: "\nimport React, { useMemo, useState } from 'react';\nimport {\n  EdsHeader\n  EdsSplashScreen,\n  EdsMatomoNotice,\n  EdsSteps\n} from '@ebrains/react';\nimport './app.css';\n\n// simulate 2s\nfunction fakeInit(): Promise<void> {\n  return new Promise(resolve => setTimeout(resolve, 2000));\n}\n\nexport function App() {\n  // 1) create init promise\n  const initPromise = useMemo(() => fakeInit(), []);\n\n  // 2) is splash still visible\n  const [splashVisible, setSplashVisible] = useState(true);\n  const [initError, setInitError] = useState<string | null>(null);\n\n  // 3) show the UI after the splash has hidden\n  const showApp = !splashVisible && !initError;\n\n  return (\n    <div>\n      {splashVisible && (\n        <EdsSplashScreen\n          inverse={false}\n          initPromise={initPromise}\n          onSplash={(e: CustomEvent) => {\n            if (e.detail.type === 'hidden') {\n              setSplashVisible(false);\n            } else if (e.detail.type === 'error') {\n              setInitError(e.detail.message);\n              setSplashVisible(false);\n            }\n          }}\n        />\n      )}\n\n      {initError && (\n        <div className='error'>\n          Failed to initialize: {initError}\n        </div>\n      )}\n\n      {/* Show App only when ready */}\n      {showApp && (\n        <>\n          <EdsHeader></EdsHeader>\n          <EdsSteps\n            steps={[\n              {\n                title: 'Introduction',\n                content: 'Begin by familiarizing yourself with the overall process.'\n              },\n              {\n                title: 'Process Overview',\n                content: 'Review the detailed steps and understand the workflow.'\n              }\n            ]}\n            type='linear'\n          />\n\n          <EdsMatomoNotice />\n\n          <div id='root'></div>\n        </>\n      )}\n    </div>\n  );\n}\nexport default App;\n", language: "javascript", "copy-label": "Copy Code" }))));
+export const DocsReact = () => (h("div", null, h("h2", null, "React Wrappers"), h("p", null, "To use the EBRAINS web components in a React Application, simple install the package below and check out the examples"), h("eds-code-block", { code: "npm install @ebrains/react", language: "javascript", "copy-label": "Copy Code" }), h("eds-section-core", { "section-title": "Example React App", "heading-level": "h3" }, h("p", null, "This code displays a Stencil-based splash screen that stays visible until an initialization promise resolves (or errors), then hides itself and reveals the main React app content."), h("eds-code-block", { code: "\nimport React, { useMemo, useState } from 'react';\nimport {\n  EdsHeader,\n  EdsSplashScreen,\n  EdsMatomoNotice,\n  EdsSteps\n} from '@ebrains/react';\nimport './app.css';\n\n// simulate 2s\nfunction fakeInit(): Promise<void> {\n  return new Promise(resolve => setTimeout(resolve, 2000));\n}\n\nexport function App() {\n  // 1) create init promise\n  const initPromise = useMemo(() => fakeInit(), []);\n\n  // 2) is splash still visible\n  const [splashVisible, setSplashVisible] = useState(true);\n  const [initError, setInitError] = useState<string | null>(null);\n\n  // 3) show the UI after the splash has hidden\n  const showApp = !splashVisible && !initError;\n\n  return (\n    <div>\n      {splashVisible && (\n        <EdsSplashScreen\n          inverse={false}\n          initPromise={initPromise}\n          onSplash={(e: CustomEvent) => {\n            if (e.detail.type === 'hidden') {\n              setSplashVisible(false);\n            } else if (e.detail.type === 'error') {\n              setInitError(e.detail.message);\n              setSplashVisible(false);\n            }\n          }}\n        />\n      )}\n\n      {initError && (\n        <div className='error'>\n          Failed to initialize: {initError}\n        </div>\n      )}\n\n      {/* Show App only when ready */}\n      {showApp && (\n        <>\n          <EdsHeader></EdsHeader>\n          <EdsSteps\n            steps={[\n              {\n                title: 'Introduction',\n                content: 'Begin by familiarizing yourself with the overall process.'\n              },\n              {\n                title: 'Process Overview',\n                content: 'Review the detailed steps and understand the workflow.'\n              }\n            ]}\n            type='linear'\n          />\n\n          <EdsMatomoNotice />\n\n          <div id='root'></div>\n        </>\n      )}\n    </div>\n  );\n}\nexport default App;\n", language: "javascript", "copy-label": "Copy Code" }))));

package/dist/collection/eds-docs-ui/design-tokens/docs-tokens/docs-tokens.js

@@ -25,7 +25,7 @@ export class DocsContent {
         }
     }
     render() {
-        return h("div", { key: '2d4d06ef8d68dc42280f71042322a5f3ca528564', class: "container" }, this.renderContent());
+        return h("div", { key: '7d86f29bb4a82aec564b0600749d97aedc58925d', class: "container" }, this.renderContent());
     }
     static get is() { return "docs-tokens"; }
     static get properties() {

package/dist/collection/eds-docs-ui/design-tokens/token-list/token-list.js

@@ -69,7 +69,7 @@ export 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 (h("section", { key: '61b0561443787bdc5d1fdf6db0bed0bebe8ba6cb', class: "w-full mt-28" }, Object.entries(sectionsToDisplay).map(([sectionName, sectionContent]) => 
+        return (h("section", { key: '1c949c3777a159f1a52baa4f27d1acf07bf86114', class: "w-full mt-28" }, Object.entries(sectionsToDisplay).map(([sectionName, sectionContent]) => 
         // Only render sections that exist in `colors`
         sectionContent ? this.renderSection(sectionName, sectionContent) : null)));
     }

package/dist/collection/eds-docs-ui/design-tokens/token-radii/token-radii.js

@@ -5,7 +5,7 @@ import radii from "../../../../../../../../packages/assets/tokens/radii"; // Adj
  */
 export class TokenRadii {
     render() {
-        return (h("section", { key: 'f6e277d8d84957ad05f027a7a151f2dd0b5c6e21', class: "w-full mt-28" }, h("ul", { key: 'feeef0a573d704dc010b76fc94a5ac9a9a05f0da', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(radii).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { class: `w-full p-16 block lg:flex items-center justify-center text-center border-3 border-soft rounded-${key}` }, h("eds-code-block", { language: "Utility Class", code: `rounded-${key}`, class: "mx-auto min-w-[200px] sm:mb-4 sm:max-w-[200px] mr-auto" }), h("eds-code-block", { code: `border-radius:${value}`, language: "css", class: "mx-auto min-w-[200px] sm:max-w-[200px] ml-auto" }))))))));
+        return (h("section", { key: '07f9d8424b849e486379f81764ad946b0b632fa7', class: "w-full mt-28" }, h("ul", { key: 'ec8cb4aaad010b24dc82b556fbc143c52f9824c2', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(radii).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { class: `w-full p-16 block lg:flex items-center justify-center text-center border-3 border-soft rounded-${key}` }, h("eds-code-block", { language: "Utility Class", code: `rounded-${key}`, class: "mx-auto min-w-[200px] sm:mb-4 sm:max-w-[200px] mr-auto" }), h("eds-code-block", { code: `border-radius:${value}`, language: "css", class: "mx-auto min-w-[200px] sm:max-w-[200px] ml-auto" }))))))));
     }
     static get is() { return "token-radii"; }
 }

package/dist/collection/eds-docs-ui/design-tokens/token-ratios/token-ratios.js

@@ -5,7 +5,7 @@ import ratios from "../../../../../../../../packages/assets/tokens/ratios"; // A
  */
 export class TokenRatios {
     render() {
-        return (h("section", { key: 'c4348ae18a2c7644f7a191aa5190ac3b98b5ccb9', class: "w-full" }, h("eds-section-core", { key: '6f148fc0c0ebbaef05761fa1a773cf026e308517', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, h("ul", { key: 'eb932db069683046fcda8ea950bac277e1387c33', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(ratios).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { class: "container ratio-box flex items-center justify-center text-center border-2 border-soft", style: {
+        return (h("section", { key: 'a68e1101a6dfd99b0b48540f96792622b9837efc', class: "w-full" }, h("eds-section-core", { key: '1f32847d415fad34b9add511d7bc49907f351fe9', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, h("ul", { key: 'e1dc4d7772bc3cd009458e781f5de0c078f686c0', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(ratios).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("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'

package/dist/collection/eds-docs-ui/design-tokens/token-shadows/token-shadows.js

@@ -5,7 +5,7 @@ import shadowTokens from "../../../../../../../../packages/assets/tokens/shadows
  */
 export class TokenShadows {
     render() {
-        return (h("section", { key: '0d61c0eee38fbcffe111031da0829b3a9050bc8d', class: "w-full mt-28" }, h("ul", { key: '587c263280d086c23351c6bbeaf01f37c307ce65', 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]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col items-center mt-16" }, h("div", { class: "w-full p-16 block lg:flex items-center justify-center text-center border-2 border-soft", style: { boxShadow: value } }, h("eds-code-block", { code: `${category}-${key}`, language: "Utility Class", class: "mr-auto sm:mb-4 min-w-[200px]" }), h("eds-code-block", { code: `${value}`, language: "css", class: "ml-auto min-w-[200px]" })))))))));
+        return (h("section", { key: '50f470109606938085ed98480892d94ebcc2878c', class: "w-full mt-28" }, h("ul", { key: 'e9c982816b9117eacd1a9f721e7428f317087211', 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]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col items-center mt-16" }, h("div", { class: "w-full p-16 block lg:flex items-center justify-center text-center border-2 border-soft", style: { boxShadow: value } }, h("eds-code-block", { code: `${category}-${key}`, language: "Utility Class", class: "mr-auto sm:mb-4 min-w-[200px]" }), h("eds-code-block", { code: `${value}`, language: "css", class: "ml-auto min-w-[200px]" })))))))));
     }
     static get is() { return "token-shadows"; }
 }

package/dist/collection/eds-docs-ui/design-tokens/token-spacing/token-spacing.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class TokenSpacing {
     render() {
-        return (h("div", { key: '00ca04338f0cb9233be63327e07c2bde4fdcde82', class: "w-full" }, h("ul", { key: '0228f39058d93ca3ef569040b8e035c89c7a8df4', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '470f8a49cd45dedde63f70c6ec6f79b97000bed1', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'f238156d3bef14454a9f17bcbc403f5b20b2fdce', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '8815c4d93ca0c3bc757d801bb2ea951b93424ff1', class: "spacing-sample m-16 bg-strong" }, h("span", { key: 'dfbcf9555690912be569bb01dbf20c44f7cd0a31', class: "f-body-01 text-inverse" }, "Margin: 1rem / m-16")))), h("li", { key: '09764bbf15a7289d72e15096a5179c9378aad1a0', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '5f393cb3ed589009b6d12281d92f9128ef986191', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '980a9f253177cb3c9486c84baa11215222148e01', class: "spacing-sample ml-64 bg-strong" }, h("span", { key: '83bf097e6cba62e5195594968355c59f663b36e5', class: "f-body-01 text-inverse" }, "Margin Left: 4rem / ml-64")))), h("li", { key: '79b6dcfa4d469db308d116d98deda673bea35da4', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '19d5e0f7a987e5e252b7f65380caff58ee8bf900', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '6c03b5c8b9635c6786c6904c11e6d531a252c050', class: "spacing-sample mt-32 bg-strong" }, h("span", { key: '08245fe30349011f8607260ccf950eae211bb511', class: "f-body-01 text-inverse" }, "Margin Top: 2rem / mt-32")))), h("li", { key: '20e990162a6d8a6bb7c3756b471d06b0a812176e', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'cfb4e834829eab6dc889577b3c9686147fcc6314', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '79e124f2b2f4ae780f80187cef9d551995e1217c', class: "spacing-sample p-32 bg-strong" }, h("span", { key: '9ce890898292b81968ff5a6e10e38083cf63ab52', class: "f-body-01 text-inverse" }, "Padding: 2rem / p-32")))), h("li", { key: '34a9a0933249e75a0cf00c1ee12d55dc999ee60c', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '510d4573b38d5e9a6db1c3ef9494b9dfe1ac8e78', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '90902dd8f7ac70b377884b9ed9c8cebd3f87447d', class: "spacing-sample pt-32 bg-strong" }, h("span", { key: '6b9041a4d3d1870362a0e168a31e0e890ca3b417', class: "f-body-01 text-inverse" }, "Padding Top: 2rem / pt-32")))), h("li", { key: '6c656fd467a8df4aa2d0781ac9a5687c407bd282', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'e2332aa81af3e9e35dfebb4b8938acf8649240b8', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'ca08cc17910e818d2537cb9e4d1f4dbef68be02b', class: "spacing-sample pl-32 bg-strong" }, h("span", { key: '6efb039d88c8995fcbdf7ea31485a06f6bdd793d', class: "f-body-01 text-inverse" }, "Padding Left: 2rem / pl-32")))))));
+        return (h("div", { key: 'ad89d21ec01f11c77d85853f7c0dbefd8ea9f07f', class: "w-full" }, h("ul", { key: '6108fb2870c358de8e5c48e6d14f6c1e76af856f', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'cd0d1986b416f12164b8d0458262987a445662ca', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'f2cfd77fcba601b89605dabf109f599816bb118e', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '69e4cb5660f5c51d2b9c1ba30a38f3b7decacc58', class: "spacing-sample m-16 bg-strong" }, h("span", { key: '70a07326b0a95655db3aad083637499f5ed4aa73', class: "f-body-01 text-inverse" }, "Margin: 1rem / m-16")))), h("li", { key: '97b8c127e9bbe9af4ec8f6876ebae3f87a52d130', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '58537d6aa824b489ae9c5150400af21f11f1f447', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '3f2913d232cb9de1b678b7f7903bef0642ef42df', class: "spacing-sample ml-64 bg-strong" }, h("span", { key: 'fe56d1a501dc219a1bac474b674586609499f3de', class: "f-body-01 text-inverse" }, "Margin Left: 4rem / ml-64")))), h("li", { key: 'e2dee648fd4bce503414d76f3afe64655285523c', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'e788fa22248ac92fb8bc89566c5b8a77cf14578f', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '9629958b453aa831a1d871bb4e846d0926d9e57c', class: "spacing-sample mt-32 bg-strong" }, h("span", { key: '0efde7eaed0fe3e14f476617e7e9bf2e20131f2c', class: "f-body-01 text-inverse" }, "Margin Top: 2rem / mt-32")))), h("li", { key: '6dabfeb0086c784c50843abd12d5a505a56e0933', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '164e7eec6ed3aad2847c4ede97f4bbfed34138d1', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '9be99b05ba29204f6163df2c1522e7aa6211bd3d', class: "spacing-sample p-32 bg-strong" }, h("span", { key: 'ae0a7ea74e31ea324015b844848c3d5a68930e8d', class: "f-body-01 text-inverse" }, "Padding: 2rem / p-32")))), h("li", { key: '3804dbfb6a64a1dfd478bd0132ff83f51bcff33e', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '75c96b0762c3fac8b4de897ab8147b2c5614a360', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'd00487531406fa89112bee34e05306c59dc4f497', class: "spacing-sample pt-32 bg-strong" }, h("span", { key: '8a750b7ac07739a71949b236421427b8bb05b067', class: "f-body-01 text-inverse" }, "Padding Top: 2rem / pt-32")))), h("li", { key: '5e5fe43383f13b4377aca7cfb07c97b6ac1dd79b', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'ed2ac88c543eba8c580d029ccacb1a8b26c1cae7', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'cf9a94b61e598c0ee6da9e771717574b48264333', class: "spacing-sample pl-32 bg-strong" }, h("span", { key: 'a2d3fce66240c6b0d49d1a655c0b5a84be9c630d', class: "f-body-01 text-inverse" }, "Padding Left: 2rem / pl-32")))))));
     }
     static get is() { return "token-spacing"; }
 }

package/dist/collection/eds-docs-ui/design-tokens/token-typography/token-typography.js

@@ -5,7 +5,7 @@ import typography from "../../../../../../../../packages/assets/tokens/typograph
  */
 export class TokenTypography {
     render() {
-        return (h("section", { key: '2448267dd93e815f2def0a4b711f28325d906d61', class: "w-full" }, h("ul", { key: 'ac73af17e45045d2122d54dd357f1141b3a5bad7', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(typography.typesets)
+        return (h("section", { key: '60710505ef0a06883d83c6838b1eb246485bd548', class: "w-full" }, h("ul", { key: '3cac0e7f35f878e29ee45e21407609753099e077', 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]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { class: "w-full p-4 block lg:flex items-center border border-soft rounded" }, h("div", { class: "mr-auto hidden lg:block", style: {
                 fontFamily: typography.families.sans,

package/dist/collection/eds-docs-ui/docs-palettes/docs-palettes.js

@@ -17,7 +17,7 @@ export class DocsPalettes {
         }
     }
     render() {
-        return h("div", { key: '41ac7248f45204f420ab2954e26529577e2cb27f', class: "container" }, this.renderContent());
+        return h("div", { key: '638d6345ed0e32bda5d350f7ee8e54055d7fe770', class: "container" }, this.renderContent());
     }
     static get is() { return "docs-palettes"; }
     static get properties() {

package/dist/collection/eds-docs-ui/logo/logo-space/logo-space.js

@@ -5,7 +5,7 @@ import { vLogoMargins } from "../../../../../../../../packages/svgs/src/index";
  */
 export class LogoSpace {
     render() {
-        return (h("div", { key: 'ac45631802109b60cbccb09102ba1e0aa0fca3e6', class: "container" }, h("ul", { key: '8739e8d9facd30229db4f9dad4f21c1491513945', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'e5d12885d0faf35153d13e8da6d576ed421139b9', 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" }, h("div", { key: 'f754292bf3d3f3c39773e6fced7893a79ea5eda3', class: "logo-container mx-auto w-[300px]", innerHTML: vLogoMargins })), h("li", { key: 'de9d24e26be14bb0e975ebbc3568a38cfea69420', 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" }, h("div", { key: 'f040d91a7af79e939d3d5aa5c92d2c1527b0b2cb', class: "text-center mt-16" }, h("p", { key: '49759b744d2e71318d80712bfd3d6b19229a8a33', class: "f-body-01" }, "To ensure legibility, follow these minimum size guidelines:"), h("eds-table", { key: '54d2f4512baa60fa4c6d1bf9b96f5ee59fc32911', 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                }' }))), h("li", { key: '060029fa1f01bca29cb7450c8be43ce0705effe3', 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 (h("div", { key: 'fdad9dd7dcfd064513452108f8a4cd13078d7146', class: "container" }, h("ul", { key: 'b13477839ec81d27c2b42cc99211d22af46b68e1', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '383a4e04e633675ab8561ddc583b34bea53a75cf', 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" }, h("div", { key: '43457a7e47ae85448c3283514ea8cbe7081c727b', class: "logo-container mx-auto w-[300px]", innerHTML: vLogoMargins })), h("li", { key: 'db8762d40d62a07b72d5d40a4dbfbd7a5cd6381f', 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" }, h("div", { key: '7d1c9e3f1ff874f4916dc2ecf79d2779c631a1ca', class: "text-center mt-16" }, h("p", { key: '4b6430627d3245a915b3f8185cc5aa473995aeca', class: "f-body-01" }, "To ensure legibility, follow these minimum size guidelines:"), h("eds-table", { key: '919120aa30fc233898f364cd24ebfe3c6dd82c7f', 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                }' }))), h("li", { key: '0f7b0c08a70626d0c8069d9916d486a04bbd62a2', 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 is() { return "logo-space"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/eds-docs-ui/logo/logo-variations/horizontal/logo-variations-horizontal.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class LogoVariationsHorizontal {
     render() {
-        return (h("div", { key: '303b9b6eaf8926bac5e0a36834fcd4f3ffbc239f', class: "container" }, h("ul", { key: '79498e5d6218fd979da5b658e083f3941811d16e', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'b7af4d1c59ae2c8fd72e4328b9789c82f2631151', 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" }, h("p", { key: '05ac2498be41b34c65d7c427426bd860c34a9de6', class: "f-body-01 text-center my-4" }, "#1 Coloured"), h("div", { key: 'da35b27637ff24021defda4fa7e30dd25e24b33e', class: "coloured" }, h("eds-logo", { key: '6d9df95299de4f880ef937a3aeb95f855c2db4f1', type: "no-bg", href: "#" }))), h("li", { key: '259b8e02669bee318d7f07a8b35ac12bca18c089', 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" }, h("p", { key: 'a7c2453fe76f06c589cf4d877a870af88dfb6e0b', class: "f-body-01 text-center my-4" }, "#2 Black & White"), h("div", { key: '0579383e0f27625c33621f239901eb2726681c4c', class: "bg-default" }, h("eds-logo", { key: 'f496baea986ebe432c2fe98576f74947df9e79dd', type: "black", href: "#" }))), h("li", { key: '7bd878285bb3145c23ee87ab31c94583be5b9bab', 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" }, h("p", { key: 'c769dac987be6708208de115c1578c4d477fca22', class: "f-body-01 text-center my-4" }, "#3 Dark"), h("div", { key: '793108fc4fd8119b5eefc1c14a4ffc2e11f6ccca' }, h("eds-logo", { key: '2cf9e56591026c45d4cb074ec0cc8d4dd894ed97', type: "color-white", href: "#" }))))));
+        return (h("div", { key: '987c614ac28a196ef8fff32c776b286269377dec', class: "container" }, h("ul", { key: 'fc9335a57da5e088f50a4c22ff40546554251515', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '714701eb21a78f77f5294ec8bf4799443311ca73', 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" }, h("p", { key: 'd60bf8e9307aa9243cade43a4cc43df8d11fd561', class: "f-body-01 text-center my-4" }, "#1 Coloured"), h("div", { key: 'a1357c422ecfb85210692c5686f2e1c295094858', class: "coloured" }, h("eds-logo", { key: '07ac7f715db7c573bcf40e9023c5189fbbe0958c', type: "no-bg", href: "#" }))), h("li", { key: 'c452df580d16d70b5dc00485e9ba05a6738b0293', 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" }, h("p", { key: '55eebb8ae1b53b26ce8505f648a7f079f15521b9', class: "f-body-01 text-center my-4" }, "#2 Black & White"), h("div", { key: 'c7394e8f6e044b260b9450f3b06b0ebb44fba4e1', class: "bg-default" }, h("eds-logo", { key: '0febbfc78be2a064c0ff7f768936f1521dcac11c', type: "black", href: "#" }))), h("li", { key: '9473120a767856f6a18b8973b6d0cc12f736f239', 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" }, h("p", { key: '8d2eb712f5d7c862fa8ac633177bb07dc4ac7c1e', class: "f-body-01 text-center my-4" }, "#3 Dark"), h("div", { key: '594c586462a164e790ba224e902605363322561c' }, h("eds-logo", { key: 'bd19f2348abf5a9e347fa1b171f8ced2598093c7', type: "color-white", href: "#" }))))));
     }
     static get is() { return "logo-variations-horizontal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/eds-docs-ui/logo/logo-variations/vertical/logo-variations-vertical.js

@@ -8,7 +8,7 @@ export class LogoVariationsVertical {
         this.type = undefined;
     }
     render() {
-        return (h("div", { key: '98119d5c92d137e01d050699991658c764e9cb1b', class: "container" }, h("ul", { key: '191909da09aefdd362d8125790a1fe07f5f93293', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '1ce2f0a7266e25e132d6f52b04f15b526787a12c', 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" }, h("p", { key: 'e62d64aa3747eede49fe9687a73067a8dec5b54f', class: "f-body-01 text-center my-4" }, "#1 Coloured"), h("div", { key: '7ae9e21a9684d00c9ad91ccf70173e81bf8c707a', class: "mx-auto coloured w-[300px]" }, h("eds-logo", { key: '73aeaf945b418210481fbeabf7db1d320108cbce', orientation: "vertical", type: "no-bg", href: "#" }))), h("li", { key: '45494f2903afdb8a67b9a063a547f8b166bfc22f', 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" }, h("p", { key: 'd1c2475c0e32aba56377211b63ba139fd1d77c68', class: "f-body-01 text-center my-4" }, "#2 Black & White"), h("div", { key: '880d39be54129b285feec50302cf31c8cc52e9d9', class: "mx-auto bg-default w-[300px]" }, h("eds-logo", { key: '17eecfd918fb83aef6820576cfb0730328f5e442', orientation: "vertical", type: "black", href: "#" }))), h("li", { key: '48b40e5870cccea3eb0260697b1caddcab6cbed0', 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" }, h("p", { key: '206c2b8286a9fe665a1a356ebd87082adfe5e4bf', class: "f-body-01 text-center my-4" }, "#3 Dark"), h("div", { key: '1d4b01ef162611ce1c2cc56d1ad7a44a10aacdd3', class: "mx-auto w-[300px]" }, h("eds-logo", { key: 'b6826d25f29634a7df4f51b4b66868ae06487b8b', orientation: "vertical", type: "color-white", href: "#" }))))));
+        return (h("div", { key: '1e9f6ca3f43c6818c6213c581dcf0743958c9b5f', class: "container" }, h("ul", { key: 'd6cae4ea607afe3cad7b7eb675efe2c27fee8bce', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '2c08ccbd732b2e33c7ee75a62bd743d0977a212d', 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" }, h("p", { key: '8996d851b5041d7b3f2349034f6ba858b9564937', class: "f-body-01 text-center my-4" }, "#1 Coloured"), h("div", { key: '623832731b38e02f69f795b1f959052425a233df', class: "mx-auto coloured w-[300px]" }, h("eds-logo", { key: 'dd8c635e0dd09b4c972c0d201e6bc6cbd899a896', orientation: "vertical", type: "no-bg", href: "#" }))), h("li", { key: 'f99951011003ed2409a44a5175ab67a2478ee22c', 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" }, h("p", { key: '45c69ba60358e36f980df1fa1db4521dbcc38fc1', class: "f-body-01 text-center my-4" }, "#2 Black & White"), h("div", { key: 'd026d40d15b4e5e8a3d7718298130414198d5699', class: "mx-auto bg-default w-[300px]" }, h("eds-logo", { key: '62ca0a1c8bd93f3b780ba91d5b9bbd31d7bbe1f0', orientation: "vertical", type: "black", href: "#" }))), h("li", { key: 'b1c75a34b36bec4dde679f5bde1129e0315cac37', 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" }, h("p", { key: '16c68f40c6a4bcaf3d618f8787682a974a8c900c', class: "f-body-01 text-center my-4" }, "#3 Dark"), h("div", { key: 'ce3b8ee8b54fabccd816388bb1a3acf642147c28', class: "mx-auto w-[300px]" }, h("eds-logo", { key: '8baa9d4f187e515d5a274156976fb134d79bd004', orientation: "vertical", type: "color-white", href: "#" }))))));
     }
     static get is() { return "logo-variations-vertical"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/eds-docs-ui/logo/logo-variations-tabs/logo-variations.js

@@ -17,7 +17,7 @@ export class LogoVariationsTabs {
         }
     }
     render() {
-        return h("div", { key: 'c08e3e918cdad5cde3ccc7279faa6a0401379c4d', class: "container" }, this.renderContent());
+        return h("div", { key: '2403a062886a97ebbc34bb9f95e755ab1a278731', class: "container" }, this.renderContent());
     }
     static get is() { return "logo-variations-tabs"; }
     static get properties() {

package/dist/collection/eds-docs-ui/logo/logo-wrong-usage/logo-wrong-usage.js

@@ -5,7 +5,7 @@ import { hLogoColor } from "../../../../../../../../packages/svgs/src/index";
  */
 export class LogoWrongUsage {
     render() {
-        return (h("div", { key: '29efde52c2dd279e53de859e2d55f13ef456fbb7', class: "container" }, h("ul", { key: '47ec32e39e00a93c9fd0ee9353d2e87a5530d937', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '0890b62f9594e3533c9373d7dd69c9a523459d2d', 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" }, h("div", { key: '29ab45edf20e7e5a5e09ba2b885ab728b20e03ea', class: "mx-auto no-other-bg-color logo", innerHTML: hLogoColor }), h("p", { key: '9ef9b01748e1ba30658714883b0997578c8b5e65', class: "f-ui-02 text-center" }, "Do not use with backgrounds that make legibility difficult")), h("li", { key: '86e3b5b446bec5b603a4805dfbd0178db38c9e7a', 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" }, h("div", { key: 'a4162957d768f7cc4a2ed37ea54936deb51b5139', class: "mx-auto no-other-color logo non-brand-color", innerHTML: hLogoColor }), h("p", { key: 'e191bfc6f34d3abb9932f0ee1a292a1ef2c014e4', class: "f-ui-02 text-center" }, "Do not apply other colors")), h("li", { key: '2ff5502d05c7250a96e713ae9262e196713972a0', 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" }, h("div", { key: '7fd6ae31c854500d409c1a7ded46701fd3594048', class: "mx-auto distorted logo", innerHTML: hLogoColor }), h("p", { key: '1ba0aa443e530fabe50a1c35424dbff92af91b26', class: "f-ui-02 text-center" }, "Do not deform the logo")), h("li", { key: 'd559f9daac4e6c9aaa4aede80674dcc8e08de6ca', 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" }, h("div", { key: '8a055314d4e27ff21d1cc549015c99bb9e902701', class: "mx-auto effects logo", innerHTML: hLogoColor }), h("p", { key: '89f33c8671e0fd28c5af8b043ac272bad057bb09', class: "f-ui-02 text-center" }, "Do not apply effects")), h("li", { key: 'cebc53c3b9587b6d7716024a1a918981091336d7', 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" }, h("div", { key: '5174d83109b26e78025e8423f7d8efb23645fcfe', class: "mx-auto rotated logo", innerHTML: hLogoColor }), h("p", { key: '11ad5211fe42aac40850750430f09fdf90ab7550', class: "f-ui-02 text-center" }, "Do not rotate the logo")), h("li", { key: 'a9d64273d612e625507e118e1eb026e46dbb2327', 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" }, h("div", { key: '23b94e3540210c8167250a3ea949811e38a4c54e', class: "mx-auto outlined logo", innerHTML: hLogoColor }), h("p", { key: '3540516d624e796c46ad8dde67c9894a12c46139', class: "f-ui-02 text-center" }, "Do not apply outlines")), h("li", { key: '5b727526d27d8451eaed5fdcfcbc6c5fb63d47bf', 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" }, h("div", { key: '3db0e0d743e3c4ea7de0d7acd9bd352bc13c884a', class: "mx-auto" }, h("div", { key: '813f12df22dc5216791bd7f830e487f7c7067a1d', class: "bg-accent p-16" }, h("div", { key: 'd0d7436a198169184ccf797fa9ab04502b629ab0', class: "text-inverse", innerHTML: hLogoColor })), h("p", { key: 'ef6e1a7df5f3d5ea40b4ea9ca39461da0413ba5c', 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 (h("div", { key: '40d75361172edb23a89faa173ce3518c8750f0f0', class: "container" }, h("ul", { key: '064c760800e2aceba08c3953292f421eae003896', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'd3213a50ed4d217c195bd9a9f1eff60406027892', 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" }, h("div", { key: '4a3cd51e083d28149bc96c611d2fb4bbb7db37b3', class: "mx-auto no-other-bg-color logo", innerHTML: hLogoColor }), h("p", { key: '81ec640d08f3aa79098e02ecbf0575787c61cd5a', class: "f-ui-02 text-center" }, "Do not use with backgrounds that make legibility difficult")), h("li", { key: '7eb0f204779fe3852ce732fec83cf7efccc8bfd7', 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" }, h("div", { key: '1e287231328b32ce97aee6c2d793b2a4885e5434', class: "mx-auto no-other-color logo non-brand-color", innerHTML: hLogoColor }), h("p", { key: 'f68bd11f49ca1fc5998ce9dbbd7d062ac30170cd', class: "f-ui-02 text-center" }, "Do not apply other colors")), h("li", { key: '06c5eb937c3ca8e556a987905281e3196c67da5c', 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" }, h("div", { key: 'a165382706515bcff0f4acdfc5ee505021ef8ec3', class: "mx-auto distorted logo", innerHTML: hLogoColor }), h("p", { key: '9675a3a6f0e52db908fdac0e34dc307c2ea85235', class: "f-ui-02 text-center" }, "Do not deform the logo")), h("li", { key: 'c7f53a6c25eeafb8704c500c6daa07746c493d1f', 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" }, h("div", { key: '2f8e8be3799a2eaae186412fd923da15ecd7ba14', class: "mx-auto effects logo", innerHTML: hLogoColor }), h("p", { key: '725a2a98e0c221d3edfda11b709ae9c9d4bc07b6', class: "f-ui-02 text-center" }, "Do not apply effects")), h("li", { key: 'e8de87168e68efaf2afe99fe83e4d336a5c0a106', 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" }, h("div", { key: 'f1e0aa5ed1f402bdb6314c156d2f554626701123', class: "mx-auto rotated logo", innerHTML: hLogoColor }), h("p", { key: '5360e8d9dc65987adbe5b689a7dbf97a27d47aba', class: "f-ui-02 text-center" }, "Do not rotate the logo")), h("li", { key: '8e21d4edf6a714c41f6add93d70996abd8ad23aa', 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" }, h("div", { key: '9510ae79414b2b74d15f8c3fafa92cb2a9b34959', class: "mx-auto outlined logo", innerHTML: hLogoColor }), h("p", { key: 'ef077ee715e907cd5d6e22f03f1f490ed1e159a3', class: "f-ui-02 text-center" }, "Do not apply outlines")), h("li", { key: '397110091fb08f7e34c16c8a264314153ac16ac3', 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" }, h("div", { key: '0b8e2644362c8131f6df52af19aaa0b37fb3331a', class: "mx-auto" }, h("div", { key: '7d8b31e4b27bcc28847dd6c912a95bb1b9c08694', class: "bg-accent p-16" }, h("div", { key: '29b1988e197e997ce13c962dd872310bd61a545a', class: "text-inverse", innerHTML: hLogoColor })), h("p", { key: '6336def9b4ada2e13a43c037aec0ff59aa142e8c', 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 is() { return "logo-wrong-usage"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/eds-docs-ui/svg-repository/svg-repository.js

@@ -25,7 +25,7 @@ export class SvgRepository {
             icon: { format: 'svg' },
             name: { format: 'bold' }
         };
-        return (h("div", { key: '337ffab9c7167da8c4e7300297faf0e7dd5886e0', class: "full-width" }, h("eds-table", { key: '686e28e32060b5b4f72769744569460555466bb9', "table-data": JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true })));
+        return (h("div", { key: '48b9bd49dc2521db7fc1676544530f6bd9cd6287', class: "full-width" }, h("eds-table", { key: 'c3b5bdecde28ad6ec8a5172d883d49a8b0436f18', "table-data": JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true })));
     }
     static get is() { return "svg-repository"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/shared-ui/eds-cookies-preference/eds-cookies-preference.js

@@ -25,7 +25,7 @@ export class EdsCookiesPreference {
         }
     }
     render() {
-        return (h("div", { key: 'ce716958892ee4d324efeb2399885c13d63ff0bb' }, h("eds-link", { key: 'de191023658c2f4c59144d334075d8e1f4fa6133', size: "small", intent: this.intent, label: this.buttonText, onClick: () => this.toggleCookiesPopup() }), this.showMatomoNotice && h("eds-matomo-notice", { "force-show": true, key: this.noticeKey })));
+        return (h("div", { key: '37a817a2c1cccb58a7445c399f20ce5fb97653b8' }, h("eds-link", { key: '9bf85d4fe82d7a525bae6f765da7dea9a3913494', size: "small", intent: this.intent, label: this.buttonText, onClick: () => this.toggleCookiesPopup() }), this.showMatomoNotice && h("eds-matomo-notice", { "force-show": true, key: this.noticeKey })));
     }
     static get is() { return "eds-cookies-preference"; }
     static get originalStyleUrls() {

package/dist/collection/shared-ui/eds-feedback/eds-feedback.js

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { parseData } from "../../utils/sharedUtils";
 export class EdsFeedback {
     constructor() {
+        this.headingLevel = 'h1';
         this.type = 'star';
         this.count = 5;
         this.label = 'Rate your Experience!';
@@ -47,7 +48,11 @@ export class EdsFeedback {
         this.selectedRating = e.detail;
     }
     render() {
-        return (h("div", { key: 'a8cf97bdcd7957b98dfca11e178361acf667c23c', class: "grid inline" }, h("h1", { key: '231bb9f49dc6084045a392b1d93c9b4454bbf268', class: "f-heading-01 my-4" }, this.label), h("p", { key: 'a70274de05139c8ab40b5a4a2e599dc14b3d3a9f', class: "f-body-01 text-light" }, this.description), h("eds-rating", { key: '5353b7616112591240819e4b762790224a1b7cc7', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: 'e5f8f10fb052a6de080b61cf78c309a55d081576', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
+        // Determine the heading tag and CSS class
+        const HeadingTag = this.headingLevel;
+        const levelNum = this.headingLevel.replace('h', '');
+        const headingClass = `f-heading-${levelNum.padStart(2, '0')} my-4`;
+        return (h("div", { key: 'f1bec91df97ff2a54a8ec8284e88f572b3bf0081', class: "grid inline" }, h(HeadingTag, { key: '8051043d5ec79a1f972fd732ef8a716487ed51d2', class: headingClass }, this.label), h("p", { key: '55f319e89376372f13c2bb96b9a94ceed6a6565b', class: "f-body-01 text-light" }, this.description), h("eds-rating", { key: 'c9c725d4a1ae65eb6b773178f6435d239c434034', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: 'e3ea621a035ecd6da07803478d202b2326997416', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
     }
     static get is() { return "eds-feedback"; }
     static get encapsulation() { return "shadow"; }
@@ -63,6 +68,24 @@ export class EdsFeedback {
     }
     static get properties() {
         return {
+            "headingLevel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'h1' | 'h2' | 'h3' | 'h4' | 'h5'",
+                    "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The HTML heading level to use for the label. Valid values: 'h1' - 'h5'."
+                },
+                "attribute": "heading-level",
+                "reflect": false,
+                "defaultValue": "'h1'"
+            },
             "type": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/shared-ui/eds-feedback/eds-feedback.stories.js

@@ -2,8 +2,14 @@ export default {
     title: 'Shared Ui/Feedback',
     component: 'eds-feedback',
     argTypes: {
+        headingLevel: {
+            control: 'select',
+            options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+            defaultValue: 'h1'
+        },
         type: {
-            control: { type: 'select', options: ['star', 'thumbs-up', 'thumbs-down'] },
+            control: 'select',
+            options: ['star', 'thumbs-up', 'thumbs-down'],
             description: 'The type of icon to display.'
         },
         count: {
@@ -24,6 +30,7 @@ export default {
         }
     },
     args: {
+        headingLevel: 'h1',
         type: 'star',
         count: 5,
         label: 'Rate your Experience!',
@@ -34,6 +41,7 @@ export default {
 export const Default = {
     render: (args) => `
       <eds-feedback
+        heading-level="${args.headingLevel}"
         type="${args.type}"
         count="${args.count}"
         label="${args.label}"

package/dist/collection/shared-ui/eds-footer/eds-footer.css

@@ -146,6 +146,10 @@ p {
     margin-top: 0.25rem;
 }
 
+.mr-4 {
+    margin-right: 0.25rem;
+}
+
 .gap-12 {
     gap: 0.75rem;
 }

package/dist/collection/shared-ui/eds-footer/eds-footer.js

@@ -27,7 +27,9 @@ export class EdsFooter {
         this.enableScrollTop = false;
         this.fundedBy = 'EBRAINS is funded by the Horizon Europe Framework Programme.';
         this.rightsReserved = `${new Date().getFullYear()} EBRAINS. All rights reserved.`;
+        this.cookiesPreferences = 'Cookies preferences';
         this.enableCookiesSettings = false;
+        this.backToTopAriaLabel = 'Back to Top';
         this.showMatomoNotice = false;
     }
     toggleCookiesConsent() {
@@ -41,9 +43,9 @@ export class EdsFooter {
      * @returns {JSX.Element} The rendered JSX for the footer component.
      */
     render() {
-        return (h("footer", { key: '2a99348e9f64c79f7b1944ace75655baebd50e3c', class: `pb-banner` }, this.social ? (h("div", { class: "border-softest border-t-2 pt-20 md:pt-28" }, h("div", { class: "container pb-20" }, h("div", { class: "grid-layout" }, h("div", { class: "grid-col-span-12 lg:grid-col-span-5" }, h("eds-social-networks", { class: "mt-28" })))))) : null, h("div", { key: '412b84850076b915f826eb7d3ff1c2d1c67a21ea', class: `border-softest ${this.social ? 'border-t-2' : ''} pb-28 pt-20 md:pt-28` }, h("div", { key: '9eadb5d7ee3dff852926ea9f21f4f579ab1517bf', class: "container flex items-center gap-20 lg:flex-nowrap" }, h("div", { key: 'f937513ea871cd6f0a4199ec604680bc739e51f8', class: "flex items-center gap-x-12" }, h("a", { key: '7c5907699897549ee2d28740ebee93cbd0e8def6', target: "_blank", rel: "noopener noreferrer", class: "effect-focus focus-visible:rounded-xs flex w-[54px] ml-0", href: "https://research-and-innovation.ec.europa.eu/funding/funding-opportunities/funding-programmes-and-open-calls/horizon-2020_en", "aria-label": "Learn about Horizon 2020 funding" }, h("eds-img", { key: '9975d54dc532c325fd87231b1985df40a2c2e945', width: 54, height: 41, src: "https://www.ebrains.eu/flags/4x3/eu.svg", alt: "European Union Flag" }))), h("div", { key: '6deeebdaef90c09f0f1ca6c8913dff6de9d7b169' }, h("div", { key: '6aaa0969bf9a6df1426ed6f6b27ba4d7800802be', class: "f-ui-04 text-light" }, h("p", { key: 'bc7eb7b7e97e4a919d677a628318c71e751cefbf' }, this.fundedBy), h("div", { key: 'd4ed7e30c1b8f8fd2a53ba4a929b002792bff6d9', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block" }, h("span", { key: '7ac4133476c345752c725ffab175bd5d58875d3e', class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline" }, "\u00A9 ", this.rightsReserved), this.enableCookiesSettings ? (h("eds-link", { label: "Cookies preferences", intent: "weak", "extra-class": "f-ui-04 ml-4 cursor-pointer effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline", onClick: () => {
+        return (h("footer", { key: '7bbc8cd8e0e3a153dc30bb3569e83afc0bc09b0a' }, this.social ? (h("div", { class: "border-softest border-t-2 pt-20 md:pt-28" }, h("div", { class: "container pb-20" }, h("div", { class: "grid-layout" }, h("div", { class: "grid-col-span-12 lg:grid-col-span-5" }, h("eds-social-networks", { class: "mt-28" })))))) : null, h("div", { key: '9ee8ada698546344b18e557ee1de76042cd727ed', class: `border-softest ${this.social ? 'border-t-2' : ''} pb-28 pt-20 md:pt-28` }, h("div", { key: 'e795e5bba0273b4147c66ed667142997bc0cbaff', class: "container flex items-center gap-20 lg:flex-nowrap" }, h("div", { key: 'fa09a0dbccb035b1e4f496aa447aca241bcc2415', class: "flex items-center gap-x-12" }, h("a", { key: '578d6a8463e65d07278f8328c108ee266cfba2b8', 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" }, h("eds-img", { key: '5b9e987c2ecf62fb4f44c1faacad7c569a149805', width: 54, height: 41, src: "https://www.ebrains.eu/flags/4x3/eu.svg", alt: "European Union Flag" }))), h("div", { key: 'df75949c0718b8fb7dd449a6e7df39d332da366f' }, h("div", { key: 'f83d31b16d0601cd456d5cb72e9fa2adb29a2b66', class: "f-ui-04 text-light" }, h("p", { key: 'dcdf09d78ca64c5391d56fe5ed69bab987cbf67b' }, this.fundedBy), h("div", { key: 'af279fb5dfdf0a8f1f85e6ce7446dc3a0eeac397', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block" }, h("span", { key: '026b41fa6162ffb6825ccf98364b4caf64b6457a', class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline mr-4" }, "\u00A9 ", this.rightsReserved), this.enableCookiesSettings ? (h("eds-link", { label: this.cookiesPreferences, intent: "underline", "extra-class": "f-ui-04", onClick: () => {
                 this.toggleCookiesConsent();
-            } })) : null))), h("div", { key: '8b17a14ccdca13e9e60065b7dd5e904dbebc586e', class: "ml-auto pl-12" }, this.enableScrollTop ? (h("eds-button", { id: "backToTop", "aria-hidden": "true", "aria-label": "Back to Top", intent: "ghostInverse", icon: "chevron-up", onClick: this.backToTop, class: "transition-all transition duration-75 opacity-0 " })) : null)))));
+            } })) : null))), h("div", { key: '27cb561815d6918567ab8cfa1148019aca8aeda0', class: "ml-auto pl-12" }, this.enableScrollTop ? (h("eds-button", { id: "backToTop", "aria-hidden": "true", "aria-label": this.backToTopAriaLabel, intent: "ghostInverse", icon: "chevron-up", onClick: this.backToTop, class: "transition-all transition duration-75 opacity-0 " })) : null)))));
     }
     static get is() { return "eds-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -143,6 +145,27 @@ export class EdsFooter {
                 "reflect": false,
                 "defaultValue": "`${new Date().getFullYear()} EBRAINS. All rights reserved.`"
             },
+            "cookiesPreferences": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
+                    "text": "Controls the display of the \"Cookies preferences\" text."
+                },
+                "attribute": "cookies-preferences",
+                "reflect": false,
+                "defaultValue": "'Cookies preferences'"
+            },
             "enableCookiesSettings": {
                 "type": "boolean",
                 "mutable": false,
@@ -160,6 +183,27 @@ export class EdsFooter {
                 "attribute": "enable-cookies-settings",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "backToTopAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
+                    "text": "Controls the display of the \"Back to Top\" aria label text."
+                },
+                "attribute": "back-to-top-aria-label",
+                "reflect": false,
+                "defaultValue": "'Back to Top'"
             }
         };
     }

package/dist/collection/shared-ui/eds-footer/eds-footer.stories.js

@@ -21,6 +21,14 @@ export default {
         enableCookiesSettings: {
             control: 'boolean',
             description: 'Enable cookies consent preferences'
+        },
+        cookiesPreferences: {
+            control: 'text',
+            description: 'Control for the cookies preferences text'
+        },
+        backToTopAriaLabel: {
+            control: 'text',
+            description: 'Control for the back to top aria label text'
         }
     },
     args: {
@@ -28,17 +36,20 @@ export default {
         fundedBy: 'EBRAINS is funded by the Horizon Europe Framework Programme.',
         rightsReserved: '2024 EBRAINS. All rights reserved.',
         enableScrollTop: false,
-        enableCookiesSettings: false
+        enableCookiesSettings: false,
+        cookiesPreferences: 'Cookies Preferences',
+        backToTopAriaLabel: 'Back to Top'
     },
     parameters: {}
 };
 export const Default = {
     render: (args) => {
         const notice = args.enableCookiesSettings
-            ? `
-        <eds-alert message="When cookies consent is enabled, please include <code>eds-matomo-notice</code> in your page"></eds-alert>`
+            ? `  
+        <eds-matomo-notice></eds-matomo-notice>`
             : '';
         return `
+      <eds-alert message="When cookies consent is enabled, please include <code>eds-matomo-notice</code> in your page"></eds-alert>
       ${notice}
       <eds-footer
         social="${args.social}"
@@ -46,6 +57,8 @@ export const Default = {
         rights-reserved="${args.rightsReserved}"
         enable-scroll-top="${args.enableScrollTop}"
         enable-cookies-settings="${args.enableCookiesSettings}"
+        cookies-preferences="${args.cookiesPreferences}"
+        back-to-top-aria-label="${args.backToTopAriaLabel}"
       ></eds-footer>
     `;
     }