@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
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["icon-button.scss","_icon-button-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,wBAEI,UCNF,+BACA,yBACA,qDACA,2BACA,kBACA,6BACA,qBACA,mBACA,oBDCE,qDCGF,iDACA,0CDDE,0BCKF,+CACA,6CDJI,2ECQJ,yDACA,qDDNI,wECUJ,+CACA,6CDPE,yBCWF,2DACA,yDDVI,uECcJ,iDACA,+CDXE,4BCeF,qDACA,qDDdI,0ECkBJ,uDACA,qDDfE,4BCmBF,qDDjBI,0ECqBJ,0CDjBE,sBCqBF,yBACA,kBACA,qBACA,sBDtBI,8CC0BJ,qBACA,sBDxBI,4CC4BJ,sBACA,uBDzBE,sBC6BF,yBACA,qBACA,sBD7BI,8CCiCJ,qBACA,sBD/BI,4CCmCJ,sBACA,uBDhCE,sBCoCF,yBACA,sBACA,uBDpCI,8CCwCJ,sBACA,uBDtCI,4CC0CJ,sBACA,uBDxCI,oEC4CJ,iDDxCE,sBC4CF,yBACA,kBACA,sBACA,uBD7CI,8CCiDJ,sBACA,uBD/CI,4CCmDJ,sBACA,qBACA,uBDlDI,oECsDJ,iDDlDE,sBCsDF,0BACA,kBACA,sBACA,qBACA,uBDxDI,8CC4DJ,sBACA,uBD1DI,4CC8DJ,sBACA,uBD5DI,oECgEJ,iDD5DE,0BCgEF,iDD9DI,8CCkEJ,iDD/DI,8CCmEJ,iDDhEI,8CCoEJ,iDDjEI,wECqEJ,qDDjEE,+DCqEF,iDDnEI,mFCuEJ,iDDpEI,mFCwEJ,iDDrEI,mFCyEJ,iDDrEE,kCCyEF,wEACA,mEDtEE,UACE,oBACA,mBACA,wCACA,uDACA,qCACA,+BACA,wBACA,WACE,iFAEF,iCAGF,+CACE,eAGF,8CACE","file":"icon-button.css"}
1
+ {"version":3,"sourceRoot":"","sources":["icon-button.scss","_icon-button-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,wBAEI,UCLF,+BACA,yBACA,qDACA,2BACA,kBACA,6BACA,qBACA,mBACA,yEAKA,iDACA,0CDHE,0BCOF,+CACA,6CDNI,2ECUJ,yDACA,qDDRI,wECYJ,+CACA,6CDTE,yBCaF,2DACA,yDDZI,uECgBJ,iDACA,+CDbE,4BCiBF,qDACA,qDDhBI,0ECoBJ,uDACA,qDDjBE,4BCqBF,qDDnBI,0ECuBJ,0CDnBE,sBCuBF,yBACA,kBACA,qBACA,sBDxBI,8CC4BJ,qBACA,sBD1BI,4CC8BJ,sBACA,uBD3BE,sBC+BF,yBACA,qBACA,sBD/BI,8CCmCJ,qBACA,sBDjCI,4CCqCJ,sBACA,uBDlCE,sBCsCF,yBACA,sBACA,uBDtCI,8CC0CJ,sBACA,uBDxCI,4CC4CJ,sBACA,uBD1CI,oEC8CJ,iDD1CE,sBC8CF,yBACA,kBACA,sBACA,uBD/CI,8CCmDJ,sBACA,uBDjDI,4CCqDJ,sBACA,qBACA,uBDpDI,oECwDJ,iDDpDE,sBCwDF,0BACA,kBACA,sBACA,qBACA,uBD1DI,8CC8DJ,sBACA,uBD5DI,4CCgEJ,sBACA,uBD9DI,oECkEJ,iDD9DE,0BCkEF,iDDhEI,8CCoEJ,iDDjEI,8CCqEJ,iDDlEI,8CCsEJ,iDDnEI,wECuEJ,qDDnEE,+DCuEF,iDDrEI,mFCyEJ,iDDtEI,mFC0EJ,iDDvEI,mFC2EJ,iDDvEE,kCC2EF,wEACA,mEDxEE,UACE,oBACA,mBACA,wCACA,uDACA,qCACA,+BACA,wBACA,WACE,iFAEF,iCAGF,+CACE,eAGF,8CACE","file":"icon-button.css"}
@@ -8,12 +8,26 @@ import type { IconButtonColor, IconButtonSize, IconButtonWidth } from './icon-bu
8
8
  declare global {
9
9
  interface HTMLElementTagNameMap {
10
10
  /** A Material Design icon button component. */
11
- 'md-icon-button': IconButton;
11
+ 'md-gb-icon-button': IconButton;
12
12
  }
13
13
  }
14
14
  declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<(abstract new (...args: any[]) => import("../../../behaviors/element-internals.js").WithElementInternals) & typeof LitElement & import("../../../behaviors/form-associated.js").FormAssociatedConstructor, import("../../../behaviors/form-associated.js").FormAssociated>, import("../../../behaviors/form-submitter.js").FormSubmitter>>;
15
15
  /**
16
16
  * A Material Design icon button component.
17
+ *
18
+ * @slot - Used to display an icon.
19
+ * @fires {InputEvent} input - Fired when a toggle icon button is selected or unselected. --bubbles --composed
20
+ * @fires {Event} change - Fired when a toggle button is selected or unselected. --bubbles
21
+ * @csspart icon-btn - The icon button's root element.
22
+ * @cssprop --container-color
23
+ * @cssprop --container-height
24
+ * @cssprop --container-shape
25
+ * @cssprop --icon-color
26
+ * @cssprop --icon-size
27
+ * @cssprop --outline-color
28
+ * @cssprop --outline-width
29
+ * @cssprop --leading-space
30
+ * @cssprop --trailing-space
17
31
  */
18
32
  export declare class IconButton extends baseClass {
19
33
  /** @nocollapse */
@@ -18,6 +18,20 @@ import { iconButton } from './icon-button.js';
18
18
  const baseClass = mixinDelegatesAria(mixinFormSubmitter(mixinFormAssociated(mixinElementInternals(LitElement))));
19
19
  /**
20
20
  * A Material Design icon button component.
21
+ *
22
+ * @slot - Used to display an icon.
23
+ * @fires {InputEvent} input - Fired when a toggle icon button is selected or unselected. --bubbles --composed
24
+ * @fires {Event} change - Fired when a toggle button is selected or unselected. --bubbles
25
+ * @csspart icon-btn - The icon button's root element.
26
+ * @cssprop --container-color
27
+ * @cssprop --container-height
28
+ * @cssprop --container-shape
29
+ * @cssprop --icon-color
30
+ * @cssprop --icon-size
31
+ * @cssprop --outline-color
32
+ * @cssprop --outline-width
33
+ * @cssprop --leading-space
34
+ * @cssprop --trailing-space
21
35
  */
22
36
  let IconButton = class IconButton extends baseClass {
23
37
  constructor() {
@@ -170,7 +184,7 @@ __decorate([
170
184
  property()
171
185
  ], IconButton.prototype, "target", void 0);
172
186
  IconButton = __decorate([
173
- customElement('md-icon-button')
187
+ customElement('md-gb-icon-button')
174
188
  ], IconButton);
175
189
  export { IconButton };
176
190
  //# sourceMappingURL=md-icon-button.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"md-icon-button.js","sourceRoot":"","sources":["md-icon-button.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,EAAC,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAC,kBAAkB,EAAC,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAC,eAAe,EAAC,MAAM,iDAAiD,CAAC;AAChF,OAAO,EAAC,qBAAqB,EAAC,MAAM,yCAAyC,CAAC;AAC9E,OAAO,EAAC,mBAAmB,EAAC,MAAM,uCAAuC,CAAC;AAC1E,OAAO,EAAC,kBAAkB,EAAC,MAAM,sCAAsC,CAAC;AAExE,OAAO,eAAe,MAAM,kCAAkC,CAAC;AAC/D,OAAO,YAAY,MAAM,+BAA+B,CAAC;AACzD,OAAO,gBAAgB,MAAM,4BAA4B,CAAC;AAO1D,OAAO,EAAC,UAAU,EAAC,MAAM,kBAAkB,CAAC;AAS5C,MAAM,SAAS,GAAG,kBAAkB,CAClC,kBAAkB,CAAC,mBAAmB,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC,CAAC,CAC3E,CAAC;AAEF;;GAEG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,SAAS;IAAlC;;QAqBL;;WAEG;QACS,UAAK,GAAoB,UAAU,CAAC;QAEhD;;WAEG;QACS,SAAI,GAAmB,IAAI,CAAC;QAExC;;WAEG;QACwB,WAAM,GAAG,KAAK,CAAC;QAE1C;;WAEG;QACS,UAAK,GAAoB,EAAE,CAAC;QAsBxC;;;WAGG;QAEH,iBAAY,GAAG,KAAK,CAAC;QAErB;;WAEG;QACwB,aAAQ,GAAG,KAAK,CAAC;QAE5C;;WAEG;QACS,SAAI,GAAG,EAAE,CAAC;QAEtB;;WAEG;QACS,aAAQ,GAAG,EAAE,CAAC;QAE1B;;WAEG;QACS,WAAM,GAAiD,EAAE,CAAC;IA+CxE,CAAC;IA5FC;;;;;;;;OAQG;IAEH,IAAa,IAAI;QACf,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC;IACzC,CAAC;IACD,IAAa,IAAI,CAAC,IAAY;QAC5B,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;YACjC,OAAO;QACT,CAAC;QACD,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;IACpB,CAAC;IA6BkB,MAAM;QACvB,MAAM,OAAO,GAAG,UAAU,CAAC;YACzB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,QAAQ,EAAE,IAAI,CAAC,YAAY;SAC5B,CAAC,CAAC;QAEH,MAAM,EAAC,SAAS,EAAE,YAAY,EAAE,YAAY,EAAC,GAAG,IAAuB,CAAC;QACxE,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YACzB,OAAO,IAAI,CAAA;;gBAED,OAAO;eACR,IAAI,CAAC,IAAI;mBACL,IAAI,CAAC,QAAQ,IAAI,OAAO;iBAC1B,IAAI,CAAC,MAAM,IAAI,OAAO;qBAClB,SAAS,IAAI,OAAO;wBACjB,YAAY,IAAI,OAAO;wBACvB,YAAY,IAAI,OAAO;wBACvB,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,IAAI,OAAO;mBAClD,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO;;WAE1D,CAAC;QACR,CAAC;QAED,OAAO,IAAI,CAAA;;cAED,OAAO;;kBAEH,IAAI,CAAC,QAAQ;sBACT,IAAI,CAAC,YAAY,IAAI,OAAO;mBAC/B,SAAS,IAAI,OAAO;qBAClB,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;sBAC/C,YAAY,IAAI,OAAO;sBACvB,YAAY,IAAI,OAAO;gBAC7B,IAAI,CAAC,YAAY;;cAEnB,CAAC;IACb,CAAC;IAEO,YAAY,CAAC,KAAY;QAC/B,IAAI,CAAC,QAAQ,GAAI,KAAK,CAAC,MAAsB,CAAC,WAAW,KAAK,MAAM,CAAC;QACrE,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;;AAnID,kBAAkB;AACF,4BAAiB,GAAmB;IAClD,IAAI,EAAE,MAAM;IACZ,cAAc,EAAE,IAAI;CACrB,AAHgC,CAG/B;AAEc,iBAAM,GAAwB;IAC5C,eAAe;IACf,YAAY;IACZ,gBAAgB;IAChB,GAAG,CAAA;;;;;;;KAOF;CACF,AAZqB,CAYpB;AAKU;IAAX,QAAQ,EAAE;yCAAqC;AAKpC;IAAX,QAAQ,EAAE;wCAA6B;AAKb;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;0CAAgB;AAK9B;IAAX,QAAQ,EAAE;yCAA6B;AAYxC;IADC,QAAQ,CAAC,EAAC,UAAU,EAAE,IAAI,EAAC,CAAC;sCAG5B;AAaD;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;gDAChD;AAKM;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;4CAAkB;AAKhC;IAAX,QAAQ,EAAE;wCAAW;AAKV;IAAX,QAAQ,EAAE;4CAAe;AAKd;IAAX,QAAQ,EAAE;0CAA2D;AAtF3D,UAAU;IADtB,aAAa,CAAC,gBAAgB,CAAC;GACnB,UAAU,CAqItB","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} from 'lit/decorators.js';\nimport {ARIAMixinStrict} from '../../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../../internal/aria/delegate.js';\nimport {redispatchEvent} from '../../../../internal/events/redispatch-event.js';\nimport {mixinElementInternals} from '../../../behaviors/element-internals.js';\nimport {mixinFormAssociated} from '../../../behaviors/form-associated.js';\nimport {mixinFormSubmitter} from '../../../behaviors/form-submitter.js';\n\nimport focusRingStyles from '../focus/focus-ring.cssresult.js';\nimport rippleStyles from '../ripple/ripple.cssresult.js';\nimport iconButtonStyles from './icon-button.cssresult.js';\n\nimport type {\n IconButtonColor,\n IconButtonSize,\n IconButtonWidth,\n} from './icon-button.js';\nimport {iconButton} from './icon-button.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design icon button component. */\n 'md-icon-button': IconButton;\n }\n}\n\nconst baseClass = mixinDelegatesAria(\n mixinFormSubmitter(mixinFormAssociated(mixinElementInternals(LitElement))),\n);\n\n/**\n * A Material Design icon button component.\n */\n@customElement('md-icon-button')\nexport class IconButton extends baseClass {\n /** @nocollapse */\n static override shadowRootOptions: ShadowRootInit = {\n mode: 'open',\n delegatesFocus: true,\n };\n\n static override styles: CSSResultOrNative[] = [\n focusRingStyles,\n rippleStyles,\n iconButtonStyles,\n css`\n :host {\n display: inline-flex;\n }\n .icon-btn {\n flex: 1;\n }\n `,\n ];\n\n /**\n * The color of the button.\n */\n @property() color: IconButtonColor = 'standard';\n\n /**\n * The size of the button.\n */\n @property() size: IconButtonSize = 'sm';\n\n /**\n * Changes the shape of the button to be square.\n */\n @property({type: Boolean}) square = false;\n\n /**\n * Changes the width of the button.\n */\n @property() width: IconButtonWidth = '';\n\n /**\n * A string indicating the behavior of the button.\n *\n * - \"submit\" (default): A button that submits its associated form.\n * - \"reset\": A button that resets its associated form.\n * - \"button\": A normal button.\n * - \"toggle\": A toggle button using the `selected` property.\n * - \"link\": An anchor link (`<a>`). Type is always \"link\" when `href` is set.\n */\n @property({noAccessor: true})\n override get type(): string {\n return this.href ? 'link' : super.type;\n }\n override set type(type: string) {\n if (this.href && type !== 'link') {\n return;\n }\n super.type = type;\n }\n\n /**\n * Whether or not the button is \"soft-disabled\" (disabled but still\n * focusable).\n */\n @property({type: Boolean, attribute: 'soft-disabled', reflect: true})\n softDisabled = false;\n\n /**\n * Whether or not the button is selected, when `type=\"toggle\"`.\n */\n @property({type: Boolean}) selected = false;\n\n /**\n * The URL that the link button points to.\n */\n @property() href = '';\n\n /**\n * The filename to use when downloading the linked resource.\n */\n @property() download = '';\n\n /**\n * Where to display the linked `href` URL for a link button.\n */\n @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n protected override render() {\n const classes = iconButton({\n color: this.color,\n size: this.size,\n width: this.width,\n square: this.square,\n disabled: this.softDisabled,\n });\n\n const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;\n if (this.type === 'link') {\n return html`<a\n part=\"icon-btn\"\n class=${classes}\n href=${this.href}\n download=${this.download || nothing}\n target=${this.target || nothing}\n aria-label=${ariaLabel || nothing}\n aria-haspopup=${ariaHasPopup || nothing}\n aria-expanded=${ariaExpanded || nothing}\n aria-disabled=${this.disabled || this.softDisabled || nothing}\n tabindex=${this.disabled && !this.softDisabled ? -1 : nothing}>\n <slot></slot>\n </a>`;\n }\n\n return html`<button\n part=\"icon-btn\"\n class=${classes}\n type=\"button\"\n ?disabled=${this.disabled}\n aria-disabled=${this.softDisabled || nothing}\n aria-label=${ariaLabel || nothing}\n aria-pressed=${this.type === 'toggle' ? this.selected : nothing}\n aria-haspopup=${ariaHasPopup || nothing}\n aria-expanded=${ariaExpanded || nothing}\n @change=${this.handleChange}>\n <slot></slot>\n </button>`;\n }\n\n private handleChange(event: Event) {\n this.selected = (event.target as HTMLElement).ariaPressed === 'true';\n redispatchEvent(this, event);\n }\n}\n"]}
1
+ {"version":3,"file":"md-icon-button.js","sourceRoot":"","sources":["md-icon-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 {css, CSSResultOrNative, html, LitElement, nothing} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {ARIAMixinStrict} from '../../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../../internal/aria/delegate.js';\nimport {redispatchEvent} from '../../../../internal/events/redispatch-event.js';\nimport {mixinElementInternals} from '../../../behaviors/element-internals.js';\nimport {mixinFormAssociated} from '../../../behaviors/form-associated.js';\nimport {mixinFormSubmitter} from '../../../behaviors/form-submitter.js';\n\nimport focusRingStyles from '../focus/focus-ring.cssresult.js';\nimport rippleStyles from '../ripple/ripple.cssresult.js';\nimport iconButtonStyles from './icon-button.cssresult.js';\n\nimport type {\n IconButtonColor,\n IconButtonSize,\n IconButtonWidth,\n} from './icon-button.js';\nimport {iconButton} from './icon-button.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design icon button component. */\n 'md-gb-icon-button': IconButton;\n }\n}\n\nconst baseClass = mixinDelegatesAria(\n mixinFormSubmitter(mixinFormAssociated(mixinElementInternals(LitElement))),\n);\n\n/**\n * A Material Design icon button component.\n *\n * @slot - Used to display an icon.\n * @fires {InputEvent} input - Fired when a toggle icon button is selected or unselected. --bubbles --composed\n * @fires {Event} change - Fired when a toggle button is selected or unselected. --bubbles\n * @csspart icon-btn - The icon button's root element.\n * @cssprop --container-color\n * @cssprop --container-height\n * @cssprop --container-shape\n * @cssprop --icon-color\n * @cssprop --icon-size\n * @cssprop --outline-color\n * @cssprop --outline-width\n * @cssprop --leading-space\n * @cssprop --trailing-space\n */\n@customElement('md-gb-icon-button')\nexport class IconButton extends baseClass {\n /** @nocollapse */\n static override shadowRootOptions: ShadowRootInit = {\n mode: 'open',\n delegatesFocus: true,\n };\n\n static override styles: CSSResultOrNative[] = [\n focusRingStyles,\n rippleStyles,\n iconButtonStyles,\n css`\n :host {\n display: inline-flex;\n }\n .icon-btn {\n flex: 1;\n }\n `,\n ];\n\n /**\n * The color of the button.\n */\n @property() color: IconButtonColor = 'standard';\n\n /**\n * The size of the button.\n */\n @property() size: IconButtonSize = 'sm';\n\n /**\n * Changes the shape of the button to be square.\n */\n @property({type: Boolean}) square = false;\n\n /**\n * Changes the width of the button.\n */\n @property() width: IconButtonWidth = '';\n\n /**\n * A string indicating the behavior of the button.\n *\n * - \"submit\" (default): A button that submits its associated form.\n * - \"reset\": A button that resets its associated form.\n * - \"button\": A normal button.\n * - \"toggle\": A toggle button using the `selected` property.\n * - \"link\": An anchor link (`<a>`). Type is always \"link\" when `href` is set.\n */\n @property({noAccessor: true})\n override get type(): string {\n return this.href ? 'link' : super.type;\n }\n override set type(type: string) {\n if (this.href && type !== 'link') {\n return;\n }\n super.type = type;\n }\n\n /**\n * Whether or not the button is \"soft-disabled\" (disabled but still\n * focusable).\n */\n @property({type: Boolean, attribute: 'soft-disabled', reflect: true})\n softDisabled = false;\n\n /**\n * Whether or not the button is selected, when `type=\"toggle\"`.\n */\n @property({type: Boolean}) selected = false;\n\n /**\n * The URL that the link button points to.\n */\n @property() href = '';\n\n /**\n * The filename to use when downloading the linked resource.\n */\n @property() download = '';\n\n /**\n * Where to display the linked `href` URL for a link button.\n */\n @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n protected override render() {\n const classes = iconButton({\n color: this.color,\n size: this.size,\n width: this.width,\n square: this.square,\n disabled: this.softDisabled,\n });\n\n const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;\n if (this.type === 'link') {\n return html`<a\n part=\"icon-btn\"\n class=${classes}\n href=${this.href}\n download=${this.download || nothing}\n target=${this.target || nothing}\n aria-label=${ariaLabel || nothing}\n aria-haspopup=${ariaHasPopup || nothing}\n aria-expanded=${ariaExpanded || nothing}\n aria-disabled=${this.disabled || this.softDisabled || nothing}\n tabindex=${this.disabled && !this.softDisabled ? -1 : nothing}>\n <slot></slot>\n </a>`;\n }\n\n return html`<button\n part=\"icon-btn\"\n class=${classes}\n type=\"button\"\n ?disabled=${this.disabled}\n aria-disabled=${this.softDisabled || nothing}\n aria-label=${ariaLabel || nothing}\n aria-pressed=${this.type === 'toggle' ? this.selected : nothing}\n aria-haspopup=${ariaHasPopup || nothing}\n aria-expanded=${ariaExpanded || nothing}\n @change=${this.handleChange}>\n <slot></slot>\n </button>`;\n }\n\n private handleChange(event: Event) {\n this.selected = (event.target as HTMLElement).ariaPressed === 'true';\n redispatchEvent(this, event);\n }\n}\n"]}
@@ -4,8 +4,10 @@
4
4
  //
5
5
 
6
6
  @mixin root {
7
+ // LINT.IfChange
7
8
  --container-shape: var(--md-sys-shape-corner-lg);
8
9
  --gap: 0;
10
+ // LINT.ThenChange(md-list.ts) keep in sync with `@cssprop` jsdoc tags
9
11
  }
10
12
 
11
13
  @mixin segmented {
@@ -13,6 +15,7 @@
13
15
  }
14
16
 
15
17
  @mixin item {
18
+ // LINT.IfChange
16
19
  --container-height: 56px;
17
20
  --container-color: transparent;
18
21
  --container-shape: var(--md-sys-shape-corner-xs);
@@ -45,6 +48,7 @@
45
48
  --md-sys-typescale-label-sm-tracking
46
49
  );
47
50
  --trailing-supporting-text-color: var(--md-sys-color-on-surface-variant);
51
+ // LINT.ThenChange(md-list-item.ts) keep in sync with `@cssprop` jsdoc tags
48
52
  }
49
53
 
50
54
  @mixin item-segmented {
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["list.scss","_list-tokens.scss","../radio/_radio-tokens.scss","../checkbox/_checkbox-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GAWA,mFACA,oBAEI,MCRF,iDACA,SDWE,qBCPF,WDSI,uBAGF,MACE,aACA,sBACA,aACA,cACA,gBACA,eACA,qCAGF,2DAEE,kCACA,gCACA,oBAGF,yDAEE,gCACA,8BACA,mBAGF,WACE,sBAKF,0CAIE,uBALJ,aAQE,YACA,gBACA,mBAIA,WCnDF,yBACA,+BACA,iDACA,mDACA,8CACA,gEACA,sBACA,uBACA,sBACA,kBACA,qBACA,oBACA,gDACA,sDACA,iDACA,mEACA,+DACA,6DACA,0BACA,8DACA,2BACA,6CACA,+DACA,yDACA,mDACA,qEACA,gEACA,6DACA,iFAGA,yEDuBI,yCAHF,WChBF,gDDyBI,4DCrBJ,iDACA,qDACA,sDDuBI,mECnBJ,iDACA,qDACA,sDDqBI,8DCjBJ,iDACA,qDACA,sDDoBE,iCChBF,iDACA,2DACA,+DACA,iEACA,kEACA,6DACA,oEACA,+EDaE,mCCPF,iDACA,wEACA,yEACA,6EAGA,8EAGA,uEACA,gFAGA,yFDFE,WACE,aACA,mBACA,yBACA,sBACA,mCACA,qCACA,wCACA,0DACA,mDACA,8BACA,uBACA,0CACA,gBACA,YACA,iBACA,sBACA,cAGF,sCAnDF,WAoDI,kCACA,iCAGF,qCAxDF,WAyDI,gCACA,+BAGF,sDACE,eAGF,8BACE,aACA,sBACA,OAGF,6DAEE,aACA,mBACA,QACA,gBAGF,8BACE,2CACA,yCAGF,+BACE,4CACA,0CAGF,+BACE,qBACA,wCACA,4BAGF,sCACE,4BACA,+CACA,mCAGF,oCACE,qCACA,wDACA,4CAGF,6BACE,aACA,mBACA,qCACA,kCACA,eACA,yBACA,yBACA,4CACA,gCAGF,sBACE,kDACA,gCACA,gBAGF,gEACE,aAGF,2DAEE,kBACA,mBACA,eACA,2BAGF,kDEhLF,0CACA,iDFiLI,+BAGF,qDG9KF,mBACA,+CACA","file":"list.css"}
1
+ {"version":3,"sourceRoot":"","sources":["list.scss","_list-tokens.scss","../radio/_radio-tokens.scss","../checkbox/_checkbox-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GAWA,mFACA,oBAEI,MCPF,iDACA,SDUE,qBCLF,WDOI,uBAGF,MACE,aACA,sBACA,aACA,cACA,gBACA,eACA,qCAGF,2DAEE,kCACA,gCACA,oBAGF,yDAEE,gCACA,8BACA,mBAGF,WACE,sBAKF,0CAIE,uBALJ,aAQE,YACA,gBACA,mBAIA,WChDF,yBACA,+BACA,iDACA,mDACA,8CACA,gEACA,sBACA,uBACA,sBACA,kBACA,qBACA,oBACA,gDACA,sDACA,iDACA,mEACA,+DACA,6DACA,0BACA,8DACA,2BACA,6CACA,+DACA,yDACA,mDACA,qEACA,gEACA,6DACA,iFAGA,yEDoBI,yCAHF,WCZF,gDDqBI,4DCjBJ,iDACA,qDACA,sDDmBI,mECfJ,iDACA,qDACA,sDDiBI,8DCbJ,iDACA,qDACA,sDDgBE,iCCZF,iDACA,2DACA,+DACA,iEACA,kEACA,6DACA,oEACA,+EDSE,mCCHF,iDACA,wEACA,yEACA,6EAGA,8EAGA,uEACA,gFAGA,yFDNE,WACE,aACA,mBACA,yBACA,sBACA,mCACA,qCACA,wCACA,0DACA,mDACA,8BACA,uBACA,0CACA,gBACA,YACA,iBACA,sBACA,cAGF,sCAnDF,WAoDI,kCACA,iCAGF,qCAxDF,WAyDI,gCACA,+BAGF,sDACE,eAGF,8BACE,aACA,sBACA,OAGF,6DAEE,aACA,mBACA,QACA,gBAGF,8BACE,2CACA,yCAGF,+BACE,4CACA,0CAGF,+BACE,qBACA,wCACA,4BAGF,sCACE,4BACA,+CACA,mCAGF,oCACE,qCACA,wDACA,4CAGF,6BACE,aACA,mBACA,qCACA,kCACA,eACA,yBACA,yBACA,4CACA,gCAGF,sBACE,kDACA,gCACA,gBAGF,gEACE,aAGF,2DAEE,kBACA,mBACA,eACA,2BAGF,kDE9KF,0CACA,iDF+KI,+BAGF,qDG5KF,mBACA,+CACA","file":"list.css"}
@@ -7,12 +7,51 @@ import { CSSResultOrNative, LitElement } from 'lit';
7
7
  declare global {
8
8
  interface HTMLElementTagNameMap {
9
9
  /** A Material Design list item component. */
10
- 'md-list-item': ListItem;
10
+ 'md-gb-list-item': ListItem;
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<typeof LitElement, import("../../../behaviors/element-internals.js").WithElementInternals>>;
14
14
  /**
15
15
  * A Material Design list item component.
16
+ *
17
+ * @slot - Used to display the item's primary label.
18
+ * @slot avatar - Used to display a circular avatar before the item's content.
19
+ * @slot leading - Used to display icons and content before the item's main content.
20
+ * @slot overline - Used to display overline text above the main label.
21
+ * @slot supporting-text - Used to display supporting text below the main label.
22
+ * @slot trailing-text - Used to display metadata or text after the item's main content.
23
+ * @slot trailing - Used to display icons and content after the item's main content.
24
+ * @csspart list-item - The list item's root element.
25
+ * @cssprop --container-height
26
+ * @cssprop --container-color
27
+ * @cssprop --container-shape
28
+ * @cssprop --label-text-color
29
+ * @cssprop --label-text
30
+ * @cssprop --label-text-tracking
31
+ * @cssprop --leading-space
32
+ * @cssprop --trailing-space
33
+ * @cssprop --between-space
34
+ * @cssprop --top-space
35
+ * @cssprop --bottom-space
36
+ * @cssprop --avatar-size
37
+ * @cssprop --avatar-shape
38
+ * @cssprop --avatar-color
39
+ * @cssprop --avatar-label
40
+ * @cssprop --avatar-label-tracking
41
+ * @cssprop --avatar-label-color
42
+ * @cssprop --leading-icon-color
43
+ * @cssprop --leading-icon-size
44
+ * @cssprop --trailing-icon-color
45
+ * @cssprop --trailing-icon-size
46
+ * @cssprop --overline
47
+ * @cssprop --overline-tracking
48
+ * @cssprop --overline-color
49
+ * @cssprop --supporting-text
50
+ * @cssprop --supporting-text-tracking
51
+ * @cssprop --supporting-text-color
52
+ * @cssprop --trailing-supporting-text
53
+ * @cssprop --trailing-supporting-text-tracking
54
+ * @cssprop --trailing-supporting-text-color
16
55
  */
17
56
  export declare class ListItem extends baseClass {
18
57
  /** @nocollapse */
@@ -20,6 +20,45 @@ import { listItem } from './list.js';
20
20
  const baseClass = mixinDelegatesAria(mixinElementInternals(LitElement));
21
21
  /**
22
22
  * A Material Design list item component.
23
+ *
24
+ * @slot - Used to display the item's primary label.
25
+ * @slot avatar - Used to display a circular avatar before the item's content.
26
+ * @slot leading - Used to display icons and content before the item's main content.
27
+ * @slot overline - Used to display overline text above the main label.
28
+ * @slot supporting-text - Used to display supporting text below the main label.
29
+ * @slot trailing-text - Used to display metadata or text after the item's main content.
30
+ * @slot trailing - Used to display icons and content after the item's main content.
31
+ * @csspart list-item - The list item's root element.
32
+ * @cssprop --container-height
33
+ * @cssprop --container-color
34
+ * @cssprop --container-shape
35
+ * @cssprop --label-text-color
36
+ * @cssprop --label-text
37
+ * @cssprop --label-text-tracking
38
+ * @cssprop --leading-space
39
+ * @cssprop --trailing-space
40
+ * @cssprop --between-space
41
+ * @cssprop --top-space
42
+ * @cssprop --bottom-space
43
+ * @cssprop --avatar-size
44
+ * @cssprop --avatar-shape
45
+ * @cssprop --avatar-color
46
+ * @cssprop --avatar-label
47
+ * @cssprop --avatar-label-tracking
48
+ * @cssprop --avatar-label-color
49
+ * @cssprop --leading-icon-color
50
+ * @cssprop --leading-icon-size
51
+ * @cssprop --trailing-icon-color
52
+ * @cssprop --trailing-icon-size
53
+ * @cssprop --overline
54
+ * @cssprop --overline-tracking
55
+ * @cssprop --overline-color
56
+ * @cssprop --supporting-text
57
+ * @cssprop --supporting-text-tracking
58
+ * @cssprop --supporting-text-color
59
+ * @cssprop --trailing-supporting-text
60
+ * @cssprop --trailing-supporting-text-tracking
61
+ * @cssprop --trailing-supporting-text-color
23
62
  */
24
63
  let ListItem = class ListItem extends baseClass {
25
64
  constructor() {
@@ -116,7 +155,7 @@ __decorate([
116
155
  property({ type: Boolean, reflect: true, attribute: 'static' })
117
156
  ], ListItem.prototype, "nonInteractive", void 0);
118
157
  ListItem = __decorate([
119
- customElement('md-list-item')
158
+ customElement('md-gb-list-item')
120
159
  ], ListItem);
121
160
  export { ListItem };
122
161
  //# sourceMappingURL=md-list-item.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"md-list-item.js","sourceRoot":"","sources":["md-list-item.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,EAAC,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAC,kBAAkB,EAAC,MAAM,uCAAuC,CAAC;AACzE,OAAO,EACL,SAAS,EACT,qBAAqB,GACtB,MAAM,yCAAyC,CAAC;AACjD,OAAO,EAAC,UAAU,EAAC,MAAM,0BAA0B,CAAC;AAEpD,OAAO,eAAe,MAAM,yBAAyB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACxF,8FAA8F;AAC9F,OAAO,YAAY,MAAM,sBAAsB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAClF,wFAAwF;AACxF,OAAO,UAAU,MAAM,YAAY,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACtE,4EAA4E;AAE5E,OAAO,EAAC,QAAQ,EAAC,MAAM,WAAW,CAAC;AASnC,wCAAwC;AACxC,MAAM,SAAS,GAAG,kBAAkB,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC,CAAC;AAExE;;GAEG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,SAAS;IA6BrC;QACE,KAAK,EAAE,CAAC;QAIV;;WAEG;QACwB,YAAO,GAAG,KAAK,CAAC;QAE3C;;WAEG;QACwB,aAAQ,GAAG,KAAK,CAAC;QAE5C;;WAEG;QAEH,mBAAc,GAAG,KAAK,CAAC;QAjBrB,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,GAAG,UAAU,CAAC;IACpC,CAAC;IAkBkB,MAAM;QACvB,MAAM,KAAK,GAAG;YACZ,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,cAAc;SAC5B,CAAC;QACF,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,OAAO,IAAI,CAAA,gCAAgC,QAAQ,CAAC,KAAK,CAAC;WACrD,IAAI,CAAC,aAAa,EAAE;QACvB,CAAC;QACL,CAAC;QAED,iCAAiC;QACjC,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,OAAO,IAAI,CAAA;;eAEA,QAAQ,CAAC,KAAK,CAAC;kBACZ,IAAI,CAAC,QAAQ;mBACZ,SAAS,IAAI,OAAO;QAC/B,IAAI,CAAC,aAAa,EAAE;cACd,CAAC;IACb,CAAC;IAEO,aAAa;QACnB,OAAO,IAAI,CAAA;;uDAEwC,UAAU,EAAE;+BACpC,UAAU,EAAE;;;;;;;;;;;YAW/B,UAAU,EAAE;gCACQ,UAAU,EAAE;;KAEvC,CAAC;IACJ,CAAC;;AA3FD,kBAAkB;AACF,0BAAiB,GAAG;IAClC,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHgC,CAG/B;AAEc,eAAM,GAAwB;IAC5C,eAAe;IACf,YAAY;IACZ,UAAU;IACV,GAAG,CAAA;;;;;;;;;;;;;;;KAeF;CACF,AApBqB,CAoBpB;AAUyB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;yCAAiB;AAKhB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;0CAAkB;AAM5C;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAC,CAAC;gDACvC;AAhDZ,QAAQ;IADpB,aAAa,CAAC,cAAc,CAAC;GACjB,QAAQ,CA6FpB","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} from 'lit/decorators.js';\nimport {ARIAMixinStrict} from '../../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../../internal/aria/delegate.js';\nimport {\n internals,\n mixinElementInternals,\n} from '../../../behaviors/element-internals.js';\nimport {hasSlotted} from '../shared/has-slotted.js';\n\nimport focusRingStyles from '../focus/focus-ring.css' with {type: 'css'}; // github-only\n// import {styles as focusRingStyles} from '../focus/focus-ring.cssresult.js'; // google3-only\nimport rippleStyles from '../ripple/ripple.css' with {type: 'css'}; // github-only\n// import {styles as rippleStyles} from '../ripple/ripple.cssresult.js'; // google3-only\nimport listStyles from './list.css' with {type: 'css'}; // github-only\n// import {styles as listStyles} from './list.cssresult.js'; // google3-only\n\nimport {listItem} from './list.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design list item component. */\n 'md-list-item': ListItem;\n }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(mixinElementInternals(LitElement));\n\n/**\n * A Material Design list item component.\n */\n@customElement('md-list-item')\nexport class ListItem extends baseClass {\n /** @nocollapse */\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n static override styles: CSSResultOrNative[] = [\n focusRingStyles,\n rippleStyles,\n listStyles,\n css`\n :host {\n display: flex;\n align-items: center;\n }\n .list-item {\n flex: 1;\n align-items: inherit;\n }\n :is(.list-item-leading, .list-item-trailing):not(:has(.has-slotted)) {\n display: none;\n }\n slot:not(.has-slotted) {\n display: contents;\n }\n `,\n ];\n\n constructor() {\n super();\n this[internals].role = 'listitem';\n }\n\n /**\n * Whether the list item is selected.\n */\n @property({type: Boolean}) checked = false;\n\n /**\n * Whether the list item is disabled.\n */\n @property({type: Boolean}) disabled = false;\n\n /**\n * Whether the list item is non-interactive.\n */\n @property({type: Boolean, reflect: true, attribute: 'static'})\n nonInteractive = false;\n\n protected override render() {\n const state = {\n checked: this.checked,\n disabled: this.disabled,\n static: this.nonInteractive,\n };\n if (this.nonInteractive) {\n return html`<div part=\"list-item\" class=\"${listItem(state)}\"\n >${this.renderContent()}</div\n >`;\n }\n\n // Needed for closure conformance\n const {ariaLabel} = this as ARIAMixinStrict;\n return html`<button\n part=\"list-item\"\n class=\"${listItem(state)}\"\n ?disabled=${this.disabled}\n aria-label=${ariaLabel || nothing}>\n ${this.renderContent()}\n </button>`;\n }\n\n private renderContent() {\n return html`\n <span class=\"list-item-leading\">\n <slot name=\"avatar\" class=\"list-item-avatar\" ${hasSlotted()}></slot>\n <slot name=\"leading\" ${hasSlotted()}></slot>\n </span>\n <span class=\"list-item-content\">\n <slot name=\"overline\" class=\"list-item-overline\"></slot>\n <slot></slot>\n <slot name=\"supporting-text\" class=\"list-item-supporting-text\"></slot>\n </span>\n <span class=\"list-item-trailing\">\n <slot\n name=\"trailing-text\"\n class=\"list-item-trailing-text\"\n ${hasSlotted()}></slot>\n <slot name=\"trailing\" ${hasSlotted()}></slot>\n </span>\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"md-list-item.js","sourceRoot":"","sources":["md-list-item.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} from 'lit/decorators.js';\nimport {ARIAMixinStrict} from '../../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../../internal/aria/delegate.js';\nimport {\n internals,\n mixinElementInternals,\n} from '../../../behaviors/element-internals.js';\nimport {hasSlotted} from '../shared/has-slotted.js';\n\nimport focusRingStyles from '../focus/focus-ring.css' with {type: 'css'}; // github-only\n// import {styles as focusRingStyles} from '../focus/focus-ring.cssresult.js'; // google3-only\nimport rippleStyles from '../ripple/ripple.css' with {type: 'css'}; // github-only\n// import {styles as rippleStyles} from '../ripple/ripple.cssresult.js'; // google3-only\nimport listStyles from './list.css' with {type: 'css'}; // github-only\n// import {styles as listStyles} from './list.cssresult.js'; // google3-only\n\nimport {listItem} from './list.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design list item component. */\n 'md-gb-list-item': ListItem;\n }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(mixinElementInternals(LitElement));\n\n/**\n * A Material Design list item component.\n *\n * @slot - Used to display the item's primary label.\n * @slot avatar - Used to display a circular avatar before the item's content.\n * @slot leading - Used to display icons and content before the item's main content.\n * @slot overline - Used to display overline text above the main label.\n * @slot supporting-text - Used to display supporting text below the main label.\n * @slot trailing-text - Used to display metadata or text after the item's main content.\n * @slot trailing - Used to display icons and content after the item's main content.\n * @csspart list-item - The list item's root element.\n * @cssprop --container-height\n * @cssprop --container-color\n * @cssprop --container-shape\n * @cssprop --label-text-color\n * @cssprop --label-text\n * @cssprop --label-text-tracking\n * @cssprop --leading-space\n * @cssprop --trailing-space\n * @cssprop --between-space\n * @cssprop --top-space\n * @cssprop --bottom-space\n * @cssprop --avatar-size\n * @cssprop --avatar-shape\n * @cssprop --avatar-color\n * @cssprop --avatar-label\n * @cssprop --avatar-label-tracking\n * @cssprop --avatar-label-color\n * @cssprop --leading-icon-color\n * @cssprop --leading-icon-size\n * @cssprop --trailing-icon-color\n * @cssprop --trailing-icon-size\n * @cssprop --overline\n * @cssprop --overline-tracking\n * @cssprop --overline-color\n * @cssprop --supporting-text\n * @cssprop --supporting-text-tracking\n * @cssprop --supporting-text-color\n * @cssprop --trailing-supporting-text\n * @cssprop --trailing-supporting-text-tracking\n * @cssprop --trailing-supporting-text-color\n */\n@customElement('md-gb-list-item')\nexport class ListItem extends baseClass {\n /** @nocollapse */\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n static override styles: CSSResultOrNative[] = [\n focusRingStyles,\n rippleStyles,\n listStyles,\n css`\n :host {\n display: flex;\n align-items: center;\n }\n .list-item {\n flex: 1;\n align-items: inherit;\n }\n :is(.list-item-leading, .list-item-trailing):not(:has(.has-slotted)) {\n display: none;\n }\n slot:not(.has-slotted) {\n display: contents;\n }\n `,\n ];\n\n constructor() {\n super();\n this[internals].role = 'listitem';\n }\n\n /**\n * Whether the list item is selected.\n */\n @property({type: Boolean}) checked = false;\n\n /**\n * Whether the list item is disabled.\n */\n @property({type: Boolean}) disabled = false;\n\n /**\n * Whether the list item is non-interactive.\n */\n @property({type: Boolean, reflect: true, attribute: 'static'})\n nonInteractive = false;\n\n protected override render() {\n const state = {\n checked: this.checked,\n disabled: this.disabled,\n static: this.nonInteractive,\n };\n if (this.nonInteractive) {\n return html`<div part=\"list-item\" class=\"${listItem(state)}\"\n >${this.renderContent()}</div\n >`;\n }\n\n // Needed for closure conformance\n const {ariaLabel} = this as ARIAMixinStrict;\n return html`<button\n part=\"list-item\"\n class=\"${listItem(state)}\"\n ?disabled=${this.disabled}\n aria-label=${ariaLabel || nothing}>\n ${this.renderContent()}\n </button>`;\n }\n\n private renderContent() {\n return html`\n <span class=\"list-item-leading\">\n <slot name=\"avatar\" class=\"list-item-avatar\" ${hasSlotted()}></slot>\n <slot name=\"leading\" ${hasSlotted()}></slot>\n </span>\n <span class=\"list-item-content\">\n <slot name=\"overline\" class=\"list-item-overline\"></slot>\n <slot></slot>\n <slot name=\"supporting-text\" class=\"list-item-supporting-text\"></slot>\n </span>\n <span class=\"list-item-trailing\">\n <slot\n name=\"trailing-text\"\n class=\"list-item-trailing-text\"\n ${hasSlotted()}></slot>\n <slot name=\"trailing\" ${hasSlotted()}></slot>\n </span>\n `;\n }\n}\n"]}
@@ -7,12 +7,17 @@ import { CSSResultOrNative, LitElement } from 'lit';
7
7
  declare global {
8
8
  interface HTMLElementTagNameMap {
9
9
  /** A Material Design list component. */
10
- 'md-list': List;
10
+ 'md-gb-list': List;
11
11
  }
12
12
  }
13
13
  declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<typeof LitElement, import("../../../behaviors/element-internals.js").WithElementInternals>;
14
14
  /**
15
15
  * A Material Design list component.
16
+ *
17
+ * @slot - Used to display list items.
18
+ * @csspart list - The list's root element.
19
+ * @cssprop --container-shape
20
+ * @cssprop --gap
16
21
  */
17
22
  export declare class List extends baseClass {
18
23
  static styles: CSSResultOrNative[];
@@ -14,6 +14,11 @@ import { list } from './list.js';
14
14
  const baseClass = mixinElementInternals(LitElement);
15
15
  /**
16
16
  * A Material Design list component.
17
+ *
18
+ * @slot - Used to display list items.
19
+ * @csspart list - The list's root element.
20
+ * @cssprop --container-shape
21
+ * @cssprop --gap
17
22
  */
18
23
  let List = class List extends baseClass {
19
24
  constructor() {
@@ -45,7 +50,7 @@ __decorate([
45
50
  property({ type: Boolean })
46
51
  ], List.prototype, "segmented", void 0);
47
52
  List = __decorate([
48
- customElement('md-list')
53
+ customElement('md-gb-list')
49
54
  ], List);
50
55
  export { List };
51
56
  //# sourceMappingURL=md-list.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"md-list.js","sourceRoot":"","sources":["md-list.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;AAC1D,OAAO,EACL,SAAS,EACT,qBAAqB,GACtB,MAAM,yCAAyC,CAAC;AAEjD,OAAO,UAAU,MAAM,YAAY,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACtE,4EAA4E;AAE5E,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAC;AAS/B,wCAAwC;AACxC,MAAM,SAAS,GAAG,qBAAqB,CAAC,UAAU,CAAC,CAAC;AAEpD;;GAEG;AAEI,IAAM,IAAI,GAAV,MAAM,IAAK,SAAQ,SAAS;IAajC;QACE,KAAK,EAAE,CAAC;QAIV;;WAEG;QACwB,cAAS,GAAG,KAAK,CAAC;QAN3C,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,GAAG,MAAM,CAAC;IAChC,CAAC;IAOkB,MAAM;QACvB,OAAO,IAAI,CAAA,2BAA2B,IAAI,CAAC,IAAI,CAAC;;WAEzC,CAAC;IACV,CAAC;;AA1Be,WAAM,GAAwB;IAC5C,UAAU;IACV,GAAG,CAAA;;;;;;;KAOF;CACF,AAVqB,CAUpB;AAUyB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;uCAAmB;AArBlC,IAAI;IADhB,aAAa,CAAC,SAAS,CAAC;GACZ,IAAI,CA4BhB","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';\nimport {\n internals,\n mixinElementInternals,\n} from '../../../behaviors/element-internals.js';\n\nimport listStyles from './list.css' with {type: 'css'}; // github-only\n// import {styles as listStyles} from './list.cssresult.js'; // google3-only\n\nimport {list} from './list.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design list component. */\n 'md-list': List;\n }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinElementInternals(LitElement);\n\n/**\n * A Material Design list component.\n */\n@customElement('md-list')\nexport class List extends baseClass {\n static override styles: CSSResultOrNative[] = [\n listStyles,\n css`\n :host {\n display: flex;\n }\n .list {\n flex: 1;\n }\n `,\n ];\n\n constructor() {\n super();\n this[internals].role = 'list';\n }\n\n /**\n * Whether to render the list with segmented items.\n */\n @property({type: Boolean}) segmented = false;\n\n protected override render() {\n return html`<div part=\"list\" class=\"${list(this)}\">\n <slot></slot>\n </div>`;\n }\n}\n"]}
1
+ {"version":3,"file":"md-list.js","sourceRoot":"","sources":["md-list.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;AAC1D,OAAO,EACL,SAAS,EACT,qBAAqB,GACtB,MAAM,yCAAyC,CAAC;AAEjD,OAAO,UAAU,MAAM,YAAY,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACtE,4EAA4E;AAE5E,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAC;AAS/B,wCAAwC;AACxC,MAAM,SAAS,GAAG,qBAAqB,CAAC,UAAU,CAAC,CAAC;AAEpD;;;;;;;GAOG;AAEI,IAAM,IAAI,GAAV,MAAM,IAAK,SAAQ,SAAS;IAajC;QACE,KAAK,EAAE,CAAC;QAIV;;WAEG;QACwB,cAAS,GAAG,KAAK,CAAC;QAN3C,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,GAAG,MAAM,CAAC;IAChC,CAAC;IAOkB,MAAM;QACvB,OAAO,IAAI,CAAA,2BAA2B,IAAI,CAAC,IAAI,CAAC;;WAEzC,CAAC;IACV,CAAC;;AA1Be,WAAM,GAAwB;IAC5C,UAAU;IACV,GAAG,CAAA;;;;;;;KAOF;CACF,AAVqB,CAUpB;AAUyB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;uCAAmB;AArBlC,IAAI;IADhB,aAAa,CAAC,YAAY,CAAC;GACf,IAAI,CA4BhB","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';\nimport {\n internals,\n mixinElementInternals,\n} from '../../../behaviors/element-internals.js';\n\nimport listStyles from './list.css' with {type: 'css'}; // github-only\n// import {styles as listStyles} from './list.cssresult.js'; // google3-only\n\nimport {list} from './list.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n /** A Material Design list component. */\n 'md-gb-list': List;\n }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinElementInternals(LitElement);\n\n/**\n * A Material Design list component.\n *\n * @slot - Used to display list items.\n * @csspart list - The list's root element.\n * @cssprop --container-shape\n * @cssprop --gap\n */\n@customElement('md-gb-list')\nexport class List extends baseClass {\n static override styles: CSSResultOrNative[] = [\n listStyles,\n css`\n :host {\n display: flex;\n }\n .list {\n flex: 1;\n }\n `,\n ];\n\n constructor() {\n super();\n this[internals].role = 'list';\n }\n\n /**\n * Whether to render the list with segmented items.\n */\n @property({type: Boolean}) segmented = false;\n\n protected override render() {\n return html`<div part=\"list\" class=\"${list(this)}\">\n <slot></slot>\n </div>`;\n }\n}\n"]}
@@ -4,6 +4,7 @@
4
4
  //
5
5
 
6
6
  @mixin root {
7
+ // LINT.IfChange
7
8
  --container-color: var(--md-sys-color-surface-container-low);
8
9
  --container-elevation: var(--md-sys-elevation-shadow-2);
9
10
  --container-shape: var(--md-sys-shape-corner-lg);
@@ -11,6 +12,7 @@
11
12
  --group-padding: 2px;
12
13
  --group-shape: var(--md-sys-shape-corner-sm);
13
14
  --section-label-text-color: var(--md-sys-color-on-surface-variant);
15
+ // LINT.ThenChange(md-menu.ts) keep in sync with `@cssprop` jsdoc tags
14
16
  }
15
17
 
16
18
  @mixin inactive {
@@ -26,6 +28,7 @@
26
28
  }
27
29
 
28
30
  @mixin item {
31
+ // LINT.IfChange
29
32
  --between-space: 12px;
30
33
  --bottom-space: 8px;
31
34
  --container-color: transparent;
@@ -48,6 +51,7 @@
48
51
  --trailing-supporting-text-color: var(--md-sys-color-on-surface-variant);
49
52
  --trailing-supporting-text: var(--md-sys-typescale-label-lg);
50
53
  --trailing-supporting-text-tracking: var(--md-sys-typescale-label-lg-tracking);
54
+ // LINT.ThenChange(md-menu-item.ts) keep in sync with `@cssprop` jsdoc tags
51
55
  }
52
56
 
53
57
  @mixin item-first-child {
@@ -7,12 +7,14 @@ import { CSSResultOrNative, LitElement } from 'lit';
7
7
  import { type MenuItemCheckable } from './menu.js';
8
8
  declare global {
9
9
  interface HTMLElementTagNameMap {
10
- 'md-menu-group': MenuGroup;
10
+ 'md-gb-menu-group': MenuGroup;
11
11
  }
12
12
  }
13
13
  declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<typeof LitElement, import("../../../behaviors/element-internals.js").WithElementInternals>;
14
14
  /**
15
15
  * A Material Design menu group component.
16
+ *
17
+ * @slot - Used to display the menu group's items.
16
18
  */
17
19
  export declare class MenuGroup extends baseClass {
18
20
  static styles: CSSResultOrNative[];
@@ -13,6 +13,8 @@ import { menuContext, menuItemCheckable, } from './menu.js';
13
13
  const baseClass = mixinElementInternals(LitElement);
14
14
  /**
15
15
  * A Material Design menu group component.
16
+ *
17
+ * @slot - Used to display the menu group's items.
16
18
  */
17
19
  let MenuGroup = class MenuGroup extends baseClass {
18
20
  // TODO: add optional section label
@@ -28,6 +30,8 @@ let MenuGroup = class MenuGroup extends baseClass {
28
30
  this.checkable = null;
29
31
  this.menuContext = null;
30
32
  this[internals].role = 'none';
33
+ // TODO: single-select items should not be allowed to uncheck themselves.
34
+ // A single change event should be emitted from the group instead.
31
35
  this.addEventListener('change', (event) => {
32
36
  if (this.checkable === 'single') {
33
37
  const composedPath = event.composedPath();
@@ -59,7 +63,7 @@ __decorate([
59
63
  consume({ context: menuContext, subscribe: true })
60
64
  ], MenuGroup.prototype, "menuContext", void 0);
61
65
  MenuGroup = __decorate([
62
- customElement('md-menu-group')
66
+ customElement('md-gb-menu-group')
63
67
  ], MenuGroup);
64
68
  export { MenuGroup };
65
69
  //# sourceMappingURL=md-menu-group.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"md-menu-group.js","sourceRoot":"","sources":["md-menu-group.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,OAAO,EAAE,OAAO,EAAC,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EACL,SAAS,EACT,qBAAqB,GACtB,MAAM,yCAAyC,CAAC;AAEjD,OAAO,EACL,WAAW,EACX,iBAAiB,GAGlB,MAAM,WAAW,CAAC;AAQnB,wCAAwC;AACxC,MAAM,SAAS,GAAG,qBAAqB,CAAC,UAAU,CAAC,CAAC;AAEpD;;GAEG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,SAAS;IAatC,mCAAmC;IAEnC,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,WAAW,EAAE,IAAI,IAAI,IAAI,CAAC;IACxC,CAAC;IAED,IAAI,KAAK;QACP,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,CAClD,CAAC,IAAI,EAAE,EAAE,CACP,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC;YAClC,IAAI,CAAC,8BAA8B,CACtC,CAAC;IACJ,CAAC;IAKD;QACE,KAAK,EAAE,CAAC;QApBV,cAAS,GAA6B,IAAI,CAAC;QAiB1B,gBAAW,GAAuB,IAAI,CAAC;QAItD,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,GAAG,MAAM,CAAC;QAC9B,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,KAAY,EAAE,EAAE;YAC/C,IAAI,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC;gBAChC,MAAM,YAAY,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;gBAC1C,MAAM,KAAK,GAAG,IAAI,CAAC,KAAiD,CAAC;gBACrE,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;oBACzB,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;wBACjD,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;oBACvB,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AA/Ce,gBAAM,GAAwB;IAC5C,GAAG,CAAA;;;;KAIF;CACF,AANqB,CAMpB;AAIF;IAFC,OAAO,CAAC,EAAC,OAAO,EAAE,iBAAiB,EAAC,CAAC;IACrC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;4CACiB;AAiB1B;IADhB,OAAO,CAAC,EAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAC,CAAC;8CACO;AA5B7C,SAAS;IADrB,aAAa,CAAC,eAAe,CAAC;GAClB,SAAS,CAiDrB","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {consume, provide} from '@lit/context';\nimport {css, CSSResultOrNative, html, LitElement} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {\n internals,\n mixinElementInternals,\n} from '../../../behaviors/element-internals.js';\n\nimport {\n menuContext,\n menuItemCheckable,\n type MenuContext,\n type MenuItemCheckable,\n} from './menu.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-menu-group': MenuGroup;\n }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinElementInternals(LitElement);\n\n/**\n * A Material Design menu group component.\n */\n@customElement('md-menu-group')\nexport class MenuGroup extends baseClass {\n static override styles: CSSResultOrNative[] = [\n css`\n :host {\n display: contents;\n }\n `,\n ];\n\n @provide({context: menuItemCheckable})\n @property({reflect: true})\n checkable: MenuItemCheckable | null = null;\n\n // TODO: add optional section label\n\n get menu(): HTMLElement | null {\n return this.menuContext?.menu || null;\n }\n\n get items(): HTMLElement[] {\n return (this.menuContext?.getItems?.() || []).filter(\n (item) =>\n this.compareDocumentPosition(item) &\n Node.DOCUMENT_POSITION_CONTAINED_BY,\n );\n }\n\n @consume({context: menuContext, subscribe: true})\n private readonly menuContext: MenuContext | null = null;\n\n constructor() {\n super();\n this[internals].role = 'none';\n this.addEventListener('change', (event: Event) => {\n if (this.checkable === 'single') {\n const composedPath = event.composedPath();\n const items = this.items as Array<HTMLElement & {checked?: boolean}>;\n for (const item of items) {\n if (!composedPath.includes(item) && item.checked) {\n item.checked = false;\n }\n }\n }\n });\n }\n\n protected override render() {\n return html`<slot></slot>`;\n }\n}\n"]}
1
+ {"version":3,"file":"md-menu-group.js","sourceRoot":"","sources":["md-menu-group.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,OAAO,EAAE,OAAO,EAAC,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EACL,SAAS,EACT,qBAAqB,GACtB,MAAM,yCAAyC,CAAC;AAEjD,OAAO,EACL,WAAW,EACX,iBAAiB,GAGlB,MAAM,WAAW,CAAC;AAQnB,wCAAwC;AACxC,MAAM,SAAS,GAAG,qBAAqB,CAAC,UAAU,CAAC,CAAC;AAEpD;;;;GAIG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,SAAS;IAatC,mCAAmC;IAEnC,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,WAAW,EAAE,IAAI,IAAI,IAAI,CAAC;IACxC,CAAC;IAED,IAAI,KAAK;QACP,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,CAClD,CAAC,IAAI,EAAE,EAAE,CACP,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC;YAClC,IAAI,CAAC,8BAA8B,CACtC,CAAC;IACJ,CAAC;IAKD;QACE,KAAK,EAAE,CAAC;QApBV,cAAS,GAA6B,IAAI,CAAC;QAiB1B,gBAAW,GAAuB,IAAI,CAAC;QAItD,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,GAAG,MAAM,CAAC;QAC9B,yEAAyE;QACzE,kEAAkE;QAClE,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,KAAY,EAAE,EAAE;YAC/C,IAAI,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC;gBAChC,MAAM,YAAY,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;gBAC1C,MAAM,KAAK,GAAG,IAAI,CAAC,KAAiD,CAAC;gBACrE,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;oBACzB,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;wBACjD,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;oBACvB,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAjDe,gBAAM,GAAwB;IAC5C,GAAG,CAAA;;;;KAIF;CACF,AANqB,CAMpB;AAIF;IAFC,OAAO,CAAC,EAAC,OAAO,EAAE,iBAAiB,EAAC,CAAC;IACrC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;4CACiB;AAiB1B;IADhB,OAAO,CAAC,EAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAC,CAAC;8CACO;AA5B7C,SAAS;IADrB,aAAa,CAAC,kBAAkB,CAAC;GACrB,SAAS,CAmDrB","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {consume, provide} from '@lit/context';\nimport {css, CSSResultOrNative, html, LitElement} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {\n internals,\n mixinElementInternals,\n} from '../../../behaviors/element-internals.js';\n\nimport {\n menuContext,\n menuItemCheckable,\n type MenuContext,\n type MenuItemCheckable,\n} from './menu.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-gb-menu-group': MenuGroup;\n }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinElementInternals(LitElement);\n\n/**\n * A Material Design menu group component.\n *\n * @slot - Used to display the menu group's items.\n */\n@customElement('md-gb-menu-group')\nexport class MenuGroup extends baseClass {\n static override styles: CSSResultOrNative[] = [\n css`\n :host {\n display: contents;\n }\n `,\n ];\n\n @provide({context: menuItemCheckable})\n @property({reflect: true})\n checkable: MenuItemCheckable | null = null;\n\n // TODO: add optional section label\n\n get menu(): HTMLElement | null {\n return this.menuContext?.menu || null;\n }\n\n get items(): HTMLElement[] {\n return (this.menuContext?.getItems?.() || []).filter(\n (item) =>\n this.compareDocumentPosition(item) &\n Node.DOCUMENT_POSITION_CONTAINED_BY,\n );\n }\n\n @consume({context: menuContext, subscribe: true})\n private readonly menuContext: MenuContext | null = null;\n\n constructor() {\n super();\n this[internals].role = 'none';\n // TODO: single-select items should not be allowed to uncheck themselves.\n // A single change event should be emitted from the group instead.\n this.addEventListener('change', (event: Event) => {\n if (this.checkable === 'single') {\n const composedPath = event.composedPath();\n const items = this.items as Array<HTMLElement & {checked?: boolean}>;\n for (const item of items) {\n if (!composedPath.includes(item) && item.checked) {\n item.checked = false;\n }\n }\n }\n });\n }\n\n protected override render() {\n return html`<slot></slot>`;\n }\n}\n"]}
@@ -6,12 +6,43 @@
6
6
  import { CSSResultOrNative, LitElement } from 'lit';
7
7
  declare global {
8
8
  interface HTMLElementTagNameMap {
9
- 'md-menu-item': MenuItem;
9
+ 'md-gb-menu-item': MenuItem;
10
10
  }
11
11
  }
12
12
  declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<typeof LitElement, import("../../../behaviors/focusable.js").Focusable>, import("../../../behaviors/element-internals.js").WithElementInternals>;
13
13
  /**
14
14
  * A Material Design menu item component.
15
+ *
16
+ * @slot - Used to display the item's primary label.
17
+ * @slot leading - Used to display icons and content before the item's main content.
18
+ * @slot supporting-text - Used to display supporting text below the main label.
19
+ * @slot trailing-text - Used to display metadata or text after the item's main content.
20
+ * @slot trailing - Used to display icons and content after the item's main content.
21
+ * @fires {Event} change - Fired when a checkbox or menu item is checked or unchecked. --bubbles
22
+ * @fires {InputEvent} input - Fired when a checkbox or menu item is checked or unchecked. --bubbles --composed
23
+ * @csspart menu-item - The menu item's root element.
24
+ * @cssprop --between-space
25
+ * @cssprop --bottom-space
26
+ * @cssprop --container-color
27
+ * @cssprop --height
28
+ * @cssprop --inner-corner-corner-size
29
+ * @cssprop --label-text-color
30
+ * @cssprop --label-text
31
+ * @cssprop --label-text-tracking
32
+ * @cssprop --leading-icon-color
33
+ * @cssprop --leading-icon-size
34
+ * @cssprop --leading-space
35
+ * @cssprop --shape
36
+ * @cssprop --supporting-text-color
37
+ * @cssprop --supporting-text
38
+ * @cssprop --supporting-text-tracking
39
+ * @cssprop --top-space
40
+ * @cssprop --trailing-icon-color
41
+ * @cssprop --trailing-icon-size
42
+ * @cssprop --trailing-space
43
+ * @cssprop --trailing-supporting-text-color
44
+ * @cssprop --trailing-supporting-text
45
+ * @cssprop --trailing-supporting-text-tracking
15
46
  */
16
47
  export declare class MenuItem extends baseClass {
17
48
  static styles: CSSResultOrNative[];
@@ -22,6 +22,37 @@ import { menuContext, menuItem, menuItemCheckable, } from './menu.js';
22
22
  const baseClass = mixinElementInternals(mixinFocusable(LitElement));
23
23
  /**
24
24
  * A Material Design menu item component.
25
+ *
26
+ * @slot - Used to display the item's primary label.
27
+ * @slot leading - Used to display icons and content before the item's main content.
28
+ * @slot supporting-text - Used to display supporting text below the main label.
29
+ * @slot trailing-text - Used to display metadata or text after the item's main content.
30
+ * @slot trailing - Used to display icons and content after the item's main content.
31
+ * @fires {Event} change - Fired when a checkbox or menu item is checked or unchecked. --bubbles
32
+ * @fires {InputEvent} input - Fired when a checkbox or menu item is checked or unchecked. --bubbles --composed
33
+ * @csspart menu-item - The menu item's root element.
34
+ * @cssprop --between-space
35
+ * @cssprop --bottom-space
36
+ * @cssprop --container-color
37
+ * @cssprop --height
38
+ * @cssprop --inner-corner-corner-size
39
+ * @cssprop --label-text-color
40
+ * @cssprop --label-text
41
+ * @cssprop --label-text-tracking
42
+ * @cssprop --leading-icon-color
43
+ * @cssprop --leading-icon-size
44
+ * @cssprop --leading-space
45
+ * @cssprop --shape
46
+ * @cssprop --supporting-text-color
47
+ * @cssprop --supporting-text
48
+ * @cssprop --supporting-text-tracking
49
+ * @cssprop --top-space
50
+ * @cssprop --trailing-icon-color
51
+ * @cssprop --trailing-icon-size
52
+ * @cssprop --trailing-space
53
+ * @cssprop --trailing-supporting-text-color
54
+ * @cssprop --trailing-supporting-text
55
+ * @cssprop --trailing-supporting-text-tracking
25
56
  */
26
57
  let MenuItem = class MenuItem extends baseClass {
27
58
  get menu() {
@@ -43,6 +74,7 @@ let MenuItem = class MenuItem extends baseClass {
43
74
  if (e.defaultPrevented)
44
75
  return;
45
76
  if (this.checkable) {
77
+ // TODO: radio menu items should not be allowed to uncheck themselves.
46
78
  this.checked = !wasChecked;
47
79
  this.dispatchEvent(new Event('change', { bubbles: true }));
48
80
  this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
@@ -159,7 +191,7 @@ __decorate([
159
191
  consume({ context: menuItemCheckable, subscribe: true })
160
192
  ], MenuItem.prototype, "checkable", void 0);
161
193
  MenuItem = __decorate([
162
- customElement('md-menu-item')
194
+ customElement('md-gb-menu-item')
163
195
  ], MenuItem);
164
196
  export { MenuItem };
165
197
  //# sourceMappingURL=md-menu-item.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"md-menu-item.js","sourceRoot":"","sources":["md-menu-item.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 {consume} from '@lit/context';\nimport {css, CSSResultOrNative, html, LitElement, nothing} from 'lit';\nimport {customElement, property, state} from 'lit/decorators.js';\nimport {\n afterDispatch,\n setupDispatchHooks,\n} from '../../../../internal/events/dispatch-hooks.js';\nimport {\n internals,\n mixinElementInternals,\n} from '../../../behaviors/element-internals.js';\nimport {isFocusable, mixinFocusable} from '../../../behaviors/focusable.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 menuStyles from './menu.css' with {type: 'css'}; // github-only\n// import {styles as menuStyles} from './menu.cssresult.js'; // google3-only\n\nimport {\n menuContext,\n type MenuContext,\n menuItem,\n menuItemCheckable,\n type MenuItemCheckable,\n} from './menu.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-menu-item': MenuItem;\n }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinElementInternals(mixinFocusable(LitElement));\n\n/**\n * A Material Design menu item component.\n */\n@customElement('md-menu-item')\nexport class MenuItem extends baseClass {\n static override styles: CSSResultOrNative[] = [\n focusRingStyles,\n rippleStyles,\n menuStyles,\n css`\n :host {\n display: flex;\n outline: none;\n }\n .menu-item {\n flex: 1;\n }\n :is(.menu-item-leading, .menu-item-trailing):not(\n :has(.has-slotted, .checkmark)\n ) {\n display: none;\n }\n slot:not(.has-slotted) {\n display: contents;\n }\n .checkmark {\n display: flex;\n font: var(--md-icon-size) var(--md-icon-font);\n }\n `,\n ];\n\n @property({type: Boolean, reflect: true}) checked = false;\n @property({type: Boolean, reflect: true}) disabled = false;\n\n get menu(): HTMLElement | null {\n return this.menuContext?.menu || null;\n }\n\n @consume({context: menuContext, subscribe: true})\n private readonly menuContext?: MenuContext;\n\n @state()\n @consume({context: menuItemCheckable, subscribe: true})\n private readonly checkable?: MenuItemCheckable | null;\n\n constructor() {\n super();\n this[internals].role = 'menuitem';\n setupDispatchHooks(this, 'click');\n this.addEventListener('click', (e) => {\n if (this.disabled) {\n e.stopImmediatePropagation();\n return;\n }\n\n const wasChecked = this.checked;\n afterDispatch(e, () => {\n if (e.defaultPrevented) return;\n if (this.checkable) {\n this.checked = !wasChecked;\n this.dispatchEvent(new Event('change', {bubbles: true}));\n this.dispatchEvent(\n new InputEvent('input', {bubbles: true, composed: true}),\n );\n }\n\n if (this.checkable !== 'multiple') {\n this.menu?.hidePopover();\n }\n });\n });\n\n this.addEventListener('keydown', (e: KeyboardEvent) => {\n if (this.disabled) return;\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.click();\n }\n });\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.menuContext?.itemConnected(this);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.menuContext?.itemDisconnected(this);\n }\n\n protected override render() {\n return html`<div\n part=\"menu-item\"\n class=\"${menuItem({\n checked: this.checked,\n disabled: this.disabled,\n })} ripple-host focus-ring-host\">\n ${this.renderContent()}\n </div>`;\n }\n\n private renderContent() {\n return html`\n <span class=\"menu-item-leading\">\n <slot name=\"leading\" ${hasSlotted()}>\n ${this.checked ? html`<span class=\"checkmark\">check</span>` : nothing}\n </slot>\n </span>\n <span class=\"menu-item-content\">\n <slot></slot>\n <slot name=\"supporting-text\" class=\"menu-item-supporting-text\"></slot>\n </span>\n <span class=\"menu-item-trailing\">\n <slot\n name=\"trailing-text\"\n class=\"menu-item-trailing-text\"\n ${hasSlotted()}></slot>\n <slot name=\"trailing\" ${hasSlotted()}></slot>\n </span>\n `;\n }\n\n protected override updated() {\n if (this.checkable === 'single') {\n this[internals].role = 'menuitemradio';\n } else if (this.checkable === 'multiple') {\n this[internals].role = 'menuitemcheckbox';\n } else {\n this[internals].role = 'menuitem';\n }\n\n if (this.checkable) {\n this[internals].ariaChecked = String(this.checked);\n } else {\n this[internals].ariaChecked = null;\n }\n\n this[internals].ariaDisabled = String(this.disabled);\n this[isFocusable] = !this.disabled;\n }\n}\n"]}
1
+ {"version":3,"file":"md-menu-item.js","sourceRoot":"","sources":["md-menu-item.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 {consume} from '@lit/context';\nimport {css, CSSResultOrNative, html, LitElement, nothing} from 'lit';\nimport {customElement, property, state} from 'lit/decorators.js';\nimport {\n afterDispatch,\n setupDispatchHooks,\n} from '../../../../internal/events/dispatch-hooks.js';\nimport {\n internals,\n mixinElementInternals,\n} from '../../../behaviors/element-internals.js';\nimport {isFocusable, mixinFocusable} from '../../../behaviors/focusable.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 menuStyles from './menu.css' with {type: 'css'}; // github-only\n// import {styles as menuStyles} from './menu.cssresult.js'; // google3-only\n\nimport {\n menuContext,\n type MenuContext,\n menuItem,\n menuItemCheckable,\n type MenuItemCheckable,\n} from './menu.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-gb-menu-item': MenuItem;\n }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinElementInternals(mixinFocusable(LitElement));\n\n/**\n * A Material Design menu item component.\n *\n * @slot - Used to display the item's primary label.\n * @slot leading - Used to display icons and content before the item's main content.\n * @slot supporting-text - Used to display supporting text below the main label.\n * @slot trailing-text - Used to display metadata or text after the item's main content.\n * @slot trailing - Used to display icons and content after the item's main content.\n * @fires {Event} change - Fired when a checkbox or menu item is checked or unchecked. --bubbles\n * @fires {InputEvent} input - Fired when a checkbox or menu item is checked or unchecked. --bubbles --composed\n * @csspart menu-item - The menu item's root element.\n * @cssprop --between-space\n * @cssprop --bottom-space\n * @cssprop --container-color\n * @cssprop --height\n * @cssprop --inner-corner-corner-size\n * @cssprop --label-text-color\n * @cssprop --label-text\n * @cssprop --label-text-tracking\n * @cssprop --leading-icon-color\n * @cssprop --leading-icon-size\n * @cssprop --leading-space\n * @cssprop --shape\n * @cssprop --supporting-text-color\n * @cssprop --supporting-text\n * @cssprop --supporting-text-tracking\n * @cssprop --top-space\n * @cssprop --trailing-icon-color\n * @cssprop --trailing-icon-size\n * @cssprop --trailing-space\n * @cssprop --trailing-supporting-text-color\n * @cssprop --trailing-supporting-text\n * @cssprop --trailing-supporting-text-tracking\n */\n@customElement('md-gb-menu-item')\nexport class MenuItem extends baseClass {\n static override styles: CSSResultOrNative[] = [\n focusRingStyles,\n rippleStyles,\n menuStyles,\n css`\n :host {\n display: flex;\n outline: none;\n }\n .menu-item {\n flex: 1;\n }\n :is(.menu-item-leading, .menu-item-trailing):not(\n :has(.has-slotted, .checkmark)\n ) {\n display: none;\n }\n slot:not(.has-slotted) {\n display: contents;\n }\n .checkmark {\n display: flex;\n font: var(--md-icon-size) var(--md-icon-font);\n }\n `,\n ];\n\n @property({type: Boolean, reflect: true}) checked = false;\n @property({type: Boolean, reflect: true}) disabled = false;\n\n get menu(): HTMLElement | null {\n return this.menuContext?.menu || null;\n }\n\n @consume({context: menuContext, subscribe: true})\n private readonly menuContext?: MenuContext;\n\n @state()\n @consume({context: menuItemCheckable, subscribe: true})\n private readonly checkable?: MenuItemCheckable | null;\n\n constructor() {\n super();\n this[internals].role = 'menuitem';\n setupDispatchHooks(this, 'click');\n this.addEventListener('click', (e) => {\n if (this.disabled) {\n e.stopImmediatePropagation();\n return;\n }\n\n const wasChecked = this.checked;\n afterDispatch(e, () => {\n if (e.defaultPrevented) return;\n if (this.checkable) {\n // TODO: radio menu items should not be allowed to uncheck themselves.\n this.checked = !wasChecked;\n this.dispatchEvent(new Event('change', {bubbles: true}));\n this.dispatchEvent(\n new InputEvent('input', {bubbles: true, composed: true}),\n );\n }\n\n if (this.checkable !== 'multiple') {\n this.menu?.hidePopover();\n }\n });\n });\n\n this.addEventListener('keydown', (e: KeyboardEvent) => {\n if (this.disabled) return;\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.click();\n }\n });\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.menuContext?.itemConnected(this);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.menuContext?.itemDisconnected(this);\n }\n\n protected override render() {\n return html`<div\n part=\"menu-item\"\n class=\"${menuItem({\n checked: this.checked,\n disabled: this.disabled,\n })} ripple-host focus-ring-host\">\n ${this.renderContent()}\n </div>`;\n }\n\n private renderContent() {\n return html`\n <span class=\"menu-item-leading\">\n <slot name=\"leading\" ${hasSlotted()}>\n ${this.checked ? html`<span class=\"checkmark\">check</span>` : nothing}\n </slot>\n </span>\n <span class=\"menu-item-content\">\n <slot></slot>\n <slot name=\"supporting-text\" class=\"menu-item-supporting-text\"></slot>\n </span>\n <span class=\"menu-item-trailing\">\n <slot\n name=\"trailing-text\"\n class=\"menu-item-trailing-text\"\n ${hasSlotted()}></slot>\n <slot name=\"trailing\" ${hasSlotted()}></slot>\n </span>\n `;\n }\n\n protected override updated() {\n if (this.checkable === 'single') {\n this[internals].role = 'menuitemradio';\n } else if (this.checkable === 'multiple') {\n this[internals].role = 'menuitemcheckbox';\n } else {\n this[internals].role = 'menuitem';\n }\n\n if (this.checkable) {\n this[internals].ariaChecked = String(this.checked);\n } else {\n this[internals].ariaChecked = null;\n }\n\n this[internals].ariaDisabled = String(this.disabled);\n this[isFocusable] = !this.disabled;\n }\n}\n"]}
@@ -8,12 +8,22 @@ import { type MenuColor } from './menu.js';
8
8
  declare global {
9
9
  interface HTMLElementTagNameMap {
10
10
  /** A Material Design menu component. */
11
- 'md-menu': Menu;
11
+ 'md-gb-menu': Menu;
12
12
  }
13
13
  }
14
14
  declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<typeof LitElement, import("../../../behaviors/focusable.js").Focusable>, import("../../../behaviors/element-internals.js").WithElementInternals>;
15
15
  /**
16
16
  * A Material Design menu component.
17
+ *
18
+ * @slot - Used to display the menu's items.
19
+ * @csspart menu - The menu's root element.
20
+ * @cssprop --container-color
21
+ * @cssprop --container-elevation
22
+ * @cssprop --container-shape
23
+ * @cssprop --gap
24
+ * @cssprop --group-padding
25
+ * @cssprop --group-shape
26
+ * @cssprop --section-label-text-color
17
27
  */
18
28
  export declare class Menu extends baseClass {
19
29
  static styles: CSSResultOrNative[];