@ebrains/components 0.7.0-alpha.0 → 0.8.0-alpha.0

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("ul", { key: 'bc42810801b7692a7cce35d1b3d44ae70bf79db7', class: "container grid-layout gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("span", { key: '5961e3d0148ddfdb9d77c72c5cb8dd6733cdbc1c', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: 'fe06a82d62bb7bedc6880991c45c099c1e4f913e', class: "example" }, h("div", { key: '3f851373000c1b0cb1ecf0c42add9eef09d7e969', class: "bg-dark " }, h("div", { key: '2cdcc5b3419e5a9bdfde2c6ebeeafe482b060808', class: "no-other-bg-color logo", innerHTML: hLogoColor })), h("p", { key: '027a7e9000a7b0e18697e1add62fb52bc340e56d', class: "f-ui-02" }, "Do not use with backgrounds that make legibility difficult"))), h("span", { key: '37821295b19c46c6bd23f75ff090f42513f2c52a', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '7f4fb4c6e94d1cfa0080bf4716d386a64cc588a6', class: "example" }, h("div", { key: '9b580db406baa9ab882042693238d96db83099b1', class: "no-other-color p-16" }, h("div", { key: '6c1b3d0668acae7f1542fddbd83444c187f8f447', class: "logo non-brand-color", innerHTML: hLogoColor })), h("p", { key: '644fb68b648f330c80ff295f9a4d74924b44e5dd', class: "f-ui-02" }, "Do not apply other colors"))), h("span", { key: '651a9bf67507fdfe1289d1afaced18bdc739313c', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '211ca59ce2d0760a752fa2fd087a43e9b61bdd9b', class: "example" }, h("div", { key: '526628247fe9587785c79bef6e16630a988a2af9', class: "bg-light p-16" }, h("div", { key: 'fd9b59d40e805902bd628a04525d27fcbe6d99b1', class: "logo distorted", innerHTML: hLogoColor })), h("p", { key: '97e0a604d08be01ac7956fe284f2325a680496d2', class: "f-ui-02" }, "Do not deform the logo"))), h("span", { key: '23cf6c4f70ededbfd3347f31adc749e4e411c5b2', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '5d1702074e065740261bb7a86ce18139c2336dd6', class: "example" }, h("div", { key: '1b0fcc5f673339bf8ac84ed317ba4c214f5f2618', class: "bg-white p-16" }, h("div", { key: '708f276b908ee858a634034a0a9d025fe3f0515d', class: "logo effects", innerHTML: hLogoColor })), h("p", { key: 'cb99b28a2154bf90565480386d8b3b67de0b76bb', class: "f-ui-02" }, "Do not apply effects"))), h("span", { key: '96f8a61f549c8e83f8a81bfba629a40eb26716a9', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: 'd1cf64b340f6551e4f4a8189c355a22e95d8b3c9', class: "example" }, h("div", { key: '264fc7c03ad4b17a9631d7ede8714f4e91aec931', class: "bg-white p-16" }, h("div", { key: 'a39c949f0b7494bfc08d689e21f84303fd9f9327', class: "logo rotated", innerHTML: hLogoColor })), h("p", { key: 'e1b264ef7f8b68fd0dd0f9271d26db65c355497b', class: "f-ui-02" }, "Do not rotate the logo"))), h("span", { key: '3dada86d19486aefe9970a5555caa14e2abaad8f', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '973e204cb94bda151712b413f38e5a03df46ffdf', class: "example" }, h("div", { key: 'cc9f9d40a9736663c426a9bea6e3060a847a9be5', class: "bg-light p-16" }, h("div", { key: '60bde7eea395d1454e2f9a47535b92752430043f', class: "logo outlined", innerHTML: hLogoColor })), h("p", { key: '9469d10927d103ceb37b8b192ac220d53db06196', class: "f-ui-02" }, "Do not apply outlines"))), h("span", { key: 'a4cdf1201a61559fed04eef9c20511a242ba0306', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }), h("span", { key: '6fbc736e477be9d0952053abc687e9b08dcba324', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: 'ae655c9985d173716e6c0ff62683efa887998910', class: "example" }, h("div", { key: 'd1597bb34428986cf534ec74cedfa5656b6fe1c8', class: "bg-accent p-16" }, h("div", { key: 'ed43780afc9ae3e9f85c8168f1182be9a29b36ce', class: "text-inverse", innerHTML: hLogoColor })), h("p", { key: '1232c6e2018bfc9cb6fc39d076049ce9cd949775', class: "f-ui-02" }, "Do not use the green background for the logo version of the logo with backgrounds with the same tones")))));
+        return (h("ul", { key: 'f5aef262ac65790a1f86ea7eb8a80fc093406798', class: "container grid-layout gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("span", { key: '150bcdb8502a137f54415e24618cf39d0f098c28', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '7df94271a37ae57dc021390f6f16637ea3c6948e', class: "example" }, h("div", { key: '8b4bff581312ed63a5812b9bd7c93bbae6137809', class: "bg-dark " }, h("div", { key: '78fd9855901f2da1392006dbbcaec5537586ef9d', class: "no-other-bg-color logo", innerHTML: hLogoColor })), h("p", { key: '5bbf1ae6a4b6b4f9c1a5a310c0c5b123b24f3581', class: "f-ui-02" }, "Do not use with backgrounds that make legibility difficult"))), h("span", { key: '7d1c8346857b6366b69e9ad6bc910adfed8b6213', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '3df57b6e370e166e63b36aa45901800de51bedc5', class: "example" }, h("div", { key: 'dc1983f4b8faad9d3c23ad612a1c01462bf033b0', class: "no-other-color p-16" }, h("div", { key: '42f985c970bce2bfa9590f64458e6987500d6036', class: "logo non-brand-color", innerHTML: hLogoColor })), h("p", { key: '9f44984a151b0720f2be17074bdd3c0d42c8210a', class: "f-ui-02" }, "Do not apply other colors"))), h("span", { key: 'd6481a9e1f79c892e54853f3137e5724a42c2479', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: 'fd550421e565543c1aaff054a86733a585ce9b9b', class: "example" }, h("div", { key: '3b677e85c9b3cb237e10a212187ba192b711fd53', class: "bg-light p-16" }, h("div", { key: '958733b94eca4e7e27dc5ac3e74f2c745198f37d', class: "logo distorted", innerHTML: hLogoColor })), h("p", { key: '9f4d3fc90cf8143480fb143a8932f91185a62f4c', class: "f-ui-02" }, "Do not deform the logo"))), h("span", { key: '7254597b2dbcb94118547e3b640c79c3bbd3e7ff', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '4caef2a8c103ecfc8ff91e40b8c5255571984d14', class: "example" }, h("div", { key: 'c93ae6b7c3d58700300fe01b398e4e57728fb314', class: "bg-white p-16" }, h("div", { key: '92916204870722a6da1f45d3d09505589763390b', class: "logo effects", innerHTML: hLogoColor })), h("p", { key: 'f9295bc1f1b1de2c575d934588f95dee6fc81143', class: "f-ui-02" }, "Do not apply effects"))), h("span", { key: '1b8488e14728799e81205823d2a964cf8e6f9baf', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: 'd3be08fe47ce2fd20dee086553cd16950fb6f964', class: "example" }, h("div", { key: '76713df96cca42778f26b580e790dd3fcfb0abee', class: "bg-white p-16" }, h("div", { key: 'db1a9153dc37119255fa75ea0491daea09545d61', class: "logo rotated", innerHTML: hLogoColor })), h("p", { key: '95b0f06f728a846119bd6844207e93d068dabcc6', class: "f-ui-02" }, "Do not rotate the logo"))), h("span", { key: '92c5de7b7834ae8a14548712239ec22667d2fb5c', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '64533bc4e04c802b4cedc6866c168eaac72c2550', class: "example" }, h("div", { key: 'd630811a1c2ae0a252a7e1bdf7383440e6aa417a', class: "bg-light p-16" }, h("div", { key: '525f7eaebf6e0a75b4ea91c2795f13a7837ebb54', class: "logo outlined", innerHTML: hLogoColor })), h("p", { key: '455855e6657b98d55b0f637548a88ed312130007', class: "f-ui-02" }, "Do not apply outlines"))), h("span", { key: 'a0c54e90591e693fb705d085c21b281e0468bc6e', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }), h("span", { key: 'af1f7db921096e0a20372ad028bf8eb6522ec736', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: 'ba754fd4de6ea65d74f8215aee158c3657b42b23', class: "example" }, h("div", { key: '91b10cf3ad9ce224546f5c67ddd10a6009a6278d', class: "bg-accent p-16" }, h("div", { key: '1ea0aa874d42426a0e4762532a1b5aaa8c7fc671', class: "text-inverse", innerHTML: hLogoColor })), h("p", { key: '3219f17362a76b5694e44c34d9405c04e378d7fd', class: "f-ui-02" }, "Do not use the green background for the logo version of the logo with backgrounds with the same tones")))));
     }
     static get is() { return "logo-wrong-usage"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/shared-ui/eds-card-section/eds-card-section.stories.js

@@ -9,10 +9,6 @@ export default {
         occupyCols: {
             control: { type: 'number', min: 1, max: 12, step: 1 },
             description: 'Number of columns to span for each card in the grid layout'
-        },
-        extraClass: {
-            control: 'text',
-            description: 'Additional CSS classes for custom styling'
         }
     },
     args: {
@@ -58,8 +54,7 @@ export default {
                 }
             }
         ],
-        cols: 4,
-        extraClass: ''
+        occupyCols: 4
     },
     parameters: {}
 };

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

@@ -25,10 +25,9 @@ export class EdsCookiesPreference {
         }
     }
     render() {
-        return (h("div", { key: '48f67648644ae9c8e645791ad3cbba5491866dc5' }, h("eds-link", { key: '50154721f0f44e811ebe362e18bcf8cfb77b8f64', 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: '13e1244d4e151f091eaca1d22dbed009bcb97786' }, h("eds-link", { key: '4cfc54b447c93824f98da1f990a28fdb61018afe', 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 encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["eds-cookies-preference.css"]

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

@@ -47,7 +47,7 @@ export class EdsFeedback {
         this.selectedRating = e.detail;
     }
     render() {
-        return (h("div", { key: '125299e9780486a10213fc3c59b15e7a4fb62616', class: "grid inline" }, h("p", { key: '6a02d78d34a590bc213cd5bf311ec8bed44f8959', class: "f-heading-03 my-4" }, this.label), h("p", { key: '76146fbade2f864ba7b72429a85218ebf6a24ea7', class: "f-body-02 text-light" }, this.description), h("eds-rating", { key: '38e0ec9219adaf85f674fab6be471112f06e42ff', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: 'beab34888d3db63ca2ee374a2d10d407bfc948cc', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
+        return (h("div", { key: '3cdbbc2eb256ca4f2008f03e90ae9aacb6afbaac', class: "grid inline" }, h("p", { key: 'afb5aa7ab4a8c3117a4db0a5cbeca0195ccec3e8', class: "f-heading-03 my-4" }, this.label), h("p", { key: '9b1b83b31d05d10943bcf9e9a413686caa9e49a7', class: "f-body-02 text-light" }, this.description), h("eds-rating", { key: '4535006f72ee21d168d9b42da6a5c3528417d2f4', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: 'b90b59aaae1e2bc6071e1488f332d0c154bdb25a', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
     }
     static get is() { return "eds-feedback"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,226 @@
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+p {
+  margin: 0;
+}
+
+.cursor-pointer {
+    cursor: pointer;
+}
+
+.ml-4 {
+    margin-left: 0.25rem;
+  }
+
+.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;
+}
+
+.bg-darker {
+    background-color: var(--grey-400);
+}
+
+.border-softest {
+    border-color: rgba(0, 0, 0, .05);
+}
+
+.border-t-2 {
+    border-top-width: 2px;
+}
+
+.pt-20 {
+    padding-top: 1.25rem;
+}
+
+.pb-28 {
+    padding-bottom: 1.75rem;
+}
+
+.grid-layout {
+    display: grid;
+    grid-template-columns: repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);
+    grid-gap: var(--inner-gutter);
+}
+
+.grid-col-span-12 {
+    --container-grid-columns: 12;
+    grid-column: span 12 / span 12;
+}
+
+.mt-28 {
+    margin-top: 1.75rem;
+}
+
+.gap-y-12 {
+    row-gap: 0.75rem;
+}
+
+.gap-x-12 {
+    -moz-column-gap: 0.75rem;
+    column-gap: 0.75rem;
+}
+
+.inline {
+    display: inline;
+}
+
+.flex {
+    display: flex;
+}
+
+.inline-flex {
+    display: inline-flex;
+}
+
+.flex-wrap {
+    flex-wrap: wrap;
+}
+
+.items-center {
+    align-items: center;
+}
+
+.justify-center {
+    justify-content: center;
+}
+
+.justify-between {
+    justify-content: space-between;
+}
+
+.gap-20 {
+    gap: 1.25rem;
+}
+
+.effect-focus {
+    outline-width: 3px;
+    outline-offset: 2px;
+    outline-color: var(--green-500);
+}
+
+.focus-visible\:rounded-xs:focus-visible {
+    border-radius: 4px;
+}
+
+.flex {
+    display: flex;
+}
+
+.w-\[54px\] {
+    width: 54px;
+}
+
+.ml-0 {
+    margin-left: 0rem;
+}
+
+.order-last {
+    order: 9999;
+}
+
+.w-full {
+    width: 100%;
+}
+
+.f-ui-04 {
+    font-family: var(--f-ui-04-fontFamily);
+    font-weight: var(--f-ui-04-fontWeight);
+    font-size: var(--f-ui-04-fontSize);
+    line-height: var(--f-ui-04-lineHeight);
+    letter-spacing: var(--f-ui-04-letterSpacing);
+}
+
+.text-light {
+    color: var(--grey-700);
+}
+
+.mt-4 {
+    margin-top: 0.25rem;
+}
+
+.gap-12 {
+    gap: 0.75rem;
+}
+
+.inline-block {
+    display: inline-block;
+}
+
+.\!no-underline {
+    text-decoration-line: none !important;
+}
+
+.decoration-2 {
+    text-decoration-thickness: 2px;
+}
+
+.underline-offset-4 {
+    text-underline-offset: 4px;
+}
+
+.hover\:\!underline:hover {
+    text-decoration-line: underline !important;
+}
+
+.ml-auto {
+    margin-left: auto;
+}
+
+.pl-12 {
+    padding-left: 0.75rem;
+}
+
+
+
+
+@media (min-width: 750px) {
+    .md\:pt-28 {
+        padding-top: 1.75rem;
+    }
+}
+
+@media (min-width: 900px) {
+    .lg\:grid-col-span-5 {
+        --container-grid-columns: 5;
+        grid-column: span 5 / span 5;
+    }
+
+    .lg\:grid-col-span-6 {
+        --container-grid-columns: 6;
+        grid-column: span 6 / span 6;
+    }
+
+    .lg\:grid-col-start-7 {
+        grid-column-start: 7;
+    }
+
+    .lg\:mt-0 {
+        margin-top: 0rem;
+    }
+
+    .lg\:flex-nowrap {
+        flex-wrap: nowrap;
+    }
+
+    .lg\:order-none {
+        order: 0;
+    }
+
+    .lg\:w-auto {
+        width: auto;
+    }
+}
+
+@media (min-width: 1024px) {
+    .xl\:pb-40 {
+        padding-bottom: 2.5rem;
+    }
+}

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

@@ -23,13 +23,16 @@ export class EdsFooter {
         this.backToTop = () => {
             window.scrollTo({ top: 0, behavior: 'smooth' });
         };
-        this.extraClass = '';
         this.social = false;
         this.enableScrollTop = false;
         this.fundedBy = 'EBRAINS is funded by the Horizon Europe Framework Programme.';
         this.rightsReserved = `${new Date().getFullYear()} EBRAINS. All rights reserved.`;
+        this.enableCookiesSettings = false;
         this.showMatomoNotice = false;
     }
+    toggleCookiesConsent() {
+        this.cookies.emit('toggle');
+    }
     /**
      * Renders the footer component with optional sections and elements,
      * including social network links, a Horizon Europe funding acknowledgment, and
@@ -38,9 +41,12 @@ export class EdsFooter {
      * @returns {JSX.Element} The rendered JSX for the footer component.
      */
     render() {
-        return (h("footer", { key: 'fc315d7ddfa4ede5514083d842bba36c991fef8a', class: `${this.extraClass} pb-banner` }, this.social ? (h("div", { class: "border-softest border-t-2 pt-20 pb-28 md:pt-28" }, h("div", { class: "container pb-20 xl:pb-40 " }, h("div", { class: "grid-layout" }, h("div", { class: "grid-col-span-12 lg:grid-col-span-5" }, h("eds-social-networks", { class: "mt-28" })), h("nav", { "aria-label": "Secondary nav", class: "grid-col-span-12 lg:grid-col-span-6 lg:grid-col-start-7 grid-layout mt-28 gap-y-12 lg:mt-0" }))))) : null, h("div", { key: '9d00bf38cabc8cea80be80b0e26f57fa70e635fb', class: `border-softest ${this.social ? 'border-t-2' : ''} pt-20 pb-28 md:pt-28` }, h("div", { key: '67342d2033716108d6b7137029709d0048dd06f2', class: "container flex flex-wrap items-center gap-20 lg:flex-nowrap" }, h("div", { key: '44bbeddacf48ed1d3a8f716cb9a044f7175aabab', class: "flex items-center gap-x-12" }, h("a", { key: '34ce75ccde53cfd7771d7d325d989a23d148011f', 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: 'f06317200fe90580ca1d2d512e665252d11b4799', width: 54, height: 41, src: "https://www.ebrains.eu/flags/4x3/eu.svg", alt: "European Union Flag" }))), h("div", { key: '6a81ccd4f5196c6567a60c6a43c468178154f9ad', class: "order-last w-full lg:order-none lg:w-auto" }, h("div", { key: 'e10de8b2e966cd0a2febcc8e8c5189b7694f856c', class: "f-ui-04 text-light" }, h("p", { key: '26f14c5c27859d1fea9985800d8e35023ca8ade9' }, this.fundedBy), h("div", { key: '7eabdf80c9c9e42793eff579c2ec92d934611bb2', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block" }, h("span", { key: 'abe3d9e7091e15f09782cdde3e59228f6e143805', class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline" }, "\u00A9 ", this.rightsReserved)))), h("div", { key: '0c3371aec2ff5f9e348bef2171e4bc5a353960e2', class: "ml-auto pl-12" }, this.enableScrollTop ? (h("eds-button", { "aria-label": "Back to top", intent: "ghostInverse", icon: "chevron-up", onClick: this.backToTop })) : null)))));
+        return (h("footer", { key: '97ad163716ff16e519a37a9d69895ec1813a1d28', 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: '170923d5155be90a814adaf5ec503d6f3c097fba', class: `border-softest ${this.social ? 'border-t-2' : ''} pb-28 pt-20 md:pt-28` }, h("div", { key: '21d0e035b5d3163530af6dcd23b908689696e8dc', class: "container flex items-center gap-20 lg:flex-nowrap" }, h("div", { key: '4a1926948db9d4717396a07fef924a10c3f28480', class: "flex items-center gap-x-12" }, h("a", { key: '91f122ffc396a19233d8b1b443db83e7eb272afc', 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: 'a159fed1d2f11be99143d1858cc8b40687d121e0', width: 54, height: 41, src: "https://www.ebrains.eu/flags/4x3/eu.svg", alt: "European Union Flag" }))), h("div", { key: 'c1d69e25e663e8a25ef9f333bcd555863a2afe40' }, h("div", { key: 'a7d7895bfc18565aa8b98c751f99365de5e33532', class: "f-ui-04 text-light" }, h("p", { key: 'bb7a341fb7471e0cdcf3cd3bbe2bbb1f42296535' }, this.fundedBy), h("div", { key: '2abd03a76d5c89f004e8da425f03e9152e4f2290', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block" }, h("span", { key: '21e042b3b5a7b09c1ad92daf7ce191714a157892', 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: () => {
+                this.toggleCookiesConsent();
+            } })) : null))), h("div", { key: '9bce0373f2b427b1244916c88a2cabefe41e7b14', 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)))));
     }
     static get is() { return "eds-footer"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["eds-footer.css"]
@@ -53,27 +59,6 @@ export class EdsFooter {
     }
     static get properties() {
         return {
-            "extraClass": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "type",
-                            "text": "{string}"
-                        }],
-                    "text": "Additional CSS classes to apply to the footer for customization."
-                },
-                "attribute": "extra-class",
-                "reflect": false,
-                "defaultValue": "''"
-            },
             "social": {
                 "type": "boolean",
                 "mutable": false,
@@ -157,6 +142,24 @@ export class EdsFooter {
                 "attribute": "rights-reserved",
                 "reflect": false,
                 "defaultValue": "`${new Date().getFullYear()} EBRAINS. All rights reserved.`"
+            },
+            "enableCookiesSettings": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "enable-cookies-settings",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -165,4 +168,22 @@ export class EdsFooter {
             "showMatomoNotice": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "cookies",
+                "name": "cookies",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
 }

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

@@ -2,10 +2,6 @@ export default {
     title: 'Shared UI/Footer',
     component: 'eds-footer',
     argTypes: {
-        hasCookiesSetUp: {
-            control: 'boolean',
-            description: 'Whether the cookies popup has been set up'
-        },
         social: {
             control: 'boolean',
             description: 'Controls if the social section is displayed'
@@ -18,33 +14,31 @@ export default {
             control: 'text',
             description: 'Control for the rights reserved text'
         },
-        cookiesPreference: {
-            control: 'text',
-            description: 'Control for the cookies preference text'
+        enableScrollTop: {
+            control: 'boolean',
+            description: 'Scroll to top button'
         },
-        extraClass: {
-            control: 'text',
-            description: 'Additional CSS classes for custom styling'
+        enableCookiesSettings: {
+            control: 'boolean',
+            description: 'Enable cookies consent preferences'
         }
     },
     args: {
-        hasCookiesSetUp: false,
         social: false,
         fundedBy: 'EBRAINS is funded by the Horizon Europe Framework Programme.',
         rightsReserved: '2024 EBRAINS. All rights reserved.',
-        cookiesPreference: 'Cookies Preferences',
-        extraClass: ''
+        enableScrollTop: false,
+        enableCookiesSettings: false
     },
     parameters: {}
 };
 export const Default = {
     render: (args) => `
     <eds-footer
-      has-cookies-set-up="${args.hasCookiesSetUp}"
       social="${args.social}"
-      extra-class="${args.extraClass}"
       funded-by="${args.fundedBy}"
       rights-reserved="${args.rightsReserved}"
-      cookies-preference="${args.cookiesPreference}"
+      enable-scroll-top="${args.enableScrollTop}"
+      enable-cookies-settings="${args.enableCookiesSettings}"
     ></eds-footer>`
 };

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

@@ -0,0 +1,3 @@
+.mt-20 {
+    margin-top: 1.25rem;
+}

package/dist/collection/{components/eds-form-v2/eds-form-v2.js → shared-ui/eds-form/eds-form.js}

@@ -16,7 +16,7 @@ import { getFormInitData } from "../../utils/eds-form/formUtils";
  *
  * This component is ideal for implementing complex forms with specific validation and submission behaviors.
  */
-export class EdsFormV2 {
+export class EdsForm {
     constructor() {
         this.name = 'eds-form';
         this.setFormUrl = true;
@@ -221,23 +221,24 @@ export class EdsFormV2 {
     render() {
         const hiddenFields = this.parsedFields.filter((field) => field.type === 'hidden');
         const otherFields = this.parsedFields.filter((field) => field.type !== 'hidden');
-        return (h("form", { key: 'b5ec80c5fab2f16cb3b9a2f0e4e2ffc6f1ff3870', ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: '0fac703db54931d095b14ed26b4bd214e8d7cb0b' }, h("slot", { key: '4d8941744b5445fdb58187f020387c9418cf0c95' }), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), otherFields.map((field, index) => {
+        return (h("form", { key: '695438941134ef6a3c43b70008b1904b03700743', ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: '870ff661aded11c890e4f144a970c5ab5120a61f' }, h("slot", { key: 'b1070ccc8984afe457d28a6bbf52255dcbbc9b33' }), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), otherFields.map((field, index) => {
             var _a, _b;
             if (!this.isFieldVisible(field)) {
                 return null;
             }
             return (h("eds-input-field", { key: index, name: field.name, id: `${this.name}_${field.name}`, label: field.label, type: field.type, icon: field.icon || null, required: field.required, maxLength: field.maxlength, hint: field.hint, error: ((_a = this.errors[field.name]) === null || _a === void 0 ? void 0 : _a.length) > 0, errorMessage: (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br />'), onInput: (e) => this.handleInput(e, field), onChange: (e) => this.handleChange(e, field), class: index > 0 ? 'mt-20' : '', options: field.options }));
-        })), this.formBtn && (h("div", { key: '90443e4a7502815a0b2a8b6aba7041a35fe80c02', class: "mt-20" }, h("eds-button", { key: '52e829f8c91fa5f07a60bd2568269f6628fbe4c7', intent: "primary", label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
+        })), this.formBtn && (h("div", { key: '80e0af076f3c57124f8a1f6718a0d45cfd45c0cd', class: "mt-20" }, h("eds-button", { key: '51dd28fb2a6610983e50ddb60409b3acf18dba1b', intent: "primary", label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
     }
-    static get is() { return "eds-form-v2"; }
+    static get is() { return "eds-form"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["eds-form-v2.css"]
+            "$": ["eds-form.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["eds-form-v2.css"]
+            "$": ["eds-form.css"]
         };
     }
     static get properties() {

package/dist/collection/{components/eds-form-v2/eds-form-v2.stories.js → shared-ui/eds-form/eds-form.stories.js}

@@ -1,7 +1,7 @@
 import { html } from "lit-html";
 export default {
-    title: 'Components/Form v2',
-    component: 'eds-form-v2',
+    title: 'Shared UI/Form',
+    component: 'eds-form',
     argTypes: {
         name: { control: 'text', description: 'Form name', defaultValue: 'extended-form' },
         fields: { control: 'object', description: 'Form fields as JSON array' },
@@ -14,12 +14,12 @@ export default {
     }
 };
 const Template = (args) => html `
-  <eds-form-v2
+  <eds-form
     name="${args.name}"
     .fields="${JSON.stringify(args.fields)}"
     form-btn="${args.formBtn}"
     form-btn-label="${args.formBtnLabel}"
-  ></eds-form-v2>
+  ></eds-form>
 `;
 export const Default = Template.bind({});
 Default.args = {

package/dist/collection/{eds-docs-ui → shared-ui}/eds-frame/eds-frame.css

@@ -54,6 +54,9 @@
   .h-full {
     height: 100%;
   }
+  .h-auto {
+    height: auto;
+  }
   .effect-height {
     transition-duration: 300ms;
     transition-timing-function: cubic-bezier(0, 0, 0.2, 1);

package/dist/collection/{eds-docs-ui → shared-ui}/eds-frame/eds-frame.js

@@ -52,7 +52,7 @@ export class EdsFrame {
     articleClasses() {
         return [
             'bg-inverse min-h-156 rounded border-softer effect-focus-within relative flex grow flex-col border-2',
-            'w-full h-full'
+            'w-full h-auto'
         ].join(' ');
     }
     getFrameHeight() {
@@ -87,7 +87,7 @@ export class EdsFrame {
         return `${this.storybookUrl}/iframe.html?id=${this.storyPath}&viewMode=story`;
     }
     render() {
-        return (h("div", { key: 'e4b72fab30dcf1eeee6fdf3c63719599eafedb6d', class: this.articleClasses() }, h("div", { key: 'f8643db32120c14dd18b3d44ae530a83e81e59e0', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: '7b40c644e142e6a6356e4d6a683b9c1c57104f5d', class: "f-ui-02" }, this.frameLabel), !this.iframeError ? (h("eds-link", { label: this.urlLabel, url: this.storyLink, intent: this.intent, class: "ml-auto", external: true, disabled: false, icon: "arrow-diagonal" })) : null), h("div", { key: '8a1fe80134dadd38d113968ad0c825a6f9426921', class: "border-softer" }, this.iframeError ? (h("div", { class: "container ml-8 mr-8 mt-16" }, this.errorMessage)) : (h("iframe", { src: this.frameSrc, width: "100%", height: this.getFrameHeight(), title: this.frameLabel, frameBorder: "0", allowFullScreen: true })))));
+        return (h("div", { key: '387b8a4cb8f300a5a6b82287369f123b33613616', class: this.articleClasses() }, h("div", { key: '8db6b1b5aecdaf2722786db85b2d3cf5b4bccac4', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: '696cb266ffbaeb8325c274c646668ba0d8beb751', class: "f-ui-02" }, this.frameLabel), !this.iframeError ? (h("eds-link", { label: this.urlLabel, url: this.storyLink, intent: this.intent, class: "ml-auto", external: true, disabled: false, icon: "arrow-diagonal" })) : null), h("div", { key: '9841812873efe999746eb008dd5e606e89efdb71', class: "border-softer" }, this.iframeError ? (h("div", { class: "container ml-8 mr-8 mt-16" }, this.errorMessage)) : (h("iframe", { src: this.frameSrc, width: "100%", height: this.getFrameHeight(), title: this.frameLabel, frameBorder: "0", allowFullScreen: true })))));
     }
     static get is() { return "eds-frame"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/{eds-docs-ui → shared-ui}/eds-frame/eds-frame.stories.js

@@ -1,6 +1,6 @@
 import { html } from "lit-html";
 export default {
-    title: 'Components/Frame',
+    title: 'Shared Ui/Frame',
     component: 'eds-frame',
     argTypes: {
         frameLabel: {