@material/web 2.4.2-nightly.fd6fe2a.0 → 2.5.1-nightly.70e259d.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 (209) hide show
  1. package/custom-elements.json +7148 -7166
  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 +2 -0
  56. package/labs/gb/components/button/{md-button.d.ts → button-element.d.ts} +22 -7
  57. package/labs/gb/components/button/{md-button.js → button-element.js} +38 -20
  58. package/labs/gb/components/button/button-element.js.map +1 -0
  59. package/labs/gb/components/button/button.css.map +1 -1
  60. package/labs/gb/components/button/md-gb-button.d.ts +12 -0
  61. package/labs/gb/components/button/md-gb-button.js +8 -0
  62. package/labs/gb/components/button/md-gb-button.js.map +1 -0
  63. package/labs/gb/components/card/_card-tokens.scss +2 -0
  64. package/labs/gb/components/card/{md-card.d.ts → card-element.d.ts} +12 -7
  65. package/labs/gb/components/card/{md-card.js → card-element.js} +21 -14
  66. package/labs/gb/components/card/card-element.js.map +1 -0
  67. package/labs/gb/components/card/card.css.map +1 -1
  68. package/labs/gb/components/card/md-gb-card.d.ts +12 -0
  69. package/labs/gb/components/card/md-gb-card.js +8 -0
  70. package/labs/gb/components/card/md-gb-card.js.map +1 -0
  71. package/labs/gb/components/checkbox/_checkbox-tokens.scss +2 -0
  72. package/labs/gb/components/checkbox/{md-checkbox.d.ts → checkbox-element.d.ts} +15 -7
  73. package/labs/gb/components/checkbox/{md-checkbox.js → checkbox-element.js} +26 -16
  74. package/labs/gb/components/checkbox/checkbox-element.js.map +1 -0
  75. package/labs/gb/components/checkbox/checkbox.css.map +1 -1
  76. package/labs/gb/components/checkbox/md-gb-checkbox.d.ts +12 -0
  77. package/labs/gb/components/checkbox/md-gb-checkbox.js +8 -0
  78. package/labs/gb/components/checkbox/md-gb-checkbox.js.map +1 -0
  79. package/labs/gb/components/chip/_chip-tokens.scss +167 -0
  80. package/labs/gb/components/chip/chip-element.d.ts +73 -0
  81. package/labs/gb/components/chip/chip-element.js +233 -0
  82. package/labs/gb/components/chip/chip-element.js.map +1 -0
  83. package/labs/gb/components/chip/chip.css +4 -0
  84. package/labs/gb/components/chip/chip.css.map +1 -0
  85. package/labs/gb/components/chip/chip.cssresult.d.ts +3 -0
  86. package/labs/gb/components/chip/chip.cssresult.js +14 -0
  87. package/labs/gb/components/chip/chip.cssresult.js.map +1 -0
  88. package/labs/gb/components/chip/chip.d.ts +77 -0
  89. package/labs/gb/components/chip/chip.js +99 -0
  90. package/labs/gb/components/chip/chip.js.map +1 -0
  91. package/labs/gb/components/chip/chip.scss +97 -0
  92. package/labs/gb/components/chip/md-gb-chip.d.ts +13 -0
  93. package/labs/gb/components/chip/md-gb-chip.js +9 -0
  94. package/labs/gb/components/chip/md-gb-chip.js.map +1 -0
  95. package/labs/gb/components/divider/_divider-tokens.scss +2 -0
  96. package/labs/gb/components/divider/{md-divider.d.ts → divider-element.d.ts} +5 -7
  97. package/labs/gb/components/divider/{md-divider.js → divider-element.js} +10 -10
  98. package/labs/gb/components/divider/divider-element.js.map +1 -0
  99. package/labs/gb/components/divider/divider.css.map +1 -1
  100. package/labs/gb/components/divider/md-gb-divider.d.ts +12 -0
  101. package/labs/gb/components/divider/md-gb-divider.js +8 -0
  102. package/labs/gb/components/divider/md-gb-divider.js.map +1 -0
  103. package/labs/gb/components/fab/_fab-tokens.scss +2 -0
  104. package/labs/gb/components/fab/fab-element.d.ts +31 -0
  105. package/labs/gb/components/fab/{md-fab.js → fab-element.js} +22 -11
  106. package/labs/gb/components/fab/fab-element.js.map +1 -0
  107. package/labs/gb/components/fab/fab.css.map +1 -1
  108. package/labs/gb/components/fab/md-gb-fab.d.ts +12 -0
  109. package/labs/gb/components/fab/md-gb-fab.js +8 -0
  110. package/labs/gb/components/fab/md-gb-fab.js.map +1 -0
  111. package/labs/gb/components/iconbutton/_icon-button-tokens.scss +2 -0
  112. package/labs/gb/components/iconbutton/{md-icon-button.d.ts → icon-button-element.d.ts} +15 -7
  113. package/labs/gb/components/iconbutton/{md-icon-button.js → icon-button-element.js} +30 -20
  114. package/labs/gb/components/iconbutton/icon-button-element.js.map +1 -0
  115. package/labs/gb/components/iconbutton/icon-button.css.map +1 -1
  116. package/labs/gb/components/iconbutton/md-gb-icon-button.d.ts +12 -0
  117. package/labs/gb/components/iconbutton/md-gb-icon-button.js +8 -0
  118. package/labs/gb/components/iconbutton/md-gb-icon-button.js.map +1 -0
  119. package/labs/gb/components/list/_list-tokens.scss +4 -0
  120. package/labs/gb/components/list/{md-list.d.ts → list-element.d.ts} +6 -7
  121. package/labs/gb/components/list/{md-list.js → list-element.js} +11 -10
  122. package/labs/gb/components/list/list-element.js.map +1 -0
  123. package/labs/gb/components/list/list-item-element.d.ts +77 -0
  124. package/labs/gb/components/list/{md-list-item.js → list-item-element.js} +48 -13
  125. package/labs/gb/components/list/list-item-element.js.map +1 -0
  126. package/labs/gb/components/list/list.css.map +1 -1
  127. package/labs/gb/components/list/md-gb-list-item.d.ts +12 -0
  128. package/labs/gb/components/list/md-gb-list-item.js +8 -0
  129. package/labs/gb/components/list/md-gb-list-item.js.map +1 -0
  130. package/labs/gb/components/list/md-gb-list.d.ts +12 -0
  131. package/labs/gb/components/list/md-gb-list.js +8 -0
  132. package/labs/gb/components/list/md-gb-list.js.map +1 -0
  133. package/labs/gb/components/menu/_menu-tokens.scss +4 -0
  134. package/labs/gb/components/menu/md-gb-menu-group.d.ts +12 -0
  135. package/labs/gb/components/menu/md-gb-menu-group.js +8 -0
  136. package/labs/gb/components/menu/md-gb-menu-group.js.map +1 -0
  137. package/labs/gb/components/menu/md-gb-menu-item.d.ts +12 -0
  138. package/labs/gb/components/menu/md-gb-menu-item.js +8 -0
  139. package/labs/gb/components/menu/md-gb-menu-item.js.map +1 -0
  140. package/labs/gb/components/menu/md-gb-menu.d.ts +12 -0
  141. package/labs/gb/components/menu/md-gb-menu.js +8 -0
  142. package/labs/gb/components/menu/md-gb-menu.js.map +1 -0
  143. package/labs/gb/components/menu/{md-menu.d.ts → menu-element.d.ts} +11 -7
  144. package/labs/gb/components/menu/{md-menu.js → menu-element.js} +16 -10
  145. package/labs/gb/components/menu/menu-element.js.map +1 -0
  146. package/labs/gb/components/menu/{md-menu-group.d.ts → menu-group-element.d.ts} +3 -6
  147. package/labs/gb/components/menu/{md-menu-group.js → menu-group-element.js} +11 -11
  148. package/labs/gb/components/menu/menu-group-element.js.map +1 -0
  149. package/labs/gb/components/menu/menu-item-element.d.ts +56 -0
  150. package/labs/gb/components/menu/{md-menu-item.js → menu-item-element.js} +41 -13
  151. package/labs/gb/components/menu/menu-item-element.js.map +1 -0
  152. package/labs/gb/components/menu/menu.css.map +1 -1
  153. package/labs/gb/components/menu/menu.js +1 -1
  154. package/labs/gb/components/menu/menu.js.map +1 -1
  155. package/labs/gb/components/radio/_radio-tokens.scss +2 -0
  156. package/labs/gb/components/radio/md-gb-radio.d.ts +12 -0
  157. package/labs/gb/components/radio/md-gb-radio.js +8 -0
  158. package/labs/gb/components/radio/md-gb-radio.js.map +1 -0
  159. package/labs/gb/components/radio/{md-radio.d.ts → radio-element.d.ts} +10 -7
  160. package/labs/gb/components/radio/{md-radio.js → radio-element.js} +19 -14
  161. package/labs/gb/components/radio/radio-element.js.map +1 -0
  162. package/labs/gb/components/radio/radio.css.map +1 -1
  163. package/labs/gb/components/splitbutton/_split-button-tokens.scss +4 -0
  164. package/labs/gb/components/splitbutton/md-gb-split-button.d.ts +12 -0
  165. package/labs/gb/components/splitbutton/md-gb-split-button.js +8 -0
  166. package/labs/gb/components/splitbutton/md-gb-split-button.js.map +1 -0
  167. package/labs/gb/components/splitbutton/split-button-element.d.ts +33 -0
  168. package/labs/gb/components/splitbutton/{md-split-button.js → split-button-element.js} +21 -12
  169. package/labs/gb/components/splitbutton/split-button-element.js.map +1 -0
  170. package/labs/gb/components/splitbutton/split-button.css.map +1 -1
  171. package/labs/gb/components/splitbutton/split-button.d.ts +4 -4
  172. package/labs/gb/components/splitbutton/split-button.js +4 -4
  173. package/labs/gb/components/splitbutton/split-button.js.map +1 -1
  174. package/labs/gb/components/switch/_switch-tokens.scss +2 -0
  175. package/labs/gb/components/switch/md-gb-switch.d.ts +12 -0
  176. package/labs/gb/components/switch/md-gb-switch.js +8 -0
  177. package/labs/gb/components/switch/md-gb-switch.js.map +1 -0
  178. package/labs/gb/components/switch/{md-switch.d.ts → switch-element.d.ts} +19 -7
  179. package/labs/gb/components/switch/{md-switch.js → switch-element.js} +28 -14
  180. package/labs/gb/components/switch/switch-element.js.map +1 -0
  181. package/labs/gb/components/switch/switch.css.map +1 -1
  182. package/labs/gb/styles/adopt-styles.js +6 -1
  183. package/labs/gb/styles/adopt-styles.js.map +1 -1
  184. package/labs/gb/styles/icon/{md-icon.d.ts → icon-element.d.ts} +1 -7
  185. package/labs/gb/styles/icon/{md-icon.js → icon-element.js} +8 -10
  186. package/labs/gb/styles/icon/icon-element.js.map +1 -0
  187. package/labs/gb/styles/icon/md-gb-icon.d.ts +12 -0
  188. package/labs/gb/styles/icon/md-gb-icon.js +8 -0
  189. package/labs/gb/styles/icon/md-gb-icon.js.map +1 -0
  190. package/package.json +3 -3
  191. package/labs/gb/components/button/md-button.js.map +0 -1
  192. package/labs/gb/components/card/md-card.js.map +0 -1
  193. package/labs/gb/components/checkbox/md-checkbox.js.map +0 -1
  194. package/labs/gb/components/divider/md-divider.js.map +0 -1
  195. package/labs/gb/components/fab/md-fab.d.ts +0 -22
  196. package/labs/gb/components/fab/md-fab.js.map +0 -1
  197. package/labs/gb/components/iconbutton/md-icon-button.js.map +0 -1
  198. package/labs/gb/components/list/md-list-item.d.ts +0 -44
  199. package/labs/gb/components/list/md-list-item.js.map +0 -1
  200. package/labs/gb/components/list/md-list.js.map +0 -1
  201. package/labs/gb/components/menu/md-menu-group.js.map +0 -1
  202. package/labs/gb/components/menu/md-menu-item.d.ts +0 -30
  203. package/labs/gb/components/menu/md-menu-item.js.map +0 -1
  204. package/labs/gb/components/menu/md-menu.js.map +0 -1
  205. package/labs/gb/components/radio/md-radio.js.map +0 -1
  206. package/labs/gb/components/splitbutton/md-split-button.d.ts +0 -26
  207. package/labs/gb/components/splitbutton/md-split-button.js.map +0 -1
  208. package/labs/gb/components/switch/md-switch.js.map +0 -1
  209. package/labs/gb/styles/icon/md-icon.js.map +0 -1
@@ -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, state } from 'lit/decorators.js';
8
+ import { property, state } 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';
@@ -23,8 +23,29 @@ import { button } from './button.js';
23
23
  const baseClass = mixinDelegatesAria(mixinFormSubmitter(mixinFormAssociated(mixinElementInternals(LitElement))));
24
24
  /**
25
25
  * A Material Design button.
26
+ *
27
+ * @slot - Used to display a label and optional icon.
28
+ * @slot container - Used to set a custom background container for the button.
29
+ * @fires {InputEvent} input - Fired when a toggle button is selected or unselected. --bubbles --composed
30
+ * @fires {Event} change - Fired when a toggle button is selected or unselected. --bubbles
31
+ * @csspart btn - The button's root element.
32
+ * @cssprop --container-color
33
+ * @cssprop --container-height
34
+ * @cssprop --container-elevation
35
+ * @cssprop --container-shape
36
+ * @cssprop --outline-width
37
+ * @cssprop --outline-color
38
+ * @cssprop --icon-label-space
39
+ * @cssprop --icon-color
40
+ * @cssprop --icon-size
41
+ * @cssprop --label-text
42
+ * @cssprop --label-text-tracking
43
+ * @cssprop --label-text-color
44
+ * @cssprop --leading-space
45
+ * @cssprop --state-layer-color
46
+ * @cssprop --trailing-space
26
47
  */
27
- let Button = class Button extends baseClass {
48
+ export class ButtonElement extends baseClass {
28
49
  constructor() {
29
50
  super(...arguments);
30
51
  this.hideOutline = false;
@@ -183,13 +204,13 @@ let Button = class Button extends baseClass {
183
204
  this.selected = event.target.ariaPressed === 'true';
184
205
  redispatchEvent(this, event);
185
206
  }
186
- };
207
+ }
187
208
  /** @nocollapse */
188
- Button.shadowRootOptions = {
209
+ ButtonElement.shadowRootOptions = {
189
210
  mode: 'open',
190
211
  delegatesFocus: true,
191
212
  };
192
- Button.styles = [
213
+ ButtonElement.styles = [
193
214
  focusRingStyles,
194
215
  rippleStyles,
195
216
  buttonStyles,
@@ -207,6 +228,7 @@ Button.styles = [
207
228
  }
208
229
  .btn.btn-hide-outline {
209
230
  --outline-color: transparent;
231
+ --container-elevation: var(--md-sys-elevation-shadow-0);
210
232
  }
211
233
  slot[name='container'] {
212
234
  display: block;
@@ -226,36 +248,32 @@ Button.styles = [
226
248
  ];
227
249
  __decorate([
228
250
  state()
229
- ], Button.prototype, "hideOutline", void 0);
251
+ ], ButtonElement.prototype, "hideOutline", void 0);
230
252
  __decorate([
231
253
  property()
232
- ], Button.prototype, "color", void 0);
254
+ ], ButtonElement.prototype, "color", void 0);
233
255
  __decorate([
234
256
  property()
235
- ], Button.prototype, "size", void 0);
257
+ ], ButtonElement.prototype, "size", void 0);
236
258
  __decorate([
237
259
  property({ type: Boolean })
238
- ], Button.prototype, "square", void 0);
260
+ ], ButtonElement.prototype, "square", void 0);
239
261
  __decorate([
240
262
  property({ noAccessor: true })
241
- ], Button.prototype, "type", null);
263
+ ], ButtonElement.prototype, "type", null);
242
264
  __decorate([
243
265
  property({ type: Boolean, attribute: 'soft-disabled', reflect: true })
244
- ], Button.prototype, "softDisabled", void 0);
266
+ ], ButtonElement.prototype, "softDisabled", void 0);
245
267
  __decorate([
246
268
  property({ type: Boolean })
247
- ], Button.prototype, "selected", void 0);
269
+ ], ButtonElement.prototype, "selected", void 0);
248
270
  __decorate([
249
271
  property()
250
- ], Button.prototype, "href", void 0);
272
+ ], ButtonElement.prototype, "href", void 0);
251
273
  __decorate([
252
274
  property()
253
- ], Button.prototype, "download", void 0);
275
+ ], ButtonElement.prototype, "download", void 0);
254
276
  __decorate([
255
277
  property()
256
- ], Button.prototype, "target", void 0);
257
- Button = __decorate([
258
- customElement('md-button')
259
- ], Button);
260
- export { Button };
261
- //# sourceMappingURL=md-button.js.map
278
+ ], ButtonElement.prototype, "target", void 0);
279
+ //# sourceMappingURL=button-element.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"button-element.js","sourceRoot":"","sources":["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 {\n css,\n CSSResultOrNative,\n html,\n LitElement,\n nothing,\n PropertyValues,\n} from 'lit';\nimport {property, state} 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.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\n\nimport {hasSlotted} from '../shared/has-slotted.js';\n\nimport buttonStyles from './button.css' with {type: 'css'}; // github-only\n// import buttonStyles from './button.cssresult.js'; // google3-only\n\nimport {button} from './button.js';\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(\n mixinFormSubmitter(mixinFormAssociated(mixinElementInternals(LitElement))),\n);\n\n/**\n * A Material Design button.\n *\n * @slot - Used to display a label and optional icon.\n * @slot container - Used to set a custom background container for the button.\n * @fires {InputEvent} input - Fired when a toggle button is selected or unselected. --bubbles --composed\n * @fires {Event} change - Fired when a toggle button is selected or unselected. --bubbles\n * @csspart btn - The button's root element.\n * @cssprop --container-color\n * @cssprop --container-height\n * @cssprop --container-elevation\n * @cssprop --container-shape\n * @cssprop --outline-width\n * @cssprop --outline-color\n * @cssprop --icon-label-space\n * @cssprop --icon-color\n * @cssprop --icon-size\n * @cssprop --label-text\n * @cssprop --label-text-tracking\n * @cssprop --label-text-color\n * @cssprop --leading-space\n * @cssprop --state-layer-color\n * @cssprop --trailing-space\n */\nexport class ButtonElement 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 buttonStyles,\n css`\n :host {\n display: inline-flex;\n isolation: isolate;\n }\n .btn {\n flex: 1;\n position: relative;\n }\n .btn:has([name='container'].has-slotted) {\n background-color: transparent;\n }\n .btn.btn-hide-outline {\n --outline-color: transparent;\n --container-elevation: var(--md-sys-elevation-shadow-0);\n }\n slot[name='container'] {\n display: block;\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n --color: var(--container-color);\n z-index: -1;\n transition: inherit;\n }\n slot[name='container']::slotted(*) {\n width: 100%;\n height: 100%;\n }\n `,\n ];\n\n @state() private hideOutline = false;\n\n /**\n * The color of the button.\n */\n @property()\n color: 'filled' | 'elevated' | 'tonal' | 'outlined' | 'text' = 'text';\n\n /**\n * The size of the button.\n */\n @property() size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n /**\n * Changes the shape of the button to be square.\n */\n @property({type: Boolean}) square = false;\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 * Use this when a button needs increased visibility when disabled. See\n * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls\n * for more guidance on when this is needed.\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 * If not specified, the browser will determine a filename.\n * This is only applicable when the button is used as a link (`href` is set).\n */\n @property() download = '';\n\n /**\n * Where to display the linked `href` URL for a link button. Common options\n * include `_blank` to open in a new tab.\n */\n @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n private lastFiredEnabledState?: boolean;\n\n override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('md-gb:set-show-outline', this.handleSetShowOutline);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener(\n 'md-gb:set-show-outline',\n this.handleSetShowOutline,\n );\n }\n\n private readonly handleSetShowOutline = (event: Event) => {\n const customEvent = event as CustomEvent<{shown: boolean}>;\n this.hideOutline = !customEvent.detail.shown;\n };\n\n protected override updated(changedProperties: PropertyValues) {\n super.updated(changedProperties);\n if (\n changedProperties.has('disabled') ||\n changedProperties.has('softDisabled')\n ) {\n this.dispatchSetEnabledEvent();\n }\n }\n\n private dispatchSetEnabledEvent() {\n const enabled = !(this.disabled || this.softDisabled);\n\n if (this.lastFiredEnabledState === enabled) return;\n\n const slot = this.shadowRoot?.querySelector(\n 'slot[name=\"container\"]',\n ) as HTMLSlotElement;\n if (slot) {\n for (const element of slot.assignedElements({flatten: true})) {\n element.dispatchEvent(\n new CustomEvent('md-gb:set-enabled', {\n detail: {enabled},\n }),\n );\n }\n }\n this.lastFiredEnabledState = enabled;\n }\n\n protected override render() {\n const classes = button({\n color: this.color,\n size: this.size,\n square: this.square,\n // Emulate `:disabled` when soft-disabled\n disabled: this.softDisabled,\n classes: {\n 'btn-hide-outline': this.hideOutline,\n },\n });\n\n // Needed for closure conformance\n const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;\n if (this.type === 'link') {\n return html`<a\n part=\"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 <slot\n name=\"container\"\n ${hasSlotted()}\n @slotchange=${this.handleContainerSlotChange}></slot>\n </a>`;\n }\n\n return html`<button\n part=\"btn\"\n class=${classes}\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 <slot\n name=\"container\"\n ${hasSlotted()}\n @slotchange=${this.handleContainerSlotChange}></slot>\n </button>`;\n }\n\n private handleContainerSlotChange(event: Event) {\n const slot = event.target as HTMLSlotElement;\n\n const enabled = !(this.disabled || this.softDisabled);\n\n for (const element of slot.assignedElements({flatten: true})) {\n element.dispatchEvent(new CustomEvent('md-gb:change-container-slot'));\n element.dispatchEvent(\n new CustomEvent('md-gb:set-enabled', {\n detail: {enabled},\n }),\n );\n }\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":["button.scss","_button-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,sBACE,KCLA,+BACA,yBACA,wDACA,qDACA,mBACA,6BACA,wBACA,2BACA,kBACA,+CACA,iEACA,iCACA,mBACA,iCACA,oBDPE,2CCWF,iDDRE,gBCYF,+CACA,6CACA,mDDZI,4DCgBJ,yDACA,qDACA,2DDfI,yDCmBJ,+CACA,6CACA,mDDjBE,kBCqBF,6DACA,wDACA,0CACA,gDDtBI,2DC0BJ,+CACA,6CACA,mDDxBE,eC4BF,2DACA,yDACA,+DD5BI,wDCgCJ,iDACA,+CACA,qDD9BE,kBCkCF,qDACA,2DACA,qDACA,qBDnCI,iCCuCJ,qBDpCI,iCCwCJ,qBDrCI,2DCyCJ,uDACA,qDACA,2DDvCE,cC2CF,gDACA,0CACA,iDD1CE,YC8CF,yBACA,sBACA,uBD7CE,YCiDF,yBACA,sBACA,uBDhDE,YCoDF,yBACA,sBACA,uBACA,kBACA,+CACA,iEDvDI,qDC2DJ,iDDvDE,YC2DF,yBACA,yBACA,kBACA,sBACA,uBACA,kDACA,oED/DI,qDCmEJ,iDD/DE,YCmEF,0BACA,yBACA,kBACA,sBACA,uBACA,kDACA,oEDvEI,qDC2EJ,iDDvEE,gBC2EF,iDDzEI,+BC6EJ,iDD1EI,+BC8EJ,iDD3EI,+BC+EJ,iDD5EI,yDCgFJ,qDD5EE,0DCgFF,iDD9EI,yECkFJ,iDD/EI,yECmFJ,iDDhFI,yECoFJ,iDDhFE,6BCoFF,wEACA,wDACA,mEACA,yEDnFE,KACE,oBACA,mBACA,uBACA,mCACA,4BACA,0DACA,uDACA,qCACA,sCACA,wCACA,8BACA,uBACA,0CACA,WACE,iFAEF,mCACA,iCAEF,8BACE","file":"button.css"}
1
+ {"version":3,"sourceRoot":"","sources":["button.scss","_button-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,sBACE,KCJA,+BACA,yBACA,wDACA,qDACA,mBACA,6BACA,wBACA,2BACA,kBACA,+CACA,iEACA,iCACA,mBACA,iCACA,oBDRE,2CCaF,iDDVE,gBCcF,+CACA,6CACA,mDDdI,4DCkBJ,yDACA,qDACA,2DDjBI,yDCqBJ,+CACA,6CACA,mDDnBE,kBCuBF,6DACA,wDACA,0CACA,gDDxBI,2DC4BJ,+CACA,6CACA,mDD1BE,eC8BF,2DACA,yDACA,+DD9BI,wDCkCJ,iDACA,+CACA,qDDhCE,kBCoCF,qDACA,2DACA,qDACA,qBDrCI,iCCyCJ,qBDtCI,iCC0CJ,qBDvCI,2DC2CJ,uDACA,qDACA,2DDzCE,cC6CF,gDACA,0CACA,iDD5CE,YCgDF,yBACA,sBACA,uBD/CE,YCmDF,yBACA,sBACA,uBDlDE,YCsDF,yBACA,sBACA,uBACA,kBACA,+CACA,iEDzDI,qDC6DJ,iDDzDE,YC6DF,yBACA,yBACA,kBACA,sBACA,uBACA,kDACA,oEDjEI,qDCqEJ,iDDjEE,YCqEF,0BACA,yBACA,kBACA,sBACA,uBACA,kDACA,oEDzEI,qDC6EJ,iDDzEE,gBC6EF,iDD3EI,+BC+EJ,iDD5EI,+BCgFJ,iDD7EI,+BCiFJ,iDD9EI,yDCkFJ,qDD9EE,0DCkFF,iDDhFI,yECoFJ,iDDjFI,yECqFJ,iDDlFI,yECsFJ,iDDlFE,6BCsFF,wEACA,wDACA,mEACA,yEDrFE,KACE,oBACA,mBACA,uBACA,mCACA,4BACA,0DACA,uDACA,qCACA,sCACA,wCACA,8BACA,uBACA,0CACA,WACE,iFAEF,mCACA,iCAEF,8BACE","file":"button.css"}
@@ -0,0 +1,12 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2026 Google LLC
4
+ * SPDX-License-Identifier: Apache-2.0
5
+ */
6
+ import { ButtonElement } from './button-element.js';
7
+ declare global {
8
+ interface HTMLElementTagNameMap {
9
+ /** A Material Design button. */
10
+ 'md-gb-button': ButtonElement;
11
+ }
12
+ }
@@ -0,0 +1,8 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2026 Google LLC
4
+ * SPDX-License-Identifier: Apache-2.0
5
+ */
6
+ import { ButtonElement } from './button-element.js';
7
+ customElements.define('md-gb-button', ButtonElement);
8
+ //# sourceMappingURL=md-gb-button.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"md-gb-button.js","sourceRoot":"","sources":["md-gb-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AASlD,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ButtonElement} from './button-element.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design button. */\n 'md-gb-button': ButtonElement;\n }\n}\n\ncustomElements.define('md-gb-button', ButtonElement);\n"]}
@@ -4,12 +4,14 @@
4
4
  //
5
5
 
6
6
  @mixin root {
7
+ // LINT.IfChange
7
8
  --container-color: transparent;
8
9
  --container-elevation: var(--md-sys-elevation-shadow-0);
9
10
  --container-shape: var(--md-sys-shape-corner-md);
10
11
  --outline-color: transparent;
11
12
  --outline-width: 0;
12
13
  --state-layer-color: var(--md-sys-color-on-surface);
14
+ // LINT.ThenChange(md-card.ts) keep in sync with `@cssprop` jsdoc tags
13
15
  }
14
16
 
15
17
  @mixin hover {
@@ -5,17 +5,22 @@
5
5
  */
6
6
  import { CSSResultOrNative, LitElement, PropertyValues } from 'lit';
7
7
  import { type CardColor } from './card.js';
8
- declare global {
9
- interface HTMLElementTagNameMap {
10
- /** A Material Design card component. */
11
- 'md-card': Card;
12
- }
13
- }
14
8
  declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<typeof LitElement>;
15
9
  /**
16
10
  * A Material Design card.
11
+ *
12
+ * @slot - Used to display the card's content. Note: add padding to content, not the host <md-gb-card> element.
13
+ * @slot container - Used to set a custom background container for the card.
14
+ * @csspart card - The card's root element.
15
+ * @csspart card-btn - The card's main action button, when interactive.
16
+ * @cssprop --container-color
17
+ * @cssprop --container-elevation
18
+ * @cssprop --container-shape
19
+ * @cssprop --outline-color
20
+ * @cssprop --outline-width
21
+ * @cssprop --state-layer-color
17
22
  */
18
- export declare class Card extends baseClass {
23
+ export declare class CardElement extends baseClass {
19
24
  /** @nocollapse */
20
25
  static shadowRootOptions: ShadowRootInit;
21
26
  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, state } from 'lit/decorators.js';
8
+ import { property, state } from 'lit/decorators.js';
9
9
  import { mixinDelegatesAria } from '../../../../internal/aria/delegate.js';
10
10
  import { ripple } from '../ripple/ripple.js';
11
11
  import { hasSlotted } from '../shared/has-slotted.js';
@@ -20,8 +20,19 @@ import { card } from './card.js';
20
20
  const baseClass = mixinDelegatesAria(LitElement);
21
21
  /**
22
22
  * A Material Design card.
23
+ *
24
+ * @slot - Used to display the card's content. Note: add padding to content, not the host <md-gb-card> element.
25
+ * @slot container - Used to set a custom background container for the card.
26
+ * @csspart card - The card's root element.
27
+ * @csspart card-btn - The card's main action button, when interactive.
28
+ * @cssprop --container-color
29
+ * @cssprop --container-elevation
30
+ * @cssprop --container-shape
31
+ * @cssprop --outline-color
32
+ * @cssprop --outline-width
33
+ * @cssprop --state-layer-color
23
34
  */
24
- let Card = class Card extends baseClass {
35
+ export class CardElement extends baseClass {
25
36
  constructor() {
26
37
  super(...arguments);
27
38
  this.hideOutline = false;
@@ -101,13 +112,13 @@ let Card = class Card extends baseClass {
101
112
  }));
102
113
  }
103
114
  }
104
- };
115
+ }
105
116
  /** @nocollapse */
106
- Card.shadowRootOptions = {
117
+ CardElement.shadowRootOptions = {
107
118
  mode: 'open',
108
119
  delegatesFocus: true,
109
120
  };
110
- Card.styles = [
121
+ CardElement.styles = [
111
122
  focusRingStyles,
112
123
  rippleStyles,
113
124
  cardStyles,
@@ -145,18 +156,14 @@ Card.styles = [
145
156
  ];
146
157
  __decorate([
147
158
  state()
148
- ], Card.prototype, "hideOutline", void 0);
159
+ ], CardElement.prototype, "hideOutline", void 0);
149
160
  __decorate([
150
161
  property()
151
- ], Card.prototype, "color", void 0);
162
+ ], CardElement.prototype, "color", void 0);
152
163
  __decorate([
153
164
  property({ type: Boolean })
154
- ], Card.prototype, "disabled", void 0);
165
+ ], CardElement.prototype, "disabled", void 0);
155
166
  __decorate([
156
167
  property({ type: Boolean })
157
- ], Card.prototype, "interactive", void 0);
158
- Card = __decorate([
159
- customElement('md-card')
160
- ], Card);
161
- export { Card };
162
- //# sourceMappingURL=md-card.js.map
168
+ ], CardElement.prototype, "interactive", void 0);
169
+ //# sourceMappingURL=card-element.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"card-element.js","sourceRoot":"","sources":["card-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 {\n css,\n CSSResultOrNative,\n html,\n LitElement,\n nothing,\n PropertyValues,\n} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport {ARIAMixinStrict} from '../../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../../internal/aria/delegate.js';\nimport {ripple} from '../ripple/ripple.js';\nimport {hasSlotted} from '../shared/has-slotted.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 cardStyles from './card.css' with {type: 'css'}; // github-only\n// import cardStyles from './card.cssresult.js'; // google3-only\n\nimport {type CardColor, card} from './card.js';\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(LitElement);\n\n/**\n * A Material Design card.\n *\n * @slot - Used to display the card's content. Note: add padding to content, not the host <md-gb-card> element.\n * @slot container - Used to set a custom background container for the card.\n * @csspart card - The card's root element.\n * @csspart card-btn - The card's main action button, when interactive.\n * @cssprop --container-color\n * @cssprop --container-elevation\n * @cssprop --container-shape\n * @cssprop --outline-color\n * @cssprop --outline-width\n * @cssprop --state-layer-color\n */\nexport class CardElement 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 cardStyles,\n css`\n :host {\n display: inline-flex;\n isolation: isolate;\n }\n .card {\n flex: 1;\n position: relative;\n }\n .card:has([name='container'].has-slotted) {\n background-color: transparent;\n }\n .card.card-hide-outline {\n --outline-color: transparent;\n --container-elevation: var(--md-sys-elevation-shadow-0);\n }\n slot[name='container'] {\n display: block;\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n --color: var(--container-color);\n z-index: -1;\n transition: inherit;\n }\n slot[name='container']::slotted(*) {\n width: 100%;\n height: 100%;\n }\n `,\n ];\n\n @state() private hideOutline = false;\n\n private lastFiredEnabledState?: boolean;\n\n /** The color of the card. */\n @property() color: CardColor = 'outlined';\n\n /** Whether the card is disabled. */\n @property({type: Boolean}) disabled = false;\n\n /** Whether the card is interactive. */\n @property({type: Boolean}) interactive = false;\n\n override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('md-gb:set-show-outline', this.handleSetShowOutline);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener(\n 'md-gb:set-show-outline',\n this.handleSetShowOutline,\n );\n }\n\n private readonly handleSetShowOutline = (event: Event) => {\n const customEvent = event as CustomEvent<{shown: boolean}>;\n this.hideOutline = !customEvent.detail.shown;\n };\n\n protected override updated(changedProperties: PropertyValues) {\n super.updated(changedProperties);\n if (changedProperties.has('disabled')) {\n this.dispatchSetEnabledEvent();\n }\n }\n\n private dispatchSetEnabledEvent() {\n const enabled = !this.disabled;\n\n if (this.lastFiredEnabledState === enabled) return;\n\n const slot = this.shadowRoot?.querySelector(\n 'slot[name=\"container\"]',\n ) as HTMLSlotElement;\n if (slot) {\n for (const element of slot.assignedElements({flatten: true})) {\n element.dispatchEvent(\n new CustomEvent('md-gb:set-enabled', {\n detail: {enabled},\n }),\n );\n }\n }\n this.lastFiredEnabledState = enabled;\n }\n\n protected override render() {\n const {ariaLabel} = this as ARIAMixinStrict;\n return html`<div\n part=\"card\"\n class=\"${card({\n color: this.color,\n disabled: this.disabled,\n interactive: this.interactive,\n classes: {\n 'card-hide-outline': this.hideOutline,\n },\n })}\">\n ${this.interactive\n ? html`<button\n part=\"card-btn\"\n class=\"card-btn ripple focus-ring-target\"\n ${ripple()}\n ?disabled=\"${this.disabled}\"\n aria-label=\"${ariaLabel || nothing}\"></button>`\n : nothing}\n <slot></slot>\n <slot\n name=\"container\"\n ${hasSlotted()}\n @slotchange=${this.handleContainerSlotChange}></slot>\n </div>`;\n }\n\n private handleContainerSlotChange(event: Event) {\n const slot = event.target as HTMLSlotElement;\n\n const enabled = !this.disabled;\n\n for (const element of slot.assignedElements({flatten: true})) {\n element.dispatchEvent(new CustomEvent('md-gb:change-container-slot'));\n element.dispatchEvent(\n new CustomEvent('md-gb:set-enabled', {\n detail: {enabled},\n }),\n );\n }\n }\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["card.scss","_card-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,oBAEI,MCNF,+BACA,wDACA,iDACA,6BACA,mBACA,oDDKE,wECDF,wDDKE,kBCDF,iEDII,sIAKF,oBCCF,+CACA,qDACA,qEAIA,+FAIA,mEDCE,oBCGF,6DACA,wDDDI,sFCKJ,wDDDI,+CCKJ,2EDCI,aACA,sBACA,kBACA,gBACA,wCACA,qCACA,sCACA,uDAGF,gBACE,gBACA,+BACA,YACA,aACA,kBACA,QACA","file":"card.css"}
1
+ {"version":3,"sourceRoot":"","sources":["card.scss","_card-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,oBAEI,MCLF,+BACA,wDACA,iDACA,6BACA,mBACA,oDDIE,wECCF,wDDGE,kBCCF,iEDEI,6CCEJ,yFDGE,oBCGF,+CACA,qDACA,qBDFI,gDCMJ,gDDFI,+CCMJ,mEDDE,oBCKF,6DACA,wDDHI,sFCOJ,wDDHI,+CCOJ,qEDFE,MACE,aACA,sBACA,kBACA,gBACA,wCACA,qCACA,sCACA,uDAGF,gBACE,gBACA,+BACA,YACA,aACA,kBACA,QACA","file":"card.css"}
@@ -0,0 +1,12 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2026 Google LLC
4
+ * SPDX-License-Identifier: Apache-2.0
5
+ */
6
+ import { CardElement } from './card-element.js';
7
+ declare global {
8
+ interface HTMLElementTagNameMap {
9
+ /** A Material Design component. */
10
+ 'md-gb-card': CardElement;
11
+ }
12
+ }
@@ -0,0 +1,8 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2026 Google LLC
4
+ * SPDX-License-Identifier: Apache-2.0
5
+ */
6
+ import { CardElement } from './card-element.js';
7
+ customElements.define('md-gb-card', CardElement);
8
+ //# sourceMappingURL=md-gb-card.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"md-gb-card.js","sourceRoot":"","sources":["md-gb-card.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 {CardElement} from './card-element.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design component. */\n 'md-gb-card': CardElement;\n }\n}\n\ncustomElements.define('md-gb-card', CardElement);\n"]}
@@ -4,6 +4,7 @@
4
4
  //
5
5
 
6
6
  @mixin root {
7
+ // LINT.IfChange
7
8
  --container-color: transparent;
8
9
  --container-shape: 2px;
9
10
  --container-size: 18px;
@@ -14,6 +15,7 @@
14
15
  --state-layer-color: var(--md-sys-color-on-surface);
15
16
  --state-layer-shape: 50%;
16
17
  --state-layer-size: 40px;
18
+ // LINT.ThenChange(md-checkbox.ts) keep in sync with `@cssprop` jsdoc tags
17
19
  }
18
20
 
19
21
  @mixin hovered {
@@ -7,17 +7,25 @@ import { CSSResultOrNative, LitElement } from 'lit';
7
7
  import { createValidator, getValidityAnchor } from '../../../behaviors/constraint-validation.js';
8
8
  import { getFormState, getFormValue } from '../../../behaviors/form-associated.js';
9
9
  import { CheckboxValidator } from '../../../behaviors/validators/checkbox-validator.js';
10
- declare global {
11
- interface HTMLElementTagNameMap {
12
- /** A Material Design checkbox component. */
13
- 'md-checkbox': Checkbox;
14
- }
15
- }
16
10
  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/constraint-validation.js").ConstraintValidation>>;
17
11
  /**
18
12
  * A Material Design checkbox component.
13
+ *
14
+ * @fires {InputEvent} input - Fired when the checkbox is checked or unchecked. --bubbles --composed
15
+ * @fires {Event} change - Fired when the checkbox is checked or unchecked. --bubbles
16
+ * @csspart checkbox - The checkbox's root element.
17
+ * @cssprop --container-color
18
+ * @cssprop --container-shape
19
+ * @cssprop --container-size
20
+ * @cssprop --icon-color
21
+ * @cssprop --icon-size
22
+ * @cssprop --outline-color
23
+ * @cssprop --outline-width
24
+ * @cssprop --state-layer-color
25
+ * @cssprop --state-layer-shape
26
+ * @cssprop --state-layer-size
19
27
  */
20
- export declare class Checkbox extends baseClass {
28
+ export declare class CheckboxElement extends baseClass {
21
29
  /** @nocollapse */
22
30
  static shadowRootOptions: ShadowRootInit;
23
31
  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, query } from 'lit/decorators.js';
8
+ import { property, query } 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 { createValidator, getValidityAnchor, mixinConstraintValidation, } from '../../../behaviors/constraint-validation.js';
@@ -23,8 +23,22 @@ import { checkbox } from './checkbox.js';
23
23
  const baseClass = mixinDelegatesAria(mixinConstraintValidation(mixinFormAssociated(mixinElementInternals(LitElement))));
24
24
  /**
25
25
  * A Material Design checkbox component.
26
+ *
27
+ * @fires {InputEvent} input - Fired when the checkbox is checked or unchecked. --bubbles --composed
28
+ * @fires {Event} change - Fired when the checkbox is checked or unchecked. --bubbles
29
+ * @csspart checkbox - The checkbox's root element.
30
+ * @cssprop --container-color
31
+ * @cssprop --container-shape
32
+ * @cssprop --container-size
33
+ * @cssprop --icon-color
34
+ * @cssprop --icon-size
35
+ * @cssprop --outline-color
36
+ * @cssprop --outline-width
37
+ * @cssprop --state-layer-color
38
+ * @cssprop --state-layer-shape
39
+ * @cssprop --state-layer-size
26
40
  */
27
- let Checkbox = class Checkbox extends baseClass {
41
+ export class CheckboxElement extends baseClass {
28
42
  constructor() {
29
43
  super(...arguments);
30
44
  /**
@@ -130,13 +144,13 @@ let Checkbox = class Checkbox extends baseClass {
130
144
  [getValidityAnchor]() {
131
145
  return this.input;
132
146
  }
133
- };
147
+ }
134
148
  /** @nocollapse */
135
- Checkbox.shadowRootOptions = {
149
+ CheckboxElement.shadowRootOptions = {
136
150
  mode: 'open',
137
151
  delegatesFocus: true,
138
152
  };
139
- Checkbox.styles = [
153
+ CheckboxElement.styles = [
140
154
  focusRingStyles,
141
155
  rippleStyles,
142
156
  checkboxStyles,
@@ -151,24 +165,20 @@ Checkbox.styles = [
151
165
  ];
152
166
  __decorate([
153
167
  property({ type: Boolean })
154
- ], Checkbox.prototype, "error", void 0);
168
+ ], CheckboxElement.prototype, "error", void 0);
155
169
  __decorate([
156
170
  property({ type: Boolean })
157
- ], Checkbox.prototype, "checked", void 0);
171
+ ], CheckboxElement.prototype, "checked", void 0);
158
172
  __decorate([
159
173
  property({ type: Boolean })
160
- ], Checkbox.prototype, "indeterminate", void 0);
174
+ ], CheckboxElement.prototype, "indeterminate", void 0);
161
175
  __decorate([
162
176
  property({ type: Boolean })
163
- ], Checkbox.prototype, "required", void 0);
177
+ ], CheckboxElement.prototype, "required", void 0);
164
178
  __decorate([
165
179
  property()
166
- ], Checkbox.prototype, "value", void 0);
180
+ ], CheckboxElement.prototype, "value", void 0);
167
181
  __decorate([
168
182
  query('input', true)
169
- ], Checkbox.prototype, "input", void 0);
170
- Checkbox = __decorate([
171
- customElement('md-checkbox')
172
- ], Checkbox);
173
- export { Checkbox };
174
- //# sourceMappingURL=md-checkbox.js.map
183
+ ], CheckboxElement.prototype, "input", void 0);
184
+ //# sourceMappingURL=checkbox-element.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"checkbox-element.js","sourceRoot":"","sources":["checkbox-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, query} 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 {\n createValidator,\n getValidityAnchor,\n mixinConstraintValidation,\n} from '../../../behaviors/constraint-validation.js';\nimport {mixinElementInternals} from '../../../behaviors/element-internals.js';\nimport {\n getFormState,\n getFormValue,\n mixinFormAssociated,\n} from '../../../behaviors/form-associated.js';\nimport {CheckboxValidator} from '../../../behaviors/validators/checkbox-validator.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 checkboxStyles from './checkbox.css' with {type: 'css'}; // github-only\n// import checkboxStyles from './checkbox.cssresult.js'; // google3-only\n\nimport {checkbox} from './checkbox.js';\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(\n mixinConstraintValidation(\n mixinFormAssociated(mixinElementInternals(LitElement)),\n ),\n);\n\n/**\n * A Material Design checkbox component.\n *\n * @fires {InputEvent} input - Fired when the checkbox is checked or unchecked. --bubbles --composed\n * @fires {Event} change - Fired when the checkbox is checked or unchecked. --bubbles\n * @csspart checkbox - The checkbox's root element.\n * @cssprop --container-color\n * @cssprop --container-shape\n * @cssprop --container-size\n * @cssprop --icon-color\n * @cssprop --icon-size\n * @cssprop --outline-color\n * @cssprop --outline-width\n * @cssprop --state-layer-color\n * @cssprop --state-layer-shape\n * @cssprop --state-layer-size\n */\nexport class CheckboxElement 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 checkboxStyles,\n css`\n :host {\n display: inline-flex;\n }\n .checkbox {\n flex: 1;\n }\n `,\n ];\n\n /**\n * Whether or not the checkbox is invalid.\n */\n @property({type: Boolean}) error = false;\n\n /**\n * Whether or not the checkbox is selected.\n */\n @property({type: Boolean}) checked = false;\n\n /**\n * The default checked state of the checkbox.\n */\n get defaultChecked(): boolean {\n return this.hasAttribute('checked');\n }\n set defaultChecked(value: boolean) {\n this.toggleAttribute('checked', value || false);\n }\n\n /**\n * Whether or not the checkbox is indeterminate.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes\n */\n @property({type: Boolean}) indeterminate = false;\n\n /**\n * When true, require the checkbox to be selected when participating in\n * form submission.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation\n */\n @property({type: Boolean}) required = false;\n\n /**\n * The value of the checkbox that is submitted with a form when selected.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n */\n @property() value = 'on';\n\n @query('input', true)\n private readonly input!: HTMLInputElement | null;\n /**\n * Mimics the behavior of <input> dirty checkedness, where the `checked`\n * attribute only updates the checked state if the checkbox has not been\n * interacted with.\n *\n * @see https://html.spec.whatwg.org/multipage/input.html#concept-input-checked-dirty-flag\n */\n private dirtyCheckedness = false;\n\n protected override render() {\n // Needed for closure conformance\n const {ariaLabel, ariaInvalid} = this as ARIAMixinStrict;\n return html`\n <input\n part=\"checkbox\"\n class=\"${checkbox({invalid: this.error})}\"\n type=\"checkbox\"\n aria-checked=${this.indeterminate ? 'mixed' : nothing}\n aria-label=${ariaLabel || nothing}\n aria-invalid=${ariaInvalid || this.error || nothing}\n ?disabled=${this.disabled}\n ?required=${this.required}\n .indeterminate=${this.indeterminate}\n .checked=${this.checked}\n @input=${this.handleInput}\n @change=${this.handleChange} />\n `;\n }\n\n private handleInput(event: Event) {\n this.dirtyCheckedness = true;\n const target = event.target as HTMLInputElement;\n this.checked = target.checked;\n this.indeterminate = target.indeterminate;\n // <input> 'input' event bubbles and is composed, don't re-dispatch it.\n }\n\n private handleChange(event: Event) {\n this.dirtyCheckedness = true;\n // <input> 'change' event is not composed, re-dispatch it.\n redispatchEvent(this, event);\n }\n\n override attributeChangedCallback(\n name: string,\n oldValue: string | null,\n newValue: string | null,\n ) {\n if (name === 'checked' && this.dirtyCheckedness) {\n // The 'checked' attribute does not update checkboxes that have been\n // interacted with.\n return;\n }\n\n super.attributeChangedCallback(name, oldValue, newValue);\n }\n\n override [getFormValue]() {\n return this.checked ? this.value : null;\n }\n\n override [getFormState]() {\n return String(this.checked);\n }\n\n override formResetCallback() {\n this.dirtyCheckedness = false;\n this.checked = this.defaultChecked;\n }\n\n override formStateRestoreCallback(state: string) {\n this.checked = state === 'true';\n }\n\n override [createValidator]() {\n return new CheckboxValidator(() => this);\n }\n\n override [getValidityAnchor]() {\n return this.input;\n }\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["checkbox.scss","_checkbox-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,wBAEI,UCNF,+BACA,uBACA,uBACA,0BACA,kBACA,wDACA,qBACA,oDACA,yBACA,yBDCE,4BCGF,oDACA,mFAIA,8EAIA,iDACA,gDDDE,8DCKF,mBACA,+CACA,6CDJI,mFCQJ,iDDJI,qFCQJ,oDDHE,gCCOF,+CACA,2CDLI,uFCSJ,6CACA,2CDLE,kCCSF,sEDNI,yFCUJ,wEACA,0CDNE,UACE,gBACA,kBACA,oBACA,mBACA,uBACA,WACA,YACA,sBACA,aACA,SACA,gBAEA,oDACE,iBAGF,kBACE,oBACA,oBACA,mBACA,uBACA,sBACA,gBACA,eACA,4BACA,kCACA,qCACA,uDACA,wBACA,4CAGF,iBACE,WACA,kBACA,eACA,+BACA,+BACA,8BACA,uCACA,kCACA,wCACA,oCACA","file":"checkbox.css"}
1
+ {"version":3,"sourceRoot":"","sources":["checkbox.scss","_checkbox-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,wBAEI,UCLF,+BACA,uBACA,uBACA,0BACA,kBACA,wDACA,qBACA,oDACA,yBACA,qDAKA,oDACA,gDDFE,mCCMF,gDDFE,8BCMF,iDACA,gDDHE,8DCOF,mBACA,+CACA,6CDNI,mFCUJ,iDDNI,qFCUJ,oDDLE,gCCSF,+CACA,2CDPI,uFCWJ,6CACA,2CDPE,kCCWF,sEDRI,yFCYJ,wEACA,0CDRE,UACE,gBACA,kBACA,oBACA,mBACA,uBACA,WACA,YACA,sBACA,aACA,SACA,gBAEA,oDACE,iBAGF,kBACE,oBACA,oBACA,mBACA,uBACA,sBACA,gBACA,eACA,4BACA,kCACA,qCACA,uDACA,wBACA,4CAGF,iBACE,WACA,kBACA,eACA,+BACA,+BACA,8BACA,uCACA,kCACA,wCACA,oCACA","file":"checkbox.css"}
@@ -0,0 +1,12 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2026 Google LLC
4
+ * SPDX-License-Identifier: Apache-2.0
5
+ */
6
+ import { CheckboxElement } from './checkbox-element.js';
7
+ declare global {
8
+ interface HTMLElementTagNameMap {
9
+ /** A Material Design component. */
10
+ 'md-gb-checkbox': CheckboxElement;
11
+ }
12
+ }
@@ -0,0 +1,8 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2026 Google LLC
4
+ * SPDX-License-Identifier: Apache-2.0
5
+ */
6
+ import { CheckboxElement } from './checkbox-element.js';
7
+ customElements.define('md-gb-checkbox', CheckboxElement);
8
+ //# sourceMappingURL=md-gb-checkbox.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"md-gb-checkbox.js","sourceRoot":"","sources":["md-gb-checkbox.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,eAAe,EAAC,MAAM,uBAAuB,CAAC;AAStD,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,eAAe,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CheckboxElement} from './checkbox-element.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design component. */\n 'md-gb-checkbox': CheckboxElement;\n }\n}\n\ncustomElements.define('md-gb-checkbox', CheckboxElement);\n"]}