fix(web-components): update dropdown to fix forced-colors mode states (#35340)

Author: davatron5000

change/@fluentui-web-components-a6c6be0d-a8cd-49f6-8f46-f9b28b1237ef.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: update dropdown forced-colors mode states",
+  "packageName": "@fluentui/web-components",
+  "email": "rupertdavid@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/src/dropdown/dropdown.styles.ts

@@ -73,7 +73,7 @@ export const styles = css`
     appearance: none;
     background-color: ${colorNeutralBackground1};
     border-radius: ${borderRadiusMedium};
-    border: none;
+    border: ${strokeWidthThin} solid ${colorTransparentStroke};
     box-shadow: inset 0 0 0 ${strokeWidthThin} var(--control-border-color);
     box-sizing: border-box;
     color: inherit;
@@ -251,4 +251,12 @@ export const styles = css`
       --margin-offset: calc(${lineHeightBase400} + (${spacingVerticalS} * 2) + ${strokeWidthThin});
     }
   }
+
+  @media (forced-colors: active) {
+    :host(:disabled) .control {
+      border-color: GrayText;
+    }
+    :host(:disabled) :where(slot[name='indicator'] > *, ::slotted([slot='indicator'])) {
+      color: GrayText;
+    }
 `;

packages/web-components/src/listbox/listbox.styles.ts

@@ -3,9 +3,11 @@ import { flipBlockState } from '../styles/states/index.js';
 import {
   borderRadiusMedium,
   colorNeutralBackground1,
+  colorTransparentStroke,
   shadow16,
   spacingHorizontalXS,
   spacingHorizontalXXS,
+  strokeWidthThin,
 } from '../theme/design-tokens.js';
 import { display } from '../utils/display.js';
 
@@ -20,7 +22,7 @@ export const styles = css`
   :host {
     background-color: ${colorNeutralBackground1};
     border-radius: ${borderRadiusMedium};
-    border: none;
+    border: ${strokeWidthThin} solid ${colorTransparentStroke};
     box-shadow: ${shadow16};
     box-sizing: border-box;
     flex-direction: column;

packages/web-components/src/option/option.styles.ts

@@ -41,7 +41,6 @@ export const styles = css`
     align-items: center;
     background-color: ${colorNeutralBackground1};
     border-radius: ${borderRadiusMedium};
-    border: ${strokeWidthThick} solid ${colorTransparentStroke};
     box-sizing: border-box;
     color: ${colorNeutralForeground2};
     column-gap: ${spacingHorizontalXS};
@@ -148,4 +147,10 @@ export const styles = css`
     grid-area: description;
     ${typographyCaption1Styles}
   }
+
+  @media (forced-colors: active) {
+    :host(:disabled) {
+      color: GrayText;
+    }
+  }
 `;