@ebrains/components 2.4.1 → 3.1.0

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: '3c75c9cda6a41c0d4243c3c111d7cc95f3efb97b' }, h("eds-section-heading", { key: '05b4d011aa1b8f489fe8aa0fd6d43b824da03370', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '1749580398e56d38d83d5f5fdd87f43867a554cb' })));
+        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: '18614645f329d9ccfe6104b544ff306c6190173a', 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: 'ce699077313e9ee8d8a66e68af667451351a35a6', 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

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { d as defineCustomElement$3 } from './eds-icon-wrapper2.js';
 import { d as defineCustomElement$2 } from './eds-link2.js';
 
-const edsSidebarCss = ":host{display:block;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;transition:width 0.3s ease}:host(.collapsed){width:4rem}:host::-webkit-scrollbar{width:8px}:host::-webkit-scrollbar-track{background:transparent}:host::-webkit-scrollbar-thumb{background:rgba(0, 0, 0, 0.2);border-radius:4px}:host::-webkit-scrollbar-thumb:hover{background:rgba(0, 0, 0, 0.3)}.sidebar-nav{padding:0.5rem 0}.sidebar-header{display:flex;justify-content:flex-end;padding:0.5rem 0.75rem;margin-bottom:0.5rem}:host(.collapsed) .sidebar-header{justify-content:center;padding:0.5rem}.collapse-toggle{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;background:none;border:none;cursor:pointer;padding:0;border-radius:0.375rem;transition:background-color 0.15s ease;color:inherit}.collapse-toggle:hover{background-color:rgba(0, 0, 0, 0.08)}.collapse-toggle:focus-visible{outline:2px solid var(--eds-focus-color, #0066cc);outline-offset:2px}.sidebar-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.125rem}.sidebar-item{display:flex;flex-direction:column}.sidebar-item-content{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.75rem;cursor:pointer;user-select:none;word-break:break-word;transition:background-color 0.15s ease;border-radius:0.375rem;margin:0 0.5rem;position:relative}:host(.collapsed) .sidebar-item-content{justify-content:center;padding:0.75rem;margin:0 0.5rem}.sidebar-item-content:hover{background-color:rgba(0, 0, 0, 0.04)}.sidebar-item-content:focus-visible{outline:2px solid var(--eds-focus-color, #0066cc);outline-offset:-2px;z-index:1}.sidebar-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem}.sidebar-content-wrapper{display:flex;align-items:center;gap:0.5rem;flex:1;min-width:0}.sidebar-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem;padding:0;margin:-0.125rem 0;pointer-events:none}.sidebar-link-wrapper{flex:1;min-width:0;pointer-events:none}.sidebar-link{font-weight:400;pointer-events:none}.sidebar-children{list-style:none;margin:0.25rem 0 0 0;padding:0;display:flex;flex-direction:column;gap:0.125rem;overflow:hidden;animation:slideDown 0.2s ease}@keyframes slideDown{from{opacity:0;transform:translateY(-0.25rem)}to{opacity:1;transform:translateY(0)}}.sidebar-item.level-0 .sidebar-item-content{padding-left:0.75rem}:host(.collapsed) .sidebar-item.level-0 .sidebar-item-content{padding-left:0.75rem}.sidebar-item.level-1 .sidebar-item-content{padding-left:2rem}.sidebar-item.level-2 .sidebar-item-content{padding-left:3.25rem}.sidebar-item.level-3 .sidebar-item-content{padding-left:4.5rem}.sidebar-item.level-4 .sidebar-item-content{padding-left:5.75rem}.sidebar-item.level-5 .sidebar-item-content{padding-left:7rem}:host(.theme-default) .sidebar-item-content{border-radius:0.375rem;margin:0 0.5rem;padding:0.5rem 0.75rem}:host(.theme-default.collapsed) .sidebar-item-content{margin:0 0.5rem;border-radius:0.375rem}:host(.theme-default) .sidebar-item-content:hover{background-color:rgba(0, 0, 0, 0.04)}:host(.theme-default) .sidebar-item.active>.sidebar-item-content{background-color:transparent}:host(.theme-default) .sidebar-item.active>.sidebar-item-content .sidebar-link{font-weight:600}:host(.theme-default) .sidebar-item.level-0 .sidebar-item-content{padding-left:0.75rem}:host(.theme-default) .sidebar-item.level-1 .sidebar-item-content{padding-left:2rem}:host(.theme-default) .sidebar-item.level-2 .sidebar-item-content{padding-left:3.25rem}:host(.theme-default) .sidebar-item.level-3 .sidebar-item-content{padding-left:4.5rem}:host(.theme-default) .sidebar-item.level-4 .sidebar-item-content{padding-left:5.75rem}:host(.theme-minimal) .sidebar-item-content{border-radius:0;margin:0;padding-left:1rem;padding-right:1rem}:host(.theme-minimal.collapsed) .sidebar-item-content{margin:0 0.25rem;border-radius:0.375rem}:host(.theme-minimal) .sidebar-item-content:hover{background-color:var(--grey-300)}:host(.theme-minimal) .sidebar-item.active>.sidebar-item-content{background-color:var(--grey-400);border-left:3px solid var(--grey-900);padding-left:calc(1rem - 3px)}:host(.theme-minimal.collapsed) .sidebar-item.active>.sidebar-item-content{border-left:none;border-radius:0.375rem;padding-left:0.75rem}:host(.theme-minimal) .sidebar-item.level-1.active>.sidebar-item-content{padding-left:calc(2rem - 3px)}:host(.theme-minimal) .sidebar-item.level-2.active>.sidebar-item-content{padding-left:calc(3.25rem - 3px)}:host(.theme-minimal) .sidebar-item.level-3.active>.sidebar-item-content{padding-left:calc(4.5rem - 3px)}:host(.theme-minimal) .sidebar-item.level-4.active>.sidebar-item-content{padding-left:calc(5.75rem - 3px)}:host(.theme-minimal) .sidebar-item.level-0 .sidebar-item-content{padding-left:1rem}:host(.theme-minimal) .sidebar-item.level-1 .sidebar-item-content{padding-left:2rem}:host(.theme-minimal) .sidebar-item.level-2 .sidebar-item-content{padding-left:3.25rem}:host(.theme-minimal) .sidebar-item.level-3 .sidebar-item-content{padding-left:4.5rem}:host(.theme-minimal) .sidebar-item.level-4 .sidebar-item-content{padding-left:5.75rem}:host(.theme-minimal) .sidebar-children{position:relative}:host(.theme-ebrains) .sidebar-item-content{padding:0.5rem 1rem;border-radius:0.5rem;margin:0 0.5rem}:host(.theme-ebrains.collapsed) .sidebar-item-content{padding:0.75rem}:host(.theme-ebrains) .sidebar-item-content:hover{background-color:rgba(0, 0, 0, 0.05)}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content{background-color:var(--green-600, #22c55e);color:white}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content .sidebar-link{--eds-link-color:white;--eds-link-hover-color:white}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content .sidebar-toggle{color:white}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content .sidebar-icon{color:white}:host(.theme-ebrains) .sidebar-item.level-0 .sidebar-item-content{padding-left:1rem}:host(.theme-ebrains) .sidebar-item.level-1 .sidebar-item-content{padding-left:2.25rem}:host(.theme-ebrains) .sidebar-item.level-2 .sidebar-item-content{padding-left:3.5rem}:host(.theme-ebrains) .sidebar-item.level-3 .sidebar-item-content{padding-left:4.75rem}:host(.theme-ebrains) .sidebar-item.level-4 .sidebar-item-content{padding-left:6rem}@media (prefers-color-scheme: dark){.collapse-toggle:hover{background-color:rgba(255, 255, 255, 0.08)}:host(.theme-default) .sidebar-item-content:hover{background-color:rgba(255, 255, 255, 0.05)}:host(.theme-default) .sidebar-item.active>.sidebar-item-content{background-color:rgba(0, 102, 204, 0.15)}:host(.theme-minimal) .sidebar-item-content:hover{background-color:rgba(255, 255, 255, 0.06)}:host::-webkit-scrollbar-thumb{background:rgba(255, 255, 255, 0.2)}:host::-webkit-scrollbar-thumb:hover{background:rgba(255, 255, 255, 0.3)}}.sidebar-toggle eds-icon-wrapper,.sidebar-icon eds-icon-wrapper,.collapse-toggle eds-icon-wrapper{transition:transform 0.15s ease;display:flex;align-items:center;justify-content:center}.sidebar-item-content:focus-visible .sidebar-link{text-decoration:underline}.sidebar-item.active>.sidebar-item-content .sidebar-link{font-weight:500}:host(.collapsed) .sidebar-item-content::after{content:attr(title);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:0.5rem;padding:0.5rem 0.75rem;background:rgba(0, 0, 0, 0.9);color:white;border-radius:0.375rem;white-space:nowrap;font-size:0.875rem;opacity:0;pointer-events:none;transition:opacity 0.2s ease;z-index:1000}:host(.collapsed) .sidebar-item-content:hover::after{opacity:1;transition-delay:0.3s}.-ml-4{margin-left:-0.25rem}.mt-2{margin-top:0.125rem}";
+const edsSidebarCss = ":host{display:block;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;transition:width 0.3s ease}:host(.collapsed){width:4rem}:host::-webkit-scrollbar{width:8px}:host::-webkit-scrollbar-track{background:transparent}:host::-webkit-scrollbar-thumb{background:rgba(0, 0, 0, 0.2);border-radius:4px}:host::-webkit-scrollbar-thumb:hover{background:rgba(0, 0, 0, 0.3)}.sidebar-nav{padding:0.5rem 0}.sidebar-header{display:flex;justify-content:flex-end;padding:0.5rem 0.75rem;margin-bottom:0.5rem}:host(.collapsed) .sidebar-header{justify-content:center;padding:0.5rem}.collapse-toggle{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;background:none;border:none;cursor:pointer;padding:0;border-radius:0.375rem;transition:background-color 0.15s ease;color:inherit}.collapse-toggle:hover{background-color:rgba(0, 0, 0, 0.08)}.collapse-toggle:focus-visible{outline:2px solid var(--eds-focus-color, #0066cc);outline-offset:2px}.sidebar-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.125rem}.sidebar-item{display:flex;flex-direction:column}.sidebar-item-content{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.75rem;cursor:pointer;user-select:none;word-break:break-word;transition:background-color 0.15s ease;border-radius:0.375rem;margin:0 0.5rem;position:relative}:host(.collapsed) .sidebar-item-content{justify-content:center;padding:0.75rem;margin:0 0.5rem}.sidebar-item-content:hover{background-color:rgba(0, 0, 0, 0.04)}.sidebar-item-content:focus-visible{outline:2px solid var(--eds-focus-color, #0066cc);outline-offset:-2px;z-index:1}.sidebar-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem}.sidebar-content-wrapper{display:flex;align-items:center;gap:0.5rem;flex:1;min-width:0}.sidebar-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem;padding:0;margin:-0.125rem 0;pointer-events:none}.sidebar-link-wrapper{flex:1;min-width:0;pointer-events:none}.sidebar-link{font-weight:400;pointer-events:none}.sidebar-children{list-style:none;margin:0.25rem 0 0 0;padding:0;display:flex;flex-direction:column;gap:0.125rem;overflow:hidden;animation:slideDown 0.2s ease}@keyframes slideDown{from{opacity:0;transform:translateY(-0.25rem)}to{opacity:1;transform:translateY(0)}}.sidebar-item.level-0 .sidebar-item-content{padding-left:0.75rem}:host(.collapsed) .sidebar-item.level-0 .sidebar-item-content{padding-left:0.75rem}.sidebar-item.level-1 .sidebar-item-content{padding-left:2rem}.sidebar-item.level-2 .sidebar-item-content{padding-left:3.25rem}.sidebar-item.level-3 .sidebar-item-content{padding-left:4.5rem}.sidebar-item.level-4 .sidebar-item-content{padding-left:5.75rem}.sidebar-item.level-5 .sidebar-item-content{padding-left:7rem}:host(.theme-default) .sidebar-item-content{border-radius:0.375rem;margin:0 0.5rem;padding:0.5rem 0.75rem}:host(.theme-default.collapsed) .sidebar-item-content{margin:0 0.5rem;border-radius:0.375rem}:host(.theme-default) .sidebar-item-content:hover{background-color:rgba(0, 0, 0, 0.04)}:host(.theme-default) .sidebar-item.active>.sidebar-item-content{background-color:transparent}:host(.theme-default) .sidebar-item.active>.sidebar-item-content .sidebar-link{font-weight:600}:host(.theme-default) .sidebar-item.level-0 .sidebar-item-content{padding-left:0.75rem}:host(.theme-default) .sidebar-item.level-1 .sidebar-item-content{padding-left:2rem}:host(.theme-default) .sidebar-item.level-2 .sidebar-item-content{padding-left:3.25rem}:host(.theme-default) .sidebar-item.level-3 .sidebar-item-content{padding-left:4.5rem}:host(.theme-default) .sidebar-item.level-4 .sidebar-item-content{padding-left:5.75rem}:host(.theme-minimal) .sidebar-item-content{border-radius:0;margin:0;padding-left:1rem;padding-right:1rem}:host(.theme-minimal.collapsed) .sidebar-item-content{margin:0 0.25rem;border-radius:0.375rem}:host(.theme-minimal) .sidebar-item-content:hover{background-color:rgba(0, 255, 157, 0.05);color:var(--brand-black, #07140D)}:host(.theme-minimal) .sidebar-item.active>.sidebar-item-content{background-color:rgba(0, 255, 157, 0.1);border-left:3px solid var(--brand-green-dark, #00C87B);padding-left:calc(1rem - 3px);color:var(--brand-black, #07140D);font-weight:500}:host(.theme-minimal.collapsed) .sidebar-item.active>.sidebar-item-content{border-left:none;border-radius:0.375rem;padding-left:0.75rem;background-color:rgba(0, 255, 157, 0.1);color:var(--brand-black, #07140D)}:host(.theme-minimal) .sidebar-item.level-1.active>.sidebar-item-content{padding-left:calc(2rem - 3px)}:host(.theme-minimal) .sidebar-item.level-2.active>.sidebar-item-content{padding-left:calc(3.25rem - 3px)}:host(.theme-minimal) .sidebar-item.level-3.active>.sidebar-item-content{padding-left:calc(4.5rem - 3px)}:host(.theme-minimal) .sidebar-item.level-4.active>.sidebar-item-content{padding-left:calc(5.75rem - 3px)}:host(.theme-minimal) .sidebar-item.level-0 .sidebar-item-content{padding-left:1rem}:host(.theme-minimal) .sidebar-item.level-1 .sidebar-item-content{padding-left:2rem}:host(.theme-minimal) .sidebar-item.level-2 .sidebar-item-content{padding-left:3.25rem}:host(.theme-minimal) .sidebar-item.level-3 .sidebar-item-content{padding-left:4.5rem}:host(.theme-minimal) .sidebar-item.level-4 .sidebar-item-content{padding-left:5.75rem}:host(.theme-minimal) .sidebar-children{position:relative}:host(.theme-ebrains) .sidebar-item-content{padding:0.5rem 1rem;border-radius:0.5rem;margin:0 0.5rem}:host(.theme-ebrains.collapsed) .sidebar-item-content{padding:0.75rem}:host(.theme-ebrains) .sidebar-item-content:hover{background-color:rgba(0, 0, 0, 0.05)}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content{background-color:var(--brand-green-dark, #22c55e);color:white}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content .sidebar-link{--eds-link-color:white;--eds-link-hover-color:white}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content .sidebar-toggle{color:white}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content .sidebar-icon{color:white}:host(.theme-ebrains) .sidebar-item.level-0 .sidebar-item-content{padding-left:1rem}:host(.theme-ebrains) .sidebar-item.level-1 .sidebar-item-content{padding-left:2.25rem}:host(.theme-ebrains) .sidebar-item.level-2 .sidebar-item-content{padding-left:3.5rem}:host(.theme-ebrains) .sidebar-item.level-3 .sidebar-item-content{padding-left:4.75rem}:host(.theme-ebrains) .sidebar-item.level-4 .sidebar-item-content{padding-left:6rem}@media (prefers-color-scheme: dark){.collapse-toggle:hover{background-color:rgba(255, 255, 255, 0.08)}:host(.theme-default) .sidebar-item-content:hover{background-color:rgba(255, 255, 255, 0.05)}:host(.theme-default) .sidebar-item.active>.sidebar-item-content{background-color:rgba(0, 102, 204, 0.15)}:host(.theme-minimal) .sidebar-item-content:hover{background-color:rgba(255, 255, 255, 0.06)}:host::-webkit-scrollbar-thumb{background:rgba(255, 255, 255, 0.2)}:host::-webkit-scrollbar-thumb:hover{background:rgba(255, 255, 255, 0.3)}}.sidebar-toggle eds-icon-wrapper,.sidebar-icon eds-icon-wrapper,.collapse-toggle eds-icon-wrapper{transition:transform 0.15s ease;display:flex;align-items:center;justify-content:center}.sidebar-item-content:focus-visible .sidebar-link{text-decoration:underline}.sidebar-item.active>.sidebar-item-content .sidebar-link{font-weight:500}:host(.collapsed) .sidebar-item-content::after{content:attr(title);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:0.5rem;padding:0.5rem 0.75rem;background:rgba(0, 0, 0, 0.9);color:white;border-radius:0.375rem;white-space:nowrap;font-size:0.875rem;opacity:0;pointer-events:none;transition:opacity 0.2s ease;z-index:1000}:host(.collapsed) .sidebar-item-content:hover::after{opacity:1;transition-delay:0.3s}.-ml-4{margin-left:-0.25rem}.mt-2{margin-top:0.125rem}";
 const EdsSidebarStyle0 = edsSidebarCss;
 
 const EdsSidebar$1 = /*@__PURE__*/ proxyCustomElement(class EdsSidebar extends HTMLElement {
@@ -152,13 +152,13 @@ const EdsSidebar$1 = /*@__PURE__*/ proxyCustomElement(class EdsSidebar extends H
                     e.preventDefault();
                     this.handleItemClick(item, e);
                 }
-            } }, hasChildren && (h("span", { class: "sidebar-toggle mt-2 -ml-4", "aria-hidden": "true" }, h("eds-icon-wrapper", { icon: 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))))));
+            } }, 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: '4334d20e5d72671243633253910ab05b4da013da', class: {
+        return (h(Host, { key: 'f5221c19e8148ca62a76fb470a4aa6786c3e41b5', class: {
                 'eds-sidebar': true,
                 [`theme-${this.theme}`]: true
-            } }, h("nav", { key: '319f6f42416d4229f1b011bf1216b39c8627302d', class: "sidebar-nav", "aria-label": "Sidebar" }, h("ul", { key: '687ceae3eca3e844e8f6a361db4a76d127d27813', 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

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { d as defineCustomElement$2 } from './eds-icon-wrapper2.js';
 import { d as defineCustomElement$1 } from './eds-link2.js';
 
-const edsSocialNetworksCss = "blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.mt-12{margin-top:0.75rem}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.gap-4{gap:0.25rem}.effect-color{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.effect-focus{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.hover\\:text-default:hover{color:var(--black)}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.rounded-sm{border-radius:8px}";
+const edsSocialNetworksCss = "blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.mt-12{margin-top:0.75rem}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.gap-4{gap:0.25rem}.effect-color{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.effect-focus{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-inverse{color:var(--white)}.hover\\:text-default:hover{color:var(--black)}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.rounded-sm{border-radius:8px}";
 const EdsSocialNetworksStyle0 = edsSocialNetworksCss;
 
 const EdsSocialNetworks = /*@__PURE__*/ proxyCustomElement(class EdsSocialNetworks extends HTMLElement {
@@ -50,17 +50,22 @@ const EdsSocialNetworks = /*@__PURE__*/ proxyCustomElement(class EdsSocialNetwor
             }
         ];
         this.heading = 'Follow EBRAINS to keep up-to-date';
+        this.variant = 'default';
     }
     /**
      * Renders the component's HTML structure with links to EBRAINS social profiles.
      * Each social network link uses the `eds-link` component with specific classes and styles.
      */
     render() {
-        return (h("nav", { key: 'a18759794a383be1ce670ff3ac9f251b3c7327a5', "aria-label": "Social media" }, h("p", { key: '404fbffecd29c6efdfc8ade90f0da9d68e6c7b8e', class: "f-ui-02" }, this.heading), h("ul", { key: '959079149753b1c13e974dd610e3109e1f54c6f6', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm", external: true, "aria-label": `EBRAINS on ${network.label}`, url: network.url, icon: network.icon, intent: "strong" })))))));
+        const isInverse = this.variant === 'inverse';
+        const textClass = isInverse ? 'text-inverse' : '';
+        const linkIntent = isInverse ? 'inverse' : 'strong';
+        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", {
-        "heading": [1, "title"]
+        "heading": [1, "title"],
+        "variant": [1]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/eds-spinner2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const edsSpinnerCss = ":host{display:block}.spinner{box-sizing:border-box;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.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)}";
+const edsSpinnerCss = ":host{display:block}.spinner{box-sizing:border-box;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}";
 const EdsSpinnerStyle0 = edsSpinnerCss;
 
 const EdsSpinner = /*@__PURE__*/ proxyCustomElement(class EdsSpinner extends HTMLElement {
@@ -11,7 +11,7 @@ const EdsSpinner = /*@__PURE__*/ proxyCustomElement(class EdsSpinner extends HTM
         this.size = 'md';
         this.variant = 'secondary';
         this.message = undefined;
-        this.background = 'var(--grey-200)';
+        this.background = 'var(--grey-light)';
         this.fullscreen = false;
     }
     get spinnerSize() {
@@ -46,8 +46,8 @@ const EdsSpinner = /*@__PURE__*/ proxyCustomElement(class EdsSpinner extends HTM
     }
     render() {
         // derive colors from variant
-        const borderColor = this.variant === 'primary' ? 'var(--grey-900)' : 'var(--grey-400)';
-        const bottomColor = this.variant === 'primary' ? 'var(--green-400)' : 'var(--grey-900)';
+        const borderColor = this.variant === 'primary' ? 'var(--brand-black)' : 'var(--grey-dark)';
+        const bottomColor = this.variant === 'primary' ? 'var(--brand-green)' : 'var(--brand-black)';
         const spinnerStyle = Object.assign({ width: this.spinnerSize, height: this.spinnerSize, border: `${this.spinnerThickness} solid ${borderColor}`, borderBottomColor: bottomColor }, (!this.fullscreen && { display: 'inline-block' }));
         // Overlay style: use fixed positioning for fullscreen,
         // and absolute positioning for inline mode.
@@ -78,7 +78,7 @@ const EdsSpinner = /*@__PURE__*/ proxyCustomElement(class EdsSpinner extends HTM
                 alignItems: 'center',
                 justifyContent: 'center'
             };
-        return (h(Host, { key: '28271d7eced2bc3d69538aa490d623167affd590' }, h("div", { key: '2a8987cb80c67a42f18ac0db8c0078a90d9fd97a', class: "spinner-overlay", style: overlayStyle }, h("span", { key: 'c6267576391c24c41ceb0141dd897f590033b26f', class: "spinner", style: spinnerStyle }), this.message && h("p", { key: 'ae67369899652f6ecc9c9411fd62a68a437553c5', class: "f-body-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-splash-screen2.js

@@ -1,8 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './eds-logo2.js';
-import { d as defineCustomElement$1 } from './eds-spinner2.js';
+import { d as defineCustomElement$1 } from './eds-logo2.js';
 
-const edsSplashScreenCss = ".splash-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999999;background-color:var(--grey-200);display:flex;flex-direction:column;align-items:center;justify-content:center}.logo-container{width:200px;height:200px;margin-bottom:1rem}.content-container{position:relative;width:5rem;height:5rem;display:flex;align-items:center;justify-content:center}";
+const edsSplashScreenCss = ".splash-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999999;background-color:var(--grey-200);display:flex;flex-direction:column;align-items:center;justify-content:center}.logo-container{width:300px;height:60px;animation:loading-pulse 1.5s ease-in-out infinite}@keyframes loading-pulse{0%,100%{opacity:1}50%{opacity:0.6}}";
 const EdsSplashScreenStyle0 = edsSplashScreenCss;
 
 const EdsSplashScreen = /*@__PURE__*/ proxyCustomElement(class EdsSplashScreen extends HTMLElement {
@@ -49,7 +48,7 @@ const EdsSplashScreen = /*@__PURE__*/ proxyCustomElement(class EdsSplashScreen e
         if (!this.isVisible) {
             return null;
         }
-        return (h(Host, null, h("div", { class: "splash-overlay", style: { background: this.inverse ? 'black' : 'var(--grey-200)' } }, h("div", { class: "logo-container" }, this.inverse ? (h("eds-logo", { orientation: "vertical", type: "color-white" })) : (h("eds-logo", { orientation: "vertical", type: "color" }))), h("div", { class: "content-container" }, h("eds-spinner", { size: "xs", background: "none", fullscreen: false })))));
+        return (h(Host, null, h("div", { class: "splash-overlay", style: { background: this.inverse ? 'var(--brand-black)' : 'var(--grey-light)' } }, h("div", { class: "logo-container" }, this.inverse ? h("eds-logo", { variant: "negative" }) : h("eds-logo", { variant: "positive" })))));
     }
     static get watchers() { return {
         "initPromise": ["watchInitPromise"]
@@ -66,7 +65,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["eds-splash-screen", "eds-logo", "eds-spinner"];
+    const components = ["eds-splash-screen", "eds-logo"];
     components.forEach(tagName => { switch (tagName) {
         case "eds-splash-screen":
             if (!customElements.get(tagName)) {
@@ -74,11 +73,6 @@ function defineCustomElement() {
             }
             break;
         case "eds-logo":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "eds-spinner":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }