bpmn-js 18.23.0 → 18.24.0

package/dist/assets/diagram-js.css

@@ -72,6 +72,12 @@
   --popup-search-border-color: var(--color-grey-225-10-75);
   --popup-search-focus-border-color: var(--color-blue-205-100-50);
   --popup-search-focus-background-color: var(--color-blue-205-100-95);
+  --popup-tab-color: var(--color-grey-225-10-55);
+  --popup-tab-hover-color: var(--color-grey-225-10-15);
+  --popup-tab-active-color: var(--color-grey-225-10-15);
+  --popup-tab-active-border-color: var(--color-blue-205-100-50);
+  --popup-tab-strip-border-color: var(--color-grey-225-10-90);
+  --popup-tab-focus-border-color: var(--color-blue-205-100-50);
 
   --resizer-fill-color: var(--color-blue-205-100-45);
   --resizer-stroke-color: var(--canvas-fill-color);
@@ -615,6 +621,97 @@
   margin: 10px 12px;
 }
 
+.djs-popup-tabs-container {
+  position: relative;
+  border-bottom: solid 1px var(--popup-tab-strip-border-color);
+}
+
+/**
+ * The scroll control doubles as the edge fade: tabs scrolled past it fade out
+ * rather than being cut off behind an opaque block.
+ */
+.djs-popup-tabs-scroll {
+  appearance: none;
+  position: absolute;
+  top: 0;
+  bottom: 1px;
+  width: 28px;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  color: var(--popup-tab-color);
+  cursor: pointer;
+}
+
+.djs-popup-tabs-scroll:hover {
+  color: var(--popup-tab-hover-color);
+}
+
+.djs-popup-tabs-scroll-start {
+  left: 0;
+  justify-content: flex-start;
+  background: linear-gradient(to left, transparent, var(--popup-background-color) 60%);
+}
+
+.djs-popup-tabs-scroll-end {
+  right: 0;
+  justify-content: flex-end;
+  background: linear-gradient(to right, transparent, var(--popup-background-color) 60%);
+}
+
+.djs-popup-tabs-scroll-start svg {
+  transform: rotate(180deg);
+}
+
+.djs-popup-tabs {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 2px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 0 12px;
+
+  /* keep scrolled-to tabs clear of the scroll controls */
+  scroll-padding: 0 28px;
+  scrollbar-width: none;
+}
+
+.djs-popup-tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.djs-popup-tab {
+  appearance: none;
+  background: transparent;
+  border: none;
+  border-bottom: solid 2px transparent;
+  border-radius: 0;
+  flex: 0 0 auto;
+  padding: 6px 10px;
+  font: inherit;
+  font-size: var(--popup-font-size);
+  color: var(--popup-tab-color);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.djs-popup-tab:hover {
+  color: var(--popup-tab-hover-color);
+}
+
+.djs-popup-tab:focus-visible {
+  outline: solid 1px var(--popup-tab-focus-border-color);
+  outline-offset: -2px;
+}
+
+.djs-popup-tab[aria-selected="true"] {
+  color: var(--popup-tab-active-color);
+  border-bottom-color: var(--popup-tab-active-border-color);
+  font-weight: var(--popup-header-font-weight);
+}
+
 .djs-popup-title {
   font-size: var(--popup-font-size);
   font-weight: var(--popup-header-font-weight);
@@ -686,10 +783,17 @@
   text-decoration: none;
 }
 
-.djs-popup-entry-chevron {
+.djs-popup-entry-actions {
   display: flex;
   align-items: center;
+  flex-shrink: 0;
+  gap: 6px;
   margin-left: 6px;
+}
+
+.djs-popup-entry-chevron {
+  display: flex;
+  align-items: center;
   color: var(--popup-description-color);
 }
 
@@ -847,18 +951,30 @@
 }
 
 .djs-popup-entry-docs {
-  display: none;
-  margin-left: 3px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  visibility: hidden;
+  padding: 2px 3px;
   color: var(--popup-description-color);
+  background: #fff;
+  border: 1px solid var(--popup-search-border-color);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
 }
 
 .djs-popup-body .entry:hover .djs-popup-entry-docs {
-  display: inline;
+  visibility: visible;
+}
+
+.djs-popup-body .entry .djs-popup-entry-docs:hover {
+  background: #f2f3f5;
 }
 
 .djs-popup-entry-docs svg {
   vertical-align: middle;
-  margin: 2px;
 }
 
 .djs-popup-footer-docs {

package/dist/bpmn-modeler.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-modeler v18.23.0
+ * bpmn-js - bpmn-modeler v18.24.0
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -8,7 +8,7 @@
  *
  * Source Code: https://github.com/bpmn-io/bpmn-js
  *
- * Date: 2026-08-10
+ * Date: 2026-08-11
  */
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -27977,7 +27977,17 @@
               ${ entry.label }
             </span>
           ` : null }
-
+        </span>
+        ${ entry.description && m$1`
+          <span
+            class="djs-popup-entry-description"
+          >
+            ${ entry.description }
+          </span>
+        ` }
+      </div>
+      ${ (entry.documentationRef || entry.entries) && m$1`
+        <div class="djs-popup-entry-actions">
           ${ entry.documentationRef && m$1`
             <a
               class="djs-popup-entry-docs"
@@ -27990,24 +28000,17 @@
               rel="noopener"
             >
               <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path fill-rule="evenodd" clip-rule="evenodd" d="M10.6368 10.6375V5.91761H11.9995V10.6382C11.9995 10.9973 11.8623 11.3141 11.5878 11.5885C11.3134 11.863 10.9966 12.0002 10.6375 12.0002H1.36266C0.982345 12.0002 0.660159 11.8681 0.396102 11.6041C0.132044 11.34 1.52588e-05 11.0178 1.52588e-05 10.6375V1.36267C1.52588e-05 0.98236 0.132044 0.660173 0.396102 0.396116C0.660159 0.132058 0.982345 2.95639e-05 1.36266 2.95639e-05H5.91624V1.36267H1.36266V10.6375H10.6368ZM12 0H7.2794L7.27873 1.36197H9.68701L3.06507 7.98391L4.01541 8.93425L10.6373 2.31231V4.72059H12V0Z" fill="#818798"/>
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M10.6368 10.6375V5.91761H11.9995V10.6382C11.9995 10.9973 11.8623 11.3141 11.5878 11.5885C11.3134 11.863 10.9966 12.0002 10.6375 12.0002H1.36266C0.982345 12.0002 0.660159 11.8681 0.396102 11.6041C0.132044 11.34 1.52588e-05 11.0178 1.52588e-05 10.6375V1.36267C1.52588e-05 0.98236 0.132044 0.660173 0.396102 0.396116C0.660159 0.132058 0.982345 2.95639e-05 1.36266 2.95639e-05H5.91624V1.36267H1.36266V10.6375H10.6368ZM12 0H7.2794L7.27873 1.36197H9.68701L3.06507 7.98391L4.01541 8.93425L10.6373 2.31231V4.72059H12V0Z" fill="currentColor"/>
               </svg>
             </a>
           ` }
-        </span>
-        ${ entry.description && m$1`
-          <span
-            class="djs-popup-entry-description"
-          >
-            ${ entry.description }
-          </span>
-        ` }
-      </div>
-      ${ entry.entries && m$1`
-        <div class="djs-popup-entry-chevron" aria-hidden="true">
-          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M3.96967 1.46967C4.26256 1.17678 4.73744 1.17678 5.03033 1.46967L9.03033 5.46967C9.32322 5.76256 9.32322 6.23744 9.03033 6.53033L5.03033 10.5303C4.73744 10.8232 4.26256 10.8232 3.96967 10.5303C3.67678 10.2374 3.67678 9.76256 3.96967 9.46967L7.43934 6L3.96967 2.53033C3.67678 2.23744 3.67678 1.76256 3.96967 1.46967Z" fill="currentColor"/>
-          </svg>
+          ${ entry.entries && m$1`
+            <div class="djs-popup-entry-chevron" aria-hidden="true">
+              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M3.96967 1.46967C4.26256 1.17678 4.73744 1.17678 5.03033 1.46967L9.03033 5.46967C9.32322 5.76256 9.32322 6.23744 9.03033 6.53033L5.03033 10.5303C4.73744 10.8232 4.26256 10.8232 3.96967 10.5303C3.67678 10.2374 3.67678 9.76256 3.96967 9.46967L7.43934 6L3.96967 2.53033C3.67678 2.23744 3.67678 1.76256 3.96967 1.46967Z" fill="currentColor"/>
+              </svg>
+            </div>
+          ` }
         </div>
       ` }
     </li>
@@ -28063,7 +28066,7 @@
 	    const selectedEl = containerEl.querySelector('.selected');
 
 	    if (selectedEl) {
-	      scrollIntoView(selectedEl);
+	      scrollIntoView$1(selectedEl);
 	    }
 	  }, [ selectedEntry ]);
 
@@ -28137,7 +28140,7 @@
 	  return `${ idPrefix }-group-${ group.id }`;
 	}
 
-	function scrollIntoView(el) {
+	function scrollIntoView$1(el) {
 	  if (typeof el.scrollIntoViewIfNeeded === 'function') {
 	    el.scrollIntoViewIfNeeded();
 	  } else {
@@ -28179,6 +28182,7 @@
 	 * @param {PopupMenuEmptyPlaceholder} [props.emptyPlaceholder]
 	 * @param {number|string} [props.width]
 	 * @param {searchFn} props.searchFn
+	 * @param {import('./PopupMenuProvider.js').PopupMenuTab} [props.defaultTab]
 	 */
 	function PopupMenuComponent(props) {
 	  const {
@@ -28195,7 +28199,8 @@
 	    searchFn,
 	    entries,
 	    onOpened,
-	    onClosed
+	    onClosed,
+	    defaultTab
 	  } = props;
 
 	  /**
@@ -28210,12 +28215,183 @@
 
 	  /**
 	   * On `PopupMenu#refresh()` (i.e. when `entries` change)
-	   * the stack is reset to root.
+	   * the stack and active tab are reset to root.
 	   */
 	  y(() => {
 	    setNavigationStack([]);
+	    setActiveTab(null);
 	  }, [ entries ]);
 
+	  /**
+	   * Tabs partition root-level entries. They are derived from the entries'
+	   * `tab` property; entries without a `tab` belong to the default tab. The
+	   * tab strip only renders when at least two distinct tabs exist.
+	   *
+	   * @type {import('./PopupMenuProvider.js').PopupMenuTab[]}
+	   */
+	  const tabs = T(() => {
+	    const tabbed = [];
+	    const seen = new Set();
+
+	    let hasUntagged = false;
+
+	    entries.forEach(({ tab }) => {
+	      if (!tab) {
+	        hasUntagged = true;
+
+	        return;
+	      }
+
+	      if (!seen.has(tab.id)) {
+	        seen.add(tab.id);
+	        tabbed.push(tab);
+	      }
+	    });
+
+	    if (!tabbed.length) {
+	      return [];
+	    }
+
+	    // untagged entries need a tab to live in; without a configured
+	    // `defaultTab` there is no name to give it, so stay untabbed rather
+	    // than invent one
+	    if (hasUntagged && !defaultTab) {
+	      return [];
+	    }
+
+	    if (!hasUntagged) {
+	      return tabbed;
+	    }
+
+	    return [
+	      defaultTab,
+	      ...tabbed.filter(tab => tab.id !== defaultTab.id)
+	    ];
+	  }, [ entries, defaultTab ]);
+
+	  const [ activeTabOverride, setActiveTab ] = d(null);
+
+	  // the override may name a tab that no longer exists, e.g. on the render
+	  // following a `PopupMenu#refresh()` that dropped it
+	  const activeTabId = tabs.some(tab => tab.id === activeTabOverride)
+	    ? activeTabOverride
+	    : (tabs.length ? tabs[0].id : null);
+
+	  const tabsRef = A();
+
+	  _(() => {
+	    const tabsEl = tabsRef.current;
+
+	    if (!tabsEl) {
+	      return;
+	    }
+
+	    const activeTabEl = tabsEl.querySelector('[aria-selected="true"]');
+
+	    if (activeTabEl) {
+	      scrollIntoView(activeTabEl);
+	    }
+	  }, [ activeTabId ]);
+
+	  /**
+	   * Which directions the tab strip can still be scrolled in. Drives the
+	   * scroll controls, so they only show when there is somewhere to scroll.
+	   *
+	   * @type {[ { start: boolean, end: boolean }, (overflow: { start: boolean, end: boolean }) => void ]}
+	   */
+	  const [ overflow, setOverflow ] = d({ start: false, end: false });
+
+	  // only ever called while the strip is rendered, so the ref is set
+	  const updateOverflow = q(() => {
+	    const { scrollLeft, scrollWidth, clientWidth } = tabsRef.current;
+
+	    setOverflow({
+	      start: scrollLeft > 0,
+
+	      // sub-pixel widths leave a fractional remainder at the end
+	      end: scrollWidth - clientWidth - scrollLeft > 1
+	    });
+	  }, []);
+
+	  // horizontal scroll on tabs
+	  const handleWheel = q(event => {
+	    const tabsEl = tabsRef.current;
+
+	    const delta = Math.abs(event.deltaX) > Math.abs(event.deltaY)
+	      ? event.deltaX
+	      : event.deltaY;
+
+	    if (!delta) {
+	      return;
+	    }
+
+	    const { scrollLeft, scrollWidth, clientWidth } = tabsEl;
+
+	    if (scrollWidth - clientWidth < 1) {
+	      return;
+	    }
+
+	    event.preventDefault();
+
+	    tabsEl.scrollLeft = scrollLeft + delta;
+
+	    updateOverflow();
+	  }, [ updateOverflow ]);
+
+	  _(() => {
+	    const tabsEl = tabsRef.current;
+
+	    if (!tabsEl) {
+	      return;
+	    }
+
+	    updateOverflow();
+
+	    tabsEl.addEventListener('scroll', updateOverflow);
+	    tabsEl.addEventListener('wheel', handleWheel, { passive: false });
+
+	    return () => {
+	      tabsEl.removeEventListener('scroll', updateOverflow);
+	      tabsEl.removeEventListener('wheel', handleWheel);
+	    };
+	  }, [ tabs, activeTabId, updateOverflow, handleWheel ]);
+
+	  /**
+	   * Scroll the nearest tab that is cut off in `direction` into view, so a
+	   * click always lands on a fully visible tab.
+	   *
+	   * @param {number} direction
+	   */
+	  const scrollTabs = q(direction => {
+	    const tabsEl = tabsRef.current;
+
+	    const tabEls = direction > 0
+	      ? [ ...tabsEl.children ]
+	      : [ ...tabsEl.children ].reverse();
+
+	    const stripBounds = tabsEl.getBoundingClientRect();
+
+	    const cutOff = tabEls.find(tabEl => {
+	      const bounds = tabEl.getBoundingClientRect();
+
+	      return direction > 0
+	        ? bounds.right > stripBounds.right + 1
+	        : bounds.left < stripBounds.left - 1;
+	    });
+
+	    if (cutOff) {
+	      scrollIntoView(cutOff);
+
+	      // recompute directly: a programmatic scroll does not reliably emit a
+	      // `scroll` event, so the controls would otherwise go stale
+	      updateOverflow();
+	    }
+	  }, [ updateOverflow ]);
+
+	  const getEntryTabId = q(entry => {
+	    return (entry.tab && entry.tab.id) || (defaultTab && defaultTab.id);
+	  }, [ defaultTab ]);
+
 	  const [ searchValue, setSearchValue ] = d('');
 	  const isSearching = searchValue.trim().length > 0;
 
@@ -28231,9 +28407,15 @@
 
 	  const entriesToShow = T(() => {
 
+	    // the tab filter applies at the root level only; drill-down
+	    // (step entries) and search operate on the full entry set
 	    const availableEntries = navigationStack.length
 	      ? navigationStack[navigationStack.length - 1].entries
-	      : entries;
+	      : (
+	        tabs.length > 1
+	          ? entries.filter(entry => getEntryTabId(entry) === activeTabId)
+	          : entries
+	      );
 
 	    if (!searchable) return availableEntries;
 
@@ -28246,7 +28428,7 @@
 	    }
 
 	    return availableEntries.filter(({ rank = 0 }) => rank >= 0);
-	  }, [ searchable, isSearching, actionableEntries, searchValue, searchFn, navigationStack, entries ]);
+	  }, [ searchable, isSearching, actionableEntries, searchValue, searchFn, navigationStack, entries, tabs, activeTabId, getEntryTabId ]);
 
 	  const groupedEntries = T(() => {
 	    if (isSearching) {
@@ -28387,6 +28569,77 @@
 	    }
 	  }, [ selectedEntry, keyboardSelect, keyboardDrilldown, handleEntryAction ]);
 
+	  const selectTab = q((event, tabId) => {
+	    setActiveTab(tabId);
+
+	    // a keyboard activation reports no click detail; keep focus in the strip
+	    // so arrow navigation keeps working. A pointer click hands focus back to
+	    // the search input so typing continues to work
+	    if (!event.detail) {
+	      return;
+	    }
+
+	    const popupEl = closest(event.currentTarget, '.djs-popup', true);
+	    const inputEl = popupEl && popupEl.querySelector('input');
+
+	    inputEl && inputEl.focus();
+	  }, []);
+
+	  // left/right/Home/End navigate between tabs while the strip has focus; stop
+	  // propagation so the global drill-down and entry-action bindings do not fire.
+	  // Up/down leave the strip instead
+	  const handleTabKeyDown = q(event => {
+	    if (event.key === 'Enter' || event.key === ' ') {
+
+	      // let the button's native click happen, but keep the event
+	      // from reaching the global Enter handler (entry action)
+	      event.stopPropagation();
+
+	      return;
+	    }
+
+	    // <ArrowDown> / <ArrowUp> hand focus to the panel so the menu's own
+	    // bindings take over — notably <ArrowRight> to step into an entry, which
+	    // would otherwise keep switching tabs. The event still bubbles, so the
+	    // selection moves on the same keystroke
+	    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+	      const popupEl = closest(event.currentTarget, '.djs-popup', true);
+
+	      const focusEl = popupEl.querySelector('input')
+	        || popupEl.querySelector('[role="listbox"]');
+
+	      focusEl && focusEl.focus();
+
+	      return;
+	    }
+
+	    const idx = tabs.findIndex(tab => tab.id === activeTabId);
+
+	    let nextIdx;
+
+	    if (event.key === 'ArrowLeft') {
+	      nextIdx = (idx - 1 + tabs.length) % tabs.length;
+	    } else if (event.key === 'ArrowRight') {
+	      nextIdx = (idx + 1) % tabs.length;
+	    } else if (event.key === 'Home') {
+	      nextIdx = 0;
+	    } else if (event.key === 'End') {
+	      nextIdx = tabs.length - 1;
+	    } else {
+	      return;
+	    }
+
+	    event.preventDefault();
+	    event.stopPropagation();
+
+	    setActiveTab(tabs[nextIdx].id);
+
+	    const strip = event.currentTarget.parentNode;
+	    const nextButton = strip && strip.children[nextIdx];
+
+	    nextButton && nextButton.focus();
+	  }, [ tabs, activeTabId ]);
+
 	  const handleKey = q(event => {
 	    if (matches(event.target, 'input')) {
 	      setSearchValue(() => event.target.value);
@@ -28402,6 +28655,7 @@
 	  }, []);
 
 	  const displayBreadcrumbs = !isSearching && navigationStack.length > 0;
+	  const displayTabs = tabs.length > 1 && !isSearching && navigationStack.length === 0;
 	  const displayHeader = (title || headerEntries.length > 0) && !displayBreadcrumbs;
 
 	  return m$1`
@@ -28451,6 +28705,43 @@
           </div>
           ` }
 
+          ${ displayTabs && m$1`
+            <div class="djs-popup-tabs-container">
+              <div class="djs-popup-tabs" ref=${ tabsRef } role="tablist">
+                ${ tabs.map(tab => m$1`
+                  <button
+                    type="button"
+                    class="djs-popup-tab"
+                    role="tab"
+                    title=${ tab.title || undefined }
+                    aria-controls=${ resultsId }
+                    aria-selected=${ tab.id === activeTabId }
+                    tabIndex=${ tab.id === activeTabId ? 0 : -1 }
+                    onClick=${ (event) => selectTab(event, tab.id) }
+                    onKeydown=${ handleTabKeyDown }
+                  >${ tab.label }</button>
+                `) }
+              </div>
+
+              ${ /* outside the tablist: its children must be tabs. Keyboard
+                     users navigate with the arrow keys instead */ '' }
+              ${ [ -1, 1 ].map(direction => (direction < 0 ? overflow.start : overflow.end) && m$1`
+                <button
+                  type="button"
+                  class=${ `djs-popup-tabs-scroll djs-popup-tabs-scroll-${ direction < 0 ? 'start' : 'end' }` }
+                  aria-hidden="true"
+                  tabIndex="-1"
+                  onMousedown=${ (event) => event.preventDefault() }
+                  onClick=${ () => scrollTabs(direction) }
+                >
+                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.96967 1.46967C4.26256 1.17678 4.73744 1.17678 5.03033 1.46967L9.03033 5.46967C9.32322 5.76256 9.32322 6.23744 9.03033 6.53033L5.03033 10.5303C4.73744 10.8232 4.26256 10.8232 3.96967 10.5303C3.67678 10.2374 3.67678 9.76256 3.96967 9.46967L7.43934 6L3.96967 2.53033C3.67678 2.23744 3.67678 1.76256 3.96967 1.46967Z" fill="currentColor"/>
+                  </svg>
+                </button>
+              `) }
+            </div>
+          ` }
+
           ${ isSearching && m$1`
             <div class="djs-popup-search-count" aria-live="polite">
               ${ entriesToShow.length } ${ entriesToShow.length === 1 ? 'result' : 'results' } found
@@ -28497,6 +28788,18 @@
   `;
 	}
 
+	function scrollIntoView(el) {
+	  if (typeof el.scrollIntoViewIfNeeded === 'function') {
+	    el.scrollIntoViewIfNeeded();
+	  } else {
+	    el.scrollIntoView({
+	      scrollMode: 'if-needed',
+	      block: 'nearest',
+	      inline: 'nearest'
+	    });
+	  }
+	}
+
 	/**
 	 * A component that wraps the popup menu.
 	 *
@@ -28693,11 +28996,14 @@
 	 *
 	 * @typedef {import('../../model/Types.js').Element} Element
 	 *
+	 * @typedef {import('./PopupMenuProvider.js').PopupMenuTab} PopupMenuTab
+	 *
 	 * @typedef { {
 	 *   scale?: {
 	 *     min?: number;
 	 *     max?: number;
 	 *   } | boolean;
+	 *   defaultTab?: PopupMenuTab;
 	 * } } PopupMenuConfig
 	 *
 	 * @typedef {Element|Element[]} PopupMenuTarget;
@@ -28734,7 +29040,8 @@
 	  };
 
 	  this._config = {
-	    scale: scale
+	    scale: scale,
+	    defaultTab: config && config.defaultTab
 	  };
 
 
@@ -28800,6 +29107,7 @@
         onOpened=${ this._onOpened.bind(this) }
         onClosed=${ this._onClosed.bind(this) }
         searchFn=${ this._search }
+        defaultTab=${ this._config.defaultTab }
         ...${{ ...options }}
       />
     `,