@material/web 2.5.0 → 2.5.1-nightly.23b638c.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 +20910 -18104
- package/labs/aria/command.d.ts +18 -0
- package/labs/aria/command.js +204 -0
- package/labs/aria/command.js.map +1 -0
- package/labs/aria/menu/md-aria-menuitem.d.ts +11 -0
- package/labs/aria/menu/md-aria-menuitem.js +8 -0
- package/labs/aria/menu/md-aria-menuitem.js.map +1 -0
- package/labs/aria/menu/md-aria-menulist.d.ts +11 -0
- package/labs/aria/menu/md-aria-menulist.js +8 -0
- package/labs/aria/menu/md-aria-menulist.js.map +1 -0
- package/labs/aria/menu/menuitem.d.ts +26 -0
- package/labs/aria/menu/menuitem.js +86 -0
- package/labs/aria/menu/menuitem.js.map +1 -0
- package/labs/aria/menu/menulist.d.ts +25 -0
- package/labs/aria/menu/menulist.js +138 -0
- package/labs/aria/menu/menulist.js.map +1 -0
- 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 +54 -0
- package/labs/gb/components/appbar/app-bar-element.js +145 -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/badge/badge-element.d.ts +1 -0
- package/labs/gb/components/badge/badge-element.js +1 -0
- package/labs/gb/components/badge/badge-element.js.map +1 -1
- package/labs/gb/components/button/_button-tokens.scss +5 -1
- package/labs/gb/components/button/button-element.d.ts +2 -0
- package/labs/gb/components/button/button-element.js +2 -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/card/card-element.d.ts +1 -0
- package/labs/gb/components/card/card-element.js +1 -0
- package/labs/gb/components/card/card-element.js.map +1 -1
- package/labs/gb/components/checkbox/checkbox-element.d.ts +1 -0
- package/labs/gb/components/checkbox/checkbox-element.js +1 -0
- package/labs/gb/components/checkbox/checkbox-element.js.map +1 -1
- package/labs/gb/components/chip/_chip-tokens.scss +167 -0
- package/labs/gb/components/chip/chip-element.d.ts +74 -0
- package/labs/gb/components/chip/chip-element.js +234 -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/divider/divider-element.d.ts +1 -0
- package/labs/gb/components/divider/divider-element.js +1 -0
- package/labs/gb/components/divider/divider-element.js.map +1 -1
- package/labs/gb/components/fab/_fab-tokens.scss +4 -1
- package/labs/gb/components/fab/fab-element.d.ts +2 -0
- package/labs/gb/components/fab/fab-element.js +2 -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/iconbutton/icon-button-element.d.ts +1 -0
- package/labs/gb/components/iconbutton/icon-button-element.js +1 -0
- package/labs/gb/components/iconbutton/icon-button-element.js.map +1 -1
- package/labs/gb/components/list/_list-tokens.scss +11 -14
- package/labs/gb/components/list/list-element.d.ts +1 -0
- package/labs/gb/components/list/list-element.js +1 -0
- package/labs/gb/components/list/list-element.js.map +1 -1
- package/labs/gb/components/list/list-item-element.d.ts +5 -0
- package/labs/gb/components/list/list-item-element.js +5 -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-element.d.ts +1 -0
- package/labs/gb/components/menu/menu-element.js +1 -0
- package/labs/gb/components/menu/menu-element.js.map +1 -1
- package/labs/gb/components/menu/menu-group-element.d.ts +1 -0
- package/labs/gb/components/menu/menu-group-element.js +1 -0
- package/labs/gb/components/menu/menu-group-element.js.map +1 -1
- package/labs/gb/components/menu/menu-item-element.d.ts +5 -1
- package/labs/gb/components/menu/menu-item-element.js +5 -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/labs/gb/components/radio/radio-element.d.ts +1 -0
- package/labs/gb/components/radio/radio-element.js +1 -0
- package/labs/gb/components/radio/radio-element.js.map +1 -1
- package/labs/gb/components/splitbutton/split-button-element.d.ts +1 -0
- package/labs/gb/components/splitbutton/split-button-element.js +1 -0
- package/labs/gb/components/splitbutton/split-button-element.js.map +1 -1
- package/labs/gb/components/switch/switch-element.d.ts +1 -0
- package/labs/gb/components/switch/switch-element.js +1 -0
- package/labs/gb/components/switch/switch-element.js.map +1 -1
- package/labs/gb/styles/icon/icon-element.d.ts +1 -0
- package/labs/gb/styles/icon/icon-element.js +1 -0
- package/labs/gb/styles/icon/icon-element.js.map +1 -1
- package/package.json +1 -1
- package/types/command-event.d.ts +22 -0
- package/types/popover.d.ts +22 -0
|
@@ -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 {
|
|
@@ -151,6 +154,7 @@ export class MenuItemElement extends baseClass {
|
|
|
151
154
|
this[isFocusable] = !this.disabled;
|
|
152
155
|
}
|
|
153
156
|
}
|
|
157
|
+
/** @nocollapse */
|
|
154
158
|
MenuItemElement.styles = [
|
|
155
159
|
focusRingStyles,
|
|
156
160
|
rippleStyles,
|
|
@@ -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 /** @nocollapse */\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,
|
|
@@ -21,6 +21,7 @@ declare const radioBaseClass: import("@material/web/labs/behaviors/mixin.js").Mi
|
|
|
21
21
|
* @cssprop --state-layer-size
|
|
22
22
|
*/
|
|
23
23
|
export declare class RadioElement extends radioBaseClass {
|
|
24
|
+
/** @nocollapse */
|
|
24
25
|
static styles: CSSResultOrNative[];
|
|
25
26
|
/**
|
|
26
27
|
* Whether or not the radio is selected.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-element.js","sourceRoot":"","sources":["radio-element.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {css, CSSResultOrNative, html, isServer, LitElement} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {\n afterDispatch,\n setupDispatchHooks,\n} from '../../../../internal/events/dispatch-hooks.js';\nimport {SingleSelectionController} from '../../../../radio/internal/single-selection-controller.js';\nimport {\n createValidator,\n getValidityAnchor,\n mixinConstraintValidation,\n} from '../../../behaviors/constraint-validation.js';\nimport {\n internals,\n mixinElementInternals,\n} from '../../../behaviors/element-internals.js';\nimport {mixinFocusable} from '../../../behaviors/focusable.js';\nimport {\n getFormState,\n getFormValue,\n mixinFormAssociated,\n} from '../../../behaviors/form-associated.js';\nimport {RadioValidator} from '../../../behaviors/validators/radio-validator.js';\n\nimport focusRingStyles from '../focus/focus-ring.css' with {type: 'css'}; // github-only\n// import focusRingStyles from '../focus/focus-ring.cssresult.js'; // google3-only\nimport rippleStyles from '../ripple/ripple.css' with {type: 'css'}; // github-only\n// import rippleStyles from '../ripple/ripple.cssresult.js'; // google3-only\nimport radioStyles from './radio.css' with {type: 'css'}; // github-only\n// import {styles as radioStyles} from './radio.cssresult.js'; // google3-only\n\nimport {radio} from './radio.js';\n\n// Separate variable needed for closure.\nconst radioBaseClass = mixinConstraintValidation(\n mixinFormAssociated(mixinElementInternals(mixinFocusable(LitElement))),\n);\n\n/**\n * A Material Design radio component.\n *\n * @fires {InputEvent} input - Fired when the radio is checked (but not unchecked). --bubbles --composed\n * @fires {Event} change - Fired when the radio is checked (but not unchecked). --bubbles\n * @csspart radio - The radio's root element.\n * @cssprop --icon-color\n * @cssprop --icon-size\n * @cssprop --state-layer-color\n * @cssprop --state-layer-shape\n * @cssprop --state-layer-size\n */\nexport class RadioElement extends radioBaseClass {\n static override styles: CSSResultOrNative[] = [\n focusRingStyles,\n rippleStyles,\n radioStyles,\n css`\n :host {\n display: inline-flex;\n outline: none;\n }\n .radio {\n flex: 1;\n }\n `,\n ];\n\n /**\n * Whether or not the radio is selected.\n */\n @property({type: Boolean})\n get checked() {\n return this[internals].ariaChecked === 'true';\n }\n set checked(checked: boolean) {\n const wasChecked = this.checked;\n if (wasChecked === checked) {\n return;\n }\n\n this[internals].ariaChecked = String(checked);\n this.requestUpdate('checked', wasChecked);\n this.selectionController.handleCheckedChange();\n }\n\n /**\n * The default checked state of the radio.\n */\n get defaultChecked(): boolean {\n return this.hasAttribute('checked');\n }\n set defaultChecked(value: boolean) {\n this.toggleAttribute('checked', value || false);\n }\n\n /**\n * Whether or not the radio is required. If any radio is required in a group,\n * all radios are implicitly required.\n */\n @property({type: Boolean}) required = false;\n\n /**\n * The element value to use in form submission when checked.\n */\n @property() value = 'on';\n\n @query('.radio', true) private readonly radio!: HTMLElement;\n private readonly selectionController = new SingleSelectionController(this);\n /**\n * Mimics the behavior of <input> dirty checkedness, where the `checked`\n * attribute only updates the checked state if the radio has not been\n * interacted with.\n *\n * @see https://html.spec.whatwg.org/multipage/input.html#concept-input-checked-dirty-flag\n */\n private dirtyCheckedness = false;\n @state() private isFocused = false;\n\n constructor() {\n super();\n if (isServer) return;\n this[internals].role = 'radio';\n this.addController(this.selectionController);\n setupDispatchHooks(this, 'click', 'keydown');\n this.addEventListener('click', (event) => {\n // Return if disabled, or already checked since clicking on a checked\n // radio does not dispatch events.\n if (this.disabled || this.checked) return;\n afterDispatch(event, () => {\n if (event.defaultPrevented) return;\n // Per spec, clicking on a radio input always selects it.\n this.checked = true;\n this.dirtyCheckedness = true;\n this.dispatchEvent(new Event('change', {bubbles: true}));\n this.dispatchEvent(\n new InputEvent('input', {bubbles: true, composed: true}),\n );\n });\n });\n\n this.addEventListener('keydown', (event) => {\n afterDispatch(event, () => {\n if (event.key !== ' ' || event.defaultPrevented) {\n return;\n }\n\n this.click();\n });\n });\n\n this.addEventListener('focus', () => {\n this.isFocused = true;\n });\n\n this.addEventListener('blur', () => {\n this.isFocused = false;\n });\n }\n\n protected override render() {\n return html`<div\n part=\"radio\"\n class=\"ripple-host focus-ring-host ${radio({\n checked: this.checked,\n disabled: this.disabled,\n focus: this.isFocused,\n })}\"></div>`;\n }\n\n override attributeChangedCallback(\n name: string,\n oldValue: string | null,\n newValue: string | null,\n ) {\n if (name === 'checked' && this.dirtyCheckedness) {\n // The 'checked' attribute does not update radios that have been\n // interacted with.\n return;\n }\n\n super.attributeChangedCallback(name, oldValue, newValue);\n }\n\n override [getFormValue]() {\n return this.checked ? this.value : null;\n }\n\n override [getFormState]() {\n return String(this.checked);\n }\n\n override formResetCallback() {\n this.dirtyCheckedness = false;\n this.checked = this.defaultChecked;\n }\n\n override formStateRestoreCallback(state: string) {\n this.checked = state === 'true';\n }\n\n override [createValidator]() {\n return new RadioValidator(() => {\n if (!this.selectionController) {\n // Validation runs on superclass construction, so selection controller\n // might not actually be ready until this class constructs.\n return [this];\n }\n\n return this.selectionController.controls as [\n RadioElement,\n ...RadioElement[],\n ];\n });\n }\n\n override [getValidityAnchor]() {\n return this.radio;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"radio-element.js","sourceRoot":"","sources":["radio-element.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {css, CSSResultOrNative, html, isServer, LitElement} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {\n afterDispatch,\n setupDispatchHooks,\n} from '../../../../internal/events/dispatch-hooks.js';\nimport {SingleSelectionController} from '../../../../radio/internal/single-selection-controller.js';\nimport {\n createValidator,\n getValidityAnchor,\n mixinConstraintValidation,\n} from '../../../behaviors/constraint-validation.js';\nimport {\n internals,\n mixinElementInternals,\n} from '../../../behaviors/element-internals.js';\nimport {mixinFocusable} from '../../../behaviors/focusable.js';\nimport {\n getFormState,\n getFormValue,\n mixinFormAssociated,\n} from '../../../behaviors/form-associated.js';\nimport {RadioValidator} from '../../../behaviors/validators/radio-validator.js';\n\nimport focusRingStyles from '../focus/focus-ring.css' with {type: 'css'}; // github-only\n// import focusRingStyles from '../focus/focus-ring.cssresult.js'; // google3-only\nimport rippleStyles from '../ripple/ripple.css' with {type: 'css'}; // github-only\n// import rippleStyles from '../ripple/ripple.cssresult.js'; // google3-only\nimport radioStyles from './radio.css' with {type: 'css'}; // github-only\n// import {styles as radioStyles} from './radio.cssresult.js'; // google3-only\n\nimport {radio} from './radio.js';\n\n// Separate variable needed for closure.\nconst radioBaseClass = mixinConstraintValidation(\n mixinFormAssociated(mixinElementInternals(mixinFocusable(LitElement))),\n);\n\n/**\n * A Material Design radio component.\n *\n * @fires {InputEvent} input - Fired when the radio is checked (but not unchecked). --bubbles --composed\n * @fires {Event} change - Fired when the radio is checked (but not unchecked). --bubbles\n * @csspart radio - The radio's root element.\n * @cssprop --icon-color\n * @cssprop --icon-size\n * @cssprop --state-layer-color\n * @cssprop --state-layer-shape\n * @cssprop --state-layer-size\n */\nexport class RadioElement extends radioBaseClass {\n /** @nocollapse */\n static override styles: CSSResultOrNative[] = [\n focusRingStyles,\n rippleStyles,\n radioStyles,\n css`\n :host {\n display: inline-flex;\n outline: none;\n }\n .radio {\n flex: 1;\n }\n `,\n ];\n\n /**\n * Whether or not the radio is selected.\n */\n @property({type: Boolean})\n get checked() {\n return this[internals].ariaChecked === 'true';\n }\n set checked(checked: boolean) {\n const wasChecked = this.checked;\n if (wasChecked === checked) {\n return;\n }\n\n this[internals].ariaChecked = String(checked);\n this.requestUpdate('checked', wasChecked);\n this.selectionController.handleCheckedChange();\n }\n\n /**\n * The default checked state of the radio.\n */\n get defaultChecked(): boolean {\n return this.hasAttribute('checked');\n }\n set defaultChecked(value: boolean) {\n this.toggleAttribute('checked', value || false);\n }\n\n /**\n * Whether or not the radio is required. If any radio is required in a group,\n * all radios are implicitly required.\n */\n @property({type: Boolean}) required = false;\n\n /**\n * The element value to use in form submission when checked.\n */\n @property() value = 'on';\n\n @query('.radio', true) private readonly radio!: HTMLElement;\n private readonly selectionController = new SingleSelectionController(this);\n /**\n * Mimics the behavior of <input> dirty checkedness, where the `checked`\n * attribute only updates the checked state if the radio has not been\n * interacted with.\n *\n * @see https://html.spec.whatwg.org/multipage/input.html#concept-input-checked-dirty-flag\n */\n private dirtyCheckedness = false;\n @state() private isFocused = false;\n\n constructor() {\n super();\n if (isServer) return;\n this[internals].role = 'radio';\n this.addController(this.selectionController);\n setupDispatchHooks(this, 'click', 'keydown');\n this.addEventListener('click', (event) => {\n // Return if disabled, or already checked since clicking on a checked\n // radio does not dispatch events.\n if (this.disabled || this.checked) return;\n afterDispatch(event, () => {\n if (event.defaultPrevented) return;\n // Per spec, clicking on a radio input always selects it.\n this.checked = true;\n this.dirtyCheckedness = true;\n this.dispatchEvent(new Event('change', {bubbles: true}));\n this.dispatchEvent(\n new InputEvent('input', {bubbles: true, composed: true}),\n );\n });\n });\n\n this.addEventListener('keydown', (event) => {\n afterDispatch(event, () => {\n if (event.key !== ' ' || event.defaultPrevented) {\n return;\n }\n\n this.click();\n });\n });\n\n this.addEventListener('focus', () => {\n this.isFocused = true;\n });\n\n this.addEventListener('blur', () => {\n this.isFocused = false;\n });\n }\n\n protected override render() {\n return html`<div\n part=\"radio\"\n class=\"ripple-host focus-ring-host ${radio({\n checked: this.checked,\n disabled: this.disabled,\n focus: this.isFocused,\n })}\"></div>`;\n }\n\n override attributeChangedCallback(\n name: string,\n oldValue: string | null,\n newValue: string | null,\n ) {\n if (name === 'checked' && this.dirtyCheckedness) {\n // The 'checked' attribute does not update radios that have been\n // interacted with.\n return;\n }\n\n super.attributeChangedCallback(name, oldValue, newValue);\n }\n\n override [getFormValue]() {\n return this.checked ? this.value : null;\n }\n\n override [getFormState]() {\n return String(this.checked);\n }\n\n override formResetCallback() {\n this.dirtyCheckedness = false;\n this.checked = this.defaultChecked;\n }\n\n override formStateRestoreCallback(state: string) {\n this.checked = state === 'true';\n }\n\n override [createValidator]() {\n return new RadioValidator(() => {\n if (!this.selectionController) {\n // Validation runs on superclass construction, so selection controller\n // might not actually be ready until this class constructs.\n return [this];\n }\n\n return this.selectionController.controls as [\n RadioElement,\n ...RadioElement[],\n ];\n });\n }\n\n override [getValidityAnchor]() {\n return this.radio;\n }\n}\n"]}
|
|
@@ -22,6 +22,7 @@ import { type SplitButtonColor, type SplitButtonSize } from './split-button.js';
|
|
|
22
22
|
* @cssprop --trailing-space
|
|
23
23
|
*/
|
|
24
24
|
export declare class SplitButtonElement extends LitElement {
|
|
25
|
+
/** @nocollapse */
|
|
25
26
|
static styles: CSSResultOrNative[];
|
|
26
27
|
color: SplitButtonColor;
|
|
27
28
|
size: SplitButtonSize;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"split-button-element.js","sourceRoot":"","sources":["split-button-element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,MAAM,EAAC,MAAM,qBAAqB,CAAC;AAE3C,OAAO,eAAe,MAAM,yBAAyB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACxF,kFAAkF;AAClF,OAAO,YAAY,MAAM,sBAAsB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAClF,4EAA4E;AAC5E,OAAO,YAAY,MAAM,sBAAsB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAClF,4EAA4E;AAC5E,OAAO,iBAAiB,MAAM,oBAAoB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACrF,2FAA2F;AAE3F,OAAO,EACL,WAAW,GAGZ,MAAM,mBAAmB,CAAC;AAE3B;;;;;;;;;;;;;;;GAeG;AACH,MAAM,OAAO,kBAAmB,SAAQ,UAAU;IAAlD;;
|
|
1
|
+
{"version":3,"file":"split-button-element.js","sourceRoot":"","sources":["split-button-element.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {css, CSSResultOrNative, html, LitElement} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {button} from '../button/button.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 buttonStyles from '../button/button.css' with {type: 'css'}; // github-only\n// import buttonStyles from '../button/button.cssresult.js'; // google3-only\nimport splitButtonStyles from './split-button.css' with {type: 'css'}; // github-only\n// import {styles as splitButtonStyles} from './split-button.cssresult.js'; // google3-only\n\nimport {\n splitButton,\n type SplitButtonColor,\n type SplitButtonSize,\n} from './split-button.js';\n\n/**\n * A Material Design split button component.\n *\n * @slot leading - Requires a `<button>` for the main action.\n * @slot trailing - Requires a `<button>` for the menu action. Use `popovertarget` to display a menu.\n * @slot - Used to render the trailing button's popover menu.\n * @csspart split-btn - The split button's root element.\n * @csspart leading-btn - The split button's main action.\n * @csspart trailing-btn - The split button's menu action.\n * @cssprop --between-space\n * @cssprop --icon-size\n * @cssprop --inner-corner-size\n * @cssprop --outer-corner-size\n * @cssprop --leading-space\n * @cssprop --trailing-space\n */\nexport class SplitButtonElement extends LitElement {\n /** @nocollapse */\n static override styles: CSSResultOrNative[] = [\n focusRingStyles,\n rippleStyles,\n buttonStyles,\n splitButtonStyles,\n css`\n :host {\n display: inline-flex;\n }\n .split-btn {\n flex: 1;\n }\n [name='leading'] {\n display: contents;\n &::slotted(button) {\n all: inherit;\n display: flex;\n }\n }\n [name='trailing'] {\n position: relative;\n &::slotted(button) {\n position: absolute;\n inset: 0;\n appearance: none;\n background: none;\n border: none;\n outline: none;\n }\n }\n `,\n ];\n\n @property() color: SplitButtonColor = 'filled';\n @property() size: SplitButtonSize = 'sm';\n @property({type: Boolean}) selected = false;\n\n protected override render() {\n const buttonConfig = {\n color: this.color,\n size: this.size,\n };\n\n return html`<div part=\"split-btn\" class=\"${splitButton(this)}\">\n <slot\n name=\"leading\"\n part=\"leading-btn\"\n class=\"${button(buttonConfig)}\"\n @focusin=${this.updateSlotFocusVisible}\n @focusout=${this.updateSlotFocusVisible}>\n </slot>\n <slot\n name=\"trailing\"\n part=\"trailing-btn\"\n class=\"${button(buttonConfig)}\"\n @focusin=${this.updateSlotFocusVisible}\n @focusout=${this.updateSlotFocusVisible}\n @slotchange=${this.handleTrailingSlotchange}>\n </slot>\n <slot></slot>\n </div>`;\n }\n\n private updateSlotFocusVisible(event: Event) {\n const slot = event.currentTarget as HTMLSlotElement;\n const hasFocusVisible = slot\n .assignedElements()\n .some((el) => el.matches(':focus-visible,:has(:focus-visible)'));\n slot.classList.toggle('focus-visible', hasFocusVisible);\n }\n\n private cleanupToggleListener?: AbortController;\n private handleTrailingSlotchange(event: Event) {\n this.cleanupToggleListener?.abort();\n this.cleanupToggleListener = new AbortController();\n const slot = event.target as HTMLSlotElement;\n const trailingButton = slot\n .assignedElements()\n .find((el): el is HTMLButtonElement => el.matches('button'));\n if (!trailingButton?.popoverTargetElement) return;\n trailingButton.popoverTargetElement.addEventListener(\n 'toggle',\n (event: Event) => {\n this.selected = (event as ToggleEvent).newState === 'open';\n },\n {signal: this.cleanupToggleListener.signal},\n );\n }\n}\n"]}
|
|
@@ -32,6 +32,7 @@ declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinRe
|
|
|
32
32
|
export declare class SwitchElement extends baseClass {
|
|
33
33
|
/** @nocollapse */
|
|
34
34
|
static shadowRootOptions: ShadowRootInit;
|
|
35
|
+
/** @nocollapse */
|
|
35
36
|
static styles: CSSResultOrNative[];
|
|
36
37
|
/**
|
|
37
38
|
* Puts the switch in the selected state and sets the form submission value to
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch-element.js","sourceRoot":"","sources":["switch-element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AACtE,OAAO,EAAC,QAAQ,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAC,kBAAkB,EAAC,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAC,eAAe,EAAC,MAAM,iDAAiD,CAAC;AAChF,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,yBAAyB,GAC1B,MAAM,6CAA6C,CAAC;AACrD,OAAO,EACL,QAAQ,EACR,mBAAmB,EACnB,WAAW,GACZ,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAC,qBAAqB,EAAC,MAAM,yCAAyC,CAAC;AAC9E,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,mBAAmB,GACpB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAC,iBAAiB,EAAC,MAAM,qDAAqD,CAAC;AACtF,OAAO,EAAC,UAAU,EAAC,MAAM,0BAA0B,CAAC;AAEpD,OAAO,eAAe,MAAM,yBAAyB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACxF,kFAAkF;AAClF,OAAO,YAAY,MAAM,sBAAsB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAClF,4EAA4E;AAC5E,OAAO,YAAY,MAAM,cAAc,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAC1E,oEAAoE;AAEpE,OAAO,EAAC,YAAY,EAAC,MAAM,aAAa,CAAC;AAEzC,wCAAwC;AACxC,MAAM,SAAS,GAAG,kBAAkB,CAClC,yBAAyB,CACvB,mBAAmB,CAAC,mBAAmB,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC,CAAC,CAC5E,CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,OAAO,aAAc,SAAQ,SAAS;IAA5C;;
|
|
1
|
+
{"version":3,"file":"switch-element.js","sourceRoot":"","sources":["switch-element.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {css, CSSResultOrNative, html, LitElement, nothing} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {ARIAMixinStrict} from '../../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../../internal/aria/delegate.js';\nimport {redispatchEvent} from '../../../../internal/events/redispatch-event.js';\nimport {\n createValidator,\n getValidityAnchor,\n mixinConstraintValidation,\n} from '../../../behaviors/constraint-validation.js';\nimport {\n hasState,\n mixinCustomStateSet,\n toggleState,\n} from '../../../behaviors/custom-state-set.js';\nimport {mixinElementInternals} from '../../../behaviors/element-internals.js';\nimport {\n getFormState,\n getFormValue,\n mixinFormAssociated,\n} from '../../../behaviors/form-associated.js';\nimport {CheckboxValidator} from '../../../behaviors/validators/checkbox-validator.js';\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 switchStyles from './switch.css' with {type: 'css'}; // github-only\n// import switchStyles from './switch.cssresult.js'; // google3-only\n\nimport {switchToggle} from './switch.js';\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(\n mixinConstraintValidation(\n mixinFormAssociated(mixinCustomStateSet(mixinElementInternals(LitElement))),\n ),\n);\n\n/**\n * A Material Design switch component.\n *\n * @slot off-icon - Used to show an icon when the switch is unselected.\n * @slot on-icon - Used to show an icon when the switch is selected.\n * @fires {InputEvent} input - Fired when the switch is selected or unselected. --bubbles --composed\n * @fires {Event} change - Fired when the switch is selected or unselected. --bubbles\n * @csspart switch - The switch's root element.\n * @cssprop --handle-color\n * @cssprop --handle-size\n * @cssprop --with-icon-handle-size\n * @cssprop --icon-color\n * @cssprop --icon-size\n * @cssprop --state-layer-color\n * @cssprop --state-layer-size\n * @cssprop --track-color\n * @cssprop --track-height\n * @cssprop --track-outline-color\n * @cssprop --track-outline-width\n * @cssprop --track-width\n */\nexport class SwitchElement extends baseClass {\n /** @nocollapse */\n static override shadowRootOptions: ShadowRootInit = {\n mode: 'open',\n delegatesFocus: true,\n };\n\n /** @nocollapse */\n static override styles: CSSResultOrNative[] = [\n focusRingStyles,\n rippleStyles,\n switchStyles,\n css`\n :host {\n display: inline-flex;\n }\n .switch {\n flex: 1;\n }\n ::slotted(*) {\n grid-area: handle;\n }\n `,\n ];\n\n /**\n * Puts the switch in the selected state and sets the form submission value to\n * the `value` property.\n */\n @property({type: Boolean})\n get selected() {\n return this[hasState]('selected');\n }\n set selected(value: boolean) {\n this[toggleState]('selected', value);\n }\n\n /**\n * The default selected state of the switch.\n */\n get defaultSelected(): boolean {\n return this.hasAttribute('selected');\n }\n set defaultSelected(value: boolean) {\n this.toggleAttribute('selected', value || false);\n }\n\n /**\n * When true, require the switch to be selected when participating in\n * form submission.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation\n */\n @property({type: Boolean}) required = false;\n\n /**\n * The value associated with this switch on form submission. `null` is\n * submitted when `selected` is `false`.\n */\n @property() value = 'on';\n\n @query('button', true)\n private readonly button!: HTMLButtonElement | null;\n\n /**\n * Mimics the behavior of <input> dirty checkedness, where the `checked`\n * attribute only updates the checked state if the checkbox has not been\n * interacted with.\n *\n * @see https://html.spec.whatwg.org/multipage/input.html#concept-input-checked-dirty-flag\n */\n private dirtyCheckedness = false;\n\n protected override render() {\n const {ariaLabel} = this as ARIAMixinStrict;\n return html`\n <button\n role=\"switch\"\n part=\"switch\"\n class=\"${switchToggle()}\"\n aria-checked=\"${this.selected ? 'true' : 'false'}\"\n aria-label=${ariaLabel || nothing}\n ?disabled=${this.disabled}\n @change=${this.handleChange}>\n <slot name=\"off-icon\" class=\"switch-icon-off\" ${hasSlotted()}></slot>\n <slot name=\"on-icon\" class=\"switch-icon-on\"></slot>\n </button>\n `;\n }\n\n private handleChange(event: Event) {\n this.dirtyCheckedness = true;\n this.selected = this.button?.ariaChecked === 'true';\n // Change event is not composed, re-dispatch it.\n redispatchEvent(this, event);\n }\n\n override attributeChangedCallback(\n name: string,\n oldValue: string | null,\n newValue: string | null,\n ) {\n if (name === 'selected' && this.dirtyCheckedness) {\n // The 'selected' attribute does not update switches that have been\n // interacted with.\n return;\n }\n\n super.attributeChangedCallback(name, oldValue, newValue);\n }\n\n override [getFormValue]() {\n return this.selected ? this.value : null;\n }\n\n override [getFormState]() {\n return String(this.selected);\n }\n\n override formResetCallback() {\n this.dirtyCheckedness = false;\n this.selected = this.defaultSelected;\n }\n\n override formStateRestoreCallback(state: string) {\n this.selected = state === 'true';\n }\n\n override [createValidator]() {\n return new CheckboxValidator(() => ({\n checked: this.selected,\n required: this.required,\n }));\n }\n\n override [getValidityAnchor]() {\n return this.button;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon-element.js","sourceRoot":"","sources":["icon-element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAC,IAAI,IAAI,QAAQ,EAAC,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAC,WAAW,EAAC,MAAM,oBAAoB,CAAC;AAE/C,OAAO,UAAU,MAAM,eAAe,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACzE,mEAAmE;AAEnE;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,QAAQ;
|
|
1
|
+
{"version":3,"file":"icon-element.js","sourceRoot":"","sources":["icon-element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAC,IAAI,IAAI,QAAQ,EAAC,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAC,WAAW,EAAC,MAAM,oBAAoB,CAAC;AAE/C,OAAO,UAAU,MAAM,eAAe,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACzE,mEAAmE;AAEnE;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,QAAQ;IAI9B,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,4EAA4E;QAC5E,WAAW,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;QAC9B,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IAChC,CAAC;;AARD,kBAAkB;AACF,kBAAM,GAAwB,CAAC,UAAU,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {type CSSResultOrNative} from 'lit';\nimport {Icon as IconBase} from '../../../../icon/internal/icon.js';\nimport {adoptStyles} from '../adopt-styles.js';\n\nimport iconStyles from './md-icon.css' with {type: 'css'}; // github-only\n// import iconStyles from './md-icon.cssresult.js'; // google3-only\n\n/**\n * A Material Design icon component.\n */\nexport class IconElement extends IconBase {\n /** @nocollapse */\n static override styles: CSSResultOrNative[] = [iconStyles];\n\n override connectedCallback() {\n super.connectedCallback();\n // Adopt stylesheet to ensure global CSS @property variables are registered.\n adoptStyles(this, iconStyles);\n this.classList.add('md-icon');\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2026 Google LLC
|
|
4
|
+
* SPDX-License-Identifier: Apache-2.0
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
interface CommandEventInit extends EventInit {
|
|
8
|
+
source?: Element;
|
|
9
|
+
command: string;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
interface CommandEvent extends Event {
|
|
13
|
+
new (type: string, init: CommandEventInit): CommandEvent;
|
|
14
|
+
source?: Element;
|
|
15
|
+
command: string;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
interface HTMLElementEventMap {
|
|
19
|
+
command: CommandEvent;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
declare let CommandEvent: CommandEvent;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2026 Google LLC
|
|
4
|
+
* SPDX-License-Identifier: Apache-2.0
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
interface ShowPopoverOptions {
|
|
8
|
+
source?: HTMLElement;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
interface TogglePopoverOptions extends ShowPopoverOptions {
|
|
12
|
+
force?: boolean;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
interface HTMLElement {
|
|
16
|
+
showPopover(options?: ShowPopoverOptions | boolean): void;
|
|
17
|
+
togglePopover(options?: TogglePopoverOptions | boolean): boolean;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
interface ToggleEvent {
|
|
21
|
+
source: Element | null;
|
|
22
|
+
}
|