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 | :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 | Size | | :--------------------------------- | :-------------------------------------------------- | :--------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------------------------: | | 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 | Size | | :---------------------------------------------- | :----------------------------------------------- | :--------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------: | | 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 | Size | | :---------------------------------------- | :------------------------------------------------------------------------- | :--------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------: | | 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: | |

Other Components

These components do not have official M3 guidelines

| Component | Status | | :----------- | :--------------------------------------: | | ~~Backdrop~~ | :skull: | | Banner | :construction: | | Data Table | :memo: | | Image List | :grey_question: | | Side Sheet | :grey_question: |

Legend

• :paintbrush: - Background Theming

• :crayon: - Ink (Foreground) Theming

• :o: - Outline

• :a: - Font Theming

• :large_blue_diamond: - Shape Size Theming

• :signal_strength: - Density

• :arrow_up_down: - Flexable layout

• :wheelchair: - ARIA Role

• :heavy_check_mark: - Ready

• :warning: - Issues

• :construction: - Under Construction

• :memo: - Planned

• :grey_question: - Unknown

• :skull: - Not planned

Archive

The Material Design 1/2 version has been archived in the archive-md2 branch.