@ebrains/components 2.4.1 → 3.1.0

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

@@ -20,6 +20,150 @@ menu {
   width: 100%;
 }
 
+/* ------------------------------------------------------------------
+ * Search pill — three theme variants (matches EBRAINS header mockup):
+ *   - .search-pill--gray  (default): grey surface (mockup)
+ *   - .search-pill--white         : white surface w/ grey border
+ *   - .search-pill--black         : brand-black surface, white text
+ * Common geometry: rounded-full, icon left, input middle, ⌘K kbd right.
+ * The kbd hint is hidden when the input has focus, so it never overlaps
+ * what the user is typing.
+ * ------------------------------------------------------------------ */
+.search-pill {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 48px;            /* was 38 — roomier for the bigger text and icons */
+  padding: 0 18px;         /* was 14 */
+  border-radius: 999px;
+  font-family: var(--plex-sans, 'IBM Plex Sans', system-ui, sans-serif);
+  font-size: 15px;         /* was 13 — placeholder + text now read more clearly */
+  cursor: text;
+  transition: background 120ms ease, box-shadow 120ms ease, color 120ms ease;
+}
+
+.search-pill .search-icon { flex-shrink: 0; }
+
+.search-pill .search-input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  background: transparent;
+  outline: none;
+  font: inherit;            /* inherits the new 15px from .search-pill */
+  color: inherit;
+  /* Remove the native clear-button in Safari/Chrome so our custom one is
+   * the only one shown, and the layout stays steady on focus. */
+  -webkit-appearance: none;
+  appearance: none;
+}
+.search-pill .search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
+
+.search-pill .search-kbd {
+  flex-shrink: 0;
+  /* Explicit mono stack (don't rely on a project CSS var that may not be
+   * defined in the consuming app's CSS) + medium weight so the glyph reads
+   * as an embossed key-cap rather than plain text. */
+  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1;
+  padding: 3px 6px;
+  border-radius: 4px;
+  /* The slight `inset` shadow gives the cap a tiny "lift" without needing
+   * a second box-shadow layer — matches the Linear/Cal.com kbd style. */
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.05);
+  letter-spacing: 0.02em;
+}
+
+.search-pill:focus-within .search-kbd { display: none; }
+
+/* ---- Clear (X) button — shown only while the query is non-empty.
+ * Sits in the same slot the kbd hint occupies when empty, so the pill's
+ * right-edge geometry doesn't jump when the user starts typing. */
+.search-pill .search-clear {
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 120ms ease, background 120ms ease;
+}
+.search-pill .search-clear:hover { opacity: 1; background: rgba(0, 0, 0, 0.06); }
+.search-pill .search-clear:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--brand-green, #00C87B);
+  opacity: 1;
+}
+/* On the dark/black variant the subtle hover wash needs to be light, not dark. */
+.search-pill--black .search-clear:hover { background: rgba(255, 255, 255, 0.10); }
+
+/* --- Variant: gray (default — EBRAINS header mockup) --- */
+.search-pill--gray {
+  background: var(--grey-light, #ECECEC);
+  color: var(--grey-dark, #7A7B7A);
+  border: 0;
+}
+.search-pill--gray:hover { background: #E0E0E0; }
+.search-pill--gray .search-input { color: var(--brand-black, #07140D); }
+.search-pill--gray .search-input::placeholder { color: var(--grey-dark, #7A7B7A); }
+.search-pill--gray .search-kbd {
+  color: var(--grey-dark, #7A7B7A);
+  background: var(--white, #FFFFFF);
+  border: 1px solid #DCDCDC;
+}
+.search-pill--gray:focus-within {
+  background: var(--white, #FFFFFF);
+  box-shadow: 0 0 0 2px var(--brand-green, #00C87B);
+}
+
+/* --- Variant: white --- */
+.search-pill--white {
+  background: var(--white, #FFFFFF);
+  color: var(--grey-dark, #7A7B7A);
+  border: 1px solid var(--grey-light, #ECECEC);
+}
+.search-pill--white:hover { background: #FAFAFA; }
+.search-pill--white .search-input { color: var(--brand-black, #07140D); }
+.search-pill--white .search-input::placeholder { color: var(--grey-dark, #7A7B7A); }
+.search-pill--white .search-kbd {
+  color: var(--grey-dark, #7A7B7A);
+  background: var(--grey-light, #ECECEC);
+  border: 1px solid #DCDCDC;
+}
+.search-pill--white:focus-within {
+  background: var(--white, #FFFFFF);
+  box-shadow: 0 0 0 2px var(--brand-green, #00C87B);
+}
+
+/* --- Variant: black (use on dark backgrounds) --- */
+.search-pill--black {
+  background: var(--brand-black, #07140D);
+  color: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+}
+.search-pill--black:hover { background: #11221A; }
+.search-pill--black .search-input { color: var(--white, #FFFFFF); }
+.search-pill--black .search-input::placeholder { color: rgba(255, 255, 255, 0.55); }
+.search-pill--black .search-kbd {
+  color: rgba(255, 255, 255, 0.75);
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
+.search-pill--black:focus-within {
+  background: var(--brand-black, #07140D);
+  box-shadow: 0 0 0 2px var(--brand-green, #00C87B);
+}
+
 .search-dropdown {
   position: absolute;
   top: calc(100% + 8px);
@@ -27,13 +171,17 @@ menu {
   right: 0;
   background: white;
   border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
+  border-radius: 12px;
+  box-shadow:
+    0 8px 24px rgba(0, 0, 0, 0.12),
+    0 2px 8px rgba(0, 0, 0, 0.08),
+    0 0 0 1px rgba(0, 255, 157, 0.08);
   max-height: 500px;
   overflow: hidden;
   z-index: 9999;
   display: flex;
   flex-direction: column;
+  animation: dropdownFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 /* States */
@@ -57,10 +205,11 @@ menu {
 }
 
 .result-item {
-  padding: 10px 14px;
+  padding: 7px 7px;
   cursor: pointer;
-  transition: background-color 0.15s ease;
-  border-left: 3px solid transparent;
+  border-left: 4px solid transparent;
+  margin-bottom: 2px;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
   overflow: hidden;
   word-wrap: break-word;
   word-break: break-word;
@@ -68,73 +217,165 @@ menu {
 
 .result-item:hover,
 .result-item--selected {
-  background-color: var(--grey-200);
+  background: linear-gradient(
+    90deg,
+    rgba(0, 255, 157, 0.08) 0%,
+    rgba(0, 255, 157, 0.03) 100%
+  );
   border-left-color: var(--green-600);
+  box-shadow: 0 2px 8px rgba(0, 255, 157, 0.15);
+}
+
+.result-item:hover .result-title,
+.result-item--selected .result-title {
+  color: var(--green-700);
+}
+
+.result-title {
+  color: var(--black);
+  transition: color 0.2s ease;
 }
 
 .result-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  margin-bottom: 6px;
+}
+
+.result-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 6px;
+}
+
+.result-badge {
+  display: inline-block;
+  padding: 3px 8px;
+  background: rgba(0, 255, 157, 0.12);
+  color: var(--green-800);
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  transition: all 0.2s ease;
+}
+
+.result-badge--parent {
+  background: rgba(120, 0, 255, 0.08);
+  color: var(--purple-800, #6b21a8);
+}
+
+.result-badge--lr {
+  background: rgba(0, 120, 255, 0.1);
+  color: var(--blue-800, #1565c0);
+}
+
+.result-item:hover .result-badge,
+.result-item--selected .result-badge {
+  background: rgba(0, 255, 157, 0.2);
+  color: var(--green-900);
+}
+
+.result-item:hover .result-badge--parent,
+.result-item--selected .result-badge--parent {
+  background: rgba(120, 0, 255, 0.15);
+  color: var(--purple-900, #581c87);
+}
+
+.result-item:hover .result-badge--lr,
+.result-item--selected .result-badge--lr {
+  background: rgba(0, 120, 255, 0.18);
+  color: var(--blue-900, #0d47a1);
+}
+
+.result-url {
+  font-size: 12px;
+  color: var(--grey-600);
+}
+
+.external-icon {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  margin-left: 4px;
+  color: var(--green-600);
 }
 
 .result-snippet {
   font-size: 13px;
   color: #616161;
-  line-height: 1.4;
+  line-height: 1.5;
   margin: 0;
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
+  transition: color 0.2s ease;
+}
+
+.result-item:hover .result-snippet,
+.result-item--selected .result-snippet {
+  color: #424242;
 }
 
 /* Footer */
 .dropdown-footer {
-  border-top: 1px solid #e0e0e0;
-  padding: 8px 16px;
-  background: #fafafa;
+  border-top: 1px solid rgba(0, 255, 157, 0.15);
+  padding: 10px 16px;
+  background: linear-gradient(
+    180deg,
+    rgba(0, 255, 157, 0.02) 0%,
+    rgba(0, 255, 157, 0.05) 100%
+  );
   flex-shrink: 0;
 }
 
 .footer-hint {
   font-size: 11px;
-  color: #757575;
+  color: #616161;
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 6px;
   flex-wrap: wrap;
 }
 
 kbd {
   display: inline-block;
-  padding: 2px 5px;
-  font-size: 10px;
+  padding: 3px 7px;
+  font-size: 11px;
   font-family: monospace;
-  line-height: 1;
-  color: #424242;
-  background-color: #f5f5f5;
-  border: 1px solid #bdbdbd;
-  border-radius: 3px;
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+  line-height: 1.2;
+  font-weight: 500;
+  color: var(--green-700);
+  background: rgba(0, 255, 157, 0.1);
+  border: 1px solid rgba(0, 200, 123, 0.3);
+  border-radius: 4px;
+  box-shadow:
+    0 2px 0 rgba(0, 255, 157, 0.15),
+    inset 0 1px 0 rgba(255, 255, 255, 0.5);
 }
 
-/* Scrollbar */
+/* Scrollbar - Green themed */
 .dropdown-results::-webkit-scrollbar {
   width: 8px;
 }
 
 .dropdown-results::-webkit-scrollbar-track {
-  background: #f5f5f5;
+  background: rgba(0, 255, 157, 0.05);
+  border-radius: 4px;
 }
 
 .dropdown-results::-webkit-scrollbar-thumb {
-  background: #bdbdbd;
+  background: #33FFB8;
   border-radius: 4px;
 }
 
 .dropdown-results::-webkit-scrollbar-thumb:hover {
-  background: #9e9e9e;
+  background: #00FF9D;
 }
 
 .flex {

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

@@ -2,6 +2,23 @@ import { h } from "@stencil/core";
 import { sendAnalytics } from "../../utils/analytics";
 export class EdsGlobalSearch {
     constructor() {
+        /** Clear the current query and results; keep focus in the input so the
+         *  user can start typing again without an extra click. */
+        this.handleClear = () => {
+            if (this.debounceTimer) {
+                clearTimeout(this.debounceTimer);
+            }
+            this.query = '';
+            this.results = [];
+            this.hasSearched = false;
+            this.showDropdown = false;
+            this.selectedIndex = -1;
+            // Re-focus and reflect the empty value on the underlying DOM input.
+            if (this.inputRef) {
+                this.inputRef.value = '';
+                this.inputRef.focus();
+            }
+        };
         this.handleInput = (event) => {
             var _a;
             const target = event.target;
@@ -30,6 +47,11 @@ export class EdsGlobalSearch {
         this.placeholder = 'Search Handbook + Design...';
         this.limit = 20;
         this.debounceDelay = 300;
+        this.forceNewTab = false;
+        this.currentOrigin = '';
+        this.currentSource = '';
+        this.authToken = '';
+        this.variant = 'gray';
         this.query = '';
         this.results = [];
         this.loading = false;
@@ -39,15 +61,26 @@ export class EdsGlobalSearch {
         this.selectedIndex = -1;
     }
     componentDidLoad() {
-        // Focus input if needed
-        if (this.inputRef) {
-            this.inputRef.focus();
-        }
+        // ⌘K / Ctrl+K focuses the search pill from anywhere on the page.
+        // Bound here (not via @Listen) so it works across shadow boundaries.
+        this.cmdKListener = (event) => {
+            var _a;
+            const isMac = navigator.platform.toUpperCase().includes('MAC');
+            const modifier = isMac ? event.metaKey : event.ctrlKey;
+            if (modifier && event.key.toLowerCase() === 'k') {
+                event.preventDefault();
+                (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        };
+        document.addEventListener('keydown', this.cmdKListener);
     }
     disconnectedCallback() {
         if (this.debounceTimer) {
             clearTimeout(this.debounceTimer);
         }
+        if (this.cmdKListener) {
+            document.removeEventListener('keydown', this.cmdKListener);
+        }
     }
     handleDocumentClick(event) {
         const path = event.composedPath();
@@ -99,7 +132,12 @@ export class EdsGlobalSearch {
         this.loading = true;
         this.error = '';
         try {
-            const response = await fetch(`${this.apiEndpoint}?q=${encodeURIComponent(query)}&limit=${this.limit}`);
+            // Build headers with optional authorization
+            const headers = {};
+            if (this.authToken) {
+                headers['Authorization'] = `Bearer ${this.authToken}`;
+            }
+            const response = await fetch(`${this.apiEndpoint}?q=${encodeURIComponent(query)}&limit=${this.limit}`, { headers });
             if (!response.ok) {
                 throw new Error('Search failed');
             }
@@ -126,10 +164,48 @@ export class EdsGlobalSearch {
             category: 'shared-ui',
             parentContext: null,
             tag: this.el.tagName.toLowerCase(),
-            name: `search-select: ${result.url}` || 'unknow search result selection',
+            name: `search-select: ${result.url}` || 'unknown search result selection',
             action: 'click'
         });
-        window.open(result.url, '_blank', 'noopener,noreferrer');
+        // Determine if link is external
+        let isExternal = false;
+        let navigateUrl = result.url;
+        try {
+            const resultUrl = new URL(result.url, window.location.href);
+            // If currentSource is set and matches result source, treat as internal
+            if (this.currentSource && result.source === this.currentSource) {
+                // Extract relative path from the URL
+                navigateUrl = resultUrl.pathname + resultUrl.search + resultUrl.hash;
+                isExternal = false;
+            }
+            else {
+                // Different source - check actual origin
+                const currentOrigin = this.currentOrigin || window.location.origin;
+                isExternal = resultUrl.origin !== currentOrigin;
+            }
+            /*console.log('[eds-global-search] Navigation check:', {
+              resultUrl: result.url,
+              resultSource: result.source,
+              currentSource: this.currentSource,
+              isMatchingSource: result.source === this.currentSource,
+              isExternal: isExternal,
+              navigateUrl: navigateUrl,
+              forceNewTab: this.forceNewTab
+            });*/
+        }
+        catch (e) {
+            console.error('[eds-global-search] URL parsing error:', e);
+            isExternal = false;
+        }
+        // Open in new tab if: forced OR external link
+        if (this.forceNewTab || isExternal) {
+            //console.log('[eds-global-search] Opening in new tab');
+            window.open(result.url, '_blank', 'noopener,noreferrer');
+        }
+        else {
+            //console.log('[eds-global-search] Navigating in same tab to:', navigateUrl);
+            window.location.href = navigateUrl;
+        }
     }
     scrollToSelected() {
         if (this.selectedIndex >= 0 && this.dropdownRef) {
@@ -151,10 +227,19 @@ export class EdsGlobalSearch {
         return this.hasSearched && !this.loading && !this.hasResults && this.query.trim();
     }
     render() {
-        return (h("div", { key: '03beb0a36e20ff5e0c1213584361c9b85ef52684', class: "search-wrapper" }, h("eds-input-field", { key: 'cefbfcc4c32067fc57f4425fde7e646b2ca36bc6', 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: '60a8f38d2eb06335f97f232a7e810f22ccf379b3', class: "search-dropdown", ref: (el) => (this.dropdownRef = el) }, this.loading && (h("div", { key: '2e8dcab16d8fef0f0ec07bcb78fd568f91156095', class: "flex text-center justify-center p-64" }, h("eds-spinner", { key: 'f512b3508fe5ba35a762346f43fa780a9b0c5c11', variant: "primary", size: "sm" }))), this.error && !this.loading && (h("div", { key: '549a6ec4f84c10d5bb4449cb7aa9a4dc61a4ff05', class: "flex text-center justify-center p-16" }, h("span", { key: '2de6645b976ed3d7958867447c090639b3b613a6', class: "text-error f-body-02" }, this.error))), this.showEmpty && (h("div", { key: '1006b88e3508a51898f305e1a221762f9cbc0204', class: "dropdown-state" }, h("eds-icon-wrapper", { key: 'bc635e10a72aaf715747f8c512ebc3d18d0657c5', icon: "search" }), h("div", { key: 'd267ee5c228ae85031088faf7b44b99bacbb77f4' }, h("p", { key: '526094eab25fcb55d5e5a1529c165a39e80db386', class: "f-body-02" }, "No results found"), h("p", { key: '770ff6f735b09068bcb26eec2552c6e7081348ba', class: "f-ui-04 text-lightest" }, "Try different keywords")))), this.hasResults && !this.loading && (h("ul", { key: '75597ab0dc1c11854e366294a12a9bd448f53877', class: "dropdown-results" }, this.results.map((result, index) => (h("li", { key: result.id, "data-index": index, class: {
+        return (h("div", { key: '841c9a013a1c4cee9697f3465759bf638b28475e', class: "search-wrapper" }, h("label", { key: 'ff1b37fff6e94019d2da63060aba77d82ee1bafb', class: `search-pill search-pill--${this.variant}`, htmlFor: "search-global" }, h("svg", { key: '150aff8a31a68195e7b333b9bcfccbc3affb3901', class: "search-icon", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("circle", { key: 'cb424f39cd5f6316056dbcc6b80d11ce8ade1410', cx: "11", cy: "11", r: "7" }), h("line", { key: '004bce39d3a9ee7a53ef0e942cf986e38b76b921', x1: "20", y1: "20", x2: "16.5", y2: "16.5" })), h("input", { key: '97f4c012d7152f29fac9723ced4f06207b8a2453', id: "search-global", class: "search-input", type: "search", name: "search-box-global", placeholder: this.placeholder, value: this.query, autoComplete: "off", onInput: this.handleInput, ref: (el) => (this.inputRef = el) }), this.query && this.query.length > 0 ? (h("button", { type: "button", class: "search-clear", "aria-label": "Clear search", onMouseDown: (e) => e.preventDefault() /* keep focus in input */, onClick: () => this.handleClear() }, h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2.2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })))) : (h("kbd", { class: "search-kbd", "aria-hidden": "true" }, "\u2318K"))), this.showDropdown && (h("div", { key: '3354848b17ba065a64919defd74de0616a29c25c', class: "search-dropdown", ref: (el) => (this.dropdownRef = el) }, this.loading && (h("div", { key: '5c5f731e969f60c8c3d2ce21683fec35302a2954', class: "flex text-center justify-center p-64" }, h("eds-spinner", { key: '6d0b5223f03bb0ed2f83f2ab3c77cf4e116d87e7', variant: "primary", size: "sm" }))), this.error && !this.loading && (h("div", { key: '9cbca9b3f62c2969478e34a654a973196a5e9187', class: "flex text-center justify-center p-16" }, h("span", { key: 'ce2bd2f6c6b05fb5fdfec4da67460b72445970bc', class: "text-error f-body-02" }, this.error))), this.showEmpty && (h("div", { key: 'b7d446aa72732c9932c90bb5ef08a2f27c357ae4', class: "dropdown-state" }, h("eds-icon-wrapper", { key: 'ac5377b3efa4f26e10781f369843a69c3409ec83', name: "search" }), h("div", { key: '774784c1dbe4c6e6eda9e8d70833d0a2a6821b4f' }, h("p", { key: 'bbce9a267889eee40b54fd471f203b530de42a86', class: "f-body-02" }, "No results found"), h("p", { key: 'd440e4e0ff4f59ea14eef7aa5db0692c4a2352fa', class: "f-ui-04 text-lightest" }, "Try different keywords")))), this.hasResults && !this.loading && (h("ul", { key: 'b89e31f5931705e750f0f19fb159f93a05324e6d', 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: '4af4caf6e6856feaeb91218aa249950ac835e5d8', class: "dropdown-footer" }, h("span", { key: '4634ee9a9a15674cae0eee784b7ee408c7707874', class: "footer-hint" }, h("kbd", { key: 'ea0dd3cbb169f0db034fa3ee9019592d943398f6' }, "\u2191"), " ", h("kbd", { key: 'f1fc8937f965f695b402a78c82661e0ddee8126d' }, "\u2193"), " navigate \u2022 ", h("kbd", { key: '1d7de6abe02b46362c0e7d1998aaa9b78d1c1378' }, "\u21B5"), " select \u2022 ", h("kbd", { key: '50d7d6ab8176e654529fa7e977dc67eadff84c3d' }, "esc"), " close")))))));
+            }, onClick: () => this.selectResult(result), onMouseEnter: () => (this.selectedIndex = index) }, h("div", { class: "result-header" }, h("span", { class: "result-title f-body-02" }, result.title)), h("div", { class: "result-meta" }, result.parent_software ? ([
+            h("span", { class: "result-badge result-badge--parent" }, result.parent_software),
+            result.section && h("span", { class: "result-badge result-badge--lr" }, result.section)
+        ]) : result.source === 'kg-services' ? ([
+            h("span", { class: "result-badge" }, "EBRAINS KG"),
+            result.section && h("span", { class: "result-badge" }, result.section)
+        ]) : ([
+            h("span", { class: "result-badge" }, result.source),
+            result.section && h("span", { class: "result-badge" }, result.section)
+        ]), h("span", { class: "result-url" }, result.url)), result.snippet && h("p", { class: "result-snippet" }, this.stripHtml(result.snippet))))))), this.hasResults && !this.loading && (h("div", { key: 'fd07f17d78ba2d95c30d95b35d89151b27e3a957', class: "dropdown-footer" }, h("span", { key: '20a6bc436e135e29b89a94b150c505bab6281d6f', class: "footer-hint" }, h("kbd", { key: '08e43dd318b0dde7d67f74731055e2bbc00bdc78' }, "\u2191"), " ", h("kbd", { key: '676535d717d5fb4b98cbf09050883630dbecaf6e' }, "\u2193"), " navigate \u2022 ", h("kbd", { key: 'cd9ac17223ae195b0508c7ea37ad2a9459341b8b' }, "\u21B5"), " select \u2022 ", h("kbd", { key: 'dbaa3eacc337eee81404518e9bd4c9b9fbc44205' }, "esc"), " close")))))));
     }
     static get is() { return "eds-global-search"; }
     static get encapsulation() { return "shadow"; }
@@ -241,6 +326,96 @@ export class EdsGlobalSearch {
                 "attribute": "debounce-delay",
                 "reflect": false,
                 "defaultValue": "300"
+            },
+            "forceNewTab": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Force all results to open in new tab (useful when embedded in external sites)"
+                },
+                "attribute": "force-new-tab",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "currentOrigin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current site origin (auto-detected if not provided)"
+                },
+                "attribute": "current-origin",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "currentSource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current source identifier (e.g., 'handbook', 'design')\nResults matching this source will open in same tab"
+                },
+                "attribute": "current-source",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "authToken": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional authorization token (JWT) to include in requests\nWhen provided, will be sent as \"Bearer <token>\" in Authorization header"
+                },
+                "attribute": "auth-token",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'gray' | 'white' | 'black'",
+                    "resolved": "\"black\" | \"gray\" | \"white\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual theme of the search pill.\n- \"gray\"  (default): light grey surface (matches the EBRAINS header mockup)\n- \"white\": white surface with a 1px border (use when sitting on a coloured nav)\n- \"black\": brand-black surface with white text (use on dark backgrounds)"
+                },
+                "attribute": "variant",
+                "reflect": true,
+                "defaultValue": "'gray'"
             }
         };
     }