@ebrains/components 0.9.0-beta → 0.9.2-beta

package/dist/components/{eds-form.js → eds-form.entry.js}

@@ -1,15 +1,6 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { s as sendAnalytics } from './analytics.js';
-import { p as parseData } from './sharedUtils.js';
-import { d as defineCustomElement$a } from './eds-button2.js';
-import { d as defineCustomElement$9 } from './eds-icon-wrapper2.js';
-import { d as defineCustomElement$8 } from './eds-input2.js';
-import { d as defineCustomElement$7 } from './eds-input-field2.js';
-import { d as defineCustomElement$6 } from './eds-input-footer2.js';
-import { d as defineCustomElement$5 } from './eds-input-label2.js';
-import { d as defineCustomElement$4 } from './eds-input-range2.js';
-import { d as defineCustomElement$3 } from './eds-input-search2.js';
-import { d as defineCustomElement$2 } from './eds-input-select2.js';
+import { r as registerInstance, a as createEvent, h, g as getElement } from './index-9d277061.js';
+import { s as sendAnalytics } from './analytics-e29fcd53.js';
+import { p as parseData } from './sharedUtils-6a231dd4.js';
 
 // utils/validators.ts
 function validateField(name, value, type, required, maxLength) {
@@ -137,6 +128,13 @@ function validateInputField(field, value, formEl) {
     }
     return validateField(field.name, value, field.type, field.required, field.maxlength);
 }
+function isFieldVisible(field, values) {
+    if (!field.condition) {
+        return true;
+    }
+    const parentValue = values[field.condition.field];
+    return parentValue === field.condition.value;
+}
 
 /**
  * Updates state values based on draft data and, after a delay, updates the corresponding DOM inputs.
@@ -155,15 +153,59 @@ function getFormInitData({ initData, parsedFields, currentValues
     });
     return { updatedValues };
 }
+/**
+ * Updates state values based on draft data and, after a delay, updates the corresponding DOM inputs.
+ */
+function getFormDraftData({ draftData, parsedFields, currentValues, formEl, isFieldVisible }) {
+    // Pass 1: Update state for all fields.
+    const updatedValues = Object.assign({}, currentValues);
+    parsedFields.forEach((field) => {
+        const value = draftData[field.name];
+        if (value !== undefined) {
+            updatedValues[field.name] = value;
+        }
+    });
+    // Pass 2: Delay DOM updates to ensure nested fields are rendered.
+    setTimeout(() => {
+        parsedFields.forEach((field) => {
+            // Only update if the field is visible.
+            if (isFieldVisible(field, updatedValues)) {
+                const value = draftData[field.name];
+                if (value !== undefined) {
+                    if (field.type === 'checkbox' || field.type === 'radio') {
+                        // Query all eds-input-field components and update matching inputs.
+                        const elements = Array.from(formEl.querySelectorAll('eds-input-field'));
+                        elements.forEach((element) => {
+                            if (element.shadowRoot) {
+                                const inputs = Array.from(element.shadowRoot.querySelectorAll(`[name="${field.name}"]`));
+                                // Convert stored comma-separated value into a trimmed array.
+                                const valuesArray = value.split(',').map((v) => v.trim());
+                                inputs.forEach((inputEl) => {
+                                    // eslint-disable-next-line
+                                    inputEl.checked = valuesArray.includes(inputEl.value);
+                                });
+                            }
+                        });
+                    }
+                    else {
+                        // For non-checkbox/radio inputs, update the first matching element using findFieldElement.
+                        const inputEl = findFieldElement(formEl, field.name);
+                        if (inputEl) {
+                            inputEl.value = value;
+                        }
+                    }
+                }
+            }
+        });
+    }, 50); // A 50ms delay to allow re-render
+    return { updatedValues };
+}
 
 const edsFormCss = ".mt-20{margin-top:1.25rem}";
-const EdsFormStyle0 = edsFormCss;
 
-const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
+const EdsForm = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
         this.form = createEvent(this, "form", 7);
         this.name = 'eds-form';
         this.setFormUrl = true;
@@ -408,90 +450,14 @@ const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLEle
             if (!this.isFieldVisible(field)) {
                 return null;
             }
-            return (h("eds-input-field", { key: index, name: field.name, id: `${this.name}_${field.name}`, label: field.label, value: this.values[field.name] || null, type: field.type, icon: field.icon || null, required: field.required, maxLength: field.maxlength, hint: field.hint, link: field.link, message: field.message, 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: '3f250271116962a060359cf462b053234f059bd1', class: "mt-20" }, h("eds-button", { key: 'b234af290bcae3205c874edb4796e484320a5475', intent: "primary", label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
+            return (h("eds-input-field", { key: index, name: field.name, id: `${this.name}_${field.name}`, label: field.label, placeholder: field.placeholder, value: this.values[field.name] || null, type: field.type, icon: field.icon || null, disabled: field.disabled, required: field.required, maxLength: field.maxlength, hint: field.hint, link: field.link, message: field.message, 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: '941f625640deed343025c845573a3d8f62a6cc7f', class: "mt-20" }, h("eds-button", { key: '97d9c5bd077912c5c6ab9cd6ad5ec20c94ab4ee0', intent: "primary", label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
     }
-    get el() { return this; }
+    get el() { return getElement(this); }
     static get watchers() { return {
         "fields": ["parseFields"]
     }; }
-    static get style() { return EdsFormStyle0; }
-}, [1, "eds-form", {
-        "name": [1],
-        "setFormUrl": [4, "set-form-url"],
-        "formBtn": [4, "form-btn"],
-        "formBtnLabel": [1, "form-btn-label"],
-        "errorMessage": [1, "error-message"],
-        "fields": [1],
-        "initData": [16],
-        "values": [32],
-        "isSubmitting": [32],
-        "hasError": [32],
-        "errors": [32],
-        "parsedFields": [32]
-    }, undefined, {
-        "fields": ["parseFields"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["eds-form", "eds-button", "eds-icon-wrapper", "eds-input", "eds-input-field", "eds-input-footer", "eds-input-label", "eds-input-range", "eds-input-search", "eds-input-select"];
-    components.forEach(tagName => { switch (tagName) {
-        case "eds-form":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, EdsForm$1);
-            }
-            break;
-        case "eds-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "eds-icon-wrapper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "eds-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "eds-input-field":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "eds-input-footer":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "eds-input-label":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "eds-input-range":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "eds-input-search":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "eds-input-select":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const EdsForm = EdsForm$1;
-const defineCustomElement = defineCustomElement$1;
+};
+EdsForm.style = edsFormCss;
 
-export { EdsForm, defineCustomElement };
+export { EdsForm as eds_form };

package/dist/{esm → components}/eds-frame.entry.js

@@ -1,7 +1,6 @@
-import { r as registerInstance, h, g as getElement } from './index-8a71b9a7.js';
+import { r as registerInstance, h, g as getElement } from './index-9d277061.js';
 
 const edsFrameCss = ".bg-inverse{background-color:var(--white)}.min-h-156{min-height:156px}.rounded{border-radius:0.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:16px}.rounded-md{border-radius:12px}.border-soft{border-color:rgba(0, 0, 0, .15 )}.border-softer{border-color:rgba(0, 0, 0, .1 )}.border-softest{border-color:rgba(0, 0, 0, .05 )}.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}.flex{display:flex}.grow{flex-grow:1}.flex-col{flex-direction:column}.border-2{border-width:2px}.w-full{width:100%}.h-full{height:100%}.h-auto{height:auto}.effect-height{transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-property:height}.items-center{align-items:center}.justify-between{justify-content:space-between}.py-8{padding-top:0.5rem;padding-bottom:0.5rem}.px-12{padding-left:0.75rem;padding-right:0.75rem}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.ml-auto{margin-left:auto}.border-t-2{border-top-width:2px}.border{border:1px solid rgba(0, 0, 0, .1 )}.border-2{border:1px solid rgba(0, 0, 0, .1 )}.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}.ml-8{margin-left:0.5rem}.mr-8{margin-right:0.5rem}.mt-16{margin-top:1rem}";
-const EdsFrameStyle0 = edsFrameCss;
 
 const EdsFrame = class {
     constructor(hostRef) {
@@ -76,6 +75,6 @@ const EdsFrame = class {
     }
     get el() { return getElement(this); }
 };
-EdsFrame.style = EdsFrameStyle0;
+EdsFrame.style = edsFrameCss;
 
 export { EdsFrame as eds_frame };

package/dist/components/{eds-fullscreen-menu.js → eds-fullscreen-menu.entry.js}

@@ -1,22 +1,11 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { p as parseData } from './sharedUtils.js';
-import { d as defineCustomElement$9 } from './eds-block-break2.js';
-import { d as defineCustomElement$8 } from './eds-button2.js';
-import { d as defineCustomElement$7 } from './eds-footer2.js';
-import { d as defineCustomElement$6 } from './eds-icon-wrapper2.js';
-import { d as defineCustomElement$5 } from './eds-img2.js';
-import { d as defineCustomElement$4 } from './eds-link2.js';
-import { d as defineCustomElement$3 } from './eds-logo2.js';
-import { d as defineCustomElement$2 } from './eds-social-networks2.js';
+import { r as registerInstance, a as createEvent, h } from './index-9d277061.js';
+import { p as parseData } from './sharedUtils-6a231dd4.js';
 
 const edsFullscreenMenuCss = ".bg-default{background-color:var(--grey-200)}.bg-darker{background-color:var(--grey-400)}.bg-inverse{background-color:var(--white)}.bg-strongest{background-color:var(--black)}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0rem}.z-\\[999999\\]{z-index:999999}.overflow-y-scroll{overflow-y:scroll}.flex{display:flex}.inline-flex{display:inline-flex}.min-h-full{min-height:100%}.flex-col{flex-direction:column}.w-full{width:100%}.top-0{top:0rem}.mx-auto{margin-left:auto;margin-right:auto}.mt-auto{margin-top:auto}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.mr-auto{margin-right:auto}.w-\\[200px\\]{width:200px}.h-\\[85px\\]{height:85px}.px-16{padding-left:1rem;padding-right:1rem}.py-16{padding-top:1rem;padding-bottom:1rem}.mt-28{margin-top:1.75rem}.gap-y-8{row-gap:0.5rem}.effect-color{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.effect-focus{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.rounded-xs{border-radius:4px}.f-heading-02{font-family:var(--f-heading-02-fontFamily);font-weight:var(--f-heading-02-fontWeight);font-size:var(--f-heading-02-fontSize);line-height:var(--f-heading-02-lineHeight);letter-spacing:var(--f-heading-02-letterSpacing)}.hover\\:text-lighter:hover{color:var(--grey-600)}.w-fit{width:-moz-fit-content;width:fit-content}";
-const EdsFullscreenMenuStyle0 = edsFullscreenMenuCss;
 
-const EdsFullscreenMenu$1 = /*@__PURE__*/ proxyCustomElement(class EdsFullscreenMenu extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
+const EdsFullscreenMenu = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
         this.menuClose = createEvent(this, "menuClose", 7);
         this.links = undefined;
         this.menuLinks = undefined;
@@ -75,69 +64,7 @@ const EdsFullscreenMenu$1 = /*@__PURE__*/ proxyCustomElement(class EdsFullscreen
     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("div", { class: "mt-auto" }, h("eds-footer", { social: true, "extra-class": "bg-darker" }))))) : null;
     }
-    static get style() { return EdsFullscreenMenuStyle0; }
-}, [1, "eds-fullscreen-menu", {
-        "links": [1],
-        "menuLinks": [1, "menu-links"],
-        "homeUrl": [1, "home-url"],
-        "inverseHeader": [4, "inverse-header"],
-        "isMenuOpen": [32]
-    }, [[16, "toggleMenu", "handleToggleMenu"]]]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["eds-fullscreen-menu", "eds-block-break", "eds-button", "eds-footer", "eds-icon-wrapper", "eds-img", "eds-link", "eds-logo", "eds-social-networks"];
-    components.forEach(tagName => { switch (tagName) {
-        case "eds-fullscreen-menu":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, EdsFullscreenMenu$1);
-            }
-            break;
-        case "eds-block-break":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "eds-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "eds-footer":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "eds-icon-wrapper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "eds-img":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "eds-link":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "eds-logo":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "eds-social-networks":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const EdsFullscreenMenu = EdsFullscreenMenu$1;
-const defineCustomElement = defineCustomElement$1;
+};
+EdsFullscreenMenu.style = edsFullscreenMenuCss;
 
-export { EdsFullscreenMenu, defineCustomElement };
+export { EdsFullscreenMenu as eds_fullscreen_menu };

package/dist/components/{eds-header.js → eds-header.entry.js}

@@ -1,18 +1,11 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { p as parseData } from './sharedUtils.js';
-import { d as defineCustomElement$5 } from './eds-button2.js';
-import { d as defineCustomElement$4 } from './eds-icon-wrapper2.js';
-import { d as defineCustomElement$3 } from './eds-link2.js';
-import { d as defineCustomElement$2 } from './eds-logo2.js';
+import { r as registerInstance, a as createEvent, h, g as getElement } from './index-9d277061.js';
+import { p as parseData } from './sharedUtils-6a231dd4.js';
 
 const edsHeaderCss = ".block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.z-10{z-index:10}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.bg-dark{background-color:var(--grey-300)}.bg-strongest{background-color:var(--black)}.mr-auto{margin-right:auto}.w-\\[200px\\]{width:200px}.h-\\[85px\\]{height:85px}.left-1\\/2{left:50%}.top-1\\/2{top:50%}.grow{flex-grow:1}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hidden{display:none}.gap-x-2{-moz-column-gap:0.125rem;column-gap:0.125rem}.after\\:effect-opacity::after{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.whitespace-nowrap{white-space:nowrap}.\\!text-current{color:currentColor !important}.overflow-hidden{overflow:hidden}.after\\:\\!border-transparent::after{border-color:var(--transparent) !important}.hover\\:after\\:\\!border-transparent:hover::after{border-color:var(--transparent) !important}.after\\:opacity-0::after{opacity:0}.hover\\:after\\:opacity-100:hover::after{opacity:1}.px-16{padding-left:1rem;padding-right:1rem}@media (min-width: 750px){.md\\:flex{display:flex}.md\\:hidden{display:none}}";
-const EdsHeaderStyle0 = edsHeaderCss;
 
-const EdsHeader$1 = /*@__PURE__*/ proxyCustomElement(class EdsHeader extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
+const EdsHeader = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
         this.toggleMenu = createEvent(this, "toggleMenu", 7);
         this.homeUrl = '/';
         this.links = undefined;
@@ -76,52 +69,8 @@ const EdsHeader$1 = /*@__PURE__*/ proxyCustomElement(class EdsHeader extends HTM
         return (h("header", { key: 'eabb97331efd8b4aee5e1f249ebc60d38926eb5e', class: `flex items-center justify-between relative z-10
        ${this.inverseHeader ? 'text-inverse bg-strongest' : 'text-default bg-dark'}` }, h("div", { key: 'b561941a2e10252a45526e565e9711be6a0d2f41', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: 'fa1350f9b9584f7b5d128facd8077efcf117abe7', type: this.inverseHeader ? 'color-white' : 'color', href: this.homeUrl })), this.parsedLinks && (h("nav", { key: '6cc3c1b32250b671b394f0ac65b52e9b4491c57f', 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: 'ce1277ca3a9082e1b639ae42b96bbc1d3d665edc', 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: '7a1d67916c63dcab3d46d1223805a3c20af65d97' }), this.menuEnabled ? (h("div", { class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { "aria-label": "Menu", intent: "ghostInverse", icon: "menu", size: "small", onClick: () => this.handleToggleMenu() }))) : null));
     }
-    get hostEl() { return this; }
-    static get style() { return EdsHeaderStyle0; }
-}, [1, "eds-header", {
-        "homeUrl": [513, "home-url"],
-        "links": [1],
-        "inverseHeader": [4, "inverse-header"],
-        "menuEnabled": [4, "menu-enabled"],
-        "isMenuOpen": [32],
-        "isUserMenuOpen": [32],
-        "isAuthenticated": [32]
-    }, [[16, "authStatusChanged", "onAuthStatusChanged"]]]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["eds-header", "eds-button", "eds-icon-wrapper", "eds-link", "eds-logo"];
-    components.forEach(tagName => { switch (tagName) {
-        case "eds-header":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, EdsHeader$1);
-            }
-            break;
-        case "eds-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "eds-icon-wrapper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "eds-link":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "eds-logo":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const EdsHeader = EdsHeader$1;
-const defineCustomElement = defineCustomElement$1;
+    get hostEl() { return getElement(this); }
+};
+EdsHeader.style = edsHeaderCss;
 
-export { EdsHeader, defineCustomElement };
+export { EdsHeader as eds_header };

package/dist/{esm → components}/eds-icon-arrow-diagonal.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
-import { a as arrowDiagonal } from './arrow-diagonal-black-8f0494c3.js';
+import { r as registerInstance, h } from './index-9d277061.js';
+import { a as arrowDiagonal } from './index-7281d120.js';
 
 const EdsIconArrowDiagonal = class {
     constructor(hostRef) {

package/dist/{esm → components}/eds-icon-arrow-right.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
-import { a as arrowRight } from './arrow-right-9322ba8a.js';
+import { r as registerInstance, h } from './index-9d277061.js';
+import { b as arrowRight } from './index-7281d120.js';
 
 const EdsIconArrowRight = class {
     constructor(hostRef) {

package/dist/{esm → components}/eds-icon-bluesky.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
-import { b as bluesky } from './bluesky-cc5edd2d.js';
+import { r as registerInstance, h } from './index-9d277061.js';
+import { c as bluesky } from './index-7281d120.js';
 
 const EdsIconBluesky = class {
     constructor(hostRef) {

package/dist/{esm → components}/eds-icon-bookmark.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
-import { b as bookmark } from './bookmark-c200037c.js';
+import { r as registerInstance, h } from './index-9d277061.js';
+import { d as bookmark } from './index-7281d120.js';
 
 const EdsIconBookmark = class {
     constructor(hostRef) {

package/dist/{esm → components}/eds-icon-chevron-down.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
-import { c as chevronDown } from './chevron-down-6144c823.js';
+import { r as registerInstance, h } from './index-9d277061.js';
+import { e as chevronDown } from './index-7281d120.js';
 
 const EdsIconChevronDown = class {
     constructor(hostRef) {

package/dist/{esm → components}/eds-icon-chevron-left.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
-import { c as chevronLeft } from './chevron-left-ca6c66e1.js';
+import { r as registerInstance, h } from './index-9d277061.js';
+import { f as chevronLeft } from './index-7281d120.js';
 
 const EdsIconChevronLeft = class {
     constructor(hostRef) {

package/dist/{esm → components}/eds-icon-chevron-right.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
-import { c as chevronRight } from './chevron-right-b88ed2d4.js';
+import { r as registerInstance, h } from './index-9d277061.js';
+import { g as chevronRight } from './index-7281d120.js';
 
 const EdsIconChevronRight = class {
     constructor(hostRef) {

package/dist/{esm → components}/eds-icon-chevron-up.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
-import { c as chevronUp } from './chevron-up-c66bd477.js';
+import { r as registerInstance, h } from './index-9d277061.js';
+import { h as chevronUp } from './index-7281d120.js';
 
 const EdsIconChevronUp = class {
     constructor(hostRef) {

package/dist/{esm → components}/eds-icon-close.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
-import { c as close } from './close-87fc0d63.js';
+import { r as registerInstance, h } from './index-9d277061.js';
+import { i as close } from './index-7281d120.js';
 
 const EdsIconClose = class {
     constructor(hostRef) {

package/dist/{esm → components}/eds-icon-copy.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
-import { c as copy } from './copy-03b72cb6.js';
+import { r as registerInstance, h } from './index-9d277061.js';
+import { j as copy } from './index-7281d120.js';
 
 const EdsIconCopy = class {
     constructor(hostRef) {

package/dist/{esm → components}/eds-icon-eu.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
-import { e as euSvg } from './eu-9ddde93a.js';
+import { r as registerInstance, h } from './index-9d277061.js';
+import { k as euSvg } from './index-7281d120.js';
 
 const EdsIconEu = class {
     constructor(hostRef) {

package/dist/{esm → components}/eds-icon-external.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
-import { a as arrowDiagonal } from './arrow-diagonal-black-8f0494c3.js';
+import { r as registerInstance, h } from './index-9d277061.js';
+import { a as arrowDiagonal } from './index-7281d120.js';
 
 const EdsIconExternal = class {
     constructor(hostRef) {

package/dist/{esm → components}/eds-icon-facebook.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
-import { f as facebook } from './facebook-9cb5c17f.js';
+import { r as registerInstance, h } from './index-9d277061.js';
+import { l as facebook } from './index-7281d120.js';
 
 const EdsIconFacebook = class {
     constructor(hostRef) {

package/dist/{esm → components}/eds-icon-gitlab.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
-import { g as gitlabBlack } from './mono-53f70232.js';
+import { r as registerInstance, h } from './index-9d277061.js';
+import { m as gitlabBlack } from './index-7281d120.js';
 
 const EdsIconGitlab = class {
     constructor(hostRef) {

package/dist/{esm → components}/eds-icon-linkedin.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
-import { l as linkedin } from './linkedin-e8650abb.js';
+import { r as registerInstance, h } from './index-9d277061.js';
+import { n as linkedin } from './index-7281d120.js';
 
 const EdsIconLinkedin = class {
     constructor(hostRef) {

package/dist/{esm → components}/eds-icon-loader.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
-import { l as loader } from './loader-c9628637.js';
+import { r as registerInstance, h } from './index-9d277061.js';
+import { o as loader } from './index-7281d120.js';
 
 const EdsIconLoader = class {
     constructor(hostRef) {

package/dist/{esm → components}/eds-icon-mastodon.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
-import { m as mastodon } from './mastodon-3703ec61.js';
+import { r as registerInstance, h } from './index-9d277061.js';
+import { p as mastodon } from './index-7281d120.js';
 
 const EdsIconMastodon = class {
     constructor(hostRef) {

package/dist/{esm → components}/eds-icon-menu.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
-import { m as menu } from './menu-340ea948.js';
+import { r as registerInstance, h } from './index-9d277061.js';
+import { q as menu } from './index-7281d120.js';
 
 const EdsIconMenu = class {
     constructor(hostRef) {

package/dist/{esm → components}/eds-icon-minus.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
-import { m as minus } from './minus-b30a7c71.js';
+import { r as registerInstance, h } from './index-9d277061.js';
+import { r as minus } from './index-7281d120.js';
 
 const EdsIconMinus = class {
     constructor(hostRef) {

package/dist/{esm → components}/eds-icon-more.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
-import { m as more } from './more-4449d549.js';
+import { r as registerInstance, h } from './index-9d277061.js';
+import { s as more } from './index-7281d120.js';
 
 const EdsIconMore = class {
     constructor(hostRef) {

package/dist/{esm → components}/eds-icon-paper.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
-import { p as paper } from './paper-8e74ea31.js';
+import { r as registerInstance, h } from './index-9d277061.js';
+import { t as paper } from './index-7281d120.js';
 
 const EdsIconPaper = class {
     constructor(hostRef) {

package/dist/{esm → components}/eds-icon-plus.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
-import { p as plus } from './plus-89c07be2.js';
+import { r as registerInstance, h } from './index-9d277061.js';
+import { u as plus } from './index-7281d120.js';
 
 const EdsIconPlus = class {
     constructor(hostRef) {

package/dist/{esm → components}/eds-icon-portal.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
-import { p as portal } from './portal-d6c8ce56.js';
+import { r as registerInstance, h } from './index-9d277061.js';
+import { v as portal } from './index-7281d120.js';
 
 const EdsIconPortal = class {
     constructor(hostRef) {

package/dist/{esm → components}/eds-icon-private.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
-import { p as privat } from './private-1c25ff8e.js';
+import { r as registerInstance, h } from './index-9d277061.js';
+import { w as privat } from './index-7281d120.js';
 
 const EdsIconPrivate = class {
     constructor(hostRef) {