@material/web 1.0.0-pre.7 → 1.0.0-pre.8

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 (321) hide show
  1. package/README.md +3 -3
  2. package/aria/aria.js +37 -13
  3. package/aria/aria.js.map +1 -1
  4. package/aria/delegate.d.ts +1 -1
  5. package/aria/delegate.js +1 -1
  6. package/aria/delegate.js.map +1 -1
  7. package/badge/lib/badge.d.ts +0 -3
  8. package/badge/lib/badge.js +4 -6
  9. package/badge/lib/badge.js.map +1 -1
  10. package/button/lib/_elevated-button.scss +35 -6
  11. package/button/lib/_filled-button.scss +35 -3
  12. package/button/lib/_outlined-button.scss +35 -6
  13. package/button/lib/_shared.scss +4 -2
  14. package/button/lib/_text-button.scss +35 -6
  15. package/button/lib/_tonal-button.scss +34 -7
  16. package/button/lib/button.d.ts +23 -26
  17. package/button/lib/button.js +12 -30
  18. package/button/lib/button.js.map +1 -1
  19. package/button/lib/elevated-button.d.ts +6 -4
  20. package/button/lib/elevated-button.js.map +1 -1
  21. package/button/lib/elevated-styles.css.js +1 -1
  22. package/button/lib/elevated-styles.css.js.map +1 -1
  23. package/button/lib/filled-button.d.ts +6 -4
  24. package/button/lib/filled-button.js.map +1 -1
  25. package/button/lib/filled-styles.css.js +1 -1
  26. package/button/lib/filled-styles.css.js.map +1 -1
  27. package/button/lib/outlined-button.d.ts +6 -4
  28. package/button/lib/outlined-button.js.map +1 -1
  29. package/button/lib/outlined-styles.css.js +1 -1
  30. package/button/lib/outlined-styles.css.js.map +1 -1
  31. package/button/lib/shared-styles.css.js +1 -1
  32. package/button/lib/shared-styles.css.js.map +1 -1
  33. package/button/lib/text-button.d.ts +5 -2
  34. package/button/lib/text-button.js.map +1 -1
  35. package/button/lib/text-styles.css.js +1 -1
  36. package/button/lib/text-styles.css.js.map +1 -1
  37. package/button/lib/tonal-button.d.ts +6 -4
  38. package/button/lib/tonal-button.js.map +1 -1
  39. package/button/lib/tonal-styles.css.js +1 -1
  40. package/button/lib/tonal-styles.css.js.map +1 -1
  41. package/checkbox/lib/_checkbox.scss +48 -47
  42. package/checkbox/lib/checkbox-styles.css.js +1 -1
  43. package/checkbox/lib/checkbox-styles.css.js.map +1 -1
  44. package/checkbox/lib/checkbox.d.ts +2 -6
  45. package/checkbox/lib/checkbox.js +3 -20
  46. package/checkbox/lib/checkbox.js.map +1 -1
  47. package/checkbox/lib/forced-colors-styles.css.js +1 -1
  48. package/checkbox/lib/forced-colors-styles.css.js.map +1 -1
  49. package/chips/assist-chip.js +2 -1
  50. package/chips/assist-chip.js.map +1 -1
  51. package/chips/filter-chip.js +2 -1
  52. package/chips/filter-chip.js.map +1 -1
  53. package/chips/lib/_assist-chip.scss +37 -3
  54. package/chips/lib/_elevated.scss +60 -0
  55. package/chips/lib/_filter-chip.scss +43 -9
  56. package/chips/lib/_shared.scss +36 -76
  57. package/chips/lib/_suggestion-chip.scss +36 -5
  58. package/chips/lib/assist-chip.d.ts +12 -0
  59. package/chips/lib/assist-chip.js +64 -0
  60. package/chips/lib/assist-chip.js.map +1 -1
  61. package/chips/lib/assist-styles.css.js +1 -1
  62. package/chips/lib/assist-styles.css.js.map +1 -1
  63. package/chips/lib/chip.d.ts +19 -16
  64. package/chips/lib/chip.js +43 -63
  65. package/chips/lib/chip.js.map +1 -1
  66. package/chips/lib/elevated-styles.css.d.ts +1 -0
  67. package/chips/lib/elevated-styles.css.js +9 -0
  68. package/chips/lib/elevated-styles.css.js.map +1 -0
  69. package/chips/lib/elevated-styles.scss +10 -0
  70. package/chips/lib/filter-chip.d.ts +6 -1
  71. package/chips/lib/filter-chip.js +38 -5
  72. package/chips/lib/filter-chip.js.map +1 -1
  73. package/chips/lib/filter-styles.css.js +1 -1
  74. package/chips/lib/filter-styles.css.js.map +1 -1
  75. package/chips/lib/shared-styles.css.js +1 -1
  76. package/chips/lib/shared-styles.css.js.map +1 -1
  77. package/chips/lib/suggestion-chip.d.ts +2 -2
  78. package/chips/lib/suggestion-chip.js +4 -2
  79. package/chips/lib/suggestion-chip.js.map +1 -1
  80. package/chips/lib/suggestion-styles.css.js +1 -1
  81. package/chips/lib/suggestion-styles.css.js.map +1 -1
  82. package/chips/suggestion-chip.js +2 -1
  83. package/chips/suggestion-chip.js.map +1 -1
  84. package/circularprogress/lib/_circular-progress.scss +13 -7
  85. package/circularprogress/lib/circular-progress-styles.css.js +1 -1
  86. package/circularprogress/lib/circular-progress-styles.css.js.map +1 -1
  87. package/circularprogress/lib/circular-progress.d.ts +5 -6
  88. package/circularprogress/lib/circular-progress.js +1 -2
  89. package/circularprogress/lib/circular-progress.js.map +1 -1
  90. package/dialog/lib/_dialog.scss +0 -1
  91. package/dialog/lib/_tokens.scss +0 -1
  92. package/dialog/lib/dialog.d.ts +10 -10
  93. package/dialog/lib/dialog.js +8 -7
  94. package/dialog/lib/dialog.js.map +1 -1
  95. package/elevation/lib/elevation.d.ts +1 -1
  96. package/elevation/lib/elevation.js.map +1 -1
  97. package/fab/branded-fab.d.ts +3 -0
  98. package/fab/lib/_fab-branded.scss +58 -4
  99. package/fab/lib/_fab.scss +80 -6
  100. package/fab/lib/_shared.scss +8 -3
  101. package/fab/lib/fab-branded-styles.css.js +1 -1
  102. package/fab/lib/fab-branded-styles.css.js.map +1 -1
  103. package/fab/lib/fab-styles.css.js +1 -1
  104. package/fab/lib/fab-styles.css.js.map +1 -1
  105. package/fab/lib/fab.d.ts +4 -0
  106. package/fab/lib/forced-colors-styles.css.js +1 -1
  107. package/fab/lib/forced-colors-styles.css.js.map +1 -1
  108. package/fab/lib/shared-styles.css.js +1 -1
  109. package/fab/lib/shared-styles.css.js.map +1 -1
  110. package/fab/lib/shared.d.ts +12 -15
  111. package/fab/lib/shared.js +2 -26
  112. package/fab/lib/shared.js.map +1 -1
  113. package/field/lib/_filled-field.scss +47 -12
  114. package/field/lib/_outlined-field.scss +39 -12
  115. package/field/lib/filled-styles.css.js +1 -1
  116. package/field/lib/filled-styles.css.js.map +1 -1
  117. package/field/lib/outlined-styles.css.js +1 -1
  118. package/field/lib/outlined-styles.css.js.map +1 -1
  119. package/focus/focus-ring.d.ts +2 -0
  120. package/focus/focus-ring.js +2 -0
  121. package/focus/focus-ring.js.map +1 -1
  122. package/focus/lib/_focus-ring.scss +49 -34
  123. package/focus/lib/focus-ring-styles.css.js +1 -1
  124. package/focus/lib/focus-ring-styles.css.js.map +1 -1
  125. package/focus/lib/focus-ring.d.ts +59 -12
  126. package/focus/lib/focus-ring.js +116 -11
  127. package/focus/lib/focus-ring.js.map +1 -1
  128. package/iconbutton/filled-icon-button.d.ts +6 -2
  129. package/iconbutton/filled-icon-button.js.map +1 -1
  130. package/iconbutton/filled-tonal-icon-button.d.ts +6 -2
  131. package/iconbutton/filled-tonal-icon-button.js.map +1 -1
  132. package/iconbutton/harness.d.ts +1 -1
  133. package/iconbutton/harness.js +4 -1
  134. package/iconbutton/harness.js.map +1 -1
  135. package/iconbutton/lib/_filled-icon-button.scss +38 -13
  136. package/iconbutton/lib/_filled-tonal-icon-button.scss +38 -11
  137. package/iconbutton/lib/_outlined-icon-button.scss +38 -13
  138. package/iconbutton/lib/_shared.scss +4 -6
  139. package/iconbutton/lib/_standard-icon-button.scss +14 -14
  140. package/iconbutton/lib/filled-styles.css.js +1 -1
  141. package/iconbutton/lib/filled-styles.css.js.map +1 -1
  142. package/iconbutton/lib/filled-tonal-styles.css.js +1 -1
  143. package/iconbutton/lib/filled-tonal-styles.css.js.map +1 -1
  144. package/iconbutton/lib/icon-button.d.ts +17 -21
  145. package/iconbutton/lib/icon-button.js +12 -28
  146. package/iconbutton/lib/icon-button.js.map +1 -1
  147. package/iconbutton/lib/outlined-styles.css.js +1 -1
  148. package/iconbutton/lib/outlined-styles.css.js.map +1 -1
  149. package/iconbutton/lib/shared-styles.css.js +1 -1
  150. package/iconbutton/lib/shared-styles.css.js.map +1 -1
  151. package/iconbutton/lib/standard-styles.css.js +1 -1
  152. package/iconbutton/lib/standard-styles.css.js.map +1 -1
  153. package/iconbutton/outlined-icon-button.d.ts +5 -2
  154. package/iconbutton/outlined-icon-button.js.map +1 -1
  155. package/iconbutton/standard-icon-button.d.ts +5 -2
  156. package/iconbutton/standard-icon-button.js.map +1 -1
  157. package/linearprogress/lib/_linear-progress.scss +78 -72
  158. package/linearprogress/lib/linear-progress.d.ts +5 -5
  159. package/linearprogress/lib/linear-progress.js +1 -1
  160. package/linearprogress/lib/linear-progress.js.map +1 -1
  161. package/list/lib/_list.scss +4 -2
  162. package/list/lib/list.d.ts +7 -12
  163. package/list/lib/list.js +2 -11
  164. package/list/lib/list.js.map +1 -1
  165. package/list/lib/listitem/_list-item.scss +8 -4
  166. package/list/lib/listitem/list-item-styles.css.js +1 -1
  167. package/list/lib/listitem/list-item-styles.css.js.map +1 -1
  168. package/list/lib/listitem/list-item.d.ts +27 -27
  169. package/list/lib/listitem/list-item.js +4 -29
  170. package/list/lib/listitem/list-item.js.map +1 -1
  171. package/list/lib/listitemlink/list-item-link.js +1 -3
  172. package/list/lib/listitemlink/list-item-link.js.map +1 -1
  173. package/menu/lib/_menu.scss +4 -2
  174. package/menu/lib/menu-styles.css.js +1 -1
  175. package/menu/lib/menu-styles.css.js.map +1 -1
  176. package/menu/lib/menu.d.ts +31 -39
  177. package/menu/lib/menu.js +14 -20
  178. package/menu/lib/menu.js.map +1 -1
  179. package/menu/lib/menuitem/_menu-item.scss +4 -2
  180. package/menu/lib/shared.d.ts +14 -0
  181. package/menu/lib/shared.js +18 -0
  182. package/menu/lib/shared.js.map +1 -1
  183. package/menu/lib/submenuitem/sub-menu-item.d.ts +16 -11
  184. package/menu/lib/submenuitem/sub-menu-item.js +20 -3
  185. package/menu/lib/submenuitem/sub-menu-item.js.map +1 -1
  186. package/menu/lib/typeaheadController.d.ts +9 -9
  187. package/menu/lib/typeaheadController.js.map +1 -1
  188. package/navigationbar/lib/navigation-bar.d.ts +2 -2
  189. package/navigationbar/lib/navigation-bar.js.map +1 -1
  190. package/navigationdrawer/lib/_navigation-drawer-modal.scss +0 -3
  191. package/navigationdrawer/lib/_navigation-drawer.scss +0 -3
  192. package/navigationdrawer/lib/_shared.scss +1 -4
  193. package/navigationdrawer/lib/navigation-drawer-modal-styles.css.js +1 -1
  194. package/navigationdrawer/lib/navigation-drawer-modal-styles.css.js.map +1 -1
  195. package/navigationdrawer/lib/navigation-drawer-modal.d.ts +3 -3
  196. package/navigationdrawer/lib/navigation-drawer-modal.js.map +1 -1
  197. package/navigationdrawer/lib/navigation-drawer-styles.css.js +1 -1
  198. package/navigationdrawer/lib/navigation-drawer-styles.css.js.map +1 -1
  199. package/navigationdrawer/lib/navigation-drawer.d.ts +2 -2
  200. package/navigationdrawer/lib/navigation-drawer.js.map +1 -1
  201. package/navigationdrawer/lib/shared-styles.css.js +1 -1
  202. package/navigationdrawer/lib/shared-styles.css.js.map +1 -1
  203. package/navigationtab/lib/_navigation-tab.scss +2 -2
  204. package/navigationtab/lib/navigation-tab-styles.css.js +1 -1
  205. package/navigationtab/lib/navigation-tab-styles.css.js.map +1 -1
  206. package/navigationtab/lib/navigation-tab.d.ts +9 -17
  207. package/navigationtab/lib/navigation-tab.js +3 -22
  208. package/navigationtab/lib/navigation-tab.js.map +1 -1
  209. package/navigationtab/lib/state.d.ts +1 -1
  210. package/navigationtab/lib/state.js.map +1 -1
  211. package/package.json +1 -1
  212. package/radio/lib/_radio.scss +1 -1
  213. package/radio/lib/radio-styles.css.js +1 -1
  214. package/radio/lib/radio-styles.css.js.map +1 -1
  215. package/radio/lib/radio.d.ts +2 -7
  216. package/radio/lib/radio.js +2 -22
  217. package/radio/lib/radio.js.map +1 -1
  218. package/ripple/lib/ripple.js +4 -0
  219. package/ripple/lib/ripple.js.map +1 -1
  220. package/segmentedbutton/lib/segmented-button.d.ts +15 -21
  221. package/segmentedbutton/lib/segmented-button.js +3 -24
  222. package/segmentedbutton/lib/segmented-button.js.map +1 -1
  223. package/segmentedbuttonset/lib/_outlined-segmented-button-set.scss +32 -13
  224. package/segmentedbuttonset/lib/outlined-styles.css.js +1 -1
  225. package/segmentedbuttonset/lib/outlined-styles.css.js.map +1 -1
  226. package/segmentedbuttonset/lib/segmented-button-set.d.ts +1 -1
  227. package/segmentedbuttonset/lib/segmented-button-set.js.map +1 -1
  228. package/select/lib/_filled-select.scss +66 -7
  229. package/select/lib/_outlined-select.scss +41 -7
  230. package/select/lib/filled-select-styles.css.js +1 -1
  231. package/select/lib/filled-select-styles.css.js.map +1 -1
  232. package/select/lib/outlined-select-styles.css.js +1 -1
  233. package/select/lib/outlined-select-styles.css.js.map +1 -1
  234. package/select/lib/select.d.ts +46 -48
  235. package/select/lib/select.js +21 -19
  236. package/select/lib/select.js.map +1 -1
  237. package/slider/harness.d.ts +1 -1
  238. package/slider/harness.js +9 -9
  239. package/slider/harness.js.map +1 -1
  240. package/slider/lib/_slider.scss +6 -6
  241. package/slider/lib/slider-styles.css.js +1 -1
  242. package/slider/lib/slider-styles.css.js.map +1 -1
  243. package/slider/lib/slider.d.ts +22 -51
  244. package/slider/lib/slider.js +18 -54
  245. package/slider/lib/slider.js.map +1 -1
  246. package/switch/lib/_switch.scss +63 -18
  247. package/switch/lib/switch-styles.css.js +1 -1
  248. package/switch/lib/switch-styles.css.js.map +1 -1
  249. package/switch/lib/switch.d.ts +0 -5
  250. package/switch/lib/switch.js +2 -27
  251. package/switch/lib/switch.js.map +1 -1
  252. package/textfield/harness.d.ts +1 -1
  253. package/textfield/harness.js.map +1 -1
  254. package/textfield/lib/_filled-text-field.scss +70 -14
  255. package/textfield/lib/_outlined-text-field.scss +60 -35
  256. package/textfield/lib/filled-forced-colors-styles.css.js +1 -1
  257. package/textfield/lib/filled-forced-colors-styles.css.js.map +1 -1
  258. package/textfield/lib/filled-styles.css.js +1 -1
  259. package/textfield/lib/filled-styles.css.js.map +1 -1
  260. package/textfield/lib/outlined-forced-colors-styles.css.js +1 -1
  261. package/textfield/lib/outlined-forced-colors-styles.css.js.map +1 -1
  262. package/textfield/lib/outlined-styles.css.js +1 -1
  263. package/textfield/lib/outlined-styles.css.js.map +1 -1
  264. package/textfield/lib/text-field.d.ts +1 -1
  265. package/textfield/lib/text-field.js.map +1 -1
  266. package/tokens/_index.scss +2 -18
  267. package/tokens/_md-comp-assist-chip.scss +0 -9
  268. package/tokens/_md-comp-checkbox.scss +78 -1
  269. package/tokens/_md-comp-circular-progress-indicator.scss +39 -13
  270. package/tokens/_md-comp-elevated-button.scss +0 -10
  271. package/tokens/_md-comp-fab-branded.scss +6 -31
  272. package/tokens/_md-comp-fab.scss +9 -50
  273. package/tokens/_md-comp-filled-button.scss +0 -10
  274. package/{field/lib → tokens}/_md-comp-filled-field.scss +91 -9
  275. package/tokens/_md-comp-filled-icon-button.scss +46 -1
  276. package/tokens/_md-comp-filled-select.scss +4 -30
  277. package/tokens/_md-comp-filled-text-field.scss +93 -9
  278. package/tokens/_md-comp-filled-tonal-button.scss +0 -11
  279. package/tokens/_md-comp-filled-tonal-icon-button.scss +45 -3
  280. package/tokens/_md-comp-filter-chip.scss +0 -10
  281. package/tokens/_md-comp-focus-ring.scss +23 -24
  282. package/tokens/_md-comp-icon-button.scss +37 -1
  283. package/tokens/_md-comp-input-chip.scss +0 -10
  284. package/tokens/_md-comp-linear-progress-indicator.scss +23 -8
  285. package/tokens/_md-comp-list-item.scss +0 -27
  286. package/tokens/_md-comp-list.scss +3 -29
  287. package/tokens/_md-comp-menu-item.scss +3 -29
  288. package/tokens/_md-comp-menu.scss +0 -23
  289. package/tokens/_md-comp-outlined-button.scss +0 -10
  290. package/{field/lib → tokens}/_md-comp-outlined-field.scss +85 -9
  291. package/tokens/_md-comp-outlined-icon-button.scss +41 -1
  292. package/tokens/_md-comp-outlined-segmented-button.scss +57 -11
  293. package/tokens/_md-comp-outlined-select.scss +1 -28
  294. package/tokens/_md-comp-outlined-text-field.scss +85 -8
  295. package/tokens/_md-comp-suggestion-chip.scss +0 -9
  296. package/tokens/_md-comp-switch.scss +81 -1
  297. package/tokens/_md-comp-text-button.scss +0 -10
  298. package/tokens/_values.scss +2 -7
  299. package/types/aria.d.ts +0 -2
  300. package/focus/strong-focus.d.ts +0 -56
  301. package/focus/strong-focus.js +0 -101
  302. package/focus/strong-focus.js.map +0 -1
  303. package/sass/_shape.scss +0 -154
  304. package/tokens/_md-comp-extended-fab-branded.scss +0 -45
  305. package/tokens/_md-comp-extended-fab-primary.scss +0 -45
  306. package/tokens/_md-comp-extended-fab-secondary.scss +0 -48
  307. package/tokens/_md-comp-extended-fab-surface.scss +0 -45
  308. package/tokens/_md-comp-extended-fab-tertiary.scss +0 -48
  309. package/tokens/_md-comp-fab-branded-large.scss +0 -23
  310. package/tokens/_md-comp-fab-primary-large.scss +0 -23
  311. package/tokens/_md-comp-fab-primary-small.scss +0 -23
  312. package/tokens/_md-comp-fab-primary.scss +0 -23
  313. package/tokens/_md-comp-fab-secondary-large.scss +0 -23
  314. package/tokens/_md-comp-fab-secondary-small.scss +0 -23
  315. package/tokens/_md-comp-fab-secondary.scss +0 -23
  316. package/tokens/_md-comp-fab-surface-large.scss +0 -23
  317. package/tokens/_md-comp-fab-surface-small.scss +0 -23
  318. package/tokens/_md-comp-fab-surface.scss +0 -23
  319. package/tokens/_md-comp-fab-tertiary-large.scss +0 -23
  320. package/tokens/_md-comp-fab-tertiary-small.scss +0 -23
  321. package/tokens/_md-comp-fab-tertiary.scss +0 -23
package/chips/lib/chip.js CHANGED
@@ -3,16 +3,14 @@
3
3
  * Copyright 2023 Google LLC
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
+ var _a;
6
7
  import { __decorate } from "tslib";
7
- import '../../elevation/elevation.js';
8
8
  import '../../focus/focus-ring.js';
9
9
  import '../../ripple/ripple.js';
10
10
  import { html, LitElement, nothing } from 'lit';
11
11
  import { property, queryAsync, state } from 'lit/decorators.js';
12
12
  import { classMap } from 'lit/directives/class-map.js';
13
- import { html as staticHtml, literal } from 'lit/static-html.js';
14
- import { pointerPress, shouldShowStrongFocus } from '../../focus/strong-focus.js';
15
- import { ripple } from '../../ripple/directive.js';
13
+ import { requestUpdateOnAriaChange } from '../../aria/delegate.js';
16
14
  /**
17
15
  * A chip component.
18
16
  */
@@ -20,90 +18,72 @@ export class Chip extends LitElement {
20
18
  constructor() {
21
19
  super(...arguments);
22
20
  this.disabled = false;
23
- this.elevated = false;
24
- this.href = '';
25
21
  this.label = '';
26
- this.target = '';
27
- this.showFocusRing = false;
28
- this.showRipple = false;
29
- this.getRipple = () => {
30
- this.showRipple = true;
31
- return this.ripple;
22
+ this.showPrimaryRipple = false;
23
+ this.getPrimaryRipple = () => {
24
+ this.showPrimaryRipple = true;
25
+ return this.primaryRipple;
32
26
  };
33
27
  }
28
+ /**
29
+ * Whether or not the primary ripple is disabled (defaults to `disabled`).
30
+ * Some chip actions such as links cannot be disabled.
31
+ */
32
+ get primaryRippleDisabled() {
33
+ return this.disabled;
34
+ }
34
35
  render() {
35
- const button = this.href ? literal `a` : literal `button`;
36
- return staticHtml `
37
- <${button} class="container ${classMap(this.getContainerClasses())}"
38
- ?disabled=${this.disabled}
39
- href=${this.href || nothing}
40
- target=${this.href ? this.target : nothing}
41
- @blur=${this.handleBlur}
42
- @focus=${this.handleFocus}
43
- @pointerdown=${this.handlePointerDown}
44
- ${ripple(this.getRipple)}>
45
- ${!this.elevated ? html `<span class="outline"></span>` : nothing}
46
- ${this.elevated ? html `<md-elevation></md-elevation>` : nothing}
47
- ${this.showRipple ? this.renderRipple() : nothing}
48
- <md-focus-ring .visible=${this.showFocusRing}></md-focus-ring>
49
- <span class="icon leading">
50
- ${this.renderLeadingIcon()}
51
- </span>
52
- <span class="label">${this.label}</span>
53
- <span class="icon trailing">
54
- ${this.renderTrailingIcon()}
55
- </span>
56
- </${button}>
36
+ const primaryRipple = this.showPrimaryRipple ?
37
+ html `<md-ripple ?disabled=${this.primaryRippleDisabled}></md-ripple>` :
38
+ nothing;
39
+ const primaryFocus = html `<md-focus-ring for=${this.primaryFocusFor}></md-focus-ring>`;
40
+ return html `
41
+ <div class="container ${classMap(this.getContainerClasses())}">
42
+ ${this.renderOutline()}
43
+ ${primaryFocus}
44
+ ${primaryRipple}
45
+ ${this.renderPrimaryAction()}
46
+ ${this.renderTrailingAction()}
47
+ </div>
57
48
  `;
58
49
  }
59
50
  getContainerClasses() {
60
51
  return {
61
52
  disabled: this.disabled,
62
- elevated: this.elevated,
63
53
  };
64
54
  }
65
- renderLeadingIcon() {
66
- return html `<slot name="leading-icon"></slot>`;
55
+ renderContent() {
56
+ return html `
57
+ <span class="icon">
58
+ ${this.renderLeadingIcon()}
59
+ </span>
60
+ <span class="label">${this.label}</span>
61
+ `;
67
62
  }
68
- renderTrailingIcon() {
63
+ renderTrailingAction() {
69
64
  return nothing;
70
65
  }
71
- renderRipple() {
72
- return html `<md-ripple ?disabled=${this.disabled}></md-ripple>`;
73
- }
74
- handleBlur() {
75
- this.showFocusRing = false;
66
+ renderOutline() {
67
+ return html `<span class="outline"></span>`;
76
68
  }
77
- handleFocus() {
78
- this.showFocusRing = shouldShowStrongFocus();
79
- }
80
- handlePointerDown() {
81
- pointerPress();
82
- this.showFocusRing = shouldShowStrongFocus();
69
+ renderLeadingIcon() {
70
+ return html `<slot name="icon"></slot>`;
83
71
  }
84
72
  }
73
+ _a = Chip;
74
+ (() => {
75
+ requestUpdateOnAriaChange(_a);
76
+ })();
85
77
  __decorate([
86
78
  property({ type: Boolean })
87
79
  ], Chip.prototype, "disabled", void 0);
88
- __decorate([
89
- property({ type: Boolean })
90
- ], Chip.prototype, "elevated", void 0);
91
- __decorate([
92
- property()
93
- ], Chip.prototype, "href", void 0);
94
80
  __decorate([
95
81
  property()
96
82
  ], Chip.prototype, "label", void 0);
97
- __decorate([
98
- property()
99
- ], Chip.prototype, "target", void 0);
100
- __decorate([
101
- state()
102
- ], Chip.prototype, "showFocusRing", void 0);
103
83
  __decorate([
104
84
  state()
105
- ], Chip.prototype, "showRipple", void 0);
85
+ ], Chip.prototype, "showPrimaryRipple", void 0);
106
86
  __decorate([
107
87
  queryAsync('md-ripple')
108
- ], Chip.prototype, "ripple", void 0);
88
+ ], Chip.prototype, "primaryRipple", void 0);
109
89
  //# sourceMappingURL=chip.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"chip.js","sourceRoot":"","sources":["chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,8BAA8B,CAAC;AACtC,OAAO,2BAA2B,CAAC;AACnC,OAAO,wBAAwB,CAAC;AAEhC,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAC,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAC,IAAI,IAAI,UAAU,EAAE,OAAO,EAAC,MAAM,oBAAoB,CAAC;AAE/D,OAAO,EAAC,YAAY,EAAE,qBAAqB,EAAC,MAAM,6BAA6B,CAAC;AAChF,OAAO,EAAC,MAAM,EAAC,MAAM,2BAA2B,CAAC;AAGjD;;GAEG;AACH,MAAM,OAAO,IAAK,SAAQ,UAAU;IAApC;;QAC6B,aAAQ,GAAG,KAAK,CAAC;QACjB,aAAQ,GAAG,KAAK,CAAC;QAChC,SAAI,GAAG,EAAE,CAAC;QACV,UAAK,GAAG,EAAE,CAAC;QACX,WAAM,GAAG,EAAE,CAAC;QAEP,kBAAa,GAAG,KAAK,CAAC;QACtB,eAAU,GAAG,KAAK,CAAC;QAgDnB,cAAS,GAAG,GAAG,EAAE;YAChC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,OAAO,IAAI,CAAC,MAAM,CAAC;QACrB,CAAC,CAAC;IAcJ,CAAC;IA9DU,MAAM;QACb,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAA,GAAG,CAAC,CAAC,CAAC,OAAO,CAAA,QAAQ,CAAC;QACxD,OAAO,UAAU,CAAA;SACZ,MAAM,qBAAqB,QAAQ,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;sBAClD,IAAI,CAAC,QAAQ;iBAClB,IAAI,CAAC,IAAI,IAAI,OAAO;mBAClB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;kBAClC,IAAI,CAAC,UAAU;mBACd,IAAI,CAAC,WAAW;yBACV,IAAI,CAAC,iBAAiB;YACnC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;UACxB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,+BAA+B,CAAC,CAAC,CAAC,OAAO;UAC9D,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,+BAA+B,CAAC,CAAC,CAAC,OAAO;UAC7D,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,OAAO;kCACvB,IAAI,CAAC,aAAa;;YAExC,IAAI,CAAC,iBAAiB,EAAE;;8BAEN,IAAI,CAAC,KAAK;;YAE5B,IAAI,CAAC,kBAAkB,EAAE;;UAE3B,MAAM;KACX,CAAC;IACJ,CAAC;IAES,mBAAmB;QAC3B,OAAO;YACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC;IACJ,CAAC;IAES,iBAAiB;QACzB,OAAO,IAAI,CAAA,mCAAmC,CAAC;IACjD,CAAC;IAES,kBAAkB;QAC1B,OAAO,OAAO,CAAC;IACjB,CAAC;IAEO,YAAY;QAClB,OAAO,IAAI,CAAA,wBAAwB,IAAI,CAAC,QAAQ,eAAe,CAAC;IAClE,CAAC;IAOO,UAAU;QAChB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC7B,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,aAAa,GAAG,qBAAqB,EAAE,CAAC;IAC/C,CAAC;IAEO,iBAAiB;QACvB,YAAY,EAAE,CAAC;QACf,IAAI,CAAC,aAAa,GAAG,qBAAqB,EAAE,CAAC;IAC/C,CAAC;CACF;AAxE4B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;sCAAkB;AACjB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;sCAAkB;AAChC;IAAX,QAAQ,EAAE;kCAAW;AACV;IAAX,QAAQ,EAAE;mCAAY;AACX;IAAX,QAAQ,EAAE;oCAAa;AAEf;IAAR,KAAK,EAAE;2CAA+B;AAC9B;IAAR,KAAK,EAAE;wCAA4B;AACX;IAAxB,UAAU,CAAC,WAAW,CAAC;oCAAkD","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\nimport '../../focus/focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, nothing, TemplateResult} from 'lit';\nimport {property, queryAsync, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {html as staticHtml, literal} from 'lit/static-html.js';\n\nimport {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';\nimport {ripple} from '../../ripple/directive.js';\nimport {MdRipple} from '../../ripple/ripple.js';\n\n/**\n * A chip component.\n */\nexport class Chip extends LitElement {\n @property({type: Boolean}) disabled = false;\n @property({type: Boolean}) elevated = false;\n @property() href = '';\n @property() label = '';\n @property() target = '';\n\n @state() private showFocusRing = false;\n @state() private showRipple = false;\n @queryAsync('md-ripple') private readonly ripple!: Promise<MdRipple|null>;\n\n override render() {\n const button = this.href ? literal`a` : literal`button`;\n return staticHtml`\n <${button} class=\"container ${classMap(this.getContainerClasses())}\"\n ?disabled=${this.disabled}\n href=${this.href || nothing}\n target=${this.href ? this.target : nothing}\n @blur=${this.handleBlur}\n @focus=${this.handleFocus}\n @pointerdown=${this.handlePointerDown}\n ${ripple(this.getRipple)}>\n ${!this.elevated ? html`<span class=\"outline\"></span>` : nothing}\n ${this.elevated ? html`<md-elevation></md-elevation>` : nothing}\n ${this.showRipple ? this.renderRipple() : nothing}\n <md-focus-ring .visible=${this.showFocusRing}></md-focus-ring>\n <span class=\"icon leading\">\n ${this.renderLeadingIcon()}\n </span>\n <span class=\"label\">${this.label}</span>\n <span class=\"icon trailing\">\n ${this.renderTrailingIcon()}\n </span>\n </${button}>\n `;\n }\n\n protected getContainerClasses() {\n return {\n disabled: this.disabled,\n elevated: this.elevated,\n };\n }\n\n protected renderLeadingIcon(): TemplateResult {\n return html`<slot name=\"leading-icon\"></slot>`;\n }\n\n protected renderTrailingIcon(): TemplateResult|typeof nothing {\n return nothing;\n }\n\n private renderRipple() {\n return html`<md-ripple ?disabled=${this.disabled}></md-ripple>`;\n }\n\n private readonly getRipple = () => { // bind to this\n this.showRipple = true;\n return this.ripple;\n };\n\n private handleBlur() {\n this.showFocusRing = false;\n }\n\n private handleFocus() {\n this.showFocusRing = shouldShowStrongFocus();\n }\n\n private handlePointerDown() {\n pointerPress();\n this.showFocusRing = shouldShowStrongFocus();\n }\n}\n"]}
1
+ {"version":3,"file":"chip.js","sourceRoot":"","sources":["chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;AAEH,OAAO,2BAA2B,CAAC;AACnC,OAAO,wBAAwB,CAAC;AAEhC,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAC,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAC,yBAAyB,EAAC,MAAM,wBAAwB,CAAC;AAGjE;;GAEG;AACH,MAAM,OAAgB,IAAK,SAAQ,UAAU;IAA7C;;QAK6B,aAAQ,GAAG,KAAK,CAAC;QAChC,UAAK,GAAG,EAAE,CAAC;QAeN,sBAAiB,GAAG,KAAK,CAAC;QAoDjC,qBAAgB,GAAG,GAAG,EAAE;YAChC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;YAC9B,OAAO,IAAI,CAAC,aAAa,CAAC;QAC5B,CAAC,CAAC;IACJ,CAAC;IAhEC;;;OAGG;IACH,IAAc,qBAAqB;QACjC,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IAMkB,MAAM;QACvB,MAAM,aAAa,GAAG,IAAI,CAAC,iBAAiB,CAAC,CAAC;YAC1C,IAAI,CAAA,wBAAwB,IAAI,CAAC,qBAAqB,eAAe,CAAC,CAAC;YACvE,OAAO,CAAC;QAEZ,MAAM,YAAY,GACd,IAAI,CAAA,sBAAsB,IAAI,CAAC,eAAe,mBAAmB,CAAC;QAEtE,OAAO,IAAI,CAAA;8BACe,QAAQ,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;UACxD,IAAI,CAAC,aAAa,EAAE;UACpB,YAAY;UACZ,aAAa;UACb,IAAI,CAAC,mBAAmB,EAAE;UAC1B,IAAI,CAAC,oBAAoB,EAAE;;KAEhC,CAAC;IACJ,CAAC;IAES,mBAAmB;QAC3B,OAAO;YACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC;IACJ,CAAC;IAES,aAAa;QACrB,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,iBAAiB,EAAE;;4BAEN,IAAI,CAAC,KAAK;KACjC,CAAC;IACJ,CAAC;IAIS,oBAAoB;QAC5B,OAAO,OAAO,CAAC;IACjB,CAAC;IAES,aAAa;QACrB,OAAO,IAAI,CAAA,+BAA+B,CAAC;IAC7C,CAAC;IAES,iBAAiB;QACzB,OAAO,IAAI,CAAA,2BAA2B,CAAC;IACzC,CAAC;CAMF;;AA5EC;IACE,yBAAyB,CAAC,EAAI,CAAC,CAAC;AAClC,CAAC,GAAA,CAAA;AAE0B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;sCAAkB;AAChC;IAAX,QAAQ,EAAE;mCAAY;AAed;IAAR,KAAK,EAAE;+CAAmC;AAE3C;IADC,UAAU,CAAC,WAAW,CAAC;2CACgC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, nothing, TemplateResult} from 'lit';\nimport {property, queryAsync, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {requestUpdateOnAriaChange} from '../../aria/delegate.js';\nimport {MdRipple} from '../../ripple/ripple.js';\n\n/**\n * A chip component.\n */\nexport abstract class Chip extends LitElement {\n static {\n requestUpdateOnAriaChange(this);\n }\n\n @property({type: Boolean}) disabled = false;\n @property() label = '';\n\n /**\n * The `id` of the action the primary focus ring is for.\n */\n protected abstract readonly primaryFocusFor: string;\n\n /**\n * Whether or not the primary ripple is disabled (defaults to `disabled`).\n * Some chip actions such as links cannot be disabled.\n */\n protected get primaryRippleDisabled() {\n return this.disabled;\n }\n\n @state() private showPrimaryRipple = false;\n @queryAsync('md-ripple')\n private readonly primaryRipple!: Promise<MdRipple|null>;\n\n protected override render() {\n const primaryRipple = this.showPrimaryRipple ?\n html`<md-ripple ?disabled=${this.primaryRippleDisabled}></md-ripple>` :\n nothing;\n\n const primaryFocus =\n html`<md-focus-ring for=${this.primaryFocusFor}></md-focus-ring>`;\n\n return html`\n <div class=\"container ${classMap(this.getContainerClasses())}\">\n ${this.renderOutline()}\n ${primaryFocus}\n ${primaryRipple}\n ${this.renderPrimaryAction()}\n ${this.renderTrailingAction()}\n </div>\n `;\n }\n\n protected getContainerClasses() {\n return {\n disabled: this.disabled,\n };\n }\n\n protected renderContent() {\n return html`\n <span class=\"icon\">\n ${this.renderLeadingIcon()}\n </span>\n <span class=\"label\">${this.label}</span>\n `;\n }\n\n protected abstract renderPrimaryAction(): TemplateResult;\n\n protected renderTrailingAction(): TemplateResult|typeof nothing {\n return nothing;\n }\n\n protected renderOutline() {\n return html`<span class=\"outline\"></span>`;\n }\n\n protected renderLeadingIcon(): TemplateResult {\n return html`<slot name=\"icon\"></slot>`;\n }\n\n protected getPrimaryRipple = () => {\n this.showPrimaryRipple = true;\n return this.primaryRipple;\n };\n}\n"]}
@@ -0,0 +1 @@
1
+ export declare const styles: import("lit").CSSResult;
@@ -0,0 +1,9 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2022 Google LLC
4
+ * SPDX-License-Identifier: Apache-2.0
5
+ */
6
+ import { css } from 'lit';
7
+ export const styles = css `.elevated{--md-elevation-level:var(--_elevated-container-elevation);--md-elevation-shadow-color:var(--_elevated-container-shadow-color)}.elevated::before{background:var(--_elevated-container-color)}.elevated:hover{--md-elevation-level:var(--_elevated-hover-container-elevation)}.elevated:focus-within{--md-elevation-level:var(--_elevated-focus-container-elevation)}.elevated:active{--md-elevation-level:var(--_elevated-pressed-container-elevation)}.elevated.disabled{--md-elevation-level:var(--_elevated-disabled-container-elevation)}.elevated.disabled::before{background:var(--_elevated-disabled-container-color);opacity:var(--_elevated-disabled-container-opacity)}/*# sourceMappingURL=elevated-styles.css.map */
8
+ `;
9
+ //# sourceMappingURL=elevated-styles.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"elevated-styles.css.js","sourceRoot":"","sources":["elevated-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`.elevated{--md-elevation-level:var(--_elevated-container-elevation);--md-elevation-shadow-color:var(--_elevated-container-shadow-color)}.elevated::before{background:var(--_elevated-container-color)}.elevated:hover{--md-elevation-level:var(--_elevated-hover-container-elevation)}.elevated:focus-within{--md-elevation-level:var(--_elevated-focus-container-elevation)}.elevated:active{--md-elevation-level:var(--_elevated-pressed-container-elevation)}.elevated.disabled{--md-elevation-level:var(--_elevated-disabled-container-elevation)}.elevated.disabled::before{background:var(--_elevated-disabled-container-color);opacity:var(--_elevated-disabled-container-opacity)}/*# sourceMappingURL=elevated-styles.css.map */\n`;\n "]}
@@ -0,0 +1,10 @@
1
+ //
2
+ // Copyright 2023 Google LLC
3
+ // SPDX-License-Identifier: Apache-2.0
4
+ //
5
+
6
+ // go/keep-sorted start
7
+ @use './elevated';
8
+ // go/keep-sorted end
9
+
10
+ @include elevated.styles;
@@ -3,19 +3,24 @@
3
3
  * Copyright 2023 Google LLC
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
+ import '../../elevation/elevation.js';
6
7
  import { PropertyValues } from 'lit';
7
8
  import { Chip } from './chip.js';
8
9
  /**
9
10
  * A filter chip component.
10
11
  */
11
12
  export declare class FilterChip extends Chip {
13
+ elevated: boolean;
12
14
  selected: boolean;
15
+ protected get primaryFocusFor(): string;
13
16
  constructor();
14
17
  protected updated(changedProperties: PropertyValues<FilterChip>): void;
15
18
  protected getContainerClasses(): {
19
+ elevated: boolean;
16
20
  selected: boolean;
17
21
  disabled: boolean;
18
- elevated: boolean;
19
22
  };
23
+ protected renderPrimaryAction(): import("lit-html").TemplateResult<1>;
20
24
  protected renderLeadingIcon(): import("lit-html").TemplateResult<2 | 1>;
25
+ protected renderOutline(): import("lit-html").TemplateResult<1>;
21
26
  }
@@ -4,43 +4,76 @@
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
6
  import { __decorate } from "tslib";
7
- import { svg } from 'lit';
7
+ import '../../elevation/elevation.js';
8
+ import { html, nothing, svg } from 'lit';
8
9
  import { property } from 'lit/decorators.js';
10
+ import { ripple } from '../../ripple/directive.js';
9
11
  import { Chip } from './chip.js';
10
12
  /**
11
13
  * A filter chip component.
12
14
  */
13
15
  export class FilterChip extends Chip {
16
+ get primaryFocusFor() {
17
+ return 'option';
18
+ }
14
19
  constructor() {
15
20
  super();
21
+ this.elevated = false;
16
22
  this.selected = false;
17
23
  this.addEventListener('click', () => {
24
+ if (this.disabled) {
25
+ return;
26
+ }
18
27
  this.selected = !this.selected;
19
28
  });
20
29
  }
21
30
  updated(changedProperties) {
22
- if (changedProperties.has('selected')) {
31
+ if (changedProperties.has('selected') &&
32
+ changedProperties.get('selected') !== undefined) {
33
+ // Dispatch when `selected` changes, except for the first update.
23
34
  this.dispatchEvent(new Event('change', { bubbles: true }));
24
35
  }
25
36
  }
26
37
  getContainerClasses() {
27
- const classes = super.getContainerClasses();
28
38
  return {
29
- ...classes,
39
+ ...super.getContainerClasses(),
40
+ elevated: this.elevated,
30
41
  selected: this.selected,
31
42
  };
32
43
  }
44
+ renderPrimaryAction() {
45
+ const { ariaLabel } = this;
46
+ return html `
47
+ <button class="action"
48
+ id="option"
49
+ aria-label=${ariaLabel || nothing}
50
+ aria-selected=${this.selected}
51
+ ?disabled=${this.disabled || nothing}
52
+ role="option"
53
+ ${ripple(this.getPrimaryRipple)}
54
+ >${this.renderContent()}</button>
55
+ `;
56
+ }
33
57
  renderLeadingIcon() {
34
58
  if (!this.selected) {
35
59
  return super.renderLeadingIcon();
36
60
  }
37
61
  return svg `
38
- <svg class="checkmark" viewBox="0 0 18 18">
62
+ <svg class="checkmark" viewBox="0 0 18 18" aria-hidden="true">
39
63
  <path d="M6.75012 12.1274L3.62262 8.99988L2.55762 10.0574L6.75012 14.2499L15.7501 5.24988L14.6926 4.19238L6.75012 12.1274Z" />
40
64
  </svg>
41
65
  `;
42
66
  }
67
+ renderOutline() {
68
+ if (this.elevated) {
69
+ return html `<md-elevation></md-elevation>`;
70
+ }
71
+ return super.renderOutline();
72
+ }
43
73
  }
74
+ __decorate([
75
+ property({ type: Boolean })
76
+ ], FilterChip.prototype, "elevated", void 0);
44
77
  __decorate([
45
78
  property({ type: Boolean })
46
79
  ], FilterChip.prototype, "selected", void 0);
@@ -1 +1 @@
1
- {"version":3,"file":"filter-chip.js","sourceRoot":"","sources":["filter-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAiB,GAAG,EAAC,MAAM,KAAK,CAAC;AACxC,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAC;AAE/B;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,IAAI;IAGlC;QACE,KAAK,EAAE,CAAC;QAHiB,aAAQ,GAAG,KAAK,CAAC;QAI1C,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;YAClC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QACjC,CAAC,CAAC,CAAC;IACL,CAAC;IAEkB,OAAO,CAAC,iBAA6C;QACtE,IAAI,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YACrC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;SAC1D;IACH,CAAC;IAEkB,mBAAmB;QACpC,MAAM,OAAO,GAAG,KAAK,CAAC,mBAAmB,EAAE,CAAC;QAC5C,OAAO;YACL,GAAG,OAAO;YACV,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC;IACJ,CAAC;IAEkB,iBAAiB;QAClC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,OAAO,KAAK,CAAC,iBAAiB,EAAE,CAAC;SAClC;QAED,OAAO,GAAG,CAAA;;;;KAIT,CAAC;IACJ,CAAC;CACF;AAlC4B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;4CAAkB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {PropertyValues, svg} from 'lit';\nimport {property} from 'lit/decorators.js';\n\nimport {Chip} from './chip.js';\n\n/**\n * A filter chip component.\n */\nexport class FilterChip extends Chip {\n @property({type: Boolean}) selected = false;\n\n constructor() {\n super();\n this.addEventListener('click', () => {\n this.selected = !this.selected;\n });\n }\n\n protected override updated(changedProperties: PropertyValues<FilterChip>) {\n if (changedProperties.has('selected')) {\n this.dispatchEvent(new Event('change', {bubbles: true}));\n }\n }\n\n protected override getContainerClasses() {\n const classes = super.getContainerClasses();\n return {\n ...classes,\n selected: this.selected,\n };\n }\n\n protected override renderLeadingIcon() {\n if (!this.selected) {\n return super.renderLeadingIcon();\n }\n\n return svg`\n <svg class=\"checkmark\" viewBox=\"0 0 18 18\">\n <path d=\"M6.75012 12.1274L3.62262 8.99988L2.55762 10.0574L6.75012 14.2499L15.7501 5.24988L14.6926 4.19238L6.75012 12.1274Z\" />\n </svg>\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"filter-chip.js","sourceRoot":"","sources":["filter-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,8BAA8B,CAAC;AAEtC,OAAO,EAAC,IAAI,EAAE,OAAO,EAAkB,GAAG,EAAC,MAAM,KAAK,CAAC;AACvD,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAC,MAAM,EAAC,MAAM,2BAA2B,CAAC;AAGjD,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAC;AAE/B;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,IAAI;IAIlC,IAAc,eAAe;QAC3B,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QARiB,aAAQ,GAAG,KAAK,CAAC;QACjB,aAAQ,GAAG,KAAK,CAAC;QAQ1C,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;YAClC,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;YAED,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QACjC,CAAC,CAAC,CAAC;IACL,CAAC;IAEkB,OAAO,CAAC,iBAA6C;QACtE,IAAI,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC;YACjC,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC,KAAK,SAAS,EAAE;YACnD,iEAAiE;YACjE,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;SAC1D;IACH,CAAC;IAEkB,mBAAmB;QACpC,OAAO;YACL,GAAG,KAAK,CAAC,mBAAmB,EAAE;YAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC;IACJ,CAAC;IAEkB,mBAAmB;QACpC,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,OAAO,IAAI,CAAA;;;qBAGM,SAAS,IAAI,OAAO;wBACjB,IAAI,CAAC,QAAQ;oBACjB,IAAI,CAAC,QAAQ,IAAI,OAAO;;UAElC,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC;SAC9B,IAAI,CAAC,aAAa,EAAE;KACxB,CAAC;IACJ,CAAC;IAEkB,iBAAiB;QAClC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,OAAO,KAAK,CAAC,iBAAiB,EAAE,CAAC;SAClC;QAED,OAAO,GAAG,CAAA;;;;KAIT,CAAC;IACJ,CAAC;IAEkB,aAAa;QAC9B,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO,IAAI,CAAA,+BAA+B,CAAC;SAC5C;QAED,OAAO,KAAK,CAAC,aAAa,EAAE,CAAC;IAC/B,CAAC;CACF;AAnE4B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;4CAAkB;AACjB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;4CAAkB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\n\nimport {html, nothing, PropertyValues, svg} from 'lit';\nimport {property} from 'lit/decorators.js';\n\nimport {ripple} from '../../ripple/directive.js';\nimport {ARIAMixinStrict} from '../../types/aria.js';\n\nimport {Chip} from './chip.js';\n\n/**\n * A filter chip component.\n */\nexport class FilterChip extends Chip {\n @property({type: Boolean}) elevated = false;\n @property({type: Boolean}) selected = false;\n\n protected get primaryFocusFor() {\n return 'option';\n }\n\n constructor() {\n super();\n this.addEventListener('click', () => {\n if (this.disabled) {\n return;\n }\n\n this.selected = !this.selected;\n });\n }\n\n protected override updated(changedProperties: PropertyValues<FilterChip>) {\n if (changedProperties.has('selected') &&\n changedProperties.get('selected') !== undefined) {\n // Dispatch when `selected` changes, except for the first update.\n this.dispatchEvent(new Event('change', {bubbles: true}));\n }\n }\n\n protected override getContainerClasses() {\n return {\n ...super.getContainerClasses(),\n elevated: this.elevated,\n selected: this.selected,\n };\n }\n\n protected override renderPrimaryAction() {\n const {ariaLabel} = this as ARIAMixinStrict;\n return html`\n <button class=\"action\"\n id=\"option\"\n aria-label=${ariaLabel || nothing}\n aria-selected=${this.selected}\n ?disabled=${this.disabled || nothing}\n role=\"option\"\n ${ripple(this.getPrimaryRipple)}\n >${this.renderContent()}</button>\n `;\n }\n\n protected override renderLeadingIcon() {\n if (!this.selected) {\n return super.renderLeadingIcon();\n }\n\n return svg`\n <svg class=\"checkmark\" viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n <path d=\"M6.75012 12.1274L3.62262 8.99988L2.55762 10.0574L6.75012 14.2499L15.7501 5.24988L14.6926 4.19238L6.75012 12.1274Z\" />\n </svg>\n `;\n }\n\n protected override renderOutline() {\n if (this.elevated) {\n return html`<md-elevation></md-elevation>`;\n }\n\n return super.renderOutline();\n }\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{--_container-shape-start-start: var(--md-filter-chip-container-shape-start-start, var(--md-filter-chip-container-shape, 8px));--_container-shape-start-end: var(--md-filter-chip-container-shape-start-end, var(--md-filter-chip-container-shape, 8px));--_container-shape-end-end: var(--md-filter-chip-container-shape-end-end, var(--md-filter-chip-container-shape, 8px));--_container-shape-end-start: var(--md-filter-chip-container-shape-end-start, var(--md-filter-chip-container-shape, 8px));--_container-height: var(--md-filter-chip-container-height, 32px);--_disabled-label-text-color: var(--md-filter-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-filter-chip-disabled-label-text-opacity, 0.38);--_elevated-container-elevation: var(--md-filter-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-filter-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-filter-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_elevated-disabled-container-elevation: var(--md-filter-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-filter-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-filter-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-filter-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-filter-chip-elevated-pressed-container-elevation, 1);--_elevated-selected-container-color: var(--md-filter-chip-elevated-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_label-text-type: var(--md-filter-chip-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_selected-focus-label-text-color: var(--md-filter-chip-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-state-layer-color: var(--md-filter-chip-selected-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-state-layer-opacity: var(--md-filter-chip-selected-focus-state-layer-opacity, 0.12);--_selected-hover-label-text-color: var(--md-filter-chip-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-filter-chip-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-opacity: var(--md-filter-chip-selected-hover-state-layer-opacity, 0.08);--_selected-label-text-color: var(--md-filter-chip-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-label-text-color: var(--md-filter-chip-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-filter-chip-selected-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_selected-pressed-state-layer-opacity: var(--md-filter-chip-selected-pressed-state-layer-opacity, 0.12);--_elevated-container-color: var(--md-filter-chip-elevated-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_disabled-outline-color: var(--md-filter-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-filter-chip-disabled-outline-opacity, 0.12);--_disabled-selected-container-color: var(--md-filter-chip-disabled-selected-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-container-opacity: var(--md-filter-chip-disabled-selected-container-opacity, 0.12);--_focus-outline-color: var(--md-filter-chip-focus-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-color: var(--md-filter-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-filter-chip-outline-width, 1px);--_selected-container-color: var(--md-filter-chip-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-outline-width: var(--md-filter-chip-selected-outline-width, 0px);--_focus-label-text-color: var(--md-filter-chip-focus-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-state-layer-color: var(--md-filter-chip-focus-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-state-layer-opacity: var(--md-filter-chip-focus-state-layer-opacity, 0.12);--_hover-label-text-color: var(--md-filter-chip-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-filter-chip-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-filter-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-filter-chip-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-label-text-color: var(--md-filter-chip-pressed-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-filter-chip-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-opacity: var(--md-filter-chip-pressed-state-layer-opacity, 0.12);--_icon-size: var(--md-filter-chip-icon-size, 18px);--_disabled-leading-icon-color: var(--md-filter-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-filter-chip-disabled-leading-icon-opacity, 0.38);--_selected-focus-leading-icon-color: var(--md-filter-chip-selected-focus-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-leading-icon-color: var(--md-filter-chip-selected-hover-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-leading-icon-color: var(--md-filter-chip-selected-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-leading-icon-color: var(--md-filter-chip-selected-pressed-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-leading-icon-color: var(--md-filter-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-filter-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-filter-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-leading-icon-color: var(--md-filter-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_disabled-trailing-icon-color: var(--md-filter-chip-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-filter-chip-disabled-trailing-icon-opacity, 0.38);--_selected-focus-trailing-icon-color: var(--md-filter-chip-selected-focus-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-trailing-icon-color: var(--md-filter-chip-selected-hover-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-trailing-icon-color: var(--md-filter-chip-selected-pressed-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-trailing-icon-color: var(--md-filter-chip-selected-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-trailing-icon-color: var(--md-filter-chip-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-filter-chip-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-trailing-icon-color: var(--md-filter-chip-pressed-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-color: var(--md-filter-chip-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}.selected{--md-ripple-focus-color:var(--_selected-focus-state-layer-color);--md-ripple-focus-opacity:var(--_selected-focus-state-layer-opacity);--md-ripple-hover-color:var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity:var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color:var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_selected-pressed-state-layer-opacity)}.selected .icon.leading{width:var(--_icon-size)}.checkmark{inset:0;opacity:0;position:absolute}.selected .checkmark{opacity:1}.selected::before{background:var(--_selected-container-color)}.selected .outline{border-width:var(--_selected-outline-width)}.selected.elevated::before{background:var(--_elevated-selected-container-color)}.selected.disabled::before{background:var(--_disabled-selected-container-color);opacity:var(--_disabled-selected-container-opacity)}.selected .label{color:var(--_selected-label-text-color)}.selected:hover .label{color:var(--_selected-hover-label-text-color)}.selected:focus .label{color:var(--_selected-focus-label-text-color)}.selected:active .label{color:var(--_selected-pressed-label-text-color)}.selected .icon.leading{color:var(--_selected-leading-icon-color)}.selected:hover .icon.leading{color:var(--_selected-hover-leading-icon-color)}.selected:focus .icon.leading{color:var(--_selected-focus-leading-icon-color)}.selected:active .icon.leading{color:var(--_selected-pressed-leading-icon-color)}.icon.trailing{color:var(--_trailing-icon-color)}:hover .icon.trailing{color:var(--_hover-trailing-icon-color)}:focus .icon.trailing{color:var(--_focus-trailing-icon-color)}:active .icon.trailing{color:var(--_pressed-trailing-icon-color)}.disabled .icon.trailing{color:var(--_disabled-trailing-icon-color);opacity:var(--_disabled-trailing-icon-opacity)}.selected .icon.trailing{color:var(--_selected-trailing-icon-color)}.selected:hover .icon.trailing{color:var(--_selected-hover-trailing-icon-color)}.selected:focus .icon.trailing{color:var(--_selected-focus-trailing-icon-color)}.selected:active .icon.trailing{color:var(--_selected-pressed-trailing-icon-color)}/*# sourceMappingURL=filter-styles.css.map */
7
+ export const styles = css `:host{--_container-height: var(--md-filter-chip-container-height, 32px);--_container-shape: var(--md-filter-chip-container-shape, 8px);--_disabled-label-text-color: var(--md-filter-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-filter-chip-disabled-label-text-opacity, 0.38);--_elevated-container-elevation: var(--md-filter-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-filter-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-filter-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_elevated-disabled-container-elevation: var(--md-filter-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-filter-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-filter-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-filter-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-filter-chip-elevated-pressed-container-elevation, 1);--_elevated-selected-container-color: var(--md-filter-chip-elevated-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_label-text-type: var(--md-filter-chip-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_selected-focus-label-text-color: var(--md-filter-chip-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-state-layer-color: var(--md-filter-chip-selected-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-state-layer-opacity: var(--md-filter-chip-selected-focus-state-layer-opacity, 0.12);--_selected-hover-label-text-color: var(--md-filter-chip-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-filter-chip-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-opacity: var(--md-filter-chip-selected-hover-state-layer-opacity, 0.08);--_selected-label-text-color: var(--md-filter-chip-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-label-text-color: var(--md-filter-chip-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-filter-chip-selected-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_selected-pressed-state-layer-opacity: var(--md-filter-chip-selected-pressed-state-layer-opacity, 0.12);--_elevated-container-color: var(--md-filter-chip-elevated-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_disabled-outline-color: var(--md-filter-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-filter-chip-disabled-outline-opacity, 0.12);--_disabled-selected-container-color: var(--md-filter-chip-disabled-selected-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-container-opacity: var(--md-filter-chip-disabled-selected-container-opacity, 0.12);--_focus-outline-color: var(--md-filter-chip-focus-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-color: var(--md-filter-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-filter-chip-outline-width, 1px);--_selected-container-color: var(--md-filter-chip-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-outline-width: var(--md-filter-chip-selected-outline-width, 0px);--_focus-label-text-color: var(--md-filter-chip-focus-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-state-layer-color: var(--md-filter-chip-focus-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-state-layer-opacity: var(--md-filter-chip-focus-state-layer-opacity, 0.12);--_hover-label-text-color: var(--md-filter-chip-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-filter-chip-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-filter-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-filter-chip-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-label-text-color: var(--md-filter-chip-pressed-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-filter-chip-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-opacity: var(--md-filter-chip-pressed-state-layer-opacity, 0.12);--_icon-size: var(--md-filter-chip-icon-size, 18px);--_disabled-leading-icon-color: var(--md-filter-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-filter-chip-disabled-leading-icon-opacity, 0.38);--_selected-focus-leading-icon-color: var(--md-filter-chip-selected-focus-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-leading-icon-color: var(--md-filter-chip-selected-hover-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-leading-icon-color: var(--md-filter-chip-selected-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-leading-icon-color: var(--md-filter-chip-selected-pressed-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-leading-icon-color: var(--md-filter-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-filter-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-filter-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-leading-icon-color: var(--md-filter-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_disabled-trailing-icon-color: var(--md-filter-chip-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-filter-chip-disabled-trailing-icon-opacity, 0.38);--_selected-focus-trailing-icon-color: var(--md-filter-chip-selected-focus-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-trailing-icon-color: var(--md-filter-chip-selected-hover-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-trailing-icon-color: var(--md-filter-chip-selected-pressed-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-trailing-icon-color: var(--md-filter-chip-selected-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-trailing-icon-color: var(--md-filter-chip-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-filter-chip-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-trailing-icon-color: var(--md-filter-chip-pressed-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-color: var(--md-filter-chip-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_container-shape-start-start: var( --md-filter-chip-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-filter-chip-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-filter-chip-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-filter-chip-container-shape-end-start, var(--_container-shape) )}.selected{--md-ripple-focus-color:var(--_selected-focus-state-layer-color);--md-ripple-focus-opacity:var(--_selected-focus-state-layer-opacity);--md-ripple-hover-color:var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity:var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color:var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_selected-pressed-state-layer-opacity)}.selected .icon{width:var(--_icon-size)}.checkmark{inset:0;opacity:0;position:absolute}.selected .checkmark{opacity:1}.selected::before{background:var(--_selected-container-color)}.selected .outline{border-width:var(--_selected-outline-width)}.selected.elevated::before{background:var(--_elevated-selected-container-color)}.selected.disabled::before{background:var(--_disabled-selected-container-color);opacity:var(--_disabled-selected-container-opacity)}.selected .label{color:var(--_selected-label-text-color)}.selected:hover .label{color:var(--_selected-hover-label-text-color)}.selected:focus .label{color:var(--_selected-focus-label-text-color)}.selected:active .label{color:var(--_selected-pressed-label-text-color)}.selected .icon{color:var(--_selected-leading-icon-color)}.selected:hover .icon{color:var(--_selected-hover-leading-icon-color)}.selected:focus .icon{color:var(--_selected-focus-leading-icon-color)}.selected:active .icon{color:var(--_selected-pressed-leading-icon-color)}.icon.trailing{color:var(--_trailing-icon-color)}:hover .icon.trailing{color:var(--_hover-trailing-icon-color)}:focus .icon.trailing{color:var(--_focus-trailing-icon-color)}:active .icon.trailing{color:var(--_pressed-trailing-icon-color)}.disabled .icon.trailing{color:var(--_disabled-trailing-icon-color);opacity:var(--_disabled-trailing-icon-opacity)}.selected .icon.trailing{color:var(--_selected-trailing-icon-color)}.selected:hover .icon.trailing{color:var(--_selected-hover-trailing-icon-color)}.selected:focus .icon.trailing{color:var(--_selected-focus-trailing-icon-color)}.selected:active .icon.trailing{color:var(--_selected-pressed-trailing-icon-color)}/*# sourceMappingURL=filter-styles.css.map */
8
8
  `;
9
9
  //# sourceMappingURL=filter-styles.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"filter-styles.css.js","sourceRoot":"","sources":["filter-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-filter-chip-container-shape-start-start, var(--md-filter-chip-container-shape, 8px));--_container-shape-start-end: var(--md-filter-chip-container-shape-start-end, var(--md-filter-chip-container-shape, 8px));--_container-shape-end-end: var(--md-filter-chip-container-shape-end-end, var(--md-filter-chip-container-shape, 8px));--_container-shape-end-start: var(--md-filter-chip-container-shape-end-start, var(--md-filter-chip-container-shape, 8px));--_container-height: var(--md-filter-chip-container-height, 32px);--_disabled-label-text-color: var(--md-filter-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-filter-chip-disabled-label-text-opacity, 0.38);--_elevated-container-elevation: var(--md-filter-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-filter-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-filter-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_elevated-disabled-container-elevation: var(--md-filter-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-filter-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-filter-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-filter-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-filter-chip-elevated-pressed-container-elevation, 1);--_elevated-selected-container-color: var(--md-filter-chip-elevated-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_label-text-type: var(--md-filter-chip-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_selected-focus-label-text-color: var(--md-filter-chip-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-state-layer-color: var(--md-filter-chip-selected-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-state-layer-opacity: var(--md-filter-chip-selected-focus-state-layer-opacity, 0.12);--_selected-hover-label-text-color: var(--md-filter-chip-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-filter-chip-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-opacity: var(--md-filter-chip-selected-hover-state-layer-opacity, 0.08);--_selected-label-text-color: var(--md-filter-chip-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-label-text-color: var(--md-filter-chip-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-filter-chip-selected-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_selected-pressed-state-layer-opacity: var(--md-filter-chip-selected-pressed-state-layer-opacity, 0.12);--_elevated-container-color: var(--md-filter-chip-elevated-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_disabled-outline-color: var(--md-filter-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-filter-chip-disabled-outline-opacity, 0.12);--_disabled-selected-container-color: var(--md-filter-chip-disabled-selected-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-container-opacity: var(--md-filter-chip-disabled-selected-container-opacity, 0.12);--_focus-outline-color: var(--md-filter-chip-focus-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-color: var(--md-filter-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-filter-chip-outline-width, 1px);--_selected-container-color: var(--md-filter-chip-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-outline-width: var(--md-filter-chip-selected-outline-width, 0px);--_focus-label-text-color: var(--md-filter-chip-focus-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-state-layer-color: var(--md-filter-chip-focus-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-state-layer-opacity: var(--md-filter-chip-focus-state-layer-opacity, 0.12);--_hover-label-text-color: var(--md-filter-chip-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-filter-chip-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-filter-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-filter-chip-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-label-text-color: var(--md-filter-chip-pressed-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-filter-chip-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-opacity: var(--md-filter-chip-pressed-state-layer-opacity, 0.12);--_icon-size: var(--md-filter-chip-icon-size, 18px);--_disabled-leading-icon-color: var(--md-filter-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-filter-chip-disabled-leading-icon-opacity, 0.38);--_selected-focus-leading-icon-color: var(--md-filter-chip-selected-focus-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-leading-icon-color: var(--md-filter-chip-selected-hover-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-leading-icon-color: var(--md-filter-chip-selected-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-leading-icon-color: var(--md-filter-chip-selected-pressed-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-leading-icon-color: var(--md-filter-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-filter-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-filter-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-leading-icon-color: var(--md-filter-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_disabled-trailing-icon-color: var(--md-filter-chip-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-filter-chip-disabled-trailing-icon-opacity, 0.38);--_selected-focus-trailing-icon-color: var(--md-filter-chip-selected-focus-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-trailing-icon-color: var(--md-filter-chip-selected-hover-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-trailing-icon-color: var(--md-filter-chip-selected-pressed-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-trailing-icon-color: var(--md-filter-chip-selected-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-trailing-icon-color: var(--md-filter-chip-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-filter-chip-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-trailing-icon-color: var(--md-filter-chip-pressed-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-color: var(--md-filter-chip-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}.selected{--md-ripple-focus-color:var(--_selected-focus-state-layer-color);--md-ripple-focus-opacity:var(--_selected-focus-state-layer-opacity);--md-ripple-hover-color:var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity:var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color:var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_selected-pressed-state-layer-opacity)}.selected .icon.leading{width:var(--_icon-size)}.checkmark{inset:0;opacity:0;position:absolute}.selected .checkmark{opacity:1}.selected::before{background:var(--_selected-container-color)}.selected .outline{border-width:var(--_selected-outline-width)}.selected.elevated::before{background:var(--_elevated-selected-container-color)}.selected.disabled::before{background:var(--_disabled-selected-container-color);opacity:var(--_disabled-selected-container-opacity)}.selected .label{color:var(--_selected-label-text-color)}.selected:hover .label{color:var(--_selected-hover-label-text-color)}.selected:focus .label{color:var(--_selected-focus-label-text-color)}.selected:active .label{color:var(--_selected-pressed-label-text-color)}.selected .icon.leading{color:var(--_selected-leading-icon-color)}.selected:hover .icon.leading{color:var(--_selected-hover-leading-icon-color)}.selected:focus .icon.leading{color:var(--_selected-focus-leading-icon-color)}.selected:active .icon.leading{color:var(--_selected-pressed-leading-icon-color)}.icon.trailing{color:var(--_trailing-icon-color)}:hover .icon.trailing{color:var(--_hover-trailing-icon-color)}:focus .icon.trailing{color:var(--_focus-trailing-icon-color)}:active .icon.trailing{color:var(--_pressed-trailing-icon-color)}.disabled .icon.trailing{color:var(--_disabled-trailing-icon-color);opacity:var(--_disabled-trailing-icon-opacity)}.selected .icon.trailing{color:var(--_selected-trailing-icon-color)}.selected:hover .icon.trailing{color:var(--_selected-hover-trailing-icon-color)}.selected:focus .icon.trailing{color:var(--_selected-focus-trailing-icon-color)}.selected:active .icon.trailing{color:var(--_selected-pressed-trailing-icon-color)}/*# sourceMappingURL=filter-styles.css.map */\n`;\n "]}
1
+ {"version":3,"file":"filter-styles.css.js","sourceRoot":"","sources":["filter-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-height: var(--md-filter-chip-container-height, 32px);--_container-shape: var(--md-filter-chip-container-shape, 8px);--_disabled-label-text-color: var(--md-filter-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-filter-chip-disabled-label-text-opacity, 0.38);--_elevated-container-elevation: var(--md-filter-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-filter-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-filter-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_elevated-disabled-container-elevation: var(--md-filter-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-filter-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-filter-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-filter-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-filter-chip-elevated-pressed-container-elevation, 1);--_elevated-selected-container-color: var(--md-filter-chip-elevated-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_label-text-type: var(--md-filter-chip-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_selected-focus-label-text-color: var(--md-filter-chip-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-state-layer-color: var(--md-filter-chip-selected-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-state-layer-opacity: var(--md-filter-chip-selected-focus-state-layer-opacity, 0.12);--_selected-hover-label-text-color: var(--md-filter-chip-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-filter-chip-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-opacity: var(--md-filter-chip-selected-hover-state-layer-opacity, 0.08);--_selected-label-text-color: var(--md-filter-chip-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-label-text-color: var(--md-filter-chip-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-filter-chip-selected-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_selected-pressed-state-layer-opacity: var(--md-filter-chip-selected-pressed-state-layer-opacity, 0.12);--_elevated-container-color: var(--md-filter-chip-elevated-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_disabled-outline-color: var(--md-filter-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-filter-chip-disabled-outline-opacity, 0.12);--_disabled-selected-container-color: var(--md-filter-chip-disabled-selected-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-container-opacity: var(--md-filter-chip-disabled-selected-container-opacity, 0.12);--_focus-outline-color: var(--md-filter-chip-focus-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-color: var(--md-filter-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-filter-chip-outline-width, 1px);--_selected-container-color: var(--md-filter-chip-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-outline-width: var(--md-filter-chip-selected-outline-width, 0px);--_focus-label-text-color: var(--md-filter-chip-focus-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-state-layer-color: var(--md-filter-chip-focus-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-state-layer-opacity: var(--md-filter-chip-focus-state-layer-opacity, 0.12);--_hover-label-text-color: var(--md-filter-chip-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-filter-chip-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-filter-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-filter-chip-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-label-text-color: var(--md-filter-chip-pressed-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-filter-chip-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-opacity: var(--md-filter-chip-pressed-state-layer-opacity, 0.12);--_icon-size: var(--md-filter-chip-icon-size, 18px);--_disabled-leading-icon-color: var(--md-filter-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-filter-chip-disabled-leading-icon-opacity, 0.38);--_selected-focus-leading-icon-color: var(--md-filter-chip-selected-focus-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-leading-icon-color: var(--md-filter-chip-selected-hover-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-leading-icon-color: var(--md-filter-chip-selected-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-leading-icon-color: var(--md-filter-chip-selected-pressed-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-leading-icon-color: var(--md-filter-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-filter-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-filter-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-leading-icon-color: var(--md-filter-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_disabled-trailing-icon-color: var(--md-filter-chip-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-filter-chip-disabled-trailing-icon-opacity, 0.38);--_selected-focus-trailing-icon-color: var(--md-filter-chip-selected-focus-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-trailing-icon-color: var(--md-filter-chip-selected-hover-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-trailing-icon-color: var(--md-filter-chip-selected-pressed-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-trailing-icon-color: var(--md-filter-chip-selected-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-trailing-icon-color: var(--md-filter-chip-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-filter-chip-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-trailing-icon-color: var(--md-filter-chip-pressed-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-color: var(--md-filter-chip-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_container-shape-start-start: var( --md-filter-chip-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-filter-chip-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-filter-chip-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-filter-chip-container-shape-end-start, var(--_container-shape) )}.selected{--md-ripple-focus-color:var(--_selected-focus-state-layer-color);--md-ripple-focus-opacity:var(--_selected-focus-state-layer-opacity);--md-ripple-hover-color:var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity:var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color:var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_selected-pressed-state-layer-opacity)}.selected .icon{width:var(--_icon-size)}.checkmark{inset:0;opacity:0;position:absolute}.selected .checkmark{opacity:1}.selected::before{background:var(--_selected-container-color)}.selected .outline{border-width:var(--_selected-outline-width)}.selected.elevated::before{background:var(--_elevated-selected-container-color)}.selected.disabled::before{background:var(--_disabled-selected-container-color);opacity:var(--_disabled-selected-container-opacity)}.selected .label{color:var(--_selected-label-text-color)}.selected:hover .label{color:var(--_selected-hover-label-text-color)}.selected:focus .label{color:var(--_selected-focus-label-text-color)}.selected:active .label{color:var(--_selected-pressed-label-text-color)}.selected .icon{color:var(--_selected-leading-icon-color)}.selected:hover .icon{color:var(--_selected-hover-leading-icon-color)}.selected:focus .icon{color:var(--_selected-focus-leading-icon-color)}.selected:active .icon{color:var(--_selected-pressed-leading-icon-color)}.icon.trailing{color:var(--_trailing-icon-color)}:hover .icon.trailing{color:var(--_hover-trailing-icon-color)}:focus .icon.trailing{color:var(--_focus-trailing-icon-color)}:active .icon.trailing{color:var(--_pressed-trailing-icon-color)}.disabled .icon.trailing{color:var(--_disabled-trailing-icon-color);opacity:var(--_disabled-trailing-icon-opacity)}.selected .icon.trailing{color:var(--_selected-trailing-icon-color)}.selected:hover .icon.trailing{color:var(--_selected-hover-trailing-icon-color)}.selected:focus .icon.trailing{color:var(--_selected-focus-trailing-icon-color)}.selected:active .icon.trailing{color:var(--_selected-pressed-trailing-icon-color)}/*# sourceMappingURL=filter-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{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end);display:inline-flex;height:var(--_container-height);--md-ripple-focus-color:var(--_focus-state-layer-color);--md-ripple-focus-opacity:var(--_focus-state-layer-opacity);--md-ripple-hover-color:var(--_hover-state-layer-color);--md-ripple-hover-opacity:var(--_hover-state-layer-opacity);--md-ripple-pressed-color:var(--_pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_pressed-state-layer-opacity)}.container{align-items:baseline;appearance:none;background:none;border:none;border-radius:inherit;box-sizing:border-box;display:flex;gap:8px;height:100%;outline:none;padding:0 8px;position:relative;text-decoration:none;width:100%}.container::before{border-radius:inherit;content:"";inset:0;pointer-events:none;position:absolute}.container:not(.disabled){cursor:pointer}.container.disabled{pointer-events:none}.outline{border:var(--_outline-width) solid var(--_outline-color);border-radius:inherit;inset:0;pointer-events:none;position:absolute}:focus .outline{border-color:var(--_focus-outline-color)}.disabled .outline{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}.elevated{--md-elevation-level:var(--_elevated-container-elevation);--md-elevation-shadow-color:var(--_elevated-container-shadow-color)}.elevated::before{background:var(--_elevated-container-color)}.elevated:hover{--md-elevation-level:var(--_elevated-hover-container-elevation)}.elevated:focus-within{--md-elevation-level:var(--_elevated-focus-container-elevation)}.elevated:active{--md-elevation-level:var(--_elevated-pressed-container-elevation)}.elevated.disabled{--md-elevation-level:var(--_elevated-disabled-container-elevation)}.elevated.disabled::before{background:var(--_elevated-disabled-container-color);opacity:var(--_elevated-disabled-container-opacity)}md-focus-ring{--md-focus-ring-shape-start-start:var(--md-focus-ring-shape, var(--_container-shape-start-start));--md-focus-ring-shape-start-end:var(--md-focus-ring-shape, var(--_container-shape-start-end));--md-focus-ring-shape-end-end:var(--md-focus-ring-shape, var(--_container-shape-end-end));--md-focus-ring-shape-end-start:var(--md-focus-ring-shape, var(--_container-shape-end-start))}md-ripple{border-radius:inherit}.label,.icon{z-index:1}.label{align-items:center;color:var(--_label-text-color);display:flex;font:var(--_label-text-type);height:100%;text-overflow:ellipsis;user-select:none;white-space:nowrap}:hover .label{color:var(--_hover-label-text-color)}:focus .label{color:var(--_focus-label-text-color)}:active .label{color:var(--_pressed-label-text-color)}.disabled .label{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.icon{align-self:center;height:var(--_icon-size);position:relative}.icon ::slotted(*){font-size:var(--_icon-size);height:var(--_icon-size);width:var(--_icon-size)}.icon.leading{color:var(--_leading-icon-color)}:hover .icon.leading{color:var(--_hover-leading-icon-color)}:focus .icon.leading{color:var(--_focus-leading-icon-color)}:active .icon.leading{color:var(--_pressed-leading-icon-color)}.disabled .icon.leading{color:var(--_disabled-leading-icon-color);opacity:var(--_disabled-leading-icon-opacity)}/*# sourceMappingURL=shared-styles.css.map */
7
+ export const styles = css `:host{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end);display:inline-flex;height:var(--_container-height);--md-ripple-focus-color:var(--_focus-state-layer-color);--md-ripple-focus-opacity:var(--_focus-state-layer-opacity);--md-ripple-hover-color:var(--_hover-state-layer-color);--md-ripple-hover-opacity:var(--_hover-state-layer-opacity);--md-ripple-pressed-color:var(--_pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_pressed-state-layer-opacity);--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}.container{border-radius:inherit;box-sizing:border-box;display:flex;height:100%;position:relative;width:100%}.container::before{border-radius:inherit;content:"";inset:0;pointer-events:none;position:absolute}.container:not(.disabled){cursor:pointer}.container.disabled{pointer-events:none}.action{align-items:baseline;appearance:none;background:none;border:none;border-radius:inherit;display:flex;outline:none;padding:0;text-decoration:none}.action:first-of-type{padding-inline-start:8px}.action:last-of-type{padding-inline-end:8px}.outline{border:var(--_outline-width) solid var(--_outline-color);border-radius:inherit;inset:0;pointer-events:none;position:absolute}:focus .outline{border-color:var(--_focus-outline-color)}.disabled .outline{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}md-ripple{border-radius:inherit}.label,.icon{z-index:1}.label{align-items:center;color:var(--_label-text-color);display:flex;font:var(--_label-text-type);height:100%;padding:0 8px;text-overflow:ellipsis;user-select:none;white-space:nowrap}:hover .label{color:var(--_hover-label-text-color)}:focus .label{color:var(--_focus-label-text-color)}:active .label{color:var(--_pressed-label-text-color)}.disabled .label{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.icon{align-self:center;color:var(--_leading-icon-color);height:var(--_icon-size);position:relative}.icon ::slotted(*){font-size:var(--_icon-size);height:var(--_icon-size);width:var(--_icon-size)}:hover .icon{color:var(--_hover-leading-icon-color)}:focus .icon{color:var(--_focus-leading-icon-color)}:active .icon{color:var(--_pressed-leading-icon-color)}.disabled .icon{color:var(--_disabled-leading-icon-color);opacity:var(--_disabled-leading-icon-opacity)}/*# 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{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end);display:inline-flex;height:var(--_container-height);--md-ripple-focus-color:var(--_focus-state-layer-color);--md-ripple-focus-opacity:var(--_focus-state-layer-opacity);--md-ripple-hover-color:var(--_hover-state-layer-color);--md-ripple-hover-opacity:var(--_hover-state-layer-opacity);--md-ripple-pressed-color:var(--_pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_pressed-state-layer-opacity)}.container{align-items:baseline;appearance:none;background:none;border:none;border-radius:inherit;box-sizing:border-box;display:flex;gap:8px;height:100%;outline:none;padding:0 8px;position:relative;text-decoration:none;width:100%}.container::before{border-radius:inherit;content:\"\";inset:0;pointer-events:none;position:absolute}.container:not(.disabled){cursor:pointer}.container.disabled{pointer-events:none}.outline{border:var(--_outline-width) solid var(--_outline-color);border-radius:inherit;inset:0;pointer-events:none;position:absolute}:focus .outline{border-color:var(--_focus-outline-color)}.disabled .outline{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}.elevated{--md-elevation-level:var(--_elevated-container-elevation);--md-elevation-shadow-color:var(--_elevated-container-shadow-color)}.elevated::before{background:var(--_elevated-container-color)}.elevated:hover{--md-elevation-level:var(--_elevated-hover-container-elevation)}.elevated:focus-within{--md-elevation-level:var(--_elevated-focus-container-elevation)}.elevated:active{--md-elevation-level:var(--_elevated-pressed-container-elevation)}.elevated.disabled{--md-elevation-level:var(--_elevated-disabled-container-elevation)}.elevated.disabled::before{background:var(--_elevated-disabled-container-color);opacity:var(--_elevated-disabled-container-opacity)}md-focus-ring{--md-focus-ring-shape-start-start:var(--md-focus-ring-shape, var(--_container-shape-start-start));--md-focus-ring-shape-start-end:var(--md-focus-ring-shape, var(--_container-shape-start-end));--md-focus-ring-shape-end-end:var(--md-focus-ring-shape, var(--_container-shape-end-end));--md-focus-ring-shape-end-start:var(--md-focus-ring-shape, var(--_container-shape-end-start))}md-ripple{border-radius:inherit}.label,.icon{z-index:1}.label{align-items:center;color:var(--_label-text-color);display:flex;font:var(--_label-text-type);height:100%;text-overflow:ellipsis;user-select:none;white-space:nowrap}:hover .label{color:var(--_hover-label-text-color)}:focus .label{color:var(--_focus-label-text-color)}:active .label{color:var(--_pressed-label-text-color)}.disabled .label{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.icon{align-self:center;height:var(--_icon-size);position:relative}.icon ::slotted(*){font-size:var(--_icon-size);height:var(--_icon-size);width:var(--_icon-size)}.icon.leading{color:var(--_leading-icon-color)}:hover .icon.leading{color:var(--_hover-leading-icon-color)}:focus .icon.leading{color:var(--_focus-leading-icon-color)}:active .icon.leading{color:var(--_pressed-leading-icon-color)}.disabled .icon.leading{color:var(--_disabled-leading-icon-color);opacity:var(--_disabled-leading-icon-opacity)}/*# 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{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end);display:inline-flex;height:var(--_container-height);--md-ripple-focus-color:var(--_focus-state-layer-color);--md-ripple-focus-opacity:var(--_focus-state-layer-opacity);--md-ripple-hover-color:var(--_hover-state-layer-color);--md-ripple-hover-opacity:var(--_hover-state-layer-opacity);--md-ripple-pressed-color:var(--_pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_pressed-state-layer-opacity);--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}.container{border-radius:inherit;box-sizing:border-box;display:flex;height:100%;position:relative;width:100%}.container::before{border-radius:inherit;content:\"\";inset:0;pointer-events:none;position:absolute}.container:not(.disabled){cursor:pointer}.container.disabled{pointer-events:none}.action{align-items:baseline;appearance:none;background:none;border:none;border-radius:inherit;display:flex;outline:none;padding:0;text-decoration:none}.action:first-of-type{padding-inline-start:8px}.action:last-of-type{padding-inline-end:8px}.outline{border:var(--_outline-width) solid var(--_outline-color);border-radius:inherit;inset:0;pointer-events:none;position:absolute}:focus .outline{border-color:var(--_focus-outline-color)}.disabled .outline{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}md-ripple{border-radius:inherit}.label,.icon{z-index:1}.label{align-items:center;color:var(--_label-text-color);display:flex;font:var(--_label-text-type);height:100%;padding:0 8px;text-overflow:ellipsis;user-select:none;white-space:nowrap}:hover .label{color:var(--_hover-label-text-color)}:focus .label{color:var(--_focus-label-text-color)}:active .label{color:var(--_pressed-label-text-color)}.disabled .label{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.icon{align-self:center;color:var(--_leading-icon-color);height:var(--_icon-size);position:relative}.icon ::slotted(*){font-size:var(--_icon-size);height:var(--_icon-size);width:var(--_icon-size)}:hover .icon{color:var(--_hover-leading-icon-color)}:focus .icon{color:var(--_focus-leading-icon-color)}:active .icon{color:var(--_pressed-leading-icon-color)}.disabled .icon{color:var(--_disabled-leading-icon-color);opacity:var(--_disabled-leading-icon-opacity)}/*# sourceMappingURL=shared-styles.css.map */\n`;\n "]}
@@ -3,9 +3,9 @@
3
3
  * Copyright 2023 Google LLC
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
- import { Chip } from './chip.js';
6
+ import { AssistChip } from './assist-chip.js';
7
7
  /**
8
8
  * A suggestion chip component.
9
9
  */
10
- export declare class SuggestionChip extends Chip {
10
+ export declare class SuggestionChip extends AssistChip {
11
11
  }
@@ -3,10 +3,12 @@
3
3
  * Copyright 2023 Google LLC
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
- import { Chip } from './chip.js';
6
+ import { AssistChip } from './assist-chip.js';
7
7
  /**
8
8
  * A suggestion chip component.
9
9
  */
10
- export class SuggestionChip extends Chip {
10
+ export class SuggestionChip extends AssistChip {
11
11
  }
12
+ // Note: assist and suggestion chips are functionally identical with different
13
+ // tokens.
12
14
  //# sourceMappingURL=suggestion-chip.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"suggestion-chip.js","sourceRoot":"","sources":["suggestion-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAC;AAE/B;;GAEG;AACH,MAAM,OAAO,cAAe,SAAQ,IAAI;CAAG","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Chip} from './chip.js';\n\n/**\n * A suggestion chip component.\n */\nexport class SuggestionChip extends Chip {}\n"]}
1
+ {"version":3,"file":"suggestion-chip.js","sourceRoot":"","sources":["suggestion-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,UAAU,EAAC,MAAM,kBAAkB,CAAC;AAE5C;;GAEG;AACH,MAAM,OAAO,cAAe,SAAQ,UAAU;CAAG;AAEjD,8EAA8E;AAC9E,UAAU","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {AssistChip} from './assist-chip.js';\n\n/**\n * A suggestion chip component.\n */\nexport class SuggestionChip extends AssistChip {}\n\n// Note: assist and suggestion chips are functionally identical with different\n// tokens.\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{--_container-shape-start-start: var(--md-suggestion-chip-container-shape-start-start, var(--md-suggestion-chip-container-shape, 8px));--_container-shape-start-end: var(--md-suggestion-chip-container-shape-start-end, var(--md-suggestion-chip-container-shape, 8px));--_container-shape-end-end: var(--md-suggestion-chip-container-shape-end-end, var(--md-suggestion-chip-container-shape, 8px));--_container-shape-end-start: var(--md-suggestion-chip-container-shape-end-start, var(--md-suggestion-chip-container-shape, 8px));--_container-height: var(--md-suggestion-chip-container-height, 32px);--_disabled-label-text-color: var(--md-suggestion-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-suggestion-chip-disabled-label-text-opacity, 0.38);--_elevated-container-color: var(--md-suggestion-chip-elevated-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_elevated-container-elevation: var(--md-suggestion-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-suggestion-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-suggestion-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_elevated-disabled-container-elevation: var(--md-suggestion-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-suggestion-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-suggestion-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-suggestion-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-suggestion-chip-elevated-pressed-container-elevation, 1);--_focus-label-text-color: var(--md-suggestion-chip-focus-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-state-layer-color: var(--md-suggestion-chip-focus-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-state-layer-opacity: var(--md-suggestion-chip-focus-state-layer-opacity, 0.12);--_hover-label-text-color: var(--md-suggestion-chip-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-suggestion-chip-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-suggestion-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-suggestion-chip-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-type: var(--md-suggestion-chip-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_pressed-label-text-color: var(--md-suggestion-chip-pressed-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-suggestion-chip-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-opacity: var(--md-suggestion-chip-pressed-state-layer-opacity, 0.12);--_disabled-outline-color: var(--md-suggestion-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-suggestion-chip-disabled-outline-opacity, 0.12);--_focus-outline-color: var(--md-suggestion-chip-focus-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-color: var(--md-suggestion-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-suggestion-chip-outline-width, 1px);--_disabled-leading-icon-color: var(--md-suggestion-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-suggestion-chip-disabled-leading-icon-opacity, 0.38);--_focus-leading-icon-color: var(--md-suggestion-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-suggestion-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-suggestion-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-leading-icon-color: var(--md-suggestion-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-suggestion-chip-icon-size, 18px)}/*# sourceMappingURL=suggestion-styles.css.map */
7
+ export const styles = css `:host{--_container-height: 32px;--_container-shape: 8px;--_disabled-label-text-color: var(--md-sys-color-on-surface, #1d1b20);--_disabled-label-text-opacity: 0.38;--_elevated-container-color: var(--md-sys-color-surface-container-low, #f7f2fa);--_elevated-container-elevation: 1;--_elevated-container-shadow-color: var(--md-sys-color-shadow, #000);--_elevated-disabled-container-color: var(--md-sys-color-on-surface, #1d1b20);--_elevated-disabled-container-elevation: 0;--_elevated-disabled-container-opacity: 0.12;--_elevated-focus-container-elevation: 1;--_elevated-hover-container-elevation: 2;--_elevated-pressed-container-elevation: 1;--_focus-label-text-color: var(--md-sys-color-on-surface-variant, #49454f);--_focus-state-layer-color: var(--md-sys-color-on-surface-variant, #49454f);--_focus-state-layer-opacity: 0.12;--_hover-label-text-color: var(--md-sys-color-on-surface-variant, #49454f);--_hover-state-layer-color: var(--md-sys-color-on-surface-variant, #49454f);--_hover-state-layer-opacity: 0.08;--_label-text-color: var(--md-sys-color-on-surface-variant, #49454f);--_label-text-type: var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto));--_pressed-label-text-color: var(--md-sys-color-on-surface-variant, #49454f);--_pressed-state-layer-color: var(--md-sys-color-on-surface-variant, #49454f);--_pressed-state-layer-opacity: 0.12;--_disabled-outline-color: var(--md-sys-color-on-surface, #1d1b20);--_disabled-outline-opacity: 0.12;--_focus-outline-color: var(--md-sys-color-on-surface-variant, #49454f);--_outline-color: var(--md-sys-color-outline, #79747e);--_outline-width: 1px;--_disabled-leading-icon-color: var(--md-sys-color-on-surface, #1d1b20);--_disabled-leading-icon-opacity: 0.38;--_focus-leading-icon-color: var(--md-sys-color-primary, #6750a4);--_hover-leading-icon-color: var(--md-sys-color-primary, #6750a4);--_leading-icon-color: var(--md-sys-color-primary, #6750a4);--_pressed-leading-icon-color: var(--md-sys-color-primary, #6750a4);--_icon-size: 18px;--_container-shape-start-start: var( --md-suggestion-chip-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-suggestion-chip-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-suggestion-chip-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-suggestion-chip-container-shape-end-start, var(--_container-shape) )}/*# sourceMappingURL=suggestion-styles.css.map */
8
8
  `;
9
9
  //# sourceMappingURL=suggestion-styles.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"suggestion-styles.css.js","sourceRoot":"","sources":["suggestion-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-suggestion-chip-container-shape-start-start, var(--md-suggestion-chip-container-shape, 8px));--_container-shape-start-end: var(--md-suggestion-chip-container-shape-start-end, var(--md-suggestion-chip-container-shape, 8px));--_container-shape-end-end: var(--md-suggestion-chip-container-shape-end-end, var(--md-suggestion-chip-container-shape, 8px));--_container-shape-end-start: var(--md-suggestion-chip-container-shape-end-start, var(--md-suggestion-chip-container-shape, 8px));--_container-height: var(--md-suggestion-chip-container-height, 32px);--_disabled-label-text-color: var(--md-suggestion-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-suggestion-chip-disabled-label-text-opacity, 0.38);--_elevated-container-color: var(--md-suggestion-chip-elevated-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_elevated-container-elevation: var(--md-suggestion-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-suggestion-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-suggestion-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_elevated-disabled-container-elevation: var(--md-suggestion-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-suggestion-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-suggestion-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-suggestion-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-suggestion-chip-elevated-pressed-container-elevation, 1);--_focus-label-text-color: var(--md-suggestion-chip-focus-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-state-layer-color: var(--md-suggestion-chip-focus-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-state-layer-opacity: var(--md-suggestion-chip-focus-state-layer-opacity, 0.12);--_hover-label-text-color: var(--md-suggestion-chip-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-suggestion-chip-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-suggestion-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-suggestion-chip-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-type: var(--md-suggestion-chip-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_pressed-label-text-color: var(--md-suggestion-chip-pressed-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-suggestion-chip-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-opacity: var(--md-suggestion-chip-pressed-state-layer-opacity, 0.12);--_disabled-outline-color: var(--md-suggestion-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-suggestion-chip-disabled-outline-opacity, 0.12);--_focus-outline-color: var(--md-suggestion-chip-focus-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-color: var(--md-suggestion-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-suggestion-chip-outline-width, 1px);--_disabled-leading-icon-color: var(--md-suggestion-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-suggestion-chip-disabled-leading-icon-opacity, 0.38);--_focus-leading-icon-color: var(--md-suggestion-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-suggestion-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-suggestion-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-leading-icon-color: var(--md-suggestion-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-suggestion-chip-icon-size, 18px)}/*# sourceMappingURL=suggestion-styles.css.map */\n`;\n "]}
1
+ {"version":3,"file":"suggestion-styles.css.js","sourceRoot":"","sources":["suggestion-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-height: 32px;--_container-shape: 8px;--_disabled-label-text-color: var(--md-sys-color-on-surface, #1d1b20);--_disabled-label-text-opacity: 0.38;--_elevated-container-color: var(--md-sys-color-surface-container-low, #f7f2fa);--_elevated-container-elevation: 1;--_elevated-container-shadow-color: var(--md-sys-color-shadow, #000);--_elevated-disabled-container-color: var(--md-sys-color-on-surface, #1d1b20);--_elevated-disabled-container-elevation: 0;--_elevated-disabled-container-opacity: 0.12;--_elevated-focus-container-elevation: 1;--_elevated-hover-container-elevation: 2;--_elevated-pressed-container-elevation: 1;--_focus-label-text-color: var(--md-sys-color-on-surface-variant, #49454f);--_focus-state-layer-color: var(--md-sys-color-on-surface-variant, #49454f);--_focus-state-layer-opacity: 0.12;--_hover-label-text-color: var(--md-sys-color-on-surface-variant, #49454f);--_hover-state-layer-color: var(--md-sys-color-on-surface-variant, #49454f);--_hover-state-layer-opacity: 0.08;--_label-text-color: var(--md-sys-color-on-surface-variant, #49454f);--_label-text-type: var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto));--_pressed-label-text-color: var(--md-sys-color-on-surface-variant, #49454f);--_pressed-state-layer-color: var(--md-sys-color-on-surface-variant, #49454f);--_pressed-state-layer-opacity: 0.12;--_disabled-outline-color: var(--md-sys-color-on-surface, #1d1b20);--_disabled-outline-opacity: 0.12;--_focus-outline-color: var(--md-sys-color-on-surface-variant, #49454f);--_outline-color: var(--md-sys-color-outline, #79747e);--_outline-width: 1px;--_disabled-leading-icon-color: var(--md-sys-color-on-surface, #1d1b20);--_disabled-leading-icon-opacity: 0.38;--_focus-leading-icon-color: var(--md-sys-color-primary, #6750a4);--_hover-leading-icon-color: var(--md-sys-color-primary, #6750a4);--_leading-icon-color: var(--md-sys-color-primary, #6750a4);--_pressed-leading-icon-color: var(--md-sys-color-primary, #6750a4);--_icon-size: 18px;--_container-shape-start-start: var( --md-suggestion-chip-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-suggestion-chip-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-suggestion-chip-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-suggestion-chip-container-shape-end-start, var(--_container-shape) )}/*# sourceMappingURL=suggestion-styles.css.map */\n`;\n "]}
@@ -5,6 +5,7 @@
5
5
  */
6
6
  import { __decorate } from "tslib";
7
7
  import { customElement } from 'lit/decorators.js';
8
+ import { styles as elevatedStyles } from './lib/elevated-styles.css.js';
8
9
  import { styles as sharedStyles } from './lib/shared-styles.css.js';
9
10
  import { SuggestionChip } from './lib/suggestion-chip.js';
10
11
  import { styles } from './lib/suggestion-styles.css.js';
@@ -16,7 +17,7 @@ import { styles } from './lib/suggestion-styles.css.js';
16
17
  */
17
18
  let MdSuggestionChip = class MdSuggestionChip extends SuggestionChip {
18
19
  };
19
- MdSuggestionChip.styles = [sharedStyles, styles];
20
+ MdSuggestionChip.styles = [sharedStyles, elevatedStyles, styles];
20
21
  MdSuggestionChip = __decorate([
21
22
  customElement('md-suggestion-chip')
22
23
  ], MdSuggestionChip);
@@ -1 +1 @@
1
- {"version":3,"file":"suggestion-chip.js","sourceRoot":"","sources":["suggestion-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAC,cAAc,EAAC,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAC,MAAM,EAAC,MAAM,gCAAgC,CAAC;AAQtD;;;;;GAKG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,cAAc;;AAClC,uBAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AADrC,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAE5B;SAFY,gBAAgB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\nimport {SuggestionChip} from './lib/suggestion-chip.js';\nimport {styles} from './lib/suggestion-styles.css.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-suggestion-chip': MdSuggestionChip;\n }\n}\n\n/**\n * TODO(b/243982145): add docs\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-suggestion-chip')\nexport class MdSuggestionChip extends SuggestionChip {\n static override styles = [sharedStyles, styles];\n}\n"]}
1
+ {"version":3,"file":"suggestion-chip.js","sourceRoot":"","sources":["suggestion-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAC,cAAc,EAAC,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAC,MAAM,EAAC,MAAM,gCAAgC,CAAC;AAQtD;;;;;GAKG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,cAAc;;AAClC,uBAAM,GAAG,CAAC,YAAY,EAAE,cAAc,EAAE,MAAM,CAAC,CAAC;AADrD,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAE5B;SAFY,gBAAgB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as elevatedStyles} from './lib/elevated-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\nimport {SuggestionChip} from './lib/suggestion-chip.js';\nimport {styles} from './lib/suggestion-styles.css.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-suggestion-chip': MdSuggestionChip;\n }\n}\n\n/**\n * TODO(b/243982145): add docs\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-suggestion-chip')\nexport class MdSuggestionChip extends SuggestionChip {\n static override styles = [sharedStyles, elevatedStyles, styles];\n}\n"]}