Implement Material Design 3 Toolbar component

[Copilot]

Implements a comprehensive Toolbar component following Material Design 3 specifications, replacing the deprecated bottom app bar with a more flexible solution.

Features

Two Toolbar Variants

• Docked Toolbar: Replaces the deprecated bottom app bar, typically positioned at the bottom or top of the screen
• Floating Toolbar: Can be positioned anywhere with rounded corners and enhanced elevation

Color Schemes

• Standard: Uses surface-container and secondary-container colors for subtle appearance
• Vibrant: Uses primary-container colors for greater emphasis and visual impact

Configuration Options

• Horizontal/vertical orientation (for floating toolbars)
• Fixed positioning support with customizable z-index and inset
• FAB integration for emphasizing primary actions
• Flexible content slots supporting buttons, icon buttons, text fields, and other controls
• Responsive design with overflow handling on smaller screens

Material Design Compliance

• ✅ 64dp default height with center alignment
• ✅ 16dp minimum outside padding with equal spacing between items
• ✅ Proper elevation levels (level 2 for docked, level 3 for floating)
• ✅ Complete state layer implementation (enabled, disabled, hovered, focused, pressed)
• ✅ All specified color tokens from Material Design 3 guidelines
• ✅ Rounded corners using md.sys.shape.corner.full for floating variant

Usage

import { Toolbar, IconButton, Button, Fab } from 'soda-material'

// Docked toolbar (replaces bottom app bar)
<Toolbar
  variant="docked"
  colorScheme="standard"
  fixed={true}
  actions={
    <>
      <IconButton variant="standard" path={mdiUndo} />
      <IconButton variant="standard" path={mdiRedo} />
      <Button variant="text">Share</Button>
    </>
  }
  fab={<Fab variant="surface"><Icon path={mdiPlus} size={1} /></Fab>}
/>

// Floating toolbar
<Toolbar
  variant="floating"
  colorScheme="vibrant"
  orientation="horizontal"
  actions={
    <>
      <IconButton variant="tonal" path={mdiMagnify} />
      <IconButton variant="tonal" path={mdiShare} />
    </>
  }
/>

Screenshots

Docked Standard Toolbar

Floating Horizontal Toolbar

Interactive Example

Implementation Details

• TypeScript: Full type safety with comprehensive prop interfaces
• SCSS: Uses Material Design tokens and follows existing library patterns
• Storybook: 6 comprehensive examples showcasing all configurations
• Accessibility: Proper ARIA support and keyboard navigation
• Responsive: Handles content overflow gracefully on small screens

The implementation provides a modern replacement for the deprecated bottom app bar while offering enhanced flexibility and following all Material Design 3 specifications for toolbars.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.