Repository: flutter
Issue: Update ExpansionTile to match M3 specs
Labels: c: new feature,framework,f: material design,has reproducible steps,P3,found in release: 3.11,team-design,triaged-design

- ExpansionTile has 1dp top and bottom padding
    - this is apparent when the border is not present
    - causes a double border when two `ExpandsionTile`s are open next to each other
    - `ExpansionTile` uses a surrounding 1dp border rather than the foreground border used in `ListTile.divideTiles()`

- ExpansionTile border not using the correct colour
    - Uses `dividerColor` instead of `onSurface` (M2) `colorScheme.outlineVariant` (M3) 

- ExpansionTIle incorrect trailing icon color M3
    - Uses `onSurfaceVariant` instead of `primary`

- ExpansionTile forced top and bottom border
    - Cannot create bottom-only and no divider expansion styles (particularly important for M3 styles)

- No three-line ExpansionTile

### Is there an existing issue for this?

- [X] I have searched the [existing issues](https://github.com/flutter/flutter/issues)
- [X] I have read the [guide to filing a bug](https://flutter.dev/docs/resources/bug-reports)


### Code sample

<details><summary>Code sample</summary>

```dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
        visualDensity: VisualDensity.standard,
      ),
      home: Scaffold(
        body: SingleChildScrollView(
          child: Column(
            children: [
              const SizedBox(height: 8),
              ListTile(
                tileColor: Colors.black26,
                leading: const SizedBox(
                  height: 56,
                  width: 56,
                  child: Placeholder(),
                ),
                title: const Text('56x56 image'),
                onTap: () {},
              ),
              ListTile(
                tileColor: Colors.black12,
                
                leading: const SizedBox(
                  height: 64,
                  width: 114,
                  child: Placeholder(),
                ),
                title: const Text('64x114 video'),
                onTap: () {},
              ),
              ListTile(
                tileColor: Colors.black26,
                isThreeLine: true,
                leading: const SizedBox(
                  height: 64,
                  width: 114,
                  child: Placeholder(),
                ),
                title: const Text('Three line video'),
                subtitle: const Text('Should have 12 dp padding top and bottom'),
                onTap: () {},
              ),
              ListTile(
                tileColor: Colors.black12,
                title: const Text('One line icon'),
                trailing: const Icon(Icons.more),
                onTap: () {},
              ),
              ListTile(
                tileColor: Colors.black26,
                title: const Text('One line iconButton'),
                trailing: IconButton(
                  onPressed: () {},
                  icon: const Icon(Icons.more),
                ),
                onTap: () {},
              ),
              ListTile(
                tileColor: Colors.black12,
                isThreeLine: true,
                title: const Text('Three line icon'),
                subtitle: const Text('Top right aligned'),
                trailing: const Icon(Icons.more),
                onTap: () {},
              ),
              ListTile(
                tileColor: Colors.black26,
                isThreeLine: true,
                title: const Text('Three line iconButton'),
                subtitle: const Text('8 dp down and left from the plain icon'),
                trailing: IconButton(
                  onPressed: () {},
                  icon: const Icon(Icons.more),
                ),
                onTap: () {},
              ),
              const ExpansionTile(
                backgroundColor: Colors.black12,
                title: Text('Exansion tile'),
                subtitle: Text('You can see the 1px gap above when hovering or holding'),
                children: [
                  ListTile(
                    title: Text('Expansion child'),
                  ),
                ],
              ),
              const ExpansionTile(
                backgroundColor: Colors.black26,
                title: Text('Exansion tile'),
                subtitle: Text('Expand both of us to see the double line'),
                children: [
                  ListTile(
                    title: Text('Expansion child'),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}
```

</details>