@material/web 2.5.0 → 2.5.1-nightly.12ec888.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 +20458 -18197
- package/labs/aria/query-associated.d.ts +23 -0
- package/labs/aria/query-associated.js +36 -0
- package/labs/aria/query-associated.js.map +1 -0
- package/labs/aria/tabs/md-aria-tab.d.ts +11 -0
- package/labs/aria/tabs/md-aria-tab.js +8 -0
- package/labs/aria/tabs/md-aria-tab.js.map +1 -0
- package/labs/aria/tabs/md-aria-tablist.d.ts +11 -0
- package/labs/aria/tabs/md-aria-tablist.js +8 -0
- package/labs/aria/tabs/md-aria-tablist.js.map +1 -0
- package/labs/aria/tabs/md-aria-tabpanel.d.ts +11 -0
- package/labs/aria/tabs/md-aria-tabpanel.js +8 -0
- package/labs/aria/tabs/md-aria-tabpanel.js.map +1 -0
- package/labs/aria/tabs/tab.d.ts +33 -0
- package/labs/aria/tabs/tab.js +88 -0
- package/labs/aria/tabs/tab.js.map +1 -0
- package/labs/aria/tabs/tablist.d.ts +67 -0
- package/labs/aria/tabs/tablist.js +271 -0
- package/labs/aria/tabs/tablist.js.map +1 -0
- package/labs/aria/tabs/tabpanel.d.ts +26 -0
- package/labs/aria/tabs/tabpanel.js +53 -0
- package/labs/aria/tabs/tabpanel.js.map +1 -0
- package/labs/gb/components/appbar/_app-bar-tokens.scss +136 -0
- package/labs/gb/components/appbar/app-bar-element.d.ts +53 -0
- package/labs/gb/components/appbar/app-bar-element.js +144 -0
- package/labs/gb/components/appbar/app-bar-element.js.map +1 -0
- package/labs/gb/components/appbar/app-bar.css +4 -0
- package/labs/gb/components/appbar/app-bar.css.map +1 -0
- package/labs/gb/components/appbar/app-bar.cssresult.d.ts +3 -0
- package/labs/gb/components/appbar/app-bar.cssresult.js +14 -0
- package/labs/gb/components/appbar/app-bar.cssresult.js.map +1 -0
- package/labs/gb/components/appbar/app-bar.d.ts +71 -0
- package/labs/gb/components/appbar/app-bar.js +96 -0
- package/labs/gb/components/appbar/app-bar.js.map +1 -0
- package/labs/gb/components/appbar/app-bar.scss +167 -0
- package/labs/gb/components/appbar/md-gb-app-bar.d.ts +12 -0
- package/labs/gb/components/appbar/md-gb-app-bar.js +8 -0
- package/labs/gb/components/appbar/md-gb-app-bar.js.map +1 -0
- package/labs/gb/components/button/_button-tokens.scss +5 -1
- package/labs/gb/components/button/button-element.d.ts +1 -0
- package/labs/gb/components/button/button-element.js +1 -0
- package/labs/gb/components/button/button-element.js.map +1 -1
- package/labs/gb/components/button/button.css +1 -1
- package/labs/gb/components/button/button.css.map +1 -1
- package/labs/gb/components/button/button.cssresult.js +1 -1
- package/labs/gb/components/button/button.cssresult.js.map +1 -1
- package/labs/gb/components/button/button.scss +1 -0
- package/labs/gb/components/chip/_chip-tokens.scss +167 -0
- package/labs/gb/components/chip/chip-element.d.ts +73 -0
- package/labs/gb/components/chip/chip-element.js +233 -0
- package/labs/gb/components/chip/chip-element.js.map +1 -0
- package/labs/gb/components/chip/chip.css +4 -0
- package/labs/gb/components/chip/chip.css.map +1 -0
- package/labs/gb/components/chip/chip.cssresult.d.ts +3 -0
- package/labs/gb/components/chip/chip.cssresult.js +14 -0
- package/labs/gb/components/chip/chip.cssresult.js.map +1 -0
- package/labs/gb/components/chip/chip.d.ts +77 -0
- package/labs/gb/components/chip/chip.js +99 -0
- package/labs/gb/components/chip/chip.js.map +1 -0
- package/labs/gb/components/chip/chip.scss +99 -0
- package/labs/gb/components/chip/md-gb-chip.d.ts +13 -0
- package/labs/gb/components/chip/md-gb-chip.js +9 -0
- package/labs/gb/components/chip/md-gb-chip.js.map +1 -0
- package/labs/gb/components/fab/_fab-tokens.scss +4 -1
- package/labs/gb/components/fab/fab-element.d.ts +1 -0
- package/labs/gb/components/fab/fab-element.js +1 -0
- package/labs/gb/components/fab/fab-element.js.map +1 -1
- package/labs/gb/components/fab/fab.css +1 -1
- package/labs/gb/components/fab/fab.css.map +1 -1
- package/labs/gb/components/fab/fab.cssresult.js +1 -1
- package/labs/gb/components/fab/fab.cssresult.js.map +1 -1
- package/labs/gb/components/fab/fab.scss +1 -0
- package/labs/gb/components/list/_list-tokens.scss +11 -14
- package/labs/gb/components/list/list-item-element.d.ts +4 -0
- package/labs/gb/components/list/list-item-element.js +4 -0
- package/labs/gb/components/list/list-item-element.js.map +1 -1
- package/labs/gb/components/list/list.css +1 -1
- package/labs/gb/components/list/list.css.map +1 -1
- package/labs/gb/components/list/list.cssresult.js +1 -1
- package/labs/gb/components/list/list.cssresult.js.map +1 -1
- package/labs/gb/components/list/list.scss +5 -0
- package/labs/gb/components/menu/_menu-tokens.scss +45 -16
- package/labs/gb/components/menu/menu-item-element.d.ts +4 -1
- package/labs/gb/components/menu/menu-item-element.js +4 -1
- package/labs/gb/components/menu/menu-item-element.js.map +1 -1
- package/labs/gb/components/menu/menu.css +1 -1
- package/labs/gb/components/menu/menu.css.map +1 -1
- package/labs/gb/components/menu/menu.cssresult.js +1 -1
- package/labs/gb/components/menu/menu.cssresult.js.map +1 -1
- package/labs/gb/components/menu/menu.scss +3 -0
- package/package.json +1 -1
|
@@ -8,7 +8,7 @@ import { css } from 'lit';
|
|
|
8
8
|
export const styles = css `/*!
|
|
9
9
|
* Copyright 2026 Google LLC
|
|
10
10
|
* SPDX-License-Identifier: Apache-2.0
|
|
11
|
-
*/@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.checkbox, md.comp.radio;@layer md.comp.list{.list{--container-shape: var(--md-sys-shape-corner-lg);--gap: 0}.list.list-segmented{--gap: 2px;--list-segmented: true}.list{display:flex;flex-direction:column;margin:unset;padding:unset;list-style:none;gap:var(--gap);border-radius:var(--container-shape)}.list>:first-child:not(slot),.list ::slotted(:first-child){border-start-start-radius:inherit;border-start-end-radius:inherit;--first-child: true}.list>:last-child:not(slot),.list ::slotted(:last-child){border-end-start-radius:inherit;border-end-end-radius:inherit;--last-child: true}.list slot{border-radius:inherit}.list-select,.list-select::picker(select){appearance:base-select}.list-select{border:none;background:none;height:fit-content}.list-item{--container-height: 56px;--container-color: transparent;--container-shape: var(--md-sys-shape-corner-xs);--label-text-color: var(--md-sys-color-on-surface);--label-text: var(--md-sys-typescale-body-lg);--label-text-tracking: var(--md-sys-typescale-body-lg-tracking);--leading-space: 16px;--trailing-space: 16px;--between-space: 12px;--top-space: 10px;--bottom-space: 10px;--avatar-size: 40px;--avatar-shape: var(--md-sys-shape-corner-full);--avatar-color: var(--md-sys-color-primary-container);--avatar-label: var(--md-sys-typescale-title-md);--avatar-label-tracking: var(--md-sys-typescale-title-md-tracking);--avatar-label-color: var(--md-sys-color-on-primary-container);--leading-icon-color: var(--md-sys-color-on-surface-variant);--leading-icon-size: 20px;--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-icon-size: 20px;--overline: var(--md-sys-typescale-label-sm);--overline-tracking: var(--md-sys-typescale-label-sm-tracking);--overline-color: var(--md-sys-color-on-surface-variant);--supporting-text: var(--md-sys-typescale-body-md);--supporting-text-tracking: var(--md-sys-typescale-body-md-tracking);--supporting-text-color: var(--md-sys-color-on-surface-variant);--trailing-supporting-text: var(--md-sys-typescale-label-sm);--trailing-supporting-text-tracking: var( --md-sys-typescale-label-sm-tracking );--trailing-supporting-text-color: var(--md-sys-color-on-surface-variant)}@container style(--list-segmented: true){.list-item{--container-color: var(--md-sys-color-surface)}}.list-item:where(:not(.list-item-static)):is(:hover,.hover){--container-shape: var(--md-sys-shape-corner-md);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:where(:not(.list-item-static)):is(:focus-within,.focus){--container-shape: var(--md-sys-shape-corner-lg);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:where(:not(.list-item-static)):is(:active,.active){--container-shape: var(--md-sys-shape-corner-lg);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:is(:checked,.checked){--container-shape: var(--md-sys-shape-corner-lg);--container-color: var(--md-sys-color-secondary-container);--label-text-color: var(--md-sys-color-on-secondary-container);--leading-icon-color: var(--md-sys-color-on-secondary-container);--trailing-icon-color: var(--md-sys-color-on-secondary-container);--overline-color: var(--md-sys-color-on-secondary-container);--supporting-text-color: var(--md-sys-color-on-secondary-container);--trailing-supporting-text-color: var(
|
|
11
|
+
*/@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.checkbox, md.comp.radio;@layer md.comp.list{.list{--container-shape: var(--md-sys-shape-corner-lg);--gap: 0}.list.list-segmented{--gap: 2px;--list-segmented: true}.list{display:flex;flex-direction:column;margin:unset;padding:unset;list-style:none;gap:var(--gap);border-radius:var(--container-shape)}.list>:first-child:not(slot),.list ::slotted(:first-child){border-start-start-radius:inherit;border-start-end-radius:inherit;--first-child: true}.list>:last-child:not(slot),.list ::slotted(:last-child){border-end-start-radius:inherit;border-end-end-radius:inherit;--last-child: true}.list slot{border-radius:inherit}.list-select,.list-select::picker(select){appearance:base-select}.list-select{border:none;background:none;height:fit-content}.list-item{--container-height: 56px;--container-color: transparent;--container-shape: var(--md-sys-shape-corner-xs);--label-text-color: var(--md-sys-color-on-surface);--label-text: var(--md-sys-typescale-body-lg);--label-text-axes: var(--md-sys-typescale-body-lg-axes);--label-text-tracking: var(--md-sys-typescale-body-lg-tracking);--leading-space: 16px;--trailing-space: 16px;--between-space: 12px;--top-space: 10px;--bottom-space: 10px;--avatar-size: 40px;--avatar-shape: var(--md-sys-shape-corner-full);--avatar-color: var(--md-sys-color-primary-container);--avatar-label: var(--md-sys-typescale-title-md);--avatar-label-axes: var(--md-sys-typescale-title-md-axes);--avatar-label-tracking: var(--md-sys-typescale-title-md-tracking);--avatar-label-color: var(--md-sys-color-on-primary-container);--leading-icon-color: var(--md-sys-color-on-surface-variant);--leading-icon-size: 20px;--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-icon-size: 20px;--overline: var(--md-sys-typescale-label-sm);--overline-axes: var(--md-sys-typescale-label-sm-axes);--overline-tracking: var(--md-sys-typescale-label-sm-tracking);--overline-color: var(--md-sys-color-on-surface-variant);--supporting-text: var(--md-sys-typescale-body-md);--supporting-text-axes: var(--md-sys-typescale-body-md-axes);--supporting-text-tracking: var(--md-sys-typescale-body-md-tracking);--supporting-text-color: var(--md-sys-color-on-surface-variant);--trailing-supporting-text: var(--md-sys-typescale-label-sm);--trailing-supporting-text-axes: var(--md-sys-typescale-label-sm-axes);--trailing-supporting-text-tracking: var( --md-sys-typescale-label-sm-tracking );--trailing-supporting-text-color: var(--md-sys-color-on-surface-variant)}@container style(--list-segmented: true){.list-item{--container-color: var(--md-sys-color-surface)}}.list-item:where(:not(.list-item-static)):is(:hover,.hover){--container-shape: var(--md-sys-shape-corner-md);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:where(:not(.list-item-static)):is(:focus-within,.focus){--container-shape: var(--md-sys-shape-corner-lg);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:where(:not(.list-item-static)):is(:active,.active){--container-shape: var(--md-sys-shape-corner-lg);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:is(:checked,.checked){--container-shape: var(--md-sys-shape-corner-lg);--container-color: var(--md-sys-color-secondary-container);--label-text-color: var(--md-sys-color-on-secondary-container);--leading-icon-color: var(--md-sys-color-on-secondary-container);--trailing-icon-color: var(--md-sys-color-on-secondary-container);--overline-color: var(--md-sys-color-on-secondary-container);--supporting-text-color: var(--md-sys-color-on-secondary-container);--trailing-supporting-text-color: var(--md-sys-color-on-secondary-container)}.list-item:is(:disabled,.disabled){--container-shape: var(--md-sys-shape-corner-xs);--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 10%);--label-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--leading-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--trailing-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--overline-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--supporting-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-surface) h s l / 38% )}.list-item{display:flex;align-items:center;gap:var(--between-space);box-sizing:border-box;min-height:var(--container-height);border-radius:var(--container-shape);background-color:var(--container-color);padding-inline:var(--leading-space) var(--trailing-space);padding-block:var(--top-space) var(--bottom-space);color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);font-variation-settings:var(--label-text-axes);appearance:none;border:none;text-align:unset;text-decoration:unset;width:stretch}@container style(--first-child: true){.list-item{border-start-start-radius:inherit;border-start-end-radius:inherit}}@container style(--last-child: true){.list-item{border-end-start-radius:inherit;border-end-end-radius:inherit}}.list-item:not(:disabled,.disabled,.list-item-static){cursor:pointer}.list-item .list-item-content{display:flex;flex-direction:column;flex:1}.list-item .list-item-leading,.list-item .list-item-trailing{display:flex;align-items:center;gap:8px;min-height:28px}.list-item .list-item-leading{--md-icon-color: var(--leading-icon-color);--md-icon-size: var(--leading-icon-size)}.list-item .list-item-trailing{--md-icon-color: var(--trailing-icon-color);--md-icon-size: var(--trailing-icon-size)}.list-item .list-item-overline{font:var(--overline);letter-spacing:var(--overline-tracking);font-variation-settings:var(--overline-axes);color:var(--overline-color)}.list-item .list-item-supporting-text{font:var(--supporting-text);letter-spacing:var(--supporting-text-tracking);font-variation-settings:var(--supporting-text-axes);color:var(--supporting-text-color)}.list-item .list-item-trailing-text{font:var(--trailing-supporting-text);letter-spacing:var(--trailing-supporting-text-tracking);font-variation-settings:var(--trailing-supporting-text-axes);color:var(--trailing-supporting-text-color)}.list-item .list-item-avatar{display:grid;place-items:center;background-color:var(--avatar-color);border-radius:var(--avatar-shape);aspect-ratio:1;width:var(--avatar-size);font:var(--avatar-label);letter-spacing:var(--avatar-label-tracking);font-variation-settings:var(--avatar-label-axes);color:var(--avatar-label-color)}.list-item::checkmark{font:var(--leading-icon-size) var(--md-icon-font);color:var(--leading-icon-color);content:"check"}.list-item:has(.list-item-radio,.list-item-checkbox)::checkmark{display:none}.list-item .list-item-radio,.list-item .list-item-checkbox{width:min-content;height:min-content;--ripple: none;--focus-ring-outline: none}.list-item:is(:checked,.checked) .list-item-radio{--icon-color: var(--md-sys-color-primary);--state-layer-color: var(--md-sys-color-primary);--icon: "radio_button_checked"}.list-item:is(:checked,.checked) .list-item-checkbox{--outline-width: 0;--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}}
|
|
12
12
|
`;
|
|
13
13
|
export default styles.styleSheet;
|
|
14
14
|
//# sourceMappingURL=list.cssresult.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list.cssresult.js","sourceRoot":"","sources":["list.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,+DAA+D;AAC/D,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;CAIxB,CAAC;AACF,eAAe,MAAM,CAAC,UAAW,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n// Generated stylesheet for ./labs/gb/components/list/list.css.\nimport {css} from 'lit';\nexport const styles = css`/*!\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.checkbox, md.comp.radio;@layer md.comp.list{.list{--container-shape: var(--md-sys-shape-corner-lg);--gap: 0}.list.list-segmented{--gap: 2px;--list-segmented: true}.list{display:flex;flex-direction:column;margin:unset;padding:unset;list-style:none;gap:var(--gap);border-radius:var(--container-shape)}.list>:first-child:not(slot),.list ::slotted(:first-child){border-start-start-radius:inherit;border-start-end-radius:inherit;--first-child: true}.list>:last-child:not(slot),.list ::slotted(:last-child){border-end-start-radius:inherit;border-end-end-radius:inherit;--last-child: true}.list slot{border-radius:inherit}.list-select,.list-select::picker(select){appearance:base-select}.list-select{border:none;background:none;height:fit-content}.list-item{--container-height: 56px;--container-color: transparent;--container-shape: var(--md-sys-shape-corner-xs);--label-text-color: var(--md-sys-color-on-surface);--label-text: var(--md-sys-typescale-body-lg);--label-text-tracking: var(--md-sys-typescale-body-lg-tracking);--leading-space: 16px;--trailing-space: 16px;--between-space: 12px;--top-space: 10px;--bottom-space: 10px;--avatar-size: 40px;--avatar-shape: var(--md-sys-shape-corner-full);--avatar-color: var(--md-sys-color-primary-container);--avatar-label: var(--md-sys-typescale-title-md);--avatar-label-tracking: var(--md-sys-typescale-title-md-tracking);--avatar-label-color: var(--md-sys-color-on-primary-container);--leading-icon-color: var(--md-sys-color-on-surface-variant);--leading-icon-size: 20px;--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-icon-size: 20px;--overline: var(--md-sys-typescale-label-sm);--overline-tracking: var(--md-sys-typescale-label-sm-tracking);--overline-color: var(--md-sys-color-on-surface-variant);--supporting-text: var(--md-sys-typescale-body-md);--supporting-text-tracking: var(--md-sys-typescale-body-md-tracking);--supporting-text-color: var(--md-sys-color-on-surface-variant);--trailing-supporting-text: var(--md-sys-typescale-label-sm);--trailing-supporting-text-tracking: var( --md-sys-typescale-label-sm-tracking );--trailing-supporting-text-color: var(--md-sys-color-on-surface-variant)}@container style(--list-segmented: true){.list-item{--container-color: var(--md-sys-color-surface)}}.list-item:where(:not(.list-item-static)):is(:hover,.hover){--container-shape: var(--md-sys-shape-corner-md);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:where(:not(.list-item-static)):is(:focus-within,.focus){--container-shape: var(--md-sys-shape-corner-lg);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:where(:not(.list-item-static)):is(:active,.active){--container-shape: var(--md-sys-shape-corner-lg);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:is(:checked,.checked){--container-shape: var(--md-sys-shape-corner-lg);--container-color: var(--md-sys-color-secondary-container);--label-text-color: var(--md-sys-color-on-secondary-container);--leading-icon-color: var(--md-sys-color-on-secondary-container);--trailing-icon-color: var(--md-sys-color-on-secondary-container);--overline-color: var(--md-sys-color-on-secondary-container);--supporting-text-color: var(--md-sys-color-on-secondary-container);--trailing-supporting-text-color: var(
|
|
1
|
+
{"version":3,"file":"list.cssresult.js","sourceRoot":"","sources":["list.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,+DAA+D;AAC/D,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;CAIxB,CAAC;AACF,eAAe,MAAM,CAAC,UAAW,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n// Generated stylesheet for ./labs/gb/components/list/list.css.\nimport {css} from 'lit';\nexport const styles = css`/*!\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.checkbox, md.comp.radio;@layer md.comp.list{.list{--container-shape: var(--md-sys-shape-corner-lg);--gap: 0}.list.list-segmented{--gap: 2px;--list-segmented: true}.list{display:flex;flex-direction:column;margin:unset;padding:unset;list-style:none;gap:var(--gap);border-radius:var(--container-shape)}.list>:first-child:not(slot),.list ::slotted(:first-child){border-start-start-radius:inherit;border-start-end-radius:inherit;--first-child: true}.list>:last-child:not(slot),.list ::slotted(:last-child){border-end-start-radius:inherit;border-end-end-radius:inherit;--last-child: true}.list slot{border-radius:inherit}.list-select,.list-select::picker(select){appearance:base-select}.list-select{border:none;background:none;height:fit-content}.list-item{--container-height: 56px;--container-color: transparent;--container-shape: var(--md-sys-shape-corner-xs);--label-text-color: var(--md-sys-color-on-surface);--label-text: var(--md-sys-typescale-body-lg);--label-text-axes: var(--md-sys-typescale-body-lg-axes);--label-text-tracking: var(--md-sys-typescale-body-lg-tracking);--leading-space: 16px;--trailing-space: 16px;--between-space: 12px;--top-space: 10px;--bottom-space: 10px;--avatar-size: 40px;--avatar-shape: var(--md-sys-shape-corner-full);--avatar-color: var(--md-sys-color-primary-container);--avatar-label: var(--md-sys-typescale-title-md);--avatar-label-axes: var(--md-sys-typescale-title-md-axes);--avatar-label-tracking: var(--md-sys-typescale-title-md-tracking);--avatar-label-color: var(--md-sys-color-on-primary-container);--leading-icon-color: var(--md-sys-color-on-surface-variant);--leading-icon-size: 20px;--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-icon-size: 20px;--overline: var(--md-sys-typescale-label-sm);--overline-axes: var(--md-sys-typescale-label-sm-axes);--overline-tracking: var(--md-sys-typescale-label-sm-tracking);--overline-color: var(--md-sys-color-on-surface-variant);--supporting-text: var(--md-sys-typescale-body-md);--supporting-text-axes: var(--md-sys-typescale-body-md-axes);--supporting-text-tracking: var(--md-sys-typescale-body-md-tracking);--supporting-text-color: var(--md-sys-color-on-surface-variant);--trailing-supporting-text: var(--md-sys-typescale-label-sm);--trailing-supporting-text-axes: var(--md-sys-typescale-label-sm-axes);--trailing-supporting-text-tracking: var( --md-sys-typescale-label-sm-tracking );--trailing-supporting-text-color: var(--md-sys-color-on-surface-variant)}@container style(--list-segmented: true){.list-item{--container-color: var(--md-sys-color-surface)}}.list-item:where(:not(.list-item-static)):is(:hover,.hover){--container-shape: var(--md-sys-shape-corner-md);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:where(:not(.list-item-static)):is(:focus-within,.focus){--container-shape: var(--md-sys-shape-corner-lg);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:where(:not(.list-item-static)):is(:active,.active){--container-shape: var(--md-sys-shape-corner-lg);--leading-icon-color: var(--md-sys-color-on-surface);--trailing-icon-color: var(--md-sys-color-on-surface)}.list-item:is(:checked,.checked){--container-shape: var(--md-sys-shape-corner-lg);--container-color: var(--md-sys-color-secondary-container);--label-text-color: var(--md-sys-color-on-secondary-container);--leading-icon-color: var(--md-sys-color-on-secondary-container);--trailing-icon-color: var(--md-sys-color-on-secondary-container);--overline-color: var(--md-sys-color-on-secondary-container);--supporting-text-color: var(--md-sys-color-on-secondary-container);--trailing-supporting-text-color: var(--md-sys-color-on-secondary-container)}.list-item:is(:disabled,.disabled){--container-shape: var(--md-sys-shape-corner-xs);--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 10%);--label-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--leading-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--trailing-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--overline-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--supporting-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-surface) h s l / 38% )}.list-item{display:flex;align-items:center;gap:var(--between-space);box-sizing:border-box;min-height:var(--container-height);border-radius:var(--container-shape);background-color:var(--container-color);padding-inline:var(--leading-space) var(--trailing-space);padding-block:var(--top-space) var(--bottom-space);color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);font-variation-settings:var(--label-text-axes);appearance:none;border:none;text-align:unset;text-decoration:unset;width:stretch}@container style(--first-child: true){.list-item{border-start-start-radius:inherit;border-start-end-radius:inherit}}@container style(--last-child: true){.list-item{border-end-start-radius:inherit;border-end-end-radius:inherit}}.list-item:not(:disabled,.disabled,.list-item-static){cursor:pointer}.list-item .list-item-content{display:flex;flex-direction:column;flex:1}.list-item .list-item-leading,.list-item .list-item-trailing{display:flex;align-items:center;gap:8px;min-height:28px}.list-item .list-item-leading{--md-icon-color: var(--leading-icon-color);--md-icon-size: var(--leading-icon-size)}.list-item .list-item-trailing{--md-icon-color: var(--trailing-icon-color);--md-icon-size: var(--trailing-icon-size)}.list-item .list-item-overline{font:var(--overline);letter-spacing:var(--overline-tracking);font-variation-settings:var(--overline-axes);color:var(--overline-color)}.list-item .list-item-supporting-text{font:var(--supporting-text);letter-spacing:var(--supporting-text-tracking);font-variation-settings:var(--supporting-text-axes);color:var(--supporting-text-color)}.list-item .list-item-trailing-text{font:var(--trailing-supporting-text);letter-spacing:var(--trailing-supporting-text-tracking);font-variation-settings:var(--trailing-supporting-text-axes);color:var(--trailing-supporting-text-color)}.list-item .list-item-avatar{display:grid;place-items:center;background-color:var(--avatar-color);border-radius:var(--avatar-shape);aspect-ratio:1;width:var(--avatar-size);font:var(--avatar-label);letter-spacing:var(--avatar-label-tracking);font-variation-settings:var(--avatar-label-axes);color:var(--avatar-label-color)}.list-item::checkmark{font:var(--leading-icon-size) var(--md-icon-font);color:var(--leading-icon-color);content:\"check\"}.list-item:has(.list-item-radio,.list-item-checkbox)::checkmark{display:none}.list-item .list-item-radio,.list-item .list-item-checkbox{width:min-content;height:min-content;--ripple: none;--focus-ring-outline: none}.list-item:is(:checked,.checked) .list-item-radio{--icon-color: var(--md-sys-color-primary);--state-layer-color: var(--md-sys-color-primary);--icon: \"radio_button_checked\"}.list-item:is(:checked,.checked) .list-item-checkbox{--outline-width: 0;--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}}\n`;\nexport default styles.styleSheet!;\n"]}
|
|
@@ -107,6 +107,7 @@
|
|
|
107
107
|
color: var(--label-text-color);
|
|
108
108
|
font: var(--label-text);
|
|
109
109
|
letter-spacing: var(--label-text-tracking);
|
|
110
|
+
font-variation-settings: var(--label-text-axes);
|
|
110
111
|
appearance: none;
|
|
111
112
|
border: none;
|
|
112
113
|
text-align: unset;
|
|
@@ -155,18 +156,21 @@
|
|
|
155
156
|
.list-item-overline {
|
|
156
157
|
font: var(--overline);
|
|
157
158
|
letter-spacing: var(--overline-tracking);
|
|
159
|
+
font-variation-settings: var(--overline-axes);
|
|
158
160
|
color: var(--overline-color);
|
|
159
161
|
}
|
|
160
162
|
|
|
161
163
|
.list-item-supporting-text {
|
|
162
164
|
font: var(--supporting-text);
|
|
163
165
|
letter-spacing: var(--supporting-text-tracking);
|
|
166
|
+
font-variation-settings: var(--supporting-text-axes);
|
|
164
167
|
color: var(--supporting-text-color);
|
|
165
168
|
}
|
|
166
169
|
|
|
167
170
|
.list-item-trailing-text {
|
|
168
171
|
font: var(--trailing-supporting-text);
|
|
169
172
|
letter-spacing: var(--trailing-supporting-text-tracking);
|
|
173
|
+
font-variation-settings: var(--trailing-supporting-text-axes);
|
|
170
174
|
color: var(--trailing-supporting-text-color);
|
|
171
175
|
}
|
|
172
176
|
|
|
@@ -179,6 +183,7 @@
|
|
|
179
183
|
width: var(--avatar-size);
|
|
180
184
|
font: var(--avatar-label);
|
|
181
185
|
letter-spacing: var(--avatar-label-tracking);
|
|
186
|
+
font-variation-settings: var(--avatar-label-axes);
|
|
182
187
|
color: var(--avatar-label-color);
|
|
183
188
|
}
|
|
184
189
|
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
--group-padding: 2px;
|
|
13
13
|
--group-shape: var(--md-sys-shape-corner-sm);
|
|
14
14
|
--section-label-text-color: var(--md-sys-color-on-surface-variant);
|
|
15
|
-
// LINT.ThenChange(
|
|
15
|
+
// LINT.ThenChange(menu-element.ts) keep in sync with `@cssprop` jsdoc tags
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
@mixin inactive {
|
|
@@ -36,6 +36,7 @@
|
|
|
36
36
|
--inner-corner-corner-size: none;
|
|
37
37
|
--label-text-color: var(--md-sys-color-on-surface);
|
|
38
38
|
--label-text: var(--md-sys-typescale-label-lg);
|
|
39
|
+
--label-text-axes: var(--md-sys-typescale-label-lg-axes);
|
|
39
40
|
--label-text-tracking: var(--md-sys-typescale-label-lg-tracking);
|
|
40
41
|
--leading-icon-color: var(--md-sys-color-on-surface-variant);
|
|
41
42
|
--leading-icon-size: 20px;
|
|
@@ -43,15 +44,19 @@
|
|
|
43
44
|
--shape: var(--md-sys-shape-corner-xs);
|
|
44
45
|
--supporting-text-color: var(--md-sys-color-on-surface-variant);
|
|
45
46
|
--supporting-text: var(--md-sys-typescale-body-sm);
|
|
47
|
+
--supporting-text-axes: var(--md-sys-typescale-body-sm-axes);
|
|
46
48
|
--supporting-text-tracking: var(--md-sys-typescale-body-sm-tracking);
|
|
47
49
|
--top-space: 8px;
|
|
48
50
|
--trailing-icon-color: var(--md-sys-color-on-surface-variant);
|
|
49
51
|
--trailing-icon-size: 20px;
|
|
50
52
|
--trailing-space: 16px;
|
|
51
|
-
--trailing-supporting-text-color: var(--md-sys-color-on-surface-variant);
|
|
52
53
|
--trailing-supporting-text: var(--md-sys-typescale-label-lg);
|
|
53
|
-
--trailing-supporting-text-
|
|
54
|
-
|
|
54
|
+
--trailing-supporting-text-axes: var(--md-sys-typescale-label-lg-axes);
|
|
55
|
+
--trailing-supporting-text-color: var(--md-sys-color-on-surface-variant);
|
|
56
|
+
--trailing-supporting-text-tracking: var(
|
|
57
|
+
--md-sys-typescale-label-lg-tracking
|
|
58
|
+
);
|
|
59
|
+
// LINT.ThenChange(menu-item-element.ts) keep in sync with `@cssprop` jsdoc tags
|
|
55
60
|
}
|
|
56
61
|
|
|
57
62
|
@mixin item-first-child {
|
|
@@ -111,22 +116,46 @@
|
|
|
111
116
|
--leading-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
|
|
112
117
|
--supporting-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
|
|
113
118
|
--trailing-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
|
|
114
|
-
--trailing-supporting-text-color: hsl(
|
|
119
|
+
--trailing-supporting-text-color: hsl(
|
|
120
|
+
from var(--md-sys-color-on-surface) h s l / 38%
|
|
121
|
+
);
|
|
115
122
|
}
|
|
116
123
|
|
|
117
124
|
@mixin item-disabled-vibrant {
|
|
118
|
-
--label-text-color: hsl(
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
--
|
|
122
|
-
|
|
125
|
+
--label-text-color: hsl(
|
|
126
|
+
from var(--md-sys-color-on-tertiary-container) h s l / 38%
|
|
127
|
+
);
|
|
128
|
+
--leading-icon-color: hsl(
|
|
129
|
+
from var(--md-sys-color-on-tertiary-container) h s l / 38%
|
|
130
|
+
);
|
|
131
|
+
--supporting-text-color: hsl(
|
|
132
|
+
from var(--md-sys-color-on-tertiary-container) h s l / 38%
|
|
133
|
+
);
|
|
134
|
+
--trailing-icon-color: hsl(
|
|
135
|
+
from var(--md-sys-color-on-tertiary-container) h s l / 38%
|
|
136
|
+
);
|
|
137
|
+
--trailing-supporting-text-color: hsl(
|
|
138
|
+
from var(--md-sys-color-on-tertiary-container) h s l / 38%
|
|
139
|
+
);
|
|
123
140
|
}
|
|
124
141
|
|
|
125
142
|
@mixin item-disabled-selected {
|
|
126
|
-
--container-color: hsl(
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
--
|
|
130
|
-
|
|
131
|
-
|
|
143
|
+
--container-color: hsl(
|
|
144
|
+
from var(--md-sys-color-tertiary-container) h s l / 38%
|
|
145
|
+
);
|
|
146
|
+
--label-text-color: hsl(
|
|
147
|
+
from var(--md-sys-color-on-tertiary-container) h s l / 38%
|
|
148
|
+
);
|
|
149
|
+
--leading-icon-color: hsl(
|
|
150
|
+
from var(--md-sys-color-on-tertiary-container) h s l / 38%
|
|
151
|
+
);
|
|
152
|
+
--supporting-text-color: hsl(
|
|
153
|
+
from var(--md-sys-color-on-tertiary-container) h s l / 38%
|
|
154
|
+
);
|
|
155
|
+
--trailing-icon-color: hsl(
|
|
156
|
+
from var(--md-sys-color-on-tertiary-container) h s l / 38%
|
|
157
|
+
);
|
|
158
|
+
--trailing-supporting-text-color: hsl(
|
|
159
|
+
from var(--md-sys-color-on-tertiary-container) h s l / 38%
|
|
160
|
+
);
|
|
132
161
|
}
|
|
@@ -23,6 +23,7 @@ declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinRe
|
|
|
23
23
|
* @cssprop --inner-corner-corner-size
|
|
24
24
|
* @cssprop --label-text-color
|
|
25
25
|
* @cssprop --label-text
|
|
26
|
+
* @cssprop --label-text-axes
|
|
26
27
|
* @cssprop --label-text-tracking
|
|
27
28
|
* @cssprop --leading-icon-color
|
|
28
29
|
* @cssprop --leading-icon-size
|
|
@@ -30,13 +31,15 @@ declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinRe
|
|
|
30
31
|
* @cssprop --shape
|
|
31
32
|
* @cssprop --supporting-text-color
|
|
32
33
|
* @cssprop --supporting-text
|
|
34
|
+
* @cssprop --supporting-text-axes
|
|
33
35
|
* @cssprop --supporting-text-tracking
|
|
34
36
|
* @cssprop --top-space
|
|
35
37
|
* @cssprop --trailing-icon-color
|
|
36
38
|
* @cssprop --trailing-icon-size
|
|
37
39
|
* @cssprop --trailing-space
|
|
38
|
-
* @cssprop --trailing-supporting-text-color
|
|
39
40
|
* @cssprop --trailing-supporting-text
|
|
41
|
+
* @cssprop --trailing-supporting-text-axes
|
|
42
|
+
* @cssprop --trailing-supporting-text-color
|
|
40
43
|
* @cssprop --trailing-supporting-text-tracking
|
|
41
44
|
*/
|
|
42
45
|
export declare class MenuItemElement extends baseClass {
|
|
@@ -38,6 +38,7 @@ const baseClass = mixinElementInternals(mixinFocusable(LitElement));
|
|
|
38
38
|
* @cssprop --inner-corner-corner-size
|
|
39
39
|
* @cssprop --label-text-color
|
|
40
40
|
* @cssprop --label-text
|
|
41
|
+
* @cssprop --label-text-axes
|
|
41
42
|
* @cssprop --label-text-tracking
|
|
42
43
|
* @cssprop --leading-icon-color
|
|
43
44
|
* @cssprop --leading-icon-size
|
|
@@ -45,13 +46,15 @@ const baseClass = mixinElementInternals(mixinFocusable(LitElement));
|
|
|
45
46
|
* @cssprop --shape
|
|
46
47
|
* @cssprop --supporting-text-color
|
|
47
48
|
* @cssprop --supporting-text
|
|
49
|
+
* @cssprop --supporting-text-axes
|
|
48
50
|
* @cssprop --supporting-text-tracking
|
|
49
51
|
* @cssprop --top-space
|
|
50
52
|
* @cssprop --trailing-icon-color
|
|
51
53
|
* @cssprop --trailing-icon-size
|
|
52
54
|
* @cssprop --trailing-space
|
|
53
|
-
* @cssprop --trailing-supporting-text-color
|
|
54
55
|
* @cssprop --trailing-supporting-text
|
|
56
|
+
* @cssprop --trailing-supporting-text-axes
|
|
57
|
+
* @cssprop --trailing-supporting-text-color
|
|
55
58
|
* @cssprop --trailing-supporting-text-tracking
|
|
56
59
|
*/
|
|
57
60
|
export class MenuItemElement extends baseClass {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-item-element.js","sourceRoot":"","sources":["menu-item-element.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {consume} from '@lit/context';\nimport {css, CSSResultOrNative, html, LitElement, nothing} from 'lit';\nimport {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\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 */\nexport class MenuItemElement 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"]}
|
|
1
|
+
{"version":3,"file":"menu-item-element.js","sourceRoot":"","sources":["menu-item-element.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {consume} from '@lit/context';\nimport {css, CSSResultOrNative, html, LitElement, nothing} from 'lit';\nimport {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\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-axes\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-axes\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\n * @cssprop --trailing-supporting-text-axes\n * @cssprop --trailing-supporting-text-color\n * @cssprop --trailing-supporting-text-tracking\n */\nexport class MenuItemElement 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"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* Copyright 2026 Google LLC
|
|
3
3
|
* SPDX-License-Identifier: Apache-2.0
|
|
4
|
-
*/@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.divider;@layer md.comp.menu{.menu{--container-color: var(--md-sys-color-surface-container-low);--container-elevation: var(--md-sys-elevation-shadow-2);--container-shape: var(--md-sys-shape-corner-lg);--gap: 2px;--group-padding: 2px;--group-shape: var(--md-sys-shape-corner-sm);--section-label-text-color: var(--md-sys-color-on-surface-variant)}.menu.menu-vibrant{--container-color: var(--md-sys-color-tertiary-container);--menu-vibrant: true}.menu{flex-direction:column;box-shadow:var(--container-elevation);border-radius:var(--container-shape);background-color:var(--container-color);padding-block:var(--group-padding)}.menu:popover-open,.menu.menu-host{display:flex}.menu:popover-open,:host(:popover-open):has(.menu.menu-host){position-area:end span-end;border:none}:host(:popover-open):has(.menu.menu-host){overflow:visible;background:none;padding:0}.menu.menu-host{overflow:auto}.menu .divider,.menu ::slotted(.divider){margin:8px 16px}.menu-item{--between-space: 12px;--bottom-space: 8px;--container-color: transparent;--height: 44px;--inner-corner-corner-size: none;--label-text-color: var(--md-sys-color-on-surface);--label-text: var(--md-sys-typescale-label-lg);--label-text-tracking: var(--md-sys-typescale-label-lg-tracking);--leading-icon-color: var(--md-sys-color-on-surface-variant);--leading-icon-size: 20px;--leading-space: 16px;--shape: var(--md-sys-shape-corner-xs);--supporting-text-color: var(--md-sys-color-on-surface-variant);--supporting-text: var(--md-sys-typescale-body-sm);--supporting-text-tracking: var(--md-sys-typescale-body-sm-tracking);--top-space: 8px;--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-icon-size: 20px;--trailing-space: 16px;--trailing-supporting-text
|
|
4
|
+
*/@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.divider;@layer md.comp.menu{.menu{--container-color: var(--md-sys-color-surface-container-low);--container-elevation: var(--md-sys-elevation-shadow-2);--container-shape: var(--md-sys-shape-corner-lg);--gap: 2px;--group-padding: 2px;--group-shape: var(--md-sys-shape-corner-sm);--section-label-text-color: var(--md-sys-color-on-surface-variant)}.menu.menu-vibrant{--container-color: var(--md-sys-color-tertiary-container);--menu-vibrant: true}.menu{flex-direction:column;box-shadow:var(--container-elevation);border-radius:var(--container-shape);background-color:var(--container-color);padding-block:var(--group-padding)}.menu:popover-open,.menu.menu-host{display:flex}.menu:popover-open,:host(:popover-open):has(.menu.menu-host){position-area:end span-end;border:none}:host(:popover-open):has(.menu.menu-host){overflow:visible;background:none;padding:0}.menu.menu-host{overflow:auto}.menu .divider,.menu ::slotted(.divider){margin:8px 16px}.menu-item{--between-space: 12px;--bottom-space: 8px;--container-color: transparent;--height: 44px;--inner-corner-corner-size: none;--label-text-color: var(--md-sys-color-on-surface);--label-text: var(--md-sys-typescale-label-lg);--label-text-axes: var(--md-sys-typescale-label-lg-axes);--label-text-tracking: var(--md-sys-typescale-label-lg-tracking);--leading-icon-color: var(--md-sys-color-on-surface-variant);--leading-icon-size: 20px;--leading-space: 16px;--shape: var(--md-sys-shape-corner-xs);--supporting-text-color: var(--md-sys-color-on-surface-variant);--supporting-text: var(--md-sys-typescale-body-sm);--supporting-text-axes: var(--md-sys-typescale-body-sm-axes);--supporting-text-tracking: var(--md-sys-typescale-body-sm-tracking);--top-space: 8px;--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-icon-size: 20px;--trailing-space: 16px;--trailing-supporting-text: var(--md-sys-typescale-label-lg);--trailing-supporting-text-axes: var(--md-sys-typescale-label-lg-axes);--trailing-supporting-text-color: var(--md-sys-color-on-surface-variant);--trailing-supporting-text-tracking: var( --md-sys-typescale-label-lg-tracking )}.menu-item:first-child{--inner-corner-corner-size: var(--md-sys-shape-corner-xs);--shape: var(--md-sys-shape-corner-md)}.menu-item:last-child{--inner-corner-corner-size: var(--md-sys-shape-corner-xs);--shape: var(--md-sys-shape-corner-md)}@container style(--menu-vibrant: true){.menu-item{--label-text-color: var(--md-sys-color-on-tertiary-container);--leading-icon-color: var(--md-sys-color-on-tertiary-container);--supporting-text-color: var(--md-sys-color-on-tertiary-container);--trailing-icon-color: var(--md-sys-color-on-tertiary-container);--trailing-supporting-text-color: var(--md-sys-color-on-tertiary-container)}.menu-item:where(:hover,.hover){--leading-icon-color: var(--md-sys-color-tertiary);--trailing-icon-color: var(--md-sys-color-tertiary)}.menu-item:where(:focus-within,.focus){--leading-icon-color: var(--md-sys-color-tertiary);--trailing-icon-color: var(--md-sys-color-tertiary)}.menu-item:where(:active,.active){--leading-icon-color: var(--md-sys-color-tertiary);--trailing-icon-color: var(--md-sys-color-tertiary)}}.menu-item:is(:checked,.checked){--container-color: var(--md-sys-color-tertiary-container);--label-text-color: var(--md-sys-color-on-tertiary-container);--leading-icon-color: var(--md-sys-color-on-tertiary-container);--shape: var(--md-sys-shape-corner-md);--supporting-text-color: var(--md-sys-color-on-tertiary-container);--trailing-icon-color: var(--md-sys-color-on-tertiary-container);--trailing-supporting-text-color: var(--md-sys-color-on-tertiary-container)}@container style(--menu-vibrant: true){.menu-item:is(:checked,.checked){--container-color: var(--md-sys-color-tertiary);--label-text-color: var(--md-sys-color-on-tertiary);--leading-icon-color: var(--md-sys-color-on-tertiary);--supporting-text-color: var(--md-sys-color-on-tertiary);--trailing-icon-color: var(--md-sys-color-on-tertiary);--trailing-supporting-text-color: var(--md-sys-color-on-tertiary)}}.menu-item:is(:disabled,.disabled){--label-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--leading-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--supporting-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--trailing-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-surface) h s l / 38% )}@container style(--menu-vibrant: true){.menu-item:is(:disabled,.disabled){--label-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--leading-icon-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--supporting-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--trailing-icon-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% )}}.menu-item:is(:disabled,.disabled):where(:checked,.checked){--container-color: hsl( from var(--md-sys-color-tertiary-container) h s l / 38% );--label-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--leading-icon-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--supporting-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--trailing-icon-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% )}.menu-item{position:relative;isolation:isolate;display:flex;align-items:center;user-select:none;box-sizing:border-box;gap:var(--between-space);min-height:calc(var(--height) + 4px);border-radius:var(--shape);padding-block:var(--top-space) var(--bottom-space);padding-inline:var(--leading-space) var(--trailing-space);background-image:none;outline:none;color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);font-variation-settings:var(--label-text-axes)}.menu-item::before{display:flex;content:"";position:absolute;inset:2px 4px;z-index:-1;border-radius:inherit;background-color:var(--container-color);background-image:var(--ripple);animation:var(--ripple-animation),var(--focus-ring-animation);transition:var(--ripple-transition);outline:var(--focus-ring-outline);outline-offset:var(--focus-ring-offset)}.menu-item:not(:disabled,.disabled){cursor:pointer}.menu-item .menu-item-content{display:flex;flex-direction:column;flex:1}.menu-item .menu-item-supporting-text{color:var(--supporting-text-color);font:var(--supporting-text);letter-spacing:var(--supporting-text-tracking);font-variation-settings:var(--supporting-text-axes)}.menu-item .menu-item-trailing-text{color:var(--trailing-supporting-text-color);font:var(--trailing-supporting-text);letter-spacing:var(--trailing-supporting-text-tracking);font-variation-settings:var(--trailing-supporting-text-axes)}.menu-item .menu-item-leading,.menu-item .menu-item-trailing{display:flex;align-items:center;gap:8px}.menu-item .menu-item-leading{--md-icon-color: var(--leading-icon-color);--md-icon-size: var(--leading-icon-size)}.menu-item .menu-item-trailing{--md-icon-color: var(--trailing-icon-color);--md-icon-size: var(--trailing-icon-size)}}/*# sourceMappingURL=menu.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["menu.scss","_menu-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,mEACA,oBAEI,MCLF,6DACA,wDACA,iDACA,WACA,qBACA,6CACA,mEDEE,mBCWF,0DDTI,qBAGF,MACE,sBACA,sCACA,qCACA,wCACA,mCAGF,mCAEE,aAGF,6DAEE,2BACA,YAGF,0CACE,iBACA,gBACA,UAGF,gBACE,cAGF,yCAEE,gBAKF,WCzBF,sBACA,oBACA,+BACA,eACA,iCACA,mDACA,+CACA,iEACA,6DACA,0BACA,sBACA,uCACA,gEACA,mDACA,qEACA,iBACA,8DACA,2BACA,uBACA,yEACA,
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["menu.scss","_menu-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,mEACA,oBAEI,MCLF,6DACA,wDACA,iDACA,WACA,qBACA,6CACA,mEDEE,mBCWF,0DDTI,qBAGF,MACE,sBACA,sCACA,qCACA,wCACA,mCAGF,mCAEE,aAGF,6DAEE,2BACA,YAGF,0CACE,iBACA,gBACA,UAGF,gBACE,cAGF,yCAEE,gBAKF,WCzBF,sBACA,oBACA,+BACA,eACA,iCACA,mDACA,+CACA,yDACA,iEACA,6DACA,0BACA,sBACA,uCACA,gEACA,mDACA,6DACA,qEACA,iBACA,8DACA,2BACA,uBACA,6DACA,uEACA,yEACA,iFDIE,uBCGF,0DACA,uCDDE,sBCKF,0DACA,uCDHE,uCACE,WCMJ,8DACA,gEACA,mEACA,iEACA,4EDPI,gCCWJ,mDACA,oDDTI,uCCaJ,mDACA,oDDXI,kCCeJ,mDACA,qDDXE,iCCeF,0DACA,8DACA,gEACA,uCACA,mEACA,iEACA,4EDnBI,uCAFF,iCCyBF,gDACA,oDACA,sDACA,yDACA,uDACA,mEDvBE,mCC2BF,yEACA,2EACA,8EACA,4EACA,yFD7BI,uCAFF,mCCqCF,sFAGA,wFAGA,2FAGA,yFAGA,qGD5CI,4DCkDJ,kFAGA,sFAGA,wFAGA,2FAGA,yFAGA,oGD5DE,WACE,kBACA,kBACA,aACA,mBACA,iBACA,sBACA,yBACA,qCACA,2BACA,mDACA,0DACA,sBACA,aACA,8BACA,uBACA,0CACA,+CAGF,mBACE,aACA,WACA,kBACA,cACA,WACA,sBACA,wCACA,+BACA,8DACA,oCACA,kCACA,wCAGF,oCACE,eAGF,8BACE,aACA,sBACA,OAGF,sCACE,mCACA,4BACA,+CACA,oDAGF,oCACE,4CACA,qCACA,wDACA,6DAGF,6DAEE,aACA,mBACA,QAGF,8BACE,2CACA,yCAGF,+BACE,4CACA","file":"menu.css"}
|
|
@@ -8,7 +8,7 @@ import { css } from 'lit';
|
|
|
8
8
|
export const styles = css `/*!
|
|
9
9
|
* Copyright 2026 Google LLC
|
|
10
10
|
* SPDX-License-Identifier: Apache-2.0
|
|
11
|
-
*/@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.divider;@layer md.comp.menu{.menu{--container-color: var(--md-sys-color-surface-container-low);--container-elevation: var(--md-sys-elevation-shadow-2);--container-shape: var(--md-sys-shape-corner-lg);--gap: 2px;--group-padding: 2px;--group-shape: var(--md-sys-shape-corner-sm);--section-label-text-color: var(--md-sys-color-on-surface-variant)}.menu.menu-vibrant{--container-color: var(--md-sys-color-tertiary-container);--menu-vibrant: true}.menu{flex-direction:column;box-shadow:var(--container-elevation);border-radius:var(--container-shape);background-color:var(--container-color);padding-block:var(--group-padding)}.menu:popover-open,.menu.menu-host{display:flex}.menu:popover-open,:host(:popover-open):has(.menu.menu-host){position-area:end span-end;border:none}:host(:popover-open):has(.menu.menu-host){overflow:visible;background:none;padding:0}.menu.menu-host{overflow:auto}.menu .divider,.menu ::slotted(.divider){margin:8px 16px}.menu-item{--between-space: 12px;--bottom-space: 8px;--container-color: transparent;--height: 44px;--inner-corner-corner-size: none;--label-text-color: var(--md-sys-color-on-surface);--label-text: var(--md-sys-typescale-label-lg);--label-text-tracking: var(--md-sys-typescale-label-lg-tracking);--leading-icon-color: var(--md-sys-color-on-surface-variant);--leading-icon-size: 20px;--leading-space: 16px;--shape: var(--md-sys-shape-corner-xs);--supporting-text-color: var(--md-sys-color-on-surface-variant);--supporting-text: var(--md-sys-typescale-body-sm);--supporting-text-tracking: var(--md-sys-typescale-body-sm-tracking);--top-space: 8px;--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-icon-size: 20px;--trailing-space: 16px;--trailing-supporting-text
|
|
11
|
+
*/@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.divider;@layer md.comp.menu{.menu{--container-color: var(--md-sys-color-surface-container-low);--container-elevation: var(--md-sys-elevation-shadow-2);--container-shape: var(--md-sys-shape-corner-lg);--gap: 2px;--group-padding: 2px;--group-shape: var(--md-sys-shape-corner-sm);--section-label-text-color: var(--md-sys-color-on-surface-variant)}.menu.menu-vibrant{--container-color: var(--md-sys-color-tertiary-container);--menu-vibrant: true}.menu{flex-direction:column;box-shadow:var(--container-elevation);border-radius:var(--container-shape);background-color:var(--container-color);padding-block:var(--group-padding)}.menu:popover-open,.menu.menu-host{display:flex}.menu:popover-open,:host(:popover-open):has(.menu.menu-host){position-area:end span-end;border:none}:host(:popover-open):has(.menu.menu-host){overflow:visible;background:none;padding:0}.menu.menu-host{overflow:auto}.menu .divider,.menu ::slotted(.divider){margin:8px 16px}.menu-item{--between-space: 12px;--bottom-space: 8px;--container-color: transparent;--height: 44px;--inner-corner-corner-size: none;--label-text-color: var(--md-sys-color-on-surface);--label-text: var(--md-sys-typescale-label-lg);--label-text-axes: var(--md-sys-typescale-label-lg-axes);--label-text-tracking: var(--md-sys-typescale-label-lg-tracking);--leading-icon-color: var(--md-sys-color-on-surface-variant);--leading-icon-size: 20px;--leading-space: 16px;--shape: var(--md-sys-shape-corner-xs);--supporting-text-color: var(--md-sys-color-on-surface-variant);--supporting-text: var(--md-sys-typescale-body-sm);--supporting-text-axes: var(--md-sys-typescale-body-sm-axes);--supporting-text-tracking: var(--md-sys-typescale-body-sm-tracking);--top-space: 8px;--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-icon-size: 20px;--trailing-space: 16px;--trailing-supporting-text: var(--md-sys-typescale-label-lg);--trailing-supporting-text-axes: var(--md-sys-typescale-label-lg-axes);--trailing-supporting-text-color: var(--md-sys-color-on-surface-variant);--trailing-supporting-text-tracking: var( --md-sys-typescale-label-lg-tracking )}.menu-item:first-child{--inner-corner-corner-size: var(--md-sys-shape-corner-xs);--shape: var(--md-sys-shape-corner-md)}.menu-item:last-child{--inner-corner-corner-size: var(--md-sys-shape-corner-xs);--shape: var(--md-sys-shape-corner-md)}@container style(--menu-vibrant: true){.menu-item{--label-text-color: var(--md-sys-color-on-tertiary-container);--leading-icon-color: var(--md-sys-color-on-tertiary-container);--supporting-text-color: var(--md-sys-color-on-tertiary-container);--trailing-icon-color: var(--md-sys-color-on-tertiary-container);--trailing-supporting-text-color: var(--md-sys-color-on-tertiary-container)}.menu-item:where(:hover,.hover){--leading-icon-color: var(--md-sys-color-tertiary);--trailing-icon-color: var(--md-sys-color-tertiary)}.menu-item:where(:focus-within,.focus){--leading-icon-color: var(--md-sys-color-tertiary);--trailing-icon-color: var(--md-sys-color-tertiary)}.menu-item:where(:active,.active){--leading-icon-color: var(--md-sys-color-tertiary);--trailing-icon-color: var(--md-sys-color-tertiary)}}.menu-item:is(:checked,.checked){--container-color: var(--md-sys-color-tertiary-container);--label-text-color: var(--md-sys-color-on-tertiary-container);--leading-icon-color: var(--md-sys-color-on-tertiary-container);--shape: var(--md-sys-shape-corner-md);--supporting-text-color: var(--md-sys-color-on-tertiary-container);--trailing-icon-color: var(--md-sys-color-on-tertiary-container);--trailing-supporting-text-color: var(--md-sys-color-on-tertiary-container)}@container style(--menu-vibrant: true){.menu-item:is(:checked,.checked){--container-color: var(--md-sys-color-tertiary);--label-text-color: var(--md-sys-color-on-tertiary);--leading-icon-color: var(--md-sys-color-on-tertiary);--supporting-text-color: var(--md-sys-color-on-tertiary);--trailing-icon-color: var(--md-sys-color-on-tertiary);--trailing-supporting-text-color: var(--md-sys-color-on-tertiary)}}.menu-item:is(:disabled,.disabled){--label-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--leading-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--supporting-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--trailing-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-surface) h s l / 38% )}@container style(--menu-vibrant: true){.menu-item:is(:disabled,.disabled){--label-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--leading-icon-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--supporting-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--trailing-icon-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% )}}.menu-item:is(:disabled,.disabled):where(:checked,.checked){--container-color: hsl( from var(--md-sys-color-tertiary-container) h s l / 38% );--label-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--leading-icon-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--supporting-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--trailing-icon-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% )}.menu-item{position:relative;isolation:isolate;display:flex;align-items:center;user-select:none;box-sizing:border-box;gap:var(--between-space);min-height:calc(var(--height) + 4px);border-radius:var(--shape);padding-block:var(--top-space) var(--bottom-space);padding-inline:var(--leading-space) var(--trailing-space);background-image:none;outline:none;color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);font-variation-settings:var(--label-text-axes)}.menu-item::before{display:flex;content:"";position:absolute;inset:2px 4px;z-index:-1;border-radius:inherit;background-color:var(--container-color);background-image:var(--ripple);animation:var(--ripple-animation),var(--focus-ring-animation);transition:var(--ripple-transition);outline:var(--focus-ring-outline);outline-offset:var(--focus-ring-offset)}.menu-item:not(:disabled,.disabled){cursor:pointer}.menu-item .menu-item-content{display:flex;flex-direction:column;flex:1}.menu-item .menu-item-supporting-text{color:var(--supporting-text-color);font:var(--supporting-text);letter-spacing:var(--supporting-text-tracking);font-variation-settings:var(--supporting-text-axes)}.menu-item .menu-item-trailing-text{color:var(--trailing-supporting-text-color);font:var(--trailing-supporting-text);letter-spacing:var(--trailing-supporting-text-tracking);font-variation-settings:var(--trailing-supporting-text-axes)}.menu-item .menu-item-leading,.menu-item .menu-item-trailing{display:flex;align-items:center;gap:8px}.menu-item .menu-item-leading{--md-icon-color: var(--leading-icon-color);--md-icon-size: var(--leading-icon-size)}.menu-item .menu-item-trailing{--md-icon-color: var(--trailing-icon-color);--md-icon-size: var(--trailing-icon-size)}}
|
|
12
12
|
`;
|
|
13
13
|
export default styles.styleSheet;
|
|
14
14
|
//# sourceMappingURL=menu.cssresult.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.cssresult.js","sourceRoot":"","sources":["menu.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,+DAA+D;AAC/D,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;CAIxB,CAAC;AACF,eAAe,MAAM,CAAC,UAAW,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n// Generated stylesheet for ./labs/gb/components/menu/menu.css.\nimport {css} from 'lit';\nexport const styles = css`/*!\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.divider;@layer md.comp.menu{.menu{--container-color: var(--md-sys-color-surface-container-low);--container-elevation: var(--md-sys-elevation-shadow-2);--container-shape: var(--md-sys-shape-corner-lg);--gap: 2px;--group-padding: 2px;--group-shape: var(--md-sys-shape-corner-sm);--section-label-text-color: var(--md-sys-color-on-surface-variant)}.menu.menu-vibrant{--container-color: var(--md-sys-color-tertiary-container);--menu-vibrant: true}.menu{flex-direction:column;box-shadow:var(--container-elevation);border-radius:var(--container-shape);background-color:var(--container-color);padding-block:var(--group-padding)}.menu:popover-open,.menu.menu-host{display:flex}.menu:popover-open,:host(:popover-open):has(.menu.menu-host){position-area:end span-end;border:none}:host(:popover-open):has(.menu.menu-host){overflow:visible;background:none;padding:0}.menu.menu-host{overflow:auto}.menu .divider,.menu ::slotted(.divider){margin:8px 16px}.menu-item{--between-space: 12px;--bottom-space: 8px;--container-color: transparent;--height: 44px;--inner-corner-corner-size: none;--label-text-color: var(--md-sys-color-on-surface);--label-text: var(--md-sys-typescale-label-lg);--label-text-tracking: var(--md-sys-typescale-label-lg-tracking);--leading-icon-color: var(--md-sys-color-on-surface-variant);--leading-icon-size: 20px;--leading-space: 16px;--shape: var(--md-sys-shape-corner-xs);--supporting-text-color: var(--md-sys-color-on-surface-variant);--supporting-text: var(--md-sys-typescale-body-sm);--supporting-text-tracking: var(--md-sys-typescale-body-sm-tracking);--top-space: 8px;--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-icon-size: 20px;--trailing-space: 16px;--trailing-supporting-text
|
|
1
|
+
{"version":3,"file":"menu.cssresult.js","sourceRoot":"","sources":["menu.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,+DAA+D;AAC/D,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;CAIxB,CAAC;AACF,eAAe,MAAM,CAAC,UAAW,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n// Generated stylesheet for ./labs/gb/components/menu/menu.css.\nimport {css} from 'lit';\nexport const styles = css`/*!\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.divider;@layer md.comp.menu{.menu{--container-color: var(--md-sys-color-surface-container-low);--container-elevation: var(--md-sys-elevation-shadow-2);--container-shape: var(--md-sys-shape-corner-lg);--gap: 2px;--group-padding: 2px;--group-shape: var(--md-sys-shape-corner-sm);--section-label-text-color: var(--md-sys-color-on-surface-variant)}.menu.menu-vibrant{--container-color: var(--md-sys-color-tertiary-container);--menu-vibrant: true}.menu{flex-direction:column;box-shadow:var(--container-elevation);border-radius:var(--container-shape);background-color:var(--container-color);padding-block:var(--group-padding)}.menu:popover-open,.menu.menu-host{display:flex}.menu:popover-open,:host(:popover-open):has(.menu.menu-host){position-area:end span-end;border:none}:host(:popover-open):has(.menu.menu-host){overflow:visible;background:none;padding:0}.menu.menu-host{overflow:auto}.menu .divider,.menu ::slotted(.divider){margin:8px 16px}.menu-item{--between-space: 12px;--bottom-space: 8px;--container-color: transparent;--height: 44px;--inner-corner-corner-size: none;--label-text-color: var(--md-sys-color-on-surface);--label-text: var(--md-sys-typescale-label-lg);--label-text-axes: var(--md-sys-typescale-label-lg-axes);--label-text-tracking: var(--md-sys-typescale-label-lg-tracking);--leading-icon-color: var(--md-sys-color-on-surface-variant);--leading-icon-size: 20px;--leading-space: 16px;--shape: var(--md-sys-shape-corner-xs);--supporting-text-color: var(--md-sys-color-on-surface-variant);--supporting-text: var(--md-sys-typescale-body-sm);--supporting-text-axes: var(--md-sys-typescale-body-sm-axes);--supporting-text-tracking: var(--md-sys-typescale-body-sm-tracking);--top-space: 8px;--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-icon-size: 20px;--trailing-space: 16px;--trailing-supporting-text: var(--md-sys-typescale-label-lg);--trailing-supporting-text-axes: var(--md-sys-typescale-label-lg-axes);--trailing-supporting-text-color: var(--md-sys-color-on-surface-variant);--trailing-supporting-text-tracking: var( --md-sys-typescale-label-lg-tracking )}.menu-item:first-child{--inner-corner-corner-size: var(--md-sys-shape-corner-xs);--shape: var(--md-sys-shape-corner-md)}.menu-item:last-child{--inner-corner-corner-size: var(--md-sys-shape-corner-xs);--shape: var(--md-sys-shape-corner-md)}@container style(--menu-vibrant: true){.menu-item{--label-text-color: var(--md-sys-color-on-tertiary-container);--leading-icon-color: var(--md-sys-color-on-tertiary-container);--supporting-text-color: var(--md-sys-color-on-tertiary-container);--trailing-icon-color: var(--md-sys-color-on-tertiary-container);--trailing-supporting-text-color: var(--md-sys-color-on-tertiary-container)}.menu-item:where(:hover,.hover){--leading-icon-color: var(--md-sys-color-tertiary);--trailing-icon-color: var(--md-sys-color-tertiary)}.menu-item:where(:focus-within,.focus){--leading-icon-color: var(--md-sys-color-tertiary);--trailing-icon-color: var(--md-sys-color-tertiary)}.menu-item:where(:active,.active){--leading-icon-color: var(--md-sys-color-tertiary);--trailing-icon-color: var(--md-sys-color-tertiary)}}.menu-item:is(:checked,.checked){--container-color: var(--md-sys-color-tertiary-container);--label-text-color: var(--md-sys-color-on-tertiary-container);--leading-icon-color: var(--md-sys-color-on-tertiary-container);--shape: var(--md-sys-shape-corner-md);--supporting-text-color: var(--md-sys-color-on-tertiary-container);--trailing-icon-color: var(--md-sys-color-on-tertiary-container);--trailing-supporting-text-color: var(--md-sys-color-on-tertiary-container)}@container style(--menu-vibrant: true){.menu-item:is(:checked,.checked){--container-color: var(--md-sys-color-tertiary);--label-text-color: var(--md-sys-color-on-tertiary);--leading-icon-color: var(--md-sys-color-on-tertiary);--supporting-text-color: var(--md-sys-color-on-tertiary);--trailing-icon-color: var(--md-sys-color-on-tertiary);--trailing-supporting-text-color: var(--md-sys-color-on-tertiary)}}.menu-item:is(:disabled,.disabled){--label-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--leading-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--supporting-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--trailing-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-surface) h s l / 38% )}@container style(--menu-vibrant: true){.menu-item:is(:disabled,.disabled){--label-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--leading-icon-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--supporting-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--trailing-icon-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% )}}.menu-item:is(:disabled,.disabled):where(:checked,.checked){--container-color: hsl( from var(--md-sys-color-tertiary-container) h s l / 38% );--label-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--leading-icon-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--supporting-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--trailing-icon-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% );--trailing-supporting-text-color: hsl( from var(--md-sys-color-on-tertiary-container) h s l / 38% )}.menu-item{position:relative;isolation:isolate;display:flex;align-items:center;user-select:none;box-sizing:border-box;gap:var(--between-space);min-height:calc(var(--height) + 4px);border-radius:var(--shape);padding-block:var(--top-space) var(--bottom-space);padding-inline:var(--leading-space) var(--trailing-space);background-image:none;outline:none;color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);font-variation-settings:var(--label-text-axes)}.menu-item::before{display:flex;content:\"\";position:absolute;inset:2px 4px;z-index:-1;border-radius:inherit;background-color:var(--container-color);background-image:var(--ripple);animation:var(--ripple-animation),var(--focus-ring-animation);transition:var(--ripple-transition);outline:var(--focus-ring-outline);outline-offset:var(--focus-ring-offset)}.menu-item:not(:disabled,.disabled){cursor:pointer}.menu-item .menu-item-content{display:flex;flex-direction:column;flex:1}.menu-item .menu-item-supporting-text{color:var(--supporting-text-color);font:var(--supporting-text);letter-spacing:var(--supporting-text-tracking);font-variation-settings:var(--supporting-text-axes)}.menu-item .menu-item-trailing-text{color:var(--trailing-supporting-text-color);font:var(--trailing-supporting-text);letter-spacing:var(--trailing-supporting-text-tracking);font-variation-settings:var(--trailing-supporting-text-axes)}.menu-item .menu-item-leading,.menu-item .menu-item-trailing{display:flex;align-items:center;gap:8px}.menu-item .menu-item-leading{--md-icon-color: var(--leading-icon-color);--md-icon-size: var(--leading-icon-size)}.menu-item .menu-item-trailing{--md-icon-color: var(--trailing-icon-color);--md-icon-size: var(--trailing-icon-size)}}\n`;\nexport default styles.styleSheet!;\n"]}
|
|
@@ -112,6 +112,7 @@
|
|
|
112
112
|
color: var(--label-text-color);
|
|
113
113
|
font: var(--label-text);
|
|
114
114
|
letter-spacing: var(--label-text-tracking);
|
|
115
|
+
font-variation-settings: var(--label-text-axes);
|
|
115
116
|
}
|
|
116
117
|
|
|
117
118
|
&::before {
|
|
@@ -143,12 +144,14 @@
|
|
|
143
144
|
color: var(--supporting-text-color);
|
|
144
145
|
font: var(--supporting-text);
|
|
145
146
|
letter-spacing: var(--supporting-text-tracking);
|
|
147
|
+
font-variation-settings: var(--supporting-text-axes);
|
|
146
148
|
}
|
|
147
149
|
|
|
148
150
|
.menu-item-trailing-text {
|
|
149
151
|
color: var(--trailing-supporting-text-color);
|
|
150
152
|
font: var(--trailing-supporting-text);
|
|
151
153
|
letter-spacing: var(--trailing-supporting-text-tracking);
|
|
154
|
+
font-variation-settings: var(--trailing-supporting-text-axes);
|
|
152
155
|
}
|
|
153
156
|
|
|
154
157
|
.menu-item-leading,
|