camunda-bpmn-js 0.12.1 → 0.13.0-drilldown.0

package/CHANGELOG.md

@@ -6,6 +6,29 @@ All notable changes to [camunda-bpmn-js](https://github.com/camunda/camunda-bpmn
 
 ___Note:__ Yet to be released changes appear here._
 
+## 0.13.0-alpha.1
+
+* `FEAT`: include documentation fields in properties panel for Camunda Cloud ([#83](https://github.com/camunda/camunda-bpmn-js/issues/83))
+* `DEPS`: update to `bpmn-js-properties-panel@1.0.0-alpha.1` ([faf55e](https://github.com/camunda/camunda-bpmn-js/commit/faf55e958e7b8faf57a6b3cf0a8e6b496e59266d))
+* `DEPS`: update to `bpmn-js@8.9.1` ([faf55e](https://github.com/camunda/camunda-bpmn-js/commit/faf55e958e7b8faf57a6b3cf0a8e6b496e59266d))
+* `DEPS`: update to `diagram-js@7.8.2` ([faf55e](https://github.com/camunda/camunda-bpmn-js/commit/faf55e958e7b8faf57a6b3cf0a8e6b496e59266d))
+
+## 0.13.0-alpha.0
+
+* `FEAT`: support Zeebe 1.3 features ([#71](https://github.com/camunda/camunda-bpmn-js/issues/71))
+* `DEPS`: migrate to `bpmn-js-properties-panel@1.0.0-alpha.0` ([#71](https://github.com/camunda/camunda-bpmn-js/issues/71))
+* `DEPS`: update to `bpmn-js@8.8.3` ([#74](https://github.com/camunda/camunda-bpmn-js/pull/74))
+
+### Breaking Changes
+
+* Extensions to `bpmn-js-properties-panel@0.x` no longer work with the `1.x` series.
+  Read [the project's changelog for details](https://github.com/bpmn-io/bpmn-js-properties-panel/blob/next/CHANGELOG.md#breaking-changes).
+
+## 0.12.2
+
+* `FEAT`: behavior for Cloud to ensure that no empty `zeebe:AssignmentDefinitions`
+  remain in the model after modeling or propertyPanel operations ([e26c486](https://github.com/camunda/camunda-bpmn-js/commit/e26c486bac3b54202fdf6c2b09d64483b52a2298))
+
 ## 0.12.1
 
 * `DEPS`: update to `zeebe-bpmn-moddle@0.10.0`

package/dist/assets/base-modeler.css

@@ -1,4 +1,5 @@
 @import './diagram-js.css';
+@import './bpmn-js.css';
 @import './bpmn-font/css/bpmn-embedded.css';
 @import './diagram-js-minimap.css';
-@import './bpmn-js-properties-panel.css';
+@import './properties-panel.css';

package/dist/assets/bpmn-js.css

@@ -0,0 +1,113 @@
+.bjs-container {
+  --bjs-font-family: Arial, sans-serif;
+
+  --color-grey-225-10-15: hsl(225, 10%, 15%);
+  --color-grey-225-10-35: hsl(225, 10%, 35%);
+  --color-grey-225-10-55: hsl(225, 10%, 55%);
+  --color-grey-225-10-75: hsl(225, 10%, 75%);
+  --color-grey-225-10-80: hsl(225, 10%, 80%);
+  --color-grey-225-10-85: hsl(225, 10%, 85%);
+  --color-grey-225-10-90: hsl(225, 10%, 90%);
+  --color-grey-225-10-95: hsl(225, 10%, 95%); 
+  --color-grey-225-10-97: hsl(225, 10%, 97%);
+
+  --color-blue-205-100-45: hsl(205, 100%, 45%);
+  --color-blue-205-100-45-opacity-30: hsla(205, 100%, 45%, 30%);
+  --color-blue-205-100-50: hsl(205, 100%, 50%);
+  --color-blue-205-100-95: hsl(205, 100%, 95%);
+
+  --color-green-150-86-44: hsl(150, 86%, 44%);
+
+  --color-red-360-100-40: hsl(360, 100%, 40%);
+  --color-red-360-100-45: hsl(360, 100%, 45%);
+  --color-red-360-100-92: hsl(360, 100%, 92%);
+  --color-red-360-100-97: hsl(360, 100%, 97%);
+
+  --color-white: hsl(0, 0%, 100%);
+  --color-black: hsl(0, 0%, 0%); 
+  --color-black-opacity-05: hsla(0, 0%, 0%, 5%); 
+  --color-black-opacity-10: hsla(0, 0%, 0%, 10%);
+
+  --breadcrumbs-font-family: var(--bjs-font-family);
+  --breadcrumbs-item-color: var(--color-blue-205-100-50);
+  --breadcrumbs-arrow-color: var(--color-black);
+  --drilldown-fill-color: var(--color-white);
+  --drilldown-background-color: var(--color-blue-205-100-50);
+}
+
+.bjs-breadcrumbs {
+  position: absolute;
+  display: none;
+  flex-wrap: wrap;
+  align-items: center;
+  top: 10px;
+  font-family: var(--breadcrumbs-font-family);
+  font-size: 16px;
+  line-height: normal;
+}
+
+.bjs-breadcrumbs-shown .bjs-breadcrumbs {
+  display: flex;
+}
+
+.djs-palette-shown .bjs-breadcrumbs {
+  left: 50px;
+}
+
+.djs-palette-shown.djs-palette-two-column .bjs-breadcrumbs {
+  left: 100px;
+}
+
+.bjs-breadcrumbs li {
+  display: inline-flex;
+  padding-bottom: 5px;
+}
+
+.bjs-breadcrumbs li a {
+  cursor: pointer;
+  color: var(--breadcrumbs-item-color);
+}
+
+.bjs-breadcrumbs li:last-of-type a {
+  color: inherit;
+  cursor: default;
+}
+
+.bjs-breadcrumbs li:not(:first-child)::before {
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" /><path d="M0 0h24v24H0z" fill="none" /></svg>');
+  padding: 0 8px;
+  color: var(--breadcrumbs-arrow-color);
+  height: 1em;
+}
+
+.bjs-breadcrumbs .bpmnjs-crumb {
+  display: inline-block;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bjs-drilldown {
+  width: 20px;
+  height: 20px;
+
+  padding: 0px;
+  margin-left: -20px;
+
+  cursor: pointer;
+  border: none;
+  border-radius: 2px;
+  outline: none;
+
+  fill: var(--drilldown-fill-color);
+  background-color: var(--drilldown-background-color);
+}
+
+.bjs-drilldown-empty {
+  display: none;
+}
+
+.selected .bjs-drilldown-empty {
+  display: inherit;
+}

package/dist/assets/camunda-platform-modeler.css

@@ -1 +1,2 @@
-@import './base-modeler.css';
+@import './base-modeler.css';
+@import './element-templates.css';

package/dist/assets/diagram-js.css

@@ -2,84 +2,86 @@
  * color definitions
  */
 .djs-container {
-  --blue-base-65: #4d90ff;
-  --blue-base-65-opacity-30: rgba(77, 144, 255, 0.3);
-  --blue-darken-48: #005df7;
-  --blue-darken-55: #1a70ff;
-  --blue-lighten-82: #a2c5ff;
-
-  --red-base-62: #ff3d3d;
-  --red-base-62-lighten-90: rgb(255, 235, 235);
-
-  --silver-darken-94: #efefef;
-
-  --color-000000: #000000;
-  --color-000000-opacity-05: rgba(0, 0, 0, 0.05);
-  --color-000000-opacity-10: rgba(0, 0, 0, 0.1);
-  --color-333333: #333333;
-  --color-666666: #666666;
-  --color-aaaaaa: #aaaaaa;
-  --color-cccccc: #cccccc;
-  --color-cdcdcd: #cdcdcd;
-  --color-dddddd: #dddddd;
-  --color-f6f6f6: #f6f6f6;
-  --color-fafafa: #fafafa;
-  --color-fefefe: #fefefe;
-  --color-ffffff: #ffffff;
-
-  --bendpoint-fill-color: var(--blue-base-65-opacity-30);
-  --bendpoint-stroke-color: var(--blue-base-65);
-
-  --context-pad-entry-background-color: var(--color-fefefe);
-  --context-pad-entry-hover-background-color: var(--silver-darken-94);
-
-  --element-dragger-color: var(--blue-base-65);
-  --element-hover-outline-fill-color: var(--blue-darken-48);
-  --element-selected-outline-stroke-color: var(--blue-base-65);
-
-  --lasso-fill-color: var(--color-000000-opacity-05);
-  --lasso-stroke-color: var(--color-000000);
-
-  --palette-entry-color: var(--color-333333);
-  --palette-entry-hover-color: var(--blue-darken-48);
-  --palette-entry-selected-color: var(--blue-base-65);
-  --palette-separator-color: var(--color-aaaaaa);
-  --palette-toggle-hover-background-color: var(--color-666666);
-  --palette-background-color: var(--color-fafafa);
-  --palette-border-color: var(--color-cccccc);
-
-  --popup-body-background-color: var(--color-fefefe);
-  --popup-header-entry-selected-color: var(--blue-base-65);
-  --popup-header-entry-selected-background-color: var(--color-000000-opacity-10);
-  --popup-header-separator-color: var(--color-dddddd);
-  --popup-background-color: var(--color-fafafa);
-  --popup-border-color: var(--color-cccccc);
-
-  --resizer-fill-color: var(--blue-base-65-opacity-30);
-  --resizer-stroke-color: var(--blue-base-65);
-
-  --search-container-background-color: var(--color-fafafa);
-  --search-container-border-color: var(--blue-darken-55);
-  --search-container-box-shadow-color: var(--blue-lighten-82);
-  --search-container-box-shadow-inset-color: var(--color-cdcdcd);
-  --search-input-border-color: var(--color-cccccc);
-  --search-result-border-color: var(--color-aaaaaa);
-  --search-result-highlight-color: var(--color-000000);
-  --search-result-selected-color: var(--blue-base-65-opacity-30);
-
-  --shape-attach-allowed-stroke-color: var(--blue-base-65);
-  --shape-connect-allowed-fill-color: var(--color-f6f6f6);
-  --shape-drop-allowed-fill-color: var(--color-f6f6f6);
-  --shape-drop-not-allowed-fill-color: var(--red-base-62-lighten-90);
-  --shape-resize-preview-stroke-color: var(--blue-base-65);
-
-  --snap-line-stroke-color: var(--blue-base-65-opacity-30);
-
-  --space-tool-crosshair-stroke-color: var(--color-000000);
-
-  --tooltip-error-background-color: var(--red-base-62-lighten-90);
-  --tooltip-error-border-color: var(--red-base-62);
-  --tooltip-error-color: var(--red-base-62);
+  --color-grey-225-10-15: hsl(225, 10%, 15%);
+  --color-grey-225-10-35: hsl(225, 10%, 35%);
+  --color-grey-225-10-55: hsl(225, 10%, 55%);
+  --color-grey-225-10-75: hsl(225, 10%, 75%);
+  --color-grey-225-10-80: hsl(225, 10%, 80%);
+  --color-grey-225-10-85: hsl(225, 10%, 85%);
+  --color-grey-225-10-90: hsl(225, 10%, 90%);
+  --color-grey-225-10-95: hsl(225, 10%, 95%); 
+  --color-grey-225-10-97: hsl(225, 10%, 97%);
+
+  --color-blue-205-100-45: hsl(205, 100%, 45%);
+  --color-blue-205-100-45-opacity-30: hsla(205, 100%, 45%, 30%);
+  --color-blue-205-100-50: hsl(205, 100%, 50%);
+  --color-blue-205-100-95: hsl(205, 100%, 95%);
+
+  --color-green-150-86-44: hsl(150, 86%, 44%);
+
+  --color-red-360-100-40: hsl(360, 100%, 40%);
+  --color-red-360-100-45: hsl(360, 100%, 45%);
+  --color-red-360-100-92: hsl(360, 100%, 92%);
+  --color-red-360-100-97: hsl(360, 100%, 97%);
+
+  --color-white: hsl(0, 0%, 100%);
+  --color-black: hsl(0, 0%, 0%); 
+  --color-black-opacity-05: hsla(0, 0%, 0%, 5%); 
+  --color-black-opacity-10: hsla(0, 0%, 0%, 10%);
+
+  --bendpoint-fill-color: var(--color-blue-205-100-45-opacity-30);
+  --bendpoint-stroke-color: var(--color-blue-205-100-50);
+
+  --context-pad-entry-background-color: var(--color-white);
+  --context-pad-entry-hover-background-color: var(--color-grey-225-10-95);
+
+  --element-dragger-color: var(--color-blue-205-100-50);
+  --element-hover-outline-fill-color: var(--color-blue-205-100-45);
+  --element-selected-outline-stroke-color: var(--color-blue-205-100-50);
+
+  --lasso-fill-color: var(--color-black-opacity-05);
+  --lasso-stroke-color: var(--color-black);
+
+  --palette-entry-color: var(--color-grey-225-10-15);
+  --palette-entry-hover-color: var(--color-blue-205-100-45);
+  --palette-entry-selected-color: var(--color-blue-205-100-50);
+  --palette-separator-color: var(--color-grey-225-10-75);
+  --palette-toggle-hover-background-color: var(--color-grey-225-10-55);
+  --palette-background-color: var(--color-grey-225-10-97);
+  --palette-border-color: var(--color-grey-225-10-75);
+
+  --popup-body-background-color: var(--color-white);
+  --popup-header-entry-selected-color: var(--color-blue-205-100-50);
+  --popup-header-entry-selected-background-color: var(--color-black-opacity-10);
+  --popup-header-separator-color: var(--color-grey-225-10-75);
+  --popup-background-color: var(--color-grey-225-10-97);
+  --popup-border-color: var(--color-grey-225-10-75);
+
+  --resizer-fill-color: var(--color-blue-205-100-45-opacity-30);
+  --resizer-stroke-color: var(--color-blue-205-100-50);
+
+  --search-container-background-color: var(--color-grey-225-10-97);
+  --search-container-border-color: var(--color-blue-205-100-50);
+  --search-container-box-shadow-color: var(--color-blue-205-100-95);
+  --search-container-box-shadow-inset-color: var(--color-grey-225-10-80);
+  --search-input-border-color: var(--color-grey-225-10-75);
+  --search-result-border-color: var(--color-grey-225-10-75);
+  --search-result-highlight-color: var(--color-black);
+  --search-result-selected-color: var(--color-blue-205-100-45-opacity-30);
+
+  --shape-attach-allowed-stroke-color: var(--color-blue-205-100-50);
+  --shape-connect-allowed-fill-color: var(--color-grey-225-10-97);
+  --shape-drop-allowed-fill-color: var(--color-grey-225-10-97);
+  --shape-drop-not-allowed-fill-color: var(--color-red-360-100-97);
+  --shape-resize-preview-stroke-color: var(--color-blue-205-100-50);
+
+  --snap-line-stroke-color: var(--color-blue-205-100-45-opacity-30);
+
+  --space-tool-crosshair-stroke-color: var(--color-black);
+
+  --tooltip-error-background-color: var(--color-red-360-100-97);
+  --tooltip-error-border-color: var(--color-red-360-100-45);
+  --tooltip-error-color: var(--color-red-360-100-45);
 }
 
 /**
@@ -468,6 +470,7 @@ marker.djs-dragger tspan {
  */
 .djs-overlay-context-pad {
   width: 72px;
+  z-index: 100;
 }
 
 .djs-context-pad {
@@ -750,6 +753,7 @@ marker.djs-dragger tspan {
   width: 100%;
   padding: 6px 10px;
   border: 1px solid var(--search-input-border-color);
+  box-sizing: border-box;
 }
 
 .djs-search-input input:focus {

package/dist/assets/element-templates.css

@@ -0,0 +1,75 @@
+.bio-properties-panel {
+  --select-template-background-color: var(--color-blue-205-100-50);
+  --select-template-hover-background-color: var(--color-blue-205-100-45);
+  --select-template-fill-color: var(--color-white);
+  --select-template-label-color: var(--color-white);
+
+  --unknown-template-background-color: var(--color-red-360-100-45);
+  --unknown-template-hover-background-color: var(--color-red-360-100-40);
+
+  --select-template-information-text-color: var(--color-grey-225-10-55);
+}
+
+.bio-properties-panel-templates-group .bio-properties-panel-group-header-button:not(.bio-properties-panel-arrow) {
+  padding-right: 6px;
+  padding-left: 9px;
+  border-radius: 11px;
+}
+
+.bio-properties-panel-applied-template-button .bio-properties-panel-group-header-button,
+.bio-properties-panel-template-update-available .bio-properties-panel-group-header-button,
+.bio-properties-panel-group-header-button.bio-properties-panel-select-template-button {
+  background-color: var(--select-template-background-color);
+  color: var(--select-template-label-color);
+  fill: var(--select-template-fill-color);
+}
+
+.bio-properties-panel-applied-template-button .bio-properties-panel-group-header-button:hover,
+.bio-properties-panel-template-update-available .bio-properties-panel-group-header-button:hover,
+.bio-properties-panel-group-header-button.bio-properties-panel-select-template-button:hover {
+  background-color: var(--select-template-hover-background-color);
+}
+
+.bio-properties-panel-templates-group .bio-properties-panel-group-header-button * {
+  color: inherit;
+}
+
+.bio-properties-panel-templates-group .bio-properties-panel-group-header-button * + * {
+  margin-left: 2px;
+}
+
+.bio-properties-panel-group-header-button.bio-properties-panel-select-template-button:last-child {
+  padding-right: 9px;
+  padding-left: 6px;
+  margin-right: 22px;
+}
+
+.bio-properties-panel-template-update-available:last-child,
+.bio-properties-panel-applied-template-button:last-child,
+.bio-properties-panel-template-not-found:last-child {
+  margin-right: 32px;
+}
+
+.bio-properties-panel-remove-template {
+  color: var(--text-error-color);
+}
+
+.bio-properties-panel-template-not-found .bio-properties-panel-group-header-button {
+  background-color: var(--unknown-template-background-color);
+  color: var(--select-template-label-color);
+  fill: var(--select-template-fill-color);
+}
+
+.bio-properties-panel-template-not-found .bio-properties-panel-group-header-button:hover {
+  background-color: var(--unknown-template-hover-background-color);
+}
+
+.bio-properties-panel-template-not-found-text,
+.bio-properties-panel-template-update-available-text {
+  color: var(--select-template-information-text-color);
+}
+
+.bio-properties-panel-template-not-found-text,
+.bio-properties-panel-template-update-available-text {
+  width: 216px;
+}

package/dist/assets/properties-panel.css

@@ -29,7 +29,12 @@
 
   --text-base-color: var(--color-grey-225-10-15);
   --text-error-color: var(--color-red-360-100-45);
+  --link-color: var(--color-blue-205-100-50);
+
   --description-color: var(--color-grey-225-10-35);
+  --description-code-background-color: var(--color-grey-225-10-97);
+  --description-code-border-color: var(--color-grey-225-10-85);
+  --description-list-item-color: var(--color-grey-225-10-35);
 
   --placeholder-color: var(--color-grey-225-10-75);
 
@@ -41,7 +46,6 @@
   --group-bottom-border-color: var(--color-grey-225-10-75);
 
   --add-entry-fill-color: var(--color-grey-225-10-35);
-  --add-entry-empty-fill-color: var(--color-grey-225-10-75);
   --add-entry-hover-fill-color: var(--color-white);
   --add-entry-hover-background-color: var(--color-blue-205-100-50);
   --add-entry-label-color: var(--color-white);
@@ -51,7 +55,6 @@
 
   --arrow-fill-color: var(--color-grey-225-10-35);
   --arrow-hover-background-color: var(--color-grey-225-10-95);
-  --arrow-empty-fill-color: var(--color-grey-225-10-75);
 
   --dot-color: var(--color-grey-225-10-35);
 
@@ -68,6 +71,10 @@
   --input-error-border-color: var(--color-red-360-100-45);
   --input-error-focus-border-color: var(--color-red-360-100-45);
 
+  --input-disabled-color: var(--color-grey-225-10-55);
+  --input-disabled-background-color: var(--color-grey-225-10-97);
+  --input-disabled-border-color: var(--color-grey-225-10-90);
+
   --toggle-switch-on-background-color: var(--color-blue-205-100-50);
   --toggle-switch-off-background-color: var(--color-grey-225-10-75);
   --toggle-switch-switcher-background-color: var(--color-white);
@@ -77,13 +84,16 @@
 
   --list-entry-dot-background-color: var(--color-grey-225-10-35);
   --list-entry-header-button-fill-color: var(--color-grey-225-10-35);
-  --list-entry-add-entry-empty-fill-color: var(--color-white);
   --list-entry-add-entry-empty-background-color: var(--color-blue-205-100-50);
   --list-entry-add-entry-empty-hover-background-color: var(--color-blue-205-100-45);
   --list-entry-add-entry-label-color: var(--color-white);
   --list-entry-add-entry-background-color: var(--color-blue-205-100-50);
   --list-entry-add-entry-fill-color: var(--color-white);
 
+  --dropdown-item-background-color: var(--color-white);
+  --dropdown-item-hover-background-color: var(--color-grey-225-10-95);
+  --dropdown-separator-background-color: var(--color-grey-225-10-75);
+
   --text-size-base: 14px;
   --text-size-small: 13px;
   --text-size-smallest: 12px;
@@ -201,7 +211,6 @@
   font-size: var(--text-size-base);
   height: 32px;
   user-select: none;
-  overflow: hidden;
   justify-content: space-between;
 }
 
@@ -225,7 +234,6 @@
   justify-content: center;
   align-items: center;
   align-self: center;
-  font-size: var(--text-size-small);
   height: 22px;
   line-height: 22px;
   min-width: 22px;
@@ -245,7 +253,6 @@
 }
 
 .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry {
-  fill: var(--add-entry-empty-fill-color);
   margin-right: 69px;
   padding-left: 6px;
 }
@@ -296,10 +303,6 @@
   transform: rotate(90deg);
 }
 
-.bio-properties-panel-group-header.empty .bio-properties-panel-arrow {
-  fill: var(--arrow-empty-fill-color);
-}
-
 .bio-properties-panel-dot {
   align-self: center;
   height: 8px;
@@ -353,7 +356,10 @@
   margin: 2px 0 1px;
 }
 
-.bio-properties-panel-description {
+.bio-properties-panel-description,
+.bio-properties-panel-description p,
+.bio-properties-panel-description span,
+.bio-properties-panel-description div {
   color: var(--description-color);
   display: block;
   margin: 2px 0 4px;
@@ -362,6 +368,34 @@
   font-size: var(--text-size-small);
 }
 
+.bio-properties-panel-description code {
+  color: var(--description-color);
+  font-family: var(--font-family);
+  font-size: var(--text-size-small);
+  line-height: var(--line-height-condensed);
+  padding: 0 2px;
+  background-color: var(--description-code-background-color);
+  border: 1px solid var(--description-code-border-color);
+  border-radius: 3px;
+}
+
+.bio-properties-panel-description ul {
+  padding: 0;
+  margin: 0 0 0 12px;
+  list-style-type: disc;
+}
+
+.bio-properties-panel-description li {
+  color: var(--description-list-item-color);
+  margin: 0 0 0 12px;
+}
+
+.bio-properties-panel-description a {
+  color: var(--link-color);
+  font-size: var(--text-size-small);
+  text-decoration: underline;
+}
+
 .bio-properties-panel-input {
   padding: 3px 6px 2px;
   border: 1px solid var(--input-border-color);
@@ -385,6 +419,12 @@ textarea.bio-properties-panel-input,
   border: 1px solid var(--input-focus-border-color);
 }
 
+.bio-properties-panel-input:disabled {
+  border-color: var(--input-disabled-border-color);
+  background-color: var(--input-disabled-background-color);
+  color: var(--input-disabled-color);
+}
+
 select.bio-properties-panel-input {
   padding: 4px 6px;
 }
@@ -398,6 +438,11 @@ select.bio-properties-panel-input {
   vertical-align: middle;
 }
 
+.bio-properties-panel-input[type="checkbox"]:focus {
+  outline: 1px solid var(--input-focus-border-color);
+  outline-offset: 0;
+}
+
 .bio-properties-panel-checkbox > .bio-properties-panel-label {
   display: inline-block;
   font-size: var(--text-size-base);
@@ -589,7 +634,9 @@ textarea.bio-properties-panel-input {
 }
 
 .bio-properties-panel-list-entry-item:hover .bio-properties-panel-remove-list-entry,
-.bio-properties-panel-collapsible-entry:hover > .bio-properties-panel-collapsible-entry-header .bio-properties-panel-remove-entry {
+.bio-properties-panel-collapsible-entry:hover > .bio-properties-panel-collapsible-entry-header .bio-properties-panel-remove-entry,
+.bio-properties-panel-collapsible-entry:focus-within > .bio-properties-panel-collapsible-entry-header .bio-properties-panel-remove-entry
+{
   visibility: visible;
 }
 
@@ -744,16 +791,10 @@ textarea.bio-properties-panel-input {
 }
 
 .bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry {
-  fill: var(--list-entry-add-entry-empty-fill-color);
-  background-color: var(--list-entry-add-entry-empty-background-color);
   margin-right: 16px;
   padding-left: 6px;
 }
 
-.bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry:hover {
-  background-color: var(--list-entry-add-entry-empty-hover-background-color);
-}
-
 .bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry-label {
   color: var(--list-entry-add-entry-label-color);
   padding: 4px 6px 3px 2px;
@@ -778,3 +819,59 @@ textarea.bio-properties-panel-input {
   border-bottom-left-radius: 2px;
   border-bottom-right-radius: 2px;
 }
+
+.bio-properties-panel-dropdown-button {
+  position: relative;
+
+  --dropdown-button-margin: 5px;
+}
+
+.bio-properties-panel-dropdown-button:not(.open) .bio-properties-panel-dropdown-button__menu {
+  display: none;
+}
+
+.bio-properties-panel-dropdown-button__menu {
+  min-width: calc(100% - var(--dropdown-button-margin) * 2);
+  max-width: 240px;
+
+  position: absolute;
+  top: calc(100% - var(--dropdown-button-margin));
+  right: var(--dropdown-button-margin);
+  z-index: 101;
+
+  background-color: var(--dropdown-item-background-color);
+
+  padding: 8px 0;
+
+  box-shadow: 0 1px 4px 0 var(--color-grey-225-10-85), 0 2px 16px 0 var(--color-grey-225-10-75)
+}
+
+.bio-properties-panel-dropdown-button__menu-item {
+  display: block;
+  width: 100%;
+  padding: 4px 12px;
+
+  font-size: var(--text-size-small);
+  appearance: revert;
+  border: unset;
+  background: unset;
+  text-align: unset;
+}
+
+.bio-properties-panel-dropdown-button__menu-item--separator {
+  width: 100%;
+  height: 1px;
+
+  padding: 0;
+  margin: 8px 0;
+
+  background-color: var(--dropdown-separator-background-color);
+}
+
+.bio-properties-panel-dropdown-button__menu-item--actionable {
+  font-size: var(--text-size-base);
+}
+
+.bio-properties-panel-dropdown-button__menu-item--actionable:hover {
+  background-color: var(--dropdown-item-hover-background-color);
+}