bpmn-js 18.24.0 → 18.25.1

package/dist/assets/bpmn-js.css

@@ -31,8 +31,12 @@
   --breadcrumbs-font-family: var(--bjs-font-family);
   --breadcrumbs-item-color: var(--color-blue-205-100-50);
   --breadcrumbs-arrow-color: var(--color-black);
+  --breadcrumbs-background-color: var(--color-grey-225-10-97);
+  --breadcrumbs-border-color: var(--color-grey-225-10-75);
+  --breadcrumbs-focus-outline-color: var(--color-blue-205-100-50);
   --drilldown-fill-color: var(--color-white);
   --drilldown-background-color: var(--color-blue-205-100-50);
+  --drilldown-focus-outline-color: var(--color-blue-205-100-50);
 }
 
 .bjs-breadcrumbs {
@@ -40,13 +44,17 @@
   display: none;
   flex-wrap: wrap;
   align-items: center;
-  top: 30px;
-  left: 30px;
-  padding: 0px;
+  top: 20px;
+  left: 20px;
+  padding: 5px 10px;
   margin: 0px;
   font-family: var(--breadcrumbs-font-family);
   font-size: 16px;
   line-height: normal;
+  background-color: var(--breadcrumbs-background-color);
+  border: solid 1px var(--breadcrumbs-border-color);
+  border-radius: 2px;
+  row-gap: 5px;
 }
 
 .bjs-breadcrumbs-shown .bjs-breadcrumbs {
@@ -63,18 +71,18 @@
 
 .bjs-breadcrumbs li {
   display: inline-flex;
-  padding-bottom: 5px;
   align-items: center;
 }
 
-.bjs-breadcrumbs li a {
+.bjs-breadcrumbs a.bjs-crumb {
   cursor: pointer;
   color: var(--breadcrumbs-item-color);
+  text-decoration: none;
 }
 
-.bjs-breadcrumbs li:last-of-type a {
-  color: inherit;
-  cursor: default;
+.bjs-breadcrumbs a.bjs-crumb:focus-visible {
+  outline: solid 1px var(--breadcrumbs-focus-outline-color);
+  outline-offset: 1px;
 }
 
 .bjs-breadcrumbs li:not(:first-child)::before {
@@ -102,12 +110,16 @@
   cursor: pointer;
   border: none;
   border-radius: 2px;
-  outline: none;
 
   fill: var(--drilldown-fill-color);
   background-color: var(--drilldown-background-color);
 }
 
+.bjs-drilldown:focus-visible {
+  outline: solid 1px var(--drilldown-focus-outline-color);
+  outline-offset: 1px;
+}
+
 .bjs-drilldown-empty {
   display: none;
 }

package/dist/bpmn-modeler.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-modeler v18.24.0
+ * bpmn-js - bpmn-modeler v18.25.1
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -8,7 +8,7 @@
  *
  * Source Code: https://github.com/bpmn-io/bpmn-js
  *
- * Date: 2026-08-11
+ * Date: 2026-08-19
  */
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -23831,14 +23831,7 @@
 	        return [];
 	      }
 
-	      var title = escapeHTML(parent.name || parent.id);
-	      var link = domify('<li><span class="bjs-crumb"><a title="' + title + '">' + title + '</a></span></li>');
-
-	      link.addEventListener('click', function() {
-	        canvas.setRootElement(parentPlane);
-	      });
-
-	      return link;
+	      return [ { parent: parent, parentPlane: parentPlane } ];
 	    });
 
 	    breadcrumbs.innerHTML = '';
@@ -23848,8 +23841,39 @@
 
 	    containerClasses.toggle(OPEN_CLASS, visible);
 
-	    path.forEach(function(element) {
-	      breadcrumbs.appendChild(element);
+	    path.forEach(function(entry, index) {
+	      var parent = entry.parent,
+	          parentPlane = entry.parentPlane,
+	          title = escapeHTML(parent.name || parent.id);
+
+	      // the last crumb represents the current plane; render it as
+	      // plain, non-interactive text
+	      var isCurrent = index === path.length - 1;
+
+	      var crumb;
+
+	      if (isCurrent) {
+	        crumb = domify(
+	          '<li><span class="bjs-crumb" title="' + title + '">' + title + '</span></li>'
+	        );
+	      } else {
+
+	        // render navigable crumbs as local links so they are focusable
+	        // and keyboard-operable
+	        var href = '#' + escapeHTML(parent.id);
+
+	        crumb = domify(
+	          '<li><a class="bjs-crumb" href="' + href + '" title="' + title + '">' + title + '</a></li>'
+	        );
+
+	        crumb.addEventListener('click', function(event) {
+	          event.preventDefault();
+
+	          canvas.setRootElement(parentPlane);
+	        });
+	      }
+
+	      breadcrumbs.appendChild(crumb);
 	    });
 	  }
 
@@ -50254,6 +50278,182 @@
 	  return label.get('bounds');
 	}
 
+	/**
+	 * @typedef {import('diagram-js/lib/util/Types').Dimensions} Dimensions
+	 *
+	 * @typedef {import('../model/Types').Element} Element
+	 * @typedef {import('../model/Types').ModdleElement} ModdleElement
+	 */
+
+	/**
+	 * Default size of elements without an explicit default.
+	 *
+	 * @type {Dimensions}
+	 */
+	const DEFAULT_SIZE = { width: 100, height: 80 };
+
+	/**
+	 * @type {Dimensions}
+	 */
+	const DEFAULT_TASK_SIZE = { width: 100, height: 80 };
+
+	/**
+	 * @type {Dimensions}
+	 */
+	const DEFAULT_GATEWAY_SIZE = { width: 50, height: 50 };
+
+	/**
+	 * @type {Dimensions}
+	 */
+	const DEFAULT_EVENT_SIZE = { width: 36, height: 36 };
+
+	/**
+	 * @type {Dimensions}
+	 */
+	const DEFAULT_SUB_PROCESS_SIZE = { width: 350, height: 200 };
+
+	/**
+	 * @type {Dimensions}
+	 */
+	const DEFAULT_COLLAPSED_SUB_PROCESS_SIZE = { width: 100, height: 80 };
+
+	/**
+	 * @type {Dimensions}
+	 */
+	const DEFAULT_PARTICIPANT_SIZE = { width: 600, height: 250 };
+
+	/**
+	 * @type {Dimensions}
+	 */
+	const DEFAULT_VERTICAL_PARTICIPANT_SIZE = { width: 250, height: 600 };
+
+	/**
+	 * @type {Dimensions}
+	 */
+	const DEFAULT_COLLAPSED_PARTICIPANT_SIZE = { width: 400, height: 60 };
+
+	/**
+	 * @type {Dimensions}
+	 */
+	const DEFAULT_VERTICAL_COLLAPSED_PARTICIPANT_SIZE = { width: 60, height: 400 };
+
+	/**
+	 * @type {Dimensions}
+	 */
+	const DEFAULT_LANE_SIZE = { width: 400, height: 100 };
+
+	/**
+	 * @type {Dimensions}
+	 */
+	const DEFAULT_DATA_OBJECT_REFERENCE_SIZE = { width: 36, height: 50 };
+
+	/**
+	 * @type {Dimensions}
+	 */
+	const DEFAULT_DATA_STORE_REFERENCE_SIZE = { width: 50, height: 50 };
+
+	/**
+	 * @type {Dimensions}
+	 */
+	const DEFAULT_TEXT_ANNOTATION_SIZE = { width: 100, height: 40 };
+
+	/**
+	 * @type {Dimensions}
+	 */
+	const DEFAULT_GROUP_SIZE = { width: 300, height: 300 };
+
+
+	/**
+	 * Get the default size of a BPMN element.
+	 *
+	 * Elements without an explicit default, e.g. `bpmn:CallActivity`, fall back to
+	 * `DEFAULT_SIZE`.
+	 *
+	 * @overlord
+	 * @param {Element} element The element.
+	 * @param {ModdleElement} [di] The DI; defaults to the DI of the element.
+	 *
+	 * @return {Dimensions} Default width and height of the element.
+	 */
+
+	/**
+	 * Get the default size of a BPMN element.
+	 *
+	 * Elements without an explicit default, e.g. `bpmn:CallActivity`, fall back to
+	 * `DEFAULT_SIZE`.
+	 *
+	 * @param {ModdleElement} element The element.
+	 * @param {ModdleElement} di The DI.
+	 *
+	 * @return {Dimensions} Default width and height of the element.
+	 */
+	function getDefaultSize(element, di) {
+
+	  const bo = getBusinessObject(element);
+
+	  di = di || getDi(element);
+
+	  if (is(bo, 'bpmn:SubProcess')) {
+	    if (isExpanded(bo, di)) {
+	      return { ...DEFAULT_SUB_PROCESS_SIZE };
+	    } else {
+	      return { ...DEFAULT_COLLAPSED_SUB_PROCESS_SIZE };
+	    }
+	  }
+
+	  if (is(bo, 'bpmn:Task')) {
+	    return { ...DEFAULT_TASK_SIZE };
+	  }
+
+	  if (is(bo, 'bpmn:Gateway')) {
+	    return { ...DEFAULT_GATEWAY_SIZE };
+	  }
+
+	  if (is(bo, 'bpmn:Event')) {
+	    return { ...DEFAULT_EVENT_SIZE };
+	  }
+
+	  if (is(bo, 'bpmn:Participant')) {
+	    const isHorizontalPool = !di || di.isHorizontal === undefined || di.isHorizontal === true;
+
+	    if (isExpanded(bo, di)) {
+	      if (isHorizontalPool) {
+	        return { ...DEFAULT_PARTICIPANT_SIZE };
+	      }
+
+	      return { ...DEFAULT_VERTICAL_PARTICIPANT_SIZE };
+	    } else {
+	      if (isHorizontalPool) {
+	        return { ...DEFAULT_COLLAPSED_PARTICIPANT_SIZE };
+	      }
+
+	      return { ...DEFAULT_VERTICAL_COLLAPSED_PARTICIPANT_SIZE };
+	    }
+	  }
+
+	  if (is(bo, 'bpmn:Lane')) {
+	    return { ...DEFAULT_LANE_SIZE };
+	  }
+
+	  if (is(bo, 'bpmn:DataObjectReference')) {
+	    return { ...DEFAULT_DATA_OBJECT_REFERENCE_SIZE };
+	  }
+
+	  if (is(bo, 'bpmn:DataStoreReference')) {
+	    return { ...DEFAULT_DATA_STORE_REFERENCE_SIZE };
+	  }
+
+	  if (is(bo, 'bpmn:TextAnnotation')) {
+	    return { ...DEFAULT_TEXT_ANNOTATION_SIZE };
+	  }
+
+	  if (is(bo, 'bpmn:Group')) {
+	    return { ...DEFAULT_GROUP_SIZE };
+	  }
+
+	  return { ...DEFAULT_SIZE };
+	}
+
 	/**
 	 * @typedef {import('diagram-js/lib/util/Types').Dimensions} Dimensions
 	 *
@@ -50483,71 +50683,12 @@
 	 * Get the default size of a diagram element.
 	 *
 	 * @param {Element} element The element.
-	 * @param {ModdleElement} di The DI.
+	 * @param {ModdleElement} [di] The DI.
 	 *
 	 * @return {Dimensions} Default width and height of the element.
 	 */
 	ElementFactory.prototype.getDefaultSize = function(element, di) {
-
-	  var bo = getBusinessObject(element);
-	  di = di || getDi(element);
-
-	  if (is(bo, 'bpmn:SubProcess')) {
-	    if (isExpanded(bo, di)) {
-	      return { width: 350, height: 200 };
-	    } else {
-	      return { width: 100, height: 80 };
-	    }
-	  }
-
-	  if (is(bo, 'bpmn:Task')) {
-	    return { width: 100, height: 80 };
-	  }
-
-	  if (is(bo, 'bpmn:Gateway')) {
-	    return { width: 50, height: 50 };
-	  }
-
-	  if (is(bo, 'bpmn:Event')) {
-	    return { width: 36, height: 36 };
-	  }
-
-	  if (is(bo, 'bpmn:Participant')) {
-	    var isHorizontalPool = di.isHorizontal === undefined || di.isHorizontal === true;
-	    if (isExpanded(bo, di)) {
-	      if (isHorizontalPool) {
-	        return { width: 600, height: 250 };
-	      }
-	      return { width: 250, height: 600 };
-	    } else {
-	      if (isHorizontalPool) {
-	        return { width: 400, height: 60 };
-	      }
-	      return { width: 60, height: 400 };
-	    }
-	  }
-
-	  if (is(bo, 'bpmn:Lane')) {
-	    return { width: 400, height: 100 };
-	  }
-
-	  if (is(bo, 'bpmn:DataObjectReference')) {
-	    return { width: 36, height: 50 };
-	  }
-
-	  if (is(bo, 'bpmn:DataStoreReference')) {
-	    return { width: 50, height: 50 };
-	  }
-
-	  if (is(bo, 'bpmn:TextAnnotation')) {
-	    return { width: 100, height: 40 };
-	  }
-
-	  if (is(bo, 'bpmn:Group')) {
-	    return { width: 300, height: 300 };
-	  }
-
-	  return { width: 100, height: 80 };
+	  return getDefaultSize(element, di);
 	};