botframework-webchat-fluent-theme 4.18.1-main.20250428.a6b3ad8 → 4.18.1-main.20250505.5e12798

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "botframework-webchat-fluent-theme",
-  "version": "4.18.1-main.20250428.a6b3ad8",
+  "version": "4.18.1-main.20250505.5e12798",
   "description": "Fluent theme for Bot Framework Web Chat",
   "main": "./dist/botframework-webchat-fluent-theme.js",
   "types": "./dist/botframework-webchat-fluent-theme.d.ts",
@@ -72,15 +72,15 @@
     "@types/math-random": "^1.0.2",
     "@types/node": "^22.13.4",
     "@types/react": "^16.14.62",
-    "botframework-webchat-base": "4.18.1-main.20250428.a6b3ad8",
-    "botframework-webchat-styles": "4.18.1-main.20250428.a6b3ad8",
+    "botframework-webchat-base": "4.18.1-main.20250505.5e12798",
+    "botframework-webchat-styles": "4.18.1-main.20250505.5e12798",
     "tsup": "^8.3.6",
     "typescript": "^5.7.3"
   },
   "dependencies": {
-    "botframework-webchat-api": "4.18.1-main.20250428.a6b3ad8",
-    "botframework-webchat-component": "4.18.1-main.20250428.a6b3ad8",
-    "botframework-webchat-core": "4.18.1-main.20250428.a6b3ad8",
+    "botframework-webchat-api": "4.18.1-main.20250505.5e12798",
+    "botframework-webchat-component": "4.18.1-main.20250505.5e12798",
+    "botframework-webchat-core": "4.18.1-main.20250505.5e12798",
     "classnames": "2.5.1",
     "inject-meta-tag": "0.0.1",
     "math-random": "2.0.1",

package/src/components/sendBox/TextArea.module.css

@@ -14,7 +14,7 @@
 
 :global(.webchat-fluent) .sendbox__text-area--in-completion {
   .sendbox__text-area-doppelganger {
-    visibility: visible;
+    visibility: unset;
   }
 
   .sendbox__text-area-input {

package/src/components/theme/Theme.module.css

@@ -630,97 +630,101 @@
 }
 
 /* Feedback Form */
-:global(.webchat-fluent).theme :global(.webchat__feedback-form__body1) {
-  font-family: var(--webchat-fontFamilyBase);
-  color: var(--webchat-colorNeutralForeground1);
-  font-size: var(--webchat-fontSizeBase300);
-  font-weight: var(--webchat-fontWeightRegular);
-  line-height: var(--webchat-lineHeightBase300);
-}
-
-:global(.webchat-fluent).theme :global(.webchat__feedback-form__caption1) {
-  font-family: var(--webchat-fontFamilyBase);
-  color: var(--webchat-colorNeutralForeground1);
-  font-size: var(--webchat-fontSizeBase100);
-  font-weight: var(--webchat-fontWeightRegular);
-  line-height: var(--webchat-lineHeightBase200);
-}
+:global(.webchat-fluent).theme :global(.webchat__feedback-form) {
+  gap: var(--webchat-spacingVerticalXS);
 
-:global(.webchat-fluent).theme :global(.webchat__feedback-form__button__submit) {
-  background-color: var(--webchat-colorBrandBackground);
-  border: var(--webchat-strokeWidthThin) solid var(--webchat-colorBrandBackground);
-  border-radius: var(--webchat-borderRadiusMedium);
-  color: var(--webchat-colorNeutralForegroundOnBrand);
-  cursor: pointer;
-  font-family: var(--webchat-fontFamilyBase);
-  font-size: var(--webchat-fontSizeBase300);
-  padding: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalS);
-  transition: background-color var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
-
-  &:hover {
-    background-color: var(--webchat-colorBrandBackgroundHover);
-    border: var(--webchat-strokeWidthThin) solid var(--webchat-colorBrandBackgroundHover);
-  }
-
-  &:focus-visible {
-    outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
-    outline-offset: calc(var(--webchat-strokeWidthThin) * -1);
-  }
-
-  &:active {
-    background-color: var(--webchat-colorBrandBackgroundPressed);
-    border: var(--webchat-strokeWidthThin) solid var(--webchat-colorBrandBackgroundPressed);
-  }
-}
-
-:global(.webchat-fluent).theme :global(.webchat__feedback-form__button__cancel) {
-  background-color: var(--webchat-colorNeutralBackground1);
-  border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1);
-  border-radius: var(--webchat-borderRadiusMedium);
-  color: var(--webchat-colorNeutralForeground1);
-  cursor: pointer;
-  font-family: var(--webchat-fontFamilyBase);
-  font-size: var(--webchat-fontSizeBase300);
-  padding: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalS);
-  transition: background-color var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
-
-  &:hover {
-    background-color: var(--webchat-colorNeutralBackground1Hover);
-    border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1Hover);
+  :global(.webchat__feedback-form__body) {
+    font-family: var(--webchat-fontFamilyBase);
+    color: var(--webchat-colorNeutralForeground1);
+    font-size: var(--webchat-fontSizeBase300);
+    font-weight: var(--webchat-fontWeightRegular);
+    line-height: var(--webchat-lineHeightBase300);
   }
-
-  &:focus-visible {
-    outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
-    outline-offset: calc(var(--webchat-strokeWidthThin) * -1);
+  
+  :global(.webchat__feedback-form__caption) {
+    font-family: var(--webchat-fontFamilyBase);
+    color: var(--webchat-colorNeutralForeground1);
+    font-size: var(--webchat-fontSizeBase100);
+    font-weight: var(--webchat-fontWeightRegular);
+    line-height: var(--webchat-lineHeightBase200);
   }
-
-  &:active {
-    background-color: var(--webchat-colorNeutralBackground1Pressed);
-    border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1Pressed);
+  
+  :global(.webchat__feedback-form__submit-button) {
+    background-color: var(--webchat-colorBrandBackground);
+    border: var(--webchat-strokeWidthThin) solid var(--webchat-colorBrandBackground);
+    border-radius: var(--webchat-borderRadiusMedium);
+    color: var(--webchat-colorNeutralForegroundOnBrand);
+    cursor: pointer;
+    font-family: var(--webchat-fontFamilyBase);
+    font-size: var(--webchat-fontSizeBase300);
+    padding: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalS);
+    transition: background-color var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
+  
+    &:hover {
+      background-color: var(--webchat-colorBrandBackgroundHover);
+      border: var(--webchat-strokeWidthThin) solid var(--webchat-colorBrandBackgroundHover);
+    }
+  
+    &:focus-visible {
+      outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
+      outline-offset: calc(var(--webchat-strokeWidthThin) * -1);
+    }
+  
+    &:active {
+      background-color: var(--webchat-colorBrandBackgroundPressed);
+      border: var(--webchat-strokeWidthThin) solid var(--webchat-colorBrandBackgroundPressed);
+    }
   }
-}
-
-:global(.webchat-fluent).theme :global(.webchat__feedback-form-text-area) {
-  background-color: var(--webchat-colorNeutralBackground1);
-  border-radius: var(--webchat-borderRadiusMedium);
-  border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1);
-  font-family: var(--webchat-fontFamilyBase);
-  font-size: var(--webchat-fontSizeBase300);
-  line-height: var(--webchat-lineHeightBase300);
-  gap: var(--webchat-spacingVerticalSNudge);
-  padding: var(--webchat-spacingVerticalS) var(--webchat-spacingHorizontalM);
-  &::after {
-    border-bottom-left-radius: var(--webchat-borderRadiusMedium);
-    border-bottom-right-radius: var(--webchat-borderRadiusMedium);
-    border-bottom: var(--webchat-strokeWidthThicker) solid var(--webchat-colorBrandForeground1);
-    clip-path: inset(calc(100% - var(--webchat-strokeWidthThicker)) 50% 0 50%);
-    transition: clip-path var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
-  }
-  &:focus-within {
+  
+  :global(.webchat__feedback-form__cancel-button) {
+    background-color: var(--webchat-colorNeutralBackground1);
     border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1);
+    border-radius: var(--webchat-borderRadiusMedium);
+    color: var(--webchat-colorNeutralForeground1);
+    cursor: pointer;
+    font-family: var(--webchat-fontFamilyBase);
+    font-size: var(--webchat-fontSizeBase300);
+    padding: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalS);
+    transition: background-color var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
+  
+    &:hover {
+      background-color: var(--webchat-colorNeutralBackground1Hover);
+      border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1Hover);
+    }
+  
+    &:focus-visible {
+      outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
+      outline-offset: calc(var(--webchat-strokeWidthThin) * -1);
+    }
+  
+    &:active {
+      background-color: var(--webchat-colorNeutralBackground1Pressed);
+      border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1Pressed);
+    }
   }
-  &:focus-within::after {
-    clip-path: inset(calc(100% - var(--webchat-strokeWidthThicker)) 0 0 0);
-    transition: clip-path var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
-  }
-}
+  
+  :global(.webchat__feedback-form-text-area) {
+    background-color: var(--webchat-colorNeutralBackground1);
+    border-radius: var(--webchat-borderRadiusMedium);
+    border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1);
+    font-family: var(--webchat-fontFamilyBase);
+    font-size: var(--webchat-fontSizeBase300);
+    line-height: var(--webchat-lineHeightBase300);
+    gap: var(--webchat-spacingVerticalSNudge);
+    padding: var(--webchat-spacingVerticalS) var(--webchat-spacingHorizontalM);
+    &::after {
+      border-bottom-left-radius: var(--webchat-borderRadiusMedium);
+      border-bottom-right-radius: var(--webchat-borderRadiusMedium);
+      border-bottom: var(--webchat-strokeWidthThicker) solid var(--webchat-colorBrandForeground1);
+      clip-path: inset(calc(100% - var(--webchat-strokeWidthThicker)) 50% 0 50%);
+      transition: clip-path var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
+    }
+    &:focus-within {
+      border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1);
+    }
+    &:focus-within::after {
+      clip-path: inset(calc(100% - var(--webchat-strokeWidthThicker)) 0 0 0);
+      transition: clip-path var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
+    }
+  }  
+}