@material/web 1.0.0-pre.16 → 1.0.0-pre.17

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 (291) hide show
  1. package/README.md +5 -5
  2. package/all.d.ts +4 -2
  3. package/all.js +4 -2
  4. package/all.js.map +1 -1
  5. package/button/internal/_elevation.scss +4 -0
  6. package/button/internal/_shared.scss +5 -1
  7. package/button/internal/elevated-styles.css.js +1 -1
  8. package/button/internal/elevated-styles.css.js.map +1 -1
  9. package/button/internal/filled-styles.css.js +1 -1
  10. package/button/internal/filled-styles.css.js.map +1 -1
  11. package/button/internal/filled-tonal-styles.css.js +1 -1
  12. package/button/internal/filled-tonal-styles.css.js.map +1 -1
  13. package/button/internal/outlined-styles.css.js +1 -1
  14. package/button/internal/outlined-styles.css.js.map +1 -1
  15. package/button/internal/shared-elevation-styles.css.js +1 -1
  16. package/button/internal/shared-elevation-styles.css.js.map +1 -1
  17. package/button/internal/shared-styles.css.js +1 -1
  18. package/button/internal/shared-styles.css.js.map +1 -1
  19. package/button/internal/text-styles.css.js +1 -1
  20. package/button/internal/text-styles.css.js.map +1 -1
  21. package/checkbox/internal/_checkbox.scss +1 -1
  22. package/checkbox/internal/checkbox-styles.css.js +1 -1
  23. package/checkbox/internal/checkbox-styles.css.js.map +1 -1
  24. package/chips/internal/_elevated.scss +0 -4
  25. package/chips/internal/_shared.scss +10 -1
  26. package/chips/internal/assist-chip.d.ts +3 -1
  27. package/chips/internal/assist-chip.js +11 -8
  28. package/chips/internal/assist-chip.js.map +1 -1
  29. package/chips/internal/assist-styles.css.js +1 -1
  30. package/chips/internal/assist-styles.css.js.map +1 -1
  31. package/chips/internal/chip.d.ts +18 -10
  32. package/chips/internal/chip.js +38 -33
  33. package/chips/internal/chip.js.map +1 -1
  34. package/chips/internal/elevated-styles.css.js +1 -1
  35. package/chips/internal/elevated-styles.css.js.map +1 -1
  36. package/chips/internal/filter-chip.d.ts +6 -7
  37. package/chips/internal/filter-chip.js +13 -14
  38. package/chips/internal/filter-chip.js.map +1 -1
  39. package/chips/internal/filter-styles.css.js +1 -1
  40. package/chips/internal/filter-styles.css.js.map +1 -1
  41. package/chips/internal/input-chip.d.ts +4 -2
  42. package/chips/internal/input-chip.js +16 -12
  43. package/chips/internal/input-chip.js.map +1 -1
  44. package/chips/internal/input-styles.css.js +1 -1
  45. package/chips/internal/input-styles.css.js.map +1 -1
  46. package/chips/internal/multi-action-chip.d.ts +2 -3
  47. package/chips/internal/multi-action-chip.js +3 -3
  48. package/chips/internal/multi-action-chip.js.map +1 -1
  49. package/chips/internal/shared-styles.css.js +1 -1
  50. package/chips/internal/shared-styles.css.js.map +1 -1
  51. package/chips/internal/suggestion-styles.css.js +1 -1
  52. package/chips/internal/suggestion-styles.css.js.map +1 -1
  53. package/color/_color.scss +193 -0
  54. package/common.d.ts +2 -2
  55. package/common.js +2 -2
  56. package/common.js.map +1 -1
  57. package/dialog/internal/_dialog.scss +19 -4
  58. package/dialog/internal/dialog-styles.css.js +1 -1
  59. package/dialog/internal/dialog-styles.css.js.map +1 -1
  60. package/dialog/internal/dialog.d.ts +6 -0
  61. package/dialog/internal/dialog.js +36 -4
  62. package/dialog/internal/dialog.js.map +1 -1
  63. package/elevation/internal/elevation.d.ts +1 -0
  64. package/elevation/internal/elevation.js +6 -0
  65. package/elevation/internal/elevation.js.map +1 -1
  66. package/fab/internal/_shared.scss +4 -1
  67. package/fab/internal/fab-branded-styles.css.js +1 -1
  68. package/fab/internal/fab-branded-styles.css.js.map +1 -1
  69. package/fab/internal/fab-styles.css.js +1 -1
  70. package/fab/internal/fab-styles.css.js.map +1 -1
  71. package/fab/internal/shared-styles.css.js +1 -1
  72. package/fab/internal/shared-styles.css.js.map +1 -1
  73. package/field/internal/_content.scss +9 -1
  74. package/field/internal/_filled-field.scss +12 -0
  75. package/field/internal/_label.scss +4 -1
  76. package/field/internal/_outlined-field.scss +33 -0
  77. package/field/internal/_shared.scss +14 -6
  78. package/field/internal/_supporting-text.scss +4 -1
  79. package/field/internal/field.d.ts +2 -0
  80. package/field/internal/field.js +19 -0
  81. package/field/internal/field.js.map +1 -1
  82. package/field/internal/filled-styles.css.js +1 -1
  83. package/field/internal/filled-styles.css.js.map +1 -1
  84. package/field/internal/outlined-styles.css.js +1 -1
  85. package/field/internal/outlined-styles.css.js.map +1 -1
  86. package/field/internal/shared-styles.css.js +1 -1
  87. package/field/internal/shared-styles.css.js.map +1 -1
  88. package/focus/internal/focus-ring.d.ts +3 -1
  89. package/focus/internal/focus-ring.js +9 -0
  90. package/focus/internal/focus-ring.js.map +1 -1
  91. package/icon/internal/icon.js +4 -0
  92. package/icon/internal/icon.js.map +1 -1
  93. package/iconbutton/internal/_icon-button.scss +8 -0
  94. package/iconbutton/internal/icon-button.d.ts +3 -3
  95. package/iconbutton/internal/icon-button.js +4 -4
  96. package/iconbutton/internal/icon-button.js.map +1 -1
  97. package/iconbutton/internal/standard-styles.css.js +1 -1
  98. package/iconbutton/internal/standard-styles.css.js.map +1 -1
  99. package/internal/aria/aria.d.ts +52 -1
  100. package/internal/aria/aria.js +146 -0
  101. package/internal/aria/aria.js.map +1 -1
  102. package/internal/controller/attachable-controller.d.ts +5 -4
  103. package/internal/controller/attachable-controller.js +8 -0
  104. package/internal/controller/attachable-controller.js.map +1 -1
  105. package/labs/badge/internal/_badge.scss +5 -1
  106. package/labs/badge/internal/badge-styles.css.js +1 -1
  107. package/labs/badge/internal/badge-styles.css.js.map +1 -1
  108. package/labs/navigationbar/internal/navigation-bar-styles.css.js +1 -1
  109. package/labs/navigationbar/internal/navigation-bar-styles.css.js.map +1 -1
  110. package/labs/navigationtab/internal/_navigation-tab.scss +4 -1
  111. package/labs/navigationtab/internal/navigation-tab-styles.css.js +1 -1
  112. package/labs/navigationtab/internal/navigation-tab-styles.css.js.map +1 -1
  113. package/labs/segmentedbutton/internal/_shared.scss +4 -1
  114. package/labs/segmentedbutton/internal/outlined-styles.css.js +1 -1
  115. package/labs/segmentedbutton/internal/outlined-styles.css.js.map +1 -1
  116. package/labs/segmentedbutton/internal/shared-styles.css.js +1 -1
  117. package/labs/segmentedbutton/internal/shared-styles.css.js.map +1 -1
  118. package/labs/segmentedbuttonset/internal/outlined-styles.css.js +1 -1
  119. package/labs/segmentedbuttonset/internal/outlined-styles.css.js.map +1 -1
  120. package/list/harness.js +1 -1
  121. package/list/harness.js.map +1 -1
  122. package/list/internal/_list.scss +1 -4
  123. package/list/internal/list-styles.css.js +1 -1
  124. package/list/internal/list-styles.css.js.map +1 -1
  125. package/list/internal/list.d.ts +1 -2
  126. package/list/internal/list.js +4 -6
  127. package/list/internal/list.js.map +1 -1
  128. package/list/internal/listitem/_list-item.scss +17 -5
  129. package/list/internal/listitem/list-item-styles.css.js +1 -1
  130. package/list/internal/listitem/list-item-styles.css.js.map +1 -1
  131. package/menu/harness.d.ts +1 -1
  132. package/menu/harness.js +3 -4
  133. package/menu/harness.js.map +1 -1
  134. package/menu/internal/_menu.scss +32 -26
  135. package/menu/internal/menu-styles.css.js +1 -1
  136. package/menu/internal/menu-styles.css.js.map +1 -1
  137. package/menu/internal/menu.d.ts +15 -4
  138. package/menu/internal/menu.js +27 -4
  139. package/menu/internal/menu.js.map +1 -1
  140. package/menu/internal/menuitem/menu-item.js +1 -1
  141. package/menu/internal/menuitem/menu-item.js.map +1 -1
  142. package/menu/internal/submenuitem/sub-menu-item.d.ts +3 -0
  143. package/menu/internal/submenuitem/sub-menu-item.js +42 -12
  144. package/menu/internal/submenuitem/sub-menu-item.js.map +1 -1
  145. package/menu/internal/typeaheadController.js +2 -1
  146. package/menu/internal/typeaheadController.js.map +1 -1
  147. package/menu/menu.d.ts +12 -5
  148. package/menu/menu.js +12 -5
  149. package/menu/menu.js.map +1 -1
  150. package/menu/sub-menu-item.d.ts +3 -4
  151. package/menu/sub-menu-item.js +3 -4
  152. package/menu/sub-menu-item.js.map +1 -1
  153. package/package.json +10 -2
  154. package/progress/internal/_circular-progress.scss +4 -2
  155. package/progress/internal/_linear-progress.scss +2 -2
  156. package/progress/internal/circular-progress-styles.css.js +1 -1
  157. package/progress/internal/circular-progress-styles.css.js.map +1 -1
  158. package/radio/harness.d.ts +1 -1
  159. package/radio/harness.js +1 -1
  160. package/radio/harness.js.map +1 -1
  161. package/radio/internal/_radio.scss +4 -4
  162. package/radio/internal/radio-styles.css.js +1 -1
  163. package/radio/internal/radio-styles.css.js.map +1 -1
  164. package/radio/internal/radio.d.ts +3 -5
  165. package/radio/internal/radio.js +37 -32
  166. package/radio/internal/radio.js.map +1 -1
  167. package/radio/internal/single-selection-controller.js +4 -3
  168. package/radio/internal/single-selection-controller.js.map +1 -1
  169. package/ripple/internal/ripple.d.ts +3 -1
  170. package/ripple/internal/ripple.js +9 -0
  171. package/ripple/internal/ripple.js.map +1 -1
  172. package/select/harness.d.ts +1 -1
  173. package/select/harness.js +1 -3
  174. package/select/harness.js.map +1 -1
  175. package/select/internal/_filled-select.scss +13 -3
  176. package/select/internal/_outlined-select.scss +13 -3
  177. package/select/internal/filled-select-styles.css.js +1 -1
  178. package/select/internal/filled-select-styles.css.js.map +1 -1
  179. package/select/internal/outlined-select-styles.css.js +1 -1
  180. package/select/internal/outlined-select-styles.css.js.map +1 -1
  181. package/select/internal/select.d.ts +8 -2
  182. package/select/internal/select.js +21 -8
  183. package/select/internal/select.js.map +1 -1
  184. package/slider/internal/_slider.scss +9 -4
  185. package/slider/internal/forced-colors-styles.css.js +1 -1
  186. package/slider/internal/forced-colors-styles.css.js.map +1 -1
  187. package/slider/internal/forced-colors-styles.scss +31 -4
  188. package/slider/internal/slider-styles.css.js +1 -1
  189. package/slider/internal/slider-styles.css.js.map +1 -1
  190. package/switch/harness.d.ts +1 -1
  191. package/switch/harness.js +1 -1
  192. package/switch/harness.js.map +1 -1
  193. package/switch/internal/_handle.scss +22 -21
  194. package/switch/internal/_icon.scss +12 -12
  195. package/switch/internal/_switch.scss +11 -19
  196. package/switch/internal/_track.scss +12 -12
  197. package/switch/internal/forced-colors-styles.css.js +1 -1
  198. package/switch/internal/forced-colors-styles.css.js.map +1 -1
  199. package/switch/internal/forced-colors-styles.scss +1 -0
  200. package/switch/internal/switch-styles.css.js +1 -1
  201. package/switch/internal/switch-styles.css.js.map +1 -1
  202. package/switch/internal/switch.d.ts +72 -2
  203. package/switch/internal/switch.js +144 -30
  204. package/switch/internal/switch.js.map +1 -1
  205. package/tabs/{_tab.scss → _primary-tab.scss} +1 -1
  206. package/tabs/_secondary-tab.scss +6 -0
  207. package/tabs/harness.d.ts +2 -2
  208. package/tabs/harness.js +1 -2
  209. package/tabs/harness.js.map +1 -1
  210. package/tabs/internal/_primary-tab.scss +70 -0
  211. package/tabs/internal/_secondary-tab.scss +61 -0
  212. package/tabs/internal/_tab.scss +8 -157
  213. package/tabs/internal/_tabs.scss +9 -10
  214. package/tabs/internal/primary-tab-styles.css.d.ts +1 -0
  215. package/tabs/internal/primary-tab-styles.css.js +9 -0
  216. package/tabs/internal/primary-tab-styles.css.js.map +1 -0
  217. package/tabs/internal/primary-tab-styles.scss +10 -0
  218. package/tabs/internal/primary-tab.d.ts +20 -0
  219. package/tabs/internal/primary-tab.js +30 -0
  220. package/tabs/internal/primary-tab.js.map +1 -0
  221. package/tabs/internal/secondary-tab-styles.css.d.ts +1 -0
  222. package/tabs/internal/secondary-tab-styles.css.js +9 -0
  223. package/tabs/internal/secondary-tab-styles.css.js.map +1 -0
  224. package/tabs/internal/secondary-tab-styles.scss +10 -0
  225. package/tabs/internal/secondary-tab.d.ts +12 -0
  226. package/tabs/internal/secondary-tab.js +16 -0
  227. package/tabs/internal/secondary-tab.js.map +1 -0
  228. package/tabs/internal/tab-styles.css.js +1 -1
  229. package/tabs/internal/tab-styles.css.js.map +1 -1
  230. package/tabs/internal/tab.d.ts +16 -34
  231. package/tabs/internal/tab.js +81 -80
  232. package/tabs/internal/tab.js.map +1 -1
  233. package/tabs/internal/tabs-styles.css.js +1 -1
  234. package/tabs/internal/tabs-styles.css.js.map +1 -1
  235. package/tabs/internal/tabs.d.ts +6 -20
  236. package/tabs/internal/tabs.js +33 -66
  237. package/tabs/internal/tabs.js.map +1 -1
  238. package/tabs/{tab.d.ts → primary-tab.d.ts} +3 -4
  239. package/tabs/primary-tab.js +23 -0
  240. package/tabs/primary-tab.js.map +1 -0
  241. package/tabs/secondary-tab.d.ts +18 -0
  242. package/tabs/secondary-tab.js +23 -0
  243. package/tabs/secondary-tab.js.map +1 -0
  244. package/tabs/tabs.d.ts +0 -2
  245. package/tabs/tabs.js +0 -2
  246. package/tabs/tabs.js.map +1 -1
  247. package/textfield/internal/_filled-text-field.scss +12 -3
  248. package/textfield/internal/_outlined-text-field.scss +12 -3
  249. package/textfield/internal/filled-styles.css.js +1 -1
  250. package/textfield/internal/filled-styles.css.js.map +1 -1
  251. package/textfield/internal/outlined-styles.css.js +1 -1
  252. package/textfield/internal/outlined-styles.css.js.map +1 -1
  253. package/textfield/internal/text-field.d.ts +19 -0
  254. package/textfield/internal/text-field.js +20 -0
  255. package/textfield/internal/text-field.js.map +1 -1
  256. package/tokens/_index.scss +5 -6
  257. package/tokens/_md-comp-assist-chip.scss +6 -14
  258. package/tokens/_md-comp-badge.scss +1 -14
  259. package/tokens/{_md-comp-circular-progress-indicator.scss → _md-comp-circular-progress.scss} +3 -1
  260. package/tokens/_md-comp-dialog.scss +10 -17
  261. package/tokens/_md-comp-elevated-button.scss +5 -13
  262. package/tokens/_md-comp-fab-branded.scss +9 -10
  263. package/tokens/_md-comp-fab.scss +9 -10
  264. package/tokens/_md-comp-filled-button.scss +5 -13
  265. package/tokens/_md-comp-filled-field.scss +25 -6
  266. package/tokens/_md-comp-filled-select.scss +15 -15
  267. package/tokens/_md-comp-filled-text-field.scss +15 -19
  268. package/tokens/_md-comp-filled-tonal-button.scss +5 -13
  269. package/tokens/_md-comp-filter-chip.scss +5 -13
  270. package/tokens/_md-comp-input-chip.scss +5 -13
  271. package/tokens/_md-comp-list-item.scss +18 -37
  272. package/tokens/_md-comp-outlined-button.scss +5 -13
  273. package/tokens/_md-comp-outlined-field.scss +25 -6
  274. package/tokens/_md-comp-outlined-segmented-button.scss +5 -13
  275. package/tokens/_md-comp-outlined-select.scss +15 -15
  276. package/tokens/_md-comp-outlined-text-field.scss +15 -19
  277. package/tokens/_md-comp-primary-tab.scss +132 -0
  278. package/tokens/_md-comp-secondary-tab.scss +139 -0
  279. package/tokens/_md-comp-slider.scss +16 -16
  280. package/tokens/_md-comp-suggestion-chip.scss +5 -13
  281. package/tokens/_md-comp-test-table.scss +13 -2
  282. package/tokens/_md-comp-text-button.scss +5 -13
  283. package/tokens/_md-ref-palette.scss +101 -1
  284. package/tokens/_md-ref-typeface.scss +3 -0
  285. package/tokens/_md-sys-color.scss +57 -2
  286. package/tokens/_md-sys-typescale.scss +66 -5
  287. package/tabs/tab.js +0 -22
  288. package/tabs/tab.js.map +0 -1
  289. package/tokens/_md-comp-tab.scss +0 -285
  290. /package/tokens/{_md-comp-linear-progress-indicator.scss → _md-comp-linear-progress.scss} +0 -0
  291. /package/tokens/{_md-comp-radio-button.scss → _md-comp-radio.scss} +0 -0
@@ -3,6 +3,7 @@
3
3
  * Copyright 2023 Google LLC
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
+ import { nothing } from 'lit';
6
7
  import { MultiActionChip } from './multi-action-chip.js';
7
8
  /**
8
9
  * An input chip component.
@@ -17,6 +18,7 @@ export declare class InputChip extends MultiActionChip {
17
18
  protected get rippleDisabled(): boolean;
18
19
  protected get primaryAction(): HTMLElement;
19
20
  protected readonly trailingAction: HTMLElement | null;
21
+ protected renderContainer(content: unknown): import("lit-html").TemplateResult<1>;
20
22
  protected getContainerClasses(): {
21
23
  avatar: boolean;
22
24
  disabled: boolean;
@@ -24,6 +26,6 @@ export declare class InputChip extends MultiActionChip {
24
26
  selected: boolean;
25
27
  'has-trailing': boolean;
26
28
  };
27
- protected renderAction(): import("lit-html").TemplateResult<1>;
28
- protected renderTrailingAction(): import("lit-html").TemplateResult<1>;
29
+ protected renderPrimaryAction(content: unknown): import("lit-html").TemplateResult<1> | typeof nothing;
30
+ protected renderTrailingAction(): import("lit-html").TemplateResult<1> | typeof nothing;
29
31
  }
@@ -6,6 +6,7 @@
6
6
  import { __decorate } from "tslib";
7
7
  import { html, nothing } from 'lit';
8
8
  import { property, query } from 'lit/decorators.js';
9
+ import { renderGridAction, renderGridContainer } from './chip.js';
9
10
  import { MultiActionChip } from './multi-action-chip.js';
10
11
  import { renderRemoveButton } from './trailing-icons.js';
11
12
  /**
@@ -41,6 +42,9 @@ export class InputChip extends MultiActionChip {
41
42
  }
42
43
  return this.renderRoot.querySelector('.primary.action');
43
44
  }
45
+ renderContainer(content) {
46
+ return renderGridContainer(content, this.getContainerClasses());
47
+ }
44
48
  getContainerClasses() {
45
49
  return {
46
50
  ...super.getContainerClasses(),
@@ -52,40 +56,40 @@ export class InputChip extends MultiActionChip {
52
56
  'has-trailing': true,
53
57
  };
54
58
  }
55
- renderAction() {
59
+ renderPrimaryAction(content) {
56
60
  const { ariaLabel } = this;
57
61
  if (this.href) {
58
- return html `
62
+ return renderGridAction(html `
59
63
  <a class="primary action"
60
64
  id="link"
61
65
  aria-label=${ariaLabel || nothing}
62
66
  href=${this.href}
63
67
  target=${this.target || nothing}
64
- >${this.renderContent()}</a>
65
- `;
68
+ >${content}</a>
69
+ `);
66
70
  }
67
71
  if (this.removeOnly) {
68
- return html `
72
+ return renderGridAction(html `
69
73
  <span class="primary action" aria-label=${ariaLabel || nothing}>
70
- ${this.renderContent()}
74
+ ${content}
71
75
  </span>
72
- `;
76
+ `);
73
77
  }
74
- return html `
78
+ return renderGridAction(html `
75
79
  <button class="primary action"
76
80
  id="button"
77
81
  aria-label=${ariaLabel || nothing}
78
82
  ?disabled=${this.disabled}
79
83
  type="button"
80
- >${this.renderContent()}</button>
81
- `;
84
+ >${content}</button>
85
+ `);
82
86
  }
83
87
  renderTrailingAction() {
84
- return renderRemoveButton({
88
+ return renderGridAction(renderRemoveButton({
85
89
  ariaLabel: this.ariaLabelRemove,
86
90
  disabled: !this.href && this.disabled,
87
91
  tabbable: this.removeOnly,
88
- });
92
+ }));
89
93
  }
90
94
  }
91
95
  __decorate([
@@ -1 +1 @@
1
- {"version":3,"file":"input-chip.js","sourceRoot":"","sources":["input-chip.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, nothing} from 'lit';\nimport {property, query} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\n\nimport {MultiActionChip} from './multi-action-chip.js';\nimport {renderRemoveButton} from './trailing-icons.js';\n\n/**\n * An input chip component.\n */\nexport class InputChip extends MultiActionChip {\n @property({type: Boolean}) avatar = false;\n @property() href = '';\n @property() target: '_blank'|'_parent'|'_self'|'_top'|'' = '';\n @property({type: Boolean, attribute: 'remove-only'}) removeOnly = false;\n @property({type: Boolean, reflect: true}) selected = false;\n\n protected get primaryId() {\n if (this.href) {\n return 'link';\n }\n\n if (this.removeOnly) {\n return '';\n }\n\n return 'button';\n }\n\n protected override get rippleDisabled() {\n // Link chips cannot be disabled\n return !this.href && this.disabled;\n }\n\n protected get primaryAction() {\n // Don't use @query() since a remove-only input chip still has a span that\n // has \"primary action\" classes.\n if (this.removeOnly) {\n return null;\n }\n\n return this.renderRoot.querySelector<HTMLElement>('.primary.action');\n }\n\n @query('.trailing.action')\n protected readonly trailingAction!: HTMLElement|null;\n\n protected override getContainerClasses() {\n return {\n ...super.getContainerClasses(),\n avatar: this.avatar,\n // Link chips cannot be disabled\n disabled: !this.href && this.disabled,\n link: !!this.href,\n selected: this.selected,\n 'has-trailing': true,\n };\n }\n\n protected override renderAction() {\n const {ariaLabel} = this as ARIAMixinStrict;\n if (this.href) {\n return html`\n <a class=\"primary action\"\n id=\"link\"\n aria-label=${ariaLabel || nothing}\n href=${this.href}\n target=${this.target || nothing}\n >${this.renderContent()}</a>\n `;\n }\n\n if (this.removeOnly) {\n return html`\n <span class=\"primary action\" aria-label=${ariaLabel || nothing}>\n ${this.renderContent()}\n </span>\n `;\n }\n\n return html`\n <button class=\"primary action\"\n id=\"button\"\n aria-label=${ariaLabel || nothing}\n ?disabled=${this.disabled}\n type=\"button\"\n >${this.renderContent()}</button>\n `;\n }\n\n protected override renderTrailingAction() {\n return renderRemoveButton({\n ariaLabel: this.ariaLabelRemove,\n disabled: !this.href && this.disabled,\n tabbable: this.removeOnly,\n });\n }\n}\n"]}
1
+ {"version":3,"file":"input-chip.js","sourceRoot":"","sources":["input-chip.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, nothing} from 'lit';\nimport {property, query} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\n\nimport {renderGridAction, renderGridContainer} from './chip.js';\nimport {MultiActionChip} from './multi-action-chip.js';\nimport {renderRemoveButton} from './trailing-icons.js';\n\n/**\n * An input chip component.\n */\nexport class InputChip extends MultiActionChip {\n @property({type: Boolean}) avatar = false;\n @property() href = '';\n @property() target: '_blank'|'_parent'|'_self'|'_top'|'' = '';\n @property({type: Boolean, attribute: 'remove-only'}) removeOnly = false;\n @property({type: Boolean, reflect: true}) selected = false;\n\n protected get primaryId() {\n if (this.href) {\n return 'link';\n }\n\n if (this.removeOnly) {\n return '';\n }\n\n return 'button';\n }\n\n protected override get rippleDisabled() {\n // Link chips cannot be disabled\n return !this.href && this.disabled;\n }\n\n protected get primaryAction() {\n // Don't use @query() since a remove-only input chip still has a span that\n // has \"primary action\" classes.\n if (this.removeOnly) {\n return null;\n }\n\n return this.renderRoot.querySelector<HTMLElement>('.primary.action');\n }\n\n @query('.trailing.action')\n protected readonly trailingAction!: HTMLElement|null;\n\n protected override renderContainer(content: unknown) {\n return renderGridContainer(content, this.getContainerClasses());\n }\n\n protected override getContainerClasses() {\n return {\n ...super.getContainerClasses(),\n avatar: this.avatar,\n // Link chips cannot be disabled\n disabled: !this.href && this.disabled,\n link: !!this.href,\n selected: this.selected,\n 'has-trailing': true,\n };\n }\n\n protected override renderPrimaryAction(content: unknown) {\n const {ariaLabel} = this as ARIAMixinStrict;\n if (this.href) {\n return renderGridAction(html`\n <a class=\"primary action\"\n id=\"link\"\n aria-label=${ariaLabel || nothing}\n href=${this.href}\n target=${this.target || nothing}\n >${content}</a>\n `);\n }\n\n if (this.removeOnly) {\n return renderGridAction(html`\n <span class=\"primary action\" aria-label=${ariaLabel || nothing}>\n ${content}\n </span>\n `);\n }\n\n return renderGridAction(html`\n <button class=\"primary action\"\n id=\"button\"\n aria-label=${ariaLabel || nothing}\n ?disabled=${this.disabled}\n type=\"button\"\n >${content}</button>\n `);\n }\n\n protected override renderTrailingAction() {\n return renderGridAction(renderRemoveButton({\n ariaLabel: this.ariaLabelRemove,\n disabled: !this.href && this.disabled,\n tabbable: this.removeOnly,\n }));\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-height: var(--md-input-chip-container-height, 32px);--_container-shape: var(--md-input-chip-container-shape, 8px);--_disabled-label-text-color: var(--md-input-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-input-chip-disabled-label-text-opacity, 0.38);--_disabled-selected-container-color: var(--md-input-chip-disabled-selected-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-container-opacity: var(--md-input-chip-disabled-selected-container-opacity, 0.12);--_label-text-type: var(--md-input-chip-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_selected-container-color: var(--md-input-chip-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-focus-label-text-color: var(--md-input-chip-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-input-chip-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-input-chip-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-opacity: var(--md-input-chip-selected-hover-state-layer-opacity, 0.08);--_selected-label-text-color: var(--md-input-chip-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-outline-width: var(--md-input-chip-selected-outline-width, 0px);--_selected-pressed-label-text-color: var(--md-input-chip-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-input-chip-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-opacity: var(--md-input-chip-selected-pressed-state-layer-opacity, 0.12);--_disabled-outline-color: var(--md-input-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-input-chip-disabled-outline-opacity, 0.12);--_focus-label-text-color: var(--md-input-chip-focus-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-outline-color: var(--md-input-chip-focus-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-label-text-color: var(--md-input-chip-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-input-chip-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-input-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-input-chip-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-color: var(--md-input-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-input-chip-outline-width, 1px);--_pressed-label-text-color: var(--md-input-chip-pressed-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-input-chip-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-opacity: var(--md-input-chip-pressed-state-layer-opacity, 0.12);--_avatar-shape: var(--md-input-chip-avatar-shape, 9999px);--_avatar-size: var(--md-input-chip-avatar-size, 24px);--_disabled-avatar-opacity: var(--md-input-chip-disabled-avatar-opacity, 0.38);--_disabled-leading-icon-color: var(--md-input-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-input-chip-disabled-leading-icon-opacity, 0.38);--_icon-size: var(--md-input-chip-icon-size, 18px);--_selected-focus-leading-icon-color: var(--md-input-chip-selected-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-leading-icon-color: var(--md-input-chip-selected-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-leading-icon-color: var(--md-input-chip-selected-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-leading-icon-color: var(--md-input-chip-selected-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-input-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-input-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-input-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-leading-icon-color: var(--md-input-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_disabled-trailing-icon-color: var(--md-input-chip-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-input-chip-disabled-trailing-icon-opacity, 0.38);--_selected-focus-trailing-icon-color: var(--md-input-chip-selected-focus-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-trailing-icon-color: var(--md-input-chip-selected-hover-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-trailing-icon-color: var(--md-input-chip-selected-pressed-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-trailing-icon-color: var(--md-input-chip-selected-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-trailing-icon-color: var(--md-input-chip-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-input-chip-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-trailing-icon-color: var(--md-input-chip-pressed-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-color: var(--md-input-chip-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_container-shape-start-start: var( --md-input-chip-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-input-chip-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-input-chip-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-input-chip-container-shape-end-start, var(--_container-shape) )}:host([avatar]){--_container-shape-start-start: var( --md-input-chip-container-shape-start-start, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) );--_container-shape-start-end: var( --md-input-chip-container-shape-start-end, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) );--_container-shape-end-end: var( --md-input-chip-container-shape-end-end, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) );--_container-shape-end-start: var( --md-input-chip-container-shape-end-start, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) )}.avatar .primary.action{padding-inline-start:4px}.avatar .leading.icon ::slotted(:first-child){border-radius:var(--_avatar-shape);height:var(--_avatar-size);width:var(--_avatar-size)}.disabled.avatar .leading.icon{opacity:var(--_disabled-avatar-opacity)}@media(forced-colors: active){.link .outline{border-color:ActiveText}.disabled.avatar .leading.icon{opacity:1}}/*# sourceMappingURL=input-styles.css.map */
7
+ export const styles = css `:host{--_container-height: var(--md-input-chip-container-height, 32px);--_container-shape: var(--md-input-chip-container-shape, 8px);--_disabled-label-text-color: var(--md-input-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-input-chip-disabled-label-text-opacity, 0.38);--_disabled-selected-container-color: var(--md-input-chip-disabled-selected-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-container-opacity: var(--md-input-chip-disabled-selected-container-opacity, 0.12);--_label-text-font: var(--md-input-chip-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-input-chip-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-input-chip-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-input-chip-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_selected-container-color: var(--md-input-chip-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-focus-label-text-color: var(--md-input-chip-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-input-chip-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-input-chip-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-opacity: var(--md-input-chip-selected-hover-state-layer-opacity, 0.08);--_selected-label-text-color: var(--md-input-chip-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-outline-width: var(--md-input-chip-selected-outline-width, 0px);--_selected-pressed-label-text-color: var(--md-input-chip-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-input-chip-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-opacity: var(--md-input-chip-selected-pressed-state-layer-opacity, 0.12);--_disabled-outline-color: var(--md-input-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-input-chip-disabled-outline-opacity, 0.12);--_focus-label-text-color: var(--md-input-chip-focus-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-outline-color: var(--md-input-chip-focus-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-label-text-color: var(--md-input-chip-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-input-chip-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-input-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-input-chip-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-color: var(--md-input-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-input-chip-outline-width, 1px);--_pressed-label-text-color: var(--md-input-chip-pressed-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-input-chip-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-opacity: var(--md-input-chip-pressed-state-layer-opacity, 0.12);--_avatar-shape: var(--md-input-chip-avatar-shape, 9999px);--_avatar-size: var(--md-input-chip-avatar-size, 24px);--_disabled-avatar-opacity: var(--md-input-chip-disabled-avatar-opacity, 0.38);--_disabled-leading-icon-color: var(--md-input-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-input-chip-disabled-leading-icon-opacity, 0.38);--_icon-size: var(--md-input-chip-icon-size, 18px);--_selected-focus-leading-icon-color: var(--md-input-chip-selected-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-leading-icon-color: var(--md-input-chip-selected-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-leading-icon-color: var(--md-input-chip-selected-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-leading-icon-color: var(--md-input-chip-selected-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-input-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-input-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-input-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-leading-icon-color: var(--md-input-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_disabled-trailing-icon-color: var(--md-input-chip-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-input-chip-disabled-trailing-icon-opacity, 0.38);--_selected-focus-trailing-icon-color: var(--md-input-chip-selected-focus-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-trailing-icon-color: var(--md-input-chip-selected-hover-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-trailing-icon-color: var(--md-input-chip-selected-pressed-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-trailing-icon-color: var(--md-input-chip-selected-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-trailing-icon-color: var(--md-input-chip-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-input-chip-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-trailing-icon-color: var(--md-input-chip-pressed-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-color: var(--md-input-chip-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_container-shape-start-start: var( --md-input-chip-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-input-chip-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-input-chip-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-input-chip-container-shape-end-start, var(--_container-shape) )}:host([avatar]){--_container-shape-start-start: var( --md-input-chip-container-shape-start-start, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) );--_container-shape-start-end: var( --md-input-chip-container-shape-start-end, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) );--_container-shape-end-end: var( --md-input-chip-container-shape-end-end, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) );--_container-shape-end-start: var( --md-input-chip-container-shape-end-start, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) )}.avatar .primary.action{padding-inline-start:4px}.avatar .leading.icon ::slotted(:first-child){border-radius:var(--_avatar-shape);height:var(--_avatar-size);width:var(--_avatar-size)}.disabled.avatar .leading.icon{opacity:var(--_disabled-avatar-opacity)}@media(forced-colors: active){.link .outline{border-color:ActiveText}.disabled.avatar .leading.icon{opacity:1}}/*# sourceMappingURL=input-styles.css.map */
8
8
  `;
9
9
  //# sourceMappingURL=input-styles.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"input-styles.css.js","sourceRoot":"","sources":["input-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-input-chip-container-height, 32px);--_container-shape: var(--md-input-chip-container-shape, 8px);--_disabled-label-text-color: var(--md-input-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-input-chip-disabled-label-text-opacity, 0.38);--_disabled-selected-container-color: var(--md-input-chip-disabled-selected-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-container-opacity: var(--md-input-chip-disabled-selected-container-opacity, 0.12);--_label-text-type: var(--md-input-chip-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_selected-container-color: var(--md-input-chip-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-focus-label-text-color: var(--md-input-chip-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-input-chip-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-input-chip-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-opacity: var(--md-input-chip-selected-hover-state-layer-opacity, 0.08);--_selected-label-text-color: var(--md-input-chip-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-outline-width: var(--md-input-chip-selected-outline-width, 0px);--_selected-pressed-label-text-color: var(--md-input-chip-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-input-chip-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-opacity: var(--md-input-chip-selected-pressed-state-layer-opacity, 0.12);--_disabled-outline-color: var(--md-input-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-input-chip-disabled-outline-opacity, 0.12);--_focus-label-text-color: var(--md-input-chip-focus-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-outline-color: var(--md-input-chip-focus-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-label-text-color: var(--md-input-chip-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-input-chip-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-input-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-input-chip-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-color: var(--md-input-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-input-chip-outline-width, 1px);--_pressed-label-text-color: var(--md-input-chip-pressed-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-input-chip-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-opacity: var(--md-input-chip-pressed-state-layer-opacity, 0.12);--_avatar-shape: var(--md-input-chip-avatar-shape, 9999px);--_avatar-size: var(--md-input-chip-avatar-size, 24px);--_disabled-avatar-opacity: var(--md-input-chip-disabled-avatar-opacity, 0.38);--_disabled-leading-icon-color: var(--md-input-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-input-chip-disabled-leading-icon-opacity, 0.38);--_icon-size: var(--md-input-chip-icon-size, 18px);--_selected-focus-leading-icon-color: var(--md-input-chip-selected-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-leading-icon-color: var(--md-input-chip-selected-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-leading-icon-color: var(--md-input-chip-selected-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-leading-icon-color: var(--md-input-chip-selected-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-input-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-input-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-input-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-leading-icon-color: var(--md-input-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_disabled-trailing-icon-color: var(--md-input-chip-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-input-chip-disabled-trailing-icon-opacity, 0.38);--_selected-focus-trailing-icon-color: var(--md-input-chip-selected-focus-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-trailing-icon-color: var(--md-input-chip-selected-hover-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-trailing-icon-color: var(--md-input-chip-selected-pressed-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-trailing-icon-color: var(--md-input-chip-selected-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-trailing-icon-color: var(--md-input-chip-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-input-chip-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-trailing-icon-color: var(--md-input-chip-pressed-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-color: var(--md-input-chip-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_container-shape-start-start: var( --md-input-chip-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-input-chip-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-input-chip-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-input-chip-container-shape-end-start, var(--_container-shape) )}:host([avatar]){--_container-shape-start-start: var( --md-input-chip-container-shape-start-start, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) );--_container-shape-start-end: var( --md-input-chip-container-shape-start-end, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) );--_container-shape-end-end: var( --md-input-chip-container-shape-end-end, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) );--_container-shape-end-start: var( --md-input-chip-container-shape-end-start, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) )}.avatar .primary.action{padding-inline-start:4px}.avatar .leading.icon ::slotted(:first-child){border-radius:var(--_avatar-shape);height:var(--_avatar-size);width:var(--_avatar-size)}.disabled.avatar .leading.icon{opacity:var(--_disabled-avatar-opacity)}@media(forced-colors: active){.link .outline{border-color:ActiveText}.disabled.avatar .leading.icon{opacity:1}}/*# sourceMappingURL=input-styles.css.map */\n`;\n "]}
1
+ {"version":3,"file":"input-styles.css.js","sourceRoot":"","sources":["input-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-input-chip-container-height, 32px);--_container-shape: var(--md-input-chip-container-shape, 8px);--_disabled-label-text-color: var(--md-input-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-input-chip-disabled-label-text-opacity, 0.38);--_disabled-selected-container-color: var(--md-input-chip-disabled-selected-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-container-opacity: var(--md-input-chip-disabled-selected-container-opacity, 0.12);--_label-text-font: var(--md-input-chip-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-input-chip-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-input-chip-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-input-chip-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_selected-container-color: var(--md-input-chip-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-focus-label-text-color: var(--md-input-chip-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-input-chip-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-input-chip-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-opacity: var(--md-input-chip-selected-hover-state-layer-opacity, 0.08);--_selected-label-text-color: var(--md-input-chip-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-outline-width: var(--md-input-chip-selected-outline-width, 0px);--_selected-pressed-label-text-color: var(--md-input-chip-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-input-chip-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-opacity: var(--md-input-chip-selected-pressed-state-layer-opacity, 0.12);--_disabled-outline-color: var(--md-input-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-input-chip-disabled-outline-opacity, 0.12);--_focus-label-text-color: var(--md-input-chip-focus-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-outline-color: var(--md-input-chip-focus-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-label-text-color: var(--md-input-chip-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-input-chip-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-input-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-input-chip-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-color: var(--md-input-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-input-chip-outline-width, 1px);--_pressed-label-text-color: var(--md-input-chip-pressed-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-input-chip-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-opacity: var(--md-input-chip-pressed-state-layer-opacity, 0.12);--_avatar-shape: var(--md-input-chip-avatar-shape, 9999px);--_avatar-size: var(--md-input-chip-avatar-size, 24px);--_disabled-avatar-opacity: var(--md-input-chip-disabled-avatar-opacity, 0.38);--_disabled-leading-icon-color: var(--md-input-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-input-chip-disabled-leading-icon-opacity, 0.38);--_icon-size: var(--md-input-chip-icon-size, 18px);--_selected-focus-leading-icon-color: var(--md-input-chip-selected-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-leading-icon-color: var(--md-input-chip-selected-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-leading-icon-color: var(--md-input-chip-selected-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-leading-icon-color: var(--md-input-chip-selected-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-input-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-input-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-input-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-leading-icon-color: var(--md-input-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_disabled-trailing-icon-color: var(--md-input-chip-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-input-chip-disabled-trailing-icon-opacity, 0.38);--_selected-focus-trailing-icon-color: var(--md-input-chip-selected-focus-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-trailing-icon-color: var(--md-input-chip-selected-hover-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-trailing-icon-color: var(--md-input-chip-selected-pressed-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-trailing-icon-color: var(--md-input-chip-selected-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-trailing-icon-color: var(--md-input-chip-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-input-chip-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-trailing-icon-color: var(--md-input-chip-pressed-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-color: var(--md-input-chip-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_container-shape-start-start: var( --md-input-chip-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-input-chip-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-input-chip-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-input-chip-container-shape-end-start, var(--_container-shape) )}:host([avatar]){--_container-shape-start-start: var( --md-input-chip-container-shape-start-start, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) );--_container-shape-start-end: var( --md-input-chip-container-shape-start-end, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) );--_container-shape-end-end: var( --md-input-chip-container-shape-end-end, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) );--_container-shape-end-start: var( --md-input-chip-container-shape-end-start, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) )}.avatar .primary.action{padding-inline-start:4px}.avatar .leading.icon ::slotted(:first-child){border-radius:var(--_avatar-shape);height:var(--_avatar-size);width:var(--_avatar-size)}.disabled.avatar .leading.icon{opacity:var(--_disabled-avatar-opacity)}@media(forced-colors: active){.link .outline{border-color:ActiveText}.disabled.avatar .leading.icon{opacity:1}}/*# sourceMappingURL=input-styles.css.map */\n`;\n "]}
@@ -3,7 +3,6 @@
3
3
  * Copyright 2023 Google LLC
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
- import { nothing, TemplateResult } from 'lit';
7
6
  import { Chip } from './chip.js';
8
7
  /**
9
8
  * A chip component with multiple actions.
@@ -17,7 +16,7 @@ export declare abstract class MultiActionChip extends Chip {
17
16
  focus(options?: FocusOptions & {
18
17
  trailing?: boolean;
19
18
  }): void;
20
- protected renderActions(): TemplateResult<1>;
21
- protected abstract renderTrailingAction(): TemplateResult | typeof nothing;
19
+ protected renderContainerContent(): import("lit-html").TemplateResult<1>;
20
+ protected abstract renderTrailingAction(): unknown;
22
21
  private handleKeyDown;
23
22
  }
@@ -43,10 +43,10 @@ export class MultiActionChip extends Chip {
43
43
  }
44
44
  super.focus(options);
45
45
  }
46
- renderActions() {
46
+ renderContainerContent() {
47
47
  return html `
48
- ${super.renderActions()}
49
- ${this.renderActionCell(this.renderTrailingAction())}
48
+ ${super.renderContainerContent()}
49
+ ${this.renderTrailingAction()}
50
50
  `;
51
51
  }
52
52
  handleKeyDown(event) {
@@ -1 +1 @@
1
- {"version":3,"file":"multi-action-chip.js","sourceRoot":"","sources":["multi-action-chip.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, isServer, nothing, TemplateResult} from 'lit';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\n\nimport {Chip} from './chip.js';\n\nconst ARIA_LABEL_REMOVE = 'aria-label-remove';\n\n/**\n * A chip component with multiple actions.\n */\nexport abstract class MultiActionChip extends Chip {\n get ariaLabelRemove(): string {\n if (this.hasAttribute(ARIA_LABEL_REMOVE)) {\n return this.getAttribute(ARIA_LABEL_REMOVE)!;\n }\n\n const {ariaLabel} = this as ARIAMixinStrict;\n return `Remove ${ariaLabel || this.label}`;\n }\n set ariaLabelRemove(ariaLabel: string|null) {\n const prev = this.ariaLabelRemove;\n if (ariaLabel === prev) {\n return;\n }\n\n if (ariaLabel === null) {\n this.removeAttribute(ARIA_LABEL_REMOVE);\n } else {\n this.setAttribute(ARIA_LABEL_REMOVE, ariaLabel);\n }\n\n this.requestUpdate();\n }\n\n protected abstract readonly primaryAction: HTMLElement|null;\n protected abstract readonly trailingAction: HTMLElement|null;\n\n constructor() {\n super();\n if (!isServer) {\n this.addEventListener('keydown', this.handleKeyDown.bind(this));\n }\n }\n\n override focus(options?: FocusOptions&{trailing?: boolean}) {\n if (options?.trailing && this.trailingAction) {\n this.trailingAction.focus(options);\n return;\n }\n\n super.focus(options);\n }\n\n protected override renderActions() {\n return html`\n ${super.renderActions()}\n ${this.renderActionCell(this.renderTrailingAction())}\n `;\n }\n\n protected abstract renderTrailingAction(): TemplateResult|typeof nothing;\n\n private handleKeyDown(event: KeyboardEvent) {\n const isLeft = event.key === 'ArrowLeft';\n const isRight = event.key === 'ArrowRight';\n // Ignore non-navigation keys.\n if (!isLeft && !isRight) {\n return;\n }\n\n if (!this.primaryAction || !this.trailingAction) {\n // Does not have multiple actions.\n return;\n }\n\n // Check if moving forwards or backwards\n const isRtl = getComputedStyle(this).direction === 'rtl';\n const forwards = isRtl ? isLeft : isRight;\n const isPrimaryFocused = this.primaryAction?.matches(':focus-within');\n const isTrailingFocused = this.trailingAction?.matches(':focus-within');\n\n if ((forwards && isTrailingFocused) || (!forwards && isPrimaryFocused)) {\n // Moving outside of the chip, it will be handled by the chip set.\n return;\n }\n\n // Prevent default interactions, such as scrolling.\n event.preventDefault();\n // Don't let the chip set handle this navigation event.\n event.stopPropagation();\n const actionToFocus = forwards ? this.trailingAction : this.primaryAction;\n actionToFocus.focus();\n }\n}\n"]}
1
+ {"version":3,"file":"multi-action-chip.js","sourceRoot":"","sources":["multi-action-chip.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, isServer} from 'lit';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\n\nimport {Chip} from './chip.js';\n\nconst ARIA_LABEL_REMOVE = 'aria-label-remove';\n\n/**\n * A chip component with multiple actions.\n */\nexport abstract class MultiActionChip extends Chip {\n get ariaLabelRemove(): string {\n if (this.hasAttribute(ARIA_LABEL_REMOVE)) {\n return this.getAttribute(ARIA_LABEL_REMOVE)!;\n }\n\n const {ariaLabel} = this as ARIAMixinStrict;\n return `Remove ${ariaLabel || this.label}`;\n }\n set ariaLabelRemove(ariaLabel: string|null) {\n const prev = this.ariaLabelRemove;\n if (ariaLabel === prev) {\n return;\n }\n\n if (ariaLabel === null) {\n this.removeAttribute(ARIA_LABEL_REMOVE);\n } else {\n this.setAttribute(ARIA_LABEL_REMOVE, ariaLabel);\n }\n\n this.requestUpdate();\n }\n\n protected abstract readonly primaryAction: HTMLElement|null;\n protected abstract readonly trailingAction: HTMLElement|null;\n\n constructor() {\n super();\n if (!isServer) {\n this.addEventListener('keydown', this.handleKeyDown.bind(this));\n }\n }\n\n override focus(options?: FocusOptions&{trailing?: boolean}) {\n if (options?.trailing && this.trailingAction) {\n this.trailingAction.focus(options);\n return;\n }\n\n super.focus(options);\n }\n\n protected override renderContainerContent() {\n return html`\n ${super.renderContainerContent()}\n ${this.renderTrailingAction()}\n `;\n }\n\n protected abstract renderTrailingAction(): unknown;\n\n private handleKeyDown(event: KeyboardEvent) {\n const isLeft = event.key === 'ArrowLeft';\n const isRight = event.key === 'ArrowRight';\n // Ignore non-navigation keys.\n if (!isLeft && !isRight) {\n return;\n }\n\n if (!this.primaryAction || !this.trailingAction) {\n // Does not have multiple actions.\n return;\n }\n\n // Check if moving forwards or backwards\n const isRtl = getComputedStyle(this).direction === 'rtl';\n const forwards = isRtl ? isLeft : isRight;\n const isPrimaryFocused = this.primaryAction?.matches(':focus-within');\n const isTrailingFocused = this.trailingAction?.matches(':focus-within');\n\n if ((forwards && isTrailingFocused) || (!forwards && isPrimaryFocused)) {\n // Moving outside of the chip, it will be handled by the chip set.\n return;\n }\n\n // Prevent default interactions, such as scrolling.\n event.preventDefault();\n // Don't let the chip set handle this navigation event.\n event.stopPropagation();\n const actionToFocus = forwards ? this.trailingAction : this.primaryAction;\n actionToFocus.focus();\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{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-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)}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-height))/2) 0}md-focus-ring{--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}.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}.cell{display:flex}.action{align-items:baseline;appearance:none;background:none;border:none;border-radius:inherit;display:flex;gap:8px;outline:none;padding:0;position:relative;text-decoration:none}.primary.action{padding-inline-start:8px;padding-inline-end:16px}.touch{height:48px;inset:50% 0 0;position:absolute;transform:translateY(-50%);width:100%}:host([touch-target=none]) .touch{display:none}.outline{border:var(--_outline-width) solid var(--_outline-color);border-radius:inherit;inset:0;pointer-events:none;position:absolute}:where(:focus) .outline{border-color:var(--_focus-outline-color)}:where(.disabled) .outline{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}md-ripple{border-radius:inherit}.label,.icon,.touch{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}:where(:hover) .label{color:var(--_hover-label-text-color)}:where(:focus) .label{color:var(--_focus-label-text-color)}:where(:active) .label{color:var(--_pressed-label-text-color)}:where(.disabled) .label{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.icon{align-self:center;display:flex;fill:currentColor;position:relative}.icon ::slotted(:first-child){font-size:var(--_icon-size);height:var(--_icon-size);width:var(--_icon-size)}.leading.icon{color:var(--_leading-icon-color)}:where(:hover) .leading.icon{color:var(--_hover-leading-icon-color)}:where(:focus) .leading.icon{color:var(--_focus-leading-icon-color)}:where(:active) .leading.icon{color:var(--_pressed-leading-icon-color)}:where(.disabled) .leading.icon{color:var(--_disabled-leading-icon-color);opacity:var(--_disabled-leading-icon-opacity)}@media(forced-colors: active){:where(.disabled) :is(.label,.outline,.leading.icon){color:GrayText;opacity:1}}/*# 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);cursor:pointer;--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)}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-height))/2) 0}md-focus-ring{--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}.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}.cell{display:flex}.action{align-items:baseline;appearance:none;background:none;border:none;border-radius:inherit;display:flex;gap:8px;outline:none;padding:0;position:relative;text-decoration:none}.primary.action{padding-inline-start:8px;padding-inline-end:16px}.touch{height:48px;inset:50% 0 0;position:absolute;transform:translateY(-50%);width:100%}:host([touch-target=none]) .touch{display:none}.outline{border:var(--_outline-width) solid var(--_outline-color);border-radius:inherit;inset:0;pointer-events:none;position:absolute}:where(:focus) .outline{border-color:var(--_focus-outline-color)}:where(.disabled) .outline{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}md-ripple{border-radius:inherit}.label,.icon,.touch{z-index:1}.label{align-items:center;color:var(--_label-text-color);display:flex;font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);height:100%;text-overflow:ellipsis;user-select:none;white-space:nowrap}:where(:hover) .label{color:var(--_hover-label-text-color)}:where(:focus) .label{color:var(--_focus-label-text-color)}:where(:active) .label{color:var(--_pressed-label-text-color)}:where(.disabled) .label{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.icon{align-self:center;display:flex;fill:currentColor;position:relative}.icon ::slotted(:first-child){font-size:var(--_icon-size);height:var(--_icon-size);width:var(--_icon-size)}.leading.icon{color:var(--_leading-icon-color)}:where(:hover) .leading.icon{color:var(--_hover-leading-icon-color)}:where(:focus) .leading.icon{color:var(--_focus-leading-icon-color)}:where(:active) .leading.icon{color:var(--_pressed-leading-icon-color)}:where(.disabled) .leading.icon{color:var(--_disabled-leading-icon-color);opacity:var(--_disabled-leading-icon-opacity)}@media(forced-colors: active){:where(.disabled) :is(.label,.outline,.leading.icon){color:GrayText;opacity:1}}a,button:not(:disabled){cursor:inherit}/*# 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-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)}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-height))/2) 0}md-focus-ring{--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}.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}.cell{display:flex}.action{align-items:baseline;appearance:none;background:none;border:none;border-radius:inherit;display:flex;gap:8px;outline:none;padding:0;position:relative;text-decoration:none}.primary.action{padding-inline-start:8px;padding-inline-end:16px}.touch{height:48px;inset:50% 0 0;position:absolute;transform:translateY(-50%);width:100%}:host([touch-target=none]) .touch{display:none}.outline{border:var(--_outline-width) solid var(--_outline-color);border-radius:inherit;inset:0;pointer-events:none;position:absolute}:where(:focus) .outline{border-color:var(--_focus-outline-color)}:where(.disabled) .outline{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}md-ripple{border-radius:inherit}.label,.icon,.touch{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}:where(:hover) .label{color:var(--_hover-label-text-color)}:where(:focus) .label{color:var(--_focus-label-text-color)}:where(:active) .label{color:var(--_pressed-label-text-color)}:where(.disabled) .label{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.icon{align-self:center;display:flex;fill:currentColor;position:relative}.icon ::slotted(:first-child){font-size:var(--_icon-size);height:var(--_icon-size);width:var(--_icon-size)}.leading.icon{color:var(--_leading-icon-color)}:where(:hover) .leading.icon{color:var(--_hover-leading-icon-color)}:where(:focus) .leading.icon{color:var(--_focus-leading-icon-color)}:where(:active) .leading.icon{color:var(--_pressed-leading-icon-color)}:where(.disabled) .leading.icon{color:var(--_disabled-leading-icon-color);opacity:var(--_disabled-leading-icon-opacity)}@media(forced-colors: active){:where(.disabled) :is(.label,.outline,.leading.icon){color:GrayText;opacity:1}}/*# 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);cursor:pointer;--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)}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-height))/2) 0}md-focus-ring{--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}.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}.cell{display:flex}.action{align-items:baseline;appearance:none;background:none;border:none;border-radius:inherit;display:flex;gap:8px;outline:none;padding:0;position:relative;text-decoration:none}.primary.action{padding-inline-start:8px;padding-inline-end:16px}.touch{height:48px;inset:50% 0 0;position:absolute;transform:translateY(-50%);width:100%}:host([touch-target=none]) .touch{display:none}.outline{border:var(--_outline-width) solid var(--_outline-color);border-radius:inherit;inset:0;pointer-events:none;position:absolute}:where(:focus) .outline{border-color:var(--_focus-outline-color)}:where(.disabled) .outline{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}md-ripple{border-radius:inherit}.label,.icon,.touch{z-index:1}.label{align-items:center;color:var(--_label-text-color);display:flex;font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);height:100%;text-overflow:ellipsis;user-select:none;white-space:nowrap}:where(:hover) .label{color:var(--_hover-label-text-color)}:where(:focus) .label{color:var(--_focus-label-text-color)}:where(:active) .label{color:var(--_pressed-label-text-color)}:where(.disabled) .label{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.icon{align-self:center;display:flex;fill:currentColor;position:relative}.icon ::slotted(:first-child){font-size:var(--_icon-size);height:var(--_icon-size);width:var(--_icon-size)}.leading.icon{color:var(--_leading-icon-color)}:where(:hover) .leading.icon{color:var(--_hover-leading-icon-color)}:where(:focus) .leading.icon{color:var(--_focus-leading-icon-color)}:where(:active) .leading.icon{color:var(--_pressed-leading-icon-color)}:where(.disabled) .leading.icon{color:var(--_disabled-leading-icon-color);opacity:var(--_disabled-leading-icon-opacity)}@media(forced-colors: active){:where(.disabled) :is(.label,.outline,.leading.icon){color:GrayText;opacity:1}}a,button:not(:disabled){cursor:inherit}/*# sourceMappingURL=shared-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{--_container-height: var(--md-suggestion-chip-container-height, 32px);--_container-shape: var(--md-suggestion-chip-container-shape, 8px);--_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));--_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);--_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) )}@media(forced-colors: active){.link .outline{border-color:ActiveText}}/*# sourceMappingURL=suggestion-styles.css.map */
7
+ export const styles = css `:host{--_container-height: var(--md-suggestion-chip-container-height, 32px);--_container-shape: var(--md-suggestion-chip-container-shape, 8px);--_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));--_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-font: var(--md-suggestion-chip-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-suggestion-chip-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-suggestion-chip-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-suggestion-chip-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_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);--_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) )}@media(forced-colors: active){.link .outline{border-color:ActiveText}}/*# 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-height: var(--md-suggestion-chip-container-height, 32px);--_container-shape: var(--md-suggestion-chip-container-shape, 8px);--_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));--_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);--_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) )}@media(forced-colors: active){.link .outline{border-color:ActiveText}}/*# 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: var(--md-suggestion-chip-container-height, 32px);--_container-shape: var(--md-suggestion-chip-container-shape, 8px);--_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));--_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-font: var(--md-suggestion-chip-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-suggestion-chip-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-suggestion-chip-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-suggestion-chip-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_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);--_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) )}@media(forced-colors: active){.link .outline{border-color:ActiveText}}/*# sourceMappingURL=suggestion-styles.css.map */\n`;\n "]}
@@ -0,0 +1,193 @@
1
+ //
2
+ // Copyright 2023 Google LLC
3
+ // SPDX-License-Identifier: Apache-2.0
4
+ //
5
+
6
+ // go/keep-sorted start
7
+ @use 'sass:list';
8
+ // go/keep-sorted end
9
+ // go/keep-sorted start
10
+ @use '../tokens';
11
+ // go/keep-sorted end
12
+
13
+ /// `color.light-theme()` emits `--md-sys-color-*` custom properties for a light
14
+ /// theme from the given color palette.
15
+ ///
16
+ /// @example scss
17
+ /// @use 'sass:map';
18
+ /// @use '@material/web/color/color';
19
+ /// @use '@material/web/tokens';
20
+ ///
21
+ /// // Tip: if only changing part of the palette, merge the default palette
22
+ /// // values to inherit other tones (such as neutral and error tones).
23
+ /// $my-palette: map.merge(
24
+ /// tokens.md-ref-palette-values(),
25
+ /// (
26
+ /// 'primary10': /* ... */,
27
+ /// 'primary20': /* ... */,
28
+ /// 'primary30': /* ... */,
29
+ /// 'primary40': /* ... */,
30
+ /// 'primary50': /* ... */,
31
+ /// 'primary60': /* ... */,
32
+ /// 'primary70': /* ... */,
33
+ /// 'primary80': /* ... */,
34
+ /// 'primary90': /* ... */,
35
+ /// 'primary95': /* ... */,
36
+ /// 'primary99': /* ... */,
37
+ /// // Opt: palette values for:
38
+ /// // - secondary
39
+ /// // - tertiary
40
+ /// // - error
41
+ /// // - neutral
42
+ /// // - neutral-variant
43
+ /// ),
44
+ /// );
45
+ ///
46
+ /// :root {
47
+ /// @include color.light-theme($my-palette);
48
+ /// }
49
+ ///
50
+ /// /* Generated CSS */
51
+ /// :root {
52
+ /// --md-sys-color-primary: /* ... */;
53
+ /// --md-sys-color-primary-container: /* ... */;
54
+ /// --md-sys-color-primary-fixed: /* ... */;
55
+ /// --md-sys-color-primary-fixed-dim: /* ... */;
56
+ /// /* ... */
57
+ /// }
58
+ ///
59
+ /// To generate a palette, use the Material Theme Builder Figma plugin.
60
+ ///
61
+ /// @link https://www.figma.com/community/plugin/1034969338659738588/Material-Theme-Builder
62
+ ///
63
+ /// @param {Map} $md-ref-palette - A map of Material palette keys and their
64
+ /// values.
65
+ /// @output Emits `--md-sys-color-*` custom properties for a light theme with
66
+ /// the given palette.
67
+ @mixin light-theme($md-ref-palette: tokens.md-ref-palette-values()) {
68
+ @each $token, $value in $md-ref-palette {
69
+ @if list.index(tokens.$md-ref-palette-supported-tokens, $token) == null {
70
+ @error 'md-ref-palette `#{$token}` is not a supported token.';
71
+ }
72
+ }
73
+
74
+ @include theme(
75
+ tokens.md-sys-color-values-light(
76
+ (
77
+ 'md-ref-palette': $md-ref-palette,
78
+ ),
79
+ $exclude-custom-properties: true
80
+ )
81
+ );
82
+ }
83
+
84
+ /// `color.dark-theme()` emits `--md-sys-color-*` custom properties for a dark
85
+ /// theme from the given color palette.
86
+ ///
87
+ /// @example scss
88
+ /// @use 'sass:map';
89
+ /// @use '@material/web/color/color';
90
+ /// @use '@material/web/tokens';
91
+ ///
92
+ /// // Tip: if only changing part of the palette, merge the default palette
93
+ /// // values to inherit other tones (such as neutral and error tones).
94
+ /// $my-palette: map.merge(
95
+ /// tokens.md-ref-palette-values(),
96
+ /// (
97
+ /// 'primary10': /* ... */,
98
+ /// 'primary20': /* ... */,
99
+ /// 'primary30': /* ... */,
100
+ /// 'primary40': /* ... */,
101
+ /// 'primary50': /* ... */,
102
+ /// 'primary60': /* ... */,
103
+ /// 'primary70': /* ... */,
104
+ /// 'primary80': /* ... */,
105
+ /// 'primary90': /* ... */,
106
+ /// 'primary95': /* ... */,
107
+ /// 'primary99': /* ... */,
108
+ /// // Opt: palette values for:
109
+ /// // - secondary
110
+ /// // - tertiary
111
+ /// // - error
112
+ /// // - neutral
113
+ /// // - neutral-variant
114
+ /// ),
115
+ /// );
116
+ ///
117
+ /// @media (prefers-color-scheme: dark) {
118
+ /// @include color.dark-theme($my-palette);
119
+ /// }
120
+ ///
121
+ /// /* Generated CSS */
122
+ /// @media (prefers-color-scheme: dark) {
123
+ /// --md-sys-color-primary: /* ... */;
124
+ /// --md-sys-color-primary-container: /* ... */;
125
+ /// --md-sys-color-primary-fixed: /* ... */;
126
+ /// --md-sys-color-primary-fixed-dim: /* ... */;
127
+ /// /* ... */
128
+ /// }
129
+ ///
130
+ /// To generate a palette, use the Material Theme Builder Figma plugin.
131
+ ///
132
+ /// @link https://www.figma.com/community/plugin/1034969338659738588/Material-Theme-Builder
133
+ ///
134
+ /// @param {Map} $md-ref-palette - A map of Material palette keys and their
135
+ /// values.
136
+ /// @output Emits `--md-sys-color-*` custom properties for a dark theme with
137
+ /// the given palette.
138
+ @mixin dark-theme($md-ref-palette: tokens.md-ref-palette-values()) {
139
+ @each $token, $value in $md-ref-palette {
140
+ @if list.index(tokens.$md-ref-palette-supported-tokens, $token) == null {
141
+ @error 'md-ref-palette `#{$token}` is not a supported token.';
142
+ }
143
+ }
144
+
145
+ @include theme(
146
+ tokens.md-sys-color-values-dark(
147
+ (
148
+ 'md-ref-palette': $md-ref-palette,
149
+ ),
150
+ $exclude-custom-properties: true
151
+ )
152
+ );
153
+ }
154
+
155
+ /// `color.theme()` emits `--md-sys-color-*` custom properties for a given color
156
+ /// scheme.
157
+ ///
158
+ /// @example scss
159
+ /// @use '@material/web/color/color';
160
+ ///
161
+ /// :root {
162
+ /// @include color.theme(
163
+ /// 'primary': /* ... */,
164
+ /// 'primary-container': /* ... */,
165
+ /// 'primary-fixed': /* ... */,
166
+ /// 'primary-fixed-dim': /* ... */,
167
+ /// /* ... */
168
+ /// );
169
+ /// }
170
+ ///
171
+ /// /* Generated CSS */
172
+ /// :root {
173
+ /// --md-sys-color-primary: /* ... */;
174
+ /// --md-sys-color-primary-container: /* ... */;
175
+ /// --md-sys-color-primary-fixed: /* ... */;
176
+ /// --md-sys-color-primary-fixed-dim: /* ... */;
177
+ /// /* ... */
178
+ /// }
179
+ ///
180
+ /// @param {Map} $tokens - A Map with `md-sys-color` token name keys and their
181
+ /// corresponding values.
182
+ /// @output Emits `--md-sys-color-*` custom properties for a given color scheme.
183
+ @mixin theme($tokens) {
184
+ @each $token, $value in $tokens {
185
+ @if list.index(tokens.$md-sys-color-supported-tokens, $token) == null {
186
+ @error 'md-sys-color `#{$token}` is not a supported token.';
187
+ }
188
+
189
+ @if $value {
190
+ --md-sys-color-#{$token}: #{$value};
191
+ }
192
+ }
193
+ }
package/common.d.ts CHANGED
@@ -30,7 +30,7 @@ import './progress/linear-progress.js';
30
30
  import './radio/radio.js';
31
31
  import './select/outlined-select.js';
32
32
  import './select/select-option.js';
33
- import './tabs/tab.js';
33
+ import './tabs/primary-tab.js';
34
34
  import './tabs/tabs.js';
35
35
  import './textfield/outlined-text-field.js';
36
36
  export * from './button/filled-button.js';
@@ -52,6 +52,6 @@ export * from './progress/linear-progress.js';
52
52
  export * from './radio/radio.js';
53
53
  export * from './select/outlined-select.js';
54
54
  export * from './select/select-option.js';
55
- export * from './tabs/tab.js';
55
+ export * from './tabs/primary-tab.js';
56
56
  export * from './tabs/tabs.js';
57
57
  export * from './textfield/outlined-text-field.js';
package/common.js CHANGED
@@ -32,7 +32,7 @@ import './progress/linear-progress.js';
32
32
  import './radio/radio.js';
33
33
  import './select/outlined-select.js';
34
34
  import './select/select-option.js';
35
- import './tabs/tab.js';
35
+ import './tabs/primary-tab.js';
36
36
  import './tabs/tabs.js';
37
37
  import './textfield/outlined-text-field.js';
38
38
  // go/keep-sorted end
@@ -58,7 +58,7 @@ export * from './progress/linear-progress.js';
58
58
  export * from './radio/radio.js';
59
59
  export * from './select/outlined-select.js';
60
60
  export * from './select/select-option.js';
61
- export * from './tabs/tab.js';
61
+ export * from './tabs/primary-tab.js';
62
62
  export * from './tabs/tabs.js';
63
63
  export * from './textfield/outlined-text-field.js';
64
64
  // go/keep-sorted end
package/common.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"common.js","sourceRoot":"","sources":["common.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;GAOG;AAEH,yBAAyB;AACzB,uBAAuB;AACvB,OAAO,2BAA2B,CAAC;AACnC,OAAO,6BAA6B,CAAC;AACrC,OAAO,yBAAyB,CAAC;AACjC,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAChC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,gBAAgB,CAAC;AACxB,OAAO,6BAA6B,CAAC;AACrC,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,yBAAyB,CAAC;AACjC,OAAO,iCAAiC,CAAC;AACzC,OAAO,+BAA+B,CAAC;AACvC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,6BAA6B,CAAC;AACrC,OAAO,2BAA2B,CAAC;AACnC,OAAO,eAAe,CAAC;AACvB,OAAO,gBAAgB,CAAC;AACxB,OAAO,oCAAoC,CAAC;AAC5C,qBAAqB;AACrB,4BAA4B;AAE5B,yBAAyB;AACzB,uBAAuB;AACvB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iCAAiC,CAAC;AAChD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,kBAAkB,CAAC;AACjC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oCAAoC,CAAC;AACnD,qBAAqB;AACrB,4BAA4B","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * @fileoverview A convenience bundle import that includes common components.\n *\n * WARNING: This import is intended for prototyping and development builds only.\n * It is smaller than `@material/web/all.js` and includes the most common\n * components for starting a project. Import only the individual components used\n * for production.\n */\n\n// LINT.IfChange(imports)\n// go/keep-sorted start\nimport './button/filled-button.js';\nimport './button/outlined-button.js';\nimport './button/text-button.js';\nimport './checkbox/checkbox.js';\nimport './chips/assist-chip.js';\nimport './chips/filter-chip.js';\nimport './dialog/dialog.js';\nimport './icon/icon.js';\nimport './iconbutton/icon-button.js';\nimport './list/list.js';\nimport './list/list-item.js';\nimport './menu/menu.js';\nimport './menu/menu-item.js';\nimport './menu/sub-menu-item.js';\nimport './progress/circular-progress.js';\nimport './progress/linear-progress.js';\nimport './radio/radio.js';\nimport './select/outlined-select.js';\nimport './select/select-option.js';\nimport './tabs/tab.js';\nimport './tabs/tabs.js';\nimport './textfield/outlined-text-field.js';\n// go/keep-sorted end\n// LINT.ThenChange(:exports)\n\n// LINT.IfChange(exports)\n// go/keep-sorted start\nexport * from './button/filled-button.js';\nexport * from './button/outlined-button.js';\nexport * from './button/text-button.js';\nexport * from './checkbox/checkbox.js';\nexport * from './chips/assist-chip.js';\nexport * from './chips/filter-chip.js';\nexport * from './dialog/dialog.js';\nexport * from './icon/icon.js';\nexport * from './iconbutton/icon-button.js';\nexport * from './list/list.js';\nexport * from './list/list-item.js';\nexport * from './menu/menu.js';\nexport * from './menu/menu-item.js';\nexport * from './menu/sub-menu-item.js';\nexport * from './progress/circular-progress.js';\nexport * from './progress/linear-progress.js';\nexport * from './radio/radio.js';\nexport * from './select/outlined-select.js';\nexport * from './select/select-option.js';\nexport * from './tabs/tab.js';\nexport * from './tabs/tabs.js';\nexport * from './textfield/outlined-text-field.js';\n// go/keep-sorted end\n// LINT.ThenChange(:imports)\n"]}
1
+ {"version":3,"file":"common.js","sourceRoot":"","sources":["common.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;GAOG;AAEH,yBAAyB;AACzB,uBAAuB;AACvB,OAAO,2BAA2B,CAAC;AACnC,OAAO,6BAA6B,CAAC;AACrC,OAAO,yBAAyB,CAAC;AACjC,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAChC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,gBAAgB,CAAC;AACxB,OAAO,6BAA6B,CAAC;AACrC,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,yBAAyB,CAAC;AACjC,OAAO,iCAAiC,CAAC;AACzC,OAAO,+BAA+B,CAAC;AACvC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,6BAA6B,CAAC;AACrC,OAAO,2BAA2B,CAAC;AACnC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,gBAAgB,CAAC;AACxB,OAAO,oCAAoC,CAAC;AAC5C,qBAAqB;AACrB,4BAA4B;AAE5B,yBAAyB;AACzB,uBAAuB;AACvB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iCAAiC,CAAC;AAChD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,kBAAkB,CAAC;AACjC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oCAAoC,CAAC;AACnD,qBAAqB;AACrB,4BAA4B","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * @fileoverview A convenience bundle import that includes common components.\n *\n * WARNING: This import is intended for prototyping and development builds only.\n * It is smaller than `@material/web/all.js` and includes the most common\n * components for starting a project. Import only the individual components used\n * for production.\n */\n\n// LINT.IfChange(imports)\n// go/keep-sorted start\nimport './button/filled-button.js';\nimport './button/outlined-button.js';\nimport './button/text-button.js';\nimport './checkbox/checkbox.js';\nimport './chips/assist-chip.js';\nimport './chips/filter-chip.js';\nimport './dialog/dialog.js';\nimport './icon/icon.js';\nimport './iconbutton/icon-button.js';\nimport './list/list.js';\nimport './list/list-item.js';\nimport './menu/menu.js';\nimport './menu/menu-item.js';\nimport './menu/sub-menu-item.js';\nimport './progress/circular-progress.js';\nimport './progress/linear-progress.js';\nimport './radio/radio.js';\nimport './select/outlined-select.js';\nimport './select/select-option.js';\nimport './tabs/primary-tab.js';\nimport './tabs/tabs.js';\nimport './textfield/outlined-text-field.js';\n// go/keep-sorted end\n// LINT.ThenChange(:exports)\n\n// LINT.IfChange(exports)\n// go/keep-sorted start\nexport * from './button/filled-button.js';\nexport * from './button/outlined-button.js';\nexport * from './button/text-button.js';\nexport * from './checkbox/checkbox.js';\nexport * from './chips/assist-chip.js';\nexport * from './chips/filter-chip.js';\nexport * from './dialog/dialog.js';\nexport * from './icon/icon.js';\nexport * from './iconbutton/icon-button.js';\nexport * from './list/list.js';\nexport * from './list/list-item.js';\nexport * from './menu/menu.js';\nexport * from './menu/menu-item.js';\nexport * from './menu/sub-menu-item.js';\nexport * from './progress/circular-progress.js';\nexport * from './progress/linear-progress.js';\nexport * from './radio/radio.js';\nexport * from './select/outlined-select.js';\nexport * from './select/select-option.js';\nexport * from './tabs/primary-tab.js';\nexport * from './tabs/tabs.js';\nexport * from './textfield/outlined-text-field.js';\n// go/keep-sorted end\n// LINT.ThenChange(:imports)\n"]}