@material/web 0.1.0-alpha.1 → 1.0.0-pre.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (247) hide show
  1. package/CHANGELOG.md +141 -0
  2. package/autocomplete/lib/_filled-autocomplete.scss +3 -4
  3. package/autocomplete/lib/_outlined-autocomplete.scss +3 -3
  4. package/autocomplete/lib/_shared.scss +2 -7
  5. package/autocomplete/lib/filled-styles.css.js +1 -1
  6. package/autocomplete/lib/filled-styles.css.js.map +1 -1
  7. package/autocomplete/lib/outlined-styles.css.js +1 -1
  8. package/autocomplete/lib/outlined-styles.css.js.map +1 -1
  9. package/button/lib/_elevated-button.scss +6 -0
  10. package/button/lib/_elevation.scss +30 -28
  11. package/button/lib/_filled-button.scss +6 -0
  12. package/button/lib/_outlined-button.scss +10 -1
  13. package/button/lib/_shared.scss +18 -8
  14. package/button/lib/_text-button.scss +6 -0
  15. package/button/lib/_tonal-button.scss +6 -0
  16. package/button/lib/elevated-styles.css.js +1 -1
  17. package/button/lib/elevated-styles.css.js.map +1 -1
  18. package/button/lib/filled-styles.css.js +1 -1
  19. package/button/lib/filled-styles.css.js.map +1 -1
  20. package/button/lib/outlined-styles.css.js +1 -1
  21. package/button/lib/outlined-styles.css.js.map +1 -1
  22. package/button/lib/shared-elevation-styles.css.js +1 -1
  23. package/button/lib/shared-elevation-styles.css.js.map +1 -1
  24. package/button/lib/shared-styles.css.js +1 -1
  25. package/button/lib/shared-styles.css.js.map +1 -1
  26. package/button/lib/text-styles.css.js +1 -1
  27. package/button/lib/text-styles.css.js.map +1 -1
  28. package/button/lib/tonal-styles.css.js +1 -1
  29. package/button/lib/tonal-styles.css.js.map +1 -1
  30. package/checkbox/lib/_checkbox.scss +5 -1
  31. package/checkbox/lib/checkbox-styles.css.js +1 -1
  32. package/checkbox/lib/checkbox-styles.css.js.map +1 -1
  33. package/chips/chip/lib/_chip-theme.scss +29 -33
  34. package/chips/chip/lib/_chip.scss +2 -4
  35. package/chips/chip/lib/_input-chip-theme.scss +16 -26
  36. package/chips/chip/lib/chip.d.ts +1 -0
  37. package/chips/chip/lib/chip.js +2 -1
  38. package/chips/chip/lib/chip.js.map +1 -1
  39. package/fab/fab-extended.js +1 -2
  40. package/fab/fab-extended.js.map +1 -1
  41. package/fab/fab.js +1 -2
  42. package/fab/fab.js.map +1 -1
  43. package/fab/lib/_shared.scss +13 -11
  44. package/fab/lib/fab-shared-styles.css.js +1 -1
  45. package/fab/lib/fab-shared-styles.css.js.map +1 -1
  46. package/field/lib/filled-styles.css.js +1 -1
  47. package/field/lib/filled-styles.css.js.map +1 -1
  48. package/iconbutton/lib/_filled-icon-button.scss +18 -4
  49. package/iconbutton/lib/_filled-tonal-icon-button.scss +18 -4
  50. package/iconbutton/lib/_outlined-icon-button.scss +17 -3
  51. package/iconbutton/lib/_shared.scss +20 -1
  52. package/iconbutton/lib/_standard-icon-button.scss +25 -3
  53. package/iconbutton/lib/filled-styles.css.js +1 -1
  54. package/iconbutton/lib/filled-styles.css.js.map +1 -1
  55. package/iconbutton/lib/filled-tonal-styles.css.js +1 -1
  56. package/iconbutton/lib/filled-tonal-styles.css.js.map +1 -1
  57. package/iconbutton/lib/icon-button-toggle.js +1 -1
  58. package/iconbutton/lib/icon-button-toggle.js.map +1 -1
  59. package/iconbutton/lib/icon-button.js +1 -1
  60. package/iconbutton/lib/icon-button.js.map +1 -1
  61. package/iconbutton/lib/outlined-styles.css.js +1 -1
  62. package/iconbutton/lib/outlined-styles.css.js.map +1 -1
  63. package/iconbutton/lib/shared-styles.css.js +1 -1
  64. package/iconbutton/lib/shared-styles.css.js.map +1 -1
  65. package/iconbutton/lib/standard-styles.css.js +1 -1
  66. package/iconbutton/lib/standard-styles.css.js.map +1 -1
  67. package/list/lib/_list.scss +20 -14
  68. package/list/lib/divider/list-divider.js +2 -0
  69. package/list/lib/divider/list-divider.js.map +1 -1
  70. package/list/lib/list-styles.css.js +1 -1
  71. package/list/lib/list-styles.css.js.map +1 -1
  72. package/list/lib/list.d.ts +1 -0
  73. package/list/lib/list.js +4 -1
  74. package/list/lib/list.js.map +1 -1
  75. package/list/lib/listitem/list-item.js +2 -0
  76. package/list/lib/listitem/list-item.js.map +1 -1
  77. package/menu/lib/_menu.scss +7 -10
  78. package/menu/lib/menu-styles.css.js +1 -1
  79. package/menu/lib/menu-styles.css.js.map +1 -1
  80. package/menusurface/lib/_md-comp-menu-surface.scss +6 -14
  81. package/menusurface/lib/_menu-surface.scss +8 -4
  82. package/menusurface/lib/menu-surface-styles.css.js +1 -1
  83. package/menusurface/lib/menu-surface-styles.css.js.map +1 -1
  84. package/menusurface/lib/menu-surface.d.ts +1 -0
  85. package/menusurface/lib/menu-surface.js +2 -0
  86. package/menusurface/lib/menu-surface.js.map +1 -1
  87. package/navigationdrawer/lib/_navigation-drawer-modal.scss +7 -22
  88. package/navigationdrawer/lib/_navigation-drawer.scss +15 -18
  89. package/navigationdrawer/lib/_shared.scss +2 -7
  90. package/navigationdrawer/lib/navigation-drawer-modal-styles.css.js +1 -1
  91. package/navigationdrawer/lib/navigation-drawer-modal-styles.css.js.map +1 -1
  92. package/navigationdrawer/lib/navigation-drawer-styles.css.js +1 -1
  93. package/navigationdrawer/lib/navigation-drawer-styles.css.js.map +1 -1
  94. package/navigationdrawer/lib/navigation-drawer.d.ts +1 -0
  95. package/navigationdrawer/lib/navigation-drawer.js +3 -2
  96. package/navigationdrawer/lib/navigation-drawer.js.map +1 -1
  97. package/navigationtab/lib/_navigation-tab.scss +3 -3
  98. package/package.json +8 -1
  99. package/radio/_radio.scss +6 -1
  100. package/radio/lib/_radio.scss +128 -92
  101. package/radio/lib/forced-colors-styles.css.d.ts +1 -0
  102. package/radio/lib/forced-colors-styles.css.js +9 -0
  103. package/radio/lib/forced-colors-styles.css.js.map +1 -0
  104. package/radio/lib/forced-colors-styles.scss +27 -0
  105. package/radio/lib/radio-styles.css.js +1 -1
  106. package/radio/lib/radio-styles.css.js.map +1 -1
  107. package/radio/lib/radio-styles.scss +1 -7
  108. package/radio/lib/radio.d.ts +30 -69
  109. package/radio/lib/radio.js +104 -235
  110. package/radio/lib/radio.js.map +1 -1
  111. package/radio/lib/single-selection-controller.d.ts +51 -138
  112. package/radio/lib/single-selection-controller.js +153 -249
  113. package/radio/lib/single-selection-controller.js.map +1 -1
  114. package/radio/radio.js +2 -1
  115. package/radio/radio.js.map +1 -1
  116. package/ripple/lib/_ripple.scss +21 -4
  117. package/ripple/lib/ripple-styles.css.js +1 -1
  118. package/ripple/lib/ripple-styles.css.js.map +1 -1
  119. package/ripple/lib/ripple.js +4 -1
  120. package/ripple/lib/ripple.js.map +1 -1
  121. package/segmentedbutton/lib/_shared.scss +3 -3
  122. package/switch/lib/_handle.scss +4 -3
  123. package/switch/lib/switch-styles.css.js +1 -1
  124. package/switch/lib/switch-styles.css.js.map +1 -1
  125. package/switch/lib/switch.d.ts +17 -21
  126. package/switch/lib/switch.js +54 -57
  127. package/switch/lib/switch.js.map +1 -1
  128. package/textfield/filled-text-field.d.ts +1 -0
  129. package/textfield/filled-text-field.js.map +1 -1
  130. package/textfield/lib/_shared.scss +1 -0
  131. package/textfield/lib/filled-styles.css.js +1 -1
  132. package/textfield/lib/filled-styles.css.js.map +1 -1
  133. package/textfield/lib/shared-styles.css.js +1 -1
  134. package/textfield/lib/shared-styles.css.js.map +1 -1
  135. package/textfield/lib/text-field.js +3 -0
  136. package/textfield/lib/text-field.js.map +1 -1
  137. package/textfield/outlined-text-field.d.ts +1 -0
  138. package/textfield/outlined-text-field.js.map +1 -1
  139. package/tokens/_index.scss +1 -1
  140. package/tokens/{v0_144 → v0_150}/_index.scss +0 -0
  141. package/tokens/{v0_144 → v0_150}/_md-comp-assist-chip.scss +1 -1
  142. package/tokens/{v0_144 → v0_150}/_md-comp-badge.scss +1 -1
  143. package/tokens/{v0_144 → v0_150}/_md-comp-banner.scss +1 -1
  144. package/tokens/{v0_144 → v0_150}/_md-comp-bottom-app-bar.scss +1 -1
  145. package/tokens/{v0_144 → v0_150}/_md-comp-carousel-item.scss +1 -1
  146. package/tokens/{v0_144 → v0_150}/_md-comp-checkbox.scss +1 -1
  147. package/tokens/{v0_144 → v0_150}/_md-comp-circular-progress-indicator.scss +1 -1
  148. package/tokens/{v0_144 → v0_150}/_md-comp-data-table.scss +1 -1
  149. package/tokens/{v0_144 → v0_150}/_md-comp-date-input-modal.scss +1 -1
  150. package/tokens/{v0_144 → v0_150}/_md-comp-date-picker-docked.scss +1 -1
  151. package/tokens/{v0_144 → v0_150}/_md-comp-date-picker-modal.scss +1 -1
  152. package/tokens/{v0_144 → v0_150}/_md-comp-dialog.scss +1 -1
  153. package/tokens/{v0_144 → v0_150}/_md-comp-divider.scss +1 -1
  154. package/tokens/{v0_144 → v0_150}/_md-comp-elevated-button.scss +1 -1
  155. package/tokens/{v0_144 → v0_150}/_md-comp-elevated-card.scss +1 -1
  156. package/tokens/{v0_144 → v0_150}/_md-comp-extended-fab-branded.scss +1 -1
  157. package/tokens/{v0_144 → v0_150}/_md-comp-extended-fab-primary.scss +1 -1
  158. package/tokens/{v0_144 → v0_150}/_md-comp-extended-fab-secondary.scss +1 -1
  159. package/tokens/{v0_144 → v0_150}/_md-comp-extended-fab-surface.scss +1 -1
  160. package/tokens/{v0_144 → v0_150}/_md-comp-extended-fab-tertiary.scss +1 -1
  161. package/tokens/{v0_144 → v0_150}/_md-comp-fab-branded-large.scss +1 -1
  162. package/tokens/{v0_144 → v0_150}/_md-comp-fab-branded.scss +1 -1
  163. package/tokens/{v0_144 → v0_150}/_md-comp-fab-primary-large.scss +1 -1
  164. package/tokens/{v0_144 → v0_150}/_md-comp-fab-primary-small.scss +1 -1
  165. package/tokens/{v0_144 → v0_150}/_md-comp-fab-primary.scss +1 -1
  166. package/tokens/{v0_144 → v0_150}/_md-comp-fab-secondary-large.scss +1 -1
  167. package/tokens/{v0_144 → v0_150}/_md-comp-fab-secondary-small.scss +1 -1
  168. package/tokens/{v0_144 → v0_150}/_md-comp-fab-secondary.scss +1 -1
  169. package/tokens/{v0_144 → v0_150}/_md-comp-fab-surface-large.scss +1 -1
  170. package/tokens/{v0_144 → v0_150}/_md-comp-fab-surface-small.scss +1 -1
  171. package/tokens/{v0_144 → v0_150}/_md-comp-fab-surface.scss +1 -1
  172. package/tokens/{v0_144 → v0_150}/_md-comp-fab-tertiary-large.scss +1 -1
  173. package/tokens/{v0_144 → v0_150}/_md-comp-fab-tertiary-small.scss +1 -1
  174. package/tokens/{v0_144 → v0_150}/_md-comp-fab-tertiary.scss +1 -1
  175. package/tokens/{v0_144 → v0_150}/_md-comp-filled-autocomplete.scss +1 -1
  176. package/tokens/{v0_144 → v0_150}/_md-comp-filled-button.scss +1 -1
  177. package/tokens/{v0_144 → v0_150}/_md-comp-filled-card.scss +1 -1
  178. package/tokens/{v0_144 → v0_150}/_md-comp-filled-icon-button.scss +1 -1
  179. package/tokens/{v0_144 → v0_150}/_md-comp-filled-menu-button.scss +1 -1
  180. package/tokens/{v0_144 → v0_150}/_md-comp-filled-select.scss +1 -1
  181. package/tokens/{v0_144 → v0_150}/_md-comp-filled-text-field.scss +2 -2
  182. package/tokens/{v0_144 → v0_150}/_md-comp-filled-tonal-button.scss +1 -1
  183. package/tokens/{v0_144 → v0_150}/_md-comp-filled-tonal-icon-button.scss +1 -1
  184. package/tokens/{v0_144 → v0_150}/_md-comp-filter-chip.scss +2 -1
  185. package/tokens/{v0_144 → v0_150}/_md-comp-full-screen-dialog.scss +1 -1
  186. package/tokens/{v0_144 → v0_150}/_md-comp-icon-button.scss +1 -1
  187. package/tokens/{v0_144 → v0_150}/_md-comp-input-chip.scss +1 -1
  188. package/tokens/{v0_144 → v0_150}/_md-comp-linear-progress-indicator.scss +1 -1
  189. package/tokens/{v0_144 → v0_150}/_md-comp-list.scss +1 -1
  190. package/tokens/{v0_144 → v0_150}/_md-comp-menu.scss +1 -1
  191. package/tokens/{v0_144 → v0_150}/_md-comp-navigation-bar.scss +1 -1
  192. package/tokens/{v0_144 → v0_150}/_md-comp-navigation-drawer.scss +1 -1
  193. package/tokens/{v0_144 → v0_150}/_md-comp-navigation-rail.scss +1 -1
  194. package/tokens/{v0_144 → v0_150}/_md-comp-outlined-autocomplete.scss +1 -1
  195. package/tokens/{v0_144 → v0_150}/_md-comp-outlined-button.scss +1 -1
  196. package/tokens/{v0_144 → v0_150}/_md-comp-outlined-card.scss +5 -5
  197. package/tokens/{v0_144 → v0_150}/_md-comp-outlined-icon-button.scss +1 -1
  198. package/tokens/{v0_144 → v0_150}/_md-comp-outlined-menu-button.scss +1 -1
  199. package/tokens/{v0_144 → v0_150}/_md-comp-outlined-segmented-button.scss +1 -1
  200. package/tokens/{v0_144 → v0_150}/_md-comp-outlined-select.scss +1 -1
  201. package/tokens/{v0_144 → v0_150}/_md-comp-outlined-text-field.scss +1 -1
  202. package/tokens/{v0_144 → v0_150}/_md-comp-plain-tooltip.scss +2 -2
  203. package/tokens/{v0_144 → v0_150}/_md-comp-primary-navigation-tab.scss +1 -1
  204. package/tokens/{v0_144 → v0_150}/_md-comp-radio-button.scss +1 -1
  205. package/tokens/{v0_144 → v0_150}/_md-comp-rich-tooltip.scss +1 -1
  206. package/tokens/{v0_144 → v0_150}/_md-comp-scrim.scss +1 -1
  207. package/tokens/{v0_144 → v0_150}/_md-comp-search-bar.scss +1 -1
  208. package/tokens/{v0_144 → v0_150}/_md-comp-search-view.scss +1 -1
  209. package/tokens/{v0_144 → v0_150}/_md-comp-secondary-navigation-tab.scss +1 -1
  210. package/tokens/{v0_144 → v0_150}/_md-comp-sheet-bottom.scss +1 -1
  211. package/tokens/{v0_144 → v0_150}/_md-comp-sheet-floating.scss +1 -1
  212. package/tokens/{v0_144 → v0_150}/_md-comp-sheet-side.scss +1 -1
  213. package/tokens/{v0_144 → v0_150}/_md-comp-slider.scss +1 -1
  214. package/tokens/{v0_144 → v0_150}/_md-comp-snackbar.scss +25 -1
  215. package/tokens/{v0_144 → v0_150}/_md-comp-standard-menu-button.scss +1 -1
  216. package/tokens/{v0_144 → v0_150}/_md-comp-suggestion-chip.scss +6 -6
  217. package/tokens/{v0_144 → v0_150}/_md-comp-switch.scss +1 -1
  218. package/tokens/{v0_144 → v0_150}/_md-comp-text-button.scss +1 -1
  219. package/tokens/{v0_144 → v0_150}/_md-comp-time-input.scss +1 -1
  220. package/tokens/{v0_144 → v0_150}/_md-comp-time-picker.scss +2 -2
  221. package/tokens/{v0_144 → v0_150}/_md-comp-top-app-bar-large.scss +1 -1
  222. package/tokens/{v0_144 → v0_150}/_md-comp-top-app-bar-medium.scss +1 -1
  223. package/tokens/{v0_144 → v0_150}/_md-comp-top-app-bar-small-centered.scss +1 -1
  224. package/tokens/{v0_144 → v0_150}/_md-comp-top-app-bar-small.scss +1 -1
  225. package/tokens/{v0_144 → v0_150}/_md-ref-palette.scss +1 -1
  226. package/tokens/{v0_144 → v0_150}/_md-ref-typeface.scss +1 -1
  227. package/tokens/{v0_144 → v0_150}/_md-sys-color.scss +1 -1
  228. package/tokens/{v0_144 → v0_150}/_md-sys-elevation.scss +1 -1
  229. package/tokens/{v0_144 → v0_150}/_md-sys-motion.scss +1 -1
  230. package/tokens/{v0_144 → v0_150}/_md-sys-shape.scss +1 -1
  231. package/tokens/{v0_144 → v0_150}/_md-sys-state.scss +1 -1
  232. package/tokens/{v0_144 → v0_150}/_md-sys-typescale.scss +1 -1
  233. package/tokens/v0_150/index.test.css.d.ts +1 -0
  234. package/tokens/v0_150/index.test.css.js +9 -0
  235. package/tokens/v0_150/index.test.css.js.map +1 -0
  236. package/tokens/v0_150/index.test.scss +584 -0
  237. package/tokens/v0_150/lib.test.css.d.ts +1 -0
  238. package/tokens/v0_150/lib.test.css.js +9 -0
  239. package/tokens/v0_150/lib.test.css.js.map +1 -0
  240. package/tokens/v0_150/lib.test.scss +663 -0
  241. package/elevationold/lib/_elevation-overlay-theme.scss +0 -31
  242. package/elevationold/lib/_elevation-overlay.scss +0 -18
  243. package/elevationold/lib/_elevation-theme.scss +0 -74
  244. package/elevationold/lib/_surface.scss +0 -15
  245. package/elevationold/lib/elevation-overlay-styles.scss +0 -9
  246. package/radio/lib/_radio-theme.scss +0 -377
  247. package/ripple/_ripple-theme.scss +0 -17
@@ -7,23 +7,23 @@ import { __decorate, __metadata } from "tslib";
7
7
  // tslint:disable:no-new-decorators
8
8
  import '../../focus/focus-ring.js';
9
9
  import '../../ripple/ripple.js';
10
- import { html } from 'lit';
11
- import { eventOptions, property, query, state } from 'lit/decorators.js';
10
+ import { html, LitElement } from 'lit';
11
+ import { eventOptions, property, query, queryAsync, state } from 'lit/decorators.js';
12
12
  import { classMap } from 'lit/directives/class-map.js';
13
13
  import { ifDefined } from 'lit/directives/if-defined.js';
14
- import { ActionElement } from '../../actionelement/action-element.js';
15
- import { isActivationClick } from '../../controller/events.js';
14
+ import { when } from 'lit/directives/when.js';
15
+ import { dispatchActivationClick, isActivationClick } from '../../controller/events.js';
16
16
  import { FormController, getFormValue } from '../../controller/form-controller.js';
17
17
  import { ariaProperty } from '../../decorators/aria-property.js';
18
18
  import { pointerPress as focusRingPointerPress, shouldShowStrongFocus } from '../../focus/strong-focus.js';
19
- import { MdRipple } from '../../ripple/ripple.js';
19
+ import { ripple } from '../../ripple/directive.js';
20
20
  /**
21
21
  * @fires input {InputEvent} Fired whenever `selected` changes due to user
22
22
  * interaction (bubbles and composed).
23
23
  * @fires change {Event} Fired whenever `selected` changes due to user
24
24
  * interaction (bubbles).
25
25
  */
26
- export class Switch extends ActionElement {
26
+ export class Switch extends LitElement {
27
27
  constructor() {
28
28
  super();
29
29
  /**
@@ -46,6 +46,7 @@ export class Switch extends ActionElement {
46
46
  this.showOnlySelectedIcon = false;
47
47
  this.ariaLabelledBy = '';
48
48
  this.showFocusRing = false;
49
+ this.showRipple = false;
49
50
  /**
50
51
  * The HTML name to use in form submission.
51
52
  */
@@ -55,13 +56,33 @@ export class Switch extends ActionElement {
55
56
  * submitted when `selected` is `false`.
56
57
  */
57
58
  this.value = 'on';
59
+ this.renderRipple = () => {
60
+ return html `
61
+ <span class="md3-switch__ripple">
62
+ <md-ripple
63
+ ?disabled="${this.disabled}"
64
+ unbounded>
65
+ </md-ripple>
66
+ </span>
67
+ `;
68
+ };
69
+ this.getRipple = () => {
70
+ this.showRipple = true;
71
+ return this.ripple;
72
+ };
73
+ this.renderFocusRing = () => {
74
+ return html `<md-focus-ring visible></md-focus-ring>`;
75
+ };
58
76
  this.addController(new FormController(this));
59
77
  this.addEventListener('click', (event) => {
60
78
  if (!isActivationClick(event)) {
61
79
  return;
62
80
  }
63
81
  this.button?.focus();
64
- this.endPress({ cancelled: false });
82
+ if (this.button != null) {
83
+ // this triggers the click behavior, and the ripple
84
+ dispatchActivationClick(this.button);
85
+ }
65
86
  });
66
87
  }
67
88
  /**
@@ -76,7 +97,9 @@ export class Switch extends ActionElement {
76
97
  render() {
77
98
  const ariaLabelValue = this.ariaLabel ? this.ariaLabel : undefined;
78
99
  const ariaLabelledByValue = this.ariaLabelledBy ? this.ariaLabelledBy : undefined;
79
- // TODO(b/230763631): update this template to include spans instead of divs
100
+ // NOTE: buttons must use only [phrasing
101
+ // content](https://html.spec.whatwg.org/multipage/dom.html#phrasing-content)
102
+ // children, which includes custom elements, but not `div`s
80
103
  return html `
81
104
  <button
82
105
  type="button"
@@ -90,16 +113,12 @@ export class Switch extends ActionElement {
90
113
  @focus="${this.handleFocus}"
91
114
  @blur="${this.handleBlur}"
92
115
  @pointerdown=${this.handlePointerDown}
93
- @pointerenter=${this.handlePointerEnter}
94
- @pointerup=${this.handlePointerUp}
95
- @pointercancel=${this.handlePointerCancel}
96
- @pointerleave=${this.handlePointerLeave}
97
- @contextmenu=${this.handleContextMenu}
116
+ ${ripple(this.getRipple)}
98
117
  >
99
- ${this.renderFocusRing()}
100
- <div class="md3-switch__track">
118
+ ${when(this.showFocusRing, this.renderFocusRing)}
119
+ <span class="md3-switch__track">
101
120
  ${this.renderHandle()}
102
- </div>
121
+ </span>
103
122
  </button>
104
123
  `;
105
124
  }
@@ -109,32 +128,19 @@ export class Switch extends ActionElement {
109
128
  'md3-switch--unselected': !this.selected,
110
129
  };
111
130
  }
112
- renderRipple() {
113
- return html `
114
- <div class="md3-switch__ripple">
115
- <md-ripple
116
- ?disabled="${this.disabled}"
117
- unbounded>
118
- </md-ripple>
119
- </div>
120
- `;
121
- }
122
- renderFocusRing() {
123
- return html `<md-focus-ring .visible="${this.showFocusRing}"></md-focus-ring>`;
124
- }
125
131
  renderHandle() {
126
132
  /** @classMap */
127
133
  const classes = {
128
134
  'md3-switch__handle--big': this.icons && !this.showOnlySelectedIcon,
129
135
  };
130
136
  return html `
131
- <div class="md3-switch__handle-container">
132
- ${this.renderRipple()}
133
- <div class="md3-switch__handle ${classMap(classes)}">
137
+ <span class="md3-switch__handle-container">
138
+ ${when(this.showRipple, this.renderRipple)}
139
+ <span class="md3-switch__handle ${classMap(classes)}">
134
140
  ${this.shouldShowIcons() ? this.renderIcons() : html ``}
135
- </div>
141
+ </span>
136
142
  ${this.renderTouchTarget()}
137
- </div>
143
+ </span>
138
144
  `;
139
145
  }
140
146
  renderIcons() {
@@ -171,12 +177,8 @@ export class Switch extends ActionElement {
171
177
  shouldShowIcons() {
172
178
  return this.icons || this.showOnlySelectedIcon;
173
179
  }
174
- beginPress({ positionEvent }) {
175
- this.ripple.beginPress(positionEvent);
176
- }
177
- endPress({ cancelled }) {
178
- this.ripple.endPress();
179
- if (cancelled || this.disabled) {
180
+ handleClick() {
181
+ if (this.disabled) {
180
182
  return;
181
183
  }
182
184
  this.selected = !this.selected;
@@ -184,7 +186,6 @@ export class Switch extends ActionElement {
184
186
  // Bubbles but does not compose to mimic native browser <input> & <select>
185
187
  // Additionally, native change event is not an InputEvent.
186
188
  this.dispatchEvent(new Event('change', { bubbles: true }));
187
- super.endPress({ cancelled, actionData: { selected: this.selected } });
188
189
  }
189
190
  handleFocus() {
190
191
  this.showFocusRing = shouldShowStrongFocus();
@@ -192,15 +193,7 @@ export class Switch extends ActionElement {
192
193
  handleBlur() {
193
194
  this.showFocusRing = false;
194
195
  }
195
- handlePointerEnter(e) {
196
- this.ripple.beginHover(e);
197
- }
198
- handlePointerLeave(e) {
199
- super.handlePointerLeave(e);
200
- this.ripple.endHover();
201
- }
202
- handlePointerDown(event) {
203
- super.handlePointerDown(event);
196
+ handlePointerDown() {
204
197
  focusRingPointerPress();
205
198
  this.showFocusRing = false;
206
199
  }
@@ -238,9 +231,17 @@ __decorate([
238
231
  __metadata("design:type", Object)
239
232
  ], Switch.prototype, "showFocusRing", void 0);
240
233
  __decorate([
241
- query('md-ripple'),
242
- __metadata("design:type", MdRipple)
234
+ state(),
235
+ __metadata("design:type", Object)
236
+ ], Switch.prototype, "showRipple", void 0);
237
+ __decorate([
238
+ queryAsync('md-ripple'),
239
+ __metadata("design:type", Promise)
243
240
  ], Switch.prototype, "ripple", void 0);
241
+ __decorate([
242
+ query('button'),
243
+ __metadata("design:type", HTMLButtonElement)
244
+ ], Switch.prototype, "button", void 0);
244
245
  __decorate([
245
246
  property({ type: String, reflect: true }),
246
247
  __metadata("design:type", Object)
@@ -249,14 +250,10 @@ __decorate([
249
250
  property({ type: String }),
250
251
  __metadata("design:type", Object)
251
252
  ], Switch.prototype, "value", void 0);
252
- __decorate([
253
- query('button', true),
254
- __metadata("design:type", HTMLButtonElement)
255
- ], Switch.prototype, "button", void 0);
256
253
  __decorate([
257
254
  eventOptions({ passive: true }),
258
255
  __metadata("design:type", Function),
259
- __metadata("design:paramtypes", [PointerEvent]),
256
+ __metadata("design:paramtypes", []),
260
257
  __metadata("design:returntype", void 0)
261
258
  ], Switch.prototype, "handlePointerDown", null);
262
259
  //# sourceMappingURL=switch.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"switch.js","sourceRoot":"","sources":["switch.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// tslint:disable:no-new-decorators\n\nimport '../../focus/focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, TemplateResult} from 'lit';\nimport {eventOptions, property, query, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\nimport {ActionElement, BeginPressConfig, EndPressConfig} from '../../actionelement/action-element.js';\nimport {isActivationClick} from '../../controller/events.js';\nimport {FormController, getFormValue} from '../../controller/form-controller.js';\nimport {ariaProperty} from '../../decorators/aria-property.js';\nimport {pointerPress as focusRingPointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';\nimport {MdRipple} from '../../ripple/ripple.js';\n\n/**\n * @fires input {InputEvent} Fired whenever `selected` changes due to user\n * interaction (bubbles and composed).\n * @fires change {Event} Fired whenever `selected` changes due to user\n * interaction (bubbles).\n */\nexport class Switch extends ActionElement {\n static override shadowRootOptions:\n ShadowRootInit = {mode: 'open', delegatesFocus: true};\n\n static formAssociated = true;\n\n /**\n * Disables the switch and makes it non-interactive.\n */\n @property({type: Boolean, reflect: true}) disabled = false;\n\n /**\n * Puts the switch in the selected state and sets the form submission value to\n * the `value` property.\n */\n @property({type: Boolean}) selected = false;\n\n /**\n * Shows both the selected and deselected icons.\n */\n @property({type: Boolean}) icons = false;\n\n /**\n * Shows only the selected icon, and not the deselected icon. If `true`,\n * overrides the behavior of the `icons` property.\n */\n @property({type: Boolean}) showOnlySelectedIcon = false;\n\n @ariaProperty\n @property({type: String, attribute: 'data-aria-label', noAccessor: true})\n override ariaLabel!: string;\n\n @ariaProperty\n @property({type: String, attribute: 'data-aria-labelledby', noAccessor: true})\n ariaLabelledBy = '';\n\n @state() protected showFocusRing = false;\n\n // Ripple\n @query('md-ripple') readonly ripple!: MdRipple;\n\n /**\n * The associated form element with which this element's value will submit.\n */\n get form() {\n return this.closest('form');\n }\n\n /**\n * The HTML name to use in form submission.\n */\n @property({type: String, reflect: true}) name = '';\n\n /**\n * The value associated with this switch on form submission. `null` is\n * submitted when `selected` is `false`.\n */\n @property({type: String}) value = 'on';\n\n [getFormValue]() {\n return this.selected ? this.value : null;\n }\n\n constructor() {\n super();\n this.addController(new FormController(this));\n this.addEventListener('click', (event: MouseEvent) => {\n if (!isActivationClick(event)) {\n return;\n }\n this.button?.focus();\n this.endPress({cancelled: false});\n });\n }\n\n // Button\n @query('button', true) private readonly button!: HTMLButtonElement|null;\n\n protected override render(): TemplateResult {\n const ariaLabelValue = this.ariaLabel ? this.ariaLabel : undefined;\n const ariaLabelledByValue =\n this.ariaLabelledBy ? this.ariaLabelledBy : undefined;\n // TODO(b/230763631): update this template to include spans instead of divs\n return html`\n <button\n type=\"button\"\n class=\"md3-switch ${classMap(this.getRenderClasses())}\"\n role=\"switch\"\n aria-checked=\"${this.selected}\"\n aria-label=\"${ifDefined(ariaLabelValue)}\"\n aria-labelledby=\"${ifDefined(ariaLabelledByValue)}\"\n ?disabled=${this.disabled}\n @click=${this.handleClick}\n @focus=\"${this.handleFocus}\"\n @blur=\"${this.handleBlur}\"\n @pointerdown=${this.handlePointerDown}\n @pointerenter=${this.handlePointerEnter}\n @pointerup=${this.handlePointerUp}\n @pointercancel=${this.handlePointerCancel}\n @pointerleave=${this.handlePointerLeave}\n @contextmenu=${this.handleContextMenu}\n >\n ${this.renderFocusRing()}\n <div class=\"md3-switch__track\">\n ${this.renderHandle()}\n </div>\n </button>\n `;\n }\n\n protected getRenderClasses(): ClassInfo {\n return {\n 'md3-switch--selected': this.selected,\n 'md3-switch--unselected': !this.selected,\n };\n }\n\n protected renderRipple(): TemplateResult {\n return html`\n <div class=\"md3-switch__ripple\">\n <md-ripple\n ?disabled=\"${this.disabled}\"\n unbounded>\n </md-ripple>\n </div>\n `;\n }\n\n protected renderFocusRing(): TemplateResult {\n return html`<md-focus-ring .visible=\"${\n this.showFocusRing}\"></md-focus-ring>`;\n }\n\n protected renderHandle(): TemplateResult {\n /** @classMap */\n const classes = {\n 'md3-switch__handle--big': this.icons && !this.showOnlySelectedIcon,\n };\n return html`\n <div class=\"md3-switch__handle-container\">\n ${this.renderRipple()}\n <div class=\"md3-switch__handle ${classMap(classes)}\">\n ${this.shouldShowIcons() ? this.renderIcons() : html``}\n </div>\n ${this.renderTouchTarget()}\n </div>\n `;\n }\n\n private renderIcons(): TemplateResult {\n return html`\n <div class=\"md3-switch__icons\">\n ${this.renderOnIcon()}\n ${this.showOnlySelectedIcon ? html`` : this.renderOffIcon()}\n </div>\n `;\n }\n\n /**\n * https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Acheck%3AFILL%400%3Bwght%40500%3BGRAD%400%3Bopsz%4024\n */\n protected renderOnIcon(): TemplateResult {\n return html`\n <svg class=\"md3-switch__icon md3-switch__icon--on\" viewBox=\"0 0 24 24\">\n <path d=\"M9.55 18.2 3.65 12.3 5.275 10.675 9.55 14.95 18.725 5.775 20.35 7.4Z\"/>\n </svg>\n `;\n }\n\n /**\n * https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Aclose%3AFILL%400%3Bwght%40500%3BGRAD%400%3Bopsz%4024\n */\n protected renderOffIcon(): TemplateResult {\n return html`\n <svg class=\"md3-switch__icon md3-switch__icon--off\" viewBox=\"0 0 24 24\">\n <path d=\"M6.4 19.2 4.8 17.6 10.4 12 4.8 6.4 6.4 4.8 12 10.4 17.6 4.8 19.2 6.4 13.6 12 19.2 17.6 17.6 19.2 12 13.6Z\"/>\n </svg>\n `;\n }\n\n private renderTouchTarget(): TemplateResult {\n return html`<span class=\"md3-switch__touch\"></span>`;\n }\n\n private shouldShowIcons(): boolean {\n return this.icons || this.showOnlySelectedIcon;\n }\n\n override beginPress({positionEvent}: BeginPressConfig) {\n this.ripple.beginPress(positionEvent);\n }\n\n override endPress({cancelled}: EndPressConfig) {\n this.ripple.endPress();\n\n if (cancelled || this.disabled) {\n return;\n }\n\n this.selected = !this.selected;\n this.dispatchEvent(\n new InputEvent('input', {bubbles: true, composed: true}));\n // Bubbles but does not compose to mimic native browser <input> & <select>\n // Additionally, native change event is not an InputEvent.\n this.dispatchEvent(new Event('change', {bubbles: true}));\n super.endPress({cancelled, actionData: {selected: this.selected}});\n }\n\n protected handleFocus() {\n this.showFocusRing = shouldShowStrongFocus();\n }\n\n protected handleBlur() {\n this.showFocusRing = false;\n }\n\n protected handlePointerEnter(e: PointerEvent) {\n this.ripple.beginHover(e);\n }\n\n override handlePointerLeave(e: PointerEvent) {\n super.handlePointerLeave(e);\n this.ripple.endHover();\n }\n\n @eventOptions({passive: true})\n override handlePointerDown(event: PointerEvent) {\n super.handlePointerDown(event);\n focusRingPointerPress();\n this.showFocusRing = false;\n }\n}\n"]}
1
+ {"version":3,"file":"switch.js","sourceRoot":"","sources":["switch.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// tslint:disable:no-new-decorators\n\nimport '../../focus/focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, TemplateResult} from 'lit';\nimport {eventOptions, property, query, queryAsync, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {when} from 'lit/directives/when.js';\n\nimport {dispatchActivationClick, isActivationClick} from '../../controller/events.js';\nimport {FormController, getFormValue} from '../../controller/form-controller.js';\nimport {ariaProperty} from '../../decorators/aria-property.js';\nimport {pointerPress as focusRingPointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';\nimport {ripple} from '../../ripple/directive.js';\nimport {MdRipple} from '../../ripple/ripple.js';\n\n/**\n * @fires input {InputEvent} Fired whenever `selected` changes due to user\n * interaction (bubbles and composed).\n * @fires change {Event} Fired whenever `selected` changes due to user\n * interaction (bubbles).\n */\nexport class Switch extends LitElement {\n static override shadowRootOptions:\n ShadowRootInit = {mode: 'open', delegatesFocus: true};\n\n static formAssociated = true;\n\n /**\n * Disables the switch and makes it non-interactive.\n */\n @property({type: Boolean, reflect: true}) disabled = false;\n\n /**\n * Puts the switch in the selected state and sets the form submission value to\n * the `value` property.\n */\n @property({type: Boolean}) selected = false;\n\n /**\n * Shows both the selected and deselected icons.\n */\n @property({type: Boolean}) icons = false;\n\n /**\n * Shows only the selected icon, and not the deselected icon. If `true`,\n * overrides the behavior of the `icons` property.\n */\n @property({type: Boolean}) showOnlySelectedIcon = false;\n\n @ariaProperty\n @property({type: String, attribute: 'data-aria-label', noAccessor: true})\n override ariaLabel!: string;\n\n @ariaProperty\n @property({type: String, attribute: 'data-aria-labelledby', noAccessor: true})\n ariaLabelledBy = '';\n\n @state() private showFocusRing = false;\n @state() private showRipple = false;\n\n // Ripple\n @queryAsync('md-ripple') private readonly ripple!: Promise<MdRipple|null>;\n\n // Button\n @query('button') private readonly button!: HTMLButtonElement|null;\n\n /**\n * The associated form element with which this element's value will submit.\n */\n get form() {\n return this.closest('form');\n }\n\n /**\n * The HTML name to use in form submission.\n */\n @property({type: String, reflect: true}) name = '';\n\n /**\n * The value associated with this switch on form submission. `null` is\n * submitted when `selected` is `false`.\n */\n @property({type: String}) value = 'on';\n\n [getFormValue]() {\n return this.selected ? this.value : null;\n }\n\n constructor() {\n super();\n this.addController(new FormController(this));\n this.addEventListener('click', (event: MouseEvent) => {\n if (!isActivationClick(event)) {\n return;\n }\n this.button?.focus();\n if (this.button != null) {\n // this triggers the click behavior, and the ripple\n dispatchActivationClick(this.button);\n }\n });\n }\n\n protected override render(): TemplateResult {\n const ariaLabelValue = this.ariaLabel ? this.ariaLabel : undefined;\n const ariaLabelledByValue =\n this.ariaLabelledBy ? this.ariaLabelledBy : undefined;\n // NOTE: buttons must use only [phrasing\n // content](https://html.spec.whatwg.org/multipage/dom.html#phrasing-content)\n // children, which includes custom elements, but not `div`s\n return html`\n <button\n type=\"button\"\n class=\"md3-switch ${classMap(this.getRenderClasses())}\"\n role=\"switch\"\n aria-checked=\"${this.selected}\"\n aria-label=\"${ifDefined(ariaLabelValue)}\"\n aria-labelledby=\"${ifDefined(ariaLabelledByValue)}\"\n ?disabled=${this.disabled}\n @click=${this.handleClick}\n @focus=\"${this.handleFocus}\"\n @blur=\"${this.handleBlur}\"\n @pointerdown=${this.handlePointerDown}\n ${ripple(this.getRipple)}\n >\n ${when(this.showFocusRing, this.renderFocusRing)}\n <span class=\"md3-switch__track\">\n ${this.renderHandle()}\n </span>\n </button>\n `;\n }\n\n private getRenderClasses(): ClassInfo {\n return {\n 'md3-switch--selected': this.selected,\n 'md3-switch--unselected': !this.selected,\n };\n }\n\n private readonly renderRipple = () => {\n return html`\n <span class=\"md3-switch__ripple\">\n <md-ripple\n ?disabled=\"${this.disabled}\"\n unbounded>\n </md-ripple>\n </span>\n `;\n };\n\n private readonly getRipple = () => {\n this.showRipple = true;\n return this.ripple;\n };\n\n private readonly renderFocusRing = () => {\n return html`<md-focus-ring visible></md-focus-ring>`;\n };\n\n private renderHandle(): TemplateResult {\n /** @classMap */\n const classes = {\n 'md3-switch__handle--big': this.icons && !this.showOnlySelectedIcon,\n };\n return html`\n <span class=\"md3-switch__handle-container\">\n ${when(this.showRipple, this.renderRipple)}\n <span class=\"md3-switch__handle ${classMap(classes)}\">\n ${this.shouldShowIcons() ? this.renderIcons() : html``}\n </span>\n ${this.renderTouchTarget()}\n </span>\n `;\n }\n\n private renderIcons(): TemplateResult {\n return html`\n <div class=\"md3-switch__icons\">\n ${this.renderOnIcon()}\n ${this.showOnlySelectedIcon ? html`` : this.renderOffIcon()}\n </div>\n `;\n }\n\n /**\n * https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Acheck%3AFILL%400%3Bwght%40500%3BGRAD%400%3Bopsz%4024\n */\n private renderOnIcon(): TemplateResult {\n return html`\n <svg class=\"md3-switch__icon md3-switch__icon--on\" viewBox=\"0 0 24 24\">\n <path d=\"M9.55 18.2 3.65 12.3 5.275 10.675 9.55 14.95 18.725 5.775 20.35 7.4Z\"/>\n </svg>\n `;\n }\n\n /**\n * https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Aclose%3AFILL%400%3Bwght%40500%3BGRAD%400%3Bopsz%4024\n */\n private renderOffIcon(): TemplateResult {\n return html`\n <svg class=\"md3-switch__icon md3-switch__icon--off\" viewBox=\"0 0 24 24\">\n <path d=\"M6.4 19.2 4.8 17.6 10.4 12 4.8 6.4 6.4 4.8 12 10.4 17.6 4.8 19.2 6.4 13.6 12 19.2 17.6 17.6 19.2 12 13.6Z\"/>\n </svg>\n `;\n }\n\n private renderTouchTarget(): TemplateResult {\n return html`<span class=\"md3-switch__touch\"></span>`;\n }\n\n private shouldShowIcons(): boolean {\n return this.icons || this.showOnlySelectedIcon;\n }\n\n private handleClick() {\n if (this.disabled) {\n return;\n }\n\n this.selected = !this.selected;\n this.dispatchEvent(\n new InputEvent('input', {bubbles: true, composed: true}));\n // Bubbles but does not compose to mimic native browser <input> & <select>\n // Additionally, native change event is not an InputEvent.\n this.dispatchEvent(new Event('change', {bubbles: true}));\n }\n\n private handleFocus() {\n this.showFocusRing = shouldShowStrongFocus();\n }\n\n private handleBlur() {\n this.showFocusRing = false;\n }\n\n @eventOptions({passive: true})\n private handlePointerDown() {\n focusRingPointerPress();\n this.showFocusRing = false;\n }\n}\n"]}
@@ -5,6 +5,7 @@
5
5
  */
6
6
  import '../field/filled-field.js';
7
7
  import { FilledTextField } from './lib/filled-text-field.js';
8
+ export { TextFieldType } from './lib/text-field.js';
8
9
  declare global {
9
10
  interface HTMLElementTagNameMap {
10
11
  'md-filled-text-field': MdFilledTextField;
@@ -1 +1 @@
1
- {"version":3,"file":"filled-text-field.js","sourceRoot":"","sources":["filled-text-field.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,0BAA0B,CAAC;AAElC,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,OAAO,EAAC,MAAM,oBAAoB,CAAC;AAE3C,oDAAoD;AACpD,OAAO,EAAC,MAAM,IAAI,wBAAwB,EAAC,MAAM,0CAA0C,CAAC;AAC5F,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAC,eAAe,EAAC,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;GAIG;AAEH,IAAa,iBAAiB,GAA9B,MAAa,iBAAkB,SAAQ,eAAe;IAAtD;;QAI8B,aAAQ,GAAG,OAAO,CAAA,iBAAiB,CAAC;IAClE,CAAC;CAAA,CAAA;AAJiB,wBAAM,GAClB,CAAC,YAAY,EAAE,YAAY,EAAE,wBAAwB,CAAE,CAAA;AAFhD,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CAK7B;SALY,iBAAiB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../field/filled-field.js';\n\nimport {customElement} from 'lit/decorators.js';\nimport {literal} from 'lit/static-html.js';\n\n// TODO(b/236285090): update with HCM best practices\nimport {styles as filledForcedColorsStyles} from './lib/filled-forced-colors-styles.css.js';\nimport {styles as filledStyles} from './lib/filled-styles.css.js';\nimport {FilledTextField} from './lib/filled-text-field.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-filled-text-field': MdFilledTextField;\n }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filled-text-field')\nexport class MdFilledTextField extends FilledTextField {\n static override styles =\n [sharedStyles, filledStyles, filledForcedColorsStyles];\n\n protected override readonly fieldTag = literal`md-filled-field`;\n}\n"]}
1
+ {"version":3,"file":"filled-text-field.js","sourceRoot":"","sources":["filled-text-field.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,0BAA0B,CAAC;AAElC,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,OAAO,EAAC,MAAM,oBAAoB,CAAC;AAE3C,oDAAoD;AACpD,OAAO,EAAC,MAAM,IAAI,wBAAwB,EAAC,MAAM,0CAA0C,CAAC;AAC5F,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAC,eAAe,EAAC,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAUlE;;;;GAIG;AAEH,IAAa,iBAAiB,GAA9B,MAAa,iBAAkB,SAAQ,eAAe;IAAtD;;QAI8B,aAAQ,GAAG,OAAO,CAAA,iBAAiB,CAAC;IAClE,CAAC;CAAA,CAAA;AAJiB,wBAAM,GAClB,CAAC,YAAY,EAAE,YAAY,EAAE,wBAAwB,CAAE,CAAA;AAFhD,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CAK7B;SALY,iBAAiB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../field/filled-field.js';\n\nimport {customElement} from 'lit/decorators.js';\nimport {literal} from 'lit/static-html.js';\n\n// TODO(b/236285090): update with HCM best practices\nimport {styles as filledForcedColorsStyles} from './lib/filled-forced-colors-styles.css.js';\nimport {styles as filledStyles} from './lib/filled-styles.css.js';\nimport {FilledTextField} from './lib/filled-text-field.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\nexport {TextFieldType} from './lib/text-field.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-filled-text-field': MdFilledTextField;\n }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filled-text-field')\nexport class MdFilledTextField extends FilledTextField {\n static override styles =\n [sharedStyles, filledStyles, filledForcedColorsStyles];\n\n protected override readonly fieldTag = literal`md-filled-field`;\n}\n"]}
@@ -17,6 +17,7 @@
17
17
  :host {
18
18
  display: inline-flex;
19
19
  outline: none;
20
+ -webkit-tap-highlight-color: transparent;
20
21
  }
21
22
 
22
23
  .md3-text-field {
@@ -4,6 +4,6 @@
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
6
  import { css } from 'lit';
7
- export const styles = css `:host{--_container-shape-start-start: var(--md-filled-text-field-container-shape-start-start, 4px);--_container-shape-start-end: var(--md-filled-text-field-container-shape-start-end, 4px);--_container-shape-end-end: var(--md-filled-text-field-container-shape-end-end, 0px);--_container-shape-end-start: var(--md-filled-text-field-container-shape-end-start, 0px);--_container-padding-horizontal: var(--md-filled-text-field-container-padding-horizontal, 16px);--_container-padding-vertical: var(--md-filled-text-field-container-padding-vertical, 8px);--_input-text-prefix-padding: var(--md-filled-text-field-input-text-prefix-padding, 2px);--_input-text-suffix-padding: var(--md-filled-text-field-input-text-suffix-padding, 2px);--_active-indicator-color: var(--md-filled-text-field-active-indicator-color, var(--md-sys-color-on-surface-variant, #49454f));--_active-indicator-height: var(--md-filled-text-field-active-indicator-height, 1px);--_caret-color: var(--md-filled-text-field-caret-color, var(--md-sys-color-primary, #6750a4));--_container-color: var(--md-filled-text-field-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--_container-height: var(--md-filled-text-field-container-height, 56px);--_disabled-active-indicator-color: var(--md-filled-text-field-disabled-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-active-indicator-height: var(--md-filled-text-field-disabled-active-indicator-height, 1px);--_disabled-active-indicator-opacity: var(--md-filled-text-field-disabled-active-indicator-opacity, 0.38);--_disabled-container-color: var(--md-filled-text-field-disabled-container-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-container-opacity: var(--md-filled-text-field-disabled-container-opacity, 0.04);--_disabled-input-text-color: var(--md-filled-text-field-disabled-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-input-text-opacity: var(--md-filled-text-field-disabled-input-text-opacity, 0.38);--_disabled-label-text-color: var(--md-filled-text-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-label-text-opacity: var(--md-filled-text-field-disabled-label-text-opacity, 0.38);--_disabled-leading-icon-color: var(--md-filled-text-field-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-leading-icon-opacity: var(--md-filled-text-field-disabled-leading-icon-opacity, 0.38);--_disabled-supporting-text-color: var(--md-filled-text-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-supporting-text-opacity: var(--md-filled-text-field-disabled-supporting-text-opacity, 0.38);--_disabled-trailing-icon-color: var(--md-filled-text-field-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-trailing-icon-opacity: var(--md-filled-text-field-disabled-trailing-icon-opacity, 0.38);--_error-active-indicator-color: var(--md-filled-text-field-error-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-focus-active-indicator-color: var(--md-filled-text-field-error-focus-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-focus-caret-color: var(--md-filled-text-field-error-focus-caret-color, var(--md-sys-color-error, #b3261e));--_error-focus-input-text-color: var(--md-filled-text-field-error-focus-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-focus-label-text-color: var(--md-filled-text-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-leading-icon-color: var(--md-filled-text-field-error-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-supporting-text-color: var(--md-filled-text-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-trailing-icon-color: var(--md-filled-text-field-error-focus-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_error-hover-active-indicator-color: var(--md-filled-text-field-error-hover-active-indicator-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-input-text-color: var(--md-filled-text-field-error-hover-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-hover-label-text-color: var(--md-filled-text-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-leading-icon-color: var(--md-filled-text-field-error-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-hover-state-layer-color: var(--md-filled-text-field-error-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-hover-state-layer-opacity: var(--md-filled-text-field-error-hover-state-layer-opacity, 0.08);--_error-hover-supporting-text-color: var(--md-filled-text-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-hover-trailing-icon-color: var(--md-filled-text-field-error-hover-trailing-icon-color, var(--md-sys-color-on-error-container, #410e0b));--_error-input-text-color: var(--md-filled-text-field-error-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-label-text-color: var(--md-filled-text-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_error-leading-icon-color: var(--md-filled-text-field-error-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-supporting-text-color: var(--md-filled-text-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-trailing-icon-color: var(--md-filled-text-field-error-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_focus-active-indicator-color: var(--md-filled-text-field-focus-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_focus-active-indicator-height: var(--md-filled-text-field-focus-active-indicator-height, 2px);--_focus-input-text-color: var(--md-filled-text-field-focus-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_focus-label-text-color: var(--md-filled-text-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-filled-text-field-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-supporting-text-color: var(--md-filled-text-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-icon-color: var(--md-filled-text-field-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-active-indicator-color: var(--md-filled-text-field-hover-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-active-indicator-height: var(--md-filled-text-field-hover-active-indicator-height, 1px);--_hover-input-text-color: var(--md-filled-text-field-hover-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-label-text-color: var(--md-filled-text-field-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-leading-icon-color: var(--md-filled-text-field-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-filled-text-field-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-state-layer-opacity: var(--md-filled-text-field-hover-state-layer-opacity, 0.08);--_hover-supporting-text-color: var(--md-filled-text-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-filled-text-field-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-color: var(--md-filled-text-field-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_input-text-font: var(--md-filled-text-field-input-text-font, Roboto);--_input-text-line-height: var(--md-filled-text-field-input-text-line-height, 1.5rem);--_input-text-placeholder-color: var(--md-filled-text-field-input-text-placeholder-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-prefix-color: var(--md-filled-text-field-input-text-prefix-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-size: var(--md-filled-text-field-input-text-size, 1rem);--_input-text-suffix-color: var(--md-filled-text-field-input-text-suffix-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-tracking: var(--md-filled-text-field-input-text-tracking, 0.031rem);--_input-text-type: var(--md-filled-text-field-input-text-type, 400 1rem / 1.5rem Roboto);--_input-text-weight: var(--md-filled-text-field-input-text-weight, 400);--_label-text-color: var(--md-filled-text-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-font: var(--md-filled-text-field-label-text-font, Roboto);--_label-text-line-height: var(--md-filled-text-field-label-text-line-height, 1.5rem);--_label-text-populated-line-height: var(--md-filled-text-field-label-text-populated-line-height, 1rem);--_label-text-populated-size: var(--md-filled-text-field-label-text-populated-size, 0.75rem);--_label-text-size: var(--md-filled-text-field-label-text-size, 1rem);--_label-text-tracking: var(--md-filled-text-field-label-text-tracking, 0.031rem);--_label-text-type: var(--md-filled-text-field-label-text-type, 400 1rem / 1.5rem Roboto);--_label-text-weight: var(--md-filled-text-field-label-text-weight, 400);--_leading-icon-color: var(--md-filled-text-field-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-icon-size: var(--md-filled-text-field-leading-icon-size, 20px);--_supporting-text-color: var(--md-filled-text-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-filled-text-field-supporting-text-font, Roboto);--_supporting-text-line-height: var(--md-filled-text-field-supporting-text-line-height, 1rem);--_supporting-text-size: var(--md-filled-text-field-supporting-text-size, 0.75rem);--_supporting-text-tracking: var(--md-filled-text-field-supporting-text-tracking, 0.025rem);--_supporting-text-type: var(--md-filled-text-field-supporting-text-type, 400 0.75rem / 1rem Roboto);--_supporting-text-weight: var(--md-filled-text-field-supporting-text-weight, 400);--_trailing-icon-color: var(--md-filled-text-field-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-size: var(--md-filled-text-field-trailing-icon-size, 24px);--md-filled-field-container-shape-start-start:var(--_container-shape-start-start);--md-filled-field-container-shape-start-end:var(--_container-shape-start-end);--md-filled-field-container-shape-end-end:var(--_container-shape-end-end);--md-filled-field-container-shape-end-start:var(--_container-shape-end-start);--md-filled-field-active-indicator-color:var(--_active-indicator-color);--md-filled-field-active-indicator-height:var(--_active-indicator-height);--md-filled-field-container-color:var(--_container-color);--md-filled-field-container-height:var(--_container-height);--md-filled-field-container-padding-horizontal:var(--_container-padding-horizontal);--md-filled-field-container-padding-vertical:var(--_container-padding-vertical);--md-filled-field-content-color:var(--_input-text-color);--md-filled-field-disabled-active-indicator-color:var(--_disabled-active-indicator-color);--md-filled-field-disabled-active-indicator-height:var(--_disabled-active-indicator-height);--md-filled-field-disabled-active-indicator-opacity:var(--_disabled-active-indicator-opacity);--md-filled-field-disabled-container-color:var(--_disabled-container-color);--md-filled-field-disabled-container-opacity:var(--_disabled-container-opacity);--md-filled-field-disabled-content-color:var(--_disabled-input-text-color);--md-filled-field-disabled-content-opacity:var(--_disabled-input-text-opacity);--md-filled-field-disabled-label-text-color:var(--_disabled-label-text-color);--md-filled-field-disabled-label-text-opacity:var(--_disabled-label-text-opacity);--md-filled-field-disabled-leading-icon-color:var(--_disabled-leading-icon-color);--md-filled-field-disabled-leading-icon-opacity:var(--_disabled-leading-icon-opacity);--md-filled-field-disabled-supporting-text-color:var(--_disabled-supporting-text-color);--md-filled-field-disabled-supporting-text-opacity:var(--_disabled-supporting-text-opacity);--md-filled-field-disabled-trailing-icon-color:var(--_disabled-trailing-icon-color);--md-filled-field-disabled-trailing-icon-opacity:var(--_disabled-trailing-icon-opacity);--md-filled-field-error-active-indicator-color:var(--_error-active-indicator-color);--md-filled-field-error-focus-active-indicator-color:var(--_error-focus-active-indicator-color);--md-filled-field-error-focus-content-color:var(--_error-focus-input-text-color);--md-filled-field-error-focus-label-text-color:var(--_error-focus-label-text-color);--md-filled-field-error-focus-leading-icon-color:var(--_error-focus-leading-icon-color);--md-filled-field-error-focus-supporting-text-color:var(--_error-focus-supporting-text-color);--md-filled-field-error-focus-trailing-icon-color:var(--_error-focus-trailing-icon-color);--md-filled-field-error-hover-active-indicator-color:var(--_error-hover-active-indicator-color);--md-filled-field-error-hover-content-color:var(--_error-hover-input-text-color);--md-filled-field-error-hover-label-text-color:var(--_error-hover-label-text-color);--md-filled-field-error-hover-leading-icon-color:var(--_error-hover-leading-icon-color);--md-filled-field-error-hover-state-layer-color:var(--_error-hover-state-layer-color);--md-filled-field-error-hover-state-layer-opacity:var(--_error-hover-state-layer-opacity);--md-filled-field-error-hover-supporting-text-color:var(--_error-hover-supporting-text-color);--md-filled-field-error-hover-trailing-icon-color:var(--_error-hover-trailing-icon-color);--md-filled-field-error-content-color:var(--_error-input-text-color);--md-filled-field-error-label-text-color:var(--_error-label-text-color);--md-filled-field-error-leading-icon-color:var(--_error-leading-icon-color);--md-filled-field-error-supporting-text-color:var(--_error-supporting-text-color);--md-filled-field-error-trailing-icon-color:var(--_error-trailing-icon-color);--md-filled-field-focus-active-indicator-color:var(--_focus-active-indicator-color);--md-filled-field-focus-active-indicator-height:var(--_focus-active-indicator-height);--md-filled-field-focus-content-color:var(--_focus-input-text-color);--md-filled-field-focus-label-text-color:var(--_focus-label-text-color);--md-filled-field-focus-leading-icon-color:var(--_focus-leading-icon-color);--md-filled-field-focus-supporting-text-color:var(--_focus-supporting-text-color);--md-filled-field-focus-trailing-icon-color:var(--_focus-trailing-icon-color);--md-filled-field-hover-active-indicator-color:var(--_hover-active-indicator-color);--md-filled-field-hover-active-indicator-height:var(--_hover-active-indicator-height);--md-filled-field-hover-content-color:var(--_hover-input-text-color);--md-filled-field-hover-label-text-color:var(--_hover-label-text-color);--md-filled-field-hover-leading-icon-color:var(--_hover-leading-icon-color);--md-filled-field-hover-state-layer-color:var(--_hover-state-layer-color);--md-filled-field-hover-state-layer-opacity:var(--_hover-state-layer-opacity);--md-filled-field-hover-supporting-text-color:var(--_hover-supporting-text-color);--md-filled-field-hover-trailing-icon-color:var(--_hover-trailing-icon-color);--md-filled-field-label-text-color:var(--_label-text-color);--md-filled-field-label-text-font:var(--_label-text-font);--md-filled-field-label-text-line-height:var(--_label-text-line-height);--md-filled-field-label-text-populated-line-height:var(--_label-text-populated-line-height);--md-filled-field-label-text-populated-size:var(--_label-text-populated-size);--md-filled-field-label-text-size:var(--_label-text-size);--md-filled-field-label-text-tracking:var(--_label-text-tracking);--md-filled-field-label-text-weight:var(--_label-text-weight);--md-filled-field-leading-icon-color:var(--_leading-icon-color);--md-filled-field-leading-icon-size:var(--_leading-icon-size);--md-filled-field-supporting-text-color:var(--_supporting-text-color);--md-filled-field-supporting-text-font:var(--_supporting-text-font);--md-filled-field-supporting-text-line-height:var(--_supporting-text-line-height);--md-filled-field-supporting-text-size:var(--_supporting-text-size);--md-filled-field-supporting-text-tracking:var(--_supporting-text-tracking);--md-filled-field-supporting-text-weight:var(--_supporting-text-weight);--md-filled-field-trailing-icon-color:var(--_trailing-icon-color);--md-filled-field-trailing-icon-size:var(--_trailing-icon-size)}/*# sourceMappingURL=filled-styles.css.map */
7
+ export const styles = css `:host{--_container-shape-start-start: var(--md-filled-text-field-container-shape-start-start, 4px);--_container-shape-start-end: var(--md-filled-text-field-container-shape-start-end, 4px);--_container-shape-end-end: var(--md-filled-text-field-container-shape-end-end, 0px);--_container-shape-end-start: var(--md-filled-text-field-container-shape-end-start, 0px);--_container-padding-horizontal: var(--md-filled-text-field-container-padding-horizontal, 16px);--_container-padding-vertical: var(--md-filled-text-field-container-padding-vertical, 8px);--_input-text-prefix-padding: var(--md-filled-text-field-input-text-prefix-padding, 2px);--_input-text-suffix-padding: var(--md-filled-text-field-input-text-suffix-padding, 2px);--_active-indicator-color: var(--md-filled-text-field-active-indicator-color, var(--md-sys-color-on-surface-variant, #49454f));--_active-indicator-height: var(--md-filled-text-field-active-indicator-height, 1px);--_caret-color: var(--md-filled-text-field-caret-color, var(--md-sys-color-primary, #6750a4));--_container-color: var(--md-filled-text-field-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--_container-height: var(--md-filled-text-field-container-height, 56px);--_disabled-active-indicator-color: var(--md-filled-text-field-disabled-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-active-indicator-height: var(--md-filled-text-field-disabled-active-indicator-height, 1px);--_disabled-active-indicator-opacity: var(--md-filled-text-field-disabled-active-indicator-opacity, 0.38);--_disabled-container-color: var(--md-filled-text-field-disabled-container-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-container-opacity: var(--md-filled-text-field-disabled-container-opacity, 0.04);--_disabled-input-text-color: var(--md-filled-text-field-disabled-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-input-text-opacity: var(--md-filled-text-field-disabled-input-text-opacity, 0.38);--_disabled-label-text-color: var(--md-filled-text-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-label-text-opacity: var(--md-filled-text-field-disabled-label-text-opacity, 0.38);--_disabled-leading-icon-color: var(--md-filled-text-field-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-leading-icon-opacity: var(--md-filled-text-field-disabled-leading-icon-opacity, 0.38);--_disabled-supporting-text-color: var(--md-filled-text-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-supporting-text-opacity: var(--md-filled-text-field-disabled-supporting-text-opacity, 0.38);--_disabled-trailing-icon-color: var(--md-filled-text-field-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-trailing-icon-opacity: var(--md-filled-text-field-disabled-trailing-icon-opacity, 0.38);--_error-active-indicator-color: var(--md-filled-text-field-error-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-focus-active-indicator-color: var(--md-filled-text-field-error-focus-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-focus-caret-color: var(--md-filled-text-field-error-focus-caret-color, var(--md-sys-color-error, #b3261e));--_error-focus-input-text-color: var(--md-filled-text-field-error-focus-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-focus-label-text-color: var(--md-filled-text-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-leading-icon-color: var(--md-filled-text-field-error-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-supporting-text-color: var(--md-filled-text-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-trailing-icon-color: var(--md-filled-text-field-error-focus-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_error-hover-active-indicator-color: var(--md-filled-text-field-error-hover-active-indicator-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-input-text-color: var(--md-filled-text-field-error-hover-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-hover-label-text-color: var(--md-filled-text-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-leading-icon-color: var(--md-filled-text-field-error-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-hover-state-layer-color: var(--md-filled-text-field-error-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-hover-state-layer-opacity: var(--md-filled-text-field-error-hover-state-layer-opacity, 0.08);--_error-hover-supporting-text-color: var(--md-filled-text-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-hover-trailing-icon-color: var(--md-filled-text-field-error-hover-trailing-icon-color, var(--md-sys-color-on-error-container, #410e0b));--_error-input-text-color: var(--md-filled-text-field-error-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-label-text-color: var(--md-filled-text-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_error-leading-icon-color: var(--md-filled-text-field-error-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-supporting-text-color: var(--md-filled-text-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-trailing-icon-color: var(--md-filled-text-field-error-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_focus-active-indicator-color: var(--md-filled-text-field-focus-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_focus-active-indicator-height: var(--md-filled-text-field-focus-active-indicator-height, 2px);--_focus-input-text-color: var(--md-filled-text-field-focus-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_focus-label-text-color: var(--md-filled-text-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-filled-text-field-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-supporting-text-color: var(--md-filled-text-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-icon-color: var(--md-filled-text-field-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-active-indicator-color: var(--md-filled-text-field-hover-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-active-indicator-height: var(--md-filled-text-field-hover-active-indicator-height, 1px);--_hover-input-text-color: var(--md-filled-text-field-hover-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-label-text-color: var(--md-filled-text-field-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-leading-icon-color: var(--md-filled-text-field-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-filled-text-field-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-state-layer-opacity: var(--md-filled-text-field-hover-state-layer-opacity, 0.08);--_hover-supporting-text-color: var(--md-filled-text-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-filled-text-field-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-color: var(--md-filled-text-field-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_input-text-font: var(--md-filled-text-field-input-text-font, Roboto);--_input-text-line-height: var(--md-filled-text-field-input-text-line-height, 1.5rem);--_input-text-placeholder-color: var(--md-filled-text-field-input-text-placeholder-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-prefix-color: var(--md-filled-text-field-input-text-prefix-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-size: var(--md-filled-text-field-input-text-size, 1rem);--_input-text-suffix-color: var(--md-filled-text-field-input-text-suffix-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-tracking: var(--md-filled-text-field-input-text-tracking, 0.031rem);--_input-text-type: var(--md-filled-text-field-input-text-type, 400 1rem / 1.5rem Roboto);--_input-text-weight: var(--md-filled-text-field-input-text-weight, 400);--_label-text-color: var(--md-filled-text-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-font: var(--md-filled-text-field-label-text-font, Roboto);--_label-text-line-height: var(--md-filled-text-field-label-text-line-height, 1.5rem);--_label-text-populated-line-height: var(--md-filled-text-field-label-text-populated-line-height, 1rem);--_label-text-populated-size: var(--md-filled-text-field-label-text-populated-size, 0.75rem);--_label-text-size: var(--md-filled-text-field-label-text-size, 1rem);--_label-text-tracking: var(--md-filled-text-field-label-text-tracking, 0.031rem);--_label-text-type: var(--md-filled-text-field-label-text-type, 400 1rem / 1.5rem Roboto);--_label-text-weight: var(--md-filled-text-field-label-text-weight, 400);--_leading-icon-color: var(--md-filled-text-field-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-icon-size: var(--md-filled-text-field-leading-icon-size, 24px);--_supporting-text-color: var(--md-filled-text-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-filled-text-field-supporting-text-font, Roboto);--_supporting-text-line-height: var(--md-filled-text-field-supporting-text-line-height, 1rem);--_supporting-text-size: var(--md-filled-text-field-supporting-text-size, 0.75rem);--_supporting-text-tracking: var(--md-filled-text-field-supporting-text-tracking, 0.025rem);--_supporting-text-type: var(--md-filled-text-field-supporting-text-type, 400 0.75rem / 1rem Roboto);--_supporting-text-weight: var(--md-filled-text-field-supporting-text-weight, 400);--_trailing-icon-color: var(--md-filled-text-field-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-size: var(--md-filled-text-field-trailing-icon-size, 24px);--md-filled-field-container-shape-start-start:var(--_container-shape-start-start);--md-filled-field-container-shape-start-end:var(--_container-shape-start-end);--md-filled-field-container-shape-end-end:var(--_container-shape-end-end);--md-filled-field-container-shape-end-start:var(--_container-shape-end-start);--md-filled-field-active-indicator-color:var(--_active-indicator-color);--md-filled-field-active-indicator-height:var(--_active-indicator-height);--md-filled-field-container-color:var(--_container-color);--md-filled-field-container-height:var(--_container-height);--md-filled-field-container-padding-horizontal:var(--_container-padding-horizontal);--md-filled-field-container-padding-vertical:var(--_container-padding-vertical);--md-filled-field-content-color:var(--_input-text-color);--md-filled-field-disabled-active-indicator-color:var(--_disabled-active-indicator-color);--md-filled-field-disabled-active-indicator-height:var(--_disabled-active-indicator-height);--md-filled-field-disabled-active-indicator-opacity:var(--_disabled-active-indicator-opacity);--md-filled-field-disabled-container-color:var(--_disabled-container-color);--md-filled-field-disabled-container-opacity:var(--_disabled-container-opacity);--md-filled-field-disabled-content-color:var(--_disabled-input-text-color);--md-filled-field-disabled-content-opacity:var(--_disabled-input-text-opacity);--md-filled-field-disabled-label-text-color:var(--_disabled-label-text-color);--md-filled-field-disabled-label-text-opacity:var(--_disabled-label-text-opacity);--md-filled-field-disabled-leading-icon-color:var(--_disabled-leading-icon-color);--md-filled-field-disabled-leading-icon-opacity:var(--_disabled-leading-icon-opacity);--md-filled-field-disabled-supporting-text-color:var(--_disabled-supporting-text-color);--md-filled-field-disabled-supporting-text-opacity:var(--_disabled-supporting-text-opacity);--md-filled-field-disabled-trailing-icon-color:var(--_disabled-trailing-icon-color);--md-filled-field-disabled-trailing-icon-opacity:var(--_disabled-trailing-icon-opacity);--md-filled-field-error-active-indicator-color:var(--_error-active-indicator-color);--md-filled-field-error-focus-active-indicator-color:var(--_error-focus-active-indicator-color);--md-filled-field-error-focus-content-color:var(--_error-focus-input-text-color);--md-filled-field-error-focus-label-text-color:var(--_error-focus-label-text-color);--md-filled-field-error-focus-leading-icon-color:var(--_error-focus-leading-icon-color);--md-filled-field-error-focus-supporting-text-color:var(--_error-focus-supporting-text-color);--md-filled-field-error-focus-trailing-icon-color:var(--_error-focus-trailing-icon-color);--md-filled-field-error-hover-active-indicator-color:var(--_error-hover-active-indicator-color);--md-filled-field-error-hover-content-color:var(--_error-hover-input-text-color);--md-filled-field-error-hover-label-text-color:var(--_error-hover-label-text-color);--md-filled-field-error-hover-leading-icon-color:var(--_error-hover-leading-icon-color);--md-filled-field-error-hover-state-layer-color:var(--_error-hover-state-layer-color);--md-filled-field-error-hover-state-layer-opacity:var(--_error-hover-state-layer-opacity);--md-filled-field-error-hover-supporting-text-color:var(--_error-hover-supporting-text-color);--md-filled-field-error-hover-trailing-icon-color:var(--_error-hover-trailing-icon-color);--md-filled-field-error-content-color:var(--_error-input-text-color);--md-filled-field-error-label-text-color:var(--_error-label-text-color);--md-filled-field-error-leading-icon-color:var(--_error-leading-icon-color);--md-filled-field-error-supporting-text-color:var(--_error-supporting-text-color);--md-filled-field-error-trailing-icon-color:var(--_error-trailing-icon-color);--md-filled-field-focus-active-indicator-color:var(--_focus-active-indicator-color);--md-filled-field-focus-active-indicator-height:var(--_focus-active-indicator-height);--md-filled-field-focus-content-color:var(--_focus-input-text-color);--md-filled-field-focus-label-text-color:var(--_focus-label-text-color);--md-filled-field-focus-leading-icon-color:var(--_focus-leading-icon-color);--md-filled-field-focus-supporting-text-color:var(--_focus-supporting-text-color);--md-filled-field-focus-trailing-icon-color:var(--_focus-trailing-icon-color);--md-filled-field-hover-active-indicator-color:var(--_hover-active-indicator-color);--md-filled-field-hover-active-indicator-height:var(--_hover-active-indicator-height);--md-filled-field-hover-content-color:var(--_hover-input-text-color);--md-filled-field-hover-label-text-color:var(--_hover-label-text-color);--md-filled-field-hover-leading-icon-color:var(--_hover-leading-icon-color);--md-filled-field-hover-state-layer-color:var(--_hover-state-layer-color);--md-filled-field-hover-state-layer-opacity:var(--_hover-state-layer-opacity);--md-filled-field-hover-supporting-text-color:var(--_hover-supporting-text-color);--md-filled-field-hover-trailing-icon-color:var(--_hover-trailing-icon-color);--md-filled-field-label-text-color:var(--_label-text-color);--md-filled-field-label-text-font:var(--_label-text-font);--md-filled-field-label-text-line-height:var(--_label-text-line-height);--md-filled-field-label-text-populated-line-height:var(--_label-text-populated-line-height);--md-filled-field-label-text-populated-size:var(--_label-text-populated-size);--md-filled-field-label-text-size:var(--_label-text-size);--md-filled-field-label-text-tracking:var(--_label-text-tracking);--md-filled-field-label-text-weight:var(--_label-text-weight);--md-filled-field-leading-icon-color:var(--_leading-icon-color);--md-filled-field-leading-icon-size:var(--_leading-icon-size);--md-filled-field-supporting-text-color:var(--_supporting-text-color);--md-filled-field-supporting-text-font:var(--_supporting-text-font);--md-filled-field-supporting-text-line-height:var(--_supporting-text-line-height);--md-filled-field-supporting-text-size:var(--_supporting-text-size);--md-filled-field-supporting-text-tracking:var(--_supporting-text-tracking);--md-filled-field-supporting-text-weight:var(--_supporting-text-weight);--md-filled-field-trailing-icon-color:var(--_trailing-icon-color);--md-filled-field-trailing-icon-size:var(--_trailing-icon-size)}/*# sourceMappingURL=filled-styles.css.map */
8
8
  `;
9
9
  //# sourceMappingURL=filled-styles.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"filled-styles.css.js","sourceRoot":"","sources":["filled-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-shape-start-start: var(--md-filled-text-field-container-shape-start-start, 4px);--_container-shape-start-end: var(--md-filled-text-field-container-shape-start-end, 4px);--_container-shape-end-end: var(--md-filled-text-field-container-shape-end-end, 0px);--_container-shape-end-start: var(--md-filled-text-field-container-shape-end-start, 0px);--_container-padding-horizontal: var(--md-filled-text-field-container-padding-horizontal, 16px);--_container-padding-vertical: var(--md-filled-text-field-container-padding-vertical, 8px);--_input-text-prefix-padding: var(--md-filled-text-field-input-text-prefix-padding, 2px);--_input-text-suffix-padding: var(--md-filled-text-field-input-text-suffix-padding, 2px);--_active-indicator-color: var(--md-filled-text-field-active-indicator-color, var(--md-sys-color-on-surface-variant, #49454f));--_active-indicator-height: var(--md-filled-text-field-active-indicator-height, 1px);--_caret-color: var(--md-filled-text-field-caret-color, var(--md-sys-color-primary, #6750a4));--_container-color: var(--md-filled-text-field-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--_container-height: var(--md-filled-text-field-container-height, 56px);--_disabled-active-indicator-color: var(--md-filled-text-field-disabled-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-active-indicator-height: var(--md-filled-text-field-disabled-active-indicator-height, 1px);--_disabled-active-indicator-opacity: var(--md-filled-text-field-disabled-active-indicator-opacity, 0.38);--_disabled-container-color: var(--md-filled-text-field-disabled-container-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-container-opacity: var(--md-filled-text-field-disabled-container-opacity, 0.04);--_disabled-input-text-color: var(--md-filled-text-field-disabled-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-input-text-opacity: var(--md-filled-text-field-disabled-input-text-opacity, 0.38);--_disabled-label-text-color: var(--md-filled-text-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-label-text-opacity: var(--md-filled-text-field-disabled-label-text-opacity, 0.38);--_disabled-leading-icon-color: var(--md-filled-text-field-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-leading-icon-opacity: var(--md-filled-text-field-disabled-leading-icon-opacity, 0.38);--_disabled-supporting-text-color: var(--md-filled-text-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-supporting-text-opacity: var(--md-filled-text-field-disabled-supporting-text-opacity, 0.38);--_disabled-trailing-icon-color: var(--md-filled-text-field-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-trailing-icon-opacity: var(--md-filled-text-field-disabled-trailing-icon-opacity, 0.38);--_error-active-indicator-color: var(--md-filled-text-field-error-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-focus-active-indicator-color: var(--md-filled-text-field-error-focus-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-focus-caret-color: var(--md-filled-text-field-error-focus-caret-color, var(--md-sys-color-error, #b3261e));--_error-focus-input-text-color: var(--md-filled-text-field-error-focus-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-focus-label-text-color: var(--md-filled-text-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-leading-icon-color: var(--md-filled-text-field-error-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-supporting-text-color: var(--md-filled-text-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-trailing-icon-color: var(--md-filled-text-field-error-focus-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_error-hover-active-indicator-color: var(--md-filled-text-field-error-hover-active-indicator-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-input-text-color: var(--md-filled-text-field-error-hover-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-hover-label-text-color: var(--md-filled-text-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-leading-icon-color: var(--md-filled-text-field-error-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-hover-state-layer-color: var(--md-filled-text-field-error-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-hover-state-layer-opacity: var(--md-filled-text-field-error-hover-state-layer-opacity, 0.08);--_error-hover-supporting-text-color: var(--md-filled-text-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-hover-trailing-icon-color: var(--md-filled-text-field-error-hover-trailing-icon-color, var(--md-sys-color-on-error-container, #410e0b));--_error-input-text-color: var(--md-filled-text-field-error-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-label-text-color: var(--md-filled-text-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_error-leading-icon-color: var(--md-filled-text-field-error-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-supporting-text-color: var(--md-filled-text-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-trailing-icon-color: var(--md-filled-text-field-error-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_focus-active-indicator-color: var(--md-filled-text-field-focus-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_focus-active-indicator-height: var(--md-filled-text-field-focus-active-indicator-height, 2px);--_focus-input-text-color: var(--md-filled-text-field-focus-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_focus-label-text-color: var(--md-filled-text-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-filled-text-field-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-supporting-text-color: var(--md-filled-text-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-icon-color: var(--md-filled-text-field-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-active-indicator-color: var(--md-filled-text-field-hover-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-active-indicator-height: var(--md-filled-text-field-hover-active-indicator-height, 1px);--_hover-input-text-color: var(--md-filled-text-field-hover-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-label-text-color: var(--md-filled-text-field-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-leading-icon-color: var(--md-filled-text-field-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-filled-text-field-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-state-layer-opacity: var(--md-filled-text-field-hover-state-layer-opacity, 0.08);--_hover-supporting-text-color: var(--md-filled-text-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-filled-text-field-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-color: var(--md-filled-text-field-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_input-text-font: var(--md-filled-text-field-input-text-font, Roboto);--_input-text-line-height: var(--md-filled-text-field-input-text-line-height, 1.5rem);--_input-text-placeholder-color: var(--md-filled-text-field-input-text-placeholder-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-prefix-color: var(--md-filled-text-field-input-text-prefix-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-size: var(--md-filled-text-field-input-text-size, 1rem);--_input-text-suffix-color: var(--md-filled-text-field-input-text-suffix-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-tracking: var(--md-filled-text-field-input-text-tracking, 0.031rem);--_input-text-type: var(--md-filled-text-field-input-text-type, 400 1rem / 1.5rem Roboto);--_input-text-weight: var(--md-filled-text-field-input-text-weight, 400);--_label-text-color: var(--md-filled-text-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-font: var(--md-filled-text-field-label-text-font, Roboto);--_label-text-line-height: var(--md-filled-text-field-label-text-line-height, 1.5rem);--_label-text-populated-line-height: var(--md-filled-text-field-label-text-populated-line-height, 1rem);--_label-text-populated-size: var(--md-filled-text-field-label-text-populated-size, 0.75rem);--_label-text-size: var(--md-filled-text-field-label-text-size, 1rem);--_label-text-tracking: var(--md-filled-text-field-label-text-tracking, 0.031rem);--_label-text-type: var(--md-filled-text-field-label-text-type, 400 1rem / 1.5rem Roboto);--_label-text-weight: var(--md-filled-text-field-label-text-weight, 400);--_leading-icon-color: var(--md-filled-text-field-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-icon-size: var(--md-filled-text-field-leading-icon-size, 20px);--_supporting-text-color: var(--md-filled-text-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-filled-text-field-supporting-text-font, Roboto);--_supporting-text-line-height: var(--md-filled-text-field-supporting-text-line-height, 1rem);--_supporting-text-size: var(--md-filled-text-field-supporting-text-size, 0.75rem);--_supporting-text-tracking: var(--md-filled-text-field-supporting-text-tracking, 0.025rem);--_supporting-text-type: var(--md-filled-text-field-supporting-text-type, 400 0.75rem / 1rem Roboto);--_supporting-text-weight: var(--md-filled-text-field-supporting-text-weight, 400);--_trailing-icon-color: var(--md-filled-text-field-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-size: var(--md-filled-text-field-trailing-icon-size, 24px);--md-filled-field-container-shape-start-start:var(--_container-shape-start-start);--md-filled-field-container-shape-start-end:var(--_container-shape-start-end);--md-filled-field-container-shape-end-end:var(--_container-shape-end-end);--md-filled-field-container-shape-end-start:var(--_container-shape-end-start);--md-filled-field-active-indicator-color:var(--_active-indicator-color);--md-filled-field-active-indicator-height:var(--_active-indicator-height);--md-filled-field-container-color:var(--_container-color);--md-filled-field-container-height:var(--_container-height);--md-filled-field-container-padding-horizontal:var(--_container-padding-horizontal);--md-filled-field-container-padding-vertical:var(--_container-padding-vertical);--md-filled-field-content-color:var(--_input-text-color);--md-filled-field-disabled-active-indicator-color:var(--_disabled-active-indicator-color);--md-filled-field-disabled-active-indicator-height:var(--_disabled-active-indicator-height);--md-filled-field-disabled-active-indicator-opacity:var(--_disabled-active-indicator-opacity);--md-filled-field-disabled-container-color:var(--_disabled-container-color);--md-filled-field-disabled-container-opacity:var(--_disabled-container-opacity);--md-filled-field-disabled-content-color:var(--_disabled-input-text-color);--md-filled-field-disabled-content-opacity:var(--_disabled-input-text-opacity);--md-filled-field-disabled-label-text-color:var(--_disabled-label-text-color);--md-filled-field-disabled-label-text-opacity:var(--_disabled-label-text-opacity);--md-filled-field-disabled-leading-icon-color:var(--_disabled-leading-icon-color);--md-filled-field-disabled-leading-icon-opacity:var(--_disabled-leading-icon-opacity);--md-filled-field-disabled-supporting-text-color:var(--_disabled-supporting-text-color);--md-filled-field-disabled-supporting-text-opacity:var(--_disabled-supporting-text-opacity);--md-filled-field-disabled-trailing-icon-color:var(--_disabled-trailing-icon-color);--md-filled-field-disabled-trailing-icon-opacity:var(--_disabled-trailing-icon-opacity);--md-filled-field-error-active-indicator-color:var(--_error-active-indicator-color);--md-filled-field-error-focus-active-indicator-color:var(--_error-focus-active-indicator-color);--md-filled-field-error-focus-content-color:var(--_error-focus-input-text-color);--md-filled-field-error-focus-label-text-color:var(--_error-focus-label-text-color);--md-filled-field-error-focus-leading-icon-color:var(--_error-focus-leading-icon-color);--md-filled-field-error-focus-supporting-text-color:var(--_error-focus-supporting-text-color);--md-filled-field-error-focus-trailing-icon-color:var(--_error-focus-trailing-icon-color);--md-filled-field-error-hover-active-indicator-color:var(--_error-hover-active-indicator-color);--md-filled-field-error-hover-content-color:var(--_error-hover-input-text-color);--md-filled-field-error-hover-label-text-color:var(--_error-hover-label-text-color);--md-filled-field-error-hover-leading-icon-color:var(--_error-hover-leading-icon-color);--md-filled-field-error-hover-state-layer-color:var(--_error-hover-state-layer-color);--md-filled-field-error-hover-state-layer-opacity:var(--_error-hover-state-layer-opacity);--md-filled-field-error-hover-supporting-text-color:var(--_error-hover-supporting-text-color);--md-filled-field-error-hover-trailing-icon-color:var(--_error-hover-trailing-icon-color);--md-filled-field-error-content-color:var(--_error-input-text-color);--md-filled-field-error-label-text-color:var(--_error-label-text-color);--md-filled-field-error-leading-icon-color:var(--_error-leading-icon-color);--md-filled-field-error-supporting-text-color:var(--_error-supporting-text-color);--md-filled-field-error-trailing-icon-color:var(--_error-trailing-icon-color);--md-filled-field-focus-active-indicator-color:var(--_focus-active-indicator-color);--md-filled-field-focus-active-indicator-height:var(--_focus-active-indicator-height);--md-filled-field-focus-content-color:var(--_focus-input-text-color);--md-filled-field-focus-label-text-color:var(--_focus-label-text-color);--md-filled-field-focus-leading-icon-color:var(--_focus-leading-icon-color);--md-filled-field-focus-supporting-text-color:var(--_focus-supporting-text-color);--md-filled-field-focus-trailing-icon-color:var(--_focus-trailing-icon-color);--md-filled-field-hover-active-indicator-color:var(--_hover-active-indicator-color);--md-filled-field-hover-active-indicator-height:var(--_hover-active-indicator-height);--md-filled-field-hover-content-color:var(--_hover-input-text-color);--md-filled-field-hover-label-text-color:var(--_hover-label-text-color);--md-filled-field-hover-leading-icon-color:var(--_hover-leading-icon-color);--md-filled-field-hover-state-layer-color:var(--_hover-state-layer-color);--md-filled-field-hover-state-layer-opacity:var(--_hover-state-layer-opacity);--md-filled-field-hover-supporting-text-color:var(--_hover-supporting-text-color);--md-filled-field-hover-trailing-icon-color:var(--_hover-trailing-icon-color);--md-filled-field-label-text-color:var(--_label-text-color);--md-filled-field-label-text-font:var(--_label-text-font);--md-filled-field-label-text-line-height:var(--_label-text-line-height);--md-filled-field-label-text-populated-line-height:var(--_label-text-populated-line-height);--md-filled-field-label-text-populated-size:var(--_label-text-populated-size);--md-filled-field-label-text-size:var(--_label-text-size);--md-filled-field-label-text-tracking:var(--_label-text-tracking);--md-filled-field-label-text-weight:var(--_label-text-weight);--md-filled-field-leading-icon-color:var(--_leading-icon-color);--md-filled-field-leading-icon-size:var(--_leading-icon-size);--md-filled-field-supporting-text-color:var(--_supporting-text-color);--md-filled-field-supporting-text-font:var(--_supporting-text-font);--md-filled-field-supporting-text-line-height:var(--_supporting-text-line-height);--md-filled-field-supporting-text-size:var(--_supporting-text-size);--md-filled-field-supporting-text-tracking:var(--_supporting-text-tracking);--md-filled-field-supporting-text-weight:var(--_supporting-text-weight);--md-filled-field-trailing-icon-color:var(--_trailing-icon-color);--md-filled-field-trailing-icon-size:var(--_trailing-icon-size)}/*# sourceMappingURL=filled-styles.css.map */\n`;\n "]}
1
+ {"version":3,"file":"filled-styles.css.js","sourceRoot":"","sources":["filled-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-shape-start-start: var(--md-filled-text-field-container-shape-start-start, 4px);--_container-shape-start-end: var(--md-filled-text-field-container-shape-start-end, 4px);--_container-shape-end-end: var(--md-filled-text-field-container-shape-end-end, 0px);--_container-shape-end-start: var(--md-filled-text-field-container-shape-end-start, 0px);--_container-padding-horizontal: var(--md-filled-text-field-container-padding-horizontal, 16px);--_container-padding-vertical: var(--md-filled-text-field-container-padding-vertical, 8px);--_input-text-prefix-padding: var(--md-filled-text-field-input-text-prefix-padding, 2px);--_input-text-suffix-padding: var(--md-filled-text-field-input-text-suffix-padding, 2px);--_active-indicator-color: var(--md-filled-text-field-active-indicator-color, var(--md-sys-color-on-surface-variant, #49454f));--_active-indicator-height: var(--md-filled-text-field-active-indicator-height, 1px);--_caret-color: var(--md-filled-text-field-caret-color, var(--md-sys-color-primary, #6750a4));--_container-color: var(--md-filled-text-field-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--_container-height: var(--md-filled-text-field-container-height, 56px);--_disabled-active-indicator-color: var(--md-filled-text-field-disabled-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-active-indicator-height: var(--md-filled-text-field-disabled-active-indicator-height, 1px);--_disabled-active-indicator-opacity: var(--md-filled-text-field-disabled-active-indicator-opacity, 0.38);--_disabled-container-color: var(--md-filled-text-field-disabled-container-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-container-opacity: var(--md-filled-text-field-disabled-container-opacity, 0.04);--_disabled-input-text-color: var(--md-filled-text-field-disabled-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-input-text-opacity: var(--md-filled-text-field-disabled-input-text-opacity, 0.38);--_disabled-label-text-color: var(--md-filled-text-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-label-text-opacity: var(--md-filled-text-field-disabled-label-text-opacity, 0.38);--_disabled-leading-icon-color: var(--md-filled-text-field-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-leading-icon-opacity: var(--md-filled-text-field-disabled-leading-icon-opacity, 0.38);--_disabled-supporting-text-color: var(--md-filled-text-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-supporting-text-opacity: var(--md-filled-text-field-disabled-supporting-text-opacity, 0.38);--_disabled-trailing-icon-color: var(--md-filled-text-field-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-trailing-icon-opacity: var(--md-filled-text-field-disabled-trailing-icon-opacity, 0.38);--_error-active-indicator-color: var(--md-filled-text-field-error-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-focus-active-indicator-color: var(--md-filled-text-field-error-focus-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-focus-caret-color: var(--md-filled-text-field-error-focus-caret-color, var(--md-sys-color-error, #b3261e));--_error-focus-input-text-color: var(--md-filled-text-field-error-focus-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-focus-label-text-color: var(--md-filled-text-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-leading-icon-color: var(--md-filled-text-field-error-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-supporting-text-color: var(--md-filled-text-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-trailing-icon-color: var(--md-filled-text-field-error-focus-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_error-hover-active-indicator-color: var(--md-filled-text-field-error-hover-active-indicator-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-input-text-color: var(--md-filled-text-field-error-hover-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-hover-label-text-color: var(--md-filled-text-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-leading-icon-color: var(--md-filled-text-field-error-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-hover-state-layer-color: var(--md-filled-text-field-error-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-hover-state-layer-opacity: var(--md-filled-text-field-error-hover-state-layer-opacity, 0.08);--_error-hover-supporting-text-color: var(--md-filled-text-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-hover-trailing-icon-color: var(--md-filled-text-field-error-hover-trailing-icon-color, var(--md-sys-color-on-error-container, #410e0b));--_error-input-text-color: var(--md-filled-text-field-error-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-label-text-color: var(--md-filled-text-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_error-leading-icon-color: var(--md-filled-text-field-error-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-supporting-text-color: var(--md-filled-text-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-trailing-icon-color: var(--md-filled-text-field-error-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_focus-active-indicator-color: var(--md-filled-text-field-focus-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_focus-active-indicator-height: var(--md-filled-text-field-focus-active-indicator-height, 2px);--_focus-input-text-color: var(--md-filled-text-field-focus-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_focus-label-text-color: var(--md-filled-text-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-filled-text-field-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-supporting-text-color: var(--md-filled-text-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-icon-color: var(--md-filled-text-field-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-active-indicator-color: var(--md-filled-text-field-hover-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-active-indicator-height: var(--md-filled-text-field-hover-active-indicator-height, 1px);--_hover-input-text-color: var(--md-filled-text-field-hover-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-label-text-color: var(--md-filled-text-field-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-leading-icon-color: var(--md-filled-text-field-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-filled-text-field-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-state-layer-opacity: var(--md-filled-text-field-hover-state-layer-opacity, 0.08);--_hover-supporting-text-color: var(--md-filled-text-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-filled-text-field-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-color: var(--md-filled-text-field-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_input-text-font: var(--md-filled-text-field-input-text-font, Roboto);--_input-text-line-height: var(--md-filled-text-field-input-text-line-height, 1.5rem);--_input-text-placeholder-color: var(--md-filled-text-field-input-text-placeholder-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-prefix-color: var(--md-filled-text-field-input-text-prefix-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-size: var(--md-filled-text-field-input-text-size, 1rem);--_input-text-suffix-color: var(--md-filled-text-field-input-text-suffix-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-tracking: var(--md-filled-text-field-input-text-tracking, 0.031rem);--_input-text-type: var(--md-filled-text-field-input-text-type, 400 1rem / 1.5rem Roboto);--_input-text-weight: var(--md-filled-text-field-input-text-weight, 400);--_label-text-color: var(--md-filled-text-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-font: var(--md-filled-text-field-label-text-font, Roboto);--_label-text-line-height: var(--md-filled-text-field-label-text-line-height, 1.5rem);--_label-text-populated-line-height: var(--md-filled-text-field-label-text-populated-line-height, 1rem);--_label-text-populated-size: var(--md-filled-text-field-label-text-populated-size, 0.75rem);--_label-text-size: var(--md-filled-text-field-label-text-size, 1rem);--_label-text-tracking: var(--md-filled-text-field-label-text-tracking, 0.031rem);--_label-text-type: var(--md-filled-text-field-label-text-type, 400 1rem / 1.5rem Roboto);--_label-text-weight: var(--md-filled-text-field-label-text-weight, 400);--_leading-icon-color: var(--md-filled-text-field-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-icon-size: var(--md-filled-text-field-leading-icon-size, 24px);--_supporting-text-color: var(--md-filled-text-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-filled-text-field-supporting-text-font, Roboto);--_supporting-text-line-height: var(--md-filled-text-field-supporting-text-line-height, 1rem);--_supporting-text-size: var(--md-filled-text-field-supporting-text-size, 0.75rem);--_supporting-text-tracking: var(--md-filled-text-field-supporting-text-tracking, 0.025rem);--_supporting-text-type: var(--md-filled-text-field-supporting-text-type, 400 0.75rem / 1rem Roboto);--_supporting-text-weight: var(--md-filled-text-field-supporting-text-weight, 400);--_trailing-icon-color: var(--md-filled-text-field-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-size: var(--md-filled-text-field-trailing-icon-size, 24px);--md-filled-field-container-shape-start-start:var(--_container-shape-start-start);--md-filled-field-container-shape-start-end:var(--_container-shape-start-end);--md-filled-field-container-shape-end-end:var(--_container-shape-end-end);--md-filled-field-container-shape-end-start:var(--_container-shape-end-start);--md-filled-field-active-indicator-color:var(--_active-indicator-color);--md-filled-field-active-indicator-height:var(--_active-indicator-height);--md-filled-field-container-color:var(--_container-color);--md-filled-field-container-height:var(--_container-height);--md-filled-field-container-padding-horizontal:var(--_container-padding-horizontal);--md-filled-field-container-padding-vertical:var(--_container-padding-vertical);--md-filled-field-content-color:var(--_input-text-color);--md-filled-field-disabled-active-indicator-color:var(--_disabled-active-indicator-color);--md-filled-field-disabled-active-indicator-height:var(--_disabled-active-indicator-height);--md-filled-field-disabled-active-indicator-opacity:var(--_disabled-active-indicator-opacity);--md-filled-field-disabled-container-color:var(--_disabled-container-color);--md-filled-field-disabled-container-opacity:var(--_disabled-container-opacity);--md-filled-field-disabled-content-color:var(--_disabled-input-text-color);--md-filled-field-disabled-content-opacity:var(--_disabled-input-text-opacity);--md-filled-field-disabled-label-text-color:var(--_disabled-label-text-color);--md-filled-field-disabled-label-text-opacity:var(--_disabled-label-text-opacity);--md-filled-field-disabled-leading-icon-color:var(--_disabled-leading-icon-color);--md-filled-field-disabled-leading-icon-opacity:var(--_disabled-leading-icon-opacity);--md-filled-field-disabled-supporting-text-color:var(--_disabled-supporting-text-color);--md-filled-field-disabled-supporting-text-opacity:var(--_disabled-supporting-text-opacity);--md-filled-field-disabled-trailing-icon-color:var(--_disabled-trailing-icon-color);--md-filled-field-disabled-trailing-icon-opacity:var(--_disabled-trailing-icon-opacity);--md-filled-field-error-active-indicator-color:var(--_error-active-indicator-color);--md-filled-field-error-focus-active-indicator-color:var(--_error-focus-active-indicator-color);--md-filled-field-error-focus-content-color:var(--_error-focus-input-text-color);--md-filled-field-error-focus-label-text-color:var(--_error-focus-label-text-color);--md-filled-field-error-focus-leading-icon-color:var(--_error-focus-leading-icon-color);--md-filled-field-error-focus-supporting-text-color:var(--_error-focus-supporting-text-color);--md-filled-field-error-focus-trailing-icon-color:var(--_error-focus-trailing-icon-color);--md-filled-field-error-hover-active-indicator-color:var(--_error-hover-active-indicator-color);--md-filled-field-error-hover-content-color:var(--_error-hover-input-text-color);--md-filled-field-error-hover-label-text-color:var(--_error-hover-label-text-color);--md-filled-field-error-hover-leading-icon-color:var(--_error-hover-leading-icon-color);--md-filled-field-error-hover-state-layer-color:var(--_error-hover-state-layer-color);--md-filled-field-error-hover-state-layer-opacity:var(--_error-hover-state-layer-opacity);--md-filled-field-error-hover-supporting-text-color:var(--_error-hover-supporting-text-color);--md-filled-field-error-hover-trailing-icon-color:var(--_error-hover-trailing-icon-color);--md-filled-field-error-content-color:var(--_error-input-text-color);--md-filled-field-error-label-text-color:var(--_error-label-text-color);--md-filled-field-error-leading-icon-color:var(--_error-leading-icon-color);--md-filled-field-error-supporting-text-color:var(--_error-supporting-text-color);--md-filled-field-error-trailing-icon-color:var(--_error-trailing-icon-color);--md-filled-field-focus-active-indicator-color:var(--_focus-active-indicator-color);--md-filled-field-focus-active-indicator-height:var(--_focus-active-indicator-height);--md-filled-field-focus-content-color:var(--_focus-input-text-color);--md-filled-field-focus-label-text-color:var(--_focus-label-text-color);--md-filled-field-focus-leading-icon-color:var(--_focus-leading-icon-color);--md-filled-field-focus-supporting-text-color:var(--_focus-supporting-text-color);--md-filled-field-focus-trailing-icon-color:var(--_focus-trailing-icon-color);--md-filled-field-hover-active-indicator-color:var(--_hover-active-indicator-color);--md-filled-field-hover-active-indicator-height:var(--_hover-active-indicator-height);--md-filled-field-hover-content-color:var(--_hover-input-text-color);--md-filled-field-hover-label-text-color:var(--_hover-label-text-color);--md-filled-field-hover-leading-icon-color:var(--_hover-leading-icon-color);--md-filled-field-hover-state-layer-color:var(--_hover-state-layer-color);--md-filled-field-hover-state-layer-opacity:var(--_hover-state-layer-opacity);--md-filled-field-hover-supporting-text-color:var(--_hover-supporting-text-color);--md-filled-field-hover-trailing-icon-color:var(--_hover-trailing-icon-color);--md-filled-field-label-text-color:var(--_label-text-color);--md-filled-field-label-text-font:var(--_label-text-font);--md-filled-field-label-text-line-height:var(--_label-text-line-height);--md-filled-field-label-text-populated-line-height:var(--_label-text-populated-line-height);--md-filled-field-label-text-populated-size:var(--_label-text-populated-size);--md-filled-field-label-text-size:var(--_label-text-size);--md-filled-field-label-text-tracking:var(--_label-text-tracking);--md-filled-field-label-text-weight:var(--_label-text-weight);--md-filled-field-leading-icon-color:var(--_leading-icon-color);--md-filled-field-leading-icon-size:var(--_leading-icon-size);--md-filled-field-supporting-text-color:var(--_supporting-text-color);--md-filled-field-supporting-text-font:var(--_supporting-text-font);--md-filled-field-supporting-text-line-height:var(--_supporting-text-line-height);--md-filled-field-supporting-text-size:var(--_supporting-text-size);--md-filled-field-supporting-text-tracking:var(--_supporting-text-tracking);--md-filled-field-supporting-text-weight:var(--_supporting-text-weight);--md-filled-field-trailing-icon-color:var(--_trailing-icon-color);--md-filled-field-trailing-icon-size:var(--_trailing-icon-size)}/*# sourceMappingURL=filled-styles.css.map */\n`;\n "]}
@@ -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;outline:none}.md3-text-field{display:inline-flex;flex:1}.md3-text-field__field{cursor:text;flex:1}.md3-text-field--disabled .md3-text-field__field{cursor:default}.md3-text-field__counter{white-space:nowrap}.md3-text-field__icon{display:flex}.md3-text-field__icon ::slotted(*){display:flex}.md3-text-field__icon--leading{color:var(--_leading-icon-color)}.md3-text-field__icon--trailing{color:var(--_trailing-icon-color)}:hover .md3-text-field__icon--leading{color:var(--_hover-leading-icon-color)}:hover .md3-text-field__icon--trailing{color:var(--_hover-trailing-icon-color)}:focus-within .md3-text-field__icon--leading{color:var(--_focus-leading-icon-color)}:focus-within .md3-text-field__icon--trailing{color:var(--_focus-trailing-icon-color)}.md3-text-field--disabled .md3-text-field__icon--leading{color:var(--_disabled-leading-icon-color);opacity:var(--_disabled-leading-icon-opacity)}.md3-text-field--disabled .md3-text-field__icon--trailing{color:var(--_disabled-trailing-icon-color);opacity:var(--_disabled-trailing-icon-opacity)}.md3-text-field--error:not(.md3-text-field--disabled) .md3-text-field__icon--leading{color:var(--_error-leading-icon-color)}.md3-text-field--error:not(.md3-text-field--disabled) .md3-text-field__icon--trailing{color:var(--_error-trailing-icon-color)}.md3-text-field--error:not(.md3-text-field--disabled):hover .md3-text-field__icon--leading{color:var(--_error-hover-leading-icon-color)}.md3-text-field--error:not(.md3-text-field--disabled):hover .md3-text-field__icon--trailing{color:var(--_error-hover-trailing-icon-color)}.md3-text-field--error:not(.md3-text-field--disabled):focus-within .md3-text-field__icon--leading{color:var(--_error-focus-leading-icon-color)}.md3-text-field--error:not(.md3-text-field--disabled):focus-within .md3-text-field__icon--trailing{color:var(--_error-focus-trailing-icon-color)}.md3-text-field__input{appearance:none;background:none;border:none;caret-color:var(--_caret-color);color:currentColor;outline:none;padding:0;text-align:inherit;width:100%}.md3-text-field__input::placeholder{color:currentColor;opacity:1}.md3-text-field__input::-webkit-calendar-picker-indicator{display:none}@media(forced-colors: active){.md3-text-field__input{background-color:Field}}:focus-within .md3-text-field__input{caret-color:var(--_focus-caret-color)}.md3-text-field--error:focus-within .md3-text-field__input{caret-color:var(--_error-focus-caret-color)}.md3-text-field__input,.md3-text-field__prefix,.md3-text-field__suffix{font-family:var(--_input-text-font);font-size:var(--_input-text-size);font-weight:var(--_input-text-weight);letter-spacing:var(--_input-text-tracking);line-height:var(--_input-text-line-height)}.md3-text-field:not(.md3-text-field--disabled) .md3-text-field__prefix,.md3-text-field:not(.md3-text-field--disabled) .md3-text-field__suffix{color:var(--_input-text-prefix-color)}.md3-text-field:not(.md3-text-field--disabled) .md3-text-field__input::placeholder{color:var(--_input-text-placeholder-color)}.md3-text-field__prefix{padding-inline-end:var(--_input-text-prefix-padding)}.md3-text-field__suffix{padding-inline-start:var(--_input-text-suffix-padding)}/*# sourceMappingURL=shared-styles.css.map */
7
+ export const styles = css `:host{display:inline-flex;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.md3-text-field{display:inline-flex;flex:1}.md3-text-field__field{cursor:text;flex:1}.md3-text-field--disabled .md3-text-field__field{cursor:default}.md3-text-field__counter{white-space:nowrap}.md3-text-field__icon{display:flex}.md3-text-field__icon ::slotted(*){display:flex}.md3-text-field__icon--leading{color:var(--_leading-icon-color)}.md3-text-field__icon--trailing{color:var(--_trailing-icon-color)}:hover .md3-text-field__icon--leading{color:var(--_hover-leading-icon-color)}:hover .md3-text-field__icon--trailing{color:var(--_hover-trailing-icon-color)}:focus-within .md3-text-field__icon--leading{color:var(--_focus-leading-icon-color)}:focus-within .md3-text-field__icon--trailing{color:var(--_focus-trailing-icon-color)}.md3-text-field--disabled .md3-text-field__icon--leading{color:var(--_disabled-leading-icon-color);opacity:var(--_disabled-leading-icon-opacity)}.md3-text-field--disabled .md3-text-field__icon--trailing{color:var(--_disabled-trailing-icon-color);opacity:var(--_disabled-trailing-icon-opacity)}.md3-text-field--error:not(.md3-text-field--disabled) .md3-text-field__icon--leading{color:var(--_error-leading-icon-color)}.md3-text-field--error:not(.md3-text-field--disabled) .md3-text-field__icon--trailing{color:var(--_error-trailing-icon-color)}.md3-text-field--error:not(.md3-text-field--disabled):hover .md3-text-field__icon--leading{color:var(--_error-hover-leading-icon-color)}.md3-text-field--error:not(.md3-text-field--disabled):hover .md3-text-field__icon--trailing{color:var(--_error-hover-trailing-icon-color)}.md3-text-field--error:not(.md3-text-field--disabled):focus-within .md3-text-field__icon--leading{color:var(--_error-focus-leading-icon-color)}.md3-text-field--error:not(.md3-text-field--disabled):focus-within .md3-text-field__icon--trailing{color:var(--_error-focus-trailing-icon-color)}.md3-text-field__input{appearance:none;background:none;border:none;caret-color:var(--_caret-color);color:currentColor;outline:none;padding:0;text-align:inherit;width:100%}.md3-text-field__input::placeholder{color:currentColor;opacity:1}.md3-text-field__input::-webkit-calendar-picker-indicator{display:none}@media(forced-colors: active){.md3-text-field__input{background-color:Field}}:focus-within .md3-text-field__input{caret-color:var(--_focus-caret-color)}.md3-text-field--error:focus-within .md3-text-field__input{caret-color:var(--_error-focus-caret-color)}.md3-text-field__input,.md3-text-field__prefix,.md3-text-field__suffix{font-family:var(--_input-text-font);font-size:var(--_input-text-size);font-weight:var(--_input-text-weight);letter-spacing:var(--_input-text-tracking);line-height:var(--_input-text-line-height)}.md3-text-field:not(.md3-text-field--disabled) .md3-text-field__prefix,.md3-text-field:not(.md3-text-field--disabled) .md3-text-field__suffix{color:var(--_input-text-prefix-color)}.md3-text-field:not(.md3-text-field--disabled) .md3-text-field__input::placeholder{color:var(--_input-text-placeholder-color)}.md3-text-field__prefix{padding-inline-end:var(--_input-text-prefix-padding)}.md3-text-field__suffix{padding-inline-start:var(--_input-text-suffix-padding)}/*# sourceMappingURL=shared-styles.css.map */
8
8
  `;
9
9
  //# sourceMappingURL=shared-styles.css.js.map
@@ -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;outline:none}.md3-text-field{display:inline-flex;flex:1}.md3-text-field__field{cursor:text;flex:1}.md3-text-field--disabled .md3-text-field__field{cursor:default}.md3-text-field__counter{white-space:nowrap}.md3-text-field__icon{display:flex}.md3-text-field__icon ::slotted(*){display:flex}.md3-text-field__icon--leading{color:var(--_leading-icon-color)}.md3-text-field__icon--trailing{color:var(--_trailing-icon-color)}:hover .md3-text-field__icon--leading{color:var(--_hover-leading-icon-color)}:hover .md3-text-field__icon--trailing{color:var(--_hover-trailing-icon-color)}:focus-within .md3-text-field__icon--leading{color:var(--_focus-leading-icon-color)}:focus-within .md3-text-field__icon--trailing{color:var(--_focus-trailing-icon-color)}.md3-text-field--disabled .md3-text-field__icon--leading{color:var(--_disabled-leading-icon-color);opacity:var(--_disabled-leading-icon-opacity)}.md3-text-field--disabled .md3-text-field__icon--trailing{color:var(--_disabled-trailing-icon-color);opacity:var(--_disabled-trailing-icon-opacity)}.md3-text-field--error:not(.md3-text-field--disabled) .md3-text-field__icon--leading{color:var(--_error-leading-icon-color)}.md3-text-field--error:not(.md3-text-field--disabled) .md3-text-field__icon--trailing{color:var(--_error-trailing-icon-color)}.md3-text-field--error:not(.md3-text-field--disabled):hover .md3-text-field__icon--leading{color:var(--_error-hover-leading-icon-color)}.md3-text-field--error:not(.md3-text-field--disabled):hover .md3-text-field__icon--trailing{color:var(--_error-hover-trailing-icon-color)}.md3-text-field--error:not(.md3-text-field--disabled):focus-within .md3-text-field__icon--leading{color:var(--_error-focus-leading-icon-color)}.md3-text-field--error:not(.md3-text-field--disabled):focus-within .md3-text-field__icon--trailing{color:var(--_error-focus-trailing-icon-color)}.md3-text-field__input{appearance:none;background:none;border:none;caret-color:var(--_caret-color);color:currentColor;outline:none;padding:0;text-align:inherit;width:100%}.md3-text-field__input::placeholder{color:currentColor;opacity:1}.md3-text-field__input::-webkit-calendar-picker-indicator{display:none}@media(forced-colors: active){.md3-text-field__input{background-color:Field}}:focus-within .md3-text-field__input{caret-color:var(--_focus-caret-color)}.md3-text-field--error:focus-within .md3-text-field__input{caret-color:var(--_error-focus-caret-color)}.md3-text-field__input,.md3-text-field__prefix,.md3-text-field__suffix{font-family:var(--_input-text-font);font-size:var(--_input-text-size);font-weight:var(--_input-text-weight);letter-spacing:var(--_input-text-tracking);line-height:var(--_input-text-line-height)}.md3-text-field:not(.md3-text-field--disabled) .md3-text-field__prefix,.md3-text-field:not(.md3-text-field--disabled) .md3-text-field__suffix{color:var(--_input-text-prefix-color)}.md3-text-field:not(.md3-text-field--disabled) .md3-text-field__input::placeholder{color:var(--_input-text-placeholder-color)}.md3-text-field__prefix{padding-inline-end:var(--_input-text-prefix-padding)}.md3-text-field__suffix{padding-inline-start:var(--_input-text-suffix-padding)}/*# 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;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.md3-text-field{display:inline-flex;flex:1}.md3-text-field__field{cursor:text;flex:1}.md3-text-field--disabled .md3-text-field__field{cursor:default}.md3-text-field__counter{white-space:nowrap}.md3-text-field__icon{display:flex}.md3-text-field__icon ::slotted(*){display:flex}.md3-text-field__icon--leading{color:var(--_leading-icon-color)}.md3-text-field__icon--trailing{color:var(--_trailing-icon-color)}:hover .md3-text-field__icon--leading{color:var(--_hover-leading-icon-color)}:hover .md3-text-field__icon--trailing{color:var(--_hover-trailing-icon-color)}:focus-within .md3-text-field__icon--leading{color:var(--_focus-leading-icon-color)}:focus-within .md3-text-field__icon--trailing{color:var(--_focus-trailing-icon-color)}.md3-text-field--disabled .md3-text-field__icon--leading{color:var(--_disabled-leading-icon-color);opacity:var(--_disabled-leading-icon-opacity)}.md3-text-field--disabled .md3-text-field__icon--trailing{color:var(--_disabled-trailing-icon-color);opacity:var(--_disabled-trailing-icon-opacity)}.md3-text-field--error:not(.md3-text-field--disabled) .md3-text-field__icon--leading{color:var(--_error-leading-icon-color)}.md3-text-field--error:not(.md3-text-field--disabled) .md3-text-field__icon--trailing{color:var(--_error-trailing-icon-color)}.md3-text-field--error:not(.md3-text-field--disabled):hover .md3-text-field__icon--leading{color:var(--_error-hover-leading-icon-color)}.md3-text-field--error:not(.md3-text-field--disabled):hover .md3-text-field__icon--trailing{color:var(--_error-hover-trailing-icon-color)}.md3-text-field--error:not(.md3-text-field--disabled):focus-within .md3-text-field__icon--leading{color:var(--_error-focus-leading-icon-color)}.md3-text-field--error:not(.md3-text-field--disabled):focus-within .md3-text-field__icon--trailing{color:var(--_error-focus-trailing-icon-color)}.md3-text-field__input{appearance:none;background:none;border:none;caret-color:var(--_caret-color);color:currentColor;outline:none;padding:0;text-align:inherit;width:100%}.md3-text-field__input::placeholder{color:currentColor;opacity:1}.md3-text-field__input::-webkit-calendar-picker-indicator{display:none}@media(forced-colors: active){.md3-text-field__input{background-color:Field}}:focus-within .md3-text-field__input{caret-color:var(--_focus-caret-color)}.md3-text-field--error:focus-within .md3-text-field__input{caret-color:var(--_error-focus-caret-color)}.md3-text-field__input,.md3-text-field__prefix,.md3-text-field__suffix{font-family:var(--_input-text-font);font-size:var(--_input-text-size);font-weight:var(--_input-text-weight);letter-spacing:var(--_input-text-tracking);line-height:var(--_input-text-line-height)}.md3-text-field:not(.md3-text-field--disabled) .md3-text-field__prefix,.md3-text-field:not(.md3-text-field--disabled) .md3-text-field__suffix{color:var(--_input-text-prefix-color)}.md3-text-field:not(.md3-text-field--disabled) .md3-text-field__input::placeholder{color:var(--_input-text-placeholder-color)}.md3-text-field__prefix{padding-inline-end:var(--_input-text-prefix-padding)}.md3-text-field__suffix{padding-inline-start:var(--_input-text-suffix-padding)}/*# sourceMappingURL=shared-styles.css.map */\n`;\n "]}
@@ -84,6 +84,8 @@ export class TextField extends LitElement {
84
84
  this.ariaControls = null;
85
85
  this.ariaActiveDescendant = null;
86
86
  this.ariaExpanded = null;
87
+ // tslint:disable:decorator-placement
88
+ // @ts-ignore(b/264292293): Use `override` with TS 4.9+
87
89
  this.role = null;
88
90
  this.name = '';
89
91
  // <input> properties
@@ -181,6 +183,7 @@ export class TextField extends LitElement {
181
183
  this.addEventListener('focusin', this.handleFocusin);
182
184
  this.addEventListener('focusout', this.handleFocusout);
183
185
  }
186
+ // tslint:enable:decorator-placement
184
187
  // FormElement
185
188
  get form() {
186
189
  return this.closest('form');