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

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 (423) hide show
  1. package/README.md +66 -19
  2. package/autocomplete/lib/_filled-autocomplete.scss +1 -34
  3. package/autocomplete/lib/_outlined-autocomplete.scss +1 -34
  4. package/autocomplete/lib/autocomplete.d.ts +0 -4
  5. package/autocomplete/lib/autocomplete.js +5 -12
  6. package/autocomplete/lib/autocomplete.js.map +1 -1
  7. package/autocomplete/lib/autocompleteitem/autocomplete-item.d.ts +2 -2
  8. package/autocomplete/lib/autocompleteitem/autocomplete-item.js +2 -2
  9. package/autocomplete/lib/autocompleteitem/autocomplete-item.js.map +1 -1
  10. package/autocomplete/lib/autocompletelist/autocomplete-list.d.ts +1 -1
  11. package/autocomplete/lib/autocompletelist/autocomplete-list.js +2 -2
  12. package/autocomplete/lib/autocompletelist/autocomplete-list.js.map +1 -1
  13. package/autocomplete/lib/filled-styles.css.js +1 -1
  14. package/autocomplete/lib/filled-styles.css.js.map +1 -1
  15. package/autocomplete/lib/outlined-styles.css.js +1 -1
  16. package/autocomplete/lib/outlined-styles.css.js.map +1 -1
  17. package/button/lib/_elevation.scss +1 -1
  18. package/button/lib/_icon.scss +12 -29
  19. package/button/lib/_shared.scss +1 -0
  20. package/button/lib/button.d.ts +1 -14
  21. package/button/lib/button.js +6 -42
  22. package/button/lib/button.js.map +1 -1
  23. package/button/lib/filled-styles.css.js +1 -1
  24. package/button/lib/filled-styles.css.js.map +1 -1
  25. package/button/lib/link-button.d.ts +0 -1
  26. package/button/lib/link-button.js +0 -5
  27. package/button/lib/link-button.js.map +1 -1
  28. package/button/lib/shared-elevation-styles.css.js +1 -1
  29. package/button/lib/shared-elevation-styles.css.js.map +1 -1
  30. package/button/lib/shared-styles.css.js +1 -1
  31. package/button/lib/shared-styles.css.js.map +1 -1
  32. package/checkbox/checkbox.d.ts +11 -2
  33. package/checkbox/checkbox.js +11 -2
  34. package/checkbox/checkbox.js.map +1 -1
  35. package/checkbox/lib/checkbox.d.ts +28 -0
  36. package/checkbox/lib/checkbox.js +30 -1
  37. package/checkbox/lib/checkbox.js.map +1 -1
  38. package/chips/chip/lib/_chip-theme.scss +1 -1
  39. package/dialog/_dialog.scss +6 -0
  40. package/dialog/dialog.d.ts +38 -0
  41. package/dialog/dialog.js +41 -0
  42. package/dialog/dialog.js.map +1 -0
  43. package/dialog/harness.d.ts +18 -0
  44. package/dialog/harness.js +55 -0
  45. package/dialog/harness.js.map +1 -0
  46. package/dialog/lib/_dialog.scss +386 -0
  47. package/dialog/lib/_tokens.scss +86 -0
  48. package/{elevationold/lib/elevation-overlay-styles.css.d.ts → dialog/lib/dialog-styles.css.d.ts} +0 -0
  49. package/dialog/lib/dialog-styles.css.js +9 -0
  50. package/dialog/lib/dialog-styles.css.js.map +1 -0
  51. package/dialog/lib/dialog-styles.scss +8 -0
  52. package/dialog/lib/dialog.d.ts +190 -0
  53. package/dialog/lib/dialog.js +566 -0
  54. package/dialog/lib/dialog.js.map +1 -0
  55. package/divider/_divider.scss +6 -0
  56. package/divider/divider.d.ts +24 -0
  57. package/divider/divider.js +27 -0
  58. package/divider/divider.js.map +1 -0
  59. package/divider/lib/_divider.scss +54 -0
  60. package/{list/lib/divider/list-divider-styles.css.d.ts → divider/lib/divider-styles.css.d.ts} +0 -0
  61. package/divider/lib/divider-styles.css.js +9 -0
  62. package/divider/lib/divider-styles.css.js.map +1 -0
  63. package/divider/lib/divider-styles.scss +8 -0
  64. package/divider/lib/divider.d.ts +23 -0
  65. package/divider/lib/divider.js +41 -0
  66. package/divider/lib/divider.js.map +1 -0
  67. package/elevation/lib/_elevation.scss +1 -1
  68. package/elevation/lib/_md-comp-elevation.scss +1 -1
  69. package/elevation/lib/elevation-styles.css.js +1 -1
  70. package/elevation/lib/elevation-styles.css.js.map +1 -1
  71. package/fab/lib/_shared.scss +1 -1
  72. package/fab/lib/fab-shared-styles.css.js +1 -1
  73. package/fab/lib/fab-shared-styles.css.js.map +1 -1
  74. package/field/lib/_filled-field.scss +5 -2
  75. package/field/lib/_md-comp-filled-field.scss +3 -1
  76. package/field/lib/_md-comp-outlined-field.scss +1 -1
  77. package/field/lib/_shared.scss +2 -0
  78. package/field/lib/field.d.ts +0 -2
  79. package/field/lib/field.js +2 -4
  80. package/field/lib/field.js.map +1 -1
  81. package/field/lib/filled-styles.css.js +1 -1
  82. package/field/lib/filled-styles.css.js.map +1 -1
  83. package/field/lib/outlined-styles.css.js +1 -1
  84. package/field/lib/outlined-styles.css.js.map +1 -1
  85. package/field/lib/shared-styles.css.js +1 -1
  86. package/field/lib/shared-styles.css.js.map +1 -1
  87. package/focus/lib/_focus-ring.scss +3 -10
  88. package/focus/lib/focus-ring-styles.css.js +1 -1
  89. package/focus/lib/focus-ring-styles.css.js.map +1 -1
  90. package/focus/lib/focus-ring.d.ts +1 -4
  91. package/focus/lib/focus-ring.js +2 -11
  92. package/focus/lib/focus-ring.js.map +1 -1
  93. package/icon/lib/_icon.scss +8 -5
  94. package/icon/lib/icon-styles.css.js +1 -1
  95. package/icon/lib/icon-styles.css.js.map +1 -1
  96. package/iconbutton/lib/_filled-icon-button.scss +1 -1
  97. package/iconbutton/lib/_filled-tonal-icon-button.scss +1 -1
  98. package/iconbutton/lib/_outlined-icon-button.scss +9 -22
  99. package/iconbutton/lib/_shared.scss +14 -40
  100. package/iconbutton/lib/_standard-icon-button.scss +6 -14
  101. package/iconbutton/lib/filled-styles.css.js +1 -1
  102. package/iconbutton/lib/filled-styles.css.js.map +1 -1
  103. package/iconbutton/lib/filled-tonal-styles.css.js +1 -1
  104. package/iconbutton/lib/filled-tonal-styles.css.js.map +1 -1
  105. package/iconbutton/lib/icon-button-toggle.d.ts +13 -42
  106. package/iconbutton/lib/icon-button-toggle.js +33 -103
  107. package/iconbutton/lib/icon-button-toggle.js.map +1 -1
  108. package/iconbutton/lib/icon-button.d.ts +2 -4
  109. package/iconbutton/lib/icon-button.js +3 -9
  110. package/iconbutton/lib/icon-button.js.map +1 -1
  111. package/iconbutton/lib/outlined-styles.css.js +1 -1
  112. package/iconbutton/lib/outlined-styles.css.js.map +1 -1
  113. package/iconbutton/lib/shared-styles.css.js +1 -1
  114. package/iconbutton/lib/shared-styles.css.js.map +1 -1
  115. package/iconbutton/lib/standard-styles.css.js +1 -1
  116. package/iconbutton/lib/standard-styles.css.js.map +1 -1
  117. package/list/lib/_list.scss +32 -40
  118. package/list/lib/avatar/_list-item-avatar.scss +1 -1
  119. package/list/lib/avatar/list-item-avatar-styles.css.js +1 -1
  120. package/list/lib/avatar/list-item-avatar-styles.css.js.map +1 -1
  121. package/list/lib/avatar/list-item-avatar.d.ts +9 -4
  122. package/list/lib/avatar/list-item-avatar.js +24 -11
  123. package/list/lib/avatar/list-item-avatar.js.map +1 -1
  124. package/list/lib/icon/_list-item-icon.scss +3 -1
  125. package/list/lib/icon/list-item-icon-styles.css.js +1 -1
  126. package/list/lib/icon/list-item-icon-styles.css.js.map +1 -1
  127. package/list/lib/icon/list-item-icon.d.ts +0 -3
  128. package/list/lib/icon/list-item-icon.js +1 -12
  129. package/list/lib/icon/list-item-icon.js.map +1 -1
  130. package/list/lib/image/_list-item-image.scss +1 -1
  131. package/list/lib/image/list-item-image-styles.css.js +1 -1
  132. package/list/lib/image/list-item-image-styles.css.js.map +1 -1
  133. package/list/lib/image/list-item-image.d.ts +11 -4
  134. package/list/lib/image/list-item-image.js +24 -13
  135. package/list/lib/image/list-item-image.js.map +1 -1
  136. package/list/lib/list-styles.css.js +1 -1
  137. package/list/lib/list-styles.css.js.map +1 -1
  138. package/list/lib/list.d.ts +99 -28
  139. package/list/lib/list.js +210 -111
  140. package/list/lib/list.js.map +1 -1
  141. package/list/lib/listitem/_list-item.scss +104 -39
  142. package/list/lib/listitem/harness.js +2 -1
  143. package/list/lib/listitem/harness.js.map +1 -1
  144. package/{menu/lib/menu-button-styles.css.d.ts → list/lib/listitem/list-item-private-styles.css.d.ts} +0 -0
  145. package/list/lib/listitem/list-item-private-styles.css.js +9 -0
  146. package/list/lib/listitem/list-item-private-styles.css.js.map +1 -0
  147. package/list/lib/listitem/list-item-private-styles.scss +8 -0
  148. package/list/lib/listitem/list-item-styles.css.js +1 -1
  149. package/list/lib/listitem/list-item-styles.css.js.map +1 -1
  150. package/list/lib/listitem/list-item.d.ts +99 -43
  151. package/list/lib/listitem/list-item.js +201 -172
  152. package/list/lib/listitem/list-item.js.map +1 -1
  153. package/list/lib/listitemlink/list-item-link.d.ts +17 -0
  154. package/list/lib/listitemlink/list-item-link.js +42 -0
  155. package/list/lib/listitemlink/list-item-link.js.map +1 -0
  156. package/list/lib/video/_list-item-video.scss +10 -4
  157. package/list/lib/video/list-item-video-styles.css.js +1 -1
  158. package/list/lib/video/list-item-video-styles.css.js.map +1 -1
  159. package/list/lib/video/list-item-video.d.ts +43 -4
  160. package/list/lib/video/list-item-video.js +90 -12
  161. package/list/lib/video/list-item-video.js.map +1 -1
  162. package/list/list-item-avatar.d.ts +2 -1
  163. package/list/list-item-avatar.js +2 -1
  164. package/list/list-item-avatar.js.map +1 -1
  165. package/list/list-item-icon.d.ts +2 -1
  166. package/list/list-item-icon.js +2 -1
  167. package/list/list-item-icon.js.map +1 -1
  168. package/list/list-item-image.d.ts +2 -1
  169. package/list/list-item-image.js +2 -1
  170. package/list/list-item-image.js.map +1 -1
  171. package/list/list-item-link.d.ts +35 -0
  172. package/list/list-item-link.js +39 -0
  173. package/list/list-item-link.js.map +1 -0
  174. package/list/list-item-video.d.ts +2 -1
  175. package/list/list-item-video.js +2 -1
  176. package/list/list-item-video.js.map +1 -1
  177. package/list/list-item.d.ts +18 -2
  178. package/list/list-item.js +20 -3
  179. package/list/list-item.js.map +1 -1
  180. package/list/list.d.ts +15 -1
  181. package/list/list.js +15 -1
  182. package/list/list.js.map +1 -1
  183. package/menu/_menu-item.scss +6 -0
  184. package/menu/_menu.scss +6 -0
  185. package/menu/harness.d.ts +5 -0
  186. package/menu/harness.js +22 -0
  187. package/menu/harness.js.map +1 -1
  188. package/menu/lib/_menu.scss +61 -62
  189. package/menu/lib/menu-styles.css.js +1 -1
  190. package/menu/lib/menu-styles.css.js.map +1 -1
  191. package/menu/lib/menu.d.ts +176 -42
  192. package/menu/lib/menu.js +506 -246
  193. package/menu/lib/menu.js.map +1 -1
  194. package/menu/lib/menuitem/_menu-item.scss +115 -0
  195. package/{tokens/v0_150/index.test.css.d.ts → menu/lib/menuitem/menu-item-private-styles.css.d.ts} +0 -0
  196. package/menu/lib/menuitem/menu-item-private-styles.css.js +9 -0
  197. package/menu/lib/menuitem/menu-item-private-styles.css.js.map +1 -0
  198. package/menu/lib/menuitem/menu-item-private-styles.scss +8 -0
  199. package/{tokens/v0_150/lib.test.css.d.ts → menu/lib/menuitem/menu-item-styles.css.d.ts} +0 -0
  200. package/menu/lib/menuitem/menu-item-styles.css.js +9 -0
  201. package/menu/lib/menuitem/menu-item-styles.css.js.map +1 -0
  202. package/menu/lib/menuitem/menu-item-styles.scss +8 -0
  203. package/menu/lib/menuitem/menu-item.d.ts +20 -3
  204. package/menu/lib/menuitem/menu-item.js +42 -3
  205. package/menu/lib/menuitem/menu-item.js.map +1 -1
  206. package/menu/lib/menuitemlink/menu-item-link.d.ts +25 -0
  207. package/menu/lib/menuitemlink/menu-item-link.js +51 -0
  208. package/menu/lib/menuitemlink/menu-item-link.js.map +1 -0
  209. package/menu/lib/shared.d.ts +134 -0
  210. package/menu/lib/shared.js +85 -0
  211. package/menu/lib/shared.js.map +1 -0
  212. package/menu/lib/submenuitem/harness.d.ts +11 -0
  213. package/menu/lib/submenuitem/harness.js +12 -0
  214. package/menu/lib/submenuitem/harness.js.map +1 -0
  215. package/menu/lib/submenuitem/sub-menu-item.d.ts +89 -0
  216. package/menu/lib/submenuitem/sub-menu-item.js +266 -0
  217. package/menu/lib/submenuitem/sub-menu-item.js.map +1 -0
  218. package/menu/lib/surfacePositionController.d.ts +117 -0
  219. package/menu/lib/surfacePositionController.js +196 -0
  220. package/menu/lib/surfacePositionController.js.map +1 -0
  221. package/menu/lib/typeaheadController.d.ts +144 -0
  222. package/menu/lib/typeaheadController.js +242 -0
  223. package/menu/lib/typeaheadController.js.map +1 -0
  224. package/menu/menu-item-link.d.ts +33 -0
  225. package/menu/menu-item-link.js +37 -0
  226. package/menu/menu-item-link.js.map +1 -0
  227. package/menu/menu-item.d.ts +19 -2
  228. package/menu/menu-item.js +22 -4
  229. package/menu/menu-item.js.map +1 -1
  230. package/menu/menu.d.ts +45 -0
  231. package/menu/menu.js +43 -0
  232. package/menu/menu.js.map +1 -1
  233. package/menu/sub-menu-item.d.ts +60 -0
  234. package/menu/sub-menu-item.js +64 -0
  235. package/menu/sub-menu-item.js.map +1 -0
  236. package/menusurface/lib/_menu-surface.scss +1 -1
  237. package/menusurface/lib/menu-surface-styles.css.js +1 -1
  238. package/menusurface/lib/menu-surface-styles.css.js.map +1 -1
  239. package/motion/animation.d.ts +20 -3
  240. package/motion/animation.js +39 -4
  241. package/motion/animation.js.map +1 -1
  242. package/navigationbar/lib/_navigation-bar.scss +9 -9
  243. package/navigationbar/lib/navigation-bar-styles.css.js +1 -1
  244. package/navigationbar/lib/navigation-bar-styles.css.js.map +1 -1
  245. package/navigationdrawer/lib/_navigation-drawer.scss +1 -1
  246. package/navigationdrawer/lib/navigation-drawer-styles.css.js +1 -1
  247. package/navigationdrawer/lib/navigation-drawer-styles.css.js.map +1 -1
  248. package/navigationtab/lib/_navigation-tab.scss +8 -19
  249. package/navigationtab/lib/navigation-tab-styles.css.js +1 -1
  250. package/navigationtab/lib/navigation-tab-styles.css.js.map +1 -1
  251. package/package.json +1 -8
  252. package/radio/lib/_radio.scss +21 -22
  253. package/radio/lib/radio-styles.css.js +1 -1
  254. package/radio/lib/radio-styles.css.js.map +1 -1
  255. package/radio/lib/radio.d.ts +10 -1
  256. package/radio/lib/radio.js +12 -3
  257. package/radio/lib/radio.js.map +1 -1
  258. package/radio/radio.d.ts +16 -1
  259. package/radio/radio.js +16 -1
  260. package/radio/radio.js.map +1 -1
  261. package/ripple/lib/_ripple.scss +5 -21
  262. package/ripple/lib/ripple-styles.css.js +1 -1
  263. package/ripple/lib/ripple-styles.css.js.map +1 -1
  264. package/ripple/lib/ripple.js +2 -2
  265. package/ripple/lib/ripple.js.map +1 -1
  266. package/sass/_map-ext.scss +24 -0
  267. package/sass/_string-ext.scss +23 -0
  268. package/segmentedbuttonset/lib/segmented-button-set.d.ts +0 -2
  269. package/segmentedbuttonset/lib/segmented-button-set.js +0 -2
  270. package/segmentedbuttonset/lib/segmented-button-set.js.map +1 -1
  271. package/switch/lib/_handle.scss +56 -9
  272. package/switch/lib/_icon.scss +36 -0
  273. package/switch/lib/_switch.scss +1 -115
  274. package/switch/lib/_track.scss +39 -0
  275. package/switch/lib/switch-styles.css.js +1 -1
  276. package/switch/lib/switch-styles.css.js.map +1 -1
  277. package/switch/lib/switch.d.ts +3 -0
  278. package/switch/lib/switch.js +3 -0
  279. package/switch/lib/switch.js.map +1 -1
  280. package/textfield/lib/_filled-text-field.scss +4 -2
  281. package/textfield/lib/_outlined-text-field.scss +3 -2
  282. package/textfield/lib/filled-styles.css.js +1 -1
  283. package/textfield/lib/filled-styles.css.js.map +1 -1
  284. package/textfield/lib/outlined-styles.css.js +1 -1
  285. package/textfield/lib/outlined-styles.css.js.map +1 -1
  286. package/textfield/lib/text-field.d.ts +0 -2
  287. package/textfield/lib/text-field.js +0 -2
  288. package/textfield/lib/text-field.js.map +1 -1
  289. package/tokens/_index.scss +1 -1
  290. package/tokens/{v0_150 → v0_152}/_index.scss +1 -1
  291. package/tokens/{v0_150 → v0_152}/_md-comp-assist-chip.scss +2 -2
  292. package/tokens/{v0_150 → v0_152}/_md-comp-badge.scss +2 -2
  293. package/tokens/{v0_150 → v0_152}/_md-comp-banner.scss +2 -43
  294. package/tokens/{v0_150 → v0_152}/_md-comp-bottom-app-bar.scss +3 -4
  295. package/tokens/{v0_150 → v0_152}/_md-comp-carousel-item.scss +2 -2
  296. package/tokens/{v0_150 → v0_152}/_md-comp-checkbox.scss +2 -12
  297. package/tokens/{v0_150 → v0_152}/_md-comp-circular-progress-indicator.scss +2 -2
  298. package/tokens/{v0_150 → v0_152}/_md-comp-data-table.scss +2 -4
  299. package/tokens/{v0_150 → v0_152}/_md-comp-date-input-modal.scss +2 -2
  300. package/tokens/{v0_150 → v0_152}/_md-comp-date-picker-docked.scss +2 -2
  301. package/tokens/{v0_150 → v0_152}/_md-comp-date-picker-modal.scss +2 -2
  302. package/tokens/{v0_150 → v0_152}/_md-comp-dialog.scss +2 -25
  303. package/tokens/{v0_150 → v0_152}/_md-comp-divider.scss +2 -2
  304. package/tokens/{v0_150 → v0_152}/_md-comp-elevated-button.scss +2 -2
  305. package/tokens/{v0_150 → v0_152}/_md-comp-elevated-card.scss +2 -2
  306. package/tokens/{v0_150 → v0_152}/_md-comp-extended-fab-branded.scss +2 -2
  307. package/tokens/{v0_150 → v0_152}/_md-comp-extended-fab-primary.scss +2 -2
  308. package/tokens/{v0_150 → v0_152}/_md-comp-extended-fab-secondary.scss +2 -2
  309. package/tokens/{v0_150 → v0_152}/_md-comp-extended-fab-surface.scss +2 -2
  310. package/tokens/{v0_150 → v0_152}/_md-comp-extended-fab-tertiary.scss +2 -4
  311. package/tokens/{v0_150 → v0_152}/_md-comp-fab-branded-large.scss +2 -3
  312. package/tokens/{v0_150 → v0_152}/_md-comp-fab-branded.scss +2 -2
  313. package/tokens/{v0_150 → v0_152}/_md-comp-fab-primary-large.scss +2 -2
  314. package/tokens/{v0_150 → v0_152}/_md-comp-fab-primary-small.scss +2 -2
  315. package/tokens/{v0_150 → v0_152}/_md-comp-fab-primary.scss +2 -2
  316. package/tokens/{v0_150 → v0_152}/_md-comp-fab-secondary-large.scss +2 -2
  317. package/tokens/{v0_150 → v0_152}/_md-comp-fab-secondary-small.scss +2 -2
  318. package/tokens/{v0_150 → v0_152}/_md-comp-fab-secondary.scss +2 -2
  319. package/tokens/{v0_150 → v0_152}/_md-comp-fab-surface-large.scss +2 -2
  320. package/tokens/{v0_150 → v0_152}/_md-comp-fab-surface-small.scss +2 -2
  321. package/tokens/{v0_150 → v0_152}/_md-comp-fab-surface.scss +2 -2
  322. package/tokens/{v0_150 → v0_152}/_md-comp-fab-tertiary-large.scss +2 -2
  323. package/tokens/{v0_150 → v0_152}/_md-comp-fab-tertiary-small.scss +2 -2
  324. package/tokens/{v0_150 → v0_152}/_md-comp-fab-tertiary.scss +2 -2
  325. package/tokens/{v0_150 → v0_152}/_md-comp-filled-autocomplete.scss +2 -3
  326. package/tokens/{v0_150 → v0_152}/_md-comp-filled-button.scss +2 -8
  327. package/tokens/{v0_150 → v0_152}/_md-comp-filled-card.scss +2 -4
  328. package/tokens/{v0_150 → v0_152}/_md-comp-filled-icon-button.scss +2 -2
  329. package/tokens/{v0_150 → v0_152}/_md-comp-filled-menu-button.scss +2 -2
  330. package/tokens/{v0_150 → v0_152}/_md-comp-filled-select.scss +2 -6
  331. package/tokens/{v0_150 → v0_152}/_md-comp-filled-text-field.scss +2 -3
  332. package/tokens/{v0_150 → v0_152}/_md-comp-filled-tonal-button.scss +2 -2
  333. package/tokens/{v0_150 → v0_152}/_md-comp-filled-tonal-icon-button.scss +2 -2
  334. package/tokens/{v0_150 → v0_152}/_md-comp-filter-chip.scss +2 -30
  335. package/tokens/{v0_150 → v0_152}/_md-comp-full-screen-dialog.scss +3 -53
  336. package/tokens/{v0_150 → v0_152}/_md-comp-icon-button.scss +3 -3
  337. package/tokens/{v0_150 → v0_152}/_md-comp-input-chip.scss +2 -52
  338. package/tokens/{v0_150 → v0_152}/_md-comp-linear-progress-indicator.scss +2 -2
  339. package/tokens/{v0_150 → v0_152}/_md-comp-list.scss +3 -12
  340. package/tokens/{v0_150 → v0_152}/_md-comp-menu.scss +2 -4
  341. package/tokens/{v0_150 → v0_152}/_md-comp-navigation-bar.scss +2 -9
  342. package/tokens/{v0_150 → v0_152}/_md-comp-navigation-drawer.scss +2 -8
  343. package/tokens/{v0_150 → v0_152}/_md-comp-navigation-rail.scss +2 -39
  344. package/tokens/{v0_150 → v0_152}/_md-comp-outlined-autocomplete.scss +2 -3
  345. package/tokens/{v0_150 → v0_152}/_md-comp-outlined-button.scss +2 -6
  346. package/tokens/{v0_150 → v0_152}/_md-comp-outlined-card.scss +2 -2
  347. package/tokens/{v0_150 → v0_152}/_md-comp-outlined-icon-button.scss +2 -4
  348. package/tokens/{v0_150 → v0_152}/_md-comp-outlined-menu-button.scss +2 -2
  349. package/tokens/{v0_150 → v0_152}/_md-comp-outlined-segmented-button.scss +2 -2
  350. package/tokens/{v0_150 → v0_152}/_md-comp-outlined-select.scss +2 -6
  351. package/tokens/{v0_150 → v0_152}/_md-comp-outlined-text-field.scss +2 -3
  352. package/tokens/{v0_150 → v0_152}/_md-comp-plain-tooltip.scss +2 -2
  353. package/tokens/{v0_150 → v0_152}/_md-comp-primary-navigation-tab.scss +2 -2
  354. package/tokens/{v0_150 → v0_152}/_md-comp-radio-button.scss +2 -2
  355. package/tokens/{v0_150 → v0_152}/_md-comp-rich-tooltip.scss +2 -2
  356. package/tokens/{v0_150 → v0_152}/_md-comp-scrim.scss +2 -2
  357. package/tokens/{v0_150 → v0_152}/_md-comp-search-bar.scss +2 -2
  358. package/tokens/{v0_150 → v0_152}/_md-comp-search-view.scss +2 -2
  359. package/tokens/{v0_150 → v0_152}/_md-comp-secondary-navigation-tab.scss +2 -2
  360. package/tokens/{v0_150 → v0_152}/_md-comp-sheet-bottom.scss +2 -2
  361. package/tokens/{v0_150 → v0_152}/_md-comp-sheet-floating.scss +2 -2
  362. package/tokens/{v0_150 → v0_152}/_md-comp-sheet-side.scss +4 -2
  363. package/tokens/{v0_150 → v0_152}/_md-comp-slider.scss +2 -4
  364. package/tokens/{v0_150 → v0_152}/_md-comp-snackbar.scss +2 -2
  365. package/tokens/{v0_150 → v0_152}/_md-comp-standard-menu-button.scss +2 -2
  366. package/tokens/{v0_150 → v0_152}/_md-comp-suggestion-chip.scss +2 -2
  367. package/tokens/{v0_150 → v0_152}/_md-comp-switch.scss +2 -11
  368. package/tokens/{v0_150 → v0_152}/_md-comp-text-button.scss +2 -6
  369. package/tokens/{v0_150 → v0_152}/_md-comp-time-input.scss +2 -2
  370. package/tokens/{v0_150 → v0_152}/_md-comp-time-picker.scss +2 -5
  371. package/tokens/{v0_150 → v0_152}/_md-comp-top-app-bar-large.scss +2 -2
  372. package/tokens/{v0_150 → v0_152}/_md-comp-top-app-bar-medium.scss +2 -2
  373. package/tokens/{v0_150 → v0_152}/_md-comp-top-app-bar-small-centered.scss +2 -3
  374. package/tokens/{v0_150 → v0_152}/_md-comp-top-app-bar-small.scss +2 -3
  375. package/tokens/{v0_150 → v0_152}/_md-ref-palette.scss +2 -2
  376. package/tokens/{v0_150 → v0_152}/_md-ref-typeface.scss +2 -2
  377. package/tokens/{v0_150 → v0_152}/_md-sys-color.scss +2 -20
  378. package/tokens/{v0_150 → v0_152}/_md-sys-elevation.scss +4 -13
  379. package/tokens/{v0_150 → v0_152}/_md-sys-motion.scss +2 -2
  380. package/tokens/{v0_150 → v0_152}/_md-sys-shape.scss +2 -2
  381. package/tokens/{v0_150 → v0_152}/_md-sys-state.scss +2 -2
  382. package/tokens/{v0_150 → v0_152}/_md-sys-typescale.scss +2 -3
  383. package/tokens/v0_152/index.test.css.d.ts +1 -0
  384. package/tokens/{v0_150 → v0_152}/index.test.css.js +0 -0
  385. package/tokens/{v0_150 → v0_152}/index.test.css.js.map +0 -0
  386. package/tokens/{v0_150 → v0_152}/index.test.scss +1 -1
  387. package/tokens/v0_152/lib.test.css.d.ts +1 -0
  388. package/tokens/{v0_150 → v0_152}/lib.test.css.js +0 -0
  389. package/tokens/{v0_150 → v0_152}/lib.test.css.js.map +0 -0
  390. package/tokens/{v0_150 → v0_152}/lib.test.scss +1 -1
  391. package/CHANGELOG.md +0 -141
  392. package/elevationold/lib/elevation-overlay-styles.css.js +0 -9
  393. package/elevationold/lib/elevation-overlay-styles.css.js.map +0 -1
  394. package/list/lib/_tokens.scss +0 -80
  395. package/list/lib/divider/_list-divider.scss +0 -46
  396. package/list/lib/divider/list-divider-styles.css.js +0 -9
  397. package/list/lib/divider/list-divider-styles.css.js.map +0 -1
  398. package/list/lib/divider/list-divider-styles.scss +0 -8
  399. package/list/lib/divider/list-divider.d.ts +0 -13
  400. package/list/lib/divider/list-divider.js +0 -32
  401. package/list/lib/divider/list-divider.js.map +0 -1
  402. package/list/list-divider.d.ts +0 -19
  403. package/list/list-divider.js +0 -22
  404. package/list/list-divider.js.map +0 -1
  405. package/menu/lib/_menu-button.scss +0 -14
  406. package/menu/lib/adapter.d.ts +0 -66
  407. package/menu/lib/adapter.js +0 -7
  408. package/menu/lib/adapter.js.map +0 -1
  409. package/menu/lib/constants.d.ts +0 -22
  410. package/menu/lib/constants.js +0 -23
  411. package/menu/lib/constants.js.map +0 -1
  412. package/menu/lib/foundation.d.ts +0 -49
  413. package/menu/lib/foundation.js +0 -123
  414. package/menu/lib/foundation.js.map +0 -1
  415. package/menu/lib/menu-button-styles.css.js +0 -9
  416. package/menu/lib/menu-button-styles.css.js.map +0 -1
  417. package/menu/lib/menu-button-styles.scss +0 -8
  418. package/menu/lib/menu-button.d.ts +0 -27
  419. package/menu/lib/menu-button.js +0 -93
  420. package/menu/lib/menu-button.js.map +0 -1
  421. package/menu/menu-button.d.ts +0 -14
  422. package/menu/menu-button.js +0 -17
  423. package/menu/menu-button.js.map +0 -1
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, 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);--_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, 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);--_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 */
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, 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);--_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, 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);--_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 "]}
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}.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);padding-top:var(--_container-padding-vertical);padding-bottom:var(--_container-padding-vertical);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 */
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}.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);padding-top:var(--_container-padding-vertical);padding-bottom:var(--_container-padding-vertical);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 "]}
package/focus/lib/_focus-ring.scss CHANGED
@@ -3,9 +3,6 @@
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
-
9
6
  @use 'sass:map';
10
7
  @use '../../sass/theme';
11
8
  @use '../../sass/shape';
@@ -32,13 +29,10 @@ $_custom-property-prefix: 'focus-ring';
32
29
  --_#{$token}: #{$value};
33
30
  }
34
31
 
35
- pointer-events: none;
36
- }
37
-
38
- .md3-focus-ring {
39
32
  display: none;
40
33
  position: absolute;
41
34
  box-sizing: border-box;
35
+ pointer-events: none;
42
36
  border: var(--_width) solid var(--_color);
43
37
  border-start-start-radius: var(--_shape-start-start);
44
38
  border-start-end-radius: var(--_shape-start-end);
@@ -49,12 +43,11 @@ $_custom-property-prefix: 'focus-ring';
49
43
  // and touch target.
50
44
  $vertical-inset: calc(-1 * (var(--_offset-vertical) + var(--_width)));
51
45
  $horizontal-inset: calc(-1 * (var(--_offset-horizontal) + var(--_width)));
52
-
53
46
  inset: $vertical-inset $horizontal-inset;
54
47
  }
55
48
 
56
- .md3-focus-ring--visible {
57
- display: block;
49
+ :host([visible]) {
50
+ display: flex;
58
51
  }
59
52
  }
60
53
 
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, 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));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, 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));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.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
package/focus/lib/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,IAAI,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AACrD,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAY,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAEhE;;;;;;;;;;;;GAYG;AACH,MAAM,OAAO,SAAU,SAAQ,UAAU;IAAzC;;QACE;;WAEG;QACwB,YAAO,GAAG,KAAK,CAAC;IAY7C,CAAC;IAVoB,MAAM;QACvB,OAAO,IAAI,CAAA,+BACP,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,WAAW,CAAC;IACnD,CAAC;IAES,gBAAgB;QACxB,OAAO;YACL,yBAAyB,EAAE,IAAI,CAAC,OAAO;SACxC,CAAC;IACJ,CAAC;CACF;AAZ4B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;;0CAAiB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\n\n/**\n * @summary An accessible, themable ring designed to be shown on\n * `:focus-visible`.\n *\n * @description\n * An accessible, themable ring designed to be shown on focus-visible.\n * Focus ring is designed to be controlled by the `strong-focus` module in the\n * same package.\n *\n * In most cases, `visible` should be set to\n * `shouldShowStrongFocus()` on `focus` and `pointerdown` (see `pointerPress()`\n * documentation in the `strong-focus` module), and `false` on `blur`.\n */\nexport class FocusRing extends LitElement {\n /**\n * Makes the focus ring visible.\n */\n @property({type: Boolean}) visible = false;\n\n protected override render(): TemplateResult {\n return html`<span class=\"md3-focus-ring ${\n classMap(this.getRenderClasses())}\"></span>`;\n }\n\n protected getRenderClasses(): ClassInfo {\n return {\n 'md3-focus-ring--visible': this.visible,\n };\n }\n}\n"]}
1
+ {"version":3,"file":"focus-ring.js","sourceRoot":"","sources":["focus-ring.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,UAAU,EAAC,MAAM,KAAK,CAAC;AAC/B,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE3C;;;;;;;;;;;;GAYG;AACH,MAAM,OAAO,SAAU,SAAQ,UAAU;IAAzC;;QACE;;WAEG;QACuC,YAAO,GAAG,KAAK,CAAC;IAC5D,CAAC;CAAA;AAD2C;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;;0CAAiB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {LitElement} from 'lit';\nimport {property} from 'lit/decorators.js';\n\n/**\n * @summary An accessible, themable ring designed to be shown on\n * `:focus-visible`.\n *\n * @description\n * An accessible, themable ring designed to be shown on focus-visible.\n * Focus ring is designed to be controlled by the `strong-focus` module in the\n * same package.\n *\n * In most cases, `visible` should be set to\n * `shouldShowStrongFocus()` on `focus` and `pointerdown` (see `pointerPress()`\n * documentation in the `strong-focus` module), and `false` on `blur`.\n */\nexport class FocusRing extends LitElement {\n /**\n * Makes the focus ring visible.\n */\n @property({type: Boolean, reflect: true}) visible = false;\n}\n"]}
package/icon/lib/_icon.scss CHANGED
@@ -36,7 +36,6 @@ $_custom-property-prefix: 'icon';
36
36
  text-transform: none;
37
37
  white-space: nowrap;
38
38
  word-wrap: normal;
39
- direction: ltr;
40
39
 
41
40
  /* Support for all WebKit browsers. */
42
41
  -webkit-font-smoothing: antialiased;
@@ -46,9 +45,13 @@ $_custom-property-prefix: 'icon';
46
45
  -moz-osx-font-smoothing: grayscale;
47
46
  }
48
47
 
49
- span ::slotted(svg) {
50
- fill: currentColor;
51
- height: var(--_size);
52
- width: var(--_size);
48
+ span {
49
+ ::slotted(svg) {
50
+ fill: currentColor;
51
+ }
52
+ ::slotted(*) {
53
+ height: var(--_size);
54
+ width: var(--_size);
55
+ }
53
56
  }
54
57
  }
package/icon/lib/icon-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{--_color: var(--md-icon-color, inherit);--_font: var(--md-icon-font, "Material Icons");--_font-variation-settings: var(--md-icon-font-variation-settings, inherit);--_size: var(--md-icon-size, 24px);--_weight: var(--md-icon-weight, 400);display:inline-flex;color:var(--_color);font-family:var(--_font);font-weight:var(--_weight);font-style:normal;font-size:var(--_size);font-variation-settings:var(--_font-varation-settings);line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}span ::slotted(svg){fill:currentColor;height:var(--_size);width:var(--_size)}/*# sourceMappingURL=icon-styles.css.map */
7
+ export const styles = css `:host{--_color: var(--md-icon-color, inherit);--_font: var(--md-icon-font, "Material Icons");--_font-variation-settings: var(--md-icon-font-variation-settings, inherit);--_size: var(--md-icon-size, 24px);--_weight: var(--md-icon-weight, 400);display:inline-flex;color:var(--_color);font-family:var(--_font);font-weight:var(--_weight);font-style:normal;font-size:var(--_size);font-variation-settings:var(--_font-varation-settings);line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}span ::slotted(svg){fill:currentColor}span ::slotted(*){height:var(--_size);width:var(--_size)}/*# sourceMappingURL=icon-styles.css.map */
8
8
  `;
9
9
  //# sourceMappingURL=icon-styles.css.js.map
package/icon/lib/icon-styles.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"icon-styles.css.js","sourceRoot":"","sources":["icon-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{--_color: var(--md-icon-color, inherit);--_font: var(--md-icon-font, \"Material Icons\");--_font-variation-settings: var(--md-icon-font-variation-settings, inherit);--_size: var(--md-icon-size, 24px);--_weight: var(--md-icon-weight, 400);display:inline-flex;color:var(--_color);font-family:var(--_font);font-weight:var(--_weight);font-style:normal;font-size:var(--_size);font-variation-settings:var(--_font-varation-settings);line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}span ::slotted(svg){fill:currentColor;height:var(--_size);width:var(--_size)}/*# sourceMappingURL=icon-styles.css.map */\n`;\n "]}
1
+ {"version":3,"file":"icon-styles.css.js","sourceRoot":"","sources":["icon-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{--_color: var(--md-icon-color, inherit);--_font: var(--md-icon-font, \"Material Icons\");--_font-variation-settings: var(--md-icon-font-variation-settings, inherit);--_size: var(--md-icon-size, 24px);--_weight: var(--md-icon-weight, 400);display:inline-flex;color:var(--_color);font-family:var(--_font);font-weight:var(--_weight);font-style:normal;font-size:var(--_size);font-variation-settings:var(--_font-varation-settings);line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}span ::slotted(svg){fill:currentColor}span ::slotted(*){height:var(--_size);width:var(--_size)}/*# sourceMappingURL=icon-styles.css.map */\n`;\n "]}
package/iconbutton/lib/_filled-icon-button.scss CHANGED
@@ -113,7 +113,7 @@ $_custom-property-prefix: 'filled-icon-button';
113
113
  );
114
114
  }
115
115
 
116
- .md3-icon-button--on {
116
+ .md3-icon-button--selected {
117
117
  &:not(:disabled) {
118
118
  background-color: var(--_selected-container-color);
119
119
  color: var(--_toggle-selected-icon-color);
package/iconbutton/lib/_filled-tonal-icon-button.scss CHANGED
@@ -113,7 +113,7 @@ $_custom-property-prefix: 'filled-tonal-icon-button';
113
113
  );
114
114
  }
115
115
 
116
- .md3-icon-button--on {
116
+ .md3-icon-button--selected {
117
117
  &:not(:disabled) {
118
118
  background-color: var(--_selected-container-color);
119
119
  color: var(--_toggle-selected-icon-color);
package/iconbutton/lib/_outlined-icon-button.scss CHANGED
@@ -18,16 +18,10 @@
18
18
  $_custom-property-prefix: 'outlined-icon-button';
19
19
 
20
20
  @mixin theme($tokens) {
21
- // TODO(b/233323674): Remove when missing tokens have been added.
22
- $reference: map.merge(
21
+ $tokens: theme.validate-theme(
23
22
  tokens.md-comp-outlined-icon-button-values(),
24
- (
25
- disabled-selected-container-color:
26
- map.get(tokens.md-sys-color-values-light(), on-surface),
27
- disabled-selected-container-opacity: 0.12,
28
- )
23
+ $tokens
29
24
  );
30
- $tokens: theme.validate-theme($reference, $tokens);
31
25
  $tokens: shared.flatten-disabled-colors($tokens, $variant: 'outlined');
32
26
  $tokens: shared.resolve-shape-tokens($tokens);
33
27
  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
@@ -37,15 +31,6 @@ $_custom-property-prefix: 'outlined-icon-button';
37
31
 
38
32
  @mixin styles() {
39
33
  $tokens: tokens.md-comp-outlined-icon-button-values();
40
- // TODO(b/233323674): Remove when missing tokens have been added.
41
- $tokens: map.merge(
42
- $tokens,
43
- (
44
- disabled-selected-container-color:
45
- map.get(tokens.md-sys-color-values-light(), on-surface),
46
- disabled-selected-container-opacity: 0.12,
47
- )
48
- );
49
34
  $tokens: shared.flatten-disabled-colors($tokens, $variant: 'outlined');
50
35
  $tokens: shared.resolve-shape-tokens($tokens);
51
36
  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
@@ -103,7 +88,8 @@ $_custom-property-prefix: 'outlined-icon-button';
103
88
  color: var(--_disabled-icon-color);
104
89
 
105
90
  &::before {
106
- border-color: var(--_disabled-outline-color);
91
+ border-color: var(--_disabled-unselected-outline-color);
92
+ opacity: var(--_disabled-unselected-outline-opacity);
107
93
  }
108
94
  }
109
95
  }
@@ -121,12 +107,12 @@ $_custom-property-prefix: 'outlined-icon-button';
121
107
  }
122
108
 
123
109
  // Selected toggle buttons have no outline.
124
- .md3-icon-button--outlined.md3-icon-button--on::before {
110
+ .md3-icon-button--outlined.md3-icon-button--selected::before {
125
111
  border-width: 0;
126
112
  }
127
113
 
128
114
  // Selected icon button toggle.
129
- .md3-icon-button--on {
115
+ .md3-icon-button--selected {
130
116
  &:not(:disabled) {
131
117
  background-color: var(--_selected-container-color);
132
118
  color: var(--_selected-icon-color);
@@ -162,14 +148,15 @@ $_custom-property-prefix: 'outlined-icon-button';
162
148
 
163
149
  @media (forced-colors: active) {
164
150
  // Selected button in HCM has an outline.
165
- .md3-icon-button--on {
151
+ .md3-icon-button--selected {
166
152
  &::before {
167
153
  border-color: var(--_unselected-outline-color);
168
154
  border-width: var(--_unselected-outline-width);
169
155
  }
170
156
 
171
157
  &:disabled::before {
172
- border-color: var(--_disabled-outline-color);
158
+ border-color: var(--_disabled-unselected-outline-color);
159
+ opacity: var(--_disabled-unselected-outline-opacity);
173
160
  }
174
161
  }
175
162
  }
package/iconbutton/lib/_shared.scss CHANGED
@@ -15,12 +15,17 @@
15
15
  @use '../../sass/shape';
16
16
  @use '../../sass/resolvers';
17
17
  @use '../../tokens';
18
+ @use '../../icon/icon';
18
19
 
19
20
  @mixin styles() {
20
21
  :host {
21
22
  display: inline-flex;
22
23
  outline: none;
23
24
  -webkit-tap-highlight-color: transparent;
25
+ height: max(48px, var(--_container-size));
26
+ width: max(48px, var(--_container-size));
27
+ align-items: center;
28
+ justify-content: center;
24
29
  }
25
30
 
26
31
  :host([disabled]) {
@@ -28,14 +33,11 @@
28
33
  }
29
34
 
30
35
  .md3-icon-button {
31
- $touch-target-height: 48px;
32
-
33
36
  align-items: center;
34
37
  border: none;
35
38
  box-sizing: border-box;
36
39
  cursor: pointer;
37
40
  display: flex;
38
- fill: currentColor;
39
41
  justify-content: center;
40
42
  outline: none;
41
43
  position: relative;
@@ -44,29 +46,19 @@
44
46
  z-index: 0;
45
47
  height: var(--_container-size);
46
48
  width: var(--_container-size);
47
- font-size: var(--_icon-size);
48
- margin: max(
49
- 0px,
50
- calc((#{$touch-target-height} - var(--_container-size)) / 2)
51
- );
52
49
  border-start-start-radius: var(--_container-shape-start-start);
53
50
  border-start-end-radius: var(--_container-shape-start-end);
54
51
  border-end-start-radius: var(--_container-shape-end-start);
55
52
  border-end-end-radius: var(--_container-shape-end-end);
53
+ }
56
54
 
57
- i,
58
- svg,
59
- img {
60
- height: var(--_icon-size);
61
- width: var(--_icon-size);
62
- }
63
-
64
- i,
65
- svg,
66
- img,
67
- ::slotted(*) {
68
- display: block;
69
- }
55
+ .md3-icon-button__icon {
56
+ @include icon.theme(
57
+ (
58
+ size: var(--_icon-size),
59
+ weight: inherit,
60
+ )
61
+ );
70
62
  }
71
63
 
72
64
  md-ripple {
@@ -84,20 +76,6 @@
84
76
 
85
77
  .md3-icon-button__icon {
86
78
  display: inline-flex;
87
-
88
- &.md3-icon-button__icon--on {
89
- display: none;
90
- }
91
- }
92
-
93
- .md3-icon-button--on {
94
- .md3-icon-button__icon {
95
- display: none;
96
-
97
- &.md3-icon-button__icon--on {
98
- display: inline-flex;
99
- }
100
- }
101
79
  }
102
80
 
103
81
  .md3-icon-button__link {
@@ -123,7 +101,7 @@
123
101
  // Otherwise, the color is not flattened, meaning that the color would
124
102
  // be applied without any opacity, which is incorrect.
125
103
  $opacity-keys: [ 'disabled-container-opacity', 'disabled-icon-opacity',
126
- 'disabled-outline-opacity', 'disabled-selected-container-opacity' ];
104
+ 'disabled-selected-container-opacity' ];
127
105
 
128
106
  @each $opacity-key in $opacity-keys {
129
107
  // If opacity value is null, use the opacity value from the default tokens.
@@ -166,10 +144,6 @@
166
144
  opacity-key: 'disabled-container-opacity'
167
145
  ),
168
146
  (color-key: 'disabled-icon-color', opacity-key: 'disabled-icon-opacity'),
169
- (
170
- color-key: 'disabled-outline-color',
171
- opacity-key: 'disabled-outline-opacity'
172
- ),
173
147
  (
174
148
  color-key: 'disabled-selected-container-color',
175
149
  opacity-key: 'disabled-selected-container-opacity'
package/iconbutton/lib/_standard-icon-button.scss CHANGED
@@ -35,6 +35,9 @@ $_custom-property-prefix: 'icon-button';
35
35
  --_#{$token}: #{$value};
36
36
  }
37
37
 
38
+ height: max(48px, var(--_state-layer-size));
39
+ width: max(48px, var(--_state-layer-size));
40
+
38
41
  @include focus-ring.theme(
39
42
  (
40
43
  shape: (
@@ -48,15 +51,10 @@ $_custom-property-prefix: 'icon-button';
48
51
  }
49
52
 
50
53
  .md3-icon-button--standard {
51
- $touch-target-height: 48px;
52
54
  background-color: transparent;
53
55
  color: var(--_unselected-icon-color);
54
56
  height: var(--_state-layer-size);
55
57
  width: var(--_state-layer-size);
56
- margin: max(
57
- 0px,
58
- calc((#{$touch-target-height} - #{var(--_state-layer-size)}) / 2)
59
- );
60
58
 
61
59
  @include ripple.theme(
62
60
  (
@@ -67,6 +65,8 @@ $_custom-property-prefix: 'icon-button';
67
65
  pressed-state-layer-color: var(--_unselected-pressed-state-layer-color),
68
66
  pressed-state-layer-opacity:
69
67
  var(--_unselected-pressed-state-layer-opacity),
68
+ // TODO(b/263517885): replace with ripple.theme(state-layer-shape)
69
+ state-layer-shape: var(--_state-layer-shape-start-start),
70
70
  )
71
71
  );
72
72
 
@@ -87,7 +87,7 @@ $_custom-property-prefix: 'icon-button';
87
87
  }
88
88
  }
89
89
 
90
- .md3-icon-button--on {
90
+ .md3-icon-button--selected {
91
91
  &:not(:disabled) {
92
92
  color: var(--_selected-icon-color);
93
93
 
@@ -116,12 +116,4 @@ $_custom-property-prefix: 'icon-button';
116
116
  )
117
117
  );
118
118
  }
119
-
120
- md-ripple {
121
- // TODO(b/263517885): replace with ripple.theme(state-layer-shape)
122
- border-start-start-radius: var(--_state-layer-shape-start-start);
123
- border-start-end-radius: var(--_state-layer-shape-start-end);
124
- border-end-start-radius: var(--_state-layer-shape-end-start);
125
- border-end-end-radius: var(--_state-layer-shape-end-end);
126
- }
127
119
  }