material-web-evo 10002.10001.10000

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 (1250) hide show
  1. package/LICENSE +202 -0
  2. package/README.md +9 -0
  3. package/all.d.ts +97 -0
  4. package/all.js +106 -0
  5. package/all.js.map +1 -0
  6. package/button/_elevated-button.scss +6 -0
  7. package/button/_filled-button.scss +6 -0
  8. package/button/_filled-tonal-button.scss +6 -0
  9. package/button/_outlined-button.scss +6 -0
  10. package/button/_text-button.scss +6 -0
  11. package/button/elevated-button.d.ts +37 -0
  12. package/button/elevated-button.js +44 -0
  13. package/button/elevated-button.js.map +1 -0
  14. package/button/filled-button.d.ts +35 -0
  15. package/button/filled-button.js +42 -0
  16. package/button/filled-button.js.map +1 -0
  17. package/button/filled-tonal-button.d.ts +36 -0
  18. package/button/filled-tonal-button.js +43 -0
  19. package/button/filled-tonal-button.js.map +1 -0
  20. package/button/harness.d.ts +13 -0
  21. package/button/harness.js +16 -0
  22. package/button/harness.js.map +1 -0
  23. package/button/internal/_elevated-button.scss +37 -0
  24. package/button/internal/_elevation.scss +69 -0
  25. package/button/internal/_filled-button.scss +37 -0
  26. package/button/internal/_filled-tonal-button.scss +37 -0
  27. package/button/internal/_icon.scss +38 -0
  28. package/button/internal/_outlined-button.scss +87 -0
  29. package/button/internal/_shared.scss +178 -0
  30. package/button/internal/_text-button.scss +41 -0
  31. package/button/internal/_touch-target.scss +23 -0
  32. package/button/internal/button.d.ts +81 -0
  33. package/button/internal/button.js +204 -0
  34. package/button/internal/button.js.map +1 -0
  35. package/button/internal/elevated-button.d.ts +13 -0
  36. package/button/internal/elevated-button.js +17 -0
  37. package/button/internal/elevated-button.js.map +1 -0
  38. package/button/internal/elevated-styles.css +1 -0
  39. package/button/internal/elevated-styles.css.map +1 -0
  40. package/button/internal/elevated-styles.d.ts +1 -0
  41. package/button/internal/elevated-styles.js +10 -0
  42. package/button/internal/elevated-styles.js.map +1 -0
  43. package/button/internal/elevated-styles.scss +10 -0
  44. package/button/internal/filled-button.d.ts +13 -0
  45. package/button/internal/filled-button.js +17 -0
  46. package/button/internal/filled-button.js.map +1 -0
  47. package/button/internal/filled-styles.css +1 -0
  48. package/button/internal/filled-styles.css.map +1 -0
  49. package/button/internal/filled-styles.d.ts +1 -0
  50. package/button/internal/filled-styles.js +10 -0
  51. package/button/internal/filled-styles.js.map +1 -0
  52. package/button/internal/filled-styles.scss +10 -0
  53. package/button/internal/filled-tonal-button.d.ts +13 -0
  54. package/button/internal/filled-tonal-button.js +17 -0
  55. package/button/internal/filled-tonal-button.js.map +1 -0
  56. package/button/internal/filled-tonal-styles.css +1 -0
  57. package/button/internal/filled-tonal-styles.css.map +1 -0
  58. package/button/internal/filled-tonal-styles.d.ts +1 -0
  59. package/button/internal/filled-tonal-styles.js +10 -0
  60. package/button/internal/filled-tonal-styles.js.map +1 -0
  61. package/button/internal/filled-tonal-styles.scss +10 -0
  62. package/button/internal/outlined-button.d.ts +12 -0
  63. package/button/internal/outlined-button.js +16 -0
  64. package/button/internal/outlined-button.js.map +1 -0
  65. package/button/internal/outlined-styles.css +1 -0
  66. package/button/internal/outlined-styles.css.map +1 -0
  67. package/button/internal/outlined-styles.d.ts +1 -0
  68. package/button/internal/outlined-styles.js +10 -0
  69. package/button/internal/outlined-styles.js.map +1 -0
  70. package/button/internal/outlined-styles.scss +10 -0
  71. package/button/internal/shared-elevation-styles.css +1 -0
  72. package/button/internal/shared-elevation-styles.css.map +1 -0
  73. package/button/internal/shared-elevation-styles.d.ts +1 -0
  74. package/button/internal/shared-elevation-styles.js +10 -0
  75. package/button/internal/shared-elevation-styles.js.map +1 -0
  76. package/button/internal/shared-elevation-styles.scss +10 -0
  77. package/button/internal/shared-styles.css +1 -0
  78. package/button/internal/shared-styles.css.map +1 -0
  79. package/button/internal/shared-styles.d.ts +1 -0
  80. package/button/internal/shared-styles.js +10 -0
  81. package/button/internal/shared-styles.js.map +1 -0
  82. package/button/internal/shared-styles.scss +14 -0
  83. package/button/internal/text-button.d.ts +11 -0
  84. package/button/internal/text-button.js +12 -0
  85. package/button/internal/text-button.js.map +1 -0
  86. package/button/internal/text-styles.css +1 -0
  87. package/button/internal/text-styles.css.map +1 -0
  88. package/button/internal/text-styles.d.ts +1 -0
  89. package/button/internal/text-styles.js +10 -0
  90. package/button/internal/text-styles.js.map +1 -0
  91. package/button/internal/text-styles.scss +10 -0
  92. package/button/outlined-button.d.ts +37 -0
  93. package/button/outlined-button.js +39 -0
  94. package/button/outlined-button.js.map +1 -0
  95. package/button/text-button.d.ts +35 -0
  96. package/button/text-button.js +37 -0
  97. package/button/text-button.js.map +1 -0
  98. package/checkbox/_checkbox.scss +6 -0
  99. package/checkbox/checkbox.d.ts +28 -0
  100. package/checkbox/checkbox.js +29 -0
  101. package/checkbox/checkbox.js.map +1 -0
  102. package/checkbox/harness.d.ts +13 -0
  103. package/checkbox/harness.js +16 -0
  104. package/checkbox/harness.js.map +1 -0
  105. package/checkbox/internal/_checkbox.scss +392 -0
  106. package/checkbox/internal/checkbox-styles.css +1 -0
  107. package/checkbox/internal/checkbox-styles.css.map +1 -0
  108. package/checkbox/internal/checkbox-styles.d.ts +1 -0
  109. package/checkbox/internal/checkbox-styles.js +10 -0
  110. package/checkbox/internal/checkbox-styles.js.map +1 -0
  111. package/checkbox/internal/checkbox-styles.scss +10 -0
  112. package/checkbox/internal/checkbox.d.ts +72 -0
  113. package/checkbox/internal/checkbox.js +192 -0
  114. package/checkbox/internal/checkbox.js.map +1 -0
  115. package/chips/_assist-chip.scss +6 -0
  116. package/chips/_filter-chip.scss +6 -0
  117. package/chips/_input-chip.scss +6 -0
  118. package/chips/_suggestion-chip.scss +6 -0
  119. package/chips/assist-chip.d.ts +21 -0
  120. package/chips/assist-chip.js +24 -0
  121. package/chips/assist-chip.js.map +1 -0
  122. package/chips/chip-set.d.ts +21 -0
  123. package/chips/chip-set.js +22 -0
  124. package/chips/chip-set.js.map +1 -0
  125. package/chips/filter-chip.d.ts +21 -0
  126. package/chips/filter-chip.js +32 -0
  127. package/chips/filter-chip.js.map +1 -0
  128. package/chips/harness.d.ts +14 -0
  129. package/chips/harness.js +37 -0
  130. package/chips/harness.js.map +1 -0
  131. package/chips/input-chip.d.ts +21 -0
  132. package/chips/input-chip.js +30 -0
  133. package/chips/input-chip.js.map +1 -0
  134. package/chips/internal/_assist-chip.scss +43 -0
  135. package/chips/internal/_chip-set.scss +12 -0
  136. package/chips/internal/_elevated.scss +70 -0
  137. package/chips/internal/_filter-chip.scss +56 -0
  138. package/chips/internal/_input-chip.scss +83 -0
  139. package/chips/internal/_selectable.scss +78 -0
  140. package/chips/internal/_shared.scss +248 -0
  141. package/chips/internal/_suggestion-chip.scss +43 -0
  142. package/chips/internal/_trailing-icon.scss +81 -0
  143. package/chips/internal/assist-chip.d.ts +24 -0
  144. package/chips/internal/assist-chip.js +79 -0
  145. package/chips/internal/assist-chip.js.map +1 -0
  146. package/chips/internal/assist-styles.css +1 -0
  147. package/chips/internal/assist-styles.css.map +1 -0
  148. package/chips/internal/assist-styles.d.ts +1 -0
  149. package/chips/internal/assist-styles.js +10 -0
  150. package/chips/internal/assist-styles.js.map +1 -0
  151. package/chips/internal/assist-styles.scss +10 -0
  152. package/chips/internal/chip-set-styles.css +1 -0
  153. package/chips/internal/chip-set-styles.css.map +1 -0
  154. package/chips/internal/chip-set-styles.d.ts +1 -0
  155. package/chips/internal/chip-set-styles.js +10 -0
  156. package/chips/internal/chip-set-styles.js.map +1 -0
  157. package/chips/internal/chip-set-styles.scss +10 -0
  158. package/chips/internal/chip-set.d.ts +19 -0
  159. package/chips/internal/chip-set.js +128 -0
  160. package/chips/internal/chip-set.js.map +1 -0
  161. package/chips/internal/chip.d.ts +84 -0
  162. package/chips/internal/chip.js +161 -0
  163. package/chips/internal/chip.js.map +1 -0
  164. package/chips/internal/elevated-styles.css +1 -0
  165. package/chips/internal/elevated-styles.css.map +1 -0
  166. package/chips/internal/elevated-styles.d.ts +1 -0
  167. package/chips/internal/elevated-styles.js +10 -0
  168. package/chips/internal/elevated-styles.js.map +1 -0
  169. package/chips/internal/elevated-styles.scss +10 -0
  170. package/chips/internal/filter-chip.d.ts +39 -0
  171. package/chips/internal/filter-chip.js +124 -0
  172. package/chips/internal/filter-chip.js.map +1 -0
  173. package/chips/internal/filter-styles.css +1 -0
  174. package/chips/internal/filter-styles.css.map +1 -0
  175. package/chips/internal/filter-styles.d.ts +1 -0
  176. package/chips/internal/filter-styles.js +10 -0
  177. package/chips/internal/filter-styles.js.map +1 -0
  178. package/chips/internal/filter-styles.scss +10 -0
  179. package/chips/internal/input-chip.d.ts +31 -0
  180. package/chips/internal/input-chip.js +117 -0
  181. package/chips/internal/input-chip.js.map +1 -0
  182. package/chips/internal/input-styles.css +1 -0
  183. package/chips/internal/input-styles.css.map +1 -0
  184. package/chips/internal/input-styles.d.ts +1 -0
  185. package/chips/internal/input-styles.js +10 -0
  186. package/chips/internal/input-styles.js.map +1 -0
  187. package/chips/internal/input-styles.scss +10 -0
  188. package/chips/internal/multi-action-chip.d.ts +23 -0
  189. package/chips/internal/multi-action-chip.js +99 -0
  190. package/chips/internal/multi-action-chip.js.map +1 -0
  191. package/chips/internal/selectable-styles.css +1 -0
  192. package/chips/internal/selectable-styles.css.map +1 -0
  193. package/chips/internal/selectable-styles.d.ts +1 -0
  194. package/chips/internal/selectable-styles.js +10 -0
  195. package/chips/internal/selectable-styles.js.map +1 -0
  196. package/chips/internal/selectable-styles.scss +10 -0
  197. package/chips/internal/shared-styles.css +1 -0
  198. package/chips/internal/shared-styles.css.map +1 -0
  199. package/chips/internal/shared-styles.d.ts +1 -0
  200. package/chips/internal/shared-styles.js +10 -0
  201. package/chips/internal/shared-styles.js.map +1 -0
  202. package/chips/internal/shared-styles.scss +10 -0
  203. package/chips/internal/suggestion-chip.d.ts +11 -0
  204. package/chips/internal/suggestion-chip.js +14 -0
  205. package/chips/internal/suggestion-chip.js.map +1 -0
  206. package/chips/internal/suggestion-styles.css +1 -0
  207. package/chips/internal/suggestion-styles.css.map +1 -0
  208. package/chips/internal/suggestion-styles.d.ts +1 -0
  209. package/chips/internal/suggestion-styles.js +10 -0
  210. package/chips/internal/suggestion-styles.js.map +1 -0
  211. package/chips/internal/suggestion-styles.scss +10 -0
  212. package/chips/internal/trailing-icon-styles.css +1 -0
  213. package/chips/internal/trailing-icon-styles.css.map +1 -0
  214. package/chips/internal/trailing-icon-styles.d.ts +1 -0
  215. package/chips/internal/trailing-icon-styles.js +10 -0
  216. package/chips/internal/trailing-icon-styles.js.map +1 -0
  217. package/chips/internal/trailing-icon-styles.scss +10 -0
  218. package/chips/internal/trailing-icons.d.ts +16 -0
  219. package/chips/internal/trailing-icons.js +48 -0
  220. package/chips/internal/trailing-icons.js.map +1 -0
  221. package/chips/suggestion-chip.d.ts +21 -0
  222. package/chips/suggestion-chip.js +24 -0
  223. package/chips/suggestion-chip.js.map +1 -0
  224. package/color/_color.scss +197 -0
  225. package/common.d.ts +59 -0
  226. package/common.js +68 -0
  227. package/common.js.map +1 -0
  228. package/dialog/_dialog.scss +6 -0
  229. package/dialog/dialog.d.ts +42 -0
  230. package/dialog/dialog.js +43 -0
  231. package/dialog/dialog.js.map +1 -0
  232. package/dialog/harness.d.ts +13 -0
  233. package/dialog/harness.js +16 -0
  234. package/dialog/harness.js.map +1 -0
  235. package/dialog/internal/_dialog.scss +248 -0
  236. package/dialog/internal/animations.d.ts +47 -0
  237. package/dialog/internal/animations.js +119 -0
  238. package/dialog/internal/animations.js.map +1 -0
  239. package/dialog/internal/dialog-styles.css +1 -0
  240. package/dialog/internal/dialog-styles.css.map +1 -0
  241. package/dialog/internal/dialog-styles.d.ts +1 -0
  242. package/dialog/internal/dialog-styles.js +10 -0
  243. package/dialog/internal/dialog-styles.js.map +1 -0
  244. package/dialog/internal/dialog-styles.scss +10 -0
  245. package/dialog/internal/dialog.d.ts +131 -0
  246. package/dialog/internal/dialog.js +556 -0
  247. package/dialog/internal/dialog.js.map +1 -0
  248. package/divider/_divider.scss +6 -0
  249. package/divider/divider.d.ts +25 -0
  250. package/divider/divider.js +26 -0
  251. package/divider/divider.js.map +1 -0
  252. package/divider/internal/_divider.scss +61 -0
  253. package/divider/internal/divider-styles.css +1 -0
  254. package/divider/internal/divider-styles.css.map +1 -0
  255. package/divider/internal/divider-styles.d.ts +1 -0
  256. package/divider/internal/divider-styles.js +10 -0
  257. package/divider/internal/divider-styles.js.map +1 -0
  258. package/divider/internal/divider-styles.scss +10 -0
  259. package/divider/internal/divider.d.ts +23 -0
  260. package/divider/internal/divider.js +38 -0
  261. package/divider/internal/divider.js.map +1 -0
  262. package/elevation/_elevation.scss +6 -0
  263. package/elevation/elevation.d.ts +23 -0
  264. package/elevation/elevation.js +24 -0
  265. package/elevation/elevation.js.map +1 -0
  266. package/elevation/internal/_elevation.scss +176 -0
  267. package/elevation/internal/elevation-styles.css +1 -0
  268. package/elevation/internal/elevation-styles.css.map +1 -0
  269. package/elevation/internal/elevation-styles.d.ts +1 -0
  270. package/elevation/internal/elevation-styles.js +10 -0
  271. package/elevation/internal/elevation-styles.js.map +1 -0
  272. package/elevation/internal/elevation-styles.scss +10 -0
  273. package/elevation/internal/elevation.d.ts +13 -0
  274. package/elevation/internal/elevation.js +21 -0
  275. package/elevation/internal/elevation.js.map +1 -0
  276. package/fab/_fab.scss +7 -0
  277. package/fab/branded-fab.d.ts +57 -0
  278. package/fab/branded-fab.js +55 -0
  279. package/fab/branded-fab.js.map +1 -0
  280. package/fab/fab.d.ts +44 -0
  281. package/fab/fab.js +45 -0
  282. package/fab/fab.js.map +1 -0
  283. package/fab/harness.d.ts +13 -0
  284. package/fab/harness.js +16 -0
  285. package/fab/harness.js.map +1 -0
  286. package/fab/internal/_fab-branded.scss +37 -0
  287. package/fab/internal/_fab.scss +206 -0
  288. package/fab/internal/_shared.scss +248 -0
  289. package/fab/internal/fab-branded-styles.css +1 -0
  290. package/fab/internal/fab-branded-styles.css.map +1 -0
  291. package/fab/internal/fab-branded-styles.d.ts +1 -0
  292. package/fab/internal/fab-branded-styles.js +10 -0
  293. package/fab/internal/fab-branded-styles.js.map +1 -0
  294. package/fab/internal/fab-branded-styles.scss +10 -0
  295. package/fab/internal/fab-styles.css +1 -0
  296. package/fab/internal/fab-styles.css.map +1 -0
  297. package/fab/internal/fab-styles.d.ts +1 -0
  298. package/fab/internal/fab-styles.js +10 -0
  299. package/fab/internal/fab-styles.js.map +1 -0
  300. package/fab/internal/fab-styles.scss +10 -0
  301. package/fab/internal/fab.d.ts +25 -0
  302. package/fab/internal/fab.js +30 -0
  303. package/fab/internal/fab.js.map +1 -0
  304. package/fab/internal/forced-colors-styles.css +1 -0
  305. package/fab/internal/forced-colors-styles.css.map +1 -0
  306. package/fab/internal/forced-colors-styles.d.ts +1 -0
  307. package/fab/internal/forced-colors-styles.js +10 -0
  308. package/fab/internal/forced-colors-styles.js.map +1 -0
  309. package/fab/internal/forced-colors-styles.scss +29 -0
  310. package/fab/internal/shared-styles.css +1 -0
  311. package/fab/internal/shared-styles.css.map +1 -0
  312. package/fab/internal/shared-styles.d.ts +1 -0
  313. package/fab/internal/shared-styles.js +10 -0
  314. package/fab/internal/shared-styles.js.map +1 -0
  315. package/fab/internal/shared-styles.scss +10 -0
  316. package/fab/internal/shared.d.ts +44 -0
  317. package/fab/internal/shared.js +92 -0
  318. package/fab/internal/shared.js.map +1 -0
  319. package/field/_filled-field.scss +6 -0
  320. package/field/_outlined-field.scss +6 -0
  321. package/field/filled-field.d.ts +20 -0
  322. package/field/filled-field.js +22 -0
  323. package/field/filled-field.js.map +1 -0
  324. package/field/harness.d.ts +16 -0
  325. package/field/harness.js +29 -0
  326. package/field/harness.js.map +1 -0
  327. package/field/internal/_content.scss +208 -0
  328. package/field/internal/_filled-field.scss +208 -0
  329. package/field/internal/_label.scss +102 -0
  330. package/field/internal/_outlined-field.scss +344 -0
  331. package/field/internal/_shared.scss +78 -0
  332. package/field/internal/_supporting-text.scss +61 -0
  333. package/field/internal/field.d.ts +67 -0
  334. package/field/internal/field.js +357 -0
  335. package/field/internal/field.js.map +1 -0
  336. package/field/internal/filled-field.d.ts +13 -0
  337. package/field/internal/filled-field.js +22 -0
  338. package/field/internal/filled-field.js.map +1 -0
  339. package/field/internal/filled-styles.css +1 -0
  340. package/field/internal/filled-styles.css.map +1 -0
  341. package/field/internal/filled-styles.d.ts +1 -0
  342. package/field/internal/filled-styles.js +10 -0
  343. package/field/internal/filled-styles.js.map +1 -0
  344. package/field/internal/filled-styles.scss +8 -0
  345. package/field/internal/outlined-field.d.ts +12 -0
  346. package/field/internal/outlined-field.js +26 -0
  347. package/field/internal/outlined-field.js.map +1 -0
  348. package/field/internal/outlined-styles.css +1 -0
  349. package/field/internal/outlined-styles.css.map +1 -0
  350. package/field/internal/outlined-styles.d.ts +1 -0
  351. package/field/internal/outlined-styles.js +10 -0
  352. package/field/internal/outlined-styles.js.map +1 -0
  353. package/field/internal/outlined-styles.scss +7 -0
  354. package/field/internal/shared-styles.css +1 -0
  355. package/field/internal/shared-styles.css.map +1 -0
  356. package/field/internal/shared-styles.d.ts +1 -0
  357. package/field/internal/shared-styles.js +10 -0
  358. package/field/internal/shared-styles.js.map +1 -0
  359. package/field/internal/shared-styles.scss +8 -0
  360. package/field/outlined-field.d.ts +20 -0
  361. package/field/outlined-field.js +22 -0
  362. package/field/outlined-field.js.map +1 -0
  363. package/focus/_focus-ring.scss +6 -0
  364. package/focus/internal/_focus-ring.scss +113 -0
  365. package/focus/internal/focus-ring-styles.css +1 -0
  366. package/focus/internal/focus-ring-styles.css.map +1 -0
  367. package/focus/internal/focus-ring-styles.d.ts +1 -0
  368. package/focus/internal/focus-ring-styles.js +10 -0
  369. package/focus/internal/focus-ring-styles.js.map +1 -0
  370. package/focus/internal/focus-ring-styles.scss +10 -0
  371. package/focus/internal/focus-ring.d.ts +39 -0
  372. package/focus/internal/focus-ring.js +100 -0
  373. package/focus/internal/focus-ring.js.map +1 -0
  374. package/focus/md-focus-ring.d.ts +21 -0
  375. package/focus/md-focus-ring.js +22 -0
  376. package/focus/md-focus-ring.js.map +1 -0
  377. package/icon/_icon.scss +6 -0
  378. package/icon/icon.d.ts +20 -0
  379. package/icon/icon.js +21 -0
  380. package/icon/icon.js.map +1 -0
  381. package/icon/internal/_icon.scss +76 -0
  382. package/icon/internal/icon-styles.css +1 -0
  383. package/icon/internal/icon-styles.css.map +1 -0
  384. package/icon/internal/icon-styles.d.ts +1 -0
  385. package/icon/internal/icon-styles.js +10 -0
  386. package/icon/internal/icon-styles.js.map +1 -0
  387. package/icon/internal/icon-styles.scss +10 -0
  388. package/icon/internal/icon.d.ts +13 -0
  389. package/icon/internal/icon.js +28 -0
  390. package/icon/internal/icon.js.map +1 -0
  391. package/iconbutton/_filled-icon-button.scss +6 -0
  392. package/iconbutton/_filled-tonal-icon-button.scss +6 -0
  393. package/iconbutton/_icon-button.scss +6 -0
  394. package/iconbutton/_outlined-icon-button.scss +6 -0
  395. package/iconbutton/filled-icon-button.d.ts +39 -0
  396. package/iconbutton/filled-icon-button.js +42 -0
  397. package/iconbutton/filled-icon-button.js.map +1 -0
  398. package/iconbutton/filled-tonal-icon-button.d.ts +39 -0
  399. package/iconbutton/filled-tonal-icon-button.js +42 -0
  400. package/iconbutton/filled-tonal-icon-button.js.map +1 -0
  401. package/iconbutton/harness.d.ts +13 -0
  402. package/iconbutton/harness.js +19 -0
  403. package/iconbutton/harness.js.map +1 -0
  404. package/iconbutton/icon-button.d.ts +38 -0
  405. package/iconbutton/icon-button.js +41 -0
  406. package/iconbutton/icon-button.js.map +1 -0
  407. package/iconbutton/internal/_filled-icon-button.scss +146 -0
  408. package/iconbutton/internal/_filled-tonal-icon-button.scss +146 -0
  409. package/iconbutton/internal/_icon-button.scss +131 -0
  410. package/iconbutton/internal/_outlined-icon-button.scss +157 -0
  411. package/iconbutton/internal/_shared.scss +117 -0
  412. package/iconbutton/internal/filled-styles.css +1 -0
  413. package/iconbutton/internal/filled-styles.css.map +1 -0
  414. package/iconbutton/internal/filled-styles.d.ts +1 -0
  415. package/iconbutton/internal/filled-styles.js +10 -0
  416. package/iconbutton/internal/filled-styles.js.map +1 -0
  417. package/iconbutton/internal/filled-styles.scss +10 -0
  418. package/iconbutton/internal/filled-tonal-styles.css +1 -0
  419. package/iconbutton/internal/filled-tonal-styles.css.map +1 -0
  420. package/iconbutton/internal/filled-tonal-styles.d.ts +1 -0
  421. package/iconbutton/internal/filled-tonal-styles.js +10 -0
  422. package/iconbutton/internal/filled-tonal-styles.js.map +1 -0
  423. package/iconbutton/internal/filled-tonal-styles.scss +10 -0
  424. package/iconbutton/internal/icon-button.d.ts +106 -0
  425. package/iconbutton/internal/icon-button.js +260 -0
  426. package/iconbutton/internal/icon-button.js.map +1 -0
  427. package/iconbutton/internal/outlined-styles.css +1 -0
  428. package/iconbutton/internal/outlined-styles.css.map +1 -0
  429. package/iconbutton/internal/outlined-styles.d.ts +1 -0
  430. package/iconbutton/internal/outlined-styles.js +10 -0
  431. package/iconbutton/internal/outlined-styles.js.map +1 -0
  432. package/iconbutton/internal/outlined-styles.scss +10 -0
  433. package/iconbutton/internal/shared-styles.css +1 -0
  434. package/iconbutton/internal/shared-styles.css.map +1 -0
  435. package/iconbutton/internal/shared-styles.d.ts +1 -0
  436. package/iconbutton/internal/shared-styles.js +10 -0
  437. package/iconbutton/internal/shared-styles.js.map +1 -0
  438. package/iconbutton/internal/shared-styles.scss +10 -0
  439. package/iconbutton/internal/standard-styles.css +1 -0
  440. package/iconbutton/internal/standard-styles.css.map +1 -0
  441. package/iconbutton/internal/standard-styles.d.ts +1 -0
  442. package/iconbutton/internal/standard-styles.js +10 -0
  443. package/iconbutton/internal/standard-styles.js.map +1 -0
  444. package/iconbutton/internal/standard-styles.scss +10 -0
  445. package/iconbutton/outlined-icon-button.d.ts +38 -0
  446. package/iconbutton/outlined-icon-button.js +41 -0
  447. package/iconbutton/outlined-icon-button.js.map +1 -0
  448. package/internal/aria/aria.d.ts +103 -0
  449. package/internal/aria/aria.js +81 -0
  450. package/internal/aria/aria.js.map +1 -0
  451. package/internal/aria/delegate.d.ts +54 -0
  452. package/internal/aria/delegate.js +176 -0
  453. package/internal/aria/delegate.js.map +1 -0
  454. package/internal/controller/attachable-controller.d.ts +114 -0
  455. package/internal/controller/attachable-controller.js +121 -0
  456. package/internal/controller/attachable-controller.js.map +1 -0
  457. package/internal/controller/form-submitter.d.ts +70 -0
  458. package/internal/controller/form-submitter.js +69 -0
  459. package/internal/controller/form-submitter.js.map +1 -0
  460. package/internal/controller/is-rtl.d.ts +14 -0
  461. package/internal/controller/is-rtl.js +18 -0
  462. package/internal/controller/is-rtl.js.map +1 -0
  463. package/internal/controller/string-converter.d.ts +9 -0
  464. package/internal/controller/string-converter.js +14 -0
  465. package/internal/controller/string-converter.js.map +1 -0
  466. package/internal/events/dispatch-hooks.d.ts +85 -0
  467. package/internal/events/dispatch-hooks.js +151 -0
  468. package/internal/events/dispatch-hooks.js.map +1 -0
  469. package/internal/events/form-label-activation.d.ts +55 -0
  470. package/internal/events/form-label-activation.js +96 -0
  471. package/internal/events/form-label-activation.js.map +1 -0
  472. package/internal/events/redispatch-event.d.ts +27 -0
  473. package/internal/events/redispatch-event.js +40 -0
  474. package/internal/events/redispatch-event.js.map +1 -0
  475. package/internal/motion/_animation.scss +33 -0
  476. package/internal/motion/animation.d.ts +80 -0
  477. package/internal/motion/animation.js +101 -0
  478. package/internal/motion/animation.js.map +1 -0
  479. package/internal/sass/_string-ext.scss +195 -0
  480. package/internal/sass/_var.scss +237 -0
  481. package/labs/badge/_badge.scss +6 -0
  482. package/labs/badge/badge.d.ts +19 -0
  483. package/labs/badge/badge.js +20 -0
  484. package/labs/badge/badge.js.map +1 -0
  485. package/labs/badge/internal/_badge.scss +76 -0
  486. package/labs/badge/internal/badge-styles.css +1 -0
  487. package/labs/badge/internal/badge-styles.css.map +1 -0
  488. package/labs/badge/internal/badge-styles.d.ts +1 -0
  489. package/labs/badge/internal/badge-styles.js +10 -0
  490. package/labs/badge/internal/badge-styles.js.map +1 -0
  491. package/labs/badge/internal/badge-styles.scss +10 -0
  492. package/labs/badge/internal/badge.d.ts +13 -0
  493. package/labs/badge/internal/badge.js +28 -0
  494. package/labs/badge/internal/badge.js.map +1 -0
  495. package/labs/behaviors/constraint-validation.d.ts +133 -0
  496. package/labs/behaviors/constraint-validation.js +131 -0
  497. package/labs/behaviors/constraint-validation.js.map +1 -0
  498. package/labs/behaviors/element-internals.d.ts +45 -0
  499. package/labs/behaviors/element-internals.js +46 -0
  500. package/labs/behaviors/element-internals.js.map +1 -0
  501. package/labs/behaviors/focusable.d.ts +39 -0
  502. package/labs/behaviors/focusable.js +87 -0
  503. package/labs/behaviors/focusable.js.map +1 -0
  504. package/labs/behaviors/form-associated.d.ts +199 -0
  505. package/labs/behaviors/form-associated.js +175 -0
  506. package/labs/behaviors/form-associated.js.map +1 -0
  507. package/labs/behaviors/mixin.d.ts +54 -0
  508. package/labs/behaviors/mixin.js +7 -0
  509. package/labs/behaviors/mixin.js.map +1 -0
  510. package/labs/behaviors/on-report-validity.d.ts +71 -0
  511. package/labs/behaviors/on-report-validity.js +289 -0
  512. package/labs/behaviors/on-report-validity.js.map +1 -0
  513. package/labs/behaviors/validators/checkbox-validator.d.ts +35 -0
  514. package/labs/behaviors/validators/checkbox-validator.js +32 -0
  515. package/labs/behaviors/validators/checkbox-validator.js.map +1 -0
  516. package/labs/behaviors/validators/radio-validator.d.ts +38 -0
  517. package/labs/behaviors/validators/radio-validator.js +65 -0
  518. package/labs/behaviors/validators/radio-validator.js.map +1 -0
  519. package/labs/behaviors/validators/select-validator.d.ts +35 -0
  520. package/labs/behaviors/validators/select-validator.js +33 -0
  521. package/labs/behaviors/validators/select-validator.js.map +1 -0
  522. package/labs/behaviors/validators/text-field-validator.d.ts +110 -0
  523. package/labs/behaviors/validators/text-field-validator.js +154 -0
  524. package/labs/behaviors/validators/text-field-validator.js.map +1 -0
  525. package/labs/behaviors/validators/validator.d.ts +96 -0
  526. package/labs/behaviors/validators/validator.js +73 -0
  527. package/labs/behaviors/validators/validator.js.map +1 -0
  528. package/labs/card/_elevated-card.scss +6 -0
  529. package/labs/card/_filled-card.scss +6 -0
  530. package/labs/card/_outlined-card.scss +6 -0
  531. package/labs/card/elevated-card.d.ts +19 -0
  532. package/labs/card/elevated-card.js +21 -0
  533. package/labs/card/elevated-card.js.map +1 -0
  534. package/labs/card/filled-card.d.ts +19 -0
  535. package/labs/card/filled-card.js +21 -0
  536. package/labs/card/filled-card.js.map +1 -0
  537. package/labs/card/internal/_elevated-card.scss +35 -0
  538. package/labs/card/internal/_filled-card.scss +35 -0
  539. package/labs/card/internal/_outlined-card.scss +40 -0
  540. package/labs/card/internal/_shared.scss +62 -0
  541. package/labs/card/internal/card.d.ts +13 -0
  542. package/labs/card/internal/card.js +21 -0
  543. package/labs/card/internal/card.js.map +1 -0
  544. package/labs/card/internal/elevated-styles.css +1 -0
  545. package/labs/card/internal/elevated-styles.css.map +1 -0
  546. package/labs/card/internal/elevated-styles.d.ts +1 -0
  547. package/labs/card/internal/elevated-styles.js +10 -0
  548. package/labs/card/internal/elevated-styles.js.map +1 -0
  549. package/labs/card/internal/elevated-styles.scss +10 -0
  550. package/labs/card/internal/filled-styles.css +1 -0
  551. package/labs/card/internal/filled-styles.css.map +1 -0
  552. package/labs/card/internal/filled-styles.d.ts +1 -0
  553. package/labs/card/internal/filled-styles.js +10 -0
  554. package/labs/card/internal/filled-styles.js.map +1 -0
  555. package/labs/card/internal/filled-styles.scss +10 -0
  556. package/labs/card/internal/outlined-styles.css +1 -0
  557. package/labs/card/internal/outlined-styles.css.map +1 -0
  558. package/labs/card/internal/outlined-styles.d.ts +1 -0
  559. package/labs/card/internal/outlined-styles.js +10 -0
  560. package/labs/card/internal/outlined-styles.js.map +1 -0
  561. package/labs/card/internal/outlined-styles.scss +10 -0
  562. package/labs/card/internal/shared-styles.css +1 -0
  563. package/labs/card/internal/shared-styles.css.map +1 -0
  564. package/labs/card/internal/shared-styles.d.ts +1 -0
  565. package/labs/card/internal/shared-styles.js +10 -0
  566. package/labs/card/internal/shared-styles.js.map +1 -0
  567. package/labs/card/internal/shared-styles.scss +10 -0
  568. package/labs/card/outlined-card.d.ts +19 -0
  569. package/labs/card/outlined-card.js +21 -0
  570. package/labs/card/outlined-card.js.map +1 -0
  571. package/labs/item/internal/_item.scss +99 -0
  572. package/labs/item/internal/item-styles.css +1 -0
  573. package/labs/item/internal/item-styles.css.map +1 -0
  574. package/labs/item/internal/item-styles.d.ts +1 -0
  575. package/labs/item/internal/item-styles.js +10 -0
  576. package/labs/item/internal/item-styles.js.map +1 -0
  577. package/labs/item/internal/item-styles.scss +10 -0
  578. package/labs/item/internal/item.d.ts +22 -0
  579. package/labs/item/internal/item.js +78 -0
  580. package/labs/item/internal/item.js.map +1 -0
  581. package/labs/item/item.d.ts +74 -0
  582. package/labs/item/item.js +75 -0
  583. package/labs/item/item.js.map +1 -0
  584. package/labs/navigationbar/_navigation-bar.scss +6 -0
  585. package/labs/navigationbar/harness.d.ts +19 -0
  586. package/labs/navigationbar/harness.js +29 -0
  587. package/labs/navigationbar/harness.js.map +1 -0
  588. package/labs/navigationbar/internal/_navigation-bar.scss +70 -0
  589. package/labs/navigationbar/internal/constants.d.ts +17 -0
  590. package/labs/navigationbar/internal/constants.js +7 -0
  591. package/labs/navigationbar/internal/constants.js.map +1 -0
  592. package/labs/navigationbar/internal/navigation-bar-styles.css +1 -0
  593. package/labs/navigationbar/internal/navigation-bar-styles.css.map +1 -0
  594. package/labs/navigationbar/internal/navigation-bar-styles.d.ts +1 -0
  595. package/labs/navigationbar/internal/navigation-bar-styles.js +10 -0
  596. package/labs/navigationbar/internal/navigation-bar-styles.js.map +1 -0
  597. package/labs/navigationbar/internal/navigation-bar-styles.scss +10 -0
  598. package/labs/navigationbar/internal/navigation-bar.d.ts +32 -0
  599. package/labs/navigationbar/internal/navigation-bar.js +144 -0
  600. package/labs/navigationbar/internal/navigation-bar.js.map +1 -0
  601. package/labs/navigationbar/internal/state.d.ts +23 -0
  602. package/labs/navigationbar/internal/state.js +7 -0
  603. package/labs/navigationbar/internal/state.js.map +1 -0
  604. package/labs/navigationbar/navigation-bar.d.ts +19 -0
  605. package/labs/navigationbar/navigation-bar.js +20 -0
  606. package/labs/navigationbar/navigation-bar.js.map +1 -0
  607. package/labs/navigationdrawer/_navigation-drawer-modal.scss +6 -0
  608. package/labs/navigationdrawer/_navigation-drawer.scss +6 -0
  609. package/labs/navigationdrawer/internal/_navigation-drawer-modal.scss +110 -0
  610. package/labs/navigationdrawer/internal/_navigation-drawer.scss +97 -0
  611. package/labs/navigationdrawer/internal/_shared.scss +31 -0
  612. package/labs/navigationdrawer/internal/navigation-drawer-modal-styles.css +1 -0
  613. package/labs/navigationdrawer/internal/navigation-drawer-modal-styles.css.map +1 -0
  614. package/labs/navigationdrawer/internal/navigation-drawer-modal-styles.d.ts +1 -0
  615. package/labs/navigationdrawer/internal/navigation-drawer-modal-styles.js +10 -0
  616. package/labs/navigationdrawer/internal/navigation-drawer-modal-styles.js.map +1 -0
  617. package/labs/navigationdrawer/internal/navigation-drawer-modal-styles.scss +10 -0
  618. package/labs/navigationdrawer/internal/navigation-drawer-modal.d.ts +24 -0
  619. package/labs/navigationdrawer/internal/navigation-drawer-modal.js +87 -0
  620. package/labs/navigationdrawer/internal/navigation-drawer-modal.js.map +1 -0
  621. package/labs/navigationdrawer/internal/navigation-drawer-styles.css +1 -0
  622. package/labs/navigationdrawer/internal/navigation-drawer-styles.css.map +1 -0
  623. package/labs/navigationdrawer/internal/navigation-drawer-styles.d.ts +1 -0
  624. package/labs/navigationdrawer/internal/navigation-drawer-styles.js +10 -0
  625. package/labs/navigationdrawer/internal/navigation-drawer-styles.js.map +1 -0
  626. package/labs/navigationdrawer/internal/navigation-drawer-styles.scss +10 -0
  627. package/labs/navigationdrawer/internal/navigation-drawer.d.ts +22 -0
  628. package/labs/navigationdrawer/internal/navigation-drawer.js +70 -0
  629. package/labs/navigationdrawer/internal/navigation-drawer.js.map +1 -0
  630. package/labs/navigationdrawer/internal/shared-styles.css +1 -0
  631. package/labs/navigationdrawer/internal/shared-styles.css.map +1 -0
  632. package/labs/navigationdrawer/internal/shared-styles.d.ts +1 -0
  633. package/labs/navigationdrawer/internal/shared-styles.js +10 -0
  634. package/labs/navigationdrawer/internal/shared-styles.js.map +1 -0
  635. package/labs/navigationdrawer/internal/shared-styles.scss +10 -0
  636. package/labs/navigationdrawer/navigation-drawer-modal.d.ts +18 -0
  637. package/labs/navigationdrawer/navigation-drawer-modal.js +21 -0
  638. package/labs/navigationdrawer/navigation-drawer-modal.js.map +1 -0
  639. package/labs/navigationdrawer/navigation-drawer.d.ts +18 -0
  640. package/labs/navigationdrawer/navigation-drawer.js +21 -0
  641. package/labs/navigationdrawer/navigation-drawer.js.map +1 -0
  642. package/labs/navigationtab/_navigation-tab.scss +6 -0
  643. package/labs/navigationtab/harness.d.ts +13 -0
  644. package/labs/navigationtab/harness.js +16 -0
  645. package/labs/navigationtab/harness.js.map +1 -0
  646. package/labs/navigationtab/internal/_navigation-tab.scss +264 -0
  647. package/labs/navigationtab/internal/navigation-tab-styles.css +1 -0
  648. package/labs/navigationtab/internal/navigation-tab-styles.css.map +1 -0
  649. package/labs/navigationtab/internal/navigation-tab-styles.d.ts +1 -0
  650. package/labs/navigationtab/internal/navigation-tab-styles.js +10 -0
  651. package/labs/navigationtab/internal/navigation-tab-styles.js.map +1 -0
  652. package/labs/navigationtab/internal/navigation-tab-styles.scss +10 -0
  653. package/labs/navigationtab/internal/navigation-tab.d.ts +38 -0
  654. package/labs/navigationtab/internal/navigation-tab.js +132 -0
  655. package/labs/navigationtab/internal/navigation-tab.js.map +1 -0
  656. package/labs/navigationtab/internal/state.d.ts +18 -0
  657. package/labs/navigationtab/internal/state.js +7 -0
  658. package/labs/navigationtab/internal/state.js.map +1 -0
  659. package/labs/navigationtab/navigation-tab.d.ts +19 -0
  660. package/labs/navigationtab/navigation-tab.js +20 -0
  661. package/labs/navigationtab/navigation-tab.js.map +1 -0
  662. package/labs/segmentedbutton/internal/_outlined-segmented-button.scss +42 -0
  663. package/labs/segmentedbutton/internal/_shared.scss +361 -0
  664. package/labs/segmentedbutton/internal/outlined-segmented-button.d.ts +24 -0
  665. package/labs/segmentedbutton/internal/outlined-segmented-button.js +22 -0
  666. package/labs/segmentedbutton/internal/outlined-segmented-button.js.map +1 -0
  667. package/labs/segmentedbutton/internal/outlined-styles.css +1 -0
  668. package/labs/segmentedbutton/internal/outlined-styles.css.map +1 -0
  669. package/labs/segmentedbutton/internal/outlined-styles.d.ts +1 -0
  670. package/labs/segmentedbutton/internal/outlined-styles.js +10 -0
  671. package/labs/segmentedbutton/internal/outlined-styles.js.map +1 -0
  672. package/labs/segmentedbutton/internal/outlined-styles.scss +10 -0
  673. package/labs/segmentedbutton/internal/segmented-button.d.ts +49 -0
  674. package/labs/segmentedbutton/internal/segmented-button.js +170 -0
  675. package/labs/segmentedbutton/internal/segmented-button.js.map +1 -0
  676. package/labs/segmentedbutton/internal/shared-styles.css +1 -0
  677. package/labs/segmentedbutton/internal/shared-styles.css.map +1 -0
  678. package/labs/segmentedbutton/internal/shared-styles.d.ts +1 -0
  679. package/labs/segmentedbutton/internal/shared-styles.js +10 -0
  680. package/labs/segmentedbutton/internal/shared-styles.js.map +1 -0
  681. package/labs/segmentedbutton/internal/shared-styles.scss +10 -0
  682. package/labs/segmentedbutton/outlined-segmented-button.d.ts +21 -0
  683. package/labs/segmentedbutton/outlined-segmented-button.js +23 -0
  684. package/labs/segmentedbutton/outlined-segmented-button.js.map +1 -0
  685. package/labs/segmentedbuttonset/internal/_outlined-segmented-button-set.scss +40 -0
  686. package/labs/segmentedbuttonset/internal/_shared.scss +33 -0
  687. package/labs/segmentedbuttonset/internal/outlined-segmented-button-set.d.ts +14 -0
  688. package/labs/segmentedbuttonset/internal/outlined-segmented-button-set.js +18 -0
  689. package/labs/segmentedbuttonset/internal/outlined-segmented-button-set.js.map +1 -0
  690. package/labs/segmentedbuttonset/internal/outlined-styles.css +1 -0
  691. package/labs/segmentedbuttonset/internal/outlined-styles.css.map +1 -0
  692. package/labs/segmentedbuttonset/internal/outlined-styles.d.ts +1 -0
  693. package/labs/segmentedbuttonset/internal/outlined-styles.js +10 -0
  694. package/labs/segmentedbuttonset/internal/outlined-styles.js.map +1 -0
  695. package/labs/segmentedbuttonset/internal/outlined-styles.scss +10 -0
  696. package/labs/segmentedbuttonset/internal/segmented-button-set.d.ts +33 -0
  697. package/labs/segmentedbuttonset/internal/segmented-button-set.js +112 -0
  698. package/labs/segmentedbuttonset/internal/segmented-button-set.js.map +1 -0
  699. package/labs/segmentedbuttonset/internal/shared-styles.css +1 -0
  700. package/labs/segmentedbuttonset/internal/shared-styles.css.map +1 -0
  701. package/labs/segmentedbuttonset/internal/shared-styles.d.ts +1 -0
  702. package/labs/segmentedbuttonset/internal/shared-styles.js +10 -0
  703. package/labs/segmentedbuttonset/internal/shared-styles.js.map +1 -0
  704. package/labs/segmentedbuttonset/internal/shared-styles.scss +10 -0
  705. package/labs/segmentedbuttonset/outlined-segmented-button-set.d.ts +21 -0
  706. package/labs/segmentedbuttonset/outlined-segmented-button-set.js +23 -0
  707. package/labs/segmentedbuttonset/outlined-segmented-button-set.js.map +1 -0
  708. package/list/_list-item.scss +6 -0
  709. package/list/_list.scss +6 -0
  710. package/list/harness.d.ts +45 -0
  711. package/list/harness.js +49 -0
  712. package/list/harness.js.map +1 -0
  713. package/list/internal/_list.scss +43 -0
  714. package/list/internal/list-controller.d.ts +114 -0
  715. package/list/internal/list-controller.js +186 -0
  716. package/list/internal/list-controller.js.map +1 -0
  717. package/list/internal/list-navigation-helpers.d.ts +136 -0
  718. package/list/internal/list-navigation-helpers.js +230 -0
  719. package/list/internal/list-navigation-helpers.js.map +1 -0
  720. package/list/internal/list-styles.css +1 -0
  721. package/list/internal/list-styles.css.map +1 -0
  722. package/list/internal/list-styles.d.ts +1 -0
  723. package/list/internal/list-styles.js +10 -0
  724. package/list/internal/list-styles.js.map +1 -0
  725. package/list/internal/list-styles.scss +10 -0
  726. package/list/internal/list.d.ts +44 -0
  727. package/list/internal/list.js +71 -0
  728. package/list/internal/list.js.map +1 -0
  729. package/list/internal/listitem/_list-item.scss +163 -0
  730. package/list/internal/listitem/harness.d.ts +27 -0
  731. package/list/internal/listitem/harness.js +25 -0
  732. package/list/internal/listitem/harness.js.map +1 -0
  733. package/list/internal/listitem/list-item-styles.css +1 -0
  734. package/list/internal/listitem/list-item-styles.css.map +1 -0
  735. package/list/internal/listitem/list-item-styles.d.ts +1 -0
  736. package/list/internal/listitem/list-item-styles.js +10 -0
  737. package/list/internal/listitem/list-item-styles.js.map +1 -0
  738. package/list/internal/listitem/list-item-styles.scss +10 -0
  739. package/list/internal/listitem/list-item.d.ts +80 -0
  740. package/list/internal/listitem/list-item.js +192 -0
  741. package/list/internal/listitem/list-item.js.map +1 -0
  742. package/list/list-item.d.ts +54 -0
  743. package/list/list-item.js +54 -0
  744. package/list/list-item.js.map +1 -0
  745. package/list/list.d.ts +34 -0
  746. package/list/list.js +35 -0
  747. package/list/list.js.map +1 -0
  748. package/menu/_menu-item.scss +6 -0
  749. package/menu/_menu.scss +6 -0
  750. package/menu/harness.d.ts +21 -0
  751. package/menu/harness.js +38 -0
  752. package/menu/harness.js.map +1 -0
  753. package/menu/internal/_menu.scss +143 -0
  754. package/menu/internal/controllers/menuItemController.d.ts +126 -0
  755. package/menu/internal/controllers/menuItemController.js +138 -0
  756. package/menu/internal/controllers/menuItemController.js.map +1 -0
  757. package/menu/internal/controllers/shared.d.ts +229 -0
  758. package/menu/internal/controllers/shared.js +137 -0
  759. package/menu/internal/controllers/shared.js.map +1 -0
  760. package/menu/internal/controllers/surfacePositionController.d.ts +174 -0
  761. package/menu/internal/controllers/surfacePositionController.js +394 -0
  762. package/menu/internal/controllers/surfacePositionController.js.map +1 -0
  763. package/menu/internal/controllers/typeaheadController.d.ts +157 -0
  764. package/menu/internal/controllers/typeaheadController.js +259 -0
  765. package/menu/internal/controllers/typeaheadController.js.map +1 -0
  766. package/menu/internal/menu-styles.css +1 -0
  767. package/menu/internal/menu-styles.css.map +1 -0
  768. package/menu/internal/menu-styles.d.ts +1 -0
  769. package/menu/internal/menu-styles.js +10 -0
  770. package/menu/internal/menu-styles.js.map +1 -0
  771. package/menu/internal/menu-styles.scss +10 -0
  772. package/menu/internal/menu.d.ts +317 -0
  773. package/menu/internal/menu.js +914 -0
  774. package/menu/internal/menu.js.map +1 -0
  775. package/menu/internal/menuitem/_menu-item.scss +180 -0
  776. package/menu/internal/menuitem/harness.d.ts +13 -0
  777. package/menu/internal/menuitem/harness.js +12 -0
  778. package/menu/internal/menuitem/harness.js.map +1 -0
  779. package/menu/internal/menuitem/menu-item-styles.css +1 -0
  780. package/menu/internal/menuitem/menu-item-styles.css.map +1 -0
  781. package/menu/internal/menuitem/menu-item-styles.d.ts +1 -0
  782. package/menu/internal/menuitem/menu-item-styles.js +10 -0
  783. package/menu/internal/menuitem/menu-item-styles.js.map +1 -0
  784. package/menu/internal/menuitem/menu-item-styles.scss +10 -0
  785. package/menu/internal/menuitem/menu-item.d.ts +85 -0
  786. package/menu/internal/menuitem/menu-item.js +211 -0
  787. package/menu/internal/menuitem/menu-item.js.map +1 -0
  788. package/menu/internal/submenu/_sub-menu.scss +12 -0
  789. package/menu/internal/submenu/sub-menu-styles.css +1 -0
  790. package/menu/internal/submenu/sub-menu-styles.css.map +1 -0
  791. package/menu/internal/submenu/sub-menu-styles.d.ts +1 -0
  792. package/menu/internal/submenu/sub-menu-styles.js +10 -0
  793. package/menu/internal/submenu/sub-menu-styles.js.map +1 -0
  794. package/menu/internal/submenu/sub-menu-styles.scss +10 -0
  795. package/menu/internal/submenu/sub-menu.d.ts +102 -0
  796. package/menu/internal/submenu/sub-menu.js +364 -0
  797. package/menu/internal/submenu/sub-menu.js.map +1 -0
  798. package/menu/internal/types.d.ts +23 -0
  799. package/menu/internal/types.js +7 -0
  800. package/menu/internal/types.js.map +1 -0
  801. package/menu/menu-item.d.ts +32 -0
  802. package/menu/menu-item.js +31 -0
  803. package/menu/menu-item.js.map +1 -0
  804. package/menu/menu.d.ts +68 -0
  805. package/menu/menu.js +67 -0
  806. package/menu/menu.js.map +1 -0
  807. package/menu/sub-menu.d.ts +63 -0
  808. package/menu/sub-menu.js +64 -0
  809. package/menu/sub-menu.js.map +1 -0
  810. package/migrations/v2/query-selector-aria.d.ts +22 -0
  811. package/migrations/v2/query-selector-aria.js +30 -0
  812. package/migrations/v2/query-selector-aria.js.map +1 -0
  813. package/package.json +184 -0
  814. package/progress/_circular-progress.scss +6 -0
  815. package/progress/_linear-progress.scss +6 -0
  816. package/progress/circular-progress.d.ts +28 -0
  817. package/progress/circular-progress.js +29 -0
  818. package/progress/circular-progress.js.map +1 -0
  819. package/progress/harness.d.ts +20 -0
  820. package/progress/harness.js +25 -0
  821. package/progress/harness.js.map +1 -0
  822. package/progress/internal/_circular-progress.scss +287 -0
  823. package/progress/internal/_linear-progress.scss +335 -0
  824. package/progress/internal/circular-progress-styles.css +1 -0
  825. package/progress/internal/circular-progress-styles.css.map +1 -0
  826. package/progress/internal/circular-progress-styles.d.ts +1 -0
  827. package/progress/internal/circular-progress-styles.js +10 -0
  828. package/progress/internal/circular-progress-styles.js.map +1 -0
  829. package/progress/internal/circular-progress-styles.scss +8 -0
  830. package/progress/internal/circular-progress.d.ts +14 -0
  831. package/progress/internal/circular-progress.js +50 -0
  832. package/progress/internal/circular-progress.js.map +1 -0
  833. package/progress/internal/linear-progress-styles.css +1 -0
  834. package/progress/internal/linear-progress-styles.css.map +1 -0
  835. package/progress/internal/linear-progress-styles.d.ts +1 -0
  836. package/progress/internal/linear-progress-styles.js +10 -0
  837. package/progress/internal/linear-progress-styles.js.map +1 -0
  838. package/progress/internal/linear-progress-styles.scss +8 -0
  839. package/progress/internal/linear-progress.d.ts +17 -0
  840. package/progress/internal/linear-progress.js +54 -0
  841. package/progress/internal/linear-progress.js.map +1 -0
  842. package/progress/internal/progress.d.ts +36 -0
  843. package/progress/internal/progress.js +71 -0
  844. package/progress/internal/progress.js.map +1 -0
  845. package/progress/linear-progress.d.ts +27 -0
  846. package/progress/linear-progress.js +28 -0
  847. package/progress/linear-progress.js.map +1 -0
  848. package/radio/_radio.scss +6 -0
  849. package/radio/harness.d.ts +13 -0
  850. package/radio/harness.js +16 -0
  851. package/radio/harness.js.map +1 -0
  852. package/radio/internal/_radio.scss +203 -0
  853. package/radio/internal/radio-styles.css +1 -0
  854. package/radio/internal/radio-styles.css.map +1 -0
  855. package/radio/internal/radio-styles.d.ts +1 -0
  856. package/radio/internal/radio-styles.js +10 -0
  857. package/radio/internal/radio-styles.js.map +1 -0
  858. package/radio/internal/radio-styles.scss +10 -0
  859. package/radio/internal/radio.d.ts +55 -0
  860. package/radio/internal/radio.js +172 -0
  861. package/radio/internal/radio.js.map +1 -0
  862. package/radio/internal/single-selection-controller.d.ts +80 -0
  863. package/radio/internal/single-selection-controller.js +199 -0
  864. package/radio/internal/single-selection-controller.js.map +1 -0
  865. package/radio/radio.d.ts +31 -0
  866. package/radio/radio.js +32 -0
  867. package/radio/radio.js.map +1 -0
  868. package/ripple/_ripple.scss +6 -0
  869. package/ripple/internal/_ripple.scss +92 -0
  870. package/ripple/internal/ripple-styles.css +1 -0
  871. package/ripple/internal/ripple-styles.css.map +1 -0
  872. package/ripple/internal/ripple-styles.d.ts +1 -0
  873. package/ripple/internal/ripple-styles.js +10 -0
  874. package/ripple/internal/ripple-styles.js.map +1 -0
  875. package/ripple/internal/ripple-styles.scss +10 -0
  876. package/ripple/internal/ripple.d.ts +76 -0
  877. package/ripple/internal/ripple.js +423 -0
  878. package/ripple/internal/ripple.js.map +1 -0
  879. package/ripple/ripple.d.ts +28 -0
  880. package/ripple/ripple.js +29 -0
  881. package/ripple/ripple.js.map +1 -0
  882. package/select/_filled-select.scss +6 -0
  883. package/select/_outlined-select.scss +6 -0
  884. package/select/filled-select.d.ts +42 -0
  885. package/select/filled-select.js +44 -0
  886. package/select/filled-select.js.map +1 -0
  887. package/select/harness.d.ts +25 -0
  888. package/select/harness.js +58 -0
  889. package/select/harness.js.map +1 -0
  890. package/select/internal/_filled-select.scss +191 -0
  891. package/select/internal/_outlined-select.scss +164 -0
  892. package/select/internal/_shared.scss +102 -0
  893. package/select/internal/filled-select-styles.css +1 -0
  894. package/select/internal/filled-select-styles.css.map +1 -0
  895. package/select/internal/filled-select-styles.d.ts +1 -0
  896. package/select/internal/filled-select-styles.js +10 -0
  897. package/select/internal/filled-select-styles.js.map +1 -0
  898. package/select/internal/filled-select-styles.scss +10 -0
  899. package/select/internal/filled-select.d.ts +10 -0
  900. package/select/internal/filled-select.js +16 -0
  901. package/select/internal/filled-select.js.map +1 -0
  902. package/select/internal/outlined-select-styles.css +1 -0
  903. package/select/internal/outlined-select-styles.css.map +1 -0
  904. package/select/internal/outlined-select-styles.d.ts +1 -0
  905. package/select/internal/outlined-select-styles.js +10 -0
  906. package/select/internal/outlined-select-styles.js.map +1 -0
  907. package/select/internal/outlined-select-styles.scss +10 -0
  908. package/select/internal/outlined-select.d.ts +10 -0
  909. package/select/internal/outlined-select.js +16 -0
  910. package/select/internal/outlined-select.js.map +1 -0
  911. package/select/internal/select.d.ts +269 -0
  912. package/select/internal/select.js +758 -0
  913. package/select/internal/select.js.map +1 -0
  914. package/select/internal/selectoption/harness.d.ts +11 -0
  915. package/select/internal/selectoption/harness.js +12 -0
  916. package/select/internal/selectoption/harness.js.map +1 -0
  917. package/select/internal/selectoption/select-option.d.ts +112 -0
  918. package/select/internal/selectoption/select-option.js +196 -0
  919. package/select/internal/selectoption/select-option.js.map +1 -0
  920. package/select/internal/selectoption/selectOptionController.d.ts +71 -0
  921. package/select/internal/selectoption/selectOptionController.js +115 -0
  922. package/select/internal/selectoption/selectOptionController.js.map +1 -0
  923. package/select/internal/shared-styles.css +1 -0
  924. package/select/internal/shared-styles.css.map +1 -0
  925. package/select/internal/shared-styles.d.ts +1 -0
  926. package/select/internal/shared-styles.js +10 -0
  927. package/select/internal/shared-styles.js.map +1 -0
  928. package/select/internal/shared-styles.scss +10 -0
  929. package/select/internal/shared.d.ts +18 -0
  930. package/select/internal/shared.js +23 -0
  931. package/select/internal/shared.js.map +1 -0
  932. package/select/outlined-select.d.ts +42 -0
  933. package/select/outlined-select.js +44 -0
  934. package/select/outlined-select.js.map +1 -0
  935. package/select/select-option.d.ts +46 -0
  936. package/select/select-option.js +46 -0
  937. package/select/select-option.js.map +1 -0
  938. package/slider/_slider.scss +6 -0
  939. package/slider/harness.d.ts +21 -0
  940. package/slider/harness.js +70 -0
  941. package/slider/harness.js.map +1 -0
  942. package/slider/internal/_slider.scss +519 -0
  943. package/slider/internal/forced-colors-styles.css +1 -0
  944. package/slider/internal/forced-colors-styles.css.map +1 -0
  945. package/slider/internal/forced-colors-styles.d.ts +1 -0
  946. package/slider/internal/forced-colors-styles.js +10 -0
  947. package/slider/internal/forced-colors-styles.js.map +1 -0
  948. package/slider/internal/forced-colors-styles.scss +88 -0
  949. package/slider/internal/slider-styles.css +1 -0
  950. package/slider/internal/slider-styles.css.map +1 -0
  951. package/slider/internal/slider-styles.d.ts +1 -0
  952. package/slider/internal/slider-styles.js +10 -0
  953. package/slider/internal/slider-styles.js.map +1 -0
  954. package/slider/internal/slider-styles.scss +8 -0
  955. package/slider/internal/slider.d.ts +178 -0
  956. package/slider/internal/slider.js +714 -0
  957. package/slider/internal/slider.js.map +1 -0
  958. package/slider/slider.d.ts +32 -0
  959. package/slider/slider.js +34 -0
  960. package/slider/slider.js.map +1 -0
  961. package/switch/_switch.scss +6 -0
  962. package/switch/harness.d.ts +13 -0
  963. package/switch/harness.js +16 -0
  964. package/switch/harness.js.map +1 -0
  965. package/switch/internal/_handle.scss +183 -0
  966. package/switch/internal/_icon.scss +119 -0
  967. package/switch/internal/_switch.scss +101 -0
  968. package/switch/internal/_track.scss +124 -0
  969. package/switch/internal/switch-styles.css +1 -0
  970. package/switch/internal/switch-styles.css.map +1 -0
  971. package/switch/internal/switch-styles.d.ts +1 -0
  972. package/switch/internal/switch-styles.js +10 -0
  973. package/switch/internal/switch-styles.js.map +1 -0
  974. package/switch/internal/switch-styles.scss +10 -0
  975. package/switch/internal/switch.d.ts +75 -0
  976. package/switch/internal/switch.js +219 -0
  977. package/switch/internal/switch.js.map +1 -0
  978. package/switch/switch.d.ts +25 -0
  979. package/switch/switch.js +26 -0
  980. package/switch/switch.js.map +1 -0
  981. package/tabs/_primary-tab.scss +6 -0
  982. package/tabs/_secondary-tab.scss +6 -0
  983. package/tabs/harness.d.ts +23 -0
  984. package/tabs/harness.js +51 -0
  985. package/tabs/harness.js.map +1 -0
  986. package/tabs/internal/_primary-tab.scss +46 -0
  987. package/tabs/internal/_secondary-tab.scss +37 -0
  988. package/tabs/internal/_tab.scss +199 -0
  989. package/tabs/internal/_tabs.scss +47 -0
  990. package/tabs/internal/primary-tab-styles.css +1 -0
  991. package/tabs/internal/primary-tab-styles.css.map +1 -0
  992. package/tabs/internal/primary-tab-styles.d.ts +1 -0
  993. package/tabs/internal/primary-tab-styles.js +10 -0
  994. package/tabs/internal/primary-tab-styles.js.map +1 -0
  995. package/tabs/internal/primary-tab-styles.scss +10 -0
  996. package/tabs/internal/primary-tab.d.ts +18 -0
  997. package/tabs/internal/primary-tab.js +30 -0
  998. package/tabs/internal/primary-tab.js.map +1 -0
  999. package/tabs/internal/secondary-tab-styles.css +1 -0
  1000. package/tabs/internal/secondary-tab-styles.css.map +1 -0
  1001. package/tabs/internal/secondary-tab-styles.d.ts +1 -0
  1002. package/tabs/internal/secondary-tab-styles.js +10 -0
  1003. package/tabs/internal/secondary-tab-styles.js.map +1 -0
  1004. package/tabs/internal/secondary-tab-styles.scss +10 -0
  1005. package/tabs/internal/secondary-tab.d.ts +12 -0
  1006. package/tabs/internal/secondary-tab.js +16 -0
  1007. package/tabs/internal/secondary-tab.js.map +1 -0
  1008. package/tabs/internal/tab-styles.css +1 -0
  1009. package/tabs/internal/tab-styles.css.map +1 -0
  1010. package/tabs/internal/tab-styles.d.ts +1 -0
  1011. package/tabs/internal/tab-styles.js +10 -0
  1012. package/tabs/internal/tab-styles.js.map +1 -0
  1013. package/tabs/internal/tab-styles.scss +10 -0
  1014. package/tabs/internal/tab.d.ts +65 -0
  1015. package/tabs/internal/tab.js +204 -0
  1016. package/tabs/internal/tab.js.map +1 -0
  1017. package/tabs/internal/tabs-styles.css +1 -0
  1018. package/tabs/internal/tabs-styles.css.map +1 -0
  1019. package/tabs/internal/tabs-styles.d.ts +1 -0
  1020. package/tabs/internal/tabs-styles.js +10 -0
  1021. package/tabs/internal/tabs-styles.js.map +1 -0
  1022. package/tabs/internal/tabs-styles.scss +10 -0
  1023. package/tabs/internal/tabs.d.ts +78 -0
  1024. package/tabs/internal/tabs.js +291 -0
  1025. package/tabs/internal/tabs.js.map +1 -0
  1026. package/tabs/primary-tab.d.ts +21 -0
  1027. package/tabs/primary-tab.js +24 -0
  1028. package/tabs/primary-tab.js.map +1 -0
  1029. package/tabs/secondary-tab.d.ts +21 -0
  1030. package/tabs/secondary-tab.js +24 -0
  1031. package/tabs/secondary-tab.js.map +1 -0
  1032. package/tabs/tabs.d.ts +21 -0
  1033. package/tabs/tabs.js +23 -0
  1034. package/tabs/tabs.js.map +1 -0
  1035. package/testing/harness.d.ts +371 -0
  1036. package/testing/harness.js +737 -0
  1037. package/testing/harness.js.map +1 -0
  1038. package/testing/transform-pseudo-classes.d.ts +39 -0
  1039. package/testing/transform-pseudo-classes.js +172 -0
  1040. package/testing/transform-pseudo-classes.js.map +1 -0
  1041. package/textfield/_filled-text-field.scss +6 -0
  1042. package/textfield/_outlined-text-field.scss +6 -0
  1043. package/textfield/filled-text-field.d.ts +23 -0
  1044. package/textfield/filled-text-field.js +28 -0
  1045. package/textfield/filled-text-field.js.map +1 -0
  1046. package/textfield/harness.d.ts +51 -0
  1047. package/textfield/harness.js +112 -0
  1048. package/textfield/harness.js.map +1 -0
  1049. package/textfield/internal/_filled-text-field.scss +154 -0
  1050. package/textfield/internal/_icon.scss +36 -0
  1051. package/textfield/internal/_input.scss +91 -0
  1052. package/textfield/internal/_outlined-text-field.scss +134 -0
  1053. package/textfield/internal/_shared.scss +49 -0
  1054. package/textfield/internal/filled-styles.css +1 -0
  1055. package/textfield/internal/filled-styles.css.map +1 -0
  1056. package/textfield/internal/filled-styles.d.ts +1 -0
  1057. package/textfield/internal/filled-styles.js +10 -0
  1058. package/textfield/internal/filled-styles.js.map +1 -0
  1059. package/textfield/internal/filled-styles.scss +10 -0
  1060. package/textfield/internal/filled-text-field.d.ts +13 -0
  1061. package/textfield/internal/filled-text-field.js +18 -0
  1062. package/textfield/internal/filled-text-field.js.map +1 -0
  1063. package/textfield/internal/outlined-styles.css +1 -0
  1064. package/textfield/internal/outlined-styles.css.map +1 -0
  1065. package/textfield/internal/outlined-styles.d.ts +1 -0
  1066. package/textfield/internal/outlined-styles.js +10 -0
  1067. package/textfield/internal/outlined-styles.js.map +1 -0
  1068. package/textfield/internal/outlined-styles.scss +10 -0
  1069. package/textfield/internal/outlined-text-field.d.ts +13 -0
  1070. package/textfield/internal/outlined-text-field.js +18 -0
  1071. package/textfield/internal/outlined-text-field.js.map +1 -0
  1072. package/textfield/internal/shared-styles.css +1 -0
  1073. package/textfield/internal/shared-styles.css.map +1 -0
  1074. package/textfield/internal/shared-styles.d.ts +1 -0
  1075. package/textfield/internal/shared-styles.js +10 -0
  1076. package/textfield/internal/shared-styles.js.map +1 -0
  1077. package/textfield/internal/shared-styles.scss +10 -0
  1078. package/textfield/internal/text-field.d.ts +338 -0
  1079. package/textfield/internal/text-field.js +724 -0
  1080. package/textfield/internal/text-field.js.map +1 -0
  1081. package/textfield/outlined-text-field.d.ts +23 -0
  1082. package/textfield/outlined-text-field.js +28 -0
  1083. package/textfield/outlined-text-field.js.map +1 -0
  1084. package/tokens/_index.scss +66 -0
  1085. package/tokens/_md-comp-assist-chip.scss +153 -0
  1086. package/tokens/_md-comp-badge.scss +39 -0
  1087. package/tokens/_md-comp-checkbox.scss +156 -0
  1088. package/tokens/_md-comp-circular-progress.scss +79 -0
  1089. package/tokens/_md-comp-dialog.scss +112 -0
  1090. package/tokens/_md-comp-divider.scss +43 -0
  1091. package/tokens/_md-comp-elevated-button.scss +143 -0
  1092. package/tokens/_md-comp-elevated-card.scss +80 -0
  1093. package/tokens/_md-comp-elevation.scss +48 -0
  1094. package/tokens/_md-comp-fab-branded.scss +155 -0
  1095. package/tokens/_md-comp-fab.scss +296 -0
  1096. package/tokens/_md-comp-filled-button.scss +143 -0
  1097. package/tokens/_md-comp-filled-card.scss +80 -0
  1098. package/tokens/_md-comp-filled-field.scss +293 -0
  1099. package/tokens/_md-comp-filled-icon-button.scss +119 -0
  1100. package/tokens/_md-comp-filled-select.scss +198 -0
  1101. package/tokens/_md-comp-filled-text-field.scss +200 -0
  1102. package/tokens/_md-comp-filled-tonal-button.scss +143 -0
  1103. package/tokens/_md-comp-filled-tonal-icon-button.scss +123 -0
  1104. package/tokens/_md-comp-filter-chip.scss +265 -0
  1105. package/tokens/_md-comp-focus-ring.scss +78 -0
  1106. package/tokens/_md-comp-full-screen-dialog.scss +25 -0
  1107. package/tokens/_md-comp-icon-button.scss +94 -0
  1108. package/tokens/_md-comp-icon.scss +46 -0
  1109. package/tokens/_md-comp-input-chip.scss +247 -0
  1110. package/tokens/_md-comp-item.scss +88 -0
  1111. package/tokens/_md-comp-linear-progress.scss +64 -0
  1112. package/tokens/_md-comp-list-item.scss +173 -0
  1113. package/tokens/_md-comp-list.scss +44 -0
  1114. package/tokens/_md-comp-menu-item.scss +125 -0
  1115. package/tokens/_md-comp-menu.scss +59 -0
  1116. package/tokens/_md-comp-navigation-bar.scss +44 -0
  1117. package/tokens/_md-comp-navigation-drawer.scss +44 -0
  1118. package/tokens/_md-comp-outlined-button.scss +139 -0
  1119. package/tokens/_md-comp-outlined-card.scss +86 -0
  1120. package/tokens/_md-comp-outlined-field.scss +268 -0
  1121. package/tokens/_md-comp-outlined-icon-button.scss +117 -0
  1122. package/tokens/_md-comp-outlined-segmented-button.scss +123 -0
  1123. package/tokens/_md-comp-outlined-select.scss +186 -0
  1124. package/tokens/_md-comp-outlined-text-field.scss +187 -0
  1125. package/tokens/_md-comp-primary-tab.scss +160 -0
  1126. package/tokens/_md-comp-radio.scss +86 -0
  1127. package/tokens/_md-comp-ripple.scss +48 -0
  1128. package/tokens/_md-comp-secondary-tab.scss +158 -0
  1129. package/tokens/_md-comp-slider.scss +117 -0
  1130. package/tokens/_md-comp-suggestion-chip.scss +157 -0
  1131. package/tokens/_md-comp-switch.scss +187 -0
  1132. package/tokens/_md-comp-test-table.scss +43 -0
  1133. package/tokens/_md-comp-text-button.scss +132 -0
  1134. package/tokens/_md-ref-palette.scss +112 -0
  1135. package/tokens/_md-ref-typeface.scss +46 -0
  1136. package/tokens/_md-sys-color.scss +119 -0
  1137. package/tokens/_md-sys-elevation.scss +31 -0
  1138. package/tokens/_md-sys-motion.scss +12 -0
  1139. package/tokens/_md-sys-shape.scss +102 -0
  1140. package/tokens/_md-sys-state.scss +12 -0
  1141. package/tokens/_md-sys-typescale.scss +149 -0
  1142. package/tokens/internal/_shape.scss +93 -0
  1143. package/tokens/internal/_validate.scss +109 -0
  1144. package/tokens/v0_192/_index.scss +107 -0
  1145. package/tokens/v0_192/_md-comp-assist-chip.scss +111 -0
  1146. package/tokens/v0_192/_md-comp-badge.scss +61 -0
  1147. package/tokens/v0_192/_md-comp-banner.scss +76 -0
  1148. package/tokens/v0_192/_md-comp-bottom-app-bar.scss +36 -0
  1149. package/tokens/v0_192/_md-comp-carousel-item.scss +66 -0
  1150. package/tokens/v0_192/_md-comp-checkbox.scss +129 -0
  1151. package/tokens/v0_192/_md-comp-circular-progress-indicator.scss +41 -0
  1152. package/tokens/v0_192/_md-comp-data-table.scss +99 -0
  1153. package/tokens/v0_192/_md-comp-date-input-modal.scss +90 -0
  1154. package/tokens/v0_192/_md-comp-date-picker-docked.scss +247 -0
  1155. package/tokens/v0_192/_md-comp-date-picker-modal.scss +306 -0
  1156. package/tokens/v0_192/_md-comp-dialog.scss +124 -0
  1157. package/tokens/v0_192/_md-comp-divider.scss +28 -0
  1158. package/tokens/v0_192/_md-comp-elevated-button.scss +92 -0
  1159. package/tokens/v0_192/_md-comp-elevated-card.scss +60 -0
  1160. package/tokens/v0_192/_md-comp-extended-fab-branded.scss +89 -0
  1161. package/tokens/v0_192/_md-comp-extended-fab-primary.scss +97 -0
  1162. package/tokens/v0_192/_md-comp-extended-fab-secondary.scss +98 -0
  1163. package/tokens/v0_192/_md-comp-extended-fab-surface.scss +93 -0
  1164. package/tokens/v0_192/_md-comp-extended-fab-tertiary.scss +98 -0
  1165. package/tokens/v0_192/_md-comp-fab-branded-large.scss +63 -0
  1166. package/tokens/v0_192/_md-comp-fab-branded.scss +63 -0
  1167. package/tokens/v0_192/_md-comp-fab-primary-large.scss +68 -0
  1168. package/tokens/v0_192/_md-comp-fab-primary-small.scss +68 -0
  1169. package/tokens/v0_192/_md-comp-fab-primary.scss +68 -0
  1170. package/tokens/v0_192/_md-comp-fab-secondary-large.scss +69 -0
  1171. package/tokens/v0_192/_md-comp-fab-secondary-small.scss +69 -0
  1172. package/tokens/v0_192/_md-comp-fab-secondary.scss +69 -0
  1173. package/tokens/v0_192/_md-comp-fab-surface-large.scss +67 -0
  1174. package/tokens/v0_192/_md-comp-fab-surface-small.scss +67 -0
  1175. package/tokens/v0_192/_md-comp-fab-surface.scss +67 -0
  1176. package/tokens/v0_192/_md-comp-fab-tertiary-large.scss +69 -0
  1177. package/tokens/v0_192/_md-comp-fab-tertiary-small.scss +69 -0
  1178. package/tokens/v0_192/_md-comp-fab-tertiary.scss +69 -0
  1179. package/tokens/v0_192/_md-comp-filled-autocomplete.scss +239 -0
  1180. package/tokens/v0_192/_md-comp-filled-button.scss +92 -0
  1181. package/tokens/v0_192/_md-comp-filled-card.scss +62 -0
  1182. package/tokens/v0_192/_md-comp-filled-icon-button.scss +83 -0
  1183. package/tokens/v0_192/_md-comp-filled-menu-button.scss +101 -0
  1184. package/tokens/v0_192/_md-comp-filled-select.scss +273 -0
  1185. package/tokens/v0_192/_md-comp-filled-text-field.scss +193 -0
  1186. package/tokens/v0_192/_md-comp-filled-tonal-button.scss +102 -0
  1187. package/tokens/v0_192/_md-comp-filled-tonal-icon-button.scss +90 -0
  1188. package/tokens/v0_192/_md-comp-filter-chip.scss +210 -0
  1189. package/tokens/v0_192/_md-comp-full-screen-dialog.scss +114 -0
  1190. package/tokens/v0_192/_md-comp-icon-button.scss +74 -0
  1191. package/tokens/v0_192/_md-comp-input-chip.scss +187 -0
  1192. package/tokens/v0_192/_md-comp-linear-progress-indicator.scss +43 -0
  1193. package/tokens/v0_192/_md-comp-list.scss +255 -0
  1194. package/tokens/v0_192/_md-comp-menu.scss +44 -0
  1195. package/tokens/v0_192/_md-comp-navigation-bar.scss +115 -0
  1196. package/tokens/v0_192/_md-comp-navigation-drawer.scss +165 -0
  1197. package/tokens/v0_192/_md-comp-navigation-rail.scss +119 -0
  1198. package/tokens/v0_192/_md-comp-outlined-autocomplete.scss +229 -0
  1199. package/tokens/v0_192/_md-comp-outlined-button.scss +87 -0
  1200. package/tokens/v0_192/_md-comp-outlined-card.scss +66 -0
  1201. package/tokens/v0_192/_md-comp-outlined-icon-button.scss +83 -0
  1202. package/tokens/v0_192/_md-comp-outlined-menu-button.scss +97 -0
  1203. package/tokens/v0_192/_md-comp-outlined-segmented-button.scss +115 -0
  1204. package/tokens/v0_192/_md-comp-outlined-select.scss +263 -0
  1205. package/tokens/v0_192/_md-comp-outlined-text-field.scss +174 -0
  1206. package/tokens/v0_192/_md-comp-plain-tooltip.scss +58 -0
  1207. package/tokens/v0_192/_md-comp-primary-navigation-tab.scss +124 -0
  1208. package/tokens/v0_192/_md-comp-radio-button.scss +71 -0
  1209. package/tokens/v0_192/_md-comp-rich-tooltip.scss +122 -0
  1210. package/tokens/v0_192/_md-comp-scrim.scss +28 -0
  1211. package/tokens/v0_192/_md-comp-search-bar.scss +100 -0
  1212. package/tokens/v0_192/_md-comp-search-view.scss +94 -0
  1213. package/tokens/v0_192/_md-comp-secondary-navigation-tab.scss +87 -0
  1214. package/tokens/v0_192/_md-comp-sheet-bottom.scss +46 -0
  1215. package/tokens/v0_192/_md-comp-sheet-floating.scss +35 -0
  1216. package/tokens/v0_192/_md-comp-sheet-side.scss +94 -0
  1217. package/tokens/v0_192/_md-comp-slider.scss +118 -0
  1218. package/tokens/v0_192/_md-comp-snackbar.scss +130 -0
  1219. package/tokens/v0_192/_md-comp-standard-menu-button.scss +101 -0
  1220. package/tokens/v0_192/_md-comp-suggestion-chip.scss +127 -0
  1221. package/tokens/v0_192/_md-comp-switch.scss +141 -0
  1222. package/tokens/v0_192/_md-comp-text-button.scss +80 -0
  1223. package/tokens/v0_192/_md-comp-time-input.scss +220 -0
  1224. package/tokens/v0_192/_md-comp-time-picker.scss +267 -0
  1225. package/tokens/v0_192/_md-comp-top-app-bar-large.scss +64 -0
  1226. package/tokens/v0_192/_md-comp-top-app-bar-medium.scss +64 -0
  1227. package/tokens/v0_192/_md-comp-top-app-bar-small-centered.scss +71 -0
  1228. package/tokens/v0_192/_md-comp-top-app-bar-small.scss +67 -0
  1229. package/tokens/v0_192/_md-ref-palette.scss +109 -0
  1230. package/tokens/v0_192/_md-ref-typeface.scss +23 -0
  1231. package/tokens/v0_192/_md-sys-color.scss +135 -0
  1232. package/tokens/v0_192/_md-sys-elevation.scss +24 -0
  1233. package/tokens/v0_192/_md-sys-motion.scss +55 -0
  1234. package/tokens/v0_192/_md-sys-shape.scss +33 -0
  1235. package/tokens/v0_192/_md-sys-state.scss +22 -0
  1236. package/tokens/v0_192/_md-sys-typescale.scss +286 -0
  1237. package/tokens/v0_192/index.test.css +1 -0
  1238. package/tokens/v0_192/index.test.css.map +1 -0
  1239. package/tokens/v0_192/index.test.scss +584 -0
  1240. package/tokens/v0_192/lib.test.css +1 -0
  1241. package/tokens/v0_192/lib.test.css.map +1 -0
  1242. package/tokens/v0_192/lib.test.scss +663 -0
  1243. package/typography/_typeface.scss +49 -0
  1244. package/typography/_typescale.scss +157 -0
  1245. package/typography/md-typescale-styles.css +1 -0
  1246. package/typography/md-typescale-styles.css.map +1 -0
  1247. package/typography/md-typescale-styles.d.ts +1 -0
  1248. package/typography/md-typescale-styles.js +10 -0
  1249. package/typography/md-typescale-styles.js.map +1 -0
  1250. package/typography/md-typescale-styles.scss +11 -0
package/iconbutton/internal/filled-styles.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const styles: import("lit").CSSResult;
package/iconbutton/internal/filled-styles.js ADDED
@@ -0,0 +1,10 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2024 Google LLC
4
+ * SPDX-License-Identifier: Apache-2.0
5
+ */
6
+ // Generated stylesheet for ./iconbutton/internal/filled-styles.css.
7
+ import { css } from 'lit';
8
+ export const styles = css `:host{--_container-color: var(--md-filled-icon-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-height: var(--md-filled-icon-button-container-height, 40px);--_container-width: var(--md-filled-icon-button-container-width, 40px);--_disabled-container-color: var(--md-filled-icon-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-opacity: var(--md-filled-icon-button-disabled-container-opacity, 0.12);--_disabled-icon-color: var(--md-filled-icon-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-filled-icon-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-filled-icon-button-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_hover-icon-color: var(--md-filled-icon-button-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-color: var(--md-filled-icon-button-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-opacity: var(--md-filled-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-filled-icon-button-icon-color, var(--md-sys-color-on-primary, #fff));--_icon-size: var(--md-filled-icon-button-icon-size, 24px);--_pressed-icon-color: var(--md-filled-icon-button-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-color: var(--md-filled-icon-button-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-opacity: var(--md-filled-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-filled-icon-button-selected-container-color, var(--md-sys-color-primary, #6750a4));--_toggle-selected-focus-icon-color: var(--md-filled-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-icon-color: var(--md-filled-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-state-layer-color: var(--md-filled-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-icon-color: var(--md-filled-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-icon-color: var(--md-filled-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-state-layer-color: var(--md-filled-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_unselected-container-color: var(--md-filled-icon-button-unselected-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_toggle-focus-icon-color: var(--md-filled-icon-button-toggle-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-hover-icon-color: var(--md-filled-icon-button-toggle-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-hover-state-layer-color: var(--md-filled-icon-button-toggle-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_toggle-icon-color: var(--md-filled-icon-button-toggle-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-pressed-icon-color: var(--md-filled-icon-button-toggle-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-pressed-state-layer-color: var(--md-filled-icon-button-toggle-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var(--md-filled-icon-button-container-shape-start-start, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-filled-icon-button-container-shape-start-end, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-filled-icon-button-container-shape-end-end, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-filled-icon-button-container-shape-end-start, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)))}.icon-button{color:var(--_icon-color);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.icon-button:hover{color:var(--_hover-icon-color)}.icon-button:focus{color:var(--_focus-icon-color)}.icon-button:active{color:var(--_pressed-icon-color)}.icon-button:is(:disabled,[aria-disabled=true]){color:var(--_disabled-icon-color)}.icon-button::before{background-color:var(--_container-color);border-radius:inherit;content:"";inset:0;position:absolute;z-index:-1}.icon-button:is(:disabled,[aria-disabled=true])::before{background-color:var(--_disabled-container-color);opacity:var(--_disabled-container-opacity)}.icon-button:is(:disabled,[aria-disabled=true]) .icon{opacity:var(--_disabled-icon-opacity)}.toggle-filled{--md-ripple-hover-color: var(--_toggle-hover-state-layer-color);--md-ripple-pressed-color: var(--_toggle-pressed-state-layer-color)}.toggle-filled:not(:disabled,[aria-disabled=true]){color:var(--_toggle-icon-color)}.toggle-filled:not(:disabled,[aria-disabled=true]):hover{color:var(--_toggle-hover-icon-color)}.toggle-filled:not(:disabled,[aria-disabled=true]):focus{color:var(--_toggle-focus-icon-color)}.toggle-filled:not(:disabled,[aria-disabled=true]):active{color:var(--_toggle-pressed-icon-color)}.toggle-filled:not(:disabled,[aria-disabled=true])::before{background-color:var(--_unselected-container-color)}.selected{--md-ripple-hover-color: var(--_toggle-selected-hover-state-layer-color);--md-ripple-pressed-color: var(--_toggle-selected-pressed-state-layer-color)}.selected:not(:disabled,[aria-disabled=true]){color:var(--_toggle-selected-icon-color)}.selected:not(:disabled,[aria-disabled=true]):hover{color:var(--_toggle-selected-hover-icon-color)}.selected:not(:disabled,[aria-disabled=true]):focus{color:var(--_toggle-selected-focus-icon-color)}.selected:not(:disabled,[aria-disabled=true]):active{color:var(--_toggle-selected-pressed-icon-color)}.selected:not(:disabled,[aria-disabled=true])::before{background-color:var(--_selected-container-color)}
9
+ `;
10
+ //# sourceMappingURL=filled-styles.js.map
package/iconbutton/internal/filled-styles.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"filled-styles.js","sourceRoot":"","sources":["filled-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,oEAAoE;AACpE,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACxB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2024 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n// Generated stylesheet for ./iconbutton/internal/filled-styles.css.\nimport {css} from 'lit';\nexport const styles = css`:host{--_container-color: var(--md-filled-icon-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-height: var(--md-filled-icon-button-container-height, 40px);--_container-width: var(--md-filled-icon-button-container-width, 40px);--_disabled-container-color: var(--md-filled-icon-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-opacity: var(--md-filled-icon-button-disabled-container-opacity, 0.12);--_disabled-icon-color: var(--md-filled-icon-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-filled-icon-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-filled-icon-button-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_hover-icon-color: var(--md-filled-icon-button-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-color: var(--md-filled-icon-button-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-opacity: var(--md-filled-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-filled-icon-button-icon-color, var(--md-sys-color-on-primary, #fff));--_icon-size: var(--md-filled-icon-button-icon-size, 24px);--_pressed-icon-color: var(--md-filled-icon-button-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-color: var(--md-filled-icon-button-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-opacity: var(--md-filled-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-filled-icon-button-selected-container-color, var(--md-sys-color-primary, #6750a4));--_toggle-selected-focus-icon-color: var(--md-filled-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-icon-color: var(--md-filled-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-state-layer-color: var(--md-filled-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-icon-color: var(--md-filled-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-icon-color: var(--md-filled-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-state-layer-color: var(--md-filled-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_unselected-container-color: var(--md-filled-icon-button-unselected-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_toggle-focus-icon-color: var(--md-filled-icon-button-toggle-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-hover-icon-color: var(--md-filled-icon-button-toggle-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-hover-state-layer-color: var(--md-filled-icon-button-toggle-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_toggle-icon-color: var(--md-filled-icon-button-toggle-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-pressed-icon-color: var(--md-filled-icon-button-toggle-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-pressed-state-layer-color: var(--md-filled-icon-button-toggle-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var(--md-filled-icon-button-container-shape-start-start, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-filled-icon-button-container-shape-start-end, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-filled-icon-button-container-shape-end-end, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-filled-icon-button-container-shape-end-start, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)))}.icon-button{color:var(--_icon-color);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.icon-button:hover{color:var(--_hover-icon-color)}.icon-button:focus{color:var(--_focus-icon-color)}.icon-button:active{color:var(--_pressed-icon-color)}.icon-button:is(:disabled,[aria-disabled=true]){color:var(--_disabled-icon-color)}.icon-button::before{background-color:var(--_container-color);border-radius:inherit;content:\"\";inset:0;position:absolute;z-index:-1}.icon-button:is(:disabled,[aria-disabled=true])::before{background-color:var(--_disabled-container-color);opacity:var(--_disabled-container-opacity)}.icon-button:is(:disabled,[aria-disabled=true]) .icon{opacity:var(--_disabled-icon-opacity)}.toggle-filled{--md-ripple-hover-color: var(--_toggle-hover-state-layer-color);--md-ripple-pressed-color: var(--_toggle-pressed-state-layer-color)}.toggle-filled:not(:disabled,[aria-disabled=true]){color:var(--_toggle-icon-color)}.toggle-filled:not(:disabled,[aria-disabled=true]):hover{color:var(--_toggle-hover-icon-color)}.toggle-filled:not(:disabled,[aria-disabled=true]):focus{color:var(--_toggle-focus-icon-color)}.toggle-filled:not(:disabled,[aria-disabled=true]):active{color:var(--_toggle-pressed-icon-color)}.toggle-filled:not(:disabled,[aria-disabled=true])::before{background-color:var(--_unselected-container-color)}.selected{--md-ripple-hover-color: var(--_toggle-selected-hover-state-layer-color);--md-ripple-pressed-color: var(--_toggle-selected-pressed-state-layer-color)}.selected:not(:disabled,[aria-disabled=true]){color:var(--_toggle-selected-icon-color)}.selected:not(:disabled,[aria-disabled=true]):hover{color:var(--_toggle-selected-hover-icon-color)}.selected:not(:disabled,[aria-disabled=true]):focus{color:var(--_toggle-selected-focus-icon-color)}.selected:not(:disabled,[aria-disabled=true]):active{color:var(--_toggle-selected-pressed-icon-color)}.selected:not(:disabled,[aria-disabled=true])::before{background-color:var(--_selected-container-color)}\n`;\n"]}
package/iconbutton/internal/filled-styles.scss ADDED
@@ -0,0 +1,10 @@
1
+ //
2
+ // Copyright 2022 Google LLC
3
+ // SPDX-License-Identifier: Apache-2.0
4
+ //
5
+
6
+ // go/keep-sorted start
7
+ @use './filled-icon-button';
8
+ // go/keep-sorted end
9
+
10
+ @include filled-icon-button.styles;
package/iconbutton/internal/filled-tonal-styles.css ADDED
@@ -0,0 +1 @@
1
+ :host{--_container-color: var(--md-filled-tonal-icon-button-container-color, var(--md-sys-color-secondary-container, #e8def8));--_container-height: var(--md-filled-tonal-icon-button-container-height, 40px);--_container-width: var(--md-filled-tonal-icon-button-container-width, 40px);--_disabled-container-color: var(--md-filled-tonal-icon-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-opacity: var(--md-filled-tonal-icon-button-disabled-container-opacity, 0.12);--_disabled-icon-color: var(--md-filled-tonal-icon-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-filled-tonal-icon-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-filled-tonal-icon-button-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-icon-color: var(--md-filled-tonal-icon-button-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-color: var(--md-filled-tonal-icon-button-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-opacity: var(--md-filled-tonal-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-filled-tonal-icon-button-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_icon-size: var(--md-filled-tonal-icon-button-icon-size, 24px);--_pressed-icon-color: var(--md-filled-tonal-icon-button-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-color: var(--md-filled-tonal-icon-button-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-opacity: var(--md-filled-tonal-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-filled-tonal-icon-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_toggle-selected-focus-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-hover-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-hover-state-layer-color: var(--md-filled-tonal-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-pressed-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-pressed-state-layer-color: var(--md-filled-tonal-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_unselected-container-color: var(--md-filled-tonal-icon-button-unselected-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_toggle-focus-icon-color: var(--md-filled-tonal-icon-button-toggle-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-hover-icon-color: var(--md-filled-tonal-icon-button-toggle-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-hover-state-layer-color: var(--md-filled-tonal-icon-button-toggle-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-icon-color: var(--md-filled-tonal-icon-button-toggle-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-pressed-icon-color: var(--md-filled-tonal-icon-button-toggle-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-pressed-state-layer-color: var(--md-filled-tonal-icon-button-toggle-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_container-shape-start-start: var(--md-filled-tonal-icon-button-container-shape-start-start, var(--md-filled-tonal-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-filled-tonal-icon-button-container-shape-start-end, var(--md-filled-tonal-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-filled-tonal-icon-button-container-shape-end-end, var(--md-filled-tonal-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-filled-tonal-icon-button-container-shape-end-start, var(--md-filled-tonal-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)))}.icon-button{color:var(--_icon-color);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.icon-button:hover{color:var(--_hover-icon-color)}.icon-button:focus{color:var(--_focus-icon-color)}.icon-button:active{color:var(--_pressed-icon-color)}.icon-button:is(:disabled,[aria-disabled=true]){color:var(--_disabled-icon-color)}.icon-button::before{background-color:var(--_container-color);border-radius:inherit;content:"";inset:0;position:absolute;z-index:-1}.icon-button:is(:disabled,[aria-disabled=true])::before{background-color:var(--_disabled-container-color);opacity:var(--_disabled-container-opacity)}.icon-button:is(:disabled,[aria-disabled=true]) .icon{opacity:var(--_disabled-icon-opacity)}.toggle-filled-tonal{--md-ripple-hover-color: var(--_toggle-hover-state-layer-color);--md-ripple-pressed-color: var(--_toggle-pressed-state-layer-color)}.toggle-filled-tonal:not(:disabled,[aria-disabled=true]){color:var(--_toggle-icon-color)}.toggle-filled-tonal:not(:disabled,[aria-disabled=true]):hover{color:var(--_toggle-hover-icon-color)}.toggle-filled-tonal:not(:disabled,[aria-disabled=true]):focus{color:var(--_toggle-focus-icon-color)}.toggle-filled-tonal:not(:disabled,[aria-disabled=true]):active{color:var(--_toggle-pressed-icon-color)}.toggle-filled-tonal:not(:disabled,[aria-disabled=true])::before{background-color:var(--_unselected-container-color)}.selected{--md-ripple-hover-color: var(--_toggle-selected-hover-state-layer-color);--md-ripple-pressed-color: var(--_toggle-selected-pressed-state-layer-color)}.selected:not(:disabled,[aria-disabled=true]){color:var(--_toggle-selected-icon-color)}.selected:not(:disabled,[aria-disabled=true]):hover{color:var(--_toggle-selected-hover-icon-color)}.selected:not(:disabled,[aria-disabled=true]):focus{color:var(--_toggle-selected-focus-icon-color)}.selected:not(:disabled,[aria-disabled=true]):active{color:var(--_toggle-selected-pressed-icon-color)}.selected:not(:disabled,[aria-disabled=true])::before{background-color:var(--_selected-container-color)}/*# sourceMappingURL=filled-tonal-styles.css.map */
package/iconbutton/internal/filled-tonal-styles.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["_filled-tonal-icon-button.scss","../../ripple/internal/_ripple.scss"],"names":[],"mappings":"AA8BE,MAII,k/IAIJ,aACE,yBClBE,oPDoBF,mBACE,+BAGF,mBACE,+BAGF,oBACE,iCAGF,gDACE,kCAaJ,qBAEE,yCACA,sBACA,WACA,QACA,kBACA,WAGF,wDACE,kDACA,2CAGF,sDACE,sCAGF,qBCjEI,oIDkEF,yDACE,gCAEA,+DACE,sCAGF,+DACE,sCAGF,gEACE,wCAYN,iEAGE,oDAGF,UChGI,sJDiGF,8CACE,yCAEA,oDACE,+CAGF,oDACE,+CAGF,qDACE,iDAYN,sDACE","file":"filled-tonal-styles.css"}
package/iconbutton/internal/filled-tonal-styles.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const styles: import("lit").CSSResult;
package/iconbutton/internal/filled-tonal-styles.js ADDED
@@ -0,0 +1,10 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2024 Google LLC
4
+ * SPDX-License-Identifier: Apache-2.0
5
+ */
6
+ // Generated stylesheet for ./iconbutton/internal/filled-tonal-styles.css.
7
+ import { css } from 'lit';
8
+ export const styles = css `:host{--_container-color: var(--md-filled-tonal-icon-button-container-color, var(--md-sys-color-secondary-container, #e8def8));--_container-height: var(--md-filled-tonal-icon-button-container-height, 40px);--_container-width: var(--md-filled-tonal-icon-button-container-width, 40px);--_disabled-container-color: var(--md-filled-tonal-icon-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-opacity: var(--md-filled-tonal-icon-button-disabled-container-opacity, 0.12);--_disabled-icon-color: var(--md-filled-tonal-icon-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-filled-tonal-icon-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-filled-tonal-icon-button-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-icon-color: var(--md-filled-tonal-icon-button-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-color: var(--md-filled-tonal-icon-button-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-opacity: var(--md-filled-tonal-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-filled-tonal-icon-button-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_icon-size: var(--md-filled-tonal-icon-button-icon-size, 24px);--_pressed-icon-color: var(--md-filled-tonal-icon-button-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-color: var(--md-filled-tonal-icon-button-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-opacity: var(--md-filled-tonal-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-filled-tonal-icon-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_toggle-selected-focus-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-hover-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-hover-state-layer-color: var(--md-filled-tonal-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-pressed-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-pressed-state-layer-color: var(--md-filled-tonal-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_unselected-container-color: var(--md-filled-tonal-icon-button-unselected-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_toggle-focus-icon-color: var(--md-filled-tonal-icon-button-toggle-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-hover-icon-color: var(--md-filled-tonal-icon-button-toggle-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-hover-state-layer-color: var(--md-filled-tonal-icon-button-toggle-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-icon-color: var(--md-filled-tonal-icon-button-toggle-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-pressed-icon-color: var(--md-filled-tonal-icon-button-toggle-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-pressed-state-layer-color: var(--md-filled-tonal-icon-button-toggle-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_container-shape-start-start: var(--md-filled-tonal-icon-button-container-shape-start-start, var(--md-filled-tonal-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-filled-tonal-icon-button-container-shape-start-end, var(--md-filled-tonal-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-filled-tonal-icon-button-container-shape-end-end, var(--md-filled-tonal-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-filled-tonal-icon-button-container-shape-end-start, var(--md-filled-tonal-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)))}.icon-button{color:var(--_icon-color);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.icon-button:hover{color:var(--_hover-icon-color)}.icon-button:focus{color:var(--_focus-icon-color)}.icon-button:active{color:var(--_pressed-icon-color)}.icon-button:is(:disabled,[aria-disabled=true]){color:var(--_disabled-icon-color)}.icon-button::before{background-color:var(--_container-color);border-radius:inherit;content:"";inset:0;position:absolute;z-index:-1}.icon-button:is(:disabled,[aria-disabled=true])::before{background-color:var(--_disabled-container-color);opacity:var(--_disabled-container-opacity)}.icon-button:is(:disabled,[aria-disabled=true]) .icon{opacity:var(--_disabled-icon-opacity)}.toggle-filled-tonal{--md-ripple-hover-color: var(--_toggle-hover-state-layer-color);--md-ripple-pressed-color: var(--_toggle-pressed-state-layer-color)}.toggle-filled-tonal:not(:disabled,[aria-disabled=true]){color:var(--_toggle-icon-color)}.toggle-filled-tonal:not(:disabled,[aria-disabled=true]):hover{color:var(--_toggle-hover-icon-color)}.toggle-filled-tonal:not(:disabled,[aria-disabled=true]):focus{color:var(--_toggle-focus-icon-color)}.toggle-filled-tonal:not(:disabled,[aria-disabled=true]):active{color:var(--_toggle-pressed-icon-color)}.toggle-filled-tonal:not(:disabled,[aria-disabled=true])::before{background-color:var(--_unselected-container-color)}.selected{--md-ripple-hover-color: var(--_toggle-selected-hover-state-layer-color);--md-ripple-pressed-color: var(--_toggle-selected-pressed-state-layer-color)}.selected:not(:disabled,[aria-disabled=true]){color:var(--_toggle-selected-icon-color)}.selected:not(:disabled,[aria-disabled=true]):hover{color:var(--_toggle-selected-hover-icon-color)}.selected:not(:disabled,[aria-disabled=true]):focus{color:var(--_toggle-selected-focus-icon-color)}.selected:not(:disabled,[aria-disabled=true]):active{color:var(--_toggle-selected-pressed-icon-color)}.selected:not(:disabled,[aria-disabled=true])::before{background-color:var(--_selected-container-color)}
9
+ `;
10
+ //# sourceMappingURL=filled-tonal-styles.js.map
package/iconbutton/internal/filled-tonal-styles.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"filled-tonal-styles.js","sourceRoot":"","sources":["filled-tonal-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,0EAA0E;AAC1E,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACxB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2024 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n// Generated stylesheet for ./iconbutton/internal/filled-tonal-styles.css.\nimport {css} from 'lit';\nexport const styles = css`:host{--_container-color: var(--md-filled-tonal-icon-button-container-color, var(--md-sys-color-secondary-container, #e8def8));--_container-height: var(--md-filled-tonal-icon-button-container-height, 40px);--_container-width: var(--md-filled-tonal-icon-button-container-width, 40px);--_disabled-container-color: var(--md-filled-tonal-icon-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-opacity: var(--md-filled-tonal-icon-button-disabled-container-opacity, 0.12);--_disabled-icon-color: var(--md-filled-tonal-icon-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-filled-tonal-icon-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-filled-tonal-icon-button-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-icon-color: var(--md-filled-tonal-icon-button-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-color: var(--md-filled-tonal-icon-button-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-opacity: var(--md-filled-tonal-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-filled-tonal-icon-button-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_icon-size: var(--md-filled-tonal-icon-button-icon-size, 24px);--_pressed-icon-color: var(--md-filled-tonal-icon-button-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-color: var(--md-filled-tonal-icon-button-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-opacity: var(--md-filled-tonal-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-filled-tonal-icon-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_toggle-selected-focus-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-hover-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-hover-state-layer-color: var(--md-filled-tonal-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-pressed-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-pressed-state-layer-color: var(--md-filled-tonal-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_unselected-container-color: var(--md-filled-tonal-icon-button-unselected-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_toggle-focus-icon-color: var(--md-filled-tonal-icon-button-toggle-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-hover-icon-color: var(--md-filled-tonal-icon-button-toggle-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-hover-state-layer-color: var(--md-filled-tonal-icon-button-toggle-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-icon-color: var(--md-filled-tonal-icon-button-toggle-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-pressed-icon-color: var(--md-filled-tonal-icon-button-toggle-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-pressed-state-layer-color: var(--md-filled-tonal-icon-button-toggle-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_container-shape-start-start: var(--md-filled-tonal-icon-button-container-shape-start-start, var(--md-filled-tonal-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-filled-tonal-icon-button-container-shape-start-end, var(--md-filled-tonal-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-filled-tonal-icon-button-container-shape-end-end, var(--md-filled-tonal-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-filled-tonal-icon-button-container-shape-end-start, var(--md-filled-tonal-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)))}.icon-button{color:var(--_icon-color);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.icon-button:hover{color:var(--_hover-icon-color)}.icon-button:focus{color:var(--_focus-icon-color)}.icon-button:active{color:var(--_pressed-icon-color)}.icon-button:is(:disabled,[aria-disabled=true]){color:var(--_disabled-icon-color)}.icon-button::before{background-color:var(--_container-color);border-radius:inherit;content:\"\";inset:0;position:absolute;z-index:-1}.icon-button:is(:disabled,[aria-disabled=true])::before{background-color:var(--_disabled-container-color);opacity:var(--_disabled-container-opacity)}.icon-button:is(:disabled,[aria-disabled=true]) .icon{opacity:var(--_disabled-icon-opacity)}.toggle-filled-tonal{--md-ripple-hover-color: var(--_toggle-hover-state-layer-color);--md-ripple-pressed-color: var(--_toggle-pressed-state-layer-color)}.toggle-filled-tonal:not(:disabled,[aria-disabled=true]){color:var(--_toggle-icon-color)}.toggle-filled-tonal:not(:disabled,[aria-disabled=true]):hover{color:var(--_toggle-hover-icon-color)}.toggle-filled-tonal:not(:disabled,[aria-disabled=true]):focus{color:var(--_toggle-focus-icon-color)}.toggle-filled-tonal:not(:disabled,[aria-disabled=true]):active{color:var(--_toggle-pressed-icon-color)}.toggle-filled-tonal:not(:disabled,[aria-disabled=true])::before{background-color:var(--_unselected-container-color)}.selected{--md-ripple-hover-color: var(--_toggle-selected-hover-state-layer-color);--md-ripple-pressed-color: var(--_toggle-selected-pressed-state-layer-color)}.selected:not(:disabled,[aria-disabled=true]){color:var(--_toggle-selected-icon-color)}.selected:not(:disabled,[aria-disabled=true]):hover{color:var(--_toggle-selected-hover-icon-color)}.selected:not(:disabled,[aria-disabled=true]):focus{color:var(--_toggle-selected-focus-icon-color)}.selected:not(:disabled,[aria-disabled=true]):active{color:var(--_toggle-selected-pressed-icon-color)}.selected:not(:disabled,[aria-disabled=true])::before{background-color:var(--_selected-container-color)}\n`;\n"]}
package/iconbutton/internal/filled-tonal-styles.scss ADDED
@@ -0,0 +1,10 @@
1
+ //
2
+ // Copyright 2022 Google LLC
3
+ // SPDX-License-Identifier: Apache-2.0
4
+ //
5
+
6
+ // go/keep-sorted start
7
+ @use './filled-tonal-icon-button';
8
+ // go/keep-sorted end
9
+
10
+ @include filled-tonal-icon-button.styles;
package/iconbutton/internal/icon-button.d.ts ADDED
@@ -0,0 +1,106 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2018 Google LLC
4
+ * SPDX-License-Identifier: Apache-2.0
5
+ */
6
+ import '../../focus/md-focus-ring.js';
7
+ import '../../ripple/ripple.js';
8
+ import { LitElement } from 'lit';
9
+ import { FormSubmitter, type FormSubmitterType } from '../../internal/controller/form-submitter.js';
10
+ type LinkTarget = '_blank' | '_parent' | '_self' | '_top';
11
+ declare const iconButtonBaseClass: import("../../labs/behaviors/mixin.js").MixinReturn<import("../../labs/behaviors/mixin.js").MixinReturn<typeof LitElement, import("../../labs/behaviors/element-internals.js").WithElementInternals>>;
12
+ /**
13
+ * A button for rendering icons.
14
+ *
15
+ * @fires input {InputEvent} Dispatched when a toggle button toggles --bubbles
16
+ * --composed
17
+ * @fires change {Event} Dispatched when a toggle button toggles --bubbles
18
+ */
19
+ export declare class IconButton extends iconButtonBaseClass implements FormSubmitter {
20
+ /** @nocollapse */
21
+ static readonly formAssociated = true;
22
+ /** @nocollapse */
23
+ static shadowRootOptions: ShadowRootInit;
24
+ /**
25
+ * Disables the icon button and makes it non-interactive.
26
+ */
27
+ disabled: boolean;
28
+ /**
29
+ * "Soft-disables" the icon button (disabled but still focusable).
30
+ *
31
+ * Use this when an icon button needs increased visibility when disabled. See
32
+ * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls
33
+ * for more guidance on when this is needed.
34
+ */
35
+ softDisabled: boolean;
36
+ /**
37
+ * Flips the icon if it is in an RTL context at startup.
38
+ */
39
+ flipIconInRtl: boolean;
40
+ /**
41
+ * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.
42
+ */
43
+ href: string;
44
+ /**
45
+ * Sets the underlying `HTMLAnchorElement`'s `target` attribute.
46
+ */
47
+ target: LinkTarget | '';
48
+ /**
49
+ * The `aria-label` of the button when the button is toggleable and selected.
50
+ */
51
+ ariaLabelSelected: string;
52
+ /**
53
+ * When true, the button will toggle between selected and unselected
54
+ * states
55
+ */
56
+ toggle: boolean;
57
+ /**
58
+ * Sets the selected state. When false, displays the default icon. When true,
59
+ * displays the selected icon, or the default icon If no `slot="selected"`
60
+ * icon is provided.
61
+ */
62
+ selected: boolean;
63
+ /**
64
+ * The default behavior of the button. May be "button", "reset", or "submit"
65
+ * (default).
66
+ */
67
+ type: FormSubmitterType;
68
+ /**
69
+ * The value added to a form with the button's name when the button submits a
70
+ * form.
71
+ */
72
+ value: string;
73
+ get name(): string;
74
+ set name(name: string);
75
+ /**
76
+ * The associated form element with which this element's value will submit.
77
+ */
78
+ get form(): HTMLFormElement;
79
+ /**
80
+ * The labels this element is associated with.
81
+ */
82
+ get labels(): NodeList;
83
+ private flipIcon;
84
+ constructor();
85
+ protected willUpdate(): void;
86
+ protected render(): import("lit-html").TemplateResult;
87
+ private renderLink;
88
+ protected getRenderClasses(): {
89
+ 'flip-icon': boolean;
90
+ selected: boolean;
91
+ };
92
+ private renderIcon;
93
+ private renderSelectedIcon;
94
+ private renderTouchTarget;
95
+ private renderFocusRing;
96
+ private renderRipple;
97
+ connectedCallback(): void;
98
+ /** Handles a click on this element. */
99
+ private handleClick;
100
+ /**
101
+ * Handles a click on the child <div> or <button> element within this
102
+ * element's shadow DOM.
103
+ */
104
+ private handleClickOnChild;
105
+ }
106
+ export {};
package/iconbutton/internal/icon-button.js ADDED
@@ -0,0 +1,260 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2018 Google LLC
4
+ * SPDX-License-Identifier: Apache-2.0
5
+ */
6
+ import { __decorate } from "tslib";
7
+ import '../../focus/md-focus-ring.js';
8
+ import '../../ripple/ripple.js';
9
+ import { html, isServer, LitElement, nothing } from 'lit';
10
+ import { property, state } from 'lit/decorators.js';
11
+ import { classMap } from 'lit/directives/class-map.js';
12
+ import { literal, html as staticHtml } from 'lit/static-html.js';
13
+ import { mixinDelegatesAria } from '../../internal/aria/delegate.js';
14
+ import { setupFormSubmitter, } from '../../internal/controller/form-submitter.js';
15
+ import { isRtl } from '../../internal/controller/is-rtl.js';
16
+ import { internals, mixinElementInternals, } from '../../labs/behaviors/element-internals.js';
17
+ // Separate variable needed for closure.
18
+ const iconButtonBaseClass = mixinDelegatesAria(mixinElementInternals(LitElement));
19
+ /**
20
+ * A button for rendering icons.
21
+ *
22
+ * @fires input {InputEvent} Dispatched when a toggle button toggles --bubbles
23
+ * --composed
24
+ * @fires change {Event} Dispatched when a toggle button toggles --bubbles
25
+ */
26
+ export class IconButton extends iconButtonBaseClass {
27
+ get name() {
28
+ return this.getAttribute('name') ?? '';
29
+ }
30
+ set name(name) {
31
+ this.setAttribute('name', name);
32
+ }
33
+ /**
34
+ * The associated form element with which this element's value will submit.
35
+ */
36
+ get form() {
37
+ return this[internals].form;
38
+ }
39
+ /**
40
+ * The labels this element is associated with.
41
+ */
42
+ get labels() {
43
+ return this[internals].labels;
44
+ }
45
+ constructor() {
46
+ super();
47
+ /**
48
+ * Disables the icon button and makes it non-interactive.
49
+ */
50
+ this.disabled = false;
51
+ /**
52
+ * "Soft-disables" the icon button (disabled but still focusable).
53
+ *
54
+ * Use this when an icon button needs increased visibility when disabled. See
55
+ * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls
56
+ * for more guidance on when this is needed.
57
+ */
58
+ this.softDisabled = false;
59
+ /**
60
+ * Flips the icon if it is in an RTL context at startup.
61
+ */
62
+ this.flipIconInRtl = false;
63
+ /**
64
+ * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.
65
+ */
66
+ this.href = '';
67
+ /**
68
+ * Sets the underlying `HTMLAnchorElement`'s `target` attribute.
69
+ */
70
+ this.target = '';
71
+ /**
72
+ * The `aria-label` of the button when the button is toggleable and selected.
73
+ */
74
+ this.ariaLabelSelected = '';
75
+ /**
76
+ * When true, the button will toggle between selected and unselected
77
+ * states
78
+ */
79
+ this.toggle = false;
80
+ /**
81
+ * Sets the selected state. When false, displays the default icon. When true,
82
+ * displays the selected icon, or the default icon If no `slot="selected"`
83
+ * icon is provided.
84
+ */
85
+ this.selected = false;
86
+ /**
87
+ * The default behavior of the button. May be "button", "reset", or "submit"
88
+ * (default).
89
+ */
90
+ this.type = 'submit';
91
+ /**
92
+ * The value added to a form with the button's name when the button submits a
93
+ * form.
94
+ */
95
+ this.value = '';
96
+ this.flipIcon = isRtl(this, this.flipIconInRtl);
97
+ if (!isServer) {
98
+ this.addEventListener('click', this.handleClick.bind(this));
99
+ }
100
+ }
101
+ willUpdate() {
102
+ // Link buttons cannot be disabled or soft-disabled.
103
+ if (this.href) {
104
+ this.disabled = false;
105
+ this.softDisabled = false;
106
+ }
107
+ }
108
+ render() {
109
+ const tag = this.href ? literal `div` : literal `button`;
110
+ // Needed for closure conformance
111
+ const { ariaLabel, ariaHasPopup, ariaExpanded } = this;
112
+ const hasToggledAriaLabel = ariaLabel && this.ariaLabelSelected;
113
+ const ariaPressedValue = !this.toggle ? nothing : this.selected;
114
+ let ariaLabelValue = nothing;
115
+ if (!this.href) {
116
+ ariaLabelValue =
117
+ hasToggledAriaLabel && this.selected
118
+ ? this.ariaLabelSelected
119
+ : ariaLabel;
120
+ }
121
+ return staticHtml `<${tag}
122
+ class="icon-button ${classMap(this.getRenderClasses())}"
123
+ id="button"
124
+ aria-label="${ariaLabelValue || nothing}"
125
+ aria-haspopup="${(!this.href && ariaHasPopup) || nothing}"
126
+ aria-expanded="${(!this.href && ariaExpanded) || nothing}"
127
+ aria-pressed="${ariaPressedValue}"
128
+ aria-disabled=${(!this.href && this.softDisabled) || nothing}
129
+ ?disabled="${!this.href && this.disabled}"
130
+ @click="${this.handleClickOnChild}">
131
+ ${this.renderFocusRing()}
132
+ ${this.renderRipple()}
133
+ ${!this.selected ? this.renderIcon() : nothing}
134
+ ${this.selected ? this.renderSelectedIcon() : nothing}
135
+ ${this.renderTouchTarget()}
136
+ ${this.href && this.renderLink()}
137
+ </${tag}>`;
138
+ }
139
+ renderLink() {
140
+ // Needed for closure conformance
141
+ const { ariaLabel } = this;
142
+ return html `
143
+ <a
144
+ class="link"
145
+ id="link"
146
+ href="${this.href}"
147
+ target="${this.target || nothing}"
148
+ aria-label="${ariaLabel || nothing}"></a>
149
+ `;
150
+ }
151
+ getRenderClasses() {
152
+ return {
153
+ 'flip-icon': this.flipIcon,
154
+ 'selected': this.toggle && this.selected,
155
+ };
156
+ }
157
+ renderIcon() {
158
+ return html `<span class="icon"><slot></slot></span>`;
159
+ }
160
+ renderSelectedIcon() {
161
+ // Use default slot as fallback to not require specifying multiple icons
162
+ return html `<span class="icon icon--selected"
163
+ ><slot name="selected"><slot></slot></slot
164
+ ></span>`;
165
+ }
166
+ renderTouchTarget() {
167
+ return html `<span class="touch"></span>`;
168
+ }
169
+ renderFocusRing() {
170
+ // TODO(b/310046938): use the same id for both elements
171
+ return html `<md-focus-ring
172
+ part="focus-ring"
173
+ for=${this.href ? 'link' : 'button'}></md-focus-ring>`;
174
+ }
175
+ renderRipple() {
176
+ const isRippleDisabled = !this.href && (this.disabled || this.softDisabled);
177
+ // TODO(b/310046938): use the same id for both elements
178
+ return html `<md-ripple
179
+ for=${this.href ? 'link' : nothing}
180
+ ?disabled="${isRippleDisabled}"></md-ripple>`;
181
+ }
182
+ connectedCallback() {
183
+ this.flipIcon = isRtl(this, this.flipIconInRtl);
184
+ super.connectedCallback();
185
+ }
186
+ /** Handles a click on this element. */
187
+ handleClick(event) {
188
+ // If the icon button is soft-disabled, we need to explicitly prevent the
189
+ // click from propagating to other event listeners as well as prevent the
190
+ // default action.
191
+ if (!this.href && this.softDisabled) {
192
+ event.stopImmediatePropagation();
193
+ event.preventDefault();
194
+ return;
195
+ }
196
+ }
197
+ /**
198
+ * Handles a click on the child <div> or <button> element within this
199
+ * element's shadow DOM.
200
+ */
201
+ async handleClickOnChild(event) {
202
+ // Allow the event to propagate
203
+ await 0;
204
+ if (!this.toggle ||
205
+ this.disabled ||
206
+ this.softDisabled ||
207
+ event.defaultPrevented) {
208
+ return;
209
+ }
210
+ this.selected = !this.selected;
211
+ this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
212
+ // Bubbles but does not compose to mimic native browser <input> & <select>
213
+ // Additionally, native change event is not an InputEvent.
214
+ this.dispatchEvent(new Event('change', { bubbles: true }));
215
+ }
216
+ }
217
+ (() => {
218
+ setupFormSubmitter(IconButton);
219
+ })();
220
+ /** @nocollapse */
221
+ IconButton.formAssociated = true;
222
+ /** @nocollapse */
223
+ IconButton.shadowRootOptions = {
224
+ mode: 'open',
225
+ delegatesFocus: true,
226
+ };
227
+ __decorate([
228
+ property({ type: Boolean, reflect: true })
229
+ ], IconButton.prototype, "disabled", void 0);
230
+ __decorate([
231
+ property({ type: Boolean, attribute: 'soft-disabled', reflect: true })
232
+ ], IconButton.prototype, "softDisabled", void 0);
233
+ __decorate([
234
+ property({ type: Boolean, attribute: 'flip-icon-in-rtl' })
235
+ ], IconButton.prototype, "flipIconInRtl", void 0);
236
+ __decorate([
237
+ property()
238
+ ], IconButton.prototype, "href", void 0);
239
+ __decorate([
240
+ property()
241
+ ], IconButton.prototype, "target", void 0);
242
+ __decorate([
243
+ property({ attribute: 'aria-label-selected' })
244
+ ], IconButton.prototype, "ariaLabelSelected", void 0);
245
+ __decorate([
246
+ property({ type: Boolean })
247
+ ], IconButton.prototype, "toggle", void 0);
248
+ __decorate([
249
+ property({ type: Boolean, reflect: true })
250
+ ], IconButton.prototype, "selected", void 0);
251
+ __decorate([
252
+ property()
253
+ ], IconButton.prototype, "type", void 0);
254
+ __decorate([
255
+ property({ reflect: true })
256
+ ], IconButton.prototype, "value", void 0);
257
+ __decorate([
258
+ state()
259
+ ], IconButton.prototype, "flipIcon", void 0);
260
+ //# sourceMappingURL=icon-button.js.map
package/iconbutton/internal/icon-button.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"icon-button.js","sourceRoot":"","sources":["icon-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,8BAA8B,CAAC;AACtC,OAAO,wBAAwB,CAAC;AAEhC,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AACxD,OAAO,EAAC,QAAQ,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAC,OAAO,EAAE,IAAI,IAAI,UAAU,EAAC,MAAM,oBAAoB,CAAC;AAG/D,OAAO,EAAC,kBAAkB,EAAC,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAEL,kBAAkB,GAEnB,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAAC,KAAK,EAAC,MAAM,qCAAqC,CAAC;AAC1D,OAAO,EACL,SAAS,EACT,qBAAqB,GACtB,MAAM,2CAA2C,CAAC;AAInD,wCAAwC;AACxC,MAAM,mBAAmB,GAAG,kBAAkB,CAC5C,qBAAqB,CAAC,UAAU,CAAC,CAClC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,OAAO,UAAW,SAAQ,mBAAmB;IA2EjD,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IACzC,CAAC;IACD,IAAI,IAAI,CAAC,IAAY;QACnB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAClC,CAAC;IAED;;OAEG;IACH,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC;IAC9B,CAAC;IAED;;OAEG;IACH,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC;IAChC,CAAC;IAID;QACE,KAAK,EAAE,CAAC;QArFV;;WAEG;QACuC,aAAQ,GAAG,KAAK,CAAC;QAE3D;;;;;;WAMG;QAEH,iBAAY,GAAG,KAAK,CAAC;QAErB;;WAEG;QAEH,kBAAa,GAAG,KAAK,CAAC;QAEtB;;WAEG;QACS,SAAI,GAAG,EAAE,CAAC;QAEtB;;WAEG;QACS,WAAM,GAAoB,EAAE,CAAC;QAEzC;;WAEG;QAC2C,sBAAiB,GAAG,EAAE,CAAC;QAErE;;;WAGG;QACwB,WAAM,GAAG,KAAK,CAAC;QAE1C;;;;WAIG;QACuC,aAAQ,GAAG,KAAK,CAAC;QAE3D;;;WAGG;QACS,SAAI,GAAsB,QAAQ,CAAC;QAE/C;;;WAGG;QACwB,UAAK,GAAG,EAAE,CAAC;QAuBrB,aAAQ,GAAG,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAI1D,IAAI,CAAC,QAAQ,EAAE;YACb,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;SAC7D;IACH,CAAC;IAEkB,UAAU;QAC3B,oDAAoD;QACpD,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;SAC3B;IACH,CAAC;IAEkB,MAAM;QACvB,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAA,KAAK,CAAC,CAAC,CAAC,OAAO,CAAA,QAAQ,CAAC;QACvD,iCAAiC;QACjC,MAAM,EAAC,SAAS,EAAE,YAAY,EAAE,YAAY,EAAC,GAAG,IAAuB,CAAC;QACxE,MAAM,mBAAmB,GAAG,SAAS,IAAI,IAAI,CAAC,iBAAiB,CAAC;QAChE,MAAM,gBAAgB,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;QAChE,IAAI,cAAc,GAAmC,OAAO,CAAC;QAC7D,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,cAAc;gBACZ,mBAAmB,IAAI,IAAI,CAAC,QAAQ;oBAClC,CAAC,CAAC,IAAI,CAAC,iBAAiB;oBACxB,CAAC,CAAC,SAAS,CAAC;SACjB;QACD,OAAO,UAAU,CAAA,IAAI,GAAG;6BACC,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;;sBAExC,cAAc,IAAI,OAAO;yBACtB,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,YAAY,CAAC,IAAI,OAAO;yBACvC,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,YAAY,CAAC,IAAI,OAAO;wBACxC,gBAAgB;wBAChB,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,OAAO;qBAC/C,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ;kBAC9B,IAAI,CAAC,kBAAkB;UAC/B,IAAI,CAAC,eAAe,EAAE;UACtB,IAAI,CAAC,YAAY,EAAE;UACnB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,OAAO;UAC5C,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC,OAAO;UACnD,IAAI,CAAC,iBAAiB,EAAE;UACxB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;MAClC,GAAG,GAAG,CAAC;IACX,CAAC;IAEO,UAAU;QAChB,iCAAiC;QACjC,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,OAAO,IAAI,CAAA;;;;gBAIC,IAAI,CAAC,IAAI;kBACP,IAAI,CAAC,MAAM,IAAI,OAAO;sBAClB,SAAS,IAAI,OAAO;KACrC,CAAC;IACJ,CAAC;IAES,gBAAgB;QACxB,OAAO;YACL,WAAW,EAAE,IAAI,CAAC,QAAQ;YAC1B,UAAU,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ;SACzC,CAAC;IACJ,CAAC;IAEO,UAAU;QAChB,OAAO,IAAI,CAAA,yCAAyC,CAAC;IACvD,CAAC;IAEO,kBAAkB;QACxB,wEAAwE;QACxE,OAAO,IAAI,CAAA;;aAEF,CAAC;IACZ,CAAC;IAEO,iBAAiB;QACvB,OAAO,IAAI,CAAA,6BAA6B,CAAC;IAC3C,CAAC;IAEO,eAAe;QACrB,uDAAuD;QACvD,OAAO,IAAI,CAAA;;YAEH,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,mBAAmB,CAAC;IAC3D,CAAC;IAEO,YAAY;QAClB,MAAM,gBAAgB,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC;QAC5E,uDAAuD;QACvD,OAAO,IAAI,CAAA;YACH,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;mBACrB,gBAAgB,gBAAgB,CAAC;IAClD,CAAC;IAEQ,iBAAiB;QACxB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAChD,KAAK,CAAC,iBAAiB,EAAE,CAAC;IAC5B,CAAC;IAED,uCAAuC;IAC/B,WAAW,CAAC,KAAiB;QACnC,yEAAyE;QACzE,yEAAyE;QACzE,kBAAkB;QAClB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,EAAE;YACnC,KAAK,CAAC,wBAAwB,EAAE,CAAC;YACjC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,OAAO;SACR;IACH,CAAC;IAED;;;OAGG;IACK,KAAK,CAAC,kBAAkB,CAAC,KAAY;QAC3C,+BAA+B;QAC/B,MAAM,CAAC,CAAC;QACR,IACE,CAAC,IAAI,CAAC,MAAM;YACZ,IAAI,CAAC,QAAQ;YACb,IAAI,CAAC,YAAY;YACjB,KAAK,CAAC,gBAAgB,EACtB;YACA,OAAO;SACR;QAED,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,aAAa,CAChB,IAAI,UAAU,CAAC,OAAO,EAAE,EAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CACzD,CAAC;QACF,0EAA0E;QAC1E,0DAA0D;QAC1D,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;IAC3D,CAAC;;AA1OD;IACE,kBAAkB,CAAC,UAAU,CAAC,CAAC;AACjC,CAAC,GAAA,CAAA;AAED,kBAAkB;AACF,yBAAc,GAAG,IAAI,AAAP,CAAQ;AAEtC,kBAAkB;AACF,4BAAiB,GAAmB;IAClD,IAAI,EAAE,MAAM;IACZ,cAAc,EAAE,IAAI;CACrB,AAHgC,CAG/B;AAKwC;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;4CAAkB;AAU3D;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;gDAChD;AAMrB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAC,CAAC;iDACnC;AAKV;IAAX,QAAQ,EAAE;wCAAW;AAKV;IAAX,QAAQ,EAAE;0CAA8B;AAKK;IAA7C,QAAQ,CAAC,EAAC,SAAS,EAAE,qBAAqB,EAAC,CAAC;qDAAwB;AAM1C;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;0CAAgB;AAOA;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;4CAAkB;AAM/C;IAAX,QAAQ,EAAE;wCAAoC;AAMpB;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;yCAAY;AAuBrB;IAAhB,KAAK,EAAE;4CAAoD","sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {literal, html as staticHtml} from 'lit/static-html.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../internal/aria/delegate.js';\nimport {\n FormSubmitter,\n setupFormSubmitter,\n type FormSubmitterType,\n} from '../../internal/controller/form-submitter.js';\nimport {isRtl} from '../../internal/controller/is-rtl.js';\nimport {\n internals,\n mixinElementInternals,\n} from '../../labs/behaviors/element-internals.js';\n\ntype LinkTarget = '_blank' | '_parent' | '_self' | '_top';\n\n// Separate variable needed for closure.\nconst iconButtonBaseClass = mixinDelegatesAria(\n mixinElementInternals(LitElement),\n);\n\n/**\n * A button for rendering icons.\n *\n * @fires input {InputEvent} Dispatched when a toggle button toggles --bubbles\n * --composed\n * @fires change {Event} Dispatched when a toggle button toggles --bubbles\n */\nexport class IconButton extends iconButtonBaseClass implements FormSubmitter {\n static {\n setupFormSubmitter(IconButton);\n }\n\n /** @nocollapse */\n static readonly formAssociated = true;\n\n /** @nocollapse */\n static override shadowRootOptions: ShadowRootInit = {\n mode: 'open',\n delegatesFocus: true,\n };\n\n /**\n * Disables the icon button and makes it non-interactive.\n */\n @property({type: Boolean, reflect: true}) disabled = false;\n\n /**\n * \"Soft-disables\" the icon button (disabled but still focusable).\n *\n * Use this when an icon button needs increased visibility when disabled. See\n * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls\n * for more guidance on when this is needed.\n */\n @property({type: Boolean, attribute: 'soft-disabled', reflect: true})\n softDisabled = false;\n\n /**\n * Flips the icon if it is in an RTL context at startup.\n */\n @property({type: Boolean, attribute: 'flip-icon-in-rtl'})\n flipIconInRtl = false;\n\n /**\n * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.\n */\n @property() href = '';\n\n /**\n * Sets the underlying `HTMLAnchorElement`'s `target` attribute.\n */\n @property() target: LinkTarget | '' = '';\n\n /**\n * The `aria-label` of the button when the button is toggleable and selected.\n */\n @property({attribute: 'aria-label-selected'}) ariaLabelSelected = '';\n\n /**\n * When true, the button will toggle between selected and unselected\n * states\n */\n @property({type: Boolean}) toggle = false;\n\n /**\n * Sets the selected state. When false, displays the default icon. When true,\n * displays the selected icon, or the default icon If no `slot=\"selected\"`\n * icon is provided.\n */\n @property({type: Boolean, reflect: true}) selected = false;\n\n /**\n * The default behavior of the button. May be \"button\", \"reset\", or \"submit\"\n * (default).\n */\n @property() type: FormSubmitterType = 'submit';\n\n /**\n * The value added to a form with the button's name when the button submits a\n * form.\n */\n @property({reflect: true}) value = '';\n\n get name() {\n return this.getAttribute('name') ?? '';\n }\n set name(name: string) {\n this.setAttribute('name', name);\n }\n\n /**\n * The associated form element with which this element's value will submit.\n */\n get form() {\n return this[internals].form;\n }\n\n /**\n * The labels this element is associated with.\n */\n get labels() {\n return this[internals].labels;\n }\n\n @state() private flipIcon = isRtl(this, this.flipIconInRtl);\n\n constructor() {\n super();\n if (!isServer) {\n this.addEventListener('click', this.handleClick.bind(this));\n }\n }\n\n protected override willUpdate() {\n // Link buttons cannot be disabled or soft-disabled.\n if (this.href) {\n this.disabled = false;\n this.softDisabled = false;\n }\n }\n\n protected override render() {\n const tag = this.href ? literal`div` : literal`button`;\n // Needed for closure conformance\n const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;\n const hasToggledAriaLabel = ariaLabel && this.ariaLabelSelected;\n const ariaPressedValue = !this.toggle ? nothing : this.selected;\n let ariaLabelValue: string | null | typeof nothing = nothing;\n if (!this.href) {\n ariaLabelValue =\n hasToggledAriaLabel && this.selected\n ? this.ariaLabelSelected\n : ariaLabel;\n }\n return staticHtml`<${tag}\n class=\"icon-button ${classMap(this.getRenderClasses())}\"\n id=\"button\"\n aria-label=\"${ariaLabelValue || nothing}\"\n aria-haspopup=\"${(!this.href && ariaHasPopup) || nothing}\"\n aria-expanded=\"${(!this.href && ariaExpanded) || nothing}\"\n aria-pressed=\"${ariaPressedValue}\"\n aria-disabled=${(!this.href && this.softDisabled) || nothing}\n ?disabled=\"${!this.href && this.disabled}\"\n @click=\"${this.handleClickOnChild}\">\n ${this.renderFocusRing()}\n ${this.renderRipple()}\n ${!this.selected ? this.renderIcon() : nothing}\n ${this.selected ? this.renderSelectedIcon() : nothing}\n ${this.renderTouchTarget()}\n ${this.href && this.renderLink()}\n </${tag}>`;\n }\n\n private renderLink() {\n // Needed for closure conformance\n const {ariaLabel} = this as ARIAMixinStrict;\n return html`\n <a\n class=\"link\"\n id=\"link\"\n href=\"${this.href}\"\n target=\"${this.target || nothing}\"\n aria-label=\"${ariaLabel || nothing}\"></a>\n `;\n }\n\n protected getRenderClasses() {\n return {\n 'flip-icon': this.flipIcon,\n 'selected': this.toggle && this.selected,\n };\n }\n\n private renderIcon() {\n return html`<span class=\"icon\"><slot></slot></span>`;\n }\n\n private renderSelectedIcon() {\n // Use default slot as fallback to not require specifying multiple icons\n return html`<span class=\"icon icon--selected\"\n ><slot name=\"selected\"><slot></slot></slot\n ></span>`;\n }\n\n private renderTouchTarget() {\n return html`<span class=\"touch\"></span>`;\n }\n\n private renderFocusRing() {\n // TODO(b/310046938): use the same id for both elements\n return html`<md-focus-ring\n part=\"focus-ring\"\n for=${this.href ? 'link' : 'button'}></md-focus-ring>`;\n }\n\n private renderRipple() {\n const isRippleDisabled = !this.href && (this.disabled || this.softDisabled);\n // TODO(b/310046938): use the same id for both elements\n return html`<md-ripple\n for=${this.href ? 'link' : nothing}\n ?disabled=\"${isRippleDisabled}\"></md-ripple>`;\n }\n\n override connectedCallback() {\n this.flipIcon = isRtl(this, this.flipIconInRtl);\n super.connectedCallback();\n }\n\n /** Handles a click on this element. */\n private handleClick(event: MouseEvent) {\n // If the icon button is soft-disabled, we need to explicitly prevent the\n // click from propagating to other event listeners as well as prevent the\n // default action.\n if (!this.href && this.softDisabled) {\n event.stopImmediatePropagation();\n event.preventDefault();\n return;\n }\n }\n\n /**\n * Handles a click on the child <div> or <button> element within this\n * element's shadow DOM.\n */\n private async handleClickOnChild(event: Event) {\n // Allow the event to propagate\n await 0;\n if (\n !this.toggle ||\n this.disabled ||\n this.softDisabled ||\n event.defaultPrevented\n ) {\n return;\n }\n\n this.selected = !this.selected;\n this.dispatchEvent(\n new InputEvent('input', {bubbles: true, composed: true}),\n );\n // Bubbles but does not compose to mimic native browser <input> & <select>\n // Additionally, native change event is not an InputEvent.\n this.dispatchEvent(new Event('change', {bubbles: true}));\n }\n}\n"]}
package/iconbutton/internal/outlined-styles.css ADDED
@@ -0,0 +1 @@
1
+ :host{--_container-height: var(--md-outlined-icon-button-container-height, 40px);--_container-width: var(--md-outlined-icon-button-container-width, 40px);--_disabled-icon-color: var(--md-outlined-icon-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-outlined-icon-button-disabled-icon-opacity, 0.38);--_disabled-selected-container-color: var(--md-outlined-icon-button-disabled-selected-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-container-opacity: var(--md-outlined-icon-button-disabled-selected-container-opacity, 0.12);--_hover-state-layer-opacity: var(--md-outlined-icon-button-hover-state-layer-opacity, 0.08);--_icon-size: var(--md-outlined-icon-button-icon-size, 24px);--_pressed-state-layer-opacity: var(--md-outlined-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-outlined-icon-button-selected-container-color, var(--md-sys-color-inverse-surface, #322f35));--_selected-focus-icon-color: var(--md-outlined-icon-button-selected-focus-icon-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_selected-hover-icon-color: var(--md-outlined-icon-button-selected-hover-icon-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_selected-hover-state-layer-color: var(--md-outlined-icon-button-selected-hover-state-layer-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_selected-icon-color: var(--md-outlined-icon-button-selected-icon-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_selected-pressed-icon-color: var(--md-outlined-icon-button-selected-pressed-icon-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_selected-pressed-state-layer-color: var(--md-outlined-icon-button-selected-pressed-state-layer-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_disabled-outline-color: var(--md-outlined-icon-button-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-outlined-icon-button-disabled-outline-opacity, 0.12);--_focus-icon-color: var(--md-outlined-icon-button-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-icon-color: var(--md-outlined-icon-button-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-outlined-icon-button-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_icon-color: var(--md-outlined-icon-button-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-color: var(--md-outlined-icon-button-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-outlined-icon-button-outline-width, 1px);--_pressed-icon-color: var(--md-outlined-icon-button-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-color: var(--md-outlined-icon-button-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_container-shape-start-start: var(--md-outlined-icon-button-container-shape-start-start, var(--md-outlined-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-outlined-icon-button-container-shape-start-end, var(--md-outlined-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-outlined-icon-button-container-shape-end-end, var(--md-outlined-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-outlined-icon-button-container-shape-end-start, var(--md-outlined-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)))}.outlined{background-color:rgba(0,0,0,0);color:var(--_icon-color);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.outlined::before{border-color:var(--_outline-color);border-width:var(--_outline-width)}.outlined:hover{color:var(--_hover-icon-color)}.outlined:focus{color:var(--_focus-icon-color)}.outlined:active{color:var(--_pressed-icon-color)}.outlined:is(:disabled,[aria-disabled=true]){color:var(--_disabled-icon-color)}.outlined:is(:disabled,[aria-disabled=true])::before{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}.outlined:is(:disabled,[aria-disabled=true]) .icon{opacity:var(--_disabled-icon-opacity)}.outlined::before{block-size:100%;border-style:solid;border-radius:inherit;box-sizing:border-box;content:"";inline-size:100%;inset:0;pointer-events:none;position:absolute;z-index:-1}.outlined.selected::before{border-width:0}.selected{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.selected:not(:disabled,[aria-disabled=true]){color:var(--_selected-icon-color)}.selected:not(:disabled,[aria-disabled=true]):hover{color:var(--_selected-hover-icon-color)}.selected:not(:disabled,[aria-disabled=true]):focus{color:var(--_selected-focus-icon-color)}.selected:not(:disabled,[aria-disabled=true]):active{color:var(--_selected-pressed-icon-color)}.selected:not(:disabled,[aria-disabled=true])::before{background-color:var(--_selected-container-color)}.selected:is(:disabled,[aria-disabled=true])::before{background-color:var(--_disabled-selected-container-color);opacity:var(--_disabled-selected-container-opacity)}@media(forced-colors: active){:host(:is([disabled],[soft-disabled])){--_disabled-outline-opacity: 1}.selected::before{border-color:CanvasText;border-width:var(--_outline-width)}.selected:is(:disabled,[aria-disabled=true])::before{border-color:GrayText;opacity:1}}/*# sourceMappingURL=outlined-styles.css.map */
package/iconbutton/internal/outlined-styles.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["_outlined-icon-button.scss","../../ripple/internal/_ripple.scss"],"names":[],"mappings":"AA+BE,MAII,8iHAIJ,UACE,+BACA,yBCpBE,oPD+BF,kBACE,mCACA,mCAGF,gBACE,+BAGF,gBACE,+BAGF,iBACE,iCAGF,6CACE,kCAEA,qDACE,4CACA,yCAKN,mDACE,sCAGF,kBACE,gBACA,mBACA,sBACA,sBACA,WACA,iBACA,QACA,oBACA,kBACA,WAIF,2BACE,eAIF,UCjFI,sQDkFF,8CACE,kCAEA,oDACE,wCAGF,oDACE,wCAGF,qDACE,0CAcN,sDACE,kDAGF,qDACE,2DACA,oDAGF,8BACE,uCACE,+BAKA,kBACE,wBACA,mCAGF,qDACE,sBACA","file":"outlined-styles.css"}
package/iconbutton/internal/outlined-styles.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const styles: import("lit").CSSResult;
package/iconbutton/internal/outlined-styles.js ADDED
@@ -0,0 +1,10 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2024 Google LLC
4
+ * SPDX-License-Identifier: Apache-2.0
5
+ */
6
+ // Generated stylesheet for ./iconbutton/internal/outlined-styles.css.
7
+ import { css } from 'lit';
8
+ export const styles = css `:host{--_container-height: var(--md-outlined-icon-button-container-height, 40px);--_container-width: var(--md-outlined-icon-button-container-width, 40px);--_disabled-icon-color: var(--md-outlined-icon-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-outlined-icon-button-disabled-icon-opacity, 0.38);--_disabled-selected-container-color: var(--md-outlined-icon-button-disabled-selected-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-container-opacity: var(--md-outlined-icon-button-disabled-selected-container-opacity, 0.12);--_hover-state-layer-opacity: var(--md-outlined-icon-button-hover-state-layer-opacity, 0.08);--_icon-size: var(--md-outlined-icon-button-icon-size, 24px);--_pressed-state-layer-opacity: var(--md-outlined-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-outlined-icon-button-selected-container-color, var(--md-sys-color-inverse-surface, #322f35));--_selected-focus-icon-color: var(--md-outlined-icon-button-selected-focus-icon-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_selected-hover-icon-color: var(--md-outlined-icon-button-selected-hover-icon-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_selected-hover-state-layer-color: var(--md-outlined-icon-button-selected-hover-state-layer-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_selected-icon-color: var(--md-outlined-icon-button-selected-icon-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_selected-pressed-icon-color: var(--md-outlined-icon-button-selected-pressed-icon-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_selected-pressed-state-layer-color: var(--md-outlined-icon-button-selected-pressed-state-layer-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_disabled-outline-color: var(--md-outlined-icon-button-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-outlined-icon-button-disabled-outline-opacity, 0.12);--_focus-icon-color: var(--md-outlined-icon-button-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-icon-color: var(--md-outlined-icon-button-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-outlined-icon-button-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_icon-color: var(--md-outlined-icon-button-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-color: var(--md-outlined-icon-button-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-outlined-icon-button-outline-width, 1px);--_pressed-icon-color: var(--md-outlined-icon-button-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-color: var(--md-outlined-icon-button-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_container-shape-start-start: var(--md-outlined-icon-button-container-shape-start-start, var(--md-outlined-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-outlined-icon-button-container-shape-start-end, var(--md-outlined-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-outlined-icon-button-container-shape-end-end, var(--md-outlined-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-outlined-icon-button-container-shape-end-start, var(--md-outlined-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)))}.outlined{background-color:rgba(0,0,0,0);color:var(--_icon-color);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.outlined::before{border-color:var(--_outline-color);border-width:var(--_outline-width)}.outlined:hover{color:var(--_hover-icon-color)}.outlined:focus{color:var(--_focus-icon-color)}.outlined:active{color:var(--_pressed-icon-color)}.outlined:is(:disabled,[aria-disabled=true]){color:var(--_disabled-icon-color)}.outlined:is(:disabled,[aria-disabled=true])::before{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}.outlined:is(:disabled,[aria-disabled=true]) .icon{opacity:var(--_disabled-icon-opacity)}.outlined::before{block-size:100%;border-style:solid;border-radius:inherit;box-sizing:border-box;content:"";inline-size:100%;inset:0;pointer-events:none;position:absolute;z-index:-1}.outlined.selected::before{border-width:0}.selected{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.selected:not(:disabled,[aria-disabled=true]){color:var(--_selected-icon-color)}.selected:not(:disabled,[aria-disabled=true]):hover{color:var(--_selected-hover-icon-color)}.selected:not(:disabled,[aria-disabled=true]):focus{color:var(--_selected-focus-icon-color)}.selected:not(:disabled,[aria-disabled=true]):active{color:var(--_selected-pressed-icon-color)}.selected:not(:disabled,[aria-disabled=true])::before{background-color:var(--_selected-container-color)}.selected:is(:disabled,[aria-disabled=true])::before{background-color:var(--_disabled-selected-container-color);opacity:var(--_disabled-selected-container-opacity)}@media(forced-colors: active){:host(:is([disabled],[soft-disabled])){--_disabled-outline-opacity: 1}.selected::before{border-color:CanvasText;border-width:var(--_outline-width)}.selected:is(:disabled,[aria-disabled=true])::before{border-color:GrayText;opacity:1}}
9
+ `;
10
+ //# sourceMappingURL=outlined-styles.js.map
package/iconbutton/internal/outlined-styles.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"outlined-styles.js","sourceRoot":"","sources":["outlined-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,sEAAsE;AACtE,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACxB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2024 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n// Generated stylesheet for ./iconbutton/internal/outlined-styles.css.\nimport {css} from 'lit';\nexport const styles = css`:host{--_container-height: var(--md-outlined-icon-button-container-height, 40px);--_container-width: var(--md-outlined-icon-button-container-width, 40px);--_disabled-icon-color: var(--md-outlined-icon-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-outlined-icon-button-disabled-icon-opacity, 0.38);--_disabled-selected-container-color: var(--md-outlined-icon-button-disabled-selected-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-container-opacity: var(--md-outlined-icon-button-disabled-selected-container-opacity, 0.12);--_hover-state-layer-opacity: var(--md-outlined-icon-button-hover-state-layer-opacity, 0.08);--_icon-size: var(--md-outlined-icon-button-icon-size, 24px);--_pressed-state-layer-opacity: var(--md-outlined-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-outlined-icon-button-selected-container-color, var(--md-sys-color-inverse-surface, #322f35));--_selected-focus-icon-color: var(--md-outlined-icon-button-selected-focus-icon-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_selected-hover-icon-color: var(--md-outlined-icon-button-selected-hover-icon-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_selected-hover-state-layer-color: var(--md-outlined-icon-button-selected-hover-state-layer-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_selected-icon-color: var(--md-outlined-icon-button-selected-icon-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_selected-pressed-icon-color: var(--md-outlined-icon-button-selected-pressed-icon-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_selected-pressed-state-layer-color: var(--md-outlined-icon-button-selected-pressed-state-layer-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_disabled-outline-color: var(--md-outlined-icon-button-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-outlined-icon-button-disabled-outline-opacity, 0.12);--_focus-icon-color: var(--md-outlined-icon-button-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-icon-color: var(--md-outlined-icon-button-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-outlined-icon-button-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_icon-color: var(--md-outlined-icon-button-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-color: var(--md-outlined-icon-button-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-outlined-icon-button-outline-width, 1px);--_pressed-icon-color: var(--md-outlined-icon-button-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-color: var(--md-outlined-icon-button-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_container-shape-start-start: var(--md-outlined-icon-button-container-shape-start-start, var(--md-outlined-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-outlined-icon-button-container-shape-start-end, var(--md-outlined-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-outlined-icon-button-container-shape-end-end, var(--md-outlined-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-outlined-icon-button-container-shape-end-start, var(--md-outlined-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)))}.outlined{background-color:rgba(0,0,0,0);color:var(--_icon-color);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.outlined::before{border-color:var(--_outline-color);border-width:var(--_outline-width)}.outlined:hover{color:var(--_hover-icon-color)}.outlined:focus{color:var(--_focus-icon-color)}.outlined:active{color:var(--_pressed-icon-color)}.outlined:is(:disabled,[aria-disabled=true]){color:var(--_disabled-icon-color)}.outlined:is(:disabled,[aria-disabled=true])::before{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}.outlined:is(:disabled,[aria-disabled=true]) .icon{opacity:var(--_disabled-icon-opacity)}.outlined::before{block-size:100%;border-style:solid;border-radius:inherit;box-sizing:border-box;content:\"\";inline-size:100%;inset:0;pointer-events:none;position:absolute;z-index:-1}.outlined.selected::before{border-width:0}.selected{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.selected:not(:disabled,[aria-disabled=true]){color:var(--_selected-icon-color)}.selected:not(:disabled,[aria-disabled=true]):hover{color:var(--_selected-hover-icon-color)}.selected:not(:disabled,[aria-disabled=true]):focus{color:var(--_selected-focus-icon-color)}.selected:not(:disabled,[aria-disabled=true]):active{color:var(--_selected-pressed-icon-color)}.selected:not(:disabled,[aria-disabled=true])::before{background-color:var(--_selected-container-color)}.selected:is(:disabled,[aria-disabled=true])::before{background-color:var(--_disabled-selected-container-color);opacity:var(--_disabled-selected-container-opacity)}@media(forced-colors: active){:host(:is([disabled],[soft-disabled])){--_disabled-outline-opacity: 1}.selected::before{border-color:CanvasText;border-width:var(--_outline-width)}.selected:is(:disabled,[aria-disabled=true])::before{border-color:GrayText;opacity:1}}\n`;\n"]}
package/iconbutton/internal/outlined-styles.scss ADDED
@@ -0,0 +1,10 @@
1
+ //
2
+ // Copyright 2022 Google LLC
3
+ // SPDX-License-Identifier: Apache-2.0
4
+ //
5
+
6
+ // go/keep-sorted start
7
+ @use './outlined-icon-button';
8
+ // go/keep-sorted end
9
+
10
+ @include outlined-icon-button.styles;
package/iconbutton/internal/shared-styles.css ADDED
@@ -0,0 +1 @@
1
+ :host{display:inline-flex;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);height:var(--_container-height);width:var(--_container-width);justify-content:center}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-height))/2) max(0px,(48px - var(--_container-width))/2)}md-focus-ring{--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}:host(:is([disabled],[soft-disabled])){pointer-events:none}.icon-button{place-items:center;background:none;border:none;box-sizing:border-box;cursor:pointer;display:flex;place-content:center;outline:none;padding:0;position:relative;text-decoration:none;user-select:none;z-index:0;flex:1;border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.icon ::slotted(*){font-size:var(--_icon-size);height:var(--_icon-size);width:var(--_icon-size);font-weight:inherit}md-ripple{z-index:-1;border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.flip-icon .icon{transform:scaleX(-1)}.icon{display:inline-flex}.link{height:100%;outline:none;position:absolute;width:100%}.touch{position:absolute;height:max(48px,100%);width:max(48px,100%)}:host([touch-target=none]) .touch{display:none}@media(forced-colors: active){:host(:is([disabled],[soft-disabled])){--_disabled-icon-color: GrayText;--_disabled-icon-opacity: 1}}/*# sourceMappingURL=shared-styles.css.map */
package/iconbutton/internal/shared-styles.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["_shared.scss","../../focus/internal/_focus-ring.scss"],"names":[],"mappings":"AAkBE,MACE,oBACA,aACA,0CACA,gCACA,8BACA,uBAGF,8BACE,gGAIF,cCTI,4QDoBJ,uCACE,oBAGF,aACE,mBACA,gBACA,YACA,sBACA,eACA,aACA,qBACA,aACA,UACA,kBACA,qBACA,iBACA,UACA,OACA,8DACA,0DACA,0DACA,sDAIA,mBACE,4BACA,yBACA,wBACA,oBAIJ,UACE,WACA,8DACA,0DACA,0DACA,sDAGF,iBACE,qBAGF,MACE,oBAGF,MACE,YACA,aACA,kBACA,WAGF,OACE,kBACA,sBACA,qBAGF,kCACE,aAGF,8BACE,uCACE,iCACA","file":"shared-styles.css"}
package/iconbutton/internal/shared-styles.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const styles: import("lit").CSSResult;