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

Compatibility is kept for as long possible by including browser-version-based patches. Ultimately, compatiblity may be dropped as new features get added. Bugs present in supported browsers should always be fixed.

Feature	Chrome	Edge	Firefox	Safari
ShadowRoot	53	79	63	10
WeakRef	84	84	79	14.1
:where()	88	88	78	14
Array.at†	92	92	90	15.4
replaceChildren†	84	86	79	14.1
ElementInternals†	77	79	93	16.4
delegatesFocus†	53	79	94	15
AdoptedStyleSheets*	73	79	101	16.4
CSS container queries*	106	106	110	16.0
Compatibility	88	88	78	16.4
Support	Latest ChromeOS LTS Release	Microsoft Edge Extended Stable Channel	ESR 115	Last 2 Versions
Status

*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	🖍️ 🅰️ 🔷 ♿	✔️
Side Sheet		🚧
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
Backdrop	💀
Banner	🚧
Data Table	📝
Image List	❔

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.