@ebrains/components 2.1.0 → 2.3.0

package/dist/components/eds-form.js

@@ -155,9 +155,10 @@ isFieldVisible) {
                 const npsEl = findNpsElement(formEl);
                 if (npsEl && npsEl.shadowRoot) {
                     const raw = (_a = npsEl.shadowRoot
-                        .querySelector('div[role="radio"][aria-checked="true"] eds-button')) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-label');
-                    const value = raw !== null ? parseInt(raw, 10) : null;
-                    if (value === null) {
+                        .querySelector('eds-button[tabindex="0"]')) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-label');
+                    const parsed = raw !== null ? parseInt(raw, 10) : NaN;
+                    const value = Number.isInteger(parsed) && parsed >= 0 && parsed <= 10 ? parsed : NaN;
+                    if (isNaN(value)) {
                         // eslint-disable-next-line
                         if (field.required) {
                             errors[field.name] = ['This field is required.'];
@@ -223,7 +224,7 @@ function getFormInitData({ initData, parsedFields, currentValues
     return { updatedValues };
 }
 
-const edsFormCss = ".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}.flex{display:flex}.flex-col{flex-direction:column}.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)}.f-body-01 b,.f-body-01 strong{font-weight:var(--f-body-01---bold-weight, bold)}.f-body-02 b,.f-body-02 strong{font-weight:var(--f-body-02---bold-weight, bold)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.rounded-sm{border-radius:8px}.border-softer{border-color:rgba(0, 0, 0, .1)}.border-2{border-width:2px}.mt-20{margin-top:1.25rem}.mt-32{margin-top:2rem}.mb-32{margin-bottom:2rem}.pt-28{padding-top:1.75rem}.pl-8{padding-left:0.5rem}.pl-16{padding-left:1rem}.border-l-2{border-left-width:2px}.gap-y-8{row-gap:0.5rem}.gap-y-16{row-gap:1rem}.gap-y-24{row-gap:1.5rem}.border-group{border-left:1px solid var(--soft-color, #ddd);padding-left:1rem}";
+const edsFormCss = ".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}.flex{display:flex}.flex-col{flex-direction:column}.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)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-body-01 b,.f-body-01 strong{font-weight:var(--f-body-01---bold-weight, bold)}.f-body-02 b,.f-body-02 strong{font-weight:var(--f-body-02---bold-weight, bold)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.text-light{color:var(--grey-700)}.rounded-sm{border-radius:8px}.border-softer{border-color:rgba(0, 0, 0, .1)}.border-2{border-width:2px}.mt-20{margin-top:1.25rem}.mt-32{margin-top:2rem}.mb-32{margin-bottom:2rem}.pt-28{padding-top:1.75rem}.pl-8{padding-left:0.5rem}.pl-16{padding-left:1rem}.border-l-2{border-left-width:2px}.gap-y-8{row-gap:0.5rem}.gap-y-16{row-gap:1rem}.gap-y-24{row-gap:1.5rem}.border-group{border-left:1px solid var(--soft-color, #ddd);padding-left:1rem}.bg-inverse{background-color:var(--white)}.effect-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.shadow-hover{--tw-shadow:0px 0px 16px rgba(0, 0, 0, 0.2);--tw-shadow-colored:0px 0px 16px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.cursor-pointer{cursor:pointer}.effect-focus-within{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.effect-focus-within:focus-within{outline-style:solid}.relative{position:relative}.rounded-lg{border-radius:16px}.px-16{padding-left:1rem;padding-right:1rem}.pb-16{padding-bottom:1rem}.p-32{padding:2rem}";
 const EdsFormStyle0 = edsFormCss;
 
 const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLElement {
@@ -233,13 +234,17 @@ const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLEle
         this.__attachShadow();
         this.form = createEvent(this, "form", 7);
         this.name = 'eds-form';
+        this.title = 'Form Title';
+        this.description = 'Form Description';
         this.setFormUrl = true;
         this.formBtn = true;
         this.formBtnLabel = 'Submit';
+        this.buttonIntent = 'primary';
         this.errorMessage = 'Some fields in your form are incorrect.';
         this.fields = [];
         this.groups = [];
         this.initData = {};
+        this.formStyle = 'default';
         this.values = {};
         this.isSubmitting = false;
         this.hasError = false;
@@ -361,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);
@@ -372,6 +378,37 @@ 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) {
@@ -482,11 +519,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) {
@@ -537,10 +574,15 @@ const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLEle
     }
     get groupedFields() {
         const map = {};
-        // initialize buckets for each group
+        // initialize buckets for each declared group
         this.parsedGroups.forEach((g) => (map[g.id] = []));
+        // always keep an ungrouped bucket
         map['__ungrouped'] = [];
+        // only bucket fields that are currently visible
         this.parsedFields.forEach((f) => {
+            if (!this.isFieldVisible(f)) {
+                return;
+            }
             const gid = f.groupId || '__ungrouped';
             if (!map[gid]) {
                 map[gid] = [];
@@ -561,7 +603,7 @@ const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLEle
             return (h("div", { class: "form-group rating-field", key: field.name }, h("div", { class: "flex justify-between" }, field && (h("eds-input-label", { name: `rating-${field.name}`, label: field.label, disabled: field.disabled, required: field.required }))), h("eds-rating", { id: `rating-${field.name}`, "rating-type": field.ratingType, "rating-count": field.ratingCount, "selected-rating": val, onRating: (e) => this.handleRating(e, field) }), h("div", { class: "mt-6" }, h("eds-input-footer", { id: `${field.name}-footer`, name: field.name, message: field.message, "error-message": (_a = this.errors[field.name]) === null || _a === void 0 ? void 0 : _a.join('<br/>'), error: !!this.errors[field.name], link: field.link }))));
         }
         else if (field.type === 'nps') {
-            return (h("div", { class: "form-group nps-field", key: field.name }, h("div", { class: "flex justify-between" }, field && (h("eds-input-label", { name: `nps-${field.name}`, label: field.question, disabled: field.disabled, required: field.required }))), h("eds-nps", { id: `nps-${field.name}`, "right-label": field.rightLabel, "left-label": field.leftLabel, onNps: (e) => this.handleNPS(e, field) }), h("div", { class: "mt-6" }, h("eds-input-footer", { id: `${field.name}-footer`, name: field.name, message: field.message, "error-message": (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br/>'), error: !!this.errors[field.name], link: field.link }))));
+            return (h("div", { class: "form-group nps-field", key: field.name }, h("div", { class: "flex justify-between" }, field && (h("eds-input-label", { name: `nps-${field.name}`, label: field.question, disabled: field.disabled, required: field.required }))), h("eds-nps", { id: `nps-${field.name}`, "right-label": field.rightLabel, "left-label": field.leftLabel, onNps: (e) => this.handleNPS(e, field) }), h("div", { class: "mt-6" }, h("eds-input-footer", { id: `${field.name}-footer`, name: field.name, "error-message": (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br/>'), error: !!this.errors[field.name] }))));
         }
         return (h("eds-input-field", { key: field.name, name: field.name, label: field.label, placeholder: field.placeholder, type: field.type, value: this.values[field.name], required: field.required, hint: field.hint, message: field.message, error: !!this.errors[field.name], errorMessage: (_c = this.errors[field.name]) === null || _c === void 0 ? void 0 : _c.join('<br/>'), options: field.options, onInput: (e) => this.handleInput(e, field), onChangeNative: (e) => this.handleChange(e, field) }));
     }
@@ -572,9 +614,13 @@ const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLEle
         const hiddenFields = this.parsedFields.filter((field) => field.type === 'hidden');
         //const otherFields = this.parsedFields.filter((field) => field.type !== 'hidden');
         const buckets = this.groupedFields;
-        return (h("form", { key: 'a66997f39b5be347a4d502f77bcd1da9d1a274ac', ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: 'f8800d2ebe64b3279234ab8ebe20e535dc822872' }, h("slot", { key: 'b4194073b281dec35a79a6cc974fdf7476a67807' }), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), this.parsedGroups
+        // build the shadow/bg classes if formStyle="shadow"
+        const styleClasses = this.formStyle === 'shadow'
+            ? 'bg-inverse effect-shadow shadow-hover border-softer relative rounded-lg border-2 p-32'
+            : '';
+        return (h("form", { key: 'a2e7de988c60301b92f6b756702bfcc78e9f3d90', class: styleClasses, ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: '22172631522aa6094d8b163b0774c57ef4404d60', class: "flex flex-col gap-y-24" }, this.title && (h("span", { key: '0597bbacbaf5f3d9ec1ab938cf755a10baafdf21', role: "heading", class: "f-heading-04" }, this.title)), this.description && h("span", { key: '5e636072bc2692071bd0b518af721999cc8b511e', class: "f-body-02 text-light" }, this.description), h("slot", { key: '79d21172208eb77ec6460e817d3c7bc3a680c806' })), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), this.parsedGroups
             .filter((g) => Array.isArray(buckets[g.id]) && buckets[g.id].length > 0)
-            .map((g) => (h("div", { class: "container mt-20", key: g.id }, h("span", { class: "f-body-02" }, h("b", null, g.title)), h("div", { class: "border-group mt-32 mb-32 flex flex-col gap-y-24" }, buckets[g.id].map((f) => this.renderField(f)))))), h("div", { key: '2fc83ebb6b0a472f6853618602c37ee83adae9ff', class: "flex flex-col mt-20 gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f)))), this.formBtn && (h("div", { key: '91b569b1a4513945f3228c374ae45b52ea17f91d', class: "mt-32" }, h("eds-button", { key: '1a8feaecd5a7f292f8aeae3db900700b4f7fb8d4', intent: "primary", label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
+            .map((g) => (h("div", { class: "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: 'b99941e53dec1c8c4e167d8588d6e86793838d1a', class: "flex flex-col mt-32 gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f))), this.formBtn && (h("div", { key: '27365a4d7d8150ff4e94ffb3d27d011400c8c412', class: "mt-32" }, h("eds-button", { key: '66f89292b95d9549e3718d7e499b0724762127c6', intent: this.buttonIntent, label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -584,13 +630,17 @@ const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLEle
     static get style() { return EdsFormStyle0; }
 }, [1, "eds-form", {
         "name": [1],
+        "title": [1],
+        "description": [1],
         "setFormUrl": [4, "set-form-url"],
         "formBtn": [4, "form-btn"],
         "formBtnLabel": [1, "form-btn-label"],
+        "buttonIntent": [1, "button-intent"],
         "errorMessage": [1, "error-message"],
         "fields": [1],
         "groups": [1],
         "initData": [16],
+        "formStyle": [1, "form-style"],
         "values": [32],
         "isSubmitting": [32],
         "hasError": [32],

package/dist/components/eds-frame.js

@@ -76,7 +76,7 @@ const EdsFrame$1 = /*@__PURE__*/ proxyCustomElement(class EdsFrame extends HTMLE
         }
     }
     render() {
-        return (h("div", { key: '9f5b6280292996b66fb3380678fae7748aba8cb3', class: this.articleClasses() }, h("div", { key: '6e4f6e0ce9b44fe94ff4622285258747503d9034', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: '36bb5a7b005b4c23a7042e5cf06769efe29b07db', class: "f-ui-02" }, this.frameLabel), !this.iframeError && this.url && this.urlLabel ? (h("eds-link", { label: this.urlLabel, url: this.url, intent: this.intent, class: "ml-auto", external: true, disabled: false, icon: "arrow-diagonal" })) : null), h("div", { key: '9d64e26eaa9e79d68e13d6a0faf67c8ca68d2097', class: "border-softer" }, this.iframeError ? (h("div", { class: "container ml-8 mr-8 mt-16" }, this.errorMessage)) : (h("iframe", { src: this.frameSrc, width: "100%", height: this.getFrameHeight(), title: this.frameLabel, frameBorder: "0", allowFullScreen: true })))));
+        return (h("div", { key: '7b4f5eb19460a178b98586aa38088e3dc5625671', class: this.articleClasses() }, h("div", { key: '98aefbd4cab33f14c9aa3152c122a11b24df4a02', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: 'd0cdd2f3354bddc99030ee5215f2bc24b139a261', 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: '030c560bbd0209160c92bc2d152f8d42484dc86b', 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

@@ -25,11 +25,16 @@ const EdsFullscreenMenu$1 = /*@__PURE__*/ proxyCustomElement(class EdsFullscreen
         this.isMenuOpen = false;
     }
     /**
-     * Listens for the toggleMenu event to open or close the menu.
-     * This event is emitted by the eds-header component.
+     * Listens on `body` for `toggleheadermenu` to open/close the menu.
+     * The event detail should be a boolean (`true` = open, `false` = close).
+     *
+     * @example
+     * ```js
+     * document.body.dispatchEvent(new CustomEvent('toggleheadermenu', { detail: true }));
+     * ```
      */
     handleToggleMenu(event) {
-        this.isMenuOpen = event.detail; // Set isMenuOpen based on the event payload
+        this.isMenuOpen = !!event.detail;
     }
     /** Opens the menu */
     openMenu() {

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: '8fb5d13cbb123d7a6d6a26d0ba59d4c6d1660216', class: "search-wrapper" }, h("eds-input-field", { key: 'a8bf5d6f4aa5746e144b82fad60b77697d0fdb99', 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: '553cb12c9b2aa9ecfbcf9c1eee9ff9a44549e35a', class: "search-dropdown", ref: (el) => (this.dropdownRef = el) }, this.loading && (h("div", { key: '4f40853beecd11f8812fd97cf07d2394e7b73466', class: "flex text-center justify-center p-64" }, h("eds-spinner", { key: '307a3ba3ec2d296f31f8e5cf1a696786387ea8fa', variant: "primary", size: "sm" }))), this.error && !this.loading && (h("div", { key: '46fc2ed3f48237864c62ce52d5789b72ab007f61', class: "flex text-center justify-center p-16" }, h("span", { key: 'b555370d936f99234d9be576d04766bc674bfd24', class: "text-error f-body-02" }, this.error))), this.showEmpty && (h("div", { key: '7464c4850872ce8dcee55c189b1e78baa1799f14', class: "dropdown-state" }, h("eds-icon-wrapper", { key: '989282ef0fc8fde7018bb80ab172773cc2107942', icon: "search" }), h("div", { key: 'efbdbd61312b7de43c4f9944cbd573573ec22f11' }, h("p", { key: 'fb8bf8c76f101a182f2f0e0c9beac642a872d4cb', class: "f-body-02" }, "No results found"), h("p", { key: '003a1facf39b7efe8f61c58518e7fdef4779f9c3', class: "f-ui-04 text-lightest" }, "Try different keywords")))), this.hasResults && !this.loading && (h("ul", { key: '01b48376f9b290218f93eed314bcc71fa15f83ef', 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: '3730704ff20781f23403df56a452bf586c06a688', class: "dropdown-footer" }, h("span", { key: '981e0fb42c24116a2b7caa1a341db1435fb57298', class: "footer-hint" }, h("kbd", { key: 'a3afa1202d694af3f87c736f8384b11497729d2c' }, "\u2191"), " ", h("kbd", { key: '4158766047e73eef837b3a7be415b52792473f3e' }, "\u2193"), " navigate \u2022 ", h("kbd", { key: '49dc09c928a6f0d69e4c95cee7ba5b655dfcd56c' }, "\u21B5"), " select \u2022", ' ', h("kbd", { key: '8da9b6f1bef58c7633a484f63e63920646d6b675' }, "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

@@ -55,7 +55,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: '812ad4427cbb3f4b0ca9e305870c35d63487dc59', class: `flex items-center justify-between relative z-10 ${classes}` }, h("div", { key: '531acdceb12ca45fea125091dee4d8a0ff39a10b', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: 'bb2708b3c8eacc575117bfed404b7c9db4fd05e2', type: logoType, href: this.homeUrl })), this.parsedLinks && (h("nav", { key: 'a80192d7666416c29025a1ac5812946f14feec3f', class: "absolute left-1/2 top-1/2 grow -translate-x-1/2 -translate-y-1/2 justify-center hidden md:flex" }, h("ul", { key: 'fae258c468367837a9738bcbe2442709fdc601a0', class: "flex gap-x-2" }, this.parsedLinks.map((link) => (h("eds-link", { label: link.label, "aria-label": link.label, url: link.url, intent: "ghost", size: "large", icon: link.icon, external: link.external, "extra-class": "after:effect-opacity aria-current-page:bg-darker whitespace-nowrap !text-current after:!border-transparent after:opacity-0 hover:after:!border-transparent hover:after:opacity-100" })))))), h("slot", { key: '9588ef20e19fda76115074c39d902eebead3c845' }), this.menuEnabled && (h("div", { key: 'ce2e43645a1c33ca7d6495acd820ad0a93cefdf9', class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { key: 'ed73c7e7a6544f60eea9dbf43379ffe4967c0dbd', "aria-label": "Menu", intent: this.headerVariant === 'default' ? 'ghost' : 'ghostInverse', icon: "menu", size: "small", onClick: () => this.handleToggleMenu() })))));
+        return (h("header", { key: '937c78379bb6f3a97705862b2fa3f0f6ddd76d4c', class: `flex items-center justify-between relative z-10 ${classes}` }, h("div", { key: 'd94837e8414d558f02039501d7b01ab550275ca7', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: '02711bc6d80075a215761ce79698555f7b31bffa', type: logoType, href: this.homeUrl })), this.parsedLinks && (h("nav", { key: 'e3f0033cce5a6145a4f457d1c2c7aebb767593f7', 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: '85008ed8ceb8eca869d8730b38a8aa37aeb757ff', 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: '35eb7af751f3da381fada990118fa0a37ce150b1' }), this.menuEnabled && (h("div", { key: '121bba2b027fc21e8c77054f3de533e40fad6b96', class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { key: '00774810aabf8fa292ecca2210bcd9542a7cb0c2', "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; }

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: 'f638b55d0ab199bbd7a52d099aa1242410ae1892', 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: '476da936a6861dc0a5db691cee31559c845766a2', 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: '8bc63b5438fa6bf2ffa729afd07a793b96f3167d', 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: 'db8fea43b7888da43821083ecc706a16c949932e', class: this.class, innerHTML: bluesky });
+        return h("span", { key: 'b42f25c9a2405c94d83c917026f376c9803058d1', 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: '3a7cb54b31e70a446b093453389432938c2fd9d8', 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: '49925425ac1fd676eb96b973b1419f1f2aec1c81', 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: '38d849e3d7e2b2f5e7df8a5624bcf988b3046b11', 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: '5368c37dc49fa654d75f42a774a9a3ad93db5261', 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: '6479f32960c973174c4577beef2f7df7b0baebd4', 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: 'a31ea2174a7c266b62264dad10c486f7dc27f043', 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: 'b4283a9fbc348923169a4d56ad6f3b5aad4a13c8', class: this.class, innerHTML: close });
     }
 }, [0, "eds-icon-close", {
         "class": [1]