# Mat Expressive

> Material 3 Expressive components for Angular Material — GSAP-powered spring motion, zero-config directives, SSR-safe.

## Docs

- [Getting Started](https://expressive.angular-material.dev/docs/getting-started/index.md): Get started with Mat Expressive — installation, configuration, and your first components.
- [What is Mat Expressive?](https://expressive.angular-material.dev/docs/getting-started/what-is-mat-expressive/index.md): An introduction to Mat Expressive — a collection of components, directives, and styles for Angular Material aligned with the Material 3 Expressive Design System.
- [Installation](https://expressive.angular-material.dev/docs/getting-started/installation/index.md): Step-by-step guide to installing and configuring Mat Expressive in your Angular project, including style setup and HTML element style options.
- [llms.txt](https://expressive.angular-material.dev/llms.txt/index.md)
- [Accessibility](https://expressive.angular-material.dev/docs/accessibility/index.md): How Mat Expressive respects Accessibility
- [Reduced Motion](https://expressive.angular-material.dev/docs/accessibility/reduced-motion/index.md): How Mat Expressive respects prefers-reduced-motion — which animations are explicitly gated, and which are neutralized automatically by Angular Material.
- [Components](https://expressive.angular-material.dev/docs/components/index.md): Browse all Mat Expressive components with interactive demos, API references, and styling guides.
- [All Buttons](https://expressive.angular-material.dev/docs/components/all-buttons/index.md): All button components — Button, Icon Button, Button Group, Split Button, and FAB Menu.
- [Button](https://expressive.angular-material.dev/docs/components/all-buttons/button/index.md): Material Expressive Button with size, shape, and toggle variations. Supports both the `.mat-exp-button` CSS class approach and the `[matExpButton]` directive.
- [Icon Button](https://expressive.angular-material.dev/docs/components/all-buttons/icon-button/index.md): Material Expressive Icon Button with size, shape, toggle, appearance, and width variations. Supports both the CSS class approach and the matExpIconButton directive.
- [Button Group](https://expressive.angular-material.dev/docs/components/all-buttons/button-group/index.md): Material Expressive Button Group for grouping buttons with single/multi-select behavior, compatible with Angular reactive and template-driven forms.
- [Split Button](https://expressive.angular-material.dev/docs/components/all-buttons/split-button/index.md): Material Expressive Split Button combining a primary action button with a secondary chevron that reveals additional menu options.
- [FAB Menu](https://expressive.angular-material.dev/docs/components/all-buttons/fab-menu/index.md): Material Expressive FAB Menu — directives that style a standard Angular Material FAB button and menu with M3 Expressive color and shape transitions.
- [Loading & Progress](https://expressive.angular-material.dev/docs/components/loading-and-progress/index.md): Loading and progress indicator components.
- [Loading Indicator](https://expressive.angular-material.dev/docs/components/loading-and-progress/loading-indicator/index.md): Material Expressive Loading Indicator — a GSAP-animated SVG that morphs through seven M3 canonical shapes with spring-bounce rotation, fully accessible as a progressbar role.
- [Styles API](https://expressive.angular-material.dev/docs/styles-api/index.md): SCSS mixin API reference for Mat Expressive styles — apply all styles or selectively include specific component styles.
- [All Styles API](https://expressive.angular-material.dev/docs/styles-api/all-styles/index.md): API reference for the mat-exp-all-styles SCSS mixin that applies all Mat Expressive component styles at once.
- [All Buttons Styles API](https://expressive.angular-material.dev/docs/styles-api/all-buttons/index.md): API reference for the mat-exp-all-buttons-styles SCSS mixin that applies all button-related Mat Expressive styles at once.
- [Reducing the CSS Payload](https://expressive.angular-material.dev/docs/styles-api/reducing-css-payload/index.md): Strategies for shrinking Mat Expressive's generated CSS — per-component mixins, sizes/appearances/colors filtering, and skipping HTML element styles.
- [API Reference](https://expressive.angular-material.dev/docs/api): Full API reference for `@ngm-dev/mat-exp` — every exported component, directive, type, and utility.

## Optional

- [Changelog](https://github.com/Angular-Material-Dev/mat-exp/blob/main/CHANGELOG.md)