@ebrains/components 2.2.0 → 2.3.1

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

@@ -58,9 +58,11 @@ export class EdsFooter {
      * legal links such as "Cookies Preferences" and copyright information.
      */
     render() {
-        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: () => {
+        const year = new Date().getFullYear();
+        const rights = this.rightsReserved || `${year} EBRAINS. All rights reserved.`;
+        return (h("footer", { key: 'b1c8481183fb67cb8b0a97c4ecb56cbd68b8d5f2' }, 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: 'bfe4a641c968c7c8db656eb15ae4b20994f289f9', class: `border-softest ${this.social ? 'border-t-2' : ''} pb-28 pt-20 md:pt-28` }, h("div", { key: '5a65394e8899cf62ac1bed4ac363bee86f9f17ad', class: "container flex items-center gap-20 lg:flex-nowrap" }, h("div", { key: '00163d1e6c4f1021997b910935859a8bb97c18ba', class: "flex items-center gap-x-12" }, h("a", { key: '12cc17423f3988f3f98b9ba9d5ce4a18a486021b', 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: '2448154fd301959d09ae0d4a2bc575ebddef0646', width: 54, height: 41, src: "https://www.ebrains.eu/flags/4x3/eu.svg", alt: "European Union Flag" }))), h("div", { key: '640d25df8ad2a7d5271c22b979a6198f6f7aa2aa' }, h("div", { key: '6a4256e03d37e93b41bbc5f22db44fcf56f35548', class: "f-ui-04 text-light" }, h("p", { key: 'd2227c0d2f297a995006aa810d889e679f1ef1e2' }, this.fundedBy), h("div", { key: 'd3a56fc0695308fe5547109fb735e64bc4297b5e', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block" }, h("span", { key: '5f0a5db7ea735b373fc6106b6fc8f4bc25ba6f27', class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline mr-4" }, "\u00A9 ", rights), this.enableCookiesSettings ? (h("eds-link", { label: this.cookiesPreferences, intent: "underline", "extra-class": "f-ui-04", onClick: () => {
                 this.toggleCookiesConsent();
-            } })) : 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)))));
+            } })) : null))), h("div", { key: 'e853a0ee1b2d3e4627ccc4b80aba566a9c7a2350', 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"; }

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

@@ -1,5 +1,5 @@
 export default {
-    title: 'Shared UI/Footer',
+    title: 'Components/Footer',
     component: 'eds-footer',
     argTypes: {
         social: {

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

@@ -19,8 +19,8 @@ import { getFormInitData } from "../../utils/eds-form/formUtils";
 export class EdsForm {
     constructor() {
         this.name = 'eds-form';
-        this.title = undefined;
-        this.description = undefined;
+        this.title = 'Form Title';
+        this.description = 'Form Description';
         this.setFormUrl = true;
         this.formBtn = true;
         this.formBtnLabel = 'Submit';
@@ -151,6 +151,7 @@ export class EdsForm {
         return formData;
     }
     makeFormData() {
+        var _a;
         const formData = new FormData();
         // Add the form name
         formData.append('form_name', this.name);
@@ -162,6 +163,40 @@ export class EdsForm {
             // Append each key-value pair to the FormData object.
             formData.append(key, this.values[key]);
         });
+        // 2) Only do the (slower) DOM scan if we actually have file fields in the config
+        const hasFileField = (_a = this.parsedFields) === null || _a === void 0 ? void 0 : _a.some((f) => (f === null || f === void 0 ? void 0 : f.type) === 'file');
+        if (hasFileField && this.formEl) {
+            // Find file inputs inside each eds-input-field's shadowRoot
+            const hosts = Array.from(this.formEl.querySelectorAll('eds-input-field'));
+            hosts.forEach((host) => {
+                const root = host.shadowRoot;
+                if (!root)
+                    return;
+                const fileInputs = Array.from(root.querySelectorAll('input[type="file"][name]'));
+                console.log(fileInputs);
+                fileInputs.forEach((fi) => {
+                    const name = fi.name;
+                    const files = fi.files ? Array.from(fi.files) : [];
+                    if (files.length > 0) {
+                        // Append each file under the same field name (backend can use request.files.getlist(name))
+                        files.forEach((file) => formData.append(name, file));
+                    }
+                    else {
+                        // If you need to ensure presence even when empty, uncomment:
+                        // formData.append(name, new Blob([], { type: 'application/octet-stream' }), '');
+                    }
+                });
+            });
+            // (Optional) mark that this payload includes files (handy in logs / policies)
+            // formData.set('_has_files', '1');
+        }
+        /*formData.forEach((value, key) => {
+          if (value instanceof File) {
+            console.log(`File field: ${key}, File name: ${value.name}, File size: ${value.size}`);
+          } else {
+            console.log(`Field: ${key}, Value: ${value}`);
+          }
+        });*/
         return formData;
     }
     handleChange(e, field) {
@@ -272,11 +307,11 @@ export class EdsForm {
             message: `${field.name} updated`
         });
     }
-    handleSubmit() {
+    handleSubmit(e) {
         var _a, _b;
-        if (this.isSubmitting) {
+        e === null || e === void 0 ? void 0 : e.preventDefault();
+        if (this.isSubmitting)
             return;
-        }
         this.isSubmitting = true;
         this.validateForm();
         if (this.hasError) {
@@ -371,9 +406,9 @@ export class EdsForm {
         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
+        return (h("form", { key: '0b7014a7e6c641f2abc6217d919583dafce50067', class: styleClasses, ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: '3beaa87c72ac60e37bf5c7093b8a3f5b54c9eb4b', class: "flex flex-col gap-y-24" }, this.title && (h("span", { key: '5d07685b0e31419d442765c230f9cd2373ce2773', role: "heading", class: "f-heading-04" }, this.title)), this.description && h("span", { key: '13fe635ea00fa3c950951f1df37549fa75341666', class: "f-body-02 text-light" }, this.description), h("slot", { key: '5e62b8844536ef127ce2565e4167766bf6d5ba4d' })), 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-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() })))));
+            .map((g) => (h("div", { class: "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: '831b919b0784a671596678392fe5aa0433af35a5', class: "flex flex-col mt-32 gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f))), this.formBtn && (h("div", { key: 'bdddee0aa0899c9cea3ce737f30f1e25ce8d95c5', class: "mt-32" }, h("eds-button", { key: 'f9a61383079b998dc98558d85b93e30aa32a3eeb', 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"; }
@@ -416,13 +451,14 @@ export class EdsForm {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The title displayed above the form."
                 },
                 "attribute": "title",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "'Form Title'"
             },
             "description": {
                 "type": "string",
@@ -439,7 +475,8 @@ export class EdsForm {
                     "text": "The description displayed below the title."
                 },
                 "attribute": "description",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "'Form Description'"
             },
             "setFormUrl": {
                 "type": "boolean",

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

@@ -1,6 +1,6 @@
 import { html } from "lit-html";
 export default {
-    title: 'Shared UI/Form',
+    title: 'Components/Form',
     component: 'eds-form',
     argTypes: {
         name: { control: 'text', description: 'Form name', defaultValue: 'extended-form' },

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

@@ -84,7 +84,7 @@ export class EdsFrame {
         }
     }
     render() {
-        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 })))));
+        return (h("div", { key: '919f5de224a556016a2ccf7bdfc20a4885afa3f5', class: this.articleClasses() }, h("div", { key: '13f6c97cd99ddc7a15bed69efed236f44266d9ab', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: 'a1b912042dbf197dd7044016582412980c9a177b', 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: '186fa28cc18e183318f94ccfd2d557ee800f43b7', 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 → components}/eds-frame/eds-frame.stories.js

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

package/dist/collection/{shared-ui → components}/eds-fullscreen-menu/eds-fullscreen-menu.js

@@ -32,6 +32,10 @@ export class EdsFullscreenMenu {
     handleToggleMenu(event) {
         this.isMenuOpen = !!event.detail;
     }
+    onKeydown(e) {
+        if (e.key === 'Escape' && this.isMenuOpen)
+            this.closeMenu();
+    }
     /** Opens the menu */
     openMenu() {
         this.isMenuOpen = true;
@@ -41,6 +45,8 @@ export class EdsFullscreenMenu {
         this.isMenuOpen = false;
         this.menuClose.emit();
     }
+    async open() { this.isMenuOpen = true; }
+    async close() { this.closeMenu(); }
     // Lifecycle method to add the resize event listener when component loads
     componentDidLoad() {
         window.addEventListener('resize', this.handleResize.bind(this));
@@ -74,7 +80,7 @@ export class EdsFullscreenMenu {
         return parseData(this.menuLinks);
     }
     render() {
-        return this.isMenuOpen ? (h("div", { class: "eds-full-screen bg-default fixed inset-0 z-[999999] overflow-y-scroll" }, h("div", { class: "flex min-h-full flex-col" }, h("div", { class: `w-full sticky top-0 ${this.inverseHeader ? 'bg-strongest' : 'bg-default'}` }, h("div", { class: "mx-auto flex items-center justify-between" }, h("div", { class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { type: this.inverseHeader ? 'color-white' : 'color', href: this.homeUrl })), h("div", { class: "px-16" }, h("eds-button", { "aria-label": "Close menu", intent: "ghostInverse", icon: "close", onClick: () => this.closeMenu() })))), h("div", { class: "py-16 px-16" }, h("nav", { class: "mt-28 flex flex-col gap-y-8" }, this.parsedLinks.map((link, index) => (h("eds-link", { label: link.label, key: index, url: link.url, intent: "tertiary", size: "large", class: "effect-color effect-focus rounded-xs f-heading-02 hover:text-lighter w-fit", onClick: () => this.closeMenu(), icon: "arrow-right" })))), h("eds-block-break", null), h("nav", { class: "mt-28 flex flex-col gap-y-8" }, this.parsedMenuLinks.map((link, index) => (h("eds-link", { label: link.label, key: index, url: link.url, intent: "tertiary", size: "large", class: "effect-color effect-focus rounded-xs f-heading-02 hover:text-lighter w-fit", onClick: () => this.closeMenu(), icon: "chevron-right" })))), h("nav", { class: "mt-28 flex flex-col gap-y-8" }, h("slot", null))), h("div", { class: "mt-auto" }, h("eds-footer", { social: true, "extra-class": "bg-darker" }))))) : null;
+        return this.isMenuOpen ? (h("div", { role: "dialog", "aria-modal": "true", "aria-label": "Main menu", class: "eds-full-screen bg-default fixed inset-0 z-[999999] overflow-y-scroll" }, h("div", { class: "flex min-h-full flex-col" }, h("div", { class: `w-full sticky top-0 ${this.inverseHeader ? 'bg-strongest' : 'bg-default'}` }, h("div", { class: "mx-auto flex items-center justify-between" }, h("div", { class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { type: this.inverseHeader ? 'color-white' : 'color', href: this.homeUrl })), h("div", { class: "px-16" }, h("eds-button", { "aria-label": "Close menu", intent: "ghostInverse", icon: "close", onClick: () => this.closeMenu() })))), h("div", { class: "py-16 px-16" }, h("nav", { class: "mt-28 flex flex-col gap-y-8" }, this.parsedLinks.map((link, index) => (h("eds-link", { label: link.label, key: index, url: link.url, intent: "tertiary", size: "large", class: "effect-color effect-focus rounded-xs f-heading-02 hover:text-lighter w-fit", onClick: () => this.closeMenu(), icon: "arrow-right" })))), h("eds-block-break", null), h("nav", { class: "mt-28 flex flex-col gap-y-8" }, this.parsedMenuLinks.map((link, index) => (h("eds-link", { label: link.label, key: index, url: link.url, intent: "tertiary", size: "large", class: "effect-color effect-focus rounded-xs f-heading-02 hover:text-lighter w-fit", onClick: () => this.closeMenu(), icon: "chevron-right" })))), h("nav", { class: "mt-28 flex flex-col gap-y-8" }, h("slot", null))), h("div", { class: "mt-auto" }, h("eds-footer", { social: true, "extra-class": "bg-darker" }))))) : null;
     }
     static get is() { return "eds-fullscreen-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -214,6 +220,44 @@ export class EdsFullscreenMenu {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get listeners() {
         return [{
                 "name": "toggleheadermenu",
@@ -221,6 +265,12 @@ export class EdsFullscreenMenu {
                 "target": "body",
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "keydown",
+                "method": "onKeydown",
+                "target": "window",
+                "capture": false,
+                "passive": false
             }];
     }
 }

package/dist/collection/{shared-ui → components}/eds-fullscreen-menu/eds-fullscreen-menu.stories.js

@@ -1,5 +1,5 @@
 export default {
-    title: 'Shared UI/Header/Fullscreen Menu',
+    title: 'Components/Header/Fullscreen Menu',
     // We set a primary component here for documentation purposes.
     // (Note: The story renders both eds-header and eds-fullscreen-menu.)
     component: 'eds-fullscreen-menu',

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

@@ -21,14 +21,10 @@ export class EdsHeader {
         this.menuEnabled = false;
         this.isMenuOpen = false;
         this.isUserMenuOpen = false;
-        this.isAuthenticated = false;
-    }
-    onAuthStatusChanged(event) {
-        var _a;
-        this.isAuthenticated = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.authenticated;
     }
     componentDidLoad() {
-        const links = this.hostEl.querySelectorAll('eds-link');
+        var _a, _b;
+        const links = (_b = (_a = this.hostEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('eds-link')) !== null && _b !== void 0 ? _b : [];
         links.forEach((link) => this.emitContext(link));
     }
     emitContext(linkElement) {
@@ -56,7 +52,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: '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() })))));
+        return (h("header", { key: '33f041754210d5fce8b190e63a6f19ac62262cfd', role: "banner", class: `flex items-center justify-between relative z-10 ${classes}` }, h("div", { key: '596d4b9cbb08fa95aa9b715599290ac91aff3f77', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: 'd13e83eca926b82f7406d5efb3f16555c25c167c', type: logoType, href: this.homeUrl })), this.parsedLinks && (h("nav", { key: 'e120bef9e976e75d523bd6d1e65e8aecd7c6a694', role: "navigation", "aria-label": "Primary", class: "absolute left-1/2 top-1/2 grow -translate-x-1/2 -translate-y-1/2 justify-center hidden md:flex" }, h("ul", { key: 'ea3db252b028340a007a18b4cb1fb995fefd51b0', 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: '47dfb8dcd8e77bd908236aef0cc0c3c5542de11e', name: "actions" }), this.menuEnabled && (h("div", { key: 'a6f4a3fb9834696d39a6831098c12f1a5a519a6b', class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { key: '2c6586152953caa33911d19fa69d3518cb73fc41', "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"; }
@@ -148,8 +144,7 @@ export class EdsHeader {
     static get states() {
         return {
             "isMenuOpen": {},
-            "isUserMenuOpen": {},
-            "isAuthenticated": {}
+            "isUserMenuOpen": {}
         };
     }
     static get events() {
@@ -171,13 +166,4 @@ export class EdsHeader {
             }];
     }
     static get elementRef() { return "hostEl"; }
-    static get listeners() {
-        return [{
-                "name": "authStatusChanged",
-                "method": "onAuthStatusChanged",
-                "target": "body",
-                "capture": false,
-                "passive": false
-            }];
-    }
 }

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

@@ -1,5 +1,5 @@
 export default {
-    title: 'Shared Ui/Header/Main',
+    title: 'Components/Header/Main',
     component: 'eds-header',
     argTypes: {
         homeUrl: {

package/dist/collection/components/eds-icons/chevron/eds-icon-chevron-down/eds-icon-chevron-down.js

@@ -8,7 +8,7 @@ export class EdsIconChevronDown {
         this.class = '';
     }
     render() {
-        return h("span", { key: '5547e9d98f781dc03e88a014f726b3a402e6425d', class: this.class, innerHTML: chevronDown });
+        return h("span", { key: 'ea6e2250c63af2a7f3ed1d50e6514a28e5629e6d', class: this.class, innerHTML: chevronDown });
     }
     static get is() { return "eds-icon-chevron-down"; }
     static get properties() {

package/dist/collection/components/eds-icons/chevron/eds-icon-chevron-left/eds-icon-chevron-left.js

@@ -8,7 +8,7 @@ export class EdsIconChevronLeft {
         this.class = '';
     }
     render() {
-        return h("span", { key: '49925425ac1fd676eb96b973b1419f1f2aec1c81', class: this.class, innerHTML: chevronLeft });
+        return h("span", { key: '8847183f6f31439d94f87a24ee01697babe53ecf', class: this.class, innerHTML: chevronLeft });
     }
     static get is() { return "eds-icon-chevron-left"; }
     static get properties() {

package/dist/collection/components/eds-icons/chevron/eds-icon-chevron-right/eds-icon-chevron-right.js

@@ -8,7 +8,7 @@ export class EdsIconChevronRight {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'e9abd378d28d9e2251e530f97a11973ea558fbe2', class: this.class, innerHTML: chevronRight });
+        return h("span", { key: '398a406ad137aeb4d51286b82eccee3c0bff2f2b', class: this.class, innerHTML: chevronRight });
     }
     static get is() { return "eds-icon-chevron-right"; }
     static get properties() {

package/dist/collection/components/eds-icons/chevron/eds-icon-chevron-up/eds-icon-chevron-up.js

@@ -8,7 +8,7 @@ export class EdsIconChevronUp {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'f81db967bf78d75a4a8e572cda6427046603f0a6', class: this.class, innerHTML: chevronUp });
+        return h("span", { key: 'f0647dcbf0e597fc3dd2f31d0e1de2ce7237d25a', class: this.class, innerHTML: chevronUp });
     }
     static get is() { return "eds-icon-chevron-up"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-arrow-diagonal/eds-icon-arrow-diagonal.js

@@ -8,7 +8,7 @@ export class EdsIconArrowDiagonal {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'ef60986a4391dffcbb2a66109f217f3cec95a5fc', class: this.class, innerHTML: arrowDiagonal });
+        return h("span", { key: '4dd5fc5be465494e8546404231cfdb63609e64f1', class: this.class, innerHTML: arrowDiagonal });
     }
     static get is() { return "eds-icon-arrow-diagonal"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-arrow-right/eds-icon-arrow-right.js

@@ -8,7 +8,7 @@ export class EdsIconArrowRight {
         this.class = '';
     }
     render() {
-        return h("span", { key: '02288b13fa941076a5cc73fd3821bd78e206b2b3', class: this.class, innerHTML: arrowRight });
+        return h("span", { key: '64d0cb03ab1a33096ad9e3b7219a2e758707a1d5', class: this.class, innerHTML: arrowRight });
     }
     static get is() { return "eds-icon-arrow-right"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-bin/eds-icon-bin.js

@@ -8,7 +8,7 @@ export class EdsIconBin {
         this.class = '';
     }
     render() {
-        return h("span", { key: '5f314df297274d153638c96027c23632f47f6a3a', class: this.class, innerHTML: bin });
+        return h("span", { key: '9a7b52f2a2006bd83418d6b4bb2834bffa79305c', class: this.class, innerHTML: bin });
     }
     static get is() { return "eds-icon-bin"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-bookmark/eds-icon-bookmark.js

@@ -8,7 +8,7 @@ export class EdsIconBookmark {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'b7c85131bafc5d7d3fcf8fde09cf646b4dd3fdab', class: this.class, innerHTML: bookmark });
+        return h("span", { key: '48b2e81ac7f597b50d13a7a0a753894ac18022cd', class: this.class, innerHTML: bookmark });
     }
     static get is() { return "eds-icon-bookmark"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-clone/eds-icon-clone.js

@@ -8,7 +8,7 @@ export class EdsIconClone {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'ebbda9e150151cc6e6d2677307287f2d2f1ab4db', class: this.class, innerHTML: clone });
+        return h("span", { key: 'faa232cc2d703f00cbda76fb9c152773a032ded2', class: this.class, innerHTML: clone });
     }
     static get is() { return "eds-icon-clone"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-close/eds-icon-close.js

@@ -8,7 +8,7 @@ export class EdsIconClose {
         this.class = '';
     }
     render() {
-        return h("span", { key: '91f33941205260a787d69146e390fa970a1c0d72', class: this.class, innerHTML: close });
+        return h("span", { key: '001c4d41b324d9b2636087e1fde76e2fdeef9f33', class: this.class, innerHTML: close });
     }
     static get is() { return "eds-icon-close"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-copy/eds-icon-copy.js

@@ -8,7 +8,7 @@ export class EdsIconCopy {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'dd9df55fa03c1b27f2f931c7d07ccc69ee940ff4', class: this.class, innerHTML: copy });
+        return h("span", { key: '6a7eb765b426e0e142a0d7f742ddc33c9de98601', class: this.class, innerHTML: copy });
     }
     static get is() { return "eds-icon-copy"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-download/eds-icon-download.js

@@ -8,7 +8,7 @@ export class EdsIconDownload {
         this.class = '';
     }
     render() {
-        return h("span", { key: '1fc6b1410cf98a4a992c0d98d78ec27aeac65b7c', class: this.class, innerHTML: download });
+        return h("span", { key: 'b2b380a299ee2b9941613ddddc3d67b2db4ce57e', class: this.class, innerHTML: download });
     }
     static get is() { return "eds-icon-download"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-draft/eds-icon-draft.js

@@ -8,7 +8,7 @@ export class EdsIconDraft {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'e76f56aaba4a67096e6314e61d53bc2512941552', class: this.class, innerHTML: draft });
+        return h("span", { key: '0defed3e15ba10e6e62cf35d0540901ec1dd2485', class: this.class, innerHTML: draft });
     }
     static get is() { return "eds-icon-draft"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-edit/eds-icon-edit.js

@@ -8,7 +8,7 @@ export class EdsIconEdit {
         this.class = '';
     }
     render() {
-        return h("span", { key: '54502ee7a072ad54a5c22367b89c1d00afcaaafe', class: this.class, innerHTML: edit });
+        return h("span", { key: '86ec46944e96100f5e262f505dd64839b99f0d8d', class: this.class, innerHTML: edit });
     }
     static get is() { return "eds-icon-edit"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-eu/eds-icon-eu.js

@@ -8,7 +8,7 @@ export class EdsIconEu {
         this.class = '';
     }
     render() {
-        return h("span", { key: '89fde5fbed839d6fdedc0399bf1475abf22d205d', class: this.class, innerHTML: euSvg });
+        return h("span", { key: '216be6a7fcc4f8ffb2936507cbff95bc1141c764', class: this.class, innerHTML: euSvg });
     }
     static get is() { return "eds-icon-eu"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-external/eds-icon-external.js

@@ -8,7 +8,7 @@ export class EdsIconExternal {
         this.class = '';
     }
     render() {
-        return h("span", { key: '1abc7edbab033c99ffaede9ebe0f210849fe8d61', class: this.class, innerHTML: arrowDiagonal });
+        return h("span", { key: 'a061070cf41f0a64e660fe6ea01fcaecf7c45afd', class: this.class, innerHTML: arrowDiagonal });
     }
     static get is() { return "eds-icon-external"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-gitlab/eds-icon-gitlab.js

@@ -8,7 +8,7 @@ export class EdsIconGitlab {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'b35f2e94d903549d867579f2e008c323a441019c', class: this.class, innerHTML: gitlabBlack });
+        return h("span", { key: 'ac1b505068670dc7cb5953b515f768586a79d6a3', class: this.class, innerHTML: gitlabBlack });
     }
     static get is() { return "eds-icon-gitlab"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-loader/eds-icon-loader.js

@@ -8,7 +8,7 @@ export class EdsIconLoader {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'b97da1b406718c7611d1e17d7a9c6b4670600740', class: this.class, innerHTML: loader });
+        return h("span", { key: '3a9bd685a48bd253613d94a0755e3011144b69a8', class: this.class, innerHTML: loader });
     }
     static get is() { return "eds-icon-loader"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-menu/eds-icon-menu.js

@@ -8,7 +8,7 @@ export class EdsIconMenu {
         this.class = '';
     }
     render() {
-        return h("span", { key: '4322703c9e449819dc30946118893d365fa20124', class: this.class, innerHTML: menu });
+        return h("span", { key: 'ee487c5a7cbd576d21a7f0b282ca0606a045de2e', class: this.class, innerHTML: menu });
     }
     static get is() { return "eds-icon-menu"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-minus/eds-icon-minus.js

@@ -8,7 +8,7 @@ export class EdsIconMinus {
         this.class = '';
     }
     render() {
-        return h("span", { key: '9b9efb71d724cc1eb0e9bebd7256fe11b39e4da3', class: this.class, innerHTML: minus });
+        return h("span", { key: '4c399e259be9fcce197e0735c42dd5fa76daa220', class: this.class, innerHTML: minus });
     }
     static get is() { return "eds-icon-minus"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-more/eds-icon-more.js

@@ -8,7 +8,7 @@ export class EdsIconMore {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'f7ebc68658fcf8c0df627871481cce90cd7800fb', class: this.class, innerHTML: more });
+        return h("span", { key: '6eae5aa60d60601dcdacf6fcf1f40be87cd3f869', class: this.class, innerHTML: more });
     }
     static get is() { return "eds-icon-more"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-paper/eds-icon-paper.js

@@ -8,7 +8,7 @@ export class EdsIconPaper {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'eaa676b09d81da31b600a910b99b416c1a5420d3', class: this.class, innerHTML: paper });
+        return h("span", { key: 'a2fd252b8b3050636aeae7308d69ddcaf2d54a4e', class: this.class, innerHTML: paper });
     }
     static get is() { return "eds-icon-paper"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-plus/eds-icon-plus.js

@@ -8,7 +8,7 @@ export class EdsIconPlus {
         this.class = '';
     }
     render() {
-        return h("span", { key: '825957824697ceeec9d6f81007c4dd1dfc208b28', class: this.class, innerHTML: plus });
+        return h("span", { key: '339d03b5782b6acfc41ffa62b4482eb6098bc0b0', class: this.class, innerHTML: plus });
     }
     static get is() { return "eds-icon-plus"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-portal/eds-icon-portal.js

@@ -8,7 +8,7 @@ export class EdsIconPortal {
         this.class = '';
     }
     render() {
-        return h("span", { key: '4c557c9fe9168f361c55aae7a7c6874d78ec620d', class: this.class, innerHTML: portal });
+        return h("span", { key: 'dc84ec0bf1fdd9d5461d4cf8496f6b0d9658ffb8', class: this.class, innerHTML: portal });
     }
     static get is() { return "eds-icon-portal"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-private/eds-icon-private.js

@@ -8,7 +8,7 @@ export class EdsIconPrivate {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'fe423636431e96ce42d0b8236b04c11c92633a18', class: this.class, innerHTML: privat });
+        return h("span", { key: 'eb2ac14ec0564bc1a1133ae099b4e49dffde5f92', class: this.class, innerHTML: privat });
     }
     static get is() { return "eds-icon-private"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-public/eds-icon-public.js

@@ -8,7 +8,7 @@ export class EdsIconPublic {
         this.class = '';
     }
     render() {
-        return h("span", { key: '4c0a1ff37a1bfa79173c6b91da33fb808ef1b918', class: this.class, innerHTML: pub });
+        return h("span", { key: 'f8ff53678e0a06d505ac6f19ca79808597a2ef34', class: this.class, innerHTML: pub });
     }
     static get is() { return "eds-icon-public"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-search/eds-icon-search.js

@@ -8,7 +8,7 @@ export class EdsIconSearch {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'c788833c6a51e489ca432697a9c46d9b5756a519', class: this.class, innerHTML: search });
+        return h("span", { key: '892c0b85f2039ee09a642d6040aa2679b3badfda', class: this.class, innerHTML: search });
     }
     static get is() { return "eds-icon-search"; }
     static get properties() {