@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.
Files changed (144) hide show
  1. package/custom-elements.json +20910 -18104
  2. package/labs/aria/command.d.ts +18 -0
  3. package/labs/aria/command.js +204 -0
  4. package/labs/aria/command.js.map +1 -0
  5. package/labs/aria/menu/md-aria-menuitem.d.ts +11 -0
  6. package/labs/aria/menu/md-aria-menuitem.js +8 -0
  7. package/labs/aria/menu/md-aria-menuitem.js.map +1 -0
  8. package/labs/aria/menu/md-aria-menulist.d.ts +11 -0
  9. package/labs/aria/menu/md-aria-menulist.js +8 -0
  10. package/labs/aria/menu/md-aria-menulist.js.map +1 -0
  11. package/labs/aria/menu/menuitem.d.ts +26 -0
  12. package/labs/aria/menu/menuitem.js +86 -0
  13. package/labs/aria/menu/menuitem.js.map +1 -0
  14. package/labs/aria/menu/menulist.d.ts +25 -0
  15. package/labs/aria/menu/menulist.js +138 -0
  16. package/labs/aria/menu/menulist.js.map +1 -0
  17. package/labs/aria/query-associated.d.ts +23 -0
  18. package/labs/aria/query-associated.js +36 -0
  19. package/labs/aria/query-associated.js.map +1 -0
  20. package/labs/aria/tabs/md-aria-tab.d.ts +11 -0
  21. package/labs/aria/tabs/md-aria-tab.js +8 -0
  22. package/labs/aria/tabs/md-aria-tab.js.map +1 -0
  23. package/labs/aria/tabs/md-aria-tablist.d.ts +11 -0
  24. package/labs/aria/tabs/md-aria-tablist.js +8 -0
  25. package/labs/aria/tabs/md-aria-tablist.js.map +1 -0
  26. package/labs/aria/tabs/md-aria-tabpanel.d.ts +11 -0
  27. package/labs/aria/tabs/md-aria-tabpanel.js +8 -0
  28. package/labs/aria/tabs/md-aria-tabpanel.js.map +1 -0
  29. package/labs/aria/tabs/tab.d.ts +33 -0
  30. package/labs/aria/tabs/tab.js +88 -0
  31. package/labs/aria/tabs/tab.js.map +1 -0
  32. package/labs/aria/tabs/tablist.d.ts +67 -0
  33. package/labs/aria/tabs/tablist.js +271 -0
  34. package/labs/aria/tabs/tablist.js.map +1 -0
  35. package/labs/aria/tabs/tabpanel.d.ts +26 -0
  36. package/labs/aria/tabs/tabpanel.js +53 -0
  37. package/labs/aria/tabs/tabpanel.js.map +1 -0
  38. package/labs/gb/components/appbar/_app-bar-tokens.scss +136 -0
  39. package/labs/gb/components/appbar/app-bar-element.d.ts +54 -0
  40. package/labs/gb/components/appbar/app-bar-element.js +145 -0
  41. package/labs/gb/components/appbar/app-bar-element.js.map +1 -0
  42. package/labs/gb/components/appbar/app-bar.css +4 -0
  43. package/labs/gb/components/appbar/app-bar.css.map +1 -0
  44. package/labs/gb/components/appbar/app-bar.cssresult.d.ts +3 -0
  45. package/labs/gb/components/appbar/app-bar.cssresult.js +14 -0
  46. package/labs/gb/components/appbar/app-bar.cssresult.js.map +1 -0
  47. package/labs/gb/components/appbar/app-bar.d.ts +71 -0
  48. package/labs/gb/components/appbar/app-bar.js +96 -0
  49. package/labs/gb/components/appbar/app-bar.js.map +1 -0
  50. package/labs/gb/components/appbar/app-bar.scss +167 -0
  51. package/labs/gb/components/appbar/md-gb-app-bar.d.ts +12 -0
  52. package/labs/gb/components/appbar/md-gb-app-bar.js +8 -0
  53. package/labs/gb/components/appbar/md-gb-app-bar.js.map +1 -0
  54. package/labs/gb/components/badge/badge-element.d.ts +1 -0
  55. package/labs/gb/components/badge/badge-element.js +1 -0
  56. package/labs/gb/components/badge/badge-element.js.map +1 -1
  57. package/labs/gb/components/button/_button-tokens.scss +5 -1
  58. package/labs/gb/components/button/button-element.d.ts +2 -0
  59. package/labs/gb/components/button/button-element.js +2 -0
  60. package/labs/gb/components/button/button-element.js.map +1 -1
  61. package/labs/gb/components/button/button.css +1 -1
  62. package/labs/gb/components/button/button.css.map +1 -1
  63. package/labs/gb/components/button/button.cssresult.js +1 -1
  64. package/labs/gb/components/button/button.cssresult.js.map +1 -1
  65. package/labs/gb/components/button/button.scss +1 -0
  66. package/labs/gb/components/card/card-element.d.ts +1 -0
  67. package/labs/gb/components/card/card-element.js +1 -0
  68. package/labs/gb/components/card/card-element.js.map +1 -1
  69. package/labs/gb/components/checkbox/checkbox-element.d.ts +1 -0
  70. package/labs/gb/components/checkbox/checkbox-element.js +1 -0
  71. package/labs/gb/components/checkbox/checkbox-element.js.map +1 -1
  72. package/labs/gb/components/chip/_chip-tokens.scss +167 -0
  73. package/labs/gb/components/chip/chip-element.d.ts +74 -0
  74. package/labs/gb/components/chip/chip-element.js +234 -0
  75. package/labs/gb/components/chip/chip-element.js.map +1 -0
  76. package/labs/gb/components/chip/chip.css +4 -0
  77. package/labs/gb/components/chip/chip.css.map +1 -0
  78. package/labs/gb/components/chip/chip.cssresult.d.ts +3 -0
  79. package/labs/gb/components/chip/chip.cssresult.js +14 -0
  80. package/labs/gb/components/chip/chip.cssresult.js.map +1 -0
  81. package/labs/gb/components/chip/chip.d.ts +77 -0
  82. package/labs/gb/components/chip/chip.js +99 -0
  83. package/labs/gb/components/chip/chip.js.map +1 -0
  84. package/labs/gb/components/chip/chip.scss +99 -0
  85. package/labs/gb/components/chip/md-gb-chip.d.ts +13 -0
  86. package/labs/gb/components/chip/md-gb-chip.js +9 -0
  87. package/labs/gb/components/chip/md-gb-chip.js.map +1 -0
  88. package/labs/gb/components/divider/divider-element.d.ts +1 -0
  89. package/labs/gb/components/divider/divider-element.js +1 -0
  90. package/labs/gb/components/divider/divider-element.js.map +1 -1
  91. package/labs/gb/components/fab/_fab-tokens.scss +4 -1
  92. package/labs/gb/components/fab/fab-element.d.ts +2 -0
  93. package/labs/gb/components/fab/fab-element.js +2 -0
  94. package/labs/gb/components/fab/fab-element.js.map +1 -1
  95. package/labs/gb/components/fab/fab.css +1 -1
  96. package/labs/gb/components/fab/fab.css.map +1 -1
  97. package/labs/gb/components/fab/fab.cssresult.js +1 -1
  98. package/labs/gb/components/fab/fab.cssresult.js.map +1 -1
  99. package/labs/gb/components/fab/fab.scss +1 -0
  100. package/labs/gb/components/iconbutton/icon-button-element.d.ts +1 -0
  101. package/labs/gb/components/iconbutton/icon-button-element.js +1 -0
  102. package/labs/gb/components/iconbutton/icon-button-element.js.map +1 -1
  103. package/labs/gb/components/list/_list-tokens.scss +11 -14
  104. package/labs/gb/components/list/list-element.d.ts +1 -0
  105. package/labs/gb/components/list/list-element.js +1 -0
  106. package/labs/gb/components/list/list-element.js.map +1 -1
  107. package/labs/gb/components/list/list-item-element.d.ts +5 -0
  108. package/labs/gb/components/list/list-item-element.js +5 -0
  109. package/labs/gb/components/list/list-item-element.js.map +1 -1
  110. package/labs/gb/components/list/list.css +1 -1
  111. package/labs/gb/components/list/list.css.map +1 -1
  112. package/labs/gb/components/list/list.cssresult.js +1 -1
  113. package/labs/gb/components/list/list.cssresult.js.map +1 -1
  114. package/labs/gb/components/list/list.scss +5 -0
  115. package/labs/gb/components/menu/_menu-tokens.scss +45 -16
  116. package/labs/gb/components/menu/menu-element.d.ts +1 -0
  117. package/labs/gb/components/menu/menu-element.js +1 -0
  118. package/labs/gb/components/menu/menu-element.js.map +1 -1
  119. package/labs/gb/components/menu/menu-group-element.d.ts +1 -0
  120. package/labs/gb/components/menu/menu-group-element.js +1 -0
  121. package/labs/gb/components/menu/menu-group-element.js.map +1 -1
  122. package/labs/gb/components/menu/menu-item-element.d.ts +5 -1
  123. package/labs/gb/components/menu/menu-item-element.js +5 -1
  124. package/labs/gb/components/menu/menu-item-element.js.map +1 -1
  125. package/labs/gb/components/menu/menu.css +1 -1
  126. package/labs/gb/components/menu/menu.css.map +1 -1
  127. package/labs/gb/components/menu/menu.cssresult.js +1 -1
  128. package/labs/gb/components/menu/menu.cssresult.js.map +1 -1
  129. package/labs/gb/components/menu/menu.scss +3 -0
  130. package/labs/gb/components/radio/radio-element.d.ts +1 -0
  131. package/labs/gb/components/radio/radio-element.js +1 -0
  132. package/labs/gb/components/radio/radio-element.js.map +1 -1
  133. package/labs/gb/components/splitbutton/split-button-element.d.ts +1 -0
  134. package/labs/gb/components/splitbutton/split-button-element.js +1 -0
  135. package/labs/gb/components/splitbutton/split-button-element.js.map +1 -1
  136. package/labs/gb/components/switch/switch-element.d.ts +1 -0
  137. package/labs/gb/components/switch/switch-element.js +1 -0
  138. package/labs/gb/components/switch/switch-element.js.map +1 -1
  139. package/labs/gb/styles/icon/icon-element.d.ts +1 -0
  140. package/labs/gb/styles/icon/icon-element.js +1 -0
  141. package/labs/gb/styles/icon/icon-element.js.map +1 -1
  142. package/package.json +1 -1
  143. package/types/command-event.d.ts +22 -0
  144. 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-color: var(--md-sys-color-on-surface-variant);--trailing-supporting-text: var(--md-sys-typescale-label-lg);--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)}.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)}.menu-item .menu-item-trailing-text{color:var(--trailing-supporting-text-color);font:var(--trailing-supporting-text);letter-spacing:var(--trailing-supporting-text-tracking)}.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 */
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,6DACA,+EDOE,uBCFF,0DACA,uCDIE,gFCCF,uCDEE,uCACE,WCCJ,8DACA,gEACA,mEACA,iEACA,4EDFI,gCCMJ,mDACA,oDDJI,uCCQJ,mDACA,oDDNI,kCCUJ,mDACA,qDDNE,iCCUF,0DACA,8DACA,gEACA,uCACA,mEACA,iEACA,4EDdI,uCAFF,iCCoBF,gDACA,oDACA,sDACA,yDACA,uDACA,mEDlBE,mCCsBF,yEACA,2EACA,8EACA,4EACA,uFDxBI,uCAFF,mCC8BF,oFACA,sFACA,yFACA,uFACA,mGD7BI,4DCiCJ,gFACA,oFACA,sFACA,yFACA,uFACA,kGDjCE,WACE,kBACA,kBACA,aACA,mBACA,iBACA,sBACA,yBACA,qCACA,2BACA,mDACA,0DACA,sBACA,aACA,8BACA,uBACA,0CAGF,mBACE,aACA,WACA,kBACA,cACA,WACA,sBACA,wCACA,+BACA,8DACA,oCACA,kCACA,wCAGF,oCACE,eAGF,8BACE,aACA,sBACA,OAGF,sCACE,mCACA,4BACA,+CAGF,oCACE,4CACA,qCACA,wDAGF,6DAEE,aACA,mBACA,QAGF,8BACE,2CACA,yCAGF,+BACE,4CACA","file":"menu.css"}
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-color: var(--md-sys-color-on-surface-variant);--trailing-supporting-text: var(--md-sys-typescale-label-lg);--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)}.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)}.menu-item .menu-item-trailing-text{color:var(--trailing-supporting-text-color);font:var(--trailing-supporting-text);letter-spacing:var(--trailing-supporting-text-tracking)}.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)}}
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-color: var(--md-sys-color-on-surface-variant);--trailing-supporting-text: var(--md-sys-typescale-label-lg);--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)}.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)}.menu-item .menu-item-trailing-text{color:var(--trailing-supporting-text-color);font:var(--trailing-supporting-text);letter-spacing:var(--trailing-supporting-text-tracking)}.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"]}
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.
@@ -159,6 +159,7 @@ export class RadioElement extends radioBaseClass {
159
159
  return this.radio;
160
160
  }
161
161
  }
162
+ /** @nocollapse */
162
163
  RadioElement.styles = [
163
164
  focusRingStyles,
164
165
  rippleStyles,
@@ -1 +1 @@
1
- {"version":3,"file":"radio-element.js","sourceRoot":"","sources":["radio-element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AACvE,OAAO,EAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACzD,OAAO,EACL,aAAa,EACb,kBAAkB,GACnB,MAAM,+CAA+C,CAAC;AACvD,OAAO,EAAC,yBAAyB,EAAC,MAAM,2DAA2D,CAAC;AACpG,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,yBAAyB,GAC1B,MAAM,6CAA6C,CAAC;AACrD,OAAO,EACL,SAAS,EACT,qBAAqB,GACtB,MAAM,yCAAyC,CAAC;AACjD,OAAO,EAAC,cAAc,EAAC,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,mBAAmB,GACpB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAC,cAAc,EAAC,MAAM,kDAAkD,CAAC;AAEhF,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,WAAW,MAAM,aAAa,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACxE,8EAA8E;AAE9E,OAAO,EAAC,KAAK,EAAC,MAAM,YAAY,CAAC;AAEjC,wCAAwC;AACxC,MAAM,cAAc,GAAG,yBAAyB,CAC9C,mBAAmB,CAAC,qBAAqB,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC,CACvE,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,MAAM,OAAO,YAAa,SAAQ,cAAc;IAgB9C;;OAEG;IAEH,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,WAAW,KAAK,MAAM,CAAC;IAChD,CAAC;IACD,IAAI,OAAO,CAAC,OAAgB;QAC1B,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC;QAChC,IAAI,UAAU,KAAK,OAAO,EAAE,CAAC;YAC3B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,SAAS,CAAC,CAAC,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;QAC9C,IAAI,CAAC,aAAa,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;QAC1C,IAAI,CAAC,mBAAmB,CAAC,mBAAmB,EAAE,CAAC;IACjD,CAAC;IAED;;OAEG;IACH,IAAI,cAAc;QAChB,OAAO,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACtC,CAAC;IACD,IAAI,cAAc,CAAC,KAAc;QAC/B,IAAI,CAAC,eAAe,CAAC,SAAS,EAAE,KAAK,IAAI,KAAK,CAAC,CAAC;IAClD,CAAC;IAyBD;QACE,KAAK,EAAE,CAAC;QAxBV;;;WAGG;QACwB,aAAQ,GAAG,KAAK,CAAC;QAE5C;;WAEG;QACS,UAAK,GAAG,IAAI,CAAC;QAGR,wBAAmB,GAAG,IAAI,yBAAyB,CAAC,IAAI,CAAC,CAAC;QAC3E;;;;;;WAMG;QACK,qBAAgB,GAAG,KAAK,CAAC;QAChB,cAAS,GAAG,KAAK,CAAC;QAIjC,IAAI,QAAQ;YAAE,OAAO;QACrB,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,GAAG,OAAO,CAAC;QAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;QAC7C,kBAAkB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC;QAC7C,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACvC,qEAAqE;YACrE,kCAAkC;YAClC,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;gBAAE,OAAO;YAC1C,aAAa,CAAC,KAAK,EAAE,GAAG,EAAE;gBACxB,IAAI,KAAK,CAAC,gBAAgB;oBAAE,OAAO;gBACnC,yDAAyD;gBACzD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;gBACpB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;gBAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;gBACzD,IAAI,CAAC,aAAa,CAChB,IAAI,UAAU,CAAC,OAAO,EAAE,EAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CACzD,CAAC;YACJ,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;YACzC,aAAa,CAAC,KAAK,EAAE,GAAG,EAAE;gBACxB,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,gBAAgB,EAAE,CAAC;oBAChD,OAAO;gBACT,CAAC;gBAED,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;YAClC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACxB,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE;YACjC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC,CAAC,CAAC;IACL,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;2CAE4B,KAAK,CAAC;YACzC,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,KAAK,EAAE,IAAI,CAAC,SAAS;SACtB,CAAC,UAAU,CAAC;IACjB,CAAC;IAEQ,wBAAwB,CAC/B,IAAY,EACZ,QAAuB,EACvB,QAAuB;QAEvB,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAChD,gEAAgE;YAChE,mBAAmB;YACnB,OAAO;QACT,CAAC;QAED,KAAK,CAAC,wBAAwB,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC3D,CAAC;IAEQ,CAAC,YAAY,CAAC;QACrB,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAC1C,CAAC;IAEQ,CAAC,YAAY,CAAC;QACrB,OAAO,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC;IAEQ,iBAAiB;QACxB,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;QAC9B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;IACrC,CAAC;IAEQ,wBAAwB,CAAC,KAAa;QAC7C,IAAI,CAAC,OAAO,GAAG,KAAK,KAAK,MAAM,CAAC;IAClC,CAAC;IAEQ,CAAC,eAAe,CAAC;QACxB,OAAO,IAAI,cAAc,CAAC,GAAG,EAAE;YAC7B,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;gBAC9B,sEAAsE;gBACtE,2DAA2D;gBAC3D,OAAO,CAAC,IAAI,CAAC,CAAC;YAChB,CAAC;YAED,OAAO,IAAI,CAAC,mBAAmB,CAAC,QAG/B,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;IAEQ,CAAC,iBAAiB,CAAC;QAC1B,OAAO,IAAI,CAAC,KAAK,CAAC;IACpB,CAAC;;AArKe,mBAAM,GAAwB;IAC5C,eAAe;IACf,YAAY;IACZ,WAAW;IACX,GAAG,CAAA;;;;;;;;KAQF;CACF,AAbqB,CAapB;AAMF;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;2CAGzB;AA0B0B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;8CAAkB;AAKhC;IAAX,QAAQ,EAAE;2CAAc;AAEe;IAAvC,KAAK,CAAC,QAAQ,EAAE,IAAI,CAAC;2CAAsC;AAU3C;IAAhB,KAAK,EAAE;+CAA2B","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;
@@ -84,6 +84,7 @@ export class SplitButtonElement extends LitElement {
84
84
  }, { signal: this.cleanupToggleListener.signal });
85
85
  }
86
86
  }
87
+ /** @nocollapse */
87
88
  SplitButtonElement.styles = [
88
89
  focusRingStyles,
89
90
  rippleStyles,
@@ -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;;QAkCc,UAAK,GAAqB,QAAQ,CAAC;QACnC,SAAI,GAAoB,IAAI,CAAC;QACd,aAAQ,GAAG,KAAK,CAAC;IAqD9C,CAAC;IAnDoB,MAAM;QACvB,MAAM,YAAY,GAAG;YACnB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC;QAEF,OAAO,IAAI,CAAA,gCAAgC,WAAW,CAAC,IAAI,CAAC;;;;iBAI/C,MAAM,CAAC,YAAY,CAAC;mBAClB,IAAI,CAAC,sBAAsB;oBAC1B,IAAI,CAAC,sBAAsB;;;;;iBAK9B,MAAM,CAAC,YAAY,CAAC;mBAClB,IAAI,CAAC,sBAAsB;oBAC1B,IAAI,CAAC,sBAAsB;sBACzB,IAAI,CAAC,wBAAwB;;;WAGxC,CAAC;IACV,CAAC;IAEO,sBAAsB,CAAC,KAAY;QACzC,MAAM,IAAI,GAAG,KAAK,CAAC,aAAgC,CAAC;QACpD,MAAM,eAAe,GAAG,IAAI;aACzB,gBAAgB,EAAE;aAClB,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,OAAO,CAAC,qCAAqC,CAAC,CAAC,CAAC;QACnE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC;IAC1D,CAAC;IAGO,wBAAwB,CAAC,KAAY;QAC3C,IAAI,CAAC,qBAAqB,EAAE,KAAK,EAAE,CAAC;QACpC,IAAI,CAAC,qBAAqB,GAAG,IAAI,eAAe,EAAE,CAAC;QACnD,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;QAC7C,MAAM,cAAc,GAAG,IAAI;aACxB,gBAAgB,EAAE;aAClB,IAAI,CAAC,CAAC,EAAE,EAA2B,EAAE,CAAC,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC/D,IAAI,CAAC,cAAc,EAAE,oBAAoB;YAAE,OAAO;QAClD,cAAc,CAAC,oBAAoB,CAAC,gBAAgB,CAClD,QAAQ,EACR,CAAC,KAAY,EAAE,EAAE;YACf,IAAI,CAAC,QAAQ,GAAI,KAAqB,CAAC,QAAQ,KAAK,MAAM,CAAC;QAC7D,CAAC,EACD,EAAC,MAAM,EAAE,IAAI,CAAC,qBAAqB,CAAC,MAAM,EAAC,CAC5C,CAAC;IACJ,CAAC;;AAvFe,yBAAM,GAAwB;IAC5C,eAAe;IACf,YAAY;IACZ,YAAY;IACZ,iBAAiB;IACjB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;KAyBF;CACF,AA/BqB,CA+BpB;AAEU;IAAX,QAAQ,EAAE;iDAAoC;AACnC;IAAX,QAAQ,EAAE;gDAA8B;AACd;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;oDAAkB","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 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"]}
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
@@ -145,6 +145,7 @@ SwitchElement.shadowRootOptions = {
145
145
  mode: 'open',
146
146
  delegatesFocus: true,
147
147
  };
148
+ /** @nocollapse */
148
149
  SwitchElement.styles = [
149
150
  focusRingStyles,
150
151
  rippleStyles,
@@ -1 +1 @@
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 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
+ {"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"]}
@@ -9,6 +9,7 @@ import { Icon as IconBase } from '../../../../icon/internal/icon.js';
9
9
  * A Material Design icon component.
10
10
  */
11
11
  export declare class IconElement extends IconBase {
12
+ /** @nocollapse */
12
13
  static styles: CSSResultOrNative[];
13
14
  connectedCallback(): void;
14
15
  }
@@ -18,5 +18,6 @@ export class IconElement extends IconBase {
18
18
  this.classList.add('md-icon');
19
19
  }
20
20
  }
21
+ /** @nocollapse */
21
22
  IconElement.styles = [iconStyles];
22
23
  //# sourceMappingURL=icon-element.js.map
@@ -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;IAG9B,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;;AAPe,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 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"]}
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@material/web",
3
- "version": "2.5.0",
3
+ "version": "2.5.1-nightly.23b638c.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -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
+ }