@material/web 2.4.2-nightly.fd17013.0 → 2.5.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 (164) hide show
  1. package/custom-elements.json +44986 -0
  2. package/labs/gb/components/badge/_badge-tokens.scss +18 -0
  3. package/labs/gb/components/badge/badge-element.d.ts +15 -0
  4. package/labs/gb/components/badge/badge-element.js +49 -0
  5. package/labs/gb/components/badge/badge-element.js.map +1 -0
  6. package/labs/gb/components/badge/badge.css +4 -0
  7. package/labs/gb/components/badge/badge.css.map +1 -0
  8. package/labs/gb/components/badge/badge.cssresult.d.ts +3 -0
  9. package/labs/gb/components/badge/badge.cssresult.js +14 -0
  10. package/labs/gb/components/badge/badge.cssresult.js.map +1 -0
  11. package/labs/gb/components/badge/badge.d.ts +32 -0
  12. package/labs/gb/components/badge/badge.js +35 -0
  13. package/labs/gb/components/badge/badge.js.map +1 -0
  14. package/labs/gb/components/badge/badge.scss +49 -0
  15. package/labs/gb/components/badge/md-gb-badge.d.ts +12 -0
  16. package/labs/gb/components/badge/md-gb-badge.js +8 -0
  17. package/labs/gb/components/badge/md-gb-badge.js.map +1 -0
  18. package/labs/gb/components/button/_button-tokens.scss +2 -0
  19. package/labs/gb/components/button/{md-button.d.ts → button-element.d.ts} +31 -8
  20. package/labs/gb/components/button/{md-button.js → button-element.js} +119 -20
  21. package/labs/gb/components/button/button-element.js.map +1 -0
  22. package/labs/gb/components/button/button.css.map +1 -1
  23. package/labs/gb/components/button/md-gb-button.d.ts +12 -0
  24. package/labs/gb/components/button/md-gb-button.js +8 -0
  25. package/labs/gb/components/button/md-gb-button.js.map +1 -0
  26. package/labs/gb/components/card/_card-tokens.scss +2 -0
  27. package/labs/gb/components/card/card-element.d.ts +43 -0
  28. package/labs/gb/components/card/card-element.js +169 -0
  29. package/labs/gb/components/card/card-element.js.map +1 -0
  30. package/labs/gb/components/card/card.css.map +1 -1
  31. package/labs/gb/components/card/md-gb-card.d.ts +12 -0
  32. package/labs/gb/components/card/md-gb-card.js +8 -0
  33. package/labs/gb/components/card/md-gb-card.js.map +1 -0
  34. package/labs/gb/components/checkbox/_checkbox-tokens.scss +2 -0
  35. package/labs/gb/components/checkbox/{md-checkbox.d.ts → checkbox-element.d.ts} +15 -7
  36. package/labs/gb/components/checkbox/{md-checkbox.js → checkbox-element.js} +26 -16
  37. package/labs/gb/components/checkbox/checkbox-element.js.map +1 -0
  38. package/labs/gb/components/checkbox/checkbox.css.map +1 -1
  39. package/labs/gb/components/checkbox/md-gb-checkbox.d.ts +12 -0
  40. package/labs/gb/components/checkbox/md-gb-checkbox.js +8 -0
  41. package/labs/gb/components/checkbox/md-gb-checkbox.js.map +1 -0
  42. package/labs/gb/components/divider/_divider-tokens.scss +2 -0
  43. package/labs/gb/components/divider/{md-divider.d.ts → divider-element.d.ts} +5 -7
  44. package/labs/gb/components/divider/{md-divider.js → divider-element.js} +10 -10
  45. package/labs/gb/components/divider/divider-element.js.map +1 -0
  46. package/labs/gb/components/divider/divider.css.map +1 -1
  47. package/labs/gb/components/divider/md-gb-divider.d.ts +12 -0
  48. package/labs/gb/components/divider/md-gb-divider.js +8 -0
  49. package/labs/gb/components/divider/md-gb-divider.js.map +1 -0
  50. package/labs/gb/components/fab/_fab-tokens.scss +2 -0
  51. package/labs/gb/components/fab/fab-element.d.ts +31 -0
  52. package/labs/gb/components/fab/{md-fab.js → fab-element.js} +22 -11
  53. package/labs/gb/components/fab/fab-element.js.map +1 -0
  54. package/labs/gb/components/fab/fab.css.map +1 -1
  55. package/labs/gb/components/fab/md-gb-fab.d.ts +12 -0
  56. package/labs/gb/components/fab/md-gb-fab.js +8 -0
  57. package/labs/gb/components/fab/md-gb-fab.js.map +1 -0
  58. package/labs/gb/components/iconbutton/_icon-button-tokens.scss +2 -0
  59. package/labs/gb/components/iconbutton/{md-icon-button.d.ts → icon-button-element.d.ts} +15 -7
  60. package/labs/gb/components/iconbutton/{md-icon-button.js → icon-button-element.js} +30 -20
  61. package/labs/gb/components/iconbutton/icon-button-element.js.map +1 -0
  62. package/labs/gb/components/iconbutton/icon-button.css.map +1 -1
  63. package/labs/gb/components/iconbutton/md-gb-icon-button.d.ts +12 -0
  64. package/labs/gb/components/iconbutton/md-gb-icon-button.js +8 -0
  65. package/labs/gb/components/iconbutton/md-gb-icon-button.js.map +1 -0
  66. package/labs/gb/components/list/_list-tokens.scss +4 -0
  67. package/labs/gb/components/list/{md-list.d.ts → list-element.d.ts} +6 -7
  68. package/labs/gb/components/list/{md-list.js → list-element.js} +11 -10
  69. package/labs/gb/components/list/list-element.js.map +1 -0
  70. package/labs/gb/components/list/list-item-element.d.ts +77 -0
  71. package/labs/gb/components/list/{md-list-item.js → list-item-element.js} +55 -20
  72. package/labs/gb/components/list/list-item-element.js.map +1 -0
  73. package/labs/gb/components/list/list.css.map +1 -1
  74. package/labs/gb/components/list/md-gb-list-item.d.ts +12 -0
  75. package/labs/gb/components/list/md-gb-list-item.js +8 -0
  76. package/labs/gb/components/list/md-gb-list-item.js.map +1 -0
  77. package/labs/gb/components/list/md-gb-list.d.ts +12 -0
  78. package/labs/gb/components/list/md-gb-list.js +8 -0
  79. package/labs/gb/components/list/md-gb-list.js.map +1 -0
  80. package/labs/gb/components/menu/_menu-tokens.scss +4 -0
  81. package/labs/gb/components/menu/md-gb-menu-group.d.ts +12 -0
  82. package/labs/gb/components/menu/md-gb-menu-group.js +8 -0
  83. package/labs/gb/components/menu/md-gb-menu-group.js.map +1 -0
  84. package/labs/gb/components/menu/md-gb-menu-item.d.ts +12 -0
  85. package/labs/gb/components/menu/md-gb-menu-item.js +8 -0
  86. package/labs/gb/components/menu/md-gb-menu-item.js.map +1 -0
  87. package/labs/gb/components/menu/md-gb-menu.d.ts +12 -0
  88. package/labs/gb/components/menu/md-gb-menu.js +8 -0
  89. package/labs/gb/components/menu/md-gb-menu.js.map +1 -0
  90. package/labs/gb/components/menu/{md-menu.d.ts → menu-element.d.ts} +11 -7
  91. package/labs/gb/components/menu/{md-menu.js → menu-element.js} +16 -10
  92. package/labs/gb/components/menu/menu-element.js.map +1 -0
  93. package/labs/gb/components/menu/{md-menu-group.d.ts → menu-group-element.d.ts} +3 -6
  94. package/labs/gb/components/menu/{md-menu-group.js → menu-group-element.js} +11 -11
  95. package/labs/gb/components/menu/menu-group-element.js.map +1 -0
  96. package/labs/gb/components/menu/menu-item-element.d.ts +56 -0
  97. package/labs/gb/components/menu/{md-menu-item.js → menu-item-element.js} +41 -13
  98. package/labs/gb/components/menu/menu-item-element.js.map +1 -0
  99. package/labs/gb/components/menu/menu.css.map +1 -1
  100. package/labs/gb/components/menu/menu.js +1 -1
  101. package/labs/gb/components/menu/menu.js.map +1 -1
  102. package/labs/gb/components/radio/_radio-tokens.scss +2 -0
  103. package/labs/gb/components/radio/md-gb-radio.d.ts +12 -0
  104. package/labs/gb/components/radio/md-gb-radio.js +8 -0
  105. package/labs/gb/components/radio/md-gb-radio.js.map +1 -0
  106. package/labs/gb/components/radio/{md-radio.d.ts → radio-element.d.ts} +10 -7
  107. package/labs/gb/components/radio/{md-radio.js → radio-element.js} +19 -14
  108. package/labs/gb/components/radio/radio-element.js.map +1 -0
  109. package/labs/gb/components/radio/radio.css.map +1 -1
  110. package/labs/gb/components/splitbutton/_split-button-tokens.scss +4 -0
  111. package/labs/gb/components/splitbutton/md-gb-split-button.d.ts +12 -0
  112. package/labs/gb/components/splitbutton/md-gb-split-button.js +8 -0
  113. package/labs/gb/components/splitbutton/md-gb-split-button.js.map +1 -0
  114. package/labs/gb/components/splitbutton/split-button-element.d.ts +33 -0
  115. package/labs/gb/components/splitbutton/{md-split-button.js → split-button-element.js} +21 -12
  116. package/labs/gb/components/splitbutton/split-button-element.js.map +1 -0
  117. package/labs/gb/components/splitbutton/split-button.css.map +1 -1
  118. package/labs/gb/components/splitbutton/split-button.d.ts +5 -5
  119. package/labs/gb/components/splitbutton/split-button.js +5 -5
  120. package/labs/gb/components/splitbutton/split-button.js.map +1 -1
  121. package/labs/gb/components/switch/_switch-tokens.scss +2 -0
  122. package/labs/gb/components/switch/md-gb-switch.d.ts +12 -0
  123. package/labs/gb/components/switch/md-gb-switch.js +8 -0
  124. package/labs/gb/components/switch/md-gb-switch.js.map +1 -0
  125. package/labs/gb/components/switch/{md-switch.d.ts → switch-element.d.ts} +19 -7
  126. package/labs/gb/components/switch/{md-switch.js → switch-element.js} +28 -14
  127. package/labs/gb/components/switch/switch-element.js.map +1 -0
  128. package/labs/gb/components/switch/switch.css.map +1 -1
  129. package/labs/gb/styles/adopt-styles.js +7 -7
  130. package/labs/gb/styles/adopt-styles.js.map +1 -1
  131. package/labs/gb/styles/icon/{md-icon.d.ts → icon-element.d.ts} +1 -7
  132. package/labs/gb/styles/icon/{md-icon.js → icon-element.js} +8 -10
  133. package/labs/gb/styles/icon/icon-element.js.map +1 -0
  134. package/labs/gb/styles/icon/md-gb-icon.d.ts +12 -0
  135. package/labs/gb/styles/icon/md-gb-icon.js +8 -0
  136. package/labs/gb/styles/icon/md-gb-icon.js.map +1 -0
  137. package/list/internal/listitem/list-item.d.ts +4 -1
  138. package/list/internal/listitem/list-item.js +4 -1
  139. package/list/internal/listitem/list-item.js.map +1 -1
  140. package/menu/internal/submenu/sub-menu.d.ts +5 -1
  141. package/menu/internal/submenu/sub-menu.js +5 -1
  142. package/menu/internal/submenu/sub-menu.js.map +1 -1
  143. package/package.json +22 -3
  144. package/labs/gb/components/button/md-button.js.map +0 -1
  145. package/labs/gb/components/card/md-card.d.ts +0 -30
  146. package/labs/gb/components/card/md-card.js +0 -85
  147. package/labs/gb/components/card/md-card.js.map +0 -1
  148. package/labs/gb/components/checkbox/md-checkbox.js.map +0 -1
  149. package/labs/gb/components/divider/md-divider.js.map +0 -1
  150. package/labs/gb/components/fab/md-fab.d.ts +0 -22
  151. package/labs/gb/components/fab/md-fab.js.map +0 -1
  152. package/labs/gb/components/iconbutton/md-icon-button.js.map +0 -1
  153. package/labs/gb/components/list/md-list-item.d.ts +0 -44
  154. package/labs/gb/components/list/md-list-item.js.map +0 -1
  155. package/labs/gb/components/list/md-list.js.map +0 -1
  156. package/labs/gb/components/menu/md-menu-group.js.map +0 -1
  157. package/labs/gb/components/menu/md-menu-item.d.ts +0 -30
  158. package/labs/gb/components/menu/md-menu-item.js.map +0 -1
  159. package/labs/gb/components/menu/md-menu.js.map +0 -1
  160. package/labs/gb/components/radio/md-radio.js.map +0 -1
  161. package/labs/gb/components/splitbutton/md-split-button.d.ts +0 -26
  162. package/labs/gb/components/splitbutton/md-split-button.js.map +0 -1
  163. package/labs/gb/components/switch/md-switch.js.map +0 -1
  164. package/labs/gb/styles/icon/md-icon.js.map +0 -1
@@ -0,0 +1,31 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2026 Google LLC
4
+ * SPDX-License-Identifier: Apache-2.0
5
+ */
6
+ import { CSSResultOrNative, LitElement } from 'lit';
7
+ import { type FabColor, type FabSize } from './fab.js';
8
+ /**
9
+ * A Material Design fab component.
10
+ *
11
+ * @slot - Used to display an icon and optional label.
12
+ * @csspart fab - The FAB's root element.
13
+ * @cssprop --container-color
14
+ * @cssprop --container-elevation
15
+ * @cssprop --container-height
16
+ * @cssprop --container-shape
17
+ * @cssprop --icon-color
18
+ * @cssprop --icon-label-space
19
+ * @cssprop --icon-size
20
+ * @cssprop --label-text
21
+ * @cssprop --label-text-color
22
+ * @cssprop --label-text-tracking
23
+ * @cssprop --leading-space
24
+ * @cssprop --trailing-space
25
+ */
26
+ export declare class FabElement extends LitElement {
27
+ static styles: CSSResultOrNative[];
28
+ color: FabColor;
29
+ size: FabSize;
30
+ protected render(): import("lit-html").TemplateResult<1>;
31
+ }
@@ -5,7 +5,7 @@
5
5
  */
6
6
  import { __decorate } from "tslib";
7
7
  import { css, html, LitElement } from 'lit';
8
- import { customElement, property } from 'lit/decorators.js';
8
+ import { property } from 'lit/decorators.js';
9
9
  import focusRingStyles from '../focus/focus-ring.css' with { type: 'css' }; // github-only
10
10
  // import focusRingStyles from '../focus/focus-ring.cssresult.js'; // google3-only
11
11
  import rippleStyles from '../ripple/ripple.css' with { type: 'css' }; // github-only
@@ -15,8 +15,23 @@ import fabStyles from './fab.css' with { type: 'css' }; // github-only
15
15
  import { fab } from './fab.js';
16
16
  /**
17
17
  * A Material Design fab component.
18
+ *
19
+ * @slot - Used to display an icon and optional label.
20
+ * @csspart fab - The FAB's root element.
21
+ * @cssprop --container-color
22
+ * @cssprop --container-elevation
23
+ * @cssprop --container-height
24
+ * @cssprop --container-shape
25
+ * @cssprop --icon-color
26
+ * @cssprop --icon-label-space
27
+ * @cssprop --icon-size
28
+ * @cssprop --label-text
29
+ * @cssprop --label-text-color
30
+ * @cssprop --label-text-tracking
31
+ * @cssprop --leading-space
32
+ * @cssprop --trailing-space
18
33
  */
19
- let Fab = class Fab extends LitElement {
34
+ export class FabElement extends LitElement {
20
35
  constructor() {
21
36
  super(...arguments);
22
37
  this.color = 'primary-container';
@@ -29,8 +44,8 @@ let Fab = class Fab extends LitElement {
29
44
  <slot></slot>
30
45
  </button>`;
31
46
  }
32
- };
33
- Fab.styles = [
47
+ }
48
+ FabElement.styles = [
34
49
  focusRingStyles,
35
50
  rippleStyles,
36
51
  fabStyles,
@@ -45,12 +60,8 @@ Fab.styles = [
45
60
  ];
46
61
  __decorate([
47
62
  property()
48
- ], Fab.prototype, "color", void 0);
63
+ ], FabElement.prototype, "color", void 0);
49
64
  __decorate([
50
65
  property()
51
- ], Fab.prototype, "size", void 0);
52
- Fab = __decorate([
53
- customElement('md-fab')
54
- ], Fab);
55
- export { Fab };
56
- //# sourceMappingURL=md-fab.js.map
66
+ ], FabElement.prototype, "size", void 0);
67
+ //# sourceMappingURL=fab-element.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"fab-element.js","sourceRoot":"","sources":["fab-element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE3C,OAAO,eAAe,MAAM,yBAAyB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACxF,kFAAkF;AAClF,OAAO,YAAY,MAAM,sBAAsB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAClF,4EAA4E;AAC5E,OAAO,SAAS,MAAM,WAAW,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACpE,0EAA0E;AAE1E,OAAO,EAAC,GAAG,EAA8B,MAAM,UAAU,CAAC;AAE1D;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,OAAO,UAAW,SAAQ,UAAU;IAA1C;;QAec,UAAK,GAAa,mBAAmB,CAAC;QACtC,SAAI,GAAY,SAAS,CAAC;IASxC,CAAC;IAPoB,MAAM;QACvB,OAAO,IAAI,CAAA;;eAEA,GAAG,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAC,CAAC;;cAE1C,CAAC;IACb,CAAC;;AAvBe,iBAAM,GAAwB;IAC5C,eAAe;IACf,YAAY;IACZ,SAAS;IACT,GAAG,CAAA;;;;;;;KAOF;CACF,AAZqB,CAYpB;AAEU;IAAX,QAAQ,EAAE;yCAAuC;AACtC;IAAX,QAAQ,EAAE;wCAA2B","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {css, CSSResultOrNative, html, LitElement} from 'lit';\nimport {property} from 'lit/decorators.js';\n\nimport focusRingStyles from '../focus/focus-ring.css' with {type: 'css'}; // github-only\n// import focusRingStyles from '../focus/focus-ring.cssresult.js'; // google3-only\nimport rippleStyles from '../ripple/ripple.css' with {type: 'css'}; // github-only\n// import rippleStyles from '../ripple/ripple.cssresult.js'; // google3-only\nimport fabStyles from './fab.css' with {type: 'css'}; // github-only\n// import {styles as fabStyles} from './fab.cssresult.js'; // google3-only\n\nimport {fab, type FabColor, type FabSize} from './fab.js';\n\n/**\n * A Material Design fab component.\n *\n * @slot - Used to display an icon and optional label.\n * @csspart fab - The FAB's root element.\n * @cssprop --container-color\n * @cssprop --container-elevation\n * @cssprop --container-height\n * @cssprop --container-shape\n * @cssprop --icon-color\n * @cssprop --icon-label-space\n * @cssprop --icon-size\n * @cssprop --label-text\n * @cssprop --label-text-color\n * @cssprop --label-text-tracking\n * @cssprop --leading-space\n * @cssprop --trailing-space\n */\nexport class FabElement extends LitElement {\n static override styles: CSSResultOrNative[] = [\n focusRingStyles,\n rippleStyles,\n fabStyles,\n css`\n :host {\n display: inline-flex;\n }\n .fab {\n flex: 1;\n }\n `,\n ];\n\n @property() color: FabColor = 'primary-container';\n @property() size: FabSize = 'default';\n\n protected override render() {\n return html`<button\n part=\"fab\"\n class=\"${fab({color: this.color, size: this.size})}\">\n <slot></slot>\n </button>`;\n }\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["fab.scss","_fab-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GAUA,oCACA,mBAEI,KCPF,+BACA,wDACA,yBACA,iDACA,2BACA,yBACA,kBACA,+CACA,iCACA,iEACA,sBACA,8CAIA,iFAIA,mFAIA,yDACA,uDACA,6DDFE,iBCMF,+CACA,6CACA,mDDJE,6BCQF,2DACA,yDACA,+DDNE,mBCUF,iDACA,+CACA,qDDRE,4BCYF,0DACA,wDACA,8DDVE,kBCcF,gDACA,8CACA,oDDZE,YCgBF,yBACA,2DACA,kBACA,+CACA,iEACA,sBACA,uBDlBE,YCsBF,yBACA,iDACA,yBACA,kBACA,kDACA,oEACA,sBACA,uBDzBE,KACE,gBACA,YACA,oBACA,mBACA,4BACA,+BACA,wCACA,qCACA,sCACA,8BACA,uBACA,0CACA,0DACA,8DACA,mCACA","file":"fab.css"}
1
+ {"version":3,"sourceRoot":"","sources":["fab.scss","_fab-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GAUA,oCACA,mBAEI,KCNF,+BACA,wDACA,yBACA,iDACA,2BACA,yBACA,kBACA,+CACA,iCACA,iEACA,sBACA,uBDDE,uBCMF,wDDFE,yBCMF,wDDFE,2BCMF,yDACA,uDACA,6DDJE,iBCQF,+CACA,6CACA,mDDNE,6BCUF,2DACA,yDACA,+DDRE,mBCYF,iDACA,+CACA,qDDVE,4BCcF,0DACA,wDACA,8DDZE,kBCgBF,gDACA,8CACA,oDDdE,YCkBF,yBACA,2DACA,kBACA,+CACA,iEACA,sBACA,uBDpBE,YCwBF,yBACA,iDACA,yBACA,kBACA,kDACA,oEACA,sBACA,uBD3BE,KACE,gBACA,YACA,oBACA,mBACA,4BACA,+BACA,wCACA,qCACA,sCACA,8BACA,uBACA,0CACA,0DACA,8DACA,mCACA","file":"fab.css"}
@@ -0,0 +1,12 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2026 Google LLC
4
+ * SPDX-License-Identifier: Apache-2.0
5
+ */
6
+ import { FabElement } from './fab-element.js';
7
+ declare global {
8
+ interface HTMLElementTagNameMap {
9
+ /** A Material Design component. */
10
+ 'md-gb-fab': FabElement;
11
+ }
12
+ }
@@ -0,0 +1,8 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2026 Google LLC
4
+ * SPDX-License-Identifier: Apache-2.0
5
+ */
6
+ import { FabElement } from './fab-element.js';
7
+ customElements.define('md-gb-fab', FabElement);
8
+ //# sourceMappingURL=md-gb-fab.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"md-gb-fab.js","sourceRoot":"","sources":["md-gb-fab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,UAAU,EAAC,MAAM,kBAAkB,CAAC;AAS5C,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {FabElement} from './fab-element.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design component. */\n 'md-gb-fab': FabElement;\n }\n}\n\ncustomElements.define('md-gb-fab', FabElement);\n"]}
@@ -4,6 +4,7 @@
4
4
  //
5
5
 
6
6
  @mixin root {
7
+ // LINT.IfChange
7
8
  --container-color: transparent;
8
9
  --container-height: auto;
9
10
  --container-shape: calc(var(--container-height) / 2);
@@ -13,6 +14,7 @@
13
14
  --outline-width: 1px;
14
15
  --leading-space: 0;
15
16
  --trailing-space: 0;
17
+ // LINT.ThenChange(md-icon-button.ts) keep in sync with `@cssprop` jsdoc tags
16
18
  }
17
19
 
18
20
  @mixin selected {
@@ -5,17 +5,25 @@
5
5
  */
6
6
  import { CSSResultOrNative, LitElement } from 'lit';
7
7
  import type { IconButtonColor, IconButtonSize, IconButtonWidth } from './icon-button.js';
8
- declare global {
9
- interface HTMLElementTagNameMap {
10
- /** A Material Design icon button component. */
11
- 'md-icon-button': IconButton;
12
- }
13
- }
14
8
  declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<(abstract new (...args: any[]) => import("../../../behaviors/element-internals.js").WithElementInternals) & typeof LitElement & import("../../../behaviors/form-associated.js").FormAssociatedConstructor, import("../../../behaviors/form-associated.js").FormAssociated>, import("../../../behaviors/form-submitter.js").FormSubmitter>>;
15
9
  /**
16
10
  * A Material Design icon button component.
11
+ *
12
+ * @slot - Used to display an icon.
13
+ * @fires {InputEvent} input - Fired when a toggle icon button is selected or unselected. --bubbles --composed
14
+ * @fires {Event} change - Fired when a toggle button is selected or unselected. --bubbles
15
+ * @csspart icon-btn - The icon button's root element.
16
+ * @cssprop --container-color
17
+ * @cssprop --container-height
18
+ * @cssprop --container-shape
19
+ * @cssprop --icon-color
20
+ * @cssprop --icon-size
21
+ * @cssprop --outline-color
22
+ * @cssprop --outline-width
23
+ * @cssprop --leading-space
24
+ * @cssprop --trailing-space
17
25
  */
18
- export declare class IconButton extends baseClass {
26
+ export declare class IconButtonElement extends baseClass {
19
27
  /** @nocollapse */
20
28
  static shadowRootOptions: ShadowRootInit;
21
29
  static styles: CSSResultOrNative[];
@@ -5,7 +5,7 @@
5
5
  */
6
6
  import { __decorate } from "tslib";
7
7
  import { css, html, LitElement, nothing } from 'lit';
8
- import { customElement, property } from 'lit/decorators.js';
8
+ import { property } from 'lit/decorators.js';
9
9
  import { mixinDelegatesAria } from '../../../../internal/aria/delegate.js';
10
10
  import { redispatchEvent } from '../../../../internal/events/redispatch-event.js';
11
11
  import { mixinElementInternals } from '../../../behaviors/element-internals.js';
@@ -18,8 +18,22 @@ import { iconButton } from './icon-button.js';
18
18
  const baseClass = mixinDelegatesAria(mixinFormSubmitter(mixinFormAssociated(mixinElementInternals(LitElement))));
19
19
  /**
20
20
  * A Material Design icon button component.
21
+ *
22
+ * @slot - Used to display an icon.
23
+ * @fires {InputEvent} input - Fired when a toggle icon button is selected or unselected. --bubbles --composed
24
+ * @fires {Event} change - Fired when a toggle button is selected or unselected. --bubbles
25
+ * @csspart icon-btn - The icon button's root element.
26
+ * @cssprop --container-color
27
+ * @cssprop --container-height
28
+ * @cssprop --container-shape
29
+ * @cssprop --icon-color
30
+ * @cssprop --icon-size
31
+ * @cssprop --outline-color
32
+ * @cssprop --outline-width
33
+ * @cssprop --leading-space
34
+ * @cssprop --trailing-space
21
35
  */
22
- let IconButton = class IconButton extends baseClass {
36
+ export class IconButtonElement extends baseClass {
23
37
  constructor() {
24
38
  super(...arguments);
25
39
  /**
@@ -120,13 +134,13 @@ let IconButton = class IconButton extends baseClass {
120
134
  this.selected = event.target.ariaPressed === 'true';
121
135
  redispatchEvent(this, event);
122
136
  }
123
- };
137
+ }
124
138
  /** @nocollapse */
125
- IconButton.shadowRootOptions = {
139
+ IconButtonElement.shadowRootOptions = {
126
140
  mode: 'open',
127
141
  delegatesFocus: true,
128
142
  };
129
- IconButton.styles = [
143
+ IconButtonElement.styles = [
130
144
  focusRingStyles,
131
145
  rippleStyles,
132
146
  iconButtonStyles,
@@ -141,36 +155,32 @@ IconButton.styles = [
141
155
  ];
142
156
  __decorate([
143
157
  property()
144
- ], IconButton.prototype, "color", void 0);
158
+ ], IconButtonElement.prototype, "color", void 0);
145
159
  __decorate([
146
160
  property()
147
- ], IconButton.prototype, "size", void 0);
161
+ ], IconButtonElement.prototype, "size", void 0);
148
162
  __decorate([
149
163
  property({ type: Boolean })
150
- ], IconButton.prototype, "square", void 0);
164
+ ], IconButtonElement.prototype, "square", void 0);
151
165
  __decorate([
152
166
  property()
153
- ], IconButton.prototype, "width", void 0);
167
+ ], IconButtonElement.prototype, "width", void 0);
154
168
  __decorate([
155
169
  property({ noAccessor: true })
156
- ], IconButton.prototype, "type", null);
170
+ ], IconButtonElement.prototype, "type", null);
157
171
  __decorate([
158
172
  property({ type: Boolean, attribute: 'soft-disabled', reflect: true })
159
- ], IconButton.prototype, "softDisabled", void 0);
173
+ ], IconButtonElement.prototype, "softDisabled", void 0);
160
174
  __decorate([
161
175
  property({ type: Boolean })
162
- ], IconButton.prototype, "selected", void 0);
176
+ ], IconButtonElement.prototype, "selected", void 0);
163
177
  __decorate([
164
178
  property()
165
- ], IconButton.prototype, "href", void 0);
179
+ ], IconButtonElement.prototype, "href", void 0);
166
180
  __decorate([
167
181
  property()
168
- ], IconButton.prototype, "download", void 0);
182
+ ], IconButtonElement.prototype, "download", void 0);
169
183
  __decorate([
170
184
  property()
171
- ], IconButton.prototype, "target", void 0);
172
- IconButton = __decorate([
173
- customElement('md-icon-button')
174
- ], IconButton);
175
- export { IconButton };
176
- //# sourceMappingURL=md-icon-button.js.map
185
+ ], IconButtonElement.prototype, "target", void 0);
186
+ //# sourceMappingURL=icon-button-element.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"icon-button-element.js","sourceRoot":"","sources":["icon-button-element.ts"],"names":[],"mappings":"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","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 {redispatchEvent} from '../../../../internal/events/redispatch-event.js';\nimport {mixinElementInternals} from '../../../behaviors/element-internals.js';\nimport {mixinFormAssociated} from '../../../behaviors/form-associated.js';\nimport {mixinFormSubmitter} from '../../../behaviors/form-submitter.js';\n\nimport focusRingStyles from '../focus/focus-ring.cssresult.js';\nimport rippleStyles from '../ripple/ripple.cssresult.js';\nimport iconButtonStyles from './icon-button.cssresult.js';\n\nimport type {\n IconButtonColor,\n IconButtonSize,\n IconButtonWidth,\n} from './icon-button.js';\nimport {iconButton} from './icon-button.js';\n\nconst baseClass = mixinDelegatesAria(\n mixinFormSubmitter(mixinFormAssociated(mixinElementInternals(LitElement))),\n);\n\n/**\n * A Material Design icon button component.\n *\n * @slot - Used to display an icon.\n * @fires {InputEvent} input - Fired when a toggle icon button is selected or unselected. --bubbles --composed\n * @fires {Event} change - Fired when a toggle button is selected or unselected. --bubbles\n * @csspart icon-btn - The icon button's root element.\n * @cssprop --container-color\n * @cssprop --container-height\n * @cssprop --container-shape\n * @cssprop --icon-color\n * @cssprop --icon-size\n * @cssprop --outline-color\n * @cssprop --outline-width\n * @cssprop --leading-space\n * @cssprop --trailing-space\n */\nexport class IconButtonElement extends baseClass {\n /** @nocollapse */\n static override shadowRootOptions: ShadowRootInit = {\n mode: 'open',\n delegatesFocus: true,\n };\n\n static override styles: CSSResultOrNative[] = [\n focusRingStyles,\n rippleStyles,\n iconButtonStyles,\n css`\n :host {\n display: inline-flex;\n }\n .icon-btn {\n flex: 1;\n }\n `,\n ];\n\n /**\n * The color of the button.\n */\n @property() color: IconButtonColor = 'standard';\n\n /**\n * The size of the button.\n */\n @property() size: IconButtonSize = 'sm';\n\n /**\n * Changes the shape of the button to be square.\n */\n @property({type: Boolean}) square = false;\n\n /**\n * Changes the width of the button.\n */\n @property() width: IconButtonWidth = '';\n\n /**\n * A string indicating the behavior of the button.\n *\n * - \"submit\" (default): A button that submits its associated form.\n * - \"reset\": A button that resets its associated form.\n * - \"button\": A normal button.\n * - \"toggle\": A toggle button using the `selected` property.\n * - \"link\": An anchor link (`<a>`). Type is always \"link\" when `href` is set.\n */\n @property({noAccessor: true})\n override get type(): string {\n return this.href ? 'link' : super.type;\n }\n override set type(type: string) {\n if (this.href && type !== 'link') {\n return;\n }\n super.type = type;\n }\n\n /**\n * Whether or not the button is \"soft-disabled\" (disabled but still\n * focusable).\n */\n @property({type: Boolean, attribute: 'soft-disabled', reflect: true})\n softDisabled = false;\n\n /**\n * Whether or not the button is selected, when `type=\"toggle\"`.\n */\n @property({type: Boolean}) selected = false;\n\n /**\n * The URL that the link button points to.\n */\n @property() href = '';\n\n /**\n * The filename to use when downloading the linked resource.\n */\n @property() download = '';\n\n /**\n * Where to display the linked `href` URL for a link button.\n */\n @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n protected override render() {\n const classes = iconButton({\n color: this.color,\n size: this.size,\n width: this.width,\n square: this.square,\n disabled: this.softDisabled,\n });\n\n const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;\n if (this.type === 'link') {\n return html`<a\n part=\"icon-btn\"\n class=${classes}\n href=${this.href}\n download=${this.download || nothing}\n target=${this.target || nothing}\n aria-label=${ariaLabel || nothing}\n aria-haspopup=${ariaHasPopup || nothing}\n aria-expanded=${ariaExpanded || nothing}\n aria-disabled=${this.disabled || this.softDisabled || nothing}\n tabindex=${this.disabled && !this.softDisabled ? -1 : nothing}>\n <slot></slot>\n </a>`;\n }\n\n return html`<button\n part=\"icon-btn\"\n class=${classes}\n type=\"button\"\n ?disabled=${this.disabled}\n aria-disabled=${this.softDisabled || nothing}\n aria-label=${ariaLabel || nothing}\n aria-pressed=${this.type === 'toggle' ? this.selected : nothing}\n aria-haspopup=${ariaHasPopup || nothing}\n aria-expanded=${ariaExpanded || nothing}\n @change=${this.handleChange}>\n <slot></slot>\n </button>`;\n }\n\n private handleChange(event: Event) {\n this.selected = (event.target as HTMLElement).ariaPressed === 'true';\n redispatchEvent(this, event);\n }\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["icon-button.scss","_icon-button-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,wBAEI,UCNF,+BACA,yBACA,qDACA,2BACA,kBACA,6BACA,qBACA,mBACA,oBDCE,qDCGF,iDACA,0CDDE,0BCKF,+CACA,6CDJI,2ECQJ,yDACA,qDDNI,wECUJ,+CACA,6CDPE,yBCWF,2DACA,yDDVI,uECcJ,iDACA,+CDXE,4BCeF,qDACA,qDDdI,0ECkBJ,uDACA,qDDfE,4BCmBF,qDDjBI,0ECqBJ,0CDjBE,sBCqBF,yBACA,kBACA,qBACA,sBDtBI,8CC0BJ,qBACA,sBDxBI,4CC4BJ,sBACA,uBDzBE,sBC6BF,yBACA,qBACA,sBD7BI,8CCiCJ,qBACA,sBD/BI,4CCmCJ,sBACA,uBDhCE,sBCoCF,yBACA,sBACA,uBDpCI,8CCwCJ,sBACA,uBDtCI,4CC0CJ,sBACA,uBDxCI,oEC4CJ,iDDxCE,sBC4CF,yBACA,kBACA,sBACA,uBD7CI,8CCiDJ,sBACA,uBD/CI,4CCmDJ,sBACA,qBACA,uBDlDI,oECsDJ,iDDlDE,sBCsDF,0BACA,kBACA,sBACA,qBACA,uBDxDI,8CC4DJ,sBACA,uBD1DI,4CC8DJ,sBACA,uBD5DI,oECgEJ,iDD5DE,0BCgEF,iDD9DI,8CCkEJ,iDD/DI,8CCmEJ,iDDhEI,8CCoEJ,iDDjEI,wECqEJ,qDDjEE,+DCqEF,iDDnEI,mFCuEJ,iDDpEI,mFCwEJ,iDDrEI,mFCyEJ,iDDrEE,kCCyEF,wEACA,mEDtEE,UACE,oBACA,mBACA,wCACA,uDACA,qCACA,+BACA,wBACA,WACE,iFAEF,iCAGF,+CACE,eAGF,8CACE","file":"icon-button.css"}
1
+ {"version":3,"sourceRoot":"","sources":["icon-button.scss","_icon-button-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,wBAEI,UCLF,+BACA,yBACA,qDACA,2BACA,kBACA,6BACA,qBACA,mBACA,yEAKA,iDACA,0CDHE,0BCOF,+CACA,6CDNI,2ECUJ,yDACA,qDDRI,wECYJ,+CACA,6CDTE,yBCaF,2DACA,yDDZI,uECgBJ,iDACA,+CDbE,4BCiBF,qDACA,qDDhBI,0ECoBJ,uDACA,qDDjBE,4BCqBF,qDDnBI,0ECuBJ,0CDnBE,sBCuBF,yBACA,kBACA,qBACA,sBDxBI,8CC4BJ,qBACA,sBD1BI,4CC8BJ,sBACA,uBD3BE,sBC+BF,yBACA,qBACA,sBD/BI,8CCmCJ,qBACA,sBDjCI,4CCqCJ,sBACA,uBDlCE,sBCsCF,yBACA,sBACA,uBDtCI,8CC0CJ,sBACA,uBDxCI,4CC4CJ,sBACA,uBD1CI,oEC8CJ,iDD1CE,sBC8CF,yBACA,kBACA,sBACA,uBD/CI,8CCmDJ,sBACA,uBDjDI,4CCqDJ,sBACA,qBACA,uBDpDI,oECwDJ,iDDpDE,sBCwDF,0BACA,kBACA,sBACA,qBACA,uBD1DI,8CC8DJ,sBACA,uBD5DI,4CCgEJ,sBACA,uBD9DI,oECkEJ,iDD9DE,0BCkEF,iDDhEI,8CCoEJ,iDDjEI,8CCqEJ,iDDlEI,8CCsEJ,iDDnEI,wECuEJ,qDDnEE,+DCuEF,iDDrEI,mFCyEJ,iDDtEI,mFC0EJ,iDDvEI,mFC2EJ,iDDvEE,kCC2EF,wEACA,mEDxEE,UACE,oBACA,mBACA,wCACA,uDACA,qCACA,+BACA,wBACA,WACE,iFAEF,iCAGF,+CACE,eAGF,8CACE","file":"icon-button.css"}
@@ -0,0 +1,12 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2026 Google LLC
4
+ * SPDX-License-Identifier: Apache-2.0
5
+ */
6
+ import { IconButtonElement } from './icon-button-element.js';
7
+ declare global {
8
+ interface HTMLElementTagNameMap {
9
+ /** A Material Design component. */
10
+ 'md-gb-icon-button': IconButtonElement;
11
+ }
12
+ }
@@ -0,0 +1,8 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2026 Google LLC
4
+ * SPDX-License-Identifier: Apache-2.0
5
+ */
6
+ import { IconButtonElement } from './icon-button-element.js';
7
+ customElements.define('md-gb-icon-button', IconButtonElement);
8
+ //# sourceMappingURL=md-gb-icon-button.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"md-gb-icon-button.js","sourceRoot":"","sources":["md-gb-icon-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,iBAAiB,EAAC,MAAM,0BAA0B,CAAC;AAS3D,cAAc,CAAC,MAAM,CAAC,mBAAmB,EAAE,iBAAiB,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {IconButtonElement} from './icon-button-element.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design component. */\n 'md-gb-icon-button': IconButtonElement;\n }\n}\n\ncustomElements.define('md-gb-icon-button', IconButtonElement);\n"]}
@@ -4,8 +4,10 @@
4
4
  //
5
5
 
6
6
  @mixin root {
7
+ // LINT.IfChange
7
8
  --container-shape: var(--md-sys-shape-corner-lg);
8
9
  --gap: 0;
10
+ // LINT.ThenChange(md-list.ts) keep in sync with `@cssprop` jsdoc tags
9
11
  }
10
12
 
11
13
  @mixin segmented {
@@ -13,6 +15,7 @@
13
15
  }
14
16
 
15
17
  @mixin item {
18
+ // LINT.IfChange
16
19
  --container-height: 56px;
17
20
  --container-color: transparent;
18
21
  --container-shape: var(--md-sys-shape-corner-xs);
@@ -45,6 +48,7 @@
45
48
  --md-sys-typescale-label-sm-tracking
46
49
  );
47
50
  --trailing-supporting-text-color: var(--md-sys-color-on-surface-variant);
51
+ // LINT.ThenChange(md-list-item.ts) keep in sync with `@cssprop` jsdoc tags
48
52
  }
49
53
 
50
54
  @mixin item-segmented {
@@ -4,17 +4,16 @@
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
6
  import { CSSResultOrNative, LitElement } from 'lit';
7
- declare global {
8
- interface HTMLElementTagNameMap {
9
- /** A Material Design list component. */
10
- 'md-list': List;
11
- }
12
- }
13
7
  declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<typeof LitElement, import("../../../behaviors/element-internals.js").WithElementInternals>;
14
8
  /**
15
9
  * A Material Design list component.
10
+ *
11
+ * @slot - Used to display list items.
12
+ * @csspart list - The list's root element.
13
+ * @cssprop --container-shape
14
+ * @cssprop --gap
16
15
  */
17
- export declare class List extends baseClass {
16
+ export declare class ListElement extends baseClass {
18
17
  static styles: CSSResultOrNative[];
19
18
  constructor();
20
19
  /**
@@ -5,7 +5,7 @@
5
5
  */
6
6
  import { __decorate } from "tslib";
7
7
  import { css, html, LitElement } from 'lit';
8
- import { customElement, property } from 'lit/decorators.js';
8
+ import { property } from 'lit/decorators.js';
9
9
  import { internals, mixinElementInternals, } from '../../../behaviors/element-internals.js';
10
10
  import listStyles from './list.css' with { type: 'css' }; // github-only
11
11
  // import {styles as listStyles} from './list.cssresult.js'; // google3-only
@@ -14,8 +14,13 @@ import { list } from './list.js';
14
14
  const baseClass = mixinElementInternals(LitElement);
15
15
  /**
16
16
  * A Material Design list component.
17
+ *
18
+ * @slot - Used to display list items.
19
+ * @csspart list - The list's root element.
20
+ * @cssprop --container-shape
21
+ * @cssprop --gap
17
22
  */
18
- let List = class List extends baseClass {
23
+ export class ListElement extends baseClass {
19
24
  constructor() {
20
25
  super();
21
26
  /**
@@ -29,8 +34,8 @@ let List = class List extends baseClass {
29
34
  <slot></slot>
30
35
  </div>`;
31
36
  }
32
- };
33
- List.styles = [
37
+ }
38
+ ListElement.styles = [
34
39
  listStyles,
35
40
  css `
36
41
  :host {
@@ -43,9 +48,5 @@ List.styles = [
43
48
  ];
44
49
  __decorate([
45
50
  property({ type: Boolean })
46
- ], List.prototype, "segmented", void 0);
47
- List = __decorate([
48
- customElement('md-list')
49
- ], List);
50
- export { List };
51
- //# sourceMappingURL=md-list.js.map
51
+ ], ListElement.prototype, "segmented", void 0);
52
+ //# sourceMappingURL=list-element.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"list-element.js","sourceRoot":"","sources":["list-element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,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,UAAU,MAAM,YAAY,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACtE,4EAA4E;AAE5E,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAC;AAE/B,wCAAwC;AACxC,MAAM,SAAS,GAAG,qBAAqB,CAAC,UAAU,CAAC,CAAC;AAEpD;;;;;;;GAOG;AACH,MAAM,OAAO,WAAY,SAAQ,SAAS;IAaxC;QACE,KAAK,EAAE,CAAC;QAIV;;WAEG;QACwB,cAAS,GAAG,KAAK,CAAC;QAN3C,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,GAAG,MAAM,CAAC;IAChC,CAAC;IAOkB,MAAM;QACvB,OAAO,IAAI,CAAA,2BAA2B,IAAI,CAAC,IAAI,CAAC;;WAEzC,CAAC;IACV,CAAC;;AA1Be,kBAAM,GAAwB;IAC5C,UAAU;IACV,GAAG,CAAA;;;;;;;KAOF;CACF,AAVqB,CAUpB;AAUyB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;8CAAmB","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\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 listStyles from './list.css' with {type: 'css'}; // github-only\n// import {styles as listStyles} from './list.cssresult.js'; // google3-only\n\nimport {list} from './list.js';\n\n// Separate variable needed for closure.\nconst baseClass = mixinElementInternals(LitElement);\n\n/**\n * A Material Design list component.\n *\n * @slot - Used to display list items.\n * @csspart list - The list's root element.\n * @cssprop --container-shape\n * @cssprop --gap\n */\nexport class ListElement extends baseClass {\n static override styles: CSSResultOrNative[] = [\n listStyles,\n css`\n :host {\n display: flex;\n }\n .list {\n flex: 1;\n }\n `,\n ];\n\n constructor() {\n super();\n this[internals].role = 'list';\n }\n\n /**\n * Whether to render the list with segmented items.\n */\n @property({type: Boolean}) segmented = false;\n\n protected override render() {\n return html`<div part=\"list\" class=\"${list(this)}\">\n <slot></slot>\n </div>`;\n }\n}\n"]}
@@ -0,0 +1,77 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2026 Google LLC
4
+ * SPDX-License-Identifier: Apache-2.0
5
+ */
6
+ import { CSSResultOrNative, LitElement } from 'lit';
7
+ declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<typeof LitElement, import("../../../behaviors/element-internals.js").WithElementInternals>>;
8
+ /**
9
+ * A Material Design list item component.
10
+ *
11
+ * @slot - Used to display the item's primary label.
12
+ * @slot avatar - Used to display a circular avatar before the item's content.
13
+ * @slot leading - Used to display icons and content before the item's main content.
14
+ * @slot overline - Used to display overline text above the main label.
15
+ * @slot supporting-text - Used to display supporting text below the main label.
16
+ * @slot trailing-text - Used to display metadata or text after the item's main content.
17
+ * @slot trailing - Used to display icons and content after the item's main content.
18
+ * @csspart list-item - The list item's root element.
19
+ * @cssprop --container-height
20
+ * @cssprop --container-color
21
+ * @cssprop --container-shape
22
+ * @cssprop --label-text-color
23
+ * @cssprop --label-text
24
+ * @cssprop --label-text-tracking
25
+ * @cssprop --leading-space
26
+ * @cssprop --trailing-space
27
+ * @cssprop --between-space
28
+ * @cssprop --top-space
29
+ * @cssprop --bottom-space
30
+ * @cssprop --avatar-size
31
+ * @cssprop --avatar-shape
32
+ * @cssprop --avatar-color
33
+ * @cssprop --avatar-label
34
+ * @cssprop --avatar-label-tracking
35
+ * @cssprop --avatar-label-color
36
+ * @cssprop --leading-icon-color
37
+ * @cssprop --leading-icon-size
38
+ * @cssprop --trailing-icon-color
39
+ * @cssprop --trailing-icon-size
40
+ * @cssprop --overline
41
+ * @cssprop --overline-tracking
42
+ * @cssprop --overline-color
43
+ * @cssprop --supporting-text
44
+ * @cssprop --supporting-text-tracking
45
+ * @cssprop --supporting-text-color
46
+ * @cssprop --trailing-supporting-text
47
+ * @cssprop --trailing-supporting-text-tracking
48
+ * @cssprop --trailing-supporting-text-color
49
+ */
50
+ export declare class ListItemElement extends baseClass {
51
+ /** @nocollapse */
52
+ static shadowRootOptions: {
53
+ delegatesFocus: boolean;
54
+ clonable?: boolean;
55
+ customElementRegistry?: CustomElementRegistry;
56
+ mode: ShadowRootMode;
57
+ serializable?: boolean;
58
+ slotAssignment?: SlotAssignmentMode;
59
+ };
60
+ static styles: CSSResultOrNative[];
61
+ constructor();
62
+ /**
63
+ * Whether the list item is selected.
64
+ */
65
+ checked: boolean;
66
+ /**
67
+ * Whether the list item is disabled.
68
+ */
69
+ disabled: boolean;
70
+ /**
71
+ * Whether the list item is non-interactive.
72
+ */
73
+ nonInteractive: boolean;
74
+ protected render(): import("lit-html").TemplateResult<1>;
75
+ private renderContent;
76
+ }
77
+ export {};
@@ -4,15 +4,15 @@
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
6
  import { __decorate } from "tslib";
7
- import { mixinDelegatesAria } from '@material/web/internal/aria/delegate.js';
8
- import { internals, mixinElementInternals, } from '@material/web/labs/behaviors/element-internals.js';
9
- import { hasSlotted } from '@material/web/labs/gb/components/shared/has-slotted.js';
10
7
  import { css, html, LitElement, nothing } from 'lit';
11
- import { customElement, property } from 'lit/decorators.js';
12
- import focusRingStyles from '@material/web/labs/gb/components/focus/focus-ring.css' with { type: 'css' }; // github-only
13
- // import {styles as focusRingStyles} from '@material/web/labs/gb/components/focus/focus-ring.cssresult.js'; // google3-only
14
- import rippleStyles from '@material/web/labs/gb/components/ripple/ripple.css' with { type: 'css' }; // github-only
15
- // import {styles as rippleStyles} from '@material/web/labs/gb/components/ripple/ripple.cssresult.js'; // google3-only
8
+ import { property } from 'lit/decorators.js';
9
+ import { mixinDelegatesAria } from '../../../../internal/aria/delegate.js';
10
+ import { internals, mixinElementInternals, } from '../../../behaviors/element-internals.js';
11
+ import { hasSlotted } from '../shared/has-slotted.js';
12
+ import focusRingStyles from '../focus/focus-ring.css' with { type: 'css' }; // github-only
13
+ // import {styles as focusRingStyles} from '../focus/focus-ring.cssresult.js'; // google3-only
14
+ import rippleStyles from '../ripple/ripple.css' with { type: 'css' }; // github-only
15
+ // import {styles as rippleStyles} from '../ripple/ripple.cssresult.js'; // google3-only
16
16
  import listStyles from './list.css' with { type: 'css' }; // github-only
17
17
  // import {styles as listStyles} from './list.cssresult.js'; // google3-only
18
18
  import { listItem } from './list.js';
@@ -20,8 +20,47 @@ import { listItem } from './list.js';
20
20
  const baseClass = mixinDelegatesAria(mixinElementInternals(LitElement));
21
21
  /**
22
22
  * A Material Design list item component.
23
+ *
24
+ * @slot - Used to display the item's primary label.
25
+ * @slot avatar - Used to display a circular avatar before the item's content.
26
+ * @slot leading - Used to display icons and content before the item's main content.
27
+ * @slot overline - Used to display overline text above the main label.
28
+ * @slot supporting-text - Used to display supporting text below the main label.
29
+ * @slot trailing-text - Used to display metadata or text after the item's main content.
30
+ * @slot trailing - Used to display icons and content after the item's main content.
31
+ * @csspart list-item - The list item's root element.
32
+ * @cssprop --container-height
33
+ * @cssprop --container-color
34
+ * @cssprop --container-shape
35
+ * @cssprop --label-text-color
36
+ * @cssprop --label-text
37
+ * @cssprop --label-text-tracking
38
+ * @cssprop --leading-space
39
+ * @cssprop --trailing-space
40
+ * @cssprop --between-space
41
+ * @cssprop --top-space
42
+ * @cssprop --bottom-space
43
+ * @cssprop --avatar-size
44
+ * @cssprop --avatar-shape
45
+ * @cssprop --avatar-color
46
+ * @cssprop --avatar-label
47
+ * @cssprop --avatar-label-tracking
48
+ * @cssprop --avatar-label-color
49
+ * @cssprop --leading-icon-color
50
+ * @cssprop --leading-icon-size
51
+ * @cssprop --trailing-icon-color
52
+ * @cssprop --trailing-icon-size
53
+ * @cssprop --overline
54
+ * @cssprop --overline-tracking
55
+ * @cssprop --overline-color
56
+ * @cssprop --supporting-text
57
+ * @cssprop --supporting-text-tracking
58
+ * @cssprop --supporting-text-color
59
+ * @cssprop --trailing-supporting-text
60
+ * @cssprop --trailing-supporting-text-tracking
61
+ * @cssprop --trailing-supporting-text-color
23
62
  */
24
- let ListItem = class ListItem extends baseClass {
63
+ export class ListItemElement extends baseClass {
25
64
  constructor() {
26
65
  super();
27
66
  /**
@@ -79,13 +118,13 @@ let ListItem = class ListItem extends baseClass {
79
118
  </span>
80
119
  `;
81
120
  }
82
- };
121
+ }
83
122
  /** @nocollapse */
84
- ListItem.shadowRootOptions = {
123
+ ListItemElement.shadowRootOptions = {
85
124
  ...LitElement.shadowRootOptions,
86
125
  delegatesFocus: true,
87
126
  };
88
- ListItem.styles = [
127
+ ListItemElement.styles = [
89
128
  focusRingStyles,
90
129
  rippleStyles,
91
130
  listStyles,
@@ -108,15 +147,11 @@ ListItem.styles = [
108
147
  ];
109
148
  __decorate([
110
149
  property({ type: Boolean })
111
- ], ListItem.prototype, "checked", void 0);
150
+ ], ListItemElement.prototype, "checked", void 0);
112
151
  __decorate([
113
152
  property({ type: Boolean })
114
- ], ListItem.prototype, "disabled", void 0);
153
+ ], ListItemElement.prototype, "disabled", void 0);
115
154
  __decorate([
116
155
  property({ type: Boolean, reflect: true, attribute: 'static' })
117
- ], ListItem.prototype, "nonInteractive", void 0);
118
- ListItem = __decorate([
119
- customElement('md-list-item')
120
- ], ListItem);
121
- export { ListItem };
122
- //# sourceMappingURL=md-list-item.js.map
156
+ ], ListItemElement.prototype, "nonInteractive", void 0);
157
+ //# sourceMappingURL=list-item-element.js.map