bpmn-js 18.20.0 → 18.21.0

package/dist/assets/diagram-js.css

@@ -57,6 +57,7 @@
 
   --popup-font-family: "IBM Plex Sans", sans-serif;
   --popup-font-size: 14px;
+  --popup-secondary-font-size: .9em;
   --popup-header-entry-selected-color: var(--color-blue-205-100-50);
   --popup-header-font-weight: bolder;
   --popup-header-group-divider-color: var(--color-grey-225-10-75);
@@ -696,7 +697,7 @@
 
 .djs-popup-search-count {
   margin: 0 12px;
-  font-size: 11px;
+  font-size: var(--popup-secondary-font-size);
   color: var(--popup-description-color);
 }
 
@@ -708,6 +709,16 @@
   padding-right: 9px;
 }
 
+/**
+ * The results list is focusable (as a listbox holding
+ * `aria-activedescendant`) when there is no search field.
+ * The active entry is indicated via `.entry.selected`, so we hide
+ * the outline on the list container itself.
+ */
+.djs-popup-results:focus {
+  outline: none;
+}
+
 .djs-popup-group {
   margin: 0;
   padding: 0;
@@ -773,7 +784,7 @@
 }
 
 .djs-popup-entry-description {
-  font-size: .9em;
+  font-size: var(--popup-secondary-font-size);
   margin-top: .25em;
 
   color: var(--popup-description-color);
@@ -815,14 +826,28 @@
   color: var(--popup-no-results-color);
 }
 
+.djs-popup-footer {
+  display: flex;
+  padding: 5px 12px 7px 12px;
+  border-top: solid 1px var(--popup-border-color);
+}
+
+/**
+ * The footer holds the keyboard/assistive-technology reachable documentation
+ * link. Mouse users get the per-entry `.djs-popup-entry-docs` affordance on
+ * hover instead, so the (redundant) footer link is hidden while the results
+ * list is hovered and shown during keyboard navigation.
+ */
+.djs-popup-results:hover ~ .djs-popup-footer {
+  display: none;
+}
+
 .djs-popup-entry-docs {
   display: none;
   margin-left: 3px;
   color: var(--popup-description-color);
 }
 
-.djs-popup-body .entry:focus-within .djs-popup-entry-docs,
-.djs-popup-body .entry:focus .djs-popup-entry-docs,
 .djs-popup-body .entry:hover .djs-popup-entry-docs {
   display: inline;
 }
@@ -832,6 +857,24 @@
   margin: 2px;
 }
 
+.djs-popup-footer-docs {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-size: var(--popup-secondary-font-size);
+  color: var(--popup-description-color);
+  text-decoration: none;
+}
+
+.djs-popup-footer-docs:hover {
+  text-decoration: underline;
+}
+
+.djs-popup-footer-docs svg {
+  vertical-align: middle;
+  margin: 2px;
+}
+
 /**
  *  palette styles
  */

package/dist/bpmn-modeler.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-modeler v18.20.0
+ * bpmn-js - bpmn-modeler v18.21.0
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -8,7 +8,7 @@
  *
  * Source Code: https://github.com/bpmn-io/bpmn-js
  *
- * Date: 2026-07-06
+ * Date: 2026-07-08
  */
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -4842,6 +4842,8 @@
 	 * @typedef {import('./Types.js').ParentLike } ParentLike
 	 * @typedef {import('./Types.js').ShapeLike} ShapeLike
 	 *
+	 * @typedef {ShapeLike|ConnectionLike|RootLike|string} ElementOrIdentifier
+	 *
 	 * @typedef { {
 	 *   container?: HTMLElement;
 	 *   deferUpdate?: boolean;
@@ -5373,26 +5375,40 @@
 
 
 	/**
-	 * Returns the plane which contains the given element.
+	 * Returns the plane which contains the given element(s).
 	 *
-	 * @param {ShapeLike|ConnectionLike|string} element The element or its ID.
+	 * If multiple elements are passed, the shared plane is returned
+	 * (or undefined if no shared plane exists).
+	 *
+	 * @param {ElementOrIdentifier|ElementOrIdentifier[]} element
 	 *
 	 * @return {RootLike|undefined} The root of the element.
 	 */
 	Canvas.prototype.findRoot = function(element) {
-	  if (typeof element === 'string') {
-	    element = this._elementRegistry.get(element);
-	  }
 
-	  if (!element) {
-	    return;
-	  }
+	  const elements = this._resolveElements(element);
+
+	  let root;
+
+	  for (const element of elements) {
+	    const plane = this._findPlaneForRoot(
+	      findRoot(element)
+	    );
+
+	    if (!plane) {
+	      return;
+	    }
 
-	  const plane = this._findPlaneForRoot(
-	    findRoot(element)
-	  ) || {};
+	    if (root && plane.rootElement !== root) {
 
-	  return plane.rootElement;
+	      // no shared root
+	      return undefined;
+	    }
+
+	    root = plane.rootElement;
+	  }
+
+	  return root;
 	};
 
 	/**
@@ -5412,6 +5428,33 @@
 	  });
 	};
 
+	/**
+	 * @param {ElementOrIdentifier} element
+	 *
+	 * @return {ShapeLike|ConnectionLike|RootLike|undefined}
+	 */
+	Canvas.prototype._resolveElement = function(element) {
+
+	  if (typeof element === 'string') {
+	    return this._elementRegistry.get(element);
+	  }
+
+	  return element;
+	};
+
+	/**
+	 * @param {ElementOrIdentifier|ElementOrIdentifier[]} elements
+	 *
+	 * @return {Array<ShapeLike|ConnectionLike|RootLike>}
+	 */
+	Canvas.prototype._resolveElements = function(elements) {
+
+	  if (!isArray$2(elements)) {
+	    elements = [ elements ];
+	  }
+
+	  return elements.map(element => this._resolveElement(element)).filter(Boolean);
+	};
 
 	/**
 	 * Returns the html element that encloses the
@@ -5429,9 +5472,7 @@
 	Canvas.prototype._updateMarker = function(element, marker, add) {
 	  let container;
 
-	  if (!element.id) {
-	    element = this._elementRegistry.get(element);
-	  }
+	  element = this._resolveElement(element);
 
 	  element.markers = element.markers || new Set();
 
@@ -5514,9 +5555,7 @@
 	 * @param {string} marker The marker.
 	 */
 	Canvas.prototype.hasMarker = function(element, marker) {
-	  if (!element.id) {
-	    element = this._elementRegistry.get(element);
-	  }
+	  element = this._resolveElement(element);
 
 	  if (!element.markers) {
 	    return false;
@@ -5613,9 +5652,7 @@
 	 */
 	Canvas.prototype.removeRootElement = function(rootElement) {
 
-	  if (typeof rootElement === 'string') {
-	    rootElement = this._elementRegistry.get(rootElement);
-	  }
+	  rootElement = this._resolveElement(rootElement);
 
 	  const plane = this._findPlaneForRoot(rootElement);
 
@@ -6112,34 +6149,44 @@
 	};
 
 	/**
-	 * Scrolls the viewbox to contain the given element.
+	 * Scrolls the viewbox to contain the given element or elements.
 	 * Optionally specify a padding to be applied to the edges.
 	 *
-	 * @param {ShapeLike|ConnectionLike|string} element The element to scroll to or its ID.
+	 * The canvas navigates to the shared root of the element(s). If no shared
+	 * root can be found, no navigation is performed.
+	 *
+	 * @param {ElementOrIdentifier|ElementOrIdentifier[]} element The element(s) to scroll to or their ID(s).
 	 * @param {RectTRBL|number} [padding=100] The padding to be applied. Can also specify top, bottom, left and right.
 	 */
 	Canvas.prototype.scrollToElement = function(element, padding) {
 	  let defaultPadding = 100;
 
-	  if (typeof element === 'string') {
-	    element = this._elementRegistry.get(element);
+	  const elements = this._resolveElements(element);
+
+	  if (!elements.length) {
+	    return;
 	  }
 
-	  // set to correct rootElement
-	  const rootElement = this.findRoot(element);
+	  const rootElement = this.findRoot(elements);
+
+	  if (!rootElement) {
+	    return;
+	  }
 
 	  if (rootElement !== this.getRootElement()) {
 	    this.setRootElement(rootElement);
 	  }
 
-	  // element is rootElement, do not change viewport
-	  if (rootElement === element) {
+	  const visibleElements = elements.filter(e => e != rootElement);
+
+	  if (!visibleElements.length) {
 	    return;
 	  }
 
 	  if (!padding) {
 	    padding = {};
 	  }
+
 	  if (typeof padding === 'number') {
 	    defaultPadding = padding;
 	  }
@@ -6151,7 +6198,7 @@
 	    left: padding.left || defaultPadding
 	  };
 
-	  const elementBounds = getBBox(element),
+	  const elementBounds = getBBox(visibleElements),
 	        elementTrbl = asTRBL(elementBounds),
 	        viewboxBounds = this.viewbox(),
 	        zoom = this.zoom();
@@ -22458,7 +22505,7 @@
 	};
 
 	// document wide unique overlay ids
-	var ids$1 = new IdGenerator('ov');
+	var ids$2 = new IdGenerator('ov');
 
 	var LOW_PRIORITY$q = 500;
 
@@ -22590,7 +22637,7 @@
 	  this._canvas = canvas;
 	  this._elementRegistry = elementRegistry;
 
-	  this._ids = ids$1;
+	  this._ids = ids$2;
 
 	  /**
 	   * @type {OverlaysConfigDefault}
@@ -27791,11 +27838,27 @@
 	 * @typedef {import('./PopupMenuProvider.js').PopupMenuEntry} PopupMenuEntry
 	 */
 
+	/**
+	 * Compute the DOM `id` of a rendered popup menu entry.
+	 *
+	 * Used to wire the entry (`role="option"`) to the search field
+	 * via `aria-activedescendant`.
+	 *
+	 * @param {string} idPrefix
+	 * @param {PopupMenuEntry} entry
+	 *
+	 * @return {string}
+	 */
+	function getPopupMenuItemId(idPrefix, entry) {
+	  return `${ idPrefix }-entry-${ entry.id }`;
+	}
+
 	/**
 	 * Component that renders a popup menu entry.
 	 *
 	 * @param {Object} props
 	 * @param {string} props.key
+	 * @param {string} props.idPrefix
 	 * @param {PopupMenuEntry} props.entry
 	 * @param {boolean} props.selected
 	 * @param {(event: MouseEvent) => void} props.onMouseEnter
@@ -27804,6 +27867,7 @@
 	 */
 	function PopupMenuItem(props) {
 	  const {
+	    idPrefix,
 	    entry,
 	    selected,
 	    onMouseEnter,
@@ -27825,13 +27889,13 @@
     <li
       class=${ clsx('entry', { selected, disabled: entry.disabled }) }
       data-id=${ entry.id }
+      id=${ getPopupMenuItemId(idPrefix, entry) }
+      role="option"
+      aria-selected=${ selected || undefined }
+      aria-haspopup=${ entry.entries ? 'true' : undefined }
       title=${ entry.title }
-      aria-label=${ entry.title || entry.label }
       aria-disabled=${ entry.disabled || undefined }
-      tabIndex="0"
       onClick=${ handleClick }
-      onFocus=${ onMouseEnter }
-      onBlur=${ onMouseLeave }
       onMouseEnter=${ onMouseEnter }
       onMouseLeave=${ onMouseLeave }
       onDragStart=${ (event) => draggable && handleClick(event, 'dragstart') }
@@ -27851,15 +27915,17 @@
           ` : null }
 
           ${ entry.documentationRef && m$1`
-            <a class="djs-popup-entry-docs"
+            <a
+              class="djs-popup-entry-docs"
               href=${ entry.documentationRef }
               onClick=${ (event) => event.stopPropagation() }
-              title="Open element documentation"
-              aria-label="Open element documentation"
+              title="Open entry documentation"
+              tabIndex="-1"
+              aria-hidden="true"
               target="_blank"
               rel="noopener"
             >
-              <svg aria-hidden="true" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <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"/>
               </svg>
             </a>
@@ -27897,6 +27963,11 @@
 	 * @param {PopupMenuEntry} props.selectedEntry
 	 * @param {(entry: PopupMenuEntry | null) => void} props.setSelectedEntry
 	 * @param {import('@bpmn-io/diagram-js-ui').Ref<boolean>} props.keyboardSelection
+	 * @param {string} props.idPrefix
+	 * @param {string} props.id
+	 * @param {string} [props.ariaLabel]
+	 * @param {number} [props.tabIndex]
+	 * @param {string} [props.ariaActivedescendant]
 	 */
 	function PopupMenuList(props) {
 	  const {
@@ -27904,6 +27975,11 @@
 	    setSelectedEntry,
 	    groupedEntries,
 	    keyboardSelection,
+	    idPrefix,
+	    id,
+	    ariaLabel,
+	    tabIndex,
+	    ariaActivedescendant,
 	    ...restProps
 	  } = props;
 
@@ -27915,8 +27991,6 @@
 	      return;
 	    }
 
-	    keyboardSelection.current = false;
-
 	    const containerEl = resultsRef.current;
 
 	    if (!containerEl)
@@ -27929,22 +28003,60 @@
 	    }
 	  }, [ selectedEntry ]);
 
+	  const handleMouseMove = () => {
+	    keyboardSelection.current = false;
+	  };
+
+	  const handleEntryMouseEnter = (entry) => {
+
+	    // Prevents keyboard selection from being overridden
+	    // by mouse hover when `scrollIntoView` is called.
+	    if (keyboardSelection.current) {
+	      return;
+	    }
+
+	    setSelectedEntry(entry);
+	  };
+
+	  const handleEntryMouseLeave = () => {
+	    if (keyboardSelection.current) {
+	      return;
+	    }
+
+	    setSelectedEntry(null);
+	  };
+
 	  return m$1`
-    <div class="djs-popup-results" ref=${ resultsRef }>
+    <div
+      class="djs-popup-results"
+      ref=${ resultsRef }
+      id=${ id }
+      role="listbox"
+      aria-label=${ ariaLabel }
+      tabIndex=${ tabIndex }
+      aria-activedescendant=${ ariaActivedescendant }
+      onMouseMove=${ handleMouseMove }
+    >
       ${ groupedEntries.map(group => m$1`
         ${ group.name && m$1`
-          <div key=${ group.id } class="entry-header" title=${ group.name }>
+          <div key=${ group.id } id=${ getGroupHeaderId(idPrefix, group) } class="entry-header" title=${ group.name }>
             ${ group.name }
           </div>
         ` }
-        <ul class="djs-popup-group" data-group=${ group.id }>
+        <ul
+          class="djs-popup-group"
+          data-group=${ group.id }
+          role="group"
+          aria-labelledby=${ group.name ? getGroupHeaderId(idPrefix, group) : undefined }
+        >
           ${ group.entries.map(entry => m$1`
             <${PopupMenuItem}
               key=${ entry.id }
+              idPrefix=${ idPrefix }
               entry=${ entry }
               selected=${ entry === selectedEntry }
-              onMouseEnter=${ () => setSelectedEntry(entry) }
-              onMouseLeave=${ () => setSelectedEntry(null) }
+              onMouseEnter=${ () => handleEntryMouseEnter(entry) }
+              onMouseLeave=${ handleEntryMouseLeave }
               ...${ restProps }
             />
           `) }
@@ -27957,6 +28069,10 @@
 
 	// helpers ////////////////
 
+	function getGroupHeaderId(idPrefix, group) {
+	  return `${ idPrefix }-group-${ group.id }`;
+	}
+
 	function scrollIntoView(el) {
 	  if (typeof el.scrollIntoViewIfNeeded === 'function') {
 	    el.scrollIntoViewIfNeeded();
@@ -27968,6 +28084,8 @@
 	  }
 	}
 
+	const ids$1 = new IdGenerator('djs-popup');
+
 	/**
 	 * @typedef {import('./PopupMenuProvider.js').PopupMenuEntry} PopupMenuEntry
 	 * @typedef {import('./PopupMenuProvider.js').PopupMenuActionEntry} PopupMenuActionEntry
@@ -28084,6 +28202,12 @@
 	   */
 	  const keyboardSelection = A(false);
 
+	  // per instance basis to generate field IDs
+	  const idPrefix = T(() => ids$1.next(), []);
+
+	  const resultsId = `${ idPrefix }-results`;
+	  const activeDescendantId = selectedEntry && getPopupMenuItemId(idPrefix, selectedEntry);
+
 	  y(() => {
 	    const restore = restoreSelection.current;
 
@@ -28217,6 +28341,7 @@
       position=${ position }
       width=${ width }
       scale=${ scale }
+      navigationStack=${ navigationStack }
     >
       ${ displayHeader && m$1`
         <${PopupMenuHeader}
@@ -28241,7 +28366,16 @@
             <svg class="djs-popup-search-icon" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path fill-rule="evenodd" clip-rule="evenodd" d="M9.0325 8.5H9.625L13.3675 12.25L12.25 13.3675L8.5 9.625V9.0325L8.2975 8.8225C7.4425 9.5575 6.3325 10 5.125 10C2.4325 10 0.25 7.8175 0.25 5.125C0.25 2.4325 2.4325 0.25 5.125 0.25C7.8175 0.25 10 2.4325 10 5.125C10 6.3325 9.5575 7.4425 8.8225 8.2975L9.0325 8.5ZM1.75 5.125C1.75 6.9925 3.2575 8.5 5.125 8.5C6.9925 8.5 8.5 6.9925 8.5 5.125C8.5 3.2575 6.9925 1.75 5.125 1.75C3.2575 1.75 1.75 3.2575 1.75 5.125Z" fill="#22242A"/>
             </svg>
-            <input type="text" spellcheck=${ false } aria-label="${ title || 'Search' }" />
+            <input
+              type="text"
+              spellcheck=${ false }
+              role="combobox"
+              aria-label="${ title || 'Search' }"
+              aria-expanded="true"
+              aria-controls=${ resultsId }
+              aria-activedescendant=${ activeDescendantId || undefined }
+              aria-autocomplete="list"
+            />
           </div>
           ` }
 
@@ -28257,7 +28391,31 @@
             setSelectedEntry=${ setSelectedEntry }
             keyboardSelection=${ keyboardSelection }
             onAction=${ handleEntryAction }
+            idPrefix=${ idPrefix }
+            id=${ resultsId }
+            ariaLabel=${ title || 'Results' }
+            tabIndex=${ searchable ? -1 : 0 }
+            ariaActivedescendant=${ searchable ? undefined : (activeDescendantId || undefined) }
           />
+
+          ${ selectedEntry && selectedEntry.documentationRef && m$1`
+            <div class="djs-popup-footer">
+              <a
+                class="djs-popup-footer-docs"
+                href=${ selectedEntry.documentationRef }
+                onClick=${ (event) => event.stopPropagation() }
+                aria-label=${ selectedEntry.label ? `Open entry documentation for ${ selectedEntry.label }` : 'Open entry documentation' }
+                target="_blank"
+                rel="noopener"
+              >
+                Open entry documentation
+
+                <svg aria-hidden="true" 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"/>
+                </svg>
+              </a>
+            </div>
+          ` }
         </div>
       ` }
     ${ emptyPlaceholder && entriesToShow.length === 0 && m$1`
@@ -28279,6 +28437,7 @@
 	    onKeyup,
 	    className,
 	    children,
+	    navigationStack,
 	    position: positionGetter
 	  } = props;
 
@@ -28297,7 +28456,6 @@
 	    popupEl.style.top = `${position.y}px`;
 	  }, [ popupRef.current, positionGetter ]);
 
-	  // initial focus
 	  _(() => {
 	    const popupEl = popupRef.current;
 
@@ -28305,10 +28463,15 @@
 	      return;
 	    }
 
-	    const inputEl = popupEl.querySelector('input');
+	    // focus the combobox (search) if present, otherwise the listbox
+	    // itself which then holds focus + `aria-activedescendant`;
+	    // fall back to the popup element (e.g. empty placeholder)
+	    const focusEl = popupEl.querySelector('input')
+	      || popupEl.querySelector('[role="listbox"]')
+	      || popupEl;
 
-	    (inputEl || popupEl).focus();
-	  }, []);
+	    focusEl.focus();
+	  }, [ navigationStack ]);
 
 	  // global <Escape> / blur handlers
 	  y(() => {