diff --git a/__tests__/html2/part-grouping/copilot-deprecated.dark.html.snap-9.png b/__tests__/html2/part-grouping/copilot-deprecated.dark.html.snap-9.png
index d6a74055d6..0e33f89c6f 100644
Binary files a/__tests__/html2/part-grouping/copilot-deprecated.dark.html.snap-9.png and b/__tests__/html2/part-grouping/copilot-deprecated.dark.html.snap-9.png differ
diff --git a/__tests__/html2/part-grouping/copilot-deprecated.html.snap-9.png b/__tests__/html2/part-grouping/copilot-deprecated.html.snap-9.png
index 4d344faad6..bd3fb4f108 100644
Binary files a/__tests__/html2/part-grouping/copilot-deprecated.html.snap-9.png and b/__tests__/html2/part-grouping/copilot-deprecated.html.snap-9.png differ
diff --git a/__tests__/html2/part-grouping/copilot.dark.html.snap-9.png b/__tests__/html2/part-grouping/copilot.dark.html.snap-9.png
index f1a4763ae2..466006a618 100644
Binary files a/__tests__/html2/part-grouping/copilot.dark.html.snap-9.png and b/__tests__/html2/part-grouping/copilot.dark.html.snap-9.png differ
diff --git a/__tests__/html2/part-grouping/copilot.html.snap-9.png b/__tests__/html2/part-grouping/copilot.html.snap-9.png
index 9ec59f33fc..10596b3ef8 100644
Binary files a/__tests__/html2/part-grouping/copilot.html.snap-9.png and b/__tests__/html2/part-grouping/copilot.html.snap-9.png differ
diff --git a/__tests__/html2/part-grouping/fluent.dark.html.snap-1.png b/__tests__/html2/part-grouping/fluent.dark.html.snap-1.png
index 5b6025124a..8e9b33bd9d 100644
Binary files a/__tests__/html2/part-grouping/fluent.dark.html.snap-1.png and b/__tests__/html2/part-grouping/fluent.dark.html.snap-1.png differ
diff --git a/__tests__/html2/part-grouping/fluent.dark.html.snap-2.png b/__tests__/html2/part-grouping/fluent.dark.html.snap-2.png
index 127dd2bda5..40c3b603b4 100644
Binary files a/__tests__/html2/part-grouping/fluent.dark.html.snap-2.png and b/__tests__/html2/part-grouping/fluent.dark.html.snap-2.png differ
diff --git a/__tests__/html2/part-grouping/fluent.dark.html.snap-3.png b/__tests__/html2/part-grouping/fluent.dark.html.snap-3.png
index 73bcbe59a4..748135d7ab 100644
Binary files a/__tests__/html2/part-grouping/fluent.dark.html.snap-3.png and b/__tests__/html2/part-grouping/fluent.dark.html.snap-3.png differ
diff --git a/__tests__/html2/part-grouping/fluent.dark.html.snap-4.png b/__tests__/html2/part-grouping/fluent.dark.html.snap-4.png
index f25b7912bb..63986ed00e 100644
Binary files a/__tests__/html2/part-grouping/fluent.dark.html.snap-4.png and b/__tests__/html2/part-grouping/fluent.dark.html.snap-4.png differ
diff --git a/__tests__/html2/part-grouping/fluent.dark.html.snap-5.png b/__tests__/html2/part-grouping/fluent.dark.html.snap-5.png
index f8e2c58658..f9035855b4 100644
Binary files a/__tests__/html2/part-grouping/fluent.dark.html.snap-5.png and b/__tests__/html2/part-grouping/fluent.dark.html.snap-5.png differ
diff --git a/__tests__/html2/part-grouping/fluent.dark.html.snap-6.png b/__tests__/html2/part-grouping/fluent.dark.html.snap-6.png
index e10271aaf0..a77d6b25a5 100644
Binary files a/__tests__/html2/part-grouping/fluent.dark.html.snap-6.png and b/__tests__/html2/part-grouping/fluent.dark.html.snap-6.png differ
diff --git a/__tests__/html2/part-grouping/fluent.dark.html.snap-7.png b/__tests__/html2/part-grouping/fluent.dark.html.snap-7.png
index 44c7dd3b1d..f99ad496bf 100644
Binary files a/__tests__/html2/part-grouping/fluent.dark.html.snap-7.png and b/__tests__/html2/part-grouping/fluent.dark.html.snap-7.png differ
diff --git a/__tests__/html2/part-grouping/fluent.dark.html.snap-8.png b/__tests__/html2/part-grouping/fluent.dark.html.snap-8.png
index c92bfc8a9e..fd633b523b 100644
Binary files a/__tests__/html2/part-grouping/fluent.dark.html.snap-8.png and b/__tests__/html2/part-grouping/fluent.dark.html.snap-8.png differ
diff --git a/__tests__/html2/part-grouping/fluent.dark.html.snap-9.png b/__tests__/html2/part-grouping/fluent.dark.html.snap-9.png
index f753e32050..47627d00fc 100644
Binary files a/__tests__/html2/part-grouping/fluent.dark.html.snap-9.png and b/__tests__/html2/part-grouping/fluent.dark.html.snap-9.png differ
diff --git a/__tests__/html2/part-grouping/fluent.html.snap-1.png b/__tests__/html2/part-grouping/fluent.html.snap-1.png
index 9ea711f6a6..c9b3376a85 100644
Binary files a/__tests__/html2/part-grouping/fluent.html.snap-1.png and b/__tests__/html2/part-grouping/fluent.html.snap-1.png differ
diff --git a/__tests__/html2/part-grouping/fluent.html.snap-2.png b/__tests__/html2/part-grouping/fluent.html.snap-2.png
index 9493690bcd..eb7dda4125 100644
Binary files a/__tests__/html2/part-grouping/fluent.html.snap-2.png and b/__tests__/html2/part-grouping/fluent.html.snap-2.png differ
diff --git a/__tests__/html2/part-grouping/fluent.html.snap-3.png b/__tests__/html2/part-grouping/fluent.html.snap-3.png
index b401dbb3ab..efdee78b66 100644
Binary files a/__tests__/html2/part-grouping/fluent.html.snap-3.png and b/__tests__/html2/part-grouping/fluent.html.snap-3.png differ
diff --git a/__tests__/html2/part-grouping/fluent.html.snap-4.png b/__tests__/html2/part-grouping/fluent.html.snap-4.png
index 496dc7ac51..150e944ac6 100644
Binary files a/__tests__/html2/part-grouping/fluent.html.snap-4.png and b/__tests__/html2/part-grouping/fluent.html.snap-4.png differ
diff --git a/__tests__/html2/part-grouping/fluent.html.snap-5.png b/__tests__/html2/part-grouping/fluent.html.snap-5.png
index 716c6c3f5d..ddddfd181e 100644
Binary files a/__tests__/html2/part-grouping/fluent.html.snap-5.png and b/__tests__/html2/part-grouping/fluent.html.snap-5.png differ
diff --git a/__tests__/html2/part-grouping/fluent.html.snap-6.png b/__tests__/html2/part-grouping/fluent.html.snap-6.png
index 346fe57ec5..1304bf6429 100644
Binary files a/__tests__/html2/part-grouping/fluent.html.snap-6.png and b/__tests__/html2/part-grouping/fluent.html.snap-6.png differ
diff --git a/__tests__/html2/part-grouping/fluent.html.snap-7.png b/__tests__/html2/part-grouping/fluent.html.snap-7.png
index db7709c5ae..247f4c2621 100644
Binary files a/__tests__/html2/part-grouping/fluent.html.snap-7.png and b/__tests__/html2/part-grouping/fluent.html.snap-7.png differ
diff --git a/__tests__/html2/part-grouping/fluent.html.snap-8.png b/__tests__/html2/part-grouping/fluent.html.snap-8.png
index c75fd77eb2..ec261d0fe7 100644
Binary files a/__tests__/html2/part-grouping/fluent.html.snap-8.png and b/__tests__/html2/part-grouping/fluent.html.snap-8.png differ
diff --git a/__tests__/html2/part-grouping/fluent.html.snap-9.png b/__tests__/html2/part-grouping/fluent.html.snap-9.png
index 3390a296fb..cf3db90bb4 100644
Binary files a/__tests__/html2/part-grouping/fluent.html.snap-9.png and b/__tests__/html2/part-grouping/fluent.html.snap-9.png differ
diff --git a/__tests__/html2/part-grouping/folded.copilot.dark.html b/__tests__/html2/part-grouping/folded.copilot.dark.html
new file mode 100644
index 0000000000..35474c213d
--- /dev/null
+++ b/__tests__/html2/part-grouping/folded.copilot.dark.html
@@ -0,0 +1,10 @@
+
+
+
+ Part grouping folded (copilot) (dark)
+
+
+
+
diff --git a/__tests__/html2/part-grouping/folded.copilot.dark.html.snap-1.png b/__tests__/html2/part-grouping/folded.copilot.dark.html.snap-1.png
new file mode 100644
index 0000000000..6597d01acb
Binary files /dev/null and b/__tests__/html2/part-grouping/folded.copilot.dark.html.snap-1.png differ
diff --git a/__tests__/html2/part-grouping/folded.copilot.dark.html.snap-10.png b/__tests__/html2/part-grouping/folded.copilot.dark.html.snap-10.png
new file mode 100644
index 0000000000..5e63111b1f
Binary files /dev/null and b/__tests__/html2/part-grouping/folded.copilot.dark.html.snap-10.png differ
diff --git a/__tests__/html2/part-grouping/folded.copilot.dark.html.snap-2.png b/__tests__/html2/part-grouping/folded.copilot.dark.html.snap-2.png
new file mode 100644
index 0000000000..0f71451b6e
Binary files /dev/null and b/__tests__/html2/part-grouping/folded.copilot.dark.html.snap-2.png differ
diff --git a/__tests__/html2/part-grouping/folded.copilot.dark.html.snap-3.png b/__tests__/html2/part-grouping/folded.copilot.dark.html.snap-3.png
new file mode 100644
index 0000000000..ac5b84ed6c
Binary files /dev/null and b/__tests__/html2/part-grouping/folded.copilot.dark.html.snap-3.png differ
diff --git a/__tests__/html2/part-grouping/folded.copilot.dark.html.snap-4.png b/__tests__/html2/part-grouping/folded.copilot.dark.html.snap-4.png
new file mode 100644
index 0000000000..ac5b84ed6c
Binary files /dev/null and b/__tests__/html2/part-grouping/folded.copilot.dark.html.snap-4.png differ
diff --git a/__tests__/html2/part-grouping/folded.copilot.dark.html.snap-5.png b/__tests__/html2/part-grouping/folded.copilot.dark.html.snap-5.png
new file mode 100644
index 0000000000..26814a9ebb
Binary files /dev/null and b/__tests__/html2/part-grouping/folded.copilot.dark.html.snap-5.png differ
diff --git a/__tests__/html2/part-grouping/folded.copilot.dark.html.snap-6.png b/__tests__/html2/part-grouping/folded.copilot.dark.html.snap-6.png
new file mode 100644
index 0000000000..d670a4992b
Binary files /dev/null and b/__tests__/html2/part-grouping/folded.copilot.dark.html.snap-6.png differ
diff --git a/__tests__/html2/part-grouping/folded.copilot.dark.html.snap-7.png b/__tests__/html2/part-grouping/folded.copilot.dark.html.snap-7.png
new file mode 100644
index 0000000000..23ec5f01dc
Binary files /dev/null and b/__tests__/html2/part-grouping/folded.copilot.dark.html.snap-7.png differ
diff --git a/__tests__/html2/part-grouping/folded.copilot.dark.html.snap-8.png b/__tests__/html2/part-grouping/folded.copilot.dark.html.snap-8.png
new file mode 100644
index 0000000000..3e89ded7d1
Binary files /dev/null and b/__tests__/html2/part-grouping/folded.copilot.dark.html.snap-8.png differ
diff --git a/__tests__/html2/part-grouping/folded.copilot.dark.html.snap-9.png b/__tests__/html2/part-grouping/folded.copilot.dark.html.snap-9.png
new file mode 100644
index 0000000000..2b7108b482
Binary files /dev/null and b/__tests__/html2/part-grouping/folded.copilot.dark.html.snap-9.png differ
diff --git a/__tests__/html2/part-grouping/folded.copilot.html b/__tests__/html2/part-grouping/folded.copilot.html
new file mode 100644
index 0000000000..fa076fe57f
--- /dev/null
+++ b/__tests__/html2/part-grouping/folded.copilot.html
@@ -0,0 +1,10 @@
+
+
+
+ Part grouping folded (copilot)
+
+
+
+
diff --git a/__tests__/html2/part-grouping/folded.copilot.html.snap-1.png b/__tests__/html2/part-grouping/folded.copilot.html.snap-1.png
new file mode 100644
index 0000000000..4b7abe89ff
Binary files /dev/null and b/__tests__/html2/part-grouping/folded.copilot.html.snap-1.png differ
diff --git a/__tests__/html2/part-grouping/folded.copilot.html.snap-10.png b/__tests__/html2/part-grouping/folded.copilot.html.snap-10.png
new file mode 100644
index 0000000000..61b93ed1c5
Binary files /dev/null and b/__tests__/html2/part-grouping/folded.copilot.html.snap-10.png differ
diff --git a/__tests__/html2/part-grouping/folded.copilot.html.snap-2.png b/__tests__/html2/part-grouping/folded.copilot.html.snap-2.png
new file mode 100644
index 0000000000..cb16f4dc7f
Binary files /dev/null and b/__tests__/html2/part-grouping/folded.copilot.html.snap-2.png differ
diff --git a/__tests__/html2/part-grouping/folded.copilot.html.snap-3.png b/__tests__/html2/part-grouping/folded.copilot.html.snap-3.png
new file mode 100644
index 0000000000..db1bfe2ae8
Binary files /dev/null and b/__tests__/html2/part-grouping/folded.copilot.html.snap-3.png differ
diff --git a/__tests__/html2/part-grouping/folded.copilot.html.snap-4.png b/__tests__/html2/part-grouping/folded.copilot.html.snap-4.png
new file mode 100644
index 0000000000..db1bfe2ae8
Binary files /dev/null and b/__tests__/html2/part-grouping/folded.copilot.html.snap-4.png differ
diff --git a/__tests__/html2/part-grouping/folded.copilot.html.snap-5.png b/__tests__/html2/part-grouping/folded.copilot.html.snap-5.png
new file mode 100644
index 0000000000..a81e821113
Binary files /dev/null and b/__tests__/html2/part-grouping/folded.copilot.html.snap-5.png differ
diff --git a/__tests__/html2/part-grouping/folded.copilot.html.snap-6.png b/__tests__/html2/part-grouping/folded.copilot.html.snap-6.png
new file mode 100644
index 0000000000..d066bece49
Binary files /dev/null and b/__tests__/html2/part-grouping/folded.copilot.html.snap-6.png differ
diff --git a/__tests__/html2/part-grouping/folded.copilot.html.snap-7.png b/__tests__/html2/part-grouping/folded.copilot.html.snap-7.png
new file mode 100644
index 0000000000..ba80dfde05
Binary files /dev/null and b/__tests__/html2/part-grouping/folded.copilot.html.snap-7.png differ
diff --git a/__tests__/html2/part-grouping/folded.copilot.html.snap-8.png b/__tests__/html2/part-grouping/folded.copilot.html.snap-8.png
new file mode 100644
index 0000000000..28cdacc8e7
Binary files /dev/null and b/__tests__/html2/part-grouping/folded.copilot.html.snap-8.png differ
diff --git a/__tests__/html2/part-grouping/folded.copilot.html.snap-9.png b/__tests__/html2/part-grouping/folded.copilot.html.snap-9.png
new file mode 100644
index 0000000000..48bdb7a754
Binary files /dev/null and b/__tests__/html2/part-grouping/folded.copilot.html.snap-9.png differ
diff --git a/__tests__/html2/part-grouping/folded.skip.html b/__tests__/html2/part-grouping/folded.skip.html
new file mode 100644
index 0000000000..aa2c5706ee
--- /dev/null
+++ b/__tests__/html2/part-grouping/folded.skip.html
@@ -0,0 +1,369 @@
+
+
+
+
+ Part grouping
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/__tests__/html2/part-grouping/index.html.snap-9.png b/__tests__/html2/part-grouping/index.html.snap-9.png
index a81185df23..4e3a17d213 100644
Binary files a/__tests__/html2/part-grouping/index.html.snap-9.png and b/__tests__/html2/part-grouping/index.html.snap-9.png differ
diff --git a/__tests__/html2/part-grouping/keyboard.html.snap-1.png b/__tests__/html2/part-grouping/keyboard.html.snap-1.png
index 53a6aa568a..a6e9fbff11 100644
Binary files a/__tests__/html2/part-grouping/keyboard.html.snap-1.png and b/__tests__/html2/part-grouping/keyboard.html.snap-1.png differ
diff --git a/__tests__/html2/part-grouping/keyboard.html.snap-10.png b/__tests__/html2/part-grouping/keyboard.html.snap-10.png
index 2ae149fc0d..149fdbf0aa 100644
Binary files a/__tests__/html2/part-grouping/keyboard.html.snap-10.png and b/__tests__/html2/part-grouping/keyboard.html.snap-10.png differ
diff --git a/__tests__/html2/part-grouping/keyboard.html.snap-11.png b/__tests__/html2/part-grouping/keyboard.html.snap-11.png
index 90c374a3f2..cbb88da933 100644
Binary files a/__tests__/html2/part-grouping/keyboard.html.snap-11.png and b/__tests__/html2/part-grouping/keyboard.html.snap-11.png differ
diff --git a/__tests__/html2/part-grouping/keyboard.html.snap-12.png b/__tests__/html2/part-grouping/keyboard.html.snap-12.png
index 90da53c5d1..80754cd035 100644
Binary files a/__tests__/html2/part-grouping/keyboard.html.snap-12.png and b/__tests__/html2/part-grouping/keyboard.html.snap-12.png differ
diff --git a/__tests__/html2/part-grouping/keyboard.html.snap-13.png b/__tests__/html2/part-grouping/keyboard.html.snap-13.png
index 49a8889060..6d62727ca7 100644
Binary files a/__tests__/html2/part-grouping/keyboard.html.snap-13.png and b/__tests__/html2/part-grouping/keyboard.html.snap-13.png differ
diff --git a/__tests__/html2/part-grouping/keyboard.html.snap-14.png b/__tests__/html2/part-grouping/keyboard.html.snap-14.png
index 68b68e1986..d9fe1fdcbe 100644
Binary files a/__tests__/html2/part-grouping/keyboard.html.snap-14.png and b/__tests__/html2/part-grouping/keyboard.html.snap-14.png differ
diff --git a/__tests__/html2/part-grouping/keyboard.html.snap-15.png b/__tests__/html2/part-grouping/keyboard.html.snap-15.png
index 30818fa51f..f4277e58e2 100644
Binary files a/__tests__/html2/part-grouping/keyboard.html.snap-15.png and b/__tests__/html2/part-grouping/keyboard.html.snap-15.png differ
diff --git a/__tests__/html2/part-grouping/keyboard.html.snap-16.png b/__tests__/html2/part-grouping/keyboard.html.snap-16.png
index e65f33a24d..57a9037634 100644
Binary files a/__tests__/html2/part-grouping/keyboard.html.snap-16.png and b/__tests__/html2/part-grouping/keyboard.html.snap-16.png differ
diff --git a/__tests__/html2/part-grouping/keyboard.html.snap-2.png b/__tests__/html2/part-grouping/keyboard.html.snap-2.png
index 9021e12ef2..9136b63fe6 100644
Binary files a/__tests__/html2/part-grouping/keyboard.html.snap-2.png and b/__tests__/html2/part-grouping/keyboard.html.snap-2.png differ
diff --git a/__tests__/html2/part-grouping/keyboard.html.snap-3.png b/__tests__/html2/part-grouping/keyboard.html.snap-3.png
index 8906e02e1f..b19e30d1d3 100644
Binary files a/__tests__/html2/part-grouping/keyboard.html.snap-3.png and b/__tests__/html2/part-grouping/keyboard.html.snap-3.png differ
diff --git a/__tests__/html2/part-grouping/keyboard.html.snap-4.png b/__tests__/html2/part-grouping/keyboard.html.snap-4.png
index ab38a96c9f..9eecc8bf34 100644
Binary files a/__tests__/html2/part-grouping/keyboard.html.snap-4.png and b/__tests__/html2/part-grouping/keyboard.html.snap-4.png differ
diff --git a/__tests__/html2/part-grouping/keyboard.html.snap-5.png b/__tests__/html2/part-grouping/keyboard.html.snap-5.png
index e51f12859b..46a7daec4f 100644
Binary files a/__tests__/html2/part-grouping/keyboard.html.snap-5.png and b/__tests__/html2/part-grouping/keyboard.html.snap-5.png differ
diff --git a/__tests__/html2/part-grouping/keyboard.html.snap-6.png b/__tests__/html2/part-grouping/keyboard.html.snap-6.png
index f1c01ee1dd..5e827d7135 100644
Binary files a/__tests__/html2/part-grouping/keyboard.html.snap-6.png and b/__tests__/html2/part-grouping/keyboard.html.snap-6.png differ
diff --git a/__tests__/html2/part-grouping/keyboard.html.snap-7.png b/__tests__/html2/part-grouping/keyboard.html.snap-7.png
index 10d2bc387a..c5d1c1e212 100644
Binary files a/__tests__/html2/part-grouping/keyboard.html.snap-7.png and b/__tests__/html2/part-grouping/keyboard.html.snap-7.png differ
diff --git a/__tests__/html2/part-grouping/keyboard.html.snap-8.png b/__tests__/html2/part-grouping/keyboard.html.snap-8.png
index be27bbc98d..8239f505e9 100644
Binary files a/__tests__/html2/part-grouping/keyboard.html.snap-8.png and b/__tests__/html2/part-grouping/keyboard.html.snap-8.png differ
diff --git a/__tests__/html2/part-grouping/keyboard.html.snap-9.png b/__tests__/html2/part-grouping/keyboard.html.snap-9.png
index 21d2799b63..f6e84dec4d 100644
Binary files a/__tests__/html2/part-grouping/keyboard.html.snap-9.png and b/__tests__/html2/part-grouping/keyboard.html.snap-9.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-1.png b/__tests__/html2/part-grouping/navigation.html.snap-1.png
index 3397cc3ec6..9fe825da48 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-1.png and b/__tests__/html2/part-grouping/navigation.html.snap-1.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-10.png b/__tests__/html2/part-grouping/navigation.html.snap-10.png
index d4ba6d4a10..a44e5d26a6 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-10.png and b/__tests__/html2/part-grouping/navigation.html.snap-10.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-11.png b/__tests__/html2/part-grouping/navigation.html.snap-11.png
index 6e48eb7ce0..251d3092e4 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-11.png and b/__tests__/html2/part-grouping/navigation.html.snap-11.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-12.png b/__tests__/html2/part-grouping/navigation.html.snap-12.png
index ee47db3743..9c70a82df5 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-12.png and b/__tests__/html2/part-grouping/navigation.html.snap-12.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-13.png b/__tests__/html2/part-grouping/navigation.html.snap-13.png
index 632a2340ec..e7b79abe41 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-13.png and b/__tests__/html2/part-grouping/navigation.html.snap-13.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-14.png b/__tests__/html2/part-grouping/navigation.html.snap-14.png
index 6cef577607..c63cec7e53 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-14.png and b/__tests__/html2/part-grouping/navigation.html.snap-14.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-15.png b/__tests__/html2/part-grouping/navigation.html.snap-15.png
index 7c179130b8..8f78d4f6ba 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-15.png and b/__tests__/html2/part-grouping/navigation.html.snap-15.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-16.png b/__tests__/html2/part-grouping/navigation.html.snap-16.png
index c0b8d1b0a9..c2609507f6 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-16.png and b/__tests__/html2/part-grouping/navigation.html.snap-16.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-17.png b/__tests__/html2/part-grouping/navigation.html.snap-17.png
index 4f9661c1c9..6bf1d60236 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-17.png and b/__tests__/html2/part-grouping/navigation.html.snap-17.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-18.png b/__tests__/html2/part-grouping/navigation.html.snap-18.png
index 4df16e9542..d9859f01c7 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-18.png and b/__tests__/html2/part-grouping/navigation.html.snap-18.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-19.png b/__tests__/html2/part-grouping/navigation.html.snap-19.png
index c9534de610..eca77599bb 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-19.png and b/__tests__/html2/part-grouping/navigation.html.snap-19.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-2.png b/__tests__/html2/part-grouping/navigation.html.snap-2.png
index f055e8a74e..a58f90e68d 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-2.png and b/__tests__/html2/part-grouping/navigation.html.snap-2.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-20.png b/__tests__/html2/part-grouping/navigation.html.snap-20.png
index fd1e059e5b..b7bf534487 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-20.png and b/__tests__/html2/part-grouping/navigation.html.snap-20.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-21.png b/__tests__/html2/part-grouping/navigation.html.snap-21.png
index 428ad18de4..381a7b5ded 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-21.png and b/__tests__/html2/part-grouping/navigation.html.snap-21.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-22.png b/__tests__/html2/part-grouping/navigation.html.snap-22.png
index 9221165857..073060ffa9 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-22.png and b/__tests__/html2/part-grouping/navigation.html.snap-22.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-23.png b/__tests__/html2/part-grouping/navigation.html.snap-23.png
index 549de4b4c7..4ecf1cd431 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-23.png and b/__tests__/html2/part-grouping/navigation.html.snap-23.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-24.png b/__tests__/html2/part-grouping/navigation.html.snap-24.png
index c6ec846ba2..523aa4c997 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-24.png and b/__tests__/html2/part-grouping/navigation.html.snap-24.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-25.png b/__tests__/html2/part-grouping/navigation.html.snap-25.png
index 38cb359866..f1a72c4e9d 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-25.png and b/__tests__/html2/part-grouping/navigation.html.snap-25.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-26.png b/__tests__/html2/part-grouping/navigation.html.snap-26.png
index 71dd124c4f..36a2c1ef26 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-26.png and b/__tests__/html2/part-grouping/navigation.html.snap-26.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-3.png b/__tests__/html2/part-grouping/navigation.html.snap-3.png
index eb30ec6a1d..8a00ec160b 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-3.png and b/__tests__/html2/part-grouping/navigation.html.snap-3.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-4.png b/__tests__/html2/part-grouping/navigation.html.snap-4.png
index f71e02dcc8..2bb41259d0 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-4.png and b/__tests__/html2/part-grouping/navigation.html.snap-4.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-5.png b/__tests__/html2/part-grouping/navigation.html.snap-5.png
index 35fac4a34d..0e6cda7ae1 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-5.png and b/__tests__/html2/part-grouping/navigation.html.snap-5.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-6.png b/__tests__/html2/part-grouping/navigation.html.snap-6.png
index c892bdfb3e..fba48c4be3 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-6.png and b/__tests__/html2/part-grouping/navigation.html.snap-6.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-7.png b/__tests__/html2/part-grouping/navigation.html.snap-7.png
index 89a5d9da04..aeaa6cabb0 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-7.png and b/__tests__/html2/part-grouping/navigation.html.snap-7.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-8.png b/__tests__/html2/part-grouping/navigation.html.snap-8.png
index 7c3d6672c1..94a13fc5c8 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-8.png and b/__tests__/html2/part-grouping/navigation.html.snap-8.png differ
diff --git a/__tests__/html2/part-grouping/navigation.html.snap-9.png b/__tests__/html2/part-grouping/navigation.html.snap-9.png
index ec8010973b..41db5a21df 100644
Binary files a/__tests__/html2/part-grouping/navigation.html.snap-9.png and b/__tests__/html2/part-grouping/navigation.html.snap-9.png differ
diff --git a/__tests__/html2/part-grouping/position.html.snap-1.png b/__tests__/html2/part-grouping/position.html.snap-1.png
index 40d5b6eb13..7340bbba65 100644
Binary files a/__tests__/html2/part-grouping/position.html.snap-1.png and b/__tests__/html2/part-grouping/position.html.snap-1.png differ
diff --git a/__tests__/html2/part-grouping/position.html.snap-2.png b/__tests__/html2/part-grouping/position.html.snap-2.png
index 56d5212dbd..3a49393071 100644
Binary files a/__tests__/html2/part-grouping/position.html.snap-2.png and b/__tests__/html2/part-grouping/position.html.snap-2.png differ
diff --git a/__tests__/html2/part-grouping/position.html.snap-3.png b/__tests__/html2/part-grouping/position.html.snap-3.png
index c9193dc356..d5b94bddfa 100644
Binary files a/__tests__/html2/part-grouping/position.html.snap-3.png and b/__tests__/html2/part-grouping/position.html.snap-3.png differ
diff --git a/__tests__/html2/part-grouping/position.html.snap-4.png b/__tests__/html2/part-grouping/position.html.snap-4.png
index e56a7a91f0..7e65af11e7 100644
Binary files a/__tests__/html2/part-grouping/position.html.snap-4.png and b/__tests__/html2/part-grouping/position.html.snap-4.png differ
diff --git a/__tests__/html2/part-grouping/position.html.snap-5.png b/__tests__/html2/part-grouping/position.html.snap-5.png
index 2afa9d0b04..fb5301bda2 100644
Binary files a/__tests__/html2/part-grouping/position.html.snap-5.png and b/__tests__/html2/part-grouping/position.html.snap-5.png differ
diff --git a/__tests__/html2/part-grouping/position.html.snap-6.png b/__tests__/html2/part-grouping/position.html.snap-6.png
index 010d589dc8..c8dc262c35 100644
Binary files a/__tests__/html2/part-grouping/position.html.snap-6.png and b/__tests__/html2/part-grouping/position.html.snap-6.png differ
diff --git a/__tests__/html2/part-grouping/position.html.snap-7.png b/__tests__/html2/part-grouping/position.html.snap-7.png
index 1f87c5871d..6014799f9b 100644
Binary files a/__tests__/html2/part-grouping/position.html.snap-7.png and b/__tests__/html2/part-grouping/position.html.snap-7.png differ
diff --git a/__tests__/html2/part-grouping/position.html.snap-8.png b/__tests__/html2/part-grouping/position.html.snap-8.png
index 4f8f940a43..0023abc705 100644
Binary files a/__tests__/html2/part-grouping/position.html.snap-8.png and b/__tests__/html2/part-grouping/position.html.snap-8.png differ
diff --git a/__tests__/html2/part-grouping/status.html.snap-2.png b/__tests__/html2/part-grouping/status.html.snap-2.png
index edccf307ac..e92aa48cad 100644
Binary files a/__tests__/html2/part-grouping/status.html.snap-2.png and b/__tests__/html2/part-grouping/status.html.snap-2.png differ
diff --git a/__tests__/html2/part-grouping/status.html.snap-4.png b/__tests__/html2/part-grouping/status.html.snap-4.png
index bd7e2043ac..2f01aa34ee 100644
Binary files a/__tests__/html2/part-grouping/status.html.snap-4.png and b/__tests__/html2/part-grouping/status.html.snap-4.png differ
diff --git a/__tests__/html2/part-grouping/status.html.snap-5.png b/__tests__/html2/part-grouping/status.html.snap-5.png
index 1ef92bd839..f91343df28 100644
Binary files a/__tests__/html2/part-grouping/status.html.snap-5.png and b/__tests__/html2/part-grouping/status.html.snap-5.png differ
diff --git a/__tests__/html2/part-grouping/status.html.snap-7.png b/__tests__/html2/part-grouping/status.html.snap-7.png
index fee93f309f..39d6674b9b 100644
Binary files a/__tests__/html2/part-grouping/status.html.snap-7.png and b/__tests__/html2/part-grouping/status.html.snap-7.png differ
diff --git a/__tests__/html2/part-grouping/status.html.snap-8.png b/__tests__/html2/part-grouping/status.html.snap-8.png
index 5d2a5f217d..05377d1c8c 100644
Binary files a/__tests__/html2/part-grouping/status.html.snap-8.png and b/__tests__/html2/part-grouping/status.html.snap-8.png differ
diff --git a/__tests__/html2/part-grouping/status.html.snap-9.png b/__tests__/html2/part-grouping/status.html.snap-9.png
index 2d348d7e6b..7fdc9715ba 100644
Binary files a/__tests__/html2/part-grouping/status.html.snap-9.png and b/__tests__/html2/part-grouping/status.html.snap-9.png differ
diff --git a/packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/CollapsibleGrouping.module.css b/packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/CollapsibleGrouping.module.css
index 5dabbec810..a39c232094 100644
--- a/packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/CollapsibleGrouping.module.css
+++ b/packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/CollapsibleGrouping.module.css
@@ -64,3 +64,13 @@
visibility 0s linear 0s;
visibility: unset;
}
+
+:global(.webchat) .collapsible-grouping__list {
+ display: grid;
+ gap: 0;
+ margin-block-end: calc(var(--webchat--collapsible-grouping__list--gap, var(--webchat__padding--regular)) * -1);
+
+ > * {
+ margin-block-end: var(--webchat--collapsible-grouping__list--gap, var(--webchat__padding--regular));
+ }
+}
diff --git a/packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/CollapsibleGroupingList.tsx b/packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/CollapsibleGroupingList.tsx
new file mode 100644
index 0000000000..d77638a7d9
--- /dev/null
+++ b/packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/CollapsibleGroupingList.tsx
@@ -0,0 +1,30 @@
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import cx from 'classnames';
+import React, { memo } from 'react';
+import { any, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+
+import styles from './CollapsibleGrouping.module.css';
+
+const collapsibleGroupingListPropsSchema = pipe(
+ object({
+ children: optional(reactNode()),
+ className: optional(string()),
+ tag: optional(any())
+ }),
+ readonly()
+);
+
+type CollapsibleGroupingListProps = InferInput;
+
+const CollapsibleGroupingList = (props: CollapsibleGroupingListProps) => {
+ const { className, children, tag: Tag = 'div' } = validateProps(collapsibleGroupingListPropsSchema, props);
+ const classNames = useStyles(styles);
+
+ return {children};
+};
+
+CollapsibleGroupingList.displayName = 'CollapsibleGroupingList';
+
+export default memo(CollapsibleGroupingList);
+export { collapsibleGroupingListPropsSchema, type CollapsibleGroupingListProps };
diff --git a/packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/private/PartGroupingActivity.module.css b/packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/private/PartGroupingActivity.module.css
index a1b375ec51..2152b73c02 100644
--- a/packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/private/PartGroupingActivity.module.css
+++ b/packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/private/PartGroupingActivity.module.css
@@ -1,5 +1,6 @@
:global(.webchat) .part-grouping-activity {
.part-grouping-activity__activities {
+ gap: 0;
padding-block: 0 var(--webchat__padding--regular);
}
diff --git a/packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/private/PartGroupingActivity.tsx b/packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/private/PartGroupingActivity.tsx
index 2ff7f04848..98e8876a2a 100644
--- a/packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/private/PartGroupingActivity.tsx
+++ b/packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/private/PartGroupingActivity.tsx
@@ -37,6 +37,7 @@ import {
import { android } from '../../../../../Utils/detectBrowser';
import isZeroOrPositive from '../../../../../Utils/isZeroOrPositive';
import CollapsibleGrouping from '../CollapsibleGrouping';
+import CollapsibleGroupingList from '../CollapsibleGroupingList';
import CollapsibleGroupingTitle from '../CollapsibleGroupingTitle';
import usePartGroupingLogicalGroup from './usePartGroupingLogicalGroup';
@@ -166,7 +167,7 @@ function PartGroupingActivity(props: PartGroupingActivityProps) {
const lastActivity = activities.at(-1);
const currentMessage = useMemo(
- () => messages.toReversed().find(message => message.creativeWorkStatus === 'Incomplete') || lastMessage,
+ () => messages.find(message => message.creativeWorkStatus === 'Incomplete') || lastMessage,
[messages, lastMessage]
);
@@ -185,21 +186,33 @@ function PartGroupingActivity(props: PartGroupingActivityProps) {
[messages]
);
+ const currentGroupStatus = currentMessage?.creativeWorkStatus || defaultWorkStatus;
+
+ /**
+ * The idea behind group header is that it displays the state of the entire group:
+ * - We start by determining if the group should display a status (i.e., if any message in the group has a creativeWorkStatus).
+ * - If there is a status to display we display it.
+ * - For the title we check if the current group status is 'Incomplete'.
+ * - If it is 'Incomplete', we show the abstract of the first message with 'Incomplete' status.
+ * - If not, we fall back to a default title.
+ */
const groupHeader = useMemo(
() => (
{defaultWorkStatus && (
)}
- {currentMessage?.abstract || localize('COLLAPSIBLE_GROUPING_TITLE')}
+ {currentGroupStatus === 'Incomplete'
+ ? currentMessage?.abstract || localize('COLLAPSIBLE_GROUPING_TITLE')
+ : localize('COLLAPSIBLE_GROUPING_TITLE')}
),
- [classNames, currentMessage?.abstract, currentMessage?.creativeWorkStatus, defaultWorkStatus, localize]
+ [classNames, currentGroupStatus, currentMessage?.abstract, defaultWorkStatus, localize]
);
return (
@@ -223,9 +236,12 @@ function PartGroupingActivity(props: PartGroupingActivityProps) {
isOpen={isGroupOpen}
onToggle={setIsGroupOpen}
>
-
+
{children}
-
+
{renderActivityStatus && {renderActivityStatus({ hideTimestamp })}}
diff --git a/packages/component/src/Transcript/TranscriptFocus/TranscriptActivityList.tsx b/packages/component/src/Transcript/TranscriptFocus/TranscriptActivityList.tsx
index a85b62ed36..acbeff0325 100644
--- a/packages/component/src/Transcript/TranscriptFocus/TranscriptActivityList.tsx
+++ b/packages/component/src/Transcript/TranscriptFocus/TranscriptActivityList.tsx
@@ -1,6 +1,6 @@
import { useStyles } from '@msinternal/botframework-webchat-styles/react';
import cx from 'classnames';
-import React, { forwardRef, type HTMLAttributes } from 'react';
+import React, { forwardRef, memo, type HTMLAttributes } from 'react';
import styles from './TranscriptFocus.module.css';
@@ -18,5 +18,5 @@ const TranscriptActivityList = forwardRef * {
diff --git a/packages/fluent-theme/src/components/activity/PartGroupingDecorator.module.css b/packages/fluent-theme/src/components/activity/PartGroupingDecorator.module.css
index 20ba93e3ee..81bbfb5458 100644
--- a/packages/fluent-theme/src/components/activity/PartGroupingDecorator.module.css
+++ b/packages/fluent-theme/src/components/activity/PartGroupingDecorator.module.css
@@ -339,7 +339,7 @@
}
:global(.stacked-layout .collapsible-grouping__content .part-grouping-activity__activities) {
- gap: var(--webchat-spacingVerticalS);
+ --webchat--collapsible-grouping__list--gap: var(--webchat-spacingVerticalS);
padding: var(--webchat-spacingVerticalL) var(--webchat-spacingHorizontalL);
}
@@ -561,6 +561,7 @@
--webchat-part-grouping__bubble--box-shadow: var(--webchat-shadow4);
:global(.stacked-layout .transcript-focus-area__activity-list) {
+ --webchat--collapsible-grouping__list--gap: var(--webchat-spacingVerticalXS);
padding: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalNone);
gap: var(--webchat-spacingVerticalXS);
}
@@ -739,7 +740,7 @@
}
:global(.stacked-layout .transcript-focus-area__activity-list) {
- gap: var(--webchat-spacingVerticalL);
+ --webchat--collapsible-grouping__list--gap: var(--webchat-spacingVerticalL);
}
:global(.webchat__bubble:not(.webchat__bubble--from-user)::after) {
@@ -861,7 +862,7 @@
}
:global(.stacked-layout .transcript-focus-area__activity-list) {
- gap: var(--webchat-spacingVerticalS);
+ --webchat--collapsible-grouping__list--gap: var(--webchat-spacingVerticalS);
padding: var(--webchat-spacingVerticalM) var(--webchat-spacingHorizontalM);
}
@@ -870,6 +871,73 @@
padding-block: var(--webchat-spacingVerticalM);
padding-inline: var(--webchat-spacingHorizontalL);
}
+
+ :global(.collapsible-grouping__content) {
+ height: unset;
+ opacity: unset;
+ visibility: unset;
+ }
+
+ :global(.collapsible-grouping__list) > * {
+ interpolate-size: allow-keywords;
+ transition:
+ margin calc(var(--webchat__transition-duration) / 2) var(--webchat__transition-easing),
+ height calc(var(--webchat__transition-duration) / 2) var(--webchat__transition-easing);
+ }
+
+ :global(.collapsible-grouping__content--open .collapsible-grouping__list) > * {
+ /* We use animation so we can reset needed properties immediately upon switching classes */
+ animation: collapsible-grouping__fade-in var(--webchat__transition-duration)
+ calc(var(--webchat__transition-duration) / 4) var(--webchat__transition-easing) both;
+ height: auto;
+ transition:
+ margin var(--webchat__transition-duration) var(--webchat__transition-easing),
+ height var(--webchat__transition-duration) var(--webchat__transition-easing);
+ }
+
+ :global(.collapsible-grouping__content:not(.collapsible-grouping__content--open)) {
+ /* We use animation so we can reset needed properties immediately upon switching classes */
+ animation: collapsible-grouping__fade-in var(--webchat__transition-duration) var(--webchat__transition-duration)
+ var(--webchat__transition-easing) both;
+ }
+
+ :global(.collapsible-grouping__content:not(.collapsible-grouping__content--open) .collapsible-grouping__list) {
+ padding: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalNone);
+
+ > *:not(:has(:global(.stacked-layout__message-status--incomplete))) {
+ height: 0;
+ margin: 0;
+ visibility: hidden;
+ overflow: clip;
+ }
+
+ > *:has(:global(.stacked-layout__message-status--incomplete)) {
+ /* We use animation so we can reset needed properties immediately upon switching classes */
+ animation: collapsible-grouping__fade-in var(--webchat__transition-duration) var(--webchat__transition-duration)
+ var(--webchat__transition-easing) both;
+ pointer-events: none;
+
+ :global(.stacked-layout__message-status--incomplete),
+ :global(.collapsible-content__chevron) {
+ visibility: hidden;
+ }
+ }
+
+ &:has(:global(.stacked-layout__message-status--incomplete)) {
+ padding: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalNone);
+ transform: translate(-4px, -20px);
+ margin-block-end: calc(-20px - var(--webchat--collapsible-grouping__list--gap));
+ }
+ }
}
/* #endregion */
}
+
+@keyframes collapsible-grouping__fade-in {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}