@ebrains/components 2.2.0 → 2.3.1

package/dist/components/eds-form.js

@@ -234,8 +234,8 @@ const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLEle
         this.__attachShadow();
         this.form = createEvent(this, "form", 7);
         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';
@@ -366,6 +366,7 @@ const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLEle
         return formData;
     }
     makeFormData() {
+        var _a;
         const formData = new FormData();
         // Add the form name
         formData.append('form_name', this.name);
@@ -377,6 +378,36 @@ const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLEle
             // 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));
+                    }
+                });
+            });
+            // (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) {
@@ -487,11 +518,11 @@ const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLEle
             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) {
@@ -586,9 +617,9 @@ const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLEle
         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() })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/eds-frame.js

@@ -76,7 +76,7 @@ const EdsFrame$1 = /*@__PURE__*/ proxyCustomElement(class EdsFrame extends HTMLE
         }
     }
     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 })))));
     }
     get el() { return this; }
     static get style() { return EdsFrameStyle0; }

package/dist/components/eds-fullscreen-menu.js

@@ -36,6 +36,10 @@ const EdsFullscreenMenu$1 = /*@__PURE__*/ proxyCustomElement(class EdsFullscreen
     handleToggleMenu(event) {
         this.isMenuOpen = !!event.detail;
     }
+    onKeydown(e) {
+        if (e.key === 'Escape' && this.isMenuOpen)
+            this.closeMenu();
+    }
     /** Opens the menu */
     openMenu() {
         this.isMenuOpen = true;
@@ -45,6 +49,8 @@ const EdsFullscreenMenu$1 = /*@__PURE__*/ proxyCustomElement(class EdsFullscreen
         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));
@@ -78,7 +84,7 @@ const EdsFullscreenMenu$1 = /*@__PURE__*/ proxyCustomElement(class EdsFullscreen
         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 style() { return EdsFullscreenMenuStyle0; }
 }, [1, "eds-fullscreen-menu", {
@@ -86,8 +92,10 @@ const EdsFullscreenMenu$1 = /*@__PURE__*/ proxyCustomElement(class EdsFullscreen
         "menuLinks": [1, "menu-links"],
         "homeUrl": [1, "home-url"],
         "inverseHeader": [4, "inverse-header"],
-        "isMenuOpen": [32]
-    }, [[16, "toggleheadermenu", "handleToggleMenu"]]]);
+        "isMenuOpen": [32],
+        "open": [64],
+        "close": [64]
+    }, [[16, "toggleheadermenu", "handleToggleMenu"], [8, "keydown", "onKeydown"]]]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/eds-gauge.js

@@ -50,7 +50,7 @@ const EdsGauge$1 = /*@__PURE__*/ proxyCustomElement(class EdsGauge extends HTMLE
         const textStyle = {
             fontSize: `${fontSize}px`
         };
-        return (h("div", { key: '798a7345ee5c3eeb59b5fe29a39827ce347dc756', 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: 'f255f7036a5b11de88fbb32648388905932eb56e', class: "absolute bg-inverse rounded-full", style: maskStyle }), h("div", { key: '2a6dd1d88b32cb2c534f253703a8caa0099f2a43', class: "absolute inset-0 flex items-center justify-center" }, h("span", { key: 'ccbf1852d2f43b925f565c7117aca4a878e7f636', class: "f-body-01 text-default", style: textStyle }, clamped))));
+        return (h("div", { key: '8834b0fc3cb78c0e7926392d04229d67d8deab90', 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: 'f9ad68bd6bf19bceb46df1cfe16cdbbc2375099c', class: "absolute bg-inverse rounded-full", style: maskStyle }), h("div", { key: '64a2ba3ba2f104fa018f81949cdabc0fc53eea42', class: "absolute inset-0 flex items-center justify-center" }, h("span", { key: 'ae66f977802793f4e10210e75ddfa53839a9ff6e', class: "f-body-01 text-default", style: textStyle }, clamped))));
     }
     static get style() { return EdsGaugeStyle0; }
 }, [1, "eds-gauge", {

package/dist/components/eds-global-search.d.ts

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

package/dist/components/eds-global-search.js

@@ -0,0 +1,262 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { s as sendAnalytics } from './analytics.js';
+import { d as defineCustomElement$b } from './eds-icon-wrapper2.js';
+import { d as defineCustomElement$a } from './eds-input2.js';
+import { d as defineCustomElement$9 } from './eds-input-field2.js';
+import { d as defineCustomElement$8 } from './eds-input-footer2.js';
+import { d as defineCustomElement$7 } from './eds-input-label2.js';
+import { d as defineCustomElement$6 } from './eds-input-range2.js';
+import { d as defineCustomElement$5 } from './eds-input-search2.js';
+import { d as defineCustomElement$4 } from './eds-input-select2.js';
+import { d as defineCustomElement$3 } from './eds-spinner2.js';
+import { d as defineCustomElement$2 } from './eds-tag2.js';
+
+const edsGlobalSearchCss = ":host{display:block;width:100%}p{margin:0}ol,ul,menu{list-style:none;margin:0;padding:0}.search-wrapper{position:relative;width:100%}.search-dropdown{position:absolute;top:calc(100% + 8px);left:0;right:0;background:white;border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);max-height:500px;overflow:hidden;z-index:9999;display:flex;flex-direction:column}.dropdown-state{display:flex;align-items:center;justify-content:center;gap:8px;padding:24px;color:#616161;font-size:14px}.dropdown-results{list-style:none;margin:0;overflow-y:auto;overflow-x:hidden;max-height:440px}.result-item{padding:10px 14px;cursor:pointer;transition:background-color 0.15s ease;border-left:3px solid transparent;overflow:hidden;word-wrap:break-word;word-break:break-word}.result-item:hover,.result-item--selected{background-color:var(--grey-200);border-left-color:var(--green-600)}.result-header{display:flex;align-items:center;justify-content:space-between}.result-snippet{font-size:13px;color:#616161;line-height:1.4;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.dropdown-footer{border-top:1px solid #e0e0e0;padding:8px 16px;background:#fafafa;flex-shrink:0}.footer-hint{font-size:11px;color:#757575;display:flex;align-items:center;gap:4px;flex-wrap:wrap}kbd{display:inline-block;padding:2px 5px;font-size:10px;font-family:monospace;line-height:1;color:#424242;background-color:#f5f5f5;border:1px solid #bdbdbd;border-radius:3px;box-shadow:0 1px 0 rgba(0, 0, 0, 0.1)}.dropdown-results::-webkit-scrollbar{width:8px}.dropdown-results::-webkit-scrollbar-track{background:#f5f5f5}.dropdown-results::-webkit-scrollbar-thumb{background:#bdbdbd;border-radius:4px}.dropdown-results::-webkit-scrollbar-thumb:hover{background:#9e9e9e}.flex{display:flex}.inline-flex{display:inline-flex}.text-center{text-align:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.text-error{color:var(--red-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.ml-4{margin-left:0.25rem}.ml-8{margin-left:0.5rem}.ml-16{margin-left:1rem}.p-16{padding:1rem}.p-64{padding:4rem}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.f-ui-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}";
+const EdsGlobalSearchStyle0 = edsGlobalSearchCss;
+
+const EdsGlobalSearch$1 = /*@__PURE__*/ proxyCustomElement(class EdsGlobalSearch extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.resultSelected = createEvent(this, "resultSelected", 7);
+        this.searchClosed = createEvent(this, "searchClosed", 7);
+        this.handleInput = (event) => {
+            var _a;
+            const target = event.target;
+            this.query = target.value;
+            if (this.debounceTimer) {
+                clearTimeout(this.debounceTimer);
+            }
+            if (!this.query.trim()) {
+                this.results = [];
+                this.hasSearched = false;
+                this.showDropdown = false;
+                return;
+            }
+            sendAnalytics({
+                category: 'shared-ui',
+                parentContext: null,
+                tag: this.el.tagName.toLowerCase(),
+                name: `search-input: ${(_a = this.query) === null || _a === void 0 ? void 0 : _a.toLowerCase()}` ||
+                    'unknow seach input query',
+                action: 'click',
+            });
+            this.debounceTimer = window.setTimeout(() => {
+                this.runSearch();
+            }, this.debounceDelay);
+        };
+        this.apiEndpoint = '/api/v1/global-search';
+        this.placeholder = 'Search Handbook + Design...';
+        this.limit = 20;
+        this.debounceDelay = 300;
+        this.query = '';
+        this.results = [];
+        this.loading = false;
+        this.error = '';
+        this.hasSearched = false;
+        this.showDropdown = false;
+        this.selectedIndex = -1;
+    }
+    componentDidLoad() {
+        // Focus input if needed
+        if (this.inputRef) {
+            this.inputRef.focus();
+        }
+    }
+    disconnectedCallback() {
+        if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer);
+        }
+    }
+    handleDocumentClick(event) {
+        const path = event.composedPath();
+        if (!path.includes(this.el)) {
+            this.showDropdown = false;
+            this.selectedIndex = -1;
+        }
+    }
+    handleKeydown(event) {
+        if (!this.showDropdown || this.results.length === 0) {
+            if (event.key === 'Escape') {
+                this.searchClosed.emit();
+            }
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.selectedIndex = Math.min(this.selectedIndex + 1, this.results.length - 1);
+                this.scrollToSelected();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.selectedIndex = Math.max(this.selectedIndex - 1, -1);
+                this.scrollToSelected();
+                break;
+            case 'Enter':
+                event.preventDefault();
+                if (this.selectedIndex >= 0 &&
+                    this.selectedIndex < this.results.length) {
+                    this.selectResult(this.results[this.selectedIndex]);
+                }
+                break;
+            case 'Escape':
+                this.showDropdown = false;
+                this.selectedIndex = -1;
+                this.searchClosed.emit();
+                break;
+        }
+    }
+    async runSearch() {
+        var _a;
+        const query = this.query.trim();
+        if (!query) {
+            this.results = [];
+            this.hasSearched = false;
+            this.showDropdown = false;
+            return;
+        }
+        this.loading = true;
+        this.error = '';
+        try {
+            const response = await fetch(`${this.apiEndpoint}?q=${encodeURIComponent(query)}&limit=${this.limit}`);
+            if (!response.ok) {
+                throw new Error('Search failed');
+            }
+            const data = await response.json();
+            this.results = (_a = data.items) !== null && _a !== void 0 ? _a : [];
+            this.hasSearched = true;
+            this.showDropdown = true;
+            this.selectedIndex = -1;
+        }
+        catch (err) {
+            console.error('Search error:', err);
+            this.error = 'Search failed. Please try again.';
+            this.results = [];
+            this.showDropdown = true;
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    selectResult(result) {
+        this.resultSelected.emit(result);
+        this.searchClosed.emit();
+        sendAnalytics({
+            category: 'shared-ui',
+            parentContext: null,
+            tag: this.el.tagName.toLowerCase(),
+            name: `search-select: ${result.url}` || 'unknow search result selection',
+            action: 'click',
+        });
+        window.open(result.url, '_blank', 'noopener,noreferrer');
+    }
+    scrollToSelected() {
+        if (this.selectedIndex >= 0 && this.dropdownRef) {
+            const selectedItem = this.dropdownRef.querySelector(`[data-index="${this.selectedIndex}"]`);
+            if (selectedItem) {
+                selectedItem.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+            }
+        }
+    }
+    stripHtml(html) {
+        const div = document.createElement('div');
+        div.innerHTML = html;
+        return div.textContent || div.innerText || '';
+    }
+    get hasResults() {
+        return this.results.length > 0;
+    }
+    get showEmpty() {
+        return (this.hasSearched && !this.loading && !this.hasResults && this.query.trim());
+    }
+    render() {
+        return (h("div", { key: 'e3c15463b46aa6349efb86e4907d6f7bfabf682f', class: "search-wrapper" }, h("eds-input-field", { key: 'f2164163925534652c62541b3e954d4bb66510bc', icon: "search", "input-id": "search-global", type: "text", name: "search-box-global", placeholder: this.placeholder, value: this.query, onInput: this.handleInput }), this.showDropdown && (h("div", { key: 'f592d322fb3d1556743edc39713c8dbaa6449fa6', class: "search-dropdown", ref: (el) => (this.dropdownRef = el) }, this.loading && (h("div", { key: '4d3171271b27f70650bbded9cb7c0b76799dc1a1', class: "flex text-center justify-center p-64" }, h("eds-spinner", { key: '74fed5cf70ba698468dd2ca03dc5ff4eb7aeb7db', variant: "primary", size: "sm" }))), this.error && !this.loading && (h("div", { key: '481fd52e321ff02ca61cc0877a61f577b6a1ebd7', class: "flex text-center justify-center p-16" }, h("span", { key: '073d2a12b960b3309e0ab597c41d36f946615ed6', class: "text-error f-body-02" }, this.error))), this.showEmpty && (h("div", { key: '7b031eec1e6720f4cda6bc107ebc6f64f1c6e35f', class: "dropdown-state" }, h("eds-icon-wrapper", { key: '3ce91c3dcdaf27bd85f7ea4c855bab58b1208355', icon: "search" }), h("div", { key: 'c1a9b0c3f62fc568fa9d34d41730da8960bcdd54' }, h("p", { key: 'd3b87b4a6b06e81e5c62e817b924f762974c589e', class: "f-body-02" }, "No results found"), h("p", { key: '67fde47420811b9eaef805d9e6aa1b3515c74251', class: "f-ui-04 text-lightest" }, "Try different keywords")))), this.hasResults && !this.loading && (h("ul", { key: 'ba3a77467ba5e709bdf95dc793c316a18a135b64', class: "dropdown-results" }, this.results.map((result, index) => (h("li", { key: result.id, "data-index": index, class: {
+                'result-item': true,
+                'result-item--selected': index === this.selectedIndex,
+            }, onClick: () => this.selectResult(result), onMouseEnter: () => (this.selectedIndex = index) }, h("div", { class: "result-header" }, h("span", { class: "f-body-02" }, result.title)), h("div", { class: "inline" }, h("eds-tag", { intent: "accent", label: result.source }), result.section && (h("span", { class: "result-badge" }, result.section)), h("span", { class: "f-ui-03-light text-lighter ml-8" }, result.url)), result.snippet && (h("p", { class: "result-snippet" }, this.stripHtml(result.snippet)))))))), this.hasResults && !this.loading && (h("div", { key: 'ccdceeb06f423b28868dbf5ec2a11c5b84c651d7', class: "dropdown-footer" }, h("span", { key: 'e9dfb424b4dd277b11c6a630c673ec6368b09ef2', class: "footer-hint" }, h("kbd", { key: '4d045d4356b035c6efc7e029ea9e1f5bb4828b6b' }, "\u2191"), " ", h("kbd", { key: '5ee2913fe448ad3763ca9a70f474bfa9fcd3aad9' }, "\u2193"), " navigate \u2022 ", h("kbd", { key: 'd745261bb53ecffae5ff41d53e349fd74d37b955' }, "\u21B5"), " select \u2022", ' ', h("kbd", { key: 'baa93b7af9e8ae8994f8e73c1bf7942f659b0491' }, "esc"), " close")))))));
+    }
+    get el() { return this; }
+    static get style() { return EdsGlobalSearchStyle0; }
+}, [1, "eds-global-search", {
+        "apiEndpoint": [1, "api-endpoint"],
+        "placeholder": [1],
+        "limit": [2],
+        "debounceDelay": [2, "debounce-delay"],
+        "query": [32],
+        "results": [32],
+        "loading": [32],
+        "error": [32],
+        "hasSearched": [32],
+        "showDropdown": [32],
+        "selectedIndex": [32]
+    }, [[4, "click", "handleDocumentClick"], [0, "keydown", "handleKeydown"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-global-search", "eds-icon-wrapper", "eds-input", "eds-input-field", "eds-input-footer", "eds-input-label", "eds-input-range", "eds-input-search", "eds-input-select", "eds-spinner", "eds-tag"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-global-search":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsGlobalSearch$1);
+            }
+            break;
+        case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "eds-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "eds-input-field":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "eds-input-footer":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "eds-input-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "eds-input-range":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "eds-input-search":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "eds-input-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "eds-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "eds-tag":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const EdsGlobalSearch = EdsGlobalSearch$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsGlobalSearch, defineCustomElement };

package/dist/components/eds-header.js

@@ -20,14 +20,10 @@ const EdsHeader$1 = /*@__PURE__*/ proxyCustomElement(class EdsHeader extends HTM
         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) {
@@ -55,7 +51,7 @@ const EdsHeader$1 = /*@__PURE__*/ proxyCustomElement(class EdsHeader extends HTM
         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() })))));
     }
     get hostEl() { return this; }
     static get style() { return EdsHeaderStyle0; }
@@ -65,9 +61,8 @@ const EdsHeader$1 = /*@__PURE__*/ proxyCustomElement(class EdsHeader extends HTM
         "headerVariant": [513, "header-variant"],
         "menuEnabled": [4, "menu-enabled"],
         "isMenuOpen": [32],
-        "isUserMenuOpen": [32],
-        "isAuthenticated": [32]
-    }, [[16, "authStatusChanged", "onAuthStatusChanged"]]]);
+        "isUserMenuOpen": [32]
+    }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

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

@@ -8,7 +8,7 @@ const EdsIconArrowDiagonal$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconArr
         this.class = '';
     }
     render() {
-        return h("span", { key: 'ef60986a4391dffcbb2a66109f217f3cec95a5fc', class: this.class, innerHTML: arrowDiagonal });
+        return h("span", { key: '4dd5fc5be465494e8546404231cfdb63609e64f1', class: this.class, innerHTML: arrowDiagonal });
     }
 }, [0, "eds-icon-arrow-diagonal", {
         "class": [1]

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

@@ -8,7 +8,7 @@ const EdsIconArrowRight$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconArrowR
         this.class = '';
     }
     render() {
-        return h("span", { key: '02288b13fa941076a5cc73fd3821bd78e206b2b3', class: this.class, innerHTML: arrowRight });
+        return h("span", { key: '64d0cb03ab1a33096ad9e3b7219a2e758707a1d5', class: this.class, innerHTML: arrowRight });
     }
 }, [0, "eds-icon-arrow-right", {
         "class": [1]

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

@@ -8,7 +8,7 @@ const EdsIconBin$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconBin extends H
         this.class = '';
     }
     render() {
-        return h("span", { key: '5f314df297274d153638c96027c23632f47f6a3a', class: this.class, innerHTML: bin });
+        return h("span", { key: '9a7b52f2a2006bd83418d6b4bb2834bffa79305c', class: this.class, innerHTML: bin });
     }
 }, [0, "eds-icon-bin", {
         "class": [1]

package/dist/components/eds-icon-bluesky.js

@@ -8,7 +8,7 @@ const EdsIconBluesky$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconBluesky e
         this.class = '';
     }
     render() {
-        return h("span", { key: 'dd1f0043450c0970da5487a4c7c69859d3d97e2f', class: this.class, innerHTML: bluesky });
+        return h("span", { key: '4f21c5659e92ea08e1f464d23e351fbfef6e347d', class: this.class, innerHTML: bluesky });
     }
 }, [0, "eds-icon-bluesky", {
         "class": [1]

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

@@ -8,7 +8,7 @@ const EdsIconBookmark$1 = /*@__PURE__*/ proxyCustomElement(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 });
     }
 }, [0, "eds-icon-bookmark", {
         "class": [1]

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

@@ -8,7 +8,7 @@ const EdsIconChevronDown$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconChevr
         this.class = '';
     }
     render() {
-        return h("span", { key: '5547e9d98f781dc03e88a014f726b3a402e6425d', class: this.class, innerHTML: chevronDown });
+        return h("span", { key: 'ea6e2250c63af2a7f3ed1d50e6514a28e5629e6d', class: this.class, innerHTML: chevronDown });
     }
 }, [0, "eds-icon-chevron-down", {
         "class": [1]

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

@@ -8,7 +8,7 @@ const EdsIconChevronLeft$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconChevr
         this.class = '';
     }
     render() {
-        return h("span", { key: '49925425ac1fd676eb96b973b1419f1f2aec1c81', class: this.class, innerHTML: chevronLeft });
+        return h("span", { key: '8847183f6f31439d94f87a24ee01697babe53ecf', class: this.class, innerHTML: chevronLeft });
     }
 }, [0, "eds-icon-chevron-left", {
         "class": [1]

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

@@ -8,7 +8,7 @@ const EdsIconChevronRight$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconChev
         this.class = '';
     }
     render() {
-        return h("span", { key: 'e9abd378d28d9e2251e530f97a11973ea558fbe2', class: this.class, innerHTML: chevronRight });
+        return h("span", { key: '398a406ad137aeb4d51286b82eccee3c0bff2f2b', class: this.class, innerHTML: chevronRight });
     }
 }, [0, "eds-icon-chevron-right", {
         "class": [1]

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

@@ -8,7 +8,7 @@ const EdsIconChevronUp$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconChevron
         this.class = '';
     }
     render() {
-        return h("span", { key: 'f81db967bf78d75a4a8e572cda6427046603f0a6', class: this.class, innerHTML: chevronUp });
+        return h("span", { key: 'f0647dcbf0e597fc3dd2f31d0e1de2ce7237d25a', class: this.class, innerHTML: chevronUp });
     }
 }, [0, "eds-icon-chevron-up", {
         "class": [1]

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

@@ -8,7 +8,7 @@ const EdsIconClone$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconClone exten
         this.class = '';
     }
     render() {
-        return h("span", { key: 'ebbda9e150151cc6e6d2677307287f2d2f1ab4db', class: this.class, innerHTML: clone });
+        return h("span", { key: 'faa232cc2d703f00cbda76fb9c152773a032ded2', class: this.class, innerHTML: clone });
     }
 }, [0, "eds-icon-clone", {
         "class": [1]

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

@@ -8,7 +8,7 @@ const EdsIconClose$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconClose exten
         this.class = '';
     }
     render() {
-        return h("span", { key: '91f33941205260a787d69146e390fa970a1c0d72', class: this.class, innerHTML: close });
+        return h("span", { key: '001c4d41b324d9b2636087e1fde76e2fdeef9f33', class: this.class, innerHTML: close });
     }
 }, [0, "eds-icon-close", {
         "class": [1]

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

@@ -8,7 +8,7 @@ const EdsIconCopy$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconCopy extends
         this.class = '';
     }
     render() {
-        return h("span", { key: 'dd9df55fa03c1b27f2f931c7d07ccc69ee940ff4', class: this.class, innerHTML: copy });
+        return h("span", { key: '6a7eb765b426e0e142a0d7f742ddc33c9de98601', class: this.class, innerHTML: copy });
     }
 }, [0, "eds-icon-copy", {
         "class": [1]

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

@@ -8,7 +8,7 @@ const EdsIconDownload$1 = /*@__PURE__*/ proxyCustomElement(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 });
     }
 }, [0, "eds-icon-download", {
         "class": [1]

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

@@ -8,7 +8,7 @@ const EdsIconDraft$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconDraft exten
         this.class = '';
     }
     render() {
-        return h("span", { key: 'e76f56aaba4a67096e6314e61d53bc2512941552', class: this.class, innerHTML: draft });
+        return h("span", { key: '0defed3e15ba10e6e62cf35d0540901ec1dd2485', class: this.class, innerHTML: draft });
     }
 }, [0, "eds-icon-draft", {
         "class": [1]