bpmn-js 18.20.0 → 18.22.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);
@@ -527,7 +528,6 @@
527
528
  .djs-popup {
528
529
  line-height: 1;
529
530
  box-sizing: border-box;
530
- width: min-content;
531
531
  background: var(--popup-background-color);
532
532
  overflow: hidden;
533
533
  position: fixed;
@@ -535,6 +535,7 @@
535
535
  box-shadow: 0px 2px 6px var(--popup-shadow-color);
536
536
  border: solid 1px var(--popup-border-color);
537
537
  min-width: 120px;
538
+ max-width: 300px;
538
539
  outline: none;
539
540
  font-size: var(--popup-font-size);
540
541
  font-family: var(--popup-font-family);
@@ -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
  */