materialdesignweb
Material Design for Web
A standards-focused, zero-dependency implemention of Material Design 3 (Material You).
Demo
https://clshortfuse.github.io/materialdesignweb/
Getting started
Pre-bundled
<script type="module"
src="https://cdn.jsdelivr.net/npm/@shortfuse/materialdesignweb?color=6750A4"></script>
<mdw-button>Hello World!</mdw-button>Includes all components and theming over URL params.
Development
Static Theme Generation:
npx -p @shortfuse/materialdesignweb mdw-css --color=color=6750A4 --custom=yellow,orange:orange,green:0f0,alias:aqua --lightness=auto > theme.css
Dynamic Theme Generation:
See loader.js for an example.
Component Loading
import { Button } from '@shortfuse/materialdesignweb';
// OR
import Button from '@shortfuse/materialdesignweb/components/Button.js';
// OR
import Button from 'https://www.unpkg.com/@shortfuse/materialdesignweb/components/Button.js';
// OR
import { Button } from 'https://cdn.jsdelivr.net/npm/@shortfuse/materialdesignweb?color=6750A4';
const button = new Button();
button.textContent = 'Hello World!';
document.body.append(button);Support
| Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| ShadowRoot | 53 | 79 | 63 | 10 |
| WeakRef | 84 | 84 | 79 | 14.1 |
| ElementInternals† | 77 | 79 | 93 | 16.4 |
| delegatesFocus† | 53 | 79 | 94 | 15 |
| AdoptedStyleSheets* | 73 | 79 | 101 | 16.4 |
| Supported | 84 | 84 | 93 | 16.4 |
*Optional
†Can be polyfilled
Notes:
- Compatibility may be extended via polyfills (not included)
Components
| Component | Features | Status | Size |
|---|---|---|---|
| Badge |
|
 |
|
| Bottom App Bar |
|
 |
|
| Bottom Sheet | |||
| Button |
|
 |
|
| Card |
|
 |
|
| Fab |
|
 |
|
| Fab - Extended |
|
 |
|
| Icon Button |
|
 |
|
| Segmented Button |
|
 |
|
| Segmented Button Group |
|
 |
|
| Checkbox |
|
 
|
|
| Chip |
|
 |
|
| Chip - Filter |
|
 |
|
| Chip: Filter Dropdown | |||
| Chip: Input | |||
| Date Picker | |||
| Dialog |
|
 |
|
| Dialog: Full-screen | |||
| Divider |  |
||
| Icon |  |
||
| List |
|
 
|
|
| Listbox |
|
 
|
|
| Menu |
|
 
|
|
| Navigation Bar |
|
 
|
|
| Navigation Drawer |
|
 
|
|
| Navigation Rail |
|
 
|
|
| Progress Indicators |
|
 |
|
| Search |
|
 |
|
| Radio |
|
 
|
|
| Slider |
|
 |
|
| Snackbar |
|
 |
|
| Switch |
|
 
|
|
| Tab |
|
   
|
|
| Text Input |
|
 |
|
| Text Area |
|
 |
|
| Text Select |
|
 |
|
| Time Picker | |||
| Tooltip |
|
 |
|
| Top App Bar |
|
 |
Additional
| Component | Description | Status | Size |
|---|---|---|---|
| Box | Simple themeable component with Flex and Grid options |  |
|
| Layout | Manages page nav, and pane layouts |  |
|
| Icon | Font-icon, SVG, and IMG support | |
|
| Body | Box with Body typography |  |
|
| Label | Box with Label typography |  |
|
| Headline | Box with Headline typography |  |
|
| Title | Box with Title typography |  |
|
| Ripple | Ripple effect |  |
|
| Shape | Themeable, flexable, shapeable element |  |
|
| Surface | Themeable, flexable, shapeable, elevateable element |  |
Mixins
| Mixin | Description | Status | Size |
|---|---|---|---|
| AriaReflector | Reflects ARIA Properties |  |
|
| AriaToolbar | Shared ARIA Toolbar functionality |  |
|
| Control | HTML Control wrapper |  |
|
| Density | Component density options |  |
|
| Flexable | Add flexbox options as attributes |  |
|
| FormAssociated | Form-associated custom element support |  |
|
| Input | HTMLInputElement wrapper |  |
|
| KeyboardNav | Adds arrow key navigation and roving tab index |  |
|
| ResizeObserver | Shared Eelement resize observer |  |
|
| Ripple | Replaces pressed state with ripple effect |  |
|
| RTLObserver | Shared RTL paoge observer |  |
|
| ScrollListener | Listen for horizontal and vertical scroll events |  |
|
| Shape | Adds shape and outline layer to elements |  |
|
| Surface | Adds shadows to elements |  |
|
| TextField | Shared text field functionality |  |
|
| TooltipTrigger | Triggers tooltips based on events |  |
|
| TouchTarget | Adds extended touch target to controls |  |
Core
| File | Description | Status | Size |
|---|---|---|---|
| Composition | Composes templates based on styles, fragments, and watches. Renders data |  |
|
| CustomElement | Handles ShadowDOM, ElementInternals, Property attributes, and compositions |  |
|
| CompositionAdapter | Handles data array to elements binding |  |
|
| jsonMergePatch | Applies, constructors, and evaluates JSON Merge Patch |  |
|
| css | CSS, CSSStyleSheet, HTMLStyleElement functions |  |
|
| customTypes | Non-primitive observable types |  |
|
| optimizations | Micro-optimizations functions |  |
|
| dom | DOM functions |  |
|
| observe | Observable pattern for primitives and objects |  |
|
| template | Template literals for CSS (CSSStyleSheet) and HTML (DocumentFragment) |  |
|
| uid | Generates a UID string |  |
Other Components
These components do not have official M3 guidelines
| Component | Status |
|---|---|
| Banner | |
| Data Table | |
| Image List | |
| Side Sheet |
Legend
-
🖌️ - Background Theming -
🖍️ - Ink (Foreground) Theming -
⭕ - Outline -
🅰️ - Font Theming -
🔷 - Shape Size Theming -
📶 - Density -
↕️ - Flexable layout -
♿ - ARIA Role -
✔️ - Ready -
⚠️ - Issues -
🚧 - Under Construction -
📝 - Planned -
❔ - Unknown -
💀 - Not planned
Archive
The Material Design 1/2 version has been archived in the archive-md2 branch.