[pull] master from microsoft:master

change/@fluentui-react-menu-4b0904b6-f1ef-4b82-ace6-d2809363522d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(Menu): Menu item with expanded submenu should be highlighted",
+  "packageName": "@fluentui/react-menu",
+  "email": "jukapsia@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-motion-44d5d8fd-6710-49df-8937-48b7e73075a4.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "docs(motion): add motion system docs",
+  "packageName": "@fluentui/react-motion",
+  "email": "robertpenner@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-motion-components-preview-643db992-5d5b-4a0a-adbb-b8bf361f41c3.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "docs(motion): add motion components docs",
+  "packageName": "@fluentui/react-motion-components-preview",
+  "email": "robertpenner@microsoft.com",
+  "dependentChangeType": "none"
+}

package.json

@@ -71,7 +71,7 @@
     "@microsoft/api-extractor": "7.51.0",
     "@microsoft/api-extractor-model": "7.31.2",
     "@microsoft/eslint-plugin-sdl": "1.0.1",
-    "@microsoft/focusgroup-polyfill": "^1.3.0",
+    "@microsoft/focusgroup-polyfill": "^1.4.1",
     "@microsoft/load-themed-styles": "1.10.26",
     "@microsoft/loader-load-themed-styles": "2.0.17",
     "@microsoft/tsdoc": "0.15.1",

packages/charts/chart-web-components/CHANGELOG.json

@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/chart-web-components",
   "entries": [
+    {
+      "date": "Wed, 06 May 2026 19:08:43 GMT",
+      "tag": "@fluentui/chart-web-components_v0.0.75",
+      "version": "0.0.75",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/chart-web-components",
+            "comment": "Bump @fluentui/web-components to v3.0.0-rc.17",
+            "commit": "d57f87e85e38fe4b70ff74a775065cc3e21e8dd3"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 06 May 2026 04:07:36 GMT",
       "tag": "@fluentui/chart-web-components_v0.0.74",

packages/charts/chart-web-components/CHANGELOG.md

@@ -1,9 +1,18 @@
 # Change Log - @fluentui/chart-web-components
 
-This log was last generated on Wed, 06 May 2026 04:07:36 GMT and should not be manually modified.
+This log was last generated on Wed, 06 May 2026 19:08:43 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.0.75](https://github.com/microsoft/fluentui/tree/@fluentui/chart-web-components_v0.0.75)
+
+Wed, 06 May 2026 19:08:43 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/chart-web-components_v0.0.74..@fluentui/chart-web-components_v0.0.75)
+
+### Patches
+
+- Bump @fluentui/web-components to v3.0.0-rc.17 ([PR #36111](https://github.com/microsoft/fluentui/pull/36111) by beachball)
+
 ## [0.0.74](https://github.com/microsoft/fluentui/tree/@fluentui/chart-web-components_v0.0.74)
 
 Wed, 06 May 2026 04:07:36 GMT 

packages/charts/chart-web-components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fluentui/chart-web-components",
   "description": "A library of Fluent Chart Web Components",
-  "version": "0.0.74",
+  "version": "0.0.75",
   "author": {
     "name": "Microsoft"
   },
@@ -70,7 +70,7 @@
   "dependencies": {
     "@microsoft/fast-web-utilities": "^6.0.0",
     "@fluentui/tokens": "^1.0.0-alpha.23",
-    "@fluentui/web-components": "^3.0.0-rc.16",
+    "@fluentui/web-components": "^3.0.0-rc.17",
     "@types/d3-selection": "^3.0.0",
     "@types/d3-shape": "^3.0.0",
     "d3-selection": "^3.0.0",

packages/react-components/react-menu/library/etc/react-menu.api.md

@@ -199,7 +199,9 @@ export type MenuItemSlots = {
 };
 
 // @public (undocumented)
-export type MenuItemState = ComponentState<MenuItemSlots> & Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>>;
+export type MenuItemState = ComponentState<MenuItemSlots> & Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>> & {
+    submenuOpen: boolean;
+};
 
 // @public (undocumented)
 export const MenuItemSwitch: ForwardRefComponent<MenuItemSwitchProps>;

packages/react-components/react-menu/library/src/components/MenuItem/MenuItem.types.ts

@@ -61,4 +61,6 @@ export type MenuItemProps = Omit<ComponentProps<Partial<MenuItemSlots>>, 'conten
   };
 
 export type MenuItemState = ComponentState<MenuItemSlots> &
-  Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>>;
+  Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>> & {
+    submenuOpen: boolean;
+  };

packages/react-components/react-menu/library/src/components/MenuItem/useMenuItem.tsx

@@ -67,6 +67,7 @@ export const useMenuItemBase_unstable = (
   } = props;
   const { hasIcons, hasCheckmarks } = useIconAndCheckmarkAlignment({ hasSubmenu });
   const setOpen = useMenuContext_unstable(context => context.setOpen);
+  const open = useMenuContext_unstable(context => context.open);
   useNotifySplitItemMultiline({ multiline: !!props.subText, hasSubmenu });
 
   const innerRef = React.useRef<ARIAButtonElementIntersection<'div'>>(null);
@@ -76,6 +77,7 @@ export const useMenuItemBase_unstable = (
 
   const state: MenuItemState = {
     hasSubmenu,
+    submenuOpen: hasSubmenu && open,
     disabled,
     persistOnClick,
     components: {

packages/react-components/react-menu/library/src/components/MenuItem/useMenuItemStyles.styles.ts

@@ -147,6 +147,29 @@ const useStyles = makeStyles({
       backgroundColor: tokens.colorNeutralStroke1,
     },
   },
+  submenuOpen: {
+    backgroundColor: tokens.colorNeutralBackground1Hover,
+    color: tokens.colorNeutralForeground2Hover,
+
+    [`& .${iconFilledClassName}`]: {
+      display: 'inline',
+    },
+    [`& .${iconRegularClassName}`]: {
+      display: 'none',
+    },
+    [`& .${menuItemClassNames.icon}`]: {
+      color: tokens.colorNeutralForeground2BrandSelected,
+    },
+
+    [`& .${menuItemClassNames.subText}`]: {
+      color: tokens.colorNeutralForeground3Hover,
+    },
+
+    '@media (forced-colors: active)': {
+      backgroundColor: 'Canvas',
+      color: 'Highlight',
+    },
+  },
   disabled: {
     color: tokens.colorNeutralForegroundDisabled,
     ':hover': {
@@ -250,6 +273,7 @@ export const useMenuItemStyles_unstable = (state: MenuItemState): MenuItemState
   state.root.className = mergeClasses(
     menuItemClassNames.root,
     rootBaseStyles,
+    state.submenuOpen && styles.submenuOpen,
     state.disabled && styles.disabled,
     state.root.className,
   );

packages/react-components/react-menu/library/src/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.ts

@@ -145,6 +145,7 @@ export const useMenuItemSwitchStyles_unstable = (state: MenuItemSwitchState): Me
     checkmark: undefined,
     submenuIndicator: undefined,
     hasSubmenu: false,
+    submenuOpen: false,
     persistOnClick: true,
   });
 

packages/react-components/react-motion-components-preview/library/README.md

@@ -1,5 +1,93 @@
 # @fluentui/react-motion-components-preview
 
-**React Motion Components for [Fluent UI React](https://react.fluentui.dev/)**
+**Pre-built Motion Components for [Fluent UI React](https://react.fluentui.dev/)**
 
-These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
+> ⚠️ **Preview Package**: These components are in beta and APIs may change before stable release.
+
+Ready-to-use presence components for common UI animation patterns, built on top of `@fluentui/react-motion`.
+
+## Components
+
+| Component    | Description                                                |
+| ------------ | ---------------------------------------------------------- |
+| **Fade**     | Opacity transitions for tooltips, notifications, overlays  |
+| **Scale**    | Size animations for popovers, menus, emphasis              |
+| **Collapse** | Height/width expansion for accordions, expandable sections |
+| **Slide**    | Directional movement for drawers, panels, carousels        |
+| **Blur**     | Focus/defocus effects for backgrounds, depth               |
+| **Rotate**   | 3D rotation for card flips, reveals                        |
+| **Stagger**  | Choreography for sequential list animations                |
+
+Each component (except Blur and Rotate) comes with **Snappy** (150ms) and **Relaxed** (250ms) timing variants.
+
+## Installation
+
+```bash
+npm install @fluentui/react-motion-components-preview
+# or
+yarn add @fluentui/react-motion-components-preview
+```
+
+## Quick Start
+
+```tsx
+import { Fade, Scale, Slide, Collapse } from '@fluentui/react-motion-components-preview';
+
+// Simple fade
+function Tooltip({ visible, children }) {
+  return (
+    <Fade visible={visible}>
+      {children}
+    </Fade>
+  );
+}
+
+// Slide from the right
+function Drawer({ open, children }) {
+  return (
+    <Slide visible={open} outX="20px">
+      {children}
+    </Slide>
+  );
+}
+
+// Use timing variants
+import { FadeSnappy, ScaleRelaxed } from '@fluentui/react-motion-components-preview';
+
+<FadeSnappy visible={show}>Quick feedback</FadeSnappy>
+<ScaleRelaxed visible={show}>Smooth entrance</ScaleRelaxed>
+```
+
+### The `.In` and `.Out` Pattern
+
+Every presence component includes one-way sub-components:
+
+```tsx
+// One-way enter animation (plays on mount)
+<Fade.In>
+  <div>Fades in once</div>
+</Fade.In>
+
+// One-way exit animation (plays on mount)
+<Fade.Out>
+  <div>Fades out once</div>
+</Fade.Out>
+```
+
+## Documentation
+
+📚 **[Full documentation](https://react.fluentui.dev/?path=/docs/motion-components-preview-introduction--docs)**
+
+- [Introduction](https://react.fluentui.dev/?path=/docs/motion-components-preview-introduction--docs) — Overview of all components
+- [Fade](https://react.fluentui.dev/?path=/docs/motion-components-preview-fade--docs)
+- [Scale](https://react.fluentui.dev/?path=/docs/motion-components-preview-scale--docs)
+- [Collapse](https://react.fluentui.dev/?path=/docs/motion-components-preview-collapse--docs)
+- [Slide](https://react.fluentui.dev/?path=/docs/motion-components-preview-slide--docs)
+- [Blur](https://react.fluentui.dev/?path=/docs/motion-components-preview-blur--docs)
+- [Rotate](https://react.fluentui.dev/?path=/docs/motion-components-preview-rotate--docs)
+- [Stagger](https://react.fluentui.dev/?path=/docs/motion-choreography-preview-stagger--docs)
+- [Motion Atoms](https://react.fluentui.dev/?path=/docs/motion-components-preview-atoms--docs) — Building blocks for custom components
+
+## Related
+
+- **[@fluentui/react-motion](https://www.npmjs.com/package/@fluentui/react-motion)** — Core motion APIs for creating custom animations

packages/react-components/react-motion-components-preview/stories/package.json

@@ -1,5 +1,13 @@
 {
   "name": "@fluentui/react-motion-components-preview-stories",
   "version": "0.0.0",
-  "private": true
+  "private": true,
+  "dependencies": {
+    "@fluentui/react-components": "*",
+    "@fluentui/react-icons": "^2.0.245",
+    "@fluentui/react-motion": "*",
+    "@fluentui/react-motion-components-preview": "*",
+    "@fluentui/react-shared-contexts": "*",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+  }
 }

packages/react-components/react-motion-components-preview/stories/src/Atoms/AtomsDemo.styles.ts

@@ -0,0 +1,68 @@
+'use client';
+
+import { makeStyles, tokens } from '@fluentui/react-components';
+
+export const useClasses = makeStyles({
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
+    borderRadius: tokens.borderRadiusMedium,
+    marginTop: tokens.spacingVerticalXXL,
+    marginBottom: tokens.spacingVerticalXXL,
+    overflow: 'hidden',
+  },
+  controls: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: tokens.spacingHorizontalL,
+    flexWrap: 'wrap',
+    padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalXL}`,
+    backgroundColor: tokens.colorNeutralBackground2,
+    borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
+  },
+  body: {
+    display: 'flex',
+    '@media (max-width: 600px)': {
+      flexDirection: 'column',
+    },
+  },
+  demoArea: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: '120px',
+    flex: '0 0 200px',
+    backgroundColor: tokens.colorNeutralBackground1,
+    padding: tokens.spacingVerticalXL,
+  },
+  demoBox: {
+    width: '100px',
+    height: '80px',
+    backgroundColor: tokens.colorNeutralBackground3,
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
+    borderRadius: tokens.borderRadiusMedium,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: tokens.colorNeutralForeground1,
+    fontWeight: tokens.fontWeightSemibold,
+  },
+  codeArea: {
+    flex: '1 1 auto',
+    minWidth: 0,
+    margin: 0,
+    padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalXL}`,
+    backgroundColor: tokens.colorNeutralBackground3,
+    borderLeft: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
+    overflow: 'auto',
+    fontFamily: tokens.fontFamilyMonospace,
+    fontSize: tokens.fontSizeBase100,
+    lineHeight: tokens.lineHeightBase200,
+    color: tokens.colorNeutralForeground1,
+    '@media (max-width: 600px)': {
+      borderLeft: 'none',
+      borderTop: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
+    },
+  },
+});