@material/web 1.0.0-pre.2 → 1.0.0-pre.4

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 (684) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +41 -41
  3. package/autocomplete/autocomplete-item.js.map +1 -1
  4. package/autocomplete/autocomplete-list.js.map +1 -1
  5. package/autocomplete/autocomplete-surface.js.map +1 -1
  6. package/autocomplete/filled-autocomplete.d.ts +0 -2
  7. package/autocomplete/filled-autocomplete.js +0 -7
  8. package/autocomplete/filled-autocomplete.js.map +1 -1
  9. package/autocomplete/lib/_filled-autocomplete.scss +22 -28
  10. package/autocomplete/lib/_outlined-autocomplete.scss +23 -29
  11. package/autocomplete/lib/_shared.scss +6 -10
  12. package/autocomplete/lib/autocomplete.d.ts +2 -2
  13. package/autocomplete/lib/autocomplete.js +4 -5
  14. package/autocomplete/lib/autocomplete.js.map +1 -1
  15. package/autocomplete/lib/autocompletelist/autocomplete-list-styles.scss +2 -0
  16. package/autocomplete/lib/autocompletesurface/autocomplete-surface-styles.scss +2 -0
  17. package/autocomplete/lib/filled-styles.css.js +1 -1
  18. package/autocomplete/lib/filled-styles.css.js.map +1 -1
  19. package/autocomplete/lib/filled-styles.scss +2 -0
  20. package/autocomplete/lib/outlined-styles.css.js +1 -1
  21. package/autocomplete/lib/outlined-styles.css.js.map +1 -1
  22. package/autocomplete/lib/outlined-styles.scss +2 -0
  23. package/autocomplete/lib/shared-styles.scss +2 -0
  24. package/autocomplete/outlined-autocomplete.d.ts +0 -2
  25. package/autocomplete/outlined-autocomplete.js +0 -7
  26. package/autocomplete/outlined-autocomplete.js.map +1 -1
  27. package/badge/badge.js.map +1 -1
  28. package/badge/lib/_badge.scss +10 -13
  29. package/badge/lib/badge-styles.css.js +1 -1
  30. package/badge/lib/badge-styles.css.js.map +1 -1
  31. package/badge/lib/badge-styles.scss +2 -0
  32. package/badge/lib/badge.js.map +1 -1
  33. package/button/elevated-button.js.map +1 -1
  34. package/button/elevated-link-button.js.map +1 -1
  35. package/button/filled-button.js.map +1 -1
  36. package/button/filled-link-button.js.map +1 -1
  37. package/button/lib/_elevated-button.scss +10 -15
  38. package/button/lib/_elevation.scss +4 -1
  39. package/button/lib/_filled-button.scss +12 -14
  40. package/button/lib/_icon.scss +1 -0
  41. package/button/lib/_outlined-button.scss +10 -15
  42. package/button/lib/_shared.scss +14 -19
  43. package/button/lib/_text-button.scss +12 -14
  44. package/button/lib/_tonal-button.scss +10 -15
  45. package/button/lib/button.js.map +1 -1
  46. package/button/lib/elevated-styles.css.js +1 -1
  47. package/button/lib/elevated-styles.css.js.map +1 -1
  48. package/button/lib/elevated-styles.scss +2 -0
  49. package/button/lib/filled-styles.css.js +1 -1
  50. package/button/lib/filled-styles.css.js.map +1 -1
  51. package/button/lib/filled-styles.scss +2 -0
  52. package/button/lib/link-button.js.map +1 -1
  53. package/button/lib/outlined-styles.css.js +1 -1
  54. package/button/lib/outlined-styles.css.js.map +1 -1
  55. package/button/lib/outlined-styles.scss +2 -0
  56. package/button/lib/shared-elevation-styles.scss +2 -0
  57. package/button/lib/shared-styles.css.js +1 -1
  58. package/button/lib/shared-styles.css.js.map +1 -1
  59. package/button/lib/shared-styles.scss +2 -0
  60. package/button/lib/text-styles.css.js +1 -1
  61. package/button/lib/text-styles.css.js.map +1 -1
  62. package/button/lib/text-styles.scss +2 -0
  63. package/button/lib/tonal-styles.css.js +1 -1
  64. package/button/lib/tonal-styles.css.js.map +1 -1
  65. package/button/lib/tonal-styles.scss +2 -0
  66. package/button/outlined-button.js.map +1 -1
  67. package/button/outlined-link-button.js.map +1 -1
  68. package/button/text-button.js.map +1 -1
  69. package/button/text-link-button.js.map +1 -1
  70. package/button/tonal-button.js.map +1 -1
  71. package/button/tonal-link-button.js.map +1 -1
  72. package/checkbox/checkbox.js.map +1 -1
  73. package/checkbox/lib/_checkbox.scss +26 -31
  74. package/checkbox/lib/checkbox-styles.css.js +1 -1
  75. package/checkbox/lib/checkbox-styles.css.js.map +1 -1
  76. package/checkbox/lib/checkbox-styles.scss +2 -0
  77. package/checkbox/lib/checkbox.js +6 -6
  78. package/checkbox/lib/checkbox.js.map +1 -1
  79. package/checkbox/lib/forced-colors-styles.scss +2 -0
  80. package/chips/action/delete-action.js.map +1 -1
  81. package/chips/action/lib/action.js +4 -4
  82. package/chips/action/lib/action.js.map +1 -1
  83. package/chips/action/lib/link-action.js +1 -1
  84. package/chips/action/lib/link-action.js.map +1 -1
  85. package/chips/action/lib/primary-action.js.map +1 -1
  86. package/chips/action/lib/selectable-action.js.map +1 -1
  87. package/chips/action/link-action.js.map +1 -1
  88. package/chips/action/presentational-action.js.map +1 -1
  89. package/chips/action/primary-action.js.map +1 -1
  90. package/chips/action/selectable-action.js.map +1 -1
  91. package/chips/chip/lib/_assist-chip-theme.scss +4 -0
  92. package/chips/chip/lib/_chip-theme.scss +29 -40
  93. package/chips/chip/lib/_chip.scss +2 -0
  94. package/chips/chip/lib/_filter-chip-theme.scss +4 -0
  95. package/chips/chip/lib/_input-chip-theme.scss +4 -0
  96. package/chips/chip/lib/_suggestion-chip-theme.scss +4 -0
  97. package/chips/chip/lib/chip.js.map +1 -1
  98. package/chips/chip/lib/foundation.js +4 -4
  99. package/chips/chip/lib/foundation.js.map +1 -1
  100. package/chips/chip/lib/link-chip.js.map +1 -1
  101. package/chips/chip/lib/selectable-chip.js.map +1 -1
  102. package/chips/chip/lib/types.d.ts +2 -2
  103. package/chips/chipset/lib/_chip-set-theme.scss +2 -0
  104. package/chips/chipset/lib/_chip-set.scss +2 -0
  105. package/chips/chipset/lib/foundation.js +3 -3
  106. package/chips/chipset/lib/foundation.js.map +1 -1
  107. package/chips/chipset/lib/types.d.ts +3 -3
  108. package/controller/events.js +4 -0
  109. package/controller/events.js.map +1 -1
  110. package/controller/form-controller.d.ts +1 -1
  111. package/controller/form-controller.js +21 -29
  112. package/controller/form-controller.js.map +1 -1
  113. package/dialog/dialog.js.map +1 -1
  114. package/dialog/harness.d.ts +2 -2
  115. package/dialog/harness.js +11 -8
  116. package/dialog/harness.js.map +1 -1
  117. package/dialog/lib/_dialog.scss +7 -11
  118. package/dialog/lib/_tokens.scss +9 -6
  119. package/dialog/lib/dialog-styles.css.js +1 -1
  120. package/dialog/lib/dialog-styles.css.js.map +1 -1
  121. package/dialog/lib/dialog-styles.scss +2 -0
  122. package/dialog/lib/dialog.js +9 -7
  123. package/dialog/lib/dialog.js.map +1 -1
  124. package/divider/divider.js.map +1 -1
  125. package/divider/lib/_divider.scss +2 -0
  126. package/divider/lib/divider-styles.scss +2 -0
  127. package/divider/lib/divider.js.map +1 -1
  128. package/elevation/elevation.js.map +1 -1
  129. package/elevation/lib/_elevation.scss +4 -0
  130. package/elevation/lib/_md-comp-elevation.scss +4 -0
  131. package/elevation/lib/elevation-styles.scss +2 -0
  132. package/elevation/lib/elevation.js.map +1 -1
  133. package/fab/fab-extended.js.map +1 -1
  134. package/fab/fab.js.map +1 -1
  135. package/fab/lib/_fab-extended.scss +18 -11
  136. package/fab/lib/_fab.scss +7 -2
  137. package/fab/lib/_shared.scss +16 -8
  138. package/fab/lib/fab-extended-styles.css.js +1 -1
  139. package/fab/lib/fab-extended-styles.css.js.map +1 -1
  140. package/fab/lib/fab-extended-styles.scss +2 -0
  141. package/fab/lib/fab-shared-styles.css.js +1 -1
  142. package/fab/lib/fab-shared-styles.css.js.map +1 -1
  143. package/fab/lib/fab-shared-styles.scss +2 -0
  144. package/fab/lib/fab-shared.d.ts +9 -15
  145. package/fab/lib/fab-shared.js +21 -33
  146. package/fab/lib/fab-shared.js.map +1 -1
  147. package/fab/lib/fab-styles.css.js +1 -1
  148. package/fab/lib/fab-styles.css.js.map +1 -1
  149. package/fab/lib/fab-styles.scss +2 -0
  150. package/field/filled-field.d.ts +1 -1
  151. package/field/filled-field.js +1 -1
  152. package/field/filled-field.js.map +1 -1
  153. package/field/harness.js +1 -1
  154. package/field/harness.js.map +1 -1
  155. package/field/lib/_content.scss +120 -57
  156. package/field/lib/_filled-field.scss +73 -130
  157. package/field/lib/_label.scss +27 -65
  158. package/field/lib/_md-comp-filled-field.scss +127 -56
  159. package/field/lib/_md-comp-outlined-field.scss +104 -52
  160. package/field/lib/_outlined-field.scss +108 -120
  161. package/field/lib/_shared.scss +27 -45
  162. package/field/lib/_supporting-text.scss +25 -52
  163. package/field/lib/field.d.ts +15 -31
  164. package/field/lib/field.js +130 -139
  165. package/field/lib/field.js.map +1 -1
  166. package/field/lib/filled-field.d.ts +5 -16
  167. package/field/lib/filled-field.js +8 -70
  168. package/field/lib/filled-field.js.map +1 -1
  169. package/field/lib/filled-styles.css.js +1 -1
  170. package/field/lib/filled-styles.css.js.map +1 -1
  171. package/field/lib/outlined-field.d.ts +4 -10
  172. package/field/lib/outlined-field.js +13 -33
  173. package/field/lib/outlined-field.js.map +1 -1
  174. package/field/lib/outlined-styles.css.js +1 -1
  175. package/field/lib/outlined-styles.css.js.map +1 -1
  176. package/field/lib/shared-styles.css.js +1 -1
  177. package/field/lib/shared-styles.css.js.map +1 -1
  178. package/field/outlined-field.d.ts +1 -1
  179. package/field/outlined-field.js +1 -1
  180. package/field/outlined-field.js.map +1 -1
  181. package/focus/focus-ring.js.map +1 -1
  182. package/focus/lib/_focus-ring.scss +7 -13
  183. package/focus/lib/_md-comp-focus-ring.scss +4 -0
  184. package/focus/lib/focus-ring-styles.css.js +1 -1
  185. package/focus/lib/focus-ring-styles.css.js.map +1 -1
  186. package/focus/lib/focus-ring-styles.scss +2 -0
  187. package/focus/lib/focus-ring.js.map +1 -1
  188. package/icon/icon.js.map +1 -1
  189. package/icon/lib/_icon.scss +3 -1
  190. package/icon/lib/_md-comp-icon.scss +1 -2
  191. package/icon/lib/icon-styles.css.js +1 -1
  192. package/icon/lib/icon-styles.css.js.map +1 -1
  193. package/icon/lib/icon-styles.scss +2 -0
  194. package/iconbutton/filled-icon-button-toggle.js.map +1 -1
  195. package/iconbutton/filled-icon-button.js.map +1 -1
  196. package/iconbutton/filled-link-icon-button.js.map +1 -1
  197. package/iconbutton/filled-tonal-icon-button-toggle.js.map +1 -1
  198. package/iconbutton/filled-tonal-icon-button.js.map +1 -1
  199. package/iconbutton/filled-tonal-link-icon-button.js.map +1 -1
  200. package/iconbutton/lib/_filled-icon-button.scss +19 -19
  201. package/iconbutton/lib/_filled-tonal-icon-button.scss +19 -19
  202. package/iconbutton/lib/_outlined-icon-button.scss +20 -16
  203. package/iconbutton/lib/_shared.scss +8 -8
  204. package/iconbutton/lib/_standard-icon-button.scss +21 -18
  205. package/iconbutton/lib/filled-styles.css.js +1 -1
  206. package/iconbutton/lib/filled-styles.css.js.map +1 -1
  207. package/iconbutton/lib/filled-styles.scss +2 -0
  208. package/iconbutton/lib/filled-tonal-styles.css.js +1 -1
  209. package/iconbutton/lib/filled-tonal-styles.css.js.map +1 -1
  210. package/iconbutton/lib/filled-tonal-styles.scss +2 -0
  211. package/iconbutton/lib/icon-button-toggle.js.map +1 -1
  212. package/iconbutton/lib/icon-button.js.map +1 -1
  213. package/iconbutton/lib/link-icon-button.js.map +1 -1
  214. package/iconbutton/lib/outlined-styles.css.js +1 -1
  215. package/iconbutton/lib/outlined-styles.css.js.map +1 -1
  216. package/iconbutton/lib/outlined-styles.scss +2 -0
  217. package/iconbutton/lib/shared-styles.scss +2 -0
  218. package/iconbutton/lib/standard-styles.css.js +1 -1
  219. package/iconbutton/lib/standard-styles.css.js.map +1 -1
  220. package/iconbutton/lib/standard-styles.scss +2 -0
  221. package/iconbutton/outlined-icon-button-toggle.js.map +1 -1
  222. package/iconbutton/outlined-icon-button.js.map +1 -1
  223. package/iconbutton/outlined-link-icon-button.js.map +1 -1
  224. package/iconbutton/standard-icon-button-toggle.js.map +1 -1
  225. package/iconbutton/standard-icon-button.js.map +1 -1
  226. package/iconbutton/standard-link-icon-button.js.map +1 -1
  227. package/list/lib/_list.scss +25 -11
  228. package/list/lib/list-styles.scss +2 -0
  229. package/list/lib/list.js +3 -1
  230. package/list/lib/list.js.map +1 -1
  231. package/list/lib/listitem/_list-item.scss +320 -128
  232. package/list/lib/listitem/list-item-styles.css.js +1 -1
  233. package/list/lib/listitem/list-item-styles.css.js.map +1 -1
  234. package/list/lib/listitem/list-item-styles.scss +2 -0
  235. package/list/lib/listitem/list-item.d.ts +8 -7
  236. package/list/lib/listitem/list-item.js +25 -27
  237. package/list/lib/listitem/list-item.js.map +1 -1
  238. package/list/lib/listitemlink/list-item-link.js.map +1 -1
  239. package/list/list-item-link.d.ts +18 -0
  240. package/list/list-item-link.js +19 -2
  241. package/list/list-item-link.js.map +1 -1
  242. package/list/list-item.d.ts +19 -0
  243. package/list/list-item.js +20 -2
  244. package/list/list-item.js.map +1 -1
  245. package/list/list.js.map +1 -1
  246. package/menu/lib/_menu.scss +32 -8
  247. package/menu/lib/menu-styles.css.js +1 -1
  248. package/menu/lib/menu-styles.css.js.map +1 -1
  249. package/menu/lib/menu-styles.scss +2 -0
  250. package/menu/lib/menu.d.ts +1 -1
  251. package/menu/lib/menu.js +8 -7
  252. package/menu/lib/menu.js.map +1 -1
  253. package/menu/lib/menuitem/_menu-item.scss +44 -76
  254. package/menu/lib/menuitem/menu-item-styles.css.js +1 -1
  255. package/menu/lib/menuitem/menu-item-styles.css.js.map +1 -1
  256. package/menu/lib/menuitem/menu-item-styles.scss +2 -0
  257. package/menu/lib/menuitem/menu-item.js.map +1 -1
  258. package/menu/lib/menuitemlink/menu-item-link.js.map +1 -1
  259. package/menu/lib/shared.d.ts +3 -3
  260. package/menu/lib/submenuitem/sub-menu-item.d.ts +0 -1
  261. package/menu/lib/submenuitem/sub-menu-item.js +0 -1
  262. package/menu/lib/submenuitem/sub-menu-item.js.map +1 -1
  263. package/menu/lib/surfacePositionController.d.ts +1 -1
  264. package/menu/lib/typeaheadController.d.ts +1 -1
  265. package/menu/menu-item-link.js +1 -2
  266. package/menu/menu-item-link.js.map +1 -1
  267. package/menu/menu-item.js +2 -3
  268. package/menu/menu-item.js.map +1 -1
  269. package/menu/menu.js.map +1 -1
  270. package/menu/sub-menu-item.js +1 -2
  271. package/menu/sub-menu-item.js.map +1 -1
  272. package/menusurface/lib/_md-comp-menu-surface.scss +5 -1
  273. package/menusurface/lib/_menu-surface.scss +4 -0
  274. package/menusurface/lib/foundation.js +31 -31
  275. package/menusurface/lib/foundation.js.map +1 -1
  276. package/menusurface/lib/menu-surface-styles.scss +2 -0
  277. package/menusurface/lib/menu-surface.d.ts +2 -2
  278. package/menusurface/lib/menu-surface.js.map +1 -1
  279. package/menusurface/menu-surface.js.map +1 -1
  280. package/navigationbar/lib/_navigation-bar.scss +2 -0
  281. package/navigationbar/lib/constants.d.ts +1 -1
  282. package/navigationbar/lib/navigation-bar-styles.scss +2 -0
  283. package/navigationbar/lib/navigation-bar.js.map +1 -1
  284. package/navigationbar/navigation-bar.js.map +1 -1
  285. package/navigationdrawer/lib/_navigation-drawer-modal.scss +11 -2
  286. package/navigationdrawer/lib/_navigation-drawer.scss +10 -5
  287. package/navigationdrawer/lib/_shared.scss +4 -8
  288. package/navigationdrawer/lib/navigation-drawer-modal-styles.css.js +1 -1
  289. package/navigationdrawer/lib/navigation-drawer-modal-styles.css.js.map +1 -1
  290. package/navigationdrawer/lib/navigation-drawer-modal-styles.scss +2 -0
  291. package/navigationdrawer/lib/navigation-drawer-modal.js.map +1 -1
  292. package/navigationdrawer/lib/navigation-drawer-styles.css.js +1 -1
  293. package/navigationdrawer/lib/navigation-drawer-styles.css.js.map +1 -1
  294. package/navigationdrawer/lib/navigation-drawer-styles.scss +2 -0
  295. package/navigationdrawer/lib/navigation-drawer.js.map +1 -1
  296. package/navigationdrawer/lib/shared-styles.scss +2 -0
  297. package/navigationdrawer/navigation-drawer-modal.js.map +1 -1
  298. package/navigationdrawer/navigation-drawer.js.map +1 -1
  299. package/navigationtab/lib/_navigation-tab.scss +26 -22
  300. package/navigationtab/lib/navigation-tab-styles.css.js +1 -1
  301. package/navigationtab/lib/navigation-tab-styles.css.js.map +1 -1
  302. package/navigationtab/lib/navigation-tab-styles.scss +2 -0
  303. package/navigationtab/lib/navigation-tab.js +4 -4
  304. package/navigationtab/lib/navigation-tab.js.map +1 -1
  305. package/navigationtab/navigation-tab.js.map +1 -1
  306. package/package.json +2 -2
  307. package/radio/lib/_radio.scss +16 -14
  308. package/radio/lib/forced-colors-styles.scss +2 -0
  309. package/radio/lib/radio-styles.css.js +1 -1
  310. package/radio/lib/radio-styles.css.js.map +1 -1
  311. package/radio/lib/radio-styles.scss +2 -0
  312. package/radio/lib/radio.js +21 -21
  313. package/radio/lib/radio.js.map +1 -1
  314. package/radio/radio.js.map +1 -1
  315. package/ripple/directive.d.ts +1 -33
  316. package/ripple/directive.js +7 -194
  317. package/ripple/directive.js.map +1 -1
  318. package/ripple/lib/_md-comp-ripple.scss +20 -19
  319. package/ripple/lib/_ripple.scss +20 -20
  320. package/ripple/lib/ripple-styles.css.js +1 -1
  321. package/ripple/lib/ripple-styles.css.js.map +1 -1
  322. package/ripple/lib/ripple-styles.scss +2 -0
  323. package/ripple/lib/ripple.d.ts +50 -48
  324. package/ripple/lib/ripple.js +214 -76
  325. package/ripple/lib/ripple.js.map +1 -1
  326. package/ripple/ripple.d.ts +9 -1
  327. package/ripple/ripple.js +9 -1
  328. package/ripple/ripple.js.map +1 -1
  329. package/sass/_assert.scss +2 -0
  330. package/sass/_color-scheme.scss +4 -0
  331. package/sass/_color.scss +4 -0
  332. package/sass/_elevation.scss +4 -0
  333. package/sass/_feature-flags.scss +2 -0
  334. package/sass/_map-ext.scss +2 -0
  335. package/sass/_resolvers.scss +4 -4
  336. package/sass/_shape.scss +75 -27
  337. package/sass/_string-ext.scss +44 -0
  338. package/sass/_theme.scss +4 -0
  339. package/sass/_typography.scss +18 -93
  340. package/sass/_var.scss +4 -0
  341. package/segmentedbutton/lib/_outlined-segmented-button.scss +4 -0
  342. package/segmentedbutton/lib/_shared.scss +18 -22
  343. package/segmentedbutton/lib/outlined-styles.css.js +1 -1
  344. package/segmentedbutton/lib/outlined-styles.css.js.map +1 -1
  345. package/segmentedbutton/lib/outlined-styles.scss +2 -0
  346. package/segmentedbutton/lib/segmented-button.js +4 -4
  347. package/segmentedbutton/lib/segmented-button.js.map +1 -1
  348. package/segmentedbutton/lib/shared-styles.css.js +1 -1
  349. package/segmentedbutton/lib/shared-styles.css.js.map +1 -1
  350. package/segmentedbutton/lib/shared-styles.scss +2 -0
  351. package/segmentedbutton/outlined-segmented-button.js.map +1 -1
  352. package/segmentedbuttonset/lib/_outlined-segmented-button-set.scss +9 -5
  353. package/segmentedbuttonset/lib/_shared.scss +0 -13
  354. package/segmentedbuttonset/lib/outlined-styles.css.js +1 -1
  355. package/segmentedbuttonset/lib/outlined-styles.css.js.map +1 -1
  356. package/segmentedbuttonset/lib/outlined-styles.scss +2 -0
  357. package/segmentedbuttonset/lib/segmented-button-set.js.map +1 -1
  358. package/segmentedbuttonset/lib/shared-styles.scss +2 -0
  359. package/segmentedbuttonset/outlined-segmented-button-set.js.map +1 -1
  360. package/{list/lib/listitem/list-item-private-styles.scss → slider/_slider.scss} +1 -3
  361. package/slider/harness.d.ts +20 -0
  362. package/slider/harness.js +63 -0
  363. package/slider/harness.js.map +1 -0
  364. package/slider/lib/_slider.scss +503 -0
  365. package/slider/lib/_tokens.scss +66 -0
  366. package/slider/lib/forced-colors-styles.css.js +9 -0
  367. package/slider/lib/forced-colors-styles.css.js.map +1 -0
  368. package/slider/lib/forced-colors-styles.scss +53 -0
  369. package/slider/lib/slider-styles.css.js +9 -0
  370. package/slider/lib/slider-styles.css.js.map +1 -0
  371. package/{menu/lib/menuitem/menu-item-private-styles.scss → slider/lib/slider-styles.scss} +2 -2
  372. package/slider/lib/slider.d.ts +158 -0
  373. package/slider/lib/slider.js +575 -0
  374. package/slider/lib/slider.js.map +1 -0
  375. package/slider/slider.d.ts +28 -0
  376. package/slider/slider.js +32 -0
  377. package/slider/slider.js.map +1 -0
  378. package/switch/lib/README.md +55 -0
  379. package/switch/lib/_handle.scss +17 -18
  380. package/switch/lib/_icon.scss +4 -0
  381. package/switch/lib/_switch.scss +11 -18
  382. package/switch/lib/_track.scss +2 -0
  383. package/switch/lib/switch-styles.css.js +1 -1
  384. package/switch/lib/switch-styles.css.js.map +1 -1
  385. package/switch/lib/switch-styles.scss +2 -0
  386. package/switch/lib/switch.js +9 -9
  387. package/switch/lib/switch.js.map +1 -1
  388. package/switch/switch.js.map +1 -1
  389. package/textfield/filled-text-field.d.ts +1 -1
  390. package/textfield/filled-text-field.js +1 -2
  391. package/textfield/filled-text-field.js.map +1 -1
  392. package/textfield/harness.js +1 -1
  393. package/textfield/harness.js.map +1 -1
  394. package/textfield/lib/_filled-text-field.scss +116 -110
  395. package/textfield/lib/_icon.scss +14 -73
  396. package/textfield/lib/_input.scss +15 -36
  397. package/textfield/lib/_outlined-text-field.scss +107 -103
  398. package/textfield/lib/_shared.scss +10 -29
  399. package/textfield/lib/filled-forced-colors-styles.scss +2 -0
  400. package/textfield/lib/filled-styles.css.js +1 -1
  401. package/textfield/lib/filled-styles.css.js.map +1 -1
  402. package/textfield/lib/filled-styles.scss +2 -0
  403. package/textfield/lib/filled-text-field.d.ts +6 -5
  404. package/textfield/lib/filled-text-field.js +8 -7
  405. package/textfield/lib/filled-text-field.js.map +1 -1
  406. package/textfield/lib/outlined-forced-colors-styles.scss +2 -0
  407. package/textfield/lib/outlined-styles.css.js +1 -1
  408. package/textfield/lib/outlined-styles.css.js.map +1 -1
  409. package/textfield/lib/outlined-styles.scss +2 -0
  410. package/textfield/lib/outlined-text-field.d.ts +6 -5
  411. package/textfield/lib/outlined-text-field.js +8 -7
  412. package/textfield/lib/outlined-text-field.js.map +1 -1
  413. package/textfield/lib/shared-styles.css.js +1 -1
  414. package/textfield/lib/shared-styles.css.js.map +1 -1
  415. package/textfield/lib/shared-styles.scss +2 -0
  416. package/textfield/lib/text-field.d.ts +40 -88
  417. package/textfield/lib/text-field.js +194 -270
  418. package/textfield/lib/text-field.js.map +1 -1
  419. package/textfield/outlined-text-field.d.ts +1 -1
  420. package/textfield/outlined-text-field.js +1 -2
  421. package/textfield/outlined-text-field.js.map +1 -1
  422. package/tokens/_index.scss +1 -1
  423. package/tokens/{v0_152 → v0_160}/_md-comp-assist-chip.scss +1 -1
  424. package/tokens/{v0_152 → v0_160}/_md-comp-badge.scss +1 -1
  425. package/tokens/{v0_152 → v0_160}/_md-comp-banner.scss +1 -1
  426. package/tokens/{v0_152 → v0_160}/_md-comp-bottom-app-bar.scss +1 -1
  427. package/tokens/{v0_152 → v0_160}/_md-comp-carousel-item.scss +1 -1
  428. package/tokens/{v0_152 → v0_160}/_md-comp-checkbox.scss +4 -15
  429. package/tokens/{v0_152 → v0_160}/_md-comp-circular-progress-indicator.scss +1 -1
  430. package/tokens/{v0_152 → v0_160}/_md-comp-data-table.scss +1 -3
  431. package/tokens/{v0_152 → v0_160}/_md-comp-date-input-modal.scss +10 -10
  432. package/tokens/{v0_152 → v0_160}/_md-comp-date-picker-docked.scss +23 -23
  433. package/tokens/{v0_152 → v0_160}/_md-comp-date-picker-modal.scss +34 -34
  434. package/tokens/{v0_152 → v0_160}/_md-comp-dialog.scss +1 -1
  435. package/tokens/{v0_152 → v0_160}/_md-comp-divider.scss +1 -1
  436. package/tokens/{v0_152 → v0_160}/_md-comp-elevated-button.scss +1 -1
  437. package/tokens/{v0_152 → v0_160}/_md-comp-elevated-card.scss +1 -1
  438. package/tokens/{v0_152 → v0_160}/_md-comp-extended-fab-branded.scss +1 -1
  439. package/tokens/{v0_152 → v0_160}/_md-comp-extended-fab-primary.scss +1 -1
  440. package/tokens/{v0_152 → v0_160}/_md-comp-extended-fab-secondary.scss +1 -1
  441. package/tokens/{v0_152 → v0_160}/_md-comp-extended-fab-surface.scss +1 -1
  442. package/tokens/{v0_152 → v0_160}/_md-comp-extended-fab-tertiary.scss +1 -1
  443. package/tokens/{v0_152 → v0_160}/_md-comp-fab-branded-large.scss +1 -1
  444. package/tokens/{v0_152 → v0_160}/_md-comp-fab-branded.scss +1 -1
  445. package/tokens/{v0_152 → v0_160}/_md-comp-fab-primary-large.scss +1 -1
  446. package/tokens/{v0_152 → v0_160}/_md-comp-fab-primary-small.scss +1 -1
  447. package/tokens/{v0_152 → v0_160}/_md-comp-fab-primary.scss +1 -1
  448. package/tokens/{v0_152 → v0_160}/_md-comp-fab-secondary-large.scss +1 -1
  449. package/tokens/{v0_152 → v0_160}/_md-comp-fab-secondary-small.scss +1 -1
  450. package/tokens/{v0_152 → v0_160}/_md-comp-fab-secondary.scss +1 -1
  451. package/tokens/{v0_152 → v0_160}/_md-comp-fab-surface-large.scss +1 -1
  452. package/tokens/{v0_152 → v0_160}/_md-comp-fab-surface-small.scss +1 -1
  453. package/tokens/{v0_152 → v0_160}/_md-comp-fab-surface.scss +1 -1
  454. package/tokens/{v0_152 → v0_160}/_md-comp-fab-tertiary-large.scss +1 -1
  455. package/tokens/{v0_152 → v0_160}/_md-comp-fab-tertiary-small.scss +1 -1
  456. package/tokens/{v0_152 → v0_160}/_md-comp-fab-tertiary.scss +1 -1
  457. package/tokens/{v0_152 → v0_160}/_md-comp-filled-autocomplete.scss +1 -1
  458. package/tokens/{v0_152 → v0_160}/_md-comp-filled-button.scss +1 -1
  459. package/tokens/{v0_152 → v0_160}/_md-comp-filled-card.scss +1 -1
  460. package/tokens/{v0_152 → v0_160}/_md-comp-filled-icon-button.scss +1 -1
  461. package/tokens/{v0_152 → v0_160}/_md-comp-filled-menu-button.scss +1 -1
  462. package/tokens/{v0_152 → v0_160}/_md-comp-filled-select.scss +1 -1
  463. package/tokens/{v0_152 → v0_160}/_md-comp-filled-text-field.scss +1 -1
  464. package/tokens/{v0_152 → v0_160}/_md-comp-filled-tonal-button.scss +1 -1
  465. package/tokens/{v0_152 → v0_160}/_md-comp-filled-tonal-icon-button.scss +1 -1
  466. package/tokens/{v0_152 → v0_160}/_md-comp-filter-chip.scss +1 -1
  467. package/tokens/{v0_152 → v0_160}/_md-comp-full-screen-dialog.scss +1 -1
  468. package/tokens/{v0_152 → v0_160}/_md-comp-icon-button.scss +1 -1
  469. package/tokens/{v0_152 → v0_160}/_md-comp-input-chip.scss +1 -1
  470. package/tokens/{v0_152 → v0_160}/_md-comp-linear-progress-indicator.scss +1 -1
  471. package/tokens/{v0_152 → v0_160}/_md-comp-list.scss +1 -1
  472. package/tokens/{v0_152 → v0_160}/_md-comp-menu.scss +1 -1
  473. package/tokens/{v0_152 → v0_160}/_md-comp-navigation-bar.scss +1 -1
  474. package/tokens/{v0_152 → v0_160}/_md-comp-navigation-drawer.scss +1 -1
  475. package/tokens/{v0_152 → v0_160}/_md-comp-navigation-rail.scss +1 -1
  476. package/tokens/{v0_152 → v0_160}/_md-comp-outlined-autocomplete.scss +1 -1
  477. package/tokens/{v0_152 → v0_160}/_md-comp-outlined-button.scss +1 -1
  478. package/tokens/{v0_152 → v0_160}/_md-comp-outlined-card.scss +1 -1
  479. package/tokens/{v0_152 → v0_160}/_md-comp-outlined-icon-button.scss +1 -1
  480. package/tokens/{v0_152 → v0_160}/_md-comp-outlined-menu-button.scss +1 -1
  481. package/tokens/{v0_152 → v0_160}/_md-comp-outlined-segmented-button.scss +1 -1
  482. package/tokens/{v0_152 → v0_160}/_md-comp-outlined-select.scss +1 -1
  483. package/tokens/{v0_152 → v0_160}/_md-comp-outlined-text-field.scss +1 -1
  484. package/tokens/{v0_152 → v0_160}/_md-comp-plain-tooltip.scss +1 -1
  485. package/tokens/{v0_152 → v0_160}/_md-comp-primary-navigation-tab.scss +1 -3
  486. package/tokens/{v0_152 → v0_160}/_md-comp-radio-button.scss +1 -1
  487. package/tokens/{v0_152 → v0_160}/_md-comp-rich-tooltip.scss +1 -1
  488. package/tokens/{v0_152 → v0_160}/_md-comp-scrim.scss +1 -1
  489. package/tokens/{v0_152 → v0_160}/_md-comp-search-bar.scss +1 -1
  490. package/tokens/{v0_152 → v0_160}/_md-comp-search-view.scss +1 -1
  491. package/tokens/{v0_152 → v0_160}/_md-comp-secondary-navigation-tab.scss +1 -3
  492. package/tokens/{v0_152 → v0_160}/_md-comp-sheet-bottom.scss +1 -1
  493. package/tokens/{v0_152 → v0_160}/_md-comp-sheet-floating.scss +1 -1
  494. package/tokens/{v0_152 → v0_160}/_md-comp-sheet-side.scss +10 -10
  495. package/tokens/{v0_152 → v0_160}/_md-comp-slider.scss +1 -1
  496. package/tokens/{v0_152 → v0_160}/_md-comp-snackbar.scss +1 -1
  497. package/tokens/{v0_152 → v0_160}/_md-comp-standard-menu-button.scss +1 -1
  498. package/tokens/{v0_152 → v0_160}/_md-comp-suggestion-chip.scss +1 -1
  499. package/tokens/{v0_152 → v0_160}/_md-comp-switch.scss +1 -1
  500. package/tokens/{v0_152 → v0_160}/_md-comp-text-button.scss +1 -1
  501. package/tokens/{v0_152 → v0_160}/_md-comp-time-input.scss +1 -1
  502. package/tokens/{v0_152 → v0_160}/_md-comp-time-picker.scss +1 -1
  503. package/tokens/{v0_152 → v0_160}/_md-comp-top-app-bar-large.scss +1 -1
  504. package/tokens/{v0_152 → v0_160}/_md-comp-top-app-bar-medium.scss +1 -1
  505. package/tokens/{v0_152 → v0_160}/_md-comp-top-app-bar-small-centered.scss +1 -1
  506. package/tokens/{v0_152 → v0_160}/_md-comp-top-app-bar-small.scss +1 -1
  507. package/tokens/{v0_152 → v0_160}/_md-ref-palette.scss +1 -1
  508. package/tokens/{v0_152 → v0_160}/_md-ref-typeface.scss +1 -1
  509. package/tokens/{v0_152 → v0_160}/_md-sys-color.scss +217 -1
  510. package/tokens/{v0_152 → v0_160}/_md-sys-elevation.scss +1 -1
  511. package/tokens/{v0_152 → v0_160}/_md-sys-motion.scss +1 -1
  512. package/tokens/{v0_152 → v0_160}/_md-sys-shape.scss +1 -1
  513. package/tokens/{v0_152 → v0_160}/_md-sys-state.scss +1 -1
  514. package/tokens/{v0_152 → v0_160}/_md-sys-typescale.scss +1 -1
  515. package/tokens/v0_161/_index.scss +107 -0
  516. package/tokens/v0_161/_md-comp-assist-chip.scss +109 -0
  517. package/tokens/v0_161/_md-comp-badge.scss +58 -0
  518. package/tokens/v0_161/_md-comp-banner.scss +75 -0
  519. package/tokens/v0_161/_md-comp-bottom-app-bar.scss +35 -0
  520. package/tokens/v0_161/_md-comp-carousel-item.scss +65 -0
  521. package/tokens/v0_161/_md-comp-checkbox.scss +126 -0
  522. package/tokens/v0_161/_md-comp-circular-progress-indicator.scss +39 -0
  523. package/tokens/v0_161/_md-comp-data-table.scss +96 -0
  524. package/tokens/v0_161/_md-comp-date-input-modal.scss +89 -0
  525. package/tokens/v0_161/_md-comp-date-picker-docked.scss +246 -0
  526. package/tokens/v0_161/_md-comp-date-picker-modal.scss +305 -0
  527. package/tokens/v0_161/_md-comp-dialog.scss +123 -0
  528. package/tokens/v0_161/_md-comp-divider.scss +25 -0
  529. package/tokens/v0_161/_md-comp-elevated-button.scss +91 -0
  530. package/tokens/v0_161/_md-comp-elevated-card.scss +59 -0
  531. package/tokens/v0_161/_md-comp-extended-fab-branded.scss +86 -0
  532. package/tokens/v0_161/_md-comp-extended-fab-primary.scss +94 -0
  533. package/tokens/v0_161/_md-comp-extended-fab-secondary.scss +95 -0
  534. package/tokens/v0_161/_md-comp-extended-fab-surface.scss +90 -0
  535. package/tokens/v0_161/_md-comp-extended-fab-tertiary.scss +95 -0
  536. package/tokens/v0_161/_md-comp-fab-branded-large.scss +60 -0
  537. package/tokens/v0_161/_md-comp-fab-branded.scss +60 -0
  538. package/tokens/v0_161/_md-comp-fab-primary-large.scss +65 -0
  539. package/tokens/v0_161/_md-comp-fab-primary-small.scss +65 -0
  540. package/tokens/v0_161/_md-comp-fab-primary.scss +65 -0
  541. package/tokens/v0_161/_md-comp-fab-secondary-large.scss +66 -0
  542. package/tokens/v0_161/_md-comp-fab-secondary-small.scss +66 -0
  543. package/tokens/v0_161/_md-comp-fab-secondary.scss +66 -0
  544. package/tokens/v0_161/_md-comp-fab-surface-large.scss +64 -0
  545. package/tokens/v0_161/_md-comp-fab-surface-small.scss +64 -0
  546. package/tokens/v0_161/_md-comp-fab-surface.scss +64 -0
  547. package/tokens/v0_161/_md-comp-fab-tertiary-large.scss +66 -0
  548. package/tokens/v0_161/_md-comp-fab-tertiary-small.scss +66 -0
  549. package/tokens/v0_161/_md-comp-fab-tertiary.scss +66 -0
  550. package/tokens/v0_161/_md-comp-filled-autocomplete.scss +267 -0
  551. package/tokens/v0_161/_md-comp-filled-button.scss +89 -0
  552. package/tokens/v0_161/_md-comp-filled-card.scss +58 -0
  553. package/tokens/v0_161/_md-comp-filled-icon-button.scss +79 -0
  554. package/tokens/v0_161/_md-comp-filled-menu-button.scss +98 -0
  555. package/tokens/v0_161/_md-comp-filled-select.scss +272 -0
  556. package/tokens/v0_161/_md-comp-filled-text-field.scss +189 -0
  557. package/tokens/v0_161/_md-comp-filled-tonal-button.scss +99 -0
  558. package/tokens/v0_161/_md-comp-filled-tonal-icon-button.scss +86 -0
  559. package/tokens/v0_161/_md-comp-filter-chip.scss +209 -0
  560. package/tokens/v0_161/_md-comp-full-screen-dialog.scss +111 -0
  561. package/tokens/v0_161/_md-comp-icon-button.scss +70 -0
  562. package/tokens/v0_161/_md-comp-input-chip.scss +184 -0
  563. package/tokens/v0_161/_md-comp-linear-progress-indicator.scss +41 -0
  564. package/tokens/v0_161/_md-comp-list.scss +248 -0
  565. package/tokens/v0_161/_md-comp-menu.scss +37 -0
  566. package/tokens/v0_161/_md-comp-navigation-bar.scss +114 -0
  567. package/tokens/v0_161/_md-comp-navigation-drawer.scss +162 -0
  568. package/tokens/v0_161/_md-comp-navigation-rail.scss +131 -0
  569. package/tokens/v0_161/_md-comp-outlined-autocomplete.scss +257 -0
  570. package/tokens/v0_161/_md-comp-outlined-button.scss +84 -0
  571. package/tokens/v0_161/_md-comp-outlined-card.scss +65 -0
  572. package/tokens/v0_161/_md-comp-outlined-icon-button.scss +79 -0
  573. package/tokens/v0_161/_md-comp-outlined-menu-button.scss +94 -0
  574. package/tokens/v0_161/_md-comp-outlined-segmented-button.scss +112 -0
  575. package/tokens/v0_161/_md-comp-outlined-select.scss +262 -0
  576. package/tokens/v0_161/_md-comp-outlined-text-field.scss +171 -0
  577. package/tokens/v0_161/_md-comp-plain-tooltip.scss +55 -0
  578. package/tokens/v0_161/_md-comp-primary-navigation-tab.scss +121 -0
  579. package/tokens/v0_161/_md-comp-radio-button.scss +68 -0
  580. package/tokens/v0_161/_md-comp-rich-tooltip.scss +121 -0
  581. package/tokens/v0_161/_md-comp-scrim.scss +25 -0
  582. package/tokens/v0_161/_md-comp-search-bar.scss +99 -0
  583. package/tokens/v0_161/_md-comp-search-view.scss +93 -0
  584. package/tokens/v0_161/_md-comp-secondary-navigation-tab.scss +84 -0
  585. package/tokens/v0_161/_md-comp-sheet-bottom.scss +45 -0
  586. package/tokens/v0_161/_md-comp-sheet-floating.scss +34 -0
  587. package/tokens/v0_161/_md-comp-sheet-side.scss +91 -0
  588. package/tokens/v0_161/_md-comp-slider.scss +114 -0
  589. package/tokens/v0_161/_md-comp-snackbar.scss +127 -0
  590. package/tokens/v0_161/_md-comp-standard-menu-button.scss +98 -0
  591. package/tokens/v0_161/_md-comp-suggestion-chip.scss +125 -0
  592. package/tokens/v0_161/_md-comp-switch.scss +136 -0
  593. package/tokens/v0_161/_md-comp-text-button.scss +77 -0
  594. package/tokens/v0_161/_md-comp-time-input.scss +218 -0
  595. package/tokens/v0_161/_md-comp-time-picker.scss +264 -0
  596. package/tokens/v0_161/_md-comp-top-app-bar-large.scss +63 -0
  597. package/tokens/v0_161/_md-comp-top-app-bar-medium.scss +63 -0
  598. package/tokens/v0_161/_md-comp-top-app-bar-small-centered.scss +66 -0
  599. package/tokens/v0_161/_md-comp-top-app-bar-small.scss +64 -0
  600. package/tokens/v0_161/_md-ref-palette.scss +107 -0
  601. package/tokens/v0_161/_md-ref-typeface.scss +21 -0
  602. package/tokens/v0_161/_md-sys-color.scss +904 -0
  603. package/tokens/v0_161/_md-sys-elevation.scss +21 -0
  604. package/tokens/v0_161/_md-sys-motion.scss +53 -0
  605. package/tokens/v0_161/_md-sys-shape.scss +30 -0
  606. package/tokens/v0_161/_md-sys-state.scss +19 -0
  607. package/tokens/v0_161/_md-sys-typescale.scss +284 -0
  608. package/tokens/v0_161/index.test.css.js +9 -0
  609. package/tokens/v0_161/index.test.css.js.map +1 -0
  610. package/tokens/v0_161/index.test.scss +584 -0
  611. package/tokens/v0_161/lib.test.css.js +9 -0
  612. package/tokens/v0_161/lib.test.css.js.map +1 -0
  613. package/tokens/v0_161/lib.test.scss +663 -0
  614. package/controller/foundation.d.ts +0 -24
  615. package/controller/foundation.js +0 -18
  616. package/controller/foundation.js.map +0 -1
  617. package/controller/observer-foundation.d.ts +0 -25
  618. package/controller/observer-foundation.js +0 -37
  619. package/controller/observer-foundation.js.map +0 -1
  620. package/controller/observer.d.ts +0 -52
  621. package/controller/observer.js +0 -149
  622. package/controller/observer.js.map +0 -1
  623. package/decorators/bound.d.ts +0 -40
  624. package/decorators/bound.js +0 -49
  625. package/decorators/bound.js.map +0 -1
  626. package/list/lib/avatar/_list-item-avatar.scss +0 -38
  627. package/list/lib/avatar/list-item-avatar-styles.css.js +0 -9
  628. package/list/lib/avatar/list-item-avatar-styles.css.js.map +0 -1
  629. package/list/lib/avatar/list-item-avatar-styles.scss +0 -8
  630. package/list/lib/avatar/list-item-avatar.d.ts +0 -21
  631. package/list/lib/avatar/list-item-avatar.js +0 -48
  632. package/list/lib/avatar/list-item-avatar.js.map +0 -1
  633. package/list/lib/icon/_list-item-icon.scss +0 -67
  634. package/list/lib/icon/list-item-icon-styles.css.js +0 -9
  635. package/list/lib/icon/list-item-icon-styles.css.js.map +0 -1
  636. package/list/lib/icon/list-item-icon-styles.scss +0 -8
  637. package/list/lib/icon/list-item-icon.d.ts +0 -9
  638. package/list/lib/icon/list-item-icon.js +0 -15
  639. package/list/lib/icon/list-item-icon.js.map +0 -1
  640. package/list/lib/image/_list-item-image.scss +0 -59
  641. package/list/lib/image/list-item-image-styles.css.js +0 -9
  642. package/list/lib/image/list-item-image-styles.css.js.map +0 -1
  643. package/list/lib/image/list-item-image-styles.scss +0 -8
  644. package/list/lib/image/list-item-image.d.ts +0 -21
  645. package/list/lib/image/list-item-image.js +0 -48
  646. package/list/lib/image/list-item-image.js.map +0 -1
  647. package/list/lib/listitem/list-item-private-styles.css.js +0 -9
  648. package/list/lib/listitem/list-item-private-styles.css.js.map +0 -1
  649. package/list/lib/video/_list-item-video.scss +0 -67
  650. package/list/lib/video/list-item-video-styles.css.d.ts +0 -1
  651. package/list/lib/video/list-item-video-styles.css.js +0 -9
  652. package/list/lib/video/list-item-video-styles.css.js.map +0 -1
  653. package/list/lib/video/list-item-video-styles.scss +0 -8
  654. package/list/lib/video/list-item-video.d.ts +0 -53
  655. package/list/lib/video/list-item-video.js +0 -115
  656. package/list/lib/video/list-item-video.js.map +0 -1
  657. package/list/list-item-avatar.d.ts +0 -20
  658. package/list/list-item-avatar.js +0 -23
  659. package/list/list-item-avatar.js.map +0 -1
  660. package/list/list-item-icon.d.ts +0 -20
  661. package/list/list-item-icon.js +0 -23
  662. package/list/list-item-icon.js.map +0 -1
  663. package/list/list-item-image.d.ts +0 -20
  664. package/list/list-item-image.js +0 -23
  665. package/list/list-item-image.js.map +0 -1
  666. package/list/list-item-video.d.ts +0 -20
  667. package/list/list-item-video.js +0 -23
  668. package/list/list-item-video.js.map +0 -1
  669. package/menu/lib/menuitem/menu-item-private-styles.css.d.ts +0 -1
  670. package/menu/lib/menuitem/menu-item-private-styles.css.js +0 -9
  671. package/menu/lib/menuitem/menu-item-private-styles.css.js.map +0 -1
  672. /package/{list/lib/avatar/list-item-avatar-styles.css.d.ts → slider/lib/forced-colors-styles.css.d.ts} +0 -0
  673. /package/{list/lib/icon/list-item-icon-styles.css.d.ts → slider/lib/slider-styles.css.d.ts} +0 -0
  674. /package/tokens/{v0_152 → v0_160}/_index.scss +0 -0
  675. /package/tokens/{v0_152 → v0_160}/index.test.css.d.ts +0 -0
  676. /package/tokens/{v0_152 → v0_160}/index.test.css.js +0 -0
  677. /package/tokens/{v0_152 → v0_160}/index.test.css.js.map +0 -0
  678. /package/tokens/{v0_152 → v0_160}/index.test.scss +0 -0
  679. /package/tokens/{v0_152 → v0_160}/lib.test.css.d.ts +0 -0
  680. /package/tokens/{v0_152 → v0_160}/lib.test.css.js +0 -0
  681. /package/tokens/{v0_152 → v0_160}/lib.test.css.js.map +0 -0
  682. /package/tokens/{v0_152 → v0_160}/lib.test.scss +0 -0
  683. /package/{list/lib/image/list-item-image-styles.css.d.ts → tokens/v0_161/index.test.css.d.ts} +0 -0
  684. /package/{list/lib/listitem/list-item-private-styles.css.d.ts → tokens/v0_161/lib.test.css.d.ts} +0 -0
package/segmentedbutton/lib/_shared.scss CHANGED
@@ -6,13 +6,16 @@
6
6
  // stylelint-disable selector-class-pattern --
7
7
  // Selector '.md3-*' should only be used in this project.
8
8
 
9
+ // go/keep-sorted start
9
10
  @use 'sass:map';
11
+ // go/keep-sorted end
12
+ // go/keep-sorted start
10
13
  @use '../../motion/animation';
11
14
  @use '../../ripple/ripple';
12
15
  @use '../../sass/color';
13
- @use '../../sass/resolvers';
14
16
  @use '../../sass/touch-target';
15
17
  @use '../../sass/typography';
18
+ // go/keep-sorted end
16
19
 
17
20
  @mixin styles() {
18
21
  @keyframes md3-segmented-button-checkmark-selection-draw-in {
@@ -103,10 +106,7 @@
103
106
  }
104
107
 
105
108
  .md3-segmented-button__label-text {
106
- font-family: var(--_label-text-font);
107
- font-size: var(--_label-text-size);
108
- letter-spacing: var(--_label-text-tracking);
109
- font-weight: var(--_label-text-weight);
109
+ font: var(--_label-text-type);
110
110
  }
111
111
 
112
112
  &.md3-segmented-button--selected:enabled {
@@ -195,12 +195,12 @@
195
195
 
196
196
  @include ripple.theme(
197
197
  (
198
- hover-state-layer-color: var(--_unselected-hover-state-layer-color),
199
- hover-state-layer-opacity: var(--_hover-state-layer-opacity),
200
- focus-state-layer-color: var(--_unselected-focus-state-layer-color),
201
- focus-state-layer-opacity: var(--_focus-state-layer-opacity),
202
- pressed-state-layer-color: var(--_unselected-pressed-state-layer-color),
203
- pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
198
+ hover-color: var(--_unselected-hover-state-layer-color),
199
+ hover-opacity: var(--_hover-state-layer-opacity),
200
+ focus-color: var(--_unselected-focus-state-layer-color),
201
+ focus-opacity: var(--_focus-state-layer-opacity),
202
+ pressed-color: var(--_unselected-pressed-state-layer-color),
203
+ pressed-opacity: var(--_pressed-state-layer-opacity),
204
204
  )
205
205
  );
206
206
  }
@@ -242,12 +242,12 @@
242
242
 
243
243
  @include ripple.theme(
244
244
  (
245
- hover-state-layer-color: var(--_selected-hover-state-layer-color),
246
- hover-state-layer-opacity: var(--_hover-state-layer-opacity),
247
- focus-state-layer-color: var(--_selected-focus-state-layer-color),
248
- focus-state-layer-opacity: var(--_focus-state-layer-opacity),
249
- pressed-state-layer-color: var(--_selected-pressed-state-layer-color),
250
- pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
245
+ hover-color: var(--_selected-hover-state-layer-color),
246
+ hover-opacity: var(--_hover-state-layer-opacity),
247
+ focus-color: var(--_selected-focus-state-layer-color),
248
+ focus-opacity: var(--_focus-state-layer-opacity),
249
+ pressed-color: var(--_selected-pressed-state-layer-color),
250
+ pressed-opacity: var(--_pressed-state-layer-opacity),
251
251
  )
252
252
  );
253
253
  }
@@ -357,11 +357,7 @@
357
357
  }
358
358
 
359
359
  @function resolve-tokens($tokens) {
360
- $tokens: typography.resolve-theme(
361
- $tokens,
362
- map.get(resolvers.$material, 'typography'),
363
- 'label-text'
364
- );
360
+ $tokens: typography.resolve-tokens($tokens, 'label-text');
365
361
  $tokens: _flatten-disabled-colors($tokens);
366
362
  @return $tokens;
367
363
  }
package/segmentedbutton/lib/outlined-styles.css.js CHANGED
@@ -4,6 +4,6 @@
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
6
  import { css } from 'lit';
7
- export const styles = css `:host{--_container-height: var(--md-segmented-button-container-height, 40px);--_disabled-icon-color: var(--md-segmented-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38));--_disabled-label-text-color: var(--md-segmented-button-disabled-label-text-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38));--_disabled-outline-color: var(--md-segmented-button-disabled-outline-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12));--_focus-state-layer-opacity: var(--md-segmented-button-focus-state-layer-opacity, 0.12);--_hover-state-layer-opacity: var(--md-segmented-button-hover-state-layer-opacity, 0.08);--_label-text-font: var(--md-segmented-button-label-text-font, Roboto);--_label-text-line-height: var(--md-segmented-button-label-text-line-height, 1.25rem);--_label-text-size: var(--md-segmented-button-label-text-size, 0.875rem);--_label-text-tracking: var(--md-segmented-button-label-text-tracking, 0.006rem);--_label-text-type: var(--md-segmented-button-label-text-type, 500 0.875rem / 1.25rem Roboto);--_label-text-weight: var(--md-segmented-button-label-text-weight, 500);--_outline-color: var(--md-segmented-button-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-segmented-button-outline-width, 1px);--_pressed-state-layer-opacity: var(--md-segmented-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-segmented-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-focus-icon-color: var(--md-segmented-button-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-label-text-color: var(--md-segmented-button-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-state-layer-color: var(--md-segmented-button-selected-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-icon-color: var(--md-segmented-button-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-segmented-button-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-segmented-button-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-label-text-color: var(--md-segmented-button-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-icon-color: var(--md-segmented-button-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-label-text-color: var(--md-segmented-button-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-segmented-button-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-with-icon-icon-color: var(--md-segmented-button-selected-with-icon-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_shape: var(--md-segmented-button-shape, 9999px);--_unselected-focus-icon-color: var(--md-segmented-button-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-focus-label-text-color: var(--md-segmented-button-unselected-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-focus-state-layer-color: var(--md-segmented-button-unselected-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-icon-color: var(--md-segmented-button-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-label-text-color: var(--md-segmented-button-unselected-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-state-layer-color: var(--md-segmented-button-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-label-text-color: var(--md-segmented-button-unselected-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-icon-color: var(--md-segmented-button-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-label-text-color: var(--md-segmented-button-unselected-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-state-layer-color: var(--md-segmented-button-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-with-icon-icon-color: var(--md-segmented-button-unselected-with-icon-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_with-icon-icon-size: var(--md-segmented-button-with-icon-icon-size, 18px);--_spacing-leading: var(--md-segmented-button-spacing-leading, 12px);--_spacing-trailing: var(--md-segmented-button-spacing-trailing, 12px)}.md3-segmented-button__outline{border-radius:inherit;border-style:solid;border-width:1px;inset:0px -0.5px;pointer-events:none;position:absolute}/*# sourceMappingURL=outlined-styles.css.map */
7
+ export const styles = css `:host{--_container-height: var(--md-segmented-button-container-height, 40px);--_disabled-icon-color: var(--md-segmented-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38));--_disabled-label-text-color: var(--md-segmented-button-disabled-label-text-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38));--_disabled-outline-color: var(--md-segmented-button-disabled-outline-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12));--_focus-state-layer-opacity: var(--md-segmented-button-focus-state-layer-opacity, 0.12);--_hover-state-layer-opacity: var(--md-segmented-button-hover-state-layer-opacity, 0.08);--_label-text-type: var(--md-segmented-button-label-text-type, 500 0.875rem / 1.25rem Roboto);--_outline-color: var(--md-segmented-button-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-segmented-button-outline-width, 1px);--_pressed-state-layer-opacity: var(--md-segmented-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-segmented-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-focus-icon-color: var(--md-segmented-button-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-label-text-color: var(--md-segmented-button-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-state-layer-color: var(--md-segmented-button-selected-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-icon-color: var(--md-segmented-button-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-segmented-button-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-segmented-button-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-label-text-color: var(--md-segmented-button-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-icon-color: var(--md-segmented-button-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-label-text-color: var(--md-segmented-button-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-segmented-button-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-with-icon-icon-color: var(--md-segmented-button-selected-with-icon-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_shape: var(--md-segmented-button-shape, 9999px);--_unselected-focus-icon-color: var(--md-segmented-button-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-focus-label-text-color: var(--md-segmented-button-unselected-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-focus-state-layer-color: var(--md-segmented-button-unselected-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-icon-color: var(--md-segmented-button-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-label-text-color: var(--md-segmented-button-unselected-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-state-layer-color: var(--md-segmented-button-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-label-text-color: var(--md-segmented-button-unselected-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-icon-color: var(--md-segmented-button-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-label-text-color: var(--md-segmented-button-unselected-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-state-layer-color: var(--md-segmented-button-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-with-icon-icon-color: var(--md-segmented-button-unselected-with-icon-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_with-icon-icon-size: var(--md-segmented-button-with-icon-icon-size, 18px);--_spacing-leading: var(--md-segmented-button-spacing-leading, 12px);--_spacing-trailing: var(--md-segmented-button-spacing-trailing, 12px)}.md3-segmented-button__outline{border-radius:inherit;border-style:solid;border-width:1px;inset:0px -0.5px;pointer-events:none;position:absolute}/*# sourceMappingURL=outlined-styles.css.map */
8
8
  `;
9
9
  //# sourceMappingURL=outlined-styles.css.js.map
package/segmentedbutton/lib/outlined-styles.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"outlined-styles.css.js","sourceRoot":"","sources":["outlined-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-height: var(--md-segmented-button-container-height, 40px);--_disabled-icon-color: var(--md-segmented-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38));--_disabled-label-text-color: var(--md-segmented-button-disabled-label-text-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38));--_disabled-outline-color: var(--md-segmented-button-disabled-outline-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12));--_focus-state-layer-opacity: var(--md-segmented-button-focus-state-layer-opacity, 0.12);--_hover-state-layer-opacity: var(--md-segmented-button-hover-state-layer-opacity, 0.08);--_label-text-font: var(--md-segmented-button-label-text-font, Roboto);--_label-text-line-height: var(--md-segmented-button-label-text-line-height, 1.25rem);--_label-text-size: var(--md-segmented-button-label-text-size, 0.875rem);--_label-text-tracking: var(--md-segmented-button-label-text-tracking, 0.006rem);--_label-text-type: var(--md-segmented-button-label-text-type, 500 0.875rem / 1.25rem Roboto);--_label-text-weight: var(--md-segmented-button-label-text-weight, 500);--_outline-color: var(--md-segmented-button-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-segmented-button-outline-width, 1px);--_pressed-state-layer-opacity: var(--md-segmented-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-segmented-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-focus-icon-color: var(--md-segmented-button-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-label-text-color: var(--md-segmented-button-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-state-layer-color: var(--md-segmented-button-selected-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-icon-color: var(--md-segmented-button-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-segmented-button-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-segmented-button-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-label-text-color: var(--md-segmented-button-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-icon-color: var(--md-segmented-button-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-label-text-color: var(--md-segmented-button-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-segmented-button-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-with-icon-icon-color: var(--md-segmented-button-selected-with-icon-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_shape: var(--md-segmented-button-shape, 9999px);--_unselected-focus-icon-color: var(--md-segmented-button-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-focus-label-text-color: var(--md-segmented-button-unselected-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-focus-state-layer-color: var(--md-segmented-button-unselected-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-icon-color: var(--md-segmented-button-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-label-text-color: var(--md-segmented-button-unselected-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-state-layer-color: var(--md-segmented-button-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-label-text-color: var(--md-segmented-button-unselected-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-icon-color: var(--md-segmented-button-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-label-text-color: var(--md-segmented-button-unselected-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-state-layer-color: var(--md-segmented-button-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-with-icon-icon-color: var(--md-segmented-button-unselected-with-icon-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_with-icon-icon-size: var(--md-segmented-button-with-icon-icon-size, 18px);--_spacing-leading: var(--md-segmented-button-spacing-leading, 12px);--_spacing-trailing: var(--md-segmented-button-spacing-trailing, 12px)}.md3-segmented-button__outline{border-radius:inherit;border-style:solid;border-width:1px;inset:0px -0.5px;pointer-events:none;position:absolute}/*# sourceMappingURL=outlined-styles.css.map */\n`;\n "]}
1
+ {"version":3,"file":"outlined-styles.css.js","sourceRoot":"","sources":["outlined-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-height: var(--md-segmented-button-container-height, 40px);--_disabled-icon-color: var(--md-segmented-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38));--_disabled-label-text-color: var(--md-segmented-button-disabled-label-text-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38));--_disabled-outline-color: var(--md-segmented-button-disabled-outline-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12));--_focus-state-layer-opacity: var(--md-segmented-button-focus-state-layer-opacity, 0.12);--_hover-state-layer-opacity: var(--md-segmented-button-hover-state-layer-opacity, 0.08);--_label-text-type: var(--md-segmented-button-label-text-type, 500 0.875rem / 1.25rem Roboto);--_outline-color: var(--md-segmented-button-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-segmented-button-outline-width, 1px);--_pressed-state-layer-opacity: var(--md-segmented-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-segmented-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-focus-icon-color: var(--md-segmented-button-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-label-text-color: var(--md-segmented-button-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-state-layer-color: var(--md-segmented-button-selected-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-icon-color: var(--md-segmented-button-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-segmented-button-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-segmented-button-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-label-text-color: var(--md-segmented-button-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-icon-color: var(--md-segmented-button-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-label-text-color: var(--md-segmented-button-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-segmented-button-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-with-icon-icon-color: var(--md-segmented-button-selected-with-icon-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_shape: var(--md-segmented-button-shape, 9999px);--_unselected-focus-icon-color: var(--md-segmented-button-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-focus-label-text-color: var(--md-segmented-button-unselected-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-focus-state-layer-color: var(--md-segmented-button-unselected-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-icon-color: var(--md-segmented-button-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-label-text-color: var(--md-segmented-button-unselected-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-state-layer-color: var(--md-segmented-button-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-label-text-color: var(--md-segmented-button-unselected-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-icon-color: var(--md-segmented-button-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-label-text-color: var(--md-segmented-button-unselected-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-state-layer-color: var(--md-segmented-button-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-with-icon-icon-color: var(--md-segmented-button-unselected-with-icon-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_with-icon-icon-size: var(--md-segmented-button-with-icon-icon-size, 18px);--_spacing-leading: var(--md-segmented-button-spacing-leading, 12px);--_spacing-trailing: var(--md-segmented-button-spacing-trailing, 12px)}.md3-segmented-button__outline{border-radius:inherit;border-style:solid;border-width:1px;inset:0px -0.5px;pointer-events:none;position:absolute}/*# sourceMappingURL=outlined-styles.css.map */\n`;\n "]}
package/segmentedbutton/lib/outlined-styles.scss CHANGED
@@ -3,6 +3,8 @@
3
3
  // SPDX-License-Identifier: Apache-2.0
4
4
  //
5
5
 
6
+ // go/keep-sorted start
6
7
  @use './outlined-segmented-button';
8
+ // go/keep-sorted end
7
9
 
8
10
  @include outlined-segmented-button.styles;
package/segmentedbutton/lib/segmented-button.js CHANGED
@@ -54,10 +54,10 @@ export class SegmentedButton extends ActionElement {
54
54
  return '';
55
55
  }
56
56
  beginPress({ positionEvent }) {
57
- this.ripple.beginPress(positionEvent);
57
+ // TODO(b/261201805): connect to ripple
58
58
  }
59
59
  endPress(options) {
60
- this.ripple.endPress();
60
+ // TODO(b/261201805): connect to ripple
61
61
  super.endPress(options);
62
62
  if (!options.cancelled) {
63
63
  const event = new Event('segmented-button-interaction', { bubbles: true, composed: true });
@@ -73,11 +73,11 @@ export class SegmentedButton extends ActionElement {
73
73
  super.handlePointerUp(e);
74
74
  }
75
75
  handlePointerEnter(e) {
76
- this.ripple.beginHover(e);
76
+ this.ripple.handlePointerenter(e);
77
77
  }
78
78
  handlePointerLeave(e) {
79
79
  super.handlePointerLeave(e);
80
- this.ripple.endHover();
80
+ this.ripple.handlePointerleave(e);
81
81
  }
82
82
  handleFocus() {
83
83
  this.showFocusRing = shouldShowStrongFocus();
package/segmentedbutton/lib/segmented-button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"segmented-button.js","sourceRoot":"","sources":["segmented-button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/focus-ring.js';\n\nimport {html, PropertyValues, TemplateResult} from 'lit';\nimport {property, query, queryAssignedElements, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\nimport {ActionElement, BeginPressConfig, EndPressConfig} from '../../actionelement/action-element.js';\nimport {ariaProperty} from '../../decorators/aria-property.js';\nimport {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';\nimport {MdRipple} from '../../ripple/ripple.js';\n\n/**\n * SegmentedButton is a web component implementation of the Material Design\n * segmented button component. It is intended **only** for use as a child of a\n * `SementedButtonSet` component. It is **not** intended for use in any other\n * context.\n * @soyCompatible\n */\nexport class SegmentedButton extends ActionElement {\n @property({type: Boolean}) disabled = false;\n @property({type: Boolean}) selected = false;\n @property({type: String}) label = '';\n @property({type: Boolean}) noCheckmark = false;\n @property({type: Boolean}) hasIcon = false;\n\n /** @soyPrefixAttribute */\n @ariaProperty // tslint:disable-line:no-new-decorators\n @property({type: String, attribute: 'aria-label'})\n override ariaLabel!: string;\n\n @state() protected animState: string = '';\n @state() protected showFocusRing = false;\n @queryAssignedElements({slot: 'icon', flatten: true})\n protected iconElement!: HTMLElement[];\n @query('md-ripple') ripple!: MdRipple;\n\n protected override update(props: PropertyValues<SegmentedButton>) {\n this.animState = this.nextAnimationState(props);\n super.update(props);\n // NOTE: This needs to be set *after* calling super.update() to ensure the\n // appropriate CSS classes are applied.\n this.hasIcon = this.iconElement.length > 0;\n }\n\n private nextAnimationState(changedProps: PropertyValues<SegmentedButton>):\n string {\n const prevSelected = changedProps.get('selected');\n // Early exit for first update.\n if (prevSelected === undefined) return '';\n\n const nextSelected = this.selected;\n const nextHasCheckmark = !this.noCheckmark;\n if (!prevSelected && nextSelected && nextHasCheckmark) {\n return 'selecting';\n }\n if (prevSelected && !nextSelected && nextHasCheckmark) {\n return 'deselecting';\n }\n return '';\n }\n\n override beginPress({positionEvent}: BeginPressConfig) {\n this.ripple.beginPress(positionEvent);\n }\n\n override endPress(options: EndPressConfig) {\n this.ripple.endPress();\n super.endPress(options);\n if (!options.cancelled) {\n const event = new Event(\n 'segmented-button-interaction', {bubbles: true, composed: true});\n this.dispatchEvent(event);\n }\n }\n\n override handlePointerDown(e: PointerEvent) {\n super.handlePointerDown(e);\n pointerPress();\n this.showFocusRing = shouldShowStrongFocus();\n }\n\n override handlePointerUp(e: PointerEvent) {\n super.handlePointerUp(e);\n }\n\n protected handlePointerEnter(e: PointerEvent) {\n this.ripple.beginHover(e);\n }\n\n override handlePointerLeave(e: PointerEvent) {\n super.handlePointerLeave(e);\n this.ripple.endHover();\n }\n\n protected handleFocus() {\n this.showFocusRing = shouldShowStrongFocus();\n }\n\n protected handleBlur() {\n this.showFocusRing = false;\n }\n\n /** @soyTemplate */\n override render(): TemplateResult {\n return html`\n <button\n tabindex=\"${this.disabled ? '-1' : '0'}\"\n aria-label=\"${ifDefined(this.ariaLabel)}\"\n aria-pressed=${this.selected}\n ?disabled=${this.disabled}\n @focus=\"${this.handleFocus}\"\n @blur=\"${this.handleBlur}\"\n @pointerdown=\"${this.handlePointerDown}\"\n @pointerup=\"${this.handlePointerUp}\"\n @pointercancel=\"${this.handlePointerCancel}\"\n @pointerleave=\"${this.handlePointerLeave}\"\n @pointerenter=\"${this.handlePointerEnter}\"\n @click=\"${this.handleClick}\"\n @contextmenu=\"${this.handleContextMenu}\"\n class=\"md3-segmented-button ${classMap(this.getRenderClasses())}\">\n ${this.renderFocusRing()}\n ${this.renderRipple()}\n ${this.renderOutline()}\n ${this.renderLeading()}\n ${this.renderLabel()}\n ${this.renderTouchTarget()}\n </button>\n `;\n }\n\n /** @soyTemplate */\n protected getRenderClasses(): ClassInfo {\n return {\n 'md3-segmented-button--selected': this.selected,\n 'md3-segmented-button--unselected': !this.selected,\n 'md3-segmented-button--with-label': this.label !== '',\n 'md3-segmented-button--without-label': this.label === '',\n 'md3-segmented-button--with-icon': this.hasIcon,\n 'md3-segmented-button--with-checkmark': !this.noCheckmark,\n 'md3-segmented-button--without-checkmark': this.noCheckmark,\n 'md3-segmented-button--selecting': this.animState === 'selecting',\n 'md3-segmented-button--deselecting': this.animState === 'deselecting',\n };\n }\n\n /** @soyTemplate */\n protected renderFocusRing(): TemplateResult {\n return html`<md-focus-ring .visible=\"${\n this.showFocusRing}\" class=\"md3-segmented-button__focus-ring\"></md-focus-ring>`;\n }\n\n /** @soyTemplate */\n protected renderRipple(): TemplateResult|string {\n return html`<md-ripple ?disabled=\"${\n this.disabled}\" class=\"md3-segmented-button__ripple\"> </md-ripple>`;\n }\n\n /** @soyTemplate */\n protected renderOutline(): TemplateResult {\n return html``;\n }\n\n /** @soyTemplate */\n protected renderLeading(): TemplateResult {\n return this.label === '' ? this.renderLeadingWithoutLabel() :\n this.renderLeadingWithLabel();\n }\n\n /** @soyTemplate */\n protected renderLeadingWithoutLabel(): TemplateResult {\n return html`\n <span class=\"md3-segmented-button__leading\" aria-hidden=\"true\">\n <span class=\"md3-segmented-button__graphic\">\n <svg class=\"md3-segmented-button__checkmark\" viewBox=\"0 0 24 24\">\n <path class=\"md3-segmented-button__checkmark-path\" fill=\"none\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"></path>\n </svg>\n </span>\n <span class=\"md3-segmented-button__icon\" aria-hidden=\"true\">\n <slot name=\"icon\"></slot>\n </span>\n </span>\n `;\n }\n\n /** @soyTemplate */\n protected renderLeadingWithLabel(): TemplateResult {\n return html`\n <span class=\"md3-segmented-button__leading\" aria-hidden=\"true\">\n <span class=\"md3-segmented-button__graphic\">\n <svg class=\"md3-segmented-button__checkmark\" viewBox=\"0 0 24 24\">\n <path class=\"md3-segmented-button__checkmark-path\" fill=\"none\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"></path>\n </svg>\n <span class=\"md3-segmented-button__icon\" aria-hidden=\"true\">\n <slot name=\"icon\"></slot>\n </span>\n </span>\n </span>\n `;\n }\n\n /** @soyTemplate */\n protected renderLabel(): TemplateResult {\n return html`\n <span class=\"md3-segmented-button__label-text\">${this.label}</span>\n `;\n }\n\n /** @soyTemplate */\n protected renderTouchTarget(): TemplateResult {\n return html`<span class=\"md3-segmented-button__touch\"></span>`;\n }\n}\n"]}
1
+ {"version":3,"file":"segmented-button.js","sourceRoot":"","sources":["segmented-button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/focus-ring.js';\n\nimport {html, PropertyValues, TemplateResult} from 'lit';\nimport {property, query, queryAssignedElements, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\nimport {ActionElement, BeginPressConfig, EndPressConfig} from '../../actionelement/action-element.js';\nimport {ariaProperty} from '../../decorators/aria-property.js';\nimport {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';\nimport {MdRipple} from '../../ripple/ripple.js';\n\n/**\n * SegmentedButton is a web component implementation of the Material Design\n * segmented button component. It is intended **only** for use as a child of a\n * `SementedButtonSet` component. It is **not** intended for use in any other\n * context.\n * @soyCompatible\n */\nexport class SegmentedButton extends ActionElement {\n @property({type: Boolean}) disabled = false;\n @property({type: Boolean}) selected = false;\n @property({type: String}) label = '';\n @property({type: Boolean}) noCheckmark = false;\n @property({type: Boolean}) hasIcon = false;\n\n /** @soyPrefixAttribute */\n @ariaProperty // tslint:disable-line:no-new-decorators\n @property({type: String, attribute: 'aria-label'})\n override ariaLabel!: string;\n\n @state() protected animState: string = '';\n @state() protected showFocusRing = false;\n @queryAssignedElements({slot: 'icon', flatten: true})\n protected iconElement!: HTMLElement[];\n @query('md-ripple') ripple!: MdRipple;\n\n protected override update(props: PropertyValues<SegmentedButton>) {\n this.animState = this.nextAnimationState(props);\n super.update(props);\n // NOTE: This needs to be set *after* calling super.update() to ensure the\n // appropriate CSS classes are applied.\n this.hasIcon = this.iconElement.length > 0;\n }\n\n private nextAnimationState(changedProps: PropertyValues<SegmentedButton>):\n string {\n const prevSelected = changedProps.get('selected');\n // Early exit for first update.\n if (prevSelected === undefined) return '';\n\n const nextSelected = this.selected;\n const nextHasCheckmark = !this.noCheckmark;\n if (!prevSelected && nextSelected && nextHasCheckmark) {\n return 'selecting';\n }\n if (prevSelected && !nextSelected && nextHasCheckmark) {\n return 'deselecting';\n }\n return '';\n }\n\n override beginPress({positionEvent}: BeginPressConfig) {\n // TODO(b/261201805): connect to ripple\n }\n\n override endPress(options: EndPressConfig) {\n // TODO(b/261201805): connect to ripple\n super.endPress(options);\n if (!options.cancelled) {\n const event = new Event(\n 'segmented-button-interaction', {bubbles: true, composed: true});\n this.dispatchEvent(event);\n }\n }\n\n override handlePointerDown(e: PointerEvent) {\n super.handlePointerDown(e);\n pointerPress();\n this.showFocusRing = shouldShowStrongFocus();\n }\n\n override handlePointerUp(e: PointerEvent) {\n super.handlePointerUp(e);\n }\n\n protected handlePointerEnter(e: PointerEvent) {\n this.ripple.handlePointerenter(e);\n }\n\n override handlePointerLeave(e: PointerEvent) {\n super.handlePointerLeave(e);\n this.ripple.handlePointerleave(e);\n }\n\n protected handleFocus() {\n this.showFocusRing = shouldShowStrongFocus();\n }\n\n protected handleBlur() {\n this.showFocusRing = false;\n }\n\n /** @soyTemplate */\n override render(): TemplateResult {\n return html`\n <button\n tabindex=\"${this.disabled ? '-1' : '0'}\"\n aria-label=\"${ifDefined(this.ariaLabel)}\"\n aria-pressed=${this.selected}\n ?disabled=${this.disabled}\n @focus=\"${this.handleFocus}\"\n @blur=\"${this.handleBlur}\"\n @pointerdown=\"${this.handlePointerDown}\"\n @pointerup=\"${this.handlePointerUp}\"\n @pointercancel=\"${this.handlePointerCancel}\"\n @pointerleave=\"${this.handlePointerLeave}\"\n @pointerenter=\"${this.handlePointerEnter}\"\n @click=\"${this.handleClick}\"\n @contextmenu=\"${this.handleContextMenu}\"\n class=\"md3-segmented-button ${classMap(this.getRenderClasses())}\">\n ${this.renderFocusRing()}\n ${this.renderRipple()}\n ${this.renderOutline()}\n ${this.renderLeading()}\n ${this.renderLabel()}\n ${this.renderTouchTarget()}\n </button>\n `;\n }\n\n /** @soyTemplate */\n protected getRenderClasses(): ClassInfo {\n return {\n 'md3-segmented-button--selected': this.selected,\n 'md3-segmented-button--unselected': !this.selected,\n 'md3-segmented-button--with-label': this.label !== '',\n 'md3-segmented-button--without-label': this.label === '',\n 'md3-segmented-button--with-icon': this.hasIcon,\n 'md3-segmented-button--with-checkmark': !this.noCheckmark,\n 'md3-segmented-button--without-checkmark': this.noCheckmark,\n 'md3-segmented-button--selecting': this.animState === 'selecting',\n 'md3-segmented-button--deselecting': this.animState === 'deselecting',\n };\n }\n\n /** @soyTemplate */\n protected renderFocusRing(): TemplateResult {\n return html`<md-focus-ring .visible=\"${\n this.showFocusRing}\" class=\"md3-segmented-button__focus-ring\"></md-focus-ring>`;\n }\n\n /** @soyTemplate */\n protected renderRipple(): TemplateResult|string {\n return html`<md-ripple ?disabled=\"${\n this.disabled}\" class=\"md3-segmented-button__ripple\"> </md-ripple>`;\n }\n\n /** @soyTemplate */\n protected renderOutline(): TemplateResult {\n return html``;\n }\n\n /** @soyTemplate */\n protected renderLeading(): TemplateResult {\n return this.label === '' ? this.renderLeadingWithoutLabel() :\n this.renderLeadingWithLabel();\n }\n\n /** @soyTemplate */\n protected renderLeadingWithoutLabel(): TemplateResult {\n return html`\n <span class=\"md3-segmented-button__leading\" aria-hidden=\"true\">\n <span class=\"md3-segmented-button__graphic\">\n <svg class=\"md3-segmented-button__checkmark\" viewBox=\"0 0 24 24\">\n <path class=\"md3-segmented-button__checkmark-path\" fill=\"none\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"></path>\n </svg>\n </span>\n <span class=\"md3-segmented-button__icon\" aria-hidden=\"true\">\n <slot name=\"icon\"></slot>\n </span>\n </span>\n `;\n }\n\n /** @soyTemplate */\n protected renderLeadingWithLabel(): TemplateResult {\n return html`\n <span class=\"md3-segmented-button__leading\" aria-hidden=\"true\">\n <span class=\"md3-segmented-button__graphic\">\n <svg class=\"md3-segmented-button__checkmark\" viewBox=\"0 0 24 24\">\n <path class=\"md3-segmented-button__checkmark-path\" fill=\"none\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"></path>\n </svg>\n <span class=\"md3-segmented-button__icon\" aria-hidden=\"true\">\n <slot name=\"icon\"></slot>\n </span>\n </span>\n </span>\n `;\n }\n\n /** @soyTemplate */\n protected renderLabel(): TemplateResult {\n return html`\n <span class=\"md3-segmented-button__label-text\">${this.label}</span>\n `;\n }\n\n /** @soyTemplate */\n protected renderTouchTarget(): TemplateResult {\n return html`<span class=\"md3-segmented-button__touch\"></span>`;\n }\n}\n"]}
package/segmentedbutton/lib/shared-styles.css.js CHANGED
@@ -4,6 +4,6 @@
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
6
  import { css } from 'lit';
7
- export const styles = css `@keyframes md3-segmented-button-checkmark-selection-draw-in{from{stroke-dashoffset:29.7833385}to{stroke-dashoffset:0}}@keyframes md3-segmented-button-simple-fade-out{from{opacity:1}to{opacity:0}}@keyframes md3-segmented-button-simple-fade-in{from{opacity:0}to{opacity:1}}:host{display:inline-flex;outline:none}.md3-segmented-button{align-items:center;background:rgba(0,0,0,0);border:none;border-radius:inherit;display:flex;flex:1;justify-content:center;outline:none;position:relative;vertical-align:middle;padding-inline-start:var(--_spacing-leading);padding-inline-end:var(--_spacing-trailing)}.md3-segmented-button .md3-segmented-button__outline{border-color:var(--_outline-color)}.md3-segmented-button:disabled .md3-segmented-button__outline{border-color:var(--_disabled-outline-color)}.md3-segmented-button .md3-segmented-button__graphic,.md3-segmented-button .md3-segmented-button__checkmark,.md3-segmented-button .md3-segmented-button__icon,.md3-segmented-button .md3-segmented-button__icon ::slotted([slot=icon]){height:var(--_with-icon-icon-size);width:var(--_with-icon-icon-size);font-size:var(--_with-icon-icon-size)}.md3-segmented-button.md3-segmented-button--with-icon.md3-segmented-button--with-label .md3-segmented-button__graphic,.md3-segmented-button.md3-segmented-button--selected.md3-segmented-button--with-label.md3-segmented-button--with-checkmark .md3-segmented-button__graphic,.md3-segmented-button.md3-segmented-button--selected.md3-segmented-button--without-label.md3-segmented-button--with-checkmark .md3-segmented-button__graphic{width:calc(var(--_with-icon-icon-size) + 8px)}.md3-segmented-button .md3-segmented-button__label-text{font-family:var(--_label-text-font);font-size:var(--_label-text-size);letter-spacing:var(--_label-text-tracking);font-weight:var(--_label-text-weight)}.md3-segmented-button.md3-segmented-button--selected:enabled .md3-segmented-button__label-text{color:var(--_selected-label-text-color)}.md3-segmented-button.md3-segmented-button--selected:enabled:hover .md3-segmented-button__label-text{color:var(--_selected-hover-label-text-color)}.md3-segmented-button.md3-segmented-button--selected:enabled:focus .md3-segmented-button__label-text{color:var(--_selected-focus-label-text-color)}.md3-segmented-button.md3-segmented-button--selected:enabled:active .md3-segmented-button__label-text{color:var(--_selected-pressed-label-text-color)}.md3-segmented-button.md3-segmented-button--unselected:enabled .md3-segmented-button__label-text{color:var(--_unselected-label-text-color)}.md3-segmented-button.md3-segmented-button--unselected:enabled:hover .md3-segmented-button__label-text{color:var(--_unselected-hover-label-text-color)}.md3-segmented-button.md3-segmented-button--unselected:enabled:focus .md3-segmented-button__label-text{color:var(--_unselected-focus-label-text-color)}.md3-segmented-button.md3-segmented-button--unselected:enabled:active .md3-segmented-button__label-text{color:var(--_unselected-pressed-label-text-color)}.md3-segmented-button:disabled .md3-segmented-button__label-text{color:var(--_disabled-label-text-color)}.md3-segmented-button--unselected{--md-ripple-hover-state-layer-color:var(--_unselected-hover-state-layer-color);--md-ripple-hover-state-layer-opacity:var(--_hover-state-layer-opacity);--md-ripple-focus-state-layer-color:var(--_unselected-focus-state-layer-color);--md-ripple-focus-state-layer-opacity:var(--_focus-state-layer-opacity);--md-ripple-pressed-state-layer-color:var(--_unselected-pressed-state-layer-color);--md-ripple-pressed-state-layer-opacity:var(--_pressed-state-layer-opacity)}.md3-segmented-button--unselected .md3-segmented-button__icon{color:var(--_unselected-with-icon-icon-color)}.md3-segmented-button--unselected:hover .md3-segmented-button__icon{color:var(--_unselected-hover-icon-color)}.md3-segmented-button--unselected:focus .md3-segmented-button__icon{color:var(--_unselected-focus-icon-color)}.md3-segmented-button--unselected:active .md3-segmented-button__icon{color:var(--_unselected-pressed-icon-color)}.md3-segmented-button--unselected:disabled .md3-segmented-button__icon{color:var(--_disabled-icon-color)}.md3-segmented-button--selected{background-color:var(--_selected-container-color);--md-ripple-hover-state-layer-color:var(--_selected-hover-state-layer-color);--md-ripple-hover-state-layer-opacity:var(--_hover-state-layer-opacity);--md-ripple-focus-state-layer-color:var(--_selected-focus-state-layer-color);--md-ripple-focus-state-layer-opacity:var(--_focus-state-layer-opacity);--md-ripple-pressed-state-layer-color:var(--_selected-pressed-state-layer-color);--md-ripple-pressed-state-layer-opacity:var(--_pressed-state-layer-opacity)}.md3-segmented-button--selected .md3-segmented-button__icon{color:var(--_selected-with-icon-icon-color)}.md3-segmented-button--selected .md3-segmented-button__checkmark-path{stroke:var(--_selected-with-icon-icon-color)}.md3-segmented-button--selected:hover .md3-segmented-button__checkmark-path{stroke:var(--_selected-hover-icon-color)}.md3-segmented-button--selected:focus .md3-segmented-button__checkmark-path{stroke:var(--_selected-focus-icon-color)}.md3-segmented-button--selected:active .md3-segmented-button__checkmark-path{stroke:var(--_selected-pressed-icon-color)}.md3-segmented-button--selected:disabled .md3-segmented-button__checkmark-path{stroke:var(--_disabled-icon-color)}.md3-segmented-button:enabled{cursor:pointer}.md3-segmented-button__focus-ring{z-index:1}.md3-segmented-button__ripple{border-radius:inherit;z-index:0}.md3-segmented-button__touch{position:absolute;top:50%;height:48px;left:50%;width:100%;transform:translate(-50%, -50%)}.md3-segmented-button__leading,.md3-segmented-button__graphic{display:inline-flex;justify-content:flex-start;align-items:center}.md3-segmented-button__graphic{position:relative;overflow:hidden}.md3-segmented-button__graphic{transition:width 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-segmented-button--unselected.md3-segmented-button--with-label .md3-segmented-button__graphic,.md3-segmented-button--unselected.md3-segmented-button--without-label .md3-segmented-button__graphic,.md3-segmented-button--selected.md3-segmented-button--without-checkmark .md3-segmented-button__graphic{width:0}.md3-segmented-button--unselected .md3-segmented-button__checkmark{opacity:0}.md3-segmented-button--selected.md3-segmented-button--with-label .md3-segmented-button__icon{opacity:0}.md3-segmented-button--with-label .md3-segmented-button__checkmark{display:inline-flex;position:absolute}.md3-segmented-button__checkmark-path{stroke-width:2px;stroke-dasharray:29.7833385}.md3-segmented-button--selecting .md3-segmented-button__checkmark-path{stroke-dashoffset:29.7833385;animation:md3-segmented-button-checkmark-selection-draw-in;animation-duration:150ms;animation-delay:50ms;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.md3-segmented-button--selecting.md3-segmented-button--with-label .md3-segmented-button__icon{animation:md3-segmented-button-simple-fade-out;animation-duration:75ms;animation-timing-function:linear;animation-fill-mode:forwards}.md3-segmented-button--deselecting .md3-segmented-button__checkmark{animation:md3-segmented-button-simple-fade-out;animation-duration:50ms;animation-timing-function:linear;animation-fill-mode:forwards}.md3-segmented-button--deselecting.md3-segmented-button--with-label .md3-segmented-button__icon{opacity:0;animation:md3-segmented-button-simple-fade-in;animation-delay:50ms;animation-duration:150ms;animation-timing-function:linear;animation-fill-mode:forwards}/*# sourceMappingURL=shared-styles.css.map */
7
+ export const styles = css `@keyframes md3-segmented-button-checkmark-selection-draw-in{from{stroke-dashoffset:29.7833385}to{stroke-dashoffset:0}}@keyframes md3-segmented-button-simple-fade-out{from{opacity:1}to{opacity:0}}@keyframes md3-segmented-button-simple-fade-in{from{opacity:0}to{opacity:1}}:host{display:inline-flex;outline:none}.md3-segmented-button{align-items:center;background:rgba(0,0,0,0);border:none;border-radius:inherit;display:flex;flex:1;justify-content:center;outline:none;position:relative;vertical-align:middle;padding-inline-start:var(--_spacing-leading);padding-inline-end:var(--_spacing-trailing)}.md3-segmented-button .md3-segmented-button__outline{border-color:var(--_outline-color)}.md3-segmented-button:disabled .md3-segmented-button__outline{border-color:var(--_disabled-outline-color)}.md3-segmented-button .md3-segmented-button__graphic,.md3-segmented-button .md3-segmented-button__checkmark,.md3-segmented-button .md3-segmented-button__icon,.md3-segmented-button .md3-segmented-button__icon ::slotted([slot=icon]){height:var(--_with-icon-icon-size);width:var(--_with-icon-icon-size);font-size:var(--_with-icon-icon-size)}.md3-segmented-button.md3-segmented-button--with-icon.md3-segmented-button--with-label .md3-segmented-button__graphic,.md3-segmented-button.md3-segmented-button--selected.md3-segmented-button--with-label.md3-segmented-button--with-checkmark .md3-segmented-button__graphic,.md3-segmented-button.md3-segmented-button--selected.md3-segmented-button--without-label.md3-segmented-button--with-checkmark .md3-segmented-button__graphic{width:calc(var(--_with-icon-icon-size) + 8px)}.md3-segmented-button .md3-segmented-button__label-text{font:var(--_label-text-type)}.md3-segmented-button.md3-segmented-button--selected:enabled .md3-segmented-button__label-text{color:var(--_selected-label-text-color)}.md3-segmented-button.md3-segmented-button--selected:enabled:hover .md3-segmented-button__label-text{color:var(--_selected-hover-label-text-color)}.md3-segmented-button.md3-segmented-button--selected:enabled:focus .md3-segmented-button__label-text{color:var(--_selected-focus-label-text-color)}.md3-segmented-button.md3-segmented-button--selected:enabled:active .md3-segmented-button__label-text{color:var(--_selected-pressed-label-text-color)}.md3-segmented-button.md3-segmented-button--unselected:enabled .md3-segmented-button__label-text{color:var(--_unselected-label-text-color)}.md3-segmented-button.md3-segmented-button--unselected:enabled:hover .md3-segmented-button__label-text{color:var(--_unselected-hover-label-text-color)}.md3-segmented-button.md3-segmented-button--unselected:enabled:focus .md3-segmented-button__label-text{color:var(--_unselected-focus-label-text-color)}.md3-segmented-button.md3-segmented-button--unselected:enabled:active .md3-segmented-button__label-text{color:var(--_unselected-pressed-label-text-color)}.md3-segmented-button:disabled .md3-segmented-button__label-text{color:var(--_disabled-label-text-color)}.md3-segmented-button--unselected{--md-ripple-hover-color:var(--_unselected-hover-state-layer-color);--md-ripple-hover-opacity:var(--_hover-state-layer-opacity);--md-ripple-focus-color:var(--_unselected-focus-state-layer-color);--md-ripple-focus-opacity:var(--_focus-state-layer-opacity);--md-ripple-pressed-color:var(--_unselected-pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_pressed-state-layer-opacity)}.md3-segmented-button--unselected .md3-segmented-button__icon{color:var(--_unselected-with-icon-icon-color)}.md3-segmented-button--unselected:hover .md3-segmented-button__icon{color:var(--_unselected-hover-icon-color)}.md3-segmented-button--unselected:focus .md3-segmented-button__icon{color:var(--_unselected-focus-icon-color)}.md3-segmented-button--unselected:active .md3-segmented-button__icon{color:var(--_unselected-pressed-icon-color)}.md3-segmented-button--unselected:disabled .md3-segmented-button__icon{color:var(--_disabled-icon-color)}.md3-segmented-button--selected{background-color:var(--_selected-container-color);--md-ripple-hover-color:var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity:var(--_hover-state-layer-opacity);--md-ripple-focus-color:var(--_selected-focus-state-layer-color);--md-ripple-focus-opacity:var(--_focus-state-layer-opacity);--md-ripple-pressed-color:var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_pressed-state-layer-opacity)}.md3-segmented-button--selected .md3-segmented-button__icon{color:var(--_selected-with-icon-icon-color)}.md3-segmented-button--selected .md3-segmented-button__checkmark-path{stroke:var(--_selected-with-icon-icon-color)}.md3-segmented-button--selected:hover .md3-segmented-button__checkmark-path{stroke:var(--_selected-hover-icon-color)}.md3-segmented-button--selected:focus .md3-segmented-button__checkmark-path{stroke:var(--_selected-focus-icon-color)}.md3-segmented-button--selected:active .md3-segmented-button__checkmark-path{stroke:var(--_selected-pressed-icon-color)}.md3-segmented-button--selected:disabled .md3-segmented-button__checkmark-path{stroke:var(--_disabled-icon-color)}.md3-segmented-button:enabled{cursor:pointer}.md3-segmented-button__focus-ring{z-index:1}.md3-segmented-button__ripple{border-radius:inherit;z-index:0}.md3-segmented-button__touch{position:absolute;top:50%;height:48px;left:50%;width:100%;transform:translate(-50%, -50%)}.md3-segmented-button__leading,.md3-segmented-button__graphic{display:inline-flex;justify-content:flex-start;align-items:center}.md3-segmented-button__graphic{position:relative;overflow:hidden}.md3-segmented-button__graphic{transition:width 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-segmented-button--unselected.md3-segmented-button--with-label .md3-segmented-button__graphic,.md3-segmented-button--unselected.md3-segmented-button--without-label .md3-segmented-button__graphic,.md3-segmented-button--selected.md3-segmented-button--without-checkmark .md3-segmented-button__graphic{width:0}.md3-segmented-button--unselected .md3-segmented-button__checkmark{opacity:0}.md3-segmented-button--selected.md3-segmented-button--with-label .md3-segmented-button__icon{opacity:0}.md3-segmented-button--with-label .md3-segmented-button__checkmark{display:inline-flex;position:absolute}.md3-segmented-button__checkmark-path{stroke-width:2px;stroke-dasharray:29.7833385}.md3-segmented-button--selecting .md3-segmented-button__checkmark-path{stroke-dashoffset:29.7833385;animation:md3-segmented-button-checkmark-selection-draw-in;animation-duration:150ms;animation-delay:50ms;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.md3-segmented-button--selecting.md3-segmented-button--with-label .md3-segmented-button__icon{animation:md3-segmented-button-simple-fade-out;animation-duration:75ms;animation-timing-function:linear;animation-fill-mode:forwards}.md3-segmented-button--deselecting .md3-segmented-button__checkmark{animation:md3-segmented-button-simple-fade-out;animation-duration:50ms;animation-timing-function:linear;animation-fill-mode:forwards}.md3-segmented-button--deselecting.md3-segmented-button--with-label .md3-segmented-button__icon{opacity:0;animation:md3-segmented-button-simple-fade-in;animation-delay:50ms;animation-duration:150ms;animation-timing-function:linear;animation-fill-mode:forwards}/*# sourceMappingURL=shared-styles.css.map */
8
8
  `;
9
9
  //# sourceMappingURL=shared-styles.css.js.map
package/segmentedbutton/lib/shared-styles.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"shared-styles.css.js","sourceRoot":"","sources":["shared-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`@keyframes md3-segmented-button-checkmark-selection-draw-in{from{stroke-dashoffset:29.7833385}to{stroke-dashoffset:0}}@keyframes md3-segmented-button-simple-fade-out{from{opacity:1}to{opacity:0}}@keyframes md3-segmented-button-simple-fade-in{from{opacity:0}to{opacity:1}}:host{display:inline-flex;outline:none}.md3-segmented-button{align-items:center;background:rgba(0,0,0,0);border:none;border-radius:inherit;display:flex;flex:1;justify-content:center;outline:none;position:relative;vertical-align:middle;padding-inline-start:var(--_spacing-leading);padding-inline-end:var(--_spacing-trailing)}.md3-segmented-button .md3-segmented-button__outline{border-color:var(--_outline-color)}.md3-segmented-button:disabled .md3-segmented-button__outline{border-color:var(--_disabled-outline-color)}.md3-segmented-button .md3-segmented-button__graphic,.md3-segmented-button .md3-segmented-button__checkmark,.md3-segmented-button .md3-segmented-button__icon,.md3-segmented-button .md3-segmented-button__icon ::slotted([slot=icon]){height:var(--_with-icon-icon-size);width:var(--_with-icon-icon-size);font-size:var(--_with-icon-icon-size)}.md3-segmented-button.md3-segmented-button--with-icon.md3-segmented-button--with-label .md3-segmented-button__graphic,.md3-segmented-button.md3-segmented-button--selected.md3-segmented-button--with-label.md3-segmented-button--with-checkmark .md3-segmented-button__graphic,.md3-segmented-button.md3-segmented-button--selected.md3-segmented-button--without-label.md3-segmented-button--with-checkmark .md3-segmented-button__graphic{width:calc(var(--_with-icon-icon-size) + 8px)}.md3-segmented-button .md3-segmented-button__label-text{font-family:var(--_label-text-font);font-size:var(--_label-text-size);letter-spacing:var(--_label-text-tracking);font-weight:var(--_label-text-weight)}.md3-segmented-button.md3-segmented-button--selected:enabled .md3-segmented-button__label-text{color:var(--_selected-label-text-color)}.md3-segmented-button.md3-segmented-button--selected:enabled:hover .md3-segmented-button__label-text{color:var(--_selected-hover-label-text-color)}.md3-segmented-button.md3-segmented-button--selected:enabled:focus .md3-segmented-button__label-text{color:var(--_selected-focus-label-text-color)}.md3-segmented-button.md3-segmented-button--selected:enabled:active .md3-segmented-button__label-text{color:var(--_selected-pressed-label-text-color)}.md3-segmented-button.md3-segmented-button--unselected:enabled .md3-segmented-button__label-text{color:var(--_unselected-label-text-color)}.md3-segmented-button.md3-segmented-button--unselected:enabled:hover .md3-segmented-button__label-text{color:var(--_unselected-hover-label-text-color)}.md3-segmented-button.md3-segmented-button--unselected:enabled:focus .md3-segmented-button__label-text{color:var(--_unselected-focus-label-text-color)}.md3-segmented-button.md3-segmented-button--unselected:enabled:active .md3-segmented-button__label-text{color:var(--_unselected-pressed-label-text-color)}.md3-segmented-button:disabled .md3-segmented-button__label-text{color:var(--_disabled-label-text-color)}.md3-segmented-button--unselected{--md-ripple-hover-state-layer-color:var(--_unselected-hover-state-layer-color);--md-ripple-hover-state-layer-opacity:var(--_hover-state-layer-opacity);--md-ripple-focus-state-layer-color:var(--_unselected-focus-state-layer-color);--md-ripple-focus-state-layer-opacity:var(--_focus-state-layer-opacity);--md-ripple-pressed-state-layer-color:var(--_unselected-pressed-state-layer-color);--md-ripple-pressed-state-layer-opacity:var(--_pressed-state-layer-opacity)}.md3-segmented-button--unselected .md3-segmented-button__icon{color:var(--_unselected-with-icon-icon-color)}.md3-segmented-button--unselected:hover .md3-segmented-button__icon{color:var(--_unselected-hover-icon-color)}.md3-segmented-button--unselected:focus .md3-segmented-button__icon{color:var(--_unselected-focus-icon-color)}.md3-segmented-button--unselected:active .md3-segmented-button__icon{color:var(--_unselected-pressed-icon-color)}.md3-segmented-button--unselected:disabled .md3-segmented-button__icon{color:var(--_disabled-icon-color)}.md3-segmented-button--selected{background-color:var(--_selected-container-color);--md-ripple-hover-state-layer-color:var(--_selected-hover-state-layer-color);--md-ripple-hover-state-layer-opacity:var(--_hover-state-layer-opacity);--md-ripple-focus-state-layer-color:var(--_selected-focus-state-layer-color);--md-ripple-focus-state-layer-opacity:var(--_focus-state-layer-opacity);--md-ripple-pressed-state-layer-color:var(--_selected-pressed-state-layer-color);--md-ripple-pressed-state-layer-opacity:var(--_pressed-state-layer-opacity)}.md3-segmented-button--selected .md3-segmented-button__icon{color:var(--_selected-with-icon-icon-color)}.md3-segmented-button--selected .md3-segmented-button__checkmark-path{stroke:var(--_selected-with-icon-icon-color)}.md3-segmented-button--selected:hover .md3-segmented-button__checkmark-path{stroke:var(--_selected-hover-icon-color)}.md3-segmented-button--selected:focus .md3-segmented-button__checkmark-path{stroke:var(--_selected-focus-icon-color)}.md3-segmented-button--selected:active .md3-segmented-button__checkmark-path{stroke:var(--_selected-pressed-icon-color)}.md3-segmented-button--selected:disabled .md3-segmented-button__checkmark-path{stroke:var(--_disabled-icon-color)}.md3-segmented-button:enabled{cursor:pointer}.md3-segmented-button__focus-ring{z-index:1}.md3-segmented-button__ripple{border-radius:inherit;z-index:0}.md3-segmented-button__touch{position:absolute;top:50%;height:48px;left:50%;width:100%;transform:translate(-50%, -50%)}.md3-segmented-button__leading,.md3-segmented-button__graphic{display:inline-flex;justify-content:flex-start;align-items:center}.md3-segmented-button__graphic{position:relative;overflow:hidden}.md3-segmented-button__graphic{transition:width 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-segmented-button--unselected.md3-segmented-button--with-label .md3-segmented-button__graphic,.md3-segmented-button--unselected.md3-segmented-button--without-label .md3-segmented-button__graphic,.md3-segmented-button--selected.md3-segmented-button--without-checkmark .md3-segmented-button__graphic{width:0}.md3-segmented-button--unselected .md3-segmented-button__checkmark{opacity:0}.md3-segmented-button--selected.md3-segmented-button--with-label .md3-segmented-button__icon{opacity:0}.md3-segmented-button--with-label .md3-segmented-button__checkmark{display:inline-flex;position:absolute}.md3-segmented-button__checkmark-path{stroke-width:2px;stroke-dasharray:29.7833385}.md3-segmented-button--selecting .md3-segmented-button__checkmark-path{stroke-dashoffset:29.7833385;animation:md3-segmented-button-checkmark-selection-draw-in;animation-duration:150ms;animation-delay:50ms;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.md3-segmented-button--selecting.md3-segmented-button--with-label .md3-segmented-button__icon{animation:md3-segmented-button-simple-fade-out;animation-duration:75ms;animation-timing-function:linear;animation-fill-mode:forwards}.md3-segmented-button--deselecting .md3-segmented-button__checkmark{animation:md3-segmented-button-simple-fade-out;animation-duration:50ms;animation-timing-function:linear;animation-fill-mode:forwards}.md3-segmented-button--deselecting.md3-segmented-button--with-label .md3-segmented-button__icon{opacity:0;animation:md3-segmented-button-simple-fade-in;animation-delay:50ms;animation-duration:150ms;animation-timing-function:linear;animation-fill-mode:forwards}/*# sourceMappingURL=shared-styles.css.map */\n`;\n "]}
1
+ {"version":3,"file":"shared-styles.css.js","sourceRoot":"","sources":["shared-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`@keyframes md3-segmented-button-checkmark-selection-draw-in{from{stroke-dashoffset:29.7833385}to{stroke-dashoffset:0}}@keyframes md3-segmented-button-simple-fade-out{from{opacity:1}to{opacity:0}}@keyframes md3-segmented-button-simple-fade-in{from{opacity:0}to{opacity:1}}:host{display:inline-flex;outline:none}.md3-segmented-button{align-items:center;background:rgba(0,0,0,0);border:none;border-radius:inherit;display:flex;flex:1;justify-content:center;outline:none;position:relative;vertical-align:middle;padding-inline-start:var(--_spacing-leading);padding-inline-end:var(--_spacing-trailing)}.md3-segmented-button .md3-segmented-button__outline{border-color:var(--_outline-color)}.md3-segmented-button:disabled .md3-segmented-button__outline{border-color:var(--_disabled-outline-color)}.md3-segmented-button .md3-segmented-button__graphic,.md3-segmented-button .md3-segmented-button__checkmark,.md3-segmented-button .md3-segmented-button__icon,.md3-segmented-button .md3-segmented-button__icon ::slotted([slot=icon]){height:var(--_with-icon-icon-size);width:var(--_with-icon-icon-size);font-size:var(--_with-icon-icon-size)}.md3-segmented-button.md3-segmented-button--with-icon.md3-segmented-button--with-label .md3-segmented-button__graphic,.md3-segmented-button.md3-segmented-button--selected.md3-segmented-button--with-label.md3-segmented-button--with-checkmark .md3-segmented-button__graphic,.md3-segmented-button.md3-segmented-button--selected.md3-segmented-button--without-label.md3-segmented-button--with-checkmark .md3-segmented-button__graphic{width:calc(var(--_with-icon-icon-size) + 8px)}.md3-segmented-button .md3-segmented-button__label-text{font:var(--_label-text-type)}.md3-segmented-button.md3-segmented-button--selected:enabled .md3-segmented-button__label-text{color:var(--_selected-label-text-color)}.md3-segmented-button.md3-segmented-button--selected:enabled:hover .md3-segmented-button__label-text{color:var(--_selected-hover-label-text-color)}.md3-segmented-button.md3-segmented-button--selected:enabled:focus .md3-segmented-button__label-text{color:var(--_selected-focus-label-text-color)}.md3-segmented-button.md3-segmented-button--selected:enabled:active .md3-segmented-button__label-text{color:var(--_selected-pressed-label-text-color)}.md3-segmented-button.md3-segmented-button--unselected:enabled .md3-segmented-button__label-text{color:var(--_unselected-label-text-color)}.md3-segmented-button.md3-segmented-button--unselected:enabled:hover .md3-segmented-button__label-text{color:var(--_unselected-hover-label-text-color)}.md3-segmented-button.md3-segmented-button--unselected:enabled:focus .md3-segmented-button__label-text{color:var(--_unselected-focus-label-text-color)}.md3-segmented-button.md3-segmented-button--unselected:enabled:active .md3-segmented-button__label-text{color:var(--_unselected-pressed-label-text-color)}.md3-segmented-button:disabled .md3-segmented-button__label-text{color:var(--_disabled-label-text-color)}.md3-segmented-button--unselected{--md-ripple-hover-color:var(--_unselected-hover-state-layer-color);--md-ripple-hover-opacity:var(--_hover-state-layer-opacity);--md-ripple-focus-color:var(--_unselected-focus-state-layer-color);--md-ripple-focus-opacity:var(--_focus-state-layer-opacity);--md-ripple-pressed-color:var(--_unselected-pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_pressed-state-layer-opacity)}.md3-segmented-button--unselected .md3-segmented-button__icon{color:var(--_unselected-with-icon-icon-color)}.md3-segmented-button--unselected:hover .md3-segmented-button__icon{color:var(--_unselected-hover-icon-color)}.md3-segmented-button--unselected:focus .md3-segmented-button__icon{color:var(--_unselected-focus-icon-color)}.md3-segmented-button--unselected:active .md3-segmented-button__icon{color:var(--_unselected-pressed-icon-color)}.md3-segmented-button--unselected:disabled .md3-segmented-button__icon{color:var(--_disabled-icon-color)}.md3-segmented-button--selected{background-color:var(--_selected-container-color);--md-ripple-hover-color:var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity:var(--_hover-state-layer-opacity);--md-ripple-focus-color:var(--_selected-focus-state-layer-color);--md-ripple-focus-opacity:var(--_focus-state-layer-opacity);--md-ripple-pressed-color:var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_pressed-state-layer-opacity)}.md3-segmented-button--selected .md3-segmented-button__icon{color:var(--_selected-with-icon-icon-color)}.md3-segmented-button--selected .md3-segmented-button__checkmark-path{stroke:var(--_selected-with-icon-icon-color)}.md3-segmented-button--selected:hover .md3-segmented-button__checkmark-path{stroke:var(--_selected-hover-icon-color)}.md3-segmented-button--selected:focus .md3-segmented-button__checkmark-path{stroke:var(--_selected-focus-icon-color)}.md3-segmented-button--selected:active .md3-segmented-button__checkmark-path{stroke:var(--_selected-pressed-icon-color)}.md3-segmented-button--selected:disabled .md3-segmented-button__checkmark-path{stroke:var(--_disabled-icon-color)}.md3-segmented-button:enabled{cursor:pointer}.md3-segmented-button__focus-ring{z-index:1}.md3-segmented-button__ripple{border-radius:inherit;z-index:0}.md3-segmented-button__touch{position:absolute;top:50%;height:48px;left:50%;width:100%;transform:translate(-50%, -50%)}.md3-segmented-button__leading,.md3-segmented-button__graphic{display:inline-flex;justify-content:flex-start;align-items:center}.md3-segmented-button__graphic{position:relative;overflow:hidden}.md3-segmented-button__graphic{transition:width 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-segmented-button--unselected.md3-segmented-button--with-label .md3-segmented-button__graphic,.md3-segmented-button--unselected.md3-segmented-button--without-label .md3-segmented-button__graphic,.md3-segmented-button--selected.md3-segmented-button--without-checkmark .md3-segmented-button__graphic{width:0}.md3-segmented-button--unselected .md3-segmented-button__checkmark{opacity:0}.md3-segmented-button--selected.md3-segmented-button--with-label .md3-segmented-button__icon{opacity:0}.md3-segmented-button--with-label .md3-segmented-button__checkmark{display:inline-flex;position:absolute}.md3-segmented-button__checkmark-path{stroke-width:2px;stroke-dasharray:29.7833385}.md3-segmented-button--selecting .md3-segmented-button__checkmark-path{stroke-dashoffset:29.7833385;animation:md3-segmented-button-checkmark-selection-draw-in;animation-duration:150ms;animation-delay:50ms;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.md3-segmented-button--selecting.md3-segmented-button--with-label .md3-segmented-button__icon{animation:md3-segmented-button-simple-fade-out;animation-duration:75ms;animation-timing-function:linear;animation-fill-mode:forwards}.md3-segmented-button--deselecting .md3-segmented-button__checkmark{animation:md3-segmented-button-simple-fade-out;animation-duration:50ms;animation-timing-function:linear;animation-fill-mode:forwards}.md3-segmented-button--deselecting.md3-segmented-button--with-label .md3-segmented-button__icon{opacity:0;animation:md3-segmented-button-simple-fade-in;animation-delay:50ms;animation-duration:150ms;animation-timing-function:linear;animation-fill-mode:forwards}/*# sourceMappingURL=shared-styles.css.map */\n`;\n "]}
package/segmentedbutton/lib/shared-styles.scss CHANGED
@@ -3,6 +3,8 @@
3
3
  // SPDX-License-Identifier: Apache-2.0
4
4
  //
5
5
 
6
+ // go/keep-sorted start
6
7
  @use './shared';
8
+ // go/keep-sorted end
7
9
 
8
10
  @include shared.styles;
package/segmentedbutton/outlined-segmented-button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"outlined-segmented-button.js","sourceRoot":"","sources":["outlined-segmented-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,uBAAuB,EAAC,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;;;GAMG;AAEH,IAAa,yBAAyB,GAAtC,MAAa,yBAA0B,SAAQ,uBAAuB;CAErE,CAAA;AADiB,gCAAM,GAAG,CAAC,YAAY,EAAE,cAAc,CAAE,CAAA;AAD7C,yBAAyB;IADrC,aAAa,CAAC,8BAA8B,CAAC;GACjC,yBAAyB,CAErC;SAFY,yBAAyB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {OutlinedSegmentedButton} from './lib/outlined-segmented-button.js';\nimport {styles as outlinedStyles} from './lib/outlined-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-outlined-segmented-button': MdOutlinedSegmentedButton;\n }\n}\n\n/**\n * MdOutlinedSegmentedButton is the custom element for the Material\n * Design outlined segmented button component.\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-segmented-button')\nexport class MdOutlinedSegmentedButton extends OutlinedSegmentedButton {\n static override styles = [sharedStyles, outlinedStyles];\n}\n"]}
1
+ {"version":3,"file":"outlined-segmented-button.js","sourceRoot":"","sources":["outlined-segmented-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,uBAAuB,EAAC,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;;;GAMG;AAEI,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,uBAAuB;;AACpD,gCAAM,GAAG,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AAD7C,yBAAyB;IADrC,aAAa,CAAC,8BAA8B,CAAC;GACjC,yBAAyB,CAErC;SAFY,yBAAyB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {OutlinedSegmentedButton} from './lib/outlined-segmented-button.js';\nimport {styles as outlinedStyles} from './lib/outlined-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-outlined-segmented-button': MdOutlinedSegmentedButton;\n }\n}\n\n/**\n * MdOutlinedSegmentedButton is the custom element for the Material\n * Design outlined segmented button component.\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-segmented-button')\nexport class MdOutlinedSegmentedButton extends OutlinedSegmentedButton {\n static override styles = [sharedStyles, outlinedStyles];\n}\n"]}
package/segmentedbuttonset/lib/_outlined-segmented-button-set.scss CHANGED
@@ -3,24 +3,28 @@
3
3
  // SPDX-License-Identifier: Apache-2.0
4
4
  //
5
5
 
6
+ // go/keep-sorted start
7
+ @use '../../sass/shape';
6
8
  @use '../../sass/theme';
7
9
  @use '../../tokens';
8
- @use './shared';
10
+ // go/keep-sorted end
11
+
12
+ $_custom-property-prefix: 'segmented-button';
9
13
 
10
14
  @mixin theme($tokens) {
11
15
  $tokens: theme.validate-theme(
12
16
  tokens.md-comp-outlined-segmented-button-values(),
13
17
  $tokens
14
18
  );
15
- $tokens: shared.resolve-tokens($tokens);
16
- $tokens: theme.create-theme-vars($tokens, 'segmented-button');
19
+ $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
20
+ $tokens: shape.resolve-tokens($tokens, 'shape');
17
21
  @include theme.emit-theme-vars($tokens);
18
22
  }
19
23
 
20
24
  @mixin styles() {
21
25
  $tokens: tokens.md-comp-outlined-segmented-button-values();
22
- $tokens: shared.resolve-tokens($tokens);
23
- $tokens: theme.create-theme-vars($tokens, 'segmented-button');
26
+ $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
27
+ $tokens: shape.resolve-tokens($tokens, 'shape');
24
28
 
25
29
  :host {
26
30
  @each $token, $value in $tokens {
package/segmentedbuttonset/lib/_shared.scss CHANGED
@@ -6,10 +6,6 @@
6
6
  // stylelint-disable selector-class-pattern --
7
7
  // Selector '.md3-*' should only be used in this project.
8
8
 
9
- @use 'sass:map';
10
- @use '../../sass/resolvers';
11
- @use '../../sass/shape';
12
-
13
9
  @mixin styles() {
14
10
  :host {
15
11
  display: flex;
@@ -35,12 +31,3 @@
35
31
  }
36
32
  }
37
33
  }
38
-
39
- @function resolve-tokens($tokens) {
40
- $tokens: shape.resolve-theme(
41
- $tokens,
42
- map.get(resolvers.$material, 'shape'),
43
- 'shape'
44
- );
45
- @return $tokens;
46
- }
package/segmentedbuttonset/lib/outlined-styles.css.js CHANGED
@@ -4,6 +4,6 @@
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
6
  import { css } from 'lit';
7
- export const styles = css `:host{--_shape-start-start: var(--md-segmented-button-shape-start-start, 9999px);--_shape-start-end: var(--md-segmented-button-shape-start-end, 9999px);--_shape-end-end: var(--md-segmented-button-shape-end-end, 9999px);--_shape-end-start: var(--md-segmented-button-shape-end-start, 9999px);--_container-height: var(--md-segmented-button-container-height, 40px);--_disabled-icon-color: var(--md-segmented-button-disabled-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-icon-opacity: var(--md-segmented-button-disabled-icon-opacity, 0.38);--_disabled-label-text-color: var(--md-segmented-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-label-text-opacity: var(--md-segmented-button-disabled-label-text-opacity, 0.38);--_disabled-outline-color: var(--md-segmented-button-disabled-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-outline-opacity: var(--md-segmented-button-disabled-outline-opacity, 0.12);--_focus-state-layer-opacity: var(--md-segmented-button-focus-state-layer-opacity, 0.12);--_hover-state-layer-opacity: var(--md-segmented-button-hover-state-layer-opacity, 0.08);--_label-text-font: var(--md-segmented-button-label-text-font, Roboto);--_label-text-line-height: var(--md-segmented-button-label-text-line-height, 1.25rem);--_label-text-size: var(--md-segmented-button-label-text-size, 0.875rem);--_label-text-tracking: var(--md-segmented-button-label-text-tracking, 0.006rem);--_label-text-type: var(--md-segmented-button-label-text-type, 500 0.875rem / 1.25rem Roboto);--_label-text-weight: var(--md-segmented-button-label-text-weight, 500);--_outline-color: var(--md-segmented-button-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-segmented-button-outline-width, 1px);--_pressed-state-layer-opacity: var(--md-segmented-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-segmented-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-focus-icon-color: var(--md-segmented-button-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-label-text-color: var(--md-segmented-button-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-state-layer-color: var(--md-segmented-button-selected-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-icon-color: var(--md-segmented-button-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-segmented-button-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-segmented-button-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-label-text-color: var(--md-segmented-button-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-icon-color: var(--md-segmented-button-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-label-text-color: var(--md-segmented-button-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-segmented-button-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-with-icon-icon-color: var(--md-segmented-button-selected-with-icon-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_unselected-focus-icon-color: var(--md-segmented-button-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-focus-label-text-color: var(--md-segmented-button-unselected-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-focus-state-layer-color: var(--md-segmented-button-unselected-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-icon-color: var(--md-segmented-button-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-label-text-color: var(--md-segmented-button-unselected-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-state-layer-color: var(--md-segmented-button-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-label-text-color: var(--md-segmented-button-unselected-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-icon-color: var(--md-segmented-button-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-label-text-color: var(--md-segmented-button-unselected-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-state-layer-color: var(--md-segmented-button-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-with-icon-icon-color: var(--md-segmented-button-unselected-with-icon-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_with-icon-icon-size: var(--md-segmented-button-with-icon-icon-size, 18px)}/*# sourceMappingURL=outlined-styles.css.map */
7
+ export const styles = css `:host{--_shape-start-start: var(--md-segmented-button-shape-start-start, var(--md-segmented-button-shape, 9999px));--_shape-start-end: var(--md-segmented-button-shape-start-end, var(--md-segmented-button-shape, 9999px));--_shape-end-end: var(--md-segmented-button-shape-end-end, var(--md-segmented-button-shape, 9999px));--_shape-end-start: var(--md-segmented-button-shape-end-start, var(--md-segmented-button-shape, 9999px));--_container-height: var(--md-segmented-button-container-height, 40px);--_disabled-icon-color: var(--md-segmented-button-disabled-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-icon-opacity: var(--md-segmented-button-disabled-icon-opacity, 0.38);--_disabled-label-text-color: var(--md-segmented-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-label-text-opacity: var(--md-segmented-button-disabled-label-text-opacity, 0.38);--_disabled-outline-color: var(--md-segmented-button-disabled-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-outline-opacity: var(--md-segmented-button-disabled-outline-opacity, 0.12);--_focus-state-layer-opacity: var(--md-segmented-button-focus-state-layer-opacity, 0.12);--_hover-state-layer-opacity: var(--md-segmented-button-hover-state-layer-opacity, 0.08);--_label-text-font: var(--md-segmented-button-label-text-font, Roboto);--_label-text-line-height: var(--md-segmented-button-label-text-line-height, 1.25rem);--_label-text-size: var(--md-segmented-button-label-text-size, 0.875rem);--_label-text-tracking: var(--md-segmented-button-label-text-tracking, 0.006rem);--_label-text-type: var(--md-segmented-button-label-text-type, 500 0.875rem / 1.25rem Roboto);--_label-text-weight: var(--md-segmented-button-label-text-weight, 500);--_outline-color: var(--md-segmented-button-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-segmented-button-outline-width, 1px);--_pressed-state-layer-opacity: var(--md-segmented-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-segmented-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-focus-icon-color: var(--md-segmented-button-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-label-text-color: var(--md-segmented-button-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-state-layer-color: var(--md-segmented-button-selected-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-icon-color: var(--md-segmented-button-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-segmented-button-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-segmented-button-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-label-text-color: var(--md-segmented-button-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-icon-color: var(--md-segmented-button-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-label-text-color: var(--md-segmented-button-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-segmented-button-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-with-icon-icon-color: var(--md-segmented-button-selected-with-icon-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_unselected-focus-icon-color: var(--md-segmented-button-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-focus-label-text-color: var(--md-segmented-button-unselected-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-focus-state-layer-color: var(--md-segmented-button-unselected-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-icon-color: var(--md-segmented-button-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-label-text-color: var(--md-segmented-button-unselected-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-state-layer-color: var(--md-segmented-button-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-label-text-color: var(--md-segmented-button-unselected-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-icon-color: var(--md-segmented-button-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-label-text-color: var(--md-segmented-button-unselected-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-state-layer-color: var(--md-segmented-button-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-with-icon-icon-color: var(--md-segmented-button-unselected-with-icon-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_with-icon-icon-size: var(--md-segmented-button-with-icon-icon-size, 18px)}/*# sourceMappingURL=outlined-styles.css.map */
8
8
  `;
9
9
  //# sourceMappingURL=outlined-styles.css.js.map
package/segmentedbuttonset/lib/outlined-styles.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"outlined-styles.css.js","sourceRoot":"","sources":["outlined-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_shape-start-start: var(--md-segmented-button-shape-start-start, 9999px);--_shape-start-end: var(--md-segmented-button-shape-start-end, 9999px);--_shape-end-end: var(--md-segmented-button-shape-end-end, 9999px);--_shape-end-start: var(--md-segmented-button-shape-end-start, 9999px);--_container-height: var(--md-segmented-button-container-height, 40px);--_disabled-icon-color: var(--md-segmented-button-disabled-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-icon-opacity: var(--md-segmented-button-disabled-icon-opacity, 0.38);--_disabled-label-text-color: var(--md-segmented-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-label-text-opacity: var(--md-segmented-button-disabled-label-text-opacity, 0.38);--_disabled-outline-color: var(--md-segmented-button-disabled-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-outline-opacity: var(--md-segmented-button-disabled-outline-opacity, 0.12);--_focus-state-layer-opacity: var(--md-segmented-button-focus-state-layer-opacity, 0.12);--_hover-state-layer-opacity: var(--md-segmented-button-hover-state-layer-opacity, 0.08);--_label-text-font: var(--md-segmented-button-label-text-font, Roboto);--_label-text-line-height: var(--md-segmented-button-label-text-line-height, 1.25rem);--_label-text-size: var(--md-segmented-button-label-text-size, 0.875rem);--_label-text-tracking: var(--md-segmented-button-label-text-tracking, 0.006rem);--_label-text-type: var(--md-segmented-button-label-text-type, 500 0.875rem / 1.25rem Roboto);--_label-text-weight: var(--md-segmented-button-label-text-weight, 500);--_outline-color: var(--md-segmented-button-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-segmented-button-outline-width, 1px);--_pressed-state-layer-opacity: var(--md-segmented-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-segmented-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-focus-icon-color: var(--md-segmented-button-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-label-text-color: var(--md-segmented-button-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-state-layer-color: var(--md-segmented-button-selected-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-icon-color: var(--md-segmented-button-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-segmented-button-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-segmented-button-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-label-text-color: var(--md-segmented-button-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-icon-color: var(--md-segmented-button-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-label-text-color: var(--md-segmented-button-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-segmented-button-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-with-icon-icon-color: var(--md-segmented-button-selected-with-icon-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_unselected-focus-icon-color: var(--md-segmented-button-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-focus-label-text-color: var(--md-segmented-button-unselected-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-focus-state-layer-color: var(--md-segmented-button-unselected-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-icon-color: var(--md-segmented-button-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-label-text-color: var(--md-segmented-button-unselected-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-state-layer-color: var(--md-segmented-button-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-label-text-color: var(--md-segmented-button-unselected-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-icon-color: var(--md-segmented-button-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-label-text-color: var(--md-segmented-button-unselected-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-state-layer-color: var(--md-segmented-button-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-with-icon-icon-color: var(--md-segmented-button-unselected-with-icon-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_with-icon-icon-size: var(--md-segmented-button-with-icon-icon-size, 18px)}/*# sourceMappingURL=outlined-styles.css.map */\n`;\n "]}
1
+ {"version":3,"file":"outlined-styles.css.js","sourceRoot":"","sources":["outlined-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_shape-start-start: var(--md-segmented-button-shape-start-start, var(--md-segmented-button-shape, 9999px));--_shape-start-end: var(--md-segmented-button-shape-start-end, var(--md-segmented-button-shape, 9999px));--_shape-end-end: var(--md-segmented-button-shape-end-end, var(--md-segmented-button-shape, 9999px));--_shape-end-start: var(--md-segmented-button-shape-end-start, var(--md-segmented-button-shape, 9999px));--_container-height: var(--md-segmented-button-container-height, 40px);--_disabled-icon-color: var(--md-segmented-button-disabled-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-icon-opacity: var(--md-segmented-button-disabled-icon-opacity, 0.38);--_disabled-label-text-color: var(--md-segmented-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-label-text-opacity: var(--md-segmented-button-disabled-label-text-opacity, 0.38);--_disabled-outline-color: var(--md-segmented-button-disabled-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-outline-opacity: var(--md-segmented-button-disabled-outline-opacity, 0.12);--_focus-state-layer-opacity: var(--md-segmented-button-focus-state-layer-opacity, 0.12);--_hover-state-layer-opacity: var(--md-segmented-button-hover-state-layer-opacity, 0.08);--_label-text-font: var(--md-segmented-button-label-text-font, Roboto);--_label-text-line-height: var(--md-segmented-button-label-text-line-height, 1.25rem);--_label-text-size: var(--md-segmented-button-label-text-size, 0.875rem);--_label-text-tracking: var(--md-segmented-button-label-text-tracking, 0.006rem);--_label-text-type: var(--md-segmented-button-label-text-type, 500 0.875rem / 1.25rem Roboto);--_label-text-weight: var(--md-segmented-button-label-text-weight, 500);--_outline-color: var(--md-segmented-button-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-segmented-button-outline-width, 1px);--_pressed-state-layer-opacity: var(--md-segmented-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-segmented-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-focus-icon-color: var(--md-segmented-button-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-label-text-color: var(--md-segmented-button-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-state-layer-color: var(--md-segmented-button-selected-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-icon-color: var(--md-segmented-button-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-segmented-button-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-segmented-button-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-label-text-color: var(--md-segmented-button-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-icon-color: var(--md-segmented-button-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-label-text-color: var(--md-segmented-button-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-segmented-button-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-with-icon-icon-color: var(--md-segmented-button-selected-with-icon-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_unselected-focus-icon-color: var(--md-segmented-button-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-focus-label-text-color: var(--md-segmented-button-unselected-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-focus-state-layer-color: var(--md-segmented-button-unselected-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-icon-color: var(--md-segmented-button-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-label-text-color: var(--md-segmented-button-unselected-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-state-layer-color: var(--md-segmented-button-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-label-text-color: var(--md-segmented-button-unselected-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-icon-color: var(--md-segmented-button-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-label-text-color: var(--md-segmented-button-unselected-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-state-layer-color: var(--md-segmented-button-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-with-icon-icon-color: var(--md-segmented-button-unselected-with-icon-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_with-icon-icon-size: var(--md-segmented-button-with-icon-icon-size, 18px)}/*# sourceMappingURL=outlined-styles.css.map */\n`;\n "]}
package/segmentedbuttonset/lib/outlined-styles.scss CHANGED
@@ -3,6 +3,8 @@
3
3
  // SPDX-License-Identifier: Apache-2.0
4
4
  //
5
5
 
6
+ // go/keep-sorted start
6
7
  @use './outlined-segmented-button-set';
8
+ // go/keep-sorted end
7
9
 
8
10
  @include outlined-segmented-button-set.styles;
package/segmentedbuttonset/lib/segmented-button-set.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"segmented-button-set.js","sourceRoot":"","sources":["segmented-button-set.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, TemplateResult} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\nimport {ariaProperty} from '../../decorators/aria-property.js';\nimport {SegmentedButton} from '../../segmentedbutton/lib/segmented-button.js';\n\n/**\n * SegmentedButtonSet is the parent component for two or more\n * `SegmentedButton` components. **Only** `SegmentedButton` components may be\n * used as children.\n * @soyCompatible\n */\nexport class SegmentedButtonSet extends LitElement {\n @property({type: Boolean}) multiselect = false;\n\n /** @soyPrefixAttribute */\n @ariaProperty // tslint:disable-line:no-new-decorators\n @property({type: String, attribute: 'aria-label'})\n override ariaLabel!: string;\n\n @queryAssignedElements({flatten: true}) buttons!: SegmentedButton[];\n\n getButtonDisabled(index: number): boolean {\n if (this.indexOutOfBounds(index)) return false;\n return this.buttons[index].disabled;\n }\n\n setButtonDisabled(index: number, disabled: boolean) {\n if (this.indexOutOfBounds(index)) return;\n this.buttons[index].disabled = disabled;\n }\n\n getButtonSelected(index: number): boolean {\n if (this.indexOutOfBounds(index)) return false;\n return this.buttons[index].selected;\n }\n\n setButtonSelected(index: number, selected: boolean) {\n // Ignore out-of-index values.\n if (this.indexOutOfBounds(index)) return;\n // Ignore disabled buttons.\n if (this.getButtonDisabled(index)) return;\n\n if (this.multiselect) {\n this.buttons[index].selected = selected;\n this.emitSelectionEvent(index);\n return;\n }\n\n // Single-select segmented buttons are not unselectable.\n if (!selected) return;\n\n this.buttons[index].selected = true;\n this.emitSelectionEvent(index);\n // Deselect all other buttons for single-select.\n for (let i = 0; i < this.buttons.length; i++) {\n if (i === index) continue;\n this.buttons[i].selected = false;\n }\n }\n\n private handleSegmentedButtonInteraction(e: CustomEvent) {\n const index = this.buttons.indexOf(e.target as SegmentedButton);\n this.toggleSelection(index);\n }\n\n private toggleSelection(index: number) {\n if (this.indexOutOfBounds(index)) return;\n this.setButtonSelected(index, !this.buttons[index].selected);\n }\n\n private indexOutOfBounds(index: number): boolean {\n return index < 0 || index >= this.buttons.length;\n }\n\n private emitSelectionEvent(index: number) {\n this.dispatchEvent(new CustomEvent('segmented-button-set-selection', {\n detail: {\n button: this.buttons[index],\n selected: this.buttons[index].selected,\n index,\n },\n bubbles: true,\n composed: true\n }));\n }\n\n /** @soyTemplate */\n override render(): TemplateResult {\n return html`\n <span\n role=\"group\"\n @segmented-button-interaction=\"${this.handleSegmentedButtonInteraction}\"\n aria-label=\"${ifDefined(this.ariaLabel)}\"\n class=\"md3-segmented-button-set ${classMap(this.getRenderClasses())}\">\n <slot></slot>\n </span>\n `;\n }\n\n /** @soyTemplate */\n protected getRenderClasses(): ClassInfo {\n return {};\n }\n}\n"]}
1
+ {"version":3,"file":"segmented-button-set.js","sourceRoot":"","sources":["segmented-button-set.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, TemplateResult} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\nimport {ariaProperty} from '../../decorators/aria-property.js';\nimport {SegmentedButton} from '../../segmentedbutton/lib/segmented-button.js';\n\n/**\n * SegmentedButtonSet is the parent component for two or more\n * `SegmentedButton` components. **Only** `SegmentedButton` components may be\n * used as children.\n * @soyCompatible\n */\nexport class SegmentedButtonSet extends LitElement {\n @property({type: Boolean}) multiselect = false;\n\n /** @soyPrefixAttribute */\n @ariaProperty // tslint:disable-line:no-new-decorators\n @property({type: String, attribute: 'aria-label'})\n override ariaLabel!: string;\n\n @queryAssignedElements({flatten: true}) buttons!: SegmentedButton[];\n\n getButtonDisabled(index: number): boolean {\n if (this.indexOutOfBounds(index)) return false;\n return this.buttons[index].disabled;\n }\n\n setButtonDisabled(index: number, disabled: boolean) {\n if (this.indexOutOfBounds(index)) return;\n this.buttons[index].disabled = disabled;\n }\n\n getButtonSelected(index: number): boolean {\n if (this.indexOutOfBounds(index)) return false;\n return this.buttons[index].selected;\n }\n\n setButtonSelected(index: number, selected: boolean) {\n // Ignore out-of-index values.\n if (this.indexOutOfBounds(index)) return;\n // Ignore disabled buttons.\n if (this.getButtonDisabled(index)) return;\n\n if (this.multiselect) {\n this.buttons[index].selected = selected;\n this.emitSelectionEvent(index);\n return;\n }\n\n // Single-select segmented buttons are not unselectable.\n if (!selected) return;\n\n this.buttons[index].selected = true;\n this.emitSelectionEvent(index);\n // Deselect all other buttons for single-select.\n for (let i = 0; i < this.buttons.length; i++) {\n if (i === index) continue;\n this.buttons[i].selected = false;\n }\n }\n\n private handleSegmentedButtonInteraction(e: CustomEvent) {\n const index = this.buttons.indexOf(e.target as SegmentedButton);\n this.toggleSelection(index);\n }\n\n private toggleSelection(index: number) {\n if (this.indexOutOfBounds(index)) return;\n this.setButtonSelected(index, !this.buttons[index].selected);\n }\n\n private indexOutOfBounds(index: number): boolean {\n return index < 0 || index >= this.buttons.length;\n }\n\n private emitSelectionEvent(index: number) {\n this.dispatchEvent(new CustomEvent('segmented-button-set-selection', {\n detail: {\n button: this.buttons[index],\n selected: this.buttons[index].selected,\n index,\n },\n bubbles: true,\n composed: true\n }));\n }\n\n /** @soyTemplate */\n override render(): TemplateResult {\n return html`\n <span\n role=\"group\"\n @segmented-button-interaction=\"${this.handleSegmentedButtonInteraction}\"\n aria-label=\"${ifDefined(this.ariaLabel)}\"\n class=\"md3-segmented-button-set ${classMap(this.getRenderClasses())}\">\n <slot></slot>\n </span>\n `;\n }\n\n /** @soyTemplate */\n protected getRenderClasses(): ClassInfo {\n return {};\n }\n}\n"]}
package/segmentedbuttonset/lib/shared-styles.scss CHANGED
@@ -3,6 +3,8 @@
3
3
  // SPDX-License-Identifier: Apache-2.0
4
4
  //
5
5
 
6
+ // go/keep-sorted start
6
7
  @use './shared';
8
+ // go/keep-sorted end
7
9
 
8
10
  @include shared.styles;
package/segmentedbuttonset/outlined-segmented-button-set.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"outlined-segmented-button-set.js","sourceRoot":"","sources":["outlined-segmented-button-set.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,0BAA0B,EAAC,MAAM,wCAAwC,CAAC;AAClF,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;;;GAMG;AAEH,IAAa,4BAA4B,GAAzC,MAAa,4BAA6B,SAAQ,0BAA0B;CAE3E,CAAA;AADiB,mCAAM,GAAG,CAAC,YAAY,EAAE,cAAc,CAAE,CAAA;AAD7C,4BAA4B;IADxC,aAAa,CAAC,kCAAkC,CAAC;GACrC,4BAA4B,CAExC;SAFY,4BAA4B","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {OutlinedSegmentedButtonSet} from './lib/outlined-segmented-button-set.js';\nimport {styles as outlinedStyles} from './lib/outlined-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-outlined-segmented-button-set': MdOutlinedSegmentedButtonSet;\n }\n}\n\n/**\n * MdOutlinedSegmentedButtonSet is the custom element for the Material\n * Design outlined segmented button set component.\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-segmented-button-set')\nexport class MdOutlinedSegmentedButtonSet extends OutlinedSegmentedButtonSet {\n static override styles = [sharedStyles, outlinedStyles];\n}\n"]}
1
+ {"version":3,"file":"outlined-segmented-button-set.js","sourceRoot":"","sources":["outlined-segmented-button-set.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,0BAA0B,EAAC,MAAM,wCAAwC,CAAC;AAClF,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;;;GAMG;AAEI,IAAM,4BAA4B,GAAlC,MAAM,4BAA6B,SAAQ,0BAA0B;;AAC1D,mCAAM,GAAG,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AAD7C,4BAA4B;IADxC,aAAa,CAAC,kCAAkC,CAAC;GACrC,4BAA4B,CAExC;SAFY,4BAA4B","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {OutlinedSegmentedButtonSet} from './lib/outlined-segmented-button-set.js';\nimport {styles as outlinedStyles} from './lib/outlined-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-outlined-segmented-button-set': MdOutlinedSegmentedButtonSet;\n }\n}\n\n/**\n * MdOutlinedSegmentedButtonSet is the custom element for the Material\n * Design outlined segmented button set component.\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-segmented-button-set')\nexport class MdOutlinedSegmentedButtonSet extends OutlinedSegmentedButtonSet {\n static override styles = [sharedStyles, outlinedStyles];\n}\n"]}
package/{list/lib/listitem/list-item-private-styles.scss → slider/_slider.scss} RENAMED
@@ -3,6 +3,4 @@
3
3
  // SPDX-License-Identifier: Apache-2.0
4
4
  //
5
5
 
6
- @use './list-item';
7
-
8
- @include list-item.private-props;
6
+ @forward './lib/slider' show theme;
package/slider/harness.d.ts ADDED
@@ -0,0 +1,20 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2023 Google LLC
4
+ * SPDX-License-Identifier: Apache-2.0
5
+ */
6
+ import { Harness } from '../testing/harness.js';
7
+ import { Slider } from './lib/slider.js';
8
+ /**
9
+ * Test harness for slider.
10
+ */
11
+ export declare class SliderHarness extends Harness<Slider> {
12
+ getInteractiveElement(): Promise<HTMLInputElement>;
13
+ getInputs(): HTMLInputElement[];
14
+ getHandles(): HTMLDivElement[];
15
+ getLabels(): Element[];
16
+ isLabelShowing(): boolean;
17
+ simulateValueInteraction(value: number, el?: HTMLInputElement): Promise<void>;
18
+ private positionEventAtHandle;
19
+ protected simulateStartHover(element: HTMLElement, init?: PointerEventInit): void;
20
+ }