Add initial configuration, tokens, and widgets for M3E components

- Introduced `.gitignore` and `.metadata` for apps and examples.
- Added Flutter/Dart analysis configurations (`analysis_options.yaml`).
- Implemented foundational tokens and themes for M3E (colors, shapes).
- Created base implementations for `IconButtonM3E` and `SplitButtonM3E`.
- Set up CI workflow (`ci.yaml`) to automate testing and analysis.

packages/slider_m3e/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) ...
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/slider_m3e/README.md

@@ -0,0 +1,69 @@
+# slider_m3e
+
+Material 3 **Expressive** Sliders for Flutter. Single-value and range sliders, with token-driven colors, sizes, and shapes.
+
+- `SliderM3E` — single-value slider, optional start/end icons, discrete or continuous
+- `RangeSliderM3E` — range selection with the same styling
+- `sliderThemeM3E(...)` — generate a `SliderThemeData` from **M3E** tokens
+
+All styling reads the `M3ETheme` ThemeExtension from your `m3e_design` package.
+
+## Monorepo Layout
+
+```
+packages/
+  m3e_design/
+  slider_m3e/
+```
+
+`pubspec.yaml` references `../m3e_design`.
+
+## Usage
+
+```dart
+import 'package:slider_m3e/slider_m3e.dart';
+
+// Single slider
+SliderM3E(
+  value: 0.35,
+  onChanged: (v) {},
+  divisions: 10, // discrete
+  size: SliderM3ESize.large,
+  emphasis: SliderM3EEmphasis.primary,
+  shapeFamily: SliderM3EShapeFamily.round, // or square (expressive)
+  startIcon: const Icon(Icons.volume_mute),
+  endIcon: const Icon(Icons.volume_up),
+);
+
+// Range slider
+RangeSliderM3E(
+  values: const RangeValues(0.2, 0.8),
+  onChanged: (r) {},
+  divisions: 8,
+  size: SliderM3ESize.medium,
+  emphasis: SliderM3EEmphasis.secondary,
+  shapeFamily: SliderM3EShapeFamily.square,
+);
+```
+
+## Tokens mapping
+
+- **Colors:**
+  - Active: `primary` / `secondary` / `onSurface` (by emphasis)
+  - Inactive track: `onSurface` @ 24% opacity
+  - Overlay: active color @ 12% opacity
+  - Value indicator: `secondaryContainer` with `onSecondaryContainer` text
+- **Sizes:**
+  - Track height: small **≈2dp**, medium **≈4dp**, large **≈6dp**
+  - Thumb radius: small **≈10dp**, medium **≈12dp**, large **≈14dp**
+- **Density:** `compact` slightly reduces track and thumb sizes
+- **Shapes:** `round` uses round thumb, `square` uses a rounded-rect thumb for an expressive look
+
+## Accessibility
+
+- Set `semanticLabel` to announce values (percentage format by default).
+- Discrete sliders (with `divisions`) will show value indicators when `showValueIndicator` is enabled (or `onlyForDiscrete` by default).
+
+## License
+
+MIT

packages/slider_m3e/lib/slider_m3e.dart

@@ -0,0 +1,7 @@
+library slider_m3e;
+
+export 'src/enums.dart';
+export 'src/slider_tokens_adapter.dart' show SliderTokensAdapter;
+export 'src/slider_theme_m3e.dart';
+export 'src/slider_m3e.dart';
+export 'src/range_slider_m3e.dart';

packages/slider_m3e/lib/src/enums.dart

@@ -0,0 +1,4 @@
+enum SliderM3ESize { small, medium, large }
+enum SliderM3EEmphasis { primary, secondary, surface }
+enum SliderM3EShapeFamily { round, square }
+enum SliderM3EDensity { regular, compact }

packages/slider_m3e/lib/src/range_slider_m3e.dart

@@ -0,0 +1,71 @@
+import 'package:flutter/material.dart';
+import 'slider_theme_m3e.dart';
+import 'enums.dart';
+
+class RangeSliderM3E extends StatelessWidget {
+  const RangeSliderM3E({
+    super.key,
+    required this.values,
+    required this.onChanged,
+    this.onChangeStart,
+    this.onChangeEnd,
+    this.min = 0.0,
+    this.max = 1.0,
+    this.divisions,
+    this.labels,
+    this.semanticLabel,
+    this.size = SliderM3ESize.medium,
+    this.emphasis = SliderM3EEmphasis.primary,
+    this.shapeFamily = SliderM3EShapeFamily.round,
+    this.density = SliderM3EDensity.regular,
+    this.showValueIndicator,
+  });
+
+  final RangeValues values;
+  final ValueChanged<RangeValues>? onChanged;
+  final ValueChanged<RangeValues>? onChangeStart;
+  final ValueChanged<RangeValues>? onChangeEnd;
+  final double min;
+  final double max;
+  final int? divisions;
+  final RangeLabels? labels;
+  final String? semanticLabel;
+
+  final SliderM3ESize size;
+  final SliderM3EEmphasis emphasis;
+  final SliderM3EShapeFamily shapeFamily;
+  final SliderM3EDensity density;
+  final bool? showValueIndicator;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = sliderThemeM3E(
+      context,
+      size: size,
+      emphasis: emphasis,
+      shapeFamily: shapeFamily,
+      density: density,
+      showValueIndicator: showValueIndicator ?? false,
+    );
+
+    return SliderTheme(
+      data: theme,
+      child: RangeSlider(
+        values: RangeValues(
+          values.start.clamp(min, max),
+          values.end.clamp(min, max),
+        ),
+        onChanged: onChanged,
+        onChangeStart: onChangeStart,
+        onChangeEnd: onChangeEnd,
+        min: min,
+        max: max,
+        divisions: divisions,
+        labels: labels,
+        semanticFormatterCallback: semanticLabel != null
+            ? (v) => '$semanticLabel ${(100 * ((v - min) / (max - min))).toStringAsFixed(0)}%'
+            : null,
+      ),
+    );
+  }
+}

packages/slider_m3e/lib/src/slider_m3e.dart

@@ -0,0 +1,85 @@
+import 'package:flutter/material.dart';
+import 'slider_theme_m3e.dart';
+import 'enums.dart';
+
+class SliderM3E extends StatelessWidget {
+  const SliderM3E({
+    super.key,
+    required this.value,
+    required this.onChanged,
+    this.onChangeStart,
+    this.onChangeEnd,
+    this.min = 0.0,
+    this.max = 1.0,
+    this.divisions,
+    this.label,
+    this.semanticLabel,
+    this.size = SliderM3ESize.medium,
+    this.emphasis = SliderM3EEmphasis.primary,
+    this.shapeFamily = SliderM3EShapeFamily.round,
+    this.density = SliderM3EDensity.regular,
+    this.showValueIndicator,
+    this.startIcon,
+    this.endIcon,
+  });
+
+  final double value;
+  final ValueChanged<double>? onChanged;
+  final ValueChanged<double>? onChangeStart;
+  final ValueChanged<double>? onChangeEnd;
+  final double min;
+  final double max;
+  final int? divisions;
+  final String? label;
+  final String? semanticLabel;
+
+  final SliderM3ESize size;
+  final SliderM3EEmphasis emphasis;
+  final SliderM3EShapeFamily shapeFamily;
+  final SliderM3EDensity density;
+  final bool? showValueIndicator;
+
+  final Widget? startIcon;
+  final Widget? endIcon;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = sliderThemeM3E(
+      context,
+      size: size,
+      emphasis: emphasis,
+      shapeFamily: shapeFamily,
+      density: density,
+      showValueIndicator: showValueIndicator ?? false,
+    );
+
+    final slider = Slider(
+      value: value.clamp(min, max),
+      onChanged: onChanged,
+      onChangeStart: onChangeStart,
+      onChangeEnd: onChangeEnd,
+      min: min,
+      max: max,
+      divisions: divisions,
+      label: label,
+      semanticFormatterCallback: semanticLabel != null
+          ? (v) => '$semanticLabel ${(100 * ((v - min) / (max - min))).toStringAsFixed(0)}%'
+          : null,
+    );
+
+    if (startIcon == null && endIcon == null) {
+      return SliderTheme(data: theme, child: slider);
+    }
+
+    return SliderTheme(
+      data: theme,
+      child: Row(
+        children: [
+          if (startIcon != null) ...[startIcon!, const SizedBox(width: 8)],
+          Expanded(child: slider),
+          if (endIcon != null) ...[const SizedBox(width: 8), endIcon!],
+        ],
+      ),
+    );
+  }
+}

packages/slider_m3e/lib/src/slider_m3e_widget.dart

@@ -0,0 +1,21 @@
+import 'package:flutter/material.dart';
+import 'package:m3e_design/m3e_design.dart';
+
+class SliderM3EWidget extends StatelessWidget {
+  const SliderM3EWidget({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final m3e = context.m3e;
+    return Container(
+      padding: EdgeInsets.all(m3e.spacing.md),
+      decoration: BoxDecoration(
+        color: m3e.colors.surfaceStrong,
+        borderRadius: m3e.shapes.square.md,
+      ),
+      child: Text('Slider placeholder', style: m3e.typography.base.titleMedium),
+    );
+  }
+}
+
+String _pascal(String s) => s.split('_').map((p) => p.isEmpty ? '' : (p[0].toUpperCase() + p.substring(1))).join();

packages/slider_m3e/lib/src/slider_theme_m3e.dart

@@ -0,0 +1,114 @@
+import 'package:flutter/material.dart';
+import 'slider_tokens_adapter.dart';
+import 'enums.dart';
+
+SliderThemeData sliderThemeM3E(
+  BuildContext context, {
+  SliderM3ESize size = SliderM3ESize.medium,
+  SliderM3EEmphasis emphasis = SliderM3EEmphasis.primary,
+  SliderM3EShapeFamily shapeFamily = SliderM3EShapeFamily.round,
+  SliderM3EDensity density = SliderM3EDensity.regular,
+  bool showValueIndicator = false,
+}) {
+  final t = SliderTokensAdapter(context);
+  final m = t.metrics(density);
+
+  final trackHeight = switch (size) {
+    SliderM3ESize.small => m.trackSmall,
+    SliderM3ESize.medium => m.trackMedium,
+    SliderM3ESize.large => m.trackLarge,
+  };
+
+  final thumbRadius = switch (size) {
+    SliderM3ESize.small => m.thumbSmall,
+    SliderM3ESize.medium => m.thumbMedium,
+    SliderM3ESize.large => m.thumbLarge,
+  };
+
+  final thumbShape = shapeFamily == SliderM3EShapeFamily.round
+      ? RoundSliderThumbShape(enabledThumbRadius: thumbRadius)
+      : _SquareThumbShape(side: thumbRadius * 2);
+
+  return SliderTheme.of(context).copyWith(
+    trackHeight: trackHeight,
+    activeTrackColor: t.activeColor(emphasis),
+    inactiveTrackColor: t.inactiveColor(),
+    disabledActiveTrackColor: t.inactiveColor(),
+    disabledInactiveTrackColor: t.inactiveColor(),
+    activeTickMarkColor: t.tickColorActive(emphasis),
+    inactiveTickMarkColor: t.tickColorInactive(),
+    thumbColor: t.thumbColor(emphasis),
+    disabledThumbColor: t.inactiveColor(),
+    overlayColor: t.overlayColor(emphasis),
+    valueIndicatorColor: t.valueIndicatorColor(),
+    valueIndicatorTextStyle: t.valueIndicatorTextStyle(),
+    showValueIndicator: showValueIndicator ? ShowValueIndicator.onDrag : ShowValueIndicator.onlyForDiscrete,
+    thumbShape: thumbShape,
+    overlayShape: RoundSliderOverlayShape(overlayRadius: m.overlayRadius),
+    rangeThumbShape: shapeFamily == SliderM3EShapeFamily.round
+        ? const RoundRangeSliderThumbShape()
+        : const _SquareRangeThumbShape(),
+    rangeTrackShape: const RoundedRectRangeSliderTrackShape(),
+    rangeValueIndicatorShape: const PaddleRangeSliderValueIndicatorShape(),
+    valueIndicatorShape: const PaddleSliderValueIndicatorShape(),
+  );
+}
+
+class _SquareThumbShape extends SliderComponentShape {
+  const _SquareThumbShape({required this.side});
+  final double side;
+
+  @override
+  Size getPreferredSize(bool isEnabled, bool isDiscrete) => Size.square(side);
+
+  @override
+  void paint(
+    PaintingContext context,
+    Offset center, {
+    required Animation<double> activationAnimation,
+    required Animation<double> enableAnimation,
+    required bool isDiscrete,
+    required TextPainter? labelPainter,
+    required RenderBox parentBox,
+    required SliderThemeData sliderTheme,
+    required TextDirection textDirection,
+    required double value,
+    required double textScaleFactor,
+    required Size sizeWithOverflow,
+  }) {
+    final canvas = context.canvas;
+    final rect = Rect.fromCenter(center: center, width: side, height: side);
+    final rrect = RRect.fromRectAndRadius(rect, const Radius.circular(4));
+    final paint = Paint()..color = sliderTheme.thumbColor ?? Colors.blue;
+    canvas.drawRRect(rrect, paint);
+  }
+}
+
+class _SquareRangeThumbShape extends RangeSliderThumbShape {
+  const _SquareRangeThumbShape();
+
+  @override
+  Size getPreferredSize(bool isEnabled, bool isDiscrete) => const Size(24, 24);
+
+  @override
+  void paint(
+    PaintingContext context,
+    Offset center, {
+    required Animation<double> activationAnimation,
+    required Animation<double> enableAnimation,
+    bool isDiscrete = false,
+    bool isEnabled = true,
+    bool isOnTop = false,
+    bool isPressed = false,
+    required SliderThemeData sliderTheme,
+    TextDirection textDirection = TextDirection.ltr,
+    Thumb thumb = Thumb.start,
+  }) {
+    final canvas = context.canvas;
+    final side = 24.0;
+    final rect = Rect.fromCenter(center: center, width: side, height: side);
+    final rrect = RRect.fromRectAndRadius(rect, const Radius.circular(4));
+    final paint = Paint()..color = sliderTheme.thumbColor ?? Colors.blue;
+    canvas.drawRRect(rrect, paint);
+  }
+}

packages/slider_m3e/lib/src/slider_tokens_adapter.dart

@@ -0,0 +1,83 @@
+import 'package:flutter/material.dart';
+import 'package:m3e_design/m3e_design.dart';
+import 'enums.dart';
+
+@immutable
+class _SliderMetrics {
+  final double trackSmall;
+  final double trackMedium;
+  final double trackLarge;
+  final double thumbSmall;
+  final double thumbMedium;
+  final double thumbLarge;
+  final double overlayRadius;
+  final double tickRadius;
+  const _SliderMetrics({
+    required this.trackSmall,
+    required this.trackMedium,
+    required this.trackLarge,
+    required this.thumbSmall,
+    required this.thumbMedium,
+    required this.thumbLarge,
+    required this.overlayRadius,
+    required this.tickRadius,
+  });
+}
+
+_SliderMetrics _metricsFor(BuildContext context, SliderM3EDensity density) {
+  // Based on M3 defaults with a slightly more expressive large option.
+  double trS = 2, trM = 4, trL = 6;
+  double thS = 10, thM = 12, thL = 14;
+  double overlay = 20, tick = 2;
+
+  if (density == SliderM3EDensity.compact) {
+    trS -= 0.5; trM -= 0.5; trL -= 1.0;
+    thS -= 1; thM -= 1; thL -= 2;
+    overlay -= 2;
+  }
+
+  return _SliderMetrics(
+    trackSmall: trS,
+    trackMedium: trM,
+    trackLarge: trL,
+    thumbSmall: thS,
+    thumbMedium: thM,
+    thumbLarge: thL,
+    overlayRadius: overlay,
+    tickRadius: tick,
+  );
+}
+
+class SliderTokensAdapter {
+  SliderTokensAdapter(this.context);
+  final BuildContext context;
+
+  M3ETheme get _m3e {
+    final t = Theme.of(context);
+    return t.extension<M3ETheme>() ?? M3ETheme.defaults(t.colorScheme);
+  }
+
+  _SliderMetrics metrics(SliderM3EDensity density) => _metricsFor(context, density);
+
+  // Colors
+  Color activeColor(SliderM3EEmphasis e) {
+    switch (e) {
+      case SliderM3EEmphasis.primary: return _m3e.colors.primary;
+      case SliderM3EEmphasis.secondary: return _m3e.colors.secondary;
+      case SliderM3EEmphasis.surface: return _m3e.colors.onSurface;
+    }
+  }
+  Color inactiveColor() => _m3e.colors.onSurface.withValues(alpha: 0.24);
+  Color tickColorActive(SliderM3EEmphasis e) => activeColor(e).withValues(alpha: 0.9);
+  Color tickColorInactive() => _m3e.colors.onSurface.withValues(alpha: 0.38);
+  Color thumbColor(SliderM3EEmphasis e) => activeColor(e);
+  Color overlayColor(SliderM3EEmphasis e) => activeColor(e).withValues(alpha: 0.12);
+  Color valueIndicatorColor() => _m3e.colors.secondaryContainer;
+  TextStyle valueIndicatorTextStyle() => _m3e.type.labelSmall.copyWith(color: _m3e.colors.onSecondaryContainer);
+
+  // Shapes
+  OutlinedBorder containerShape(SliderM3EShapeFamily family) {
+    final set = family == SliderM3EShapeFamily.round ? _m3e.shapes.round : _m3e.shapes.square;
+    return RoundedRectangleBorder(borderRadius: set.md);
+  }
+}

packages/slider_m3e/melos_slider_m3e.iml

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$">
+      <sourceFolder url="file://$MODULE_DIR$" isTestSource="false" />
+      <excludeFolder url="file://$MODULE_DIR$/.dart_tool" />
+      <excludeFolder url="file://$MODULE_DIR$/.idea" />
+      <excludeFolder url="file://$MODULE_DIR$/.pub" />
+      <excludeFolder url="file://$MODULE_DIR$/build" />
+      <excludeFolder url="file://$MODULE_DIR$/example/.dart_tool" />
+      <excludeFolder url="file://$MODULE_DIR$/example/.idea" />
+      <excludeFolder url="file://$MODULE_DIR$/example/.pub" />
+      <excludeFolder url="file://$MODULE_DIR$/example/build" />
+      <excludeFolder url="file://$MODULE_DIR$/example/android/.gradle" />
+      <excludeFolder url="file://$MODULE_DIR$/example/android/.idea" />
+      <excludeFolder url="file://$MODULE_DIR$/example/ios/Flutter" />
+      <excludeFolder url="file://$MODULE_DIR$/example/ios/Pods" />
+      <excludeFolder url="file://$MODULE_DIR$/example/ios/.symlinks" />
+      <excludeFolder url="file://$MODULE_DIR$/example/macos/Flutter" />
+      <excludeFolder url="file://$MODULE_DIR$/example/macos/Pods" />
+      <excludeFolder url="file://$MODULE_DIR$/example/macos/.symlinks" />
+    </content>
+    <orderEntry type="sourceFolder" forTests="false" />
+    <orderEntry type="library" name="Dart SDK" level="project" />
+    <orderEntry type="library" name="Flutter Plugins" level="project" />
+    <orderEntry type="library" name="Dart Packages" level="project" />
+  </component>
+</module>

packages/slider_m3e/pubspec.yaml

@@ -0,0 +1,18 @@
+name: slider_m3e
+description: Material 3 Expressive Sliders (single & range) for Flutter, powered by M3E tokens.
+version: 0.1.0
+publish_to: none
+
+environment:
+  sdk: ">=3.5.0 <4.0.0"
+  flutter: ">=3.22.0"
+
+dependencies:
+  flutter:
+    sdk: flutter
+  m3e_design:
+    path: ../m3e_design
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter

packages/slider_m3e/pubspec_overrides.yaml

@@ -0,0 +1,4 @@
+# melos_managed_dependency_overrides: m3e_design
+dependency_overrides:
+  m3e_design:
+    path: ..\\m3e_design

packages/slider_m3e/test/slider_m3e_test.dart

@@ -0,0 +1,7 @@
+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  test('placeholder', () {
+    expect(4 * 5, 20);
+  });
+}