@material/web 2.4.2-nightly.418291b.0 → 2.4.2-nightly.4413a6e.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 (74) hide show
  1. package/custom-elements.json +930 -3386
  2. package/labs/gb/components/button/_button-tokens.scss +2 -0
  3. package/labs/gb/components/button/button.css.map +1 -1
  4. package/labs/gb/components/button/md-button.d.ts +22 -1
  5. package/labs/gb/components/button/md-button.js +22 -1
  6. package/labs/gb/components/button/md-button.js.map +1 -1
  7. package/labs/gb/components/card/_card-tokens.scss +2 -0
  8. package/labs/gb/components/card/card.css.map +1 -1
  9. package/labs/gb/components/card/md-card.d.ts +12 -1
  10. package/labs/gb/components/card/md-card.js +12 -1
  11. package/labs/gb/components/card/md-card.js.map +1 -1
  12. package/labs/gb/components/checkbox/_checkbox-tokens.scss +2 -0
  13. package/labs/gb/components/checkbox/checkbox.css.map +1 -1
  14. package/labs/gb/components/checkbox/md-checkbox.d.ts +15 -1
  15. package/labs/gb/components/checkbox/md-checkbox.js +15 -1
  16. package/labs/gb/components/checkbox/md-checkbox.js.map +1 -1
  17. package/labs/gb/components/divider/_divider-tokens.scss +2 -0
  18. package/labs/gb/components/divider/divider.css.map +1 -1
  19. package/labs/gb/components/divider/md-divider.d.ts +5 -1
  20. package/labs/gb/components/divider/md-divider.js +5 -1
  21. package/labs/gb/components/divider/md-divider.js.map +1 -1
  22. package/labs/gb/components/fab/_fab-tokens.scss +2 -0
  23. package/labs/gb/components/fab/fab.css.map +1 -1
  24. package/labs/gb/components/fab/md-fab.d.ts +16 -1
  25. package/labs/gb/components/fab/md-fab.js +16 -1
  26. package/labs/gb/components/fab/md-fab.js.map +1 -1
  27. package/labs/gb/components/iconbutton/_icon-button-tokens.scss +2 -0
  28. package/labs/gb/components/iconbutton/icon-button.css.map +1 -1
  29. package/labs/gb/components/iconbutton/md-icon-button.d.ts +15 -1
  30. package/labs/gb/components/iconbutton/md-icon-button.js +15 -1
  31. package/labs/gb/components/iconbutton/md-icon-button.js.map +1 -1
  32. package/labs/gb/components/list/_list-tokens.scss +4 -0
  33. package/labs/gb/components/list/list.css.map +1 -1
  34. package/labs/gb/components/list/md-list-item.d.ts +40 -1
  35. package/labs/gb/components/list/md-list-item.js +40 -1
  36. package/labs/gb/components/list/md-list-item.js.map +1 -1
  37. package/labs/gb/components/list/md-list.d.ts +6 -1
  38. package/labs/gb/components/list/md-list.js +6 -1
  39. package/labs/gb/components/list/md-list.js.map +1 -1
  40. package/labs/gb/components/menu/_menu-tokens.scss +4 -0
  41. package/labs/gb/components/menu/md-menu-group.d.ts +3 -1
  42. package/labs/gb/components/menu/md-menu-group.js +5 -1
  43. package/labs/gb/components/menu/md-menu-group.js.map +1 -1
  44. package/labs/gb/components/menu/md-menu-item.d.ts +32 -1
  45. package/labs/gb/components/menu/md-menu-item.js +33 -1
  46. package/labs/gb/components/menu/md-menu-item.js.map +1 -1
  47. package/labs/gb/components/menu/md-menu.d.ts +11 -1
  48. package/labs/gb/components/menu/md-menu.js +11 -1
  49. package/labs/gb/components/menu/md-menu.js.map +1 -1
  50. package/labs/gb/components/menu/menu.css.map +1 -1
  51. package/labs/gb/components/menu/menu.js +1 -1
  52. package/labs/gb/components/menu/menu.js.map +1 -1
  53. package/labs/gb/components/radio/_radio-tokens.scss +2 -0
  54. package/labs/gb/components/radio/md-radio.d.ts +10 -1
  55. package/labs/gb/components/radio/md-radio.js +10 -1
  56. package/labs/gb/components/radio/md-radio.js.map +1 -1
  57. package/labs/gb/components/radio/radio.css.map +1 -1
  58. package/labs/gb/components/splitbutton/_split-button-tokens.scss +4 -0
  59. package/labs/gb/components/splitbutton/md-split-button.d.ts +14 -1
  60. package/labs/gb/components/splitbutton/md-split-button.js +14 -1
  61. package/labs/gb/components/splitbutton/md-split-button.js.map +1 -1
  62. package/labs/gb/components/splitbutton/split-button.css.map +1 -1
  63. package/labs/gb/components/splitbutton/split-button.d.ts +4 -4
  64. package/labs/gb/components/splitbutton/split-button.js +4 -4
  65. package/labs/gb/components/splitbutton/split-button.js.map +1 -1
  66. package/labs/gb/components/switch/_switch-tokens.scss +2 -0
  67. package/labs/gb/components/switch/md-switch.d.ts +19 -1
  68. package/labs/gb/components/switch/md-switch.js +19 -1
  69. package/labs/gb/components/switch/md-switch.js.map +1 -1
  70. package/labs/gb/components/switch/switch.css.map +1 -1
  71. package/labs/gb/styles/icon/md-icon.d.ts +1 -1
  72. package/labs/gb/styles/icon/md-icon.js +1 -1
  73. package/labs/gb/styles/icon/md-icon.js.map +1 -1
  74. package/package.json +2 -2
@@ -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-elevation: var(--md-sys-elevation-shadow-0);
@@ -19,6 +20,7 @@
19
20
  --leading-space: 0;
20
21
  --state-layer-color: transparent;
21
22
  --trailing-space: 0;
23
+ // LINT.ThenChange(md-button.ts) keep in sync with `@cssprop` jsdoc tags
22
24
  }
23
25
 
24
26
  @mixin selected {
@@ -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"}
@@ -7,12 +7,33 @@ import { CSSResultOrNative, LitElement, PropertyValues } from 'lit';
7
7
  declare global {
8
8
  interface HTMLElementTagNameMap {
9
9
  /** A Material Design button. */
10
- 'md-button': Button;
10
+ 'md-gb-button': Button;
11
11
  }
12
12
  }
13
13
  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>>;
14
14
  /**
15
15
  * A Material Design button.
16
+ *
17
+ * @slot - Used to display a label and optional icon.
18
+ * @slot container - Used to set a custom background container for the button.
19
+ * @fires {InputEvent} input - Fired when a toggle button is selected or unselected. --bubbles --composed
20
+ * @fires {Event} change - Fired when a toggle button is selected or unselected. --bubbles
21
+ * @csspart btn - The button's root element.
22
+ * @cssprop --container-color
23
+ * @cssprop --container-height
24
+ * @cssprop --container-elevation
25
+ * @cssprop --container-shape
26
+ * @cssprop --outline-width
27
+ * @cssprop --outline-color
28
+ * @cssprop --icon-label-space
29
+ * @cssprop --icon-color
30
+ * @cssprop --icon-size
31
+ * @cssprop --label-text
32
+ * @cssprop --label-text-tracking
33
+ * @cssprop --label-text-color
34
+ * @cssprop --leading-space
35
+ * @cssprop --state-layer-color
36
+ * @cssprop --trailing-space
16
37
  */
17
38
  export declare class Button extends baseClass {
18
39
  /** @nocollapse */
@@ -23,6 +23,27 @@ 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
48
  let Button = class Button extends baseClass {
28
49
  constructor() {
@@ -256,7 +277,7 @@ __decorate([
256
277
  property()
257
278
  ], Button.prototype, "target", void 0);
258
279
  Button = __decorate([
259
- customElement('md-button')
280
+ customElement('md-gb-button')
260
281
  ], Button);
261
282
  export { Button };
262
283
  //# sourceMappingURL=md-button.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"md-button.js","sourceRoot":"","sources":["md-button.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 {customElement, 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\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design button. */\n 'md-button': Button;\n }\n}\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@customElement('md-button')\nexport class Button 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
+ {"version":3,"file":"md-button.js","sourceRoot":"","sources":["md-button.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 {customElement, 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\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design button. */\n 'md-gb-button': Button;\n }\n}\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 */\n@customElement('md-gb-button')\nexport class Button 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"]}
@@ -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 {
@@ -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"}
@@ -8,12 +8,23 @@ import { type CardColor } from './card.js';
8
8
  declare global {
9
9
  interface HTMLElementTagNameMap {
10
10
  /** A Material Design card component. */
11
- 'md-card': Card;
11
+ 'md-gb-card': Card;
12
12
  }
13
13
  }
14
14
  declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<typeof LitElement>;
15
15
  /**
16
16
  * A Material Design card.
17
+ *
18
+ * @slot - Used to display the card's content. Note: add padding to content, not the host <md-gb-card> element.
19
+ * @slot container - Used to set a custom background container for the card.
20
+ * @csspart card - The card's root element.
21
+ * @csspart card-btn - The card's main action button, when interactive.
22
+ * @cssprop --container-color
23
+ * @cssprop --container-elevation
24
+ * @cssprop --container-shape
25
+ * @cssprop --outline-color
26
+ * @cssprop --outline-width
27
+ * @cssprop --state-layer-color
17
28
  */
18
29
  export declare class Card extends baseClass {
19
30
  /** @nocollapse */
@@ -20,6 +20,17 @@ 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
35
  let Card = class Card extends baseClass {
25
36
  constructor() {
@@ -156,7 +167,7 @@ __decorate([
156
167
  property({ type: Boolean })
157
168
  ], Card.prototype, "interactive", void 0);
158
169
  Card = __decorate([
159
- customElement('md-card')
170
+ customElement('md-gb-card')
160
171
  ], Card);
161
172
  export { Card };
162
173
  //# sourceMappingURL=md-card.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"md-card.js","sourceRoot":"","sources":["md-card.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 {customElement, 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\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design card component. */\n 'md-card': Card;\n }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(LitElement);\n\n/**\n * A Material Design card.\n */\n@customElement('md-card')\nexport class Card 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
+ {"version":3,"file":"md-card.js","sourceRoot":"","sources":["md-card.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 {customElement, 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\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design card component. */\n 'md-gb-card': Card;\n }\n}\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 */\n@customElement('md-gb-card')\nexport class Card 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"]}
@@ -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 {
@@ -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"}
@@ -10,12 +10,26 @@ import { CheckboxValidator } from '../../../behaviors/validators/checkbox-valida
10
10
  declare global {
11
11
  interface HTMLElementTagNameMap {
12
12
  /** A Material Design checkbox component. */
13
- 'md-checkbox': Checkbox;
13
+ 'md-gb-checkbox': Checkbox;
14
14
  }
15
15
  }
16
16
  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
17
  /**
18
18
  * A Material Design checkbox component.
19
+ *
20
+ * @fires {InputEvent} input - Fired when the checkbox is checked or unchecked. --bubbles --composed
21
+ * @fires {Event} change - Fired when the checkbox is checked or unchecked. --bubbles
22
+ * @csspart checkbox - The checkbox's root element.
23
+ * @cssprop --container-color
24
+ * @cssprop --container-shape
25
+ * @cssprop --container-size
26
+ * @cssprop --icon-color
27
+ * @cssprop --icon-size
28
+ * @cssprop --outline-color
29
+ * @cssprop --outline-width
30
+ * @cssprop --state-layer-color
31
+ * @cssprop --state-layer-shape
32
+ * @cssprop --state-layer-size
19
33
  */
20
34
  export declare class Checkbox extends baseClass {
21
35
  /** @nocollapse */
@@ -23,6 +23,20 @@ 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
41
  let Checkbox = class Checkbox extends baseClass {
28
42
  constructor() {
@@ -168,7 +182,7 @@ __decorate([
168
182
  query('input', true)
169
183
  ], Checkbox.prototype, "input", void 0);
170
184
  Checkbox = __decorate([
171
- customElement('md-checkbox')
185
+ customElement('md-gb-checkbox')
172
186
  ], Checkbox);
173
187
  export { Checkbox };
174
188
  //# sourceMappingURL=md-checkbox.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"md-checkbox.js","sourceRoot":"","sources":["md-checkbox.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AACtE,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAEjE,OAAO,EAAC,kBAAkB,EAAC,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAC,eAAe,EAAC,MAAM,iDAAiD,CAAC;AAChF,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,yBAAyB,GAC1B,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAAC,qBAAqB,EAAC,MAAM,yCAAyC,CAAC;AAC9E,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,mBAAmB,GACpB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAC,iBAAiB,EAAC,MAAM,qDAAqD,CAAC;AAEtF,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,cAAc,MAAM,gBAAgB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAC9E,wEAAwE;AAExE,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AASvC,wCAAwC;AACxC,MAAM,SAAS,GAAG,kBAAkB,CAClC,yBAAyB,CACvB,mBAAmB,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC,CACvD,CACF,CAAC;AAEF;;GAEG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,SAAS;IAAhC;;QAqBL;;WAEG;QACwB,UAAK,GAAG,KAAK,CAAC;QAEzC;;WAEG;QACwB,YAAO,GAAG,KAAK,CAAC;QAY3C;;;;WAIG;QACwB,kBAAa,GAAG,KAAK,CAAC;QAEjD;;;;;WAKG;QACwB,aAAQ,GAAG,KAAK,CAAC;QAE5C;;;;WAIG;QACS,UAAK,GAAG,IAAI,CAAC;QAIzB;;;;;;WAMG;QACK,qBAAgB,GAAG,KAAK,CAAC;IA0EnC,CAAC;IAnHC;;OAEG;IACH,IAAI,cAAc;QAChB,OAAO,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACtC,CAAC;IACD,IAAI,cAAc,CAAC,KAAc;QAC/B,IAAI,CAAC,eAAe,CAAC,SAAS,EAAE,KAAK,IAAI,KAAK,CAAC,CAAC;IAClD,CAAC;IAmCkB,MAAM;QACvB,iCAAiC;QACjC,MAAM,EAAC,SAAS,EAAE,WAAW,EAAC,GAAG,IAAuB,CAAC;QACzD,OAAO,IAAI,CAAA;;;iBAGE,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,CAAC,KAAK,EAAC,CAAC;;uBAEzB,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO;qBACxC,SAAS,IAAI,OAAO;uBAClB,WAAW,IAAI,IAAI,CAAC,KAAK,IAAI,OAAO;oBACvC,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;yBACR,IAAI,CAAC,aAAa;mBACxB,IAAI,CAAC,OAAO;iBACd,IAAI,CAAC,WAAW;kBACf,IAAI,CAAC,YAAY;KAC9B,CAAC;IACJ,CAAC;IAEO,WAAW,CAAC,KAAY;QAC9B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC7B,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAChD,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;QAC9B,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC,aAAa,CAAC;QAC1C,uEAAuE;IACzE,CAAC;IAEO,YAAY,CAAC,KAAY;QAC/B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC7B,0DAA0D;QAC1D,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;IAEQ,wBAAwB,CAC/B,IAAY,EACZ,QAAuB,EACvB,QAAuB;QAEvB,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAChD,oEAAoE;YACpE,mBAAmB;YACnB,OAAO;QACT,CAAC;QAED,KAAK,CAAC,wBAAwB,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC3D,CAAC;IAEQ,CAAC,YAAY,CAAC;QACrB,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAC1C,CAAC;IAEQ,CAAC,YAAY,CAAC;QACrB,OAAO,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC;IAEQ,iBAAiB;QACxB,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;QAC9B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;IACrC,CAAC;IAEQ,wBAAwB,CAAC,KAAa;QAC7C,IAAI,CAAC,OAAO,GAAG,KAAK,KAAK,MAAM,CAAC;IAClC,CAAC;IAEQ,CAAC,eAAe,CAAC;QACxB,OAAO,IAAI,iBAAiB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC;IAC3C,CAAC;IAEQ,CAAC,iBAAiB,CAAC;QAC1B,OAAO,IAAI,CAAC,KAAK,CAAC;IACpB,CAAC;;AAhJD,kBAAkB;AACF,0BAAiB,GAAmB;IAClD,IAAI,EAAE,MAAM;IACZ,cAAc,EAAE,IAAI;CACrB,AAHgC,CAG/B;AAEc,eAAM,GAAwB;IAC5C,eAAe;IACf,YAAY;IACZ,cAAc;IACd,GAAG,CAAA;;;;;;;KAOF;CACF,AAZqB,CAYpB;AAKyB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;uCAAe;AAKd;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;yCAAiB;AAiBhB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;+CAAuB;AAQtB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;0CAAkB;AAOhC;IAAX,QAAQ,EAAE;uCAAc;AAGR;IADhB,KAAK,CAAC,OAAO,EAAE,IAAI,CAAC;uCAC4B;AAhEtC,QAAQ;IADpB,aAAa,CAAC,aAAa,CAAC;GAChB,QAAQ,CAkJpB","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 {customElement, 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\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design checkbox component. */\n 'md-checkbox': Checkbox;\n }\n}\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@customElement('md-checkbox')\nexport class Checkbox 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
+ {"version":3,"file":"md-checkbox.js","sourceRoot":"","sources":["md-checkbox.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 {customElement, 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\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design checkbox component. */\n 'md-gb-checkbox': Checkbox;\n }\n}\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 */\n@customElement('md-gb-checkbox')\nexport class Checkbox 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"]}
@@ -4,6 +4,8 @@
4
4
  //
5
5
 
6
6
  @mixin root {
7
+ // LINT.IfChange
7
8
  --color: var(--md-sys-color-outline-variant);
8
9
  --thickness: 1px;
10
+ // LINT.ThenChange(md-divider.ts) keep in sync with `@cssprop` jsdoc tags
9
11
  }
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["divider.scss","_divider-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,cACA,uBAEI,SCNF,6CACA,iBDQI,sBACA,YACA,aAGF,gCACE,kDACA,WAGF,0BACE,sDACA","file":"divider.css"}
1
+ {"version":3,"sourceRoot":"","sources":["divider.scss","_divider-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,cACA,uBAEI,SCLF,6CACA,iBDOI,sBACA,YACA,aAGF,gCACE,kDACA,WAGF,0BACE,sDACA","file":"divider.css"}
@@ -7,11 +7,15 @@ import { CSSResultOrNative, LitElement } from 'lit';
7
7
  declare global {
8
8
  interface HTMLElementTagNameMap {
9
9
  /** A Material Design divider component. */
10
- 'md-divider': Divider;
10
+ 'md-gb-divider': Divider;
11
11
  }
12
12
  }
13
13
  /**
14
14
  * A Material Design divider component.
15
+ *
16
+ * @csspart divider - The divider element.
17
+ * @cssprop --color
18
+ * @cssprop --thickness
15
19
  */
16
20
  export declare class Divider extends LitElement {
17
21
  static styles: CSSResultOrNative[];
@@ -11,6 +11,10 @@ import dividerStyles from './divider.css' with { type: 'css' }; // github-only
11
11
  import { divider } from './divider.js';
12
12
  /**
13
13
  * A Material Design divider component.
14
+ *
15
+ * @csspart divider - The divider element.
16
+ * @cssprop --color
17
+ * @cssprop --thickness
14
18
  */
15
19
  let Divider = class Divider extends LitElement {
16
20
  constructor() {
@@ -45,7 +49,7 @@ __decorate([
45
49
  property({ type: Boolean, reflect: true })
46
50
  ], Divider.prototype, "vertical", void 0);
47
51
  Divider = __decorate([
48
- customElement('md-divider')
52
+ customElement('md-gb-divider')
49
53
  ], Divider);
50
54
  export { Divider };
51
55
  //# sourceMappingURL=md-divider.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"md-divider.js","sourceRoot":"","sources":["md-divider.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE1D,OAAO,aAAa,MAAM,eAAe,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAC5E,kFAAkF;AAElF,OAAO,EAAC,OAAO,EAAC,MAAM,cAAc,CAAC;AASrC;;GAEG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAmBL;;WAEG;QACuC,aAAQ,GAAG,KAAK,CAAC;IAK7D,CAAC;IAHoB,MAAM;QACvB,OAAO,IAAI,CAAA,8BAA8B,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC;IACnE,CAAC;;AAzBe,cAAM,GAAwB;IAC5C,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;KAaF;CACF,AAhBqB,CAgBpB;AAKwC;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;yCAAkB;AAtBhD,OAAO;IADnB,aAAa,CAAC,YAAY,CAAC;GACf,OAAO,CA2BnB","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 {customElement, property} from 'lit/decorators.js';\n\nimport dividerStyles from './divider.css' with {type: 'css'}; // github-only\n// import {styles as dividerStyles} from './divider.cssresult.js'; // google3-only\n\nimport {divider} from './divider.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design divider component. */\n 'md-divider': Divider;\n }\n}\n\n/**\n * A Material Design divider component.\n */\n@customElement('md-divider')\nexport class Divider extends LitElement {\n static override styles: CSSResultOrNative[] = [\n dividerStyles,\n css`\n :host {\n display: flex;\n }\n .divider {\n flex: 1;\n }\n :host(:not([vertical])) {\n width: 100%;\n }\n :host([vertical]) {\n min-height: 100%;\n }\n `,\n ];\n\n /**\n * Whether or not the divider is vertical.\n */\n @property({type: Boolean, reflect: true}) vertical = false;\n\n protected override render() {\n return html`<div part=\"divider\" class=\"${divider(this)}\"></div>`;\n }\n}\n"]}
1
+ {"version":3,"file":"md-divider.js","sourceRoot":"","sources":["md-divider.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE1D,OAAO,aAAa,MAAM,eAAe,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAC5E,kFAAkF;AAElF,OAAO,EAAC,OAAO,EAAC,MAAM,cAAc,CAAC;AASrC;;;;;;GAMG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAmBL;;WAEG;QACuC,aAAQ,GAAG,KAAK,CAAC;IAK7D,CAAC;IAHoB,MAAM;QACvB,OAAO,IAAI,CAAA,8BAA8B,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC;IACnE,CAAC;;AAzBe,cAAM,GAAwB;IAC5C,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;KAaF;CACF,AAhBqB,CAgBpB;AAKwC;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;yCAAkB;AAtBhD,OAAO;IADnB,aAAa,CAAC,eAAe,CAAC;GAClB,OAAO,CA2BnB","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 {customElement, property} from 'lit/decorators.js';\n\nimport dividerStyles from './divider.css' with {type: 'css'}; // github-only\n// import {styles as dividerStyles} from './divider.cssresult.js'; // google3-only\n\nimport {divider} from './divider.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design divider component. */\n 'md-gb-divider': Divider;\n }\n}\n\n/**\n * A Material Design divider component.\n *\n * @csspart divider - The divider element.\n * @cssprop --color\n * @cssprop --thickness\n */\n@customElement('md-gb-divider')\nexport class Divider extends LitElement {\n static override styles: CSSResultOrNative[] = [\n dividerStyles,\n css`\n :host {\n display: flex;\n }\n .divider {\n flex: 1;\n }\n :host(:not([vertical])) {\n width: 100%;\n }\n :host([vertical]) {\n min-height: 100%;\n }\n `,\n ];\n\n /**\n * Whether or not the divider is vertical.\n */\n @property({type: Boolean, reflect: true}) vertical = false;\n\n protected override render() {\n return html`<div part=\"divider\" class=\"${divider(this)}\"></div>`;\n }\n}\n"]}
@@ -4,6 +4,7 @@
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-3);
9
10
  --container-height: 56px;
@@ -16,6 +17,7 @@
16
17
  --label-text-tracking: var(--md-sys-typescale-label-lg-tracking);
17
18
  --leading-space: 16px;
18
19
  --trailing-space: 16px;
20
+ // LINT.ThenChange(md-fab.ts) keep in sync with `@cssprop` jsdoc tags
19
21
  }
20
22
 
21
23
  @mixin hovered {
@@ -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"}
@@ -8,11 +8,26 @@ import { type FabColor, type FabSize } from './fab.js';
8
8
  declare global {
9
9
  interface HTMLElementTagNameMap {
10
10
  /** A Material Design fab component. */
11
- 'md-fab': Fab;
11
+ 'md-gb-fab': Fab;
12
12
  }
13
13
  }
14
14
  /**
15
15
  * A Material Design fab component.
16
+ *
17
+ * @slot - Used to display an icon and optional label.
18
+ * @csspart fab - The FAB's root element.
19
+ * @cssprop --container-color
20
+ * @cssprop --container-elevation
21
+ * @cssprop --container-height
22
+ * @cssprop --container-shape
23
+ * @cssprop --icon-color
24
+ * @cssprop --icon-label-space
25
+ * @cssprop --icon-size
26
+ * @cssprop --label-text
27
+ * @cssprop --label-text-color
28
+ * @cssprop --label-text-tracking
29
+ * @cssprop --leading-space
30
+ * @cssprop --trailing-space
16
31
  */
17
32
  export declare class Fab extends LitElement {
18
33
  static styles: CSSResultOrNative[];
@@ -15,6 +15,21 @@ 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
34
  let Fab = class Fab extends LitElement {
20
35
  constructor() {
@@ -50,7 +65,7 @@ __decorate([
50
65
  property()
51
66
  ], Fab.prototype, "size", void 0);
52
67
  Fab = __decorate([
53
- customElement('md-fab')
68
+ customElement('md-gb-fab')
54
69
  ], Fab);
55
70
  export { Fab };
56
71
  //# sourceMappingURL=md-fab.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"md-fab.js","sourceRoot":"","sources":["md-fab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE1D,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;AAS1D;;GAEG;AAEI,IAAM,GAAG,GAAT,MAAM,GAAI,SAAQ,UAAU;IAA5B;;QAeO,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,UAAM,GAAwB;IAC5C,eAAe;IACf,YAAY;IACZ,SAAS;IACT,GAAG,CAAA;;;;;;;KAOF;CACF,AAZqB,CAYpB;AAEU;IAAX,QAAQ,EAAE;kCAAuC;AACtC;IAAX,QAAQ,EAAE;iCAA2B;AAhB3B,GAAG;IADf,aAAa,CAAC,QAAQ,CAAC;GACX,GAAG,CAyBf","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 {customElement, 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\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design fab component. */\n 'md-fab': Fab;\n }\n}\n\n/**\n * A Material Design fab component.\n */\n@customElement('md-fab')\nexport class Fab 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
+ {"version":3,"file":"md-fab.js","sourceRoot":"","sources":["md-fab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE1D,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;AAS1D;;;;;;;;;;;;;;;;;GAiBG;AAEI,IAAM,GAAG,GAAT,MAAM,GAAI,SAAQ,UAAU;IAA5B;;QAeO,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,UAAM,GAAwB;IAC5C,eAAe;IACf,YAAY;IACZ,SAAS;IACT,GAAG,CAAA;;;;;;;KAOF;CACF,AAZqB,CAYpB;AAEU;IAAX,QAAQ,EAAE;kCAAuC;AACtC;IAAX,QAAQ,EAAE;iCAA2B;AAhB3B,GAAG;IADf,aAAa,CAAC,WAAW,CAAC;GACd,GAAG,CAyBf","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 {customElement, 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\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design fab component. */\n 'md-gb-fab': Fab;\n }\n}\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 */\n@customElement('md-gb-fab')\nexport class Fab 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"]}
@@ -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 {