@material/web 2.4.2-nightly.fd6fe2a.0 → 2.5.1-nightly.12ec888.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (225) hide show
  1. package/custom-elements.json +7000 -6991
  2. package/labs/aria/query-associated.d.ts +23 -0
  3. package/labs/aria/query-associated.js +36 -0
  4. package/labs/aria/query-associated.js.map +1 -0
  5. package/labs/aria/tabs/md-aria-tab.d.ts +11 -0
  6. package/labs/aria/tabs/md-aria-tab.js +8 -0
  7. package/labs/aria/tabs/md-aria-tab.js.map +1 -0
  8. package/labs/aria/tabs/md-aria-tablist.d.ts +11 -0
  9. package/labs/aria/tabs/md-aria-tablist.js +8 -0
  10. package/labs/aria/tabs/md-aria-tablist.js.map +1 -0
  11. package/labs/aria/tabs/md-aria-tabpanel.d.ts +11 -0
  12. package/labs/aria/tabs/md-aria-tabpanel.js +8 -0
  13. package/labs/aria/tabs/md-aria-tabpanel.js.map +1 -0
  14. package/labs/aria/tabs/tab.d.ts +33 -0
  15. package/labs/aria/tabs/tab.js +88 -0
  16. package/labs/aria/tabs/tab.js.map +1 -0
  17. package/labs/aria/tabs/tablist.d.ts +67 -0
  18. package/labs/aria/tabs/tablist.js +271 -0
  19. package/labs/aria/tabs/tablist.js.map +1 -0
  20. package/labs/aria/tabs/tabpanel.d.ts +26 -0
  21. package/labs/aria/tabs/tabpanel.js +53 -0
  22. package/labs/aria/tabs/tabpanel.js.map +1 -0
  23. package/labs/gb/components/appbar/_app-bar-tokens.scss +136 -0
  24. package/labs/gb/components/appbar/app-bar-element.d.ts +53 -0
  25. package/labs/gb/components/appbar/app-bar-element.js +144 -0
  26. package/labs/gb/components/appbar/app-bar-element.js.map +1 -0
  27. package/labs/gb/components/appbar/app-bar.css +4 -0
  28. package/labs/gb/components/appbar/app-bar.css.map +1 -0
  29. package/labs/gb/components/appbar/app-bar.cssresult.d.ts +3 -0
  30. package/labs/gb/components/appbar/app-bar.cssresult.js +14 -0
  31. package/labs/gb/components/appbar/app-bar.cssresult.js.map +1 -0
  32. package/labs/gb/components/appbar/app-bar.d.ts +71 -0
  33. package/labs/gb/components/appbar/app-bar.js +96 -0
  34. package/labs/gb/components/appbar/app-bar.js.map +1 -0
  35. package/labs/gb/components/appbar/app-bar.scss +167 -0
  36. package/labs/gb/components/appbar/md-gb-app-bar.d.ts +12 -0
  37. package/labs/gb/components/appbar/md-gb-app-bar.js +8 -0
  38. package/labs/gb/components/appbar/md-gb-app-bar.js.map +1 -0
  39. package/labs/gb/components/badge/_badge-tokens.scss +18 -0
  40. package/labs/gb/components/badge/badge-element.d.ts +15 -0
  41. package/labs/gb/components/badge/badge-element.js +49 -0
  42. package/labs/gb/components/badge/badge-element.js.map +1 -0
  43. package/labs/gb/components/badge/badge.css +4 -0
  44. package/labs/gb/components/badge/badge.css.map +1 -0
  45. package/labs/gb/components/badge/badge.cssresult.d.ts +3 -0
  46. package/labs/gb/components/badge/badge.cssresult.js +14 -0
  47. package/labs/gb/components/badge/badge.cssresult.js.map +1 -0
  48. package/labs/gb/components/badge/badge.d.ts +32 -0
  49. package/labs/gb/components/badge/badge.js +35 -0
  50. package/labs/gb/components/badge/badge.js.map +1 -0
  51. package/labs/gb/components/badge/badge.scss +49 -0
  52. package/labs/gb/components/badge/md-gb-badge.d.ts +12 -0
  53. package/labs/gb/components/badge/md-gb-badge.js +8 -0
  54. package/labs/gb/components/badge/md-gb-badge.js.map +1 -0
  55. package/labs/gb/components/button/_button-tokens.scss +6 -0
  56. package/labs/gb/components/button/{md-button.d.ts → button-element.d.ts} +23 -7
  57. package/labs/gb/components/button/{md-button.js → button-element.js} +39 -20
  58. package/labs/gb/components/button/button-element.js.map +1 -0
  59. package/labs/gb/components/button/button.css +1 -1
  60. package/labs/gb/components/button/button.css.map +1 -1
  61. package/labs/gb/components/button/button.cssresult.js +1 -1
  62. package/labs/gb/components/button/button.cssresult.js.map +1 -1
  63. package/labs/gb/components/button/button.scss +1 -0
  64. package/labs/gb/components/button/md-gb-button.d.ts +12 -0
  65. package/labs/gb/components/button/md-gb-button.js +8 -0
  66. package/labs/gb/components/button/md-gb-button.js.map +1 -0
  67. package/labs/gb/components/card/_card-tokens.scss +2 -0
  68. package/labs/gb/components/card/{md-card.d.ts → card-element.d.ts} +12 -7
  69. package/labs/gb/components/card/{md-card.js → card-element.js} +21 -14
  70. package/labs/gb/components/card/card-element.js.map +1 -0
  71. package/labs/gb/components/card/card.css.map +1 -1
  72. package/labs/gb/components/card/md-gb-card.d.ts +12 -0
  73. package/labs/gb/components/card/md-gb-card.js +8 -0
  74. package/labs/gb/components/card/md-gb-card.js.map +1 -0
  75. package/labs/gb/components/checkbox/_checkbox-tokens.scss +2 -0
  76. package/labs/gb/components/checkbox/{md-checkbox.d.ts → checkbox-element.d.ts} +15 -7
  77. package/labs/gb/components/checkbox/{md-checkbox.js → checkbox-element.js} +26 -16
  78. package/labs/gb/components/checkbox/checkbox-element.js.map +1 -0
  79. package/labs/gb/components/checkbox/checkbox.css.map +1 -1
  80. package/labs/gb/components/checkbox/md-gb-checkbox.d.ts +12 -0
  81. package/labs/gb/components/checkbox/md-gb-checkbox.js +8 -0
  82. package/labs/gb/components/checkbox/md-gb-checkbox.js.map +1 -0
  83. package/labs/gb/components/chip/_chip-tokens.scss +167 -0
  84. package/labs/gb/components/chip/chip-element.d.ts +73 -0
  85. package/labs/gb/components/chip/chip-element.js +233 -0
  86. package/labs/gb/components/chip/chip-element.js.map +1 -0
  87. package/labs/gb/components/chip/chip.css +4 -0
  88. package/labs/gb/components/chip/chip.css.map +1 -0
  89. package/labs/gb/components/chip/chip.cssresult.d.ts +3 -0
  90. package/labs/gb/components/chip/chip.cssresult.js +14 -0
  91. package/labs/gb/components/chip/chip.cssresult.js.map +1 -0
  92. package/labs/gb/components/chip/chip.d.ts +77 -0
  93. package/labs/gb/components/chip/chip.js +99 -0
  94. package/labs/gb/components/chip/chip.js.map +1 -0
  95. package/labs/gb/components/chip/chip.scss +99 -0
  96. package/labs/gb/components/chip/md-gb-chip.d.ts +13 -0
  97. package/labs/gb/components/chip/md-gb-chip.js +9 -0
  98. package/labs/gb/components/chip/md-gb-chip.js.map +1 -0
  99. package/labs/gb/components/divider/_divider-tokens.scss +2 -0
  100. package/labs/gb/components/divider/{md-divider.d.ts → divider-element.d.ts} +5 -7
  101. package/labs/gb/components/divider/{md-divider.js → divider-element.js} +10 -10
  102. package/labs/gb/components/divider/divider-element.js.map +1 -0
  103. package/labs/gb/components/divider/divider.css.map +1 -1
  104. package/labs/gb/components/divider/md-gb-divider.d.ts +12 -0
  105. package/labs/gb/components/divider/md-gb-divider.js +8 -0
  106. package/labs/gb/components/divider/md-gb-divider.js.map +1 -0
  107. package/labs/gb/components/fab/_fab-tokens.scss +5 -0
  108. package/labs/gb/components/fab/fab-element.d.ts +32 -0
  109. package/labs/gb/components/fab/{md-fab.js → fab-element.js} +23 -11
  110. package/labs/gb/components/fab/fab-element.js.map +1 -0
  111. package/labs/gb/components/fab/fab.css +1 -1
  112. package/labs/gb/components/fab/fab.css.map +1 -1
  113. package/labs/gb/components/fab/fab.cssresult.js +1 -1
  114. package/labs/gb/components/fab/fab.cssresult.js.map +1 -1
  115. package/labs/gb/components/fab/fab.scss +1 -0
  116. package/labs/gb/components/fab/md-gb-fab.d.ts +12 -0
  117. package/labs/gb/components/fab/md-gb-fab.js +8 -0
  118. package/labs/gb/components/fab/md-gb-fab.js.map +1 -0
  119. package/labs/gb/components/iconbutton/_icon-button-tokens.scss +2 -0
  120. package/labs/gb/components/iconbutton/{md-icon-button.d.ts → icon-button-element.d.ts} +15 -7
  121. package/labs/gb/components/iconbutton/{md-icon-button.js → icon-button-element.js} +30 -20
  122. package/labs/gb/components/iconbutton/icon-button-element.js.map +1 -0
  123. package/labs/gb/components/iconbutton/icon-button.css.map +1 -1
  124. package/labs/gb/components/iconbutton/md-gb-icon-button.d.ts +12 -0
  125. package/labs/gb/components/iconbutton/md-gb-icon-button.js +8 -0
  126. package/labs/gb/components/iconbutton/md-gb-icon-button.js.map +1 -0
  127. package/labs/gb/components/list/_list-tokens.scss +13 -12
  128. package/labs/gb/components/list/{md-list.d.ts → list-element.d.ts} +6 -7
  129. package/labs/gb/components/list/{md-list.js → list-element.js} +11 -10
  130. package/labs/gb/components/list/list-element.js.map +1 -0
  131. package/labs/gb/components/list/list-item-element.d.ts +81 -0
  132. package/labs/gb/components/list/{md-list-item.js → list-item-element.js} +52 -13
  133. package/labs/gb/components/list/list-item-element.js.map +1 -0
  134. package/labs/gb/components/list/list.css +1 -1
  135. package/labs/gb/components/list/list.css.map +1 -1
  136. package/labs/gb/components/list/list.cssresult.js +1 -1
  137. package/labs/gb/components/list/list.cssresult.js.map +1 -1
  138. package/labs/gb/components/list/list.scss +5 -0
  139. package/labs/gb/components/list/md-gb-list-item.d.ts +12 -0
  140. package/labs/gb/components/list/md-gb-list-item.js +8 -0
  141. package/labs/gb/components/list/md-gb-list-item.js.map +1 -0
  142. package/labs/gb/components/list/md-gb-list.d.ts +12 -0
  143. package/labs/gb/components/list/md-gb-list.js +8 -0
  144. package/labs/gb/components/list/md-gb-list.js.map +1 -0
  145. package/labs/gb/components/menu/_menu-tokens.scss +47 -14
  146. package/labs/gb/components/menu/md-gb-menu-group.d.ts +12 -0
  147. package/labs/gb/components/menu/md-gb-menu-group.js +8 -0
  148. package/labs/gb/components/menu/md-gb-menu-group.js.map +1 -0
  149. package/labs/gb/components/menu/md-gb-menu-item.d.ts +12 -0
  150. package/labs/gb/components/menu/md-gb-menu-item.js +8 -0
  151. package/labs/gb/components/menu/md-gb-menu-item.js.map +1 -0
  152. package/labs/gb/components/menu/md-gb-menu.d.ts +12 -0
  153. package/labs/gb/components/menu/md-gb-menu.js +8 -0
  154. package/labs/gb/components/menu/md-gb-menu.js.map +1 -0
  155. package/labs/gb/components/menu/{md-menu.d.ts → menu-element.d.ts} +11 -7
  156. package/labs/gb/components/menu/{md-menu.js → menu-element.js} +16 -10
  157. package/labs/gb/components/menu/menu-element.js.map +1 -0
  158. package/labs/gb/components/menu/{md-menu-group.d.ts → menu-group-element.d.ts} +3 -6
  159. package/labs/gb/components/menu/{md-menu-group.js → menu-group-element.js} +11 -11
  160. package/labs/gb/components/menu/menu-group-element.js.map +1 -0
  161. package/labs/gb/components/menu/menu-item-element.d.ts +59 -0
  162. package/labs/gb/components/menu/{md-menu-item.js → menu-item-element.js} +44 -13
  163. package/labs/gb/components/menu/menu-item-element.js.map +1 -0
  164. package/labs/gb/components/menu/menu.css +1 -1
  165. package/labs/gb/components/menu/menu.css.map +1 -1
  166. package/labs/gb/components/menu/menu.cssresult.js +1 -1
  167. package/labs/gb/components/menu/menu.cssresult.js.map +1 -1
  168. package/labs/gb/components/menu/menu.js +1 -1
  169. package/labs/gb/components/menu/menu.js.map +1 -1
  170. package/labs/gb/components/menu/menu.scss +3 -0
  171. package/labs/gb/components/radio/_radio-tokens.scss +2 -0
  172. package/labs/gb/components/radio/md-gb-radio.d.ts +12 -0
  173. package/labs/gb/components/radio/md-gb-radio.js +8 -0
  174. package/labs/gb/components/radio/md-gb-radio.js.map +1 -0
  175. package/labs/gb/components/radio/{md-radio.d.ts → radio-element.d.ts} +10 -7
  176. package/labs/gb/components/radio/{md-radio.js → radio-element.js} +19 -14
  177. package/labs/gb/components/radio/radio-element.js.map +1 -0
  178. package/labs/gb/components/radio/radio.css.map +1 -1
  179. package/labs/gb/components/splitbutton/_split-button-tokens.scss +4 -0
  180. package/labs/gb/components/splitbutton/md-gb-split-button.d.ts +12 -0
  181. package/labs/gb/components/splitbutton/md-gb-split-button.js +8 -0
  182. package/labs/gb/components/splitbutton/md-gb-split-button.js.map +1 -0
  183. package/labs/gb/components/splitbutton/split-button-element.d.ts +33 -0
  184. package/labs/gb/components/splitbutton/{md-split-button.js → split-button-element.js} +21 -12
  185. package/labs/gb/components/splitbutton/split-button-element.js.map +1 -0
  186. package/labs/gb/components/splitbutton/split-button.css.map +1 -1
  187. package/labs/gb/components/splitbutton/split-button.d.ts +4 -4
  188. package/labs/gb/components/splitbutton/split-button.js +4 -4
  189. package/labs/gb/components/splitbutton/split-button.js.map +1 -1
  190. package/labs/gb/components/switch/_switch-tokens.scss +2 -0
  191. package/labs/gb/components/switch/md-gb-switch.d.ts +12 -0
  192. package/labs/gb/components/switch/md-gb-switch.js +8 -0
  193. package/labs/gb/components/switch/md-gb-switch.js.map +1 -0
  194. package/labs/gb/components/switch/{md-switch.d.ts → switch-element.d.ts} +19 -7
  195. package/labs/gb/components/switch/{md-switch.js → switch-element.js} +28 -14
  196. package/labs/gb/components/switch/switch-element.js.map +1 -0
  197. package/labs/gb/components/switch/switch.css.map +1 -1
  198. package/labs/gb/styles/adopt-styles.js +6 -1
  199. package/labs/gb/styles/adopt-styles.js.map +1 -1
  200. package/labs/gb/styles/icon/{md-icon.d.ts → icon-element.d.ts} +1 -7
  201. package/labs/gb/styles/icon/{md-icon.js → icon-element.js} +8 -10
  202. package/labs/gb/styles/icon/icon-element.js.map +1 -0
  203. package/labs/gb/styles/icon/md-gb-icon.d.ts +12 -0
  204. package/labs/gb/styles/icon/md-gb-icon.js +8 -0
  205. package/labs/gb/styles/icon/md-gb-icon.js.map +1 -0
  206. package/package.json +3 -3
  207. package/labs/gb/components/button/md-button.js.map +0 -1
  208. package/labs/gb/components/card/md-card.js.map +0 -1
  209. package/labs/gb/components/checkbox/md-checkbox.js.map +0 -1
  210. package/labs/gb/components/divider/md-divider.js.map +0 -1
  211. package/labs/gb/components/fab/md-fab.d.ts +0 -22
  212. package/labs/gb/components/fab/md-fab.js.map +0 -1
  213. package/labs/gb/components/iconbutton/md-icon-button.js.map +0 -1
  214. package/labs/gb/components/list/md-list-item.d.ts +0 -44
  215. package/labs/gb/components/list/md-list-item.js.map +0 -1
  216. package/labs/gb/components/list/md-list.js.map +0 -1
  217. package/labs/gb/components/menu/md-menu-group.js.map +0 -1
  218. package/labs/gb/components/menu/md-menu-item.d.ts +0 -30
  219. package/labs/gb/components/menu/md-menu-item.js.map +0 -1
  220. package/labs/gb/components/menu/md-menu.js.map +0 -1
  221. package/labs/gb/components/radio/md-radio.js.map +0 -1
  222. package/labs/gb/components/splitbutton/md-split-button.d.ts +0 -26
  223. package/labs/gb/components/splitbutton/md-split-button.js.map +0 -1
  224. package/labs/gb/components/switch/md-switch.js.map +0 -1
  225. package/labs/gb/styles/icon/md-icon.js.map +0 -1
@@ -0,0 +1 @@
1
+ {"version":3,"file":"list-item-element.js","sourceRoot":"","sources":["list-item-element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AACtE,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAC,kBAAkB,EAAC,MAAM,uCAAuC,CAAC;AACzE,OAAO,EACL,SAAS,EACT,qBAAqB,GACtB,MAAM,yCAAyC,CAAC;AACjD,OAAO,EAAC,UAAU,EAAC,MAAM,0BAA0B,CAAC;AAEpD,OAAO,eAAe,MAAM,yBAAyB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACxF,8FAA8F;AAC9F,OAAO,YAAY,MAAM,sBAAsB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAClF,wFAAwF;AACxF,OAAO,UAAU,MAAM,YAAY,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACtE,4EAA4E;AAE5E,OAAO,EAAC,QAAQ,EAAC,MAAM,WAAW,CAAC;AAEnC,wCAAwC;AACxC,MAAM,SAAS,GAAG,kBAAkB,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC,CAAC;AAExE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,MAAM,OAAO,eAAgB,SAAQ,SAAS;IA6B5C;QACE,KAAK,EAAE,CAAC;QAIV;;WAEG;QACwB,YAAO,GAAG,KAAK,CAAC;QAE3C;;WAEG;QACwB,aAAQ,GAAG,KAAK,CAAC;QAE5C;;WAEG;QAEH,mBAAc,GAAG,KAAK,CAAC;QAjBrB,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,GAAG,UAAU,CAAC;IACpC,CAAC;IAkBkB,MAAM;QACvB,MAAM,KAAK,GAAG;YACZ,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,cAAc;SAC5B,CAAC;QACF,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,OAAO,IAAI,CAAA,gCAAgC,QAAQ,CAAC,KAAK,CAAC;WACrD,IAAI,CAAC,aAAa,EAAE;QACvB,CAAC;QACL,CAAC;QAED,iCAAiC;QACjC,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,OAAO,IAAI,CAAA;;eAEA,QAAQ,CAAC,KAAK,CAAC;kBACZ,IAAI,CAAC,QAAQ;mBACZ,SAAS,IAAI,OAAO;QAC/B,IAAI,CAAC,aAAa,EAAE;cACd,CAAC;IACb,CAAC;IAEO,aAAa;QACnB,OAAO,IAAI,CAAA;;uDAEwC,UAAU,EAAE;+BACpC,UAAU,EAAE;;;;;;;;;;;YAW/B,UAAU,EAAE;gCACQ,UAAU,EAAE;;KAEvC,CAAC;IACJ,CAAC;;AA3FD,kBAAkB;AACF,iCAAiB,GAAG;IAClC,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHgC,CAG/B;AAEc,sBAAM,GAAwB;IAC5C,eAAe;IACf,YAAY;IACZ,UAAU;IACV,GAAG,CAAA;;;;;;;;;;;;;;;KAeF;CACF,AApBqB,CAoBpB;AAUyB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;gDAAiB;AAKhB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;iDAAkB;AAM5C;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAC,CAAC;uDACvC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {css, CSSResultOrNative, html, LitElement, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {ARIAMixinStrict} from '../../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../../internal/aria/delegate.js';\nimport {\n internals,\n mixinElementInternals,\n} from '../../../behaviors/element-internals.js';\nimport {hasSlotted} from '../shared/has-slotted.js';\n\nimport focusRingStyles from '../focus/focus-ring.css' with {type: 'css'}; // github-only\n// import {styles as focusRingStyles} from '../focus/focus-ring.cssresult.js'; // google3-only\nimport rippleStyles from '../ripple/ripple.css' with {type: 'css'}; // github-only\n// import {styles as rippleStyles} from '../ripple/ripple.cssresult.js'; // google3-only\nimport listStyles from './list.css' with {type: 'css'}; // github-only\n// import {styles as listStyles} from './list.cssresult.js'; // google3-only\n\nimport {listItem} from './list.js';\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(mixinElementInternals(LitElement));\n\n/**\n * A Material Design list item component.\n *\n * @slot - Used to display the item's primary label.\n * @slot avatar - Used to display a circular avatar before the item's content.\n * @slot leading - Used to display icons and content before the item's main content.\n * @slot overline - Used to display overline text above the main label.\n * @slot supporting-text - Used to display supporting text below the main label.\n * @slot trailing-text - Used to display metadata or text after the item's main content.\n * @slot trailing - Used to display icons and content after the item's main content.\n * @csspart list-item - The list item's root element.\n * @cssprop --container-height\n * @cssprop --container-color\n * @cssprop --container-shape\n * @cssprop --label-text-color\n * @cssprop --label-text\n * @cssprop --label-text-tracking\n * @cssprop --leading-space\n * @cssprop --trailing-space\n * @cssprop --between-space\n * @cssprop --top-space\n * @cssprop --bottom-space\n * @cssprop --avatar-size\n * @cssprop --avatar-shape\n * @cssprop --avatar-color\n * @cssprop --avatar-label\n * @cssprop --avatar-label-axes\n * @cssprop --avatar-label-tracking\n * @cssprop --avatar-label-color\n * @cssprop --leading-icon-color\n * @cssprop --leading-icon-size\n * @cssprop --trailing-icon-color\n * @cssprop --trailing-icon-size\n * @cssprop --overline\n * @cssprop --overline-axes\n * @cssprop --overline-tracking\n * @cssprop --overline-color\n * @cssprop --supporting-text\n * @cssprop --supporting-text-axes\n * @cssprop --supporting-text-tracking\n * @cssprop --supporting-text-color\n * @cssprop --trailing-supporting-text\n * @cssprop --trailing-supporting-text-axes\n * @cssprop --trailing-supporting-text-tracking\n * @cssprop --trailing-supporting-text-color\n */\nexport class ListItemElement extends baseClass {\n /** @nocollapse */\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n static override styles: CSSResultOrNative[] = [\n focusRingStyles,\n rippleStyles,\n listStyles,\n css`\n :host {\n display: flex;\n align-items: center;\n }\n .list-item {\n flex: 1;\n align-items: inherit;\n }\n :is(.list-item-leading, .list-item-trailing):not(:has(.has-slotted)) {\n display: none;\n }\n slot:not(.has-slotted) {\n display: contents;\n }\n `,\n ];\n\n constructor() {\n super();\n this[internals].role = 'listitem';\n }\n\n /**\n * Whether the list item is selected.\n */\n @property({type: Boolean}) checked = false;\n\n /**\n * Whether the list item is disabled.\n */\n @property({type: Boolean}) disabled = false;\n\n /**\n * Whether the list item is non-interactive.\n */\n @property({type: Boolean, reflect: true, attribute: 'static'})\n nonInteractive = false;\n\n protected override render() {\n const state = {\n checked: this.checked,\n disabled: this.disabled,\n static: this.nonInteractive,\n };\n if (this.nonInteractive) {\n return html`<div part=\"list-item\" class=\"${listItem(state)}\"\n >${this.renderContent()}</div\n >`;\n }\n\n // Needed for closure conformance\n const {ariaLabel} = this as ARIAMixinStrict;\n return html`<button\n part=\"list-item\"\n class=\"${listItem(state)}\"\n ?disabled=${this.disabled}\n aria-label=${ariaLabel || nothing}>\n ${this.renderContent()}\n </button>`;\n }\n\n private renderContent() {\n return html`\n <span class=\"list-item-leading\">\n <slot name=\"avatar\" class=\"list-item-avatar\" ${hasSlotted()}></slot>\n <slot name=\"leading\" ${hasSlotted()}></slot>\n </span>\n <span class=\"list-item-content\">\n <slot name=\"overline\" class=\"list-item-overline\"></slot>\n <slot></slot>\n <slot name=\"supporting-text\" class=\"list-item-supporting-text\"></slot>\n </span>\n <span class=\"list-item-trailing\">\n <slot\n name=\"trailing-text\"\n class=\"list-item-trailing-text\"\n ${hasSlotted()}></slot>\n <slot name=\"trailing\" ${hasSlotted()}></slot>\n </span>\n `;\n }\n}\n"]}
@@ -1,4 +1,4 @@
1
1
  /*!
2
2
  * Copyright 2026 Google LLC
3
3
  * SPDX-License-Identifier: Apache-2.0
4
- */@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.checkbox, md.comp.radio;@layer md.comp.list{.list{--container-shape: var(--md-sys-shape-corner-lg);--gap: 0}.list.list-segmented{--gap: 2px;--list-segmented: true}.list{display:flex;flex-direction:column;margin:unset;padding:unset;list-style:none;gap:var(--gap);border-radius:var(--container-shape)}.list>:first-child:not(slot),.list ::slotted(:first-child){border-start-start-radius:inherit;border-start-end-radius:inherit;--first-child: true}.list>:last-child:not(slot),.list ::slotted(:last-child){border-end-start-radius:inherit;border-end-end-radius:inherit;--last-child: true}.list slot{border-radius:inherit}.list-select,.list-select::picker(select){appearance:base-select}.list-select{border:none;background:none;height:fit-content}.list-item{--container-height: 56px;--container-color: transparent;--container-shape: var(--md-sys-shape-corner-xs);--label-text-color: var(--md-sys-color-on-surface);--label-text: var(--md-sys-typescale-body-lg);--label-text-tracking: var(--md-sys-typescale-body-lg-tracking);--leading-space: 16px;--trailing-space: 16px;--between-space: 12px;--top-space: 10px;--bottom-space: 10px;--avatar-size: 40px;--avatar-shape: var(--md-sys-shape-corner-full);--avatar-color: var(--md-sys-color-primary-container);--avatar-label: var(--md-sys-typescale-title-md);--avatar-label-tracking: var(--md-sys-typescale-title-md-tracking);--avatar-label-color: var(--md-sys-color-on-primary-container);--leading-icon-color: var(--md-sys-color-on-surface-variant);--leading-icon-size: 20px;--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-icon-size: 20px;--overline: var(--md-sys-typescale-label-sm);--overline-tracking: var(--md-sys-typescale-label-sm-tracking);--overline-color: var(--md-sys-color-on-surface-variant);--supporting-text: var(--md-sys-typescale-body-md);--supporting-text-tracking: var(--md-sys-typescale-body-md-tracking);--supporting-text-color: var(--md-sys-color-on-surface-variant);--trailing-supporting-text: var(--md-sys-typescale-label-sm);--trailing-supporting-text-tracking: var( --md-sys-typescale-label-sm-tracking );--trailing-supporting-text-color: var(--md-sys-color-on-surface-variant)}@container style(--list-segmented: true){.list-item{--container-color: var(--md-sys-color-surface)}}.list-item:where(:not(.list-item-static)):is(:hover,.hover){--container-shape: var(--md-sys-shape-corner-md);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:where(:not(.list-item-static)):is(:focus-within,.focus){--container-shape: var(--md-sys-shape-corner-lg);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:where(:not(.list-item-static)):is(:active,.active){--container-shape: var(--md-sys-shape-corner-lg);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:is(:checked,.checked){--container-shape: var(--md-sys-shape-corner-lg);--container-color: var(--md-sys-color-secondary-container);--label-text-color: var(--md-sys-color-on-secondary-container);--leading-icon-color: var(--md-sys-color-on-secondary-container);--trailing-icon-color: var(--md-sys-color-on-secondary-container);--overline-color: var(--md-sys-color-on-secondary-container);--supporting-text-color: var(--md-sys-color-on-secondary-container);--trailing-supporting-text-color: var( --md-sys-color-on-secondary-container )}.list-item:is(:disabled,.disabled){--container-shape: var(--md-sys-shape-corner-xs);--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 10%);--label-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--leading-icon-color: hsl( from var(--md-sys-color-on-surface) h s l / 38% );--trailing-icon-color: hsl( from var(--md-sys-color-on-surface) h s l / 38% );--overline-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--supporting-text-color: hsl( from var(--md-sys-color-on-surface) h s l / 38% );--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-surface) h s l / 38% )}.list-item{display:flex;align-items:center;gap:var(--between-space);box-sizing:border-box;min-height:var(--container-height);border-radius:var(--container-shape);background-color:var(--container-color);padding-inline:var(--leading-space) var(--trailing-space);padding-block:var(--top-space) var(--bottom-space);color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);appearance:none;border:none;text-align:unset;text-decoration:unset;width:stretch}@container style(--first-child: true){.list-item{border-start-start-radius:inherit;border-start-end-radius:inherit}}@container style(--last-child: true){.list-item{border-end-start-radius:inherit;border-end-end-radius:inherit}}.list-item:not(:disabled,.disabled,.list-item-static){cursor:pointer}.list-item .list-item-content{display:flex;flex-direction:column;flex:1}.list-item .list-item-leading,.list-item .list-item-trailing{display:flex;align-items:center;gap:8px;min-height:28px}.list-item .list-item-leading{--md-icon-color: var(--leading-icon-color);--md-icon-size: var(--leading-icon-size)}.list-item .list-item-trailing{--md-icon-color: var(--trailing-icon-color);--md-icon-size: var(--trailing-icon-size)}.list-item .list-item-overline{font:var(--overline);letter-spacing:var(--overline-tracking);color:var(--overline-color)}.list-item .list-item-supporting-text{font:var(--supporting-text);letter-spacing:var(--supporting-text-tracking);color:var(--supporting-text-color)}.list-item .list-item-trailing-text{font:var(--trailing-supporting-text);letter-spacing:var(--trailing-supporting-text-tracking);color:var(--trailing-supporting-text-color)}.list-item .list-item-avatar{display:grid;place-items:center;background-color:var(--avatar-color);border-radius:var(--avatar-shape);aspect-ratio:1;width:var(--avatar-size);font:var(--avatar-label);letter-spacing:var(--avatar-label-tracking);color:var(--avatar-label-color)}.list-item::checkmark{font:var(--leading-icon-size) var(--md-icon-font);color:var(--leading-icon-color);content:"check"}.list-item:has(.list-item-radio,.list-item-checkbox)::checkmark{display:none}.list-item .list-item-radio,.list-item .list-item-checkbox{width:min-content;height:min-content;--ripple: none;--focus-ring-outline: none}.list-item:is(:checked,.checked) .list-item-radio{--icon-color: var(--md-sys-color-primary);--state-layer-color: var(--md-sys-color-primary);--icon: "radio_button_checked"}.list-item:is(:checked,.checked) .list-item-checkbox{--outline-width: 0;--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}}/*# sourceMappingURL=list.css.map */
4
+ */@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.checkbox, md.comp.radio;@layer md.comp.list{.list{--container-shape: var(--md-sys-shape-corner-lg);--gap: 0}.list.list-segmented{--gap: 2px;--list-segmented: true}.list{display:flex;flex-direction:column;margin:unset;padding:unset;list-style:none;gap:var(--gap);border-radius:var(--container-shape)}.list>:first-child:not(slot),.list ::slotted(:first-child){border-start-start-radius:inherit;border-start-end-radius:inherit;--first-child: true}.list>:last-child:not(slot),.list ::slotted(:last-child){border-end-start-radius:inherit;border-end-end-radius:inherit;--last-child: true}.list slot{border-radius:inherit}.list-select,.list-select::picker(select){appearance:base-select}.list-select{border:none;background:none;height:fit-content}.list-item{--container-height: 56px;--container-color: transparent;--container-shape: var(--md-sys-shape-corner-xs);--label-text-color: var(--md-sys-color-on-surface);--label-text: var(--md-sys-typescale-body-lg);--label-text-axes: var(--md-sys-typescale-body-lg-axes);--label-text-tracking: var(--md-sys-typescale-body-lg-tracking);--leading-space: 16px;--trailing-space: 16px;--between-space: 12px;--top-space: 10px;--bottom-space: 10px;--avatar-size: 40px;--avatar-shape: var(--md-sys-shape-corner-full);--avatar-color: var(--md-sys-color-primary-container);--avatar-label: var(--md-sys-typescale-title-md);--avatar-label-axes: var(--md-sys-typescale-title-md-axes);--avatar-label-tracking: var(--md-sys-typescale-title-md-tracking);--avatar-label-color: var(--md-sys-color-on-primary-container);--leading-icon-color: var(--md-sys-color-on-surface-variant);--leading-icon-size: 20px;--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-icon-size: 20px;--overline: var(--md-sys-typescale-label-sm);--overline-axes: var(--md-sys-typescale-label-sm-axes);--overline-tracking: var(--md-sys-typescale-label-sm-tracking);--overline-color: var(--md-sys-color-on-surface-variant);--supporting-text: var(--md-sys-typescale-body-md);--supporting-text-axes: var(--md-sys-typescale-body-md-axes);--supporting-text-tracking: var(--md-sys-typescale-body-md-tracking);--supporting-text-color: var(--md-sys-color-on-surface-variant);--trailing-supporting-text: var(--md-sys-typescale-label-sm);--trailing-supporting-text-axes: var(--md-sys-typescale-label-sm-axes);--trailing-supporting-text-tracking: var( --md-sys-typescale-label-sm-tracking );--trailing-supporting-text-color: var(--md-sys-color-on-surface-variant)}@container style(--list-segmented: true){.list-item{--container-color: var(--md-sys-color-surface)}}.list-item:where(:not(.list-item-static)):is(:hover,.hover){--container-shape: var(--md-sys-shape-corner-md);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:where(:not(.list-item-static)):is(:focus-within,.focus){--container-shape: var(--md-sys-shape-corner-lg);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:where(:not(.list-item-static)):is(:active,.active){--container-shape: var(--md-sys-shape-corner-lg);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:is(:checked,.checked){--container-shape: var(--md-sys-shape-corner-lg);--container-color: var(--md-sys-color-secondary-container);--label-text-color: var(--md-sys-color-on-secondary-container);--leading-icon-color: var(--md-sys-color-on-secondary-container);--trailing-icon-color: var(--md-sys-color-on-secondary-container);--overline-color: var(--md-sys-color-on-secondary-container);--supporting-text-color: var(--md-sys-color-on-secondary-container);--trailing-supporting-text-color: var(--md-sys-color-on-secondary-container)}.list-item:is(:disabled,.disabled){--container-shape: var(--md-sys-shape-corner-xs);--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 10%);--label-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--leading-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--trailing-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--overline-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--supporting-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-surface) h s l / 38% )}.list-item{display:flex;align-items:center;gap:var(--between-space);box-sizing:border-box;min-height:var(--container-height);border-radius:var(--container-shape);background-color:var(--container-color);padding-inline:var(--leading-space) var(--trailing-space);padding-block:var(--top-space) var(--bottom-space);color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);font-variation-settings:var(--label-text-axes);appearance:none;border:none;text-align:unset;text-decoration:unset;width:stretch}@container style(--first-child: true){.list-item{border-start-start-radius:inherit;border-start-end-radius:inherit}}@container style(--last-child: true){.list-item{border-end-start-radius:inherit;border-end-end-radius:inherit}}.list-item:not(:disabled,.disabled,.list-item-static){cursor:pointer}.list-item .list-item-content{display:flex;flex-direction:column;flex:1}.list-item .list-item-leading,.list-item .list-item-trailing{display:flex;align-items:center;gap:8px;min-height:28px}.list-item .list-item-leading{--md-icon-color: var(--leading-icon-color);--md-icon-size: var(--leading-icon-size)}.list-item .list-item-trailing{--md-icon-color: var(--trailing-icon-color);--md-icon-size: var(--trailing-icon-size)}.list-item .list-item-overline{font:var(--overline);letter-spacing:var(--overline-tracking);font-variation-settings:var(--overline-axes);color:var(--overline-color)}.list-item .list-item-supporting-text{font:var(--supporting-text);letter-spacing:var(--supporting-text-tracking);font-variation-settings:var(--supporting-text-axes);color:var(--supporting-text-color)}.list-item .list-item-trailing-text{font:var(--trailing-supporting-text);letter-spacing:var(--trailing-supporting-text-tracking);font-variation-settings:var(--trailing-supporting-text-axes);color:var(--trailing-supporting-text-color)}.list-item .list-item-avatar{display:grid;place-items:center;background-color:var(--avatar-color);border-radius:var(--avatar-shape);aspect-ratio:1;width:var(--avatar-size);font:var(--avatar-label);letter-spacing:var(--avatar-label-tracking);font-variation-settings:var(--avatar-label-axes);color:var(--avatar-label-color)}.list-item::checkmark{font:var(--leading-icon-size) var(--md-icon-font);color:var(--leading-icon-color);content:"check"}.list-item:has(.list-item-radio,.list-item-checkbox)::checkmark{display:none}.list-item .list-item-radio,.list-item .list-item-checkbox{width:min-content;height:min-content;--ripple: none;--focus-ring-outline: none}.list-item:is(:checked,.checked) .list-item-radio{--icon-color: var(--md-sys-color-primary);--state-layer-color: var(--md-sys-color-primary);--icon: "radio_button_checked"}.list-item:is(:checked,.checked) .list-item-checkbox{--outline-width: 0;--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}}/*# sourceMappingURL=list.css.map */
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["list.scss","_list-tokens.scss","../radio/_radio-tokens.scss","../checkbox/_checkbox-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GAWA,mFACA,oBAEI,MCRF,iDACA,SDWE,qBCPF,WDSI,uBAGF,MACE,aACA,sBACA,aACA,cACA,gBACA,eACA,qCAGF,2DAEE,kCACA,gCACA,oBAGF,yDAEE,gCACA,8BACA,mBAGF,WACE,sBAKF,0CAIE,uBALJ,aAQE,YACA,gBACA,mBAIA,WCnDF,yBACA,+BACA,iDACA,mDACA,8CACA,gEACA,sBACA,uBACA,sBACA,kBACA,qBACA,oBACA,gDACA,sDACA,iDACA,mEACA,+DACA,6DACA,0BACA,8DACA,2BACA,6CACA,+DACA,yDACA,mDACA,qEACA,gEACA,6DACA,iFAGA,yEDuBI,yCAHF,WChBF,gDDyBI,4DCrBJ,iDACA,qDACA,sDDuBI,mECnBJ,iDACA,qDACA,sDDqBI,8DCjBJ,iDACA,qDACA,sDDoBE,iCChBF,iDACA,2DACA,+DACA,iEACA,kEACA,6DACA,oEACA,+EDaE,mCCPF,iDACA,wEACA,yEACA,6EAGA,8EAGA,uEACA,gFAGA,yFDFE,WACE,aACA,mBACA,yBACA,sBACA,mCACA,qCACA,wCACA,0DACA,mDACA,8BACA,uBACA,0CACA,gBACA,YACA,iBACA,sBACA,cAGF,sCAnDF,WAoDI,kCACA,iCAGF,qCAxDF,WAyDI,gCACA,+BAGF,sDACE,eAGF,8BACE,aACA,sBACA,OAGF,6DAEE,aACA,mBACA,QACA,gBAGF,8BACE,2CACA,yCAGF,+BACE,4CACA,0CAGF,+BACE,qBACA,wCACA,4BAGF,sCACE,4BACA,+CACA,mCAGF,oCACE,qCACA,wDACA,4CAGF,6BACE,aACA,mBACA,qCACA,kCACA,eACA,yBACA,yBACA,4CACA,gCAGF,sBACE,kDACA,gCACA,gBAGF,gEACE,aAGF,2DAEE,kBACA,mBACA,eACA,2BAGF,kDEhLF,0CACA,iDFiLI,+BAGF,qDG9KF,mBACA,+CACA","file":"list.css"}
1
+ {"version":3,"sourceRoot":"","sources":["list.scss","_list-tokens.scss","../radio/_radio-tokens.scss","../checkbox/_checkbox-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GAWA,mFACA,oBAEI,MCPF,iDACA,SDUE,qBCLF,WDOI,uBAGF,MACE,aACA,sBACA,aACA,cACA,gBACA,eACA,qCAGF,2DAEE,kCACA,gCACA,oBAGF,yDAEE,gCACA,8BACA,mBAGF,WACE,sBAKF,0CAIE,uBALJ,aAQE,YACA,gBACA,mBAIA,WChDF,yBACA,+BACA,iDACA,mDACA,8CACA,wDACA,gEACA,sBACA,uBACA,sBACA,kBACA,qBACA,oBACA,gDACA,sDACA,iDACA,2DACA,mEACA,+DACA,6DACA,0BACA,8DACA,2BACA,6CACA,uDACA,+DACA,yDACA,mDACA,6DACA,qEACA,gEACA,6DACA,uEACA,iFAGA,yEDeI,yCAHF,WCPF,gDDgBI,4DCZJ,iDACA,qDACA,sDDcI,mECVJ,iDACA,qDACA,sDDYI,8DCRJ,iDACA,qDACA,sDDWE,iCCPF,iDACA,2DACA,+DACA,iEACA,kEACA,6DACA,oEACA,6EDIE,oFCCF,wEACA,yEACA,2EACA,4EACA,uEACA,8EACA,yFDHE,WACE,aACA,mBACA,yBACA,sBACA,mCACA,qCACA,wCACA,0DACA,mDACA,8BACA,uBACA,0CACA,+CACA,gBACA,YACA,iBACA,sBACA,cAGF,sCApDF,WAqDI,kCACA,iCAGF,qCAzDF,WA0DI,gCACA,+BAGF,sDACE,eAGF,8BACE,aACA,sBACA,OAGF,6DAEE,aACA,mBACA,QACA,gBAGF,8BACE,2CACA,yCAGF,+BACE,4CACA,0CAGF,+BACE,qBACA,wCACA,6CACA,4BAGF,sCACE,4BACA,+CACA,oDACA,mCAGF,oCACE,qCACA,wDACA,6DACA,4CAGF,6BACE,aACA,mBACA,qCACA,kCACA,eACA,yBACA,yBACA,4CACA,iDACA,gCAGF,sBACE,kDACA,gCACA,gBAGF,gEACE,aAGF,2DAEE,kBACA,mBACA,eACA,2BAGF,kDEnLF,0CACA,iDFoLI,+BAGF,qDGjLF,mBACA,+CACA","file":"list.css"}
@@ -8,7 +8,7 @@ import { css } from 'lit';
8
8
  export const styles = css `/*!
9
9
  * Copyright 2026 Google LLC
10
10
  * SPDX-License-Identifier: Apache-2.0
11
- */@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.checkbox, md.comp.radio;@layer md.comp.list{.list{--container-shape: var(--md-sys-shape-corner-lg);--gap: 0}.list.list-segmented{--gap: 2px;--list-segmented: true}.list{display:flex;flex-direction:column;margin:unset;padding:unset;list-style:none;gap:var(--gap);border-radius:var(--container-shape)}.list>:first-child:not(slot),.list ::slotted(:first-child){border-start-start-radius:inherit;border-start-end-radius:inherit;--first-child: true}.list>:last-child:not(slot),.list ::slotted(:last-child){border-end-start-radius:inherit;border-end-end-radius:inherit;--last-child: true}.list slot{border-radius:inherit}.list-select,.list-select::picker(select){appearance:base-select}.list-select{border:none;background:none;height:fit-content}.list-item{--container-height: 56px;--container-color: transparent;--container-shape: var(--md-sys-shape-corner-xs);--label-text-color: var(--md-sys-color-on-surface);--label-text: var(--md-sys-typescale-body-lg);--label-text-tracking: var(--md-sys-typescale-body-lg-tracking);--leading-space: 16px;--trailing-space: 16px;--between-space: 12px;--top-space: 10px;--bottom-space: 10px;--avatar-size: 40px;--avatar-shape: var(--md-sys-shape-corner-full);--avatar-color: var(--md-sys-color-primary-container);--avatar-label: var(--md-sys-typescale-title-md);--avatar-label-tracking: var(--md-sys-typescale-title-md-tracking);--avatar-label-color: var(--md-sys-color-on-primary-container);--leading-icon-color: var(--md-sys-color-on-surface-variant);--leading-icon-size: 20px;--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-icon-size: 20px;--overline: var(--md-sys-typescale-label-sm);--overline-tracking: var(--md-sys-typescale-label-sm-tracking);--overline-color: var(--md-sys-color-on-surface-variant);--supporting-text: var(--md-sys-typescale-body-md);--supporting-text-tracking: var(--md-sys-typescale-body-md-tracking);--supporting-text-color: var(--md-sys-color-on-surface-variant);--trailing-supporting-text: var(--md-sys-typescale-label-sm);--trailing-supporting-text-tracking: var( --md-sys-typescale-label-sm-tracking );--trailing-supporting-text-color: var(--md-sys-color-on-surface-variant)}@container style(--list-segmented: true){.list-item{--container-color: var(--md-sys-color-surface)}}.list-item:where(:not(.list-item-static)):is(:hover,.hover){--container-shape: var(--md-sys-shape-corner-md);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:where(:not(.list-item-static)):is(:focus-within,.focus){--container-shape: var(--md-sys-shape-corner-lg);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:where(:not(.list-item-static)):is(:active,.active){--container-shape: var(--md-sys-shape-corner-lg);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:is(:checked,.checked){--container-shape: var(--md-sys-shape-corner-lg);--container-color: var(--md-sys-color-secondary-container);--label-text-color: var(--md-sys-color-on-secondary-container);--leading-icon-color: var(--md-sys-color-on-secondary-container);--trailing-icon-color: var(--md-sys-color-on-secondary-container);--overline-color: var(--md-sys-color-on-secondary-container);--supporting-text-color: var(--md-sys-color-on-secondary-container);--trailing-supporting-text-color: var( --md-sys-color-on-secondary-container )}.list-item:is(:disabled,.disabled){--container-shape: var(--md-sys-shape-corner-xs);--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 10%);--label-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--leading-icon-color: hsl( from var(--md-sys-color-on-surface) h s l / 38% );--trailing-icon-color: hsl( from var(--md-sys-color-on-surface) h s l / 38% );--overline-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--supporting-text-color: hsl( from var(--md-sys-color-on-surface) h s l / 38% );--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-surface) h s l / 38% )}.list-item{display:flex;align-items:center;gap:var(--between-space);box-sizing:border-box;min-height:var(--container-height);border-radius:var(--container-shape);background-color:var(--container-color);padding-inline:var(--leading-space) var(--trailing-space);padding-block:var(--top-space) var(--bottom-space);color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);appearance:none;border:none;text-align:unset;text-decoration:unset;width:stretch}@container style(--first-child: true){.list-item{border-start-start-radius:inherit;border-start-end-radius:inherit}}@container style(--last-child: true){.list-item{border-end-start-radius:inherit;border-end-end-radius:inherit}}.list-item:not(:disabled,.disabled,.list-item-static){cursor:pointer}.list-item .list-item-content{display:flex;flex-direction:column;flex:1}.list-item .list-item-leading,.list-item .list-item-trailing{display:flex;align-items:center;gap:8px;min-height:28px}.list-item .list-item-leading{--md-icon-color: var(--leading-icon-color);--md-icon-size: var(--leading-icon-size)}.list-item .list-item-trailing{--md-icon-color: var(--trailing-icon-color);--md-icon-size: var(--trailing-icon-size)}.list-item .list-item-overline{font:var(--overline);letter-spacing:var(--overline-tracking);color:var(--overline-color)}.list-item .list-item-supporting-text{font:var(--supporting-text);letter-spacing:var(--supporting-text-tracking);color:var(--supporting-text-color)}.list-item .list-item-trailing-text{font:var(--trailing-supporting-text);letter-spacing:var(--trailing-supporting-text-tracking);color:var(--trailing-supporting-text-color)}.list-item .list-item-avatar{display:grid;place-items:center;background-color:var(--avatar-color);border-radius:var(--avatar-shape);aspect-ratio:1;width:var(--avatar-size);font:var(--avatar-label);letter-spacing:var(--avatar-label-tracking);color:var(--avatar-label-color)}.list-item::checkmark{font:var(--leading-icon-size) var(--md-icon-font);color:var(--leading-icon-color);content:"check"}.list-item:has(.list-item-radio,.list-item-checkbox)::checkmark{display:none}.list-item .list-item-radio,.list-item .list-item-checkbox{width:min-content;height:min-content;--ripple: none;--focus-ring-outline: none}.list-item:is(:checked,.checked) .list-item-radio{--icon-color: var(--md-sys-color-primary);--state-layer-color: var(--md-sys-color-primary);--icon: "radio_button_checked"}.list-item:is(:checked,.checked) .list-item-checkbox{--outline-width: 0;--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}}
11
+ */@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.checkbox, md.comp.radio;@layer md.comp.list{.list{--container-shape: var(--md-sys-shape-corner-lg);--gap: 0}.list.list-segmented{--gap: 2px;--list-segmented: true}.list{display:flex;flex-direction:column;margin:unset;padding:unset;list-style:none;gap:var(--gap);border-radius:var(--container-shape)}.list>:first-child:not(slot),.list ::slotted(:first-child){border-start-start-radius:inherit;border-start-end-radius:inherit;--first-child: true}.list>:last-child:not(slot),.list ::slotted(:last-child){border-end-start-radius:inherit;border-end-end-radius:inherit;--last-child: true}.list slot{border-radius:inherit}.list-select,.list-select::picker(select){appearance:base-select}.list-select{border:none;background:none;height:fit-content}.list-item{--container-height: 56px;--container-color: transparent;--container-shape: var(--md-sys-shape-corner-xs);--label-text-color: var(--md-sys-color-on-surface);--label-text: var(--md-sys-typescale-body-lg);--label-text-axes: var(--md-sys-typescale-body-lg-axes);--label-text-tracking: var(--md-sys-typescale-body-lg-tracking);--leading-space: 16px;--trailing-space: 16px;--between-space: 12px;--top-space: 10px;--bottom-space: 10px;--avatar-size: 40px;--avatar-shape: var(--md-sys-shape-corner-full);--avatar-color: var(--md-sys-color-primary-container);--avatar-label: var(--md-sys-typescale-title-md);--avatar-label-axes: var(--md-sys-typescale-title-md-axes);--avatar-label-tracking: var(--md-sys-typescale-title-md-tracking);--avatar-label-color: var(--md-sys-color-on-primary-container);--leading-icon-color: var(--md-sys-color-on-surface-variant);--leading-icon-size: 20px;--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-icon-size: 20px;--overline: var(--md-sys-typescale-label-sm);--overline-axes: var(--md-sys-typescale-label-sm-axes);--overline-tracking: var(--md-sys-typescale-label-sm-tracking);--overline-color: var(--md-sys-color-on-surface-variant);--supporting-text: var(--md-sys-typescale-body-md);--supporting-text-axes: var(--md-sys-typescale-body-md-axes);--supporting-text-tracking: var(--md-sys-typescale-body-md-tracking);--supporting-text-color: var(--md-sys-color-on-surface-variant);--trailing-supporting-text: var(--md-sys-typescale-label-sm);--trailing-supporting-text-axes: var(--md-sys-typescale-label-sm-axes);--trailing-supporting-text-tracking: var( --md-sys-typescale-label-sm-tracking );--trailing-supporting-text-color: var(--md-sys-color-on-surface-variant)}@container style(--list-segmented: true){.list-item{--container-color: var(--md-sys-color-surface)}}.list-item:where(:not(.list-item-static)):is(:hover,.hover){--container-shape: var(--md-sys-shape-corner-md);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:where(:not(.list-item-static)):is(:focus-within,.focus){--container-shape: var(--md-sys-shape-corner-lg);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:where(:not(.list-item-static)):is(:active,.active){--container-shape: var(--md-sys-shape-corner-lg);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:is(:checked,.checked){--container-shape: var(--md-sys-shape-corner-lg);--container-color: var(--md-sys-color-secondary-container);--label-text-color: var(--md-sys-color-on-secondary-container);--leading-icon-color: var(--md-sys-color-on-secondary-container);--trailing-icon-color: var(--md-sys-color-on-secondary-container);--overline-color: var(--md-sys-color-on-secondary-container);--supporting-text-color: var(--md-sys-color-on-secondary-container);--trailing-supporting-text-color: var(--md-sys-color-on-secondary-container)}.list-item:is(:disabled,.disabled){--container-shape: var(--md-sys-shape-corner-xs);--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 10%);--label-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--leading-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--trailing-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--overline-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--supporting-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-surface) h s l / 38% )}.list-item{display:flex;align-items:center;gap:var(--between-space);box-sizing:border-box;min-height:var(--container-height);border-radius:var(--container-shape);background-color:var(--container-color);padding-inline:var(--leading-space) var(--trailing-space);padding-block:var(--top-space) var(--bottom-space);color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);font-variation-settings:var(--label-text-axes);appearance:none;border:none;text-align:unset;text-decoration:unset;width:stretch}@container style(--first-child: true){.list-item{border-start-start-radius:inherit;border-start-end-radius:inherit}}@container style(--last-child: true){.list-item{border-end-start-radius:inherit;border-end-end-radius:inherit}}.list-item:not(:disabled,.disabled,.list-item-static){cursor:pointer}.list-item .list-item-content{display:flex;flex-direction:column;flex:1}.list-item .list-item-leading,.list-item .list-item-trailing{display:flex;align-items:center;gap:8px;min-height:28px}.list-item .list-item-leading{--md-icon-color: var(--leading-icon-color);--md-icon-size: var(--leading-icon-size)}.list-item .list-item-trailing{--md-icon-color: var(--trailing-icon-color);--md-icon-size: var(--trailing-icon-size)}.list-item .list-item-overline{font:var(--overline);letter-spacing:var(--overline-tracking);font-variation-settings:var(--overline-axes);color:var(--overline-color)}.list-item .list-item-supporting-text{font:var(--supporting-text);letter-spacing:var(--supporting-text-tracking);font-variation-settings:var(--supporting-text-axes);color:var(--supporting-text-color)}.list-item .list-item-trailing-text{font:var(--trailing-supporting-text);letter-spacing:var(--trailing-supporting-text-tracking);font-variation-settings:var(--trailing-supporting-text-axes);color:var(--trailing-supporting-text-color)}.list-item .list-item-avatar{display:grid;place-items:center;background-color:var(--avatar-color);border-radius:var(--avatar-shape);aspect-ratio:1;width:var(--avatar-size);font:var(--avatar-label);letter-spacing:var(--avatar-label-tracking);font-variation-settings:var(--avatar-label-axes);color:var(--avatar-label-color)}.list-item::checkmark{font:var(--leading-icon-size) var(--md-icon-font);color:var(--leading-icon-color);content:"check"}.list-item:has(.list-item-radio,.list-item-checkbox)::checkmark{display:none}.list-item .list-item-radio,.list-item .list-item-checkbox{width:min-content;height:min-content;--ripple: none;--focus-ring-outline: none}.list-item:is(:checked,.checked) .list-item-radio{--icon-color: var(--md-sys-color-primary);--state-layer-color: var(--md-sys-color-primary);--icon: "radio_button_checked"}.list-item:is(:checked,.checked) .list-item-checkbox{--outline-width: 0;--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}}
12
12
  `;
13
13
  export default styles.styleSheet;
14
14
  //# sourceMappingURL=list.cssresult.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"list.cssresult.js","sourceRoot":"","sources":["list.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,+DAA+D;AAC/D,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;CAIxB,CAAC;AACF,eAAe,MAAM,CAAC,UAAW,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n// Generated stylesheet for ./labs/gb/components/list/list.css.\nimport {css} from 'lit';\nexport const styles = css`/*!\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.checkbox, md.comp.radio;@layer md.comp.list{.list{--container-shape: var(--md-sys-shape-corner-lg);--gap: 0}.list.list-segmented{--gap: 2px;--list-segmented: true}.list{display:flex;flex-direction:column;margin:unset;padding:unset;list-style:none;gap:var(--gap);border-radius:var(--container-shape)}.list>:first-child:not(slot),.list ::slotted(:first-child){border-start-start-radius:inherit;border-start-end-radius:inherit;--first-child: true}.list>:last-child:not(slot),.list ::slotted(:last-child){border-end-start-radius:inherit;border-end-end-radius:inherit;--last-child: true}.list slot{border-radius:inherit}.list-select,.list-select::picker(select){appearance:base-select}.list-select{border:none;background:none;height:fit-content}.list-item{--container-height: 56px;--container-color: transparent;--container-shape: var(--md-sys-shape-corner-xs);--label-text-color: var(--md-sys-color-on-surface);--label-text: var(--md-sys-typescale-body-lg);--label-text-tracking: var(--md-sys-typescale-body-lg-tracking);--leading-space: 16px;--trailing-space: 16px;--between-space: 12px;--top-space: 10px;--bottom-space: 10px;--avatar-size: 40px;--avatar-shape: var(--md-sys-shape-corner-full);--avatar-color: var(--md-sys-color-primary-container);--avatar-label: var(--md-sys-typescale-title-md);--avatar-label-tracking: var(--md-sys-typescale-title-md-tracking);--avatar-label-color: var(--md-sys-color-on-primary-container);--leading-icon-color: var(--md-sys-color-on-surface-variant);--leading-icon-size: 20px;--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-icon-size: 20px;--overline: var(--md-sys-typescale-label-sm);--overline-tracking: var(--md-sys-typescale-label-sm-tracking);--overline-color: var(--md-sys-color-on-surface-variant);--supporting-text: var(--md-sys-typescale-body-md);--supporting-text-tracking: var(--md-sys-typescale-body-md-tracking);--supporting-text-color: var(--md-sys-color-on-surface-variant);--trailing-supporting-text: var(--md-sys-typescale-label-sm);--trailing-supporting-text-tracking: var( --md-sys-typescale-label-sm-tracking );--trailing-supporting-text-color: var(--md-sys-color-on-surface-variant)}@container style(--list-segmented: true){.list-item{--container-color: var(--md-sys-color-surface)}}.list-item:where(:not(.list-item-static)):is(:hover,.hover){--container-shape: var(--md-sys-shape-corner-md);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:where(:not(.list-item-static)):is(:focus-within,.focus){--container-shape: var(--md-sys-shape-corner-lg);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:where(:not(.list-item-static)):is(:active,.active){--container-shape: var(--md-sys-shape-corner-lg);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:is(:checked,.checked){--container-shape: var(--md-sys-shape-corner-lg);--container-color: var(--md-sys-color-secondary-container);--label-text-color: var(--md-sys-color-on-secondary-container);--leading-icon-color: var(--md-sys-color-on-secondary-container);--trailing-icon-color: var(--md-sys-color-on-secondary-container);--overline-color: var(--md-sys-color-on-secondary-container);--supporting-text-color: var(--md-sys-color-on-secondary-container);--trailing-supporting-text-color: var( --md-sys-color-on-secondary-container )}.list-item:is(:disabled,.disabled){--container-shape: var(--md-sys-shape-corner-xs);--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 10%);--label-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--leading-icon-color: hsl( from var(--md-sys-color-on-surface) h s l / 38% );--trailing-icon-color: hsl( from var(--md-sys-color-on-surface) h s l / 38% );--overline-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--supporting-text-color: hsl( from var(--md-sys-color-on-surface) h s l / 38% );--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-surface) h s l / 38% )}.list-item{display:flex;align-items:center;gap:var(--between-space);box-sizing:border-box;min-height:var(--container-height);border-radius:var(--container-shape);background-color:var(--container-color);padding-inline:var(--leading-space) var(--trailing-space);padding-block:var(--top-space) var(--bottom-space);color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);appearance:none;border:none;text-align:unset;text-decoration:unset;width:stretch}@container style(--first-child: true){.list-item{border-start-start-radius:inherit;border-start-end-radius:inherit}}@container style(--last-child: true){.list-item{border-end-start-radius:inherit;border-end-end-radius:inherit}}.list-item:not(:disabled,.disabled,.list-item-static){cursor:pointer}.list-item .list-item-content{display:flex;flex-direction:column;flex:1}.list-item .list-item-leading,.list-item .list-item-trailing{display:flex;align-items:center;gap:8px;min-height:28px}.list-item .list-item-leading{--md-icon-color: var(--leading-icon-color);--md-icon-size: var(--leading-icon-size)}.list-item .list-item-trailing{--md-icon-color: var(--trailing-icon-color);--md-icon-size: var(--trailing-icon-size)}.list-item .list-item-overline{font:var(--overline);letter-spacing:var(--overline-tracking);color:var(--overline-color)}.list-item .list-item-supporting-text{font:var(--supporting-text);letter-spacing:var(--supporting-text-tracking);color:var(--supporting-text-color)}.list-item .list-item-trailing-text{font:var(--trailing-supporting-text);letter-spacing:var(--trailing-supporting-text-tracking);color:var(--trailing-supporting-text-color)}.list-item .list-item-avatar{display:grid;place-items:center;background-color:var(--avatar-color);border-radius:var(--avatar-shape);aspect-ratio:1;width:var(--avatar-size);font:var(--avatar-label);letter-spacing:var(--avatar-label-tracking);color:var(--avatar-label-color)}.list-item::checkmark{font:var(--leading-icon-size) var(--md-icon-font);color:var(--leading-icon-color);content:\"check\"}.list-item:has(.list-item-radio,.list-item-checkbox)::checkmark{display:none}.list-item .list-item-radio,.list-item .list-item-checkbox{width:min-content;height:min-content;--ripple: none;--focus-ring-outline: none}.list-item:is(:checked,.checked) .list-item-radio{--icon-color: var(--md-sys-color-primary);--state-layer-color: var(--md-sys-color-primary);--icon: \"radio_button_checked\"}.list-item:is(:checked,.checked) .list-item-checkbox{--outline-width: 0;--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}}\n`;\nexport default styles.styleSheet!;\n"]}
1
+ {"version":3,"file":"list.cssresult.js","sourceRoot":"","sources":["list.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,+DAA+D;AAC/D,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;CAIxB,CAAC;AACF,eAAe,MAAM,CAAC,UAAW,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n// Generated stylesheet for ./labs/gb/components/list/list.css.\nimport {css} from 'lit';\nexport const styles = css`/*!\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.checkbox, md.comp.radio;@layer md.comp.list{.list{--container-shape: var(--md-sys-shape-corner-lg);--gap: 0}.list.list-segmented{--gap: 2px;--list-segmented: true}.list{display:flex;flex-direction:column;margin:unset;padding:unset;list-style:none;gap:var(--gap);border-radius:var(--container-shape)}.list>:first-child:not(slot),.list ::slotted(:first-child){border-start-start-radius:inherit;border-start-end-radius:inherit;--first-child: true}.list>:last-child:not(slot),.list ::slotted(:last-child){border-end-start-radius:inherit;border-end-end-radius:inherit;--last-child: true}.list slot{border-radius:inherit}.list-select,.list-select::picker(select){appearance:base-select}.list-select{border:none;background:none;height:fit-content}.list-item{--container-height: 56px;--container-color: transparent;--container-shape: var(--md-sys-shape-corner-xs);--label-text-color: var(--md-sys-color-on-surface);--label-text: var(--md-sys-typescale-body-lg);--label-text-axes: var(--md-sys-typescale-body-lg-axes);--label-text-tracking: var(--md-sys-typescale-body-lg-tracking);--leading-space: 16px;--trailing-space: 16px;--between-space: 12px;--top-space: 10px;--bottom-space: 10px;--avatar-size: 40px;--avatar-shape: var(--md-sys-shape-corner-full);--avatar-color: var(--md-sys-color-primary-container);--avatar-label: var(--md-sys-typescale-title-md);--avatar-label-axes: var(--md-sys-typescale-title-md-axes);--avatar-label-tracking: var(--md-sys-typescale-title-md-tracking);--avatar-label-color: var(--md-sys-color-on-primary-container);--leading-icon-color: var(--md-sys-color-on-surface-variant);--leading-icon-size: 20px;--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-icon-size: 20px;--overline: var(--md-sys-typescale-label-sm);--overline-axes: var(--md-sys-typescale-label-sm-axes);--overline-tracking: var(--md-sys-typescale-label-sm-tracking);--overline-color: var(--md-sys-color-on-surface-variant);--supporting-text: var(--md-sys-typescale-body-md);--supporting-text-axes: var(--md-sys-typescale-body-md-axes);--supporting-text-tracking: var(--md-sys-typescale-body-md-tracking);--supporting-text-color: var(--md-sys-color-on-surface-variant);--trailing-supporting-text: var(--md-sys-typescale-label-sm);--trailing-supporting-text-axes: var(--md-sys-typescale-label-sm-axes);--trailing-supporting-text-tracking: var( --md-sys-typescale-label-sm-tracking );--trailing-supporting-text-color: var(--md-sys-color-on-surface-variant)}@container style(--list-segmented: true){.list-item{--container-color: var(--md-sys-color-surface)}}.list-item:where(:not(.list-item-static)):is(:hover,.hover){--container-shape: var(--md-sys-shape-corner-md);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:where(:not(.list-item-static)):is(:focus-within,.focus){--container-shape: var(--md-sys-shape-corner-lg);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:where(:not(.list-item-static)):is(:active,.active){--container-shape: var(--md-sys-shape-corner-lg);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:is(:checked,.checked){--container-shape: var(--md-sys-shape-corner-lg);--container-color: var(--md-sys-color-secondary-container);--label-text-color: var(--md-sys-color-on-secondary-container);--leading-icon-color: var(--md-sys-color-on-secondary-container);--trailing-icon-color: var(--md-sys-color-on-secondary-container);--overline-color: var(--md-sys-color-on-secondary-container);--supporting-text-color: var(--md-sys-color-on-secondary-container);--trailing-supporting-text-color: var(--md-sys-color-on-secondary-container)}.list-item:is(:disabled,.disabled){--container-shape: var(--md-sys-shape-corner-xs);--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 10%);--label-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--leading-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--trailing-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--overline-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--supporting-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-surface) h s l / 38% )}.list-item{display:flex;align-items:center;gap:var(--between-space);box-sizing:border-box;min-height:var(--container-height);border-radius:var(--container-shape);background-color:var(--container-color);padding-inline:var(--leading-space) var(--trailing-space);padding-block:var(--top-space) var(--bottom-space);color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);font-variation-settings:var(--label-text-axes);appearance:none;border:none;text-align:unset;text-decoration:unset;width:stretch}@container style(--first-child: true){.list-item{border-start-start-radius:inherit;border-start-end-radius:inherit}}@container style(--last-child: true){.list-item{border-end-start-radius:inherit;border-end-end-radius:inherit}}.list-item:not(:disabled,.disabled,.list-item-static){cursor:pointer}.list-item .list-item-content{display:flex;flex-direction:column;flex:1}.list-item .list-item-leading,.list-item .list-item-trailing{display:flex;align-items:center;gap:8px;min-height:28px}.list-item .list-item-leading{--md-icon-color: var(--leading-icon-color);--md-icon-size: var(--leading-icon-size)}.list-item .list-item-trailing{--md-icon-color: var(--trailing-icon-color);--md-icon-size: var(--trailing-icon-size)}.list-item .list-item-overline{font:var(--overline);letter-spacing:var(--overline-tracking);font-variation-settings:var(--overline-axes);color:var(--overline-color)}.list-item .list-item-supporting-text{font:var(--supporting-text);letter-spacing:var(--supporting-text-tracking);font-variation-settings:var(--supporting-text-axes);color:var(--supporting-text-color)}.list-item .list-item-trailing-text{font:var(--trailing-supporting-text);letter-spacing:var(--trailing-supporting-text-tracking);font-variation-settings:var(--trailing-supporting-text-axes);color:var(--trailing-supporting-text-color)}.list-item .list-item-avatar{display:grid;place-items:center;background-color:var(--avatar-color);border-radius:var(--avatar-shape);aspect-ratio:1;width:var(--avatar-size);font:var(--avatar-label);letter-spacing:var(--avatar-label-tracking);font-variation-settings:var(--avatar-label-axes);color:var(--avatar-label-color)}.list-item::checkmark{font:var(--leading-icon-size) var(--md-icon-font);color:var(--leading-icon-color);content:\"check\"}.list-item:has(.list-item-radio,.list-item-checkbox)::checkmark{display:none}.list-item .list-item-radio,.list-item .list-item-checkbox{width:min-content;height:min-content;--ripple: none;--focus-ring-outline: none}.list-item:is(:checked,.checked) .list-item-radio{--icon-color: var(--md-sys-color-primary);--state-layer-color: var(--md-sys-color-primary);--icon: \"radio_button_checked\"}.list-item:is(:checked,.checked) .list-item-checkbox{--outline-width: 0;--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}}\n`;\nexport default styles.styleSheet!;\n"]}
@@ -107,6 +107,7 @@
107
107
  color: var(--label-text-color);
108
108
  font: var(--label-text);
109
109
  letter-spacing: var(--label-text-tracking);
110
+ font-variation-settings: var(--label-text-axes);
110
111
  appearance: none;
111
112
  border: none;
112
113
  text-align: unset;
@@ -155,18 +156,21 @@
155
156
  .list-item-overline {
156
157
  font: var(--overline);
157
158
  letter-spacing: var(--overline-tracking);
159
+ font-variation-settings: var(--overline-axes);
158
160
  color: var(--overline-color);
159
161
  }
160
162
 
161
163
  .list-item-supporting-text {
162
164
  font: var(--supporting-text);
163
165
  letter-spacing: var(--supporting-text-tracking);
166
+ font-variation-settings: var(--supporting-text-axes);
164
167
  color: var(--supporting-text-color);
165
168
  }
166
169
 
167
170
  .list-item-trailing-text {
168
171
  font: var(--trailing-supporting-text);
169
172
  letter-spacing: var(--trailing-supporting-text-tracking);
173
+ font-variation-settings: var(--trailing-supporting-text-axes);
170
174
  color: var(--trailing-supporting-text-color);
171
175
  }
172
176
 
@@ -179,6 +183,7 @@
179
183
  width: var(--avatar-size);
180
184
  font: var(--avatar-label);
181
185
  letter-spacing: var(--avatar-label-tracking);
186
+ font-variation-settings: var(--avatar-label-axes);
182
187
  color: var(--avatar-label-color);
183
188
  }
184
189
 
@@ -0,0 +1,12 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2026 Google LLC
4
+ * SPDX-License-Identifier: Apache-2.0
5
+ */
6
+ import { ListItemElement } from './list-item-element.js';
7
+ declare global {
8
+ interface HTMLElementTagNameMap {
9
+ /** A Material Design component. */
10
+ 'md-gb-list-item': ListItemElement;
11
+ }
12
+ }
@@ -0,0 +1,8 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2026 Google LLC
4
+ * SPDX-License-Identifier: Apache-2.0
5
+ */
6
+ import { ListItemElement } from './list-item-element.js';
7
+ customElements.define('md-gb-list-item', ListItemElement);
8
+ //# sourceMappingURL=md-gb-list-item.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"md-gb-list-item.js","sourceRoot":"","sources":["md-gb-list-item.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,eAAe,EAAC,MAAM,wBAAwB,CAAC;AASvD,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,eAAe,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ListItemElement} from './list-item-element.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design component. */\n 'md-gb-list-item': ListItemElement;\n }\n}\n\ncustomElements.define('md-gb-list-item', ListItemElement);\n"]}
@@ -0,0 +1,12 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2026 Google LLC
4
+ * SPDX-License-Identifier: Apache-2.0
5
+ */
6
+ import { ListElement } from './list-element.js';
7
+ declare global {
8
+ interface HTMLElementTagNameMap {
9
+ /** A Material Design component. */
10
+ 'md-gb-list': ListElement;
11
+ }
12
+ }
@@ -0,0 +1,8 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2026 Google LLC
4
+ * SPDX-License-Identifier: Apache-2.0
5
+ */
6
+ import { ListElement } from './list-element.js';
7
+ customElements.define('md-gb-list', ListElement);
8
+ //# sourceMappingURL=md-gb-list.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"md-gb-list.js","sourceRoot":"","sources":["md-gb-list.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,WAAW,EAAC,MAAM,mBAAmB,CAAC;AAS9C,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ListElement} from './list-element.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design component. */\n 'md-gb-list': ListElement;\n }\n}\n\ncustomElements.define('md-gb-list', ListElement);\n"]}
@@ -4,6 +4,7 @@
4
4
  //
5
5
 
6
6
  @mixin root {
7
+ // LINT.IfChange
7
8
  --container-color: var(--md-sys-color-surface-container-low);
8
9
  --container-elevation: var(--md-sys-elevation-shadow-2);
9
10
  --container-shape: var(--md-sys-shape-corner-lg);
@@ -11,6 +12,7 @@
11
12
  --group-padding: 2px;
12
13
  --group-shape: var(--md-sys-shape-corner-sm);
13
14
  --section-label-text-color: var(--md-sys-color-on-surface-variant);
15
+ // LINT.ThenChange(menu-element.ts) keep in sync with `@cssprop` jsdoc tags
14
16
  }
15
17
 
16
18
  @mixin inactive {
@@ -26,6 +28,7 @@
26
28
  }
27
29
 
28
30
  @mixin item {
31
+ // LINT.IfChange
29
32
  --between-space: 12px;
30
33
  --bottom-space: 8px;
31
34
  --container-color: transparent;
@@ -33,6 +36,7 @@
33
36
  --inner-corner-corner-size: none;
34
37
  --label-text-color: var(--md-sys-color-on-surface);
35
38
  --label-text: var(--md-sys-typescale-label-lg);
39
+ --label-text-axes: var(--md-sys-typescale-label-lg-axes);
36
40
  --label-text-tracking: var(--md-sys-typescale-label-lg-tracking);
37
41
  --leading-icon-color: var(--md-sys-color-on-surface-variant);
38
42
  --leading-icon-size: 20px;
@@ -40,14 +44,19 @@
40
44
  --shape: var(--md-sys-shape-corner-xs);
41
45
  --supporting-text-color: var(--md-sys-color-on-surface-variant);
42
46
  --supporting-text: var(--md-sys-typescale-body-sm);
47
+ --supporting-text-axes: var(--md-sys-typescale-body-sm-axes);
43
48
  --supporting-text-tracking: var(--md-sys-typescale-body-sm-tracking);
44
49
  --top-space: 8px;
45
50
  --trailing-icon-color: var(--md-sys-color-on-surface-variant);
46
51
  --trailing-icon-size: 20px;
47
52
  --trailing-space: 16px;
48
- --trailing-supporting-text-color: var(--md-sys-color-on-surface-variant);
49
53
  --trailing-supporting-text: var(--md-sys-typescale-label-lg);
50
- --trailing-supporting-text-tracking: var(--md-sys-typescale-label-lg-tracking);
54
+ --trailing-supporting-text-axes: var(--md-sys-typescale-label-lg-axes);
55
+ --trailing-supporting-text-color: var(--md-sys-color-on-surface-variant);
56
+ --trailing-supporting-text-tracking: var(
57
+ --md-sys-typescale-label-lg-tracking
58
+ );
59
+ // LINT.ThenChange(menu-item-element.ts) keep in sync with `@cssprop` jsdoc tags
51
60
  }
52
61
 
53
62
  @mixin item-first-child {
@@ -107,22 +116,46 @@
107
116
  --leading-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
108
117
  --supporting-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
109
118
  --trailing-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
110
- --trailing-supporting-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
119
+ --trailing-supporting-text-color: hsl(
120
+ from var(--md-sys-color-on-surface) h s l / 38%
121
+ );
111
122
  }
112
123
 
113
124
  @mixin item-disabled-vibrant {
114
- --label-text-color: hsl(from var(--md-sys-color-on-tertiary-container) h s l / 38%);
115
- --leading-icon-color: hsl(from var(--md-sys-color-on-tertiary-container) h s l / 38%);
116
- --supporting-text-color: hsl(from var(--md-sys-color-on-tertiary-container) h s l / 38%);
117
- --trailing-icon-color: hsl(from var(--md-sys-color-on-tertiary-container) h s l / 38%);
118
- --trailing-supporting-text-color: hsl(from var(--md-sys-color-on-tertiary-container) h s l / 38%);
125
+ --label-text-color: hsl(
126
+ from var(--md-sys-color-on-tertiary-container) h s l / 38%
127
+ );
128
+ --leading-icon-color: hsl(
129
+ from var(--md-sys-color-on-tertiary-container) h s l / 38%
130
+ );
131
+ --supporting-text-color: hsl(
132
+ from var(--md-sys-color-on-tertiary-container) h s l / 38%
133
+ );
134
+ --trailing-icon-color: hsl(
135
+ from var(--md-sys-color-on-tertiary-container) h s l / 38%
136
+ );
137
+ --trailing-supporting-text-color: hsl(
138
+ from var(--md-sys-color-on-tertiary-container) h s l / 38%
139
+ );
119
140
  }
120
141
 
121
142
  @mixin item-disabled-selected {
122
- --container-color: hsl(from var(--md-sys-color-tertiary-container) h s l / 38%);
123
- --label-text-color: hsl(from var(--md-sys-color-on-tertiary-container) h s l / 38%);
124
- --leading-icon-color: hsl(from var(--md-sys-color-on-tertiary-container) h s l / 38%);
125
- --supporting-text-color: hsl(from var(--md-sys-color-on-tertiary-container) h s l / 38%);
126
- --trailing-icon-color: hsl(from var(--md-sys-color-on-tertiary-container) h s l / 38%);
127
- --trailing-supporting-text-color: hsl(from var(--md-sys-color-on-tertiary-container) h s l / 38%);
143
+ --container-color: hsl(
144
+ from var(--md-sys-color-tertiary-container) h s l / 38%
145
+ );
146
+ --label-text-color: hsl(
147
+ from var(--md-sys-color-on-tertiary-container) h s l / 38%
148
+ );
149
+ --leading-icon-color: hsl(
150
+ from var(--md-sys-color-on-tertiary-container) h s l / 38%
151
+ );
152
+ --supporting-text-color: hsl(
153
+ from var(--md-sys-color-on-tertiary-container) h s l / 38%
154
+ );
155
+ --trailing-icon-color: hsl(
156
+ from var(--md-sys-color-on-tertiary-container) h s l / 38%
157
+ );
158
+ --trailing-supporting-text-color: hsl(
159
+ from var(--md-sys-color-on-tertiary-container) h s l / 38%
160
+ );
128
161
  }
@@ -0,0 +1,12 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2026 Google LLC
4
+ * SPDX-License-Identifier: Apache-2.0
5
+ */
6
+ import { MenuGroupElement } from './menu-group-element.js';
7
+ declare global {
8
+ interface HTMLElementTagNameMap {
9
+ /** A Material Design component. */
10
+ 'md-gb-menu-group': MenuGroupElement;
11
+ }
12
+ }
@@ -0,0 +1,8 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2026 Google LLC
4
+ * SPDX-License-Identifier: Apache-2.0
5
+ */
6
+ import { MenuGroupElement } from './menu-group-element.js';
7
+ customElements.define('md-gb-menu-group', MenuGroupElement);
8
+ //# sourceMappingURL=md-gb-menu-group.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"md-gb-menu-group.js","sourceRoot":"","sources":["md-gb-menu-group.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,gBAAgB,EAAC,MAAM,yBAAyB,CAAC;AASzD,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {MenuGroupElement} from './menu-group-element.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design component. */\n 'md-gb-menu-group': MenuGroupElement;\n }\n}\n\ncustomElements.define('md-gb-menu-group', MenuGroupElement);\n"]}
@@ -0,0 +1,12 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2026 Google LLC
4
+ * SPDX-License-Identifier: Apache-2.0
5
+ */
6
+ import { MenuItemElement } from './menu-item-element.js';
7
+ declare global {
8
+ interface HTMLElementTagNameMap {
9
+ /** A Material Design component. */
10
+ 'md-gb-menu-item': MenuItemElement;
11
+ }
12
+ }
@@ -0,0 +1,8 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2026 Google LLC
4
+ * SPDX-License-Identifier: Apache-2.0
5
+ */
6
+ import { MenuItemElement } from './menu-item-element.js';
7
+ customElements.define('md-gb-menu-item', MenuItemElement);
8
+ //# sourceMappingURL=md-gb-menu-item.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"md-gb-menu-item.js","sourceRoot":"","sources":["md-gb-menu-item.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,eAAe,EAAC,MAAM,wBAAwB,CAAC;AASvD,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,eAAe,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {MenuItemElement} from './menu-item-element.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design component. */\n 'md-gb-menu-item': MenuItemElement;\n }\n}\n\ncustomElements.define('md-gb-menu-item', MenuItemElement);\n"]}
@@ -0,0 +1,12 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2026 Google LLC
4
+ * SPDX-License-Identifier: Apache-2.0
5
+ */
6
+ import { MenuElement } from './menu-element.js';
7
+ declare global {
8
+ interface HTMLElementTagNameMap {
9
+ /** A Material Design component. */
10
+ 'md-gb-menu': MenuElement;
11
+ }
12
+ }
@@ -0,0 +1,8 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2026 Google LLC
4
+ * SPDX-License-Identifier: Apache-2.0
5
+ */
6
+ import { MenuElement } from './menu-element.js';
7
+ customElements.define('md-gb-menu', MenuElement);
8
+ //# sourceMappingURL=md-gb-menu.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"md-gb-menu.js","sourceRoot":"","sources":["md-gb-menu.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,WAAW,EAAC,MAAM,mBAAmB,CAAC;AAS9C,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {MenuElement} from './menu-element.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design component. */\n 'md-gb-menu': MenuElement;\n }\n}\n\ncustomElements.define('md-gb-menu', MenuElement);\n"]}
@@ -5,17 +5,21 @@
5
5
  */
6
6
  import { CSSResultOrNative, LitElement } from 'lit';
7
7
  import { type MenuColor } from './menu.js';
8
- declare global {
9
- interface HTMLElementTagNameMap {
10
- /** A Material Design menu component. */
11
- 'md-menu': Menu;
12
- }
13
- }
14
8
  declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<typeof LitElement, import("../../../behaviors/focusable.js").Focusable>, import("../../../behaviors/element-internals.js").WithElementInternals>;
15
9
  /**
16
10
  * A Material Design menu component.
11
+ *
12
+ * @slot - Used to display the menu's items.
13
+ * @csspart menu - The menu's root element.
14
+ * @cssprop --container-color
15
+ * @cssprop --container-elevation
16
+ * @cssprop --container-shape
17
+ * @cssprop --gap
18
+ * @cssprop --group-padding
19
+ * @cssprop --group-shape
20
+ * @cssprop --section-label-text-color
17
21
  */
18
- export declare class Menu extends baseClass {
22
+ export declare class MenuElement extends baseClass {
19
23
  static styles: CSSResultOrNative[];
20
24
  color: MenuColor;
21
25
  get items(): HTMLElement[];
@@ -6,7 +6,7 @@
6
6
  import { __decorate } from "tslib";
7
7
  import { ContextProvider } from '@lit/context';
8
8
  import { css, html, LitElement } from 'lit';
9
- import { customElement, property } from 'lit/decorators.js';
9
+ import { property } from 'lit/decorators.js';
10
10
  import { internals, mixinElementInternals, } from '../../../behaviors/element-internals.js';
11
11
  import { mixinFocusable } from '../../../behaviors/focusable.js';
12
12
  import menuStyles from './menu.css' with { type: 'css' }; // github-only
@@ -16,8 +16,18 @@ import { menu, MENU_COLORS, menuContext } from './menu.js';
16
16
  const baseClass = mixinElementInternals(mixinFocusable(LitElement));
17
17
  /**
18
18
  * A Material Design menu component.
19
+ *
20
+ * @slot - Used to display the menu's items.
21
+ * @csspart menu - The menu's root element.
22
+ * @cssprop --container-color
23
+ * @cssprop --container-elevation
24
+ * @cssprop --container-shape
25
+ * @cssprop --gap
26
+ * @cssprop --group-padding
27
+ * @cssprop --group-shape
28
+ * @cssprop --section-label-text-color
19
29
  */
20
- let Menu = class Menu extends baseClass {
30
+ export class MenuElement extends baseClass {
21
31
  get items() {
22
32
  return Array.from(this.itemsSet).sort((a, b) => {
23
33
  return a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_PRECEDING
@@ -129,13 +139,9 @@ let Menu = class Menu extends baseClass {
129
139
  <slot></slot>
130
140
  </div>`;
131
141
  }
132
- };
133
- Menu.styles = [menuStyles, css ``];
142
+ }
143
+ MenuElement.styles = [menuStyles, css ``];
134
144
  __decorate([
135
145
  property()
136
- ], Menu.prototype, "color", void 0);
137
- Menu = __decorate([
138
- customElement('md-menu')
139
- ], Menu);
140
- export { Menu };
141
- //# sourceMappingURL=md-menu.js.map
146
+ ], MenuElement.prototype, "color", void 0);
147
+ //# sourceMappingURL=menu-element.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"menu-element.js","sourceRoot":"","sources":["menu-element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EACL,SAAS,EACT,qBAAqB,GACtB,MAAM,yCAAyC,CAAC;AACjD,OAAO,EAAC,cAAc,EAAC,MAAM,iCAAiC,CAAC;AAE/D,OAAO,UAAU,MAAM,YAAY,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACtE,4EAA4E;AAE5E,OAAO,EAAC,IAAI,EAAE,WAAW,EAAE,WAAW,EAAiB,MAAM,WAAW,CAAC;AAEzE,wCAAwC;AACxC,MAAM,SAAS,GAAG,qBAAqB,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC;AAEpE;;;;;;;;;;;;GAYG;AACH,MAAM,OAAO,WAAY,SAAQ,SAAS;IAKxC,IAAI,KAAK;QACP,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YAC7C,OAAO,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,2BAA2B;gBACpE,CAAC,CAAC,CAAC;gBACH,CAAC,CAAC,CAAC,CAAC,CAAC;QACT,CAAC,CAAC,CAAC;IACL,CAAC;IAKD;QACE,KAAK,EAAE,CAAC;QAdE,UAAK,GAAc,WAAW,CAAC,QAAQ,CAAC;QAWnC,aAAQ,GAAG,IAAI,GAAG,EAAe,CAAC;QAIjD,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,GAAG,MAAM,CAAC;QAC9B,IAAI,CAAC,aAAa,CAChB,IAAI,eAAe,CAAC,IAAI,EAAE;YACxB,OAAO,EAAE,WAAW;YACpB,YAAY,EAAE;gBACZ,IAAI,EAAE,IAAI;gBACV,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK;gBAC1B,aAAa,EAAE,CAAC,IAAiB,EAAE,EAAE;oBACnC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;gBAC1B,CAAC;gBACD,gBAAgB,EAAE,CAAC,IAAiB,EAAE,EAAE;oBACtC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;gBAC7B,CAAC;aACF;SACF,CAAC,CACH,CAAC;QAEF,4CAA4C;QAC5C,6BAA6B;QAC7B,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAAoB,EAAE,EAAE;YACxD,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;gBACxB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,WAAW,EAAE,CAAC;gBACnB,OAAO;YACT,CAAC;YAED,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAC7B,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAAC,CAChD,CAAC;YACF,MAAM,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC;YACvE,IAAI,KAAK,KAAK,CAAC,CAAC,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACrC,0DAA0D;gBAC1D,IACE;oBACE,WAAW;oBACX,YAAY;oBACZ,SAAS;oBACT,WAAW;oBACX,MAAM;oBACN,KAAK;iBACN,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EACrB,CAAC;oBACD,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;gBACnB,CAAC;gBACD,OAAO;YACT,CAAC;YAED,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;gBAClB,KAAK,WAAW,CAAC;gBACjB,KAAK,YAAY;oBACf,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,IAAI,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;wBAC7B,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;oBAC3B,CAAC;yBAAM,CAAC;wBACN,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;oBACnB,CAAC;oBACD,MAAM;gBACR,KAAK,SAAS,CAAC;gBACf,KAAK,WAAW;oBACd,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;wBACd,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;oBAC3B,CAAC;yBAAM,CAAC;wBACN,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;oBAClC,CAAC;oBACD,MAAM;gBACR,KAAK,MAAM;oBACT,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;oBACjB,MAAM;gBACR,KAAK,KAAK;oBACR,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;oBAChC,MAAM;gBACR;oBACE,MAAM;YACV,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,uBAAuB;QACvB,IAAI,CAAC,gBAAgB,CACnB,QAAQ,EACR,CAAC,KAA8C,EAAE,EAAE;YACjD,IAAI,KAAK,CAAC,QAAQ,KAAK,MAAM,EAAE,CAAC;gBAC9B,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,MAAqB,CAAC;gBACrD,oCAAoC;gBACpC,UAAU,CAAC,GAAG,EAAE;oBACd,IAAI,CAAC,KAAK;yBACP,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,gCAAgC,CAAC,CAAC;wBAChE,EAAE,KAAK,EAAE,CAAC;gBACd,CAAC,CAAC,CAAC;YACL,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,iBAAiB,EAAE,KAAK,EAAE,CAAC;gBAChC,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAC;YACrC,CAAC;QACH,CAAC,CACF,CAAC;IACJ,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,sEAAsE;QACtE,qBAAqB;QACrB,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;IACxB,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,2BAA2B,IAAI,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,CAAC;;WAExD,CAAC;IACV,CAAC;;AAhIe,kBAAM,GAAwB,CAAC,UAAU,EAAE,GAAG,CAAA,EAAE,CAAC,AAA3C,CAA4C;AAEtD;IAAX,QAAQ,EAAE;0CAAyC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ContextProvider} from '@lit/context';\nimport {css, CSSResultOrNative, html, LitElement} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {\n internals,\n mixinElementInternals,\n} from '../../../behaviors/element-internals.js';\nimport {mixinFocusable} from '../../../behaviors/focusable.js';\n\nimport menuStyles from './menu.css' with {type: 'css'}; // github-only\n// import {styles as menuStyles} from './menu.cssresult.js'; // google3-only\n\nimport {menu, MENU_COLORS, menuContext, type MenuColor} from './menu.js';\n\n// Separate variable needed for closure.\nconst baseClass = mixinElementInternals(mixinFocusable(LitElement));\n\n/**\n * A Material Design menu component.\n *\n * @slot - Used to display the menu's items.\n * @csspart menu - The menu's root element.\n * @cssprop --container-color\n * @cssprop --container-elevation\n * @cssprop --container-shape\n * @cssprop --gap\n * @cssprop --group-padding\n * @cssprop --group-shape\n * @cssprop --section-label-text-color\n */\nexport class MenuElement extends baseClass {\n static override styles: CSSResultOrNative[] = [menuStyles, css``];\n\n @property() color: MenuColor = MENU_COLORS.standard;\n\n get items(): HTMLElement[] {\n return Array.from(this.itemsSet).sort((a, b) => {\n return a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_PRECEDING\n ? 1\n : -1;\n });\n }\n\n private previouslyFocused?: HTMLElement;\n private readonly itemsSet = new Set<HTMLElement>();\n\n constructor() {\n super();\n this[internals].role = 'menu';\n this.addController(\n new ContextProvider(this, {\n context: menuContext,\n initialValue: {\n menu: this,\n getItems: () => this.items,\n itemConnected: (item: HTMLElement) => {\n this.itemsSet.add(item);\n },\n itemDisconnected: (item: HTMLElement) => {\n this.itemsSet.delete(item);\n },\n },\n }),\n );\n\n // TODO: move event listeners to setupMenu()\n // Handle keyboard navigation\n this.addEventListener('keydown', (event: KeyboardEvent) => {\n if (event.key === 'Tab') {\n event.preventDefault();\n this.hidePopover();\n return;\n }\n\n const items = this.items.filter(\n (item) => !item.matches(':disabled,[disabled]'),\n );\n const index = items.findIndex((item) => item.matches(':focus-within'));\n if (index === -1 && items.length > 0) {\n // If no item is focused, focus the first one on arrow key\n if (\n [\n 'ArrowDown',\n 'ArrowRight',\n 'ArrowUp',\n 'ArrowLeft',\n 'Home',\n 'End',\n ].includes(event.key)\n ) {\n event.preventDefault();\n items[0].focus();\n }\n return;\n }\n\n switch (event.key) {\n case 'ArrowDown':\n case 'ArrowRight':\n event.preventDefault();\n if (index < items.length - 1) {\n items[index + 1].focus();\n } else {\n items[0].focus();\n }\n break;\n case 'ArrowUp':\n case 'ArrowLeft':\n event.preventDefault();\n if (index > 0) {\n items[index - 1].focus();\n } else {\n items[items.length - 1].focus();\n }\n break;\n case 'Home':\n event.preventDefault();\n items[0].focus();\n break;\n case 'End':\n event.preventDefault();\n items[items.length - 1].focus();\n break;\n default:\n break;\n }\n });\n\n // Handle focus on open\n this.addEventListener(\n 'toggle',\n (event: ToggleEvent & {source?: Element | null}) => {\n if (event.newState === 'open') {\n this.previouslyFocused = event.source as HTMLElement;\n // Focus the first non-disabled item\n setTimeout(() => {\n this.items\n .find((item) => !item.matches(':disabled,.disabled,[disabled]'))\n ?.focus();\n });\n } else {\n this.previouslyFocused?.focus();\n this.previouslyFocused = undefined;\n }\n },\n );\n }\n\n override connectedCallback() {\n super.connectedCallback();\n // Set popover behavior in connectedCallback since constructor may not\n // sprout attributes.\n this.popover = 'auto';\n }\n\n protected override render() {\n return html`<div part=\"menu\" class=\"${menu({color: this.color})} menu-host\">\n <slot></slot>\n </div>`;\n }\n}\n"]}
@@ -5,16 +5,13 @@
5
5
  */
6
6
  import { CSSResultOrNative, LitElement } from 'lit';
7
7
  import { type MenuItemCheckable } from './menu.js';
8
- declare global {
9
- interface HTMLElementTagNameMap {
10
- 'md-menu-group': MenuGroup;
11
- }
12
- }
13
8
  declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<typeof LitElement, import("../../../behaviors/element-internals.js").WithElementInternals>;
14
9
  /**
15
10
  * A Material Design menu group component.
11
+ *
12
+ * @slot - Used to display the menu group's items.
16
13
  */
17
- export declare class MenuGroup extends baseClass {
14
+ export declare class MenuGroupElement extends baseClass {
18
15
  static styles: CSSResultOrNative[];
19
16
  checkable: MenuItemCheckable | null;
20
17
  get menu(): HTMLElement | null;
@@ -6,15 +6,17 @@
6
6
  import { __decorate } from "tslib";
7
7
  import { consume, provide } from '@lit/context';
8
8
  import { css, html, LitElement } from 'lit';
9
- import { customElement, property } from 'lit/decorators.js';
9
+ import { property } from 'lit/decorators.js';
10
10
  import { internals, mixinElementInternals, } from '../../../behaviors/element-internals.js';
11
11
  import { menuContext, menuItemCheckable, } from './menu.js';
12
12
  // Separate variable needed for closure.
13
13
  const baseClass = mixinElementInternals(LitElement);
14
14
  /**
15
15
  * A Material Design menu group component.
16
+ *
17
+ * @slot - Used to display the menu group's items.
16
18
  */
17
- let MenuGroup = class MenuGroup extends baseClass {
19
+ export class MenuGroupElement extends baseClass {
18
20
  // TODO: add optional section label
19
21
  get menu() {
20
22
  return this.menuContext?.menu || null;
@@ -28,6 +30,8 @@ let MenuGroup = class MenuGroup extends baseClass {
28
30
  this.checkable = null;
29
31
  this.menuContext = null;
30
32
  this[internals].role = 'none';
33
+ // TODO: single-select items should not be allowed to uncheck themselves.
34
+ // A single change event should be emitted from the group instead.
31
35
  this.addEventListener('change', (event) => {
32
36
  if (this.checkable === 'single') {
33
37
  const composedPath = event.composedPath();
@@ -43,8 +47,8 @@ let MenuGroup = class MenuGroup extends baseClass {
43
47
  render() {
44
48
  return html `<slot></slot>`;
45
49
  }
46
- };
47
- MenuGroup.styles = [
50
+ }
51
+ MenuGroupElement.styles = [
48
52
  css `
49
53
  :host {
50
54
  display: contents;
@@ -54,12 +58,8 @@ MenuGroup.styles = [
54
58
  __decorate([
55
59
  provide({ context: menuItemCheckable }),
56
60
  property({ reflect: true })
57
- ], MenuGroup.prototype, "checkable", void 0);
61
+ ], MenuGroupElement.prototype, "checkable", void 0);
58
62
  __decorate([
59
63
  consume({ context: menuContext, subscribe: true })
60
- ], MenuGroup.prototype, "menuContext", void 0);
61
- MenuGroup = __decorate([
62
- customElement('md-menu-group')
63
- ], MenuGroup);
64
- export { MenuGroup };
65
- //# sourceMappingURL=md-menu-group.js.map
64
+ ], MenuGroupElement.prototype, "menuContext", void 0);
65
+ //# sourceMappingURL=menu-group-element.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"menu-group-element.js","sourceRoot":"","sources":["menu-group-element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,OAAO,EAAE,OAAO,EAAC,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EACL,SAAS,EACT,qBAAqB,GACtB,MAAM,yCAAyC,CAAC;AAEjD,OAAO,EACL,WAAW,EACX,iBAAiB,GAGlB,MAAM,WAAW,CAAC;AAEnB,wCAAwC;AACxC,MAAM,SAAS,GAAG,qBAAqB,CAAC,UAAU,CAAC,CAAC;AAEpD;;;;GAIG;AACH,MAAM,OAAO,gBAAiB,SAAQ,SAAS;IAa7C,mCAAmC;IAEnC,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,WAAW,EAAE,IAAI,IAAI,IAAI,CAAC;IACxC,CAAC;IAED,IAAI,KAAK;QACP,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,CAClD,CAAC,IAAI,EAAE,EAAE,CACP,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC;YAClC,IAAI,CAAC,8BAA8B,CACtC,CAAC;IACJ,CAAC;IAKD;QACE,KAAK,EAAE,CAAC;QApBV,cAAS,GAA6B,IAAI,CAAC;QAiB1B,gBAAW,GAAuB,IAAI,CAAC;QAItD,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,GAAG,MAAM,CAAC;QAC9B,yEAAyE;QACzE,kEAAkE;QAClE,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,KAAY,EAAE,EAAE;YAC/C,IAAI,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC;gBAChC,MAAM,YAAY,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;gBAC1C,MAAM,KAAK,GAAG,IAAI,CAAC,KAAiD,CAAC;gBACrE,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;oBACzB,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;wBACjD,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;oBACvB,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAjDe,uBAAM,GAAwB;IAC5C,GAAG,CAAA;;;;KAIF;CACF,AANqB,CAMpB;AAIF;IAFC,OAAO,CAAC,EAAC,OAAO,EAAE,iBAAiB,EAAC,CAAC;IACrC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;mDACiB;AAiB1B;IADhB,OAAO,CAAC,EAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAC,CAAC;qDACO","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {consume, provide} from '@lit/context';\nimport {css, CSSResultOrNative, html, LitElement} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {\n internals,\n mixinElementInternals,\n} from '../../../behaviors/element-internals.js';\n\nimport {\n menuContext,\n menuItemCheckable,\n type MenuContext,\n type MenuItemCheckable,\n} from './menu.js';\n\n// Separate variable needed for closure.\nconst baseClass = mixinElementInternals(LitElement);\n\n/**\n * A Material Design menu group component.\n *\n * @slot - Used to display the menu group's items.\n */\nexport class MenuGroupElement extends baseClass {\n static override styles: CSSResultOrNative[] = [\n css`\n :host {\n display: contents;\n }\n `,\n ];\n\n @provide({context: menuItemCheckable})\n @property({reflect: true})\n checkable: MenuItemCheckable | null = null;\n\n // TODO: add optional section label\n\n get menu(): HTMLElement | null {\n return this.menuContext?.menu || null;\n }\n\n get items(): HTMLElement[] {\n return (this.menuContext?.getItems?.() || []).filter(\n (item) =>\n this.compareDocumentPosition(item) &\n Node.DOCUMENT_POSITION_CONTAINED_BY,\n );\n }\n\n @consume({context: menuContext, subscribe: true})\n private readonly menuContext: MenuContext | null = null;\n\n constructor() {\n super();\n this[internals].role = 'none';\n // TODO: single-select items should not be allowed to uncheck themselves.\n // A single change event should be emitted from the group instead.\n this.addEventListener('change', (event: Event) => {\n if (this.checkable === 'single') {\n const composedPath = event.composedPath();\n const items = this.items as Array<HTMLElement & {checked?: boolean}>;\n for (const item of items) {\n if (!composedPath.includes(item) && item.checked) {\n item.checked = false;\n }\n }\n }\n });\n }\n\n protected override render() {\n return html`<slot></slot>`;\n }\n}\n"]}