@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.
- package/custom-elements.json +930 -3386
- package/labs/gb/components/button/_button-tokens.scss +2 -0
- package/labs/gb/components/button/button.css.map +1 -1
- package/labs/gb/components/button/md-button.d.ts +22 -1
- package/labs/gb/components/button/md-button.js +22 -1
- package/labs/gb/components/button/md-button.js.map +1 -1
- package/labs/gb/components/card/_card-tokens.scss +2 -0
- package/labs/gb/components/card/card.css.map +1 -1
- package/labs/gb/components/card/md-card.d.ts +12 -1
- package/labs/gb/components/card/md-card.js +12 -1
- package/labs/gb/components/card/md-card.js.map +1 -1
- package/labs/gb/components/checkbox/_checkbox-tokens.scss +2 -0
- package/labs/gb/components/checkbox/checkbox.css.map +1 -1
- package/labs/gb/components/checkbox/md-checkbox.d.ts +15 -1
- package/labs/gb/components/checkbox/md-checkbox.js +15 -1
- package/labs/gb/components/checkbox/md-checkbox.js.map +1 -1
- package/labs/gb/components/divider/_divider-tokens.scss +2 -0
- package/labs/gb/components/divider/divider.css.map +1 -1
- package/labs/gb/components/divider/md-divider.d.ts +5 -1
- package/labs/gb/components/divider/md-divider.js +5 -1
- package/labs/gb/components/divider/md-divider.js.map +1 -1
- package/labs/gb/components/fab/_fab-tokens.scss +2 -0
- package/labs/gb/components/fab/fab.css.map +1 -1
- package/labs/gb/components/fab/md-fab.d.ts +16 -1
- package/labs/gb/components/fab/md-fab.js +16 -1
- package/labs/gb/components/fab/md-fab.js.map +1 -1
- package/labs/gb/components/iconbutton/_icon-button-tokens.scss +2 -0
- package/labs/gb/components/iconbutton/icon-button.css.map +1 -1
- package/labs/gb/components/iconbutton/md-icon-button.d.ts +15 -1
- package/labs/gb/components/iconbutton/md-icon-button.js +15 -1
- package/labs/gb/components/iconbutton/md-icon-button.js.map +1 -1
- package/labs/gb/components/list/_list-tokens.scss +4 -0
- package/labs/gb/components/list/list.css.map +1 -1
- package/labs/gb/components/list/md-list-item.d.ts +40 -1
- package/labs/gb/components/list/md-list-item.js +40 -1
- package/labs/gb/components/list/md-list-item.js.map +1 -1
- package/labs/gb/components/list/md-list.d.ts +6 -1
- package/labs/gb/components/list/md-list.js +6 -1
- package/labs/gb/components/list/md-list.js.map +1 -1
- package/labs/gb/components/menu/_menu-tokens.scss +4 -0
- package/labs/gb/components/menu/md-menu-group.d.ts +3 -1
- package/labs/gb/components/menu/md-menu-group.js +5 -1
- package/labs/gb/components/menu/md-menu-group.js.map +1 -1
- package/labs/gb/components/menu/md-menu-item.d.ts +32 -1
- package/labs/gb/components/menu/md-menu-item.js +33 -1
- package/labs/gb/components/menu/md-menu-item.js.map +1 -1
- package/labs/gb/components/menu/md-menu.d.ts +11 -1
- package/labs/gb/components/menu/md-menu.js +11 -1
- package/labs/gb/components/menu/md-menu.js.map +1 -1
- package/labs/gb/components/menu/menu.css.map +1 -1
- package/labs/gb/components/menu/menu.js +1 -1
- package/labs/gb/components/menu/menu.js.map +1 -1
- package/labs/gb/components/radio/_radio-tokens.scss +2 -0
- package/labs/gb/components/radio/md-radio.d.ts +10 -1
- package/labs/gb/components/radio/md-radio.js +10 -1
- package/labs/gb/components/radio/md-radio.js.map +1 -1
- package/labs/gb/components/radio/radio.css.map +1 -1
- package/labs/gb/components/splitbutton/_split-button-tokens.scss +4 -0
- package/labs/gb/components/splitbutton/md-split-button.d.ts +14 -1
- package/labs/gb/components/splitbutton/md-split-button.js +14 -1
- package/labs/gb/components/splitbutton/md-split-button.js.map +1 -1
- package/labs/gb/components/splitbutton/split-button.css.map +1 -1
- package/labs/gb/components/splitbutton/split-button.d.ts +4 -4
- package/labs/gb/components/splitbutton/split-button.js +4 -4
- package/labs/gb/components/splitbutton/split-button.js.map +1 -1
- package/labs/gb/components/switch/_switch-tokens.scss +2 -0
- package/labs/gb/components/switch/md-switch.d.ts +19 -1
- package/labs/gb/components/switch/md-switch.js +19 -1
- package/labs/gb/components/switch/md-switch.js.map +1 -1
- package/labs/gb/components/switch/switch.css.map +1 -1
- package/labs/gb/styles/icon/md-icon.d.ts +1 -1
- package/labs/gb/styles/icon/md-icon.js +1 -1
- package/labs/gb/styles/icon/md-icon.js.map +1 -1
- 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,
|
|
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
|
|
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;;;;;;;;;;;;;;;;GAgBG;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,mBAAmB,CAAC;GACtB,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-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,
|
|
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
|
|
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
|
|
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
|
|
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[];
|