@ebrains/components 0.9.2-beta → 1.0.0

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

@@ -1,6 +1,15 @@
-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';
+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';
 
 // utils/validators.ts
 function validateField(name, value, type, required, maxLength) {
@@ -128,13 +137,6 @@ 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.
@@ -153,59 +155,15 @@ 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 = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
+const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
         this.form = createEvent(this, "form", 7);
         this.name = 'eds-form';
         this.setFormUrl = true;
@@ -362,13 +320,17 @@ const EdsForm = class {
             // Handle non-checkbox input normally.
             this.values = Object.assign(Object.assign({}, this.values), { [field.name]: target.value });
         }
+        // If it’s the password field, return here for no event emission
+        if (field.name === 'password') {
+            return;
+        }
         // Emit the updated form state.
         this.form.emit({
             event: 'change',
             field: field.name,
             value: target.type === 'checkbox' ? this.values[field.name] : target.value,
-            message: `${field.name} updated`,
-            data: this.makeFormData()
+            message: `${field.name} updated`
+            //data: this.makeFormData()
         });
     }
     handleInput(e, field) {
@@ -402,8 +364,8 @@ const EdsForm = class {
                 event: 'submit',
                 validated: false,
                 success: false,
-                message: this.errorMessage,
-                data: this.makeFormData()
+                message: this.errorMessage
+                //data: this.makeFormData()
             }); // Emit form status submit false validation error
             sendAnalytics({
                 category: 'ui-component',
@@ -426,8 +388,8 @@ const EdsForm = class {
             event: 'submit',
             success: true,
             validated: true,
-            message: 'Form data validated successfully',
-            data: this.getFormData()
+            message: 'Form data validated successfully'
+            //data: this.getFormData()
         });
         sendAnalytics({
             category: 'ui-component',
@@ -442,22 +404,102 @@ const EdsForm = class {
         this.isSubmitting = false;
         return;
     }
+    async getData() {
+        return this.makeFormData();
+    }
     render() {
         const hiddenFields = this.parsedFields.filter((field) => field.type === 'hidden');
         const otherFields = this.parsedFields.filter((field) => field.type !== 'hidden');
-        return (h("form", { key: '2f5651942cd01c0574b5a5f08483480c285472cb', ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: '0dab281f049f6afb8cfbad146076d7f3015b8c17' }, h("slot", { key: '661b26b05023480447f87aa03e2f21b814355d00' }), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), otherFields.map((field, index) => {
+        return (h("form", { key: '76fbc3f587eaac0bd53553663f072e5066914ae5', ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: '64d99d4ac7e1cb8e4bfe436bb236648201dcbc29' }, h("slot", { key: '9c257d29146b620367773726e65eaf680d3d010b' }), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), otherFields.map((field, index) => {
             var _a, _b;
             if (!this.isFieldVisible(field)) {
                 return null;
             }
             return (h("eds-input-field", { key: index, name: field.name, id: `${this.name}_${field.name}`, label: field.label, 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() })))));
+        })), this.formBtn && (h("div", { key: 'ba7908ab85c6368aeff6824fd402b78b514d2292', class: "mt-20" }, h("eds-button", { key: '84efe452f55b2898e5747a01b0dc6033ba14da7a', intent: "primary", label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
     }
-    get el() { return getElement(this); }
+    get el() { return this; }
     static get watchers() { return {
         "fields": ["parseFields"]
     }; }
-};
-EdsForm.style = edsFormCss;
+    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],
+        "getData": [64]
+    }, 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;
 
-export { EdsForm as eds_form };
+export { EdsForm, defineCustomElement };

package/dist/components/eds-frame.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface EdsFrame extends Components.EdsFrame, HTMLElement {}
+export const EdsFrame: {
+    prototype: EdsFrame;
+    new (): EdsFrame;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/eds-frame.js

@@ -0,0 +1,120 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './eds-icon-wrapper2.js';
+import { d as defineCustomElement$2 } from './eds-link2.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$1 = /*@__PURE__*/ proxyCustomElement(class EdsFrame extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.frameLabel = undefined;
+        this.frameSrc = undefined;
+        this.urlLabel = 'Open';
+        this.errorMessage = 'Could not load the requested content. Please check the URL or try again later.';
+        this.url = undefined;
+        this.intent = 'strong';
+        this.size = 'auto';
+        this.iframeError = false;
+    }
+    componentWillLoad() {
+        this.checkIframeAvailability();
+    }
+    componentDidLoad() {
+        // Emit context for each eds-link element after the component is fully loaded
+        const links = this.el.querySelectorAll('eds-link');
+        links.forEach((link) => {
+            this.emitContext(link);
+        });
+    }
+    /**
+     * Emits a custom event called `parentContext` for a given link element.
+     * This event provides context information about the breadcrumb component.
+     *
+     * @param linkElement - The link element to which the event will be dispatched.
+     */
+    emitContext(linkElement) {
+        const event = new CustomEvent('parentContext', {
+            detail: {
+                componentName: this.el.tagName.toLowerCase(),
+                identifier: this.frameLabel
+            }
+        });
+        linkElement.dispatchEvent(event);
+    }
+    articleClasses() {
+        return [
+            'bg-inverse min-h-156 rounded border-softer effect-focus-within relative flex grow flex-col border-2',
+            'w-full h-auto'
+        ].join(' ');
+    }
+    getFrameHeight() {
+        switch (this.size) {
+            case 'sm':
+                return '100px';
+            case 'md':
+                return '200px';
+            case 'lg':
+                return '400px';
+            case 'xl':
+                return '700px';
+            default:
+                return 'auto';
+        }
+    }
+    async checkIframeAvailability() {
+        try {
+            const response = await fetch(this.frameSrc, { method: 'GET' });
+            if (!response.ok) {
+                throw new Error('Failed to load');
+            }
+        }
+        catch (error) {
+            this.iframeError = true;
+        }
+    }
+    render() {
+        return (h("div", { key: '61c401d6e021418e3d705cc9a4418b4f54f6bcf1', class: this.articleClasses() }, h("div", { key: '3fe7284c2ce4057d6c953c02e03489c0ef75f43d', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: 'a0efaa70d4ab2484c76d38e309c0bf9800edf569', 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: 'e99188447abb78659865758afe3226a7ade7f8f2', 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 })))));
+    }
+    get el() { return this; }
+    static get style() { return EdsFrameStyle0; }
+}, [1, "eds-frame", {
+        "frameLabel": [1, "frame-label"],
+        "frameSrc": [1, "frame-src"],
+        "urlLabel": [1, "url-label"],
+        "errorMessage": [1, "error-message"],
+        "url": [1],
+        "intent": [1],
+        "size": [1],
+        "iframeError": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-frame", "eds-icon-wrapper", "eds-link"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-frame":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsFrame$1);
+            }
+            break;
+        case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "eds-link":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const EdsFrame = EdsFrame$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsFrame, defineCustomElement };

package/dist/components/eds-fullscreen-menu.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface EdsFullscreenMenu extends Components.EdsFullscreenMenu, HTMLElement {}
+export const EdsFullscreenMenu: {
+    prototype: EdsFullscreenMenu;
+    new (): EdsFullscreenMenu;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -1,11 +1,22 @@
-import { r as registerInstance, a as createEvent, h } from './index-9d277061.js';
-import { p as parseData } from './sharedUtils-6a231dd4.js';
+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';
 
 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 = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
+const EdsFullscreenMenu$1 = /*@__PURE__*/ proxyCustomElement(class EdsFullscreenMenu extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
         this.menuClose = createEvent(this, "menuClose", 7);
         this.links = undefined;
         this.menuLinks = undefined;
@@ -62,9 +73,71 @@ const EdsFullscreenMenu = class {
         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("div", { class: "mt-auto" }, h("eds-footer", { social: true, "extra-class": "bg-darker" }))))) : null;
+        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;
     }
-};
-EdsFullscreenMenu.style = edsFullscreenMenuCss;
+    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, "toggleheadermenu", "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;
 
-export { EdsFullscreenMenu as eds_fullscreen_menu };
+export { EdsFullscreenMenu, defineCustomElement };

package/dist/components/eds-gauge.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface EdsGauge extends Components.EdsGauge, HTMLElement {}
+export const EdsGauge: {
+    prototype: EdsGauge;
+    new (): EdsGauge;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/eds-gauge.js

@@ -0,0 +1,81 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const edsGaugeCss = ".relative{position:relative}.absolute{position:absolute}.inline-block{display:inline-block}.rounded-full{border-radius:9999px}.overflow-hidden{overflow:hidden}.bg-inverse{background-color:var(--white)}.bg-current{background-color:currentColor}.bg-dark{background-color:var(--grey-300)}.bg-darker{background-color:var(--grey-400)}.bg-default{background-color:var(--grey-200)}.bg-strong{background-color:var(--grey-700)}.bg-strongest{background-color:var(--black)}.inset-0{inset:0rem}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.text-default{color:var(--black)}";
+const EdsGaugeStyle0 = edsGaugeCss;
+
+const BACKGROUND_VARIANTS = {
+    default: '#f2f2f2',
+    dark: '#d8d8d8',
+    strong: '#666666',
+    black: '#000000'
+};
+const EdsGauge$1 = /*@__PURE__*/ proxyCustomElement(class EdsGauge extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.size = 100;
+        this.valueMin = 0;
+        this.valueMax = 100;
+        this.value = 60;
+        this.thickness = 0.1;
+        this.variant = 'default';
+    }
+    render() {
+        // Clamp thickness to [0,1]
+        const thicknessClamped = Math.min(Math.max(this.thickness, 0.1), 0.2);
+        // Normalize value within [valueMin, valueMax]
+        const clamped = Math.min(Math.max(this.value, this.valueMin), this.valueMax);
+        const range = this.valueMax - this.valueMin || 1;
+        const ratio = (clamped - this.valueMin) / range;
+        // Use the smaller of width/height as diameter
+        const diameter = this.size;
+        const angle = ratio * 360;
+        const ringThickness = thicknessClamped * diameter;
+        const innerDiameter = diameter - ringThickness * 2;
+        const fontSize = diameter * 0.2;
+        // Determine background color for empty portion
+        const emptyColor = BACKGROUND_VARIANTS[this.variant] || BACKGROUND_VARIANTS.default;
+        const containerStyle = {
+            width: `${diameter}px`,
+            height: `${diameter}px`,
+            background: `conic-gradient(#00e766 0deg ${angle}deg, ${emptyColor} ${angle}deg 360deg)`
+        };
+        const maskStyle = {
+            width: `${innerDiameter}px`,
+            height: `${innerDiameter}px`,
+            top: `${ringThickness}px`,
+            left: `${ringThickness}px`
+        };
+        const textStyle = {
+            fontSize: `${fontSize}px`
+        };
+        return (h("div", { key: 'a549808bcd0fc64583f90f284a7b139386e71be7', role: "progressbar", "aria-valuemin": this.valueMin, "aria-valuemax": this.valueMax, "aria-valuenow": clamped, "aria-label": `Gauge value: ${clamped} of ${this.valueMax}`, class: "relative inline-block rounded-full overflow-hidden", style: containerStyle }, h("div", { key: 'c3efb2d512f96e4c3a9371416c6d9bb938cab43e', class: "absolute bg-inverse rounded-full", style: maskStyle }), h("div", { key: '7a6254e22240301b6716a2d6fed785196a39cdd8', class: "absolute inset-0 flex items-center justify-center" }, h("span", { key: '78d8d1b7c442f75947b2813bbb569c566357c121', class: "f-body-01 text-default", style: textStyle }, clamped))));
+    }
+    static get style() { return EdsGaugeStyle0; }
+}, [1, "eds-gauge", {
+        "size": [2],
+        "valueMin": [2, "value-min"],
+        "valueMax": [2, "value-max"],
+        "value": [2],
+        "thickness": [2],
+        "variant": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-gauge"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-gauge":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsGauge$1);
+            }
+            break;
+    } });
+}
+
+const EdsGauge = EdsGauge$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsGauge, defineCustomElement };

package/dist/components/eds-header.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface EdsHeader extends Components.EdsHeader, HTMLElement {}
+export const EdsHeader: {
+    prototype: EdsHeader;
+    new (): EdsHeader;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;