botframework-webchat-component 4.18.1-main.20260518.2a3d1d3 → 4.18.2

package/src/Styles/CustomPropertyNames.ts

@@ -1,77 +1,17 @@
 const CustomPropertyNames = Object.freeze({
   // Make sure key names does not have JavaScript forbidden names.
-  BackgroundCardPushButton: '--webchat__background--card-push-button',
-  BackgroundBubble: '--webchat__background--bubble',
-  BackgroundBubbleUser: '--webchat__background--bubble-user',
-  BackgroundCodeBlock: '--webchat__background--code-block',
-  BackgroundImageSpinnerAnimation: '--webchat__background-image--spinner-animation',
-  BackgroundImageTypingAnimation: '--webchat__background-image--typing-animation',
-  BackgroundToastError: '--webchat__background--toast-error',
-  BackgroundToastInfo: '--webchat__background--toast-info',
-  BackgroundToastSuccess: '--webchat__background--toast-success',
-  BackgroundToastWarn: '--webchat__background--toast-warn',
-  BackgroundTranscriptOverlayButton: '--webchat__background--transcript-overlay-button',
-  BackgroundTranscriptOverlayButtonDisabled: '--webchat__background--transcript-overlay-button-disabled',
-  BackgroundTranscriptOverlayButtonFocus: '--webchat__background--transcript-overlay-button-focus',
-  BackgroundTranscriptOverlayButtonHover: '--webchat__background--transcript-overlay-button-hover',
-  BackgroundTranscriptTerminator: '--webchat__background--transcript-terminator',
-  BorderAnimationColor1: '--webchat__border-animation--color-1',
-  BorderAnimationColor2: '--webchat__border-animation--color-2',
-  BorderAnimationColor3: '--webchat__border-animation--color-3',
-  BorderColorBubble: '--webchat__border-color--bubble',
-  BorderColorBubbleUser: '--webchat__border-color--bubble-user',
-  BorderRadiusAvatar: '--webchat__border-radius--avatar',
-  BorderRadiusBubble: '--webchat__border-radius--bubble',
-  BorderRadiusBubbleUser: '--webchat__border-radius--bubble-user',
-  BorderStyleBubble: '--webchat__border-style--bubble',
-  BorderStyleBubbleUser: '--webchat__border-style--bubble-user',
-  BorderStyleTranscriptActivityVisualKeyboardIndicator:
-    '--webchat__border-style--transcript-activity-visual-keyboard-indicator',
-  BorderStyleTranscriptVisualKeyboardIndicator: '--webchat__border-style--transcript-visual-keyboard-indicator',
-  BorderWidthBubble: '--webchat__border-width--bubble',
-  BorderWidthBubbleUser: '--webchat__border-width--bubble-user',
-  BorderWidthTranscriptActivityVisualKeyboardIndicator:
-    '--webchat__border-width--transcript-activity-visual-keyboard-indicator',
-  BorderRadiusTranscriptTerminator: '--webchat__border-radius--transcript-terminator',
-  BorderWidthTranscriptVisualKeyboardIndicator: '--webchat__border-width--transcript-visual-keyboard-indicator',
   ColorAccent: '--webchat__color--accent',
-  ColorBubble: '--webchat__color--bubble',
-  ColorBubbleUser: '--webchat__color--bubble-user',
-  ColorCardPushButton: '--webchat__color--card-push-button',
-  ColorCodeBlock: '--webchat__color--code-block',
-  ColorConnectivityFailed: '--webchat__color--connectivity-failed',
   ColorSubtle: '--webchat__color--subtle',
   ColorTimestamp: '--webchat__color--timestamp',
-  ColorTranscriptActivityVisualKeyboardIndicator: '--webchat__color--transcript-activity-visual-keyboard-indicator',
-  ColorTranscriptOverlayButton: '--webchat__color--transcript-overlay-button',
-  ColorTranscriptOverlayButtonDisabled: '--webchat__color--transcript-overlay-button-disabled',
-  ColorTranscriptOverlayButtonFocus: '--webchat__color--transcript-overlay-button-focus',
-  ColorTranscriptOverlayButtonHover: '--webchat__color--transcript-overlay-button-hover',
-  ColorTranscriptTerminator: '--webchat__color--transcript-terminator',
-  ColorTranscriptVisualKeyboardIndicator: '--webchat__color--transcript-visual-keyboard-indicator',
   FontPrimary: '--webchat__font--primary',
-  FontMonospace: '--webchat__font--monospace',
   FontSizeSmall: '--webchat__font-size--small',
-  FontSizeTranscriptTerminator: '--webchat__font-size--transcript-terminator',
   IconURLExternalLink: '--webchat__icon-url--external-link',
-  MaxHeightImageBubble: '--webchat__max-height--image-bubble',
-  MaxHeightSendBoxAttachmentBar: '--webchat__max-height--send-box-attachment-bar',
-  MaxWidthAttachmentBubble: '--webchat__max-width--attachment-bubble',
-  MaxWidthMessageBubble: '--webchat__max-width--message-bubble',
+  MaxWidthBubble: '--webchat__max-width--bubble',
   MinHeightBubble: '--webchat__min-height--bubble',
-  MinHeightImageBubble: '--webchat__min-height--image-bubble',
-  MinWidthAttachmentBubble: '--webchat__min-width--attachment-bubble',
-  MinWidthMessageBubble: '--webchat__min-width--message-bubble',
-  PaddingConnectivityIcon: '--webchat__padding--connectivity-icon',
-  PaddingRegular: '--webchat__padding--regular',
-  SizeAvatar: '--webchat__size--avatar',
-  SizeBubbleNub: '--webchat__size--bubble-nub',
-  SizeBubbleNubUser: '--webchat__size--bubble-nub-user',
-  SpaceBubbleNub: '--webchat__space--bubble-nub',
-  SpaceBubbleNubUser: '--webchat__space--bubble-nub-user',
-  TransitionDuration: '--webchat__transition-duration',
-  TransitionEasing: '--webchat__transition-easing',
-  WordBreakMessageActivity: '--webchat__word-break--message-activity'
-}) satisfies Readonly<Record<string, `--webchat__${string}`>>;
+  PaddingRegular: '--webchat__padding--regular'
+});
+
+// This is for type-checking only to make sure the CSS custom property names is `--webchat__${string}`.
+const _TypeChecking: Readonly<Record<string, `--webchat__${string}`>> = CustomPropertyNames;
 
 export default CustomPropertyNames;

package/src/Styles/StyleSet/AudioAttachment.ts

@@ -1,9 +1,9 @@
-import CSSTokens from '../CSSTokens';
+import { StrictStyleOptions } from 'botframework-webchat-api';
 
-export default function AudioAttachment() {
+export default function AudioAttachment({ avatarSize }: StrictStyleOptions) {
   return {
     // TODO: [P2] We should not set "display" in styleSet, this will allow the user to break the layout for no good reasons.
     display: 'flex',
-    minHeight: CSSTokens.SizeAvatar
+    minHeight: avatarSize
   };
 }

package/src/Styles/StyleSet/Avatar.ts

@@ -1,12 +1,11 @@
 import { StrictStyleOptions } from 'botframework-webchat-api';
-import CSSTokens from '../CSSTokens';
 
-export default function createAvatarStyle({ avatarBorderRadius }: StrictStyleOptions) {
+export default function createAvatarStyle({ avatarBorderRadius, avatarSize }: StrictStyleOptions) {
   return {
     '&.webchat__defaultAvatar': {
       borderRadius: avatarBorderRadius,
-      height: CSSTokens.SizeAvatar,
-      width: CSSTokens.SizeAvatar
+      height: avatarSize,
+      width: avatarSize
     }
   };
 }

package/src/Styles/StyleSet/CSSCustomProperties.ts

@@ -0,0 +1,46 @@
+import { StrictStyleOptions } from 'botframework-webchat-api';
+
+import CustomPropertyNames from '../CustomPropertyNames';
+
+export default function createCSSCustomPropertiesStyle({
+  accent,
+  bubbleMaxWidth,
+  bubbleMinHeight,
+  fontSizeSmall,
+  markdownExternalLinkIconImage,
+  paddingRegular,
+  primaryFont,
+  subtle,
+  timestampColor
+}: StrictStyleOptions) {
+  return {
+    '&.webchat__css-custom-properties': {
+      display: 'contents',
+
+      // TODO: Should we register the CSS property for inheritance, type checking, and initial value?
+      //       Registrations need to be done on global level, and duplicate registration will throw.
+      //       https://developer.mozilla.org/en-US/docs/Web/CSS/@property
+
+      // TODO: This is ongoing work. We are slowly adding CSS variables to ease calculations and stuff.
+      //
+      //       We need to build a story to let web devs override these CSS variables.
+      //
+      //       Candy points:
+      //       - They should be able to override CSS variables for certain things (say, padding of popover) without affecting much.
+      //
+      //       House rules:
+      //       - We should put styling varibles here, e.g. paddingRegular
+      //       - We MUST NOT put runtime variables here, e.g. sendTimeout
+      //          - This is because we cannot programmatically know when the sendTimeout change
+      [CustomPropertyNames.ColorAccent]: accent,
+      [CustomPropertyNames.ColorSubtle]: subtle,
+      [CustomPropertyNames.ColorTimestamp]: timestampColor || subtle, // Maybe we should not need this if we allow web devs to override CSS variables for certain components.
+      [CustomPropertyNames.FontPrimary]: primaryFont,
+      [CustomPropertyNames.FontSizeSmall]: fontSizeSmall,
+      [CustomPropertyNames.IconURLExternalLink]: markdownExternalLinkIconImage,
+      [CustomPropertyNames.MaxWidthBubble]: bubbleMaxWidth + 'px',
+      [CustomPropertyNames.MinHeightBubble]: bubbleMinHeight + 'px',
+      [CustomPropertyNames.PaddingRegular]: paddingRegular + 'px'
+    }
+  };
+}

package/src/Styles/StyleSet/CarouselFilmStrip.ts

@@ -1,12 +1,11 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [2] }] */
 import { StrictStyleOptions } from 'botframework-webchat-api';
 
-import CSSTokens from '../CSSTokens';
 import mirrorStyle from '../mirrorStyle';
 
 export default function CarouselFilmStrip({
   avatarSize,
-  bubbleMessageMaxWidth,
+  bubbleMaxWidth,
   paddingRegular,
   transitionDuration
 }: StrictStyleOptions) {
@@ -18,24 +17,23 @@ export default function CarouselFilmStrip({
         marginBottom: -17
       },
 
-      '& .webchat__carousel-filmstrip__bubble': {
-        maxWidth: CSSTokens.MaxWidthMessageBubble,
-        minWidth: CSSTokens.MinWidthMessageBubble,
+      '& .webchat__carousel-filmstrip__message': {
+        maxWidth: bubbleMaxWidth,
         transitionDuration,
         transitionProperty: 'max-width'
       },
 
       '&.webchat__carousel-filmstrip--hide-nub, &.webchat__carousel-filmstrip--show-nub, &.webchat__carousel-filmstrip--hide-avatar, &.webchat__carousel-filmstrip--show-avatar':
         {
-          '& .webchat__carousel-filmstrip__bubble': {
-            maxWidth: bubbleMessageMaxWidth + paddingRegular
+          '& .webchat__carousel-filmstrip__message': {
+            maxWidth: bubbleMaxWidth + paddingRegular
           }
         },
 
       '& .webchat__carousel-filmstrip__alignment-pad': {
         transitionDuration,
         transitionProperty: 'width',
-        width: CSSTokens.PaddingRegular
+        width: paddingRegular
       },
 
       '&.webchat__carousel-filmstrip--extra-trailing .webchat__carousel-filmstrip__alignment-pad': {
@@ -60,7 +58,7 @@ export default function CarouselFilmStrip({
 
       '&.webchat__carousel-filmstrip--hide-avatar, &.webchat__carousel-filmstrip--show-avatar': {
         '& .webchat__carousel-filmstrip__avatar-gutter': {
-          width: CSSTokens.SizeAvatar
+          width: avatarSize
         }
       },
 

package/src/Styles/StyleSet/CarouselFilmStripAttachment.ts

@@ -1,11 +1,12 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [2] }] */
 import { StrictStyleOptions } from 'botframework-webchat-api';
 
-import CSSTokens from '../CSSTokens';
 import mirrorStyle from '../mirrorStyle';
 
 export default function CarouselFilmStripAttachment({
   avatarSize,
+  bubbleMaxWidth,
+  bubbleMinWidth,
   paddingRegular,
   transcriptVisualKeyboardIndicatorColor,
   transcriptVisualKeyboardIndicatorStyle,
@@ -14,8 +15,8 @@ export default function CarouselFilmStripAttachment({
 }: StrictStyleOptions) {
   return {
     '&.webchat__carousel-filmstrip-attachment': {
-      maxWidth: CSSTokens.MaxWidthAttachmentBubble,
-      minWidth: CSSTokens.MinWidthAttachmentBubble,
+      minWidth: bubbleMinWidth,
+      maxWidth: bubbleMaxWidth,
       transitionDuration,
       transitionProperty: 'max-width, min-width',
 

package/src/Styles/StyleSet/ErrorBox.ts

@@ -13,13 +13,13 @@ export default function createErrorBoxStyle({ monospaceFont, primaryFont }: Stri
     WebkitOverflowScrolling: 'touch',
 
     '& > :first-child': {
-      backgroundColor: '#B60000', // WCAG AAA: Contrast ratio >= 7:1.
+      backgroundColor: '#EF0000',
       color: 'White',
       padding: '5px 10px'
     },
 
     '& > :last-child': {
-      borderColor: '#B60000', // WCAG AAA: Contrast ratio >= 7:1.
+      borderColor: '#EF0000',
       borderStyle: 'dashed',
       borderBottomWidth: 2,
       borderLeftWidth: 2,

package/src/Styles/StyleSet/FileContent.ts

@@ -27,8 +27,7 @@ export default function createFileContentStyle({
     },
 
     '& .webchat__fileContent__downloadIcon': {
-      color: accent,
-      fontSize: '33px',
+      fill: accent,
       padding: paddingRegular,
 
       '&:not(.webchat__fileContent__downloadIcon--rtl)': {

package/src/Styles/StyleSet/ImageAvatar.ts

@@ -1,12 +1,9 @@
-import CSSTokens from '../CSSTokens';
+import { StrictStyleOptions } from 'botframework-webchat-api';
 
-export default function createImageAvatarStyle() {
+export default function createImageAvatarStyle({ avatarSize }: StrictStyleOptions) {
   return {
-    alignItems: 'center',
-    display: 'flex',
-    height: CSSTokens.SizeAvatar,
-    justifyContent: 'center',
-    overflow: ['hidden', 'clip'],
-    width: CSSTokens.SizeAvatar
+    height: avatarSize,
+    overflow: 'hidden',
+    width: avatarSize
   };
 }

package/src/Styles/StyleSet/InitialsAvatar.ts

@@ -1,20 +1,21 @@
 import { StrictStyleOptions } from 'botframework-webchat-api';
-import CSSTokens from '../CSSTokens';
 
 export default function createInitialsAvatarStyle({
   accent,
+  avatarSize,
   botAvatarBackgroundColor,
+  primaryFont,
   userAvatarBackgroundColor
 }: StrictStyleOptions) {
   return {
     '&.webchat__initialsAvatar': {
       alignItems: 'center',
       color: 'White',
-      fontFamily: CSSTokens.FontPrimary,
-      height: CSSTokens.SizeAvatar,
+      fontFamily: primaryFont,
+      height: avatarSize,
       justifyContent: 'center',
       overflow: 'hidden',
-      width: CSSTokens.SizeAvatar,
+      width: avatarSize,
 
       '&.webchat__initialsAvatar--fromUser': {
         backgroundColor: userAvatarBackgroundColor || accent

package/src/Styles/StyleSet/KeyboardHelp.ts

@@ -0,0 +1,204 @@
+// Numbers are commonly used in CSS.
+/* eslint-disable no-magic-numbers */
+
+import { StrictStyleOptions } from 'botframework-webchat-api';
+
+const DARK_THEME_SELECTOR = '@media (forced-colors: none) and (prefers-color-scheme: dark)';
+const LIGHT_THEME_SELECTOR = '@media (forced-colors: none) and (prefers-color-scheme: light)';
+const FORCED_COLORS_SELECTOR = '@media (forced-colors: active)';
+
+export default function createKeyboardHelpStyleSet({ paddingRegular, primaryFont }: StrictStyleOptions) {
+  return {
+    '&.webchat__keyboard-help': {
+      fontFamily: primaryFont,
+      fontSize: 14,
+      height: '100%',
+      outline: 0,
+      overflow: 'hidden',
+
+      '&:not(.webchat__keyboard-help--shown)': {
+        height: 0,
+        margin: 0,
+        overflow: 'hidden',
+        pointerEvents: 'none',
+        width: 0
+      },
+
+      '& .webchat__keyboard-help__border': {
+        boxSizing: 'border-box',
+        height: '100%',
+        padding: paddingRegular
+      },
+
+      '& .webchat__keyboard-help__box': {
+        // From Power BI:
+        // boxShadow: '0 6.4px 14.4px rgb(0 0 0 / 13%), 0 1.2px 3.6px rgb(0 0 0 / 11%)',
+        // From Fluent (depth-16 for teaching callouts):
+        borderRadius: 2,
+        boxShadow: '0px 8px 16px rgba(0, 0, 0, 0.14), 0px 0px 2px rgba(0, 0, 0, 0.12)',
+        height: '100%',
+        overflow: 'hidden',
+
+        [FORCED_COLORS_SELECTOR]: {
+          backgroundColor: 'Canvas',
+          boxShadow: 'none',
+          outlineColor: 'ButtonBorder',
+          outlineStyle: 'solid',
+          outlineWidth: 4
+        },
+
+        [DARK_THEME_SELECTOR]: {
+          backgroundColor: 'Black',
+          boxShadow: '0px 8px 16px rgba(0, 0, 0, 0.28), 0px 0px 2px rgba(0, 0, 0, 0.24)'
+        }
+      },
+
+      '& .webchat__keyboard-help__scrollable': {
+        boxSizing: 'border-box',
+        height: '100%',
+        overflowY: 'auto',
+        padding: paddingRegular * 2,
+        position: 'relative'
+      },
+
+      '& .webchat__keyboard-help__close-button': {
+        appearance: 'none',
+        backgroundColor: 'transparent',
+        border: 0,
+        outline: 0,
+        padding: paddingRegular,
+        // We are enlarging the bounding box of close button for scroll into view properly/cosmetically.
+        // When TAB key focus on the close button, it is scrolled into view.
+        // If the close button is at (10, 10), the `scrollTop` will be 10.
+        // We are enlarging the bounding box, so TAB to focus on close button, `scrollTop` will be 0.
+        // However, the bounding box enlarged does not means the padding are clickable.
+        // We are setting `pointerEvents` to `none` to ignore mouse click on the enlarged bounding box.
+        pointerEvents: 'none',
+        position: 'absolute',
+        right: 0,
+        top: 0
+      },
+
+      '& .webchat__keyboard-help__close-button-border': {
+        alignItems: 'center',
+        borderRadius: 4,
+        borderStyle: 'solid',
+        borderWidth: 2,
+        color: '#999',
+        display: 'flex',
+        height: 30,
+        justifyContent: 'center',
+        // After enlarging the bounding box, we will resume pointer events (i.e. "click") inside this element.
+        pointerEvents: 'initial',
+        width: 30,
+
+        [LIGHT_THEME_SELECTOR]: {
+          borderColor: 'black',
+
+          '&:active': {
+            backgroundColor: '#EDEBE9' // neutralLight (gray30)
+          },
+
+          '&:not(:active):hover': {
+            backgroundColor: '#F3F2F1' // neutralLighter (gray20)
+          }
+        },
+
+        [DARK_THEME_SELECTOR]: {
+          borderColor: 'white',
+
+          '&:active': {
+            backgroundColor: '#292827' // neutralLight (gray30)
+          },
+
+          '&:not(:active):hover': {
+            backgroundColor: '#252423' // neutralLight (gray30)
+          }
+        },
+
+        [FORCED_COLORS_SELECTOR]: {
+          backgroundColor: 'ButtonFace',
+          borderColor: 'ButtonBorder'
+        }
+      },
+
+      '& .webchat__keyboard-help__close-button-image': {
+        fill: '#323130', // neutralPrimary (gray160)
+        height: 10,
+        width: 10,
+
+        [FORCED_COLORS_SELECTOR]: {
+          fill: 'ButtonText'
+        },
+
+        [DARK_THEME_SELECTOR]: {
+          fill: '#F3F2F1' // neutralPrimary (gray160)
+        }
+      },
+
+      '& .webchat__keyboard-help__header, & .webchat__keyboard-help__sub-header': {
+        marginBottom: paddingRegular / 2,
+        marginTop: 0
+      },
+
+      '& .webchat__keyboard-help__section:not(:last-child)': {
+        marginBottom: paddingRegular
+      },
+
+      '& .webchat__keyboard-help__two-panes': {
+        alignItems: 'flex-start',
+        display: 'flex'
+      },
+
+      '& .webchat__keyboard-help__image': {
+        paddingRight: paddingRegular
+      },
+
+      '& .webchat__keyboard-help__image--dark, & .webchat__keyboard-help__image--high-contrast': {
+        display: 'none'
+      },
+
+      [FORCED_COLORS_SELECTOR]: {
+        '& .webchat__keyboard-help__image--dark, & .webchat__keyboard-help__image--light': {
+          display: 'none'
+        },
+
+        '& .webchat__keyboard-help__image--high-contrast': {
+          display: 'unset',
+          // "difference" will make sure SVG image is properly color in both light and dark high contrast mode.
+          mixBlendMode: 'difference'
+        }
+      },
+
+      [DARK_THEME_SELECTOR]: {
+        color: '#F3F2F1',
+
+        '& .webchat__keyboard-help__image--light': {
+          display: 'none'
+        },
+
+        '& .webchat__keyboard-help__image--dark': {
+          display: 'unset'
+        }
+      },
+
+      '& .webchat__keyboard-help__notes': {
+        marginBottom: paddingRegular,
+        marginTop: 0
+      },
+
+      '& .webchat__keyboard-help__notes-header': {
+        fontWeight: 'bold',
+        margin: 0
+      },
+
+      '& .webchat__keyboard-help__notes-pane': {
+        flexShrink: 10000
+      },
+
+      '& .webchat__keyboard-help__notes-text': {
+        margin: 0
+      }
+    }
+  };
+}

package/src/Styles/StyleSet/LinkDefinitions.ts

@@ -9,14 +9,16 @@ import CSSTokens from '../CSSTokens';
 export default function createLinkDefinitionsStyleSet() {
   return {
     '&.webchat__link-definitions': {
+      // '&[open] .webchat__link-definitions__header::after': {
+      //   transform: 'rotate(0deg)'
+      // },
+
       '.webchat__link-definitions__header': {
         alignItems: 'center',
-        cursor: 'default',
         display: 'flex',
         fontFamily: CSSTokens.FontPrimary,
         fontSize: CSSTokens.FontSizeSmall,
         gap: 4,
-        justifyContent: 'space-between',
         listStyle: 'none',
 
         [LIGHT_THEME_SELECTOR]: {
@@ -29,17 +31,6 @@ export default function createLinkDefinitionsStyleSet() {
         }
       },
 
-      '.webchat__link-definitions__header-section': {
-        alignItems: 'center',
-        display: 'flex',
-        gap: 4,
-        overflow: 'hidden'
-      },
-
-      '.webchat__link-definitions__header-section--left': {
-        flexShrink: 0
-      },
-
       '.webchat__link-definitions__header-text': {
         flexShrink: 0
       },
@@ -56,12 +47,15 @@ export default function createLinkDefinitionsStyleSet() {
         transform: 'rotate(-180deg)'
       },
 
+      '.webchat__link-definitions__header-filler': {
+        flexGrow: 1
+      },
+
       '.webchat__link-definitions__header-accessory': {
         overflow: 'hidden'
       },
 
       '.webchat__link-definitions__message-sensitivity-label': {
-        alignItems: 'center',
         display: 'flex',
         gap: 4
       },
@@ -91,19 +85,19 @@ export default function createLinkDefinitionsStyleSet() {
       },
 
       '.webchat__link-definitions__badge': {
+        alignItems: 'center',
         alignSelf: 'flex-start',
         borderRadius: '4px',
         borderStyle: 'solid',
         borderWidth: 1,
+        display: 'flex',
         flexShrink: 0,
         fontSize: '75%',
+        justifyContent: 'center',
         margin: 4,
-        maxWidth: '4em',
         minWidth: '1em',
         overflow: 'hidden',
         padding: 2,
-        textAlign: 'center',
-        textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
 
         [LIGHT_THEME_SELECTOR]: {

package/src/Styles/StyleSet/MicrophoneButton.ts

@@ -6,7 +6,7 @@ export default function createMicrophoneButtonStyle({ microphoneButtonColorOnDic
       '&.webchat__microphone-button--dictating .webchat__microphone-button__button': {
         '&, &:focus, &:hover': {
           '& .webchat__microphone-button__icon': {
-            '--webchat__component-icon--color': microphoneButtonColorOnDictate
+            fill: microphoneButtonColorOnDictate
           }
         }
       }

package/src/Styles/StyleSet/ModalDialog.ts

@@ -19,12 +19,6 @@ export default function createModalDialogStyleSet() {
         border: 0
       },
 
-      // Assume the content is being prepared, so we hide the whole dialog until content appears in the DOM.
-      // Use opacity to still be able to set focus on the first available control (close button).
-      '&:has(.webchat__modal-dialog__body:empty)': {
-        opacity: 0
-      },
-
       '& .webchat__modal-dialog__box': {
         borderRadius: 2,
         overflow: 'hidden',
@@ -36,7 +30,7 @@ export default function createModalDialogStyleSet() {
 
         '@media screen and (min-width: 640px)': {
           maxWidth: '60%',
-          minWidth: 'calc(640px - 2em - 6px)', // Browser natively do "100% - 2em - 6px".
+          minWidth: 'calc(640px - 32px)',
           width: '60%'
         },
 
@@ -71,9 +65,6 @@ export default function createModalDialogStyleSet() {
       '& .webchat__modal-dialog__close-button': {
         height: 30,
         width: 30,
-        padding: 0,
-
-        '--webchat__component-icon--size': '16px',
 
         [NOT_FORCED_COLORS_SELECTOR]: {
           appearance: 'none',
@@ -113,17 +104,20 @@ export default function createModalDialogStyleSet() {
         }
       },
 
-      '& .webchat__modal-dialog__close-button-icon': {
+      '& .webchat__modal-dialog__close-button-image': {
+        height: 10,
+        width: 10,
+
         [LIGHT_THEME_SELECTOR]: {
-          color: '#323130' // neutralPrimary (gray160)
+          fill: '#323130' // neutralPrimary (gray160)
         },
 
         [DARK_THEME_SELECTOR]: {
-          color: '#F3F2F1' // neutralPrimary (gray160)
+          fill: '#F3F2F1' // neutralPrimary (gray160)
         },
 
         [FORCED_COLORS_SELECTOR]: {
-          color: 'currentcolor'
+          fill: 'currentcolor'
         }
       },