@ebrains/components 2.1.0 → 2.2.0

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

@@ -56,13 +56,11 @@ export class EdsFooter {
      * Renders the footer component with optional sections and elements,
      * including social network links, a Horizon Europe funding acknowledgment, and
      * legal links such as "Cookies Preferences" and copyright information.
-     *
-     * @returns {JSX.Element} The rendered JSX for the footer component.
      */
     render() {
-        return (h("footer", { key: '4912d7994a636d5159d863339f0119e7b6bb1bc3' }, 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: 'fb1db2c19f29a0fd1474565759992be78c404251', class: `border-softest ${this.social ? 'border-t-2' : ''} pb-28 pt-20 md:pt-28` }, h("div", { key: 'c7c6c6eb43f2ccb00df8b05247120763b3f665d3', class: "container flex items-center gap-20 lg:flex-nowrap" }, h("div", { key: '45a29c7988edbf99ef5573dc77c9cc9a22faa666', class: "flex items-center gap-x-12" }, h("a", { key: '0fbc8e7d275a07af6da8b520bddf62f4c13aecac', target: "_blank", rel: "noopener noreferrer", class: "effect-focus focus-visible:rounded-xs flex w-[54px] ml-0", href: "https://research-and-innovation.ec.europa.eu/funding/funding-opportunities/funding-programmes-and-open-calls/horizon-europe_en", "aria-label": "Learn about Horizon Europe funding" }, h("eds-img", { key: 'ec9e972f19d34cb13ea2022ab09ab6373d54be27', width: 54, height: 41, src: "https://www.ebrains.eu/flags/4x3/eu.svg", alt: "European Union Flag" }))), h("div", { key: '0281a7e09166bbd2e02913467fe3235585d0bf0a' }, h("div", { key: '97b96a7f6718cbc79ff98874e5dc90d6e1ed614e', class: "f-ui-04 text-light" }, h("p", { key: '810b11a720bdcb92ce587a125ac8d026f31e9872' }, this.fundedBy), h("div", { key: '2973f13cc831fa3d1131b182958fa425b94897fd', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block" }, h("span", { key: 'b4cb01b0601c8117ae427fc5ab9c43c20edc6536', 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: () => {
+        return (h("footer", { key: '844c47f7e5119a577b03d1bf4bb598e891d7f8c7' }, 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: '0a6f03f13cf5513758740ce6f3d3357cac413826', class: `border-softest ${this.social ? 'border-t-2' : ''} pb-28 pt-20 md:pt-28` }, h("div", { key: '1751d052c529e46de47bbe09ef24621b546b1514', class: "container flex items-center gap-20 lg:flex-nowrap" }, h("div", { key: '86b3c5fac384d1ae0f310d43f9a4492ce96866cf', class: "flex items-center gap-x-12" }, h("a", { key: '7fed16c8a7bb7c15ea59438427987303a5a0ae14', target: "_blank", rel: "noopener noreferrer", class: "effect-focus focus-visible:rounded-xs flex w-[54px] ml-0", href: "https://research-and-innovation.ec.europa.eu/funding/funding-opportunities/funding-programmes-and-open-calls/horizon-europe_en", "aria-label": "Learn about Horizon Europe funding" }, h("eds-img", { key: '491b2691d011359df1dc24a2408347574a893ca8', width: 54, height: 41, src: "https://www.ebrains.eu/flags/4x3/eu.svg", alt: "European Union Flag" }))), h("div", { key: '50e5d853ee86066c932dd5fa3f04706d21b0d3aa' }, h("div", { key: 'ba36e26f29e1aee7d7da4cd91235419b18ab813a', class: "f-ui-04 text-light" }, h("p", { key: '120302d9cdad309da91bcd9f82e81f707f5f5b48' }, this.fundedBy), h("div", { key: '222a27fb7f085750312654c11d03793f02e29676', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block" }, h("span", { key: '56db11dc4295c21c5e9d54cbc5568c5889f2dbb9', 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: 'd0b26e1911f55b44fb8a5253bab62b8db9141411', class: "ml-auto pl-12" }, this.enableScrollTop ? (h("div", { id: "toTop", class: "transition-all transition duration-75 opacity-0" }, h("eds-button", { id: "backToTop", "aria-label": this.backToTopAriaLabel, intent: "ghostInverse", icon: "chevron-up", onClick: this.backToTop, tabindex: "-1" }))) : null)))));
+            } })) : null))), h("div", { key: '221f15b6c92e91835dcc2efa3d2247b055690a22', class: "ml-auto pl-12" }, this.enableScrollTop ? (h("div", { id: "toTop", class: "transition-all transition duration-75 opacity-0" }, h("eds-button", { id: "backToTop", "aria-label": this.backToTopAriaLabel, intent: "ghostInverse", icon: "chevron-up", onClick: this.backToTop, tabindex: "-1" }))) : null)))));
     }
     static get is() { return "eds-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -194,8 +192,11 @@ export class EdsFooter {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": ""
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
+                    "text": "Controls the display of the \"Cookies preferences\" link."
                 },
                 "attribute": "enable-cookies-settings",
                 "reflect": false,

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

@@ -25,6 +25,14 @@
   letter-spacing: var(--f-body-01-letterSpacing);
 }
 
+.f-body-02 {
+  font-family: var(--f-body-02-fontFamily);
+  font-weight: var(--f-body-02-fontWeight);
+  font-size: var(--f-body-02-fontSize);
+  line-height: var(--f-body-02-lineHeight);
+  letter-spacing: var(--f-body-02-letterSpacing);
+}
+
 .f-body-01 b, .f-body-01 strong {
   font-weight: var(--f-body-01---bold-weight, bold);
 }
@@ -41,6 +49,18 @@
   letter-spacing: var(--f-heading-04-letterSpacing);
 }
 
+.f-heading-05 {
+  font-family: var(--f-heading-05-fontFamily);
+  font-weight: var(--f-heading-05-fontWeight);
+  font-size: var(--f-heading-05-fontSize);
+  line-height: var(--f-heading-05-lineHeight);
+  letter-spacing: var(--f-heading-05-letterSpacing);
+}
+
+.text-light {
+  color: var(--grey-700);
+}
+
 .rounded-sm {
   border-radius: 8px;
 }
@@ -96,4 +116,56 @@
 .border-group {
   border-left: 1px solid var(--soft-color, #ddd);
   padding-left: 1rem;
+}
+
+.bg-inverse {
+  background-color: var(--white);
+}
+
+.effect-shadow {
+  transition-property: box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+
+.shadow-hover {
+  --tw-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);
+  --tw-shadow-colored: 0px 0px 16px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.effect-focus-within {
+  outline-width: 3px;
+  outline-offset: 2px;
+  outline-color: var(--green-500);
+}
+
+.effect-focus-within:focus-within {
+  outline-style: solid;
+}
+
+.relative {
+  position: relative;
+}
+
+.rounded-lg {
+  border-radius: 16px;
+}
+
+.px-16 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.pb-16 {
+  padding-bottom: 1rem;
+}
+
+.p-32 {
+  padding: 2rem;
 }

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

@@ -19,13 +19,17 @@ import { getFormInitData } from "../../utils/eds-form/formUtils";
 export class EdsForm {
     constructor() {
         this.name = 'eds-form';
+        this.title = undefined;
+        this.description = undefined;
         this.setFormUrl = true;
         this.formBtn = true;
         this.formBtnLabel = 'Submit';
+        this.buttonIntent = 'primary';
         this.errorMessage = 'Some fields in your form are incorrect.';
         this.fields = [];
         this.groups = [];
         this.initData = {};
+        this.formStyle = 'default';
         this.values = {};
         this.isSubmitting = false;
         this.hasError = false;
@@ -323,10 +327,15 @@ export class EdsForm {
     }
     get groupedFields() {
         const map = {};
-        // initialize buckets for each group
+        // initialize buckets for each declared group
         this.parsedGroups.forEach((g) => (map[g.id] = []));
+        // always keep an ungrouped bucket
         map['__ungrouped'] = [];
+        // only bucket fields that are currently visible
         this.parsedFields.forEach((f) => {
+            if (!this.isFieldVisible(f)) {
+                return;
+            }
             const gid = f.groupId || '__ungrouped';
             if (!map[gid]) {
                 map[gid] = [];
@@ -347,7 +356,7 @@ export class EdsForm {
             return (h("div", { class: "form-group rating-field", key: field.name }, h("div", { class: "flex justify-between" }, field && (h("eds-input-label", { name: `rating-${field.name}`, label: field.label, disabled: field.disabled, required: field.required }))), h("eds-rating", { id: `rating-${field.name}`, "rating-type": field.ratingType, "rating-count": field.ratingCount, "selected-rating": val, onRating: (e) => this.handleRating(e, field) }), h("div", { class: "mt-6" }, h("eds-input-footer", { id: `${field.name}-footer`, name: field.name, message: field.message, "error-message": (_a = this.errors[field.name]) === null || _a === void 0 ? void 0 : _a.join('<br/>'), error: !!this.errors[field.name], link: field.link }))));
         }
         else if (field.type === 'nps') {
-            return (h("div", { class: "form-group nps-field", key: field.name }, h("div", { class: "flex justify-between" }, field && (h("eds-input-label", { name: `nps-${field.name}`, label: field.question, disabled: field.disabled, required: field.required }))), h("eds-nps", { id: `nps-${field.name}`, "right-label": field.rightLabel, "left-label": field.leftLabel, onNps: (e) => this.handleNPS(e, field) }), h("div", { class: "mt-6" }, h("eds-input-footer", { id: `${field.name}-footer`, name: field.name, message: field.message, "error-message": (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br/>'), error: !!this.errors[field.name], link: field.link }))));
+            return (h("div", { class: "form-group nps-field", key: field.name }, h("div", { class: "flex justify-between" }, field && (h("eds-input-label", { name: `nps-${field.name}`, label: field.question, disabled: field.disabled, required: field.required }))), h("eds-nps", { id: `nps-${field.name}`, "right-label": field.rightLabel, "left-label": field.leftLabel, onNps: (e) => this.handleNPS(e, field) }), h("div", { class: "mt-6" }, h("eds-input-footer", { id: `${field.name}-footer`, name: field.name, "error-message": (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br/>'), error: !!this.errors[field.name] }))));
         }
         return (h("eds-input-field", { key: field.name, name: field.name, label: field.label, placeholder: field.placeholder, type: field.type, value: this.values[field.name], required: field.required, hint: field.hint, message: field.message, error: !!this.errors[field.name], errorMessage: (_c = this.errors[field.name]) === null || _c === void 0 ? void 0 : _c.join('<br/>'), options: field.options, onInput: (e) => this.handleInput(e, field), onChangeNative: (e) => this.handleChange(e, field) }));
     }
@@ -358,9 +367,13 @@ export class EdsForm {
         const hiddenFields = this.parsedFields.filter((field) => field.type === 'hidden');
         //const otherFields = this.parsedFields.filter((field) => field.type !== 'hidden');
         const buckets = this.groupedFields;
-        return (h("form", { key: 'a66997f39b5be347a4d502f77bcd1da9d1a274ac', ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: 'f8800d2ebe64b3279234ab8ebe20e535dc822872' }, h("slot", { key: 'b4194073b281dec35a79a6cc974fdf7476a67807' }), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), this.parsedGroups
+        // build the shadow/bg classes if formStyle="shadow"
+        const styleClasses = this.formStyle === 'shadow'
+            ? 'bg-inverse effect-shadow shadow-hover border-softer relative rounded-lg border-2 p-32'
+            : '';
+        return (h("form", { key: 'ecf49eb81f18b444d059d3bdea4600f4ae594ea9', class: styleClasses, ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: '65137fb770f274431c7906326cdf49e0fee73b18', class: "flex flex-col gap-y-24" }, this.title && (h("span", { key: 'e4c5b4a7883c4569a657cc234f18f995480ec8df', role: "heading", class: "f-heading-04" }, this.title)), this.description && h("span", { key: '65528e4600127f1cff4ce0e5be6f8a6bddc4c864', class: "f-body-02 text-light" }, this.description), h("slot", { key: '6230035a050386763723c2b60bd5e81b912762d7' })), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), this.parsedGroups
             .filter((g) => Array.isArray(buckets[g.id]) && buckets[g.id].length > 0)
-            .map((g) => (h("div", { class: "container mt-20", key: g.id }, h("span", { class: "f-body-02" }, h("b", null, g.title)), h("div", { class: "border-group mt-32 mb-32 flex flex-col gap-y-24" }, buckets[g.id].map((f) => this.renderField(f)))))), h("div", { key: '2fc83ebb6b0a472f6853618602c37ee83adae9ff', class: "flex flex-col mt-20 gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f)))), this.formBtn && (h("div", { key: '91b569b1a4513945f3228c374ae45b52ea17f91d', class: "mt-32" }, h("eds-button", { key: '1a8feaecd5a7f292f8aeae3db900700b4f7fb8d4', intent: "primary", label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
+            .map((g) => (h("div", { class: "container mt-32", key: g.id }, h("span", { class: "f-body-02" }, h("b", null, g.title)), h("div", { class: "border-group mt-32 mb-32 flex flex-col gap-y-24" }, buckets[g.id].map((f) => this.renderField(f)))))), h("div", { key: '8116d30248f8461a842365470da9915200531028', class: "flex flex-col mt-32 gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f))), this.formBtn && (h("div", { key: 'e2f1d3ca6a9f6a3b44c45e576150505c49e41dd1', class: "mt-32" }, h("eds-button", { key: 'e312bf08b5db526c00497fafaa9476a225919aaf', intent: this.buttonIntent, label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
     }
     static get is() { return "eds-form"; }
     static get encapsulation() { return "shadow"; }
@@ -394,6 +407,40 @@ export class EdsForm {
                 "reflect": false,
                 "defaultValue": "'eds-form'"
             },
+            "title": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The title displayed above the form."
+                },
+                "attribute": "title",
+                "reflect": false
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The description displayed below the title."
+                },
+                "attribute": "description",
+                "reflect": false
+            },
             "setFormUrl": {
                 "type": "boolean",
                 "mutable": false,
@@ -448,6 +495,24 @@ export class EdsForm {
                 "reflect": false,
                 "defaultValue": "'Submit'"
             },
+            "buttonIntent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'tertiary' | 'ghost'",
+                    "resolved": "\"ghost\" | \"primary\" | \"secondary\" | \"tertiary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Variant/style intent for the submit button (e.g., primary, secondary, tertiary, ghost)."
+                },
+                "attribute": "button-intent",
+                "reflect": false,
+                "defaultValue": "'primary'"
+            },
             "errorMessage": {
                 "type": "string",
                 "mutable": false,
@@ -517,6 +582,24 @@ export class EdsForm {
                     "text": "The init data the form will attempt to populate in the provided fields."
                 },
                 "defaultValue": "{}"
+            },
+            "formStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'shadow'",
+                    "resolved": "\"default\" | \"shadow\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Choose between default layout or an always-shadow style.\nWhen \"shadow\", the form gets the same effect-shadow + shadow-hover classes"
+                },
+                "attribute": "form-style",
+                "reflect": false,
+                "defaultValue": "'default'"
             }
         };
     }

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

@@ -4,6 +4,8 @@ export default {
     component: 'eds-form',
     argTypes: {
         name: { control: 'text', description: 'Form name', defaultValue: 'extended-form' },
+        title: { control: 'text', description: 'Form title displayed above the form' },
+        description: { control: 'text', description: 'Form description displayed below the title' },
         fields: {
             control: 'object',
             description: 'Form fields as JSON array'
@@ -21,23 +23,38 @@ export default {
             control: 'text',
             description: 'Form button Label',
             defaultValue: 'Validate'
+        },
+        buttonIntent: {
+            control: { type: 'select' },
+            options: ['primary', 'secondary', 'tertiary', 'ghost'],
+            description: 'Variant/style intent for the submit button'
+        },
+        formStyle: {
+            control: 'select',
+            options: ['default', 'shadow']
         }
     }
 };
 const Template = (args) => html `
   <eds-form
     name="${args.name}"
+    title="${args.title}"
+    description="${args.description}"
     .fields=${args.fields}
     .groups=${args.groups}
     .initData=${args.initData}
     .setFormUrl=${args.setFormUrl}
     form-btn="${args.formBtn}"
     form-btn-label="${args.formBtnLabel}"
+    button-intent="${args.buttonIntent}"
+    form-style="${args.formStyle}"
   ></eds-form>
 `;
 export const Default = Template.bind({});
 Default.args = {
     name: 'extended-form',
+    title: 'User Details',
+    description: 'Please fill out the form below.',
     fields: [
         { name: 'username', label: 'Username', type: 'text', required: true, maxlength: 10, placeholder: 'Username' },
         { name: 'email', label: 'Email', type: 'email', required: true },
@@ -91,12 +108,17 @@ Default.args = {
             disabled: true
         }
     ],
+    setFormUrl: true,
     formBtn: true,
-    formBtnLabel: 'Validate'
+    formBtnLabel: 'Validate',
+    buttonIntent: 'primary',
+    formStyle: 'default'
 };
 export const WithGroups = Template.bind({});
 WithGroups.args = {
     name: 'grouped-form',
+    title: 'Grouped Form',
+    description: 'Form with grouped fields',
     fields: [
         { name: 'firstName', label: 'First Name', type: 'text', required: true, groupId: 'personal' },
         { name: 'lastName', label: 'Last Name', type: 'text', required: true, groupId: 'personal' },
@@ -106,12 +128,17 @@ WithGroups.args = {
         { id: 'personal', title: 'Personal Info' },
         { id: 'comments', title: 'Comments' }
     ],
+    setFormUrl: true,
     formBtn: true,
-    formBtnLabel: 'Submit'
+    formBtnLabel: 'Submit',
+    buttonIntent: 'secondary',
+    formStyle: 'default'
 };
 export const WithInitData = Template.bind({});
 WithInitData.args = {
     name: 'prefill-form',
+    title: 'Prefilled Form',
+    description: 'Form with initial values',
     fields: [
         { name: 'username', label: 'Username', type: 'text', required: true },
         { name: 'email', label: 'Email', type: 'email', required: true }
@@ -123,5 +150,7 @@ WithInitData.args = {
     },
     setFormUrl: false,
     formBtn: true,
-    formBtnLabel: 'Save'
+    formBtnLabel: 'Save',
+    buttonIntent: 'ghost',
+    formStyle: 'default'
 };

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

@@ -84,7 +84,7 @@ export class EdsFrame {
         }
     }
     render() {
-        return (h("div", { key: '9f5b6280292996b66fb3380678fae7748aba8cb3', class: this.articleClasses() }, h("div", { key: '6e4f6e0ce9b44fe94ff4622285258747503d9034', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: '36bb5a7b005b4c23a7042e5cf06769efe29b07db', class: "f-ui-02" }, this.frameLabel), !this.iframeError && this.url && this.urlLabel ? (h("eds-link", { label: this.urlLabel, url: this.url, intent: this.intent, class: "ml-auto", external: true, disabled: false, icon: "arrow-diagonal" })) : null), h("div", { key: '9d64e26eaa9e79d68e13d6a0faf67c8ca68d2097', 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: '665bc189cd905a55a9c6ac31eb2ec82853552f34', class: this.articleClasses() }, h("div", { key: '6ad6183a94cd0cb26d3e5641c5e584e8afc652d7', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: '85bd9a7a4475ca3664cadf17ef1e729643c758f6', class: "f-ui-02" }, this.frameLabel), !this.iframeError && this.url && this.urlLabel ? (h("eds-link", { label: this.urlLabel, url: this.url, intent: this.intent, class: "ml-auto", external: true, disabled: false, icon: "arrow-diagonal" })) : null), h("div", { key: '4799d59442cabb05f3bfea26a02db22a429266e6', 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/shared-ui/eds-fullscreen-menu/eds-fullscreen-menu.js

@@ -21,11 +21,16 @@ export class EdsFullscreenMenu {
         this.isMenuOpen = false;
     }
     /**
-     * Listens for the toggleMenu event to open or close the menu.
-     * This event is emitted by the eds-header component.
+     * Listens on `body` for `toggleheadermenu` to open/close the menu.
+     * The event detail should be a boolean (`true` = open, `false` = close).
+     *
+     * @example
+     * ```js
+     * document.body.dispatchEvent(new CustomEvent('toggleheadermenu', { detail: true }));
+     * ```
      */
     handleToggleMenu(event) {
-        this.isMenuOpen = event.detail; // Set isMenuOpen based on the event payload
+        this.isMenuOpen = !!event.detail;
     }
     /** Opens the menu */
     openMenu() {
@@ -89,15 +94,23 @@ export class EdsFullscreenMenu {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | { label: string; url: string; icon?: string; external?: boolean }[]",
-                    "resolved": "string | { label: string; url: string; icon?: string; external?: boolean; }[]",
-                    "references": {}
+                    "original": "string | LinkItem[]",
+                    "resolved": "LinkItem[] | string",
+                    "references": {
+                        "LinkItem": {
+                            "location": "global",
+                            "id": "global::LinkItem"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "JSON string representing the links for primary navigation.\nEach link should include `label`, `url`, and optionally an `icon`."
+                    "tags": [{
+                            "name": "example",
+                            "text": "links='[{\"label\":\"Home\",\"url\":\"/\"},{\"label\":\"Docs\",\"url\":\"/docs\",\"icon\":\"book\"}]'"
+                        }],
+                    "text": "Primary navigation links.\nAccepts a JSON string or array of objects `{ label, url, icon?, external? }`."
                 },
                 "attribute": "links",
                 "reflect": false
@@ -113,8 +126,14 @@ export class EdsFullscreenMenu {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "JSON string representing the extra menu links a user wants for smaill screens navigation.\nEach link should include `label`, `url`."
+                    "tags": [{
+                            "name": "example",
+                            "text": "menu-links='[{\"label\":\"Help\",\"url\":\"/help\"},{\"label\":\"Contact\",\"url\":\"/contact\"}]'"
+                        }, {
+                            "name": "attr",
+                            "text": "menu-links"
+                        }],
+                    "text": "Secondary navigation links (extra menu items for small screens).\nAccepts a JSON string or array of objects `{ label, url }`."
                 },
                 "attribute": "menu-links",
                 "reflect": false
@@ -130,8 +149,14 @@ export class EdsFullscreenMenu {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": ""
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"/\""
+                        }, {
+                            "name": "attr",
+                            "text": "home-url"
+                        }],
+                    "text": "URL for the logo link in the header."
                 },
                 "attribute": "home-url",
                 "reflect": false,
@@ -148,8 +173,14 @@ export class EdsFullscreenMenu {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": ""
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "attr",
+                            "text": "inverse-header"
+                        }],
+                    "text": "When true, uses an inverse (dark) header background."
                 },
                 "attribute": "inverse-header",
                 "reflect": false,
@@ -170,8 +201,11 @@ export class EdsFullscreenMenu {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Event to signal menu open/close actions"
+                    "tags": [{
+                            "name": "event",
+                            "text": "menuClose"
+                        }],
+                    "text": "Emitted when the menu is closed (via UI or resize)."
                 },
                 "complexType": {
                     "original": "void",

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

@@ -56,7 +56,7 @@ export class EdsHeader {
         const classes = variantClasses[this.headerVariant] || variantClasses.default;
         // Logo color variant: default and inverse use 'color', strong uses 'color-white'
         const logoType = this.headerVariant === 'strong' ? 'color-white' : 'color';
-        return (h("header", { key: '812ad4427cbb3f4b0ca9e305870c35d63487dc59', class: `flex items-center justify-between relative z-10 ${classes}` }, h("div", { key: '531acdceb12ca45fea125091dee4d8a0ff39a10b', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: 'bb2708b3c8eacc575117bfed404b7c9db4fd05e2', type: logoType, href: this.homeUrl })), this.parsedLinks && (h("nav", { key: 'a80192d7666416c29025a1ac5812946f14feec3f', class: "absolute left-1/2 top-1/2 grow -translate-x-1/2 -translate-y-1/2 justify-center hidden md:flex" }, h("ul", { key: 'fae258c468367837a9738bcbe2442709fdc601a0', class: "flex gap-x-2" }, this.parsedLinks.map((link) => (h("eds-link", { label: link.label, "aria-label": link.label, url: link.url, intent: "ghost", size: "large", icon: link.icon, external: link.external, "extra-class": "after:effect-opacity aria-current-page:bg-darker whitespace-nowrap !text-current after:!border-transparent after:opacity-0 hover:after:!border-transparent hover:after:opacity-100" })))))), h("slot", { key: '9588ef20e19fda76115074c39d902eebead3c845' }), this.menuEnabled && (h("div", { key: 'ce2e43645a1c33ca7d6495acd820ad0a93cefdf9', class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { key: 'ed73c7e7a6544f60eea9dbf43379ffe4967c0dbd', "aria-label": "Menu", intent: this.headerVariant === 'default' ? 'ghost' : 'ghostInverse', icon: "menu", size: "small", onClick: () => this.handleToggleMenu() })))));
+        return (h("header", { key: 'a0f5bb7d9e850e9414db804019674d6bcbc8ea0b', class: `flex items-center justify-between relative z-10 ${classes}` }, h("div", { key: '678d5b1583e6fa47c0eac8ce734e8ec34cd76ad9', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: '12ce9c42b266bbddfd75d2a8f0097708480a2490', type: logoType, href: this.homeUrl })), this.parsedLinks && (h("nav", { key: 'eb388b679d4e268dc7fc011bc2a6406a619287c8', class: "absolute left-1/2 top-1/2 grow -translate-x-1/2 -translate-y-1/2 justify-center hidden md:flex" }, h("ul", { key: 'c3f8689bb257166c50dd678287c8ad4f54eb315a', class: "flex gap-x-2" }, this.parsedLinks.map((link) => (h("eds-link", { label: link.label, "aria-label": link.label, url: link.url, intent: "ghost", size: "large", icon: link.icon, external: link.external, "extra-class": "after:effect-opacity aria-current-page:bg-darker whitespace-nowrap !text-current after:!border-transparent after:opacity-0 hover:after:!border-transparent hover:after:opacity-100" })))))), h("slot", { key: '3f689a811a60052393a795937a908cf7d0604cc6' }), this.menuEnabled && (h("div", { key: '506b953b455b72085d83bdaafc6855992075ddbe', class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { key: '5b526affd813549a6142efab255d6486a5e2dd66', "aria-label": "Menu", intent: this.headerVariant === 'default' ? 'ghost' : 'ghostInverse', icon: "menu", size: "small", onClick: () => this.handleToggleMenu() })))));
     }
     static get is() { return "eds-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/shared-ui/eds-matomo-notice/eds-matomo-notice.js

@@ -133,8 +133,11 @@ export class EdsMatomoNotice {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "The title displayed in the notice."
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"Analytics Consent\""
+                        }],
+                    "text": "The title displayed in the notice accordion."
                 },
                 "attribute": "title",
                 "reflect": false,
@@ -151,8 +154,11 @@ export class EdsMatomoNotice {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "The description displayed in the notice."
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"We use anonymous analytics...\""
+                        }],
+                    "text": "The description displayed when the user has not yet opted in to analytics."
                 },
                 "attribute": "description",
                 "reflect": false,
@@ -169,8 +175,11 @@ export class EdsMatomoNotice {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": ""
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"You are already part of our community...\""
+                        }],
+                    "text": "The description displayed when the user has already opted in to analytics."
                 },
                 "attribute": "opt-out-message",
                 "reflect": false,
@@ -187,8 +196,11 @@ export class EdsMatomoNotice {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "When true, the notice is forced to show regardless of cookies/session."
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "When true, the notice is forced to show regardless of cookies or session storage state.\nUseful for testing or forcing the consent UI."
                 },
                 "attribute": "force-show",
                 "reflect": false,

package/dist/collection/shared-ui/eds-social-networks/eds-social-networks.css

@@ -42,30 +42,10 @@ menu {
     letter-spacing: var(--f-ui-02-letterSpacing);
 }
 
-.f-ui-02-light {
-    font-family: var(--f-ui-02-light-fontFamily);
-    font-weight: var(--f-ui-02-light-fontWeight);
-    font-size: var(--f-ui-02-light-fontSize);
-    line-height: var(--f-ui-02-light-lineHeight);
-    letter-spacing: var(--f-ui-02-light-letterSpacing);
-}
-
-.f-ui-03 {
-    font-family: var(--f-ui-03-fontFamily);
-    font-weight: var(--f-ui-03-fontWeight);
-    font-size: var(--f-ui-03-fontSize);
-    line-height: var(--f-ui-03-lineHeight);
-    letter-spacing: var(--f-ui-03-letterSpacing);
-}
-
 .mt-12 {
     margin-top: 0.75rem;
 }
 
-.mt-16 {
-    margin-top: 1rem;
-}
-
 .inline {
     display: inline;
 }

package/dist/collection/shared-ui/eds-social-networks/eds-social-networks.js

@@ -49,11 +49,9 @@ export class EdsSocialNetworks {
     /**
      * Renders the component's HTML structure with links to EBRAINS social profiles.
      * Each social network link uses the `eds-link` component with specific classes and styles.
-     *
-     * @returns {JSX.Element} The rendered JSX for the component.
      */
     render() {
-        return (h("div", { key: '7241de6d0a20687523e17a4455dff1dfac59a191' }, h("p", { key: '8292c0dde1b3518ada53dddc2ea0134ff3035e83', class: "f-ui-02" }, this.heading), h("ul", { key: 'b30922e6d1f51a52300c889464824fafad775f74', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm", external: true, "aria-label": network.label, url: network.url, icon: network.icon, intent: "strong" })))))));
+        return (h("nav", { key: '62692c53f820ff5d6569e42af692063ad8918cdd', "aria-label": "Social media" }, h("p", { key: 'a571612ba3c1b669e0145484bec4d480b17c1979', class: "f-ui-02" }, this.heading), h("ul", { key: 'c0cc02cd5eebf16130f7b09fb8f11319695fdccb', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm", external: true, "aria-label": `EBRAINS on ${network.label}`, url: network.url, icon: network.icon, intent: "strong" })))))));
     }
     static get is() { return "eds-social-networks"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/shared-ui/eds-social-networks/eds-social-networks.stories.js

@@ -4,18 +4,17 @@ export default {
     argTypes: {
         title: {
             control: 'text',
-            defaultValue: 'Follow EBRAINS to keep up-to-date'
+            defaultValue: 'Follow EBRAINS to keep up-to-date',
+            description: 'Custom title to display above the social network links'
         }
     }
 };
 const Template = (args) => `
-    <eds-social-networks title="${args.title}"></eds-social-networks>
-  `;
+  <eds-social-networks
+    title="${args.title}"
+  ></eds-social-networks>
+`;
 export const Default = Template.bind({});
 Default.args = {
     title: 'Follow EBRAINS to keep up-to-date'
 };
-export const CustomTitle = Template.bind({});
-CustomTitle.args = {
-    title: 'Stay Connected with EBRAINS!'
-};