@shortfuse/materialdesignweb NPM

materialdesignweb

Material Design for Web

A standards-focused, zero-dependency implemention of Material Design 3 (Material You).

Version License MinZip Dependents

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
Badge	:paintbrush: :crayon: :o: :a: :large_blue_diamond: :signal_strength:	:heavy_check_mark:
Bottom App Bar	:paintbrush: :crayon: :o: :a: :large_blue_diamond: :wheelchair:	:heavy_check_mark:
Bottom Sheet		:memo:
Button	:paintbrush: :crayon: :o: :a: :large_blue_diamond: :signal_strength: :wheelchair:	:heavy_check_mark:
Card	:paintbrush: :crayon: :o: :a: :large_blue_diamond: :arrow_up_down: :wheelchair:	:heavy_check_mark:
Fab	:paintbrush: :crayon: :o: :a: :large_blue_diamond: :signal_strength: :wheelchair:	:heavy_check_mark:
Fab - Extended	:paintbrush: :crayon: :o: :a: :large_blue_diamond: :signal_strength: :wheelchair:	:heavy_check_mark:
Icon Button	:paintbrush: :crayon: :o: :a: :large_blue_diamond: :signal_strength: :wheelchair:	:heavy_check_mark:
Segmented Button	:paintbrush: :crayon: :o: :a: :large_blue_diamond: :signal_strength: :wheelchair:	:heavy_check_mark:
Segmented Button Group	:crayon: :wheelchair:	:heavy_check_mark:
Checkbox	:paintbrush: :crayon: :a: :large_blue_diamond: :wheelchair:	:heavy_check_mark:
Chip	:paintbrush: :crayon: :o: :a: :large_blue_diamond: :signal_strength: :wheelchair:	:heavy_check_mark:
Chip - Filter	:paintbrush: :crayon: :o: :a: :large_blue_diamond: :signal_strength: :wheelchair:	:heavy_check_mark:
Chip: Filter Dropdown		:construction:
Chip: Input		:construction:
Date Picker		:grey_question:
Dialog	:paintbrush: :crayon: :o: :a: :large_blue_diamond: :wheelchair:	:heavy_check_mark:
Dialog: Full-screen		:grey_question:
Divider	:crayon:	:heavy_check_mark:
Icon	:crayon:	:heavy_check_mark:
List	:paintbrush: :crayon: :signal_strength: :wheelchair:	:heavy_check_mark:
Listbox	:paintbrush: :crayon: :signal_strength: :wheelchair:	:heavy_check_mark:
Menu	:paintbrush: :crayon: :o: :signal_strength: :wheelchair:	:heavy_check_mark:
Navigation Bar	:paintbrush: :crayon: :o: :large_blue_diamond: :wheelchair:	:heavy_check_mark:
Navigation Drawer	:paintbrush: :crayon: :o: :large_blue_diamond: :wheelchair:	:construction:
Navigation Rail	:paintbrush: :crayon: :o: :large_blue_diamond: :wheelchair:	:heavy_check_mark:
Progress Indicators	:crayon: :wheelchair:	:heavy_check_mark:
Search	:paintbrush: :crayon: :o: :a: :large_blue_diamond: :wheelchair:	:construction:
Radio	:crayon: :a: :large_blue_diamond: :wheelchair:	:heavy_check_mark:
Slider	:crayon: :wheelchair:	:warning:
Snackbar	:paintbrush: :crayon: :o: :large_blue_diamond: :signal_strength: :wheelchair:	:heavy_check_mark:
Switch	:paintbrush: :crayon: :a: :wheelchair:	:heavy_check_mark:
Tab	:paintbrush: :crayon: :o: :large_blue_diamond: :wheelchair:	:heavy_check_mark:
Text Input	:paintbrush: :crayon: :o: :a: :large_blue_diamond: :signal_strength: :wheelchair:	:heavy_check_mark:
Text Area	:paintbrush: :crayon: :o: :a: :large_blue_diamond: :signal_strength: :wheelchair:	:heavy_check_mark:
Text Select	:paintbrush: :crayon: :o: :a: :large_blue_diamond: :signal_strength: :wheelchair:	:heavy_check_mark:
Time Picker		:grey_question:
Tooltip	:paintbrush: :crayon: :o: :large_blue_diamond: :wheelchair:	:heavy_check_mark:
Top App Bar	:paintbrush: :crayon: :o: :a: :wheelchair:	:heavy_check_mark:

Additional

Component	Description	Status
Box	Simple themeable component with Flex and Grid options	:heavy_check_mark:
Layout	Manages page nav, and pane layouts	:construction:
Icon	Font-icon, SVG, and IMG support	:construction:
Body	Box with Body typography	:heavy_check_mark:
Label	Box with Label typography	:heavy_check_mark:
Headline	Box with Headline typography	:heavy_check_mark:
Title	Box with Title typography	:heavy_check_mark:
Ripple	Ripple effect	:heavy_check_mark:
Shape	Themeable, flexable, shapeable element	:heavy_check_mark:
Surface	Themeable, flexable, shapeable, elevateable element	:heavy_check_mark:

Mixins

Mixin	Description	Status
AriaReflector	Reflects ARIA Properties	:heavy_check_mark:
AriaToolbar	Shared ARIA Toolbar functionality	:heavy_check_mark:
Control	HTML Control wrapper	:heavy_check_mark:
Density	Component density options	:heavy_check_mark:
Flexable	Add flexbox options as attributes	:heavy_check_mark:
FormAssociated	Form-associated custom element support	:heavy_check_mark:
Input	HTMLInputElement wrapper	:heavy_check_mark:
KeyboardNav	Adds arrow key navigation and roving tab index	:warning:
ResizeObserver	Shared Eelement resize observer	:heavy_check_mark:
Ripple	Replaces pressed state with ripple effect	:heavy_check_mark:
RTLObserver	Shared RTL paoge observer	:heavy_check_mark:
ScrollListener	Listen for horizontal and vertical scroll events	:heavy_check_mark:
Shape	Adds shape and outline layer to elements	:warning:
Surface	Adds shadows to elements	:warning:
TextField	Shared text field functionality	:heavy_check_mark:
TooltipTrigger	Triggers tooltips based on events	:construction:
TouchTarget	Adds extended touch target to controls	:construction:

Core

File	Description	Status
Composition	Composes templates based on styles, fragments, and watches. Renders data	:construction:
CustomElement	Handles ShadowDOM, ElementInternals, Property attributes, and compositions	:construction:
CompositionAdapter	Handles data array to elements binding	:construction:
jsonMergePatch	Applies, constructors, and evaluates JSON Merge Patch	:construction:
css	CSS, CSSStyleSheet, HTMLStyleElement functions	:heavy_check_mark:
customTypes	Non-primitive observable types	:construction:
optimizations	Micro-optimizations functions	:construction:
dom	DOM functions	:warning:
observe	Observable pattern for primitives and objects	:construction:
template	Template literals for CSS (CSSStyleSheet) and HTML (DocumentFragment)	:heavy_check_mark:
uid	Generates a UID string	:heavy_check_mark: