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 | :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: | | | Side Sheet | | :construction: | | | 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: | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main