@material/web 1.0.0-pre.1 → 1.0.0-pre.3

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 (683) hide show
  1. package/README.md +66 -19
  2. package/autocomplete/autocomplete-item.js.map +1 -1
  3. package/autocomplete/autocomplete-list.js.map +1 -1
  4. package/autocomplete/autocomplete-surface.js.map +1 -1
  5. package/autocomplete/filled-autocomplete.d.ts +0 -2
  6. package/autocomplete/filled-autocomplete.js +0 -7
  7. package/autocomplete/filled-autocomplete.js.map +1 -1
  8. package/autocomplete/lib/_filled-autocomplete.scss +23 -62
  9. package/autocomplete/lib/_outlined-autocomplete.scss +24 -63
  10. package/autocomplete/lib/_shared.scss +6 -10
  11. package/autocomplete/lib/autocomplete.d.ts +2 -6
  12. package/autocomplete/lib/autocomplete.js +9 -17
  13. package/autocomplete/lib/autocomplete.js.map +1 -1
  14. package/autocomplete/lib/autocompleteitem/autocomplete-item.d.ts +2 -2
  15. package/autocomplete/lib/autocompleteitem/autocomplete-item.js +2 -2
  16. package/autocomplete/lib/autocompleteitem/autocomplete-item.js.map +1 -1
  17. package/autocomplete/lib/autocompletelist/autocomplete-list-styles.scss +2 -0
  18. package/autocomplete/lib/autocompletelist/autocomplete-list.d.ts +1 -1
  19. package/autocomplete/lib/autocompletelist/autocomplete-list.js +2 -2
  20. package/autocomplete/lib/autocompletelist/autocomplete-list.js.map +1 -1
  21. package/autocomplete/lib/autocompletesurface/autocomplete-surface-styles.scss +2 -0
  22. package/autocomplete/lib/filled-styles.css.js +1 -1
  23. package/autocomplete/lib/filled-styles.css.js.map +1 -1
  24. package/autocomplete/lib/filled-styles.scss +2 -0
  25. package/autocomplete/lib/outlined-styles.css.js +1 -1
  26. package/autocomplete/lib/outlined-styles.css.js.map +1 -1
  27. package/autocomplete/lib/outlined-styles.scss +2 -0
  28. package/autocomplete/lib/shared-styles.scss +2 -0
  29. package/autocomplete/outlined-autocomplete.d.ts +0 -2
  30. package/autocomplete/outlined-autocomplete.js +0 -7
  31. package/autocomplete/outlined-autocomplete.js.map +1 -1
  32. package/badge/badge.js.map +1 -1
  33. package/badge/lib/_badge.scss +10 -13
  34. package/badge/lib/badge-styles.css.js +1 -1
  35. package/badge/lib/badge-styles.css.js.map +1 -1
  36. package/badge/lib/badge-styles.scss +2 -0
  37. package/badge/lib/badge.js.map +1 -1
  38. package/button/elevated-button.js.map +1 -1
  39. package/button/elevated-link-button.js.map +1 -1
  40. package/button/filled-button.js.map +1 -1
  41. package/button/filled-link-button.js.map +1 -1
  42. package/button/lib/_elevated-button.scss +10 -15
  43. package/button/lib/_elevation.scss +5 -2
  44. package/button/lib/_filled-button.scss +12 -14
  45. package/button/lib/_icon.scss +15 -24
  46. package/button/lib/_outlined-button.scss +10 -15
  47. package/button/lib/_shared.scss +15 -19
  48. package/button/lib/_text-button.scss +12 -14
  49. package/button/lib/_tonal-button.scss +10 -15
  50. package/button/lib/button.d.ts +0 -3
  51. package/button/lib/button.js +1 -12
  52. package/button/lib/button.js.map +1 -1
  53. package/button/lib/elevated-styles.css.js +1 -1
  54. package/button/lib/elevated-styles.css.js.map +1 -1
  55. package/button/lib/elevated-styles.scss +2 -0
  56. package/button/lib/filled-styles.css.js +1 -1
  57. package/button/lib/filled-styles.css.js.map +1 -1
  58. package/button/lib/filled-styles.scss +2 -0
  59. package/button/lib/link-button.d.ts +0 -1
  60. package/button/lib/link-button.js +0 -5
  61. package/button/lib/link-button.js.map +1 -1
  62. package/button/lib/outlined-styles.css.js +1 -1
  63. package/button/lib/outlined-styles.css.js.map +1 -1
  64. package/button/lib/outlined-styles.scss +2 -0
  65. package/button/lib/shared-elevation-styles.css.js +1 -1
  66. package/button/lib/shared-elevation-styles.css.js.map +1 -1
  67. package/button/lib/shared-elevation-styles.scss +2 -0
  68. package/button/lib/shared-styles.css.js +1 -1
  69. package/button/lib/shared-styles.css.js.map +1 -1
  70. package/button/lib/shared-styles.scss +2 -0
  71. package/button/lib/text-styles.css.js +1 -1
  72. package/button/lib/text-styles.css.js.map +1 -1
  73. package/button/lib/text-styles.scss +2 -0
  74. package/button/lib/tonal-styles.css.js +1 -1
  75. package/button/lib/tonal-styles.css.js.map +1 -1
  76. package/button/lib/tonal-styles.scss +2 -0
  77. package/button/outlined-button.js.map +1 -1
  78. package/button/outlined-link-button.js.map +1 -1
  79. package/button/text-button.js.map +1 -1
  80. package/button/text-link-button.js.map +1 -1
  81. package/button/tonal-button.js.map +1 -1
  82. package/button/tonal-link-button.js.map +1 -1
  83. package/checkbox/checkbox.d.ts +11 -2
  84. package/checkbox/checkbox.js +11 -2
  85. package/checkbox/checkbox.js.map +1 -1
  86. package/checkbox/lib/_checkbox.scss +26 -31
  87. package/checkbox/lib/checkbox-styles.css.js +1 -1
  88. package/checkbox/lib/checkbox-styles.css.js.map +1 -1
  89. package/checkbox/lib/checkbox-styles.scss +2 -0
  90. package/checkbox/lib/checkbox.d.ts +28 -0
  91. package/checkbox/lib/checkbox.js +33 -4
  92. package/checkbox/lib/checkbox.js.map +1 -1
  93. package/checkbox/lib/forced-colors-styles.scss +2 -0
  94. package/chips/action/delete-action.js.map +1 -1
  95. package/chips/action/lib/action.js +4 -4
  96. package/chips/action/lib/action.js.map +1 -1
  97. package/chips/action/lib/link-action.js +1 -1
  98. package/chips/action/lib/link-action.js.map +1 -1
  99. package/chips/action/lib/primary-action.js.map +1 -1
  100. package/chips/action/lib/selectable-action.js.map +1 -1
  101. package/chips/action/link-action.js.map +1 -1
  102. package/chips/action/presentational-action.js.map +1 -1
  103. package/chips/action/primary-action.js.map +1 -1
  104. package/chips/action/selectable-action.js.map +1 -1
  105. package/chips/chip/lib/_assist-chip-theme.scss +4 -0
  106. package/chips/chip/lib/_chip-theme.scss +30 -41
  107. package/chips/chip/lib/_chip.scss +2 -0
  108. package/chips/chip/lib/_filter-chip-theme.scss +4 -0
  109. package/chips/chip/lib/_input-chip-theme.scss +4 -0
  110. package/chips/chip/lib/_suggestion-chip-theme.scss +4 -0
  111. package/chips/chip/lib/chip.js.map +1 -1
  112. package/chips/chip/lib/foundation.js +4 -4
  113. package/chips/chip/lib/foundation.js.map +1 -1
  114. package/chips/chip/lib/link-chip.js.map +1 -1
  115. package/chips/chip/lib/selectable-chip.js.map +1 -1
  116. package/chips/chip/lib/types.d.ts +2 -2
  117. package/chips/chipset/lib/_chip-set-theme.scss +2 -0
  118. package/chips/chipset/lib/_chip-set.scss +2 -0
  119. package/chips/chipset/lib/foundation.js +3 -3
  120. package/chips/chipset/lib/foundation.js.map +1 -1
  121. package/chips/chipset/lib/types.d.ts +3 -3
  122. package/controller/events.js +4 -0
  123. package/controller/events.js.map +1 -1
  124. package/controller/form-controller.js.map +1 -1
  125. package/controller/foundation.d.ts +1 -1
  126. package/controller/observer.d.ts +2 -2
  127. package/dialog/_dialog.scss +6 -0
  128. package/dialog/dialog.d.ts +38 -0
  129. package/dialog/dialog.js +41 -0
  130. package/dialog/dialog.js.map +1 -0
  131. package/dialog/harness.d.ts +18 -0
  132. package/dialog/harness.js +58 -0
  133. package/dialog/harness.js.map +1 -0
  134. package/dialog/lib/_dialog.scss +382 -0
  135. package/dialog/lib/_tokens.scss +89 -0
  136. package/dialog/lib/dialog-styles.css.js +9 -0
  137. package/dialog/lib/dialog-styles.css.js.map +1 -0
  138. package/dialog/lib/dialog-styles.scss +10 -0
  139. package/dialog/lib/dialog.d.ts +190 -0
  140. package/dialog/lib/dialog.js +568 -0
  141. package/dialog/lib/dialog.js.map +1 -0
  142. package/divider/_divider.scss +6 -0
  143. package/divider/divider.d.ts +24 -0
  144. package/divider/divider.js +27 -0
  145. package/divider/divider.js.map +1 -0
  146. package/divider/lib/_divider.scss +56 -0
  147. package/divider/lib/divider-styles.css.js +9 -0
  148. package/divider/lib/divider-styles.css.js.map +1 -0
  149. package/divider/lib/divider-styles.scss +10 -0
  150. package/divider/lib/divider.d.ts +23 -0
  151. package/divider/lib/divider.js +41 -0
  152. package/divider/lib/divider.js.map +1 -0
  153. package/elevation/elevation.js.map +1 -1
  154. package/elevation/lib/_elevation.scss +5 -1
  155. package/elevation/lib/_md-comp-elevation.scss +5 -1
  156. package/elevation/lib/elevation-styles.css.js +1 -1
  157. package/elevation/lib/elevation-styles.css.js.map +1 -1
  158. package/elevation/lib/elevation-styles.scss +2 -0
  159. package/elevation/lib/elevation.js.map +1 -1
  160. package/fab/fab-extended.js.map +1 -1
  161. package/fab/fab.js.map +1 -1
  162. package/fab/lib/_fab-extended.scss +18 -11
  163. package/fab/lib/_fab.scss +7 -2
  164. package/fab/lib/_shared.scss +17 -9
  165. package/fab/lib/fab-extended-styles.css.js +1 -1
  166. package/fab/lib/fab-extended-styles.css.js.map +1 -1
  167. package/fab/lib/fab-extended-styles.scss +2 -0
  168. package/fab/lib/fab-shared-styles.css.js +1 -1
  169. package/fab/lib/fab-shared-styles.css.js.map +1 -1
  170. package/fab/lib/fab-shared-styles.scss +2 -0
  171. package/fab/lib/fab-shared.d.ts +9 -15
  172. package/fab/lib/fab-shared.js +21 -33
  173. package/fab/lib/fab-shared.js.map +1 -1
  174. package/fab/lib/fab-styles.css.js +1 -1
  175. package/fab/lib/fab-styles.css.js.map +1 -1
  176. package/fab/lib/fab-styles.scss +2 -0
  177. package/field/filled-field.d.ts +1 -1
  178. package/field/filled-field.js +1 -1
  179. package/field/filled-field.js.map +1 -1
  180. package/field/harness.js +1 -1
  181. package/field/harness.js.map +1 -1
  182. package/field/lib/_content.scss +35 -50
  183. package/field/lib/_filled-field.scss +60 -76
  184. package/field/lib/_label.scss +26 -63
  185. package/field/lib/_md-comp-filled-field.scss +17 -3
  186. package/field/lib/_md-comp-outlined-field.scss +16 -5
  187. package/field/lib/_outlined-field.scss +96 -110
  188. package/field/lib/_shared.scss +15 -35
  189. package/field/lib/_supporting-text.scss +25 -52
  190. package/field/lib/field.d.ts +14 -33
  191. package/field/lib/field.js +79 -101
  192. package/field/lib/field.js.map +1 -1
  193. package/field/lib/filled-field.d.ts +10 -16
  194. package/field/lib/filled-field.js +14 -37
  195. package/field/lib/filled-field.js.map +1 -1
  196. package/field/lib/filled-styles.css.js +1 -1
  197. package/field/lib/filled-styles.css.js.map +1 -1
  198. package/field/lib/outlined-field.d.ts +4 -10
  199. package/field/lib/outlined-field.js +13 -33
  200. package/field/lib/outlined-field.js.map +1 -1
  201. package/field/lib/outlined-styles.css.js +1 -1
  202. package/field/lib/outlined-styles.css.js.map +1 -1
  203. package/field/lib/shared-styles.css.js +1 -1
  204. package/field/lib/shared-styles.css.js.map +1 -1
  205. package/field/outlined-field.d.ts +1 -1
  206. package/field/outlined-field.js +1 -1
  207. package/field/outlined-field.js.map +1 -1
  208. package/focus/focus-ring.js.map +1 -1
  209. package/focus/lib/_focus-ring.scss +10 -23
  210. package/focus/lib/_md-comp-focus-ring.scss +4 -0
  211. package/focus/lib/focus-ring-styles.css.js +1 -1
  212. package/focus/lib/focus-ring-styles.css.js.map +1 -1
  213. package/focus/lib/focus-ring-styles.scss +2 -0
  214. package/focus/lib/focus-ring.d.ts +1 -4
  215. package/focus/lib/focus-ring.js +2 -11
  216. package/focus/lib/focus-ring.js.map +1 -1
  217. package/icon/icon.js.map +1 -1
  218. package/icon/lib/_icon.scss +2 -0
  219. package/icon/lib/icon-styles.scss +2 -0
  220. package/iconbutton/filled-icon-button-toggle.js.map +1 -1
  221. package/iconbutton/filled-icon-button.js.map +1 -1
  222. package/iconbutton/filled-link-icon-button.js.map +1 -1
  223. package/iconbutton/filled-tonal-icon-button-toggle.js.map +1 -1
  224. package/iconbutton/filled-tonal-icon-button.js.map +1 -1
  225. package/iconbutton/filled-tonal-link-icon-button.js.map +1 -1
  226. package/iconbutton/lib/_filled-icon-button.scss +20 -20
  227. package/iconbutton/lib/_filled-tonal-icon-button.scss +20 -20
  228. package/iconbutton/lib/_outlined-icon-button.scss +27 -21
  229. package/iconbutton/lib/_shared.scss +13 -33
  230. package/iconbutton/lib/_standard-icon-button.scss +25 -24
  231. package/iconbutton/lib/filled-styles.css.js +1 -1
  232. package/iconbutton/lib/filled-styles.css.js.map +1 -1
  233. package/iconbutton/lib/filled-styles.scss +2 -0
  234. package/iconbutton/lib/filled-tonal-styles.css.js +1 -1
  235. package/iconbutton/lib/filled-tonal-styles.css.js.map +1 -1
  236. package/iconbutton/lib/filled-tonal-styles.scss +2 -0
  237. package/iconbutton/lib/icon-button-toggle.d.ts +13 -42
  238. package/iconbutton/lib/icon-button-toggle.js +33 -103
  239. package/iconbutton/lib/icon-button-toggle.js.map +1 -1
  240. package/iconbutton/lib/icon-button.d.ts +2 -4
  241. package/iconbutton/lib/icon-button.js +3 -9
  242. package/iconbutton/lib/icon-button.js.map +1 -1
  243. package/iconbutton/lib/link-icon-button.js.map +1 -1
  244. package/iconbutton/lib/outlined-styles.css.js +1 -1
  245. package/iconbutton/lib/outlined-styles.css.js.map +1 -1
  246. package/iconbutton/lib/outlined-styles.scss +2 -0
  247. package/iconbutton/lib/shared-styles.css.js +1 -1
  248. package/iconbutton/lib/shared-styles.css.js.map +1 -1
  249. package/iconbutton/lib/shared-styles.scss +2 -0
  250. package/iconbutton/lib/standard-styles.css.js +1 -1
  251. package/iconbutton/lib/standard-styles.css.js.map +1 -1
  252. package/iconbutton/lib/standard-styles.scss +2 -0
  253. package/iconbutton/outlined-icon-button-toggle.js.map +1 -1
  254. package/iconbutton/outlined-icon-button.js.map +1 -1
  255. package/iconbutton/outlined-link-icon-button.js.map +1 -1
  256. package/iconbutton/standard-icon-button-toggle.js.map +1 -1
  257. package/iconbutton/standard-icon-button.js.map +1 -1
  258. package/iconbutton/standard-link-icon-button.js.map +1 -1
  259. package/list/lib/_list.scss +35 -39
  260. package/list/lib/avatar/_list-item-avatar.scss +3 -1
  261. package/list/lib/avatar/list-item-avatar-styles.css.js +1 -1
  262. package/list/lib/avatar/list-item-avatar-styles.css.js.map +1 -1
  263. package/list/lib/avatar/list-item-avatar-styles.scss +2 -0
  264. package/list/lib/avatar/list-item-avatar.d.ts +9 -4
  265. package/list/lib/avatar/list-item-avatar.js +24 -11
  266. package/list/lib/avatar/list-item-avatar.js.map +1 -1
  267. package/list/lib/icon/_list-item-icon.scss +7 -1
  268. package/list/lib/icon/list-item-icon-styles.css.js +1 -1
  269. package/list/lib/icon/list-item-icon-styles.css.js.map +1 -1
  270. package/list/lib/icon/list-item-icon-styles.scss +2 -0
  271. package/list/lib/icon/list-item-icon.d.ts +0 -3
  272. package/list/lib/icon/list-item-icon.js +1 -12
  273. package/list/lib/icon/list-item-icon.js.map +1 -1
  274. package/list/lib/image/_list-item-image.scss +6 -2
  275. package/list/lib/image/list-item-image-styles.css.js +1 -1
  276. package/list/lib/image/list-item-image-styles.css.js.map +1 -1
  277. package/list/lib/image/list-item-image-styles.scss +2 -0
  278. package/list/lib/image/list-item-image.d.ts +11 -4
  279. package/list/lib/image/list-item-image.js +24 -13
  280. package/list/lib/image/list-item-image.js.map +1 -1
  281. package/list/lib/list-styles.css.js +1 -1
  282. package/list/lib/list-styles.css.js.map +1 -1
  283. package/list/lib/list-styles.scss +2 -0
  284. package/list/lib/list.d.ts +99 -28
  285. package/list/lib/list.js +213 -112
  286. package/list/lib/list.js.map +1 -1
  287. package/list/lib/listitem/_list-item.scss +122 -56
  288. package/list/lib/listitem/harness.js +2 -1
  289. package/list/lib/listitem/harness.js.map +1 -1
  290. package/list/lib/listitem/list-item-private-styles.css.js +9 -0
  291. package/list/lib/listitem/list-item-private-styles.css.js.map +1 -0
  292. package/list/lib/listitem/list-item-private-styles.scss +10 -0
  293. package/list/lib/listitem/list-item-styles.css.js +1 -1
  294. package/list/lib/listitem/list-item-styles.css.js.map +1 -1
  295. package/list/lib/listitem/list-item-styles.scss +2 -0
  296. package/list/lib/listitem/list-item.d.ts +99 -43
  297. package/list/lib/listitem/list-item.js +204 -173
  298. package/list/lib/listitem/list-item.js.map +1 -1
  299. package/list/lib/listitemlink/list-item-link.d.ts +17 -0
  300. package/list/lib/listitemlink/list-item-link.js +42 -0
  301. package/list/lib/listitemlink/list-item-link.js.map +1 -0
  302. package/list/lib/video/_list-item-video.scss +15 -5
  303. package/list/lib/video/list-item-video-styles.css.js +1 -1
  304. package/list/lib/video/list-item-video-styles.css.js.map +1 -1
  305. package/list/lib/video/list-item-video-styles.scss +2 -0
  306. package/list/lib/video/list-item-video.d.ts +43 -4
  307. package/list/lib/video/list-item-video.js +90 -12
  308. package/list/lib/video/list-item-video.js.map +1 -1
  309. package/list/list-item-avatar.d.ts +2 -1
  310. package/list/list-item-avatar.js +2 -1
  311. package/list/list-item-avatar.js.map +1 -1
  312. package/list/list-item-icon.d.ts +2 -1
  313. package/list/list-item-icon.js +2 -1
  314. package/list/list-item-icon.js.map +1 -1
  315. package/list/list-item-image.d.ts +2 -1
  316. package/list/list-item-image.js +2 -1
  317. package/list/list-item-image.js.map +1 -1
  318. package/list/list-item-link.d.ts +35 -0
  319. package/list/list-item-link.js +39 -0
  320. package/list/list-item-link.js.map +1 -0
  321. package/list/list-item-video.d.ts +2 -1
  322. package/list/list-item-video.js +2 -1
  323. package/list/list-item-video.js.map +1 -1
  324. package/list/list-item.d.ts +18 -2
  325. package/list/list-item.js +20 -3
  326. package/list/list-item.js.map +1 -1
  327. package/list/list.d.ts +15 -1
  328. package/list/list.js +15 -1
  329. package/list/list.js.map +1 -1
  330. package/menu/_menu-item.scss +6 -0
  331. package/menu/_menu.scss +6 -0
  332. package/menu/harness.d.ts +5 -0
  333. package/menu/harness.js +22 -0
  334. package/menu/harness.js.map +1 -1
  335. package/menu/lib/_menu.scss +64 -62
  336. package/menu/lib/menu-styles.css.js +1 -1
  337. package/menu/lib/menu-styles.css.js.map +1 -1
  338. package/menu/lib/menu-styles.scss +2 -0
  339. package/menu/lib/menu.d.ts +177 -43
  340. package/menu/lib/menu.js +506 -246
  341. package/menu/lib/menu.js.map +1 -1
  342. package/menu/lib/menuitem/_menu-item.scss +123 -0
  343. package/menu/lib/menuitem/menu-item-private-styles.css.js +9 -0
  344. package/menu/lib/menuitem/menu-item-private-styles.css.js.map +1 -0
  345. package/menu/lib/menuitem/menu-item-private-styles.scss +10 -0
  346. package/menu/lib/menuitem/menu-item-styles.css.d.ts +1 -0
  347. package/menu/lib/menuitem/menu-item-styles.css.js +9 -0
  348. package/menu/lib/menuitem/menu-item-styles.css.js.map +1 -0
  349. package/menu/lib/menuitem/menu-item-styles.scss +10 -0
  350. package/menu/lib/menuitem/menu-item.d.ts +20 -3
  351. package/menu/lib/menuitem/menu-item.js +42 -3
  352. package/menu/lib/menuitem/menu-item.js.map +1 -1
  353. package/menu/lib/menuitemlink/menu-item-link.d.ts +25 -0
  354. package/menu/lib/menuitemlink/menu-item-link.js +51 -0
  355. package/menu/lib/menuitemlink/menu-item-link.js.map +1 -0
  356. package/menu/lib/shared.d.ts +134 -0
  357. package/menu/lib/shared.js +85 -0
  358. package/menu/lib/shared.js.map +1 -0
  359. package/menu/lib/submenuitem/harness.d.ts +11 -0
  360. package/menu/lib/submenuitem/harness.js +12 -0
  361. package/menu/lib/submenuitem/harness.js.map +1 -0
  362. package/menu/lib/submenuitem/sub-menu-item.d.ts +89 -0
  363. package/menu/lib/submenuitem/sub-menu-item.js +266 -0
  364. package/menu/lib/submenuitem/sub-menu-item.js.map +1 -0
  365. package/menu/lib/surfacePositionController.d.ts +117 -0
  366. package/menu/lib/surfacePositionController.js +196 -0
  367. package/menu/lib/surfacePositionController.js.map +1 -0
  368. package/menu/lib/typeaheadController.d.ts +144 -0
  369. package/menu/lib/typeaheadController.js +242 -0
  370. package/menu/lib/typeaheadController.js.map +1 -0
  371. package/menu/menu-item-link.d.ts +33 -0
  372. package/menu/menu-item-link.js +37 -0
  373. package/menu/menu-item-link.js.map +1 -0
  374. package/menu/menu-item.d.ts +19 -2
  375. package/menu/menu-item.js +22 -4
  376. package/menu/menu-item.js.map +1 -1
  377. package/menu/menu.d.ts +45 -0
  378. package/menu/menu.js +43 -0
  379. package/menu/menu.js.map +1 -1
  380. package/menu/sub-menu-item.d.ts +60 -0
  381. package/menu/sub-menu-item.js +64 -0
  382. package/menu/sub-menu-item.js.map +1 -0
  383. package/menusurface/lib/_md-comp-menu-surface.scss +4 -0
  384. package/menusurface/lib/_menu-surface.scss +5 -1
  385. package/menusurface/lib/foundation.js +31 -31
  386. package/menusurface/lib/foundation.js.map +1 -1
  387. package/menusurface/lib/menu-surface-styles.css.js +1 -1
  388. package/menusurface/lib/menu-surface-styles.css.js.map +1 -1
  389. package/menusurface/lib/menu-surface-styles.scss +2 -0
  390. package/menusurface/lib/menu-surface.d.ts +2 -2
  391. package/menusurface/lib/menu-surface.js.map +1 -1
  392. package/menusurface/menu-surface.js.map +1 -1
  393. package/motion/animation.d.ts +20 -3
  394. package/motion/animation.js +39 -4
  395. package/motion/animation.js.map +1 -1
  396. package/navigationbar/lib/_navigation-bar.scss +11 -9
  397. package/navigationbar/lib/constants.d.ts +1 -1
  398. package/navigationbar/lib/navigation-bar-styles.css.js +1 -1
  399. package/navigationbar/lib/navigation-bar-styles.css.js.map +1 -1
  400. package/navigationbar/lib/navigation-bar-styles.scss +2 -0
  401. package/navigationbar/lib/navigation-bar.js.map +1 -1
  402. package/navigationbar/navigation-bar.js.map +1 -1
  403. package/navigationdrawer/lib/_navigation-drawer-modal.scss +11 -2
  404. package/navigationdrawer/lib/_navigation-drawer.scss +11 -6
  405. package/navigationdrawer/lib/_shared.scss +4 -8
  406. package/navigationdrawer/lib/navigation-drawer-modal-styles.css.js +1 -1
  407. package/navigationdrawer/lib/navigation-drawer-modal-styles.css.js.map +1 -1
  408. package/navigationdrawer/lib/navigation-drawer-modal-styles.scss +2 -0
  409. package/navigationdrawer/lib/navigation-drawer-modal.js.map +1 -1
  410. package/navigationdrawer/lib/navigation-drawer-styles.css.js +1 -1
  411. package/navigationdrawer/lib/navigation-drawer-styles.css.js.map +1 -1
  412. package/navigationdrawer/lib/navigation-drawer-styles.scss +2 -0
  413. package/navigationdrawer/lib/navigation-drawer.js.map +1 -1
  414. package/navigationdrawer/lib/shared-styles.scss +2 -0
  415. package/navigationdrawer/navigation-drawer-modal.js.map +1 -1
  416. package/navigationdrawer/navigation-drawer.js.map +1 -1
  417. package/navigationtab/lib/_navigation-tab.scss +34 -41
  418. package/navigationtab/lib/navigation-tab-styles.css.js +1 -1
  419. package/navigationtab/lib/navigation-tab-styles.css.js.map +1 -1
  420. package/navigationtab/lib/navigation-tab-styles.scss +2 -0
  421. package/navigationtab/lib/navigation-tab.js +4 -4
  422. package/navigationtab/lib/navigation-tab.js.map +1 -1
  423. package/navigationtab/navigation-tab.js.map +1 -1
  424. package/package.json +2 -9
  425. package/radio/lib/_radio.scss +16 -15
  426. package/radio/lib/forced-colors-styles.scss +2 -0
  427. package/radio/lib/radio-styles.css.js +1 -1
  428. package/radio/lib/radio-styles.css.js.map +1 -1
  429. package/radio/lib/radio-styles.scss +2 -0
  430. package/radio/lib/radio.d.ts +10 -1
  431. package/radio/lib/radio.js +28 -19
  432. package/radio/lib/radio.js.map +1 -1
  433. package/radio/radio.d.ts +16 -1
  434. package/radio/radio.js +16 -1
  435. package/radio/radio.js.map +1 -1
  436. package/ripple/directive.d.ts +1 -33
  437. package/ripple/directive.js +7 -194
  438. package/ripple/directive.js.map +1 -1
  439. package/ripple/lib/_md-comp-ripple.scss +20 -19
  440. package/ripple/lib/_ripple.scss +24 -40
  441. package/ripple/lib/ripple-styles.css.js +1 -1
  442. package/ripple/lib/ripple-styles.css.js.map +1 -1
  443. package/ripple/lib/ripple-styles.scss +2 -0
  444. package/ripple/lib/ripple.d.ts +50 -48
  445. package/ripple/lib/ripple.js +215 -77
  446. package/ripple/lib/ripple.js.map +1 -1
  447. package/ripple/ripple.d.ts +9 -1
  448. package/ripple/ripple.js +9 -1
  449. package/ripple/ripple.js.map +1 -1
  450. package/sass/_assert.scss +2 -0
  451. package/sass/_color-scheme.scss +4 -0
  452. package/sass/_color.scss +4 -0
  453. package/sass/_elevation.scss +4 -0
  454. package/sass/_feature-flags.scss +2 -0
  455. package/sass/_map-ext.scss +26 -0
  456. package/sass/_resolvers.scss +4 -4
  457. package/sass/_shape.scss +75 -27
  458. package/sass/_string-ext.scss +67 -0
  459. package/sass/_theme.scss +4 -0
  460. package/sass/_typography.scss +18 -93
  461. package/sass/_var.scss +4 -0
  462. package/segmentedbutton/lib/_outlined-segmented-button.scss +4 -0
  463. package/segmentedbutton/lib/_shared.scss +18 -22
  464. package/segmentedbutton/lib/outlined-styles.css.js +1 -1
  465. package/segmentedbutton/lib/outlined-styles.css.js.map +1 -1
  466. package/segmentedbutton/lib/outlined-styles.scss +2 -0
  467. package/segmentedbutton/lib/segmented-button.js +4 -4
  468. package/segmentedbutton/lib/segmented-button.js.map +1 -1
  469. package/segmentedbutton/lib/shared-styles.css.js +1 -1
  470. package/segmentedbutton/lib/shared-styles.css.js.map +1 -1
  471. package/segmentedbutton/lib/shared-styles.scss +2 -0
  472. package/segmentedbutton/outlined-segmented-button.js.map +1 -1
  473. package/segmentedbuttonset/lib/_outlined-segmented-button-set.scss +9 -5
  474. package/segmentedbuttonset/lib/_shared.scss +0 -13
  475. package/segmentedbuttonset/lib/outlined-styles.css.js +1 -1
  476. package/segmentedbuttonset/lib/outlined-styles.css.js.map +1 -1
  477. package/segmentedbuttonset/lib/outlined-styles.scss +2 -0
  478. package/segmentedbuttonset/lib/segmented-button-set.d.ts +0 -2
  479. package/segmentedbuttonset/lib/segmented-button-set.js +0 -2
  480. package/segmentedbuttonset/lib/segmented-button-set.js.map +1 -1
  481. package/segmentedbuttonset/lib/shared-styles.scss +2 -0
  482. package/segmentedbuttonset/outlined-segmented-button-set.js.map +1 -1
  483. package/slider/_slider.scss +6 -0
  484. package/slider/harness.d.ts +20 -0
  485. package/slider/harness.js +63 -0
  486. package/slider/harness.js.map +1 -0
  487. package/slider/lib/_slider.scss +503 -0
  488. package/slider/lib/_tokens.scss +66 -0
  489. package/slider/lib/forced-colors-styles.css.d.ts +1 -0
  490. package/slider/lib/forced-colors-styles.css.js +9 -0
  491. package/slider/lib/forced-colors-styles.css.js.map +1 -0
  492. package/slider/lib/forced-colors-styles.scss +53 -0
  493. package/slider/lib/slider-styles.css.d.ts +1 -0
  494. package/slider/lib/slider-styles.css.js +9 -0
  495. package/slider/lib/slider-styles.css.js.map +1 -0
  496. package/slider/lib/slider-styles.scss +8 -0
  497. package/slider/lib/slider.d.ts +158 -0
  498. package/slider/lib/slider.js +575 -0
  499. package/slider/lib/slider.js.map +1 -0
  500. package/slider/slider.d.ts +28 -0
  501. package/slider/slider.js +32 -0
  502. package/slider/slider.js.map +1 -0
  503. package/switch/lib/README.md +55 -0
  504. package/switch/lib/_handle.scss +72 -26
  505. package/switch/lib/_icon.scss +40 -0
  506. package/switch/lib/_switch.scss +12 -133
  507. package/switch/lib/_track.scss +41 -0
  508. package/switch/lib/switch-styles.css.js +1 -1
  509. package/switch/lib/switch-styles.css.js.map +1 -1
  510. package/switch/lib/switch-styles.scss +2 -0
  511. package/switch/lib/switch.d.ts +3 -0
  512. package/switch/lib/switch.js +12 -9
  513. package/switch/lib/switch.js.map +1 -1
  514. package/switch/switch.js.map +1 -1
  515. package/textfield/filled-text-field.d.ts +1 -1
  516. package/textfield/filled-text-field.js +1 -2
  517. package/textfield/filled-text-field.js.map +1 -1
  518. package/textfield/harness.js +1 -1
  519. package/textfield/harness.js.map +1 -1
  520. package/textfield/lib/_filled-text-field.scss +29 -23
  521. package/textfield/lib/_icon.scss +41 -56
  522. package/textfield/lib/_input.scss +17 -36
  523. package/textfield/lib/_outlined-text-field.scss +29 -23
  524. package/textfield/lib/_shared.scss +10 -29
  525. package/textfield/lib/filled-forced-colors-styles.scss +2 -0
  526. package/textfield/lib/filled-styles.css.js +1 -1
  527. package/textfield/lib/filled-styles.css.js.map +1 -1
  528. package/textfield/lib/filled-styles.scss +2 -0
  529. package/textfield/lib/filled-text-field.d.ts +6 -5
  530. package/textfield/lib/filled-text-field.js +8 -7
  531. package/textfield/lib/filled-text-field.js.map +1 -1
  532. package/textfield/lib/outlined-forced-colors-styles.scss +2 -0
  533. package/textfield/lib/outlined-styles.css.js +1 -1
  534. package/textfield/lib/outlined-styles.css.js.map +1 -1
  535. package/textfield/lib/outlined-styles.scss +2 -0
  536. package/textfield/lib/outlined-text-field.d.ts +6 -5
  537. package/textfield/lib/outlined-text-field.js +8 -7
  538. package/textfield/lib/outlined-text-field.js.map +1 -1
  539. package/textfield/lib/shared-styles.css.js +1 -1
  540. package/textfield/lib/shared-styles.css.js.map +1 -1
  541. package/textfield/lib/shared-styles.scss +2 -0
  542. package/textfield/lib/text-field.d.ts +40 -90
  543. package/textfield/lib/text-field.js +194 -272
  544. package/textfield/lib/text-field.js.map +1 -1
  545. package/textfield/outlined-text-field.d.ts +1 -1
  546. package/textfield/outlined-text-field.js +1 -2
  547. package/textfield/outlined-text-field.js.map +1 -1
  548. package/tokens/_index.scss +1 -1
  549. package/tokens/{v0_150 → v0_160}/_index.scss +1 -1
  550. package/tokens/{v0_150 → v0_160}/_md-comp-assist-chip.scss +2 -2
  551. package/tokens/{v0_150 → v0_160}/_md-comp-badge.scss +2 -2
  552. package/tokens/{v0_150 → v0_160}/_md-comp-banner.scss +2 -43
  553. package/tokens/{v0_150 → v0_160}/_md-comp-bottom-app-bar.scss +3 -4
  554. package/tokens/{v0_150 → v0_160}/_md-comp-carousel-item.scss +2 -2
  555. package/tokens/{v0_150 → v0_160}/_md-comp-checkbox.scss +5 -26
  556. package/tokens/{v0_150 → v0_160}/_md-comp-circular-progress-indicator.scss +2 -2
  557. package/tokens/{v0_150 → v0_160}/_md-comp-data-table.scss +2 -6
  558. package/tokens/{v0_150 → v0_160}/_md-comp-date-input-modal.scss +11 -11
  559. package/tokens/{v0_150 → v0_160}/_md-comp-date-picker-docked.scss +24 -24
  560. package/tokens/{v0_150 → v0_160}/_md-comp-date-picker-modal.scss +35 -35
  561. package/tokens/{v0_150 → v0_160}/_md-comp-dialog.scss +2 -25
  562. package/tokens/{v0_150 → v0_160}/_md-comp-divider.scss +2 -2
  563. package/tokens/{v0_150 → v0_160}/_md-comp-elevated-button.scss +2 -2
  564. package/tokens/{v0_150 → v0_160}/_md-comp-elevated-card.scss +2 -2
  565. package/tokens/{v0_150 → v0_160}/_md-comp-extended-fab-branded.scss +2 -2
  566. package/tokens/{v0_150 → v0_160}/_md-comp-extended-fab-primary.scss +2 -2
  567. package/tokens/{v0_150 → v0_160}/_md-comp-extended-fab-secondary.scss +2 -2
  568. package/tokens/{v0_150 → v0_160}/_md-comp-extended-fab-surface.scss +2 -2
  569. package/tokens/{v0_150 → v0_160}/_md-comp-extended-fab-tertiary.scss +2 -4
  570. package/tokens/{v0_150 → v0_160}/_md-comp-fab-branded-large.scss +2 -3
  571. package/tokens/{v0_150 → v0_160}/_md-comp-fab-branded.scss +2 -2
  572. package/tokens/{v0_150 → v0_160}/_md-comp-fab-primary-large.scss +2 -2
  573. package/tokens/{v0_150 → v0_160}/_md-comp-fab-primary-small.scss +2 -2
  574. package/tokens/{v0_150 → v0_160}/_md-comp-fab-primary.scss +2 -2
  575. package/tokens/{v0_150 → v0_160}/_md-comp-fab-secondary-large.scss +2 -2
  576. package/tokens/{v0_150 → v0_160}/_md-comp-fab-secondary-small.scss +2 -2
  577. package/tokens/{v0_150 → v0_160}/_md-comp-fab-secondary.scss +2 -2
  578. package/tokens/{v0_150 → v0_160}/_md-comp-fab-surface-large.scss +2 -2
  579. package/tokens/{v0_150 → v0_160}/_md-comp-fab-surface-small.scss +2 -2
  580. package/tokens/{v0_150 → v0_160}/_md-comp-fab-surface.scss +2 -2
  581. package/tokens/{v0_150 → v0_160}/_md-comp-fab-tertiary-large.scss +2 -2
  582. package/tokens/{v0_150 → v0_160}/_md-comp-fab-tertiary-small.scss +2 -2
  583. package/tokens/{v0_150 → v0_160}/_md-comp-fab-tertiary.scss +2 -2
  584. package/tokens/{v0_150 → v0_160}/_md-comp-filled-autocomplete.scss +2 -3
  585. package/tokens/{v0_150 → v0_160}/_md-comp-filled-button.scss +2 -8
  586. package/tokens/{v0_150 → v0_160}/_md-comp-filled-card.scss +2 -4
  587. package/tokens/{v0_150 → v0_160}/_md-comp-filled-icon-button.scss +2 -2
  588. package/tokens/{v0_150 → v0_160}/_md-comp-filled-menu-button.scss +2 -2
  589. package/tokens/{v0_150 → v0_160}/_md-comp-filled-select.scss +2 -6
  590. package/tokens/{v0_150 → v0_160}/_md-comp-filled-text-field.scss +2 -3
  591. package/tokens/{v0_150 → v0_160}/_md-comp-filled-tonal-button.scss +2 -2
  592. package/tokens/{v0_150 → v0_160}/_md-comp-filled-tonal-icon-button.scss +2 -2
  593. package/tokens/{v0_150 → v0_160}/_md-comp-filter-chip.scss +2 -30
  594. package/tokens/{v0_150 → v0_160}/_md-comp-full-screen-dialog.scss +3 -53
  595. package/tokens/{v0_150 → v0_160}/_md-comp-icon-button.scss +3 -3
  596. package/tokens/{v0_150 → v0_160}/_md-comp-input-chip.scss +2 -52
  597. package/tokens/{v0_150 → v0_160}/_md-comp-linear-progress-indicator.scss +2 -2
  598. package/tokens/{v0_150 → v0_160}/_md-comp-list.scss +3 -12
  599. package/tokens/{v0_150 → v0_160}/_md-comp-menu.scss +2 -4
  600. package/tokens/{v0_150 → v0_160}/_md-comp-navigation-bar.scss +2 -9
  601. package/tokens/{v0_150 → v0_160}/_md-comp-navigation-drawer.scss +2 -8
  602. package/tokens/{v0_150 → v0_160}/_md-comp-navigation-rail.scss +2 -39
  603. package/tokens/{v0_150 → v0_160}/_md-comp-outlined-autocomplete.scss +2 -3
  604. package/tokens/{v0_150 → v0_160}/_md-comp-outlined-button.scss +2 -6
  605. package/tokens/{v0_150 → v0_160}/_md-comp-outlined-card.scss +2 -2
  606. package/tokens/{v0_150 → v0_160}/_md-comp-outlined-icon-button.scss +2 -4
  607. package/tokens/{v0_150 → v0_160}/_md-comp-outlined-menu-button.scss +2 -2
  608. package/tokens/{v0_150 → v0_160}/_md-comp-outlined-segmented-button.scss +2 -2
  609. package/tokens/{v0_150 → v0_160}/_md-comp-outlined-select.scss +2 -6
  610. package/tokens/{v0_150 → v0_160}/_md-comp-outlined-text-field.scss +2 -3
  611. package/tokens/{v0_150 → v0_160}/_md-comp-plain-tooltip.scss +2 -2
  612. package/tokens/{v0_150 → v0_160}/_md-comp-primary-navigation-tab.scss +2 -4
  613. package/tokens/{v0_150 → v0_160}/_md-comp-radio-button.scss +2 -2
  614. package/tokens/{v0_150 → v0_160}/_md-comp-rich-tooltip.scss +2 -2
  615. package/tokens/{v0_150 → v0_160}/_md-comp-scrim.scss +2 -2
  616. package/tokens/{v0_150 → v0_160}/_md-comp-search-bar.scss +2 -2
  617. package/tokens/{v0_150 → v0_160}/_md-comp-search-view.scss +2 -2
  618. package/tokens/{v0_150 → v0_160}/_md-comp-secondary-navigation-tab.scss +2 -4
  619. package/tokens/{v0_150 → v0_160}/_md-comp-sheet-bottom.scss +2 -2
  620. package/tokens/{v0_150 → v0_160}/_md-comp-sheet-floating.scss +2 -2
  621. package/tokens/{v0_150 → v0_160}/_md-comp-sheet-side.scss +13 -11
  622. package/tokens/{v0_150 → v0_160}/_md-comp-slider.scss +2 -4
  623. package/tokens/{v0_150 → v0_160}/_md-comp-snackbar.scss +2 -2
  624. package/tokens/{v0_150 → v0_160}/_md-comp-standard-menu-button.scss +2 -2
  625. package/tokens/{v0_150 → v0_160}/_md-comp-suggestion-chip.scss +2 -2
  626. package/tokens/{v0_150 → v0_160}/_md-comp-switch.scss +2 -11
  627. package/tokens/{v0_150 → v0_160}/_md-comp-text-button.scss +2 -6
  628. package/tokens/{v0_150 → v0_160}/_md-comp-time-input.scss +2 -2
  629. package/tokens/{v0_150 → v0_160}/_md-comp-time-picker.scss +2 -5
  630. package/tokens/{v0_150 → v0_160}/_md-comp-top-app-bar-large.scss +2 -2
  631. package/tokens/{v0_150 → v0_160}/_md-comp-top-app-bar-medium.scss +2 -2
  632. package/tokens/{v0_150 → v0_160}/_md-comp-top-app-bar-small-centered.scss +2 -3
  633. package/tokens/{v0_150 → v0_160}/_md-comp-top-app-bar-small.scss +2 -3
  634. package/tokens/{v0_150 → v0_160}/_md-ref-palette.scss +2 -2
  635. package/tokens/{v0_150 → v0_160}/_md-ref-typeface.scss +2 -2
  636. package/tokens/{v0_150 → v0_160}/_md-sys-color.scss +218 -20
  637. package/tokens/{v0_150 → v0_160}/_md-sys-elevation.scss +4 -13
  638. package/tokens/{v0_150 → v0_160}/_md-sys-motion.scss +2 -2
  639. package/tokens/{v0_150 → v0_160}/_md-sys-shape.scss +2 -2
  640. package/tokens/{v0_150 → v0_160}/_md-sys-state.scss +2 -2
  641. package/tokens/{v0_150 → v0_160}/_md-sys-typescale.scss +2 -3
  642. package/tokens/v0_160/index.test.css.d.ts +1 -0
  643. package/tokens/{v0_150 → v0_160}/index.test.scss +1 -1
  644. package/tokens/v0_160/lib.test.css.d.ts +1 -0
  645. package/tokens/{v0_150 → v0_160}/lib.test.scss +1 -1
  646. package/list/lib/_tokens.scss +0 -80
  647. package/list/lib/divider/_list-divider.scss +0 -46
  648. package/list/lib/divider/list-divider-styles.css.js +0 -9
  649. package/list/lib/divider/list-divider-styles.css.js.map +0 -1
  650. package/list/lib/divider/list-divider-styles.scss +0 -8
  651. package/list/lib/divider/list-divider.d.ts +0 -13
  652. package/list/lib/divider/list-divider.js +0 -32
  653. package/list/lib/divider/list-divider.js.map +0 -1
  654. package/list/list-divider.d.ts +0 -19
  655. package/list/list-divider.js +0 -22
  656. package/list/list-divider.js.map +0 -1
  657. package/menu/lib/_menu-button.scss +0 -14
  658. package/menu/lib/adapter.d.ts +0 -66
  659. package/menu/lib/adapter.js +0 -7
  660. package/menu/lib/adapter.js.map +0 -1
  661. package/menu/lib/constants.d.ts +0 -22
  662. package/menu/lib/constants.js +0 -23
  663. package/menu/lib/constants.js.map +0 -1
  664. package/menu/lib/foundation.d.ts +0 -49
  665. package/menu/lib/foundation.js +0 -123
  666. package/menu/lib/foundation.js.map +0 -1
  667. package/menu/lib/menu-button-styles.css.js +0 -9
  668. package/menu/lib/menu-button-styles.css.js.map +0 -1
  669. package/menu/lib/menu-button-styles.scss +0 -8
  670. package/menu/lib/menu-button.d.ts +0 -27
  671. package/menu/lib/menu-button.js +0 -93
  672. package/menu/lib/menu-button.js.map +0 -1
  673. package/menu/menu-button.d.ts +0 -14
  674. package/menu/menu-button.js +0 -17
  675. package/menu/menu-button.js.map +0 -1
  676. /package/{list/lib/divider/list-divider-styles.css.d.ts → dialog/lib/dialog-styles.css.d.ts} +0 -0
  677. /package/{menu/lib/menu-button-styles.css.d.ts → divider/lib/divider-styles.css.d.ts} +0 -0
  678. /package/{tokens/v0_150/index.test.css.d.ts → list/lib/listitem/list-item-private-styles.css.d.ts} +0 -0
  679. /package/{tokens/v0_150/lib.test.css.d.ts → menu/lib/menuitem/menu-item-private-styles.css.d.ts} +0 -0
  680. /package/tokens/{v0_150 → v0_160}/index.test.css.js +0 -0
  681. /package/tokens/{v0_150 → v0_160}/index.test.css.js.map +0 -0
  682. /package/tokens/{v0_150 → v0_160}/lib.test.css.js +0 -0
  683. /package/tokens/{v0_150 → v0_160}/lib.test.css.js.map +0 -0
package/field/lib/filled-styles.css.js CHANGED
@@ -4,6 +4,6 @@
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
6
  import { css } from 'lit';
7
- export const styles = css `:host{--_container-shape-start-start: var(--md-filled-field-container-shape-start-start, 4px);--_container-shape-start-end: var(--md-filled-field-container-shape-start-end, 4px);--_container-shape-end-end: var(--md-filled-field-container-shape-end-end, 0px);--_container-shape-end-start: var(--md-filled-field-container-shape-end-start, 0px);--_active-indicator-color: var(--md-filled-field-active-indicator-color, var(--md-sys-color-on-surface-variant, #49454f));--_active-indicator-height: var(--md-filled-field-active-indicator-height, 1px);--_container-color: var(--md-filled-field-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--_container-height: var(--md-filled-field-container-height, 56px);--_disabled-active-indicator-color: var(--md-filled-field-disabled-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-active-indicator-height: var(--md-filled-field-disabled-active-indicator-height, 1px);--_disabled-active-indicator-opacity: var(--md-filled-field-disabled-active-indicator-opacity, 0.38);--_disabled-container-color: var(--md-filled-field-disabled-container-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-container-opacity: var(--md-filled-field-disabled-container-opacity, 0.04);--_disabled-label-text-color: var(--md-filled-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-label-text-opacity: var(--md-filled-field-disabled-label-text-opacity, 0.38);--_disabled-leading-icon-color: var(--md-filled-field-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-leading-icon-opacity: var(--md-filled-field-disabled-leading-icon-opacity, 0.38);--_disabled-supporting-text-color: var(--md-filled-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-supporting-text-opacity: var(--md-filled-field-disabled-supporting-text-opacity, 0.38);--_disabled-trailing-icon-color: var(--md-filled-field-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-trailing-icon-opacity: var(--md-filled-field-disabled-trailing-icon-opacity, 0.38);--_error-active-indicator-color: var(--md-filled-field-error-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-focus-active-indicator-color: var(--md-filled-field-error-focus-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-focus-label-text-color: var(--md-filled-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-leading-icon-color: var(--md-filled-field-error-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-supporting-text-color: var(--md-filled-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-trailing-icon-color: var(--md-filled-field-error-focus-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_error-hover-active-indicator-color: var(--md-filled-field-error-hover-active-indicator-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-label-text-color: var(--md-filled-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-leading-icon-color: var(--md-filled-field-error-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-hover-state-layer-color: var(--md-filled-field-error-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-hover-state-layer-opacity: var(--md-filled-field-error-hover-state-layer-opacity, 0.08);--_error-hover-supporting-text-color: var(--md-filled-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-hover-trailing-icon-color: var(--md-filled-field-error-hover-trailing-icon-color, var(--md-sys-color-on-error-container, #410e0b));--_error-label-text-color: var(--md-filled-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_error-leading-icon-color: var(--md-filled-field-error-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-supporting-text-color: var(--md-filled-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-trailing-icon-color: var(--md-filled-field-error-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_focus-active-indicator-color: var(--md-filled-field-focus-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_focus-active-indicator-height: var(--md-filled-field-focus-active-indicator-height, 2px);--_focus-label-text-color: var(--md-filled-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-filled-field-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-supporting-text-color: var(--md-filled-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-icon-color: var(--md-filled-field-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-active-indicator-color: var(--md-filled-field-hover-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-active-indicator-height: var(--md-filled-field-hover-active-indicator-height, 1px);--_hover-label-text-color: var(--md-filled-field-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-leading-icon-color: var(--md-filled-field-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-filled-field-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-state-layer-opacity: var(--md-filled-field-hover-state-layer-opacity, 0.08);--_hover-supporting-text-color: var(--md-filled-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-filled-field-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-color: var(--md-filled-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-font: var(--md-filled-field-label-text-font, Roboto);--_label-text-line-height: var(--md-filled-field-label-text-line-height, 1.5rem);--_label-text-populated-line-height: var(--md-filled-field-label-text-populated-line-height, 1rem);--_label-text-populated-size: var(--md-filled-field-label-text-populated-size, 0.75rem);--_label-text-size: var(--md-filled-field-label-text-size, 1rem);--_label-text-tracking: var(--md-filled-field-label-text-tracking, 0.031rem);--_label-text-weight: var(--md-filled-field-label-text-weight, 400);--_leading-icon-color: var(--md-filled-field-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-icon-size: var(--md-filled-field-leading-icon-size, 24px);--_supporting-text-color: var(--md-filled-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-filled-field-supporting-text-font, Roboto);--_supporting-text-line-height: var(--md-filled-field-supporting-text-line-height, 1rem);--_supporting-text-size: var(--md-filled-field-supporting-text-size, 0.75rem);--_supporting-text-tracking: var(--md-filled-field-supporting-text-tracking, 0.025rem);--_supporting-text-weight: var(--md-filled-field-supporting-text-weight, 400);--_trailing-icon-color: var(--md-filled-field-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-size: var(--md-filled-field-trailing-icon-size, 24px);--_container-padding-horizontal: var(--md-filled-field-container-padding-horizontal, 16px);--_container-padding-vertical: var(--md-filled-field-container-padding-vertical, 8px);--_content-color: var(--md-filled-field-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-content-color: var(--md-filled-field-disabled-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-content-opacity: var(--md-filled-field-disabled-content-opacity, 0.38);--_error-content-color: var(--md-filled-field-error-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-focus-content-color: var(--md-filled-field-error-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-hover-content-color: var(--md-filled-field-error-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_focus-content-color: var(--md-filled-field-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-content-color: var(--md-filled-field-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_supporting-text-padding: var(--md-filled-field-supporting-text-padding, 16px);--_supporting-text-padding-top: var(--md-filled-field-supporting-text-padding-top, 4px);--_label-text-populated-font: ;--_label-text-populated-tracking: ;--_label-text-populated-weight: }.md3-field__container{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);overflow:hidden;padding-top:var(--_container-padding-vertical);padding-bottom:var(--_container-padding-vertical);z-index:0}.md3-field__container::before{background:var(--_container-color)}.md3-field__container::after{visibility:hidden}.md3-field__container::before,.md3-field__container::after{border-radius:inherit;content:"";display:flex;height:100%;position:absolute;width:100%;z-index:-1}.md3-field__label--floating{position:absolute;top:0}.md3-field__state-layer{border-radius:inherit;height:100%;position:absolute;width:100%;visibility:hidden;z-index:-1}.md3-field:not(.md3-field--disabled):hover .md3-field__state-layer{visibility:visible}.md3-field__active-indicator{inset:auto 0 0 0;pointer-events:none;position:absolute;width:100%}.md3-field__active-indicator::before,.md3-field__active-indicator::after{border-bottom:var(--_active-indicator-height) solid var(--_active-indicator-color);inset:auto 0 0 0;content:"";position:absolute;width:100%}.md3-field__active-indicator::after{opacity:0;transform:scaleX(0);transform-origin:inherit;transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),transform 0s ease 150ms}.md3-field--focused .md3-field__active-indicator::after{opacity:1;transform:scaleX(1);transition:transform 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-field:not(.md3-field--with-start) .md3-field__start{padding-inline-start:var(--_container-padding-horizontal)}.md3-field:not(.md3-field--with-end) .md3-field__end{padding-inline-end:var(--_container-padding-horizontal)}.md3-field:not(.md3-field--no-label) .md3-field__middle{padding-top:var(--_label-text-populated-line-height)}:hover .md3-field__active-indicator::before{border-bottom-color:var(--_hover-active-indicator-color);border-bottom-width:var(--_hover-active-indicator-height)}:hover .md3-field__state-layer{background:var(--_hover-state-layer-color);opacity:var(--_hover-state-layer-opacity)}.md3-field__active-indicator::after{border-bottom-color:var(--_focus-active-indicator-color);border-bottom-width:var(--_focus-active-indicator-height)}.md3-field--disabled .md3-field__active-indicator::before{border-bottom-color:var(--_disabled-active-indicator-color);border-bottom-width:var(--_disabled-active-indicator-height);opacity:var(--_disabled-active-indicator-opacity)}.md3-field--disabled .md3-field__container::before{background:var(--_disabled-container-color);opacity:var(--_disabled-container-opacity)}.md3-field--error:not(.md3-field--disabled) .md3-field__active-indicator::before{border-bottom-color:var(--_error-active-indicator-color)}.md3-field--error:not(.md3-field--disabled):hover .md3-field__active-indicator::before{border-bottom-color:var(--_error-hover-active-indicator-color)}.md3-field--error:not(.md3-field--disabled):hover .md3-field__state-layer{background:var(--_error-hover-state-layer-color);opacity:var(--_error-hover-state-layer-opacity)}.md3-field--error:not(.md3-field--disabled) .md3-field__active-indicator::after{border-bottom-color:var(--_error-focus-active-indicator-color)}/*# sourceMappingURL=filled-styles.css.map */
7
+ export const styles = css `:host{--_container-shape-start-start: var(--md-filled-field-container-shape-start-start, var(--md-filled-field-container-shape, 4px));--_container-shape-start-end: var(--md-filled-field-container-shape-start-end, var(--md-filled-field-container-shape, 4px));--_container-shape-end-end: var(--md-filled-field-container-shape-end-end, var(--md-filled-field-container-shape, 0px));--_container-shape-end-start: var(--md-filled-field-container-shape-end-start, var(--md-filled-field-container-shape, 0px));--_active-indicator-color: var(--md-filled-field-active-indicator-color, var(--md-sys-color-on-surface-variant, #49454f));--_active-indicator-height: var(--md-filled-field-active-indicator-height, 1px);--_container-color: var(--md-filled-field-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--_disabled-active-indicator-color: var(--md-filled-field-disabled-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-active-indicator-height: var(--md-filled-field-disabled-active-indicator-height, 1px);--_disabled-active-indicator-opacity: var(--md-filled-field-disabled-active-indicator-opacity, 0.38);--_disabled-container-color: var(--md-filled-field-disabled-container-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-container-opacity: var(--md-filled-field-disabled-container-opacity, 0.04);--_disabled-label-text-color: var(--md-filled-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-label-text-opacity: var(--md-filled-field-disabled-label-text-opacity, 0.38);--_disabled-leading-icon-color: var(--md-filled-field-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-leading-icon-opacity: var(--md-filled-field-disabled-leading-icon-opacity, 0.38);--_disabled-supporting-text-color: var(--md-filled-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-supporting-text-opacity: var(--md-filled-field-disabled-supporting-text-opacity, 0.38);--_disabled-trailing-icon-color: var(--md-filled-field-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-trailing-icon-opacity: var(--md-filled-field-disabled-trailing-icon-opacity, 0.38);--_error-active-indicator-color: var(--md-filled-field-error-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-focus-active-indicator-color: var(--md-filled-field-error-focus-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-focus-label-text-color: var(--md-filled-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-leading-icon-color: var(--md-filled-field-error-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-supporting-text-color: var(--md-filled-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-trailing-icon-color: var(--md-filled-field-error-focus-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_error-hover-active-indicator-color: var(--md-filled-field-error-hover-active-indicator-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-label-text-color: var(--md-filled-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-leading-icon-color: var(--md-filled-field-error-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-hover-state-layer-color: var(--md-filled-field-error-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-hover-state-layer-opacity: var(--md-filled-field-error-hover-state-layer-opacity, 0.08);--_error-hover-supporting-text-color: var(--md-filled-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-hover-trailing-icon-color: var(--md-filled-field-error-hover-trailing-icon-color, var(--md-sys-color-on-error-container, #410e0b));--_error-label-text-color: var(--md-filled-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_error-leading-icon-color: var(--md-filled-field-error-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-supporting-text-color: var(--md-filled-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-trailing-icon-color: var(--md-filled-field-error-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_focus-active-indicator-color: var(--md-filled-field-focus-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_focus-active-indicator-height: var(--md-filled-field-focus-active-indicator-height, 2px);--_focus-label-text-color: var(--md-filled-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-filled-field-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-supporting-text-color: var(--md-filled-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-icon-color: var(--md-filled-field-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-active-indicator-color: var(--md-filled-field-hover-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-active-indicator-height: var(--md-filled-field-hover-active-indicator-height, 1px);--_hover-label-text-color: var(--md-filled-field-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-leading-icon-color: var(--md-filled-field-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-filled-field-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-state-layer-opacity: var(--md-filled-field-hover-state-layer-opacity, 0.08);--_hover-supporting-text-color: var(--md-filled-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-filled-field-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-color: var(--md-filled-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-populated-line-height: var(--md-filled-field-label-text-populated-line-height, 1rem);--_label-text-populated-size: var(--md-filled-field-label-text-populated-size, 0.75rem);--_label-text-type: var(--md-filled-field-label-text-type, 400 1rem / 1.5rem Roboto);--_leading-icon-color: var(--md-filled-field-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-icon-size: var(--md-filled-field-leading-icon-size, 24px);--_supporting-text-color: var(--md-filled-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-type: var(--md-filled-field-supporting-text-type, 400 0.75rem / 1rem Roboto);--_trailing-icon-color: var(--md-filled-field-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-size: var(--md-filled-field-trailing-icon-size, 24px);--_container-padding-horizontal: var(--md-filled-field-container-padding-horizontal, 16px);--_container-padding-vertical: var(--md-filled-field-container-padding-vertical, 16px);--_content-color: var(--md-filled-field-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-content-color: var(--md-filled-field-disabled-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-content-opacity: var(--md-filled-field-disabled-content-opacity, 0.38);--_error-content-color: var(--md-filled-field-error-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-focus-content-color: var(--md-filled-field-error-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-hover-content-color: var(--md-filled-field-error-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_focus-content-color: var(--md-filled-field-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-content-color: var(--md-filled-field-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_supporting-text-padding: var(--md-filled-field-supporting-text-padding, 16px);--_supporting-text-padding-top: var(--md-filled-field-supporting-text-padding-top, 4px);--_with-label-container-padding-vertical: var(--md-filled-field-with-label-container-padding-vertical, 8px)}.container{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);overflow:hidden;z-index:0}.container::before{background:var(--_container-color)}.container::after{visibility:hidden}.container::before,.container::after{border-radius:inherit;content:"";display:flex;height:100%;position:absolute;width:100%;z-index:-1}.label.floating{position:absolute;top:0}.state-layer{border-radius:inherit;height:100%;position:absolute;width:100%;visibility:hidden;z-index:-1}.field:not(.disabled):hover .state-layer{visibility:visible}.active-indicator{inset:auto 0 0 0;pointer-events:none;position:absolute;width:100%}.active-indicator::before,.active-indicator::after{border-bottom:var(--_active-indicator-height) solid var(--_active-indicator-color);inset:auto 0 0 0;content:"";position:absolute;width:100%}.active-indicator::after{opacity:0;transform:scaleX(0);transform-origin:inherit;transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),transform 0s ease 150ms}.focused .active-indicator::after{opacity:1;transform:scaleX(1);transition:transform 150ms cubic-bezier(0.4, 0, 0.2, 1)}.field:not(.with-start) .start{padding-inline-start:var(--_container-padding-horizontal)}.field:not(.with-end) .end{padding-inline-end:var(--_container-padding-horizontal)}.field:not(.no-label) .container{padding-bottom:var(--_with-label-container-padding-vertical);padding-top:var(--_with-label-container-padding-vertical)}.field:not(.no-label) .middle{padding-top:var(--_label-text-populated-line-height)}:hover .active-indicator::before{border-bottom-color:var(--_hover-active-indicator-color);border-bottom-width:var(--_hover-active-indicator-height)}.active-indicator::after{border-bottom-color:var(--_focus-active-indicator-color);border-bottom-width:var(--_focus-active-indicator-height)}:hover .state-layer{background:var(--_hover-state-layer-color);opacity:var(--_hover-state-layer-opacity)}.disabled .active-indicator::before{border-bottom-color:var(--_disabled-active-indicator-color);border-bottom-width:var(--_disabled-active-indicator-height);opacity:var(--_disabled-active-indicator-opacity)}.disabled .container::before{background:var(--_disabled-container-color);opacity:var(--_disabled-container-opacity)}.error .active-indicator::before{border-bottom-color:var(--_error-active-indicator-color)}.error:hover .active-indicator::before{border-bottom-color:var(--_error-hover-active-indicator-color)}.error:hover .state-layer{background:var(--_error-hover-state-layer-color);opacity:var(--_error-hover-state-layer-opacity)}.error .active-indicator::after{border-bottom-color:var(--_error-focus-active-indicator-color)}/*# sourceMappingURL=filled-styles.css.map */
8
8
  `;
9
9
  //# sourceMappingURL=filled-styles.css.js.map
package/field/lib/filled-styles.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"filled-styles.css.js","sourceRoot":"","sources":["filled-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-shape-start-start: var(--md-filled-field-container-shape-start-start, 4px);--_container-shape-start-end: var(--md-filled-field-container-shape-start-end, 4px);--_container-shape-end-end: var(--md-filled-field-container-shape-end-end, 0px);--_container-shape-end-start: var(--md-filled-field-container-shape-end-start, 0px);--_active-indicator-color: var(--md-filled-field-active-indicator-color, var(--md-sys-color-on-surface-variant, #49454f));--_active-indicator-height: var(--md-filled-field-active-indicator-height, 1px);--_container-color: var(--md-filled-field-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--_container-height: var(--md-filled-field-container-height, 56px);--_disabled-active-indicator-color: var(--md-filled-field-disabled-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-active-indicator-height: var(--md-filled-field-disabled-active-indicator-height, 1px);--_disabled-active-indicator-opacity: var(--md-filled-field-disabled-active-indicator-opacity, 0.38);--_disabled-container-color: var(--md-filled-field-disabled-container-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-container-opacity: var(--md-filled-field-disabled-container-opacity, 0.04);--_disabled-label-text-color: var(--md-filled-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-label-text-opacity: var(--md-filled-field-disabled-label-text-opacity, 0.38);--_disabled-leading-icon-color: var(--md-filled-field-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-leading-icon-opacity: var(--md-filled-field-disabled-leading-icon-opacity, 0.38);--_disabled-supporting-text-color: var(--md-filled-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-supporting-text-opacity: var(--md-filled-field-disabled-supporting-text-opacity, 0.38);--_disabled-trailing-icon-color: var(--md-filled-field-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-trailing-icon-opacity: var(--md-filled-field-disabled-trailing-icon-opacity, 0.38);--_error-active-indicator-color: var(--md-filled-field-error-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-focus-active-indicator-color: var(--md-filled-field-error-focus-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-focus-label-text-color: var(--md-filled-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-leading-icon-color: var(--md-filled-field-error-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-supporting-text-color: var(--md-filled-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-trailing-icon-color: var(--md-filled-field-error-focus-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_error-hover-active-indicator-color: var(--md-filled-field-error-hover-active-indicator-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-label-text-color: var(--md-filled-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-leading-icon-color: var(--md-filled-field-error-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-hover-state-layer-color: var(--md-filled-field-error-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-hover-state-layer-opacity: var(--md-filled-field-error-hover-state-layer-opacity, 0.08);--_error-hover-supporting-text-color: var(--md-filled-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-hover-trailing-icon-color: var(--md-filled-field-error-hover-trailing-icon-color, var(--md-sys-color-on-error-container, #410e0b));--_error-label-text-color: var(--md-filled-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_error-leading-icon-color: var(--md-filled-field-error-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-supporting-text-color: var(--md-filled-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-trailing-icon-color: var(--md-filled-field-error-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_focus-active-indicator-color: var(--md-filled-field-focus-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_focus-active-indicator-height: var(--md-filled-field-focus-active-indicator-height, 2px);--_focus-label-text-color: var(--md-filled-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-filled-field-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-supporting-text-color: var(--md-filled-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-icon-color: var(--md-filled-field-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-active-indicator-color: var(--md-filled-field-hover-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-active-indicator-height: var(--md-filled-field-hover-active-indicator-height, 1px);--_hover-label-text-color: var(--md-filled-field-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-leading-icon-color: var(--md-filled-field-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-filled-field-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-state-layer-opacity: var(--md-filled-field-hover-state-layer-opacity, 0.08);--_hover-supporting-text-color: var(--md-filled-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-filled-field-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-color: var(--md-filled-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-font: var(--md-filled-field-label-text-font, Roboto);--_label-text-line-height: var(--md-filled-field-label-text-line-height, 1.5rem);--_label-text-populated-line-height: var(--md-filled-field-label-text-populated-line-height, 1rem);--_label-text-populated-size: var(--md-filled-field-label-text-populated-size, 0.75rem);--_label-text-size: var(--md-filled-field-label-text-size, 1rem);--_label-text-tracking: var(--md-filled-field-label-text-tracking, 0.031rem);--_label-text-weight: var(--md-filled-field-label-text-weight, 400);--_leading-icon-color: var(--md-filled-field-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-icon-size: var(--md-filled-field-leading-icon-size, 24px);--_supporting-text-color: var(--md-filled-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-filled-field-supporting-text-font, Roboto);--_supporting-text-line-height: var(--md-filled-field-supporting-text-line-height, 1rem);--_supporting-text-size: var(--md-filled-field-supporting-text-size, 0.75rem);--_supporting-text-tracking: var(--md-filled-field-supporting-text-tracking, 0.025rem);--_supporting-text-weight: var(--md-filled-field-supporting-text-weight, 400);--_trailing-icon-color: var(--md-filled-field-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-size: var(--md-filled-field-trailing-icon-size, 24px);--_container-padding-horizontal: var(--md-filled-field-container-padding-horizontal, 16px);--_container-padding-vertical: var(--md-filled-field-container-padding-vertical, 8px);--_content-color: var(--md-filled-field-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-content-color: var(--md-filled-field-disabled-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-content-opacity: var(--md-filled-field-disabled-content-opacity, 0.38);--_error-content-color: var(--md-filled-field-error-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-focus-content-color: var(--md-filled-field-error-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-hover-content-color: var(--md-filled-field-error-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_focus-content-color: var(--md-filled-field-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-content-color: var(--md-filled-field-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_supporting-text-padding: var(--md-filled-field-supporting-text-padding, 16px);--_supporting-text-padding-top: var(--md-filled-field-supporting-text-padding-top, 4px);--_label-text-populated-font: ;--_label-text-populated-tracking: ;--_label-text-populated-weight: }.md3-field__container{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);overflow:hidden;padding-top:var(--_container-padding-vertical);padding-bottom:var(--_container-padding-vertical);z-index:0}.md3-field__container::before{background:var(--_container-color)}.md3-field__container::after{visibility:hidden}.md3-field__container::before,.md3-field__container::after{border-radius:inherit;content:\"\";display:flex;height:100%;position:absolute;width:100%;z-index:-1}.md3-field__label--floating{position:absolute;top:0}.md3-field__state-layer{border-radius:inherit;height:100%;position:absolute;width:100%;visibility:hidden;z-index:-1}.md3-field:not(.md3-field--disabled):hover .md3-field__state-layer{visibility:visible}.md3-field__active-indicator{inset:auto 0 0 0;pointer-events:none;position:absolute;width:100%}.md3-field__active-indicator::before,.md3-field__active-indicator::after{border-bottom:var(--_active-indicator-height) solid var(--_active-indicator-color);inset:auto 0 0 0;content:\"\";position:absolute;width:100%}.md3-field__active-indicator::after{opacity:0;transform:scaleX(0);transform-origin:inherit;transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),transform 0s ease 150ms}.md3-field--focused .md3-field__active-indicator::after{opacity:1;transform:scaleX(1);transition:transform 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-field:not(.md3-field--with-start) .md3-field__start{padding-inline-start:var(--_container-padding-horizontal)}.md3-field:not(.md3-field--with-end) .md3-field__end{padding-inline-end:var(--_container-padding-horizontal)}.md3-field:not(.md3-field--no-label) .md3-field__middle{padding-top:var(--_label-text-populated-line-height)}:hover .md3-field__active-indicator::before{border-bottom-color:var(--_hover-active-indicator-color);border-bottom-width:var(--_hover-active-indicator-height)}:hover .md3-field__state-layer{background:var(--_hover-state-layer-color);opacity:var(--_hover-state-layer-opacity)}.md3-field__active-indicator::after{border-bottom-color:var(--_focus-active-indicator-color);border-bottom-width:var(--_focus-active-indicator-height)}.md3-field--disabled .md3-field__active-indicator::before{border-bottom-color:var(--_disabled-active-indicator-color);border-bottom-width:var(--_disabled-active-indicator-height);opacity:var(--_disabled-active-indicator-opacity)}.md3-field--disabled .md3-field__container::before{background:var(--_disabled-container-color);opacity:var(--_disabled-container-opacity)}.md3-field--error:not(.md3-field--disabled) .md3-field__active-indicator::before{border-bottom-color:var(--_error-active-indicator-color)}.md3-field--error:not(.md3-field--disabled):hover .md3-field__active-indicator::before{border-bottom-color:var(--_error-hover-active-indicator-color)}.md3-field--error:not(.md3-field--disabled):hover .md3-field__state-layer{background:var(--_error-hover-state-layer-color);opacity:var(--_error-hover-state-layer-opacity)}.md3-field--error:not(.md3-field--disabled) .md3-field__active-indicator::after{border-bottom-color:var(--_error-focus-active-indicator-color)}/*# sourceMappingURL=filled-styles.css.map */\n`;\n "]}
1
+ {"version":3,"file":"filled-styles.css.js","sourceRoot":"","sources":["filled-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-shape-start-start: var(--md-filled-field-container-shape-start-start, var(--md-filled-field-container-shape, 4px));--_container-shape-start-end: var(--md-filled-field-container-shape-start-end, var(--md-filled-field-container-shape, 4px));--_container-shape-end-end: var(--md-filled-field-container-shape-end-end, var(--md-filled-field-container-shape, 0px));--_container-shape-end-start: var(--md-filled-field-container-shape-end-start, var(--md-filled-field-container-shape, 0px));--_active-indicator-color: var(--md-filled-field-active-indicator-color, var(--md-sys-color-on-surface-variant, #49454f));--_active-indicator-height: var(--md-filled-field-active-indicator-height, 1px);--_container-color: var(--md-filled-field-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--_disabled-active-indicator-color: var(--md-filled-field-disabled-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-active-indicator-height: var(--md-filled-field-disabled-active-indicator-height, 1px);--_disabled-active-indicator-opacity: var(--md-filled-field-disabled-active-indicator-opacity, 0.38);--_disabled-container-color: var(--md-filled-field-disabled-container-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-container-opacity: var(--md-filled-field-disabled-container-opacity, 0.04);--_disabled-label-text-color: var(--md-filled-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-label-text-opacity: var(--md-filled-field-disabled-label-text-opacity, 0.38);--_disabled-leading-icon-color: var(--md-filled-field-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-leading-icon-opacity: var(--md-filled-field-disabled-leading-icon-opacity, 0.38);--_disabled-supporting-text-color: var(--md-filled-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-supporting-text-opacity: var(--md-filled-field-disabled-supporting-text-opacity, 0.38);--_disabled-trailing-icon-color: var(--md-filled-field-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-trailing-icon-opacity: var(--md-filled-field-disabled-trailing-icon-opacity, 0.38);--_error-active-indicator-color: var(--md-filled-field-error-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-focus-active-indicator-color: var(--md-filled-field-error-focus-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-focus-label-text-color: var(--md-filled-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-leading-icon-color: var(--md-filled-field-error-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-supporting-text-color: var(--md-filled-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-trailing-icon-color: var(--md-filled-field-error-focus-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_error-hover-active-indicator-color: var(--md-filled-field-error-hover-active-indicator-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-label-text-color: var(--md-filled-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-leading-icon-color: var(--md-filled-field-error-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-hover-state-layer-color: var(--md-filled-field-error-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-hover-state-layer-opacity: var(--md-filled-field-error-hover-state-layer-opacity, 0.08);--_error-hover-supporting-text-color: var(--md-filled-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-hover-trailing-icon-color: var(--md-filled-field-error-hover-trailing-icon-color, var(--md-sys-color-on-error-container, #410e0b));--_error-label-text-color: var(--md-filled-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_error-leading-icon-color: var(--md-filled-field-error-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-supporting-text-color: var(--md-filled-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-trailing-icon-color: var(--md-filled-field-error-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_focus-active-indicator-color: var(--md-filled-field-focus-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_focus-active-indicator-height: var(--md-filled-field-focus-active-indicator-height, 2px);--_focus-label-text-color: var(--md-filled-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-filled-field-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-supporting-text-color: var(--md-filled-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-icon-color: var(--md-filled-field-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-active-indicator-color: var(--md-filled-field-hover-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-active-indicator-height: var(--md-filled-field-hover-active-indicator-height, 1px);--_hover-label-text-color: var(--md-filled-field-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-leading-icon-color: var(--md-filled-field-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-filled-field-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-state-layer-opacity: var(--md-filled-field-hover-state-layer-opacity, 0.08);--_hover-supporting-text-color: var(--md-filled-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-filled-field-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-color: var(--md-filled-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-populated-line-height: var(--md-filled-field-label-text-populated-line-height, 1rem);--_label-text-populated-size: var(--md-filled-field-label-text-populated-size, 0.75rem);--_label-text-type: var(--md-filled-field-label-text-type, 400 1rem / 1.5rem Roboto);--_leading-icon-color: var(--md-filled-field-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-icon-size: var(--md-filled-field-leading-icon-size, 24px);--_supporting-text-color: var(--md-filled-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-type: var(--md-filled-field-supporting-text-type, 400 0.75rem / 1rem Roboto);--_trailing-icon-color: var(--md-filled-field-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-size: var(--md-filled-field-trailing-icon-size, 24px);--_container-padding-horizontal: var(--md-filled-field-container-padding-horizontal, 16px);--_container-padding-vertical: var(--md-filled-field-container-padding-vertical, 16px);--_content-color: var(--md-filled-field-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-content-color: var(--md-filled-field-disabled-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-content-opacity: var(--md-filled-field-disabled-content-opacity, 0.38);--_error-content-color: var(--md-filled-field-error-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-focus-content-color: var(--md-filled-field-error-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-hover-content-color: var(--md-filled-field-error-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_focus-content-color: var(--md-filled-field-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-content-color: var(--md-filled-field-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_supporting-text-padding: var(--md-filled-field-supporting-text-padding, 16px);--_supporting-text-padding-top: var(--md-filled-field-supporting-text-padding-top, 4px);--_with-label-container-padding-vertical: var(--md-filled-field-with-label-container-padding-vertical, 8px)}.container{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);overflow:hidden;z-index:0}.container::before{background:var(--_container-color)}.container::after{visibility:hidden}.container::before,.container::after{border-radius:inherit;content:\"\";display:flex;height:100%;position:absolute;width:100%;z-index:-1}.label.floating{position:absolute;top:0}.state-layer{border-radius:inherit;height:100%;position:absolute;width:100%;visibility:hidden;z-index:-1}.field:not(.disabled):hover .state-layer{visibility:visible}.active-indicator{inset:auto 0 0 0;pointer-events:none;position:absolute;width:100%}.active-indicator::before,.active-indicator::after{border-bottom:var(--_active-indicator-height) solid var(--_active-indicator-color);inset:auto 0 0 0;content:\"\";position:absolute;width:100%}.active-indicator::after{opacity:0;transform:scaleX(0);transform-origin:inherit;transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),transform 0s ease 150ms}.focused .active-indicator::after{opacity:1;transform:scaleX(1);transition:transform 150ms cubic-bezier(0.4, 0, 0.2, 1)}.field:not(.with-start) .start{padding-inline-start:var(--_container-padding-horizontal)}.field:not(.with-end) .end{padding-inline-end:var(--_container-padding-horizontal)}.field:not(.no-label) .container{padding-bottom:var(--_with-label-container-padding-vertical);padding-top:var(--_with-label-container-padding-vertical)}.field:not(.no-label) .middle{padding-top:var(--_label-text-populated-line-height)}:hover .active-indicator::before{border-bottom-color:var(--_hover-active-indicator-color);border-bottom-width:var(--_hover-active-indicator-height)}.active-indicator::after{border-bottom-color:var(--_focus-active-indicator-color);border-bottom-width:var(--_focus-active-indicator-height)}:hover .state-layer{background:var(--_hover-state-layer-color);opacity:var(--_hover-state-layer-opacity)}.disabled .active-indicator::before{border-bottom-color:var(--_disabled-active-indicator-color);border-bottom-width:var(--_disabled-active-indicator-height);opacity:var(--_disabled-active-indicator-opacity)}.disabled .container::before{background:var(--_disabled-container-color);opacity:var(--_disabled-container-opacity)}.error .active-indicator::before{border-bottom-color:var(--_error-active-indicator-color)}.error:hover .active-indicator::before{border-bottom-color:var(--_error-hover-active-indicator-color)}.error:hover .state-layer{background:var(--_error-hover-state-layer-color);opacity:var(--_error-hover-state-layer-opacity)}.error .active-indicator::after{border-bottom-color:var(--_error-focus-active-indicator-color)}/*# sourceMappingURL=filled-styles.css.map */\n`;\n "]}
package/field/lib/outlined-field.d.ts CHANGED
@@ -4,16 +4,10 @@
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
6
  import { TemplateResult } from 'lit';
7
- import { ClassInfo } from 'lit/directives/class-map.js';
8
7
  import { Field } from './field.js';
9
- /** @soyCompatible */
8
+ /**
9
+ * An outlined field component.
10
+ */
10
11
  export declare class OutlinedField extends Field {
11
- /** @soyTemplate */
12
- protected getRenderClasses(): ClassInfo;
13
- /** @soyTemplate */
14
- protected renderContainerContents(): TemplateResult;
15
- /** @soyTemplate */
16
- protected renderOutline(): TemplateResult;
17
- /** @soyTemplate */
18
- protected renderMiddleContents(): TemplateResult;
12
+ protected renderOutline(floatingLabel: TemplateResult): TemplateResult<1>;
19
13
  }
package/field/lib/outlined-field.js CHANGED
@@ -5,41 +5,21 @@
5
5
  */
6
6
  import { html } from 'lit';
7
7
  import { Field } from './field.js';
8
- /** @soyCompatible */
8
+ /**
9
+ * An outlined field component.
10
+ */
9
11
  export class OutlinedField extends Field {
10
- /** @soyTemplate */
11
- getRenderClasses() {
12
- return {
13
- ...super.getRenderClasses(),
14
- 'md3-field--outlined': true,
15
- };
16
- }
17
- /** @soyTemplate */
18
- renderContainerContents() {
19
- return html `
20
- ${this.renderOutline()}
21
- ${super.renderContainerContents()}
22
- `;
23
- }
24
- /** @soyTemplate */
25
- renderOutline() {
26
- return html `
27
- <span class="md3-field__outline">
28
- <span class="md3-field__outline-start"></span>
29
- <span class="md3-field__outline-notch">
30
- <span class="md3-field__outline-panel-inactive"></span>
31
- <span class="md3-field__outline-panel-active"></span>
32
- ${this.renderFloatingLabel()}
33
- </span>
34
- <span class="md3-field__outline-end"></span>
35
- </span>
36
- `;
37
- }
38
- /** @soyTemplate */
39
- renderMiddleContents() {
12
+ renderOutline(floatingLabel) {
40
13
  return html `
41
- ${this.renderRestingLabel()}
42
- ${super.renderMiddleContents()}
14
+ <div class="outline">
15
+ <div class="outline-start"></div>
16
+ <div class="outline-notch">
17
+ <div class="outline-panel-inactive"></div>
18
+ <div class="outline-panel-active"></div>
19
+ ${floatingLabel}
20
+ </div>
21
+ <div class="outline-end"></div>
22
+ </div>
43
23
  `;
44
24
  }
45
25
  }
package/field/lib/outlined-field.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"outlined-field.js","sourceRoot":"","sources":["outlined-field.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,IAAI,EAAiB,MAAM,KAAK,CAAC;AAGzC,OAAO,EAAC,KAAK,EAAC,MAAM,YAAY,CAAC;AAEjC,qBAAqB;AACrB,MAAM,OAAO,aAAc,SAAQ,KAAK;IACtC,mBAAmB;IACA,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,qBAAqB,EAAE,IAAI;SAC5B,CAAC;IACJ,CAAC;IAED,mBAAmB;IACA,uBAAuB;QACxC,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,aAAa,EAAE;QACpB,KAAK,CAAC,uBAAuB,EAAE;KAClC,CAAC;IACJ,CAAC;IAED,mBAAmB;IACT,aAAa;QACrB,OAAO,IAAI,CAAA;;;;;;YAMH,IAAI,CAAC,mBAAmB,EAAE;;;;KAIjC,CAAC;IACJ,CAAC;IAED,mBAAmB;IACA,oBAAoB;QACrC,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,kBAAkB,EAAE;QACzB,KAAK,CAAC,oBAAoB,EAAE;KAC/B,CAAC;IACJ,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, TemplateResult} from 'lit';\nimport {ClassInfo} from 'lit/directives/class-map.js';\n\nimport {Field} from './field.js';\n\n/** @soyCompatible */\nexport class OutlinedField extends Field {\n /** @soyTemplate */\n protected override getRenderClasses(): ClassInfo {\n return {\n ...super.getRenderClasses(),\n 'md3-field--outlined': true,\n };\n }\n\n /** @soyTemplate */\n protected override renderContainerContents(): TemplateResult {\n return html`\n ${this.renderOutline()}\n ${super.renderContainerContents()}\n `;\n }\n\n /** @soyTemplate */\n protected renderOutline(): TemplateResult {\n return html`\n <span class=\"md3-field__outline\">\n <span class=\"md3-field__outline-start\"></span>\n <span class=\"md3-field__outline-notch\">\n <span class=\"md3-field__outline-panel-inactive\"></span>\n <span class=\"md3-field__outline-panel-active\"></span>\n ${this.renderFloatingLabel()}\n </span>\n <span class=\"md3-field__outline-end\"></span>\n </span>\n `;\n }\n\n /** @soyTemplate */\n protected override renderMiddleContents(): TemplateResult {\n return html`\n ${this.renderRestingLabel()}\n ${super.renderMiddleContents()}\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"outlined-field.js","sourceRoot":"","sources":["outlined-field.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,IAAI,EAAiB,MAAM,KAAK,CAAC;AAEzC,OAAO,EAAC,KAAK,EAAC,MAAM,YAAY,CAAC;AAEjC;;GAEG;AACH,MAAM,OAAO,aAAc,SAAQ,KAAK;IACnB,aAAa,CAAC,aAA6B;QAC5D,OAAO,IAAI,CAAA;;;;;;YAMH,aAAa;;;;KAIpB,CAAC;IACJ,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, TemplateResult} from 'lit';\n\nimport {Field} from './field.js';\n\n/**\n * An outlined field component.\n */\nexport class OutlinedField extends Field {\n protected override renderOutline(floatingLabel: TemplateResult) {\n return html`\n <div class=\"outline\">\n <div class=\"outline-start\"></div>\n <div class=\"outline-notch\">\n <div class=\"outline-panel-inactive\"></div>\n <div class=\"outline-panel-active\"></div>\n ${floatingLabel}\n </div>\n <div class=\"outline-end\"></div>\n </div>\n `;\n }\n}\n"]}
package/field/lib/outlined-styles.css.js CHANGED
@@ -4,6 +4,6 @@
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
6
  import { css } from 'lit';
7
- export const styles = css `:host{--_container-shape-start-start: var(--md-outlined-field-container-shape-start-start, 4px);--_container-shape-start-end: var(--md-outlined-field-container-shape-start-end, 4px);--_container-shape-end-end: var(--md-outlined-field-container-shape-end-end, 4px);--_container-shape-end-start: var(--md-outlined-field-container-shape-end-start, 4px);--_container-height: var(--md-outlined-field-container-height, 56px);--_disabled-label-text-color: var(--md-outlined-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-label-text-opacity: var(--md-outlined-field-disabled-label-text-opacity, 0.38);--_disabled-leading-icon-color: var(--md-outlined-field-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-leading-icon-opacity: var(--md-outlined-field-disabled-leading-icon-opacity, 0.38);--_disabled-outline-color: var(--md-outlined-field-disabled-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-outline-opacity: var(--md-outlined-field-disabled-outline-opacity, 0.12);--_disabled-outline-width: var(--md-outlined-field-disabled-outline-width, 1px);--_disabled-supporting-text-color: var(--md-outlined-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-supporting-text-opacity: var(--md-outlined-field-disabled-supporting-text-opacity, 0.38);--_disabled-trailing-icon-color: var(--md-outlined-field-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-trailing-icon-opacity: var(--md-outlined-field-disabled-trailing-icon-opacity, 0.38);--_error-focus-label-text-color: var(--md-outlined-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-leading-icon-color: var(--md-outlined-field-error-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-outline-color: var(--md-outlined-field-error-focus-outline-color, var(--md-sys-color-error, #b3261e));--_error-focus-supporting-text-color: var(--md-outlined-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-trailing-icon-color: var(--md-outlined-field-error-focus-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_error-hover-label-text-color: var(--md-outlined-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-leading-icon-color: var(--md-outlined-field-error-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-hover-outline-color: var(--md-outlined-field-error-hover-outline-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-supporting-text-color: var(--md-outlined-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-hover-trailing-icon-color: var(--md-outlined-field-error-hover-trailing-icon-color, var(--md-sys-color-on-error-container, #410e0b));--_error-label-text-color: var(--md-outlined-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_error-leading-icon-color: var(--md-outlined-field-error-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-outline-color: var(--md-outlined-field-error-outline-color, var(--md-sys-color-error, #b3261e));--_error-supporting-text-color: var(--md-outlined-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-trailing-icon-color: var(--md-outlined-field-error-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_focus-label-text-color: var(--md-outlined-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-outlined-field-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-outline-color: var(--md-outlined-field-focus-outline-color, var(--md-sys-color-primary, #6750a4));--_focus-outline-width: var(--md-outlined-field-focus-outline-width, 2px);--_focus-supporting-text-color: var(--md-outlined-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-icon-color: var(--md-outlined-field-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-label-text-color: var(--md-outlined-field-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-leading-icon-color: var(--md-outlined-field-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-outline-color: var(--md-outlined-field-hover-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-outline-width: var(--md-outlined-field-hover-outline-width, 1px);--_hover-supporting-text-color: var(--md-outlined-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-outlined-field-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-color: var(--md-outlined-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-font: var(--md-outlined-field-label-text-font, Roboto);--_label-text-line-height: var(--md-outlined-field-label-text-line-height, 1.5rem);--_label-text-populated-line-height: var(--md-outlined-field-label-text-populated-line-height, 1rem);--_label-text-populated-size: var(--md-outlined-field-label-text-populated-size, 0.75rem);--_label-text-size: var(--md-outlined-field-label-text-size, 1rem);--_label-text-tracking: var(--md-outlined-field-label-text-tracking, 0.031rem);--_label-text-weight: var(--md-outlined-field-label-text-weight, 400);--_leading-icon-color: var(--md-outlined-field-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-icon-size: var(--md-outlined-field-leading-icon-size, 24px);--_outline-color: var(--md-outlined-field-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-outlined-field-outline-width, 1px);--_supporting-text-color: var(--md-outlined-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-outlined-field-supporting-text-font, Roboto);--_supporting-text-line-height: var(--md-outlined-field-supporting-text-line-height, 1rem);--_supporting-text-size: var(--md-outlined-field-supporting-text-size, 0.75rem);--_supporting-text-tracking: var(--md-outlined-field-supporting-text-tracking, 0.025rem);--_supporting-text-weight: var(--md-outlined-field-supporting-text-weight, 400);--_trailing-icon-color: var(--md-outlined-field-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-size: var(--md-outlined-field-trailing-icon-size, 24px);--_container-padding-horizontal: var(--md-outlined-field-container-padding-horizontal, 16px);--_container-padding-vertical: var(--md-outlined-field-container-padding-vertical, 8px);--_content-color: var(--md-outlined-field-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-content-color: var(--md-outlined-field-disabled-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-content-opacity: var(--md-outlined-field-disabled-content-opacity, 0.38);--_error-content-color: var(--md-outlined-field-error-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-focus-content-color: var(--md-outlined-field-error-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-hover-content-color: var(--md-outlined-field-error-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_focus-content-color: var(--md-outlined-field-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-content-color: var(--md-outlined-field-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_label-text-padding-bottom: var(--md-outlined-field-label-text-padding-bottom, 8px);--_outline-label-padding: var(--md-outlined-field-outline-label-padding, 4px);--_supporting-text-padding: var(--md-outlined-field-supporting-text-padding, 16px);--_supporting-text-padding-top: var(--md-outlined-field-supporting-text-padding-top, 4px);--_label-text-populated-font: ;--_label-text-populated-tracking: ;--_label-text-populated-weight: }.md3-field__outline{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);border-color:var(--_outline-color);color:var(--_outline-color);display:flex;pointer-events:none;height:100%;position:absolute;width:100%}.md3-field__outline-start::before,.md3-field__outline-start::after,.md3-field__outline-panel-inactive::before,.md3-field__outline-panel-inactive::after,.md3-field__outline-panel-active::before,.md3-field__outline-panel-active::after,.md3-field__outline-end::before,.md3-field__outline-end::after{border:inherit;content:"";inset:0;position:absolute}.md3-field__outline-start,.md3-field__outline-end{border:inherit;border-radius:inherit;box-sizing:border-box;position:relative}.md3-field__outline-start::before,.md3-field__outline-start::after,.md3-field__outline-end::before,.md3-field__outline-end::after{border-bottom-style:solid;border-top-style:solid}.md3-field__outline-start::after,.md3-field__outline-end::after{opacity:0;transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-field--focused .md3-field__outline-start::after,.md3-field--focused .md3-field__outline-end::after{opacity:1}.md3-field__outline-start::before,.md3-field__outline-start::after{border-inline-start-style:solid;border-inline-end-style:none;border-start-start-radius:inherit;border-start-end-radius:0;border-end-start-radius:inherit;border-end-end-radius:0;margin-inline-end:var(--_outline-label-padding)}.md3-field__outline-end{flex-grow:1;margin-inline-start:calc(-1*var(--_outline-label-padding))}.md3-field__outline-end::before,.md3-field__outline-end::after{border-inline-start-style:none;border-inline-end-style:solid;border-start-start-radius:0;border-start-end-radius:inherit;border-end-start-radius:0;border-end-end-radius:inherit}.md3-field__outline-notch{align-items:flex-start;border:inherit;display:flex;margin-inline-start:calc(-1*var(--_outline-label-padding));margin-inline-end:var(--_outline-label-padding);max-width:calc(100% - 2*var(--_container-padding-horizontal));padding:0 var(--_outline-label-padding);position:relative}.md3-field--no-label .md3-field__outline-notch{display:none}.md3-field__outline-panel-inactive,.md3-field__outline-panel-active{border:inherit;border-bottom-style:solid;inset:0;position:absolute}.md3-field__outline-panel-inactive::before,.md3-field__outline-panel-inactive::after,.md3-field__outline-panel-active::before,.md3-field__outline-panel-active::after{border-top-style:solid;border-bottom:none;bottom:auto;transform:scaleX(1);transition:transform 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-field__outline-panel-inactive::before,.md3-field__outline-panel-active::before{right:50%;transform-origin:top left}.md3-field__outline-panel-inactive::after,.md3-field__outline-panel-active::after{left:50%;transform-origin:top right}.md3-field--populated .md3-field__outline-panel-inactive::before,.md3-field--populated .md3-field__outline-panel-inactive::after,.md3-field--focused .md3-field__outline-panel-inactive::before,.md3-field--focused .md3-field__outline-panel-inactive::after,.md3-field--populated .md3-field__outline-panel-active::before,.md3-field--populated .md3-field__outline-panel-active::after,.md3-field--focused .md3-field__outline-panel-active::before,.md3-field--focused .md3-field__outline-panel-active::after{transform:scaleX(0)}.md3-field__outline-panel-active{opacity:0;transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-field--focused .md3-field__outline-panel-active{opacity:1}.md3-field__label--floating{transform:translateY(calc(-100% + var(--_label-text-padding-bottom)))}.md3-field__outline-start,.md3-field:not(.md3-field--with-start) .md3-field__start{padding-inline-start:max(var(--_container-padding-horizontal),max(var(--_container-shape-start-start),var(--_container-shape-end-start)) + var(--_outline-label-padding))}.md3-field:not(.md3-field--with-end) .md3-field__end{padding-inline-end:max(var(--_container-padding-horizontal),max(var(--_container-shape-start-end),var(--_container-shape-end-end)))}.md3-field__outline-start::before,.md3-field__outline-end::before,.md3-field__outline-panel-inactive,.md3-field__outline-panel-inactive::before,.md3-field__outline-panel-inactive::after{border-width:var(--_outline-width)}:hover .md3-field__outline{border-color:var(--_hover-outline-color);color:var(--_hover-outline-color)}:hover .md3-field__outline-start::before,:hover .md3-field__outline-end::before,:hover .md3-field__outline-panel-inactive,:hover .md3-field__outline-panel-inactive::before,:hover .md3-field__outline-panel-inactive::after{border-width:var(--_hover-outline-width)}.md3-field--focused .md3-field__outline{border-color:var(--_focus-outline-color);color:var(--_focus-outline-color)}.md3-field__outline-start::after,.md3-field__outline-end::after,.md3-field__outline-panel-active,.md3-field__outline-panel-active::before,.md3-field__outline-panel-active::after{border-width:var(--_focus-outline-width)}.md3-field--disabled .md3-field__outline{border-color:var(--_disabled-outline-color);color:var(--_disabled-outline-color)}.md3-field--disabled .md3-field__outline-start,.md3-field--disabled .md3-field__outline-end,.md3-field--disabled .md3-field__outline-panel-inactive{opacity:var(--_disabled-outline-opacity)}.md3-field--disabled .md3-field__outline-start::before,.md3-field--disabled .md3-field__outline-end::before,.md3-field--disabled .md3-field__outline-panel-inactive,.md3-field--disabled .md3-field__outline-panel-inactive::before,.md3-field--disabled .md3-field__outline-panel-inactive::after{border-width:var(--_disabled-outline-width)}.md3-field--error:not(.md3-field--disabled) .md3-field__outline{border-color:var(--_error-outline-color);color:var(--_error-outline-color)}.md3-field--error:not(.md3-field--disabled):hover .md3-field__outline{border-color:var(--_error-hover-outline-color);color:var(--_error-hover-outline-color)}.md3-field--error:not(.md3-field--disabled).md3-field--focused .md3-field__outline{border-color:var(--_error-focus-outline-color);color:var(--_error-focus-outline-color)}/*# sourceMappingURL=outlined-styles.css.map */
7
+ export const styles = css `:host{--_container-shape-start-start: var(--md-outlined-field-container-shape-start-start, var(--md-outlined-field-container-shape, 4px));--_container-shape-start-end: var(--md-outlined-field-container-shape-start-end, var(--md-outlined-field-container-shape, 4px));--_container-shape-end-end: var(--md-outlined-field-container-shape-end-end, var(--md-outlined-field-container-shape, 4px));--_container-shape-end-start: var(--md-outlined-field-container-shape-end-start, var(--md-outlined-field-container-shape, 4px));--_disabled-label-text-color: var(--md-outlined-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-label-text-opacity: var(--md-outlined-field-disabled-label-text-opacity, 0.38);--_disabled-leading-icon-color: var(--md-outlined-field-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-leading-icon-opacity: var(--md-outlined-field-disabled-leading-icon-opacity, 0.38);--_disabled-outline-color: var(--md-outlined-field-disabled-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-outline-opacity: var(--md-outlined-field-disabled-outline-opacity, 0.12);--_disabled-outline-width: var(--md-outlined-field-disabled-outline-width, 1px);--_disabled-supporting-text-color: var(--md-outlined-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-supporting-text-opacity: var(--md-outlined-field-disabled-supporting-text-opacity, 0.38);--_disabled-trailing-icon-color: var(--md-outlined-field-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-trailing-icon-opacity: var(--md-outlined-field-disabled-trailing-icon-opacity, 0.38);--_error-focus-label-text-color: var(--md-outlined-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-leading-icon-color: var(--md-outlined-field-error-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-outline-color: var(--md-outlined-field-error-focus-outline-color, var(--md-sys-color-error, #b3261e));--_error-focus-supporting-text-color: var(--md-outlined-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-trailing-icon-color: var(--md-outlined-field-error-focus-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_error-hover-label-text-color: var(--md-outlined-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-leading-icon-color: var(--md-outlined-field-error-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-hover-outline-color: var(--md-outlined-field-error-hover-outline-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-supporting-text-color: var(--md-outlined-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-hover-trailing-icon-color: var(--md-outlined-field-error-hover-trailing-icon-color, var(--md-sys-color-on-error-container, #410e0b));--_error-label-text-color: var(--md-outlined-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_error-leading-icon-color: var(--md-outlined-field-error-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-outline-color: var(--md-outlined-field-error-outline-color, var(--md-sys-color-error, #b3261e));--_error-supporting-text-color: var(--md-outlined-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-trailing-icon-color: var(--md-outlined-field-error-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_focus-label-text-color: var(--md-outlined-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-outlined-field-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-outline-color: var(--md-outlined-field-focus-outline-color, var(--md-sys-color-primary, #6750a4));--_focus-outline-width: var(--md-outlined-field-focus-outline-width, 2px);--_focus-supporting-text-color: var(--md-outlined-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-icon-color: var(--md-outlined-field-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-label-text-color: var(--md-outlined-field-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-leading-icon-color: var(--md-outlined-field-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-outline-color: var(--md-outlined-field-hover-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-outline-width: var(--md-outlined-field-hover-outline-width, 1px);--_hover-supporting-text-color: var(--md-outlined-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-outlined-field-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-color: var(--md-outlined-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-populated-line-height: var(--md-outlined-field-label-text-populated-line-height, 1rem);--_label-text-populated-size: var(--md-outlined-field-label-text-populated-size, 0.75rem);--_label-text-type: var(--md-outlined-field-label-text-type, 400 1rem / 1.5rem Roboto);--_leading-icon-color: var(--md-outlined-field-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-icon-size: var(--md-outlined-field-leading-icon-size, 24px);--_outline-color: var(--md-outlined-field-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-outlined-field-outline-width, 1px);--_supporting-text-color: var(--md-outlined-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-type: var(--md-outlined-field-supporting-text-type, 400 0.75rem / 1rem Roboto);--_trailing-icon-color: var(--md-outlined-field-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-size: var(--md-outlined-field-trailing-icon-size, 24px);--_container-padding-horizontal: var(--md-outlined-field-container-padding-horizontal, 16px);--_container-padding-vertical: var(--md-outlined-field-container-padding-vertical, 16px);--_content-color: var(--md-outlined-field-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-content-color: var(--md-outlined-field-disabled-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-content-opacity: var(--md-outlined-field-disabled-content-opacity, 0.38);--_error-content-color: var(--md-outlined-field-error-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-focus-content-color: var(--md-outlined-field-error-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-hover-content-color: var(--md-outlined-field-error-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_focus-content-color: var(--md-outlined-field-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-content-color: var(--md-outlined-field-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_label-text-padding-bottom: var(--md-outlined-field-label-text-padding-bottom, 8px);--_outline-label-padding: var(--md-outlined-field-outline-label-padding, 4px);--_supporting-text-padding: var(--md-outlined-field-supporting-text-padding, 16px);--_supporting-text-padding-top: var(--md-outlined-field-supporting-text-padding-top, 4px)}.outline{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);border-color:var(--_outline-color);color:var(--_outline-color);display:flex;pointer-events:none;height:100%;position:absolute;width:100%}.outline-start::before,.outline-start::after,.outline-panel-inactive::before,.outline-panel-inactive::after,.outline-panel-active::before,.outline-panel-active::after,.outline-end::before,.outline-end::after{border:inherit;content:"";inset:0;position:absolute}.outline-start,.outline-end{border:inherit;border-radius:inherit;box-sizing:border-box;position:relative}.outline-start::before,.outline-start::after,.outline-end::before,.outline-end::after{border-bottom-style:solid;border-top-style:solid}.outline-start::after,.outline-end::after{opacity:0;transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.focused .outline-start::after,.focused .outline-end::after{opacity:1}.outline-start::before,.outline-start::after{border-inline-start-style:solid;border-inline-end-style:none;border-start-start-radius:inherit;border-start-end-radius:0;border-end-start-radius:inherit;border-end-end-radius:0;margin-inline-end:var(--_outline-label-padding)}.outline-end{flex-grow:1;margin-inline-start:calc(-1*var(--_outline-label-padding))}.outline-end::before,.outline-end::after{border-inline-start-style:none;border-inline-end-style:solid;border-start-start-radius:0;border-start-end-radius:inherit;border-end-start-radius:0;border-end-end-radius:inherit}.outline-notch{align-items:flex-start;border:inherit;display:flex;margin-inline-start:calc(-1*var(--_outline-label-padding));margin-inline-end:var(--_outline-label-padding);max-width:calc(100% - 2*var(--_container-padding-horizontal));padding:0 var(--_outline-label-padding);position:relative}.no-label .outline-notch{display:none}.outline-panel-inactive,.outline-panel-active{border:inherit;border-bottom-style:solid;inset:0;position:absolute}.outline-panel-inactive::before,.outline-panel-inactive::after,.outline-panel-active::before,.outline-panel-active::after{border-top-style:solid;border-bottom:none;bottom:auto;transform:scaleX(1);transition:transform 150ms cubic-bezier(0.4, 0, 0.2, 1)}.outline-panel-inactive::before,.outline-panel-active::before{right:50%;transform-origin:top left}.outline-panel-inactive::after,.outline-panel-active::after{left:50%;transform-origin:top right}.populated .outline-panel-inactive::before,.populated .outline-panel-inactive::after,.populated .outline-panel-active::before,.populated .outline-panel-active::after,.focused .outline-panel-inactive::before,.focused .outline-panel-inactive::after,.focused .outline-panel-active::before,.focused .outline-panel-active::after{transform:scaleX(0)}.outline-panel-active{opacity:0;transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.focused .outline-panel-active{opacity:1}.label.floating{transform:translateY(calc(-100% + var(--_label-text-padding-bottom)))}.outline-start,.field:not(.with-start) .start{padding-inline-start:max(var(--_container-padding-horizontal),max(var(--_container-shape-start-start),var(--_container-shape-end-start)) + var(--_outline-label-padding))}.field:not(.with-end) .end{padding-inline-end:max(var(--_container-padding-horizontal),max(var(--_container-shape-start-end),var(--_container-shape-end-end)))}.outline-start::before,.outline-end::before,.outline-panel-inactive,.outline-panel-inactive::before,.outline-panel-inactive::after{border-width:var(--_outline-width)}:hover .outline{border-color:var(--_hover-outline-color);color:var(--_hover-outline-color)}:hover .outline-start::before,:hover .outline-end::before,:hover .outline-panel-inactive,:hover .outline-panel-inactive::before,:hover .outline-panel-inactive::after{border-width:var(--_hover-outline-width)}.focused .outline{border-color:var(--_focus-outline-color);color:var(--_focus-outline-color)}.outline-start::after,.outline-end::after,.outline-panel-active,.outline-panel-active::before,.outline-panel-active::after{border-width:var(--_focus-outline-width)}.disabled .outline{border-color:var(--_disabled-outline-color);color:var(--_disabled-outline-color)}.disabled .outline-start,.disabled .outline-end,.disabled .outline-panel-inactive{opacity:var(--_disabled-outline-opacity)}.disabled .outline-start::before,.disabled .outline-end::before,.disabled .outline-panel-inactive,.disabled .outline-panel-inactive::before,.disabled .outline-panel-inactive::after{border-width:var(--_disabled-outline-width)}.error .outline{border-color:var(--_error-outline-color);color:var(--_error-outline-color)}.error:hover .outline{border-color:var(--_error-hover-outline-color);color:var(--_error-hover-outline-color)}.error.focused .outline{border-color:var(--_error-focus-outline-color);color:var(--_error-focus-outline-color)}/*# sourceMappingURL=outlined-styles.css.map */
8
8
  `;
9
9
  //# sourceMappingURL=outlined-styles.css.js.map
package/field/lib/outlined-styles.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"outlined-styles.css.js","sourceRoot":"","sources":["outlined-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-shape-start-start: var(--md-outlined-field-container-shape-start-start, 4px);--_container-shape-start-end: var(--md-outlined-field-container-shape-start-end, 4px);--_container-shape-end-end: var(--md-outlined-field-container-shape-end-end, 4px);--_container-shape-end-start: var(--md-outlined-field-container-shape-end-start, 4px);--_container-height: var(--md-outlined-field-container-height, 56px);--_disabled-label-text-color: var(--md-outlined-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-label-text-opacity: var(--md-outlined-field-disabled-label-text-opacity, 0.38);--_disabled-leading-icon-color: var(--md-outlined-field-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-leading-icon-opacity: var(--md-outlined-field-disabled-leading-icon-opacity, 0.38);--_disabled-outline-color: var(--md-outlined-field-disabled-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-outline-opacity: var(--md-outlined-field-disabled-outline-opacity, 0.12);--_disabled-outline-width: var(--md-outlined-field-disabled-outline-width, 1px);--_disabled-supporting-text-color: var(--md-outlined-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-supporting-text-opacity: var(--md-outlined-field-disabled-supporting-text-opacity, 0.38);--_disabled-trailing-icon-color: var(--md-outlined-field-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-trailing-icon-opacity: var(--md-outlined-field-disabled-trailing-icon-opacity, 0.38);--_error-focus-label-text-color: var(--md-outlined-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-leading-icon-color: var(--md-outlined-field-error-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-outline-color: var(--md-outlined-field-error-focus-outline-color, var(--md-sys-color-error, #b3261e));--_error-focus-supporting-text-color: var(--md-outlined-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-trailing-icon-color: var(--md-outlined-field-error-focus-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_error-hover-label-text-color: var(--md-outlined-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-leading-icon-color: var(--md-outlined-field-error-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-hover-outline-color: var(--md-outlined-field-error-hover-outline-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-supporting-text-color: var(--md-outlined-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-hover-trailing-icon-color: var(--md-outlined-field-error-hover-trailing-icon-color, var(--md-sys-color-on-error-container, #410e0b));--_error-label-text-color: var(--md-outlined-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_error-leading-icon-color: var(--md-outlined-field-error-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-outline-color: var(--md-outlined-field-error-outline-color, var(--md-sys-color-error, #b3261e));--_error-supporting-text-color: var(--md-outlined-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-trailing-icon-color: var(--md-outlined-field-error-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_focus-label-text-color: var(--md-outlined-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-outlined-field-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-outline-color: var(--md-outlined-field-focus-outline-color, var(--md-sys-color-primary, #6750a4));--_focus-outline-width: var(--md-outlined-field-focus-outline-width, 2px);--_focus-supporting-text-color: var(--md-outlined-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-icon-color: var(--md-outlined-field-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-label-text-color: var(--md-outlined-field-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-leading-icon-color: var(--md-outlined-field-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-outline-color: var(--md-outlined-field-hover-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-outline-width: var(--md-outlined-field-hover-outline-width, 1px);--_hover-supporting-text-color: var(--md-outlined-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-outlined-field-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-color: var(--md-outlined-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-font: var(--md-outlined-field-label-text-font, Roboto);--_label-text-line-height: var(--md-outlined-field-label-text-line-height, 1.5rem);--_label-text-populated-line-height: var(--md-outlined-field-label-text-populated-line-height, 1rem);--_label-text-populated-size: var(--md-outlined-field-label-text-populated-size, 0.75rem);--_label-text-size: var(--md-outlined-field-label-text-size, 1rem);--_label-text-tracking: var(--md-outlined-field-label-text-tracking, 0.031rem);--_label-text-weight: var(--md-outlined-field-label-text-weight, 400);--_leading-icon-color: var(--md-outlined-field-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-icon-size: var(--md-outlined-field-leading-icon-size, 24px);--_outline-color: var(--md-outlined-field-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-outlined-field-outline-width, 1px);--_supporting-text-color: var(--md-outlined-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-outlined-field-supporting-text-font, Roboto);--_supporting-text-line-height: var(--md-outlined-field-supporting-text-line-height, 1rem);--_supporting-text-size: var(--md-outlined-field-supporting-text-size, 0.75rem);--_supporting-text-tracking: var(--md-outlined-field-supporting-text-tracking, 0.025rem);--_supporting-text-weight: var(--md-outlined-field-supporting-text-weight, 400);--_trailing-icon-color: var(--md-outlined-field-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-size: var(--md-outlined-field-trailing-icon-size, 24px);--_container-padding-horizontal: var(--md-outlined-field-container-padding-horizontal, 16px);--_container-padding-vertical: var(--md-outlined-field-container-padding-vertical, 8px);--_content-color: var(--md-outlined-field-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-content-color: var(--md-outlined-field-disabled-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-content-opacity: var(--md-outlined-field-disabled-content-opacity, 0.38);--_error-content-color: var(--md-outlined-field-error-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-focus-content-color: var(--md-outlined-field-error-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-hover-content-color: var(--md-outlined-field-error-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_focus-content-color: var(--md-outlined-field-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-content-color: var(--md-outlined-field-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_label-text-padding-bottom: var(--md-outlined-field-label-text-padding-bottom, 8px);--_outline-label-padding: var(--md-outlined-field-outline-label-padding, 4px);--_supporting-text-padding: var(--md-outlined-field-supporting-text-padding, 16px);--_supporting-text-padding-top: var(--md-outlined-field-supporting-text-padding-top, 4px);--_label-text-populated-font: ;--_label-text-populated-tracking: ;--_label-text-populated-weight: }.md3-field__outline{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);border-color:var(--_outline-color);color:var(--_outline-color);display:flex;pointer-events:none;height:100%;position:absolute;width:100%}.md3-field__outline-start::before,.md3-field__outline-start::after,.md3-field__outline-panel-inactive::before,.md3-field__outline-panel-inactive::after,.md3-field__outline-panel-active::before,.md3-field__outline-panel-active::after,.md3-field__outline-end::before,.md3-field__outline-end::after{border:inherit;content:\"\";inset:0;position:absolute}.md3-field__outline-start,.md3-field__outline-end{border:inherit;border-radius:inherit;box-sizing:border-box;position:relative}.md3-field__outline-start::before,.md3-field__outline-start::after,.md3-field__outline-end::before,.md3-field__outline-end::after{border-bottom-style:solid;border-top-style:solid}.md3-field__outline-start::after,.md3-field__outline-end::after{opacity:0;transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-field--focused .md3-field__outline-start::after,.md3-field--focused .md3-field__outline-end::after{opacity:1}.md3-field__outline-start::before,.md3-field__outline-start::after{border-inline-start-style:solid;border-inline-end-style:none;border-start-start-radius:inherit;border-start-end-radius:0;border-end-start-radius:inherit;border-end-end-radius:0;margin-inline-end:var(--_outline-label-padding)}.md3-field__outline-end{flex-grow:1;margin-inline-start:calc(-1*var(--_outline-label-padding))}.md3-field__outline-end::before,.md3-field__outline-end::after{border-inline-start-style:none;border-inline-end-style:solid;border-start-start-radius:0;border-start-end-radius:inherit;border-end-start-radius:0;border-end-end-radius:inherit}.md3-field__outline-notch{align-items:flex-start;border:inherit;display:flex;margin-inline-start:calc(-1*var(--_outline-label-padding));margin-inline-end:var(--_outline-label-padding);max-width:calc(100% - 2*var(--_container-padding-horizontal));padding:0 var(--_outline-label-padding);position:relative}.md3-field--no-label .md3-field__outline-notch{display:none}.md3-field__outline-panel-inactive,.md3-field__outline-panel-active{border:inherit;border-bottom-style:solid;inset:0;position:absolute}.md3-field__outline-panel-inactive::before,.md3-field__outline-panel-inactive::after,.md3-field__outline-panel-active::before,.md3-field__outline-panel-active::after{border-top-style:solid;border-bottom:none;bottom:auto;transform:scaleX(1);transition:transform 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-field__outline-panel-inactive::before,.md3-field__outline-panel-active::before{right:50%;transform-origin:top left}.md3-field__outline-panel-inactive::after,.md3-field__outline-panel-active::after{left:50%;transform-origin:top right}.md3-field--populated .md3-field__outline-panel-inactive::before,.md3-field--populated .md3-field__outline-panel-inactive::after,.md3-field--focused .md3-field__outline-panel-inactive::before,.md3-field--focused .md3-field__outline-panel-inactive::after,.md3-field--populated .md3-field__outline-panel-active::before,.md3-field--populated .md3-field__outline-panel-active::after,.md3-field--focused .md3-field__outline-panel-active::before,.md3-field--focused .md3-field__outline-panel-active::after{transform:scaleX(0)}.md3-field__outline-panel-active{opacity:0;transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-field--focused .md3-field__outline-panel-active{opacity:1}.md3-field__label--floating{transform:translateY(calc(-100% + var(--_label-text-padding-bottom)))}.md3-field__outline-start,.md3-field:not(.md3-field--with-start) .md3-field__start{padding-inline-start:max(var(--_container-padding-horizontal),max(var(--_container-shape-start-start),var(--_container-shape-end-start)) + var(--_outline-label-padding))}.md3-field:not(.md3-field--with-end) .md3-field__end{padding-inline-end:max(var(--_container-padding-horizontal),max(var(--_container-shape-start-end),var(--_container-shape-end-end)))}.md3-field__outline-start::before,.md3-field__outline-end::before,.md3-field__outline-panel-inactive,.md3-field__outline-panel-inactive::before,.md3-field__outline-panel-inactive::after{border-width:var(--_outline-width)}:hover .md3-field__outline{border-color:var(--_hover-outline-color);color:var(--_hover-outline-color)}:hover .md3-field__outline-start::before,:hover .md3-field__outline-end::before,:hover .md3-field__outline-panel-inactive,:hover .md3-field__outline-panel-inactive::before,:hover .md3-field__outline-panel-inactive::after{border-width:var(--_hover-outline-width)}.md3-field--focused .md3-field__outline{border-color:var(--_focus-outline-color);color:var(--_focus-outline-color)}.md3-field__outline-start::after,.md3-field__outline-end::after,.md3-field__outline-panel-active,.md3-field__outline-panel-active::before,.md3-field__outline-panel-active::after{border-width:var(--_focus-outline-width)}.md3-field--disabled .md3-field__outline{border-color:var(--_disabled-outline-color);color:var(--_disabled-outline-color)}.md3-field--disabled .md3-field__outline-start,.md3-field--disabled .md3-field__outline-end,.md3-field--disabled .md3-field__outline-panel-inactive{opacity:var(--_disabled-outline-opacity)}.md3-field--disabled .md3-field__outline-start::before,.md3-field--disabled .md3-field__outline-end::before,.md3-field--disabled .md3-field__outline-panel-inactive,.md3-field--disabled .md3-field__outline-panel-inactive::before,.md3-field--disabled .md3-field__outline-panel-inactive::after{border-width:var(--_disabled-outline-width)}.md3-field--error:not(.md3-field--disabled) .md3-field__outline{border-color:var(--_error-outline-color);color:var(--_error-outline-color)}.md3-field--error:not(.md3-field--disabled):hover .md3-field__outline{border-color:var(--_error-hover-outline-color);color:var(--_error-hover-outline-color)}.md3-field--error:not(.md3-field--disabled).md3-field--focused .md3-field__outline{border-color:var(--_error-focus-outline-color);color:var(--_error-focus-outline-color)}/*# sourceMappingURL=outlined-styles.css.map */\n`;\n "]}
1
+ {"version":3,"file":"outlined-styles.css.js","sourceRoot":"","sources":["outlined-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-shape-start-start: var(--md-outlined-field-container-shape-start-start, var(--md-outlined-field-container-shape, 4px));--_container-shape-start-end: var(--md-outlined-field-container-shape-start-end, var(--md-outlined-field-container-shape, 4px));--_container-shape-end-end: var(--md-outlined-field-container-shape-end-end, var(--md-outlined-field-container-shape, 4px));--_container-shape-end-start: var(--md-outlined-field-container-shape-end-start, var(--md-outlined-field-container-shape, 4px));--_disabled-label-text-color: var(--md-outlined-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-label-text-opacity: var(--md-outlined-field-disabled-label-text-opacity, 0.38);--_disabled-leading-icon-color: var(--md-outlined-field-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-leading-icon-opacity: var(--md-outlined-field-disabled-leading-icon-opacity, 0.38);--_disabled-outline-color: var(--md-outlined-field-disabled-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-outline-opacity: var(--md-outlined-field-disabled-outline-opacity, 0.12);--_disabled-outline-width: var(--md-outlined-field-disabled-outline-width, 1px);--_disabled-supporting-text-color: var(--md-outlined-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-supporting-text-opacity: var(--md-outlined-field-disabled-supporting-text-opacity, 0.38);--_disabled-trailing-icon-color: var(--md-outlined-field-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-trailing-icon-opacity: var(--md-outlined-field-disabled-trailing-icon-opacity, 0.38);--_error-focus-label-text-color: var(--md-outlined-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-leading-icon-color: var(--md-outlined-field-error-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-outline-color: var(--md-outlined-field-error-focus-outline-color, var(--md-sys-color-error, #b3261e));--_error-focus-supporting-text-color: var(--md-outlined-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-trailing-icon-color: var(--md-outlined-field-error-focus-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_error-hover-label-text-color: var(--md-outlined-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-leading-icon-color: var(--md-outlined-field-error-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-hover-outline-color: var(--md-outlined-field-error-hover-outline-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-supporting-text-color: var(--md-outlined-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-hover-trailing-icon-color: var(--md-outlined-field-error-hover-trailing-icon-color, var(--md-sys-color-on-error-container, #410e0b));--_error-label-text-color: var(--md-outlined-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_error-leading-icon-color: var(--md-outlined-field-error-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-outline-color: var(--md-outlined-field-error-outline-color, var(--md-sys-color-error, #b3261e));--_error-supporting-text-color: var(--md-outlined-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-trailing-icon-color: var(--md-outlined-field-error-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_focus-label-text-color: var(--md-outlined-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-outlined-field-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-outline-color: var(--md-outlined-field-focus-outline-color, var(--md-sys-color-primary, #6750a4));--_focus-outline-width: var(--md-outlined-field-focus-outline-width, 2px);--_focus-supporting-text-color: var(--md-outlined-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-icon-color: var(--md-outlined-field-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-label-text-color: var(--md-outlined-field-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-leading-icon-color: var(--md-outlined-field-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-outline-color: var(--md-outlined-field-hover-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-outline-width: var(--md-outlined-field-hover-outline-width, 1px);--_hover-supporting-text-color: var(--md-outlined-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-outlined-field-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-color: var(--md-outlined-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-populated-line-height: var(--md-outlined-field-label-text-populated-line-height, 1rem);--_label-text-populated-size: var(--md-outlined-field-label-text-populated-size, 0.75rem);--_label-text-type: var(--md-outlined-field-label-text-type, 400 1rem / 1.5rem Roboto);--_leading-icon-color: var(--md-outlined-field-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-icon-size: var(--md-outlined-field-leading-icon-size, 24px);--_outline-color: var(--md-outlined-field-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-outlined-field-outline-width, 1px);--_supporting-text-color: var(--md-outlined-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-type: var(--md-outlined-field-supporting-text-type, 400 0.75rem / 1rem Roboto);--_trailing-icon-color: var(--md-outlined-field-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-size: var(--md-outlined-field-trailing-icon-size, 24px);--_container-padding-horizontal: var(--md-outlined-field-container-padding-horizontal, 16px);--_container-padding-vertical: var(--md-outlined-field-container-padding-vertical, 16px);--_content-color: var(--md-outlined-field-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-content-color: var(--md-outlined-field-disabled-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-content-opacity: var(--md-outlined-field-disabled-content-opacity, 0.38);--_error-content-color: var(--md-outlined-field-error-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-focus-content-color: var(--md-outlined-field-error-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-hover-content-color: var(--md-outlined-field-error-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_focus-content-color: var(--md-outlined-field-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-content-color: var(--md-outlined-field-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_label-text-padding-bottom: var(--md-outlined-field-label-text-padding-bottom, 8px);--_outline-label-padding: var(--md-outlined-field-outline-label-padding, 4px);--_supporting-text-padding: var(--md-outlined-field-supporting-text-padding, 16px);--_supporting-text-padding-top: var(--md-outlined-field-supporting-text-padding-top, 4px)}.outline{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);border-color:var(--_outline-color);color:var(--_outline-color);display:flex;pointer-events:none;height:100%;position:absolute;width:100%}.outline-start::before,.outline-start::after,.outline-panel-inactive::before,.outline-panel-inactive::after,.outline-panel-active::before,.outline-panel-active::after,.outline-end::before,.outline-end::after{border:inherit;content:\"\";inset:0;position:absolute}.outline-start,.outline-end{border:inherit;border-radius:inherit;box-sizing:border-box;position:relative}.outline-start::before,.outline-start::after,.outline-end::before,.outline-end::after{border-bottom-style:solid;border-top-style:solid}.outline-start::after,.outline-end::after{opacity:0;transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.focused .outline-start::after,.focused .outline-end::after{opacity:1}.outline-start::before,.outline-start::after{border-inline-start-style:solid;border-inline-end-style:none;border-start-start-radius:inherit;border-start-end-radius:0;border-end-start-radius:inherit;border-end-end-radius:0;margin-inline-end:var(--_outline-label-padding)}.outline-end{flex-grow:1;margin-inline-start:calc(-1*var(--_outline-label-padding))}.outline-end::before,.outline-end::after{border-inline-start-style:none;border-inline-end-style:solid;border-start-start-radius:0;border-start-end-radius:inherit;border-end-start-radius:0;border-end-end-radius:inherit}.outline-notch{align-items:flex-start;border:inherit;display:flex;margin-inline-start:calc(-1*var(--_outline-label-padding));margin-inline-end:var(--_outline-label-padding);max-width:calc(100% - 2*var(--_container-padding-horizontal));padding:0 var(--_outline-label-padding);position:relative}.no-label .outline-notch{display:none}.outline-panel-inactive,.outline-panel-active{border:inherit;border-bottom-style:solid;inset:0;position:absolute}.outline-panel-inactive::before,.outline-panel-inactive::after,.outline-panel-active::before,.outline-panel-active::after{border-top-style:solid;border-bottom:none;bottom:auto;transform:scaleX(1);transition:transform 150ms cubic-bezier(0.4, 0, 0.2, 1)}.outline-panel-inactive::before,.outline-panel-active::before{right:50%;transform-origin:top left}.outline-panel-inactive::after,.outline-panel-active::after{left:50%;transform-origin:top right}.populated .outline-panel-inactive::before,.populated .outline-panel-inactive::after,.populated .outline-panel-active::before,.populated .outline-panel-active::after,.focused .outline-panel-inactive::before,.focused .outline-panel-inactive::after,.focused .outline-panel-active::before,.focused .outline-panel-active::after{transform:scaleX(0)}.outline-panel-active{opacity:0;transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.focused .outline-panel-active{opacity:1}.label.floating{transform:translateY(calc(-100% + var(--_label-text-padding-bottom)))}.outline-start,.field:not(.with-start) .start{padding-inline-start:max(var(--_container-padding-horizontal),max(var(--_container-shape-start-start),var(--_container-shape-end-start)) + var(--_outline-label-padding))}.field:not(.with-end) .end{padding-inline-end:max(var(--_container-padding-horizontal),max(var(--_container-shape-start-end),var(--_container-shape-end-end)))}.outline-start::before,.outline-end::before,.outline-panel-inactive,.outline-panel-inactive::before,.outline-panel-inactive::after{border-width:var(--_outline-width)}:hover .outline{border-color:var(--_hover-outline-color);color:var(--_hover-outline-color)}:hover .outline-start::before,:hover .outline-end::before,:hover .outline-panel-inactive,:hover .outline-panel-inactive::before,:hover .outline-panel-inactive::after{border-width:var(--_hover-outline-width)}.focused .outline{border-color:var(--_focus-outline-color);color:var(--_focus-outline-color)}.outline-start::after,.outline-end::after,.outline-panel-active,.outline-panel-active::before,.outline-panel-active::after{border-width:var(--_focus-outline-width)}.disabled .outline{border-color:var(--_disabled-outline-color);color:var(--_disabled-outline-color)}.disabled .outline-start,.disabled .outline-end,.disabled .outline-panel-inactive{opacity:var(--_disabled-outline-opacity)}.disabled .outline-start::before,.disabled .outline-end::before,.disabled .outline-panel-inactive,.disabled .outline-panel-inactive::before,.disabled .outline-panel-inactive::after{border-width:var(--_disabled-outline-width)}.error .outline{border-color:var(--_error-outline-color);color:var(--_error-outline-color)}.error:hover .outline{border-color:var(--_error-hover-outline-color);color:var(--_error-hover-outline-color)}.error.focused .outline{border-color:var(--_error-focus-outline-color);color:var(--_error-focus-outline-color)}/*# sourceMappingURL=outlined-styles.css.map */\n`;\n "]}
package/field/lib/shared-styles.css.js CHANGED
@@ -4,6 +4,6 @@
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
6
  import { css } from 'lit';
7
- export const styles = css `:host{display:inline-flex}.md3-field{display:inline-flex;flex:1;flex-direction:column;writing-mode:horizontal-tb}.md3-field__container{align-items:center;box-sizing:border-box;display:flex;flex:1;flex-basis:var(--_container-height);position:relative}.md3-field--disabled{pointer-events:none}.md3-field--with-start .md3-field__start,.md3-field--with-end .md3-field__end{min-width:48px}.md3-field--with-start .md3-field__start{margin-inline-end:4px}.md3-field--with-end .md3-field__end{margin-inline-start:4px}.md3-field__start,.md3-field__middle,.md3-field__end{display:flex;align-items:center;box-sizing:border-box;height:100%;position:relative}.md3-field__start,.md3-field__end{justify-content:center}.md3-field__middle{align-self:baseline;flex:1}.md3-field__content{display:flex;flex:1;opacity:0;transition:opacity 83ms cubic-bezier(0.4, 0, 0.2, 1);color:var(--_content-color)}.md3-field--no-label .md3-field__content,.md3-field--focused .md3-field__content,.md3-field--populated .md3-field__content{opacity:1;transition-delay:67ms}.md3-field--disabled.md3-field--no-label .md3-field__content,.md3-field--disabled.md3-field--focused .md3-field__content,.md3-field--disabled.md3-field--populated .md3-field__content{opacity:var(--_disabled-content-opacity)}:hover .md3-field__content{color:var(--_hover-content-color)}.md3-field--focused .md3-field__content{color:var(--_focus-content-color)}.md3-field--disabled .md3-field__content{color:var(--_disabled-content-color)}.md3-field--error:not(.md3-field--disabled) .md3-field__content{color:var(--_error-content-color)}.md3-field--error:not(.md3-field--disabled):hover .md3-field__content{color:var(--_error-hover-content-color)}.md3-field--error:not(.md3-field--disabled).md3-field--focused .md3-field__content{color:var(--_error-focus-content-color)}.md3-field__label{color:var(--_label-text-color);overflow:hidden;max-width:100%;pointer-events:none;text-overflow:ellipsis;white-space:nowrap;z-index:1;font-family:var(--_label-text-font);font-weight:var(--_label-text-weight);letter-spacing:var(--_label-text-tracking)}.md3-field__label--resting{position:absolute;top:50%;transform:translateY(-50%);transform-origin:top left;font-size:var(--_label-text-size);line-height:var(--_label-text-line-height)}.md3-field__label--floating{font-size:var(--_label-text-populated-size);line-height:var(--_label-text-populated-line-height)}.md3-field__label--hidden{opacity:0}.md3-field--no-label .md3-field__label{display:none}:hover .md3-field__label{color:var(--_hover-label-text-color)}.md3-field--focused .md3-field__label{color:var(--_focus-label-text-color)}.md3-field--disabled .md3-field__label{color:var(--_disabled-label-text-color)}.md3-field--disabled .md3-field__label:not(.md3-field__label--hidden){opacity:var(--_disabled-label-text-opacity)}.md3-field--error:not(.md3-field--disabled) .md3-field__label{color:var(--_error-label-text-color)}.md3-field--error:not(.md3-field--disabled):hover .md3-field__label{color:var(--_error-hover-label-text-color)}.md3-field--error:not(.md3-field--disabled).md3-field--focused .md3-field__label{color:var(--_error-focus-label-text-color)}.md3-field__supporting-text{color:var(--_supporting-text-color);display:flex;justify-content:space-between;padding:0 var(--_supporting-text-padding);font-family:var(--_supporting-text-font);font-size:var(--_supporting-text-size);font-weight:var(--_supporting-text-weight);letter-spacing:var(--_supporting-text-tracking);line-height:var(--_supporting-text-line-height)}.md3-field__supporting-text-start,.md3-field__supporting-text-end{display:flex}.md3-field__supporting-text-start ::slotted(:not(:empty)),.md3-field__supporting-text-end ::slotted(:not(:empty)){padding-top:var(--_supporting-text-padding-top)}.md3-field__supporting-text-end ::slotted(:not(:empty)){padding-inline-start:var(--_supporting-text-padding)}:hover .md3-field__supporting-text{color:var(--_hover-supporting-text-color)}.md3-field--focus .md3-field__supporting-text{color:var(--_focus-supporting-text-color)}.md3-field--disabled .md3-field__supporting-text{color:var(--_disabled-supporting-text-color);opacity:var(--_disabled-supporting-text-opacity)}.md3-field--error:not(.md3-field--disabled) .md3-field__supporting-text{color:var(--_error-supporting-text-color)}.md3-field--error:not(.md3-field--disabled):hover .md3-field__supporting-text{color:var(--_error-hover-supporting-text-color)}.md3-field--error:not(.md3-field--disabled).md3-field--focus .md3-field__supporting-text{color:var(--_error-focus-supporting-text-color)}/*# sourceMappingURL=shared-styles.css.map */
7
+ export const styles = css `:host{display:inline-flex}.field{display:inline-flex;flex:1;flex-direction:column;writing-mode:horizontal-tb}.container{align-items:center;box-sizing:border-box;display:flex;flex:1;flex-basis:var(--_container-height);padding-top:var(--_container-padding-vertical);padding-bottom:var(--_container-padding-vertical);position:relative}.disabled{pointer-events:none}.with-start .start,.with-end .end{min-width:48px}.with-start .start{margin-inline-end:4px}.with-end .end{margin-inline-start:4px}.start,.middle,.end{display:flex;align-items:center;box-sizing:border-box;height:100%;position:relative}.start,.end{justify-content:center}.middle{align-self:baseline;flex:1}.content{display:flex;flex:1;opacity:0;transition:opacity 83ms cubic-bezier(0.4, 0, 0.2, 1);color:var(--_content-color)}.no-label .content,.focused .content,.populated .content{opacity:1;transition-delay:67ms}.disabled.no-label .content,.disabled.focused .content,.disabled.populated .content{opacity:var(--_disabled-content-opacity)}:hover .content{color:var(--_hover-content-color)}.focused .content{color:var(--_focus-content-color)}.disabled .content{color:var(--_disabled-content-color)}.error .content{color:var(--_error-content-color)}.error:hover .content{color:var(--_error-hover-content-color)}.error.focused .content{color:var(--_error-focus-content-color)}.label{color:var(--_label-text-color);overflow:hidden;max-width:100%;pointer-events:none;text-overflow:ellipsis;white-space:nowrap;z-index:1;font:var(--_label-text-type)}.label.resting{position:absolute;top:50%;transform:translateY(-50%);transform-origin:top left}.label.floating{font-size:var(--_label-text-populated-size);line-height:var(--_label-text-populated-line-height)}.label.hidden{opacity:0}.no-label .label{display:none}:hover .label{color:var(--_hover-label-text-color)}.focused .label{color:var(--_focus-label-text-color)}.disabled .label{color:var(--_disabled-label-text-color)}.disabled .label:not(.hidden){opacity:var(--_disabled-label-text-opacity)}.error .label{color:var(--_error-label-text-color)}.error:hover .label{color:var(--_error-hover-label-text-color)}.error.focused .label{color:var(--_error-focus-label-text-color)}.supporting-text{color:var(--_supporting-text-color);display:flex;justify-content:space-between;padding:0 var(--_supporting-text-padding);font:var(--_supporting-text-type)}.supporting-text-start,.supporting-text-end{display:flex}.supporting-text-start ::slotted(:not(:empty)),.supporting-text-end ::slotted(:not(:empty)){padding-top:var(--_supporting-text-padding-top)}.supporting-text-end ::slotted(:not(:empty)){padding-inline-start:var(--_supporting-text-padding)}:hover .supporting-text{color:var(--_hover-supporting-text-color)}.focus .supporting-text{color:var(--_focus-supporting-text-color)}.disabled .supporting-text{color:var(--_disabled-supporting-text-color);opacity:var(--_disabled-supporting-text-opacity)}.error .supporting-text{color:var(--_error-supporting-text-color)}.error:hover .supporting-text{color:var(--_error-hover-supporting-text-color)}.error.focus .supporting-text{color:var(--_error-focus-supporting-text-color)}/*# sourceMappingURL=shared-styles.css.map */
8
8
  `;
9
9
  //# sourceMappingURL=shared-styles.css.js.map
package/field/lib/shared-styles.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"shared-styles.css.js","sourceRoot":"","sources":["shared-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{display:inline-flex}.md3-field{display:inline-flex;flex:1;flex-direction:column;writing-mode:horizontal-tb}.md3-field__container{align-items:center;box-sizing:border-box;display:flex;flex:1;flex-basis:var(--_container-height);position:relative}.md3-field--disabled{pointer-events:none}.md3-field--with-start .md3-field__start,.md3-field--with-end .md3-field__end{min-width:48px}.md3-field--with-start .md3-field__start{margin-inline-end:4px}.md3-field--with-end .md3-field__end{margin-inline-start:4px}.md3-field__start,.md3-field__middle,.md3-field__end{display:flex;align-items:center;box-sizing:border-box;height:100%;position:relative}.md3-field__start,.md3-field__end{justify-content:center}.md3-field__middle{align-self:baseline;flex:1}.md3-field__content{display:flex;flex:1;opacity:0;transition:opacity 83ms cubic-bezier(0.4, 0, 0.2, 1);color:var(--_content-color)}.md3-field--no-label .md3-field__content,.md3-field--focused .md3-field__content,.md3-field--populated .md3-field__content{opacity:1;transition-delay:67ms}.md3-field--disabled.md3-field--no-label .md3-field__content,.md3-field--disabled.md3-field--focused .md3-field__content,.md3-field--disabled.md3-field--populated .md3-field__content{opacity:var(--_disabled-content-opacity)}:hover .md3-field__content{color:var(--_hover-content-color)}.md3-field--focused .md3-field__content{color:var(--_focus-content-color)}.md3-field--disabled .md3-field__content{color:var(--_disabled-content-color)}.md3-field--error:not(.md3-field--disabled) .md3-field__content{color:var(--_error-content-color)}.md3-field--error:not(.md3-field--disabled):hover .md3-field__content{color:var(--_error-hover-content-color)}.md3-field--error:not(.md3-field--disabled).md3-field--focused .md3-field__content{color:var(--_error-focus-content-color)}.md3-field__label{color:var(--_label-text-color);overflow:hidden;max-width:100%;pointer-events:none;text-overflow:ellipsis;white-space:nowrap;z-index:1;font-family:var(--_label-text-font);font-weight:var(--_label-text-weight);letter-spacing:var(--_label-text-tracking)}.md3-field__label--resting{position:absolute;top:50%;transform:translateY(-50%);transform-origin:top left;font-size:var(--_label-text-size);line-height:var(--_label-text-line-height)}.md3-field__label--floating{font-size:var(--_label-text-populated-size);line-height:var(--_label-text-populated-line-height)}.md3-field__label--hidden{opacity:0}.md3-field--no-label .md3-field__label{display:none}:hover .md3-field__label{color:var(--_hover-label-text-color)}.md3-field--focused .md3-field__label{color:var(--_focus-label-text-color)}.md3-field--disabled .md3-field__label{color:var(--_disabled-label-text-color)}.md3-field--disabled .md3-field__label:not(.md3-field__label--hidden){opacity:var(--_disabled-label-text-opacity)}.md3-field--error:not(.md3-field--disabled) .md3-field__label{color:var(--_error-label-text-color)}.md3-field--error:not(.md3-field--disabled):hover .md3-field__label{color:var(--_error-hover-label-text-color)}.md3-field--error:not(.md3-field--disabled).md3-field--focused .md3-field__label{color:var(--_error-focus-label-text-color)}.md3-field__supporting-text{color:var(--_supporting-text-color);display:flex;justify-content:space-between;padding:0 var(--_supporting-text-padding);font-family:var(--_supporting-text-font);font-size:var(--_supporting-text-size);font-weight:var(--_supporting-text-weight);letter-spacing:var(--_supporting-text-tracking);line-height:var(--_supporting-text-line-height)}.md3-field__supporting-text-start,.md3-field__supporting-text-end{display:flex}.md3-field__supporting-text-start ::slotted(:not(:empty)),.md3-field__supporting-text-end ::slotted(:not(:empty)){padding-top:var(--_supporting-text-padding-top)}.md3-field__supporting-text-end ::slotted(:not(:empty)){padding-inline-start:var(--_supporting-text-padding)}:hover .md3-field__supporting-text{color:var(--_hover-supporting-text-color)}.md3-field--focus .md3-field__supporting-text{color:var(--_focus-supporting-text-color)}.md3-field--disabled .md3-field__supporting-text{color:var(--_disabled-supporting-text-color);opacity:var(--_disabled-supporting-text-opacity)}.md3-field--error:not(.md3-field--disabled) .md3-field__supporting-text{color:var(--_error-supporting-text-color)}.md3-field--error:not(.md3-field--disabled):hover .md3-field__supporting-text{color:var(--_error-hover-supporting-text-color)}.md3-field--error:not(.md3-field--disabled).md3-field--focus .md3-field__supporting-text{color:var(--_error-focus-supporting-text-color)}/*# sourceMappingURL=shared-styles.css.map */\n`;\n "]}
1
+ {"version":3,"file":"shared-styles.css.js","sourceRoot":"","sources":["shared-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{display:inline-flex}.field{display:inline-flex;flex:1;flex-direction:column;writing-mode:horizontal-tb}.container{align-items:center;box-sizing:border-box;display:flex;flex:1;flex-basis:var(--_container-height);padding-top:var(--_container-padding-vertical);padding-bottom:var(--_container-padding-vertical);position:relative}.disabled{pointer-events:none}.with-start .start,.with-end .end{min-width:48px}.with-start .start{margin-inline-end:4px}.with-end .end{margin-inline-start:4px}.start,.middle,.end{display:flex;align-items:center;box-sizing:border-box;height:100%;position:relative}.start,.end{justify-content:center}.middle{align-self:baseline;flex:1}.content{display:flex;flex:1;opacity:0;transition:opacity 83ms cubic-bezier(0.4, 0, 0.2, 1);color:var(--_content-color)}.no-label .content,.focused .content,.populated .content{opacity:1;transition-delay:67ms}.disabled.no-label .content,.disabled.focused .content,.disabled.populated .content{opacity:var(--_disabled-content-opacity)}:hover .content{color:var(--_hover-content-color)}.focused .content{color:var(--_focus-content-color)}.disabled .content{color:var(--_disabled-content-color)}.error .content{color:var(--_error-content-color)}.error:hover .content{color:var(--_error-hover-content-color)}.error.focused .content{color:var(--_error-focus-content-color)}.label{color:var(--_label-text-color);overflow:hidden;max-width:100%;pointer-events:none;text-overflow:ellipsis;white-space:nowrap;z-index:1;font:var(--_label-text-type)}.label.resting{position:absolute;top:50%;transform:translateY(-50%);transform-origin:top left}.label.floating{font-size:var(--_label-text-populated-size);line-height:var(--_label-text-populated-line-height)}.label.hidden{opacity:0}.no-label .label{display:none}:hover .label{color:var(--_hover-label-text-color)}.focused .label{color:var(--_focus-label-text-color)}.disabled .label{color:var(--_disabled-label-text-color)}.disabled .label:not(.hidden){opacity:var(--_disabled-label-text-opacity)}.error .label{color:var(--_error-label-text-color)}.error:hover .label{color:var(--_error-hover-label-text-color)}.error.focused .label{color:var(--_error-focus-label-text-color)}.supporting-text{color:var(--_supporting-text-color);display:flex;justify-content:space-between;padding:0 var(--_supporting-text-padding);font:var(--_supporting-text-type)}.supporting-text-start,.supporting-text-end{display:flex}.supporting-text-start ::slotted(:not(:empty)),.supporting-text-end ::slotted(:not(:empty)){padding-top:var(--_supporting-text-padding-top)}.supporting-text-end ::slotted(:not(:empty)){padding-inline-start:var(--_supporting-text-padding)}:hover .supporting-text{color:var(--_hover-supporting-text-color)}.focus .supporting-text{color:var(--_focus-supporting-text-color)}.disabled .supporting-text{color:var(--_disabled-supporting-text-color);opacity:var(--_disabled-supporting-text-opacity)}.error .supporting-text{color:var(--_error-supporting-text-color)}.error:hover .supporting-text{color:var(--_error-hover-supporting-text-color)}.error.focus .supporting-text{color:var(--_error-focus-supporting-text-color)}/*# sourceMappingURL=shared-styles.css.map */\n`;\n "]}
package/field/outlined-field.d.ts CHANGED
@@ -10,7 +10,7 @@ declare global {
10
10
  }
11
11
  }
12
12
  /**
13
- * @soyCompatible
13
+ * TODO(b/228525797): add docs
14
14
  * @final
15
15
  * @suppress {visibility}
16
16
  */
package/field/outlined-field.js CHANGED
@@ -9,7 +9,7 @@ import { OutlinedField } from './lib/outlined-field.js';
9
9
  import { styles as outlinedStyles } from './lib/outlined-styles.css.js';
10
10
  import { styles as sharedStyles } from './lib/shared-styles.css.js';
11
11
  /**
12
- * @soyCompatible
12
+ * TODO(b/228525797): add docs
13
13
  * @final
14
14
  * @suppress {visibility}
15
15
  */
package/field/outlined-field.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"outlined-field.js","sourceRoot":"","sources":["outlined-field.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,aAAa,EAAC,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;GAIG;AAEH,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,aAAa;CAEjD,CAAA;AADiB,sBAAM,GAAG,CAAC,YAAY,EAAE,cAAc,CAAE,CAAA;AAD7C,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAE3B;SAFY,eAAe","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {OutlinedField} from './lib/outlined-field.js';\nimport {styles as outlinedStyles} from './lib/outlined-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-outlined-field': MdOutlinedField;\n }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-field')\nexport class MdOutlinedField extends OutlinedField {\n static override styles = [sharedStyles, outlinedStyles];\n}\n"]}
1
+ {"version":3,"file":"outlined-field.js","sourceRoot":"","sources":["outlined-field.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,aAAa,EAAC,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;GAIG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,aAAa;;AAChC,sBAAM,GAAG,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AAD7C,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAE3B;SAFY,eAAe","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {OutlinedField} from './lib/outlined-field.js';\nimport {styles as outlinedStyles} from './lib/outlined-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-outlined-field': MdOutlinedField;\n }\n}\n\n/**\n * TODO(b/228525797): add docs\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-field')\nexport class MdOutlinedField extends OutlinedField {\n static override styles = [sharedStyles, outlinedStyles];\n}\n"]}
package/focus/focus-ring.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"focus-ring.js","sourceRoot":"","sources":["focus-ring.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,SAAS,EAAC,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAC,MAAM,EAAC,MAAM,gCAAgC,CAAC;AAQtD;;;;GAIG;AAEH,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,SAAS;CAEzC,CAAA;AADiB,kBAAM,GAAG,CAAC,MAAM,CAAE,CAAA;AADvB,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAEvB;SAFY,WAAW","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {FocusRing} from './lib/focus-ring.js';\nimport {styles} from './lib/focus-ring-styles.css.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-focus-ring': MdFocusRing;\n }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-focus-ring')\nexport class MdFocusRing extends FocusRing {\n static override styles = [styles];\n}\n"]}
1
+ {"version":3,"file":"focus-ring.js","sourceRoot":"","sources":["focus-ring.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,SAAS,EAAC,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAC,MAAM,EAAC,MAAM,gCAAgC,CAAC;AAQtD;;;;GAIG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,SAAS;;AACxB,kBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AADvB,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAEvB;SAFY,WAAW","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {FocusRing} from './lib/focus-ring.js';\nimport {styles} from './lib/focus-ring-styles.css.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-focus-ring': MdFocusRing;\n }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-focus-ring')\nexport class MdFocusRing extends FocusRing {\n static override styles = [styles];\n}\n"]}
package/focus/lib/_focus-ring.scss CHANGED
@@ -3,42 +3,39 @@
3
3
  // SPDX-License-Identifier: Apache-2.0
4
4
  //
5
5
 
6
- // stylelint-disable selector-class-pattern --
7
- // Selector '.md3-*' should only be used in this project.
8
-
6
+ // go/keep-sorted start
9
7
  @use 'sass:map';
10
- @use '../../sass/theme';
8
+ // go/keep-sorted end
9
+ // go/keep-sorted start
11
10
  @use '../../sass/shape';
12
- @use '../../sass/resolvers';
11
+ @use '../../sass/theme';
13
12
  @use './md-comp-focus-ring';
13
+ // go/keep-sorted end
14
14
 
15
15
  $_custom-property-prefix: 'focus-ring';
16
16
 
17
17
  @mixin theme($tokens) {
18
18
  $tokens: theme.validate-theme(md-comp-focus-ring.values(), $tokens);
19
- $tokens: _resolve-tokens($tokens);
20
19
  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
20
+ $tokens: shape.resolve-tokens($tokens, 'shape');
21
21
 
22
22
  @include theme.emit-theme-vars($tokens);
23
23
  }
24
24
 
25
25
  @mixin styles() {
26
26
  $tokens: md-comp-focus-ring.values();
27
- $tokens: _resolve-tokens($tokens);
28
27
  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
28
+ $tokens: shape.resolve-tokens($tokens, 'shape');
29
29
 
30
30
  :host {
31
31
  @each $token, $value in $tokens {
32
32
  --_#{$token}: #{$value};
33
33
  }
34
34
 
35
- pointer-events: none;
36
- }
37
-
38
- .md3-focus-ring {
39
35
  display: none;
40
36
  position: absolute;
41
37
  box-sizing: border-box;
38
+ pointer-events: none;
42
39
  border: var(--_width) solid var(--_color);
43
40
  border-start-start-radius: var(--_shape-start-start);
44
41
  border-start-end-radius: var(--_shape-start-end);
@@ -49,20 +46,10 @@ $_custom-property-prefix: 'focus-ring';
49
46
  // and touch target.
50
47
  $vertical-inset: calc(-1 * (var(--_offset-vertical) + var(--_width)));
51
48
  $horizontal-inset: calc(-1 * (var(--_offset-horizontal) + var(--_width)));
52
-
53
49
  inset: $vertical-inset $horizontal-inset;
54
50
  }
55
51
 
56
- .md3-focus-ring--visible {
57
- display: block;
52
+ :host([visible]) {
53
+ display: flex;
58
54
  }
59
55
  }
60
-
61
- @function _resolve-tokens($tokens) {
62
- $tokens: shape.resolve-theme(
63
- $tokens,
64
- map.get(resolvers.$material, shape),
65
- shape
66
- );
67
- @return $tokens;
68
- }
package/focus/lib/_md-comp-focus-ring.scss CHANGED
@@ -3,8 +3,12 @@
3
3
  // SPDX-License-Identifier: Apache-2.0
4
4
  //
5
5
 
6
+ // go/keep-sorted start
6
7
  @use 'sass:map';
8
+ // go/keep-sorted end
9
+ // go/keep-sorted start
7
10
  @use '../../tokens';
11
+ // go/keep-sorted end
8
12
 
9
13
  $_default: (
10
14
  md-sys-color: tokens.md-sys-color-values-light(),
package/focus/lib/focus-ring-styles.css.js CHANGED
@@ -4,6 +4,6 @@
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
6
  import { css } from 'lit';
7
- export const styles = css `:host{--_shape-start-start: var(--md-focus-ring-shape-start-start, 9999px);--_shape-start-end: var(--md-focus-ring-shape-start-end, 9999px);--_shape-end-end: var(--md-focus-ring-shape-end-end, 9999px);--_shape-end-start: var(--md-focus-ring-shape-end-start, 9999px);--_offset-vertical: var(--md-focus-ring-offset-vertical, 2px);--_offset-horizontal: var(--md-focus-ring-offset-horizontal, 2px);--_width: var(--md-focus-ring-width, 3px);--_color: var(--md-focus-ring-color, var(--md-sys-color-secondary, #625b71));pointer-events:none}.md3-focus-ring{display:none;position:absolute;box-sizing:border-box;border:var(--_width) solid var(--_color);border-start-start-radius:var(--_shape-start-start);border-start-end-radius:var(--_shape-start-end);border-end-start-radius:var(--_shape-end-start);border-end-end-radius:var(--_shape-end-end);inset:calc(-1*(var(--_offset-vertical) + var(--_width))) calc(-1*(var(--_offset-horizontal) + var(--_width)))}.md3-focus-ring--visible{display:block}/*# sourceMappingURL=focus-ring-styles.css.map */
7
+ export const styles = css `:host{--_shape-start-start: var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, 9999px));--_shape-start-end: var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, 9999px));--_shape-end-end: var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, 9999px));--_shape-end-start: var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, 9999px));--_offset-vertical: var(--md-focus-ring-offset-vertical, 2px);--_offset-horizontal: var(--md-focus-ring-offset-horizontal, 2px);--_width: var(--md-focus-ring-width, 3px);--_color: var(--md-focus-ring-color, var(--md-sys-color-secondary, #625b71));display:none;position:absolute;box-sizing:border-box;pointer-events:none;border:var(--_width) solid var(--_color);border-start-start-radius:var(--_shape-start-start);border-start-end-radius:var(--_shape-start-end);border-end-start-radius:var(--_shape-end-start);border-end-end-radius:var(--_shape-end-end);inset:calc(-1*(var(--_offset-vertical) + var(--_width))) calc(-1*(var(--_offset-horizontal) + var(--_width)))}:host([visible]){display:flex}/*# sourceMappingURL=focus-ring-styles.css.map */
8
8
  `;
9
9
  //# sourceMappingURL=focus-ring-styles.css.js.map
package/focus/lib/focus-ring-styles.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"focus-ring-styles.css.js","sourceRoot":"","sources":["focus-ring-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_shape-start-start: var(--md-focus-ring-shape-start-start, 9999px);--_shape-start-end: var(--md-focus-ring-shape-start-end, 9999px);--_shape-end-end: var(--md-focus-ring-shape-end-end, 9999px);--_shape-end-start: var(--md-focus-ring-shape-end-start, 9999px);--_offset-vertical: var(--md-focus-ring-offset-vertical, 2px);--_offset-horizontal: var(--md-focus-ring-offset-horizontal, 2px);--_width: var(--md-focus-ring-width, 3px);--_color: var(--md-focus-ring-color, var(--md-sys-color-secondary, #625b71));pointer-events:none}.md3-focus-ring{display:none;position:absolute;box-sizing:border-box;border:var(--_width) solid var(--_color);border-start-start-radius:var(--_shape-start-start);border-start-end-radius:var(--_shape-start-end);border-end-start-radius:var(--_shape-end-start);border-end-end-radius:var(--_shape-end-end);inset:calc(-1*(var(--_offset-vertical) + var(--_width))) calc(-1*(var(--_offset-horizontal) + var(--_width)))}.md3-focus-ring--visible{display:block}/*# sourceMappingURL=focus-ring-styles.css.map */\n`;\n "]}
1
+ {"version":3,"file":"focus-ring-styles.css.js","sourceRoot":"","sources":["focus-ring-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_shape-start-start: var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, 9999px));--_shape-start-end: var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, 9999px));--_shape-end-end: var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, 9999px));--_shape-end-start: var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, 9999px));--_offset-vertical: var(--md-focus-ring-offset-vertical, 2px);--_offset-horizontal: var(--md-focus-ring-offset-horizontal, 2px);--_width: var(--md-focus-ring-width, 3px);--_color: var(--md-focus-ring-color, var(--md-sys-color-secondary, #625b71));display:none;position:absolute;box-sizing:border-box;pointer-events:none;border:var(--_width) solid var(--_color);border-start-start-radius:var(--_shape-start-start);border-start-end-radius:var(--_shape-start-end);border-end-start-radius:var(--_shape-end-start);border-end-end-radius:var(--_shape-end-end);inset:calc(-1*(var(--_offset-vertical) + var(--_width))) calc(-1*(var(--_offset-horizontal) + var(--_width)))}:host([visible]){display:flex}/*# sourceMappingURL=focus-ring-styles.css.map */\n`;\n "]}
package/focus/lib/focus-ring-styles.scss CHANGED
@@ -3,6 +3,8 @@
3
3
  // SPDX-License-Identifier: Apache-2.0
4
4
  //
5
5
 
6
+ // go/keep-sorted start
6
7
  @use './focus-ring';
8
+ // go/keep-sorted end
7
9
 
8
10
  @include focus-ring.styles;
package/focus/lib/focus-ring.d.ts CHANGED
@@ -3,8 +3,7 @@
3
3
  * Copyright 2021 Google LLC
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
- import { LitElement, TemplateResult } from 'lit';
7
- import { ClassInfo } from 'lit/directives/class-map.js';
6
+ import { LitElement } from 'lit';
8
7
  /**
9
8
  * @summary An accessible, themable ring designed to be shown on
10
9
  * `:focus-visible`.
@@ -23,6 +22,4 @@ export declare class FocusRing extends LitElement {
23
22
  * Makes the focus ring visible.
24
23
  */
25
24
  visible: boolean;
26
- protected render(): TemplateResult;
27
- protected getRenderClasses(): ClassInfo;
28
25
  }
package/focus/lib/focus-ring.js CHANGED
@@ -4,9 +4,8 @@
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
6
  import { __decorate, __metadata } from "tslib";
7
- import { html, LitElement } from 'lit';
7
+ import { LitElement } from 'lit';
8
8
  import { property } from 'lit/decorators.js';
9
- import { classMap } from 'lit/directives/class-map.js';
10
9
  /**
11
10
  * @summary An accessible, themable ring designed to be shown on
12
11
  * `:focus-visible`.
@@ -28,17 +27,9 @@ export class FocusRing extends LitElement {
28
27
  */
29
28
  this.visible = false;
30
29
  }
31
- render() {
32
- return html `<span class="md3-focus-ring ${classMap(this.getRenderClasses())}"></span>`;
33
- }
34
- getRenderClasses() {
35
- return {
36
- 'md3-focus-ring--visible': this.visible,
37
- };
38
- }
39
30
  }
40
31
  __decorate([
41
- property({ type: Boolean }),
32
+ property({ type: Boolean, reflect: true }),
42
33
  __metadata("design:type", Object)
43
34
  ], FocusRing.prototype, "visible", void 0);
44
35
  //# sourceMappingURL=focus-ring.js.map