@shortfuse/materialdesignweb 0.7.6 → 0.9.0

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