@shortfuse/materialdesignweb 0.9.0 → 0.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (282) hide show
  1. package/README.md +50 -206
  2. package/components/Badge.js +5 -2
  3. package/components/Body.js +4 -0
  4. package/components/BottomAppBar.js +6 -2
  5. package/components/BottomSheet.js +62 -14
  6. package/components/Button.js +20 -0
  7. package/components/Card.js +20 -3
  8. package/components/Checkbox.js +8 -0
  9. package/components/CheckboxIcon.js +9 -3
  10. package/components/Chip.js +5 -2
  11. package/components/Dialog.js +22 -3
  12. package/components/DialogActions.js +4 -0
  13. package/components/Display.js +9 -0
  14. package/components/Divider.js +5 -0
  15. package/components/Fab.js +11 -0
  16. package/components/FabContainer.js +9 -0
  17. package/components/FilterChip.js +9 -0
  18. package/components/Grid.js +11 -0
  19. package/components/Headline.js +4 -0
  20. package/components/Icon.js +27 -3
  21. package/components/IconButton.js +8 -2
  22. package/components/Input.js +87 -14
  23. package/components/InputChip.js +33 -1
  24. package/components/Label.js +4 -0
  25. package/components/List.js +10 -0
  26. package/components/ListItem.js +53 -0
  27. package/components/ListOption.js +62 -1
  28. package/components/Listbox.js +44 -13
  29. package/components/Menu.js +31 -9
  30. package/components/MenuItem.js +24 -10
  31. package/components/NavBar.js +14 -3
  32. package/components/NavBarItem.js +5 -0
  33. package/components/NavDrawer.js +17 -0
  34. package/components/NavDrawerItem.js +5 -0
  35. package/components/NavItem.js +22 -2
  36. package/components/NavRail.js +9 -0
  37. package/components/NavRailItem.js +5 -0
  38. package/components/Page.js +15 -1
  39. package/components/Pane.js +7 -1
  40. package/components/Popup.js +6 -0
  41. package/components/Progress.js +25 -5
  42. package/components/Radio.js +6 -2
  43. package/components/RadioIcon.js +14 -1
  44. package/components/Ripple.js +14 -0
  45. package/components/Root.js +16 -0
  46. package/components/Scrim.js +10 -2
  47. package/components/Search.js +18 -5
  48. package/components/SegmentedButton.js +22 -6
  49. package/components/SegmentedButtonGroup.js +7 -10
  50. package/components/Select.js +13 -3
  51. package/components/Shape.js +4 -0
  52. package/components/SideSheet.js +31 -2
  53. package/components/Slider.js +22 -2
  54. package/components/Snackbar.js +30 -4
  55. package/components/SnackbarContainer.js +9 -0
  56. package/components/Surface.js +5 -0
  57. package/components/Switch.js +18 -2
  58. package/components/SwitchIcon.js +22 -1
  59. package/components/Tab.js +21 -0
  60. package/components/TabContent.js +32 -12
  61. package/components/TabList.js +36 -3
  62. package/components/TabPanel.js +9 -0
  63. package/components/Table.js +38 -3
  64. package/components/TextArea.js +32 -1
  65. package/components/Title.js +4 -0
  66. package/components/Tooltip.js +9 -2
  67. package/components/TopAppBar.js +15 -0
  68. package/core/Composition.js +45 -16
  69. package/core/CompositionAdapter.js +24 -6
  70. package/core/CustomElement.js +77 -49
  71. package/core/customTypes.js +43 -26
  72. package/core/dom.js +1 -0
  73. package/core/jsonMergePatch.js +15 -1
  74. package/core/observe.js +28 -21
  75. package/dist/CustomElement.min.js +2 -0
  76. package/dist/CustomElement.min.js.map +7 -0
  77. package/dist/core/CustomElement.min.js +2 -0
  78. package/dist/core/CustomElement.min.js.map +7 -0
  79. package/dist/index.min.js +9 -9
  80. package/dist/index.min.js.map +3 -3
  81. package/dist/meta.json +1 -1
  82. package/dom/HTMLOptionsCollectionProxy.js +5 -3
  83. package/mixins/AriaReflectorMixin.js +22 -13
  84. package/mixins/AriaToolbarMixin.js +3 -0
  85. package/mixins/ControlMixin.js +3 -0
  86. package/mixins/DelegatesFocusMixin.js +9 -1
  87. package/mixins/DensityMixin.js +5 -1
  88. package/mixins/ElevationMixin.js +1 -2
  89. package/mixins/FlexableMixin.js +21 -2
  90. package/mixins/FormAssociatedMixin.js +19 -5
  91. package/mixins/HyperlinkMixin.js +11 -1
  92. package/mixins/InputMixin.js +22 -0
  93. package/mixins/KeyboardNavMixin.js +3 -1
  94. package/mixins/PopupMixin.js +41 -12
  95. package/mixins/RTLObserverMixin.js +2 -0
  96. package/mixins/ResizeObserverMixin.js +2 -0
  97. package/mixins/RippleMixin.js +3 -1
  98. package/mixins/ScrollListenerMixin.js +13 -1
  99. package/mixins/SemiStickyMixin.js +7 -0
  100. package/mixins/ShapeMaskedMixin.js +9 -1
  101. package/mixins/ShapeMixin.js +9 -0
  102. package/mixins/StateMixin.js +4 -0
  103. package/mixins/TextFieldMixin.js +21 -2
  104. package/mixins/ThemableMixin.js +13 -0
  105. package/mixins/TooltipTriggerMixin.js +17 -3
  106. package/mixins/TouchTargetMixin.js +4 -1
  107. package/mixins/TypographyMixin.js +8 -1
  108. package/package.json +53 -45
  109. package/services/theme.js +4 -5
  110. package/types/components/BottomAppBar.d.ts +3 -4
  111. package/types/components/BottomSheet.d.ts +33 -7
  112. package/types/components/BottomSheet.d.ts.map +1 -1
  113. package/types/components/Button.d.ts +3 -472
  114. package/types/components/Button.d.ts.map +1 -1
  115. package/types/components/Card.d.ts +9 -274
  116. package/types/components/Card.d.ts.map +1 -1
  117. package/types/components/Checkbox.d.ts +2 -0
  118. package/types/components/Checkbox.d.ts.map +1 -1
  119. package/types/components/Chip.d.ts +3 -1180
  120. package/types/components/Dialog.d.ts +8 -191
  121. package/types/components/Dialog.d.ts.map +1 -1
  122. package/types/components/Display.d.ts +5 -4
  123. package/types/components/Display.d.ts.map +1 -1
  124. package/types/components/Fab.d.ts +2 -470
  125. package/types/components/FilterChip.d.ts +5 -4032
  126. package/types/components/Grid.d.ts +1 -0
  127. package/types/components/Grid.d.ts.map +1 -1
  128. package/types/components/Headline.d.ts +3 -4
  129. package/types/components/Icon.d.ts +1 -49
  130. package/types/components/Icon.d.ts.map +1 -1
  131. package/types/components/IconButton.d.ts +3 -1205
  132. package/types/components/Input.d.ts +1485 -50245
  133. package/types/components/Input.d.ts.map +1 -1
  134. package/types/components/InputChip.d.ts +2 -160
  135. package/types/components/List.d.ts +8 -4
  136. package/types/components/List.d.ts.map +1 -1
  137. package/types/components/ListItem.d.ts +10 -235
  138. package/types/components/ListItem.d.ts.map +1 -1
  139. package/types/components/ListOption.d.ts +17 -1352
  140. package/types/components/ListOption.d.ts.map +1 -1
  141. package/types/components/Listbox.d.ts +199 -11448
  142. package/types/components/Listbox.d.ts.map +1 -1
  143. package/types/components/Menu.d.ts +21 -10
  144. package/types/components/Menu.d.ts.map +1 -1
  145. package/types/components/MenuItem.d.ts +17 -2894
  146. package/types/components/MenuItem.d.ts.map +1 -1
  147. package/types/components/NavBar.d.ts +2 -0
  148. package/types/components/NavBar.d.ts.map +1 -1
  149. package/types/components/NavBarItem.d.ts +1 -90
  150. package/types/components/NavDrawer.d.ts +3 -4
  151. package/types/components/NavDrawerItem.d.ts +1 -90
  152. package/types/components/NavItem.d.ts +1 -92
  153. package/types/components/NavItem.d.ts.map +1 -1
  154. package/types/components/NavRail.d.ts +3 -4
  155. package/types/components/NavRailItem.d.ts +1 -90
  156. package/types/components/Page.d.ts +1 -0
  157. package/types/components/Page.d.ts.map +1 -1
  158. package/types/components/Popup.d.ts +5 -3
  159. package/types/components/Popup.d.ts.map +1 -1
  160. package/types/components/Progress.d.ts +2 -0
  161. package/types/components/Progress.d.ts.map +1 -1
  162. package/types/components/Radio.d.ts +2 -0
  163. package/types/components/Radio.d.ts.map +1 -1
  164. package/types/components/Ripple.d.ts +1 -0
  165. package/types/components/Ripple.d.ts.map +1 -1
  166. package/types/components/Root.d.ts +1 -1
  167. package/types/components/Root.d.ts.map +1 -1
  168. package/types/components/Search.d.ts +502 -2
  169. package/types/components/Search.d.ts.map +1 -1
  170. package/types/components/SegmentedButton.d.ts +4 -470
  171. package/types/components/SegmentedButton.d.ts.map +1 -1
  172. package/types/components/SegmentedButtonGroup.d.ts +3 -4
  173. package/types/components/SegmentedButtonGroup.d.ts.map +1 -1
  174. package/types/components/Select.d.ts +5 -1208
  175. package/types/components/Select.d.ts.map +1 -1
  176. package/types/components/SideSheet.d.ts +9 -4
  177. package/types/components/SideSheet.d.ts.map +1 -1
  178. package/types/components/Slider.d.ts +10 -189
  179. package/types/components/Slider.d.ts.map +1 -1
  180. package/types/components/Snackbar.d.ts +13 -5
  181. package/types/components/Snackbar.d.ts.map +1 -1
  182. package/types/components/Switch.d.ts +4 -0
  183. package/types/components/Switch.d.ts.map +1 -1
  184. package/types/components/SwitchIcon.d.ts +2 -110
  185. package/types/components/SwitchIcon.d.ts.map +1 -1
  186. package/types/components/Tab.d.ts +12 -752
  187. package/types/components/Tab.d.ts.map +1 -1
  188. package/types/components/TabContent.d.ts +23 -21
  189. package/types/components/TabContent.d.ts.map +1 -1
  190. package/types/components/TabList.d.ts +646 -5801
  191. package/types/components/TabList.d.ts.map +1 -1
  192. package/types/components/TabPanel.d.ts +4 -4
  193. package/types/components/TabPanel.d.ts.map +1 -1
  194. package/types/components/Table.d.ts +24 -1
  195. package/types/components/Table.d.ts.map +1 -1
  196. package/types/components/TextArea.d.ts +15 -1208
  197. package/types/components/TextArea.d.ts.map +1 -1
  198. package/types/components/Title.d.ts +3 -4
  199. package/types/components/Tooltip.d.ts +4 -4
  200. package/types/components/Tooltip.d.ts.map +1 -1
  201. package/types/components/TopAppBar.d.ts +4 -5
  202. package/types/components/TopAppBar.d.ts.map +1 -1
  203. package/types/constants/shapes.d.ts.map +1 -1
  204. package/types/core/Composition.d.ts +19 -11
  205. package/types/core/Composition.d.ts.map +1 -1
  206. package/types/core/CompositionAdapter.d.ts +30 -8
  207. package/types/core/CompositionAdapter.d.ts.map +1 -1
  208. package/types/core/CustomElement.d.ts +27 -25
  209. package/types/core/CustomElement.d.ts.map +1 -1
  210. package/types/core/customTypes.d.ts +2 -6
  211. package/types/core/customTypes.d.ts.map +1 -1
  212. package/types/core/dom.d.ts.map +1 -1
  213. package/types/core/jsonMergePatch.d.ts.map +1 -1
  214. package/types/core/observe.d.ts +20 -19
  215. package/types/core/observe.d.ts.map +1 -1
  216. package/types/core/template.d.ts.map +1 -1
  217. package/types/dom/HTMLOptionsCollectionProxy.d.ts +4 -4
  218. package/types/dom/HTMLOptionsCollectionProxy.d.ts.map +1 -1
  219. package/types/mixins/AriaReflectorMixin.d.ts +18 -10
  220. package/types/mixins/AriaReflectorMixin.d.ts.map +1 -1
  221. package/types/mixins/AriaToolbarMixin.d.ts +6 -4
  222. package/types/mixins/AriaToolbarMixin.d.ts.map +1 -1
  223. package/types/mixins/ControlMixin.d.ts +1 -1
  224. package/types/mixins/ControlMixin.d.ts.map +1 -1
  225. package/types/mixins/DelegatesFocusMixin.d.ts +9 -1
  226. package/types/mixins/DelegatesFocusMixin.d.ts.map +1 -1
  227. package/types/mixins/DensityMixin.d.ts +4 -1
  228. package/types/mixins/DensityMixin.d.ts.map +1 -1
  229. package/types/mixins/ElevationMixin.d.ts +1 -2
  230. package/types/mixins/ElevationMixin.d.ts.map +1 -1
  231. package/types/mixins/FlexableMixin.d.ts +1 -0
  232. package/types/mixins/FlexableMixin.d.ts.map +1 -1
  233. package/types/mixins/FormAssociatedMixin.d.ts +3 -2
  234. package/types/mixins/FormAssociatedMixin.d.ts.map +1 -1
  235. package/types/mixins/HyperlinkMixin.d.ts +4 -1
  236. package/types/mixins/HyperlinkMixin.d.ts.map +1 -1
  237. package/types/mixins/InputMixin.d.ts +1 -7
  238. package/types/mixins/InputMixin.d.ts.map +1 -1
  239. package/types/mixins/KeyboardNavMixin.d.ts +4 -5
  240. package/types/mixins/KeyboardNavMixin.d.ts.map +1 -1
  241. package/types/mixins/PopupMixin.d.ts +22 -6
  242. package/types/mixins/PopupMixin.d.ts.map +1 -1
  243. package/types/mixins/RTLObserverMixin.d.ts +1 -0
  244. package/types/mixins/RTLObserverMixin.d.ts.map +1 -1
  245. package/types/mixins/ResizeObserverMixin.d.ts +1 -0
  246. package/types/mixins/ResizeObserverMixin.d.ts.map +1 -1
  247. package/types/mixins/RippleMixin.d.ts +3 -1
  248. package/types/mixins/RippleMixin.d.ts.map +1 -1
  249. package/types/mixins/ScrollListenerMixin.d.ts +7 -2
  250. package/types/mixins/ScrollListenerMixin.d.ts.map +1 -1
  251. package/types/mixins/SemiStickyMixin.d.ts +1 -1
  252. package/types/mixins/SemiStickyMixin.d.ts.map +1 -1
  253. package/types/mixins/ShapeMaskedMixin.d.ts +4 -1
  254. package/types/mixins/ShapeMaskedMixin.d.ts.map +1 -1
  255. package/types/mixins/ShapeMixin.d.ts +1 -0
  256. package/types/mixins/ShapeMixin.d.ts.map +1 -1
  257. package/types/mixins/StateMixin.d.ts +2 -0
  258. package/types/mixins/StateMixin.d.ts.map +1 -1
  259. package/types/mixins/TextFieldMixin.d.ts +7 -1208
  260. package/types/mixins/TextFieldMixin.d.ts.map +1 -1
  261. package/types/mixins/ThemableMixin.d.ts +1 -0
  262. package/types/mixins/ThemableMixin.d.ts.map +1 -1
  263. package/types/mixins/TooltipTriggerMixin.d.ts +12 -4
  264. package/types/mixins/TooltipTriggerMixin.d.ts.map +1 -1
  265. package/types/mixins/TouchTargetMixin.d.ts +4 -1
  266. package/types/mixins/TouchTargetMixin.d.ts.map +1 -1
  267. package/types/mixins/TypographyMixin.d.ts +4 -1
  268. package/types/mixins/TypographyMixin.d.ts.map +1 -1
  269. package/types/services/theme.d.ts.map +1 -1
  270. package/types/utils/jsx-runtime.d.ts +3 -3
  271. package/types/utils/jsx-runtime.d.ts.map +1 -1
  272. package/types/utils/material-color/hct/Hct.d.ts.map +1 -1
  273. package/types/utils/material-color/palettes/CorePalette.d.ts +1 -1
  274. package/types/utils/material-color/palettes/CorePalette.d.ts.map +1 -1
  275. package/types/utils/material-color/scheme/Scheme.d.ts.map +1 -1
  276. package/types/utils/pixelmatch.d.ts +3 -3
  277. package/types/utils/pixelmatch.d.ts.map +1 -1
  278. package/types/utils/searchParams.d.ts.map +1 -1
  279. package/utils/jsx-runtime.js +9 -4
  280. package/utils/pixelmatch.js +10 -7
  281. package/utils/searchParams.js +3 -0
  282. package/components/Button.md +0 -61
package/README.md CHANGED
@@ -4,211 +4,55 @@ Material Design for Web
4
4
  *A standards-focused, zero-dependency implemention of Material Design 3 (Material You).*
5
5
 
6
6
  ![Version](https://badgen.net/npm/v/@shortfuse/materialdesignweb) ![License](https://badgen.net/npm/license/@shortfuse/materialdesignweb) ![MinZip](https://badgen.net/bundlephobia/minzip/@shortfuse/materialdesignweb) ![Dependents](https://badgen.net/npm/dependents/@shortfuse/materialdesignweb)
7
-
8
-
9
- # Demo
10
-
11
- https://clshortfuse.github.io/materialdesignweb/
12
-
13
- # Getting started
14
-
15
- ## Pre-bundled
16
- ````html
17
- <script type="module"
18
- src="https://cdn.jsdelivr.net/npm/@shortfuse/materialdesignweb?color=6750A4"></script>
19
-
20
- <mdw-button>Hello World!</mdw-button>
21
- ````
22
-
23
- Includes all components and theming over URL params.
24
-
25
- ## Development
26
-
27
- ### Static Theme Generation:
28
-
29
- > `npx -p @shortfuse/materialdesignweb mdw-css --color=color=6750A4 --custom=yellow,orange:orange,green:0f0,alias:aqua --lightness=auto > theme.css`
30
-
31
- ### Dynamic Theme Generation:
32
-
33
- See [loader.js](./theming/loader.js) for an example.
34
-
35
- ### Component Loading
36
-
37
- ````js
38
- import { Button } from '@shortfuse/materialdesignweb';
39
- // OR
40
- import Button from '@shortfuse/materialdesignweb/components/Button.js';
41
- // OR
42
- import Button from 'https://www.unpkg.com/@shortfuse/materialdesignweb/components/Button.js';
43
- // OR
44
- import { Button } from 'https://cdn.jsdelivr.net/npm/@shortfuse/materialdesignweb?color=6750A4';
45
-
46
- const button = new Button();
47
- button.textContent = 'Hello World!';
48
- document.body.append(button);
49
-
50
- ````
51
-
52
- # Support
53
-
54
- 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.
55
-
56
- | Feature | Chrome | Edge | Firefox | Safari |
57
- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
58
- | [ShadowRoot](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot) | 53 | 79 | 63 | 10 |
59
- | [WeakRef](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakRef) | 84 | 84 | 79 | 14.1 |
60
- | [:where()](https://developer.mozilla.org/en-US/docs/Web/CSS/:where) | 88 | 88 | 78 | 14 |
61
- | | | | | |
62
- | [Array.at](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/at)† | 92 | 92 | 90 | 15.4 |
63
- | [replaceChildren](https://developer.mozilla.org/en-US/docs/Web/API/Element/replaceChildren)† | 84 | 86 | 79 | 14.1 |
64
- | [ElementInternals](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)† | 77 | 79 | 93 | 16.4 |
65
- | [delegatesFocus](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus)† | 53 | 79 | 94 | 15 |
66
- | [AdoptedStyleSheets](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/adoptedStyleSheets)* | 73 | 79 | 101 | 16.4 |
67
- | [CSS container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries)* | 106 | 106 | 110 | 16.0 |
68
- | |
69
- | Compatibility | 88 | 88 | 78 | 16.4 |
70
- | Support | [Latest ChromeOS LTS Release](https://chromeos.dev/en/education/chromeos-lts) | [Microsoft Edge Extended Stable Channel](https://learn.microsoft.com/en-us/DeployEdge/microsoft-edge-channels#extended-stable-channel) | ESR 115 | Last 2 Versions |
71
- | Status | [![Chrome](https://github.com/clshortfuse/materialdesignweb/actions/workflows/test-chromium.yml/badge.svg)](https://github.com/clshortfuse/materialdesignweb/actions/workflows/test-chromium.yml) | [![Edge](https://github.com/clshortfuse/materialdesignweb/actions/workflows/test-chromium.yml/badge.svg)](https://github.com/clshortfuse/materialdesignweb/actions/workflows/test-chromium.yml) | [![Firefox](https://github.com/clshortfuse/materialdesignweb/actions/workflows/test-firefox.yml/badge.svg)](https://github.com/clshortfuse/materialdesignweb/actions/workflows/test-firefox.yml) | [![Safari](https://github.com/clshortfuse/materialdesignweb/actions/workflows/test-webkit.yml/badge.svg)](https://github.com/clshortfuse/materialdesignweb/actions/workflows/test-webkit.yml) |
72
-
73
- *Optional
74
-
75
- †Can be polyfilled
76
-
77
- Notes:
78
-
79
- * Compatibility may be extended via polyfills (not included)
80
-
81
- # Components
82
-
83
- | Component | Features | Status | Size |
84
- | :----------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
85
- | [Badge](components/Badge.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Badge.js?compression=gzip&softmax=2048&max=4096&label=Badge) |
86
- | [Bottom App Bar](components/BottomAppBar.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Toolbar") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/BottomAppBar.js?compression=gzip&softmax=2048&max=4096&label=BottomAppBar) |
87
- | Bottom Sheet | | [:memo:](# "Planned") | |
88
- | [Button](components/Button.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Button") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Button.js?compression=gzip&softmax=2048&max=4096&label=Button) |
89
- | [Card](components/Card.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:arrow_up_down:](# "Flexable") [:wheelchair:](# "ARIA Figure") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Card.js?compression=gzip&softmax=2048&max=4096&label=Card) |
90
- | [Fab](components/Fab.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Button") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Fab.js?compression=gzip&softmax=2048&max=4096&label=Fab) |
91
- | [Fab - Extended](components/ExtendedFab.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Button") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/ExtendedFab.js?compression=gzip&softmax=2048&max=4096&label=ExtendedFab) |
92
- | [Icon Button](components/IconButton.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Button \| Checkbox") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/IconButton.js?compression=gzip&softmax=2048&max=4096&label=IconButton) |
93
- | [Segmented Button](components/SegmentedButton.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Option") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/SegmentedButton.js?compression=gzip&softmax=2048&max=4096&label=SegmentedButton) |
94
- | [Segmented Button Group](components/SegmentedButtonGroup.js) | [:crayon:](# "Ink") [:wheelchair:](# "ARIA Listbox") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/SegmentedButtonGroup.js?compression=gzip&softmax=2048&max=4096&label=SegmentedButtonGroup) |
95
- | [Checkbox](components/Checkbox.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Checkbox") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Checkbox.js?compression=gzip&softmax=2048&max=4096&label=Checkbox) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/CheckboxIcon.js?compression=gzip&softmax=2048&max=4096&label=CheckboxIcon) |
96
- | [Chip](components/Chip.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Button") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Chip.js?compression=gzip&softmax=2048&max=4096&label=Chip) |
97
- | [Chip - Filter](components/FilterChip.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Checkbox \| Radio") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/FilterChip.js?compression=gzip&softmax=2048&max=4096&label=FilteredChip) |
98
- | Chip: Filter Dropdown | | [:construction:](# "Under Construction") | |
99
- | Chip: Input | | [:construction:](# "Under Construction") | |
100
- | Date Picker | | [:grey_question:](# "Unknown") | |
101
- | [Dialog](components/Dialog.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Dialog") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Dialog.js?compression=gzip&softmax=2048&max=4096&label=Dialog) |
102
- | Dialog: Full-screen | | [:grey_question:](# "Unknown") | |
103
- | [Divider](components/Divider.js) | [:crayon:](# "Ink") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Divider.js?compression=gzip&softmax=2048&max=4096&label=Divider) |
104
- | [Icon](components/Icon.js) | [:crayon:](# "Ink") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Icon.js?compression=gzip&softmax=2048&max=4096&label=Icon) |
105
- | [List](components/List.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA List") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/List.js?compression=gzip&softmax=2048&max=4096&label=List) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/ListItem.js?compression=gzip&softmax=2048&max=4096&label=ListItem) |
106
- | [Listbox](components/Listbox.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Option") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Listbox.js?compression=gzip&softmax=2048&max=4096&label=Listbox) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/ListOption.js?compression=gzip&softmax=2048&max=4096&label=ListOption) |
107
- | [Menu](components/Menu.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Menu") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Menu.js?compression=gzip&softmax=2048&max=4096&label=Menu) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/MenuItem.js?compression=gzip&softmax=2048&max=4096&label=MenuItem) |
108
- | [Navigation Bar](components/NavBar.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Nav") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/NavBar.js?compression=gzip&softmax=2048&max=4096&label=NavBar) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/NavBarItem.js?compression=gzip&softmax=2048&max=4096&label=NavBarItem) |
109
- | [Navigation Drawer](components/NavDrawer.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Nav") | [:construction:](# "Under Construction") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/NavDrawer.js?compression=gzip&softmax=2048&max=4096&label=NavDrawer) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/NavDrawerItem.js?compression=gzip&softmax=2048&max=4096&label=NavDrawerItem) |
110
- | [Navigation Rail](components/NavDrawer.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Nav") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/NavRail.js?compression=gzip&softmax=2048&max=4096&label=NavRail) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/NavRailItem.js?compression=gzip&softmax=2048&max=4096&label=NavRailItem) |
111
- | [Progress Indicators](components/Progress.js) | [:crayon:](# "Ink") [:wheelchair:](# "ARIA Progress") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Progress.js?compression=gzip&softmax=2048&max=4096&label=Progress) |
112
- | [Search](components/Search.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Toolbar") | [:construction:](# "Under Construction") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Search.js?compression=gzip&softmax=2048&max=4096&label=Search) |
113
- | [Radio](components/Radio.js) | [:crayon:](# "Ink") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Radio") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Radio.js?compression=gzip&softmax=2048&max=4096&label=Radio) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/RadioIcon.js?compression=gzip&softmax=2048&max=4096&label=RadioIcon) |
114
- | [Side Sheet](components/SideSheet.js) | | [:construction:](# "Under Construction") | |
115
- | [Slider](components/Slider.js) | [:crayon:](# "Ink") [:wheelchair:](# "ARIA Slider") | [:warning:](# "Issues") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Slider.js?compression=gzip&softmax=2048&max=4096&label=Slider) |
116
- | [Snackbar](components/Snackbar.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Status") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Snackbar.js?compression=gzip&softmax=2048&max=4096&label=Snackbar) |
117
- | [Switch](components/Switch.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:a:](# "Font") [:wheelchair:](# "ARIA Switch") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Switch.js?compression=gzip&softmax=2048&max=4096&label=Switch) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/SwitchIcon.js?compression=gzip&softmax=2048&max=4096&label=SwitchIcon) |
118
- | [Tab](components/Tab.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Tab List \| Tab \| Tab Panel") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Tab.js?compression=gzip&softmax=2048&max=4096&label=Tab) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/TabList.js?compression=gzip&softmax=2048&max=4096&label=TabList) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/TabPanel.js?compression=gzip&softmax=2048&max=4096&label=TabPanel) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/TabContent.js?compression=gzip&softmax=2048&max=4096&label=TabContent) |
119
- | [Text Input](components/Input.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Textbox") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Input.js?compression=gzip&softmax=2048&max=4096&label=Input) |
120
- | [Text Area](components/TextArea.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Textarea") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/TextArea.js?compression=gzip&softmax=2048&max=4096&label=TextArea) |
121
- | [Text Select](components/Select.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Combobox") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Select.js?compression=gzip&softmax=2048&max=4096&label=Select) |
122
- | Time Picker | | [:grey_question:](# "Unknown") | |
123
- | [Tooltip](components/Tooltip.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Tooltip") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Tooltip.js?compression=gzip&softmax=2048&max=4096&label=Tooltip) |
124
- | [Top App Bar](components/TopAppBar.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:wheelchair:](# "ARIA") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/TopAppBar.js?compression=gzip&softmax=2048&max=4096&label=TopAppBar) |
125
-
126
- # Additional
127
-
128
- | Component | Description | Status | Size |
129
- | :--------------------------------- | :---------------------------------------------------- | :--------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------------------------: |
130
- | [Box](components/Box.js) | Simple themeable component with Flex and Grid options | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Box.js?compression=gzip&softmax=2048&max=4096&label=Box) |
131
- | [Layout](components/Layout.js) | Manages page nav, and pane layouts | [:construction:](# "Under Construction") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Layout.js?compression=gzip&softmax=2048&max=4096&label=Box) |
132
- | [Icon](components/Icon.js) | Font-icon, SVG, and IMG support | [:construction:](# "Under Construction") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Icon.js?compression=gzip&softmax=2048&max=4096&label=Icon) |
133
- | [Body](components/Body.js) | Box with Body typography | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Body.js?compression=gzip&softmax=2048&max=4096&label=Body) |
134
- | [Label](components/Label.js) | Box with Label typography | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Label.js?compression=gzip&softmax=2048&max=4096&label=Label) |
135
- | [Headline](components/Headline.js) | Box with Headline typography | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Headline.js?compression=gzip&softmax=2048&max=4096&label=Headline) |
136
- | [Title](components/Title.js) | Box with Title typography | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Title.js?compression=gzip&softmax=2048&max=4096&label=Title) |
137
- | [Ripple](components/Ripple.js) | Ripple effect | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Ripple.js?compression=gzip&softmax=2048&max=4096&label=Ripple) |
138
- | [Shape](components/Shape.js) | Themeable, flexable, shapeable element | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Surface.js?compression=gzip&softmax=2048&max=4096&label=Shape) |
139
- | [Surface](components/Surface.js) | Themeable, flexable, shapeable, elevateable element | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Surface.js?compression=gzip&softmax=2048&max=4096&label=Surface) |
140
-
141
-
142
- # Mixins
143
-
144
- | Mixin | Description | Status | Size |
145
- | :---------------------------------------------- | :----------------------------------------------- | :--------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------: |
146
- | [AriaReflector](mixins/AriaReflectorMixin.js) | Reflects ARIA Properties | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/AriaReflectorMixin.js?compression=gzip&softmax=2048&max=4096&label=ARIAReflector) |
147
- | [AriaToolbar](mixins/AriaToolbarMixin.js) | Shared ARIA Toolbar functionality | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/AriaToolbarMixin.js?compression=gzip&softmax=2048&max=4096&label=ARIAToolbar) |
148
- | [Control](mixins/ControlMixin.js) | HTML Control wrapper | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/ControlMixin.js?compression=gzip&softmax=2048&max=4096&label=Control) |
149
- | [Density](mixins/DensityMixin.js) | Component density options | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/DensityMixin.js?compression=gzip&softmax=2048&max=4096&label=Density) |
150
- | [Flexable](mixins/FlexableMixin.js) | Add flexbox options as attributes | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/FlexableMixin.js?compression=gzip&softmax=2048&max=4096&label=Flexable) |
151
- | [FormAssociated](mixins/FormAssociatedMixin.js) | Form-associated custom element support | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/FormAssociatedMixin.js?compression=gzip&softmax=2048&max=4096&label=FormAssociated) |
152
- | [Input](mixins/InputMixin.js) | HTMLInputElement wrapper | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/InputMixin.js?compression=gzip&softmax=2048&max=4096&label=Input) |
153
- | [KeyboardNav](mixins/KeyboardNavMixin.js) | Adds arrow key navigation and roving tab index | [:warning:](# "Issues") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/KeyboardNavMixin.js?compression=gzip&softmax=2048&max=4096&label=KeyboardNav) |
154
- | [ResizeObserver](mixins/ResizeObserverMixin.js) | Shared Eelement resize observer | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/ResizeObserverMixin.js?compression=gzip&softmax=2048&max=4096&label=ResizeObserver) |
155
- | [Ripple](mixins/RippleMixin.js) | Replaces pressed state with ripple effect | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/RippleMixin.js?compression=gzip&softmax=2048&max=4096&label=Ripple) |
156
- | [RTLObserver](mixins/RTLObserverMixin.js) | Shared RTL paoge observer | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/RTLObserverMixin.js?compression=gzip&softmax=2048&max=4096&label=RTLObserver) |
157
- | [ScrollListener](mixins/ScrollListenerMixin.js) | Listen for horizontal and vertical scroll events | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/ScrollListenerMixin.js?compression=gzip&softmax=2048&max=4096&label=ScrollListener) |
158
- | [Shape](mixins/ShapeMixin.js) | Adds shape and outline layer to elements | [:warning:](# "Issues") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/ShapeMixin.js?compression=gzip&softmax=2048&max=4096&label=Shape) |
159
- | [Surface](mixins/SurfaceMixin.js) | Adds shadows to elements | [:warning:](# "Issues") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/SurfaceMixin.js?compression=gzip&softmax=2048&max=4096&label=Surface) |
160
- | [TextField](mixins/TextFieldMixin.js) | Shared text field functionality | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/TextFieldMixin.js?compression=gzip&softmax=2048&max=4096&label=TextField) |
161
- | [TooltipTrigger](mixins/TooltipTriggerMixin.js) | Triggers tooltips based on events | [:construction:](# "Under Construction") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/TooltipTriggerMixin.js?compression=gzip&softmax=2048&max=4096&label=TooltipTrigger) |
162
- | [TouchTarget](mixins/TouchTargetMixin.js) | Adds extended touch target to controls | [:construction:](# "Under Construction") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/TouchTargetMixin.js?compression=gzip&softmax=2048&max=4096&label=TouchTarget) |
163
-
164
- # Core
165
-
166
- | File | Description | Status | Size |
167
- | :---------------------------------------- | :------------------------------------------------------------------------- | :--------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------: |
168
- | [Composition](core/Composition.js) | Composes templates based on styles, fragments, and watches. Renders data | [:construction:](# "Under Construction") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/core/Composition.js?compression=gzip&softmax=2048&max=4096&label=Composition) |
169
- | [CustomElement](core/CustomElement.js) | Handles ShadowDOM, ElementInternals, Property attributes, and compositions | [:construction:](# "Under Construction") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/core/CustomElement.js?compression=gzip&softmax=2048&max=4096&label=CustomElement) |
170
- | [CompositionAdapter](core/Composition.js) | Handles data array to elements binding | [:construction:](# "Under Construction") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/core/CompositionAdapter.js?compression=gzip&softmax=2048&max=4096&label=CompositionAdapter) |
171
- | [jsonMergePatch](core/jsonMergePatch.js) | Applies, constructors, and evaluates JSON Merge Patch | [:construction:](# "Under Construction") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/core/jsonMergePatch.js?compression=gzip&softmax=2048&max=4096&label=jsonMergePatch) |
172
- | [css](core/css.js) | CSS, CSSStyleSheet, HTMLStyleElement functions | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/core/css.js?compression=gzip&softmax=2048&max=4096&label=css) |
173
- | [customTypes](core/customTypes.js) | Non-primitive observable types | [:construction:](# "Under Construction") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/core/customTypes.js?compression=gzip&softmax=2048&max=4096&label=customTypes) |
174
- | [optimizations](core/optimizations.js) | Micro-optimizations functions | [:construction:](# "Under Construction") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/core/optimizations.js?compression=gzip&softmax=2048&max=4096&label=optimizations) |
175
- | [dom](core/dom.js) | DOM functions | [:warning:](# "Issues") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/core/dom.js?compression=gzip&softmax=2048&max=4096&label=dom) |
176
- | [observe](core/observe.js) | Observable pattern for primitives and objects | [:construction:](# "Under Construction") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/core/observe.js?compression=gzip&softmax=2048&max=4096&label=observe) |
177
- | [template](core/template.js) | Template literals for CSS (CSSStyleSheet) and HTML (DocumentFragment) | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/core/template.js?compression=gzip&softmax=2048&max=4096&label=template) |
178
- | [uid](core/uid.js) | Generates a UID string | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/core/uid.js?compression=gzip&softmax=2048&max=4096&label=uid) |
179
-
180
-
181
- # Other Components
182
-
183
- These components do not have official M3 guidelines
184
-
185
- | Component | Status |
186
- | :----------- | :--------------------------------------: |
187
- | ~~Backdrop~~ | [:skull:](# "Not planned") |
188
- | Banner | [:construction:](# "Under Construction") |
189
- | Data Table | [:memo:](# "Planned") |
190
- | Image List | [:grey_question:](# "Unknown") |
191
-
192
-
193
- # Legend
194
-
195
- * [:paintbrush:](# "Background") - Background Theming
196
- * [:crayon:](# "Ink") - Ink (Foreground) Theming
197
- * [:o:](# "Outline") - Outline
198
- * [:a:](# "Font") - Font Theming
199
- * [:large_blue_diamond:](# "Shape") - Shape Size Theming
200
- * [:signal_strength:](# "Density") - Density
201
- * [:arrow_up_down:](# "Flexable") - Flexable layout
202
- * [:wheelchair:](# "ARIA") - ARIA Role
203
-
204
- * [:heavy_check_mark:](# "Ready") - Ready
205
- * [:warning:](# "Issues") - Issues
206
- * [:construction:](# "Under Construction") - Under Construction
207
- * [:memo:](# "Planned") - Planned
208
- * [:grey_question:](# "Unknown") - Unknown
209
- * [:skull:](# "Not planned") - Not planned
210
-
211
-
212
- # Archive
7
+
8
+ Live demo: https://clshortfuse.github.io/materialdesignweb/
9
+
10
+ Quick links
11
+
12
+ **Getting Started**
13
+ - [Getting started](docs/GETTING_STARTED.md)
14
+ - [Theming](docs/THEMING.md)
15
+ - [Component index](docs/COMPONENTS.md)
16
+
17
+ **Building Components**
18
+ - [Creating custom elements](docs/CREATING_CUSTOM_ELEMENTS.md)
19
+ - [Observable properties reference](docs/OBSERVABLE_PROPERTIES.md)
20
+ - [State management (element-local)](docs/STATE.md)
21
+ - [State management (MVP pattern)](docs/STATE-MVP.md)
22
+
23
+ **Advanced**
24
+ - [Component manifest (CEM)](docs/custom-elements.json) — see [custom-elements-manifest](https://github.com/webcomponents/custom-elements-manifest)
25
+ - [Custom elements manifest spec](docs/CUSTOM-ELEMENTS-MANIFEST.md)
26
+ - [Contributing](docs/CONTRIBUTING.md)
27
+
28
+
29
+ Install via npm:
30
+
31
+ ```bash
32
+ npm install @shortfuse/materialdesignweb
33
+ ```
34
+
35
+ Use the CDN (zero-install):
36
+
37
+ ```html
38
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@shortfuse/materialdesignweb?color=6750A4"></script>
39
+ <mdw-button>Hello World</mdw-button>
40
+ ```
41
+
42
+ Import what you need (ESM):
43
+
44
+ ```js
45
+ import '@shortfuse/materialdesignweb'; // full bundle
46
+ // or
47
+ import Button from '@shortfuse/materialdesignweb/components/Button.js'; // single component
48
+ ```
49
+
50
+ See theming options: [docs/THEMING.md](docs/THEMING.md)
51
+
52
+ Theming
53
+
54
+ - Use the CDN `?color=` param for quick prototyping, or see [docs/THEMING.md](docs/THEMING.md) for runtime/build options.
55
+
56
+ Archive
213
57
 
214
58
  The Material Design 1/2 version has been archived in the [`archive-md2`](https://github.com/clshortfuse/materialdesignweb/tree/archive-md2) branch.
package/components/Badge.js CHANGED
@@ -3,8 +3,11 @@ import DensityMixin from '../mixins/DensityMixin.js';
3
3
  import ShapeMixin from '../mixins/ShapeMixin.js';
4
4
  import ThemableMixin from '../mixins/ThemableMixin.js';
5
5
 
6
- /* https://m3.material.io/components/badges/specs */
7
-
6
+ /**
7
+ * Badges show notifications, counts, or status information on
8
+ * navigation items and icons.
9
+ * @see https://m3.material.io/components/badges/specs
10
+ */
8
11
  export default CustomElement
9
12
  .extend()
10
13
  .mixin(ThemableMixin)
package/components/Body.js CHANGED
@@ -2,6 +2,10 @@ import TypographyMixin from '../mixins/TypographyMixin.js';
2
2
 
3
3
  import Box from './Box.js';
4
4
 
5
+ /**
6
+ * Material Design Type scale: Body.
7
+ * @see https://m3.material.io/styles/typography/type-scale-tokens
8
+ */
5
9
  export default Box
6
10
  .extend()
7
11
  .mixin(TypographyMixin)
package/components/BottomAppBar.js CHANGED
@@ -8,6 +8,12 @@ import Surface from './Surface.js';
8
8
  * next on the DOM, so users can logically tab to it.
9
9
  */
10
10
 
11
+ /**
12
+ * BottomAppBar component that extends Surface and mixes in AriaToolbarMixin.
13
+ * It observes color properties and applies specific CSS styles.
14
+ * (deprecated) - The original bottom app bar is no longer recommended. It should be replaced with the docked toolbar, which is very similar and more flexible.
15
+ * @see https://m3.material.io/components/bottom-app-bar/specs
16
+ */
11
17
  export default Surface
12
18
  .extend()
13
19
  .mixin(AriaToolbarMixin)
@@ -15,8 +21,6 @@ export default Surface
15
21
  color: { empty: 'surface-container' },
16
22
  })
17
23
  .css`
18
- /* https://m3.material.io/components/bottom-app-bar/specs */
19
-
20
24
  :host {
21
25
  --mdw-bg: var(--mdw-color__surface-container);
22
26
  --mdw-ink: var(--mdw-color__on-surface);