CSS Modules: convert remaining activity components to CSS modules (#5668)

* CSS Modules: remaining activity components

* Update related

* Migrate SayAlt component

* Add carousel layout

* Add tokens

* Update PartGroupingDecorator

* Format CSS

* Optimize bubble

* Adapt more to rtl and fix selectors

* Fix specificalty

* Fix removed prefixes

* Tweak unspecified colors to be unset

* snaps: follow fluent spacing

* Changelog

* Sort

* Omit not needed amps

* fix carousel spacers in fluent

Author: OEvgeny

CHANGELOG.md

@@ -313,6 +313,7 @@ Breaking changes in this release:
 - Bumped Chrome in Docker to 141 from 110, in PR [#5619](https://github.com/microsoft/BotFramework-WebChat/pull/5619), by [@compulim](https://github.com/compulim)
 - Bumped to [`[email protected]`](https://npmjs.com/package/valibot/v/1.2.0), in PR [#5650](https://github.com/microsoft/BotFramework-WebChat/pull/5650), by [@compulim](https://github.com/compulim)
 - Pinned to [`[email protected]`](https://npmjs.com/package/botframework-directlinespeech-sdk/v/4.18.1-main.20251208.8ccadd6), by [@OEvgeny](https://github.com/OEvgeny) in PR [#5662](https://github.com/microsoft/BotFramework-WebChat/pull/5662)
+- Converted remaining activity components to CSS Modules, in PR [#5668](https://github.com/microsoft/BotFramework-WebChat/pull/5668), by [@OEvgeny](https://github.com/OEvgeny)
 
 ### Deprecated
 

__tests__/html2/accessibility/attachment/aria.html

@@ -38,7 +38,7 @@
         await pageConditions.scrollToBottomCompleted();
 
         const carouselContainer = document
-          .querySelector('.webchat__carousel-filmstrip')
+          .querySelector('.carousel-filmstrip')
           .getAttribute('aria-labelledby');
 
         expect(carouselContainer).toBeFalsy();

__tests__/html2/accessibility/attachment/stackedLayoutRole.html

@@ -23,7 +23,7 @@
         await pageConditions.minNumActivitiesShown(2);
         await pageConditions.scrollToBottomCompleted();
 
-        const attachmentRole = document.querySelector('.webchat__carousel-filmstrip-attachment').getAttribute('role');
+        const attachmentRole = document.querySelector('.carousel-filmstrip-attachment').getAttribute('role');
 
         expect(attachmentRole).toBeTruthy();
       });

__tests__/html2/accessibility/liveRegion/attachment/animationCard.html

@@ -51,7 +51,7 @@
         await pageConditions.minNumActivitiesShown(2);
 
         // Replace the animation with a static image.
-        for (const imageElement of document.querySelectorAll('.webchat__bubble__content img')) {
+        for (const imageElement of document.querySelectorAll('.bubble__content img')) {
           imageElement.setAttribute(
             'src',
             'https://raw.githubusercontent.com/compulim/BotFramework-MockBot/master/public/assets/surface1.jpg'

__tests__/html2/carousel/flipperButton.html

@@ -23,8 +23,8 @@
         await pageConditions.numActivitiesShown(2);
 
         // GIVEN: Carousel is at left most position.
-        const carouselLayout = document.querySelector('.webchat__carousel-layout');
-        const carouselFilmstrip = carouselLayout.querySelector('.webchat__carousel-filmstrip');
+        const carouselLayout = document.querySelector('.carousel-layout');
+        const carouselFilmstrip = carouselLayout.querySelector('.carousel-filmstrip');
 
         expect(carouselFilmstrip.scrollLeft).toBe(0);
 

__tests__/html2/carousel/flipperButton.rtl.html

@@ -24,8 +24,8 @@
         await pageConditions.numActivitiesShown(2);
 
         // GIVEN: Carousel is at left most position.
-        const carouselLayout = document.querySelector('.webchat__carousel-layout');
-        const carouselFilmstrip = carouselLayout.querySelector('.webchat__carousel-filmstrip');
+        const carouselLayout = document.querySelector('.carousel-layout');
+        const carouselFilmstrip = carouselLayout.querySelector('.carousel-filmstrip');
 
         expect(carouselFilmstrip.scrollLeft).toBe(0);
 

__tests__/html2/carousel/navigation.tab.html

@@ -55,7 +55,7 @@
         );
         await pageConditions.stabilized(
           'carousel',
-          () => document.querySelector('.webchat__carousel-filmstrip').scrollLeft,
+          () => document.querySelector('.carousel-filmstrip').scrollLeft,
           5,
           5000
         );
@@ -70,7 +70,7 @@
         );
         await pageConditions.stabilized(
           'carousel',
-          () => document.querySelector('.webchat__carousel-filmstrip').scrollLeft,
+          () => document.querySelector('.carousel-filmstrip').scrollLeft,
           5,
           5000
         );

__tests__/html2/fluentTheme/carousel.html

@@ -55,8 +55,8 @@
       await pageConditions.numActivitiesShown(2);
 
       // WHEN: Right flipper is clicked.
-      const carouselLayout = document.querySelector('.webchat__carousel-layout');
-      const carouselFilmstrip = carouselLayout.querySelector('.webchat__carousel-filmstrip');
+      const carouselLayout = document.querySelector('.carousel-layout');
+      const carouselFilmstrip = carouselLayout.querySelector('.carousel-filmstrip');
       const rightFlipper = carouselLayout.querySelector('[aria-label="Next"]');
 
       // Improve test reliability by hover before click on flipper button.