@shortfuse/materialdesignweb
v0.9.0
Published
Material Design for Web
Downloads
76
Maintainers
Readme
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