@m3e/web 2.5.5 → 2.5.6

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 (201) hide show
  1. package/README.md +1 -1
  2. package/dist/all.js +287 -221
  3. package/dist/all.js.map +1 -1
  4. package/dist/all.min.js +31 -31
  5. package/dist/all.min.js.map +1 -1
  6. package/dist/autocomplete.js +3 -3
  7. package/dist/autocomplete.js.map +1 -1
  8. package/dist/autocomplete.min.js.map +1 -1
  9. package/dist/bottom-sheet.js +5 -5
  10. package/dist/bottom-sheet.js.map +1 -1
  11. package/dist/bottom-sheet.min.js.map +1 -1
  12. package/dist/breadcrumb.js +1 -1
  13. package/dist/breadcrumb.js.map +1 -1
  14. package/dist/breadcrumb.min.js.map +1 -1
  15. package/dist/button.js +7 -8
  16. package/dist/button.js.map +1 -1
  17. package/dist/button.min.js +1 -1
  18. package/dist/button.min.js.map +1 -1
  19. package/dist/calendar.js +1 -1
  20. package/dist/calendar.js.map +1 -1
  21. package/dist/calendar.min.js.map +1 -1
  22. package/dist/card.js +1 -1
  23. package/dist/card.js.map +1 -1
  24. package/dist/card.min.js.map +1 -1
  25. package/dist/checkbox.js +10 -9
  26. package/dist/checkbox.js.map +1 -1
  27. package/dist/checkbox.min.js +1 -1
  28. package/dist/checkbox.min.js.map +1 -1
  29. package/dist/chips.js +17 -16
  30. package/dist/chips.js.map +1 -1
  31. package/dist/chips.min.js +1 -1
  32. package/dist/chips.min.js.map +1 -1
  33. package/dist/core.js +5 -5
  34. package/dist/core.js.map +1 -1
  35. package/dist/core.min.js.map +1 -1
  36. package/dist/css-custom-data.json +120 -120
  37. package/dist/custom-elements.json +765 -534
  38. package/dist/datepicker.js +26 -2
  39. package/dist/datepicker.js.map +1 -1
  40. package/dist/datepicker.min.js +1 -1
  41. package/dist/datepicker.min.js.map +1 -1
  42. package/dist/dialog.js +5 -5
  43. package/dist/dialog.js.map +1 -1
  44. package/dist/dialog.min.js.map +1 -1
  45. package/dist/drawer-container.js +1 -1
  46. package/dist/drawer-container.js.map +1 -1
  47. package/dist/drawer-container.min.js.map +1 -1
  48. package/dist/expansion-panel.js +5 -5
  49. package/dist/expansion-panel.js.map +1 -1
  50. package/dist/expansion-panel.min.js.map +1 -1
  51. package/dist/fab-menu.js +1 -1
  52. package/dist/fab-menu.js.map +1 -1
  53. package/dist/fab-menu.min.js.map +1 -1
  54. package/dist/fab.js +1 -1
  55. package/dist/fab.js.map +1 -1
  56. package/dist/fab.min.js.map +1 -1
  57. package/dist/html-custom-data.json +83 -78
  58. package/dist/icon-button.js +7 -8
  59. package/dist/icon-button.js.map +1 -1
  60. package/dist/icon-button.min.js +1 -1
  61. package/dist/icon-button.min.js.map +1 -1
  62. package/dist/list.js +17 -16
  63. package/dist/list.js.map +1 -1
  64. package/dist/list.min.js +1 -1
  65. package/dist/list.min.js.map +1 -1
  66. package/dist/menu.js +3 -3
  67. package/dist/menu.js.map +1 -1
  68. package/dist/menu.min.js.map +1 -1
  69. package/dist/nav-bar.js +12 -9
  70. package/dist/nav-bar.js.map +1 -1
  71. package/dist/nav-bar.min.js +1 -1
  72. package/dist/nav-bar.min.js.map +1 -1
  73. package/dist/nav-menu.js +5 -5
  74. package/dist/nav-menu.js.map +1 -1
  75. package/dist/nav-menu.min.js.map +1 -1
  76. package/dist/nav-rail.js +3 -1
  77. package/dist/nav-rail.js.map +1 -1
  78. package/dist/nav-rail.min.js.map +1 -1
  79. package/dist/paginator.js +1 -1
  80. package/dist/paginator.js.map +1 -1
  81. package/dist/paginator.min.js.map +1 -1
  82. package/dist/radio-group.js +12 -9
  83. package/dist/radio-group.js.map +1 -1
  84. package/dist/radio-group.min.js +1 -1
  85. package/dist/radio-group.min.js.map +1 -1
  86. package/dist/segmented-button.js +12 -11
  87. package/dist/segmented-button.js.map +1 -1
  88. package/dist/segmented-button.min.js +1 -1
  89. package/dist/segmented-button.min.js.map +1 -1
  90. package/dist/select.js +9 -9
  91. package/dist/select.js.map +1 -1
  92. package/dist/select.min.js +1 -1
  93. package/dist/select.min.js.map +1 -1
  94. package/dist/slider.js +46 -25
  95. package/dist/slider.js.map +1 -1
  96. package/dist/slider.min.js +1 -1
  97. package/dist/slider.min.js.map +1 -1
  98. package/dist/split-pane.js +17 -19
  99. package/dist/split-pane.js.map +1 -1
  100. package/dist/split-pane.min.js +1 -1
  101. package/dist/split-pane.min.js.map +1 -1
  102. package/dist/src/autocomplete/AutocompleteElement.d.ts +3 -3
  103. package/dist/src/autocomplete/AutocompleteQueryEventDetail.d.ts +1 -1
  104. package/dist/src/autocomplete/QueryEventDetail.d.ts +1 -1
  105. package/dist/src/bottom-sheet/BottomSheetElement.d.ts +5 -5
  106. package/dist/src/breadcrumb/BreadcrumbItemElement.d.ts +1 -1
  107. package/dist/src/button/ButtonElement.d.ts +2 -1
  108. package/dist/src/button/ButtonElement.d.ts.map +1 -1
  109. package/dist/src/calendar/CalendarElement.d.ts +1 -1
  110. package/dist/src/card/CardElement.d.ts +1 -1
  111. package/dist/src/checkbox/CheckboxElement.d.ts +5 -4
  112. package/dist/src/checkbox/CheckboxElement.d.ts.map +1 -1
  113. package/dist/src/chips/AssistChipElement.d.ts +1 -1
  114. package/dist/src/chips/FilterChipElement.d.ts +4 -3
  115. package/dist/src/chips/FilterChipElement.d.ts.map +1 -1
  116. package/dist/src/chips/FilterChipSetElement.d.ts +3 -2
  117. package/dist/src/chips/FilterChipSetElement.d.ts.map +1 -1
  118. package/dist/src/chips/InputChipElement.d.ts +2 -2
  119. package/dist/src/chips/InputChipSetElement.d.ts +1 -1
  120. package/dist/src/chips/SuggestionChipElement.d.ts +1 -1
  121. package/dist/src/core/shared/primitives/CollapsibleElement.d.ts +4 -4
  122. package/dist/src/core/shared/primitives/TextHighlightElement.d.ts +1 -1
  123. package/dist/src/datepicker/DatepickerElement.d.ts +6 -0
  124. package/dist/src/datepicker/DatepickerElement.d.ts.map +1 -1
  125. package/dist/src/dialog/DialogElement.d.ts +5 -5
  126. package/dist/src/drawer-container/DrawerContainerElement.d.ts +1 -1
  127. package/dist/src/expansion-panel/ExpansionHeaderElement.d.ts +1 -1
  128. package/dist/src/expansion-panel/ExpansionPanelElement.d.ts +4 -4
  129. package/dist/src/fab/FabElement.d.ts +1 -1
  130. package/dist/src/fab-menu/FabMenuItemElement.d.ts +1 -1
  131. package/dist/src/icon-button/IconButtonElement.d.ts +2 -1
  132. package/dist/src/icon-button/IconButtonElement.d.ts.map +1 -1
  133. package/dist/src/list/ExpandableListItemElement.d.ts +4 -4
  134. package/dist/src/list/ListActionElement.d.ts +1 -1
  135. package/dist/src/list/ListOptionElement.d.ts +4 -3
  136. package/dist/src/list/ListOptionElement.d.ts.map +1 -1
  137. package/dist/src/list/SelectionListElement.d.ts +3 -2
  138. package/dist/src/list/SelectionListElement.d.ts.map +1 -1
  139. package/dist/src/menu/MenuItemCheckboxElement.d.ts +1 -1
  140. package/dist/src/menu/MenuItemElement.d.ts +1 -1
  141. package/dist/src/menu/MenuItemRadioElement.d.ts +1 -1
  142. package/dist/src/nav-bar/NavBarElement.d.ts +3 -1
  143. package/dist/src/nav-bar/NavBarElement.d.ts.map +1 -1
  144. package/dist/src/nav-bar/NavItemElement.d.ts +4 -3
  145. package/dist/src/nav-bar/NavItemElement.d.ts.map +1 -1
  146. package/dist/src/nav-menu/NavMenuItemElement.d.ts +5 -5
  147. package/dist/src/nav-rail/NavRailElement.d.ts +3 -1
  148. package/dist/src/nav-rail/NavRailElement.d.ts.map +1 -1
  149. package/dist/src/paginator/PageEventDetail.d.ts +1 -1
  150. package/dist/src/paginator/PaginatorElement.d.ts +1 -1
  151. package/dist/src/paginator/PaginatorPageEventDetail.d.ts +1 -1
  152. package/dist/src/paginator/PaginatorPageEventDetail.d.ts.map +1 -1
  153. package/dist/src/radio-group/RadioElement.d.ts +4 -3
  154. package/dist/src/radio-group/RadioElement.d.ts.map +1 -1
  155. package/dist/src/radio-group/RadioGroupElement.d.ts +3 -1
  156. package/dist/src/radio-group/RadioGroupElement.d.ts.map +1 -1
  157. package/dist/src/search/SearchViewQueryEventDetail.d.ts +1 -1
  158. package/dist/src/segmented-button/ButtonSegmentElement.d.ts +4 -3
  159. package/dist/src/segmented-button/ButtonSegmentElement.d.ts.map +1 -1
  160. package/dist/src/segmented-button/SegmentedButtonElement.d.ts +3 -2
  161. package/dist/src/segmented-button/SegmentedButtonElement.d.ts.map +1 -1
  162. package/dist/src/select/SelectElement.d.ts +3 -2
  163. package/dist/src/select/SelectElement.d.ts.map +1 -1
  164. package/dist/src/slider/SliderElement.d.ts +4 -0
  165. package/dist/src/slider/SliderElement.d.ts.map +1 -1
  166. package/dist/src/slider/SliderThumbElement.d.ts +4 -3
  167. package/dist/src/slider/SliderThumbElement.d.ts.map +1 -1
  168. package/dist/src/split-pane/SplitPaneElement.d.ts +3 -2
  169. package/dist/src/split-pane/SplitPaneElement.d.ts.map +1 -1
  170. package/dist/src/stepper/StepElement.d.ts +4 -3
  171. package/dist/src/stepper/StepElement.d.ts.map +1 -1
  172. package/dist/src/stepper/StepperElement.d.ts +5 -1
  173. package/dist/src/stepper/StepperElement.d.ts.map +1 -1
  174. package/dist/src/switch/SwitchElement.d.ts +4 -3
  175. package/dist/src/switch/SwitchElement.d.ts.map +1 -1
  176. package/dist/src/tabs/TabElement.d.ts +4 -3
  177. package/dist/src/tabs/TabElement.d.ts.map +1 -1
  178. package/dist/src/tabs/TabsElement.d.ts +3 -1
  179. package/dist/src/tabs/TabsElement.d.ts.map +1 -1
  180. package/dist/src/toc/TocItemElement.d.ts +1 -1
  181. package/dist/src/tree/TreeElement.d.ts +1 -1
  182. package/dist/src/tree/TreeItemElement.d.ts +5 -5
  183. package/dist/stepper.js +26 -17
  184. package/dist/stepper.js.map +1 -1
  185. package/dist/stepper.min.js +1 -1
  186. package/dist/stepper.min.js.map +1 -1
  187. package/dist/switch.js +9 -8
  188. package/dist/switch.js.map +1 -1
  189. package/dist/switch.min.js +1 -1
  190. package/dist/switch.min.js.map +1 -1
  191. package/dist/tabs.js +12 -9
  192. package/dist/tabs.js.map +1 -1
  193. package/dist/tabs.min.js +1 -1
  194. package/dist/tabs.min.js.map +1 -1
  195. package/dist/toc.js +1 -1
  196. package/dist/toc.js.map +1 -1
  197. package/dist/toc.min.js.map +1 -1
  198. package/dist/tree.js +6 -6
  199. package/dist/tree.js.map +1 -1
  200. package/dist/tree.min.js.map +1 -1
  201. package/package.json +1 -1
package/dist/button.min.js CHANGED
@@ -3,5 +3,5 @@
3
3
  * Copyright (c) 2025–2026 matraic
4
4
  * See LICENSE file in the project root for full license text.
5
5
  */
6
- import{__classPrivateFieldGet as e,__decorate as t}from"tslib";import{unsafeCSS as o,css as a,LitElement as r,nothing as l,html as n}from"lit";import{query as s,property as c}from"lit/decorators.js";import{DesignToken as i,KeyboardClick as d,LinkButton as u,FormSubmitter as b,Focusable as v,DisabledInteractive as m,Disabled as p,AttachInternals as h,Role as y,ResizeController as $,FocusController as x,PressedController as f,prefersReducedMotion as g,hasCustomState as C,renderPseudoLink as S,deleteCustomState as L,hasAssignedNodes as T,setCustomState as k,debounce as z,customElement as O}from"@m3e/web/core";const w={"extra-small":{containerHeight:o(`calc(var(--m3e-button-extra-small-container-height, var(--m3e-button-container-height, 2rem)) + ${i.density.calc(0)})`),outlineThickness:o("var(--m3e-button-extra-small-outline-thickness, var(--m3e-button-outline-thickness, 1px))"),labelTextFontSize:o(`var(--m3e-button-extra-small-label-text-font-size, var(--m3e-button-label-text-font-size, ${i.typescale.standard.label.large.fontSize}))`),labelTextFontWeight:o(`var(--m3e-button-extra-small-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${i.typescale.standard.label.large.fontWeight}))`),labelTextLineHeight:o(`var(--m3e-button-extra-small-label-text-line-height, var(--m3e-button-label-text-line-height, ${i.typescale.standard.label.large.lineHeight}))`),labelTextTracking:o(`var(--m3e-button-extra-small-label-text-tracking, var(--m3e-button-label-text-tracking, ${i.typescale.standard.label.large.tracking}))`),iconSize:o("var(--m3e-button-extra-small-icon-size, var(--m3e-button-icon-size, 1.25rem))"),shapeRound:o(`var(--m3e-button-extra-small-shape-round, var(--m3e-button-shape-round, ${i.shape.corner.full}))`),shapeSquare:o(`var(--m3e-button-extra-small-shape-square, var(--m3e-button-shape-square, ${i.shape.corner.medium}))`),selectedShapeRound:o(`var(--m3e-button-extra-small-selected-shape-round, var(--m3e-button-selected-shape-round, ${i.shape.corner.medium}))`),selectedShapeSquare:o(`var(--m3e-button-extra-small-selected-shape-square, var(--m3e-button-selected-shape-square, ${i.shape.corner.full}))`),shapePressedMorph:o(`var(--m3e-button-extra-small-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${i.shape.corner.small}))`),leadingSpace:o("var(--m3e-button-extra-small-leading-space, var(--m3e-button-leading-space, 0.75rem))"),trailingSpace:o("var(--m3e-button-extra-small-trailing-space, var(--m3e-button-trailing-space, 0.75rem))"),iconLabelSpace:o("var(--m3e-button-extra-small-icon-label-space, var(--m3e-button-icon-label-space, 0.5rem))")},small:{containerHeight:o(`calc(var(--m3e-button-small-container-height, var(--m3e-button-container-height, 2.5rem)) + ${i.density.calc(-1)})`),outlineThickness:o("var(--m3e-button-small-outline-thickness, var(--m3e-button-outline-thickness, 1px))"),labelTextFontSize:o(`var(--m3e-button-small-label-text-font-size, var(--m3e-button-label-text-font-size, ${i.typescale.standard.label.large.fontSize}))`),labelTextFontWeight:o(`var(--m3e-button-small-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${i.typescale.standard.label.large.fontWeight}))`),labelTextLineHeight:o(`var(--m3e-button-small-label-text-line-height, var(--m3e-button-label-text-line-height, ${i.typescale.standard.label.large.lineHeight}))`),labelTextTracking:o(`var(--m3e-button-small-label-text-tracking, var(--m3e-button-label-text-tracking, ${i.typescale.standard.label.large.tracking}))`),iconSize:o("var(--m3e-button-small-icon-size, var(--m3e-button-icon-size, 1.25rem))"),shapeRound:o(`var(--m3e-button-small-shape-round, var(--m3e-button-shape-round, ${i.shape.corner.full}))`),shapeSquare:o(`var(--m3e-button-small-shape-square, var(--m3e-button-shape-square, ${i.shape.corner.medium}))`),selectedShapeRound:o(`var(--m3e-button-small-selected-shape-round, var(--m3e-button-selected-shape-round, ${i.shape.corner.medium}))`),selectedShapeSquare:o(`var(--m3e-button-small-selected-shape-square, var(--m3e-button-selected-shape-square, ${i.shape.corner.full}))`),shapePressedMorph:o(`var(--m3e-button-small-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${i.shape.corner.small}))`),leadingSpace:o("var(--m3e-button-small-leading-space, var(--m3e-button-leading-space, 1rem))"),trailingSpace:o("var(--m3e-button-small-trailing-space, var(--m3e-button-trailing-space, 1rem))"),iconLabelSpace:o("var(--m3e-button-small-icon-label-space, var(--m3e-button-icon-label-space, 0.5rem))")},medium:{containerHeight:o(`calc(var(--m3e-button-medium-container-height, var(--m3e-button-container-height, 3.5rem)) + ${i.density.calc(-2)})`),outlineThickness:o("var(--m3e-button-medium-outline-thickness, var(--m3e-button-outline-thickness, 1px))"),labelTextFontSize:o(`var(--m3e-button-medium-label-text-font-size, var(--m3e-button-label-text-font-size, ${i.typescale.standard.body.large.fontSize}))`),labelTextFontWeight:o(`var(--m3e-button-medium-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${i.typescale.standard.body.large.fontWeight}))`),labelTextLineHeight:o(`var(--m3e-button-medium-label-text-line-height, var(--m3e-button-label-text-line-height, ${i.typescale.standard.body.large.lineHeight}))`),labelTextTracking:o(`var(--m3e-button-medium-label-text-tracking, var(--m3e-button-label-text-tracking, ${i.typescale.standard.body.large.tracking}))`),iconSize:o("var(--m3e-button-medium-icon-size, var(--m3e-button-icon-size, 1.5rem))"),shapeRound:o(`var(--m3e-button-medium-shape-round, var(--m3e-button-shape-round, ${i.shape.corner.full}))`),shapeSquare:o(`var(--m3e-button-medium-shape-square, var(--m3e-button-shape-square, ${i.shape.corner.large}))`),selectedShapeRound:o(`var(--m3e-button-medium-selected-shape-round, var(--m3e-button-selected-shape-round, ${i.shape.corner.large}))`),selectedShapeSquare:o(`var(--m3e-button-medium-selected-shape-square, var(--m3e-button-selected-shape-square, ${i.shape.corner.full}))`),shapePressedMorph:o(`var(--m3e-button-medium-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${i.shape.corner.medium}))`),leadingSpace:o("var(--m3e-button-medium-leading-space, var(--m3e-button-leading-space, 1.5rem))"),trailingSpace:o("var(--m3e-button-medium-trailing-space, var(--m3e-button-trailing-space, 1.5rem))"),iconLabelSpace:o("var(--m3e-button-medium-icon-label-space, var(--m3e-button-icon-label-space, 0.5rem))")},large:{containerHeight:o(`calc(var(--m3e-button-large-container-height, var(--m3e-button-container-height, 6rem)) + ${i.density.calc(-3)})`),outlineThickness:o("var(--m3e-button-large-outline-thickness, var(--m3e-button-outline-thickness, 2px))"),labelTextFontSize:o(`var(--m3e-button-large-label-text-font-size, var(--m3e-button-label-text-font-size, ${i.typescale.standard.headline.small.fontSize}))`),labelTextFontWeight:o(`var(--m3e-button-large-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${i.typescale.standard.headline.small.fontWeight}))`),labelTextLineHeight:o(`var(--m3e-button-large-label-text-line-height, var(--m3e-button-label-text-line-height, ${i.typescale.standard.headline.small.lineHeight}))`),labelTextTracking:o(`var(--m3e-button-large-label-text-tracking, var(--m3e-button-label-text-tracking, ${i.typescale.standard.headline.small.tracking}))`),iconSize:o("var(--m3e-button-large-icon-size, var(--m3e-button-icon-size, 2rem))"),shapeRound:o(`var(--m3e-button-large-shape-round, var(--m3e-button-shape-round, ${i.shape.corner.full}))`),shapeSquare:o(`var(--m3e-button-large-shape-square, var(--m3e-button-shape-square, ${i.shape.corner.extraLarge}))`),selectedShapeRound:o(`var(--m3e-button-large-selected-shape-round, var(--m3e-button-selected-shape-round, ${i.shape.corner.extraLarge}))`),selectedShapeSquare:o(`var(--m3e-button-large-selected-shape-square, var(--m3e-button-selected-shape-square, ${i.shape.corner.full}))`),shapePressedMorph:o(`var(--m3e-button-large-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${i.shape.corner.large}))`),leadingSpace:o("var(--m3e-button-large-leading-space, var(--m3e-button-leading-space, 3rem))"),trailingSpace:o("var(--m3e-button-large-trailing-space, var(--m3e-button-trailing-space, 3rem))"),iconLabelSpace:o("var(--m3e-button-large-icon-label-space, var(--m3e-button-icon-label-space, 0.75rem))")},"extra-large":{containerHeight:o(`calc(var(--m3e-button-extra-large-container-height, var(--m3e-button-container-height, 8.5rem)) + ${i.density.calc(-3)})`),outlineThickness:o("var(--m3e-button-extra-large-outline-thickness, var(--m3e-button-outline-thickness, 3px))"),labelTextFontSize:o(`var(--m3e-button-extra-large-label-text-font-size, var(--m3e-button-label-text-font-size, ${i.typescale.standard.headline.large.fontSize}))`),labelTextFontWeight:o(`var(--m3e-button-extra-large-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${i.typescale.standard.headline.large.fontWeight}))`),labelTextLineHeight:o(`var(--m3e-button-extra-large-label-text-line-height, var(--m3e-button-label-text-line-height, ${i.typescale.standard.headline.large.lineHeight}))`),labelTextTracking:o(`var(--m3e-button-extra-large-label-text-tracking, var(--m3e-button-label-text-tracking, ${i.typescale.standard.headline.large.tracking}))`),iconSize:o("var(--m3e-button-extra-large-icon-size, var(--m3e-button-icon-size, 2.5rem))"),shapeRound:o(`var(--m3e-button-extra-large-shape-round, var(--m3e-button-shape-round, ${i.shape.corner.full}))`),shapeSquare:o(`var(--m3e-button-extra-large-shape-square, var(--m3e-button-shape-square, ${i.shape.corner.extraLarge}))`),selectedShapeRound:o(`var(--m3e-button-extra-large-selected-shape-round, var(--m3e-button-selected-shape-round, ${i.shape.corner.extraLarge}))`),selectedShapeSquare:o(`var(--m3e-button-extra-large-selected-shape-square, var(--m3e-button-selected-shape-square, ${i.shape.corner.full}))`),shapePressedMorph:o(`var(--m3e-button-extra-large-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${i.shape.corner.large}))`),leadingSpace:o("var(--m3e-button-extra-large-leading-space, var(--m3e-button-leading-space, 4rem))"),trailingSpace:o("var(--m3e-button-extra-large-trailing-space, var(--m3e-button-trailing-space, 4rem))"),iconLabelSpace:o("var(--m3e-button-extra-large-icon-label-space, var(--m3e-button-icon-label-space, 1rem))")}};function I(e){return a`:host([size="${o(e)}"]) .base { height: ${w[e].containerHeight}; } :host([size="${o(e)}"]) .wrapper { padding-inline-start: ${w[e].leadingSpace}; padding-inline-end: ${w[e].trailingSpace}; column-gap: ${w[e].iconLabelSpace}; } :host( [size="${o(e)}"]:is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected)):is( :state(--adjacent-pressed), :--adjacent-pressed ):not(:is(:state(--pressed), :--pressed)) ) .wrapper { padding-inline-start: calc( ${w[e].leadingSpace} - calc( calc(var(--_adjacent-button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) / 4.25 ) ); padding-inline-end: calc( ${w[e].trailingSpace} - calc( calc(var(--_adjacent-button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) / 4.25 ) ); } :host([size="${o(e)}"]) .label { font-size: ${w[e].labelTextFontSize}; font-weight: ${w[e].labelTextFontWeight}; line-height: ${w[e].labelTextLineHeight}; letter-spacing: ${w[e].labelTextTracking}; } :host([size="${o(e)}"]) .icon { font-size: ${w[e].iconSize}; --m3e-icon-size: ${w[e].iconSize}; } :host([size="${o(e)}"]) .base { outline-offset: calc(0px - ${w[e].outlineThickness}); outline-width: ${w[e].outlineThickness}; } :host(:not(:is(:state(--connected), :--connected))[size="${o(e)}"][shape="rounded"]) .base { border-radius: var(--_button-shape, ${w[e].shapeRound}); } :host( :not(:is(:state(--connected), :--connected))[size="${o(e)}"][shape="rounded"][toggle][selected]:not( :is(:state(--pressed), :--pressed) ) ) .base { border-radius: ${w[e].selectedShapeRound}; } :host(:not(:is(:state(--connected), :--connected))[size="${o(e)}"][shape="square"]) .base { border-radius: ${w[e].shapeSquare}; } :host( :not(:is(:state(--connected), :--connected))[size="${o(e)}"][shape="square"][toggle][selected]:not( :is(:state(--pressed), :--pressed) ) ) .base { border-radius: var(--_button-shape, ${w[e].selectedShapeSquare}); } :host(:not(:is(:state(--connected), :--connected))[size="${o(e)}"]:is(:state(--pressed), :--pressed)) .base { border-radius: ${w[e].shapePressedMorph}; } :host(:is(:state(--connected), :--connected)[size="${o(e)}"][shape="rounded"]) .base { border-start-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${w[e].shapeRound}) ); border-end-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${w[e].shapeRound}) ); border-start-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${w[e].shapeRound}) ); border-end-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${w[e].shapeRound}) ); } :host(:is(:state(--connected), :--connected)[size="${o(e)}"][shape="square"]) .base { border-start-start-radius: var(--_button-square-start-shape, ${w[e].shapeSquare}); border-end-start-radius: var(--_button-square-start-shape, ${w[e].shapeSquare}); border-start-end-radius: var(--_button-square-end-shape, ${w[e].shapeSquare}); border-end-end-radius: var(--_button-square-end-shape, ${w[e].shapeSquare}); } :host( :is(:state(--connected), :--connected)[size="${o(e)}"][shape="square"][toggle][selected]:not( :is(:state(--pressed), :--pressed) ) ) .base { border-radius: var(--_button-shape, ${w[e].selectedShapeSquare}); } :host(:is(:state(--connected), :--connected)[size="${o(e)}"]:is(:state(--pressed), :--pressed)) .base { border-start-start-radius: var(--_button-start-shape-pressed-morph, ${w[e].shapePressedMorph}); border-end-start-radius: var(--_button-start-shape-pressed-morph, ${w[e].shapePressedMorph}); border-start-end-radius: var(--_button-end-shape-pressed-morph, ${w[e].shapePressedMorph}); border-end-end-radius: var(--_button-end-shape-pressed-morph, ${w[e].shapePressedMorph}); }`}const P=[I("extra-small"),I("small"),I("medium"),I("large"),I("extra-large")],_=a`:host { display: inline-block; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; transition: ${o(`background-color ${i.motion.duration.short4} ${i.motion.easing.standard}`)}; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } :host(:is(:state(--pressed), :--pressed)) .base, :host(:is(:state(--resting), :--resting)) .base { transition: ${o(`background-color ${i.motion.duration.short4} ${i.motion.easing.standard},\n border-radius ${i.motion.spring.fastEffects}`)}; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; } .label { justify-self: center; flex: 1 1 auto; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: ${o(`color ${i.motion.duration.short4} ${i.motion.easing.standard}`)}; } .icon { transition: ${o(`color ${i.motion.duration.short4} ${i.motion.easing.standard}`)}; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } ::slotted([slot="icon"]), ::slotted([slot="selected-icon"]), ::slotted([slot="trailing-icon"]) { font-size: inherit !important; flex: none; } ::slotted(svg[slot="icon"]), ::slotted(svg[slot="selected-icon"]), ::slotted(svg[slot="trailing-icon"]) { width: 1em; height: 1em; } :host([toggle]:not([selected])) .base.with-selected-icon slot[name="selected-icon"], :host([toggle][selected]) .base.with-selected-icon slot[name="icon"] { display: none; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } :host(:is(:state(--grouped), :--grouped):is(:state(--connected), :--connected)) { flex: 1 1 auto; } :host(:is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected))) { transition: ${o(`padding-inline ${i.motion.spring.fastEffects}`)}; } :host( :is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected)):not( :is(:state(--adjacent-pressed), :--adjacent-pressed) ):not(:is(:state(--pressed), :--pressed)) ) { flex-shrink: 0; flex-grow: 0; } :host( :is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected)):is( :state(--adjacent-pressed), :--adjacent-pressed ):not(:is(:state(--pressed), :--pressed)) ) { flex-shrink: 1; min-width: 0; } :host( :is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected)):is( :state(--adjacent-pressed), :--adjacent-pressed ):not(:is(:state(--pressed), :--pressed)) ) .label { text-overflow: clip; } :host( :is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected)):is( :state(--pressed), :--pressed ):not([disabled-interactive]):not(:disabled) ) { flex-shrink: 0; flex-basis: calc( var(--_button-width) + calc(var(--_button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) ); } @media (forced-colors: active) { .base, .label, .icon { transition: none; } :host(:is(:state(--pressed), :--pressed)) .base, :host(:is(:state(--resting), :--resting)) .base { transition: ${o(`border-radius ${i.motion.spring.fastEffects}`)}; } :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .label, :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .icon { color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .label, :host([variant]:hover:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected]):focus) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .icon, :host([variant]:hover:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .icon, :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected]):focus) .icon { color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .base { background-color: ButtonText; outline: none; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .label, :host([variant]:hover:not(:disabled):not([disabled-interactive])[toggle][selected]) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]:focus) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .icon, :host([variant]:hover:not(:disabled):not([disabled-interactive])[toggle][selected]) .icon, :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]:focus) .icon { forced-color-adjust: none; color: ButtonFace; background-color: ButtonText; } :host([variant]:disabled) .base, :host([variant][disabled-interactive]) .base { outline-color: GrayText; background-color: unset; } :host([variant]:disabled) .label, :host([variant][disabled-interactive]) .label, :host([variant]:disabled) .icon, :host([variant][disabled-interactive]) .icon { color: GrayText; } .base { outline-style: solid; } :host([size="extra-small"]) .base { outline-offset: calc(0px - var(--m3e-button-extra-small-outline-thickness, 1px)); outline-width: var(--m3e-button-extra-small-outline-thickness, 1px); } :host([size="small"]) .base { outline-offset: calc(0px - var(--m3e-button-small-outline-thickness, 1px)); outline-width: var(--m3e-button-small-outline-thickness, 1px); } :host([size="medium"]) .base { outline-offset: calc(0px - var(--m3e-button-medium-outline-thickness, 1px)); outline-width: var(--m3e-button-medium-outline-thickness, 1px); } :host([size="large"]) .base { outline-offset: calc(0px - var(--m3e-button-large-outline-thickness, 2px)); outline-width: var(--m3e-button-large-outline-thickness, 2px); } :host([size="extra-large"]) .base { outline-offset: calc(0px - var(--m3e-button-extra-large-outline-thickness, 3px)); outline-width: var(--m3e-button-extra-large-outline-thickness, 3px); } } @media (prefers-reduced-motion) { :host(:is(:state(--pressed), :--pressed)) .base, :host(:is(:state(--resting), :--resting)) .base, .base, .label, .icon { transition: none; } }`,q={elevated:{labelTextColor:o(`var(--m3e-elevated-button-label-text-color, var(--m3e-button-label-text-color, ${i.color.primary}))`),iconColor:o(`var(--m3e-elevated-button-icon-color, var(--m3e-button-icon-color, ${i.color.primary}))`),containerColor:o(`var(--m3e-elevated-button-container-color, var(--m3e-button-container-color, ${i.color.surfaceContainerLow}))`),containerElevation:o(`var(--m3e-elevated-button-container-elevation, var(--m3e-button-container-elevation, ${i.elevation.level1}))`),unselectedLabelTextColor:o(`var(--m3e-elevated-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${i.color.primary}))`),unselectedIconColor:o(`var(--m3e-elevated-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${i.color.primary}))`),unselectedContainerColor:o(`var(--m3e-elevated-button-unselected-container-color, var(--m3e-button-unselected-container-color, ${i.color.surfaceContainerLow}))`),selectedLabelTextColor:o(`var(--m3e-elevated-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${i.color.onPrimary}))`),selectedIconColor:o(`var(--m3e-elevated-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${i.color.onPrimary}))`),selectedContainerColor:o(`var(--m3e-elevated-button-selected-container-color, var(--m3e-button-selected-container-color, ${i.color.primary}))`),disabled:{containerColor:o(`var(--m3e-elevated-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${i.color.onSurface}))`),containerOpacity:o("var(--m3e-elevated-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))"),iconColor:o(`var(--m3e-elevated-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${i.color.onSurface}))`),iconOpacity:o("var(--m3e-elevated-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))"),labelTextColor:o(`var(--m3e-elevated-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${i.color.onSurface}))`),labelTextOpacity:o("var(--m3e-elevated-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))"),containerElevation:o(`var(--m3e-elevated-button-disabled-container-elevation, var(--m3e-button-disabled-container-elevation, ${i.elevation.level0}))`)},hover:{iconColor:o(`var(--m3e-elevated-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${i.color.primary}))`),labelTextColor:o(`var(--m3e-elevated-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${i.color.primary}))`),stateLayerColor:o(`var(--m3e-elevated-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${i.color.primary}))`),stateLayerOpacity:o(`var(--m3e-elevated-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${i.state.hoverStateLayerOpacity}))`),containerElevation:o(`var(--m3e-elevated-button-hover-container-elevation, var(--m3e-button-hover-container-elevation, ${i.elevation.level2}))`),unselectedIconColor:o(`var(--m3e-elevated-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${i.color.primary}))`),unselectedLabelTextColor:o(`var(--m3e-elevated-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${i.color.primary}))`),unselectedStateLayerColor:o(`var(--m3e-elevated-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${i.color.primary}))`),selectedIconColor:o(`var(--m3e-elevated-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${i.color.onPrimary}))`),selectedLabelTextColor:o(`var(--m3e-elevated-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${i.color.onPrimary}))`),selectedStateLayerColor:o(`var(--m3e-elevated-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${i.color.onPrimary}))`)},focus:{iconColor:o(`var(--m3e-elevated-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${i.color.primary}))`),labelTextColor:o(`var(--m3e-elevated-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${i.color.primary}))`),stateLayerColor:o(`var(--m3e-elevated-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${i.color.primary}))`),stateLayerOpacity:o(`var(--m3e-elevated-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${i.state.focusStateLayerOpacity}))`),containerElevation:o(`var(--m3e-elevated-button-focus-container-elevation, var(--m3e-button-focus-container-elevation, ${i.elevation.level1}))`),unselectedLabelTextColor:o(`var(--m3e-elevated-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${i.color.primary}))`),unselectedIconColor:o(`var(--m3e-elevated-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${i.color.primary}))`),unselectedStateLayerColor:o(`var(--m3e-elevated-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${i.color.primary}))`),selectedIconColor:o(`var(--m3e-elevated-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${i.color.onPrimary}))`),selectedLabelTextColor:o(`var(--m3e-elevated-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${i.color.onPrimary}))`),selectedStateLayerColor:o(`var(--m3e-elevated-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${i.color.onPrimary}))`)},pressed:{iconColor:o(`var(--m3e-elevated-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${i.color.primary}))`),labelTextColor:o(`var(--m3e-elevated-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${i.color.primary}))`),stateLayerColor:o(`var(--m3e-elevated-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${i.color.primary}))`),stateLayerOpacity:o(`var(--m3e-elevated-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${i.state.pressedStateLayerOpacity}))`),containerElevation:o(`var(--m3e-elevated-button-pressed-container-elevation, var(--m3e-button-pressed-container-elevation, ${i.elevation.level1}))`),unselectedLabelTextColor:o(`var(--m3e-elevated-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${i.color.primary}))`),unselectedIconColor:o(`var(--m3e-elevated-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${i.color.primary}))`),unselectedStateLayerColor:o(`var(--m3e-elevated-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${i.color.primary}))`),selectedIconColor:o(`var(--m3e-elevated-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${i.color.onPrimary}))`),selectedLabelTextColor:o(`var(--m3e-elevated-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${i.color.onPrimary}))`),selectedStateLayerColor:o(`var(--m3e-elevated-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${i.color.onPrimary}))`)}},outlined:{labelTextColor:o(`var(--m3e-outlined-button-label-text-color, var(--m3e-button-label-text-color, ${i.color.onSurfaceVariant}))`),iconColor:o(`var(--m3e-outlined-button-icon-color, var(--m3e-button-icon-color, ${i.color.onSurfaceVariant}))`),outlineColor:o(`var(--m3e-outlined-button-outline-color, var(--m3e-button-outline-color, ${i.color.outlineVariant}))`),unselectedLabelTextColor:o(`var(--m3e-outlined-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${i.color.onSurfaceVariant}))`),unselectedIconColor:o(`var(--m3e-outlined-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${i.color.onSurfaceVariant}))`),selectedLabelTextColor:o(`var(--m3e-outlined-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${i.color.inverseOnSurface}))`),selectedIconColor:o(`var(--m3e-outlined-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${i.color.inverseOnSurface}))`),selectedContainerColor:o(`var(--m3e-outlined-button-selected-container-color, var(--m3e-button-selected-container-color, ${i.color.inverseSurface}))`),disabled:{containerColor:o(`var(--m3e-outlined-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${i.color.onSurface}))`),containerOpacity:o("var(--m3e-outlined-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))"),iconColor:o(`var(--m3e-outlined-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${i.color.onSurface}))`),iconOpacity:o("var(--m3e-outlined-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))"),labelTextColor:o(`var(--m3e-outlined-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${i.color.onSurface}))`),labelTextOpacity:o("var(--m3e-outlined-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))"),outlineColor:o(`var(--m3e-outlined-button-disabled-outline-color, var(--m3e-button-disabled-outline-color, ${i.color.outlineVariant}))`)},hover:{iconColor:o(`var(--m3e-outlined-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${i.color.onSurfaceVariant}))`),labelTextColor:o(`var(--m3e-outlined-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${i.color.onSurfaceVariant}))`),outlineColor:o(`var(--m3e-outlined-button-hover-outline-color, var(--m3e-button-hover-outline-color, ${i.color.outlineVariant}))`),stateLayerColor:o(`var(--m3e-outlined-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${i.color.onSurfaceVariant}))`),stateLayerOpacity:o(`var(--m3e-outlined-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${i.state.hoverStateLayerOpacity}))`),unselectedIconColor:o(`var(--m3e-outlined-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${i.color.onSurfaceVariant}))`),unselectedLabelTextColor:o(`var(--m3e-outlined-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${i.color.onSurfaceVariant}))`),unselectedStateLayerColor:o(`var(--m3e-outlined-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${i.color.onSurfaceVariant}))`),selectedIconColor:o(`var(--m3e-outlined-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${i.color.inverseOnSurface}))`),selectedLabelTextColor:o(`var(--m3e-outlined-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${i.color.inverseOnSurface}))`),selectedStateLayerColor:o(`var(--m3e-outlined-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${i.color.inverseOnSurface}))`)},focus:{iconColor:o(`var(--m3e-outlined-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${i.color.onSurfaceVariant}))`),labelTextColor:o(`var(--m3e-outlined-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${i.color.onSurfaceVariant}))`),outlineColor:o(`var(--m3e-outlined-button-focus-outline-color, var(--m3e-button-focus-outline-color, ${i.color.outlineVariant}))`),stateLayerColor:o(`var(--m3e-outlined-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${i.color.onSurfaceVariant}))`),stateLayerOpacity:o(`var(--m3e-outlined-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${i.state.focusStateLayerOpacity}))`),unselectedIconColor:o(`var(--m3e-outlined-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${i.color.onSurfaceVariant}))`),unselectedLabelTextColor:o(`var(--m3e-outlined-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${i.color.onSurfaceVariant}))`),unselectedStateLayerColor:o(`var(--m3e-outlined-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${i.color.onSurfaceVariant}))`),selectedIconColor:o(`var(--m3e-outlined-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${i.color.inverseOnSurface}))`),selectedLabelTextColor:o(`var(--m3e-outlined-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${i.color.inverseOnSurface}))`),selectedStateLayerColor:o(`var(--m3e-outlined-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${i.color.inverseOnSurface}))`)},pressed:{iconColor:o(`var(--m3e-outlined-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${i.color.onSurfaceVariant}))`),labelTextColor:o(`var(--m3e-outlined-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${i.color.onSurfaceVariant}))`),outlineColor:o(`var(--m3e-outlined-button-pressed-outline-color, var(--m3e-button-pressed-outline-color, ${i.color.outlineVariant}))`),stateLayerColor:o(`var(--m3e-outlined-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${i.color.onSurfaceVariant}))`),stateLayerOpacity:o(`var(--m3e-outlined-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${i.state.pressedStateLayerOpacity}))`),unselectedIconColor:o(`var(--m3e-outlined-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${i.color.onSurfaceVariant}))`),unselectedLabelTextColor:o(`var(--m3e-outlined-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${i.color.onSurfaceVariant}))`),unselectedStateLayerColor:o(`var(--m3e-outlined-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${i.color.onSurfaceVariant}))`),selectedIconColor:o(`var(--m3e-outlined-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${i.color.inverseOnSurface}))`),selectedLabelTextColor:o(`var(--m3e-outlined-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${i.color.inverseOnSurface}))`),selectedStateLayerColor:o(`var(--m3e-outlined-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${i.color.inverseOnSurface}))`)}},filled:{labelTextColor:o(`var(--m3e-filled-button-label-text-color, var(--m3e-button-label-text-color, ${i.color.onPrimary}))`),iconColor:o(`var(--m3e-filled-button-icon-color, var(--m3e-button-icon-color, ${i.color.onPrimary}))`),containerColor:o(`var(--m3e-filled-button-container-color, var(--m3e-button-container-color, ${i.color.primary}))`),containerElevation:o(`var(--m3e-filled-button-container-elevation, var(--m3e-button-container-elevation, ${i.elevation.level0}))`),unselectedLabelTextColor:o(`var(--m3e-filled-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${i.color.onSurfaceVariant}))`),unselectedIconColor:o(`var(--m3e-filled-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${i.color.onSurfaceVariant}))`),unselectedContainerColor:o(`var(--m3e-filled-button-unselected-container-color, var(--m3e-button-unselected-container-color, ${i.color.surfaceContainer}))`),selectedLabelTextColor:o(`var(--m3e-filled-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${i.color.onPrimary}))`),selectedIconColor:o(`var(--m3e-filled-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${i.color.onPrimary}))`),selectedContainerColor:o(`var(--m3e-filled-button-selected-container-color, var(--m3e-button-selected-container-color, ${i.color.primary}))`),disabled:{containerColor:o(`var(--m3e-filled-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${i.color.onSurface}))`),containerOpacity:o("var(--m3e-filled-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))"),iconColor:o(`var(--m3e-filled-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${i.color.onSurface}))`),iconOpacity:o("var(--m3e-filled-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))"),labelTextColor:o(`var(--m3e-filled-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${i.color.onSurface}))`),labelTextOpacity:o("var(--m3e-filled-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))"),containerElevation:o(`var(--m3e-filled-button-disabled-container-elevation, var(--m3e-button-disabled-container-elevation, ${i.elevation.level0}))`)},hover:{iconColor:o(`var(--m3e-filled-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${i.color.onPrimary}))`),labelTextColor:o(`var(--m3e-filled-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${i.color.onPrimary}))`),stateLayerColor:o(`var(--m3e-filled-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${i.color.onPrimary}))`),stateLayerOpacity:o(`var(--m3e-filled-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${i.state.hoverStateLayerOpacity}))`),containerElevation:o(`var(--m3e-filled-button-hover-container-elevation, var(--m3e-button-hover-container-elevation, ${i.elevation.level1}))`),unselectedIconColor:o(`var(--m3e-filled-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${i.color.onSurfaceVariant}))`),unselectedLabelTextColor:o(`var(--m3e-filled-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${i.color.onSurfaceVariant}))`),unselectedStateLayerColor:o(`var(--m3e-filled-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${i.color.onSurfaceVariant}))`),selectedIconColor:o(`var(--m3e-filled-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${i.color.onPrimary}))`),selectedLabelTextColor:o(`var(--m3e-filled-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${i.color.onPrimary}))`),selectedStateLayerColor:o(`var(--m3e-filled-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${i.color.onPrimary}))`)},focus:{iconColor:o(`var(--m3e-filled-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${i.color.onPrimary}))`),labelTextColor:o(`var(--m3e-filled-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${i.color.onPrimary}))`),stateLayerColor:o(`var(--m3e-filled-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${i.color.onPrimary}))`),stateLayerOpacity:o(`var(--m3e-filled-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${i.state.focusStateLayerOpacity}))`),containerElevation:o(`var(--m3e-filled-button-focus-container-elevation, var(--m3e-button-focus-container-elevation, ${i.elevation.level0}))`),unselectedIconColor:o(`var(--m3e-filled-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${i.color.onSurfaceVariant}))`),unselectedLabelTextColor:o(`var(--m3e-filled-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${i.color.onSurfaceVariant}))`),unselectedStateLayerColor:o(`var(--m3e-filled-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${i.color.onSurfaceVariant}))`),selectedIconColor:o(`var(--m3e-filled-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${i.color.onPrimary}))`),selectedLabelTextColor:o(`var(--m3e-filled-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${i.color.onPrimary}))`),selectedStateLayerColor:o(`var(--m3e-filled-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${i.color.onPrimary}))`)},pressed:{iconColor:o(`var(--m3e-filled-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${i.color.onPrimary}))`),labelTextColor:o(`var(--m3e-filled-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${i.color.onPrimary}))`),stateLayerColor:o(`var(--m3e-filled-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${i.color.onPrimary}))`),stateLayerOpacity:o(`var(--m3e-filled-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${i.state.pressedStateLayerOpacity}))`),containerElevation:o(`var(--m3e-filled-button-pressed-container-elevation, var(--m3e-button-pressed-container-elevation, ${i.elevation.level0}))`),unselectedIconColor:o(`var(--m3e-filled-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${i.color.onSurfaceVariant}))`),unselectedLabelTextColor:o(`var(--m3e-filled-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${i.color.onSurfaceVariant}))`),unselectedStateLayerColor:o(`var(--m3e-filled-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${i.color.onSurfaceVariant}))`),selectedIconColor:o(`var(--m3e-filled-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${i.color.onPrimary}))`),selectedLabelTextColor:o(`var(--m3e-filled-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${i.color.onPrimary}))`),selectedStateLayerColor:o(`var(--m3e-filled-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${i.color.onPrimary}))`)}},tonal:{labelTextColor:o(`var(--m3e-tonal-button-label-text-color, var(--m3e-button-label-text-color, ${i.color.onSecondaryContainer}))`),iconColor:o(`var(--m3e-tonal-button-icon-color, var(--m3e-button-icon-color, ${i.color.onSecondaryContainer}))`),containerColor:o(`var(--m3e-tonal-button-container-color, var(--m3e-button-container-color, ${i.color.secondaryContainer}))`),containerElevation:o(`var(--m3e-tonal-button-container-elevation, var(--m3e-button-container-elevation, ${i.elevation.level0}))`),unselectedLabelTextColor:o(`var(--m3e-tonal-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${i.color.onSecondaryContainer}))`),unselectedIconColor:o(`var(--m3e-tonal-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${i.color.onSecondaryContainer}))`),unselectedContainerColor:o(`var(--m3e-tonal-button-unselected-container-color, var(--m3e-button-unselected-container-color, ${i.color.secondaryContainer}))`),selectedLabelTextColor:o(`var(--m3e-tonal-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${i.color.onSecondary}))`),selectedIconColor:o(`var(--m3e-tonal-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${i.color.onSecondary}))`),selectedContainerColor:o(`var(--m3e-tonal-button-selected-container-color, var(--m3e-button-selected-container-color, ${i.color.secondary}))`),disabled:{containerColor:o(`var(--m3e-tonal-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${i.color.onSurface}))`),containerOpacity:o("var(--m3e-tonal-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))"),iconColor:o(`var(--m3e-tonal-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${i.color.onSurface}))`),iconOpacity:o("var(--m3e-tonal-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))"),labelTextColor:o(`var(--m3e-tonal-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${i.color.onSurface}))`),labelTextOpacity:o("var(--m3e-tonal-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))"),containerElevation:o(`var(--m3e-tonal-button-disabled-container-elevation, var(--m3e-button-disabled-container-elevation, ${i.elevation.level0}))`)},hover:{iconColor:o(`var(--m3e-tonal-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${i.color.onSecondaryContainer}))`),labelTextColor:o(`var(--m3e-tonal-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${i.color.onSecondaryContainer}))`),stateLayerColor:o(`var(--m3e-tonal-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${i.color.onSecondaryContainer}))`),stateLayerOpacity:o(`var(--m3e-tonal-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${i.state.hoverStateLayerOpacity}))`),containerElevation:o(`var(--m3e-tonal-button-hover-container-elevation, var(--m3e-button-hover-container-elevation, ${i.elevation.level1}))`),unselectedIconColor:o(`var(--m3e-tonal-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${i.color.onSecondaryContainer}))`),unselectedLabelTextColor:o(`var(--m3e-tonal-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${i.color.onSecondaryContainer}))`),unselectedStateLayerColor:o(`var(--m3e-tonal-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${i.color.onSecondaryContainer}))`),selectedIconColor:o(`var(--m3e-tonal-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${i.color.onSecondary}))`),selectedLabelTextColor:o(`var(--m3e-tonal-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${i.color.onSecondary}))`),selectedStateLayerColor:o(`var(--m3e-tonal-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${i.color.onSecondary}))`)},focus:{iconColor:o(`var(--m3e-tonal-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${i.color.onSecondaryContainer}))`),labelTextColor:o(`var(--m3e-tonal-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${i.color.onSecondaryContainer}))`),stateLayerColor:o(`var(--m3e-tonal-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${i.color.onSecondaryContainer}))`),stateLayerOpacity:o(`var(--m3e-tonal-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${i.state.focusStateLayerOpacity}))`),containerElevation:o(`var(--m3e-tonal-button-focus-container-elevation, var(--m3e-button-focus-container-elevation, ${i.elevation.level0}))`),unselectedIconColor:o(`var(--m3e-tonal-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${i.color.onSecondaryContainer}))`),unselectedLabelTextColor:o(`var(--m3e-tonal-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${i.color.onSecondaryContainer}))`),unselectedStateLayerColor:o(`var(--m3e-tonal-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${i.color.onSecondaryContainer}))`),selectedIconColor:o(`var(--m3e-tonal-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${i.color.onSecondary}))`),selectedLabelTextColor:o(`var(--m3e-tonal-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${i.color.onSecondary}))`),selectedStateLayerColor:o(`var(--m3e-tonal-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${i.color.onSecondary}))`)},pressed:{iconColor:o(`var(--m3e-tonal-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${i.color.onSecondaryContainer}))`),labelTextColor:o(`var(--m3e-tonal-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${i.color.onSecondaryContainer}))`),stateLayerColor:o(`var(--m3e-tonal-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${i.color.onSecondaryContainer}))`),stateLayerOpacity:o(`var(--m3e-tonal-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${i.state.pressedStateLayerOpacity}))`),containerElevation:o(`var(--m3e-tonal-button-pressed-container-elevation, var(--m3e-button-pressed-container-elevation, ${i.elevation.level0}))`),unselectedIconColor:o(`var(--m3e-tonal-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${i.color.onSecondaryContainer}))`),unselectedLabelTextColor:o(`var(--m3e-tonal-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${i.color.onSecondaryContainer}))`),unselectedStateLayerColor:o(`var(--m3e-tonal-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${i.color.onSecondaryContainer}))`),selectedIconColor:o(`var(--m3e-tonal-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${i.color.onSecondary}))`),selectedLabelTextColor:o(`var(--m3e-tonal-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${i.color.onSecondary}))`),selectedStateLayerColor:o(`var(--m3e-tonal-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${i.color.onSecondary}))`)}},text:{labelTextColor:o(`var(--m3e-text-button-label-text-color, var(--m3e-button-label-text-color, ${i.color.primary}))`),iconColor:o(`var(--m3e-text-button-icon-color, var(--m3e-button-icon-color, ${i.color.primary}))`),unselectedLabelTextColor:o(`var(--m3e-text-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${i.color.primary}))`),unselectedIconColor:o(`var(--m3e-text-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${i.color.primary}))`),selectedLabelTextColor:o(`var(--m3e-text-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${i.color.primary}))`),selectedIconColor:o(`var(--m3e-text-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${i.color.primary}))`),disabled:{containerColor:o(`var(--m3e-text-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${i.color.onSurface}))`),containerOpacity:o("var(--m3e-text-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))"),iconColor:o(`var(--m3e-text-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${i.color.onSurface}))`),iconOpacity:o("var(--m3e-text-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))"),labelTextColor:o(`var(--m3e-text-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${i.color.onSurface}))`),labelTextOpacity:o("var(--m3e-text-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))")},hover:{iconColor:o(`var(--m3e-text-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${i.color.primary}))`),labelTextColor:o(`var(--m3e-text-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${i.color.primary}))`),stateLayerColor:o(`var(--m3e-text-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${i.color.primary}))`),stateLayerOpacity:o(`var(--m3e-text-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${i.state.hoverStateLayerOpacity}))`),unselectedIconColor:o(`var(--m3e-text-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${i.color.primary}))`),unselectedLabelTextColor:o(`var(--m3e-text-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${i.color.primary}))`),unselectedStateLayerColor:o(`var(--m3e-text-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${i.color.primary}))`),selectedIconColor:o(`var(--m3e-text-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${i.color.primary}))`),selectedLabelTextColor:o(`var(--m3e-text-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${i.color.primary}))`),selectedStateLayerColor:o(`var(--m3e-text-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${i.color.primary}))`)},focus:{iconColor:o(`var(--m3e-text-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${i.color.primary}))`),labelTextColor:o(`var(--m3e-text-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${i.color.primary}))`),stateLayerColor:o(`var(--m3e-text-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${i.color.primary}))`),stateLayerOpacity:o(`var(--m3e-text-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${i.state.focusStateLayerOpacity}))`),unselectedIconColor:o(`var(--m3e-text-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${i.color.primary}))`),unselectedLabelTextColor:o(`var(--m3e-text-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${i.color.primary}))`),unselectedStateLayerColor:o(`var(--m3e-text-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${i.color.primary}))`),selectedIconColor:o(`var(--m3e-text-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${i.color.primary}))`),selectedLabelTextColor:o(`var(--m3e-text-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${i.color.primary}))`),selectedStateLayerColor:o(`var(--m3e-text-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${i.color.primary}))`)},pressed:{iconColor:o(`var(--m3e-text-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${i.color.primary}))`),labelTextColor:o(`var(--m3e-text-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${i.color.primary}))`),stateLayerColor:o(`var(--m3e-text-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${i.color.primary}))`),stateLayerOpacity:o(`var(--m3e-text-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${i.state.pressedStateLayerOpacity}))`),unselectedIconColor:o(`var(--m3e-text-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${i.color.primary}))`),unselectedLabelTextColor:o(`var(--m3e-text-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${i.color.primary}))`),unselectedStateLayerColor:o(`var(--m3e-text-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${i.color.primary}))`),selectedIconColor:o(`var(--m3e-text-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${i.color.primary}))`),selectedLabelTextColor:o(`var(--m3e-text-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${i.color.primary}))`),selectedStateLayerColor:o(`var(--m3e-text-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${i.color.primary}))`)}}};function V(e){return a`:host([variant="${o(e)}"]:not(:disabled):not([disabled-interactive])) .base { background-color: ${q[e].containerColor??o("unset")}; --m3e-state-layer-hover-color: ${q[e].hover.stateLayerColor}; --m3e-state-layer-hover-opacity: ${q[e].hover.stateLayerOpacity}; --m3e-state-layer-focus-color: ${q[e].focus.stateLayerColor}; --m3e-state-layer-focus-opacity: ${q[e].focus.stateLayerOpacity}; --m3e-ripple-color: ${q[e].pressed.stateLayerColor}; --m3e-ripple-opacity: ${q[e].pressed.stateLayerOpacity}; --m3e-elevation-level: ${q[e].containerElevation??o("unset")}; --m3e-elevation-hover-level: ${q[e].hover.containerElevation??o("unset")}; --m3e-elevation-focus-level: ${q[e].focus.containerElevation??o("unset")}; --m3e-elevation-pressed-level: ${q[e].pressed.containerElevation??o("unset")}; } :host([variant="${o(e)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .base { background-color: ${q[e].unselectedContainerColor??o("unset")}; --m3e-state-layer-hover-color: ${q[e].hover.unselectedStateLayerColor}; --m3e-state-layer-focus-color: ${q[e].focus.unselectedStateLayerColor}; --m3e-ripple-color: ${q[e].pressed.unselectedStateLayerColor}; } :host([variant="${o(e)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .base { background-color: ${q[e].selectedContainerColor??o("unset")}; --m3e-state-layer-hover-color: ${q[e].hover.selectedStateLayerColor}; --m3e-state-layer-focus-color: ${q[e].focus.selectedStateLayerColor}; --m3e-ripple-color: ${q[e].pressed.selectedStateLayerColor}; } :host([variant="${o(e)}"]:not(:disabled):not([disabled-interactive])) .base { outline-color: ${q[e].outlineColor??o("unset")}; } :host([variant="${o(e)}"]:focus:not(:disabled):not([disabled-interactive])) .base { outline-color: ${q[e].focus.outlineColor??o("unset")}; } :host([variant="${o(e)}"]:hover:not(:disabled):not([disabled-interactive])) .base { outline-color: ${q[e].hover.outlineColor??o("unset")}; } :host( [variant="${o(e)}"]:is(:state(--pressed), :--pressed):not(:disabled):not([disabled-interactive]) ) .base { outline-color: ${q[e].pressed.outlineColor??o("unset")}; } :host([variant="${o(e)}"]:not(:disabled):not([disabled-interactive])) .label { color: ${q[e].labelTextColor}; } :host([variant="${o(e)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .label { color: ${q[e].unselectedLabelTextColor}; } :host([variant="${o(e)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .label { color: ${q[e].selectedLabelTextColor}; } :host([variant="${o(e)}"]:focus:not(:disabled):not([disabled-interactive])) .label { color: ${q[e].focus.labelTextColor}; } :host([variant="${o(e)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive])) .label { color: ${q[e].focus.unselectedLabelTextColor}; } :host([variant="${o(e)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .label { color: ${q[e].focus.selectedLabelTextColor}; } :host([variant="${o(e)}"]:hover:not(:disabled):not([disabled-interactive])) .label { color: ${q[e].hover.labelTextColor}; } :host([variant="${o(e)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive])) .label { color: ${q[e].hover.unselectedLabelTextColor}; } :host([variant="${o(e)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .label { color: ${q[e].hover.selectedLabelTextColor}; } :host( [variant="${o(e)}"]:is(:state(--pressed), :--pressed):not(:disabled):not([disabled-interactive]) ) .label { color: ${q[e].pressed.labelTextColor}; } :host( [variant="${o(e)}"][toggle]:not([selected]):is(:state(--pressed), :--pressed):not(:disabled):not( [disabled-interactive] ) ) .label { color: ${q[e].pressed.unselectedLabelTextColor}; } :host( [variant="${o(e)}"][toggle][selected]:is(:state(--pressed), :--pressed):not(:disabled):not( [disabled-interactive] ) ) .label { color: ${q[e].pressed.selectedLabelTextColor}; } :host([variant="${o(e)}"]:not(:disabled):not([disabled-interactive])) .icon { color: ${q[e].iconColor}; } :host([variant="${o(e)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ${q[e].unselectedIconColor}; } :host([variant="${o(e)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .icon { color: ${q[e].selectedIconColor}; } :host([variant="${o(e)}"]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${q[e].focus.iconColor}; } :host([variant="${o(e)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive])) .icon { color: ${q[e].focus.unselectedIconColor}; } :host([variant="${o(e)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${q[e].focus.selectedIconColor}; } :host([variant="${o(e)}"]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${q[e].hover.iconColor}; } :host([variant="${o(e)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive])) .icon { color: ${q[e].hover.unselectedIconColor}; } :host([variant="${o(e)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${q[e].hover.selectedIconColor}; } :host( [variant="${o(e)}"]:is(:state(--pressed), :--pressed):not(:disabled):not([disabled-interactive]) ) .icon { color: ${q[e].pressed.iconColor}; } :host( [variant="${o(e)}"][toggle]:not([selected]):is(:state(--pressed), :--pressed):not(:disabled):not( [disabled-interactive] ) ) .icon { color: ${q[e].pressed.unselectedIconColor}; } :host( [variant="${o(e)}"][toggle][selected]:is(:state(--pressed), :--pressed):not(:disabled):not( [disabled-interactive] ) ) .icon { color: ${q[e].pressed.selectedIconColor}; } :host([variant="${o(e)}"]:disabled) .base, :host([variant="${o(e)}"][disabled-interactive]) .base { --m3e-elevation-level: ${q[e].disabled.containerElevation??o("unset")}; outline-color: ${q[e].disabled.outlineColor??o("unset")}; background-color: color-mix( in srgb, ${q[e].disabled.containerColor} ${q[e].disabled.containerOpacity}, transparent ); } :host([variant="${o(e)}"]:disabled) .label, :host([variant="${o(e)}"][disabled-interactive]) .label { color: color-mix( in srgb, ${q[e].disabled.labelTextColor} ${q[e].disabled.labelTextOpacity}, transparent ); } :host([variant="${o(e)}"]:disabled) .icon, :host([variant="${o(e)}"][disabled-interactive]) .icon { color: color-mix( in srgb, ${q[e].disabled.iconColor} ${q[e].disabled.iconOpacity}, transparent ); }`}const E=[V("text"),V("elevated"),V("outlined"),V("filled"),V("tonal"),a`:host([variant="outlined"]:not([toggle][selected]):not(:disabled):not([disabled-interactive])) .base { outline-style: solid; }`];var R,j,H,F,W,B;let M=class extends(d(u(b(v(m(p(h(y(r,"button"),!0)))))))){constructor(){super(),R.add(this),j.set(this,t=>e(this,R,"m",H).call(this,t)),this.variant="text",this.shape="rounded",this.size="small",this.toggle=!1,this.selected=!1,new $(this,{callback:()=>{this.grouped&&this._handleResize()}}),new x(this,{callback:e=>{this.disabledInteractive||e||this.grouped||this._base?.style.removeProperty("--_button-shape")}}),new f(this,{isPressedKey:e=>" "===e,minPressedDuration:150,callback:t=>{this.disabled||this.disabledInteractive||(t?(e(this,R,"m",W).call(this),g()?e(this,R,"m",B).call(this,!0):requestAnimationFrame(()=>e(this,R,"m",B).call(this,!0))):e(this,R,"m",B).call(this,!1))}})}get grouped(){return C(this,"--grouped")}render(){return n`<div class="base"><m3e-elevation class="elevation" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-elevation><m3e-state-layer class="state-layer" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-ripple><div class="touch" aria-hidden="true"></div>${this[S]()}<div class="wrapper">${this.toggle?n`<slot class="icon" name="selected-icon" aria-hidden="true" @slotchange="${e(this,R,"m",F)}"></slot>`:l}<slot class="icon" name="icon" aria-hidden="true"></slot><div class="label">${this.toggle&&this.selected?n`<slot name="selected"><slot></slot></slot>`:n`<slot></slot>`}</div><slot class="icon" name="trailing-icon" aria-hidden="true"></slot></div></div>`}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,j,"f"))}disconnectedCallback(){super.disconnectedCallback(),["--pressed","--resting","--grouped","--connected"].forEach(e=>L(this,e)),this._base?.style.removeProperty("--_button-shape"),this.style.removeProperty("--_button-width"),this.style.removeProperty("--_adjacent-button-width"),L(this,"--adjacent-pressed"),this.removeEventListener("click",e(this,j,"f"))}firstUpdated(e){super.firstUpdated(e),[this._elevation,this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}updated(e){if(super.updated(e),(e.has("disabled")&&this.disabled||e.has("disabledInteractive")&&this.disabledInteractive)&&(L(this,"--pressed"),L(this,"--resting")),(e.has("toggle")||e.has("selected"))&&(this.ariaPressed=this.toggle?`${this.selected}`:null,this.toggle))for(const e of this.querySelectorAll("m3e-icon"))e.toggleAttribute("filled",this.selected)}_handleResize(){this.grouped&&!C(this,"--pressed")&&(this.style.setProperty("--_button-width",`${this.clientWidth}px`),e(this,R,"m",W).call(this,!0))}};j=new WeakMap,R=new WeakSet,H=function(e){(this.disabled||this.disabledInteractive)&&(e.preventDefault(),e.stopImmediatePropagation()),this.toggle&&!e.defaultPrevented&&(this.selected=!this.selected,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?this.dispatchEvent(new Event("change",{bubbles:!0})):this.selected=!this.selected)},F=function(e){this._base?.classList.toggle("with-selected-icon",T(e.target))},W=function(e=!1){if(!this._base)return;const t=parseFloat(getComputedStyle(this._base).borderRadius);if(!isNaN(t)||e){const o=this.clientHeight/2;(o<t||e)&&this._base?.style.setProperty("--_button-shape",`${o}px`)}},B=function(e){k(this,"--pressed",e),k(this,"--resting",!e);const t=this.closest("m3e-button-group");if(t){const o=this.getBoundingClientRect().width,a=[...t.querySelectorAll("m3e-button,m3e-icon-button")],r=a.indexOf(this);for(let t=0;t<a.length;t++){const l=a[t];t===r-1||t===r+1?(l.style.setProperty("--_adjacent-button-width",`${o}px`),k(l,"--adjacent-pressed",e)):(l.style.removeProperty("--_adjacent-button-width"),L(l,"--adjacent-pressed"))}}},M.styles=[P,E,_],t([s(".base")],M.prototype,"_base",void 0),t([s(".elevation")],M.prototype,"_elevation",void 0),t([s(".focus-ring")],M.prototype,"_focusRing",void 0),t([s(".state-layer")],M.prototype,"_stateLayer",void 0),t([s(".ripple")],M.prototype,"_ripple",void 0),t([c({reflect:!0})],M.prototype,"variant",void 0),t([c({reflect:!0})],M.prototype,"shape",void 0),t([c({reflect:!0})],M.prototype,"size",void 0),t([c({type:Boolean,reflect:!0})],M.prototype,"toggle",void 0),t([c({type:Boolean,reflect:!0})],M.prototype,"selected",void 0),t([z(40)],M.prototype,"_handleResize",null),M=t([O("m3e-button")],M);export{M as M3eButtonElement};
6
+ import{__classPrivateFieldGet as e,__decorate as t}from"tslib";import{unsafeCSS as o,css as a,LitElement as r,nothing as l,html as n}from"lit";import{query as s,property as c}from"lit/decorators.js";import{DesignToken as i,KeyboardClick as d,LinkButton as u,FormSubmitter as b,Focusable as v,DisabledInteractive as m,Disabled as p,AttachInternals as h,Role as y,ResizeController as $,FocusController as x,PressedController as f,prefersReducedMotion as g,hasCustomState as C,renderPseudoLink as S,deleteCustomState as L,hasAssignedNodes as T,setCustomState as k,debounce as z,customElement as O}from"@m3e/web/core";const w={"extra-small":{containerHeight:o(`calc(var(--m3e-button-extra-small-container-height, var(--m3e-button-container-height, 2rem)) + ${i.density.calc(0)})`),outlineThickness:o("var(--m3e-button-extra-small-outline-thickness, var(--m3e-button-outline-thickness, 1px))"),labelTextFontSize:o(`var(--m3e-button-extra-small-label-text-font-size, var(--m3e-button-label-text-font-size, ${i.typescale.standard.label.large.fontSize}))`),labelTextFontWeight:o(`var(--m3e-button-extra-small-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${i.typescale.standard.label.large.fontWeight}))`),labelTextLineHeight:o(`var(--m3e-button-extra-small-label-text-line-height, var(--m3e-button-label-text-line-height, ${i.typescale.standard.label.large.lineHeight}))`),labelTextTracking:o(`var(--m3e-button-extra-small-label-text-tracking, var(--m3e-button-label-text-tracking, ${i.typescale.standard.label.large.tracking}))`),iconSize:o("var(--m3e-button-extra-small-icon-size, var(--m3e-button-icon-size, 1.25rem))"),shapeRound:o(`var(--m3e-button-extra-small-shape-round, var(--m3e-button-shape-round, ${i.shape.corner.full}))`),shapeSquare:o(`var(--m3e-button-extra-small-shape-square, var(--m3e-button-shape-square, ${i.shape.corner.medium}))`),selectedShapeRound:o(`var(--m3e-button-extra-small-selected-shape-round, var(--m3e-button-selected-shape-round, ${i.shape.corner.medium}))`),selectedShapeSquare:o(`var(--m3e-button-extra-small-selected-shape-square, var(--m3e-button-selected-shape-square, ${i.shape.corner.full}))`),shapePressedMorph:o(`var(--m3e-button-extra-small-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${i.shape.corner.small}))`),leadingSpace:o("var(--m3e-button-extra-small-leading-space, var(--m3e-button-leading-space, 0.75rem))"),trailingSpace:o("var(--m3e-button-extra-small-trailing-space, var(--m3e-button-trailing-space, 0.75rem))"),iconLabelSpace:o("var(--m3e-button-extra-small-icon-label-space, var(--m3e-button-icon-label-space, 0.5rem))")},small:{containerHeight:o(`calc(var(--m3e-button-small-container-height, var(--m3e-button-container-height, 2.5rem)) + ${i.density.calc(-1)})`),outlineThickness:o("var(--m3e-button-small-outline-thickness, var(--m3e-button-outline-thickness, 1px))"),labelTextFontSize:o(`var(--m3e-button-small-label-text-font-size, var(--m3e-button-label-text-font-size, ${i.typescale.standard.label.large.fontSize}))`),labelTextFontWeight:o(`var(--m3e-button-small-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${i.typescale.standard.label.large.fontWeight}))`),labelTextLineHeight:o(`var(--m3e-button-small-label-text-line-height, var(--m3e-button-label-text-line-height, ${i.typescale.standard.label.large.lineHeight}))`),labelTextTracking:o(`var(--m3e-button-small-label-text-tracking, var(--m3e-button-label-text-tracking, ${i.typescale.standard.label.large.tracking}))`),iconSize:o("var(--m3e-button-small-icon-size, var(--m3e-button-icon-size, 1.25rem))"),shapeRound:o(`var(--m3e-button-small-shape-round, var(--m3e-button-shape-round, ${i.shape.corner.full}))`),shapeSquare:o(`var(--m3e-button-small-shape-square, var(--m3e-button-shape-square, ${i.shape.corner.medium}))`),selectedShapeRound:o(`var(--m3e-button-small-selected-shape-round, var(--m3e-button-selected-shape-round, ${i.shape.corner.medium}))`),selectedShapeSquare:o(`var(--m3e-button-small-selected-shape-square, var(--m3e-button-selected-shape-square, ${i.shape.corner.full}))`),shapePressedMorph:o(`var(--m3e-button-small-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${i.shape.corner.small}))`),leadingSpace:o("var(--m3e-button-small-leading-space, var(--m3e-button-leading-space, 1rem))"),trailingSpace:o("var(--m3e-button-small-trailing-space, var(--m3e-button-trailing-space, 1rem))"),iconLabelSpace:o("var(--m3e-button-small-icon-label-space, var(--m3e-button-icon-label-space, 0.5rem))")},medium:{containerHeight:o(`calc(var(--m3e-button-medium-container-height, var(--m3e-button-container-height, 3.5rem)) + ${i.density.calc(-2)})`),outlineThickness:o("var(--m3e-button-medium-outline-thickness, var(--m3e-button-outline-thickness, 1px))"),labelTextFontSize:o(`var(--m3e-button-medium-label-text-font-size, var(--m3e-button-label-text-font-size, ${i.typescale.standard.body.large.fontSize}))`),labelTextFontWeight:o(`var(--m3e-button-medium-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${i.typescale.standard.body.large.fontWeight}))`),labelTextLineHeight:o(`var(--m3e-button-medium-label-text-line-height, var(--m3e-button-label-text-line-height, ${i.typescale.standard.body.large.lineHeight}))`),labelTextTracking:o(`var(--m3e-button-medium-label-text-tracking, var(--m3e-button-label-text-tracking, ${i.typescale.standard.body.large.tracking}))`),iconSize:o("var(--m3e-button-medium-icon-size, var(--m3e-button-icon-size, 1.5rem))"),shapeRound:o(`var(--m3e-button-medium-shape-round, var(--m3e-button-shape-round, ${i.shape.corner.full}))`),shapeSquare:o(`var(--m3e-button-medium-shape-square, var(--m3e-button-shape-square, ${i.shape.corner.large}))`),selectedShapeRound:o(`var(--m3e-button-medium-selected-shape-round, var(--m3e-button-selected-shape-round, ${i.shape.corner.large}))`),selectedShapeSquare:o(`var(--m3e-button-medium-selected-shape-square, var(--m3e-button-selected-shape-square, ${i.shape.corner.full}))`),shapePressedMorph:o(`var(--m3e-button-medium-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${i.shape.corner.medium}))`),leadingSpace:o("var(--m3e-button-medium-leading-space, var(--m3e-button-leading-space, 1.5rem))"),trailingSpace:o("var(--m3e-button-medium-trailing-space, var(--m3e-button-trailing-space, 1.5rem))"),iconLabelSpace:o("var(--m3e-button-medium-icon-label-space, var(--m3e-button-icon-label-space, 0.5rem))")},large:{containerHeight:o(`calc(var(--m3e-button-large-container-height, var(--m3e-button-container-height, 6rem)) + ${i.density.calc(-3)})`),outlineThickness:o("var(--m3e-button-large-outline-thickness, var(--m3e-button-outline-thickness, 2px))"),labelTextFontSize:o(`var(--m3e-button-large-label-text-font-size, var(--m3e-button-label-text-font-size, ${i.typescale.standard.headline.small.fontSize}))`),labelTextFontWeight:o(`var(--m3e-button-large-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${i.typescale.standard.headline.small.fontWeight}))`),labelTextLineHeight:o(`var(--m3e-button-large-label-text-line-height, var(--m3e-button-label-text-line-height, ${i.typescale.standard.headline.small.lineHeight}))`),labelTextTracking:o(`var(--m3e-button-large-label-text-tracking, var(--m3e-button-label-text-tracking, ${i.typescale.standard.headline.small.tracking}))`),iconSize:o("var(--m3e-button-large-icon-size, var(--m3e-button-icon-size, 2rem))"),shapeRound:o(`var(--m3e-button-large-shape-round, var(--m3e-button-shape-round, ${i.shape.corner.full}))`),shapeSquare:o(`var(--m3e-button-large-shape-square, var(--m3e-button-shape-square, ${i.shape.corner.extraLarge}))`),selectedShapeRound:o(`var(--m3e-button-large-selected-shape-round, var(--m3e-button-selected-shape-round, ${i.shape.corner.extraLarge}))`),selectedShapeSquare:o(`var(--m3e-button-large-selected-shape-square, var(--m3e-button-selected-shape-square, ${i.shape.corner.full}))`),shapePressedMorph:o(`var(--m3e-button-large-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${i.shape.corner.large}))`),leadingSpace:o("var(--m3e-button-large-leading-space, var(--m3e-button-leading-space, 3rem))"),trailingSpace:o("var(--m3e-button-large-trailing-space, var(--m3e-button-trailing-space, 3rem))"),iconLabelSpace:o("var(--m3e-button-large-icon-label-space, var(--m3e-button-icon-label-space, 0.75rem))")},"extra-large":{containerHeight:o(`calc(var(--m3e-button-extra-large-container-height, var(--m3e-button-container-height, 8.5rem)) + ${i.density.calc(-3)})`),outlineThickness:o("var(--m3e-button-extra-large-outline-thickness, var(--m3e-button-outline-thickness, 3px))"),labelTextFontSize:o(`var(--m3e-button-extra-large-label-text-font-size, var(--m3e-button-label-text-font-size, ${i.typescale.standard.headline.large.fontSize}))`),labelTextFontWeight:o(`var(--m3e-button-extra-large-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${i.typescale.standard.headline.large.fontWeight}))`),labelTextLineHeight:o(`var(--m3e-button-extra-large-label-text-line-height, var(--m3e-button-label-text-line-height, ${i.typescale.standard.headline.large.lineHeight}))`),labelTextTracking:o(`var(--m3e-button-extra-large-label-text-tracking, var(--m3e-button-label-text-tracking, ${i.typescale.standard.headline.large.tracking}))`),iconSize:o("var(--m3e-button-extra-large-icon-size, var(--m3e-button-icon-size, 2.5rem))"),shapeRound:o(`var(--m3e-button-extra-large-shape-round, var(--m3e-button-shape-round, ${i.shape.corner.full}))`),shapeSquare:o(`var(--m3e-button-extra-large-shape-square, var(--m3e-button-shape-square, ${i.shape.corner.extraLarge}))`),selectedShapeRound:o(`var(--m3e-button-extra-large-selected-shape-round, var(--m3e-button-selected-shape-round, ${i.shape.corner.extraLarge}))`),selectedShapeSquare:o(`var(--m3e-button-extra-large-selected-shape-square, var(--m3e-button-selected-shape-square, ${i.shape.corner.full}))`),shapePressedMorph:o(`var(--m3e-button-extra-large-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${i.shape.corner.large}))`),leadingSpace:o("var(--m3e-button-extra-large-leading-space, var(--m3e-button-leading-space, 4rem))"),trailingSpace:o("var(--m3e-button-extra-large-trailing-space, var(--m3e-button-trailing-space, 4rem))"),iconLabelSpace:o("var(--m3e-button-extra-large-icon-label-space, var(--m3e-button-icon-label-space, 1rem))")}};function I(e){return a`:host([size="${o(e)}"]) .base { height: ${w[e].containerHeight}; } :host([size="${o(e)}"]) .wrapper { padding-inline-start: ${w[e].leadingSpace}; padding-inline-end: ${w[e].trailingSpace}; column-gap: ${w[e].iconLabelSpace}; } :host( [size="${o(e)}"]:is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected)):is( :state(--adjacent-pressed), :--adjacent-pressed ):not(:is(:state(--pressed), :--pressed)) ) .wrapper { padding-inline-start: calc( ${w[e].leadingSpace} - calc( calc(var(--_adjacent-button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) / 4.25 ) ); padding-inline-end: calc( ${w[e].trailingSpace} - calc( calc(var(--_adjacent-button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) / 4.25 ) ); } :host([size="${o(e)}"]) .label { font-size: ${w[e].labelTextFontSize}; font-weight: ${w[e].labelTextFontWeight}; line-height: ${w[e].labelTextLineHeight}; letter-spacing: ${w[e].labelTextTracking}; } :host([size="${o(e)}"]) .icon { font-size: ${w[e].iconSize}; --m3e-icon-size: ${w[e].iconSize}; } :host([size="${o(e)}"]) .base { outline-offset: calc(0px - ${w[e].outlineThickness}); outline-width: ${w[e].outlineThickness}; } :host(:not(:is(:state(--connected), :--connected))[size="${o(e)}"][shape="rounded"]) .base { border-radius: var(--_button-shape, ${w[e].shapeRound}); } :host( :not(:is(:state(--connected), :--connected))[size="${o(e)}"][shape="rounded"][toggle][selected]:not( :is(:state(--pressed), :--pressed) ) ) .base { border-radius: ${w[e].selectedShapeRound}; } :host(:not(:is(:state(--connected), :--connected))[size="${o(e)}"][shape="square"]) .base { border-radius: ${w[e].shapeSquare}; } :host( :not(:is(:state(--connected), :--connected))[size="${o(e)}"][shape="square"][toggle][selected]:not( :is(:state(--pressed), :--pressed) ) ) .base { border-radius: var(--_button-shape, ${w[e].selectedShapeSquare}); } :host(:not(:is(:state(--connected), :--connected))[size="${o(e)}"]:is(:state(--pressed), :--pressed)) .base { border-radius: ${w[e].shapePressedMorph}; } :host(:is(:state(--connected), :--connected)[size="${o(e)}"][shape="rounded"]) .base { border-start-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${w[e].shapeRound}) ); border-end-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${w[e].shapeRound}) ); border-start-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${w[e].shapeRound}) ); border-end-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${w[e].shapeRound}) ); } :host(:is(:state(--connected), :--connected)[size="${o(e)}"][shape="square"]) .base { border-start-start-radius: var(--_button-square-start-shape, ${w[e].shapeSquare}); border-end-start-radius: var(--_button-square-start-shape, ${w[e].shapeSquare}); border-start-end-radius: var(--_button-square-end-shape, ${w[e].shapeSquare}); border-end-end-radius: var(--_button-square-end-shape, ${w[e].shapeSquare}); } :host( :is(:state(--connected), :--connected)[size="${o(e)}"][shape="square"][toggle][selected]:not( :is(:state(--pressed), :--pressed) ) ) .base { border-radius: var(--_button-shape, ${w[e].selectedShapeSquare}); } :host(:is(:state(--connected), :--connected)[size="${o(e)}"]:is(:state(--pressed), :--pressed)) .base { border-start-start-radius: var(--_button-start-shape-pressed-morph, ${w[e].shapePressedMorph}); border-end-start-radius: var(--_button-start-shape-pressed-morph, ${w[e].shapePressedMorph}); border-start-end-radius: var(--_button-end-shape-pressed-morph, ${w[e].shapePressedMorph}); border-end-end-radius: var(--_button-end-shape-pressed-morph, ${w[e].shapePressedMorph}); }`}const P=[I("extra-small"),I("small"),I("medium"),I("large"),I("extra-large")],_=a`:host { display: inline-block; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; transition: ${o(`background-color ${i.motion.duration.short4} ${i.motion.easing.standard}`)}; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } :host(:is(:state(--pressed), :--pressed)) .base, :host(:is(:state(--resting), :--resting)) .base { transition: ${o(`background-color ${i.motion.duration.short4} ${i.motion.easing.standard},\n border-radius ${i.motion.spring.fastEffects}`)}; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; } .label { justify-self: center; flex: 1 1 auto; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: ${o(`color ${i.motion.duration.short4} ${i.motion.easing.standard}`)}; } .icon { transition: ${o(`color ${i.motion.duration.short4} ${i.motion.easing.standard}`)}; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } ::slotted([slot="icon"]), ::slotted([slot="selected-icon"]), ::slotted([slot="trailing-icon"]) { font-size: inherit !important; flex: none; } ::slotted(svg[slot="icon"]), ::slotted(svg[slot="selected-icon"]), ::slotted(svg[slot="trailing-icon"]) { width: 1em; height: 1em; } :host([toggle]:not([selected])) .base.with-selected-icon slot[name="selected-icon"], :host([toggle][selected]) .base.with-selected-icon slot[name="icon"] { display: none; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } :host(:is(:state(--grouped), :--grouped):is(:state(--connected), :--connected)) { flex: 1 1 auto; } :host(:is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected))) { transition: ${o(`padding-inline ${i.motion.spring.fastEffects}`)}; } :host( :is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected)):not( :is(:state(--adjacent-pressed), :--adjacent-pressed) ):not(:is(:state(--pressed), :--pressed)) ) { flex-shrink: 0; flex-grow: 0; } :host( :is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected)):is( :state(--adjacent-pressed), :--adjacent-pressed ):not(:is(:state(--pressed), :--pressed)) ) { flex-shrink: 1; min-width: 0; } :host( :is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected)):is( :state(--adjacent-pressed), :--adjacent-pressed ):not(:is(:state(--pressed), :--pressed)) ) .label { text-overflow: clip; } :host( :is(:state(--grouped), :--grouped):not(:is(:state(--connected), :--connected)):is( :state(--pressed), :--pressed ):not([disabled-interactive]):not(:disabled) ) { flex-shrink: 0; flex-basis: calc( var(--_button-width) + calc(var(--_button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) ); } @media (forced-colors: active) { .base, .label, .icon { transition: none; } :host(:is(:state(--pressed), :--pressed)) .base, :host(:is(:state(--resting), :--resting)) .base { transition: ${o(`border-radius ${i.motion.spring.fastEffects}`)}; } :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .label, :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .icon { color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .label, :host([variant]:hover:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected]):focus) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .icon, :host([variant]:hover:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .icon, :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected]):focus) .icon { color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .base { background-color: ButtonText; outline: none; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .label, :host([variant]:hover:not(:disabled):not([disabled-interactive])[toggle][selected]) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]:focus) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .icon, :host([variant]:hover:not(:disabled):not([disabled-interactive])[toggle][selected]) .icon, :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]:focus) .icon { forced-color-adjust: none; color: ButtonFace; background-color: ButtonText; } :host([variant]:disabled) .base, :host([variant][disabled-interactive]) .base { outline-color: GrayText; background-color: unset; } :host([variant]:disabled) .label, :host([variant][disabled-interactive]) .label, :host([variant]:disabled) .icon, :host([variant][disabled-interactive]) .icon { color: GrayText; } .base { outline-style: solid; } :host([size="extra-small"]) .base { outline-offset: calc(0px - var(--m3e-button-extra-small-outline-thickness, 1px)); outline-width: var(--m3e-button-extra-small-outline-thickness, 1px); } :host([size="small"]) .base { outline-offset: calc(0px - var(--m3e-button-small-outline-thickness, 1px)); outline-width: var(--m3e-button-small-outline-thickness, 1px); } :host([size="medium"]) .base { outline-offset: calc(0px - var(--m3e-button-medium-outline-thickness, 1px)); outline-width: var(--m3e-button-medium-outline-thickness, 1px); } :host([size="large"]) .base { outline-offset: calc(0px - var(--m3e-button-large-outline-thickness, 2px)); outline-width: var(--m3e-button-large-outline-thickness, 2px); } :host([size="extra-large"]) .base { outline-offset: calc(0px - var(--m3e-button-extra-large-outline-thickness, 3px)); outline-width: var(--m3e-button-extra-large-outline-thickness, 3px); } } @media (prefers-reduced-motion) { :host(:is(:state(--pressed), :--pressed)) .base, :host(:is(:state(--resting), :--resting)) .base, .base, .label, .icon { transition: none; } }`,q={elevated:{labelTextColor:o(`var(--m3e-elevated-button-label-text-color, var(--m3e-button-label-text-color, ${i.color.primary}))`),iconColor:o(`var(--m3e-elevated-button-icon-color, var(--m3e-button-icon-color, ${i.color.primary}))`),containerColor:o(`var(--m3e-elevated-button-container-color, var(--m3e-button-container-color, ${i.color.surfaceContainerLow}))`),containerElevation:o(`var(--m3e-elevated-button-container-elevation, var(--m3e-button-container-elevation, ${i.elevation.level1}))`),unselectedLabelTextColor:o(`var(--m3e-elevated-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${i.color.primary}))`),unselectedIconColor:o(`var(--m3e-elevated-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${i.color.primary}))`),unselectedContainerColor:o(`var(--m3e-elevated-button-unselected-container-color, var(--m3e-button-unselected-container-color, ${i.color.surfaceContainerLow}))`),selectedLabelTextColor:o(`var(--m3e-elevated-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${i.color.onPrimary}))`),selectedIconColor:o(`var(--m3e-elevated-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${i.color.onPrimary}))`),selectedContainerColor:o(`var(--m3e-elevated-button-selected-container-color, var(--m3e-button-selected-container-color, ${i.color.primary}))`),disabled:{containerColor:o(`var(--m3e-elevated-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${i.color.onSurface}))`),containerOpacity:o("var(--m3e-elevated-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))"),iconColor:o(`var(--m3e-elevated-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${i.color.onSurface}))`),iconOpacity:o("var(--m3e-elevated-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))"),labelTextColor:o(`var(--m3e-elevated-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${i.color.onSurface}))`),labelTextOpacity:o("var(--m3e-elevated-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))"),containerElevation:o(`var(--m3e-elevated-button-disabled-container-elevation, var(--m3e-button-disabled-container-elevation, ${i.elevation.level0}))`)},hover:{iconColor:o(`var(--m3e-elevated-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${i.color.primary}))`),labelTextColor:o(`var(--m3e-elevated-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${i.color.primary}))`),stateLayerColor:o(`var(--m3e-elevated-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${i.color.primary}))`),stateLayerOpacity:o(`var(--m3e-elevated-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${i.state.hoverStateLayerOpacity}))`),containerElevation:o(`var(--m3e-elevated-button-hover-container-elevation, var(--m3e-button-hover-container-elevation, ${i.elevation.level2}))`),unselectedIconColor:o(`var(--m3e-elevated-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${i.color.primary}))`),unselectedLabelTextColor:o(`var(--m3e-elevated-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${i.color.primary}))`),unselectedStateLayerColor:o(`var(--m3e-elevated-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${i.color.primary}))`),selectedIconColor:o(`var(--m3e-elevated-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${i.color.onPrimary}))`),selectedLabelTextColor:o(`var(--m3e-elevated-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${i.color.onPrimary}))`),selectedStateLayerColor:o(`var(--m3e-elevated-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${i.color.onPrimary}))`)},focus:{iconColor:o(`var(--m3e-elevated-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${i.color.primary}))`),labelTextColor:o(`var(--m3e-elevated-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${i.color.primary}))`),stateLayerColor:o(`var(--m3e-elevated-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${i.color.primary}))`),stateLayerOpacity:o(`var(--m3e-elevated-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${i.state.focusStateLayerOpacity}))`),containerElevation:o(`var(--m3e-elevated-button-focus-container-elevation, var(--m3e-button-focus-container-elevation, ${i.elevation.level1}))`),unselectedLabelTextColor:o(`var(--m3e-elevated-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${i.color.primary}))`),unselectedIconColor:o(`var(--m3e-elevated-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${i.color.primary}))`),unselectedStateLayerColor:o(`var(--m3e-elevated-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${i.color.primary}))`),selectedIconColor:o(`var(--m3e-elevated-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${i.color.onPrimary}))`),selectedLabelTextColor:o(`var(--m3e-elevated-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${i.color.onPrimary}))`),selectedStateLayerColor:o(`var(--m3e-elevated-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${i.color.onPrimary}))`)},pressed:{iconColor:o(`var(--m3e-elevated-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${i.color.primary}))`),labelTextColor:o(`var(--m3e-elevated-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${i.color.primary}))`),stateLayerColor:o(`var(--m3e-elevated-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${i.color.primary}))`),stateLayerOpacity:o(`var(--m3e-elevated-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${i.state.pressedStateLayerOpacity}))`),containerElevation:o(`var(--m3e-elevated-button-pressed-container-elevation, var(--m3e-button-pressed-container-elevation, ${i.elevation.level1}))`),unselectedLabelTextColor:o(`var(--m3e-elevated-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${i.color.primary}))`),unselectedIconColor:o(`var(--m3e-elevated-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${i.color.primary}))`),unselectedStateLayerColor:o(`var(--m3e-elevated-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${i.color.primary}))`),selectedIconColor:o(`var(--m3e-elevated-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${i.color.onPrimary}))`),selectedLabelTextColor:o(`var(--m3e-elevated-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${i.color.onPrimary}))`),selectedStateLayerColor:o(`var(--m3e-elevated-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${i.color.onPrimary}))`)}},outlined:{labelTextColor:o(`var(--m3e-outlined-button-label-text-color, var(--m3e-button-label-text-color, ${i.color.onSurfaceVariant}))`),iconColor:o(`var(--m3e-outlined-button-icon-color, var(--m3e-button-icon-color, ${i.color.onSurfaceVariant}))`),outlineColor:o(`var(--m3e-outlined-button-outline-color, var(--m3e-button-outline-color, ${i.color.outlineVariant}))`),unselectedLabelTextColor:o(`var(--m3e-outlined-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${i.color.onSurfaceVariant}))`),unselectedIconColor:o(`var(--m3e-outlined-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${i.color.onSurfaceVariant}))`),selectedLabelTextColor:o(`var(--m3e-outlined-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${i.color.inverseOnSurface}))`),selectedIconColor:o(`var(--m3e-outlined-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${i.color.inverseOnSurface}))`),selectedContainerColor:o(`var(--m3e-outlined-button-selected-container-color, var(--m3e-button-selected-container-color, ${i.color.inverseSurface}))`),disabled:{containerColor:o(`var(--m3e-outlined-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${i.color.onSurface}))`),containerOpacity:o("var(--m3e-outlined-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))"),iconColor:o(`var(--m3e-outlined-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${i.color.onSurface}))`),iconOpacity:o("var(--m3e-outlined-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))"),labelTextColor:o(`var(--m3e-outlined-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${i.color.onSurface}))`),labelTextOpacity:o("var(--m3e-outlined-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))"),outlineColor:o(`var(--m3e-outlined-button-disabled-outline-color, var(--m3e-button-disabled-outline-color, ${i.color.outlineVariant}))`)},hover:{iconColor:o(`var(--m3e-outlined-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${i.color.onSurfaceVariant}))`),labelTextColor:o(`var(--m3e-outlined-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${i.color.onSurfaceVariant}))`),outlineColor:o(`var(--m3e-outlined-button-hover-outline-color, var(--m3e-button-hover-outline-color, ${i.color.outlineVariant}))`),stateLayerColor:o(`var(--m3e-outlined-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${i.color.onSurfaceVariant}))`),stateLayerOpacity:o(`var(--m3e-outlined-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${i.state.hoverStateLayerOpacity}))`),unselectedIconColor:o(`var(--m3e-outlined-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${i.color.onSurfaceVariant}))`),unselectedLabelTextColor:o(`var(--m3e-outlined-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${i.color.onSurfaceVariant}))`),unselectedStateLayerColor:o(`var(--m3e-outlined-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${i.color.onSurfaceVariant}))`),selectedIconColor:o(`var(--m3e-outlined-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${i.color.inverseOnSurface}))`),selectedLabelTextColor:o(`var(--m3e-outlined-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${i.color.inverseOnSurface}))`),selectedStateLayerColor:o(`var(--m3e-outlined-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${i.color.inverseOnSurface}))`)},focus:{iconColor:o(`var(--m3e-outlined-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${i.color.onSurfaceVariant}))`),labelTextColor:o(`var(--m3e-outlined-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${i.color.onSurfaceVariant}))`),outlineColor:o(`var(--m3e-outlined-button-focus-outline-color, var(--m3e-button-focus-outline-color, ${i.color.outlineVariant}))`),stateLayerColor:o(`var(--m3e-outlined-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${i.color.onSurfaceVariant}))`),stateLayerOpacity:o(`var(--m3e-outlined-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${i.state.focusStateLayerOpacity}))`),unselectedIconColor:o(`var(--m3e-outlined-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${i.color.onSurfaceVariant}))`),unselectedLabelTextColor:o(`var(--m3e-outlined-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${i.color.onSurfaceVariant}))`),unselectedStateLayerColor:o(`var(--m3e-outlined-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${i.color.onSurfaceVariant}))`),selectedIconColor:o(`var(--m3e-outlined-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${i.color.inverseOnSurface}))`),selectedLabelTextColor:o(`var(--m3e-outlined-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${i.color.inverseOnSurface}))`),selectedStateLayerColor:o(`var(--m3e-outlined-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${i.color.inverseOnSurface}))`)},pressed:{iconColor:o(`var(--m3e-outlined-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${i.color.onSurfaceVariant}))`),labelTextColor:o(`var(--m3e-outlined-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${i.color.onSurfaceVariant}))`),outlineColor:o(`var(--m3e-outlined-button-pressed-outline-color, var(--m3e-button-pressed-outline-color, ${i.color.outlineVariant}))`),stateLayerColor:o(`var(--m3e-outlined-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${i.color.onSurfaceVariant}))`),stateLayerOpacity:o(`var(--m3e-outlined-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${i.state.pressedStateLayerOpacity}))`),unselectedIconColor:o(`var(--m3e-outlined-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${i.color.onSurfaceVariant}))`),unselectedLabelTextColor:o(`var(--m3e-outlined-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${i.color.onSurfaceVariant}))`),unselectedStateLayerColor:o(`var(--m3e-outlined-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${i.color.onSurfaceVariant}))`),selectedIconColor:o(`var(--m3e-outlined-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${i.color.inverseOnSurface}))`),selectedLabelTextColor:o(`var(--m3e-outlined-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${i.color.inverseOnSurface}))`),selectedStateLayerColor:o(`var(--m3e-outlined-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${i.color.inverseOnSurface}))`)}},filled:{labelTextColor:o(`var(--m3e-filled-button-label-text-color, var(--m3e-button-label-text-color, ${i.color.onPrimary}))`),iconColor:o(`var(--m3e-filled-button-icon-color, var(--m3e-button-icon-color, ${i.color.onPrimary}))`),containerColor:o(`var(--m3e-filled-button-container-color, var(--m3e-button-container-color, ${i.color.primary}))`),containerElevation:o(`var(--m3e-filled-button-container-elevation, var(--m3e-button-container-elevation, ${i.elevation.level0}))`),unselectedLabelTextColor:o(`var(--m3e-filled-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${i.color.onSurfaceVariant}))`),unselectedIconColor:o(`var(--m3e-filled-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${i.color.onSurfaceVariant}))`),unselectedContainerColor:o(`var(--m3e-filled-button-unselected-container-color, var(--m3e-button-unselected-container-color, ${i.color.surfaceContainer}))`),selectedLabelTextColor:o(`var(--m3e-filled-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${i.color.onPrimary}))`),selectedIconColor:o(`var(--m3e-filled-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${i.color.onPrimary}))`),selectedContainerColor:o(`var(--m3e-filled-button-selected-container-color, var(--m3e-button-selected-container-color, ${i.color.primary}))`),disabled:{containerColor:o(`var(--m3e-filled-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${i.color.onSurface}))`),containerOpacity:o("var(--m3e-filled-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))"),iconColor:o(`var(--m3e-filled-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${i.color.onSurface}))`),iconOpacity:o("var(--m3e-filled-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))"),labelTextColor:o(`var(--m3e-filled-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${i.color.onSurface}))`),labelTextOpacity:o("var(--m3e-filled-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))"),containerElevation:o(`var(--m3e-filled-button-disabled-container-elevation, var(--m3e-button-disabled-container-elevation, ${i.elevation.level0}))`)},hover:{iconColor:o(`var(--m3e-filled-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${i.color.onPrimary}))`),labelTextColor:o(`var(--m3e-filled-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${i.color.onPrimary}))`),stateLayerColor:o(`var(--m3e-filled-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${i.color.onPrimary}))`),stateLayerOpacity:o(`var(--m3e-filled-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${i.state.hoverStateLayerOpacity}))`),containerElevation:o(`var(--m3e-filled-button-hover-container-elevation, var(--m3e-button-hover-container-elevation, ${i.elevation.level1}))`),unselectedIconColor:o(`var(--m3e-filled-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${i.color.onSurfaceVariant}))`),unselectedLabelTextColor:o(`var(--m3e-filled-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${i.color.onSurfaceVariant}))`),unselectedStateLayerColor:o(`var(--m3e-filled-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${i.color.onSurfaceVariant}))`),selectedIconColor:o(`var(--m3e-filled-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${i.color.onPrimary}))`),selectedLabelTextColor:o(`var(--m3e-filled-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${i.color.onPrimary}))`),selectedStateLayerColor:o(`var(--m3e-filled-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${i.color.onPrimary}))`)},focus:{iconColor:o(`var(--m3e-filled-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${i.color.onPrimary}))`),labelTextColor:o(`var(--m3e-filled-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${i.color.onPrimary}))`),stateLayerColor:o(`var(--m3e-filled-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${i.color.onPrimary}))`),stateLayerOpacity:o(`var(--m3e-filled-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${i.state.focusStateLayerOpacity}))`),containerElevation:o(`var(--m3e-filled-button-focus-container-elevation, var(--m3e-button-focus-container-elevation, ${i.elevation.level0}))`),unselectedIconColor:o(`var(--m3e-filled-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${i.color.onSurfaceVariant}))`),unselectedLabelTextColor:o(`var(--m3e-filled-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${i.color.onSurfaceVariant}))`),unselectedStateLayerColor:o(`var(--m3e-filled-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${i.color.onSurfaceVariant}))`),selectedIconColor:o(`var(--m3e-filled-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${i.color.onPrimary}))`),selectedLabelTextColor:o(`var(--m3e-filled-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${i.color.onPrimary}))`),selectedStateLayerColor:o(`var(--m3e-filled-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${i.color.onPrimary}))`)},pressed:{iconColor:o(`var(--m3e-filled-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${i.color.onPrimary}))`),labelTextColor:o(`var(--m3e-filled-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${i.color.onPrimary}))`),stateLayerColor:o(`var(--m3e-filled-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${i.color.onPrimary}))`),stateLayerOpacity:o(`var(--m3e-filled-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${i.state.pressedStateLayerOpacity}))`),containerElevation:o(`var(--m3e-filled-button-pressed-container-elevation, var(--m3e-button-pressed-container-elevation, ${i.elevation.level0}))`),unselectedIconColor:o(`var(--m3e-filled-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${i.color.onSurfaceVariant}))`),unselectedLabelTextColor:o(`var(--m3e-filled-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${i.color.onSurfaceVariant}))`),unselectedStateLayerColor:o(`var(--m3e-filled-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${i.color.onSurfaceVariant}))`),selectedIconColor:o(`var(--m3e-filled-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${i.color.onPrimary}))`),selectedLabelTextColor:o(`var(--m3e-filled-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${i.color.onPrimary}))`),selectedStateLayerColor:o(`var(--m3e-filled-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${i.color.onPrimary}))`)}},tonal:{labelTextColor:o(`var(--m3e-tonal-button-label-text-color, var(--m3e-button-label-text-color, ${i.color.onSecondaryContainer}))`),iconColor:o(`var(--m3e-tonal-button-icon-color, var(--m3e-button-icon-color, ${i.color.onSecondaryContainer}))`),containerColor:o(`var(--m3e-tonal-button-container-color, var(--m3e-button-container-color, ${i.color.secondaryContainer}))`),containerElevation:o(`var(--m3e-tonal-button-container-elevation, var(--m3e-button-container-elevation, ${i.elevation.level0}))`),unselectedLabelTextColor:o(`var(--m3e-tonal-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${i.color.onSecondaryContainer}))`),unselectedIconColor:o(`var(--m3e-tonal-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${i.color.onSecondaryContainer}))`),unselectedContainerColor:o(`var(--m3e-tonal-button-unselected-container-color, var(--m3e-button-unselected-container-color, ${i.color.secondaryContainer}))`),selectedLabelTextColor:o(`var(--m3e-tonal-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${i.color.onSecondary}))`),selectedIconColor:o(`var(--m3e-tonal-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${i.color.onSecondary}))`),selectedContainerColor:o(`var(--m3e-tonal-button-selected-container-color, var(--m3e-button-selected-container-color, ${i.color.secondary}))`),disabled:{containerColor:o(`var(--m3e-tonal-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${i.color.onSurface}))`),containerOpacity:o("var(--m3e-tonal-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))"),iconColor:o(`var(--m3e-tonal-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${i.color.onSurface}))`),iconOpacity:o("var(--m3e-tonal-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))"),labelTextColor:o(`var(--m3e-tonal-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${i.color.onSurface}))`),labelTextOpacity:o("var(--m3e-tonal-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))"),containerElevation:o(`var(--m3e-tonal-button-disabled-container-elevation, var(--m3e-button-disabled-container-elevation, ${i.elevation.level0}))`)},hover:{iconColor:o(`var(--m3e-tonal-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${i.color.onSecondaryContainer}))`),labelTextColor:o(`var(--m3e-tonal-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${i.color.onSecondaryContainer}))`),stateLayerColor:o(`var(--m3e-tonal-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${i.color.onSecondaryContainer}))`),stateLayerOpacity:o(`var(--m3e-tonal-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${i.state.hoverStateLayerOpacity}))`),containerElevation:o(`var(--m3e-tonal-button-hover-container-elevation, var(--m3e-button-hover-container-elevation, ${i.elevation.level1}))`),unselectedIconColor:o(`var(--m3e-tonal-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${i.color.onSecondaryContainer}))`),unselectedLabelTextColor:o(`var(--m3e-tonal-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${i.color.onSecondaryContainer}))`),unselectedStateLayerColor:o(`var(--m3e-tonal-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${i.color.onSecondaryContainer}))`),selectedIconColor:o(`var(--m3e-tonal-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${i.color.onSecondary}))`),selectedLabelTextColor:o(`var(--m3e-tonal-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${i.color.onSecondary}))`),selectedStateLayerColor:o(`var(--m3e-tonal-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${i.color.onSecondary}))`)},focus:{iconColor:o(`var(--m3e-tonal-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${i.color.onSecondaryContainer}))`),labelTextColor:o(`var(--m3e-tonal-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${i.color.onSecondaryContainer}))`),stateLayerColor:o(`var(--m3e-tonal-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${i.color.onSecondaryContainer}))`),stateLayerOpacity:o(`var(--m3e-tonal-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${i.state.focusStateLayerOpacity}))`),containerElevation:o(`var(--m3e-tonal-button-focus-container-elevation, var(--m3e-button-focus-container-elevation, ${i.elevation.level0}))`),unselectedIconColor:o(`var(--m3e-tonal-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${i.color.onSecondaryContainer}))`),unselectedLabelTextColor:o(`var(--m3e-tonal-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${i.color.onSecondaryContainer}))`),unselectedStateLayerColor:o(`var(--m3e-tonal-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${i.color.onSecondaryContainer}))`),selectedIconColor:o(`var(--m3e-tonal-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${i.color.onSecondary}))`),selectedLabelTextColor:o(`var(--m3e-tonal-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${i.color.onSecondary}))`),selectedStateLayerColor:o(`var(--m3e-tonal-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${i.color.onSecondary}))`)},pressed:{iconColor:o(`var(--m3e-tonal-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${i.color.onSecondaryContainer}))`),labelTextColor:o(`var(--m3e-tonal-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${i.color.onSecondaryContainer}))`),stateLayerColor:o(`var(--m3e-tonal-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${i.color.onSecondaryContainer}))`),stateLayerOpacity:o(`var(--m3e-tonal-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${i.state.pressedStateLayerOpacity}))`),containerElevation:o(`var(--m3e-tonal-button-pressed-container-elevation, var(--m3e-button-pressed-container-elevation, ${i.elevation.level0}))`),unselectedIconColor:o(`var(--m3e-tonal-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${i.color.onSecondaryContainer}))`),unselectedLabelTextColor:o(`var(--m3e-tonal-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${i.color.onSecondaryContainer}))`),unselectedStateLayerColor:o(`var(--m3e-tonal-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${i.color.onSecondaryContainer}))`),selectedIconColor:o(`var(--m3e-tonal-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${i.color.onSecondary}))`),selectedLabelTextColor:o(`var(--m3e-tonal-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${i.color.onSecondary}))`),selectedStateLayerColor:o(`var(--m3e-tonal-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${i.color.onSecondary}))`)}},text:{labelTextColor:o(`var(--m3e-text-button-label-text-color, var(--m3e-button-label-text-color, ${i.color.primary}))`),iconColor:o(`var(--m3e-text-button-icon-color, var(--m3e-button-icon-color, ${i.color.primary}))`),unselectedLabelTextColor:o(`var(--m3e-text-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${i.color.primary}))`),unselectedIconColor:o(`var(--m3e-text-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${i.color.primary}))`),selectedLabelTextColor:o(`var(--m3e-text-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${i.color.primary}))`),selectedIconColor:o(`var(--m3e-text-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${i.color.primary}))`),disabled:{containerColor:o(`var(--m3e-text-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${i.color.onSurface}))`),containerOpacity:o("var(--m3e-text-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))"),iconColor:o(`var(--m3e-text-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${i.color.onSurface}))`),iconOpacity:o("var(--m3e-text-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))"),labelTextColor:o(`var(--m3e-text-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${i.color.onSurface}))`),labelTextOpacity:o("var(--m3e-text-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))")},hover:{iconColor:o(`var(--m3e-text-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${i.color.primary}))`),labelTextColor:o(`var(--m3e-text-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${i.color.primary}))`),stateLayerColor:o(`var(--m3e-text-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${i.color.primary}))`),stateLayerOpacity:o(`var(--m3e-text-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${i.state.hoverStateLayerOpacity}))`),unselectedIconColor:o(`var(--m3e-text-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${i.color.primary}))`),unselectedLabelTextColor:o(`var(--m3e-text-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${i.color.primary}))`),unselectedStateLayerColor:o(`var(--m3e-text-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${i.color.primary}))`),selectedIconColor:o(`var(--m3e-text-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${i.color.primary}))`),selectedLabelTextColor:o(`var(--m3e-text-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${i.color.primary}))`),selectedStateLayerColor:o(`var(--m3e-text-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${i.color.primary}))`)},focus:{iconColor:o(`var(--m3e-text-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${i.color.primary}))`),labelTextColor:o(`var(--m3e-text-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${i.color.primary}))`),stateLayerColor:o(`var(--m3e-text-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${i.color.primary}))`),stateLayerOpacity:o(`var(--m3e-text-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${i.state.focusStateLayerOpacity}))`),unselectedIconColor:o(`var(--m3e-text-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${i.color.primary}))`),unselectedLabelTextColor:o(`var(--m3e-text-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${i.color.primary}))`),unselectedStateLayerColor:o(`var(--m3e-text-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${i.color.primary}))`),selectedIconColor:o(`var(--m3e-text-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${i.color.primary}))`),selectedLabelTextColor:o(`var(--m3e-text-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${i.color.primary}))`),selectedStateLayerColor:o(`var(--m3e-text-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${i.color.primary}))`)},pressed:{iconColor:o(`var(--m3e-text-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${i.color.primary}))`),labelTextColor:o(`var(--m3e-text-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${i.color.primary}))`),stateLayerColor:o(`var(--m3e-text-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${i.color.primary}))`),stateLayerOpacity:o(`var(--m3e-text-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${i.state.pressedStateLayerOpacity}))`),unselectedIconColor:o(`var(--m3e-text-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${i.color.primary}))`),unselectedLabelTextColor:o(`var(--m3e-text-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${i.color.primary}))`),unselectedStateLayerColor:o(`var(--m3e-text-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${i.color.primary}))`),selectedIconColor:o(`var(--m3e-text-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${i.color.primary}))`),selectedLabelTextColor:o(`var(--m3e-text-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${i.color.primary}))`),selectedStateLayerColor:o(`var(--m3e-text-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${i.color.primary}))`)}}};function V(e){return a`:host([variant="${o(e)}"]:not(:disabled):not([disabled-interactive])) .base { background-color: ${q[e].containerColor??o("unset")}; --m3e-state-layer-hover-color: ${q[e].hover.stateLayerColor}; --m3e-state-layer-hover-opacity: ${q[e].hover.stateLayerOpacity}; --m3e-state-layer-focus-color: ${q[e].focus.stateLayerColor}; --m3e-state-layer-focus-opacity: ${q[e].focus.stateLayerOpacity}; --m3e-ripple-color: ${q[e].pressed.stateLayerColor}; --m3e-ripple-opacity: ${q[e].pressed.stateLayerOpacity}; --m3e-elevation-level: ${q[e].containerElevation??o("unset")}; --m3e-elevation-hover-level: ${q[e].hover.containerElevation??o("unset")}; --m3e-elevation-focus-level: ${q[e].focus.containerElevation??o("unset")}; --m3e-elevation-pressed-level: ${q[e].pressed.containerElevation??o("unset")}; } :host([variant="${o(e)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .base { background-color: ${q[e].unselectedContainerColor??o("unset")}; --m3e-state-layer-hover-color: ${q[e].hover.unselectedStateLayerColor}; --m3e-state-layer-focus-color: ${q[e].focus.unselectedStateLayerColor}; --m3e-ripple-color: ${q[e].pressed.unselectedStateLayerColor}; } :host([variant="${o(e)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .base { background-color: ${q[e].selectedContainerColor??o("unset")}; --m3e-state-layer-hover-color: ${q[e].hover.selectedStateLayerColor}; --m3e-state-layer-focus-color: ${q[e].focus.selectedStateLayerColor}; --m3e-ripple-color: ${q[e].pressed.selectedStateLayerColor}; } :host([variant="${o(e)}"]:not(:disabled):not([disabled-interactive])) .base { outline-color: ${q[e].outlineColor??o("unset")}; } :host([variant="${o(e)}"]:focus:not(:disabled):not([disabled-interactive])) .base { outline-color: ${q[e].focus.outlineColor??o("unset")}; } :host([variant="${o(e)}"]:hover:not(:disabled):not([disabled-interactive])) .base { outline-color: ${q[e].hover.outlineColor??o("unset")}; } :host( [variant="${o(e)}"]:is(:state(--pressed), :--pressed):not(:disabled):not([disabled-interactive]) ) .base { outline-color: ${q[e].pressed.outlineColor??o("unset")}; } :host([variant="${o(e)}"]:not(:disabled):not([disabled-interactive])) .label { color: ${q[e].labelTextColor}; } :host([variant="${o(e)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .label { color: ${q[e].unselectedLabelTextColor}; } :host([variant="${o(e)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .label { color: ${q[e].selectedLabelTextColor}; } :host([variant="${o(e)}"]:focus:not(:disabled):not([disabled-interactive])) .label { color: ${q[e].focus.labelTextColor}; } :host([variant="${o(e)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive])) .label { color: ${q[e].focus.unselectedLabelTextColor}; } :host([variant="${o(e)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .label { color: ${q[e].focus.selectedLabelTextColor}; } :host([variant="${o(e)}"]:hover:not(:disabled):not([disabled-interactive])) .label { color: ${q[e].hover.labelTextColor}; } :host([variant="${o(e)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive])) .label { color: ${q[e].hover.unselectedLabelTextColor}; } :host([variant="${o(e)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .label { color: ${q[e].hover.selectedLabelTextColor}; } :host( [variant="${o(e)}"]:is(:state(--pressed), :--pressed):not(:disabled):not([disabled-interactive]) ) .label { color: ${q[e].pressed.labelTextColor}; } :host( [variant="${o(e)}"][toggle]:not([selected]):is(:state(--pressed), :--pressed):not(:disabled):not( [disabled-interactive] ) ) .label { color: ${q[e].pressed.unselectedLabelTextColor}; } :host( [variant="${o(e)}"][toggle][selected]:is(:state(--pressed), :--pressed):not(:disabled):not( [disabled-interactive] ) ) .label { color: ${q[e].pressed.selectedLabelTextColor}; } :host([variant="${o(e)}"]:not(:disabled):not([disabled-interactive])) .icon { color: ${q[e].iconColor}; } :host([variant="${o(e)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ${q[e].unselectedIconColor}; } :host([variant="${o(e)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .icon { color: ${q[e].selectedIconColor}; } :host([variant="${o(e)}"]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${q[e].focus.iconColor}; } :host([variant="${o(e)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive])) .icon { color: ${q[e].focus.unselectedIconColor}; } :host([variant="${o(e)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${q[e].focus.selectedIconColor}; } :host([variant="${o(e)}"]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${q[e].hover.iconColor}; } :host([variant="${o(e)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive])) .icon { color: ${q[e].hover.unselectedIconColor}; } :host([variant="${o(e)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${q[e].hover.selectedIconColor}; } :host( [variant="${o(e)}"]:is(:state(--pressed), :--pressed):not(:disabled):not([disabled-interactive]) ) .icon { color: ${q[e].pressed.iconColor}; } :host( [variant="${o(e)}"][toggle]:not([selected]):is(:state(--pressed), :--pressed):not(:disabled):not( [disabled-interactive] ) ) .icon { color: ${q[e].pressed.unselectedIconColor}; } :host( [variant="${o(e)}"][toggle][selected]:is(:state(--pressed), :--pressed):not(:disabled):not( [disabled-interactive] ) ) .icon { color: ${q[e].pressed.selectedIconColor}; } :host([variant="${o(e)}"]:disabled) .base, :host([variant="${o(e)}"][disabled-interactive]) .base { --m3e-elevation-level: ${q[e].disabled.containerElevation??o("unset")}; outline-color: ${q[e].disabled.outlineColor??o("unset")}; background-color: color-mix( in srgb, ${q[e].disabled.containerColor} ${q[e].disabled.containerOpacity}, transparent ); } :host([variant="${o(e)}"]:disabled) .label, :host([variant="${o(e)}"][disabled-interactive]) .label { color: color-mix( in srgb, ${q[e].disabled.labelTextColor} ${q[e].disabled.labelTextOpacity}, transparent ); } :host([variant="${o(e)}"]:disabled) .icon, :host([variant="${o(e)}"][disabled-interactive]) .icon { color: color-mix( in srgb, ${q[e].disabled.iconColor} ${q[e].disabled.iconOpacity}, transparent ); }`}const E=[V("text"),V("elevated"),V("outlined"),V("filled"),V("tonal"),a`:host([variant="outlined"]:not([toggle][selected]):not(:disabled):not([disabled-interactive])) .base { outline-style: solid; }`];var R,j,H,F,W,B;let M=class extends(d(u(b(v(m(p(h(y(r,"button"),!0)))))))){constructor(){super(),R.add(this),j.set(this,t=>e(this,R,"m",H).call(this,t)),this.variant="text",this.shape="rounded",this.size="small",this.toggle=!1,this.selected=!1,new $(this,{callback:()=>{this.grouped&&this._handleResize()}}),new x(this,{callback:e=>{this.disabledInteractive||e||this.grouped||this._base?.style.removeProperty("--_button-shape")}}),new f(this,{isPressedKey:e=>" "===e,minPressedDuration:150,callback:t=>{this.disabled||this.disabledInteractive||(t?(e(this,R,"m",W).call(this),g()?e(this,R,"m",B).call(this,!0):requestAnimationFrame(()=>e(this,R,"m",B).call(this,!0))):e(this,R,"m",B).call(this,!1))}})}get grouped(){return C(this,"--grouped")}render(){return n`<div class="base"><m3e-elevation class="elevation" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-elevation><m3e-state-layer class="state-layer" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-ripple><div class="touch" aria-hidden="true"></div>${this[S]()}<div class="wrapper">${this.toggle?n`<slot class="icon" name="selected-icon" aria-hidden="true" @slotchange="${e(this,R,"m",F)}"></slot>`:l}<slot class="icon" name="icon" aria-hidden="true"></slot><div class="label">${this.toggle&&this.selected?n`<slot name="selected"><slot></slot></slot>`:n`<slot></slot>`}</div><slot class="icon" name="trailing-icon" aria-hidden="true"></slot></div></div>`}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,j,"f"))}disconnectedCallback(){super.disconnectedCallback(),["--pressed","--resting","--grouped","--connected"].forEach(e=>L(this,e)),this._base?.style.removeProperty("--_button-shape"),this.style.removeProperty("--_button-width"),this.style.removeProperty("--_adjacent-button-width"),L(this,"--adjacent-pressed"),this.removeEventListener("click",e(this,j,"f"))}firstUpdated(e){super.firstUpdated(e),[this._elevation,this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}updated(e){if(super.updated(e),(e.has("disabled")&&this.disabled||e.has("disabledInteractive")&&this.disabledInteractive)&&(L(this,"--pressed"),L(this,"--resting")),(e.has("toggle")||e.has("selected"))&&(this.ariaPressed=this.toggle?`${this.selected}`:null,this.toggle))for(const e of this.querySelectorAll("m3e-icon"))e.toggleAttribute("filled",this.selected)}_handleResize(){this.grouped&&!C(this,"--pressed")&&(this.style.setProperty("--_button-width",`${this.clientWidth}px`),e(this,R,"m",W).call(this,!0))}};j=new WeakMap,R=new WeakSet,H=function(e){(this.disabled||this.disabledInteractive)&&(e.preventDefault(),e.stopImmediatePropagation()),this.toggle&&!e.defaultPrevented&&this.dispatchEvent(new Event("beforeinput",{bubbles:!0,cancelable:!0}))&&(this.selected=!this.selected,this.dispatchEvent(new Event("input",{bubbles:!0})),this.dispatchEvent(new Event("change",{bubbles:!0})))},F=function(e){this._base?.classList.toggle("with-selected-icon",T(e.target))},W=function(e=!1){if(!this._base)return;const t=parseFloat(getComputedStyle(this._base).borderRadius);if(!isNaN(t)||e){const o=this.clientHeight/2;(o<t||e)&&this._base?.style.setProperty("--_button-shape",`${o}px`)}},B=function(e){k(this,"--pressed",e),k(this,"--resting",!e);const t=this.closest("m3e-button-group");if(t){const o=this.getBoundingClientRect().width,a=[...t.querySelectorAll("m3e-button,m3e-icon-button")],r=a.indexOf(this);for(let t=0;t<a.length;t++){const l=a[t];t===r-1||t===r+1?(l.style.setProperty("--_adjacent-button-width",`${o}px`),k(l,"--adjacent-pressed",e)):(l.style.removeProperty("--_adjacent-button-width"),L(l,"--adjacent-pressed"))}}},M.styles=[P,E,_],t([s(".base")],M.prototype,"_base",void 0),t([s(".elevation")],M.prototype,"_elevation",void 0),t([s(".focus-ring")],M.prototype,"_focusRing",void 0),t([s(".state-layer")],M.prototype,"_stateLayer",void 0),t([s(".ripple")],M.prototype,"_ripple",void 0),t([c({reflect:!0})],M.prototype,"variant",void 0),t([c({reflect:!0})],M.prototype,"shape",void 0),t([c({reflect:!0})],M.prototype,"size",void 0),t([c({type:Boolean,reflect:!0})],M.prototype,"toggle",void 0),t([c({type:Boolean,reflect:!0})],M.prototype,"selected",void 0),t([z(40)],M.prototype,"_handleResize",null),M=t([O("m3e-button")],M);export{M as M3eButtonElement};
7
7
  //# sourceMappingURL=button.min.js.map