@ebrains/components 2.2.0 → 2.3.0

package/dist/collection/shared-ui/eds-global-search/eds-global-search.js

@@ -0,0 +1,309 @@
+import { h, } from "@stencil/core";
+import { sendAnalytics } from "../../utils/analytics";
+export class EdsGlobalSearch {
+    constructor() {
+        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")))))));
+    }
+    static get is() { return "eds-global-search"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-global-search.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-global-search.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "apiEndpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "API endpoint for search"
+                },
+                "attribute": "api-endpoint",
+                "reflect": false,
+                "defaultValue": "'/api/v1/global-search'"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text for the input"
+                },
+                "attribute": "placeholder",
+                "reflect": false,
+                "defaultValue": "'Search Handbook + Design...'"
+            },
+            "limit": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number of results to fetch"
+                },
+                "attribute": "limit",
+                "reflect": false,
+                "defaultValue": "20"
+            },
+            "debounceDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Debounce delay in milliseconds"
+                },
+                "attribute": "debounce-delay",
+                "reflect": false,
+                "defaultValue": "300"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "query": {},
+            "results": {},
+            "loading": {},
+            "error": {},
+            "hasSearched": {},
+            "showDropdown": {},
+            "selectedIndex": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "resultSelected",
+                "name": "resultSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a result is selected"
+                },
+                "complexType": {
+                    "original": "{\n    id: string;\n    title: string;\n    url: string;\n    section: string;\n    tags: string[];\n    date: string | null;\n    source: string;\n    snippet: string;\n    score: number | null;\n  }",
+                    "resolved": "{ id: string; title: string; url: string; section: string; tags: string[]; date: string; source: string; snippet: string; score: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "searchClosed",
+                "name": "searchClosed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when search is closed (for expandable mode)"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleDocumentClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/shared-ui/eds-global-search/eds-global-search.stories.js

@@ -0,0 +1,277 @@
+import { html } from "lit-html";
+export default {
+    title: 'Shared UI/Global Search',
+    component: 'eds-global-search',
+    argTypes: {
+        apiEndpoint: {
+            control: 'text',
+            description: 'API endpoint for search',
+            defaultValue: '/api/v1/global-search'
+        },
+        placeholder: {
+            control: 'text',
+            description: 'Placeholder text for the search input',
+            defaultValue: 'Search Handbook + Design...'
+        },
+        limit: {
+            control: 'number',
+            description: 'Maximum number of results to fetch',
+            defaultValue: 20
+        },
+        debounceDelay: {
+            control: 'number',
+            description: 'Debounce delay in milliseconds',
+            defaultValue: 300
+        }
+    }
+};
+const Template = (args) => html `
+  <div style="max-width: 600px; margin: 0 auto; padding: 20px;">
+    <eds-global-search
+      api-endpoint="${args.apiEndpoint}"
+      placeholder="${args.placeholder}"
+      limit="${args.limit}"
+      debounce-delay="${args.debounceDelay}"
+      @resultSelected="${(e) => console.log('Result selected:', e.detail)}"
+      @searchClosed="${() => console.log('Search closed')}"
+    ></eds-global-search>
+  </div>
+`;
+export const Default = Template.bind({});
+Default.args = {
+    apiEndpoint: '/api/v1/global-search',
+    placeholder: 'Search Handbook + Design...',
+    limit: 20,
+    debounceDelay: 300
+};
+const MockedTemplate = (args) => {
+    // Mock fetch for demonstration
+    if (typeof window !== 'undefined' && !window.__searchMocked) {
+        window.__searchMocked = true;
+        const originalFetch = window.fetch;
+        window.fetch = function (url, options) {
+            if (url.toString().includes('mock-api')) {
+                return Promise.resolve(new Response(JSON.stringify({
+                    items: [
+                        {
+                            id: '1',
+                            title: 'Getting Started Guide',
+                            url: 'https://example.com/docs/getting-started',
+                            section: 'Documentation',
+                            tags: ['guide', 'intro'],
+                            date: '2024-01-15',
+                            source: 'Handbook',
+                            snippet: 'Learn how to get started with our platform. This comprehensive guide covers installation, setup, and your first project.',
+                            score: 95
+                        },
+                        {
+                            id: '2',
+                            title: 'Design System Colors',
+                            url: 'https://example.com/design/colors',
+                            section: 'Design',
+                            tags: ['colors', 'palette'],
+                            date: '2024-02-10',
+                            source: 'Design System',
+                            snippet: 'Explore our color palette and learn how to apply colors consistently across your designs.',
+                            score: 88
+                        },
+                        {
+                            id: '3',
+                            title: 'Component Library',
+                            url: 'https://example.com/components',
+                            section: 'Components',
+                            tags: ['ui', 'library'],
+                            date: '2024-03-05',
+                            source: 'Handbook',
+                            snippet: 'Browse our collection of reusable UI components with examples and best practices.',
+                            score: 92
+                        },
+                        {
+                            id: '4',
+                            title: 'API Reference',
+                            url: 'https://example.com/api/reference',
+                            section: 'API',
+                            tags: ['api', 'reference'],
+                            date: '2024-01-20',
+                            source: 'Documentation',
+                            snippet: 'Complete API reference with endpoints, parameters, and response formats.',
+                            score: 90
+                        },
+                        {
+                            id: '5',
+                            title: 'Typography Guidelines',
+                            url: 'https://example.com/design/typography',
+                            section: 'Design',
+                            tags: ['fonts', 'text'],
+                            date: '2024-02-28',
+                            source: 'Design System',
+                            snippet: 'Typography scale, font families, and text styling guidelines for consistent designs.',
+                            score: 85
+                        }
+                    ]
+                }), {
+                    status: 200,
+                    statusText: 'OK',
+                    headers: { 'Content-Type': 'application/json' }
+                }));
+            }
+            return originalFetch(url, options);
+        };
+    }
+    return html `
+    <div style="max-width: 600px; margin: 0 auto; padding: 20px;">
+      <p style="margin-bottom: 16px; color: #666; font-size: 14px;">
+        <strong>Demo mode:</strong> Type anything in the search box to see mocked results.
+      </p>
+      <eds-global-search
+        api-endpoint="${args.apiEndpoint}"
+        placeholder="${args.placeholder}"
+        limit="${args.limit}"
+        debounce-delay="${args.debounceDelay}"
+        @resultSelected="${(e) => {
+        console.log('Result selected:', e.detail);
+        alert(`Selected: ${e.detail.title}`);
+    }}"
+        @searchClosed="${() => console.log('Search closed')}"
+      ></eds-global-search>
+    </div>
+  `;
+};
+export const WithMockedData = MockedTemplate.bind({});
+WithMockedData.args = {
+    apiEndpoint: '/mock-api/search',
+    placeholder: 'Try searching for anything...',
+    limit: 20,
+    debounceDelay: 300
+};
+WithMockedData.parameters = {
+    docs: {
+        description: {
+            story: 'Interactive demo with mocked search results. Type any query to see sample results.'
+        }
+    }
+};
+const ErrorTemplate = (args) => {
+    // Mock an API error
+    if (typeof window !== 'undefined' && !window.__searchErrorMocked) {
+        window.__searchErrorMocked = true;
+        const originalFetch = window.fetch;
+        window.fetch = function (url, options) {
+            if (url.toString().includes('error-api')) {
+                return Promise.resolve(new Response(JSON.stringify({ error: 'Internal Server Error' }), {
+                    status: 500,
+                    statusText: 'Internal Server Error',
+                    headers: { 'Content-Type': 'application/json' }
+                }));
+            }
+            return originalFetch(url, options);
+        };
+    }
+    return html `
+    <div style="max-width: 600px; margin: 0 auto; padding: 20px;">
+      <p style="margin-bottom: 16px; color: #666; font-size: 14px;">
+        <strong>Error state demo:</strong> Search will always fail to show error handling.
+      </p>
+      <eds-global-search
+        api-endpoint="${args.apiEndpoint}"
+        placeholder="${args.placeholder}"
+        limit="${args.limit}"
+        debounce-delay="${args.debounceDelay}"
+      ></eds-global-search>
+    </div>
+  `;
+};
+export const ErrorState = ErrorTemplate.bind({});
+ErrorState.args = {
+    apiEndpoint: '/error-api/search',
+    placeholder: 'Search to see error state...',
+    limit: 20,
+    debounceDelay: 300
+};
+ErrorState.parameters = {
+    docs: {
+        description: {
+            story: 'Demonstrates the error state when the API request fails.'
+        }
+    }
+};
+const KeyboardNavigationTemplate = (args) => {
+    // Mock data for keyboard navigation demo
+    if (typeof window !== 'undefined' && !window.__searchKeyboardMocked) {
+        window.__searchKeyboardMocked = true;
+        const originalFetch = window.fetch;
+        window.fetch = function (url, options) {
+            if (url.toString().includes('keyboard-api')) {
+                return Promise.resolve(new Response(JSON.stringify({
+                    items: [
+                        {
+                            id: '1',
+                            title: 'First Result',
+                            url: 'https://example.com/first',
+                            section: 'Section A',
+                            tags: [],
+                            date: null,
+                            source: 'Handbook',
+                            snippet: 'Use arrow keys to navigate between results.',
+                            score: 95
+                        },
+                        {
+                            id: '2',
+                            title: 'Second Result',
+                            url: 'https://example.com/second',
+                            section: 'Section B',
+                            tags: [],
+                            date: null,
+                            source: 'Handbook',
+                            snippet: 'Press Enter to select a highlighted result.',
+                            score: 90
+                        },
+                        {
+                            id: '3',
+                            title: 'Third Result',
+                            url: 'https://example.com/third',
+                            section: 'Section C',
+                            tags: [],
+                            date: null,
+                            source: 'Documentation',
+                            snippet: 'Press Escape to close the dropdown.',
+                            score: 85
+                        }
+                    ]
+                }), {
+                    status: 200,
+                    statusText: 'OK',
+                    headers: { 'Content-Type': 'application/json' }
+                }));
+            }
+            return originalFetch(url, options);
+        };
+    }
+    return html `
+    <div style="max-width: 600px; margin: 0 auto; padding: 20px;">
+      <p style="margin-bottom: 16px; color: #666; font-size: 14px;">
+        <strong>Keyboard navigation demo:</strong> Type to search, then use ↑↓ arrow keys to navigate, Enter to select, or Esc to close.
+      </p>
+      <eds-global-search
+        api-endpoint="${args.apiEndpoint}"
+        placeholder="${args.placeholder}"
+        limit="${args.limit}"
+        debounce-delay="${args.debounceDelay}"
+      ></eds-global-search>
+    </div>
+  `;
+};
+export const KeyboardNavigation = KeyboardNavigationTemplate.bind({});
+KeyboardNavigation.args = {
+    apiEndpoint: '/keyboard-api/search',
+    placeholder: 'Try keyboard navigation...',
+    limit: 20,
+    debounceDelay: 300
+};
+KeyboardNavigation.parameters = {
+    docs: {
+        description: {
+            story: 'Demonstrates keyboard navigation through search results. Use arrow keys to navigate, Enter to select, and Escape to close.'
+        }
+    }
+};

package/dist/collection/shared-ui/eds-header/eds-header.js

@@ -56,7 +56,7 @@ export class EdsHeader {
         const classes = variantClasses[this.headerVariant] || variantClasses.default;
         // Logo color variant: default and inverse use 'color', strong uses 'color-white'
         const logoType = this.headerVariant === 'strong' ? 'color-white' : 'color';
-        return (h("header", { key: 'a0f5bb7d9e850e9414db804019674d6bcbc8ea0b', class: `flex items-center justify-between relative z-10 ${classes}` }, h("div", { key: '678d5b1583e6fa47c0eac8ce734e8ec34cd76ad9', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: '12ce9c42b266bbddfd75d2a8f0097708480a2490', type: logoType, href: this.homeUrl })), this.parsedLinks && (h("nav", { key: 'eb388b679d4e268dc7fc011bc2a6406a619287c8', class: "absolute left-1/2 top-1/2 grow -translate-x-1/2 -translate-y-1/2 justify-center hidden md:flex" }, h("ul", { key: 'c3f8689bb257166c50dd678287c8ad4f54eb315a', class: "flex gap-x-2" }, this.parsedLinks.map((link) => (h("eds-link", { label: link.label, "aria-label": link.label, url: link.url, intent: "ghost", size: "large", icon: link.icon, external: link.external, "extra-class": "after:effect-opacity aria-current-page:bg-darker whitespace-nowrap !text-current after:!border-transparent after:opacity-0 hover:after:!border-transparent hover:after:opacity-100" })))))), h("slot", { key: '3f689a811a60052393a795937a908cf7d0604cc6' }), this.menuEnabled && (h("div", { key: '506b953b455b72085d83bdaafc6855992075ddbe', class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { key: '5b526affd813549a6142efab255d6486a5e2dd66', "aria-label": "Menu", intent: this.headerVariant === 'default' ? 'ghost' : 'ghostInverse', icon: "menu", size: "small", onClick: () => this.handleToggleMenu() })))));
+        return (h("header", { key: '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() })))));
     }
     static get is() { return "eds-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/shared-ui/eds-social-networks/eds-social-networks.js

@@ -51,7 +51,7 @@ export class EdsSocialNetworks {
      * Each social network link uses the `eds-link` component with specific classes and styles.
      */
     render() {
-        return (h("nav", { key: '62692c53f820ff5d6569e42af692063ad8918cdd', "aria-label": "Social media" }, h("p", { key: 'a571612ba3c1b669e0145484bec4d480b17c1979', class: "f-ui-02" }, this.heading), h("ul", { key: 'c0cc02cd5eebf16130f7b09fb8f11319695fdccb', 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" })))))));
+        return (h("nav", { key: '907adc08d4e02f34994a057146a60b734d6ab81b', "aria-label": "Social media" }, h("p", { key: 'a3620851f2e31d662a812ac74e831f023d2646a4', class: "f-ui-02" }, this.heading), h("ul", { key: 'b8fece03b5ed995a9dba78cf0445a4eb46787bdc', 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" })))))));
     }
     static get is() { return "eds-social-networks"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/shared-ui/eds-steps/eds-steps.css

@@ -134,4 +134,6 @@
 
 .cursor-pointer {
   cursor: pointer;
-}
+}
+
+.eds-steps__title { cursor: pointer; }