# @m3e/web @m3e/web is a modern, from‑scratch implementation of [Material Design 3](https://m3.material.io/), built entirely with [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components). It delivers a complete, spec‑aligned component suite with dynamic color, expressive motion, and full accessibility — all without framework dependencies. ## 🔗 Showcase & Documentation Explore the full component suite, live demos, and usage examples: **** ## 🛡️ Disclaimer This project is not affiliated with or endorsed by Google. “Material Design” and “Material 3” are trademarks of Google LLC. ## ✨ Features - **Expressive Components**: Leverage Material 3's design tokens, dynamic color, shape and motion systems for highly customizable UI elements. - **Unified Architecture**: ESM-first with modular entry points and tree-shaking for minimal bundles. - **Accessibility First**: Built-in support for accessibility standards, ensuring inclusive experiences for all users. - **Theming & Personalization**: Effortlessly adapt components to your brand or user preferences with Material 3's advanced theming capabilities. - **Performance Optimized**: Lightweight, fast-loading components designed for modern web platforms. - **Security Conscious**: Built with secure-by-default patterns, including XSS-safe templating, Trusted Types compatibility, and support for strong Content Security Policies (CSP) to enforce safe DOM interactions and mitigate injection risks. ## 📦 Modules Below is a list of all modules in this monorepo, with a short summary and import instructions for each: | Package | Summary | Import | | ------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | | [**@m3e/web/app-bar**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/app-bar/README.md) | A prominent UI component providing access to key actions, navigation, and contextual info at the top of an app screen. | `import "@m3e/web/app-bar";` | | [**@m3e/web/autocomplete**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/autocomplete/README.md) | Enhances a text input with a dynamically positioned menu of filterable suggestions, providing real-time filtering and keyboard navigation. | `import "@m3e/web/autocomplete";` | | [**@m3e/web/avatar**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/avatar/README.md) | An image, icon or textual initials representing a user or other identity. | `import "@m3e/web/avatar";` | | [**@m3e/web/badge**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/badge/README.md) | A compact visual indicator for counts, presence, or emphasis, attachable to icons, buttons, or other components. | `import "@m3e/web/badge";` | | [**@m3e/web/bottom-sheet**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/bottom-sheet/README.md) | A sheet used to show secondary content anchored to the bottom of the screen. | `import "@m3e/web/bottom-sheet";` | | [**@m3e/web/breadcrumb**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/breadcrumb/README.md) | Displays a hierarchical navigation path and identifies the user's current location within an application. | `import "@m3e/web/breadcrumb";` | | [**@m3e/web/button**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/button/README.md) | A semantic, expressive UI primitive for actions, supporting five variants and dynamic theming. | `import "@m3e/web/button";` | | [**@m3e/web/button-group**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/button-group/README.md) | Organizes buttons and adds interactions between them. | `import "@m3e/web/button-group";` | | [**@m3e/web/calendar**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/calendar/README.md) | A calendar used to select a date. | `import "@m3e/web/calendar";` | | [**@m3e/web/card**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/card/README.md) | A flexible, expressive container for presenting a unified subject—text, media, and actions—on a distinct surface. | `import "@m3e/web/card";` | | [**@m3e/web/checkbox**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/checkbox/README.md) | An expressive, accessible control for binary selection—supporting checked, indeterminate, and disabled states. | `import "@m3e/web/checkbox";` | | [**@m3e/web/chips**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/chips/README.md) | Expressive, accessible chip components for actions, input, filtering, and suggestions. | `import "@m3e/web/chips";` | | [**@m3e/web/content-pane**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/content-pane/README.md) | A shaped surface for vertically scrollable content. | `import "@m3e/web/content-pane";` | | [**@m3e/web/core**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/core/README.md) | Essential primitives, utilities, and behavioral mixins for building Material 3 web components. | `import "@m3e/web/core";` | | [**@m3e/web/datepicker**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/datepicker/README.md) | Presents a date picker on a temporary surface. | `import "@m3e/web/datepicker";` | | [**@m3e/web/dialog**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/dialog/README.md) | Presents important prompts, alerts, and actions with ARIA accessibility, focus management, and theming. | `import "@m3e/web/dialog";` | | [**@m3e/web/divider**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/divider/README.md) | Visually separates content within layouts, lists, or containers using a thin, unobtrusive line. | `import "@m3e/web/divider";` | | [**@m3e/web/drawer-container**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/drawer-container/README.md) | Provides a responsive layout container for managing one or two sliding drawers alongside main content. | `import "@m3e/web/drawer-container";` | | [**@m3e/web/expansion-panel**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/expansion-panel/README.md) | Expressive, accessible components for organizing content in collapsible sections and coordinated groups. | `import "@m3e/web/expansion-panel";` | | [**@m3e/web/fab**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/fab/README.md) | A prominent, expressive floating action button (FAB) representing the primary action on a screen. | `import "@m3e/web/fab";` | | [**@m3e/web/fab-menu**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/fab-menu/README.md) | Presents a dynamic menu of related actions, elegantly revealed from a floating action button (FAB). | `import "@m3e/web/fab-menu";` | | [**@m3e/web/form-field**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/form-field/README.md) | A container for form controls that applies Material Design styling and behavior. | `import "@m3e/web/form-field";` | | [**@m3e/web/heading**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/heading/README.md) | Expressive, accessible headings for pages and sections, supporting display, headline, title, and label variants in multiple sizes. | `import "@m3e/web/heading";` | | [**@m3e/web/icon**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/icon/README.md) | Makes it easy to use Material Symbols, supporting outlined, rounded, and sharp variants with variable font features. | `import "@m3e/web/icon";` | | [**@m3e/web/icon-button**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/icon-button/README.md) | A semantic, expressive UI primitive for triggering actions with a single icon, supporting four visual variants. | `import "@m3e/web/icon-button";` | | [**@m3e/web/list**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/list/README.md) | Expressive, accessible components for organizing and displaying lists of items, with rich content and theming. | `import "@m3e/web/list";` | | [**@m3e/web/loading-indicator**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/loading-indicator/README.md) | Uses animation to indicate that an activity is in progress, with contained and uncontained variants. | `import "@m3e/web/loading-indicator";` | | [**@m3e/web/menu**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/menu/README.md) | Anchored, elevated surfaces that present a list of choices—supporting selection, hierarchy, and contextual interaction. | `import "@m3e/web/menu";` | | [**@m3e/web/nav-bar**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/nav-bar/README.md) | Navigation bar and interactive items for switching between primary destinations, designed for smaller devices. | `import "@m3e/web/nav-bar";` | | [**@m3e/web/nav-menu**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/nav-menu/README.md) | Hierarchical, accessible navigation menu for sidebars, drawers, and complex menu structures. | `import "@m3e/web/nav-menu";` | | [**@m3e/web/nav-rail**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/nav-rail/README.md) | Extends nav-bar to provide a vertical navigation rail for larger devices, supporting compact and expanded modes. | `import "@m3e/web/nav-rail";` | | [**@m3e/web/option**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/option/README.md) | Provides selectable options and interactive menus for choosing values from a temporary surface. | `import "@m3e/web/option";` | | [**@m3e/web/paginator**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/paginator/README.md) | Provides navigation for paged information, typically used with a table. | `import "@m3e/web/paginator";` | | [**@m3e/web/progress-indicator**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/progress-indicator/README.md) | Accessible, animated progress indicators for tracking task or process completion. | `import "@m3e/web/progress-indicator";` | | [**@m3e/web/radio-group**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/radio-group/README.md) | A single-selection control for choosing one option from a set—supporting expressive styling, accessible transitions, and validation feedback. | `import "@m3e/web/radio-group";` | | [**@m3e/web/search**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/search/README.md) | Provides a search bar for input and a search view for suggestions, history, and results. | `import "@m3e/web/search";` | | [**@m3e/web/segmented-button**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/segmented-button/README.md) | A multi-option control for grouped selection—supporting single or multiple active segments with expressive layout, ripple feedback, and accessible state transitions. | `import "@m3e/web/segmented-button";` | | [**@m3e/web/select**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/select/README.md) | A form control for single and multiple selection that integrates with `m3e-option` and `m3e-form-field`. | `import "@m3e/web/select";` | | [**@m3e/web/shape**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/shape/README.md) | Allows use of abstract shapes for emphasis and decorative flair, including built-in shape morphing. | `import "@m3e/web/shape";` | | [**@m3e/web/skeleton**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/skeleton/README.md) | A visual placeholder that mimics the layout of content while it's still loading. | `import "@m3e/web/skeleton";` | | [**@m3e/web/slide-group**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/slide-group/README.md) | Presents pagination controls used to scroll overflowing content. | `import "@m3e/web/slide-group";` | | [**@m3e/web/slider**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/slider/README.md) | Allows for the selection of numeric values from a range. | `import "@m3e/web/slider";` | | [**@m3e/web/snackbar**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/snackbar/README.md) | Provides a global service for presenting short updates about application processes at the bottom of the screen. | `import "@m3e/web/snackbar";` | | [**@m3e/web/split-button**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/split-button/README.md) | A button used to show an action with a menu of related actions. | `import "@m3e/web/split-button";` | | [**@m3e/web/split-pane**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/split-pane/README.md) | A dual-view layout that separates content with a movable drag handle. | `import "@m3e/web/split-pane";` | | [**@m3e/web/stepper**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/stepper/README.md) | Provides a wizard-like workflow by dividing content into logical steps. | `import "@m3e/web/stepper";` | | [**@m3e/web/switch**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/switch/README.md) | An on/off control that can be toggled by clicking. | `import "@m3e/web/switch";` | | [**@m3e/web/tabs**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/tabs/README.md) | Organizes content into separate views where only one view can be visible at a time. | `import "@m3e/web/tabs";` | | [**@m3e/web/textarea-autosize**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/textarea-autosize/README.md) | A non-visual element used to automatically resize a `textarea` to fit its content. | `import "@m3e/web/textarea-autosize";` | | [**@m3e/web/theme**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/theme/README.md) | A non-visual element used to apply dynamic color, expressive motion, density, and focus indicators to nested elements. | `import "@m3e/web/theme";` | | [**@m3e/web/toc**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/toc/README.md) | Hierarchical, interactive table of contents for in-page navigation, with automatic heading detection. | `import "@m3e/web/toc";` | | [**@m3e/web/toolbar**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/toolbar/README.md) | Presents contextual actions, navigation, and controls, supporting orientation, shape, and variant customization. | `import "@m3e/web/toolbar";` | | [**@m3e/web/tooltip**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/tooltip/README.md) | Provides contextual information in response to user interaction, positioned relative to a target element. | `import "@m3e/web/tooltip";` | | [**@m3e/web/tree**](https://github.com/matraic/m3e/tree/HEAD/packages/web/src/tree/README.md) | Presents hierarchical data in a tree structure. | `import "@m3e/web/tree";` | ## 📍 Roadmap For a detailed view of current development, planned components, and past milestones, see the [M3E Roadmap](https://github.com/matraic/m3e/tree/HEAD/ROADMAP.md). ## 🤝 Contributing Contributions from the community are welcome! Please review the [Contributing Guidelines](https://github.com/matraic/m3e/tree/HEAD/CONTRIBUTING.md) and help us advance the future of expressive web design. ## 📄 License This project is licensed under the MIT License. ## 🧪 Testing This project is tested with BrowserStack