bpmn-js 18.19.0 → 18.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -57,6 +57,7 @@
57
57
 
58
58
  --popup-font-family: "IBM Plex Sans", sans-serif;
59
59
  --popup-font-size: 14px;
60
+ --popup-secondary-font-size: .9em;
60
61
  --popup-header-entry-selected-color: var(--color-blue-205-100-50);
61
62
  --popup-header-font-weight: bolder;
62
63
  --popup-header-group-divider-color: var(--color-grey-225-10-75);
@@ -696,7 +697,7 @@
696
697
 
697
698
  .djs-popup-search-count {
698
699
  margin: 0 12px;
699
- font-size: 11px;
700
+ font-size: var(--popup-secondary-font-size);
700
701
  color: var(--popup-description-color);
701
702
  }
702
703
 
@@ -708,6 +709,16 @@
708
709
  padding-right: 9px;
709
710
  }
710
711
 
712
+ /**
713
+ * The results list is focusable (as a listbox holding
714
+ * `aria-activedescendant`) when there is no search field.
715
+ * The active entry is indicated via `.entry.selected`, so we hide
716
+ * the outline on the list container itself.
717
+ */
718
+ .djs-popup-results:focus {
719
+ outline: none;
720
+ }
721
+
711
722
  .djs-popup-group {
712
723
  margin: 0;
713
724
  padding: 0;
@@ -773,7 +784,7 @@
773
784
  }
774
785
 
775
786
  .djs-popup-entry-description {
776
- font-size: .9em;
787
+ font-size: var(--popup-secondary-font-size);
777
788
  margin-top: .25em;
778
789
 
779
790
  color: var(--popup-description-color);
@@ -815,14 +826,28 @@
815
826
  color: var(--popup-no-results-color);
816
827
  }
817
828
 
829
+ .djs-popup-footer {
830
+ display: flex;
831
+ padding: 5px 12px 7px 12px;
832
+ border-top: solid 1px var(--popup-border-color);
833
+ }
834
+
835
+ /**
836
+ * The footer holds the keyboard/assistive-technology reachable documentation
837
+ * link. Mouse users get the per-entry `.djs-popup-entry-docs` affordance on
838
+ * hover instead, so the (redundant) footer link is hidden while the results
839
+ * list is hovered and shown during keyboard navigation.
840
+ */
841
+ .djs-popup-results:hover ~ .djs-popup-footer {
842
+ display: none;
843
+ }
844
+
818
845
  .djs-popup-entry-docs {
819
846
  display: none;
820
847
  margin-left: 3px;
821
848
  color: var(--popup-description-color);
822
849
  }
823
850
 
824
- .djs-popup-body .entry:focus-within .djs-popup-entry-docs,
825
- .djs-popup-body .entry:focus .djs-popup-entry-docs,
826
851
  .djs-popup-body .entry:hover .djs-popup-entry-docs {
827
852
  display: inline;
828
853
  }
@@ -832,6 +857,24 @@
832
857
  margin: 2px;
833
858
  }
834
859
 
860
+ .djs-popup-footer-docs {
861
+ display: inline-flex;
862
+ align-items: center;
863
+ gap: 3px;
864
+ font-size: var(--popup-secondary-font-size);
865
+ color: var(--popup-description-color);
866
+ text-decoration: none;
867
+ }
868
+
869
+ .djs-popup-footer-docs:hover {
870
+ text-decoration: underline;
871
+ }
872
+
873
+ .djs-popup-footer-docs svg {
874
+ vertical-align: middle;
875
+ margin: 2px;
876
+ }
877
+
835
878
  /**
836
879
  * palette styles
837
880
  */
@@ -885,6 +928,10 @@
885
928
  display: none;
886
929
  }
887
930
 
931
+ .djs-bendpoint.floating:not(.positioned) {
932
+ display: none;
933
+ }
934
+
888
935
  .djs-segment-dragger:hover .djs-visual,
889
936
  .djs-segment-dragger.djs-dragging .djs-visual,
890
937
  .djs-bendpoint:hover .djs-visual,