@shortfuse/materialdesignweb 0.8.0 → 0.9.1

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 (405) hide show
  1. package/README.md +50 -198
  2. package/bin/mdw-css.js +1 -1
  3. package/components/Badge.js +15 -5
  4. package/components/Body.js +7 -0
  5. package/components/BottomAppBar.js +7 -10
  6. package/components/BottomSheet.js +472 -0
  7. package/components/Box.js +11 -49
  8. package/components/Button.js +81 -82
  9. package/components/Card.js +74 -62
  10. package/components/Checkbox.js +15 -25
  11. package/components/CheckboxIcon.js +19 -31
  12. package/components/Chip.js +18 -13
  13. package/components/Dialog.js +70 -100
  14. package/components/DialogActions.js +4 -0
  15. package/components/Display.js +64 -0
  16. package/components/Divider.js +5 -0
  17. package/components/Fab.js +94 -17
  18. package/components/FabContainer.js +57 -0
  19. package/components/FilterChip.js +43 -32
  20. package/components/Grid.js +187 -0
  21. package/components/Headline.js +9 -28
  22. package/components/Icon.js +80 -71
  23. package/components/IconButton.js +77 -120
  24. package/components/Input.js +745 -86
  25. package/components/InputChip.js +193 -0
  26. package/components/Label.js +7 -0
  27. package/components/List.js +11 -5
  28. package/components/ListItem.js +92 -23
  29. package/components/ListOption.js +143 -65
  30. package/components/Listbox.js +57 -17
  31. package/components/Menu.js +39 -27
  32. package/components/MenuItem.js +49 -36
  33. package/components/NavBar.js +66 -21
  34. package/components/NavBarItem.js +5 -0
  35. package/components/NavDrawer.js +33 -16
  36. package/components/NavDrawerItem.js +7 -4
  37. package/components/NavItem.js +61 -34
  38. package/components/NavRail.js +32 -21
  39. package/components/NavRailItem.js +10 -2
  40. package/components/Page.js +119 -0
  41. package/components/Pane.js +24 -0
  42. package/components/Popup.js +23 -8
  43. package/components/Progress.js +25 -5
  44. package/components/Radio.js +8 -7
  45. package/components/RadioIcon.js +24 -15
  46. package/components/Ripple.js +25 -7
  47. package/components/Root.js +225 -0
  48. package/components/Scrim.js +95 -0
  49. package/components/Search.js +30 -25
  50. package/components/SegmentedButton.js +53 -40
  51. package/components/SegmentedButtonGroup.js +15 -12
  52. package/components/Select.js +19 -10
  53. package/components/Shape.js +10 -66
  54. package/components/SideSheet.js +337 -0
  55. package/components/Slider.js +93 -36
  56. package/components/Snackbar.js +52 -20
  57. package/components/SnackbarContainer.js +51 -0
  58. package/components/Surface.js +20 -10
  59. package/components/Switch.js +21 -18
  60. package/components/SwitchIcon.js +62 -33
  61. package/components/Tab.js +78 -38
  62. package/components/TabContent.js +33 -12
  63. package/components/TabList.js +95 -34
  64. package/components/TabPanel.js +10 -1
  65. package/components/Table.js +151 -0
  66. package/components/TextArea.js +48 -16
  67. package/components/Title.js +8 -9
  68. package/components/Tooltip.js +51 -22
  69. package/components/TopAppBar.js +71 -78
  70. package/constants/shapes.js +36 -0
  71. package/constants/typography.js +127 -0
  72. package/core/Composition.js +391 -201
  73. package/core/CompositionAdapter.js +35 -18
  74. package/core/CustomElement.js +634 -254
  75. package/core/css.js +117 -12
  76. package/core/customTypes.js +161 -49
  77. package/core/dom.js +18 -11
  78. package/core/jsonMergePatch.js +27 -11
  79. package/core/observe.js +308 -256
  80. package/core/optimizations.js +9 -9
  81. package/core/template.js +14 -57
  82. package/dist/CustomElement.min.js +2 -0
  83. package/dist/CustomElement.min.js.map +7 -0
  84. package/dist/core/CustomElement.min.js +2 -0
  85. package/dist/core/CustomElement.min.js.map +7 -0
  86. package/dist/index.min.js +85 -115
  87. package/dist/index.min.js.map +4 -4
  88. package/dist/meta.json +1 -1
  89. package/dom/HTMLOptionsCollectionProxy.js +108 -0
  90. package/{theming/themableMixinLoader.js → loaders/palette.js} +4 -3
  91. package/loaders/theme.js +12 -0
  92. package/mixins/AriaReflectorMixin.js +64 -15
  93. package/mixins/AriaToolbarMixin.js +6 -0
  94. package/mixins/ControlMixin.js +79 -33
  95. package/mixins/DelegatesFocusMixin.js +62 -0
  96. package/mixins/DensityMixin.js +7 -3
  97. package/mixins/ElevationMixin.js +61 -0
  98. package/mixins/FlexableMixin.js +87 -39
  99. package/mixins/FormAssociatedMixin.js +76 -10
  100. package/mixins/HyperlinkMixin.js +76 -0
  101. package/mixins/InputMixin.js +227 -32
  102. package/mixins/KeyboardNavMixin.js +11 -7
  103. package/mixins/NavigationListenerMixin.js +33 -0
  104. package/mixins/PopupMixin.js +216 -219
  105. package/mixins/RTLObserverMixin.js +2 -0
  106. package/mixins/ResizeObserverMixin.js +18 -4
  107. package/mixins/RippleMixin.js +11 -7
  108. package/mixins/ScrollListenerMixin.js +14 -2
  109. package/mixins/SemiStickyMixin.js +51 -98
  110. package/mixins/ShapeMaskedMixin.js +125 -0
  111. package/mixins/ShapeMixin.js +30 -203
  112. package/mixins/StateMixin.js +74 -34
  113. package/mixins/TextFieldMixin.js +128 -145
  114. package/mixins/ThemableMixin.js +57 -56
  115. package/mixins/TooltipTriggerMixin.js +305 -359
  116. package/mixins/TouchTargetMixin.js +5 -2
  117. package/mixins/TypographyMixin.js +128 -0
  118. package/package.json +125 -81
  119. package/services/rtl.js +10 -0
  120. package/services/svgAlias.js +17 -0
  121. package/{theming/index.js → services/theme.js} +25 -176
  122. package/types/bin/mdw-css.d.ts +3 -0
  123. package/types/bin/mdw-css.d.ts.map +1 -0
  124. package/types/components/Badge.d.ts +39 -0
  125. package/types/components/Badge.d.ts.map +1 -0
  126. package/types/components/Body.d.ts +29 -0
  127. package/types/components/Body.d.ts.map +1 -0
  128. package/types/components/BottomAppBar.d.ts +72 -0
  129. package/types/components/BottomAppBar.d.ts.map +1 -0
  130. package/types/components/BottomSheet.d.ts +135 -0
  131. package/types/components/BottomSheet.d.ts.map +1 -0
  132. package/types/components/Box.d.ts +16 -0
  133. package/types/components/Box.d.ts.map +1 -0
  134. package/types/components/Button.d.ts +245 -0
  135. package/types/components/Button.d.ts.map +1 -0
  136. package/types/components/Card.d.ts +147 -0
  137. package/types/components/Card.d.ts.map +1 -0
  138. package/types/components/Checkbox.d.ts +207 -0
  139. package/types/components/Checkbox.d.ts.map +1 -0
  140. package/types/components/CheckboxIcon.d.ts +44 -0
  141. package/types/components/CheckboxIcon.d.ts.map +1 -0
  142. package/types/components/Chip.d.ts +248 -0
  143. package/types/components/Chip.d.ts.map +1 -0
  144. package/types/components/Dialog.d.ts +103 -0
  145. package/types/components/Dialog.d.ts.map +1 -0
  146. package/types/components/DialogActions.d.ts +4 -0
  147. package/types/components/DialogActions.d.ts.map +1 -0
  148. package/types/components/Display.d.ts +46 -0
  149. package/types/components/Display.d.ts.map +1 -0
  150. package/types/components/Divider.d.ts +10 -0
  151. package/types/components/Divider.d.ts.map +1 -0
  152. package/types/components/Fab.d.ts +273 -0
  153. package/types/components/Fab.d.ts.map +1 -0
  154. package/types/components/FabContainer.d.ts +10 -0
  155. package/types/components/FabContainer.d.ts.map +1 -0
  156. package/types/components/FilterChip.d.ts +256 -0
  157. package/types/components/FilterChip.d.ts.map +1 -0
  158. package/types/components/Grid.d.ts +38 -0
  159. package/types/components/Grid.d.ts.map +1 -0
  160. package/types/components/Headline.d.ts +46 -0
  161. package/types/components/Headline.d.ts.map +1 -0
  162. package/types/components/Icon.d.ts +55 -0
  163. package/types/components/Icon.d.ts.map +1 -0
  164. package/types/components/IconButton.d.ts +284 -0
  165. package/types/components/IconButton.d.ts.map +1 -0
  166. package/types/components/Input.d.ts +2528 -0
  167. package/types/components/Input.d.ts.map +1 -0
  168. package/types/components/InputChip.d.ts +85 -0
  169. package/types/components/InputChip.d.ts.map +1 -0
  170. package/types/components/Label.d.ts +29 -0
  171. package/types/components/Label.d.ts.map +1 -0
  172. package/types/components/List.d.ts +35 -0
  173. package/types/components/List.d.ts.map +1 -0
  174. package/types/components/ListItem.d.ts +124 -0
  175. package/types/components/ListItem.d.ts.map +1 -0
  176. package/types/components/ListOption.d.ts +158 -0
  177. package/types/components/ListOption.d.ts.map +1 -0
  178. package/types/components/Listbox.d.ts +763 -0
  179. package/types/components/Listbox.d.ts.map +1 -0
  180. package/types/components/Menu.d.ts +130 -0
  181. package/types/components/Menu.d.ts.map +1 -0
  182. package/types/components/MenuItem.d.ts +232 -0
  183. package/types/components/MenuItem.d.ts.map +1 -0
  184. package/types/components/NavBar.d.ts +20 -0
  185. package/types/components/NavBar.d.ts.map +1 -0
  186. package/types/components/NavBarItem.d.ts +97 -0
  187. package/types/components/NavBarItem.d.ts.map +1 -0
  188. package/types/components/NavDrawer.d.ts +107 -0
  189. package/types/components/NavDrawer.d.ts.map +1 -0
  190. package/types/components/NavDrawerItem.d.ts +97 -0
  191. package/types/components/NavDrawerItem.d.ts.map +1 -0
  192. package/types/components/NavItem.d.ts +99 -0
  193. package/types/components/NavItem.d.ts.map +1 -0
  194. package/types/components/NavRail.d.ts +108 -0
  195. package/types/components/NavRail.d.ts.map +1 -0
  196. package/types/components/NavRailItem.d.ts +97 -0
  197. package/types/components/NavRailItem.d.ts.map +1 -0
  198. package/types/components/Page.d.ts +25 -0
  199. package/types/components/Page.d.ts.map +1 -0
  200. package/types/components/Pane.d.ts +44 -0
  201. package/types/components/Pane.d.ts.map +1 -0
  202. package/types/components/Popup.d.ts +78 -0
  203. package/types/components/Popup.d.ts.map +1 -0
  204. package/types/components/Progress.d.ts +21 -0
  205. package/types/components/Progress.d.ts.map +1 -0
  206. package/types/components/Radio.d.ts +201 -0
  207. package/types/components/Radio.d.ts.map +1 -0
  208. package/types/components/RadioIcon.d.ts +46 -0
  209. package/types/components/RadioIcon.d.ts.map +1 -0
  210. package/types/components/Ripple.d.ts +35 -0
  211. package/types/components/Ripple.d.ts.map +1 -0
  212. package/types/components/Root.d.ts +68 -0
  213. package/types/components/Root.d.ts.map +1 -0
  214. package/types/components/Scrim.d.ts +6 -0
  215. package/types/components/Scrim.d.ts.map +1 -0
  216. package/types/components/Search.d.ts +516 -0
  217. package/types/components/Search.d.ts.map +1 -0
  218. package/types/components/SegmentedButton.d.ts +252 -0
  219. package/types/components/SegmentedButton.d.ts.map +1 -0
  220. package/types/components/SegmentedButtonGroup.d.ts +43 -0
  221. package/types/components/SegmentedButtonGroup.d.ts.map +1 -0
  222. package/types/components/Select.d.ts +158 -0
  223. package/types/components/Select.d.ts.map +1 -0
  224. package/types/components/Shape.d.ts +10 -0
  225. package/types/components/Shape.d.ts.map +1 -0
  226. package/types/components/SideSheet.d.ts +111 -0
  227. package/types/components/SideSheet.d.ts.map +1 -0
  228. package/types/components/Slider.d.ts +203 -0
  229. package/types/components/Slider.d.ts.map +1 -0
  230. package/types/components/Snackbar.d.ts +73 -0
  231. package/types/components/Snackbar.d.ts.map +1 -0
  232. package/types/components/SnackbarContainer.d.ts +6 -0
  233. package/types/components/SnackbarContainer.d.ts.map +1 -0
  234. package/types/components/Surface.d.ts +45 -0
  235. package/types/components/Surface.d.ts.map +1 -0
  236. package/types/components/Switch.d.ts +187 -0
  237. package/types/components/Switch.d.ts.map +1 -0
  238. package/types/components/SwitchIcon.d.ts +61 -0
  239. package/types/components/SwitchIcon.d.ts.map +1 -0
  240. package/types/components/Tab.d.ts +139 -0
  241. package/types/components/Tab.d.ts.map +1 -0
  242. package/types/components/TabContent.d.ts +124 -0
  243. package/types/components/TabContent.d.ts.map +1 -0
  244. package/types/components/TabList.d.ts +1111 -0
  245. package/types/components/TabList.d.ts.map +1 -0
  246. package/types/components/TabPanel.d.ts +28 -0
  247. package/types/components/TabPanel.d.ts.map +1 -0
  248. package/types/components/Table.d.ts +25 -0
  249. package/types/components/Table.d.ts.map +1 -0
  250. package/types/components/TextArea.d.ts +201 -0
  251. package/types/components/TextArea.d.ts.map +1 -0
  252. package/types/components/Title.d.ts +46 -0
  253. package/types/components/Title.d.ts.map +1 -0
  254. package/types/components/Tooltip.d.ts +49 -0
  255. package/types/components/Tooltip.d.ts.map +1 -0
  256. package/types/components/TopAppBar.d.ts +129 -0
  257. package/types/components/TopAppBar.d.ts.map +1 -0
  258. package/types/constants/colorKeywords.d.ts +2 -0
  259. package/types/constants/colorKeywords.d.ts.map +1 -0
  260. package/types/constants/shapes.d.ts +38 -0
  261. package/types/constants/shapes.d.ts.map +1 -0
  262. package/types/constants/typography.d.ts +212 -0
  263. package/types/constants/typography.d.ts.map +1 -0
  264. package/types/core/Composition.d.ts +260 -0
  265. package/types/core/Composition.d.ts.map +1 -0
  266. package/types/core/CompositionAdapter.d.ts +114 -0
  267. package/types/core/CompositionAdapter.d.ts.map +1 -0
  268. package/types/core/CustomElement.d.ts +304 -0
  269. package/types/core/CustomElement.d.ts.map +1 -0
  270. package/types/core/css.d.ts +44 -0
  271. package/types/core/css.d.ts.map +1 -0
  272. package/types/core/customTypes.d.ts +22 -0
  273. package/types/core/customTypes.d.ts.map +1 -0
  274. package/types/core/dom.d.ts +32 -0
  275. package/types/core/dom.d.ts.map +1 -0
  276. package/types/core/jsonMergePatch.d.ts +31 -0
  277. package/types/core/jsonMergePatch.d.ts.map +1 -0
  278. package/types/core/observe.d.ts +114 -0
  279. package/types/core/observe.d.ts.map +1 -0
  280. package/types/core/optimizations.d.ts +7 -0
  281. package/types/core/optimizations.d.ts.map +1 -0
  282. package/types/core/template.d.ts +47 -0
  283. package/types/core/template.d.ts.map +1 -0
  284. package/types/core/uid.d.ts +6 -0
  285. package/types/core/uid.d.ts.map +1 -0
  286. package/types/dom/HTMLOptionsCollectionProxy.d.ts +18 -0
  287. package/types/dom/HTMLOptionsCollectionProxy.d.ts.map +1 -0
  288. package/types/index.d.ts +88 -0
  289. package/types/index.d.ts.map +1 -0
  290. package/types/loaders/palette.d.ts +2 -0
  291. package/types/loaders/palette.d.ts.map +1 -0
  292. package/types/loaders/theme.d.ts +2 -0
  293. package/types/loaders/theme.d.ts.map +1 -0
  294. package/types/mixins/AriaReflectorMixin.d.ts +31 -0
  295. package/types/mixins/AriaReflectorMixin.d.ts.map +1 -0
  296. package/types/mixins/AriaToolbarMixin.d.ts +34 -0
  297. package/types/mixins/AriaToolbarMixin.d.ts.map +1 -0
  298. package/types/mixins/ControlMixin.d.ts +124 -0
  299. package/types/mixins/ControlMixin.d.ts.map +1 -0
  300. package/types/mixins/DelegatesFocusMixin.d.ts +13 -0
  301. package/types/mixins/DelegatesFocusMixin.d.ts.map +1 -0
  302. package/types/mixins/DensityMixin.d.ts +8 -0
  303. package/types/mixins/DensityMixin.d.ts.map +1 -0
  304. package/types/mixins/ElevationMixin.d.ts +32 -0
  305. package/types/mixins/ElevationMixin.d.ts.map +1 -0
  306. package/types/mixins/FlexableMixin.d.ts +14 -0
  307. package/types/mixins/FlexableMixin.d.ts.map +1 -0
  308. package/types/mixins/FormAssociatedMixin.d.ts +123 -0
  309. package/types/mixins/FormAssociatedMixin.d.ts.map +1 -0
  310. package/types/mixins/HyperlinkMixin.d.ts +25 -0
  311. package/types/mixins/HyperlinkMixin.d.ts.map +1 -0
  312. package/types/mixins/InputMixin.d.ts +173 -0
  313. package/types/mixins/InputMixin.d.ts.map +1 -0
  314. package/types/mixins/KeyboardNavMixin.d.ts +46 -0
  315. package/types/mixins/KeyboardNavMixin.d.ts.map +1 -0
  316. package/types/mixins/NavigationListenerMixin.d.ts +8 -0
  317. package/types/mixins/NavigationListenerMixin.d.ts.map +1 -0
  318. package/types/mixins/PopupMixin.d.ts +98 -0
  319. package/types/mixins/PopupMixin.d.ts.map +1 -0
  320. package/types/mixins/RTLObserverMixin.d.ts +8 -0
  321. package/types/mixins/RTLObserverMixin.d.ts.map +1 -0
  322. package/types/mixins/ResizeObserverMixin.d.ts +13 -0
  323. package/types/mixins/ResizeObserverMixin.d.ts.map +1 -0
  324. package/types/mixins/RippleMixin.d.ts +94 -0
  325. package/types/mixins/RippleMixin.d.ts.map +1 -0
  326. package/types/mixins/ScrollListenerMixin.d.ts +46 -0
  327. package/types/mixins/ScrollListenerMixin.d.ts.map +1 -0
  328. package/types/mixins/SemiStickyMixin.d.ts +50 -0
  329. package/types/mixins/SemiStickyMixin.d.ts.map +1 -0
  330. package/types/mixins/ShapeMaskedMixin.d.ts +12 -0
  331. package/types/mixins/ShapeMaskedMixin.d.ts.map +1 -0
  332. package/types/mixins/ShapeMixin.d.ts +39 -0
  333. package/types/mixins/ShapeMixin.d.ts.map +1 -0
  334. package/types/mixins/StateMixin.d.ts +29 -0
  335. package/types/mixins/StateMixin.d.ts.map +1 -0
  336. package/types/mixins/TextFieldMixin.d.ts +153 -0
  337. package/types/mixins/TextFieldMixin.d.ts.map +1 -0
  338. package/types/mixins/ThemableMixin.d.ts +10 -0
  339. package/types/mixins/ThemableMixin.d.ts.map +1 -0
  340. package/types/mixins/TooltipTriggerMixin.d.ts +114 -0
  341. package/types/mixins/TooltipTriggerMixin.d.ts.map +1 -0
  342. package/types/mixins/TouchTargetMixin.d.ts +6 -0
  343. package/types/mixins/TouchTargetMixin.d.ts.map +1 -0
  344. package/types/mixins/TypographyMixin.d.ts +20 -0
  345. package/types/mixins/TypographyMixin.d.ts.map +1 -0
  346. package/types/services/rtl.d.ts +3 -0
  347. package/types/services/rtl.d.ts.map +1 -0
  348. package/types/services/svgAlias.d.ts +13 -0
  349. package/types/services/svgAlias.d.ts.map +1 -0
  350. package/types/services/theme.d.ts +45 -0
  351. package/types/services/theme.d.ts.map +1 -0
  352. package/types/utils/cli.d.ts +3 -0
  353. package/types/utils/cli.d.ts.map +1 -0
  354. package/types/utils/function.d.ts +3 -0
  355. package/types/utils/function.d.ts.map +1 -0
  356. package/types/utils/jsx-runtime.d.ts +20 -0
  357. package/types/utils/jsx-runtime.d.ts.map +1 -0
  358. package/types/utils/material-color/blend.d.ts +34 -0
  359. package/types/utils/material-color/blend.d.ts.map +1 -0
  360. package/types/utils/material-color/hct/Cam16.d.ts +142 -0
  361. package/types/utils/material-color/hct/Cam16.d.ts.map +1 -0
  362. package/types/utils/material-color/hct/Hct.d.ts +93 -0
  363. package/types/utils/material-color/hct/Hct.d.ts.map +1 -0
  364. package/types/utils/material-color/hct/ViewingConditions.d.ts +69 -0
  365. package/types/utils/material-color/hct/ViewingConditions.d.ts.map +1 -0
  366. package/types/utils/material-color/hct/hctSolver.d.ts +30 -0
  367. package/types/utils/material-color/hct/hctSolver.d.ts.map +1 -0
  368. package/types/utils/material-color/helper.d.ts +8 -0
  369. package/types/utils/material-color/helper.d.ts.map +1 -0
  370. package/types/utils/material-color/palettes/CorePalette.d.ts +75 -0
  371. package/types/utils/material-color/palettes/CorePalette.d.ts.map +1 -0
  372. package/types/utils/material-color/palettes/TonalPalette.d.ts +38 -0
  373. package/types/utils/material-color/palettes/TonalPalette.d.ts.map +1 -0
  374. package/types/utils/material-color/scheme/Scheme.d.ts +264 -0
  375. package/types/utils/material-color/scheme/Scheme.d.ts.map +1 -0
  376. package/types/utils/material-color/utils/color.d.ts +172 -0
  377. package/types/utils/material-color/utils/color.d.ts.map +1 -0
  378. package/types/utils/material-color/utils/math.d.ts +94 -0
  379. package/types/utils/material-color/utils/math.d.ts.map +1 -0
  380. package/types/utils/pixelmatch.d.ts +22 -0
  381. package/types/utils/pixelmatch.d.ts.map +1 -0
  382. package/types/utils/popup.d.ts +106 -0
  383. package/types/utils/popup.d.ts.map +1 -0
  384. package/types/utils/searchParams.d.ts +3 -0
  385. package/types/utils/searchParams.d.ts.map +1 -0
  386. package/types/utils/svg.d.ts +7 -0
  387. package/types/utils/svg.d.ts.map +1 -0
  388. package/utils/jsx-runtime.js +9 -4
  389. package/utils/material-color/scheme/Scheme.js +1 -1
  390. package/utils/pixelmatch.js +363 -0
  391. package/utils/popup.js +86 -10
  392. package/utils/searchParams.js +22 -0
  393. package/components/Button.md +0 -61
  394. package/components/ExtendedFab.js +0 -32
  395. package/components/Layout.js +0 -504
  396. package/components/Nav.js +0 -38
  397. package/core/DomAdapter.js +0 -586
  398. package/core/ICustomElement.d.ts +0 -291
  399. package/core/ICustomElement.js +0 -1
  400. package/core/test.js +0 -126
  401. package/core/typings.d.ts +0 -142
  402. package/core/typings.js +0 -1
  403. package/mixins/SurfaceMixin.js +0 -127
  404. package/theming/loader.js +0 -22
  405. /package/{utils/color_keywords.js → constants/colorKeywords.js} +0 -0
package/README.md CHANGED
@@ -4,203 +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
-
55
- | Feature | Chrome | Edge | Firefox | Safari |
56
- | ----------------------------------------------------------------------------------------------------- | -----: | ---: | ------: | -----: |
57
- | [ShadowRoot](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot) | 53 | 79 | 63 | 10 |
58
- | [WeakRef](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakRef) | 84 | 84 | 79 | 14.1 |
59
- | [ElementInternals](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)† | 77 | 79 | 93 | 16.4 |
60
- | [delegatesFocus](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus)† | 53 | 79 | 94 | 15 |
61
- | [AdoptedStyleSheets](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/adoptedStyleSheets)* | 73 | 79 | 101 | 16.4 |
62
- | | | | | |
63
- | Supported | 84 | 84 | 93 | 16.4 |
64
-
65
- *Optional
66
-
67
- †Can be polyfilled
68
-
69
- Notes:
70
-
71
- * Compatibility may be extended via polyfills (not included)
72
-
73
- # Components
74
-
75
- | Component | Features | Status | Size |
76
- | :----------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
77
- | [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) |
78
- | [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) |
79
- | Bottom Sheet | | [:memo:](# "Planned") | |
80
- | [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) |
81
- | [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) |
82
- | [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) |
83
- | [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) |
84
- | [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) |
85
- | [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) |
86
- | [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) |
87
- | [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) |
88
- | [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) |
89
- | [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) |
90
- | Chip: Filter Dropdown | | [:construction:](# "Under Construction") | |
91
- | Chip: Input | | [:construction:](# "Under Construction") | |
92
- | Date Picker | | [:grey_question:](# "Unknown") | |
93
- | [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) |
94
- | Dialog: Full-screen | | [:grey_question:](# "Unknown") | |
95
- | [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) |
96
- | [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) |
97
- | [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) |
98
- | [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) |
99
- | [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) |
100
- | [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) |
101
- | [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) |
102
- | [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) |
103
- | [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) |
104
- | [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) |
105
- | [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) |
106
- | [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) |
107
- | [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) |
108
- | [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) |
109
- | [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) |
110
- | [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) |
111
- | [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) |
112
- | [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) |
113
- | Time Picker | | [:grey_question:](# "Unknown") | |
114
- | [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) |
115
- | [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) |
116
-
117
- # Additional
118
-
119
- | Component | Description | Status | Size |
120
- | :--------------------------------- | :-------------------------------------------------- | :--------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------------------------: |
121
- | [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) |
122
- | [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) |
123
- | [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) |
124
- | [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) |
125
- | [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) |
126
- | [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) |
127
- | [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) |
128
- | [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) |
129
- | [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) |
130
- | [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) |
131
-
132
-
133
- # Mixins
134
-
135
- | Mixin | Description | Status | Size |
136
- | :---------------------------------------------- | :----------------------------------------------- | :--------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------: |
137
- | [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) |
138
- | [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) |
139
- | [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) |
140
- | [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) |
141
- | [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) |
142
- | [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) |
143
- | [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) |
144
- | [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) |
145
- | [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) |
146
- | [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) |
147
- | [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) |
148
- | [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) |
149
- | [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) |
150
- | [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) |
151
- | [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) |
152
- | [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) |
153
- | [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) |
154
-
155
- # Core
156
-
157
- | File | Description | Status | Size |
158
- | :---------------------------------------- | :------------------------------------------------------------------------- | :--------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------: |
159
- | [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) |
160
- | [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) |
161
- | [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) |
162
- | [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) |
163
- | [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) |
164
- | [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) |
165
- | [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) |
166
- | [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) |
167
- | [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) |
168
- | [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) |
169
- | [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) |
170
-
171
-
172
- # Other Components
173
-
174
- These components do not have official M3 guidelines
175
-
176
- | Component | Status |
177
- | :----------- | :--------------------------------------: |
178
- | ~~Backdrop~~ | [:skull:](# "Not planned") |
179
- | Banner | [:construction:](# "Under Construction") |
180
- | Data Table | [:memo:](# "Planned") |
181
- | Image List | [:grey_question:](# "Unknown") |
182
- | Side Sheet | [:grey_question:](# "Unknown") |
183
-
184
-
185
- # Legend
186
-
187
- * [:paintbrush:](# "Background") - Background Theming
188
- * [:crayon:](# "Ink") - Ink (Foreground) Theming
189
- * [:o:](# "Outline") - Outline
190
- * [:a:](# "Font") - Font Theming
191
- * [:large_blue_diamond:](# "Shape") - Shape Size Theming
192
- * [:signal_strength:](# "Density") - Density
193
- * [:arrow_up_down:](# "Flexable") - Flexable layout
194
- * [:wheelchair:](# "ARIA") - ARIA Role
195
-
196
- * [:heavy_check_mark:](# "Ready") - Ready
197
- * [:warning:](# "Issues") - Issues
198
- * [:construction:](# "Under Construction") - Under Construction
199
- * [:memo:](# "Planned") - Planned
200
- * [:grey_question:](# "Unknown") - Unknown
201
- * [:skull:](# "Not planned") - Not planned
202
-
203
-
204
- # 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
205
57
 
206
58
  The Material Design 1/2 version has been archived in the [`archive-md2`](https://github.com/clshortfuse/materialdesignweb/tree/archive-md2) branch.
package/bin/mdw-css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  #!/usr/bin/env node
2
2
 
3
- import { generateThemeCSS, generateTypographyGlobalCSS, themeOptionsFromSearchParams } from '../theming/index.js';
3
+ import { generateThemeCSS, generateTypographyGlobalCSS, themeOptionsFromSearchParams } from '../services/theme.js';
4
4
  import { getSearchParams } from '../utils/cli.js';
5
5
 
6
6
  process.stdout.write(
package/components/Badge.js CHANGED
@@ -3,6 +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
+ /**
7
+ * Badges show notifications, counts, or status information on
8
+ * navigation items and icons.
9
+ * @see https://m3.material.io/components/badges/specs
10
+ */
6
11
  export default CustomElement
7
12
  .extend()
8
13
  .mixin(ThemableMixin)
@@ -13,7 +18,7 @@ export default CustomElement
13
18
  :host {
14
19
  --mdw-shape__size: 8px;
15
20
  --mdw-ink: var(--mdw-color__on-error);
16
- --mdw-shape__bg: rgb(var(--mdw-color__error));
21
+ --mdw-bg: var(--mdw-color__error);
17
22
  --mdw-type__font: var(--mdw-typescale__label-small__font);
18
23
  --mdw-type__letter-spacing: var(--mdw-typescale__label-small__letter-spacing);
19
24
  position: relative;
@@ -24,8 +29,12 @@ export default CustomElement
24
29
  box-sizing: border-box;
25
30
  min-block-size: var(--mdw-typescale__label-small__line-height);
26
31
  min-inline-size: var(--mdw-typescale__label-small__line-height);
32
+
33
+ /* Ensure 16px min-height while keeping display:block */
34
+ padding-block: calc(8px - var(--mdw-typescale__body-small__line-height) / 2);
27
35
  padding-inline: max(4px, calc(4px + (var(--mdw-density) * 2px)));
28
36
 
37
+ background-color: rgb(var(--mdw-bg));
29
38
  color: rgb(var(--mdw-ink));
30
39
 
31
40
  font: var(--mdw-type__font);
@@ -42,11 +51,12 @@ export default CustomElement
42
51
  }
43
52
 
44
53
  :host(:empty) {
45
- vertical-align: middle;
54
+ min-block-size: 6px;
55
+ min-inline-size: 6px;
56
+ /* stylelint-disable-next-line declaration-property-value-disallowed-list */
57
+ margin: 5px;
58
+ padding: 0
46
59
  }
47
60
 
48
- :host(:empty) #shape {
49
- inset: 5px;
50
- }
51
61
  `
52
62
  .autoRegister('mdw-badge');
package/components/Body.js CHANGED
@@ -1,7 +1,14 @@
1
+ import TypographyMixin from '../mixins/TypographyMixin.js';
2
+
1
3
  import Box from './Box.js';
2
4
 
5
+ /**
6
+ * Material Design Type scale: Body.
7
+ * @see https://m3.material.io/styles/typography/type-scale-tokens
8
+ */
3
9
  export default Box
4
10
  .extend()
11
+ .mixin(TypographyMixin)
5
12
  .css`
6
13
  :host {
7
14
  font: var(--mdw-typescale__body-large__font);
package/components/BottomAppBar.js CHANGED
@@ -1,4 +1,3 @@
1
- import AriaReflectorMixin from '../mixins/AriaReflectorMixin.js';
2
1
  import AriaToolbarMixin from '../mixins/AriaToolbarMixin.js';
3
2
 
4
3
  import Surface from './Surface.js';
@@ -9,26 +8,24 @@ import Surface from './Surface.js';
9
8
  * next on the DOM, so users can logically tab to it.
10
9
  */
11
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
+ */
12
17
  export default Surface
13
18
  .extend()
14
19
  .mixin(AriaToolbarMixin)
15
- .mixin(AriaReflectorMixin)
16
- .set({
17
- elevated: true,
18
- _ariaRole: 'toolbar',
19
- })
20
20
  .observe({
21
21
  color: { empty: 'surface-container' },
22
22
  })
23
23
  .css`
24
- /* https://m3.material.io/components/bottom-app-bar/specs */
25
-
26
24
  :host {
27
25
  --mdw-bg: var(--mdw-color__surface-container);
28
26
  --mdw-ink: var(--mdw-color__on-surface);
29
-
30
- display: flex;
31
27
  align-items: center;
28
+ flex-direction: row;
32
29
  gap: 8px;
33
30
  justify-content: flex-start;
34
31