@ebrains/components 3.0.0 → 3.1.0

package/dist/components/eds-rating2.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { d as defineCustomElement$2 } from './eds-button2.js';
 import { d as defineCustomElement$1 } from './eds-icon-wrapper2.js';
 
-const edsRatingCss = ":host{display:inline-block}.block{display:block}.stars{display:flex;gap:0.25rem;cursor:pointer}.star{color:var(--star-empty-color, #ccc);transition:color 0.2s ease-in-out}.star.filled{color:var(--brand-green);}.star:hover,.star.filled:hover{transform:scale(1.2)}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.mt-4{margin-top:0.25rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}.my-4{margin-top:0.25rem;margin-bottom:0.25rem}.my-8{margin-top:0.5rem;margin-bottom:0.5rem}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.0625rem * var(--tw-space-x-reverse));margin-left:calc(0.0625rem * calc(1 - var(--tw-space-x-reverse)))}";
+const edsRatingCss = ":host{display:inline-block}.block{display:block}.stars{display:flex;gap:0.25rem;cursor:pointer}.star{color:var(--star-empty-color, #ccc);transition:color 0.2s ease-in-out}.star.filled{color:var(--brand-green);}.star:hover,.star.filled:hover{transform:scale(1.2)}.eds-rating__btn{transition:transform 0.15s ease-in-out}.eds-rating__btn.is-selected{transform:scale(1.05)}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.mt-4{margin-top:0.25rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}.my-4{margin-top:0.25rem;margin-bottom:0.25rem}.my-8{margin-top:0.5rem;margin-bottom:0.5rem}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.0625rem * var(--tw-space-x-reverse));margin-left:calc(0.0625rem * calc(1 - var(--tw-space-x-reverse)))}";
 const EdsRatingStyle0 = edsRatingCss;
 
 const EdsRating = /*@__PURE__*/ proxyCustomElement(class EdsRating extends HTMLElement {
@@ -83,12 +83,12 @@ const EdsRating = /*@__PURE__*/ proxyCustomElement(class EdsRating extends HTMLE
         this.onSelect(next);
     }
     render() {
-        return (h("div", { key: '89671afe2d02d527001009ee83fb0d4e48550479', id: "rating-buttons", role: "group", "aria-labelledby": "rating", class: "stars flex space-x-1 my-8", onKeyDown: (e) => this.handleKeyNav(e) }, Array.from({ length: this.ratingCount }, (_, index) => {
+        return (h("div", { key: '01857f12c63fbe53b95152902ddba594aa736f6f', id: "rating-buttons", role: "group", "aria-labelledby": "rating", class: "stars flex space-x-1 my-8", onKeyDown: (e) => this.handleKeyNav(e) }, Array.from({ length: this.ratingCount }, (_, index) => {
             const starRating = index + 1;
             const isSelected = starRating <= this.internalRating;
             // Use the mapping text if available; otherwise, fall back to a generic label.
             const checked = this.internalRating === starRating;
-            return (h("eds-button", { ref: (el) => (this.buttonRefs[index] = el), icon: this.ratingType, "aria-label": `${starRating} ${this.ratingType}${starRating > 1 ? 's' : ''}`, onClick: () => this.onSelect(starRating), tabIndex: checked || (this.internalRating === 0 && index === 0) ? 0 : -1, intent: isSelected ? 'brand' : 'neutral', size: "large" }));
+            return (h("eds-button", { ref: (el) => (this.buttonRefs[index] = el), icon: this.ratingType, "aria-label": `${starRating} ${this.ratingType}${starRating > 1 ? 's' : ''}`, onClick: () => this.onSelect(starRating), tabIndex: checked || (this.internalRating === 0 && index === 0) ? 0 : -1, intent: isSelected ? 'brand' : 'brandLight', class: isSelected ? 'eds-rating__btn is-selected' : 'eds-rating__btn', size: "large" }));
         })));
     }
     get el() { return this; }

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

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

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

@@ -0,0 +1,6 @@
+import { E as EdsSearchSelect$1, d as defineCustomElement$1 } from './eds-search-select2.js';
+
+const EdsSearchSelect = EdsSearchSelect$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsSearchSelect, defineCustomElement };

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

@@ -0,0 +1,361 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$4 } from './eds-icon-wrapper2.js';
+import { d as defineCustomElement$3 } from './eds-input-footer2.js';
+import { d as defineCustomElement$2 } from './eds-input-label2.js';
+import { d as defineCustomElement$1 } from './eds-link2.js';
+
+const edsSearchSelectCss = ":host{display:block;width:100%;font-family:var(--f-ui-02-fontFamily, 'IBM Plex Sans', system-ui, sans-serif)}.eds-ss{position:relative;display:block;width:100%}.eds-ss__labelrow{display:flex;justify-content:space-between;margin-bottom:0.25rem}.eds-ss__hint{margin-top:0.5rem;margin-left:0.5rem;font-family:var(--f-ui-05-fontFamily);font-weight:var(--f-ui-05-fontWeight);font-size:var(--f-ui-05-fontSize);line-height:var(--f-ui-05-lineHeight);letter-spacing:var(--f-ui-05-letterSpacing);color:var(--grey-600)}.eds-ss__control{position:relative}.eds-ss__box{display:flex;flex-wrap:wrap;align-items:center;gap:0.35rem;width:100%;box-sizing:border-box;min-height:2.5rem;padding:6px 0.75rem;padding-right:3.75rem;border-width:2px;border-style:solid;border-color:rgba(0, 0, 0, 0.1);border-radius:8px;background:var(--white, #fff);transition-property:color, background-color, border-color;transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-duration:300ms}.eds-ss__box:hover{border-color:var(--brand-black)}.eds-ss__box:focus-within{border-color:var(--brand-black);outline:3px solid var(--brand-green);outline-offset:2px}.eds-ss__box.is-error{border-color:var(--red-700)}.eds-ss__box.is-disabled{cursor:not-allowed;background-color:var(--grey-300)}.eds-ss__input{flex:1;min-width:6rem;border:none;outline:none;background:transparent;padding:4px 0;color:var(--brand-black);font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}.eds-ss__input::placeholder{color:var(--grey-500)}.eds-ss__input:disabled{cursor:not-allowed;color:var(--grey-500)}.eds-ss__chip{display:inline-flex;align-items:center;gap:0.35rem;padding:4px 0.4rem 4px 0.7rem;background:rgba(0, 200, 123, 0.12);color:var(--brand-green-dark, #00A867);border-radius:6px;font-family:var(--f-ui-02-fontFamily);font-size:var(--f-ui-02-fontSize);font-weight:600;line-height:1.4;max-width:100%}.eds-ss__chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eds-ss__chip-x{flex-shrink:0;border:none;background:none;cursor:pointer;color:var(--brand-green-dark, #00A867);font-size:1.2rem;line-height:1;padding:0 2px}.eds-ss__chip-x:hover{color:var(--brand-black, #07140D)}.eds-ss__clear,.eds-ss__chevron{position:absolute;top:50%;transform:translateY(-50%)}.eds-ss__chevron{right:6px;width:1.75rem;height:1.75rem;display:flex;align-items:center;justify-content:center;background-color:var(--grey-300);border-radius:4px;color:var(--brand-black);pointer-events:none}.eds-ss__clear{right:2.6rem;color:var(--grey-600, #6e6e6e);background:none;border:none;cursor:pointer;font-size:1.05rem;line-height:1}.eds-ss__clear:hover{color:var(--brand-black, #07140D)}.eds-ss__list{position:absolute;z-index:50;left:0;right:0;margin:0.25rem 0 0;padding:0.25rem;list-style:none;max-height:18rem;overflow-y:auto;background:var(--white, #fff);border:2px solid rgba(0, 0, 0, 0.1);border-radius:8px;box-shadow:0 8px 24px rgba(0, 0, 0, 0.12)}.eds-ss__option{padding:0.5rem 0.6rem;border-radius:6px;cursor:pointer;color:var(--brand-black, #07140D);font-family:var(--f-ui-02-fontFamily);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.eds-ss__option.is-active{background:rgba(0, 200, 123, 0.1)}.eds-ss__option.is-selected{font-weight:600;color:var(--brand-green-dark, #00A867)}.eds-ss__status,.eds-ss__more{padding:0.5rem 0.6rem;font-family:var(--f-ui-05-fontFamily);font-size:var(--f-ui-05-fontSize);line-height:var(--f-ui-05-lineHeight);color:var(--grey-600, #6e6e6e)}.eds-ss__status.is-error{color:var(--red-700, #d64545)}.eds-ss__more{border-top:1px solid rgba(0, 0, 0, 0.1);margin-top:0.25rem;font-style:italic}";
+const EdsSearchSelectStyle0 = edsSearchSelectCss;
+
+const EdsSearchSelect = /*@__PURE__*/ proxyCustomElement(class EdsSearchSelect extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.edsinput = createEvent(this, "edsinput", 7);
+        this.edschange = createEvent(this, "edschange", 7);
+        this.debounceTimer = null;
+        this.inlineOptions = [];
+        this.listboxId = `eds-ss-list-${Math.round(performance.now())}`;
+        // value -> label, so selected tags render readable labels even for remote
+        // values whose label hasn't been fetched in the current page.
+        this.labelCache = {};
+        this.onInput = (e) => {
+            this.query = e.target.value;
+            this.open = true;
+            this.activeIndex = -1;
+            this.runSearch(this.query);
+        };
+        this.clear = () => {
+            if (this.multiple) {
+                this.value = [];
+                this.emitValue([]);
+            }
+            else {
+                this.value = undefined;
+                this.selectedLabel = '';
+                this.emitValue('');
+            }
+            this.query = '';
+        };
+        this.onKeyDown = (e) => {
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                if (!this.open)
+                    return this.openMenu();
+                this.activeIndex = Math.min(this.activeIndex + 1, this.visibleItems.length - 1);
+            }
+            else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                this.activeIndex = Math.max(this.activeIndex - 1, 0);
+            }
+            else if (e.key === 'Enter') {
+                if (this.open && this.activeIndex >= 0) {
+                    e.preventDefault();
+                    this.select(this.visibleItems[this.activeIndex]);
+                }
+            }
+            else if (e.key === 'Escape') {
+                this.closeMenu();
+            }
+            else if (e.key === 'Backspace' && this.multiple && !this.query && this.selectedValues.length) {
+                // Backspace on an empty query removes the last selected tag.
+                this.removeValue(this.selectedValues[this.selectedValues.length - 1]);
+            }
+        };
+        // Close when a click lands outside the component. Must be shadow-aware:
+        // this component is nested inside eds-form's shadow root, so a document-level
+        // listener sees the event retargeted to the OUTER host — `host.contains(target)`
+        // would be false even for our own clicks and wrongly close on open. composedPath()
+        // walks through every shadow boundary and contains our host iff the click was ours.
+        this.onDocumentClick = (e) => {
+            if (this.open && !e.composedPath().includes(this.host))
+                this.closeMenu();
+        };
+        this.name = undefined;
+        this.label = undefined;
+        this.placeholder = 'Search…';
+        this.required = false;
+        this.disabled = false;
+        this.hint = undefined;
+        this.message = undefined;
+        this.error = false;
+        this.errorMessage = undefined;
+        this.value = undefined;
+        this.multiple = false;
+        this.options = undefined;
+        this.source = undefined;
+        this.apiBase = '/api/v1';
+        this.searchParam = 'q';
+        this.limit = 50;
+        this.debounceMs = 250;
+        this.maxVisible = 100;
+        this.open = false;
+        this.query = '';
+        this.loading = false;
+        this.fetchError = '';
+        this.items = [];
+        this.total = 0;
+        this.activeIndex = -1;
+        this.selectedLabel = '';
+    }
+    componentWillLoad() {
+        this.parseInlineOptions();
+        this.resolveSelectedLabel();
+    }
+    onOptionsChange() {
+        this.parseInlineOptions();
+        this.resolveSelectedLabel();
+    }
+    onValueChange() {
+        this.resolveSelectedLabel();
+    }
+    parseInlineOptions() {
+        if (!this.options) {
+            this.inlineOptions = [];
+            return;
+        }
+        if (typeof this.options === 'string') {
+            try {
+                this.inlineOptions = JSON.parse(this.options) || [];
+            }
+            catch (_a) {
+                this.inlineOptions = [];
+            }
+        }
+        else {
+            this.inlineOptions = this.options;
+        }
+        this.cacheLabels(this.inlineOptions);
+    }
+    cacheLabels(opts) {
+        (opts || []).forEach((o) => {
+            if (o && o.value != null)
+                this.labelCache[String(o.value)] = o.label;
+        });
+    }
+    /** The current selection as a value array (works for single + multi). */
+    get selectedValues() {
+        const v = this.value;
+        if (Array.isArray(v))
+            return v.map(String).filter((s) => s !== '');
+        if (typeof v === 'string' && v !== '') {
+            return this.multiple ? v.split(',').filter(Boolean) : [v];
+        }
+        return [];
+    }
+    labelFor(val) {
+        var _a, _b;
+        return (this.labelCache[String(val)] ||
+            ((_a = this.inlineOptions.find((o) => String(o.value) === String(val))) === null || _a === void 0 ? void 0 : _a.label) ||
+            ((_b = this.items.find((o) => String(o.value) === String(val))) === null || _b === void 0 ? void 0 : _b.label) ||
+            String(val));
+    }
+    emitValue(v) {
+        this.edsinput.emit({ value: v });
+        this.edschange.emit({ value: v });
+    }
+    get isRemote() {
+        return !!this.source && this.inlineOptions.length === 0;
+    }
+    resolveSelectedLabel() {
+        if (!this.value) {
+            this.selectedLabel = '';
+            return;
+        }
+        // Inline: resolve label from the known list. Remote: best-effort — show the
+        // value until/unless it appears in a fetched page.
+        const pool = this.inlineOptions.length ? this.inlineOptions : this.items;
+        const found = pool.find((o) => String(o.value) === String(this.value));
+        this.selectedLabel = found ? found.label : String(this.value);
+    }
+    // --- Data --------------------------------------------------------------
+    filterInline(q) {
+        const needle = q.trim().toLowerCase();
+        if (!needle)
+            return this.inlineOptions;
+        return this.inlineOptions.filter((o) => o.label.toLowerCase().includes(needle) ||
+            String(o.value).toLowerCase().includes(needle));
+    }
+    async fetchRemote(q) {
+        this.loading = true;
+        this.fetchError = '';
+        try {
+            const params = new URLSearchParams({ [this.searchParam]: q, limit: String(this.limit) });
+            const url = `${this.apiBase}/datasets/${encodeURIComponent(this.source)}/search?${params}`;
+            const resp = await fetch(url);
+            if (!resp.ok)
+                throw new Error(`Search failed: ${resp.statusText}`);
+            const data = await resp.json();
+            this.items = data.items || [];
+            this.cacheLabels(this.items);
+            this.total = typeof data.total === 'number' ? data.total : this.items.length;
+            this.resolveSelectedLabel();
+        }
+        catch (e) {
+            this.fetchError = e instanceof Error ? e.message : 'Search failed';
+            this.items = [];
+            this.total = 0;
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    runSearch(q, immediate = false) {
+        if (this.isRemote) {
+            // Show the loading state synchronously so the debounce window renders
+            // "Searching…" rather than a misleading "No matches" before the fetch.
+            this.loading = true;
+            clearTimeout(this.debounceTimer);
+            if (immediate) {
+                this.fetchRemote(q);
+            }
+            else {
+                this.debounceTimer = setTimeout(() => this.fetchRemote(q), this.debounceMs);
+            }
+        }
+        else {
+            this.items = this.filterInline(q);
+            this.total = this.items.length;
+        }
+    }
+    // --- The capped, render-ready slice ------------------------------------
+    get visibleItems() {
+        return this.items.slice(0, this.maxVisible);
+    }
+    get hiddenCount() {
+        return Math.max(0, this.total - this.visibleItems.length);
+    }
+    // --- Interaction -------------------------------------------------------
+    openMenu() {
+        if (this.disabled)
+            return;
+        this.open = true;
+        this.activeIndex = -1;
+        // Populate on first open (initial page for remote, full list for inline).
+        // Immediate fetch on open — debounce only applies to typing.
+        if (!this.items.length || this.isRemote)
+            this.runSearch(this.query, true);
+    }
+    closeMenu() {
+        this.open = false;
+        this.activeIndex = -1;
+    }
+    select(opt) {
+        this.labelCache[String(opt.value)] = opt.label;
+        if (this.multiple) {
+            const current = this.selectedValues;
+            const key = String(opt.value);
+            const next = current.includes(key)
+                ? current.filter((v) => v !== key) // toggle off if already chosen
+                : [...current, key];
+            this.value = next;
+            this.query = '';
+            this.emitValue(next);
+            // Keep the menu open so more can be picked; reset the list to all results.
+            this.runSearch('', true);
+            return;
+        }
+        this.value = opt.value;
+        this.selectedLabel = opt.label;
+        this.query = '';
+        this.closeMenu();
+        this.emitValue(opt.value);
+    }
+    removeValue(val, e) {
+        e === null || e === void 0 ? void 0 : e.stopPropagation();
+        const next = this.selectedValues.filter((v) => v !== String(val));
+        this.value = next;
+        this.emitValue(next);
+    }
+    connectedCallback() {
+        document.addEventListener('click', this.onDocumentClick, true);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.onDocumentClick, true);
+        clearTimeout(this.debounceTimer);
+    }
+    render() {
+        const selected = this.selectedValues;
+        const hasSelection = selected.length > 0;
+        const inputValue = this.multiple ? this.query : (this.open ? this.query : this.selectedLabel);
+        const placeholder = this.multiple
+            ? (hasSelection ? '' : this.placeholder)
+            : (hasSelection && !this.open ? this.selectedLabel : this.placeholder);
+        return (h("div", { key: 'f5224332aa395be2a9dd8a1312dcd1b631ad2129', class: "eds-ss" }, (this.label || this.hint) && (h("div", { key: 'e28da19abdedb4107a7b7be2a59e6444780f8251', class: "eds-ss__labelrow" }, this.label && (h("eds-input-label", { key: '81933dbc2d370b8ddbbf8f4286c3420e4f140ca7', name: `${this.name}-input`, label: this.label, required: this.required, disabled: this.disabled })), this.hint && (h("p", { key: '1ff5b7a62cc20bb2ce710ca2e06c728d94aef895', id: `${this.name}-hint`, class: "eds-ss__hint" }, this.hint)))), h("div", { key: '84fbdccc6326707ac854e06d7209dd149d9c26a7', class: "eds-ss__control relative" }, h("div", { key: 'ae99c3d9c706fa6619459d8d6c9baa3df610169e', class: { 'eds-ss__box': true, 'is-error': this.error || !!this.fetchError, 'is-disabled': this.disabled } }, this.multiple &&
+            selected.map((v) => (h("span", { class: "eds-ss__chip", key: v }, h("span", { class: "eds-ss__chip-label" }, this.labelFor(v)), !this.disabled && (h("button", { type: "button", class: "eds-ss__chip-x", "aria-label": `Remove ${this.labelFor(v)}`, onMouseDown: (e) => { e.preventDefault(); this.removeValue(v, e); } }, "\u00D7"))))), h("input", { key: '18dcd5787c7636c09be7285fb85b77f5cae334c8', id: `${this.name}-input`, class: "eds-ss__input", type: "text", role: "combobox", autocomplete: "off", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": this.listboxId, "aria-autocomplete": "list", placeholder: placeholder, value: inputValue, disabled: this.disabled, required: this.required && !hasSelection, onFocus: () => this.openMenu(), onInput: this.onInput, onKeyDown: this.onKeyDown })), !this.multiple && hasSelection && !this.disabled && (h("button", { key: 'c927fa49fb58b7abec13f6d436f1d1452f9644c5', type: "button", class: "eds-ss__clear", "aria-label": "Clear selection", onClick: this.clear }, "\u00D7")), h("span", { key: 'bff4bf41fb388f849ef9c0928f4aa88e065d718d', class: "eds-ss__chevron", "aria-hidden": "true" }, h("eds-icon-wrapper", { key: '7871955d6fc5626914995d51c1b4b3511b60febe', name: "chevron-right", size: 20 }))), this.open && (h("ul", { key: 'e529fe82576be45a0e99d4a020aa4f721b71686b', class: "eds-ss__list", id: this.listboxId, role: "listbox" }, this.loading && h("li", { key: 'fe8d73dfa0d6a5cf7e9bea4220511a22489884f8', class: "eds-ss__status" }, "Searching\u2026"), !this.loading && this.fetchError && h("li", { key: 'b708b1de4eee8e45287fd23f0bf63327032616d6', class: "eds-ss__status is-error" }, this.fetchError), !this.loading && !this.fetchError && this.visibleItems.length === 0 && (h("li", { key: '9400ac7a022f38935f05df3705e2a65acb9d4a04', class: "eds-ss__status" }, "No matches")), !this.loading &&
+            !this.fetchError &&
+            this.visibleItems.map((opt, i) => (h("li", { key: opt.value, class: { 'eds-ss__option': true, 'is-active': i === this.activeIndex, 'is-selected': selected.includes(String(opt.value)) }, role: "option", "aria-selected": selected.includes(String(opt.value)) ? 'true' : 'false', onMouseEnter: () => (this.activeIndex = i), onMouseDown: (e) => { e.preventDefault(); this.select(opt); } }, opt.label))), !this.loading && !this.fetchError && this.hiddenCount > 0 && (h("li", { key: '8e82d65e9da3755ad10ffaf0fc4a45f5bc365a48', class: "eds-ss__more" }, "+", this.hiddenCount, " more \u2014 keep typing to narrow")))), h("eds-input-footer", { key: '0564f006a874a3556118ce99441cbfabc230ac57', name: this.name, message: this.message, error: this.error, "error-message": this.errorMessage })));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "options": ["onOptionsChange"],
+        "value": ["onValueChange"]
+    }; }
+    static get style() { return EdsSearchSelectStyle0; }
+}, [1, "eds-search-select", {
+        "name": [1],
+        "label": [1],
+        "placeholder": [1],
+        "required": [4],
+        "disabled": [4],
+        "hint": [1],
+        "message": [1],
+        "error": [4],
+        "errorMessage": [1, "error-message"],
+        "value": [1025],
+        "multiple": [4],
+        "options": [1],
+        "source": [1],
+        "apiBase": [1, "api-base"],
+        "searchParam": [1, "search-param"],
+        "limit": [2],
+        "debounceMs": [2, "debounce-ms"],
+        "maxVisible": [2, "max-visible"],
+        "open": [32],
+        "query": [32],
+        "loading": [32],
+        "fetchError": [32],
+        "items": [32],
+        "total": [32],
+        "activeIndex": [32],
+        "selectedLabel": [32]
+    }, undefined, {
+        "options": ["onOptionsChange"],
+        "value": ["onValueChange"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-search-select", "eds-icon-wrapper", "eds-input-footer", "eds-input-label", "eds-link"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-search-select":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsSearchSelect);
+            }
+            break;
+        case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "eds-input-footer":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "eds-input-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "eds-link":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { EdsSearchSelect as E, defineCustomElement as d };

package/dist/components/eds-section-core2.js

@@ -15,7 +15,7 @@ const EdsSectionCore = /*@__PURE__*/ proxyCustomElement(class EdsSectionCore ext
     }
     render() {
         const TagType = this.tag; // Set dynamic tag type (div or section)
-        return (h(TagType, { key: '65cb765fe9b997b5e573f5befd4ca1ea6611f1c5' }, h("eds-section-heading", { key: 'a48c9fef0a45fbed08749e8b4f17d762d38bbb5b', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '7e26bc40132c32670db60f5765b412d00d64c129' })));
+        return (h(TagType, { key: '635230d1ec9a0dcc945990a6a58dc3508345d984' }, h("eds-section-heading", { key: '0b6b94df22af707cbd6964132f3a5190b4b7e83c', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '8834c29c25249fb5c384fb5d51866eadb93a97d6' })));
     }
     static get style() { return EdsSectionCoreStyle0; }
 }, [1, "eds-section-core", {

package/dist/components/eds-section-heading2.js

@@ -26,12 +26,12 @@ const EdsSectionHeading = /*@__PURE__*/ proxyCustomElement(class EdsSectionHeadi
     render() {
         const TagType = this.tag; // Dynamically set tag type for the container
         const HeadingTag = this.headingLevel; // Dynamically set heading level
-        return (h(TagType, { key: '032f8629ef5ea1c45f40a135a54c32337f7181e9', class: {
+        return (h(TagType, { key: '7275284a1158ab982f1e53117b72738d0a001c97', class: {
                 'ui-section-header flex flex-wrap items-center justify-between gap-x-12 gap-y-8': true,
                 container: this.withContainer,
                 'pt-48': this.spacingLarge,
                 'pt-28': !this.spacingLarge
-            } }, h(HeadingTag, { key: '37f821426fe05dba66445745da3d23c9ff75345e', class: this.getHeadingClass() }, this.sectionTitle)));
+            } }, h(HeadingTag, { key: 'a3c68baa56a0337348405c88544225ed7c7ff0ed', class: this.getHeadingClass() }, this.sectionTitle)));
     }
 }, [0, "eds-section-heading", {
         "sectionTitle": [1, "section-title"],

package/dist/components/eds-sidebar.js

@@ -155,10 +155,10 @@ const EdsSidebar$1 = /*@__PURE__*/ proxyCustomElement(class EdsSidebar extends H
             } }, hasChildren && (h("span", { class: "sidebar-toggle -ml-4", "aria-hidden": "true" }, h("eds-icon-wrapper", { name: isOpen ? 'chevron-down' : 'chevron-right' }))), h("span", { class: "sidebar-link-wrapper" }, h("eds-link", { label: item.title, url: item.url || '#', intent: isActive ? 'strong' : 'weak', size: "small", "aria-label": item.title, "extra-class": "sidebar-link", tabindex: "-1" }))), hasChildren && isOpen && (h("ul", { id: childrenId, class: "sidebar-children" }, item.children.map((child) => this.renderItem(child, level + 1))))));
     }
     render() {
-        return (h(Host, { key: 'a56e293e9b53b0dbffd6268c117f77828ba5f41a', class: {
+        return (h(Host, { key: 'f5221c19e8148ca62a76fb470a4aa6786c3e41b5', class: {
                 'eds-sidebar': true,
                 [`theme-${this.theme}`]: true
-            } }, h("nav", { key: '07ca17add683f976b30e736389eddc473e1e5669', class: "sidebar-nav", "aria-label": "Sidebar" }, h("ul", { key: 'a102418d399f14715eddf34e1c3373cf1be9d4aa', class: "sidebar-list" }, this.parsedItems.map((item) => this.renderItem(item, 0))))));
+            } }, h("nav", { key: '0a975a10a3892f6eabaf2a1c2be21963f0e76549', class: "sidebar-nav", "aria-label": "Sidebar" }, h("ul", { key: '498436fa1f4ec7ff2f3feea843fe58b415d20a3f', class: "sidebar-list" }, this.parsedItems.map((item) => this.renderItem(item, 0))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/eds-social-networks2.js

@@ -60,7 +60,7 @@ const EdsSocialNetworks = /*@__PURE__*/ proxyCustomElement(class EdsSocialNetwor
         const isInverse = this.variant === 'inverse';
         const textClass = isInverse ? 'text-inverse' : '';
         const linkIntent = isInverse ? 'inverse' : 'strong';
-        return (h("nav", { key: '11b876483142bb98c686a4cb722d28022ca9f40c', "aria-label": "Social media" }, h("p", { key: 'daf2865247ed69ab3e4233d191d8abb8d5be584f', class: `f-ui-02 ${textClass}` }, this.heading), h("ul", { key: '47918284e8a158d523d3329eb28f4881ac27233e', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { external: true, "aria-label": `EBRAINS on ${network.label}`, url: network.url, icon: network.icon, intent: linkIntent })))))));
+        return (h("nav", { key: '924bdf5a32b65cd0968ad92461cb8203f3305fce', "aria-label": "Social media" }, h("p", { key: 'f406d71ed2d7ff9048e5db05f5ad62566081aa45', class: `f-ui-02 ${textClass}` }, this.heading), h("ul", { key: '40d000bc78780d7ec3c0c9bf2e10ec0a26f3b72e', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { external: true, "aria-label": `EBRAINS on ${network.label}`, url: network.url, icon: network.icon, intent: linkIntent })))))));
     }
     static get style() { return EdsSocialNetworksStyle0; }
 }, [1, "eds-social-networks", {

package/dist/components/eds-spinner2.js

@@ -78,7 +78,7 @@ const EdsSpinner = /*@__PURE__*/ proxyCustomElement(class EdsSpinner extends HTM
                 alignItems: 'center',
                 justifyContent: 'center'
             };
-        return (h(Host, { key: '16d20431aaa90a29b6e3d32cbd3403ece1f45345' }, h("div", { key: '0e29dafa5eb3a84f31305614ae083356604a81bf', class: "spinner-overlay", style: overlayStyle }, h("span", { key: 'cf63a83095e35a1ca4328fd14293e6895d8d9811', class: "spinner", style: spinnerStyle }), this.message && h("p", { key: '7bb83c40db5dc985c429ca6ac171145db80c011d', class: "f-ui-01" }, this.message))));
+        return (h(Host, { key: 'c09fa07856848a03aab44bbb56ecdd66a986bb40' }, h("div", { key: '544c653e9e0457d2063eaefc5ff1fe88de89f14e', class: "spinner-overlay", style: overlayStyle }, h("span", { key: 'e389aa572863a265c9aa68d587ad744f1c8db0a7', class: "spinner", style: spinnerStyle }), this.message && h("p", { key: '5e554fe1b870e673c5b3da3ec2a227e92dd9863d', class: "f-ui-01" }, this.message))));
     }
     static get style() { return EdsSpinnerStyle0; }
 }, [1, "eds-spinner", {

package/dist/components/eds-steps-v2.js

@@ -218,7 +218,7 @@ const EdsStepsV2$1 = /*@__PURE__*/ proxyCustomElement(class EdsStepsV2 extends H
         const steps = this.parsedSteps;
         const marginClass = this.orientation === 'horizontal' ? 'mt-64' : 'mt-32';
         const themeClass = this.theme === 'brand' ? 'theme-brand' : 'theme-default';
-        return (h("div", { key: '0f95d17cc699c020419593bec5ed76c4515501c9', class: this.articleClasses() }, this.imageSrc ? (h("div", { class: "w-full mb-12 rounded-t-lg overflow-hidden border-2" }, h("eds-img", { src: this.imageSrc, width: this.imageWidth, "with-bg": "true", "lazy-load": "true", alt: "Step illustration" }))) : (this.message && (h("div", { class: `w-full ${this.theme === 'brand' ? 'bg-strongest' : 'bg-darker'} rounded-t-lg border-2` }, h("div", { class: "p-24" }, h("span", { class: `${this.theme === 'brand' ? 'text-accent' : 'text-inverse'} f-heading-04` }, this.message))))), h("div", { key: 'ed26ac9fc5cc4d7c409d29c3cd623e37a5abc944', class: "mt-16 pb-20 px-8" }, this.type === 'linear' && this.orientation === 'horizontal' ? (h("div", { class: `steps--horizontal ${themeClass}`, style: { '--step-count': steps.length.toString() } }, h("div", { class: "horizontal-indicators" }, steps.map((step, index) => this.renderHorizontalIndicator(step, index))), steps.map((step, index) => {
+        return (h("div", { key: 'e1d78d18506adb662bbcc100f6f886e33c21a996', class: this.articleClasses() }, this.imageSrc ? (h("div", { class: "w-full mb-12 rounded-t-lg overflow-hidden border-2" }, h("eds-img", { src: this.imageSrc, width: this.imageWidth, "with-bg": "true", "lazy-load": "true", alt: "Step illustration" }))) : (this.message && (h("div", { class: `w-full ${this.theme === 'brand' ? 'bg-strongest' : 'bg-darker'} rounded-t-lg border-2` }, h("div", { class: "p-24" }, h("span", { class: `${this.theme === 'brand' ? 'text-accent' : 'text-inverse'} f-heading-04` }, this.message))))), h("div", { key: '5b69e2c641d96025b34377fc647679f94d0e4e44', class: "mt-16 pb-20 px-8" }, this.type === 'linear' && this.orientation === 'horizontal' ? (h("div", { class: `steps--horizontal ${themeClass}`, style: { '--step-count': steps.length.toString() } }, h("div", { class: "horizontal-indicators" }, steps.map((step, index) => this.renderHorizontalIndicator(step, index))), steps.map((step, index) => {
             const isLast = index === steps.length - 1;
             if (this.activeStep !== index) {
                 return null;