feat(menu): modernize Menu to Material Design 3 specs

docs/6.x/docs/components/FAB/FABMenu.mdx

@@ -1,5 +1,5 @@
 ---
-title: Menu
+title: FAB.Menu
 ---
 
 import PropTable from '@docs/components/PropTable.tsx';
@@ -18,9 +18,7 @@ via the close button or by tapping an item.
 
 
 
-
-  <ScreenshotTabs screenshotData={{"with icons":"screenshots/menu-1.png","without icons":"screenshots/menu-2.png"}}/>
-
+<span />
 
 ## Usage
 ```tsx
@@ -113,10 +111,6 @@ const [open, setOpen] = React.useState(false);
 
 <span />
 
-
-  ## Theme colors
-
-  <ThemeColorsTable themeColorsData={{"-":{"backgroundColor":"theme.colors.elevation.level2"}}} componentName="Menu" />
-
+<span />
 
 <span />

docs/6.x/docs/components/Menu/Menu.mdx

@@ -10,10 +10,14 @@ import ExtendedExample from '@docs/components/ExtendedExample.tsx';
 
 Menus display a list of choices on temporary elevated surfaces. Their placement varies based on the element that opens them.
 
+Follows [Material Design 3 menus](https://m3.material.io/components/menus/specs): container
+`corner.large`, fill `surfaceContainerLow` (elevation controls shadow only), item label
+`labelLarge`, selected items use `tertiaryContainer` / `onTertiaryContainer`.
 
 
 
-  <ScreenshotTabs screenshotData={{"with icons":"screenshots/menu-1.png","without icons":"screenshots/menu-2.png"}}/>
+
+  <ScreenshotTabs screenshotData={{"with icons":"screenshots/menu-1.png","selected + supporting":"screenshots/menu-2.png","vibrant scheme":"screenshots/menu-3.png","bottom anchor":"screenshots/menu-4.png"}}/>
 
 
 ## Usage
@@ -41,10 +45,24 @@ const MyComponent = () => {
           visible={visible}
           onDismiss={closeMenu}
           anchor={<Button onPress={openMenu}>Show menu</Button>}>
-          <Menu.Item onPress={() => {}} title="Item 1" />
-          <Menu.Item onPress={() => {}} title="Item 2" />
+          <Menu.Item
+            leadingIcon="content-paste"
+            onPress={() => {}}
+            title="Paste"
+            supportingText="Insert clipboard"
+            trailingSupportingText="⌘V"
+            selected
+          />
+          <Menu.Item onPress={() => {}} title="Undo" />
           <Divider />
-          <Menu.Item onPress={() => {}} title="Item 3" />
+          <Menu.Item onPress={() => {}} title="Share" dense />
+        </Menu>
+        <Menu
+          visible={false}
+          onDismiss={() => {}}
+          colorScheme="vibrant"
+          anchor={<Button onPress={() => {}}>Vibrant</Button>}>
+          <Menu.Item onPress={() => {}} title="Featured" selected />
         </Menu>
       </View>
     </PaperProvider>
@@ -155,6 +173,14 @@ wrapping is not necessary if you use Paper's `Modal` instead.
 
 <div>
 
+### colorScheme
+
+</div>
+
+  <PropTable componentLink="Menu/Menu" prop="colorScheme" />
+
+<div>
+
 ### theme
 
 </div>
@@ -184,7 +210,7 @@ wrapping is not necessary if you use Paper's `Modal` instead.
 
   ## Theme colors
 
-  <ThemeColorsTable themeColorsData={{"-":{"backgroundColor":"theme.colors.elevation.level2"}}} componentName="Menu" />
+  <ThemeColorsTable themeColorsData={{"standard":{"backgroundColor":"theme.colors.surfaceContainerLow"},"vibrant":{"backgroundColor":"theme.colors.tertiaryContainer"},"selected item":{"backgroundColor":"theme.colors.tertiaryContainer","textColor":"theme.colors.onTertiaryContainer"}}} componentName="Menu" />
 
 
 <span />

docs/6.x/docs/components/Menu/MenuItem.mdx

@@ -10,6 +10,9 @@ import ExtendedExample from '@docs/components/ExtendedExample.tsx';
 
 A component to show a single list item inside a Menu.
 
+Supports MD3 selection (`selected`), supporting text, trailing supporting text,
+and dense layout.
+
 
 
 
@@ -28,7 +31,15 @@ const MyComponent = () => (
     <Menu.Item leadingIcon="undo" onPress={() => {}} title="Undo" />
     <Menu.Item leadingIcon="content-cut" onPress={() => {}} title="Cut" disabled />
     <Menu.Item leadingIcon="content-copy" onPress={() => {}} title="Copy" disabled />
-    <Menu.Item leadingIcon="content-paste" onPress={() => {}} title="Paste" />
+    <Menu.Item
+      leadingIcon="content-paste"
+      onPress={() => {}}
+      title="Paste"
+      supportingText="Insert clipboard"
+      trailingSupportingText="⌘V"
+      selected
+    />
+    <Menu.Item title="Share" dense />
   </View>
 );
 
@@ -51,6 +62,22 @@ export default MyComponent;
 
 <div>
 
+### supportingText
+
+</div>
+
+  <PropTable componentLink="Menu/MenuItem" prop="supportingText" />
+
+<div>
+
+### trailingSupportingText
+
+</div>
+
+  <PropTable componentLink="Menu/MenuItem" prop="trailingSupportingText" />
+
+<div>
+
 ### leadingIcon  <span class="badge badge-renamed "><span class="badge-text">Renamed from 'icon' to 'leadingIcon' in v5.x</span></span>
 
 </div>
@@ -67,6 +94,22 @@ export default MyComponent;
 
 <div>
 
+### selected
+
+</div>
+
+  <PropTable componentLink="Menu/MenuItem" prop="selected" />
+
+<div>
+
+### colorScheme
+
+</div>
+
+  <PropTable componentLink="Menu/MenuItem" prop="colorScheme" />
+
+<div>
+
 ### disabled
 
 </div>
@@ -83,6 +126,22 @@ export default MyComponent;
 
 <div>
 
+### roundedTop
+
+</div>
+
+  <PropTable componentLink="Menu/MenuItem" prop="roundedTop" />
+
+<div>
+
+### roundedBottom
+
+</div>
+
+  <PropTable componentLink="Menu/MenuItem" prop="roundedBottom" />
+
+<div>
+
 ### background
 
 </div>
@@ -107,6 +166,22 @@ export default MyComponent;
 
 <div>
 
+### supportingTextMaxFontSizeMultiplier
+
+</div>
+
+  <PropTable componentLink="Menu/MenuItem" prop="supportingTextMaxFontSizeMultiplier" />
+
+<div>
+
+### trailingSupportingTextMaxFontSizeMultiplier
+
+</div>
+
+  <PropTable componentLink="Menu/MenuItem" prop="trailingSupportingTextMaxFontSizeMultiplier" />
+
+<div>
+
 ### style
 
 </div>
@@ -139,6 +214,22 @@ export default MyComponent;
 
 <div>
 
+### supportingTextStyle
+
+</div>
+
+  <PropTable componentLink="Menu/MenuItem" prop="supportingTextStyle" />
+
+<div>
+
+### trailingSupportingTextStyle
+
+</div>
+
+  <PropTable componentLink="Menu/MenuItem" prop="trailingSupportingTextStyle" />
+
+<div>
+
 ### theme
 
 </div>
@@ -208,7 +299,7 @@ export default MyComponent;
 
   ## Theme colors
 
-  <ThemeColorsTable themeColorsData={{"default":{"textColor":"theme.colors.onSurface","iconColor":"theme.colors.onSurfaceVariant"},"disabled":{"textColor":"theme.colors.onSurfaceDisabled","iconColor":"theme.colors.onSurfaceDisabled"}}} componentName="Menu.Item" />
+  <ThemeColorsTable themeColorsData={{"default":{"textColor":"theme.colors.onSurface","iconColor":"theme.colors.onSurfaceVariant","supportingColor":"theme.colors.onSurfaceVariant"},"selected":{"backgroundColor":"theme.colors.tertiaryContainer","textColor":"theme.colors.onTertiaryContainer","iconColor":"theme.colors.onTertiaryContainer"},"disabled":{"textColor":"theme.colors.onSurface","iconColor":"theme.colors.onSurfaceVariant","contentOpacity":"theme.state.opacity.disabled (0.38)"},"vibrant":{"textColor":"theme.colors.onTertiaryContainer","iconColor":"theme.colors.onTertiaryContainer"},"vibrant selected":{"backgroundColor":"theme.colors.tertiary","textColor":"theme.colors.onTertiary","iconColor":"theme.colors.onTertiary"}}} componentName="Menu.Item" />
 
 
 <span />