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

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 (192) hide show
  1. package/README.md +22 -17
  2. package/button/internal/_filled-button.scss +0 -1
  3. package/button/internal/_outlined-button.scss +6 -0
  4. package/button/internal/_shared.scss +7 -1
  5. package/button/internal/button.d.ts +15 -14
  6. package/button/internal/button.js +41 -39
  7. package/button/internal/button.js.map +1 -1
  8. package/button/internal/outlined-styles.css.js +1 -1
  9. package/button/internal/outlined-styles.css.js.map +1 -1
  10. package/button/internal/shared-elevation-styles.css.js +1 -1
  11. package/button/internal/shared-elevation-styles.css.js.map +1 -1
  12. package/button/internal/shared-styles.css.js +1 -1
  13. package/button/internal/shared-styles.css.js.map +1 -1
  14. package/checkbox/internal/_checkbox.scss +1 -0
  15. package/checkbox/internal/checkbox-styles.css.js +1 -1
  16. package/checkbox/internal/checkbox-styles.css.js.map +1 -1
  17. package/checkbox/internal/checkbox.d.ts +2 -2
  18. package/checkbox/internal/checkbox.js +18 -14
  19. package/checkbox/internal/checkbox.js.map +1 -1
  20. package/chips/assist-chip.js +1 -2
  21. package/chips/assist-chip.js.map +1 -1
  22. package/chips/filter-chip.js +1 -3
  23. package/chips/filter-chip.js.map +1 -1
  24. package/chips/input-chip.js +1 -5
  25. package/chips/input-chip.js.map +1 -1
  26. package/chips/internal/_assist-chip.scss +6 -0
  27. package/chips/internal/_elevated.scss +1 -1
  28. package/chips/internal/_filter-chip.scss +6 -0
  29. package/chips/internal/_input-chip.scss +32 -0
  30. package/chips/internal/_selectable.scss +17 -13
  31. package/chips/internal/_shared.scss +17 -10
  32. package/chips/internal/_suggestion-chip.scss +6 -0
  33. package/chips/internal/_trailing-icon.scss +24 -24
  34. package/chips/internal/assist-styles.css.js +1 -1
  35. package/chips/internal/assist-styles.css.js.map +1 -1
  36. package/chips/internal/elevated-styles.css.js +1 -1
  37. package/chips/internal/elevated-styles.css.js.map +1 -1
  38. package/chips/internal/filter-styles.css.js +1 -1
  39. package/chips/internal/filter-styles.css.js.map +1 -1
  40. package/chips/internal/input-styles.css.js +1 -1
  41. package/chips/internal/input-styles.css.js.map +1 -1
  42. package/chips/internal/selectable-styles.css.js +1 -1
  43. package/chips/internal/selectable-styles.css.js.map +1 -1
  44. package/chips/internal/shared-styles.css.js +1 -1
  45. package/chips/internal/shared-styles.css.js.map +1 -1
  46. package/chips/internal/suggestion-styles.css.js +1 -1
  47. package/chips/internal/suggestion-styles.css.js.map +1 -1
  48. package/chips/internal/trailing-icon-styles.css.js +1 -1
  49. package/chips/internal/trailing-icon-styles.css.js.map +1 -1
  50. package/chips/suggestion-chip.js +1 -2
  51. package/chips/suggestion-chip.js.map +1 -1
  52. package/elevation/internal/_elevation.scss +14 -7
  53. package/elevation/internal/elevation-styles.css.js +1 -1
  54. package/elevation/internal/elevation-styles.css.js.map +1 -1
  55. package/fab/branded-fab.d.ts +0 -1
  56. package/fab/internal/_fab.scss +11 -10
  57. package/fab/internal/_shared.scss +4 -1
  58. package/fab/internal/fab-styles.css.js +1 -1
  59. package/fab/internal/fab-styles.css.js.map +1 -1
  60. package/fab/internal/fab.d.ts +0 -1
  61. package/fab/internal/shared-styles.css.js +1 -1
  62. package/fab/internal/shared-styles.css.js.map +1 -1
  63. package/fab/internal/shared.d.ts +0 -9
  64. package/fab/internal/shared.js +2 -18
  65. package/fab/internal/shared.js.map +1 -1
  66. package/field/internal/filled-styles.css.js +1 -1
  67. package/field/internal/filled-styles.css.js.map +1 -1
  68. package/field/internal/outlined-styles.css.js +1 -1
  69. package/field/internal/outlined-styles.css.js.map +1 -1
  70. package/icon/internal/_icon.scss +10 -5
  71. package/icon/internal/icon-styles.css.js +1 -1
  72. package/icon/internal/icon-styles.css.js.map +1 -1
  73. package/iconbutton/internal/_icon-button.scss +4 -0
  74. package/iconbutton/internal/_shared.scss +9 -0
  75. package/iconbutton/internal/icon-button.d.ts +16 -3
  76. package/iconbutton/internal/icon-button.js +31 -7
  77. package/iconbutton/internal/icon-button.js.map +1 -1
  78. package/iconbutton/internal/shared-styles.css.js +1 -1
  79. package/iconbutton/internal/shared-styles.css.js.map +1 -1
  80. package/iconbutton/internal/standard-styles.css.js +1 -1
  81. package/iconbutton/internal/standard-styles.css.js.map +1 -1
  82. package/internal/controller/form-submitter.d.ts +12 -0
  83. package/internal/controller/form-submitter.js +3 -1
  84. package/internal/controller/form-submitter.js.map +1 -1
  85. package/labs/badge/internal/_badge.scss +11 -8
  86. package/labs/navigationbar/internal/_navigation-bar.scss +11 -9
  87. package/labs/navigationbar/internal/navigation-bar-styles.css.js +1 -1
  88. package/labs/navigationbar/internal/navigation-bar-styles.css.js.map +1 -1
  89. package/labs/navigationdrawer/internal/_navigation-drawer-modal.scss +11 -8
  90. package/labs/navigationdrawer/internal/_navigation-drawer.scss +11 -8
  91. package/labs/navigationdrawer/internal/navigation-drawer-modal-styles.css.js +1 -1
  92. package/labs/navigationdrawer/internal/navigation-drawer-modal-styles.css.js.map +1 -1
  93. package/labs/navigationdrawer/internal/navigation-drawer-styles.css.js +1 -1
  94. package/labs/navigationdrawer/internal/navigation-drawer-styles.css.js.map +1 -1
  95. package/labs/navigationtab/internal/_navigation-tab.scss +10 -10
  96. package/labs/segmentedbutton/internal/_outlined-segmented-button.scss +1 -3
  97. package/labs/segmentedbutton/internal/outlined-styles.css.js +1 -1
  98. package/labs/segmentedbutton/internal/outlined-styles.css.js.map +1 -1
  99. package/list/internal/_list.scss +6 -2
  100. package/list/internal/list-styles.css.js +1 -1
  101. package/list/internal/list-styles.css.js.map +1 -1
  102. package/list/internal/listitem/_list-item.scss +83 -93
  103. package/list/internal/listitem/forced-colors-styles.css.js +1 -1
  104. package/list/internal/listitem/forced-colors-styles.css.js.map +1 -1
  105. package/list/internal/listitem/forced-colors-styles.scss +6 -6
  106. package/list/internal/listitem/list-item-styles.css.js +1 -1
  107. package/list/internal/listitem/list-item-styles.css.js.map +1 -1
  108. package/menu/internal/_menu.scss +6 -3
  109. package/menu/internal/menu-styles.css.js +1 -1
  110. package/menu/internal/menu-styles.css.js.map +1 -1
  111. package/menu/internal/menu.js +6 -6
  112. package/menu/internal/menu.js.map +1 -1
  113. package/menu/internal/menuitem/_menu-item.scss +7 -4
  114. package/menu/internal/menuitem/menu-item-styles.css.js +1 -1
  115. package/menu/internal/menuitem/menu-item-styles.css.js.map +1 -1
  116. package/package.json +1 -1
  117. package/progress/harness.js +2 -4
  118. package/progress/harness.js.map +1 -1
  119. package/progress/internal/_circular-progress.scss +4 -4
  120. package/progress/internal/_linear-progress.scss +93 -132
  121. package/progress/internal/circular-progress-styles.css.js +1 -1
  122. package/progress/internal/circular-progress-styles.css.js.map +1 -1
  123. package/progress/internal/circular-progress.js +1 -1
  124. package/progress/internal/circular-progress.js.map +1 -1
  125. package/progress/internal/linear-progress-styles.css.js +1 -1
  126. package/progress/internal/linear-progress-styles.css.js.map +1 -1
  127. package/progress/internal/linear-progress.d.ts +0 -11
  128. package/progress/internal/linear-progress.js +4 -48
  129. package/progress/internal/linear-progress.js.map +1 -1
  130. package/radio/internal/radio.d.ts +1 -1
  131. package/radio/internal/radio.js.map +1 -1
  132. package/ripple/internal/_ripple.scss +1 -1
  133. package/ripple/internal/ripple-styles.css.js +1 -1
  134. package/ripple/internal/ripple-styles.css.js.map +1 -1
  135. package/select/internal/_filled-select.scss +0 -1
  136. package/select/internal/_outlined-select.scss +0 -1
  137. package/select/internal/_shared.scss +0 -1
  138. package/select/internal/filled-select-styles.css.js +1 -1
  139. package/select/internal/filled-select-styles.css.js.map +1 -1
  140. package/select/internal/outlined-select-styles.css.js +1 -1
  141. package/select/internal/outlined-select-styles.css.js.map +1 -1
  142. package/slider/internal/_slider.scss +33 -28
  143. package/slider/internal/forced-colors-styles.css.js +1 -1
  144. package/slider/internal/forced-colors-styles.css.js.map +1 -1
  145. package/slider/internal/slider-styles.css.js +1 -1
  146. package/slider/internal/slider-styles.css.js.map +1 -1
  147. package/slider/internal/slider.d.ts +22 -8
  148. package/slider/internal/slider.js +113 -22
  149. package/slider/internal/slider.js.map +1 -1
  150. package/switch/internal/_switch.scss +9 -1
  151. package/switch/internal/switch-styles.css.js +1 -1
  152. package/switch/internal/switch-styles.css.js.map +1 -1
  153. package/switch/internal/switch.d.ts +1 -1
  154. package/switch/internal/switch.js +2 -2
  155. package/switch/internal/switch.js.map +1 -1
  156. package/tabs/internal/_tab.scss +76 -20
  157. package/tabs/internal/tab-styles.css.js +1 -1
  158. package/tabs/internal/tab-styles.css.js.map +1 -1
  159. package/tabs/internal/tab.js +0 -1
  160. package/tabs/internal/tab.js.map +1 -1
  161. package/textfield/internal/filled-styles.css.js +1 -1
  162. package/textfield/internal/filled-styles.css.js.map +1 -1
  163. package/textfield/internal/outlined-styles.css.js +1 -1
  164. package/textfield/internal/outlined-styles.css.js.map +1 -1
  165. package/textfield/internal/text-field.d.ts +11 -10
  166. package/textfield/internal/text-field.js +60 -32
  167. package/textfield/internal/text-field.js.map +1 -1
  168. package/tokens/_md-comp-filled-field.scss +2 -2
  169. package/tokens/_md-comp-filled-select.scss +3 -0
  170. package/tokens/_md-comp-filled-text-field.scss +3 -1
  171. package/tokens/_md-comp-list-item.scss +117 -103
  172. package/tokens/_md-comp-menu-item.scss +3 -3
  173. package/tokens/_md-comp-outlined-field.scss +2 -1
  174. package/tokens/_md-comp-outlined-select.scss +8 -0
  175. package/tokens/_md-comp-outlined-text-field.scss +3 -1
  176. package/chips/internal/assist-forced-colors-styles.css.d.ts +0 -1
  177. package/chips/internal/assist-forced-colors-styles.css.js +0 -9
  178. package/chips/internal/assist-forced-colors-styles.css.js.map +0 -1
  179. package/chips/internal/assist-forced-colors-styles.scss +0 -27
  180. package/chips/internal/filter-forced-colors-styles.css.d.ts +0 -1
  181. package/chips/internal/filter-forced-colors-styles.css.js +0 -9
  182. package/chips/internal/filter-forced-colors-styles.css.js.map +0 -1
  183. package/chips/internal/filter-forced-colors-styles.scss +0 -34
  184. package/chips/internal/input-forced-colors-styles.css.d.ts +0 -1
  185. package/chips/internal/input-forced-colors-styles.css.js +0 -9
  186. package/chips/internal/input-forced-colors-styles.css.js.map +0 -1
  187. package/chips/internal/input-forced-colors-styles.scss +0 -39
  188. package/chips/internal/suggestion-forced-colors-styles.css.d.ts +0 -1
  189. package/chips/internal/suggestion-forced-colors-styles.css.js +0 -9
  190. package/chips/internal/suggestion-forced-colors-styles.css.js.map +0 -1
  191. package/chips/internal/suggestion-forced-colors-styles.scss +0 -27
  192. package/internal/sass/_theme.scss +0 -249
package/labs/segmentedbutton/internal/_outlined-segmented-button.scss CHANGED
@@ -10,7 +10,6 @@
10
10
  @use 'sass:map';
11
11
  // go/keep-sorted end
12
12
  // go/keep-sorted start
13
- @use '../../../internal/sass/theme';
14
13
  @use '../../../tokens';
15
14
  // go/keep-sorted end
16
15
 
@@ -24,11 +23,10 @@
24
23
  'spacing-trailing': 12px,
25
24
  )
26
25
  );
27
- $tokens: theme.create-theme-vars($tokens, 'segmented-button');
28
26
 
29
27
  :host {
30
28
  @each $token, $value in $tokens {
31
- --_#{$token}: #{$value};
29
+ --_#{$token}: var(--md-outlined-segmented-button-#{$token}, #{$value});
32
30
  }
33
31
  }
34
32
 
package/labs/segmentedbutton/internal/outlined-styles.css.js CHANGED
@@ -4,6 +4,6 @@
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
6
  import { css } from 'lit';
7
- export const styles = css `:host{--_container-height: var(--md-segmented-button-container-height, 40px);--_disabled-icon-color: var(--md-segmented-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-color: var(--md-segmented-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-color: var(--md-segmented-button-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-segmented-button-hover-state-layer-opacity, 0.08);--_label-text-type: var(--md-segmented-button-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_outline-color: var(--md-segmented-button-outline-color, var(--md-sys-color-outline, #79747e));--_pressed-state-layer-opacity: var(--md-segmented-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-segmented-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-focus-icon-color: var(--md-segmented-button-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-label-text-color: var(--md-segmented-button-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-icon-color: var(--md-segmented-button-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-segmented-button-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-segmented-button-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-label-text-color: var(--md-segmented-button-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-icon-color: var(--md-segmented-button-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-label-text-color: var(--md-segmented-button-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-segmented-button-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_shape: var(--md-segmented-button-shape, 9999px);--_unselected-focus-icon-color: var(--md-segmented-button-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-focus-label-text-color: var(--md-segmented-button-unselected-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-icon-color: var(--md-segmented-button-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-label-text-color: var(--md-segmented-button-unselected-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-color: var(--md-segmented-button-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-label-text-color: var(--md-segmented-button-unselected-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-icon-color: var(--md-segmented-button-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-label-text-color: var(--md-segmented-button-unselected-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-state-layer-color: var(--md-segmented-button-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_icon-size: var(--md-segmented-button-icon-size, 18px);--_selected-icon-color: var(--md-segmented-button-selected-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_unselected-icon-color: var(--md-segmented-button-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_spacing-leading: var(--md-segmented-button-spacing-leading, 12px);--_spacing-trailing: var(--md-segmented-button-spacing-trailing, 12px)}.md3-segmented-button__outline{border-radius:inherit;border-style:solid;border-width:1px;inset:0px -0.5px;pointer-events:none;position:absolute}/*# sourceMappingURL=outlined-styles.css.map */
7
+ export const styles = css `:host{--_container-height: var(--md-outlined-segmented-button-container-height, 40px);--_disabled-icon-color: var(--md-outlined-segmented-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-color: var(--md-outlined-segmented-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-color: var(--md-outlined-segmented-button-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-outlined-segmented-button-hover-state-layer-opacity, 0.08);--_label-text-type: var(--md-outlined-segmented-button-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_outline-color: var(--md-outlined-segmented-button-outline-color, var(--md-sys-color-outline, #79747e));--_pressed-state-layer-opacity: var(--md-outlined-segmented-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-outlined-segmented-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-focus-icon-color: var(--md-outlined-segmented-button-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-label-text-color: var(--md-outlined-segmented-button-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-icon-color: var(--md-outlined-segmented-button-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-outlined-segmented-button-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-outlined-segmented-button-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-label-text-color: var(--md-outlined-segmented-button-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-icon-color: var(--md-outlined-segmented-button-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-label-text-color: var(--md-outlined-segmented-button-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-outlined-segmented-button-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_shape: var(--md-outlined-segmented-button-shape, 9999px);--_unselected-focus-icon-color: var(--md-outlined-segmented-button-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-focus-label-text-color: var(--md-outlined-segmented-button-unselected-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-icon-color: var(--md-outlined-segmented-button-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-label-text-color: var(--md-outlined-segmented-button-unselected-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-color: var(--md-outlined-segmented-button-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-label-text-color: var(--md-outlined-segmented-button-unselected-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-icon-color: var(--md-outlined-segmented-button-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-label-text-color: var(--md-outlined-segmented-button-unselected-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-state-layer-color: var(--md-outlined-segmented-button-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_icon-size: var(--md-outlined-segmented-button-icon-size, 18px);--_selected-icon-color: var(--md-outlined-segmented-button-selected-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_unselected-icon-color: var(--md-outlined-segmented-button-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_spacing-leading: var(--md-outlined-segmented-button-spacing-leading, 12px);--_spacing-trailing: var(--md-outlined-segmented-button-spacing-trailing, 12px)}.md3-segmented-button__outline{border-radius:inherit;border-style:solid;border-width:1px;inset:0px -0.5px;pointer-events:none;position:absolute}/*# sourceMappingURL=outlined-styles.css.map */
8
8
  `;
9
9
  //# sourceMappingURL=outlined-styles.css.js.map
package/labs/segmentedbutton/internal/outlined-styles.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"outlined-styles.css.js","sourceRoot":"","sources":["outlined-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-height: var(--md-segmented-button-container-height, 40px);--_disabled-icon-color: var(--md-segmented-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-color: var(--md-segmented-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-color: var(--md-segmented-button-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-segmented-button-hover-state-layer-opacity, 0.08);--_label-text-type: var(--md-segmented-button-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_outline-color: var(--md-segmented-button-outline-color, var(--md-sys-color-outline, #79747e));--_pressed-state-layer-opacity: var(--md-segmented-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-segmented-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-focus-icon-color: var(--md-segmented-button-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-label-text-color: var(--md-segmented-button-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-icon-color: var(--md-segmented-button-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-segmented-button-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-segmented-button-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-label-text-color: var(--md-segmented-button-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-icon-color: var(--md-segmented-button-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-label-text-color: var(--md-segmented-button-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-segmented-button-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_shape: var(--md-segmented-button-shape, 9999px);--_unselected-focus-icon-color: var(--md-segmented-button-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-focus-label-text-color: var(--md-segmented-button-unselected-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-icon-color: var(--md-segmented-button-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-label-text-color: var(--md-segmented-button-unselected-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-color: var(--md-segmented-button-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-label-text-color: var(--md-segmented-button-unselected-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-icon-color: var(--md-segmented-button-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-label-text-color: var(--md-segmented-button-unselected-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-state-layer-color: var(--md-segmented-button-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_icon-size: var(--md-segmented-button-icon-size, 18px);--_selected-icon-color: var(--md-segmented-button-selected-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_unselected-icon-color: var(--md-segmented-button-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_spacing-leading: var(--md-segmented-button-spacing-leading, 12px);--_spacing-trailing: var(--md-segmented-button-spacing-trailing, 12px)}.md3-segmented-button__outline{border-radius:inherit;border-style:solid;border-width:1px;inset:0px -0.5px;pointer-events:none;position:absolute}/*# sourceMappingURL=outlined-styles.css.map */\n`;\n "]}
1
+ {"version":3,"file":"outlined-styles.css.js","sourceRoot":"","sources":["outlined-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-height: var(--md-outlined-segmented-button-container-height, 40px);--_disabled-icon-color: var(--md-outlined-segmented-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-color: var(--md-outlined-segmented-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-color: var(--md-outlined-segmented-button-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-outlined-segmented-button-hover-state-layer-opacity, 0.08);--_label-text-type: var(--md-outlined-segmented-button-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_outline-color: var(--md-outlined-segmented-button-outline-color, var(--md-sys-color-outline, #79747e));--_pressed-state-layer-opacity: var(--md-outlined-segmented-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-outlined-segmented-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-focus-icon-color: var(--md-outlined-segmented-button-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-label-text-color: var(--md-outlined-segmented-button-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-icon-color: var(--md-outlined-segmented-button-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-outlined-segmented-button-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-outlined-segmented-button-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-label-text-color: var(--md-outlined-segmented-button-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-icon-color: var(--md-outlined-segmented-button-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-label-text-color: var(--md-outlined-segmented-button-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-outlined-segmented-button-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_shape: var(--md-outlined-segmented-button-shape, 9999px);--_unselected-focus-icon-color: var(--md-outlined-segmented-button-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-focus-label-text-color: var(--md-outlined-segmented-button-unselected-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-icon-color: var(--md-outlined-segmented-button-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-label-text-color: var(--md-outlined-segmented-button-unselected-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-color: var(--md-outlined-segmented-button-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-label-text-color: var(--md-outlined-segmented-button-unselected-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-icon-color: var(--md-outlined-segmented-button-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-label-text-color: var(--md-outlined-segmented-button-unselected-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-state-layer-color: var(--md-outlined-segmented-button-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_icon-size: var(--md-outlined-segmented-button-icon-size, 18px);--_selected-icon-color: var(--md-outlined-segmented-button-selected-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_unselected-icon-color: var(--md-outlined-segmented-button-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_spacing-leading: var(--md-outlined-segmented-button-spacing-leading, 12px);--_spacing-trailing: var(--md-outlined-segmented-button-spacing-trailing, 12px)}.md3-segmented-button__outline{border-radius:inherit;border-style:solid;border-width:1px;inset:0px -0.5px;pointer-events:none;position:absolute}/*# sourceMappingURL=outlined-styles.css.map */\n`;\n "]}
package/list/internal/_list.scss CHANGED
@@ -12,15 +12,18 @@
12
12
  @use 'sass:string';
13
13
  // go/keep-sorted end
14
14
  // go/keep-sorted start
15
- @use '../../internal/sass/theme';
16
15
  @use '../../tokens';
17
16
  @use './listitem/list-item';
18
17
  // go/keep-sorted end
19
18
 
20
19
  @mixin theme($tokens) {
21
- $tokens: theme.validate-theme(tokens.md-comp-list-values(), $tokens);
20
+ $supported-tokens: tokens.$md-comp-list-supported-tokens;
22
21
 
23
22
  @each $token, $value in $tokens {
23
+ @if list.index($supported-tokens, $token) == null {
24
+ @error 'Token `#{$token}` is not a supported token.';
25
+ }
26
+
24
27
  @if $value {
25
28
  --md-list-#{$token}: #{$value};
26
29
  }
@@ -36,6 +39,7 @@
36
39
  }
37
40
 
38
41
  color: unset;
42
+ display: flex;
39
43
  }
40
44
 
41
45
  .md3-list {
package/list/internal/list-styles.css.js CHANGED
@@ -4,6 +4,6 @@
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
6
  import { css } from 'lit';
7
- export const styles = css `:host{--_container-color: var(--md-list-container-color, var(--md-sys-color-surface, #fef7ff));color:unset}.md3-list{background-color:var(--_container-color);border-radius:inherit;display:block;list-style-type:none;margin:0;min-width:inherit;outline:none;padding:8px 0;position:relative}/*# sourceMappingURL=list-styles.css.map */
7
+ export const styles = css `:host{--_container-color: var(--md-list-container-color, var(--md-sys-color-surface, #fef7ff));color:unset;display:flex}.md3-list{background-color:var(--_container-color);border-radius:inherit;display:block;list-style-type:none;margin:0;min-width:inherit;outline:none;padding:8px 0;position:relative}/*# sourceMappingURL=list-styles.css.map */
8
8
  `;
9
9
  //# sourceMappingURL=list-styles.css.js.map
package/list/internal/list-styles.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"list-styles.css.js","sourceRoot":"","sources":["list-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-color: var(--md-list-container-color, var(--md-sys-color-surface, #fef7ff));color:unset}.md3-list{background-color:var(--_container-color);border-radius:inherit;display:block;list-style-type:none;margin:0;min-width:inherit;outline:none;padding:8px 0;position:relative}/*# sourceMappingURL=list-styles.css.map */\n`;\n "]}
1
+ {"version":3,"file":"list-styles.css.js","sourceRoot":"","sources":["list-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-color: var(--md-list-container-color, var(--md-sys-color-surface, #fef7ff));color:unset;display:flex}.md3-list{background-color:var(--_container-color);border-radius:inherit;display:block;list-style-type:none;margin:0;min-width:inherit;outline:none;padding:8px 0;position:relative}/*# sourceMappingURL=list-styles.css.map */\n`;\n "]}
package/list/internal/listitem/_list-item.scss CHANGED
@@ -4,21 +4,25 @@
4
4
  //
5
5
 
6
6
  // go/keep-sorted start
7
+ @use 'sass:list';
7
8
  @use 'sass:map';
8
9
  @use 'sass:string';
9
10
  // go/keep-sorted end
10
11
  // go/keep-sorted start
11
12
  @use '../../../focus/focus-ring';
12
13
  @use '../../../icon/icon';
13
- @use '../../../internal/sass/theme';
14
14
  @use '../../../ripple/ripple';
15
15
  @use '../../../tokens';
16
16
  // go/keep-sorted end
17
17
 
18
18
  @mixin theme($tokens) {
19
- $tokens: theme.validate-theme(tokens.md-comp-list-item-values(), $tokens);
19
+ $supported-tokens: tokens.$md-comp-list-item-supported-tokens;
20
20
 
21
21
  @each $token, $value in $tokens {
22
+ @if list.index($supported-tokens, $token) == null {
23
+ @error 'Token `#{$token}` is not a supported token.';
24
+ }
25
+
22
26
  @if $value {
23
27
  --md-list-item-#{$token}: #{$value};
24
28
  }
@@ -47,10 +51,10 @@
47
51
 
48
52
  @include ripple.theme(
49
53
  (
50
- hover-color: var(--_list-item-hover-state-layer-color),
51
- hover-opacity: var(--_list-item-hover-state-layer-opacity),
52
- pressed-color: var(--_list-item-pressed-state-layer-color),
53
- pressed-opacity: var(--_list-item-pressed-state-layer-opacity),
54
+ hover-color: var(--_hover-state-layer-color),
55
+ hover-opacity: var(--_hover-state-layer-opacity),
56
+ pressed-color: var(--_pressed-state-layer-color),
57
+ pressed-opacity: var(--_pressed-state-layer-opacity),
54
58
  )
55
59
  );
56
60
  }
@@ -71,8 +75,8 @@
71
75
  position: relative;
72
76
  width: 100%;
73
77
  text-decoration: none;
74
- background-color: var(--_list-item-container-color);
75
- border-radius: var(--_list-item-container-shape);
78
+ background-color: var(--_container-color);
79
+ border-radius: var(--_container-shape);
76
80
  // hide android tap color since we have ripple
77
81
  -webkit-tap-highlight-color: transparent;
78
82
 
@@ -90,7 +94,7 @@
90
94
  width: 100%;
91
95
  box-sizing: border-box;
92
96
  border-radius: inherit;
93
- padding-inline-end: var(--_list-item-trailing-space);
97
+ padding-inline-end: var(--_trailing-space);
94
98
  }
95
99
 
96
100
  md-ripple {
@@ -98,15 +102,15 @@
98
102
  }
99
103
 
100
104
  .with-one-line {
101
- min-height: var(--_list-item-one-line-container-height);
105
+ min-height: var(--_one-line-container-height);
102
106
  }
103
107
 
104
108
  .with-two-line {
105
- min-height: var(--_list-item-two-line-container-height);
109
+ min-height: var(--_two-line-container-height);
106
110
  }
107
111
 
108
112
  .with-three-line {
109
- min-height: var(--_list-item-three-line-container-height);
113
+ min-height: var(--_three-line-container-height);
110
114
  }
111
115
 
112
116
  .start {
@@ -126,7 +130,7 @@
126
130
  &::slotted([data-variant='icon']),
127
131
  &::slotted([data-variant='image']),
128
132
  &::slotted([data-variant='avatar']) {
129
- margin-inline-start: var(--_list-item-leading-element-leading-space);
133
+ margin-inline-start: var(--_leading-element-leading-space);
130
134
  }
131
135
  }
132
136
 
@@ -136,7 +140,7 @@
136
140
  flex-direction: column;
137
141
  box-sizing: border-box;
138
142
  flex: 1 0 0;
139
- padding-inline-start: var(--_list-item-leading-space);
143
+ padding-inline-start: var(--_leading-space);
140
144
  z-index: 1;
141
145
  }
142
146
 
@@ -155,7 +159,7 @@
155
159
  slot[name='end']::slotted(*),
156
160
  .trailing-supporting-text {
157
161
  margin-inline-start: var(
158
- --_list-item-trailing-element-headline-trailing-element-space
162
+ --_trailing-element-headline-trailing-element-space
159
163
  );
160
164
  }
161
165
 
@@ -164,24 +168,24 @@
164
168
  text-overflow: ellipsis;
165
169
  overflow-x: hidden;
166
170
  white-space: nowrap;
167
- color: var(--_list-item-label-text-color);
168
- font: var(--_list-item-label-text-type);
171
+ color: var(--_label-text-color);
172
+ font: var(--_label-text-type);
169
173
 
170
174
  :hover & {
171
- color: var(--_list-item-hover-label-text-color);
175
+ color: var(--_hover-label-text-color);
172
176
  }
173
177
 
174
178
  :focus & {
175
- color: var(--_list-item-focus-label-text-color);
179
+ color: var(--_focus-label-text-color);
176
180
  }
177
181
 
178
182
  :active & {
179
- color: var(--_list-item-pressed-label-text-color);
183
+ color: var(--_pressed-label-text-color);
180
184
  }
181
185
 
182
186
  .disabled & {
183
- color: var(--_list-item-disabled-label-text-color);
184
- opacity: var(--_list-item-disabled-label-text-opacity);
187
+ color: var(--_disabled-label-text-color);
188
+ opacity: var(--_disabled-label-text-opacity);
185
189
  }
186
190
  }
187
191
 
@@ -190,8 +194,8 @@
190
194
  white-space: normal;
191
195
  overflow: hidden;
192
196
  width: 100%;
193
- color: var(--_list-item-supporting-text-color);
194
- font: var(--_list-item-supporting-text-type);
197
+ color: var(--_supporting-text-color);
198
+ font: var(--_supporting-text-type);
195
199
 
196
200
  // Box is supposed to be deprecated, but line-clamp is not. It's still on
197
201
  // standards track and can only be applied with display: -webkit-box and
@@ -202,8 +206,8 @@
202
206
  display: -webkit-box;
203
207
 
204
208
  .disabled & {
205
- color: var(--_list-item-disabled-label-text-color);
206
- opacity: var(--_list-item-disabled-label-text-opacity);
209
+ color: var(--_disabled-label-text-color);
210
+ opacity: var(--_disabled-label-text-opacity);
207
211
  }
208
212
  }
209
213
 
@@ -212,25 +216,24 @@
212
216
  }
213
217
 
214
218
  .trailing-supporting-text {
215
- padding-inline-start: 16px;
216
- font: var(--_list-item-trailing-supporting-text-type);
219
+ font: var(--_trailing-supporting-text-type);
217
220
 
218
221
  .list-item:not(.disabled) & {
219
- color: var(--_list-item-trailing-supporting-text-color);
222
+ color: var(--_trailing-supporting-text-color);
220
223
  }
221
224
 
222
225
  .disabled & {
223
- color: var(--_list-item-disabled-label-text-color);
224
- opacity: var(--_list-item-disabled-label-text-opacity);
226
+ color: var(--_disabled-label-text-color);
227
+ opacity: var(--_disabled-label-text-opacity);
225
228
  }
226
229
 
227
230
  .with-three-line & {
228
231
  // In three line, trailing-supporting-text must align with the mid-line of
229
232
  // the headline text.
230
- padding-block-start: calc(
233
+ margin-block-start: calc(
231
234
  (
232
- var(--_list-item-label-text-line-height) -
233
- var(--_list-item-trailing-supporting-text-line-height)
235
+ var(--_label-text-line-height) -
236
+ var(--_trailing-supporting-text-line-height)
234
237
  ) / 2
235
238
  );
236
239
  }
@@ -244,19 +247,16 @@
244
247
  @mixin _image() {
245
248
  ::slotted([data-variant='image']) {
246
249
  display: inline-flex;
247
- height: var(--_list-item-leading-image-height);
248
- width: var(--_list-item-leading-image-width);
249
- border-radius: var(--_list-item-leading-image-shape);
250
+ height: var(--_leading-image-height);
251
+ width: var(--_leading-image-width);
252
+ border-radius: var(--_leading-image-shape);
250
253
  // Min height is two-line height
251
- padding-block: calc(
252
- (
253
- var(--_list-item-two-line-container-height) -
254
- var(--_list-item-leading-image-height)
255
- ) / 2
254
+ margin-block: calc(
255
+ (var(--_two-line-container-height) - var(--_leading-image-height)) / 2
256
256
  );
257
257
 
258
258
  .with-three-line & {
259
- padding-block: 0;
259
+ margin-block: 0;
260
260
  }
261
261
  }
262
262
  }
@@ -267,78 +267,72 @@
267
267
  }
268
268
 
269
269
  slot[name='start']::slotted([data-variant='icon']) {
270
- font-size: var(--_list-item-leading-icon-size);
271
- width: var(--_list-item-leading-icon-size);
272
- height: var(--_list-item-leading-icon-size);
273
- color: var(--_list-item-leading-icon-color);
270
+ font-size: var(--_leading-icon-size);
271
+ width: var(--_leading-icon-size);
272
+ height: var(--_leading-icon-size);
273
+ color: var(--_leading-icon-color);
274
274
 
275
275
  .with-three-line & {
276
276
  // In three line, icon must align with the mid-line of headline text
277
- padding-block-start: calc(
278
- (
279
- var(--_list-item-label-text-line-height) -
280
- var(--_list-item-leading-icon-size)
281
- ) / 2
277
+ margin-block-start: calc(
278
+ (var(--_label-text-line-height) - var(--_leading-icon-size)) / 2
282
279
  );
283
280
  }
284
281
  }
285
282
 
286
283
  slot[name='end']::slotted([data-variant='icon']) {
287
- font-size: var(--_list-item-trailing-icon-size);
288
- width: var(--_list-item-trailing-icon-size);
289
- height: var(--_list-item-trailing-icon-size);
290
- color: var(--_list-item-trailing-icon-color);
284
+ font-size: var(--_trailing-icon-size);
285
+ width: var(--_trailing-icon-size);
286
+ height: var(--_trailing-icon-size);
287
+ color: var(--_trailing-icon-color);
291
288
 
292
289
  .with-three-line & {
293
290
  // In three line, icon must align with the mid-line of headline text
294
- padding-block-start: calc(
295
- (
296
- var(--_list-item-label-text-line-height) -
297
- var(--_list-item-trailing-icon-size)
298
- ) / 2
291
+ margin-block-start: calc(
292
+ (var(--_label-text-line-height) - var(--_trailing-icon-size)) / 2
299
293
  );
300
294
  }
301
295
  }
302
296
 
303
297
  :hover {
304
298
  slot[name='start']::slotted([data-variant='icon']) {
305
- color: var(--_list-item-hover-leading-icon-icon-color);
299
+ color: var(--_hover-leading-icon-icon-color);
306
300
  }
307
301
 
308
302
  slot[name='end']::slotted([data-variant='icon']) {
309
- color: var(--_list-item-hover-trailing-icon-icon-color);
303
+ color: var(--_hover-trailing-icon-icon-color);
310
304
  }
311
305
  }
312
306
 
313
307
  :focus {
314
308
  slot[name='start']::slotted([data-variant='icon']) {
315
- color: var(--_list-item-focus-leading-icon-icon-color);
309
+ color: var(--_focus-leading-icon-icon-color);
316
310
  }
317
311
 
318
312
  slot[name='end']::slotted([data-variant='icon']) {
319
- color: var(--_list-item-focus-trailing-icon-icon-color);
313
+ color: var(--_focus-trailing-icon-icon-color);
320
314
  }
321
315
  }
322
316
 
323
317
  :active {
324
318
  slot[name='start']::slotted([data-variant='icon']) {
325
- color: var(--_list-item-pressed-leading-icon-icon-color);
319
+ color: var(--_pressed-leading-icon-icon-color);
326
320
  }
327
321
 
328
322
  slot[name='end']::slotted([data-variant='icon']) {
329
- color: var(--_list-item-pressed-trailing-icon-icon-color);
323
+ color: var(--_pressed-trailing-icon-icon-color);
330
324
  }
331
325
  }
332
326
 
333
327
  .disabled {
334
328
  slot[name='start']::slotted([data-variant='icon']) {
335
- opacity: var(--_list-item-disabled-leading-icon-opacity);
336
- color: var(--_list-item-disabled-leading-icon-color);
329
+ opacity: var(--_disabled-leading-icon-opacity);
330
+ color: var(--_disabled-leading-icon-color);
337
331
  }
338
332
 
339
333
  slot[name='end']::slotted([data-variant='icon']) {
340
- opacity: var(--_list-item-disabled-trailing-icon-opacity);
341
- color: var(--_list-item-disabled-trailing-icon-color);
334
+ opacity: var(--_disabled-trailing-icon-opacity);
335
+ color: var(--_disabled-trailing-icon-color);
342
336
  }
343
337
  }
344
338
  }
@@ -348,12 +342,12 @@
348
342
  display: inline-flex;
349
343
  justify-content: center;
350
344
  align-items: center;
351
- background-color: var(--_list-item-leading-avatar-color);
352
- height: var(--_list-item-leading-avatar-size);
353
- width: var(--_list-item-leading-avatar-size);
354
- border-radius: var(--_list-item-leading-avatar-shape);
355
- color: var(--_list-item-leading-avatar-label-color);
356
- font: var(--_list-item-leading-avatar-label-type);
345
+ background-color: var(--_leading-avatar-color);
346
+ height: var(--_leading-avatar-size);
347
+ width: var(--_leading-avatar-size);
348
+ border-radius: var(--_leading-avatar-shape);
349
+ color: var(--_leading-avatar-label-color);
350
+ font: var(--_leading-avatar-label-type);
357
351
  }
358
352
  }
359
353
 
@@ -362,33 +356,29 @@
362
356
  ::slotted([data-variant='video-large']) {
363
357
  display: inline-flex;
364
358
  object-fit: cover;
365
- height: var(--_list-item-small-leading-video-height);
366
- width: var(--_list-item-leading-video-width);
367
- border-radius: var(--_list-item-leading-video-shape);
368
- margin-inline-start: var(--_list-item-leading-video-leading-space);
359
+ height: var(--_small-leading-video-height);
360
+ width: var(--_leading-video-width);
361
+ border-radius: var(--_leading-video-shape);
362
+ margin-inline-start: var(--_leading-video-leading-space);
369
363
  // Min height is three-line height
370
- padding-block: calc(
371
- (
372
- var(--_list-item-three-line-container-height) -
373
- var(--_list-item-small-leading-video-height)
374
- ) / 2
364
+ margin-block: calc(
365
+ (var(--_three-line-container-height) - var(--_small-leading-video-height)) /
366
+ 2
375
367
  );
376
368
 
377
369
  // Let it auto-layout so that we don't mess with the icons and supporting
378
370
  // text that is supposed to be top-aligned in three-line.
379
371
  .with-three-line & {
380
- padding-block: 0;
372
+ margin-block: 0;
381
373
  }
382
374
  }
383
375
 
384
376
  ::slotted([data-variant='video-large']) {
385
377
  // Min height is three-line height
386
- padding-block: calc(
387
- (
388
- var(--_list-item-three-line-container-height) -
389
- var(--_list-item-large-leading-video-height)
390
- ) / 2
378
+ margin-block: calc(
379
+ (var(--_three-line-container-height) - var(--_large-leading-video-height)) /
380
+ 2
391
381
  );
392
- height: var(--_list-item-large-leading-video-height);
382
+ height: var(--_large-leading-video-height);
393
383
  }
394
384
  }
package/list/internal/listitem/forced-colors-styles.css.js CHANGED
@@ -4,6 +4,6 @@
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
6
  import { css } from 'lit';
7
- export const styles = css `@media(forced-colors: active){:host{--md-list-item-list-item-disabled-label-text-color: GrayText;--md-list-item-list-item-disabled-label-text-opacity: 1;--md-list-item-list-item-disabled-leading-icon-color: GrayText;--md-list-item-list-item-disabled-leading-icon-opacity: 1;--md-list-item-list-item-disabled-trailing-icon-color: GrayText;--md-list-item-list-item-disabled-trailing-icon-opacity: 1}}/*# sourceMappingURL=forced-colors-styles.css.map */
7
+ export const styles = css `@media(forced-colors: active){:host{--md-list-item-disabled-label-text-color: GrayText;--md-list-item-disabled-label-text-opacity: 1;--md-list-item-disabled-leading-icon-color: GrayText;--md-list-item-disabled-leading-icon-opacity: 1;--md-list-item-disabled-trailing-icon-color: GrayText;--md-list-item-disabled-trailing-icon-opacity: 1}}/*# sourceMappingURL=forced-colors-styles.css.map */
8
8
  `;
9
9
  //# sourceMappingURL=forced-colors-styles.css.js.map
package/list/internal/listitem/forced-colors-styles.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"forced-colors-styles.css.js","sourceRoot":"","sources":["forced-colors-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`@media(forced-colors: active){:host{--md-list-item-list-item-disabled-label-text-color: GrayText;--md-list-item-list-item-disabled-label-text-opacity: 1;--md-list-item-list-item-disabled-leading-icon-color: GrayText;--md-list-item-list-item-disabled-leading-icon-opacity: 1;--md-list-item-list-item-disabled-trailing-icon-color: GrayText;--md-list-item-list-item-disabled-trailing-icon-opacity: 1}}/*# sourceMappingURL=forced-colors-styles.css.map */\n`;\n "]}
1
+ {"version":3,"file":"forced-colors-styles.css.js","sourceRoot":"","sources":["forced-colors-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`@media(forced-colors: active){:host{--md-list-item-disabled-label-text-color: GrayText;--md-list-item-disabled-label-text-opacity: 1;--md-list-item-disabled-leading-icon-color: GrayText;--md-list-item-disabled-leading-icon-opacity: 1;--md-list-item-disabled-trailing-icon-color: GrayText;--md-list-item-disabled-trailing-icon-opacity: 1}}/*# sourceMappingURL=forced-colors-styles.css.map */\n`;\n "]}
package/list/internal/listitem/forced-colors-styles.scss CHANGED
@@ -11,12 +11,12 @@
11
11
  :host {
12
12
  @include list-item.theme(
13
13
  (
14
- list-item-disabled-label-text-color: GrayText,
15
- list-item-disabled-label-text-opacity: 1,
16
- list-item-disabled-leading-icon-color: GrayText,
17
- list-item-disabled-leading-icon-opacity: 1,
18
- list-item-disabled-trailing-icon-color: GrayText,
19
- list-item-disabled-trailing-icon-opacity: 1,
14
+ disabled-label-text-color: GrayText,
15
+ disabled-label-text-opacity: 1,
16
+ disabled-leading-icon-color: GrayText,
17
+ disabled-leading-icon-opacity: 1,
18
+ disabled-trailing-icon-color: GrayText,
19
+ disabled-trailing-icon-opacity: 1,
20
20
  )
21
21
  );
22
22
  }
package/list/internal/listitem/list-item-styles.css.js CHANGED
@@ -4,6 +4,6 @@
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
6
  import { css } from 'lit';
7
- export const styles = css `:host{--_list-item-container-color: var(--md-list-item-list-item-container-color, var(--md-sys-color-surface, #fef7ff));--_list-item-container-shape: var(--md-list-item-list-item-container-shape, 0px);--_list-item-disabled-label-text-color: var(--md-list-item-list-item-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-disabled-label-text-opacity: var(--md-list-item-list-item-disabled-label-text-opacity, 0.3);--_list-item-disabled-leading-icon-color: var(--md-list-item-list-item-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-disabled-leading-icon-opacity: var(--md-list-item-list-item-disabled-leading-icon-opacity, 0.38);--_list-item-disabled-trailing-icon-color: var(--md-list-item-list-item-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-disabled-trailing-icon-opacity: var(--md-list-item-list-item-disabled-trailing-icon-opacity, 0.38);--_list-item-focus-label-text-color: var(--md-list-item-list-item-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-focus-leading-icon-icon-color: var(--md-list-item-list-item-focus-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-focus-trailing-icon-icon-color: var(--md-list-item-list-item-focus-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-hover-label-text-color: var(--md-list-item-list-item-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-hover-leading-icon-icon-color: var(--md-list-item-list-item-hover-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-hover-state-layer-color: var(--md-list-item-list-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-hover-state-layer-opacity: var(--md-list-item-list-item-hover-state-layer-opacity, 0.08);--_list-item-hover-trailing-icon-icon-color: var(--md-list-item-list-item-hover-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-label-text-color: var(--md-list-item-list-item-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-label-text-line-height: var(--md-list-item-list-item-label-text-line-height, 1.5rem);--_list-item-label-text-type: var(--md-list-item-list-item-label-text-type, var(--md-sys-typescale-body-large, 400 1rem / 1.5rem var(--md-ref-typeface-plain, Roboto)));--_list-item-large-leading-video-height: var(--md-list-item-list-item-large-leading-video-height, 69px);--_list-item-leading-avatar-label-color: var(--md-list-item-list-item-leading-avatar-label-color, var(--md-sys-color-on-primary-container, #21005d));--_list-item-leading-avatar-label-type: var(--md-list-item-list-item-leading-avatar-label-type, var(--md-sys-typescale-title-medium, 500 1rem / 1.5rem var(--md-ref-typeface-plain, Roboto)));--_list-item-leading-avatar-color: var(--md-list-item-list-item-leading-avatar-color, var(--md-sys-color-primary-container, #eaddff));--_list-item-leading-avatar-shape: var(--md-list-item-list-item-leading-avatar-shape, 9999px);--_list-item-leading-avatar-size: var(--md-list-item-list-item-leading-avatar-size, 40px);--_list-item-leading-icon-color: var(--md-list-item-list-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-leading-icon-size: var(--md-list-item-list-item-leading-icon-size, 18px);--_list-item-leading-image-height: var(--md-list-item-list-item-leading-image-height, 56px);--_list-item-leading-image-shape: var(--md-list-item-list-item-leading-image-shape, 0px);--_list-item-leading-image-width: var(--md-list-item-list-item-leading-image-width, 56px);--_list-item-leading-video-shape: var(--md-list-item-list-item-leading-video-shape, 0px);--_list-item-leading-video-width: var(--md-list-item-list-item-leading-video-width, 100px);--_list-item-one-line-container-height: var(--md-list-item-list-item-one-line-container-height, 56px);--_list-item-pressed-label-text-color: var(--md-list-item-list-item-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-pressed-leading-icon-icon-color: var(--md-list-item-list-item-pressed-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-pressed-state-layer-color: var(--md-list-item-list-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-pressed-state-layer-opacity: var(--md-list-item-list-item-pressed-state-layer-opacity, 0.12);--_list-item-pressed-trailing-icon-icon-color: var(--md-list-item-list-item-pressed-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-small-leading-video-height: var(--md-list-item-list-item-small-leading-video-height, 56px);--_list-item-supporting-text-color: var(--md-list-item-list-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-supporting-text-type: var(--md-list-item-list-item-supporting-text-type, var(--md-sys-typescale-body-medium, 400 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_list-item-three-line-container-height: var(--md-list-item-list-item-three-line-container-height, 88px);--_list-item-trailing-icon-color: var(--md-list-item-list-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-trailing-icon-size: var(--md-list-item-list-item-trailing-icon-size, 24px);--_list-item-trailing-supporting-text-color: var(--md-list-item-list-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-trailing-supporting-text-line-height: var(--md-list-item-list-item-trailing-supporting-text-line-height, 1rem);--_list-item-trailing-supporting-text-type: var(--md-list-item-list-item-trailing-supporting-text-type, var(--md-sys-typescale-label-small, 500 0.688rem / 1rem var(--md-ref-typeface-plain, Roboto)));--_list-item-two-line-container-height: var(--md-list-item-list-item-two-line-container-height, 72px);--_list-item-leading-element-leading-space: var(--md-list-item-list-item-leading-element-leading-space, 16px);--_list-item-leading-space: var(--md-list-item-list-item-leading-space, 16px);--_list-item-leading-video-leading-space: var(--md-list-item-list-item-leading-video-leading-space, 0px);--_list-item-trailing-element-headline-trailing-element-space: var(--md-list-item-list-item-trailing-element-headline-trailing-element-space, 16px);--_list-item-trailing-space: var(--md-list-item-list-item-trailing-space, 24px)}:host{color:unset;--md-ripple-hover-color: var(--_list-item-hover-state-layer-color);--md-ripple-hover-opacity: var(--_list-item-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_list-item-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_list-item-pressed-state-layer-opacity)}md-focus-ring{--md-focus-ring-shape: 8px}.list-item{align-items:center;box-sizing:border-box;display:flex;outline:none;position:relative;width:100%;text-decoration:none;background-color:var(--_list-item-container-color);border-radius:var(--_list-item-container-shape);-webkit-tap-highlight-color:rgba(0,0,0,0)}.list-item:not(.disabled):not(.noninteractive){cursor:pointer}.list-item.disabled{pointer-events:none}.content-wrapper{display:flex;width:100%;box-sizing:border-box;border-radius:inherit;padding-inline-end:var(--_list-item-trailing-space)}md-ripple{border-radius:inherit}.with-one-line{min-height:var(--_list-item-one-line-container-height)}.with-two-line{min-height:var(--_list-item-two-line-container-height)}.with-three-line{min-height:var(--_list-item-three-line-container-height)}.start{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;flex:0 0 auto;z-index:1}.with-three-line .start{justify-content:start}slot[name=start]::slotted([data-variant=icon]),slot[name=start]::slotted([data-variant=image]),slot[name=start]::slotted([data-variant=avatar]){margin-inline-start:var(--_list-item-leading-element-leading-space)}.body{display:inline-flex;justify-content:center;flex-direction:column;box-sizing:border-box;flex:1 0 0;padding-inline-start:var(--_list-item-leading-space);z-index:1}.end{display:inline-flex;flex-direction:column;justify-content:center;flex:0 0 auto;z-index:1}.with-three-line .end{justify-content:start}slot[name=end]::slotted(*),.trailing-supporting-text{margin-inline-start:var(--_list-item-trailing-element-headline-trailing-element-space)}.label-text{display:flex;text-overflow:ellipsis;overflow-x:hidden;white-space:nowrap;color:var(--_list-item-label-text-color);font:var(--_list-item-label-text-type)}:hover .label-text{color:var(--_list-item-hover-label-text-color)}:focus .label-text{color:var(--_list-item-focus-label-text-color)}:active .label-text{color:var(--_list-item-pressed-label-text-color)}.disabled .label-text{color:var(--_list-item-disabled-label-text-color);opacity:var(--_list-item-disabled-label-text-opacity)}.supporting-text{text-overflow:ellipsis;white-space:normal;overflow:hidden;width:100%;color:var(--_list-item-supporting-text-color);font:var(--_list-item-supporting-text-type);-webkit-box-orient:vertical;-webkit-line-clamp:1;display:-webkit-box}.disabled .supporting-text{color:var(--_list-item-disabled-label-text-color);opacity:var(--_list-item-disabled-label-text-opacity)}.supporting-text--multi-line{-webkit-line-clamp:2}.trailing-supporting-text{padding-inline-start:16px;font:var(--_list-item-trailing-supporting-text-type)}.list-item:not(.disabled) .trailing-supporting-text{color:var(--_list-item-trailing-supporting-text-color)}.disabled .trailing-supporting-text{color:var(--_list-item-disabled-label-text-color);opacity:var(--_list-item-disabled-label-text-opacity)}.with-three-line .trailing-supporting-text{padding-block-start:calc((var(--_list-item-label-text-line-height) - var(--_list-item-trailing-supporting-text-line-height))/2)}.focus-ring{z-index:1}::slotted([data-variant=image]){display:inline-flex;height:var(--_list-item-leading-image-height);width:var(--_list-item-leading-image-width);border-radius:var(--_list-item-leading-image-shape);padding-block:calc((var(--_list-item-two-line-container-height) - var(--_list-item-leading-image-height))/2)}.with-three-line ::slotted([data-variant=image]){padding-block:0}::slotted(*){fill:currentColor}slot[name=start]::slotted([data-variant=icon]){font-size:var(--_list-item-leading-icon-size);width:var(--_list-item-leading-icon-size);height:var(--_list-item-leading-icon-size);color:var(--_list-item-leading-icon-color)}.with-three-line slot[name=start]::slotted([data-variant=icon]){padding-block-start:calc((var(--_list-item-label-text-line-height) - var(--_list-item-leading-icon-size))/2)}slot[name=end]::slotted([data-variant=icon]){font-size:var(--_list-item-trailing-icon-size);width:var(--_list-item-trailing-icon-size);height:var(--_list-item-trailing-icon-size);color:var(--_list-item-trailing-icon-color)}.with-three-line slot[name=end]::slotted([data-variant=icon]){padding-block-start:calc((var(--_list-item-label-text-line-height) - var(--_list-item-trailing-icon-size))/2)}:hover slot[name=start]::slotted([data-variant=icon]){color:var(--_list-item-hover-leading-icon-icon-color)}:hover slot[name=end]::slotted([data-variant=icon]){color:var(--_list-item-hover-trailing-icon-icon-color)}:focus slot[name=start]::slotted([data-variant=icon]){color:var(--_list-item-focus-leading-icon-icon-color)}:focus slot[name=end]::slotted([data-variant=icon]){color:var(--_list-item-focus-trailing-icon-icon-color)}:active slot[name=start]::slotted([data-variant=icon]){color:var(--_list-item-pressed-leading-icon-icon-color)}:active slot[name=end]::slotted([data-variant=icon]){color:var(--_list-item-pressed-trailing-icon-icon-color)}.disabled slot[name=start]::slotted([data-variant=icon]){opacity:var(--_list-item-disabled-leading-icon-opacity);color:var(--_list-item-disabled-leading-icon-color)}.disabled slot[name=end]::slotted([data-variant=icon]){opacity:var(--_list-item-disabled-trailing-icon-opacity);color:var(--_list-item-disabled-trailing-icon-color)}::slotted([data-variant=avatar]){display:inline-flex;justify-content:center;align-items:center;background-color:var(--_list-item-leading-avatar-color);height:var(--_list-item-leading-avatar-size);width:var(--_list-item-leading-avatar-size);border-radius:var(--_list-item-leading-avatar-shape);color:var(--_list-item-leading-avatar-label-color);font:var(--_list-item-leading-avatar-label-type)}::slotted([data-variant=video]),::slotted([data-variant=video-large]){display:inline-flex;object-fit:cover;height:var(--_list-item-small-leading-video-height);width:var(--_list-item-leading-video-width);border-radius:var(--_list-item-leading-video-shape);margin-inline-start:var(--_list-item-leading-video-leading-space);padding-block:calc((var(--_list-item-three-line-container-height) - var(--_list-item-small-leading-video-height))/2)}.with-three-line ::slotted([data-variant=video]),.with-three-line ::slotted([data-variant=video-large]){padding-block:0}::slotted([data-variant=video-large]){padding-block:calc((var(--_list-item-three-line-container-height) - var(--_list-item-large-leading-video-height))/2);height:var(--_list-item-large-leading-video-height)}/*# sourceMappingURL=list-item-styles.css.map */
7
+ export const styles = css `:host{--_container-color: var(--md-list-item-container-color, var(--md-sys-color-surface, #fef7ff));--_container-shape: var(--md-list-item-container-shape, 0px);--_disabled-label-text-color: var(--md-list-item-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-list-item-disabled-label-text-opacity, 0.3);--_disabled-leading-icon-color: var(--md-list-item-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-list-item-disabled-leading-icon-opacity, 0.38);--_disabled-trailing-icon-color: var(--md-list-item-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-list-item-disabled-trailing-icon-opacity, 0.38);--_focus-label-text-color: var(--md-list-item-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-leading-icon-icon-color: var(--md-list-item-focus-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-icon-icon-color: var(--md-list-item-focus-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-label-text-color: var(--md-list-item-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-leading-icon-icon-color: var(--md-list-item-hover-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-list-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-list-item-hover-state-layer-opacity, 0.08);--_hover-trailing-icon-icon-color: var(--md-list-item-hover-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-color: var(--md-list-item-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-line-height: var(--md-list-item-label-text-line-height, 1.5rem);--_label-text-type: var(--md-list-item-label-text-type, var(--md-sys-typescale-body-large, 400 1rem / 1.5rem var(--md-ref-typeface-plain, Roboto)));--_large-leading-video-height: var(--md-list-item-large-leading-video-height, 69px);--_leading-avatar-label-color: var(--md-list-item-leading-avatar-label-color, var(--md-sys-color-on-primary-container, #21005d));--_leading-avatar-label-type: var(--md-list-item-leading-avatar-label-type, var(--md-sys-typescale-title-medium, 500 1rem / 1.5rem var(--md-ref-typeface-plain, Roboto)));--_leading-avatar-color: var(--md-list-item-leading-avatar-color, var(--md-sys-color-primary-container, #eaddff));--_leading-avatar-shape: var(--md-list-item-leading-avatar-shape, 9999px);--_leading-avatar-size: var(--md-list-item-leading-avatar-size, 40px);--_leading-icon-color: var(--md-list-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-icon-size: var(--md-list-item-leading-icon-size, 18px);--_leading-image-height: var(--md-list-item-leading-image-height, 56px);--_leading-image-shape: var(--md-list-item-leading-image-shape, 0px);--_leading-image-width: var(--md-list-item-leading-image-width, 56px);--_leading-video-shape: var(--md-list-item-leading-video-shape, 0px);--_leading-video-width: var(--md-list-item-leading-video-width, 100px);--_one-line-container-height: var(--md-list-item-one-line-container-height, 56px);--_pressed-label-text-color: var(--md-list-item-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-leading-icon-icon-color: var(--md-list-item-pressed-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-list-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-opacity: var(--md-list-item-pressed-state-layer-opacity, 0.12);--_pressed-trailing-icon-icon-color: var(--md-list-item-pressed-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_small-leading-video-height: var(--md-list-item-small-leading-video-height, 56px);--_supporting-text-color: var(--md-list-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-type: var(--md-list-item-supporting-text-type, var(--md-sys-typescale-body-medium, 400 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_three-line-container-height: var(--md-list-item-three-line-container-height, 88px);--_trailing-icon-color: var(--md-list-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-size: var(--md-list-item-trailing-icon-size, 24px);--_trailing-supporting-text-color: var(--md-list-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-supporting-text-line-height: var(--md-list-item-trailing-supporting-text-line-height, 1rem);--_trailing-supporting-text-type: var(--md-list-item-trailing-supporting-text-type, var(--md-sys-typescale-label-small, 500 0.688rem / 1rem var(--md-ref-typeface-plain, Roboto)));--_two-line-container-height: var(--md-list-item-two-line-container-height, 72px);--_leading-element-leading-space: var(--md-list-item-leading-element-leading-space, 16px);--_leading-space: var(--md-list-item-leading-space, 16px);--_leading-video-leading-space: var(--md-list-item-leading-video-leading-space, 0px);--_trailing-element-headline-trailing-element-space: var(--md-list-item-trailing-element-headline-trailing-element-space, 16px);--_trailing-space: var(--md-list-item-trailing-space, 24px)}:host{color:unset;--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}md-focus-ring{--md-focus-ring-shape: 8px}.list-item{align-items:center;box-sizing:border-box;display:flex;outline:none;position:relative;width:100%;text-decoration:none;background-color:var(--_container-color);border-radius:var(--_container-shape);-webkit-tap-highlight-color:rgba(0,0,0,0)}.list-item:not(.disabled):not(.noninteractive){cursor:pointer}.list-item.disabled{pointer-events:none}.content-wrapper{display:flex;width:100%;box-sizing:border-box;border-radius:inherit;padding-inline-end:var(--_trailing-space)}md-ripple{border-radius:inherit}.with-one-line{min-height:var(--_one-line-container-height)}.with-two-line{min-height:var(--_two-line-container-height)}.with-three-line{min-height:var(--_three-line-container-height)}.start{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;flex:0 0 auto;z-index:1}.with-three-line .start{justify-content:start}slot[name=start]::slotted([data-variant=icon]),slot[name=start]::slotted([data-variant=image]),slot[name=start]::slotted([data-variant=avatar]){margin-inline-start:var(--_leading-element-leading-space)}.body{display:inline-flex;justify-content:center;flex-direction:column;box-sizing:border-box;flex:1 0 0;padding-inline-start:var(--_leading-space);z-index:1}.end{display:inline-flex;flex-direction:column;justify-content:center;flex:0 0 auto;z-index:1}.with-three-line .end{justify-content:start}slot[name=end]::slotted(*),.trailing-supporting-text{margin-inline-start:var(--_trailing-element-headline-trailing-element-space)}.label-text{display:flex;text-overflow:ellipsis;overflow-x:hidden;white-space:nowrap;color:var(--_label-text-color);font:var(--_label-text-type)}:hover .label-text{color:var(--_hover-label-text-color)}:focus .label-text{color:var(--_focus-label-text-color)}:active .label-text{color:var(--_pressed-label-text-color)}.disabled .label-text{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.supporting-text{text-overflow:ellipsis;white-space:normal;overflow:hidden;width:100%;color:var(--_supporting-text-color);font:var(--_supporting-text-type);-webkit-box-orient:vertical;-webkit-line-clamp:1;display:-webkit-box}.disabled .supporting-text{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.supporting-text--multi-line{-webkit-line-clamp:2}.trailing-supporting-text{font:var(--_trailing-supporting-text-type)}.list-item:not(.disabled) .trailing-supporting-text{color:var(--_trailing-supporting-text-color)}.disabled .trailing-supporting-text{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.with-three-line .trailing-supporting-text{margin-block-start:calc((var(--_label-text-line-height) - var(--_trailing-supporting-text-line-height))/2)}.focus-ring{z-index:1}::slotted([data-variant=image]){display:inline-flex;height:var(--_leading-image-height);width:var(--_leading-image-width);border-radius:var(--_leading-image-shape);margin-block:calc((var(--_two-line-container-height) - var(--_leading-image-height))/2)}.with-three-line ::slotted([data-variant=image]){margin-block:0}::slotted(*){fill:currentColor}slot[name=start]::slotted([data-variant=icon]){font-size:var(--_leading-icon-size);width:var(--_leading-icon-size);height:var(--_leading-icon-size);color:var(--_leading-icon-color)}.with-three-line slot[name=start]::slotted([data-variant=icon]){margin-block-start:calc((var(--_label-text-line-height) - var(--_leading-icon-size))/2)}slot[name=end]::slotted([data-variant=icon]){font-size:var(--_trailing-icon-size);width:var(--_trailing-icon-size);height:var(--_trailing-icon-size);color:var(--_trailing-icon-color)}.with-three-line slot[name=end]::slotted([data-variant=icon]){margin-block-start:calc((var(--_label-text-line-height) - var(--_trailing-icon-size))/2)}:hover slot[name=start]::slotted([data-variant=icon]){color:var(--_hover-leading-icon-icon-color)}:hover slot[name=end]::slotted([data-variant=icon]){color:var(--_hover-trailing-icon-icon-color)}:focus slot[name=start]::slotted([data-variant=icon]){color:var(--_focus-leading-icon-icon-color)}:focus slot[name=end]::slotted([data-variant=icon]){color:var(--_focus-trailing-icon-icon-color)}:active slot[name=start]::slotted([data-variant=icon]){color:var(--_pressed-leading-icon-icon-color)}:active slot[name=end]::slotted([data-variant=icon]){color:var(--_pressed-trailing-icon-icon-color)}.disabled slot[name=start]::slotted([data-variant=icon]){opacity:var(--_disabled-leading-icon-opacity);color:var(--_disabled-leading-icon-color)}.disabled slot[name=end]::slotted([data-variant=icon]){opacity:var(--_disabled-trailing-icon-opacity);color:var(--_disabled-trailing-icon-color)}::slotted([data-variant=avatar]){display:inline-flex;justify-content:center;align-items:center;background-color:var(--_leading-avatar-color);height:var(--_leading-avatar-size);width:var(--_leading-avatar-size);border-radius:var(--_leading-avatar-shape);color:var(--_leading-avatar-label-color);font:var(--_leading-avatar-label-type)}::slotted([data-variant=video]),::slotted([data-variant=video-large]){display:inline-flex;object-fit:cover;height:var(--_small-leading-video-height);width:var(--_leading-video-width);border-radius:var(--_leading-video-shape);margin-inline-start:var(--_leading-video-leading-space);margin-block:calc((var(--_three-line-container-height) - var(--_small-leading-video-height))/2)}.with-three-line ::slotted([data-variant=video]),.with-three-line ::slotted([data-variant=video-large]){margin-block:0}::slotted([data-variant=video-large]){margin-block:calc((var(--_three-line-container-height) - var(--_large-leading-video-height))/2);height:var(--_large-leading-video-height)}/*# sourceMappingURL=list-item-styles.css.map */
8
8
  `;
9
9
  //# sourceMappingURL=list-item-styles.css.js.map