@m3e/web 2.0.0 → 2.0.1

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 (147) hide show
  1. package/dist/all.js +1161 -941
  2. package/dist/all.js.map +1 -1
  3. package/dist/all.min.js +59 -59
  4. package/dist/all.min.js.map +1 -1
  5. package/dist/bottom-sheet.js +1 -1
  6. package/dist/bottom-sheet.js.map +1 -1
  7. package/dist/bottom-sheet.min.js +1 -1
  8. package/dist/bottom-sheet.min.js.map +1 -1
  9. package/dist/button.js +387 -317
  10. package/dist/button.js.map +1 -1
  11. package/dist/button.min.js +2 -2
  12. package/dist/button.min.js.map +1 -1
  13. package/dist/card.js +73 -73
  14. package/dist/card.js.map +1 -1
  15. package/dist/card.min.js +5 -5
  16. package/dist/card.min.js.map +1 -1
  17. package/dist/checkbox.js +5 -1
  18. package/dist/checkbox.js.map +1 -1
  19. package/dist/checkbox.min.js +1 -1
  20. package/dist/checkbox.min.js.map +1 -1
  21. package/dist/core-a11y.js.map +1 -1
  22. package/dist/core-a11y.min.js.map +1 -1
  23. package/dist/core-bidi.js.map +1 -1
  24. package/dist/core-bidi.min.js.map +1 -1
  25. package/dist/core-layout.js.map +1 -1
  26. package/dist/core-layout.min.js.map +1 -1
  27. package/dist/core-platform.js.map +1 -1
  28. package/dist/core-platform.min.js.map +1 -1
  29. package/dist/core.js +42 -32
  30. package/dist/core.js.map +1 -1
  31. package/dist/core.min.js +2 -2
  32. package/dist/core.min.js.map +1 -1
  33. package/dist/css-custom-data.json +1356 -511
  34. package/dist/custom-elements.json +9890 -9217
  35. package/dist/fab.js +299 -258
  36. package/dist/fab.js.map +1 -1
  37. package/dist/fab.min.js +6 -6
  38. package/dist/fab.min.js.map +1 -1
  39. package/dist/form-field.js +10 -6
  40. package/dist/form-field.js.map +1 -1
  41. package/dist/form-field.min.js +4 -4
  42. package/dist/form-field.min.js.map +1 -1
  43. package/dist/html-custom-data.json +152 -152
  44. package/dist/icon-button.js +288 -232
  45. package/dist/icon-button.js.map +1 -1
  46. package/dist/icon-button.min.js +5 -5
  47. package/dist/icon-button.min.js.map +1 -1
  48. package/dist/list.js +18 -3
  49. package/dist/list.js.map +1 -1
  50. package/dist/list.min.js +8 -8
  51. package/dist/list.min.js.map +1 -1
  52. package/dist/menu.js +23 -12
  53. package/dist/menu.js.map +1 -1
  54. package/dist/menu.min.js +7 -7
  55. package/dist/menu.min.js.map +1 -1
  56. package/dist/nav-bar.js +1 -1
  57. package/dist/nav-bar.js.map +1 -1
  58. package/dist/nav-bar.min.js +1 -1
  59. package/dist/nav-bar.min.js.map +1 -1
  60. package/dist/nav-rail.js +1 -1
  61. package/dist/nav-rail.js.map +1 -1
  62. package/dist/nav-rail.min.js +4 -4
  63. package/dist/nav-rail.min.js.map +1 -1
  64. package/dist/option.js +1 -1
  65. package/dist/option.js.map +1 -1
  66. package/dist/option.min.js +1 -1
  67. package/dist/option.min.js.map +1 -1
  68. package/dist/radio-group.js +4 -0
  69. package/dist/radio-group.js.map +1 -1
  70. package/dist/radio-group.min.js +1 -1
  71. package/dist/radio-group.min.js.map +1 -1
  72. package/dist/slider.js +2 -2
  73. package/dist/slider.js.map +1 -1
  74. package/dist/slider.min.js +3 -3
  75. package/dist/slider.min.js.map +1 -1
  76. package/dist/snackbar.js.map +1 -1
  77. package/dist/snackbar.min.js.map +1 -1
  78. package/dist/split-button.js +1 -0
  79. package/dist/split-button.js.map +1 -1
  80. package/dist/split-button.min.js +1 -1
  81. package/dist/split-button.min.js.map +1 -1
  82. package/dist/src/bottom-sheet/BottomSheetElement.d.ts.map +1 -1
  83. package/dist/src/button/ButtonElement.d.ts +70 -0
  84. package/dist/src/button/ButtonElement.d.ts.map +1 -1
  85. package/dist/src/button/styles/ButtonSizeToken.d.ts.map +1 -1
  86. package/dist/src/button/styles/ButtonVariantToken.d.ts.map +1 -1
  87. package/dist/src/card/styles/CardVariantToken.d.ts.map +1 -1
  88. package/dist/src/checkbox/CheckboxElement.d.ts.map +1 -1
  89. package/dist/src/core/a11y/AriaDescriber.d.ts +3 -1
  90. package/dist/src/core/a11y/AriaDescriber.d.ts.map +1 -1
  91. package/dist/src/core/a11y/InteractivityChecker.d.ts +3 -1
  92. package/dist/src/core/a11y/InteractivityChecker.d.ts.map +1 -1
  93. package/dist/src/core/a11y/LiveAnnouncer.d.ts +3 -1
  94. package/dist/src/core/a11y/LiveAnnouncer.d.ts.map +1 -1
  95. package/dist/src/core/bidi/Directionality.d.ts +3 -1
  96. package/dist/src/core/bidi/Directionality.d.ts.map +1 -1
  97. package/dist/src/core/layout/BreakpointObserver.d.ts +3 -1
  98. package/dist/src/core/layout/BreakpointObserver.d.ts.map +1 -1
  99. package/dist/src/core/platform/Platform.d.ts +3 -1
  100. package/dist/src/core/platform/Platform.d.ts.map +1 -1
  101. package/dist/src/core/shared/controllers/PressedController.d.ts.map +1 -1
  102. package/dist/src/core/shared/primitives/FocusRingElement.d.ts +2 -0
  103. package/dist/src/core/shared/primitives/FocusRingElement.d.ts.map +1 -1
  104. package/dist/src/core/shared/primitives/FocusRingToken.d.ts +4 -0
  105. package/dist/src/core/shared/primitives/FocusRingToken.d.ts.map +1 -1
  106. package/dist/src/core/shared/primitives/ScrollContainerElement.d.ts.map +1 -1
  107. package/dist/src/fab/FabElement.d.ts +41 -0
  108. package/dist/src/fab/FabElement.d.ts.map +1 -1
  109. package/dist/src/fab/styles/FabSizeToken.d.ts.map +1 -1
  110. package/dist/src/fab/styles/FabVariantToken.d.ts.map +1 -1
  111. package/dist/src/form-field/FormFieldElement.d.ts.map +1 -1
  112. package/dist/src/icon-button/IconButtonElement.d.ts +56 -0
  113. package/dist/src/icon-button/IconButtonElement.d.ts.map +1 -1
  114. package/dist/src/icon-button/styles/IconButtonSizeToken.d.ts.map +1 -1
  115. package/dist/src/icon-button/styles/IconButtonVariantToken.d.ts.map +1 -1
  116. package/dist/src/list/ListItemButtonElement.d.ts +1 -0
  117. package/dist/src/list/ListItemButtonElement.d.ts.map +1 -1
  118. package/dist/src/list/ListItemElement.d.ts.map +1 -1
  119. package/dist/src/list/ListOptionElement.d.ts +1 -0
  120. package/dist/src/list/ListOptionElement.d.ts.map +1 -1
  121. package/dist/src/menu/MenuElement.d.ts +2 -0
  122. package/dist/src/menu/MenuElement.d.ts.map +1 -1
  123. package/dist/src/menu/MenuItemElementBase.d.ts +1 -0
  124. package/dist/src/menu/MenuItemElementBase.d.ts.map +1 -1
  125. package/dist/src/nav-rail/NavRailElement.d.ts.map +1 -1
  126. package/dist/src/option/OptionPanelElement.d.ts.map +1 -1
  127. package/dist/src/radio-group/RadioElement.d.ts.map +1 -1
  128. package/dist/src/slider/SliderThumbElement.d.ts.map +1 -1
  129. package/dist/src/snackbar/Snackbar.d.ts +3 -1
  130. package/dist/src/snackbar/Snackbar.d.ts.map +1 -1
  131. package/dist/src/split-button/SplitButtonElement.d.ts.map +1 -1
  132. package/dist/src/switch/SwitchElement.d.ts.map +1 -1
  133. package/dist/src/tabs/TabElement.d.ts.map +1 -1
  134. package/dist/src/tabs/TabsElement.d.ts.map +1 -1
  135. package/dist/switch.js +5 -1
  136. package/dist/switch.js.map +1 -1
  137. package/dist/switch.min.js +2 -2
  138. package/dist/switch.min.js.map +1 -1
  139. package/dist/tabs.js +2 -2
  140. package/dist/tabs.js.map +1 -1
  141. package/dist/tabs.min.js +3 -3
  142. package/dist/tabs.min.js.map +1 -1
  143. package/dist/tooltip.js +1 -1
  144. package/dist/tooltip.js.map +1 -1
  145. package/dist/tooltip.min.js +1 -1
  146. package/dist/tooltip.min.js.map +1 -1
  147. package/package.json +1 -1
package/dist/all.js CHANGED
@@ -2158,7 +2158,7 @@ M3eBottomSheetElement.styles = css`:host { display: block; position: fixed; left
2158
2158
  visibility ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } @starting-style { :host([modal]:popover-open)::backdrop { background-color: color-mix( in srgb, var(--m3e-bottom-sheet-scrim-color, ${DesignToken$1.color.scrim}) 0%, transparent ); } } .base { display: flex; border-radius: inherit; flex-direction: column; height: 100%; --_bottom-sheet-peek-height: var(--m3e-bottom-sheet-peek-height, 0); --_bottom-sheet-top-space: var(--m3e-bottom-sheet-compact-top-space, 4.5rem); } @media (max-height: 640px) { .base { --_bottom-sheet-top-space: var(--m3e-bottom-sheet-top-space, 3.5rem); } } .body { flex: 1 1 auto; overflow-y: auto; scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.scrollbar.color}; padding-block-end: var(--m3e-bottom-sheet-padding-block, 0.5rem); padding-inline: var(--m3e-bottom-sheet-padding-inline, 1rem); font-size: var(--m3e-bottom-sheet-content-font-size, ${DesignToken$1.typescale.standard.body.medium.fontSize}); font-weight: var( --m3e-bottom-sheet-content-font-weight, ${DesignToken$1.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-bottom-sheet-content-line-height, ${DesignToken$1.typescale.standard.body.medium.lineHeight} ); letter-spacing: var(--m3e-bottom-sheet-content-tracking, ${DesignToken$1.typescale.standard.body.medium.tracking}); } .content { height: fit-content; } :host(:not([handle]):not(.-has-header)) .header { display: none; } :host(:not([handle]):not(.-has-header)) .body, .header { border-top-left-radius: inherit; border-top-right-radius: inherit; padding-block-start: var(--m3e-bottom-sheet-padding-block, 0.5rem); font-size: var(--m3e-bottom-sheet-header-font-size, ${DesignToken$1.typescale.standard.title.large.fontSize}); font-weight: var(--m3e-bottom-sheet-header-font-weight, ${DesignToken$1.typescale.standard.title.large.fontWeight}); line-height: var(--m3e-bottom-sheet-header-line-height, ${DesignToken$1.typescale.standard.title.large.lineHeight}); letter-spacing: var(--m3e-bottom-sheet-header-tracking, ${DesignToken$1.typescale.standard.title.large.tracking}); } .header { cursor: grab; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; flex: none; display: flex; flex-direction: column; min-height: 3rem; --m3e-app-bar-container-color: var(--m3e-bottom-sheet-container-color, ${DesignToken$1.color.surfaceContainerLow}); } .handle-row { position: relative; flex: none; display: flex; align-items: center; justify-content: center; opacity: 1; visibility: visible; transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard},
2159
2159
  padding ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard},
2160
2160
  height ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard},
2161
- visibility ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; height: var(--m3e-bottom-sheet-handle-container-height, 1.5rem); } .handle { position: relative; width: var(--m3e-bottom-sheet-handle-width, 2rem); height: var(--m3e-bottom-sheet-handle-height, 0.25rem); border-radius: var(--m3e-bottom-sheet-handle-shape, ${DesignToken$1.shape.corner.full}); background-color: var(--m3e-bottom-sheet-handle-color, ${DesignToken$1.color.onSurfaceVariant}); } .focus-ring { top: calc(0px - var(--m3e-bottom-sheet-handle-focus-ring-offset, 0.125rem)); left: calc(0px - var(--m3e-bottom-sheet-handle-focus-ring-offset, 0.125rem)); right: calc(0px - var(--m3e-bottom-sheet-handle-focus-ring-offset, 0.125rem)); bottom: calc(0px - var(--m3e-bottom-sheet-handle-focus-ring-offset, 0.125rem)); } .handle-touch { position: absolute; aspect-ratio: 1 / 1; height: 3rem; left: calc(0px - calc(calc(3rem - var(--m3e-bottom-sheet-handle-width, 2rem)) / 2)); right: calc(0px - calc(calc(3rem - var(--m3e-bottom-sheet-handle-width, 2rem)) / 2)); top: calc( 0px - calc( calc(3rem - var(--m3e-bottom-sheet-handle-container-height, 1.5rem)) - calc( var(--m3e-bottom-sheet-handle-height, 0.25rem) / 2 ) ) ); } @media (prefers-reduced-motion) { :host, :host([modal])::backdrop, :host([modal]:popover-open)::backdrop, .handle { transition: none; } } @media (forced-colors: active) { :host([modal])::backdrop, :host([modal]:popover-open)::backdrop { transition: none; } .base { border-style: solid; border-width: 1px; border-color: CanvasText; } .handle { background-color: ButtonText; } }`;
2161
+ visibility ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; height: var(--m3e-bottom-sheet-handle-container-height, 1.5rem); } .handle { position: relative; width: var(--m3e-bottom-sheet-handle-width, 2rem); height: var(--m3e-bottom-sheet-handle-height, 4px); border-radius: var(--m3e-bottom-sheet-handle-shape, ${DesignToken$1.shape.corner.full}); background-color: var(--m3e-bottom-sheet-handle-color, ${DesignToken$1.color.onSurfaceVariant}); } .handle-touch { position: absolute; aspect-ratio: 1 / 1; height: 3rem; left: calc(0px - calc(calc(3rem - var(--m3e-bottom-sheet-handle-width, 2rem)) / 2)); right: calc(0px - calc(calc(3rem - var(--m3e-bottom-sheet-handle-width, 2rem)) / 2)); top: calc( 0px - calc( calc(3rem - var(--m3e-bottom-sheet-handle-container-height, 1.5rem)) - calc( var(--m3e-bottom-sheet-handle-height, 4px) / 2 ) ) ); } @media (prefers-reduced-motion) { :host, :host([modal])::backdrop, :host([modal]:popover-open)::backdrop, .handle { transition: none; } } @media (forced-colors: active) { :host([modal])::backdrop, :host([modal]:popover-open)::backdrop { transition: none; } .base { border-style: solid; border-width: 1px; border-color: CanvasText; } .handle { background-color: ButtonText; } }`;
2162
2162
  __decorate([n$1({
2163
2163
  type: Boolean,
2164
2164
  reflect: true
@@ -2262,89 +2262,89 @@ M3eBottomSheetTriggerElement = __decorate([t$3("m3e-bottom-sheet-trigger")], M3e
2262
2262
  */
2263
2263
  const ButtonSizeToken = {
2264
2264
  "extra-small": {
2265
- containerHeight: unsafeCSS(`calc(var(--m3e-button-extra-small-container-height, 2rem) + ${DesignToken$1.density.calc(0)})`),
2266
- outlineThickness: unsafeCSS("var(--m3e-button-extra-small-outline-thickness, 1px)"),
2267
- labelTextFontSize: unsafeCSS(`var(--m3e-button-extra-small-label-text-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize})`),
2268
- labelTextFontWeight: unsafeCSS(`var(--m3e-button-extra-small-label-text-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight})`),
2269
- labelTextLineHeight: unsafeCSS(`var(--m3e-button-extra-small-label-text-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight})`),
2270
- labelTextTracking: unsafeCSS(`var(--m3e-button-extra-small-label-text-tracking, ${DesignToken$1.typescale.standard.label.large.tracking})`),
2271
- iconSize: unsafeCSS("var(--m3e-button-extra-small-icon-size, 1.25rem)"),
2272
- shapeRound: unsafeCSS(`var(--m3e-button-extra-small-shape-round, ${DesignToken$1.shape.corner.full})`),
2273
- shapeSquare: unsafeCSS(`var(--m3e-button-extra-small-shape-square, ${DesignToken$1.shape.corner.medium})`),
2274
- selectedShapeRound: unsafeCSS(`var(--m3e-button-extra-small-selected-shape-round, ${DesignToken$1.shape.corner.medium})`),
2275
- selectedShapeSquare: unsafeCSS(`var(--m3e-button-extra-small-selected-shape-square, ${DesignToken$1.shape.corner.full})`),
2276
- shapePressedMorph: unsafeCSS(`var(--m3e-button-extra-small-shape-pressed-morph, ${DesignToken$1.shape.corner.small})`),
2277
- leadingSpace: unsafeCSS("var(--m3e-button-extra-small-leading-space, 0.75rem)"),
2278
- trailingSpace: unsafeCSS("var(--m3e-button-extra-small-trailing-space, 0.75rem)"),
2279
- iconLabelSpace: unsafeCSS("var(--m3e-button-extra-small-icon-label-space, 0.5rem)")
2265
+ containerHeight: unsafeCSS(`calc(var(--m3e-button-extra-small-container-height, var(--m3e-button-container-height, 2rem)) + ${DesignToken$1.density.calc(0)})`),
2266
+ outlineThickness: unsafeCSS("var(--m3e-button-extra-small-outline-thickness, var(--m3e-button-outline-thickness, 1px))"),
2267
+ labelTextFontSize: unsafeCSS(`var(--m3e-button-extra-small-label-text-font-size, var(--m3e-button-label-text-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}))`),
2268
+ labelTextFontWeight: unsafeCSS(`var(--m3e-button-extra-small-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight}))`),
2269
+ labelTextLineHeight: unsafeCSS(`var(--m3e-button-extra-small-label-text-line-height, var(--m3e-button-label-text-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight}))`),
2270
+ labelTextTracking: unsafeCSS(`var(--m3e-button-extra-small-label-text-tracking, var(--m3e-button-label-text-tracking, ${DesignToken$1.typescale.standard.label.large.tracking}))`),
2271
+ iconSize: unsafeCSS("var(--m3e-button-extra-small-icon-size, var(--m3e-button-icon-size, 1.25rem))"),
2272
+ shapeRound: unsafeCSS(`var(--m3e-button-extra-small-shape-round, var(--m3e-button-shape-round, ${DesignToken$1.shape.corner.full}))`),
2273
+ shapeSquare: unsafeCSS(`var(--m3e-button-extra-small-shape-square, var(--m3e-button-shape-square, ${DesignToken$1.shape.corner.medium}))`),
2274
+ selectedShapeRound: unsafeCSS(`var(--m3e-button-extra-small-selected-shape-round, var(--m3e-button-selected-shape-round, ${DesignToken$1.shape.corner.medium}))`),
2275
+ selectedShapeSquare: unsafeCSS(`var(--m3e-button-extra-small-selected-shape-square, var(--m3e-button-selected-shape-square, ${DesignToken$1.shape.corner.full}))`),
2276
+ shapePressedMorph: unsafeCSS(`var(--m3e-button-extra-small-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${DesignToken$1.shape.corner.small}))`),
2277
+ leadingSpace: unsafeCSS("var(--m3e-button-extra-small-leading-space, var(--m3e-button-leading-space, 0.75rem))"),
2278
+ trailingSpace: unsafeCSS("var(--m3e-button-extra-small-trailing-space, var(--m3e-button-trailing-space, 0.75rem))"),
2279
+ iconLabelSpace: unsafeCSS("var(--m3e-button-extra-small-icon-label-space, var(--m3e-button-icon-label-space, 0.5rem))")
2280
2280
  },
2281
2281
  small: {
2282
- containerHeight: unsafeCSS(`calc(var(--m3e-button-small-container-height, 2.5rem) + ${DesignToken$1.density.calc(-1)})`),
2283
- outlineThickness: unsafeCSS("var(--m3e-button-small-outline-thickness, 1px)"),
2284
- labelTextFontSize: unsafeCSS(`var(--m3e-button-small-label-text-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize})`),
2285
- labelTextFontWeight: unsafeCSS(`var(--m3e-button-small-label-text-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight})`),
2286
- labelTextLineHeight: unsafeCSS(`var(--m3e-button-small-label-text-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight})`),
2287
- labelTextTracking: unsafeCSS(`var(--m3e-button-small-label-text-tracking, ${DesignToken$1.typescale.standard.label.large.tracking})`),
2288
- iconSize: unsafeCSS("var(--m3e-button-small-icon-size, 1.25rem)"),
2289
- shapeRound: unsafeCSS(`var(--m3e-button-small-shape-round, ${DesignToken$1.shape.corner.full})`),
2290
- shapeSquare: unsafeCSS(`var(--m3e-button-small-shape-square, ${DesignToken$1.shape.corner.medium})`),
2291
- selectedShapeRound: unsafeCSS(`var(--m3e-button-small-selected-shape-round, ${DesignToken$1.shape.corner.medium})`),
2292
- selectedShapeSquare: unsafeCSS(`var(--m3e-button-small-selected-shape-square, ${DesignToken$1.shape.corner.full})`),
2293
- shapePressedMorph: unsafeCSS(`var(--m3e-button-small-shape-pressed-morph, ${DesignToken$1.shape.corner.small})`),
2294
- leadingSpace: unsafeCSS("var(--m3e-button-small-leading-space, 1rem)"),
2295
- trailingSpace: unsafeCSS("var(--m3e-button-small-trailing-space, 1rem)"),
2296
- iconLabelSpace: unsafeCSS("var(--m3e-button-small-icon-label-space, 0.5rem)")
2282
+ containerHeight: unsafeCSS(`calc(var(--m3e-button-small-container-height, var(--m3e-button-container-height, 2.5rem)) + ${DesignToken$1.density.calc(-1)})`),
2283
+ outlineThickness: unsafeCSS("var(--m3e-button-small-outline-thickness, var(--m3e-button-outline-thickness, 1px))"),
2284
+ labelTextFontSize: unsafeCSS(`var(--m3e-button-small-label-text-font-size, var(--m3e-button-label-text-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}))`),
2285
+ labelTextFontWeight: unsafeCSS(`var(--m3e-button-small-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight}))`),
2286
+ labelTextLineHeight: unsafeCSS(`var(--m3e-button-small-label-text-line-height, var(--m3e-button-label-text-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight}))`),
2287
+ labelTextTracking: unsafeCSS(`var(--m3e-button-small-label-text-tracking, var(--m3e-button-label-text-tracking, ${DesignToken$1.typescale.standard.label.large.tracking}))`),
2288
+ iconSize: unsafeCSS("var(--m3e-button-small-icon-size, var(--m3e-button-icon-size, 1.25rem))"),
2289
+ shapeRound: unsafeCSS(`var(--m3e-button-small-shape-round, var(--m3e-button-shape-round, ${DesignToken$1.shape.corner.full}))`),
2290
+ shapeSquare: unsafeCSS(`var(--m3e-button-small-shape-square, var(--m3e-button-shape-square, ${DesignToken$1.shape.corner.medium}))`),
2291
+ selectedShapeRound: unsafeCSS(`var(--m3e-button-small-selected-shape-round, var(--m3e-button-selected-shape-round, ${DesignToken$1.shape.corner.medium}))`),
2292
+ selectedShapeSquare: unsafeCSS(`var(--m3e-button-small-selected-shape-square, var(--m3e-button-selected-shape-square, ${DesignToken$1.shape.corner.full}))`),
2293
+ shapePressedMorph: unsafeCSS(`var(--m3e-button-small-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${DesignToken$1.shape.corner.small}))`),
2294
+ leadingSpace: unsafeCSS("var(--m3e-button-small-leading-space, var(--m3e-button-leading-space, 1rem))"),
2295
+ trailingSpace: unsafeCSS("var(--m3e-button-small-trailing-space, var(--m3e-button-trailing-space, 1rem))"),
2296
+ iconLabelSpace: unsafeCSS("var(--m3e-button-small-icon-label-space, var(--m3e-button-icon-label-space, 0.5rem))")
2297
2297
  },
2298
2298
  medium: {
2299
- containerHeight: unsafeCSS(`calc(var(--m3e-button-medium-container-height, 3.5rem) + ${DesignToken$1.density.calc(-2)})`),
2300
- outlineThickness: unsafeCSS("var(--m3e-button-medium-outline-thickness, 1px)"),
2301
- labelTextFontSize: unsafeCSS(`var(--m3e-button-medium-label-text-font-size, ${DesignToken$1.typescale.standard.body.large.fontSize})`),
2302
- labelTextFontWeight: unsafeCSS(`var(--m3e-button-medium-label-text-font-weight, ${DesignToken$1.typescale.standard.body.large.fontWeight})`),
2303
- labelTextLineHeight: unsafeCSS(`var(--m3e-button-medium-label-text-line-height, ${DesignToken$1.typescale.standard.body.large.lineHeight})`),
2304
- labelTextTracking: unsafeCSS(`var(--m3e-button-medium-label-text-tracking, ${DesignToken$1.typescale.standard.body.large.tracking})`),
2305
- iconSize: unsafeCSS("var(--m3e-button-medium-icon-size, 1.5rem)"),
2306
- shapeRound: unsafeCSS(`var(--m3e-button-medium-shape-round, ${DesignToken$1.shape.corner.full})`),
2307
- shapeSquare: unsafeCSS(`var(--m3e-button-medium-shape-square, ${DesignToken$1.shape.corner.large})`),
2308
- selectedShapeRound: unsafeCSS(`var(--m3e-button-medium-selected-shape-round, ${DesignToken$1.shape.corner.large})`),
2309
- selectedShapeSquare: unsafeCSS(`var(--m3e-button-medium-selected-shape-square, ${DesignToken$1.shape.corner.full})`),
2310
- shapePressedMorph: unsafeCSS(`var(--m3e-button-medium-shape-pressed-morph, ${DesignToken$1.shape.corner.medium})`),
2311
- leadingSpace: unsafeCSS("var(--m3e-button-medium-leading-space, 1.5rem)"),
2312
- trailingSpace: unsafeCSS("var(--m3e-button-medium-trailing-space, 1.5rem)"),
2313
- iconLabelSpace: unsafeCSS("var(--m3e-button-medium-icon-label-space, 0.5rem)")
2299
+ containerHeight: unsafeCSS(`calc(var(--m3e-button-medium-container-height, var(--m3e-button-container-height, 3.5rem)) + ${DesignToken$1.density.calc(-2)})`),
2300
+ outlineThickness: unsafeCSS("var(--m3e-button-medium-outline-thickness, var(--m3e-button-outline-thickness, 1px))"),
2301
+ labelTextFontSize: unsafeCSS(`var(--m3e-button-medium-label-text-font-size, var(--m3e-button-label-text-font-size, ${DesignToken$1.typescale.standard.body.large.fontSize}))`),
2302
+ labelTextFontWeight: unsafeCSS(`var(--m3e-button-medium-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${DesignToken$1.typescale.standard.body.large.fontWeight}))`),
2303
+ labelTextLineHeight: unsafeCSS(`var(--m3e-button-medium-label-text-line-height, var(--m3e-button-label-text-line-height, ${DesignToken$1.typescale.standard.body.large.lineHeight}))`),
2304
+ labelTextTracking: unsafeCSS(`var(--m3e-button-medium-label-text-tracking, var(--m3e-button-label-text-tracking, ${DesignToken$1.typescale.standard.body.large.tracking}))`),
2305
+ iconSize: unsafeCSS("var(--m3e-button-medium-icon-size, var(--m3e-button-icon-size, 1.5rem))"),
2306
+ shapeRound: unsafeCSS(`var(--m3e-button-medium-shape-round, var(--m3e-button-shape-round, ${DesignToken$1.shape.corner.full}))`),
2307
+ shapeSquare: unsafeCSS(`var(--m3e-button-medium-shape-square, var(--m3e-button-shape-square, ${DesignToken$1.shape.corner.large}))`),
2308
+ selectedShapeRound: unsafeCSS(`var(--m3e-button-medium-selected-shape-round, var(--m3e-button-selected-shape-round, ${DesignToken$1.shape.corner.large}))`),
2309
+ selectedShapeSquare: unsafeCSS(`var(--m3e-button-medium-selected-shape-square, var(--m3e-button-selected-shape-square, ${DesignToken$1.shape.corner.full}))`),
2310
+ shapePressedMorph: unsafeCSS(`var(--m3e-button-medium-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${DesignToken$1.shape.corner.medium}))`),
2311
+ leadingSpace: unsafeCSS("var(--m3e-button-medium-leading-space, var(--m3e-button-leading-space, 1.5rem))"),
2312
+ trailingSpace: unsafeCSS("var(--m3e-button-medium-trailing-space, var(--m3e-button-trailing-space, 1.5rem))"),
2313
+ iconLabelSpace: unsafeCSS("var(--m3e-button-medium-icon-label-space, var(--m3e-button-icon-label-space, 0.5rem))")
2314
2314
  },
2315
2315
  large: {
2316
- containerHeight: unsafeCSS(`calc(var(--m3e-button-large-container-height, 6rem) + ${DesignToken$1.density.calc(-3)})`),
2317
- outlineThickness: unsafeCSS("var(--m3e-button-large-outline-thickness, 0.125rem)"),
2318
- labelTextFontSize: unsafeCSS(`var(--m3e-button-large-label-text-font-size, ${DesignToken$1.typescale.standard.headline.small.fontSize})`),
2319
- labelTextFontWeight: unsafeCSS(`var(--m3e-button-large-label-text-font-weight, ${DesignToken$1.typescale.standard.headline.small.fontWeight})`),
2320
- labelTextLineHeight: unsafeCSS(`var(--m3e-button-large-label-text-line-height, ${DesignToken$1.typescale.standard.headline.small.lineHeight})`),
2321
- labelTextTracking: unsafeCSS(`var(--m3e-button-large-label-text-tracking, ${DesignToken$1.typescale.standard.headline.small.tracking})`),
2322
- iconSize: unsafeCSS("var(--m3e-button-large-icon-size, 2rem)"),
2323
- shapeRound: unsafeCSS(`var(--m3e-button-large-shape-round, ${DesignToken$1.shape.corner.full})`),
2324
- shapeSquare: unsafeCSS(`var(--m3e-button-large-shape-square, ${DesignToken$1.shape.corner.extraLarge})`),
2325
- selectedShapeRound: unsafeCSS(`var(--m3e-button-large-selected-shape-round, ${DesignToken$1.shape.corner.extraLarge})`),
2326
- selectedShapeSquare: unsafeCSS(`var(--m3e-button-large-selected-shape-square, ${DesignToken$1.shape.corner.full})`),
2327
- shapePressedMorph: unsafeCSS(`var(--m3e-button-large-shape-pressed-morph, ${DesignToken$1.shape.corner.large})`),
2328
- leadingSpace: unsafeCSS("var(--m3e-button-large-leading-space, 3rem)"),
2329
- trailingSpace: unsafeCSS("var(--m3e-button-large-trailing-space, 3rem)"),
2330
- iconLabelSpace: unsafeCSS("var(--m3e-button-large-icon-label-space, 0.75rem)")
2316
+ containerHeight: unsafeCSS(`calc(var(--m3e-button-large-container-height, var(--m3e-button-container-height, 6rem)) + ${DesignToken$1.density.calc(-3)})`),
2317
+ outlineThickness: unsafeCSS("var(--m3e-button-large-outline-thickness, var(--m3e-button-outline-thickness, 2px))"),
2318
+ labelTextFontSize: unsafeCSS(`var(--m3e-button-large-label-text-font-size, var(--m3e-button-label-text-font-size, ${DesignToken$1.typescale.standard.headline.small.fontSize}))`),
2319
+ labelTextFontWeight: unsafeCSS(`var(--m3e-button-large-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${DesignToken$1.typescale.standard.headline.small.fontWeight}))`),
2320
+ labelTextLineHeight: unsafeCSS(`var(--m3e-button-large-label-text-line-height, var(--m3e-button-label-text-line-height, ${DesignToken$1.typescale.standard.headline.small.lineHeight}))`),
2321
+ labelTextTracking: unsafeCSS(`var(--m3e-button-large-label-text-tracking, var(--m3e-button-label-text-tracking, ${DesignToken$1.typescale.standard.headline.small.tracking}))`),
2322
+ iconSize: unsafeCSS("var(--m3e-button-large-icon-size, var(--m3e-button-icon-size, 2rem))"),
2323
+ shapeRound: unsafeCSS(`var(--m3e-button-large-shape-round, var(--m3e-button-shape-round, ${DesignToken$1.shape.corner.full}))`),
2324
+ shapeSquare: unsafeCSS(`var(--m3e-button-large-shape-square, var(--m3e-button-shape-square, ${DesignToken$1.shape.corner.extraLarge}))`),
2325
+ selectedShapeRound: unsafeCSS(`var(--m3e-button-large-selected-shape-round, var(--m3e-button-selected-shape-round, ${DesignToken$1.shape.corner.extraLarge}))`),
2326
+ selectedShapeSquare: unsafeCSS(`var(--m3e-button-large-selected-shape-square, var(--m3e-button-selected-shape-square, ${DesignToken$1.shape.corner.full}))`),
2327
+ shapePressedMorph: unsafeCSS(`var(--m3e-button-large-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${DesignToken$1.shape.corner.large}))`),
2328
+ leadingSpace: unsafeCSS("var(--m3e-button-large-leading-space, var(--m3e-button-leading-space, 3rem))"),
2329
+ trailingSpace: unsafeCSS("var(--m3e-button-large-trailing-space, var(--m3e-button-trailing-space, 3rem))"),
2330
+ iconLabelSpace: unsafeCSS("var(--m3e-button-large-icon-label-space, var(--m3e-button-icon-label-space, 0.75rem))")
2331
2331
  },
2332
2332
  "extra-large": {
2333
- containerHeight: unsafeCSS(`calc(var(--m3e-button-extra-large-container-height, 8.5rem) + ${DesignToken$1.density.calc(-3)})`),
2334
- outlineThickness: unsafeCSS("var(--m3e-button-extra-large-outline-thickness, 0.1875rem)"),
2335
- labelTextFontSize: unsafeCSS(`var(--m3e-button-extra-large-label-text-font-size, ${DesignToken$1.typescale.standard.headline.large.fontSize})`),
2336
- labelTextFontWeight: unsafeCSS(`var(--m3e-button-extra-large-label-text-font-weight, ${DesignToken$1.typescale.standard.headline.large.fontWeight})`),
2337
- labelTextLineHeight: unsafeCSS(`var(--m3e-button-extra-large-label-text-line-height, ${DesignToken$1.typescale.standard.headline.large.lineHeight})`),
2338
- labelTextTracking: unsafeCSS(`var(--m3e-button-extra-large-label-text-tracking, ${DesignToken$1.typescale.standard.headline.large.tracking})`),
2339
- iconSize: unsafeCSS("var(--m3e-button-extra-large-icon-size, 2.5rem)"),
2340
- shapeRound: unsafeCSS(`var(--m3e-button-extra-large-shape-round, ${DesignToken$1.shape.corner.full})`),
2341
- shapeSquare: unsafeCSS(`var(--m3e-button-extra-large-shape-square, ${DesignToken$1.shape.corner.extraLarge})`),
2342
- selectedShapeRound: unsafeCSS(`var(--m3e-button-extra-large-selected-shape-round, ${DesignToken$1.shape.corner.extraLarge})`),
2343
- selectedShapeSquare: unsafeCSS(`var(--m3e-button-extra-large-selected-shape-square, ${DesignToken$1.shape.corner.full})`),
2344
- shapePressedMorph: unsafeCSS(`var(--m3e-button-extra-large-shape-pressed-morph, ${DesignToken$1.shape.corner.large})`),
2345
- leadingSpace: unsafeCSS("var(--m3e-button-extra-large-leading-space, 4rem)"),
2346
- trailingSpace: unsafeCSS("var(--m3e-button-extra-large-trailing-space, 4rem)"),
2347
- iconLabelSpace: unsafeCSS("var(--m3e-button-extra-large-icon-label-space, 1rem)")
2333
+ containerHeight: unsafeCSS(`calc(var(--m3e-button-extra-large-container-height, var(--m3e-button-container-height, 8.5rem)) + ${DesignToken$1.density.calc(-3)})`),
2334
+ outlineThickness: unsafeCSS("var(--m3e-button-extra-large-outline-thickness, var(--m3e-button-outline-thickness, 3px))"),
2335
+ labelTextFontSize: unsafeCSS(`var(--m3e-button-extra-large-label-text-font-size, var(--m3e-button-label-text-font-size, ${DesignToken$1.typescale.standard.headline.large.fontSize}))`),
2336
+ labelTextFontWeight: unsafeCSS(`var(--m3e-button-extra-large-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${DesignToken$1.typescale.standard.headline.large.fontWeight}))`),
2337
+ labelTextLineHeight: unsafeCSS(`var(--m3e-button-extra-large-label-text-line-height, var(--m3e-button-label-text-line-height, ${DesignToken$1.typescale.standard.headline.large.lineHeight}))`),
2338
+ labelTextTracking: unsafeCSS(`var(--m3e-button-extra-large-label-text-tracking, var(--m3e-button-label-text-tracking, ${DesignToken$1.typescale.standard.headline.large.tracking}))`),
2339
+ iconSize: unsafeCSS("var(--m3e-button-extra-large-icon-size, var(--m3e-button-icon-size, 2.5rem))"),
2340
+ shapeRound: unsafeCSS(`var(--m3e-button-extra-large-shape-round, var(--m3e-button-shape-round, ${DesignToken$1.shape.corner.full}))`),
2341
+ shapeSquare: unsafeCSS(`var(--m3e-button-extra-large-shape-square, var(--m3e-button-shape-square, ${DesignToken$1.shape.corner.extraLarge}))`),
2342
+ selectedShapeRound: unsafeCSS(`var(--m3e-button-extra-large-selected-shape-round, var(--m3e-button-selected-shape-round, ${DesignToken$1.shape.corner.extraLarge}))`),
2343
+ selectedShapeSquare: unsafeCSS(`var(--m3e-button-extra-large-selected-shape-square, var(--m3e-button-selected-shape-square, ${DesignToken$1.shape.corner.full}))`),
2344
+ shapePressedMorph: unsafeCSS(`var(--m3e-button-extra-large-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${DesignToken$1.shape.corner.large}))`),
2345
+ leadingSpace: unsafeCSS("var(--m3e-button-extra-large-leading-space, var(--m3e-button-leading-space, 4rem))"),
2346
+ trailingSpace: unsafeCSS("var(--m3e-button-extra-large-trailing-space, var(--m3e-button-trailing-space, 4rem))"),
2347
+ iconLabelSpace: unsafeCSS("var(--m3e-button-extra-large-icon-label-space, var(--m3e-button-icon-label-space, 1rem))")
2348
2348
  }
2349
2349
  };
2350
2350
 
@@ -2363,7 +2363,7 @@ const ButtonSizeStyle = [buttonStyle("extra-small"), buttonStyle("small"), butto
2363
2363
  * @internal
2364
2364
  */
2365
2365
  const ButtonStyle = css`: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: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } :host(.-pressed) .base, :host(.-resting) .base { transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard},
2366
- border-radius ${DesignToken$1.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: ${unsafeCSS(`color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } .icon { transition: ${unsafeCSS(`color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.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(.-grouped.-connected) { flex: 1 1 auto; } :host(.-grouped:not(.-connected)) { transition: ${unsafeCSS(`padding-inline ${DesignToken$1.motion.spring.fastEffects}`)}; } :host(.-grouped:not(.-connected):not(.-adjacent-pressed):not(.-pressed)) { flex-shrink: 0; flex-grow: 0; } :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) { flex-shrink: 1; min-width: 0; } :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) .label { text-overflow: clip; } :host(.-grouped:not(.-connected).-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(.-pressed) .base, :host(.-resting) .base { transition: ${unsafeCSS(`border-radius ${DesignToken$1.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]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .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]:not(:disabled):not([disabled-interactive])[toggle][selected]) .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, 0.125rem)); outline-width: var(--m3e-button-large-outline-thickness, 0.125rem); } :host([size="extra-large"]) .base { outline-offset: calc(0px - var(--m3e-button-extra-large-outline-thickness, 0.1875rem)); outline-width: var(--m3e-button-extra-large-outline-thickness, 0.1875rem); } } @media (prefers-reduced-motion) { :host(.-pressed) .base, :host(.-resting) .base, .base, .label, .icon { transition: none; } }`;
2366
+ border-radius ${DesignToken$1.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: ${unsafeCSS(`color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } .icon { transition: ${unsafeCSS(`color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.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(.-grouped.-connected) { flex: 1 1 auto; } :host(.-grouped:not(.-connected)) { transition: ${unsafeCSS(`padding-inline ${DesignToken$1.motion.spring.fastEffects}`)}; } :host(.-grouped:not(.-connected):not(.-adjacent-pressed):not(.-pressed)) { flex-shrink: 0; flex-grow: 0; } :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) { flex-shrink: 1; min-width: 0; } :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) .label { text-overflow: clip; } :host(.-grouped:not(.-connected).-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(.-pressed) .base, :host(.-resting) .base { transition: ${unsafeCSS(`border-radius ${DesignToken$1.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]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .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]:not(:disabled):not([disabled-interactive])[toggle][selected]) .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(.-pressed) .base, :host(.-resting) .base, .base, .label, .icon { transition: none; } }`;
2367
2367
 
2368
2368
  /**
2369
2369
  * Component design tokens that control the appearance variants of `M3eButtonElement`.
@@ -2373,556 +2373,556 @@ const ButtonVariantToken = {
2373
2373
  /** Design tokens that control the `elevated` variant. */
2374
2374
  elevated: {
2375
2375
  /** Default label color. */
2376
- labelTextColor: unsafeCSS(`var(--m3e-elevated-button-label-text-color, ${DesignToken$1.color.primary})`),
2376
+ labelTextColor: unsafeCSS(`var(--m3e-elevated-button-label-text-color, var(--m3e-button-label-text-color, ${DesignToken$1.color.primary}))`),
2377
2377
  /** Default icon color. */
2378
- iconColor: unsafeCSS(`var(--m3e-elevated-button-icon-color, ${DesignToken$1.color.primary})`),
2378
+ iconColor: unsafeCSS(`var(--m3e-elevated-button-icon-color, var(--m3e-button-icon-color, ${DesignToken$1.color.primary}))`),
2379
2379
  /** Default container background color. */
2380
- containerColor: unsafeCSS(`var(--m3e-elevated-button-container-color, ${DesignToken$1.color.surfaceContainerLow})`),
2380
+ containerColor: unsafeCSS(`var(--m3e-elevated-button-container-color, var(--m3e-button-container-color, ${DesignToken$1.color.surfaceContainerLow}))`),
2381
2381
  /** Resting elevation. */
2382
- containerElevation: unsafeCSS(`var(--m3e-elevated-button-container-elevation, ${DesignToken$1.elevation.level1})`),
2382
+ containerElevation: unsafeCSS(`var(--m3e-elevated-button-container-elevation, var(--m3e-button-container-elevation, ${DesignToken$1.elevation.level1}))`),
2383
2383
  /** Unselected label color. */
2384
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-unselected-label-text-color, ${DesignToken$1.color.primary})`),
2384
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${DesignToken$1.color.primary}))`),
2385
2385
  /** Unselected icon color. */
2386
- unselectedIconColor: unsafeCSS(`var(--m3e-elevated-button-unselected-icon-color, ${DesignToken$1.color.primary})`),
2386
+ unselectedIconColor: unsafeCSS(`var(--m3e-elevated-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${DesignToken$1.color.primary}))`),
2387
2387
  /** Unselected container background color. */
2388
- unselectedContainerColor: unsafeCSS(`var(--m3e-elevated-button-unselected-container-color, ${DesignToken$1.color.surfaceContainerLow})`),
2388
+ unselectedContainerColor: unsafeCSS(`var(--m3e-elevated-button-unselected-container-color, var(--m3e-button-unselected-container-color, ${DesignToken$1.color.surfaceContainerLow}))`),
2389
2389
  /** Selected label color. */
2390
- selectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-selected-label-text-color, ${DesignToken$1.color.onPrimary})`),
2390
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${DesignToken$1.color.onPrimary}))`),
2391
2391
  /** Selected icon color. */
2392
- selectedIconColor: unsafeCSS(`var(--m3e-elevated-button-selected-icon-color, ${DesignToken$1.color.onPrimary})`),
2392
+ selectedIconColor: unsafeCSS(`var(--m3e-elevated-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${DesignToken$1.color.onPrimary}))`),
2393
2393
  /** Selected container background color. */
2394
- selectedContainerColor: unsafeCSS(`var(--m3e-elevated-button-selected-container-color, ${DesignToken$1.color.primary})`),
2394
+ selectedContainerColor: unsafeCSS(`var(--m3e-elevated-button-selected-container-color, var(--m3e-button-selected-container-color, ${DesignToken$1.color.primary}))`),
2395
2395
  /** Design tokens that control disabled state. */
2396
2396
  disabled: {
2397
2397
  /** Container background color when disabled. */
2398
- containerColor: unsafeCSS(`var(--m3e-elevated-button-disabled-container-color, ${DesignToken$1.color.onSurface})`),
2398
+ containerColor: unsafeCSS(`var(--m3e-elevated-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${DesignToken$1.color.onSurface}))`),
2399
2399
  /** Opacity of container when disabled. */
2400
- containerOpacity: unsafeCSS(`var(--m3e-elevated-button-disabled-container-opacity, 10%)`),
2400
+ containerOpacity: unsafeCSS(`var(--m3e-elevated-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))`),
2401
2401
  /** Icon color when disabled. */
2402
- iconColor: unsafeCSS(`var(--m3e-elevated-button-disabled-icon-color, ${DesignToken$1.color.onSurface})`),
2402
+ iconColor: unsafeCSS(`var(--m3e-elevated-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${DesignToken$1.color.onSurface}))`),
2403
2403
  /** Icon opacity when disabled. */
2404
- iconOpacity: unsafeCSS(`var(--m3e-elevated-button-disabled-icon-opacity, 38%)`),
2404
+ iconOpacity: unsafeCSS(`var(--m3e-elevated-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))`),
2405
2405
  /** Label color when disabled. */
2406
- labelTextColor: unsafeCSS(`var(--m3e-elevated-button-disabled-label-text-color, ${DesignToken$1.color.onSurface})`),
2406
+ labelTextColor: unsafeCSS(`var(--m3e-elevated-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${DesignToken$1.color.onSurface}))`),
2407
2407
  /** Label opacity when disabled. */
2408
- labelTextOpacity: unsafeCSS(`var(--m3e-elevated-button-disabled-label-text-opacity, 38%)`),
2408
+ labelTextOpacity: unsafeCSS(`var(--m3e-elevated-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))`),
2409
2409
  /** Elevation when disabled. */
2410
- containerElevation: unsafeCSS(`var(--m3e-elevated-button-disabled-container-elevation, ${DesignToken$1.elevation.level0})`)
2410
+ containerElevation: unsafeCSS(`var(--m3e-elevated-button-disabled-container-elevation, var(--m3e-button-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`)
2411
2411
  },
2412
2412
  /** Design tokens that control hover state. */
2413
2413
  hover: {
2414
2414
  /** Icon color on hover. */
2415
- iconColor: unsafeCSS(`var(--m3e-elevated-button-hover-icon-color, ${DesignToken$1.color.primary})`),
2415
+ iconColor: unsafeCSS(`var(--m3e-elevated-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${DesignToken$1.color.primary}))`),
2416
2416
  /** Label color on hover. */
2417
- labelTextColor: unsafeCSS(`var(--m3e-elevated-button-hover-label-text-color, ${DesignToken$1.color.primary})`),
2417
+ labelTextColor: unsafeCSS(`var(--m3e-elevated-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${DesignToken$1.color.primary}))`),
2418
2418
  /** State layer color on hover. */
2419
- stateLayerColor: unsafeCSS(`var(--m3e-elevated-button-hover-state-layer-color, ${DesignToken$1.color.primary})`),
2419
+ stateLayerColor: unsafeCSS(`var(--m3e-elevated-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${DesignToken$1.color.primary}))`),
2420
2420
  /** State layer opacity on hover. */
2421
- stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
2421
+ stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
2422
2422
  /** Elevation on hover. */
2423
- containerElevation: unsafeCSS(`var(--m3e-elevated-button-hover-container-elevation, ${DesignToken$1.elevation.level2})`),
2423
+ containerElevation: unsafeCSS(`var(--m3e-elevated-button-hover-container-elevation, var(--m3e-button-hover-container-elevation, ${DesignToken$1.elevation.level2}))`),
2424
2424
  /** Unselected icon color on hover. */
2425
- unselectedIconColor: unsafeCSS(`var(--m3e-elevated-button-hover-unselected-icon-color, ${DesignToken$1.color.primary})`),
2425
+ unselectedIconColor: unsafeCSS(`var(--m3e-elevated-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${DesignToken$1.color.primary}))`),
2426
2426
  /** Unselected label color on hover. */
2427
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-hover-unselected-label-text-color, ${DesignToken$1.color.primary})`),
2427
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${DesignToken$1.color.primary}))`),
2428
2428
  /** Unselected state layer color on hover. */
2429
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-hover-unselected-state-layer-color, ${DesignToken$1.color.primary})`),
2429
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${DesignToken$1.color.primary}))`),
2430
2430
  /** Selected icon color on hover. */
2431
- selectedIconColor: unsafeCSS(`var(--m3e-elevated-button-hover-selected-icon-color, ${DesignToken$1.color.onPrimary})`),
2431
+ selectedIconColor: unsafeCSS(`var(--m3e-elevated-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${DesignToken$1.color.onPrimary}))`),
2432
2432
  /** Selected label color on hover. */
2433
- selectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-hover-selected-label-text-color, ${DesignToken$1.color.onPrimary})`),
2433
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${DesignToken$1.color.onPrimary}))`),
2434
2434
  /** Selected ripple color on hover. */
2435
- selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-hover-selected-state-layer-color, ${DesignToken$1.color.onPrimary})`)
2435
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${DesignToken$1.color.onPrimary}))`)
2436
2436
  },
2437
2437
  /** Design tokens that control focus state. */
2438
2438
  focus: {
2439
2439
  /** Icon color on focus. */
2440
- iconColor: unsafeCSS(`var(--m3e-elevated-button-focus-icon-color, ${DesignToken$1.color.primary})`),
2440
+ iconColor: unsafeCSS(`var(--m3e-elevated-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${DesignToken$1.color.primary}))`),
2441
2441
  /** Label color on focus. */
2442
- labelTextColor: unsafeCSS(`var(--m3e-elevated-button-focus-label-text-color, ${DesignToken$1.color.primary})`),
2442
+ labelTextColor: unsafeCSS(`var(--m3e-elevated-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${DesignToken$1.color.primary}))`),
2443
2443
  /** State layer color on focus. */
2444
- stateLayerColor: unsafeCSS(`var(--m3e-elevated-button-focus-state-layer-color, ${DesignToken$1.color.primary})`),
2444
+ stateLayerColor: unsafeCSS(`var(--m3e-elevated-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${DesignToken$1.color.primary}))`),
2445
2445
  /**State layer opacity on focus. */
2446
- stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
2446
+ stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
2447
2447
  /** Elevation on focus. */
2448
- containerElevation: unsafeCSS(`var(--m3e-elevated-button-focus-container-elevation, ${DesignToken$1.elevation.level1})`),
2448
+ containerElevation: unsafeCSS(`var(--m3e-elevated-button-focus-container-elevation, var(--m3e-button-focus-container-elevation, ${DesignToken$1.elevation.level1}))`),
2449
2449
  /** Unselected label color on focus. */
2450
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-focus-unselected-label-text-color, ${DesignToken$1.color.primary})`),
2450
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${DesignToken$1.color.primary}))`),
2451
2451
  /** Unselected icon color on focus. */
2452
- unselectedIconColor: unsafeCSS(`var(--m3e-elevated-button-focus-unselected-icon-color, ${DesignToken$1.color.primary})`),
2452
+ unselectedIconColor: unsafeCSS(`var(--m3e-elevated-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${DesignToken$1.color.primary}))`),
2453
2453
  /** Unselected ripple color on focus. */
2454
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-focus-unselected-state-layer-color, ${DesignToken$1.color.primary})`),
2454
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${DesignToken$1.color.primary}))`),
2455
2455
  /** Selected icon color on focus. */
2456
- selectedIconColor: unsafeCSS(`var(--m3e-elevated-button-focus-selected-icon-color, ${DesignToken$1.color.onPrimary})`),
2456
+ selectedIconColor: unsafeCSS(`var(--m3e-elevated-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${DesignToken$1.color.onPrimary}))`),
2457
2457
  /** Selected label color on focus. */
2458
- selectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-focus-selected-label-text-color, ${DesignToken$1.color.onPrimary})`),
2458
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${DesignToken$1.color.onPrimary}))`),
2459
2459
  /** Selected ripple color on focus. */
2460
- selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-focus-selected-state-layer-color, ${DesignToken$1.color.onPrimary})`)
2460
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${DesignToken$1.color.onPrimary}))`)
2461
2461
  },
2462
2462
  /** Design tokens that control pressed state. */
2463
2463
  pressed: {
2464
2464
  /** Icon color on pressed. */
2465
- iconColor: unsafeCSS(`var(--m3e-elevated-button-pressed-icon-color, ${DesignToken$1.color.primary})`),
2465
+ iconColor: unsafeCSS(`var(--m3e-elevated-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${DesignToken$1.color.primary}))`),
2466
2466
  /** Label color on pressed. */
2467
- labelTextColor: unsafeCSS(`var(--m3e-elevated-button-pressed-label-text-color, ${DesignToken$1.color.primary})`),
2467
+ labelTextColor: unsafeCSS(`var(--m3e-elevated-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${DesignToken$1.color.primary}))`),
2468
2468
  /** State layer color on pressed. */
2469
- stateLayerColor: unsafeCSS(`var(--m3e-elevated-button-pressed-state-layer-color, ${DesignToken$1.color.primary})`),
2469
+ stateLayerColor: unsafeCSS(`var(--m3e-elevated-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${DesignToken$1.color.primary}))`),
2470
2470
  /** State layer opacity on pressed. */
2471
- stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
2471
+ stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
2472
2472
  /** Elevation on pressed. */
2473
- containerElevation: unsafeCSS(`var(--m3e-elevated-button-pressed-container-elevation, ${DesignToken$1.elevation.level1})`),
2473
+ containerElevation: unsafeCSS(`var(--m3e-elevated-button-pressed-container-elevation, var(--m3e-button-pressed-container-elevation, ${DesignToken$1.elevation.level1}))`),
2474
2474
  /** Unselected label color on pressed. */
2475
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-pressed-unselected-label-text-color, ${DesignToken$1.color.primary})`),
2475
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${DesignToken$1.color.primary}))`),
2476
2476
  /** Unselected icon color on pressed. */
2477
- unselectedIconColor: unsafeCSS(`var(--m3e-elevated-button-pressed-unselected-icon-color, ${DesignToken$1.color.primary})`),
2477
+ unselectedIconColor: unsafeCSS(`var(--m3e-elevated-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${DesignToken$1.color.primary}))`),
2478
2478
  /** Unselected ripple color on pressed. */
2479
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.primary})`),
2479
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.primary}))`),
2480
2480
  /** Selected icon color on pressed. */
2481
- selectedIconColor: unsafeCSS(`var(--m3e-elevated-button-pressed-selected-icon-color, ${DesignToken$1.color.onPrimary})`),
2481
+ selectedIconColor: unsafeCSS(`var(--m3e-elevated-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${DesignToken$1.color.onPrimary}))`),
2482
2482
  /** Selected label color on pressed. */
2483
- selectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-pressed-selected-label-text-color, ${DesignToken$1.color.onPrimary})`),
2483
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${DesignToken$1.color.onPrimary}))`),
2484
2484
  /** Selected ripple color on pressed. */
2485
- selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-pressed-selected-state-layer-color, ${DesignToken$1.color.onPrimary})`)
2485
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${DesignToken$1.color.onPrimary}))`)
2486
2486
  }
2487
2487
  },
2488
2488
  /** Design tokens that control the `outlined` variant. */
2489
2489
  outlined: {
2490
2490
  /** Default label color. */
2491
- labelTextColor: unsafeCSS(`var(--m3e-outlined-button-label-text-color, ${DesignToken$1.color.onSurfaceVariant})`),
2491
+ labelTextColor: unsafeCSS(`var(--m3e-outlined-button-label-text-color, var(--m3e-button-label-text-color, ${DesignToken$1.color.onSurfaceVariant}))`),
2492
2492
  /** Default icon color. */
2493
- iconColor: unsafeCSS(`var(--m3e-outlined-button-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
2493
+ iconColor: unsafeCSS(`var(--m3e-outlined-button-icon-color, var(--m3e-button-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
2494
2494
  /** Default outline color. */
2495
- outlineColor: unsafeCSS(`var(--m3e-outlined-button-outline-color, ${DesignToken$1.color.outlineVariant})`),
2495
+ outlineColor: unsafeCSS(`var(--m3e-outlined-button-outline-color, var(--m3e-button-outline-color, ${DesignToken$1.color.outlineVariant}))`),
2496
2496
  /** Unselected label color. */
2497
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-unselected-label-text-color, ${DesignToken$1.color.onSurfaceVariant})`),
2497
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${DesignToken$1.color.onSurfaceVariant}))`),
2498
2498
  /** Unselected icon color. */
2499
- unselectedIconColor: unsafeCSS(`var(--m3e-outlined-button-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
2499
+ unselectedIconColor: unsafeCSS(`var(--m3e-outlined-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
2500
2500
  /** Selected label color. */
2501
- selectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-selected-label-text-color, ${DesignToken$1.color.inverseOnSurface})`),
2501
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${DesignToken$1.color.inverseOnSurface}))`),
2502
2502
  /** Selected icon color. */
2503
- selectedIconColor: unsafeCSS(`var(--m3e-outlined-button-selected-icon-color, ${DesignToken$1.color.inverseOnSurface})`),
2503
+ selectedIconColor: unsafeCSS(`var(--m3e-outlined-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${DesignToken$1.color.inverseOnSurface}))`),
2504
2504
  /** Selected container background color. */
2505
- selectedContainerColor: unsafeCSS(`var(--m3e-outlined-button-selected-container-color, ${DesignToken$1.color.inverseSurface})`),
2505
+ selectedContainerColor: unsafeCSS(`var(--m3e-outlined-button-selected-container-color, var(--m3e-button-selected-container-color, ${DesignToken$1.color.inverseSurface}))`),
2506
2506
  /** Design tokens that control disabled state. */
2507
2507
  disabled: {
2508
2508
  /** Container background color when disabled. */
2509
- containerColor: unsafeCSS(`var(--m3e-outlined-button-disabled-container-color, ${DesignToken$1.color.onSurface})`),
2509
+ containerColor: unsafeCSS(`var(--m3e-outlined-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${DesignToken$1.color.onSurface}))`),
2510
2510
  /** Opacity of container when disabled. */
2511
- containerOpacity: unsafeCSS(`var(--m3e-outlined-button-disabled-container-opacity, 10%)`),
2511
+ containerOpacity: unsafeCSS(`var(--m3e-outlined-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))`),
2512
2512
  /** Icon color when disabled. */
2513
- iconColor: unsafeCSS(`var(--m3e-outlined-button-disabled-icon-color, ${DesignToken$1.color.onSurface})`),
2513
+ iconColor: unsafeCSS(`var(--m3e-outlined-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${DesignToken$1.color.onSurface}))`),
2514
2514
  /** Icon opacity when disabled. */
2515
- iconOpacity: unsafeCSS(`var(--m3e-outlined-button-disabled-icon-opacity, 38%)`),
2515
+ iconOpacity: unsafeCSS(`var(--m3e-outlined-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))`),
2516
2516
  /** Label color when disabled. */
2517
- labelTextColor: unsafeCSS(`var(--m3e-outlined-button-disabled-label-text-color, ${DesignToken$1.color.onSurface})`),
2517
+ labelTextColor: unsafeCSS(`var(--m3e-outlined-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${DesignToken$1.color.onSurface}))`),
2518
2518
  /** Label opacity when disabled. */
2519
- labelTextOpacity: unsafeCSS(`var(--m3e-outlined-button-disabled-label-text-opacity, 38%)`),
2519
+ labelTextOpacity: unsafeCSS(`var(--m3e-outlined-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))`),
2520
2520
  /** Outline color when disabled. */
2521
- outlineColor: unsafeCSS(`var(--m3e-outlined-button-disabled-outline-color, ${DesignToken$1.color.outlineVariant})`)
2521
+ outlineColor: unsafeCSS(`var(--m3e-outlined-button-disabled-outline-color, var(--m3e-button-disabled-outline-color, ${DesignToken$1.color.outlineVariant}))`)
2522
2522
  },
2523
2523
  /** Design tokens that control hover state. */
2524
2524
  hover: {
2525
2525
  /** Icon color on hover. */
2526
- iconColor: unsafeCSS(`var(--m3e-outlined-button-hover-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
2526
+ iconColor: unsafeCSS(`var(--m3e-outlined-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
2527
2527
  /** Label color on hover. */
2528
- labelTextColor: unsafeCSS(`var(--m3e-outlined-button-hover-label-text-color, ${DesignToken$1.color.onSurfaceVariant})`),
2528
+ labelTextColor: unsafeCSS(`var(--m3e-outlined-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${DesignToken$1.color.onSurfaceVariant}))`),
2529
2529
  /** Outline color on hover. */
2530
- outlineColor: unsafeCSS(`var(--m3e-outlined-button-hover-outline-color, ${DesignToken$1.color.outlineVariant})`),
2530
+ outlineColor: unsafeCSS(`var(--m3e-outlined-button-hover-outline-color, var(--m3e-button-hover-outline-color, ${DesignToken$1.color.outlineVariant}))`),
2531
2531
  /** State layer color on hover. */
2532
- stateLayerColor: unsafeCSS(`var(--m3e-outlined-button-hover-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
2532
+ stateLayerColor: unsafeCSS(`var(--m3e-outlined-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
2533
2533
  /** State layer opacity on hover. */
2534
- stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
2534
+ stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
2535
2535
  /** Unselected icon color on hover. */
2536
- unselectedIconColor: unsafeCSS(`var(--m3e-outlined-button-hover-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
2536
+ unselectedIconColor: unsafeCSS(`var(--m3e-outlined-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
2537
2537
  /** Unselected label color on hover. */
2538
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-hover-unselected-label-text-color, ${DesignToken$1.color.onSurfaceVariant})`),
2538
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${DesignToken$1.color.onSurfaceVariant}))`),
2539
2539
  /** Unselected state layer color on hover. */
2540
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-hover-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
2540
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
2541
2541
  /** Selected icon color on hover. */
2542
- selectedIconColor: unsafeCSS(`var(--m3e-outlined-button-hover-selected-icon-color, ${DesignToken$1.color.inverseOnSurface})`),
2542
+ selectedIconColor: unsafeCSS(`var(--m3e-outlined-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${DesignToken$1.color.inverseOnSurface}))`),
2543
2543
  /** Selected label color on hover. */
2544
- selectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-hover-selected-label-text-color, ${DesignToken$1.color.inverseOnSurface})`),
2544
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${DesignToken$1.color.inverseOnSurface}))`),
2545
2545
  /** Selected state layer color on hover. */
2546
- selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-hover-selected-state-layer-color, ${DesignToken$1.color.inverseOnSurface})`)
2546
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${DesignToken$1.color.inverseOnSurface}))`)
2547
2547
  },
2548
2548
  /** Design tokens that control focus state. */
2549
2549
  focus: {
2550
2550
  /** Icon color on focus. */
2551
- iconColor: unsafeCSS(`var(--m3e-outlined-button-focus-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
2551
+ iconColor: unsafeCSS(`var(--m3e-outlined-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
2552
2552
  /** Label color on focus. */
2553
- labelTextColor: unsafeCSS(`var(--m3e-outlined-button-focus-label-text-color, ${DesignToken$1.color.onSurfaceVariant})`),
2553
+ labelTextColor: unsafeCSS(`var(--m3e-outlined-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${DesignToken$1.color.onSurfaceVariant}))`),
2554
2554
  /** Outline color on focus. */
2555
- outlineColor: unsafeCSS(`var(--m3e-outlined-button-focus-outline-color, ${DesignToken$1.color.outlineVariant})`),
2555
+ outlineColor: unsafeCSS(`var(--m3e-outlined-button-focus-outline-color, var(--m3e-button-focus-outline-color, ${DesignToken$1.color.outlineVariant}))`),
2556
2556
  /** State layer color on focus. */
2557
- stateLayerColor: unsafeCSS(`var(--m3e-outlined-button-focus-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
2557
+ stateLayerColor: unsafeCSS(`var(--m3e-outlined-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
2558
2558
  /**State layer opacity on focus. */
2559
- stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
2559
+ stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
2560
2560
  /** Unselected icon color on focus. */
2561
- unselectedIconColor: unsafeCSS(`var(--m3e-outlined-button-focus-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
2561
+ unselectedIconColor: unsafeCSS(`var(--m3e-outlined-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
2562
2562
  /** Unselected label color on focus. */
2563
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-focus-unselected-label-text-color, ${DesignToken$1.color.onSurfaceVariant})`),
2563
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${DesignToken$1.color.onSurfaceVariant}))`),
2564
2564
  /** Unselected state layer color on focus. */
2565
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-focus-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
2565
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
2566
2566
  /** Selected icon color on focus. */
2567
- selectedIconColor: unsafeCSS(`var(--m3e-outlined-button-focus-selected-icon-color, ${DesignToken$1.color.inverseOnSurface})`),
2567
+ selectedIconColor: unsafeCSS(`var(--m3e-outlined-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${DesignToken$1.color.inverseOnSurface}))`),
2568
2568
  /** Selected label color on focus. */
2569
- selectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-focus-selected-label-text-color, ${DesignToken$1.color.inverseOnSurface})`),
2569
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${DesignToken$1.color.inverseOnSurface}))`),
2570
2570
  /** Selected state layer color on focus. */
2571
- selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-focus-selected-state-layer-color, ${DesignToken$1.color.inverseOnSurface})`)
2571
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${DesignToken$1.color.inverseOnSurface}))`)
2572
2572
  },
2573
2573
  /** Design tokens that control pressed state. */
2574
2574
  pressed: {
2575
2575
  /** Icon color on pressed. */
2576
- iconColor: unsafeCSS(`var(--m3e-outlined-button-pressed-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
2576
+ iconColor: unsafeCSS(`var(--m3e-outlined-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
2577
2577
  /** Label color on pressed. */
2578
- labelTextColor: unsafeCSS(`var(--m3e-outlined-button-pressed-label-text-color, ${DesignToken$1.color.onSurfaceVariant})`),
2578
+ labelTextColor: unsafeCSS(`var(--m3e-outlined-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${DesignToken$1.color.onSurfaceVariant}))`),
2579
2579
  /** Outline color on pressed. */
2580
- outlineColor: unsafeCSS(`var(--m3e-outlined-button-pressed-outline-color, ${DesignToken$1.color.outlineVariant})`),
2580
+ outlineColor: unsafeCSS(`var(--m3e-outlined-button-pressed-outline-color, var(--m3e-button-pressed-outline-color, ${DesignToken$1.color.outlineVariant}))`),
2581
2581
  /** State layer color on pressed. */
2582
- stateLayerColor: unsafeCSS(`var(--m3e-outlined-button-pressed-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
2582
+ stateLayerColor: unsafeCSS(`var(--m3e-outlined-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
2583
2583
  /** State layer opacity on pressed. */
2584
- stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
2584
+ stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
2585
2585
  /** Unselected icon color on pressed. */
2586
- unselectedIconColor: unsafeCSS(`var(--m3e-outlined-button-pressed-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
2586
+ unselectedIconColor: unsafeCSS(`var(--m3e-outlined-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
2587
2587
  /** Unselected label color on pressed. */
2588
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-pressed-unselected-label-text-color, ${DesignToken$1.color.onSurfaceVariant})`),
2588
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${DesignToken$1.color.onSurfaceVariant}))`),
2589
2589
  /** Unselected state layer color on pressed. */
2590
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
2590
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
2591
2591
  /** Selected icon color on pressed. */
2592
- selectedIconColor: unsafeCSS(`var(--m3e-outlined-button-pressed-selected-icon-color, ${DesignToken$1.color.inverseOnSurface})`),
2592
+ selectedIconColor: unsafeCSS(`var(--m3e-outlined-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${DesignToken$1.color.inverseOnSurface}))`),
2593
2593
  /** Selected label color on pressed. */
2594
- selectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-pressed-selected-label-text-color, ${DesignToken$1.color.inverseOnSurface})`),
2594
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${DesignToken$1.color.inverseOnSurface}))`),
2595
2595
  /** Selected state layer color on pressed. */
2596
- selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-pressed-selected-state-layer-color, ${DesignToken$1.color.inverseOnSurface})`)
2596
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${DesignToken$1.color.inverseOnSurface}))`)
2597
2597
  }
2598
2598
  },
2599
2599
  /** Design tokens that control the `filled` variant. */
2600
2600
  filled: {
2601
2601
  /** Default label color. */
2602
- labelTextColor: unsafeCSS(`var(--m3e-filled-button-label-text-color, ${DesignToken$1.color.onPrimary})`),
2602
+ labelTextColor: unsafeCSS(`var(--m3e-filled-button-label-text-color, var(--m3e-button-label-text-color, ${DesignToken$1.color.onPrimary}))`),
2603
2603
  /** Default icon color. */
2604
- iconColor: unsafeCSS(`var(--m3e-filled-button-icon-color, ${DesignToken$1.color.onPrimary})`),
2604
+ iconColor: unsafeCSS(`var(--m3e-filled-button-icon-color, var(--m3e-button-icon-color, ${DesignToken$1.color.onPrimary}))`),
2605
2605
  /** Default container background color. */
2606
- containerColor: unsafeCSS(`var(--m3e-filled-button-container-color, ${DesignToken$1.color.primary})`),
2606
+ containerColor: unsafeCSS(`var(--m3e-filled-button-container-color, var(--m3e-button-container-color, ${DesignToken$1.color.primary}))`),
2607
2607
  /** Resting elevation. */
2608
- containerElevation: unsafeCSS(`var(--m3e-filled-button-container-elevation, ${DesignToken$1.elevation.level0})`),
2608
+ containerElevation: unsafeCSS(`var(--m3e-filled-button-container-elevation, var(--m3e-button-container-elevation, ${DesignToken$1.elevation.level0}))`),
2609
2609
  /** Unselected label color. */
2610
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-unselected-label-text-color, ${DesignToken$1.color.onSurfaceVariant})`),
2610
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${DesignToken$1.color.onSurfaceVariant}))`),
2611
2611
  /** Unselected icon color. */
2612
- unselectedIconColor: unsafeCSS(`var(--m3e-filled-button-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
2612
+ unselectedIconColor: unsafeCSS(`var(--m3e-filled-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
2613
2613
  /** Unselected container background color. */
2614
- unselectedContainerColor: unsafeCSS(`var(--m3e-filled-button-unselected-container-color, ${DesignToken$1.color.surfaceContainer})`),
2614
+ unselectedContainerColor: unsafeCSS(`var(--m3e-filled-button-unselected-container-color, var(--m3e-button-unselected-container-color, ${DesignToken$1.color.surfaceContainer}))`),
2615
2615
  /** Selected label color. */
2616
- selectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-selected-label-text-color, ${DesignToken$1.color.onPrimary})`),
2616
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${DesignToken$1.color.onPrimary}))`),
2617
2617
  /** Selected icon color. */
2618
- selectedIconColor: unsafeCSS(`var(--m3e-filled-button-selected-icon-color, ${DesignToken$1.color.onPrimary})`),
2618
+ selectedIconColor: unsafeCSS(`var(--m3e-filled-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${DesignToken$1.color.onPrimary}))`),
2619
2619
  /** Selected container background color. */
2620
- selectedContainerColor: unsafeCSS(`var(--m3e-filled-button-selected-container-color, ${DesignToken$1.color.primary})`),
2620
+ selectedContainerColor: unsafeCSS(`var(--m3e-filled-button-selected-container-color, var(--m3e-button-selected-container-color, ${DesignToken$1.color.primary}))`),
2621
2621
  /** Design tokens that control disabled state. */
2622
2622
  disabled: {
2623
2623
  /** Container background color when disabled. */
2624
- containerColor: unsafeCSS(`var(--m3e-filled-button-disabled-container-color, ${DesignToken$1.color.onSurface})`),
2624
+ containerColor: unsafeCSS(`var(--m3e-filled-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${DesignToken$1.color.onSurface}))`),
2625
2625
  /** Opacity of container when disabled. */
2626
- containerOpacity: unsafeCSS(`var(--m3e-filled-button-disabled-container-opacity, 10%)`),
2626
+ containerOpacity: unsafeCSS(`var(--m3e-filled-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))`),
2627
2627
  /** Icon color when disabled. */
2628
- iconColor: unsafeCSS(`var(--m3e-filled-button-disabled-icon-color, ${DesignToken$1.color.onSurface})`),
2628
+ iconColor: unsafeCSS(`var(--m3e-filled-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${DesignToken$1.color.onSurface}))`),
2629
2629
  /** Icon opacity when disabled. */
2630
- iconOpacity: unsafeCSS(`var(--m3e-filled-button-disabled-icon-opacity, 38%)`),
2630
+ iconOpacity: unsafeCSS(`var(--m3e-filled-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))`),
2631
2631
  /** Label color when disabled. */
2632
- labelTextColor: unsafeCSS(`var(--m3e-filled-button-disabled-label-text-color, ${DesignToken$1.color.onSurface})`),
2632
+ labelTextColor: unsafeCSS(`var(--m3e-filled-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${DesignToken$1.color.onSurface}))`),
2633
2633
  /** Label opacity when disabled. */
2634
- labelTextOpacity: unsafeCSS(`var(--m3e-filled-button-disabled-label-text-opacity, 38%)`),
2634
+ labelTextOpacity: unsafeCSS(`var(--m3e-filled-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))`),
2635
2635
  /** Elevation when disabled. */
2636
- containerElevation: unsafeCSS(`var(--m3e-filled-button-disabled-container-elevation, ${DesignToken$1.elevation.level0})`)
2636
+ containerElevation: unsafeCSS(`var(--m3e-filled-button-disabled-container-elevation, var(--m3e-button-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`)
2637
2637
  },
2638
2638
  /** Design tokens that control hover state. */
2639
2639
  hover: {
2640
2640
  /** Icon color on hover. */
2641
- iconColor: unsafeCSS(`var(--m3e-filled-button-hover-icon-color, ${DesignToken$1.color.onPrimary})`),
2641
+ iconColor: unsafeCSS(`var(--m3e-filled-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${DesignToken$1.color.onPrimary}))`),
2642
2642
  /** Label color on hover. */
2643
- labelTextColor: unsafeCSS(`var(--m3e-filled-button-hover-label-text-color, ${DesignToken$1.color.onPrimary})`),
2643
+ labelTextColor: unsafeCSS(`var(--m3e-filled-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${DesignToken$1.color.onPrimary}))`),
2644
2644
  /** State layer color on hover. */
2645
- stateLayerColor: unsafeCSS(`var(--m3e-filled-button-hover-state-layer-color, ${DesignToken$1.color.onPrimary})`),
2645
+ stateLayerColor: unsafeCSS(`var(--m3e-filled-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${DesignToken$1.color.onPrimary}))`),
2646
2646
  /** State layer opacity on hover. */
2647
- stateLayerOpacity: unsafeCSS(`var(--m3e-filled-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
2647
+ stateLayerOpacity: unsafeCSS(`var(--m3e-filled-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
2648
2648
  /** Elevation on hover. */
2649
- containerElevation: unsafeCSS(`var(--m3e-filled-button-hover-container-elevation, ${DesignToken$1.elevation.level1})`),
2649
+ containerElevation: unsafeCSS(`var(--m3e-filled-button-hover-container-elevation, var(--m3e-button-hover-container-elevation, ${DesignToken$1.elevation.level1}))`),
2650
2650
  /** Unselected icon color on hover. */
2651
- unselectedIconColor: unsafeCSS(`var(--m3e-filled-button-hover-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
2651
+ unselectedIconColor: unsafeCSS(`var(--m3e-filled-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
2652
2652
  /** Unselected label color on hover. */
2653
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-hover-unselected-label-text-color, ${DesignToken$1.color.onSurfaceVariant})`),
2653
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${DesignToken$1.color.onSurfaceVariant}))`),
2654
2654
  /** Unselected state layer color on hover. */
2655
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-hover-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
2655
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
2656
2656
  /** Selected icon color on hover. */
2657
- selectedIconColor: unsafeCSS(`var(--m3e-filled-button-hover-selected-icon-color, ${DesignToken$1.color.onPrimary})`),
2657
+ selectedIconColor: unsafeCSS(`var(--m3e-filled-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${DesignToken$1.color.onPrimary}))`),
2658
2658
  /** Selected label color on hover. */
2659
- selectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-hover-selected-label-text-color, ${DesignToken$1.color.onPrimary})`),
2659
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${DesignToken$1.color.onPrimary}))`),
2660
2660
  /** Selected state layer color on hover. */
2661
- selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-hover-selected-state-layer-color, ${DesignToken$1.color.onPrimary})`)
2661
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${DesignToken$1.color.onPrimary}))`)
2662
2662
  },
2663
2663
  /** Design tokens that control focus state. */
2664
2664
  focus: {
2665
2665
  /** Icon color on focus. */
2666
- iconColor: unsafeCSS(`var(--m3e-filled-button-focus-icon-color, ${DesignToken$1.color.onPrimary})`),
2666
+ iconColor: unsafeCSS(`var(--m3e-filled-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${DesignToken$1.color.onPrimary}))`),
2667
2667
  /** Label color on focus. */
2668
- labelTextColor: unsafeCSS(`var(--m3e-filled-button-focus-label-text-color, ${DesignToken$1.color.onPrimary})`),
2668
+ labelTextColor: unsafeCSS(`var(--m3e-filled-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${DesignToken$1.color.onPrimary}))`),
2669
2669
  /** State layer color on focus. */
2670
- stateLayerColor: unsafeCSS(`var(--m3e-filled-button-focus-state-layer-color, ${DesignToken$1.color.onPrimary})`),
2670
+ stateLayerColor: unsafeCSS(`var(--m3e-filled-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${DesignToken$1.color.onPrimary}))`),
2671
2671
  /**State layer opacity on focus. */
2672
- stateLayerOpacity: unsafeCSS(`var(--m3e-filled-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
2672
+ stateLayerOpacity: unsafeCSS(`var(--m3e-filled-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
2673
2673
  /** Elevation on focus. */
2674
- containerElevation: unsafeCSS(`var(--m3e-filled-button-focus-container-elevation, ${DesignToken$1.elevation.level0})`),
2674
+ containerElevation: unsafeCSS(`var(--m3e-filled-button-focus-container-elevation, var(--m3e-button-focus-container-elevation, ${DesignToken$1.elevation.level0}))`),
2675
2675
  /** Unselected icon color on focus. */
2676
- unselectedIconColor: unsafeCSS(`var(--m3e-filled-button-focus-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
2676
+ unselectedIconColor: unsafeCSS(`var(--m3e-filled-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
2677
2677
  /** Unselected label color on focus. */
2678
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-focus-unselected-label-text-color, ${DesignToken$1.color.onSurfaceVariant})`),
2678
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${DesignToken$1.color.onSurfaceVariant}))`),
2679
2679
  /** Unselected state layer color on focus. */
2680
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-focus-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
2680
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
2681
2681
  /** Selected icon color on focus. */
2682
- selectedIconColor: unsafeCSS(`var(--m3e-filled-button-focus-selected-icon-color, ${DesignToken$1.color.onPrimary})`),
2682
+ selectedIconColor: unsafeCSS(`var(--m3e-filled-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${DesignToken$1.color.onPrimary}))`),
2683
2683
  /** Selected label color on focus. */
2684
- selectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-focus-selected-label-text-color, ${DesignToken$1.color.onPrimary})`),
2684
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${DesignToken$1.color.onPrimary}))`),
2685
2685
  /** Selected state layer color on focus. */
2686
- selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-focus-selected-state-layer-color, ${DesignToken$1.color.onPrimary})`)
2686
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${DesignToken$1.color.onPrimary}))`)
2687
2687
  },
2688
2688
  /** Design tokens that control pressed state. */
2689
2689
  pressed: {
2690
2690
  /** Icon color on pressed. */
2691
- iconColor: unsafeCSS(`var(--m3e-filled-button-pressed-icon-color, ${DesignToken$1.color.onPrimary})`),
2691
+ iconColor: unsafeCSS(`var(--m3e-filled-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${DesignToken$1.color.onPrimary}))`),
2692
2692
  /** Label color on pressed. */
2693
- labelTextColor: unsafeCSS(`var(--m3e-filled-button-pressed-label-text-color, ${DesignToken$1.color.onPrimary})`),
2693
+ labelTextColor: unsafeCSS(`var(--m3e-filled-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${DesignToken$1.color.onPrimary}))`),
2694
2694
  /** State layer color on pressed. */
2695
- stateLayerColor: unsafeCSS(`var(--m3e-filled-button-pressed-state-layer-color, ${DesignToken$1.color.onPrimary})`),
2695
+ stateLayerColor: unsafeCSS(`var(--m3e-filled-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${DesignToken$1.color.onPrimary}))`),
2696
2696
  /** State layer opacity on pressed. */
2697
- stateLayerOpacity: unsafeCSS(`var(--m3e-filled-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
2697
+ stateLayerOpacity: unsafeCSS(`var(--m3e-filled-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
2698
2698
  /** Elevation on pressed. */
2699
- containerElevation: unsafeCSS(`var(--m3e-filled-button-pressed-container-elevation, ${DesignToken$1.elevation.level0})`),
2699
+ containerElevation: unsafeCSS(`var(--m3e-filled-button-pressed-container-elevation, var(--m3e-button-pressed-container-elevation, ${DesignToken$1.elevation.level0}))`),
2700
2700
  /** Unselected icon color on pressed. */
2701
- unselectedIconColor: unsafeCSS(`var(--m3e-filled-button-pressed-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
2701
+ unselectedIconColor: unsafeCSS(`var(--m3e-filled-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
2702
2702
  /** Unselected label color on pressed. */
2703
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-pressed-unselected-label-text-color, ${DesignToken$1.color.onSurfaceVariant})`),
2703
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${DesignToken$1.color.onSurfaceVariant}))`),
2704
2704
  /** Unselected state layer color on pressed. */
2705
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
2705
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
2706
2706
  /** Selected icon color on pressed. */
2707
- selectedIconColor: unsafeCSS(`var(--m3e-filled-button-pressed-selected-icon-color, ${DesignToken$1.color.onPrimary})`),
2707
+ selectedIconColor: unsafeCSS(`var(--m3e-filled-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${DesignToken$1.color.onPrimary}))`),
2708
2708
  /** Selected label color on pressed. */
2709
- selectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-pressed-selected-label-text-color, ${DesignToken$1.color.onPrimary})`),
2709
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${DesignToken$1.color.onPrimary}))`),
2710
2710
  /** Selected state layer color on pressed. */
2711
- selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-pressed-selected-state-layer-color, ${DesignToken$1.color.onPrimary})`)
2711
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${DesignToken$1.color.onPrimary}))`)
2712
2712
  }
2713
2713
  },
2714
2714
  /** Design tokens that control the `tonal` variant. */
2715
2715
  tonal: {
2716
2716
  /** Default label color. */
2717
- labelTextColor: unsafeCSS(`var(--m3e-tonal-button-label-text-color, ${DesignToken$1.color.onSecondaryContainer})`),
2717
+ labelTextColor: unsafeCSS(`var(--m3e-tonal-button-label-text-color, var(--m3e-button-label-text-color, ${DesignToken$1.color.onSecondaryContainer}))`),
2718
2718
  /** Default icon color. */
2719
- iconColor: unsafeCSS(`var(--m3e-tonal-button-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
2719
+ iconColor: unsafeCSS(`var(--m3e-tonal-button-icon-color, var(--m3e-button-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
2720
2720
  /** Default container background color. */
2721
- containerColor: unsafeCSS(`var(--m3e-tonal-button-container-color, ${DesignToken$1.color.secondaryContainer})`),
2721
+ containerColor: unsafeCSS(`var(--m3e-tonal-button-container-color, var(--m3e-button-container-color, ${DesignToken$1.color.secondaryContainer}))`),
2722
2722
  /** Resting elevation. */
2723
- containerElevation: unsafeCSS(`var(--m3e-tonal-button-container-elevation, ${DesignToken$1.elevation.level0})`),
2723
+ containerElevation: unsafeCSS(`var(--m3e-tonal-button-container-elevation, var(--m3e-button-container-elevation, ${DesignToken$1.elevation.level0}))`),
2724
2724
  /** Unselected label color. */
2725
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-unselected-label-text-color, ${DesignToken$1.color.onSecondaryContainer})`),
2725
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${DesignToken$1.color.onSecondaryContainer}))`),
2726
2726
  /** Unselected icon color. */
2727
- unselectedIconColor: unsafeCSS(`var(--m3e-tonal-button-unselected-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
2727
+ unselectedIconColor: unsafeCSS(`var(--m3e-tonal-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
2728
2728
  /** Unselected container background color. */
2729
- unselectedContainerColor: unsafeCSS(`var(--m3e-tonal-button-unselected-container-color, ${DesignToken$1.color.secondaryContainer})`),
2729
+ unselectedContainerColor: unsafeCSS(`var(--m3e-tonal-button-unselected-container-color, var(--m3e-button-unselected-container-color, ${DesignToken$1.color.secondaryContainer}))`),
2730
2730
  /** Selected label color. */
2731
- selectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-selected-label-text-color, ${DesignToken$1.color.onSecondary})`),
2731
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${DesignToken$1.color.onSecondary}))`),
2732
2732
  /** Selected icon color. */
2733
- selectedIconColor: unsafeCSS(`var(--m3e-tonal-button-selected-icon-color, ${DesignToken$1.color.onSecondary})`),
2733
+ selectedIconColor: unsafeCSS(`var(--m3e-tonal-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${DesignToken$1.color.onSecondary}))`),
2734
2734
  /** Selected container background color. */
2735
- selectedContainerColor: unsafeCSS(`var(--m3e-tonal-button-selected-container-color, ${DesignToken$1.color.secondary})`),
2735
+ selectedContainerColor: unsafeCSS(`var(--m3e-tonal-button-selected-container-color, var(--m3e-button-selected-container-color, ${DesignToken$1.color.secondary}))`),
2736
2736
  /** Design tokens that control disabled state. */
2737
2737
  disabled: {
2738
2738
  /** Container background color when disabled. */
2739
- containerColor: unsafeCSS(`var(--m3e-tonal-button-disabled-container-color, ${DesignToken$1.color.onSurface})`),
2739
+ containerColor: unsafeCSS(`var(--m3e-tonal-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${DesignToken$1.color.onSurface}))`),
2740
2740
  /** Opacity of container when disabled. */
2741
- containerOpacity: unsafeCSS(`var(--m3e-tonal-button-disabled-container-opacity, 10%)`),
2741
+ containerOpacity: unsafeCSS(`var(--m3e-tonal-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))`),
2742
2742
  /** Icon color when disabled. */
2743
- iconColor: unsafeCSS(`var(--m3e-tonal-button-disabled-icon-color, ${DesignToken$1.color.onSurface})`),
2743
+ iconColor: unsafeCSS(`var(--m3e-tonal-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${DesignToken$1.color.onSurface}))`),
2744
2744
  /** Icon opacity when disabled. */
2745
- iconOpacity: unsafeCSS(`var(--m3e-tonal-button-disabled-icon-opacity, 38%)`),
2745
+ iconOpacity: unsafeCSS(`var(--m3e-tonal-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))`),
2746
2746
  /** Label color when disabled. */
2747
- labelTextColor: unsafeCSS(`var(--m3e-tonal-button-disabled-label-text-color, ${DesignToken$1.color.onSurface})`),
2747
+ labelTextColor: unsafeCSS(`var(--m3e-tonal-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${DesignToken$1.color.onSurface}))`),
2748
2748
  /** Label opacity when disabled. */
2749
- labelTextOpacity: unsafeCSS(`var(--m3e-tonal-button-disabled-label-text-opacity, 38%)`),
2749
+ labelTextOpacity: unsafeCSS(`var(--m3e-tonal-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))`),
2750
2750
  /** Elevation when disabled. */
2751
- containerElevation: unsafeCSS(`var(--m3e-tonal-button-disabled-container-elevation, ${DesignToken$1.elevation.level0})`)
2751
+ containerElevation: unsafeCSS(`var(--m3e-tonal-button-disabled-container-elevation, var(--m3e-button-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`)
2752
2752
  },
2753
2753
  /** Design tokens that control hover state. */
2754
2754
  hover: {
2755
2755
  /** Icon color on hover. */
2756
- iconColor: unsafeCSS(`var(--m3e-tonal-button-hover-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
2756
+ iconColor: unsafeCSS(`var(--m3e-tonal-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
2757
2757
  /** Label color on hover. */
2758
- labelTextColor: unsafeCSS(`var(--m3e-tonal-button-hover-label-text-color, ${DesignToken$1.color.onSecondaryContainer})`),
2758
+ labelTextColor: unsafeCSS(`var(--m3e-tonal-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${DesignToken$1.color.onSecondaryContainer}))`),
2759
2759
  /** State layer color on hover. */
2760
- stateLayerColor: unsafeCSS(`var(--m3e-tonal-button-hover-state-layer-color, ${DesignToken$1.color.onSecondaryContainer})`),
2760
+ stateLayerColor: unsafeCSS(`var(--m3e-tonal-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${DesignToken$1.color.onSecondaryContainer}))`),
2761
2761
  /** State layer opacity on hover. */
2762
- stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
2762
+ stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
2763
2763
  /** Elevation on hover. */
2764
- containerElevation: unsafeCSS(`var(--m3e-tonal-button-hover-container-elevation, ${DesignToken$1.elevation.level1})`),
2764
+ containerElevation: unsafeCSS(`var(--m3e-tonal-button-hover-container-elevation, var(--m3e-button-hover-container-elevation, ${DesignToken$1.elevation.level1}))`),
2765
2765
  /** Unselected icon color on hover. */
2766
- unselectedIconColor: unsafeCSS(`var(--m3e-tonal-button-hover-unselected-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
2766
+ unselectedIconColor: unsafeCSS(`var(--m3e-tonal-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
2767
2767
  /** Unselected label color on hover. */
2768
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-hover-unselected-label-text-color, ${DesignToken$1.color.onSecondaryContainer})`),
2768
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${DesignToken$1.color.onSecondaryContainer}))`),
2769
2769
  /** Unselected state layer color on hover. */
2770
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-hover-unselected-state-layer-color, ${DesignToken$1.color.onSecondaryContainer})`),
2770
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${DesignToken$1.color.onSecondaryContainer}))`),
2771
2771
  /** Selected icon color on hover. */
2772
- selectedIconColor: unsafeCSS(`var(--m3e-tonal-button-hover-selected-icon-color, ${DesignToken$1.color.onSecondary})`),
2772
+ selectedIconColor: unsafeCSS(`var(--m3e-tonal-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${DesignToken$1.color.onSecondary}))`),
2773
2773
  /** Selected label color on hover. */
2774
- selectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-hover-selected-label-text-color, ${DesignToken$1.color.onSecondary})`),
2774
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${DesignToken$1.color.onSecondary}))`),
2775
2775
  /** Selected state layer color on hover. */
2776
- selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-hover-selected-state-layer-color, ${DesignToken$1.color.onSecondary})`)
2776
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${DesignToken$1.color.onSecondary}))`)
2777
2777
  },
2778
2778
  /** Design tokens that control focus state. */
2779
2779
  focus: {
2780
2780
  /** Icon color on focus. */
2781
- iconColor: unsafeCSS(`var(--m3e-tonal-button-focus-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
2781
+ iconColor: unsafeCSS(`var(--m3e-tonal-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
2782
2782
  /** Label color on focus. */
2783
- labelTextColor: unsafeCSS(`var(--m3e-tonal-button-focus-label-text-color, ${DesignToken$1.color.onSecondaryContainer})`),
2783
+ labelTextColor: unsafeCSS(`var(--m3e-tonal-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${DesignToken$1.color.onSecondaryContainer}))`),
2784
2784
  /** State layer color on focus. */
2785
- stateLayerColor: unsafeCSS(`var(--m3e-tonal-button-focus-state-layer-color, ${DesignToken$1.color.onSecondaryContainer})`),
2785
+ stateLayerColor: unsafeCSS(`var(--m3e-tonal-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${DesignToken$1.color.onSecondaryContainer}))`),
2786
2786
  /**State layer opacity on focus. */
2787
- stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
2787
+ stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
2788
2788
  /** Elevation on focus. */
2789
- containerElevation: unsafeCSS(`var(--m3e-tonal-button-focus-container-elevation, ${DesignToken$1.elevation.level0})`),
2789
+ containerElevation: unsafeCSS(`var(--m3e-tonal-button-focus-container-elevation, var(--m3e-button-focus-container-elevation, ${DesignToken$1.elevation.level0}))`),
2790
2790
  /** Unselected icon color on focus. */
2791
- unselectedIconColor: unsafeCSS(`var(--m3e-tonal-button-focus-unselected-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
2791
+ unselectedIconColor: unsafeCSS(`var(--m3e-tonal-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
2792
2792
  /** Unselected label color on focus. */
2793
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-focus-unselected-label-text-color, ${DesignToken$1.color.onSecondaryContainer})`),
2793
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${DesignToken$1.color.onSecondaryContainer}))`),
2794
2794
  /** Unselected state layer color on focus. */
2795
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-focus-unselected-state-layer-color, ${DesignToken$1.color.onSecondaryContainer})`),
2795
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${DesignToken$1.color.onSecondaryContainer}))`),
2796
2796
  /** Selected icon color on focus. */
2797
- selectedIconColor: unsafeCSS(`var(--m3e-tonal-button-focus-selected-icon-color, ${DesignToken$1.color.onSecondary})`),
2797
+ selectedIconColor: unsafeCSS(`var(--m3e-tonal-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${DesignToken$1.color.onSecondary}))`),
2798
2798
  /** Selected label color on focus. */
2799
- selectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-focus-selected-label-text-color, ${DesignToken$1.color.onSecondary})`),
2799
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${DesignToken$1.color.onSecondary}))`),
2800
2800
  /** Selected state layer color on focus. */
2801
- selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-focus-selected-state-layer-color, ${DesignToken$1.color.onSecondary})`)
2801
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${DesignToken$1.color.onSecondary}))`)
2802
2802
  },
2803
2803
  /** Design tokens that control pressed state. */
2804
2804
  pressed: {
2805
2805
  /** Icon color on pressed. */
2806
- iconColor: unsafeCSS(`var(--m3e-tonal-button-pressed-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
2806
+ iconColor: unsafeCSS(`var(--m3e-tonal-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
2807
2807
  /** Label color on pressed. */
2808
- labelTextColor: unsafeCSS(`var(--m3e-tonal-button-pressed-label-text-color, ${DesignToken$1.color.onSecondaryContainer})`),
2808
+ labelTextColor: unsafeCSS(`var(--m3e-tonal-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${DesignToken$1.color.onSecondaryContainer}))`),
2809
2809
  /** State layer color on pressed. */
2810
- stateLayerColor: unsafeCSS(`var(--m3e-tonal-button-pressed-state-layer-color, ${DesignToken$1.color.onSecondaryContainer})`),
2810
+ stateLayerColor: unsafeCSS(`var(--m3e-tonal-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${DesignToken$1.color.onSecondaryContainer}))`),
2811
2811
  /** State layer opacity on pressed. */
2812
- stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
2812
+ stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
2813
2813
  /** Elevation on pressed. */
2814
- containerElevation: unsafeCSS(`var(--m3e-tonal-button-pressed-container-elevation, ${DesignToken$1.elevation.level0})`),
2814
+ containerElevation: unsafeCSS(`var(--m3e-tonal-button-pressed-container-elevation, var(--m3e-button-pressed-container-elevation, ${DesignToken$1.elevation.level0}))`),
2815
2815
  /** Unselected icon color on pressed. */
2816
- unselectedIconColor: unsafeCSS(`var(--m3e-tonal-button-pressed-unselected-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
2816
+ unselectedIconColor: unsafeCSS(`var(--m3e-tonal-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
2817
2817
  /** Unselected label color on pressed. */
2818
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-pressed-unselected-label-text-color, ${DesignToken$1.color.onSecondaryContainer})`),
2818
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${DesignToken$1.color.onSecondaryContainer}))`),
2819
2819
  /** Unselected state layer color on pressed. */
2820
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.onSecondaryContainer})`),
2820
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.onSecondaryContainer}))`),
2821
2821
  /** Selected icon color on pressed. */
2822
- selectedIconColor: unsafeCSS(`var(--m3e-tonal-button-pressed-selected-icon-color, ${DesignToken$1.color.onSecondary})`),
2822
+ selectedIconColor: unsafeCSS(`var(--m3e-tonal-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${DesignToken$1.color.onSecondary}))`),
2823
2823
  /** Selected label color on pressed. */
2824
- selectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-pressed-selected-label-text-color, ${DesignToken$1.color.onSecondary})`),
2824
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${DesignToken$1.color.onSecondary}))`),
2825
2825
  /** Selected state layer color on pressed. */
2826
- selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-pressed-selected-state-layer-color, ${DesignToken$1.color.onSecondary})`)
2826
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${DesignToken$1.color.onSecondary}))`)
2827
2827
  }
2828
2828
  },
2829
2829
  /** Design tokens that control the `text` variant. */
2830
2830
  text: {
2831
2831
  /** Default label color. */
2832
- labelTextColor: unsafeCSS(`var(--m3e-text-button-label-text-color, ${DesignToken$1.color.primary})`),
2832
+ labelTextColor: unsafeCSS(`var(--m3e-text-button-label-text-color, var(--m3e-button-label-text-color, ${DesignToken$1.color.primary}))`),
2833
2833
  /** Default icon color. */
2834
- iconColor: unsafeCSS(`var(--m3e-text-button-icon-color, ${DesignToken$1.color.primary})`),
2834
+ iconColor: unsafeCSS(`var(--m3e-text-button-icon-color, var(--m3e-button-icon-color, ${DesignToken$1.color.primary}))`),
2835
2835
  /** Unselected label color. */
2836
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-unselected-label-text-color, ${DesignToken$1.color.primary})`),
2836
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${DesignToken$1.color.primary}))`),
2837
2837
  /** Unselected icon color. */
2838
- unselectedIconColor: unsafeCSS(`var(--m3e-text-button-unselected-icon-color, ${DesignToken$1.color.primary})`),
2838
+ unselectedIconColor: unsafeCSS(`var(--m3e-text-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${DesignToken$1.color.primary}))`),
2839
2839
  /** Selected label color. */
2840
- selectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-selected-label-text-color, ${DesignToken$1.color.primary})`),
2840
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${DesignToken$1.color.primary}))`),
2841
2841
  /** Selected icon color. */
2842
- selectedIconColor: unsafeCSS(`var(--m3e-text-button-selected-icon-color, ${DesignToken$1.color.primary})`),
2842
+ selectedIconColor: unsafeCSS(`var(--m3e-text-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${DesignToken$1.color.primary}))`),
2843
2843
  /** Design tokens that control disabled state. */
2844
2844
  disabled: {
2845
2845
  /** Container background color when disabled. */
2846
- containerColor: unsafeCSS(`var(--m3e-text-button-disabled-container-color, ${DesignToken$1.color.onSurface})`),
2846
+ containerColor: unsafeCSS(`var(--m3e-text-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${DesignToken$1.color.onSurface}))`),
2847
2847
  /** Opacity of container when disabled. */
2848
- containerOpacity: unsafeCSS(`var(--m3e-text-button-disabled-container-opacity, 10%)`),
2848
+ containerOpacity: unsafeCSS(`var(--m3e-text-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))`),
2849
2849
  /** Icon color when disabled. */
2850
- iconColor: unsafeCSS(`var(--m3e-text-button-disabled-icon-color, ${DesignToken$1.color.onSurface})`),
2850
+ iconColor: unsafeCSS(`var(--m3e-text-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${DesignToken$1.color.onSurface}))`),
2851
2851
  /** Icon opacity when disabled. */
2852
- iconOpacity: unsafeCSS(`var(--m3e-text-button-disabled-icon-opacity, 38%)`),
2852
+ iconOpacity: unsafeCSS(`var(--m3e-text-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))`),
2853
2853
  /** Label color when disabled. */
2854
- labelTextColor: unsafeCSS(`var(--m3e-text-button-disabled-label-text-color, ${DesignToken$1.color.onSurface})`),
2854
+ labelTextColor: unsafeCSS(`var(--m3e-text-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${DesignToken$1.color.onSurface}))`),
2855
2855
  /** Label opacity when disabled. */
2856
- labelTextOpacity: unsafeCSS(`var(--m3e-text-button-disabled-label-text-opacity, 38%)`)
2856
+ labelTextOpacity: unsafeCSS(`var(--m3e-text-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))`)
2857
2857
  },
2858
2858
  /** Design tokens that control hover state. */
2859
2859
  hover: {
2860
2860
  /** Icon color on hover. */
2861
- iconColor: unsafeCSS(`var(--m3e-text-button-hover-icon-color, ${DesignToken$1.color.primary})`),
2861
+ iconColor: unsafeCSS(`var(--m3e-text-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${DesignToken$1.color.primary}))`),
2862
2862
  /** Label color on hover. */
2863
- labelTextColor: unsafeCSS(`var(--m3e-text-button-hover-label-text-color, ${DesignToken$1.color.primary})`),
2863
+ labelTextColor: unsafeCSS(`var(--m3e-text-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${DesignToken$1.color.primary}))`),
2864
2864
  /** State layer color on hover. */
2865
- stateLayerColor: unsafeCSS(`var(--m3e-text-button-hover-state-layer-color, ${DesignToken$1.color.primary})`),
2865
+ stateLayerColor: unsafeCSS(`var(--m3e-text-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${DesignToken$1.color.primary}))`),
2866
2866
  /** State layer opacity on hover. */
2867
- stateLayerOpacity: unsafeCSS(`var(--m3e-text-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
2867
+ stateLayerOpacity: unsafeCSS(`var(--m3e-text-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
2868
2868
  /** Unselected icon color on hover. */
2869
- unselectedIconColor: unsafeCSS(`var(--m3e-text-button-hover-unselected-icon-color, ${DesignToken$1.color.primary})`),
2869
+ unselectedIconColor: unsafeCSS(`var(--m3e-text-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${DesignToken$1.color.primary}))`),
2870
2870
  /** Unselected label color on hover. */
2871
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-hover-unselected-label-text-color, ${DesignToken$1.color.primary})`),
2871
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${DesignToken$1.color.primary}))`),
2872
2872
  /** Unselected state layer color on hover. */
2873
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-hover-unselected-state-layer-color, ${DesignToken$1.color.primary})`),
2873
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${DesignToken$1.color.primary}))`),
2874
2874
  /** Selected icon color on hover. */
2875
- selectedIconColor: unsafeCSS(`var(--m3e-text-button-hover-selected-icon-color, ${DesignToken$1.color.primary})`),
2875
+ selectedIconColor: unsafeCSS(`var(--m3e-text-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${DesignToken$1.color.primary}))`),
2876
2876
  /** Selected label color on hover. */
2877
- selectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-hover-selected-label-text-color, ${DesignToken$1.color.primary})`),
2877
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${DesignToken$1.color.primary}))`),
2878
2878
  /** Selected state layer color on hover. */
2879
- selectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-hover-selected-state-layer-color, ${DesignToken$1.color.primary})`)
2879
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${DesignToken$1.color.primary}))`)
2880
2880
  },
2881
2881
  /** Design tokens that control focus state. */
2882
2882
  focus: {
2883
2883
  /** Icon color on focus. */
2884
- iconColor: unsafeCSS(`var(--m3e-text-button-focus-icon-color, ${DesignToken$1.color.primary})`),
2884
+ iconColor: unsafeCSS(`var(--m3e-text-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${DesignToken$1.color.primary}))`),
2885
2885
  /** Label color on focus. */
2886
- labelTextColor: unsafeCSS(`var(--m3e-text-button-focus-label-text-color, ${DesignToken$1.color.primary})`),
2886
+ labelTextColor: unsafeCSS(`var(--m3e-text-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${DesignToken$1.color.primary}))`),
2887
2887
  /** State layer color on focus. */
2888
- stateLayerColor: unsafeCSS(`var(--m3e-text-button-focus-state-layer-color, ${DesignToken$1.color.primary})`),
2888
+ stateLayerColor: unsafeCSS(`var(--m3e-text-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${DesignToken$1.color.primary}))`),
2889
2889
  /**State layer opacity on focus. */
2890
- stateLayerOpacity: unsafeCSS(`var(--m3e-text-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
2890
+ stateLayerOpacity: unsafeCSS(`var(--m3e-text-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
2891
2891
  /** Unselected icon color on focus. */
2892
- unselectedIconColor: unsafeCSS(`var(--m3e-text-button-focus-unselected-icon-color, ${DesignToken$1.color.primary})`),
2892
+ unselectedIconColor: unsafeCSS(`var(--m3e-text-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${DesignToken$1.color.primary}))`),
2893
2893
  /** Unselected label color on focus. */
2894
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-focus-unselected-label-text-color, ${DesignToken$1.color.primary})`),
2894
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${DesignToken$1.color.primary}))`),
2895
2895
  /** Unselected state layer color on focus. */
2896
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-focus-unselected-state-layer-color, ${DesignToken$1.color.primary})`),
2896
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${DesignToken$1.color.primary}))`),
2897
2897
  /** Selected icon color on focus. */
2898
- selectedIconColor: unsafeCSS(`var(--m3e-text-button-focus-selected-icon-color, ${DesignToken$1.color.primary})`),
2898
+ selectedIconColor: unsafeCSS(`var(--m3e-text-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${DesignToken$1.color.primary}))`),
2899
2899
  /** Selected label color on focus. */
2900
- selectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-focus-selected-label-text-color, ${DesignToken$1.color.primary})`),
2900
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${DesignToken$1.color.primary}))`),
2901
2901
  /** Selected state layer color on focus. */
2902
- selectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-focus-selected-state-layer-color, ${DesignToken$1.color.primary})`)
2902
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${DesignToken$1.color.primary}))`)
2903
2903
  },
2904
2904
  /** Design tokens that control pressed state. */
2905
2905
  pressed: {
2906
2906
  /** Icon color on pressed. */
2907
- iconColor: unsafeCSS(`var(--m3e-text-button-pressed-icon-color, ${DesignToken$1.color.primary})`),
2907
+ iconColor: unsafeCSS(`var(--m3e-text-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${DesignToken$1.color.primary}))`),
2908
2908
  /** Label color on pressed. */
2909
- labelTextColor: unsafeCSS(`var(--m3e-text-button-pressed-label-text-color, ${DesignToken$1.color.primary})`),
2909
+ labelTextColor: unsafeCSS(`var(--m3e-text-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${DesignToken$1.color.primary}))`),
2910
2910
  /** State layer color on pressed. */
2911
- stateLayerColor: unsafeCSS(`var(--m3e-text-button-pressed-state-layer-color, ${DesignToken$1.color.primary})`),
2911
+ stateLayerColor: unsafeCSS(`var(--m3e-text-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${DesignToken$1.color.primary}))`),
2912
2912
  /** State layer opacity on pressed. */
2913
- stateLayerOpacity: unsafeCSS(`var(--m3e-text-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
2913
+ stateLayerOpacity: unsafeCSS(`var(--m3e-text-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
2914
2914
  /** Unselected icon color on pressed. */
2915
- unselectedIconColor: unsafeCSS(`var(--m3e-text-button-pressed-unselected-icon-color, ${DesignToken$1.color.primary})`),
2915
+ unselectedIconColor: unsafeCSS(`var(--m3e-text-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${DesignToken$1.color.primary}))`),
2916
2916
  /** Unselected label color on pressed. */
2917
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-pressed-unselected-label-text-color, ${DesignToken$1.color.primary})`),
2917
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${DesignToken$1.color.primary}))`),
2918
2918
  /** Unselected state layer color on pressed. */
2919
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.primary})`),
2919
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.primary}))`),
2920
2920
  /** Selected icon color on pressed. */
2921
- selectedIconColor: unsafeCSS(`var(--m3e-text-button-pressed-selected-icon-color, ${DesignToken$1.color.primary})`),
2921
+ selectedIconColor: unsafeCSS(`var(--m3e-text-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${DesignToken$1.color.primary}))`),
2922
2922
  /** Selected label color on pressed. */
2923
- selectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-pressed-selected-label-text-color, ${DesignToken$1.color.primary})`),
2923
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${DesignToken$1.color.primary}))`),
2924
2924
  /** Selected state layer color on pressed. */
2925
- selectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-pressed-selected-state-layer-color, ${DesignToken$1.color.primary})`)
2925
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${DesignToken$1.color.primary}))`)
2926
2926
  }
2927
2927
  }
2928
2928
  };
@@ -2935,7 +2935,7 @@ function buttonVariantStyle(variant) {
2935
2935
  * Appearance variant styles for `M3eButtonElement`.
2936
2936
  * @internal
2937
2937
  */
2938
- const ButtonVariantStyle = [buttonVariantStyle("text"), buttonVariantStyle("elevated"), buttonVariantStyle("outlined"), buttonVariantStyle("filled"), buttonVariantStyle("tonal"), css`:host([variant="outlined"]) .base { outline-style: solid; }`];
2938
+ const ButtonVariantStyle = [buttonVariantStyle("text"), buttonVariantStyle("elevated"), buttonVariantStyle("outlined"), buttonVariantStyle("filled"), buttonVariantStyle("tonal"), css`:host([variant="outlined"]:not([toggle][selected]):not(:disabled):not([disabled-interactive])) .base { outline-style: solid; }`];
2939
2939
 
2940
2940
  var _M3eButtonElement_instances, _M3eButtonElement_clickHandler, _M3eButtonElement_handleClick, _M3eButtonElement_handleSelectedIconSlotChange, _M3eButtonElement_updateButtonShape, _M3eButtonElement_handlePressedChange;
2941
2941
  /**
@@ -2989,6 +2989,21 @@ var _M3eButtonElement_instances, _M3eButtonElement_clickHandler, _M3eButtonEleme
2989
2989
  * @fires change - Dispatched when a toggle button's selected state changes.
2990
2990
  * @fires click - Emitted when the element is clicked.
2991
2991
  *
2992
+ * @cssprop --m3e-button-container-height - Height of the button container, for all size variants.
2993
+ * @cssprop --m3e-button-outline-thickness - Thickness of the button outline, for all size variants.
2994
+ * @cssprop --m3e-button-label-text-font-size - Font size for the label text, for all size variants.
2995
+ * @cssprop --m3e-button-label-text-font-weight - Font weight for the label text, for all size variants.
2996
+ * @cssprop --m3e-button-label-text-line-height - Line height for the label text, for all size variants.
2997
+ * @cssprop --m3e-button-label-text-tracking - Letter tracking for the label text, for all size variants.
2998
+ * @cssprop --m3e-button-icon-size - Size of the icon, for all size variants.
2999
+ * @cssprop --m3e-button-shape-round - Corner radius for round shape, for all size variants.
3000
+ * @cssprop --m3e-button-shape-square - Corner radius for square shape, for all size variants.
3001
+ * @cssprop --m3e-button-selected-shape-round - Corner radius when selected (round), for all size variants.
3002
+ * @cssprop --m3e-button-selected-shape-square - Corner radius when selected (square), for all size variants.
3003
+ * @cssprop --m3e-button-shape-pressed-morph - Corner radius when pressed, for all size variants.
3004
+ * @cssprop --m3e-button-leading-space - Space before icon or label, for all size variants.
3005
+ * @cssprop --m3e-button-trailing-space - Space after icon or label, for all size variants.
3006
+ * @cssprop --m3e-button-icon-label-space - Space between icon and label, for all size variants.
2992
3007
  * @cssprop --m3e-button-extra-small-container-height - Height of the button container, for the extra-small size variant.
2993
3008
  * @cssprop --m3e-button-extra-small-outline-thickness - Thickness of the button outline, for the extra-small size variant.
2994
3009
  * @cssprop --m3e-button-extra-small-label-text-font-size - Font size for the label text, for the extra-small size variant.
@@ -3064,6 +3079,61 @@ var _M3eButtonElement_instances, _M3eButtonElement_clickHandler, _M3eButtonEleme
3064
3079
  * @cssprop --m3e-button-extra-large-leading-space - Space before icon or label, for the extra-large size variant.
3065
3080
  * @cssprop --m3e-button-extra-large-trailing-space - Space after icon or label, for the extra-large size variant.
3066
3081
  * @cssprop --m3e-button-extra-large-icon-label-space - Space between icon and label, for the extra-large size variant.
3082
+ * @cssprop --m3e-button-outline-color - Outline color, for all variants.
3083
+ * @cssprop --m3e-button-disabled-outline-color - Disabled outline color, for all variants.
3084
+ * @cssprop --m3e-button-hover-outline-color - Hover outline color, for all variants.
3085
+ * @cssprop --m3e-button-focus-outline-color - Focus outline color, for all variants.
3086
+ * @cssprop --m3e-button-pressed-outline-color - Pressed outline color, for all variants.
3087
+ * @cssprop --m3e-button-container-color - Container background color, for all variants.
3088
+ * @cssprop --m3e-button-container-elevation - Elevation, for all variants.
3089
+ * @cssprop --m3e-button-unselected-container-color - Unselected container color, for all variants.
3090
+ * @cssprop --m3e-button-selected-container-color - Selected container color, for all variants.
3091
+ * @cssprop --m3e-button-disabled-container-elevation - Disabled elevation, for all variants.
3092
+ * @cssprop --m3e-button-hover-container-elevation - Hover elevation, for all variants.
3093
+ * @cssprop --m3e-button-focus-container-elevation - Focus elevation, for all variants.
3094
+ * @cssprop --m3e-button-pressed-container-elevation - Pressed elevation, for all variants.
3095
+ * @cssprop --m3e-button-label-text-color - Label color, for all variants.
3096
+ * @cssprop --m3e-button-icon-color - Icon color, for all variants.
3097
+ * @cssprop --m3e-button-unselected-label-text-color - Unselected label color, for all variants.
3098
+ * @cssprop --m3e-button-unselected-icon-color - Unselected icon color, for all variants.
3099
+ * @cssprop --m3e-button-selected-label-text-color - Selected label color, for all variants.
3100
+ * @cssprop --m3e-button-selected-icon-color - Selected icon color, for all variants.
3101
+ * @cssprop --m3e-button-disabled-container-color - Disabled container color, for all variants.
3102
+ * @cssprop --m3e-button-disabled-container-opacity - Disabled container opacity, for all variants.
3103
+ * @cssprop --m3e-button-disabled-icon-color - Disabled icon color, for all variants.
3104
+ * @cssprop --m3e-button-disabled-icon-opacity - Disabled icon opacity, for all variants.
3105
+ * @cssprop --m3e-button-disabled-label-text-color - Disabled label color, for all variants.
3106
+ * @cssprop --m3e-button-disabled-label-text-opacity - Disabled label opacity, for all variants.
3107
+ * @cssprop --m3e-button-hover-icon-color - Hover icon color, for all variants.
3108
+ * @cssprop --m3e-button-hover-label-text-color - Hover label color, for all variants.
3109
+ * @cssprop --m3e-button-hover-state-layer-color - Hover state layer color, for all variants.
3110
+ * @cssprop --m3e-button-hover-state-layer-opacity - Hover state layer opacity, for all variants.
3111
+ * @cssprop --m3e-button-hover-unselected-icon-color - Hover unselected icon color, for all variants.
3112
+ * @cssprop --m3e-button-hover-unselected-label-text-color - Hover unselected label color, for all variants.
3113
+ * @cssprop --m3e-button-hover-unselected-state-layer-color - Hover unselected state layer color, for all variants.
3114
+ * @cssprop --m3e-button-hover-selected-icon-color - Hover selected icon color, for all variants.
3115
+ * @cssprop --m3e-button-hover-selected-label-text-color - Hover selected label color, for all variants.
3116
+ * @cssprop --m3e-button-hover-selected-state-layer-color - Hover selected state layer color, for all variants.
3117
+ * @cssprop --m3e-button-focus-icon-color - Focus icon color, for all variants.
3118
+ * @cssprop --m3e-button-focus-label-text-color - Focus label color, for all variants.
3119
+ * @cssprop --m3e-button-focus-state-layer-color - Focus state layer color, for all variants.
3120
+ * @cssprop --m3e-button-focus-state-layer-opacity - Focus state layer opacity, for all variants.
3121
+ * @cssprop --m3e-button-focus-unselected-icon-color - Focus unselected icon color, for all variants.
3122
+ * @cssprop --m3e-button-focus-unselected-label-text-color - Focus unselected label color, for all variants.
3123
+ * @cssprop --m3e-button-focus-unselected-state-layer-color - Focus unselected state layer color, for all variants.
3124
+ * @cssprop --m3e-button-focus-selected-icon-color - Focus selected icon color, for all variants.
3125
+ * @cssprop --m3e-button-focus-selected-label-text-color - Focus selected label color, for all variants.
3126
+ * @cssprop --m3e-button-focus-selected-state-layer-color - Focus selected state layer color, for all variants.
3127
+ * @cssprop --m3e-button-pressed-icon-color - Pressed icon color, for all variants.
3128
+ * @cssprop --m3e-button-pressed-label-text-color - Pressed label color, for all variants.
3129
+ * @cssprop --m3e-button-pressed-state-layer-color - Pressed state layer color, for all variants.
3130
+ * @cssprop --m3e-button-pressed-state-layer-opacity - Pressed state layer opacity, for all variants.
3131
+ * @cssprop --m3e-button-pressed-unselected-icon-color - Pressed unselected icon color, for all variants.
3132
+ * @cssprop --m3e-button-pressed-unselected-label-text-color - Pressed unselected label color, for all variants.
3133
+ * @cssprop --m3e-button-pressed-unselected-state-layer-color - Pressed unselected state layer color, for all variants.
3134
+ * @cssprop --m3e-button-pressed-selected-icon-color - Pressed selected icon color, for all variants.
3135
+ * @cssprop --m3e-button-pressed-selected-label-text-color - Pressed selected label color, for all variants.
3136
+ * @cssprop --m3e-button-pressed-selected-state-layer-color - Pressed selected state layer color, for all variants.
3067
3137
  * @cssprop --m3e-elevated-button-label-text-color - Label color, for the elevated variant.
3068
3138
  * @cssprop --m3e-elevated-button-icon-color - Icon color, for the elevated variant.
3069
3139
  * @cssprop --m3e-elevated-button-container-color - Container background color, for the elevated variant.
@@ -3706,106 +3776,106 @@ const CardToken = {
3706
3776
  */
3707
3777
  const CardVariantToken = {
3708
3778
  filled: {
3709
- textColor: unsafeCSS(`var(--m3e-filled-card-text-color, ${DesignToken$1.color.onSurface})`),
3710
- containerColor: unsafeCSS(`var(--m3e-filled-card-container-color, ${DesignToken$1.color.surfaceContainerHighest})`),
3711
- containerElevation: unsafeCSS(`var(--m3e-filled-card-container-elevation, ${DesignToken$1.elevation.level0})`),
3779
+ textColor: unsafeCSS(`var(--m3e-filled-card-text-color, var(--m3e-card-text-color, ${DesignToken$1.color.onSurface}))`),
3780
+ containerColor: unsafeCSS(`var(--m3e-filled-card-container-color, var(--m3e-card-container-color, ${DesignToken$1.color.surfaceContainerHighest}))`),
3781
+ containerElevation: unsafeCSS(`var(--m3e-filled-card-container-elevation, var(--m3e-card-container-elevation, ${DesignToken$1.elevation.level0}))`),
3712
3782
  disabled: {
3713
- textColor: unsafeCSS(`var(--m3e-filled-card-disabled-text-color, ${DesignToken$1.color.onSurface})`),
3714
- textOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-text-opacity, 38%)`),
3715
- imageOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-image-opacity, 38%)`),
3716
- containerColor: unsafeCSS(`var(--m3e-filled-card-disabled-container-color, ${DesignToken$1.color.surfaceVariant})`),
3717
- containerElevation: unsafeCSS(`var(--m3e-filled-card-disabled-container-elevation, ${DesignToken$1.elevation.level0})`),
3718
- containerElevationColor: unsafeCSS(`var(--m3e-filled-card-disabled-container-elevation-color, ${DesignToken$1.color.onSurface})`),
3719
- containerElevationOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-container-elevation-opacity, 38%)`),
3720
- containerOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-container-opacity, 38%)`)
3783
+ textColor: unsafeCSS(`var(--m3e-filled-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${DesignToken$1.color.onSurface}))`),
3784
+ textOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))`),
3785
+ imageOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))`),
3786
+ containerColor: unsafeCSS(`var(--m3e-filled-card-disabled-container-color, var(--m3e-card-disabled-container-color, ${DesignToken$1.color.surfaceVariant}))`),
3787
+ containerElevation: unsafeCSS(`var(--m3e-filled-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`),
3788
+ containerElevationColor: unsafeCSS(`var(--m3e-filled-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${DesignToken$1.color.onSurface}))`),
3789
+ containerElevationOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))`),
3790
+ containerOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-container-opacity, var(--m3e-card-disabled-container-opacity, 38%))`)
3721
3791
  },
3722
3792
  hover: {
3723
- textColor: unsafeCSS(`var(--m3e-filled-card-hover-text-color, ${DesignToken$1.color.onSurface})`),
3724
- stateLayerColor: unsafeCSS(`var(--m3e-filled-card-hover-state-layer-color, ${DesignToken$1.color.onSurface})`),
3725
- stateLayerOpacity: unsafeCSS(`var(--m3e-filled-card-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
3726
- containerElevation: unsafeCSS(`var(--m3e-filled-card-hover-container-elevation, ${DesignToken$1.elevation.level1})`)
3793
+ textColor: unsafeCSS(`var(--m3e-filled-card-hover-text-color, var(--m3e-card-hover-text-color, ${DesignToken$1.color.onSurface}))`),
3794
+ stateLayerColor: unsafeCSS(`var(--m3e-filled-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${DesignToken$1.color.onSurface}))`),
3795
+ stateLayerOpacity: unsafeCSS(`var(--m3e-filled-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
3796
+ containerElevation: unsafeCSS(`var(--m3e-filled-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${DesignToken$1.elevation.level1}))`)
3727
3797
  },
3728
3798
  focus: {
3729
- textColor: unsafeCSS(`var(--m3e-filled-card-focus-text-color, ${DesignToken$1.color.onSurface})`),
3730
- stateLayerColor: unsafeCSS(`var(--m3e-filled-card-focus-state-layer-color, ${DesignToken$1.color.onSurface})`),
3731
- stateLayerOpacity: unsafeCSS(`var(--m3e-filled-card-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
3732
- containerElevation: unsafeCSS(`var(--m3e-filled-card-focus-container-elevation, ${DesignToken$1.elevation.level0})`)
3799
+ textColor: unsafeCSS(`var(--m3e-filled-card-focus-text-color, var(--m3e-card-focus-text-color, ${DesignToken$1.color.onSurface}))`),
3800
+ stateLayerColor: unsafeCSS(`var(--m3e-filled-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${DesignToken$1.color.onSurface}))`),
3801
+ stateLayerOpacity: unsafeCSS(`var(--m3e-filled-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
3802
+ containerElevation: unsafeCSS(`var(--m3e-filled-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${DesignToken$1.elevation.level0}))`)
3733
3803
  },
3734
3804
  pressed: {
3735
- textColor: unsafeCSS(`var(--m3e-filled-card-pressed-text-color, ${DesignToken$1.color.onSurface})`),
3736
- stateLayerColor: unsafeCSS(`var(--m3e-filled-card-pressed-state-layer-color, ${DesignToken$1.color.onSurface})`),
3737
- stateLayerOpacity: unsafeCSS(`var(--m3e-filled-card-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
3738
- containerElevation: unsafeCSS(`var(--m3e-filled-card-pressed-container-elevation, ${DesignToken$1.elevation.level0})`)
3805
+ textColor: unsafeCSS(`var(--m3e-filled-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${DesignToken$1.color.onSurface}))`),
3806
+ stateLayerColor: unsafeCSS(`var(--m3e-filled-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${DesignToken$1.color.onSurface}))`),
3807
+ stateLayerOpacity: unsafeCSS(`var(--m3e-filled-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
3808
+ containerElevation: unsafeCSS(`var(--m3e-filled-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${DesignToken$1.elevation.level0}))`)
3739
3809
  }
3740
3810
  },
3741
3811
  elevated: {
3742
- textColor: unsafeCSS(`var(--m3e-elevated-card-text-color, ${DesignToken$1.color.onSurface})`),
3743
- containerColor: unsafeCSS(`var(--m3e-elevated-card-container-color, ${DesignToken$1.color.surfaceContainerLow})`),
3744
- containerElevation: unsafeCSS(`var(--m3e-elevated-card-container-elevation, ${DesignToken$1.elevation.level1})`),
3812
+ textColor: unsafeCSS(`var(--m3e-elevated-card-text-color, var(--m3e-card-text-color, ${DesignToken$1.color.onSurface}))`),
3813
+ containerColor: unsafeCSS(`var(--m3e-elevated-card-container-color, var(--m3e-card-container-color, ${DesignToken$1.color.surfaceContainerLow}))`),
3814
+ containerElevation: unsafeCSS(`var(--m3e-elevated-card-container-elevation, var(--m3e-card-container-elevation, ${DesignToken$1.elevation.level1}))`),
3745
3815
  disabled: {
3746
- textColor: unsafeCSS(`var(--m3e-elevated-card-disabled-text-color, ${DesignToken$1.color.onSurface})`),
3747
- textOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-text-opacity, 38%)`),
3748
- imageOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-image-opacity, 38%)`),
3749
- containerColor: unsafeCSS(`var(--m3e-elevated-card-disabled-container-color, ${DesignToken$1.color.surface})`),
3750
- containerElevation: unsafeCSS(`var(--m3e-elevated-card-disabled-container-elevation, ${DesignToken$1.elevation.level1})`),
3751
- containerElevationColor: unsafeCSS(`var(--m3e-elevated-card-disabled-container-elevation-color, ${DesignToken$1.color.onSurface})`),
3752
- containerElevationOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-container-elevation-opacity, 38%)`),
3753
- containerOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-container-opacity, 38%)`)
3816
+ textColor: unsafeCSS(`var(--m3e-elevated-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${DesignToken$1.color.onSurface}))`),
3817
+ textOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))`),
3818
+ imageOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))`),
3819
+ containerColor: unsafeCSS(`var(--m3e-elevated-card-disabled-container-color, var(--m3e-card-disabled-container-color, ${DesignToken$1.color.surface}))`),
3820
+ containerElevation: unsafeCSS(`var(--m3e-elevated-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${DesignToken$1.elevation.level1}))`),
3821
+ containerElevationColor: unsafeCSS(`var(--m3e-elevated-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${DesignToken$1.color.onSurface}))`),
3822
+ containerElevationOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))`),
3823
+ containerOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-container-opacity, var(--m3e-card-disabled-container-opacity, 38%))`)
3754
3824
  },
3755
3825
  hover: {
3756
- textColor: unsafeCSS(`var(--m3e-elevated-card-hover-text-color, ${DesignToken$1.color.onSurface})`),
3757
- stateLayerColor: unsafeCSS(`var(--m3e-elevated-card-hover-state-layer-color, ${DesignToken$1.color.onSurface})`),
3758
- stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-card-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
3759
- containerElevation: unsafeCSS(`var(--m3e-elevated-card-hover-container-elevation, ${DesignToken$1.elevation.level2})`)
3826
+ textColor: unsafeCSS(`var(--m3e-elevated-card-hover-text-color, var(--m3e-card-hover-text-color, ${DesignToken$1.color.onSurface}))`),
3827
+ stateLayerColor: unsafeCSS(`var(--m3e-elevated-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${DesignToken$1.color.onSurface}))`),
3828
+ stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
3829
+ containerElevation: unsafeCSS(`var(--m3e-elevated-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${DesignToken$1.elevation.level2}))`)
3760
3830
  },
3761
3831
  focus: {
3762
- textColor: unsafeCSS(`var(--m3e-elevated-card-focus-text-color, ${DesignToken$1.color.onSurface})`),
3763
- stateLayerColor: unsafeCSS(`var(--m3e-elevated-card-focus-state-layer-color, ${DesignToken$1.color.onSurface})`),
3764
- stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-card-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
3765
- containerElevation: unsafeCSS(`var(--m3e-elevated-card-focus-container-elevation, ${DesignToken$1.elevation.level1})`)
3832
+ textColor: unsafeCSS(`var(--m3e-elevated-card-focus-text-color, var(--m3e-card-focus-text-color, ${DesignToken$1.color.onSurface}))`),
3833
+ stateLayerColor: unsafeCSS(`var(--m3e-elevated-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${DesignToken$1.color.onSurface}))`),
3834
+ stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
3835
+ containerElevation: unsafeCSS(`var(--m3e-elevated-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${DesignToken$1.elevation.level1}))`)
3766
3836
  },
3767
3837
  pressed: {
3768
- textColor: unsafeCSS(`var(--m3e-elevated-card-pressed-text-color, ${DesignToken$1.color.onSurface})`),
3769
- stateLayerColor: unsafeCSS(`var(--m3e-elevated-card-pressed-state-layer-color, ${DesignToken$1.color.onSurface})`),
3770
- stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-card-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
3771
- containerElevation: unsafeCSS(`var(--m3e-elevated-card-pressed-container-elevation, ${DesignToken$1.elevation.level1})`)
3838
+ textColor: unsafeCSS(`var(--m3e-elevated-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${DesignToken$1.color.onSurface}))`),
3839
+ stateLayerColor: unsafeCSS(`var(--m3e-elevated-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${DesignToken$1.color.onSurface}))`),
3840
+ stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
3841
+ containerElevation: unsafeCSS(`var(--m3e-elevated-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${DesignToken$1.elevation.level1}))`)
3772
3842
  }
3773
3843
  },
3774
3844
  outlined: {
3775
- textColor: unsafeCSS(`var(--m3e-outlined-card-text-color, ${DesignToken$1.color.onSurface})`),
3776
- containerElevation: unsafeCSS(`var(--m3e-outlined-card-container-elevation, ${DesignToken$1.elevation.level0})`),
3777
- outlineColor: unsafeCSS(`var(--m3e-outlined-card-outline-color, ${DesignToken$1.color.outlineVariant})`),
3778
- outlineThickness: unsafeCSS("var(--m3e-outlined-card-outline-thickness, 1px)"),
3845
+ textColor: unsafeCSS(`var(--m3e-outlined-card-text-color, var(--m3e-card-text-color, ${DesignToken$1.color.onSurface}))`),
3846
+ containerElevation: unsafeCSS(`var(--m3e-outlined-card-container-elevation, var(--m3e-card-container-elevation, ${DesignToken$1.elevation.level0}))`),
3847
+ outlineColor: unsafeCSS(`var(--m3e-outlined-card-outline-color, var(--m3e-card-outline-color, ${DesignToken$1.color.outlineVariant}))`),
3848
+ outlineThickness: unsafeCSS("var(--m3e-outlined-card-outline-thickness, var(--m3e-card-outline-thickness, 1px))"),
3779
3849
  disabled: {
3780
- textColor: unsafeCSS(`var(--m3e-outlined-card-disabled-text-color, ${DesignToken$1.color.onSurface})`),
3781
- textOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-text-opacity, 38%)`),
3782
- imageOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-image-opacity, 38%)`),
3783
- containerElevation: unsafeCSS(`var(--m3e-outlined-card-disabled-container-elevation, ${DesignToken$1.elevation.level0})`),
3784
- containerElevationColor: unsafeCSS(`var(--m3e-outlined-card-disabled-container-elevation-color, ${DesignToken$1.color.onSurface})`),
3785
- containerElevationOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-container-elevation-opacity, 38%)`),
3786
- outlineColor: unsafeCSS(`var(--m3e-outlined-card-disabled-outline-color, ${DesignToken$1.color.outline})`),
3787
- outlineOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-outline-opacity, 12%)`)
3850
+ textColor: unsafeCSS(`var(--m3e-outlined-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${DesignToken$1.color.onSurface}))`),
3851
+ textOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))`),
3852
+ imageOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))`),
3853
+ containerElevation: unsafeCSS(`var(--m3e-outlined-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`),
3854
+ containerElevationColor: unsafeCSS(`var(--m3e-outlined-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${DesignToken$1.color.onSurface}))`),
3855
+ containerElevationOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))`),
3856
+ outlineColor: unsafeCSS(`var(--m3e-outlined-card-disabled-outline-color, var(--m3e-card-disabled-outline-color, ${DesignToken$1.color.outline}))`),
3857
+ outlineOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-outline-opacity, var(--m3e-card-disabled-outline-opacity, 12%))`)
3788
3858
  },
3789
3859
  hover: {
3790
- textColor: unsafeCSS(`var(--m3e-outlined-card-hover-text-color, ${DesignToken$1.color.onSurface})`),
3791
- stateLayerColor: unsafeCSS(`var(--m3e-outlined-card-hover-state-layer-color, ${DesignToken$1.color.onSurface})`),
3792
- stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-card-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
3793
- containerElevation: unsafeCSS(`var(--m3e-outlined-card-hover-container-elevation, ${DesignToken$1.elevation.level1})`),
3794
- outlineColor: unsafeCSS(`var(--m3e-outlined-card-hover-outline-color, ${DesignToken$1.color.outlineVariant})`)
3860
+ textColor: unsafeCSS(`var(--m3e-outlined-card-hover-text-color, var(--m3e-card-hover-text-color, ${DesignToken$1.color.onSurface}))`),
3861
+ stateLayerColor: unsafeCSS(`var(--m3e-outlined-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${DesignToken$1.color.onSurface}))`),
3862
+ stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
3863
+ containerElevation: unsafeCSS(`var(--m3e-outlined-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${DesignToken$1.elevation.level1}))`),
3864
+ outlineColor: unsafeCSS(`var(--m3e-outlined-card-hover-outline-color, var(--m3e-card-hover-outline-color, ${DesignToken$1.color.outlineVariant}))`)
3795
3865
  },
3796
3866
  focus: {
3797
- textColor: unsafeCSS(`var(--m3e-outlined-card-focus-text-color, ${DesignToken$1.color.onSurface})`),
3798
- stateLayerColor: unsafeCSS(`var(--m3e-outlined-card-focus-state-layer-color, ${DesignToken$1.color.onSurface})`),
3799
- stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-card-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
3800
- containerElevation: unsafeCSS(`var(--m3e-outlined-card-focus-container-elevation, ${DesignToken$1.elevation.level0})`),
3801
- outlineColor: unsafeCSS(`var(--m3e-outlined-card-focus-outline-color, ${DesignToken$1.color.onSurface})`)
3867
+ textColor: unsafeCSS(`var(--m3e-outlined-card-focus-text-color, var(--m3e-card-focus-text-color, ${DesignToken$1.color.onSurface}))`),
3868
+ stateLayerColor: unsafeCSS(`var(--m3e-outlined-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${DesignToken$1.color.onSurface}))`),
3869
+ stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
3870
+ containerElevation: unsafeCSS(`var(--m3e-outlined-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${DesignToken$1.elevation.level0}))`),
3871
+ outlineColor: unsafeCSS(`var(--m3e-outlined-card-focus-outline-color, var(--m3e-card-focus-outline-color, ${DesignToken$1.color.onSurface}))`)
3802
3872
  },
3803
3873
  pressed: {
3804
- textColor: unsafeCSS(`var(--m3e-outlined-card-pressed-text-color, ${DesignToken$1.color.onSurface})`),
3805
- stateLayerColor: unsafeCSS(`var(--m3e-outlined-card-pressed-state-layer-color, ${DesignToken$1.color.onSurface})`),
3806
- stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-card-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
3807
- containerElevation: unsafeCSS(`var(--m3e-outlined-card-pressed-container-elevation, ${DesignToken$1.elevation.level0})`),
3808
- outlineColor: unsafeCSS(`var(--m3e-outlined-card-pressed-outline-color, ${DesignToken$1.color.outlineVariant})`)
3874
+ textColor: unsafeCSS(`var(--m3e-outlined-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${DesignToken$1.color.onSurface}))`),
3875
+ stateLayerColor: unsafeCSS(`var(--m3e-outlined-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${DesignToken$1.color.onSurface}))`),
3876
+ stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
3877
+ containerElevation: unsafeCSS(`var(--m3e-outlined-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${DesignToken$1.elevation.level0}))`),
3878
+ outlineColor: unsafeCSS(`var(--m3e-outlined-card-pressed-outline-color, var(--m3e-card-pressed-outline-color, ${DesignToken$1.color.outlineVariant}))`)
3809
3879
  }
3810
3880
  }
3811
3881
  };
@@ -4235,9 +4305,13 @@ _M3eCheckboxElement_handleClick = function _M3eCheckboxElement_handleClick(e) {
4235
4305
  } else {
4236
4306
  this.checked = !this.checked;
4237
4307
  }
4308
+ // Prevent default avoids double-click in FireFox.
4309
+ if (this.closest("label")) {
4310
+ e.preventDefault();
4311
+ }
4238
4312
  };
4239
4313
  /** The styles of the element. */
4240
- M3eCheckboxElement.styles = css`:host { display: inline-block; outline: none; width: fit-content; height: fit-content; vertical-align: middle; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) { cursor: pointer; } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; border-radius: 50%; width: calc(var(--m3e-checkbox-container-size, 2.5rem) + ${DesignToken$1.density.calc(-3)}); height: calc(var(--m3e-checkbox-container-size, 2.5rem) + ${DesignToken$1.density.calc(-3)}); } .touch { position: absolute; height: 3rem; width: 3rem; margin: auto; } .wrapper { box-sizing: border-box; pointer-events: none; width: var(--m3e-checkbox-icon-size, 1.125rem); height: var(--m3e-checkbox-icon-size, 1.125rem); border-radius: var(--m3e-checkbox-container-shape, 0.125rem); } :host(:not([checked]):not([indeterminate])) .wrapper { border-width: var(--m3e-checkbox-unselected-outline-thickness, 0.125rem); border-style: solid; } :host(:not(.-touched.-invalid):not([indeterminate]):not([checked])) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-hover-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-focus-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-color: var(--m3e-checkbox-unselected-ripple-color, ${DesignToken$1.color.onSurface}); } :host(:not(.-touched.-invalid)[checked]) .base, :host(:not(.-touched.-invalid)[indeterminate]) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-hover-color, ${DesignToken$1.color.primary}); --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-focus-color, ${DesignToken$1.color.primary}); --m3e-ripple-color: var(--m3e-checkbox-selected-ripple-color, ${DesignToken$1.color.primary}); } :host(:not([aria-disabled="true"]):not(.-touched.-invalid)[checked]) .wrapper, :host(:not([aria-disabled="true"]):not(.-touched.-invalid)[indeterminate]) .wrapper { background-color: var(--m3e-checkbox-selected-container-color, ${DesignToken$1.color.primary}); color: var(--m3e-checkbox-selected-icon-color, ${DesignToken$1.color.onPrimary}); } :host(:not([aria-disabled="true"]):not(.-touched.-invalid):not([checked]):not([indeterminate]):not(:hover)) .wrapper { border-color: var(--m3e-checkbox-unselected-outline-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not([aria-disabled="true"]):not(.-touched.-invalid):not([checked]):not([indeterminate]):hover) .wrapper { border-color: var(--m3e-checkbox-unselected-hover-outline-color, ${DesignToken$1.color.onSurface}); } :host([aria-disabled="true"]:not([checked]):not([indeterminate])) .wrapper { border-color: color-mix( in srgb, var(--m3e-checkbox-unselected-disabled-outline-color, ${DesignToken$1.color.onSurface}) var(--m3e-checkbox-unselected-disabled-outline-opacity, 38%), transparent ); } :host([aria-disabled="true"][checked]) .wrapper, :host([aria-disabled="true"][indeterminate]) .wrapper { background-color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-container-color, ${DesignToken$1.color.onSurface}) var(--m3e-checkbox-selected-disabled-container-opacity, 38%), transparent ); color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-icon-color, ${DesignToken$1.color.surface}) var(--m3e-checkbox-selected-disabled-icon-opacity, 100%), transparent ); } :host(:not([aria-disabled="true"]).-touched.-invalid:not([checked]):not([indeterminate])) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-error-hover-color, ${DesignToken$1.color.error}); --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-error-focus-color, ${DesignToken$1.color.error}); --m3e-ripple-color: var(--m3e-checkbox-unselected-error-ripple-color, ${DesignToken$1.color.error}); } :host(:not([aria-disabled="true"]).-touched.-invalid[checked]) .base, :host(:not([aria-disabled="true"]).-touched.-invalid[indeterminate]) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-error-hover-color, ${DesignToken$1.color.onError}); --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-error-focus-color, ${DesignToken$1.color.onError}); --m3e-ripple-color: var(--m3e-checkbox-selected-error-ripple-color, ${DesignToken$1.color.onError}); } :host(:not([aria-disabled="true"]).-touched.-invalid:not([checked]):not([indeterminate])) .wrapper { border-color: var(--m3e-checkbox-unselected-error-outline-color, ${DesignToken$1.color.error}); } @media (forced-colors: active) { :host(:not(.-touched.-invalid):not([indeterminate]):not([checked])) .base, :host(:not(.-touched.-invalid)[checked]) .base, :host(:not(.-touched.-invalid)[indeterminate]) .base { --m3e-state-layer-hover-color: CanvasText; --m3e-state-layer-focus-color: CanvasText; --m3e-ripple-color: CanvasText; } :host(:not([aria-disabled="true"]):not(.-touched.-invalid):not([checked]):not([indeterminate]):not(:hover)) .wrapper, :host(:not([aria-disabled="true"]):not(.-touched.-invalid):not([checked]):not([indeterminate]):hover) .wrapper { border-color: CanvasText; } :host(:not([aria-disabled="true"]):not(.-touched.-invalid)[checked]) .wrapper, :host(:not([aria-disabled="true"]):not(.-touched.-invalid)[indeterminate]) .wrapper { background-color: CanvasText; color: Canvas; } :host([aria-disabled="true"]:not([checked]):not([indeterminate])) .wrapper { border-color: GrayText; } :host([aria-disabled="true"][checked]) .wrapper, :host([aria-disabled="true"][indeterminate]) .wrapper { background-color: GrayText; color: Canvas; } :host(:not([aria-disabled="true"]).-touched.-invalid:not([checked]):not([indeterminate])) .wrapper { border-color: Highlight; } :host(:not([aria-disabled="true"]).-touched.-invalid:not([checked]):not([indeterminate])) .base, :host(:not([aria-disabled="true"]).-touched.-invalid[checked]) .base, :host(:not([aria-disabled="true"]).-touched.-invalid[indeterminate]) .base { --m3e-state-layer-hover-color: Highlight; --m3e-state-layer-focus-color: Highlight; --m3e-ripple-color: Highlight; } }`;
4314
+ M3eCheckboxElement.styles = css`:host { display: inline-block; outline: none; width: fit-content; height: fit-content; vertical-align: middle; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) { cursor: pointer; } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; border-radius: 50%; width: calc(var(--m3e-checkbox-container-size, 2.5rem) + ${DesignToken$1.density.calc(-3)}); height: calc(var(--m3e-checkbox-container-size, 2.5rem) + ${DesignToken$1.density.calc(-3)}); } .touch { position: absolute; height: 3rem; width: 3rem; margin: auto; } .wrapper { box-sizing: border-box; pointer-events: none; width: var(--m3e-checkbox-icon-size, 1.125rem); height: var(--m3e-checkbox-icon-size, 1.125rem); border-radius: var(--m3e-checkbox-container-shape, 0.125rem); } :host(:not([checked]):not([indeterminate])) .wrapper { border-width: var(--m3e-checkbox-unselected-outline-thickness, 2px); border-style: solid; } :host(:not(.-touched.-invalid):not([indeterminate]):not([checked])) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-hover-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-focus-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-color: var(--m3e-checkbox-unselected-ripple-color, ${DesignToken$1.color.onSurface}); } :host(:not(.-touched.-invalid)[checked]) .base, :host(:not(.-touched.-invalid)[indeterminate]) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-hover-color, ${DesignToken$1.color.primary}); --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-focus-color, ${DesignToken$1.color.primary}); --m3e-ripple-color: var(--m3e-checkbox-selected-ripple-color, ${DesignToken$1.color.primary}); } :host(:not([aria-disabled="true"]):not(.-touched.-invalid)[checked]) .wrapper, :host(:not([aria-disabled="true"]):not(.-touched.-invalid)[indeterminate]) .wrapper { background-color: var(--m3e-checkbox-selected-container-color, ${DesignToken$1.color.primary}); color: var(--m3e-checkbox-selected-icon-color, ${DesignToken$1.color.onPrimary}); } :host(:not([aria-disabled="true"]):not(.-touched.-invalid):not([checked]):not([indeterminate]):not(:hover)) .wrapper { border-color: var(--m3e-checkbox-unselected-outline-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not([aria-disabled="true"]):not(.-touched.-invalid):not([checked]):not([indeterminate]):hover) .wrapper { border-color: var(--m3e-checkbox-unselected-hover-outline-color, ${DesignToken$1.color.onSurface}); } :host([aria-disabled="true"]:not([checked]):not([indeterminate])) .wrapper { border-color: color-mix( in srgb, var(--m3e-checkbox-unselected-disabled-outline-color, ${DesignToken$1.color.onSurface}) var(--m3e-checkbox-unselected-disabled-outline-opacity, 38%), transparent ); } :host([aria-disabled="true"][checked]) .wrapper, :host([aria-disabled="true"][indeterminate]) .wrapper { background-color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-container-color, ${DesignToken$1.color.onSurface}) var(--m3e-checkbox-selected-disabled-container-opacity, 38%), transparent ); color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-icon-color, ${DesignToken$1.color.surface}) var(--m3e-checkbox-selected-disabled-icon-opacity, 100%), transparent ); } :host(:not([aria-disabled="true"]).-touched.-invalid:not([checked]):not([indeterminate])) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-error-hover-color, ${DesignToken$1.color.error}); --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-error-focus-color, ${DesignToken$1.color.error}); --m3e-ripple-color: var(--m3e-checkbox-unselected-error-ripple-color, ${DesignToken$1.color.error}); } :host(:not([aria-disabled="true"]).-touched.-invalid[checked]) .base, :host(:not([aria-disabled="true"]).-touched.-invalid[indeterminate]) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-error-hover-color, ${DesignToken$1.color.onError}); --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-error-focus-color, ${DesignToken$1.color.onError}); --m3e-ripple-color: var(--m3e-checkbox-selected-error-ripple-color, ${DesignToken$1.color.onError}); } :host(:not([aria-disabled="true"]).-touched.-invalid:not([checked]):not([indeterminate])) .wrapper { border-color: var(--m3e-checkbox-unselected-error-outline-color, ${DesignToken$1.color.error}); } @media (forced-colors: active) { :host(:not(.-touched.-invalid):not([indeterminate]):not([checked])) .base, :host(:not(.-touched.-invalid)[checked]) .base, :host(:not(.-touched.-invalid)[indeterminate]) .base { --m3e-state-layer-hover-color: CanvasText; --m3e-state-layer-focus-color: CanvasText; --m3e-ripple-color: CanvasText; } :host(:not([aria-disabled="true"]):not(.-touched.-invalid):not([checked]):not([indeterminate]):not(:hover)) .wrapper, :host(:not([aria-disabled="true"]):not(.-touched.-invalid):not([checked]):not([indeterminate]):hover) .wrapper { border-color: CanvasText; } :host(:not([aria-disabled="true"]):not(.-touched.-invalid)[checked]) .wrapper, :host(:not([aria-disabled="true"]):not(.-touched.-invalid)[indeterminate]) .wrapper { background-color: CanvasText; color: Canvas; } :host([aria-disabled="true"]:not([checked]):not([indeterminate])) .wrapper { border-color: GrayText; } :host([aria-disabled="true"][checked]) .wrapper, :host([aria-disabled="true"][indeterminate]) .wrapper { background-color: GrayText; color: Canvas; } :host(:not([aria-disabled="true"]).-touched.-invalid:not([checked]):not([indeterminate])) .wrapper { border-color: Highlight; } :host(:not([aria-disabled="true"]).-touched.-invalid:not([checked]):not([indeterminate])) .base, :host(:not([aria-disabled="true"]).-touched.-invalid[checked]) .base, :host(:not([aria-disabled="true"]).-touched.-invalid[indeterminate]) .base { --m3e-state-layer-hover-color: Highlight; --m3e-state-layer-focus-color: Highlight; --m3e-ripple-color: Highlight; } }`;
4241
4315
  __decorate([e$4(".focus-ring")], M3eCheckboxElement.prototype, "_focusRing", void 0);
4242
4316
  __decorate([e$4(".state-layer")], M3eCheckboxElement.prototype, "_stateLayer", void 0);
4243
4317
  __decorate([e$4(".ripple")], M3eCheckboxElement.prototype, "_ripple", void 0);
@@ -6673,10 +6747,10 @@ class PressedController extends MonitorControllerBase {
6673
6747
  document.removeEventListener("pointerup", __classPrivateFieldGet(this, _PressedController_pointerUpHandler, "f"), {
6674
6748
  capture: __classPrivateFieldGet(this, _PressedController_capture, "f")
6675
6749
  });
6676
- document.addEventListener("touchend", __classPrivateFieldGet(this, _PressedController_touchEndHandler, "f"), {
6750
+ document.removeEventListener("touchend", __classPrivateFieldGet(this, _PressedController_touchEndHandler, "f"), {
6677
6751
  capture: __classPrivateFieldGet(this, _PressedController_capture, "f")
6678
6752
  });
6679
- document.addEventListener("touchcancel", __classPrivateFieldGet(this, _PressedController_touchEndHandler, "f"), {
6753
+ document.removeEventListener("touchcancel", __classPrivateFieldGet(this, _PressedController_touchEndHandler, "f"), {
6680
6754
  capture: __classPrivateFieldGet(this, _PressedController_capture, "f")
6681
6755
  });
6682
6756
  super.hostDisconnected();
@@ -6735,43 +6809,47 @@ _PressedController_capture = new WeakMap(), _PressedController_callback = new We
6735
6809
  if (e.pointerType === "mouse" && e.button > 1) return;
6736
6810
  const x = e.x;
6737
6811
  const y = e.y;
6738
- for (const target of __classPrivateFieldGet(this, _PressedController_pressedTargets, "f").keys()) {
6739
- const remainingTime = __classPrivateFieldGet(this, _PressedController_minPressedDuration, "f") - (performance.now() - __classPrivateFieldGet(this, _PressedController_pressedTargets, "f").get(target));
6740
- if (remainingTime > 0) {
6741
- setTimeout(() => {
6812
+ for (const target of e.composedPath()) {
6813
+ if (target instanceof HTMLElement && __classPrivateFieldGet(this, _PressedController_pressedTargets, "f").has(target)) {
6814
+ const remainingTime = __classPrivateFieldGet(this, _PressedController_minPressedDuration, "f") - (performance.now() - __classPrivateFieldGet(this, _PressedController_pressedTargets, "f").get(target));
6815
+ if (remainingTime > 0) {
6816
+ setTimeout(() => {
6817
+ __classPrivateFieldGet(this, _PressedController_pressedTargets, "f").delete(target);
6818
+ __classPrivateFieldGet(this, _PressedController_callback, "f").call(this, false, {
6819
+ x,
6820
+ y
6821
+ }, target);
6822
+ }, remainingTime);
6823
+ } else {
6742
6824
  __classPrivateFieldGet(this, _PressedController_pressedTargets, "f").delete(target);
6743
6825
  __classPrivateFieldGet(this, _PressedController_callback, "f").call(this, false, {
6744
6826
  x,
6745
6827
  y
6746
6828
  }, target);
6747
- }, remainingTime);
6748
- } else {
6749
- __classPrivateFieldGet(this, _PressedController_pressedTargets, "f").delete(target);
6750
- __classPrivateFieldGet(this, _PressedController_callback, "f").call(this, false, {
6751
- x,
6752
- y
6753
- }, target);
6829
+ }
6754
6830
  }
6755
6831
  }
6756
6832
  }, _PressedController_handleTouchEnd = function _PressedController_handleTouchEnd(e) {
6757
- const x = e.touches[0]?.clientX ?? 0;
6758
- const y = e.touches[0]?.clientY ?? 0;
6759
- for (const target of __classPrivateFieldGet(this, _PressedController_pressedTargets, "f").keys()) {
6760
- const remainingTime = __classPrivateFieldGet(this, _PressedController_minPressedDuration, "f") - (performance.now() - __classPrivateFieldGet(this, _PressedController_pressedTargets, "f").get(target));
6761
- if (remainingTime > 0) {
6762
- setTimeout(() => {
6833
+ const x = e.changedTouches[0]?.clientX ?? 0;
6834
+ const y = e.changedTouches[0]?.clientY ?? 0;
6835
+ for (const target of e.composedPath()) {
6836
+ if (target instanceof HTMLElement && __classPrivateFieldGet(this, _PressedController_pressedTargets, "f").has(target)) {
6837
+ const remainingTime = __classPrivateFieldGet(this, _PressedController_minPressedDuration, "f") - (performance.now() - __classPrivateFieldGet(this, _PressedController_pressedTargets, "f").get(target));
6838
+ if (remainingTime > 0) {
6839
+ setTimeout(() => {
6840
+ __classPrivateFieldGet(this, _PressedController_pressedTargets, "f").delete(target);
6841
+ __classPrivateFieldGet(this, _PressedController_callback, "f").call(this, false, {
6842
+ x,
6843
+ y
6844
+ }, target);
6845
+ }, remainingTime);
6846
+ } else {
6763
6847
  __classPrivateFieldGet(this, _PressedController_pressedTargets, "f").delete(target);
6764
6848
  __classPrivateFieldGet(this, _PressedController_callback, "f").call(this, false, {
6765
6849
  x,
6766
6850
  y
6767
6851
  }, target);
6768
- }, remainingTime);
6769
- } else {
6770
- __classPrivateFieldGet(this, _PressedController_pressedTargets, "f").delete(target);
6771
- __classPrivateFieldGet(this, _PressedController_callback, "f").call(this, false, {
6772
- x,
6773
- y
6774
- }, target);
6852
+ }
6775
6853
  }
6776
6854
  }
6777
6855
  }, _PressedController_handleKeyDown = function _PressedController_handleKeyDown(e) {
@@ -9453,11 +9531,15 @@ const FocusRingToken = {
9453
9531
  /** The duration of the focus ring animation. */
9454
9532
  duration: unsafeCSS(`var(--m3e-focus-ring-duration, ${DesignToken.motion.duration.long2})`),
9455
9533
  /** The thickness of the focus ring. */
9456
- thickness: unsafeCSS(`var(--m3e-focus-ring-thickness, 0.1875rem)`),
9534
+ thickness: unsafeCSS("var(--m3e-focus-ring-thickness, 3px)"),
9535
+ /** Offset of an outward focus ring. */
9536
+ outwardOffset: unsafeCSS("var(--m3e-focus-ring-outward-offset, 2px)"),
9537
+ /** Offset of an inward focus ring. */
9538
+ inwardOffset: unsafeCSS("var(--m3e-focus-ring-inward-offset, 0px)"),
9457
9539
  /** The visibility of the focus ring. */
9458
- visibility: unsafeCSS(`var(--m3e-focus-ring-visibility, visible)`),
9540
+ visibility: unsafeCSS("var(--m3e-focus-ring-visibility, visible)"),
9459
9541
  /** The factor by which the focus ring grows. */
9460
- growthFactor: unsafeCSS(`var(--m3e-focus-ring-growth-factor, 2)`)
9542
+ growthFactor: unsafeCSS("var(--m3e-focus-ring-growth-factor, 2)")
9461
9543
  };
9462
9544
 
9463
9545
  var _M3eFocusRingElement_instances, _M3eFocusRingElement_focusController, _M3eFocusRingElement_handleFocusChange;
@@ -9495,6 +9577,8 @@ var _M3eFocusRingElement_instances, _M3eFocusRingElement_focusController, _M3eFo
9495
9577
  * @cssprop --m3e-focus-ring-growth-factor - The factor by which the focus ring grows.
9496
9578
  * @cssprop --m3e-focus-ring-thickness - The thickness of the focus ring.
9497
9579
  * @cssprop --m3e-focus-ring-visibility - The visibility of the focus ring.
9580
+ * @cssprop --m3e-focus-ring-outward-offset - Offset of an outward focus ring.
9581
+ * @cssprop --m3e-focus-ring-inward-offset - Offset of an inward focus ring.
9498
9582
  */
9499
9583
  let M3eFocusRingElement = class M3eFocusRingElement extends HtmlFor(Role(LitElement, "none")) {
9500
9584
  constructor() {
@@ -9571,7 +9655,7 @@ _M3eFocusRingElement_handleFocusChange = function _M3eFocusRingElement_handleFoc
9571
9655
  }
9572
9656
  };
9573
9657
  /** The styles of the element. */
9574
- M3eFocusRingElement.styles = css`:host { display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; border-radius: inherit; outline: none; } .outline { position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; border-radius: inherit; z-index: 1; outline-color: ${FocusRingToken.color}; outline-width: ${FocusRingToken.thickness}; visibility: ${FocusRingToken.visibility}; } .outline.visible { outline-style: solid; } :host(:not([inward])) .outline { outline-offset: calc(${FocusRingToken.thickness} / ${FocusRingToken.growthFactor}); } :host([inward]) .outline { outline-offset: calc(0px - ${FocusRingToken.thickness}); } :host(:not([inward])) .outline.visible { animation: grow-shrink ${FocusRingToken.duration}; } :host([inward]) .outline.visible { animation: shrink-grow ${FocusRingToken.duration}; } @keyframes grow-shrink { 50% { outline-width: calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor}); } } @keyframes shrink-grow { 50% { outline-offset: calc(0px - calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor})); outline-width: calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor}); } } @media (prefers-reduced-motion) { :host(:not([inward])) .outline.visible, :host([inward]) .outline.visible { animation: none; } } @media (forced-colors: active) { .outline { outline-color: Highlight; } }`;
9658
+ M3eFocusRingElement.styles = css`:host { display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; border-radius: inherit; outline: none; } .outline { position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; border-radius: inherit; z-index: 1; outline-color: ${FocusRingToken.color}; outline-width: ${FocusRingToken.thickness}; visibility: ${FocusRingToken.visibility}; } .outline.visible { outline-style: solid; } :host(:not([inward])) .outline { outline-offset: ${FocusRingToken.outwardOffset}; } :host([inward]) .outline { outline-offset: calc(${FocusRingToken.inwardOffset} - ${FocusRingToken.thickness}); } :host(:not([inward])) .outline.visible { animation: grow-shrink ${FocusRingToken.duration}; } :host([inward]) .outline.visible { animation: shrink-grow ${FocusRingToken.duration}; } @keyframes grow-shrink { 50% { outline-width: calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor}); } } @keyframes shrink-grow { 50% { outline-offset: calc( ${FocusRingToken.inwardOffset} - calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor}) ); outline-width: calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor}); } } @media (prefers-reduced-motion) { :host(:not([inward])) .outline.visible, :host([inward]) .outline.visible { animation: none; } } @media (forced-colors: active) { .outline { outline-color: Highlight; } }`;
9575
9659
  __decorate([e$4(".outline")], M3eFocusRingElement.prototype, "_outline", void 0);
9576
9660
  __decorate([n$1({
9577
9661
  type: Boolean,
@@ -9633,7 +9717,7 @@ let M3ePseudoCheckboxElement = class M3ePseudoCheckboxElement extends CheckedInd
9633
9717
  }
9634
9718
  };
9635
9719
  /** The styles of the element. */
9636
- M3ePseudoCheckboxElement.styles = css`:host { display: inline-block; vertical-align: middle; width: var(--m3e-checkbox-icon-size, 1.125rem); height: var(--m3e-checkbox-icon-size, 1.125rem); border-radius: var(--m3e-checkbox-container-shape, 0.125rem); box-sizing: border-box; flex: none; } :host(:not([checked]):not([indeterminate])) { border-width: var(--m3e-checkbox-unselected-outline-thickness, 0.125rem); border-style: solid; } :host(:not([disabled])[checked]), :host(:not([disabled])[indeterminate]) { background-color: var(--m3e-checkbox-selected-container-color, ${DesignToken.color.primary}); color: var(--m3e-checkbox-selected-icon-color, ${DesignToken.color.onPrimary}); } :host(:not([disabled]):not([checked]):not([indeterminate])) { border-color: var(--m3e-checkbox-unselected-outline-color, ${DesignToken.color.onSurfaceVariant}); } :host([disabled]:not([checked]):not([indeterminate])) { border-color: color-mix( in srgb, var(--m3e-checkbox-unselected-disabled-outline-color, ${DesignToken.color.onSurface}) var(--m3e-checkbox-unselected-disabled-outline-opacity, 38%), transparent ); } :host([disabled][checked]), :host([disabled][indeterminate]) { background-color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-container-color, ${DesignToken.color.onSurface}) var(--m3e-checkbox-selected-disabled-container-opacity, 38%), transparent ); color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-icon-color, ${DesignToken.color.surface}) var(--m3e-checkbox-selected-disabled-icon-opacity, 100%), transparent ); }`;
9720
+ M3ePseudoCheckboxElement.styles = css`:host { display: inline-block; vertical-align: middle; width: var(--m3e-checkbox-icon-size, 1.125rem); height: var(--m3e-checkbox-icon-size, 1.125rem); border-radius: var(--m3e-checkbox-container-shape, 2px); box-sizing: border-box; flex: none; } :host(:not([checked]):not([indeterminate])) { border-width: var(--m3e-checkbox-unselected-outline-thickness, 2px); border-style: solid; } :host(:not([disabled])[checked]), :host(:not([disabled])[indeterminate]) { background-color: var(--m3e-checkbox-selected-container-color, ${DesignToken.color.primary}); color: var(--m3e-checkbox-selected-icon-color, ${DesignToken.color.onPrimary}); } :host(:not([disabled]):not([checked]):not([indeterminate])) { border-color: var(--m3e-checkbox-unselected-outline-color, ${DesignToken.color.onSurfaceVariant}); } :host([disabled]:not([checked]):not([indeterminate])) { border-color: color-mix( in srgb, var(--m3e-checkbox-unselected-disabled-outline-color, ${DesignToken.color.onSurface}) var(--m3e-checkbox-unselected-disabled-outline-opacity, 38%), transparent ); } :host([disabled][checked]), :host([disabled][indeterminate]) { background-color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-container-color, ${DesignToken.color.onSurface}) var(--m3e-checkbox-selected-disabled-container-opacity, 38%), transparent ); color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-icon-color, ${DesignToken.color.surface}) var(--m3e-checkbox-selected-disabled-icon-opacity, 100%), transparent ); }`;
9637
9721
  M3ePseudoCheckboxElement = __decorate([t$3("m3e-pseudo-checkbox")], M3ePseudoCheckboxElement);
9638
9722
 
9639
9723
  /**
@@ -9962,7 +10046,7 @@ let M3eScrollContainerElement = class M3eScrollContainerElement extends LitEleme
9962
10046
  };
9963
10047
  _M3eScrollContainerElement_scrollHandler = new WeakMap();
9964
10048
  /** The styles of the element. */
9965
- M3eScrollContainerElement.styles = css`:host { display: block; overflow-y: auto; position: relative; box-sizing: border-box; scrollbar-color: ${DesignToken.scrollbar.color}; border-top: var(--m3e-divider-thickness, 1px) solid transparent; border-bottom: var(--m3e-divider-thickness, 1px) solid transparent; outline: var(--m3e-focus-ring-color, ${DesignToken.color.secondary}); outline-width: var(--m3e-focus-ring-thickness, 0.25rem); outline-offset: calc(var(--m3e-focus-ring-thickness, 0.25rem) / 2); } :host([thin]) { scrollbar-width: ${DesignToken.scrollbar.thinWidth}; } :host(:not([thin])) { scrollbar-width: ${DesignToken.scrollbar.width}; } :host(:not(:focus-visible).-above) { border-top-color: var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host(:not(:focus-visible).-below) { border-bottom-color: var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host(:focus-visible) { outline-style: solid; animation: grow-shrink var(--m3e-focus-ring-duration, ${DesignToken.motion.duration.long2}); } @keyframes grow-shrink { 50% { outline-width: calc(var(--m3e-focus-ring-thickness, 0.25rem) * var(--m3e-focus-ring-factor, 2)); } } @media (forced-colors: active) { :host { border-top: var(--m3e-divider-thickness, 1px) solid Canvas; border-bottom: var(--m3e-divider-thickness, 1px) solid Canvas; } :host(:not(:focus-visible).-above) { border-top-color: GrayText; } :host(:not(:focus-visible).-below) { border-bottom-color: GrayText; } } @media (prefers-reduced-motion) { :host(:focus-visible) { animation: none; } }`;
10049
+ M3eScrollContainerElement.styles = css`:host { display: block; overflow-y: auto; position: relative; box-sizing: border-box; scrollbar-color: ${DesignToken.scrollbar.color}; border-top: var(--m3e-divider-thickness, 1px) solid transparent; border-bottom: var(--m3e-divider-thickness, 1px) solid transparent; outline-color: ${FocusRingToken.color}; outline-width: ${FocusRingToken.thickness}; outline-offset: ${FocusRingToken.outwardOffset}; } :host([thin]) { scrollbar-width: ${DesignToken.scrollbar.thinWidth}; } :host(:not([thin])) { scrollbar-width: ${DesignToken.scrollbar.width}; } :host(:not(:focus-visible).-above) { border-top-color: var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host(:not(:focus-visible).-below) { border-bottom-color: var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host(:focus-visible) { outline-style: solid; animation: grow-shrink ${FocusRingToken.duration}; } @keyframes grow-shrink { 50% { outline-width: calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor}); } } @media (forced-colors: active) { :host { border-top: var(--m3e-divider-thickness, 1px) solid Canvas; border-bottom: var(--m3e-divider-thickness, 1px) solid Canvas; } :host(:not(:focus-visible).-above) { border-top-color: GrayText; } :host(:not(:focus-visible).-below) { border-bottom-color: GrayText; } } @media (prefers-reduced-motion) { :host(:focus-visible) { animation: none; } }`;
9966
10050
  __decorate([n$1()], M3eScrollContainerElement.prototype, "dividers", void 0);
9967
10051
  __decorate([n$1({
9968
10052
  type: Boolean,
@@ -11722,7 +11806,7 @@ M3eExpansionPanelElement = M3eExpansionPanelElement_1 = __decorate([t$3("m3e-exp
11722
11806
  * Baseline styles for `M3eFabElement`.
11723
11807
  * @internal
11724
11808
  */
11725
- const FabStyle = css`: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: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .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: ${unsafeCSS(`color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } .icon { transition: ${unsafeCSS(`color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } .close-icon, ::slotted(:not([slot])), ::slotted([slot="close-icon"]) { font-size: inherit !important; flex: none; } .close-icon, ::slotted(svg:not([slot])), ::slotted(svg[slot="close-icon"]) { width: 1em; height: 1em; } :host(:not([extended])) ::slotted([slot="label"]), .base.-with-menu ::slotted([slot="label"]), .base:not(.-with-menu) ::slotted([slot="close-icon"]), .base:not(.-with-menu) .close-icon, :host([aria-expanded="true"]) .base.-with-menu ::slotted(:not([slot])), :host([aria-expanded="false"]) .base.-with-menu ::slotted([slot="close-icon"]), :host([aria-expanded="false"]) .base.-with-menu .close-icon { display: none; } :host([aria-expanded="true"]) .base.-with-menu { border-radius: var(--m3e-fab-menu-close-button-container-shape, ${DesignToken$1.shape.corner.full}); height: calc(var(--m3e-fab-menu-close-button-container-height, 3.5rem) + ${DesignToken$1.density.calc(-3)}); } :host([aria-expanded="true"]) .base.-with-menu .wrapper { padding-inline-start: calc(var(--m3e-fab-menu-close-button-leading-space, 1rem) + ${DesignToken$1.density.calc(-3)}); padding-inline-end: calc(var(--m3e-fab-menu-close-button-trailing-space, 1rem) + ${DesignToken$1.density.calc(-3)}); } :host([aria-expanded="true"]) .base.-with-menu .icon { font-size: calc(var(--m3e-fab-menu-close-button-icon-size, 1.5rem) + ${DesignToken$1.density.calc(-3)}); --m3e-icon-size: calc(var(--m3e-fab-menu-close-button-icon-size, 1.5rem) + ${DesignToken$1.density.calc(-3)}); } .base.-with-menu { transition: height ${DesignToken$1.motion.spring.fastSpatial}; } .base.-with-menu .wrapper { transition: padding ${DesignToken$1.motion.spring.fastSpatial}; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { .base, .icon { transition: none; } .base { outline-style: solid; } :host([variant]:not(:disabled):not([disabled-interactive])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])) .label, :host([variant]:not(:disabled):not([disabled-interactive])) .icon { 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; } :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, 0.125rem)); outline-width: var(--m3e-button-large-outline-thickness, 0.125rem); } } @media (prefers-reduced-motion) { .base, .base.resting, .base.pressed, .label, .icon { transition: none; } }`;
11809
+ const FabStyle = css`: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: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .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: ${unsafeCSS(`color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } .icon { transition: ${unsafeCSS(`color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } .close-icon, ::slotted(:not([slot])), ::slotted([slot="close-icon"]) { font-size: inherit !important; flex: none; } .close-icon, ::slotted(svg:not([slot])), ::slotted(svg[slot="close-icon"]) { width: 1em; height: 1em; } :host(:not([extended])) ::slotted([slot="label"]), .base.-with-menu ::slotted([slot="label"]), .base:not(.-with-menu) ::slotted([slot="close-icon"]), .base:not(.-with-menu) .close-icon, :host([aria-expanded="true"]) .base.-with-menu ::slotted(:not([slot])), :host([aria-expanded="false"]) .base.-with-menu ::slotted([slot="close-icon"]), :host([aria-expanded="false"]) .base.-with-menu .close-icon { display: none; } :host([aria-expanded="true"]) .base.-with-menu { border-radius: var(--m3e-fab-menu-close-button-container-shape, ${DesignToken$1.shape.corner.full}); height: calc(var(--m3e-fab-menu-close-button-container-height, 3.5rem) + ${DesignToken$1.density.calc(-3)}); } :host([aria-expanded="true"]) .base.-with-menu .wrapper { padding-inline-start: calc(var(--m3e-fab-menu-close-button-leading-space, 1rem) + ${DesignToken$1.density.calc(-3)}); padding-inline-end: calc(var(--m3e-fab-menu-close-button-trailing-space, 1rem) + ${DesignToken$1.density.calc(-3)}); } :host([aria-expanded="true"]) .base.-with-menu .icon { font-size: calc(var(--m3e-fab-menu-close-button-icon-size, 1.5rem) + ${DesignToken$1.density.calc(-3)}); --m3e-icon-size: calc(var(--m3e-fab-menu-close-button-icon-size, 1.5rem) + ${DesignToken$1.density.calc(-3)}); } .base.-with-menu { transition: height ${DesignToken$1.motion.spring.fastSpatial}; } .base.-with-menu .wrapper { transition: padding ${DesignToken$1.motion.spring.fastSpatial}; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { .base, .icon { transition: none; } .base { outline-style: solid; } :host([variant]:not(:disabled):not([disabled-interactive])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])) .label, :host([variant]:not(:disabled):not([disabled-interactive])) .icon { 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; } :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); } } @media (prefers-reduced-motion) { .base, .base.resting, .base.pressed, .label, .icon { transition: none; } }`;
11726
11810
 
11727
11811
  /**
11728
11812
  * Component design tokens that control the `M3eFabElement` for all size variants.
@@ -11731,51 +11815,51 @@ const FabStyle = css`:host { display: inline-block; outline: none; user-select:
11731
11815
  const FabSizeToken = {
11732
11816
  /** Design tokens that control the `small` `size` variant. */
11733
11817
  small: {
11734
- containerHeight: unsafeCSS(`calc(var(--m3e-fab-small-container-height, 3.5rem) + ${DesignToken$1.density.calc(-3)})`),
11735
- labelTextFontSize: unsafeCSS(`var(--m3e-fab-small-label-text-font-size, ${DesignToken$1.typescale.standard.title.medium.fontSize})`),
11736
- labelTextFontWeight: unsafeCSS(`var(--m3e-fab-small-label-text-font-weight, ${DesignToken$1.typescale.standard.title.medium.fontWeight})`),
11737
- labelTextLineHeight: unsafeCSS(`var(--m3e-fab-small-label-text-line-height, ${DesignToken$1.typescale.standard.title.medium.lineHeight})`),
11738
- labelTextTracking: unsafeCSS(`var(--m3e-fab-small-label-text-tracking, ${DesignToken$1.typescale.standard.title.medium.tracking})`),
11739
- iconSize: unsafeCSS(`calc(var(--m3e-fab-small-icon-size, 1.5rem) + ${DesignToken$1.density.calc(-3)})`),
11740
- extendedIconSize: unsafeCSS("var(--m3e-fab-small-icon-size, 1.5rem)"),
11741
- shape: unsafeCSS(`var(--m3e-fab-small-shape, ${DesignToken$1.shape.corner.large})`),
11742
- leadingSpace: unsafeCSS(`calc(var(--m3e-fab-small-leading-space, 1rem) + ${DesignToken$1.density.calc(-3)})`),
11743
- trailingSpace: unsafeCSS(`calc(var(--m3e-fab-small-trailing-space, 1rem) + ${DesignToken$1.density.calc(-3)})`),
11744
- iconLabelSpace: unsafeCSS("var(--m3e-fab-small-icon-label-space, 0.5rem)"),
11745
- extendedLeadingSpace: unsafeCSS("var(--m3e-fab-small-leading-space, 1rem)"),
11746
- extendedTrailingSpace: unsafeCSS("var(--m3e-fab-small-trailing-space, 1rem)")
11818
+ containerHeight: unsafeCSS(`calc(var(--m3e-fab-small-container-height, var(--m3e-fab-container-height, 3.5rem)) + ${DesignToken$1.density.calc(-3)})`),
11819
+ labelTextFontSize: unsafeCSS(`var(--m3e-fab-small-label-text-font-size, var(--m3e-fab-label-text-font-size, ${DesignToken$1.typescale.standard.title.medium.fontSize}))`),
11820
+ labelTextFontWeight: unsafeCSS(`var(--m3e-fab-small-label-text-font-weight, var(--m3e-fab-label-text-font-weight, ${DesignToken$1.typescale.standard.title.medium.fontWeight}))`),
11821
+ labelTextLineHeight: unsafeCSS(`var(--m3e-fab-small-label-text-line-height, var(--m3e-fab-label-text-line-height, ${DesignToken$1.typescale.standard.title.medium.lineHeight}))`),
11822
+ labelTextTracking: unsafeCSS(`var(--m3e-fab-small-label-text-tracking, var(--m3e-fab-label-text-tracking, ${DesignToken$1.typescale.standard.title.medium.tracking}))`),
11823
+ iconSize: unsafeCSS(`calc(var(--m3e-fab-small-icon-size, var(--m3e-fab-icon-size, 1.5rem)) + ${DesignToken$1.density.calc(-3)})`),
11824
+ extendedIconSize: unsafeCSS("var(--m3e-fab-small-icon-size, var(--m3e-fab-icon-size, 1.5rem))"),
11825
+ shape: unsafeCSS(`var(--m3e-fab-small-shape, var(--m3e-fab-shape, ${DesignToken$1.shape.corner.large}))`),
11826
+ leadingSpace: unsafeCSS(`calc(var(--m3e-fab-small-leading-space, var(--m3e-fab-leading-space, 1rem)) + ${DesignToken$1.density.calc(-3)})`),
11827
+ trailingSpace: unsafeCSS(`calc(var(--m3e-fab-small-trailing-space, var(--m3e-fab-trailing-space, 1rem)) + ${DesignToken$1.density.calc(-3)})`),
11828
+ iconLabelSpace: unsafeCSS("var(--m3e-fab-small-icon-label-space, var(--m3e-fab-icon-label-space, 0.5rem))"),
11829
+ extendedLeadingSpace: unsafeCSS("var(--m3e-fab-small-leading-space, var(--m3e-fab-leading-space, 1rem))"),
11830
+ extendedTrailingSpace: unsafeCSS("var(--m3e-fab-small-trailing-space, var(--m3e-fab-trailing-space, 1rem))")
11747
11831
  },
11748
11832
  /** Design tokens that control the `medium` `size` variant. */
11749
11833
  medium: {
11750
- containerHeight: unsafeCSS(`calc(var(--m3e-fab-medium-container-height, 5rem) + ${DesignToken$1.density.calc(-3)})`),
11751
- labelTextFontSize: unsafeCSS(`var(--m3e-fab-medium-label-text-font-size, ${DesignToken$1.typescale.standard.title.large.fontSize})`),
11752
- labelTextFontWeight: unsafeCSS(`var(--m3e-fab-medium-label-text-font-weight, ${DesignToken$1.typescale.standard.title.large.fontWeight})`),
11753
- labelTextLineHeight: unsafeCSS(`var(--m3e-fab-medium-label-text-line-height, ${DesignToken$1.typescale.standard.title.large.lineHeight})`),
11754
- labelTextTracking: unsafeCSS(`var(--m3e-fab-medium-label-text-tracking, ${DesignToken$1.typescale.standard.title.large.tracking})`),
11755
- iconSize: unsafeCSS(`calc(var(--m3e-fab-medium-icon-size, 1.75rem) + ${DesignToken$1.density.calc(-3)})`),
11756
- extendedIconSize: unsafeCSS("var(--m3e-fab-medium-icon-size, 1.75rem)"),
11757
- shape: unsafeCSS(`var(--m3e-fab-medium-shape, ${DesignToken$1.shape.corner.largeIncreased})`),
11758
- leadingSpace: unsafeCSS(`calc(var(--m3e-fab-medium-leading-space, 1.625rem) + ${DesignToken$1.density.calc(-3)})`),
11759
- trailingSpace: unsafeCSS(`calc(var(--m3e-fab-medium-trailing-space, 1.625rem) + ${DesignToken$1.density.calc(-3)})`),
11760
- iconLabelSpace: unsafeCSS("var(--m3e-fab-medium-icon-label-space, 0.75rem)"),
11761
- extendedLeadingSpace: unsafeCSS("var(--m3e-fab-medium-leading-space, 1.625rem)"),
11762
- extendedTrailingSpace: unsafeCSS("var(--m3e-fab-medium-trailing-space, 1.625rem)")
11834
+ containerHeight: unsafeCSS(`calc(var(--m3e-fab-medium-container-height, var(--m3e-fab-container-height, 5rem)) + ${DesignToken$1.density.calc(-3)})`),
11835
+ labelTextFontSize: unsafeCSS(`var(--m3e-fab-medium-label-text-font-size, var(--m3e-fab-label-text-font-size, ${DesignToken$1.typescale.standard.title.large.fontSize}))`),
11836
+ labelTextFontWeight: unsafeCSS(`var(--m3e-fab-medium-label-text-font-weight, var(--m3e-fab-label-text-font-weight, ${DesignToken$1.typescale.standard.title.large.fontWeight}))`),
11837
+ labelTextLineHeight: unsafeCSS(`var(--m3e-fab-medium-label-text-line-height, var(--m3e-fab-label-text-line-height, ${DesignToken$1.typescale.standard.title.large.lineHeight}))`),
11838
+ labelTextTracking: unsafeCSS(`var(--m3e-fab-medium-label-text-tracking, var(--m3e-fab-label-text-tracking, ${DesignToken$1.typescale.standard.title.large.tracking}))`),
11839
+ iconSize: unsafeCSS(`calc(var(--m3e-fab-medium-icon-size, var(--m3e-fab-icon-size, 1.75rem)) + ${DesignToken$1.density.calc(-3)})`),
11840
+ extendedIconSize: unsafeCSS("var(--m3e-fab-medium-icon-size, var(--m3e-fab-icon-size, 1.75rem))"),
11841
+ shape: unsafeCSS(`var(--m3e-fab-medium-shape, var(--m3e-fab-shape, ${DesignToken$1.shape.corner.largeIncreased}))`),
11842
+ leadingSpace: unsafeCSS(`calc(var(--m3e-fab-medium-leading-space, var(--m3e-fab-leading-space, 1.625rem)) + ${DesignToken$1.density.calc(-3)})`),
11843
+ trailingSpace: unsafeCSS(`calc(var(--m3e-fab-medium-trailing-space, var(--m3e-fab-trailing-space, 1.625rem)) + ${DesignToken$1.density.calc(-3)})`),
11844
+ iconLabelSpace: unsafeCSS("var(--m3e-fab-medium-icon-label-space, var(--m3e-fab-icon-label-space, 0.75rem))"),
11845
+ extendedLeadingSpace: unsafeCSS("var(--m3e-fab-medium-leading-space, var(--m3e-fab-leading-space, 1.625rem))"),
11846
+ extendedTrailingSpace: unsafeCSS("var(--m3e-fab-medium-trailing-space, var(--m3e-fab-trailing-space, 1.625rem))")
11763
11847
  },
11764
11848
  /** Design tokens that control the `large` `size` variant. */
11765
11849
  large: {
11766
- containerHeight: unsafeCSS(`calc(var(--m3e-fab-large-container-height, 6rem) + ${DesignToken$1.density.calc(-3)})`),
11767
- labelTextFontSize: unsafeCSS(`var(--m3e-fab-large-label-text-font-size, ${DesignToken$1.typescale.standard.headline.small.fontSize})`),
11768
- labelTextFontWeight: unsafeCSS(`var(--m3e-fab-large-label-text-font-weight, ${DesignToken$1.typescale.standard.headline.small.fontWeight})`),
11769
- labelTextLineHeight: unsafeCSS(`var(--m3e-fab-large-label-text-line-height, ${DesignToken$1.typescale.standard.headline.small.lineHeight})`),
11770
- labelTextTracking: unsafeCSS(`var(--m3e-fab-large-label-text-tracking, ${DesignToken$1.typescale.standard.headline.small.tracking})`),
11771
- iconSize: unsafeCSS(`calc(var(--m3e-fab-large-icon-size, 2.25rem) + ${DesignToken$1.density.calc(-3)})`),
11772
- extendedIconSize: unsafeCSS("var(--m3e-fab-large-icon-size, 2.25rem)"),
11773
- shape: unsafeCSS(`var(--m3e-fab-large-shape, ${DesignToken$1.shape.corner.extraLarge})`),
11774
- leadingSpace: unsafeCSS(`calc(var(--m3e-fab-large-leading-space, 1.75rem) + ${DesignToken$1.density.calc(-3)})`),
11775
- trailingSpace: unsafeCSS(`calc(var(--m3e-fab-large-trailing-space, 1.75rem) + ${DesignToken$1.density.calc(-3)})`),
11776
- iconLabelSpace: unsafeCSS("var(--m3e-fab-large-icon-label-space, 1rem)"),
11777
- extendedLeadingSpace: unsafeCSS("var(--m3e-fab-large-leading-space, 1.75rem)"),
11778
- extendedTrailingSpace: unsafeCSS("var(--m3e-fab-large-trailing-space, 1.75rem)")
11850
+ containerHeight: unsafeCSS(`calc(var(--m3e-fab-large-container-height, var(--m3e-fab-container-height, 6rem)) + ${DesignToken$1.density.calc(-3)})`),
11851
+ labelTextFontSize: unsafeCSS(`var(--m3e-fab-large-label-text-font-size, var(--m3e-fab-label-text-font-size, ${DesignToken$1.typescale.standard.headline.small.fontSize}))`),
11852
+ labelTextFontWeight: unsafeCSS(`var(--m3e-fab-large-label-text-font-weight, var(--m3e-fab-label-text-font-weight, ${DesignToken$1.typescale.standard.headline.small.fontWeight}))`),
11853
+ labelTextLineHeight: unsafeCSS(`var(--m3e-fab-large-label-text-line-height, var(--m3e-fab-label-text-line-height, ${DesignToken$1.typescale.standard.headline.small.lineHeight}))`),
11854
+ labelTextTracking: unsafeCSS(`var(--m3e-fab-large-label-text-tracking, var(--m3e-fab-label-text-tracking, ${DesignToken$1.typescale.standard.headline.small.tracking}))`),
11855
+ iconSize: unsafeCSS(`calc(var(--m3e-fab-large-icon-size, var(--m3e-fab-icon-size, 2.25rem)) + ${DesignToken$1.density.calc(-3)})`),
11856
+ extendedIconSize: unsafeCSS("var(--m3e-fab-large-icon-size, var(--m3e-fab-icon-size, 2.25rem))"),
11857
+ shape: unsafeCSS(`var(--m3e-fab-large-shape, var(--m3e-fab-shape, ${DesignToken$1.shape.corner.extraLarge}))`),
11858
+ leadingSpace: unsafeCSS(`calc(var(--m3e-fab-large-leading-space, var(--m3e-fab-leading-space, 1.75rem)) + ${DesignToken$1.density.calc(-3)})`),
11859
+ trailingSpace: unsafeCSS(`calc(var(--m3e-fab-large-trailing-space, var(--m3e-fab-trailing-space, 1.75rem)) + ${DesignToken$1.density.calc(-3)})`),
11860
+ iconLabelSpace: unsafeCSS("var(--m3e-fab-large-icon-label-space, var(--m3e-fab-icon-label-space, 1rem))"),
11861
+ extendedLeadingSpace: unsafeCSS("var(--m3e-fab-large-leading-space, var(--m3e-fab-leading-space, 1.75rem))"),
11862
+ extendedTrailingSpace: unsafeCSS("var(--m3e-fab-large-trailing-space, var(--m3e-fab-trailing-space, 1.75rem))")
11779
11863
  }
11780
11864
  };
11781
11865
 
@@ -11797,542 +11881,542 @@ const FabVariantToken = {
11797
11881
  /** Design tokens that control the `primary` variant. */
11798
11882
  primary: {
11799
11883
  /** Default label color. */
11800
- labelTextColor: unsafeCSS(`var(--m3e-primary-fab-label-text-color, ${DesignToken$1.color.onPrimary})`),
11884
+ labelTextColor: unsafeCSS(`var(--m3e-primary-fab-label-text-color, var(--m3e-fab-label-text-color, ${DesignToken$1.color.onPrimary}))`),
11801
11885
  /** Default icon color. */
11802
- iconColor: unsafeCSS(`var(--m3e-primary-fab-icon-color, ${DesignToken$1.color.onPrimary})`),
11886
+ iconColor: unsafeCSS(`var(--m3e-primary-fab-icon-color, var(--m3e-fab-icon-color, ${DesignToken$1.color.onPrimary}))`),
11803
11887
  /** Default container background color. */
11804
- containerColor: unsafeCSS(`var(--m3e-primary-fab-container-color, ${DesignToken$1.color.primary})`),
11888
+ containerColor: unsafeCSS(`var(--m3e-primary-fab-container-color, var(--m3e-fab-container-color, ${DesignToken$1.color.primary}))`),
11805
11889
  /** Resting elevation. */
11806
- containerElevation: unsafeCSS(`var(--m3e-primary-fab-container-elevation, ${DesignToken$1.elevation.level3})`),
11890
+ containerElevation: unsafeCSS(`var(--m3e-primary-fab-container-elevation, var(--m3e-fab-container-elevation, ${DesignToken$1.elevation.level3}))`),
11807
11891
  /** Lowered resting elevation. */
11808
- loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-container-elevation, ${DesignToken$1.elevation.level2})`),
11892
+ loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-container-elevation, var(--m3e-fab-lowered-container-elevation, ${DesignToken$1.elevation.level2}))`),
11809
11893
  /** Design tokens that control disabled state. */
11810
11894
  disabled: {
11811
11895
  /** Container background color when disabled. */
11812
- containerColor: unsafeCSS(`var(--m3e-primary-fab-disabled-container-color, ${DesignToken$1.color.onSurface})`),
11896
+ containerColor: unsafeCSS(`var(--m3e-primary-fab-disabled-container-color, var(--m3e-fab-disabled-container-color, ${DesignToken$1.color.onSurface}))`),
11813
11897
  /** Opacity of container when disabled. */
11814
- containerOpacity: unsafeCSS(`var(--m3e-primary-fab-disabled-container-opacity, 10%)`),
11898
+ containerOpacity: unsafeCSS(`var(--m3e-primary-fab-disabled-container-opacity, var(--m3e-fab-disabled-container-opacity, 10%))`),
11815
11899
  /** Icon color when disabled. */
11816
- iconColor: unsafeCSS(`var(--m3e-primary-fab-disabled-icon-color, ${DesignToken$1.color.onSurface})`),
11900
+ iconColor: unsafeCSS(`var(--m3e-primary-fab-disabled-icon-color, var(--m3e-fab-disabled-icon-color, ${DesignToken$1.color.onSurface}))`),
11817
11901
  /** Icon opacity when disabled. */
11818
- iconOpacity: unsafeCSS(`var(--m3e-primary-fab-disabled-icon-opacity, 38%)`),
11902
+ iconOpacity: unsafeCSS(`var(--m3e-primary-fab-disabled-icon-opacity, var(--m3e-fab-disabled-icon-opacity, 38%))`),
11819
11903
  /** Label color when disabled. */
11820
- labelTextColor: unsafeCSS(`var(--m3e-primary-fab-disabled-label-text-color, ${DesignToken$1.color.onSurface})`),
11904
+ labelTextColor: unsafeCSS(`var(--m3e-primary-fab-disabled-label-text-color, var(--m3e-fab-disabled-label-text-color, ${DesignToken$1.color.onSurface}))`),
11821
11905
  /** Label opacity when disabled. */
11822
- labelTextOpacity: unsafeCSS(`var(--m3e-primary-fab-disabled-label-text-opacity, 38%)`),
11906
+ labelTextOpacity: unsafeCSS(`var(--m3e-primary-fab-disabled-label-text-opacity, var(--m3e-fab-disabled-label-text-opacity, 38%))`),
11823
11907
  /** Elevation when disabled. */
11824
- containerElevation: unsafeCSS(`var(--m3e-primary-fab-disabled-container-elevation, ${DesignToken$1.elevation.level0})`),
11908
+ containerElevation: unsafeCSS(`var(--m3e-primary-fab-disabled-container-elevation, var(--m3e-fab-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`),
11825
11909
  /** Lowered elevation when disabled. */
11826
- loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-disabled-container-elevation, ${DesignToken$1.elevation.level0})`)
11910
+ loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-disabled-container-elevation, var(--m3e-fab-lowered-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`)
11827
11911
  },
11828
11912
  /** Design tokens that control hover state. */
11829
11913
  hover: {
11830
11914
  /** Icon color on hover. */
11831
- iconColor: unsafeCSS(`var(--m3e-primary-fab-hover-icon-color, ${DesignToken$1.color.onPrimary})`),
11915
+ iconColor: unsafeCSS(`var(--m3e-primary-fab-hover-icon-color, var(--m3e-fab-hover-icon-color, ${DesignToken$1.color.onPrimary}))`),
11832
11916
  /** Label color on hover. */
11833
- labelTextColor: unsafeCSS(`var(--m3e-primary-fab-hover-label-text-color, ${DesignToken$1.color.onPrimary})`),
11917
+ labelTextColor: unsafeCSS(`var(--m3e-primary-fab-hover-label-text-color, var(--m3e-fab-hover-label-text-color, ${DesignToken$1.color.onPrimary}))`),
11834
11918
  /** State layer color on hover. */
11835
- stateLayerColor: unsafeCSS(`var(--m3e-primary-fab-hover-state-layer-color, ${DesignToken$1.color.onPrimary})`),
11919
+ stateLayerColor: unsafeCSS(`var(--m3e-primary-fab-hover-state-layer-color, var(--m3e-fab-hover-state-layer-color, ${DesignToken$1.color.onPrimary}))`),
11836
11920
  /** State layer opacity on hover. */
11837
- stateLayerOpacity: unsafeCSS(`var(--m3e-primary-fab-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
11921
+ stateLayerOpacity: unsafeCSS(`var(--m3e-primary-fab-hover-state-layer-opacity, var(--m3e-fab-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
11838
11922
  /** Elevation on hover. */
11839
- containerElevation: unsafeCSS(`var(--m3e-primary-fab-hover-container-elevation, ${DesignToken$1.elevation.level4})`),
11923
+ containerElevation: unsafeCSS(`var(--m3e-primary-fab-hover-container-elevation, var(--m3e-fab-hover-container-elevation, ${DesignToken$1.elevation.level4}))`),
11840
11924
  /** Lowered elevation on hover. */
11841
- loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-hover-container-elevation, ${DesignToken$1.elevation.level3})`)
11925
+ loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-hover-container-elevation, var(--m3e-fab-lowered-hover-container-elevation, ${DesignToken$1.elevation.level3}))`)
11842
11926
  },
11843
11927
  /** Design tokens that control focus state. */
11844
11928
  focus: {
11845
11929
  /** Icon color on focus. */
11846
- iconColor: unsafeCSS(`var(--m3e-primary-fab-focus-icon-color, ${DesignToken$1.color.onPrimary})`),
11930
+ iconColor: unsafeCSS(`var(--m3e-primary-fab-focus-icon-color, var(--m3e-fab-focus-icon-color, ${DesignToken$1.color.onPrimary}))`),
11847
11931
  /** Label color on focus. */
11848
- labelTextColor: unsafeCSS(`var(--m3e-primary-fab-focus-label-text-color, ${DesignToken$1.color.onPrimary})`),
11932
+ labelTextColor: unsafeCSS(`var(--m3e-primary-fab-focus-label-text-color, var(--m3e-fab-focus-label-text-color, ${DesignToken$1.color.onPrimary}))`),
11849
11933
  /** State layer color on focus. */
11850
- stateLayerColor: unsafeCSS(`var(--m3e-primary-fab-focus-state-layer-color, ${DesignToken$1.color.onPrimary})`),
11934
+ stateLayerColor: unsafeCSS(`var(--m3e-primary-fab-focus-state-layer-color, var(--m3e-fab-focus-state-layer-color, ${DesignToken$1.color.onPrimary}))`),
11851
11935
  /**State layer opacity on focus. */
11852
- stateLayerOpacity: unsafeCSS(`var(--m3e-primary-fab-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
11936
+ stateLayerOpacity: unsafeCSS(`var(--m3e-primary-fab-focus-state-layer-opacity, var(--m3e-fab-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
11853
11937
  /** Elevation on focus. */
11854
- containerElevation: unsafeCSS(`var(--m3e-primary-fab-focus-container-elevation, ${DesignToken$1.elevation.level3})`),
11938
+ containerElevation: unsafeCSS(`var(--m3e-primary-fab-focus-container-elevation, var(--m3e-fab-focus-container-elevation, ${DesignToken$1.elevation.level3}))`),
11855
11939
  /** Lowered elevation on focus. */
11856
- loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-focus-container-elevation, ${DesignToken$1.elevation.level2})`)
11940
+ loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-focus-container-elevation, var(--m3e-fab-lowered-focus-container-elevation, ${DesignToken$1.elevation.level2}))`)
11857
11941
  },
11858
11942
  /** Design tokens that control pressed state. */
11859
11943
  pressed: {
11860
11944
  /** Icon color on pressed. */
11861
- iconColor: unsafeCSS(`var(--m3e-primary-fab-pressed-icon-color, ${DesignToken$1.color.onPrimary})`),
11945
+ iconColor: unsafeCSS(`var(--m3e-primary-fab-pressed-icon-color, var(--m3e-fab-pressed-icon-color, ${DesignToken$1.color.onPrimary}))`),
11862
11946
  /** Label color on pressed. */
11863
- labelTextColor: unsafeCSS(`var(--m3e-primary-fab-pressed-label-text-color, ${DesignToken$1.color.onPrimary})`),
11947
+ labelTextColor: unsafeCSS(`var(--m3e-primary-fab-pressed-label-text-color, var(--m3e-fab-pressed-label-text-color, ${DesignToken$1.color.onPrimary}))`),
11864
11948
  /** State layer color on pressed. */
11865
- stateLayerColor: unsafeCSS(`var(--m3e-primary-fab-pressed-state-layer-color, ${DesignToken$1.color.onPrimary})`),
11949
+ stateLayerColor: unsafeCSS(`var(--m3e-primary-fab-pressed-state-layer-color, var(--m3e-fab-pressed-state-layer-color, ${DesignToken$1.color.onPrimary}))`),
11866
11950
  /** State layer opacity on pressed. */
11867
- stateLayerOpacity: unsafeCSS(`var(--m3e-primary-fab-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
11951
+ stateLayerOpacity: unsafeCSS(`var(--m3e-primary-fab-pressed-state-layer-opacity, var(--m3e-fab-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
11868
11952
  /** Elevation on pressed. */
11869
- containerElevation: unsafeCSS(`var(--m3e-primary-fab-pressed-container-elevation, ${DesignToken$1.elevation.level3})`),
11953
+ containerElevation: unsafeCSS(`var(--m3e-primary-fab-pressed-container-elevation, var(--m3e-fab-pressed-container-elevation, ${DesignToken$1.elevation.level3}))`),
11870
11954
  /** Lowered elevation on pressed. */
11871
- loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-pressed-container-elevation, ${DesignToken$1.elevation.level2})`)
11955
+ loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-pressed-container-elevation, var(--m3e-fab-lowered-pressed-container-elevation, ${DesignToken$1.elevation.level2}))`)
11872
11956
  }
11873
11957
  },
11874
11958
  /** Design tokens that control the `secondary` variant. */
11875
11959
  secondary: {
11876
11960
  /** Default label color. */
11877
- labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-label-text-color, ${DesignToken$1.color.onSecondary})`),
11961
+ labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-label-text-color, var(--m3e-fab-label-text-color, ${DesignToken$1.color.onSecondary}))`),
11878
11962
  /** Default icon color. */
11879
- iconColor: unsafeCSS(`var(--m3e-secondary-fab-icon-color, ${DesignToken$1.color.onSecondary})`),
11963
+ iconColor: unsafeCSS(`var(--m3e-secondary-fab-icon-color, var(--m3e-fab-icon-color, ${DesignToken$1.color.onSecondary}))`),
11880
11964
  /** Default container background color. */
11881
- containerColor: unsafeCSS(`var(--m3e-secondary-fab-container-color, ${DesignToken$1.color.secondary})`),
11965
+ containerColor: unsafeCSS(`var(--m3e-secondary-fab-container-color, var(--m3e-fab-container-color, ${DesignToken$1.color.secondary}))`),
11882
11966
  /** Resting elevation. */
11883
- containerElevation: unsafeCSS(`var(--m3e-secondary-fab-container-elevation, ${DesignToken$1.elevation.level3})`),
11967
+ containerElevation: unsafeCSS(`var(--m3e-secondary-fab-container-elevation, var(--m3e-fab-container-elevation, ${DesignToken$1.elevation.level3}))`),
11884
11968
  /** Lowered resting elevation. */
11885
- loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-container-elevation, ${DesignToken$1.elevation.level2})`),
11969
+ loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-container-elevation, var(--m3e-fab-lowered-container-elevation, ${DesignToken$1.elevation.level2}))`),
11886
11970
  /** Design tokens that control disabled state. */
11887
11971
  disabled: {
11888
11972
  /** Container background color when disabled. */
11889
- containerColor: unsafeCSS(`var(--m3e-secondary-fab-disabled-container-color, ${DesignToken$1.color.onSurface})`),
11973
+ containerColor: unsafeCSS(`var(--m3e-secondary-fab-disabled-container-color, var(--m3e-fab-disabled-container-color, ${DesignToken$1.color.onSurface}))`),
11890
11974
  /** Opacity of container when disabled. */
11891
- containerOpacity: unsafeCSS(`var(--m3e-secondary-fab-disabled-container-opacity, 10%)`),
11975
+ containerOpacity: unsafeCSS(`var(--m3e-secondary-fab-disabled-container-opacity, var(--m3e-fab-disabled-container-opacity, 10%))`),
11892
11976
  /** Icon color when disabled. */
11893
- iconColor: unsafeCSS(`var(--m3e-secondary-fab-disabled-icon-color, ${DesignToken$1.color.onSurface})`),
11977
+ iconColor: unsafeCSS(`var(--m3e-secondary-fab-disabled-icon-color, var(--m3e-fab-disabled-icon-color, ${DesignToken$1.color.onSurface}))`),
11894
11978
  /** Icon opacity when disabled. */
11895
- iconOpacity: unsafeCSS(`var(--m3e-secondary-fab-disabled-icon-opacity, 38%)`),
11979
+ iconOpacity: unsafeCSS(`var(--m3e-secondary-fab-disabled-icon-opacity, var(--m3e-fab-disabled-icon-opacity, 38%))`),
11896
11980
  /** Label color when disabled. */
11897
- labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-disabled-label-text-color, ${DesignToken$1.color.onSurface})`),
11981
+ labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-disabled-label-text-color, var(--m3e-fab-disabled-label-text-color, ${DesignToken$1.color.onSurface}))`),
11898
11982
  /** Label opacity when disabled. */
11899
- labelTextOpacity: unsafeCSS(`var(--m3e-secondary-fab-disabled-label-text-opacity, 38%)`),
11983
+ labelTextOpacity: unsafeCSS(`var(--m3e-secondary-fab-disabled-label-text-opacity, var(--m3e-fab-disabled-label-text-opacity, 38%))`),
11900
11984
  /** Elevation when disabled. */
11901
- containerElevation: unsafeCSS(`var(--m3e-secondary-fab-disabled-container-elevation, ${DesignToken$1.elevation.level0})`),
11985
+ containerElevation: unsafeCSS(`var(--m3e-secondary-fab-disabled-container-elevation, var(--m3e-fab-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`),
11902
11986
  /** Lowered elevation when disabled. */
11903
- loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-disabled-container-elevation, ${DesignToken$1.elevation.level0})`)
11987
+ loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-disabled-container-elevation, var(--m3e-fab-lowered-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`)
11904
11988
  },
11905
11989
  /** Design tokens that control hover state. */
11906
11990
  hover: {
11907
11991
  /** Icon color on hover. */
11908
- iconColor: unsafeCSS(`var(--m3e-secondary-fab-hover-icon-color, ${DesignToken$1.color.onSecondary})`),
11992
+ iconColor: unsafeCSS(`var(--m3e-secondary-fab-hover-icon-color, var(--m3e-fab-hover-icon-color, ${DesignToken$1.color.onSecondary}))`),
11909
11993
  /** Label color on hover. */
11910
- labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-hover-label-text-color, ${DesignToken$1.color.onSecondary})`),
11994
+ labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-hover-label-text-color, var(--m3e-fab-hover-label-text-color, ${DesignToken$1.color.onSecondary}))`),
11911
11995
  /** State layer color on hover. */
11912
- stateLayerColor: unsafeCSS(`var(--m3e-secondary-fab-hover-state-layer-color, ${DesignToken$1.color.onSecondary})`),
11996
+ stateLayerColor: unsafeCSS(`var(--m3e-secondary-fab-hover-state-layer-color, var(--m3e-fab-hover-state-layer-color, ${DesignToken$1.color.onSecondary}))`),
11913
11997
  /** State layer opacity on hover. */
11914
- stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-fab-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
11998
+ stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-fab-hover-state-layer-opacity, var(--m3e-fab-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
11915
11999
  /** Elevation on hover. */
11916
- containerElevation: unsafeCSS(`var(--m3e-secondary-fab-hover-container-elevation, ${DesignToken$1.elevation.level4})`),
12000
+ containerElevation: unsafeCSS(`var(--m3e-secondary-fab-hover-container-elevation, var(--m3e-fab-hover-container-elevation, ${DesignToken$1.elevation.level4}))`),
11917
12001
  /** Lowered elevation on hover. */
11918
- loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-hover-container-elevation, ${DesignToken$1.elevation.level3})`)
12002
+ loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-hover-container-elevation, var(--m3e-fab-lowered-hover-container-elevation, ${DesignToken$1.elevation.level3}))`)
11919
12003
  },
11920
12004
  /** Design tokens that control focus state. */
11921
12005
  focus: {
11922
12006
  /** Icon color on focus. */
11923
- iconColor: unsafeCSS(`var(--m3e-secondary-fab-focus-icon-color, ${DesignToken$1.color.onSecondary})`),
12007
+ iconColor: unsafeCSS(`var(--m3e-secondary-fab-focus-icon-color, var(--m3e-fab-focus-icon-color, ${DesignToken$1.color.onSecondary}))`),
11924
12008
  /** Label color on focus. */
11925
- labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-focus-label-text-color, ${DesignToken$1.color.onSecondary})`),
12009
+ labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-focus-label-text-color, var(--m3e-fab-focus-label-text-color, ${DesignToken$1.color.onSecondary}))`),
11926
12010
  /** State layer color on focus. */
11927
- stateLayerColor: unsafeCSS(`var(--m3e-secondary-fab-focus-state-layer-color, ${DesignToken$1.color.onSecondary})`),
12011
+ stateLayerColor: unsafeCSS(`var(--m3e-secondary-fab-focus-state-layer-color, var(--m3e-fab-focus-state-layer-color, ${DesignToken$1.color.onSecondary}))`),
11928
12012
  /**State layer opacity on focus. */
11929
- stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-fab-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
12013
+ stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-fab-focus-state-layer-opacity, var(--m3e-fab-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
11930
12014
  /** Elevation on focus. */
11931
- containerElevation: unsafeCSS(`var(--m3e-secondary-fab-focus-container-elevation, ${DesignToken$1.elevation.level3})`),
12015
+ containerElevation: unsafeCSS(`var(--m3e-secondary-fab-focus-container-elevation, var(--m3e-fab-focus-container-elevation, ${DesignToken$1.elevation.level3}))`),
11932
12016
  /** Lowered elevation on focus. */
11933
- loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-focus-container-elevation, ${DesignToken$1.elevation.level2})`)
12017
+ loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-focus-container-elevation, var(--m3e-fab-lowered-focus-container-elevation, ${DesignToken$1.elevation.level2}))`)
11934
12018
  },
11935
12019
  /** Design tokens that control pressed state. */
11936
12020
  pressed: {
11937
12021
  /** Icon color on pressed. */
11938
- iconColor: unsafeCSS(`var(--m3e-secondary-fab-pressed-icon-color, ${DesignToken$1.color.onSecondary})`),
12022
+ iconColor: unsafeCSS(`var(--m3e-secondary-fab-pressed-icon-color, var(--m3e-fab-pressed-icon-color, ${DesignToken$1.color.onSecondary}))`),
11939
12023
  /** Label color on pressed. */
11940
- labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-pressed-label-text-color, ${DesignToken$1.color.onSecondary})`),
12024
+ labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-pressed-label-text-color, var(--m3e-fab-pressed-label-text-color, ${DesignToken$1.color.onSecondary}))`),
11941
12025
  /** State layer color on pressed. */
11942
- stateLayerColor: unsafeCSS(`var(--m3e-secondary-fab-pressed-state-layer-color, ${DesignToken$1.color.onSecondary})`),
12026
+ stateLayerColor: unsafeCSS(`var(--m3e-secondary-fab-pressed-state-layer-color, var(--m3e-fab-pressed-state-layer-color, ${DesignToken$1.color.onSecondary}))`),
11943
12027
  /** State layer opacity on pressed. */
11944
- stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-fab-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
12028
+ stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-fab-pressed-state-layer-opacity, var(--m3e-fab-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
11945
12029
  /** Elevation on pressed. */
11946
- containerElevation: unsafeCSS(`var(--m3e-secondary-fab-pressed-container-elevation, ${DesignToken$1.elevation.level3})`),
12030
+ containerElevation: unsafeCSS(`var(--m3e-secondary-fab-pressed-container-elevation, var(--m3e-fab-pressed-container-elevation, ${DesignToken$1.elevation.level3}))`),
11947
12031
  /** Lowered elevation on pressed. */
11948
- loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-pressed-container-elevation, ${DesignToken$1.elevation.level2})`)
12032
+ loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-pressed-container-elevation, var(--m3e-fab-lowered-pressed-container-elevation, ${DesignToken$1.elevation.level2}))`)
11949
12033
  }
11950
12034
  },
11951
12035
  /** Design tokens that control the `tertiary` variant. */
11952
12036
  tertiary: {
11953
12037
  /** Default label color. */
11954
- labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-label-text-color, ${DesignToken$1.color.onTertiary})`),
12038
+ labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-label-text-color, var(--m3e-fab-label-text-color, ${DesignToken$1.color.onTertiary}))`),
11955
12039
  /** Default icon color. */
11956
- iconColor: unsafeCSS(`var(--m3e-tertiary-fab-icon-color, ${DesignToken$1.color.onTertiary})`),
12040
+ iconColor: unsafeCSS(`var(--m3e-tertiary-fab-icon-color, var(--m3e-fab-icon-color, ${DesignToken$1.color.onTertiary}))`),
11957
12041
  /** Default container background color. */
11958
- containerColor: unsafeCSS(`var(--m3e-tertiary-fab-container-color, ${DesignToken$1.color.tertiary})`),
12042
+ containerColor: unsafeCSS(`var(--m3e-tertiary-fab-container-color, var(--m3e-fab-container-color, ${DesignToken$1.color.tertiary}))`),
11959
12043
  /** Resting elevation. */
11960
- containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-container-elevation, ${DesignToken$1.elevation.level3})`),
12044
+ containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-container-elevation, var(--m3e-fab-container-elevation, ${DesignToken$1.elevation.level3}))`),
11961
12045
  /** Lowered resting elevation. */
11962
- loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-container-elevation, ${DesignToken$1.elevation.level2})`),
12046
+ loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-container-elevation, var(--m3e-fab-lowered-container-elevation, ${DesignToken$1.elevation.level2}))`),
11963
12047
  /** Design tokens that control disabled state. */
11964
12048
  disabled: {
11965
12049
  /** Container background color when disabled. */
11966
- containerColor: unsafeCSS(`var(--m3e-tertiary-fab-disabled-container-color, ${DesignToken$1.color.onSurface})`),
12050
+ containerColor: unsafeCSS(`var(--m3e-tertiary-fab-disabled-container-color, var(--m3e-fab-disabled-container-color, ${DesignToken$1.color.onSurface}))`),
11967
12051
  /** Opacity of container when disabled. */
11968
- containerOpacity: unsafeCSS(`var(--m3e-tertiary-fab-disabled-container-opacity, 10%)`),
12052
+ containerOpacity: unsafeCSS(`var(--m3e-tertiary-fab-disabled-container-opacity, var(--m3e-fab-disabled-container-opacity, 10%))`),
11969
12053
  /** Icon color when disabled. */
11970
- iconColor: unsafeCSS(`var(--m3e-tertiary-fab-disabled-icon-color, ${DesignToken$1.color.onSurface})`),
12054
+ iconColor: unsafeCSS(`var(--m3e-tertiary-fab-disabled-icon-color, var(--m3e-fab-disabled-icon-color, ${DesignToken$1.color.onSurface}))`),
11971
12055
  /** Icon opacity when disabled. */
11972
- iconOpacity: unsafeCSS(`var(--m3e-tertiary-fab-disabled-icon-opacity, 38%)`),
12056
+ iconOpacity: unsafeCSS(`var(--m3e-tertiary-fab-disabled-icon-opacity, var(--m3e-fab-disabled-icon-opacity, 38%))`),
11973
12057
  /** Label color when disabled. */
11974
- labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-disabled-label-text-color, ${DesignToken$1.color.onSurface})`),
12058
+ labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-disabled-label-text-color, var(--m3e-fab-disabled-label-text-color, ${DesignToken$1.color.onSurface}))`),
11975
12059
  /** Label opacity when disabled. */
11976
- labelTextOpacity: unsafeCSS(`var(--m3e-tertiary-fab-disabled-label-text-opacity, 38%)`),
12060
+ labelTextOpacity: unsafeCSS(`var(--m3e-tertiary-fab-disabled-label-text-opacity, var(--m3e-fab-disabled-label-text-opacity, 38%))`),
11977
12061
  /** Elevation when disabled. */
11978
- containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-disabled-container-elevation, ${DesignToken$1.elevation.level0})`),
12062
+ containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-disabled-container-elevation, var(--m3e-fab-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`),
11979
12063
  /** Lowered elevation when disabled. */
11980
- loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-disabled-container-elevation, ${DesignToken$1.elevation.level0})`)
12064
+ loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-disabled-container-elevation, var(--m3e-fab-lowered-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`)
11981
12065
  },
11982
12066
  /** Design tokens that control hover state. */
11983
12067
  hover: {
11984
12068
  /** Icon color on hover. */
11985
- iconColor: unsafeCSS(`var(--m3e-tertiary-fab-hover-icon-color, ${DesignToken$1.color.onTertiary})`),
12069
+ iconColor: unsafeCSS(`var(--m3e-tertiary-fab-hover-icon-color, var(--m3e-fab-hover-icon-color, ${DesignToken$1.color.onTertiary}))`),
11986
12070
  /** Label color on hover. */
11987
- labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-hover-label-text-color, ${DesignToken$1.color.onTertiary})`),
12071
+ labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-hover-label-text-color, var(--m3e-fab-hover-label-text-color, ${DesignToken$1.color.onTertiary}))`),
11988
12072
  /** State layer color on hover. */
11989
- stateLayerColor: unsafeCSS(`var(--m3e-tertiary-fab-hover-state-layer-color, ${DesignToken$1.color.onTertiary})`),
12073
+ stateLayerColor: unsafeCSS(`var(--m3e-tertiary-fab-hover-state-layer-color, var(--m3e-fab-hover-state-layer-color, ${DesignToken$1.color.onTertiary}))`),
11990
12074
  /** State layer opacity on hover. */
11991
- stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-fab-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
12075
+ stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-fab-hover-state-layer-opacity, var(--m3e-fab-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
11992
12076
  /** Elevation on hover. */
11993
- containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-hover-container-elevation, ${DesignToken$1.elevation.level4})`),
12077
+ containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-hover-container-elevation, var(--m3e-fab-hover-container-elevation, ${DesignToken$1.elevation.level4}))`),
11994
12078
  /** Lowered elevation on hover. */
11995
- loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-hover-container-elevation, ${DesignToken$1.elevation.level3})`)
12079
+ loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-hover-container-elevation, var(--m3e-fab-lowered-hover-container-elevation, ${DesignToken$1.elevation.level3}))`)
11996
12080
  },
11997
12081
  /** Design tokens that control focus state. */
11998
12082
  focus: {
11999
12083
  /** Icon color on focus. */
12000
- iconColor: unsafeCSS(`var(--m3e-tertiary-fab-focus-icon-color, ${DesignToken$1.color.onTertiary})`),
12084
+ iconColor: unsafeCSS(`var(--m3e-tertiary-fab-focus-icon-color, var(--m3e-fab-focus-icon-color, ${DesignToken$1.color.onTertiary}))`),
12001
12085
  /** Label color on focus. */
12002
- labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-focus-label-text-color, ${DesignToken$1.color.onTertiary})`),
12086
+ labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-focus-label-text-color, var(--m3e-fab-focus-label-text-color, ${DesignToken$1.color.onTertiary}))`),
12003
12087
  /** State layer color on focus. */
12004
- stateLayerColor: unsafeCSS(`var(--m3e-tertiary-fab-focus-state-layer-color, ${DesignToken$1.color.onTertiary})`),
12088
+ stateLayerColor: unsafeCSS(`var(--m3e-tertiary-fab-focus-state-layer-color, var(--m3e-fab-focus-state-layer-color, ${DesignToken$1.color.onTertiary}))`),
12005
12089
  /**State layer opacity on focus. */
12006
- stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-fab-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
12090
+ stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-fab-focus-state-layer-opacity, var(--m3e-fab-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
12007
12091
  /** Elevation on focus. */
12008
- containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-focus-container-elevation, ${DesignToken$1.elevation.level3})`),
12092
+ containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-focus-container-elevation, var(--m3e-fab-focus-container-elevation, ${DesignToken$1.elevation.level3}))`),
12009
12093
  /** Lowered elevation on focus. */
12010
- loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-focus-container-elevation, ${DesignToken$1.elevation.level2})`)
12094
+ loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-focus-container-elevation, var(--m3e-fab-lowered-focus-container-elevation, ${DesignToken$1.elevation.level2}))`)
12011
12095
  },
12012
12096
  /** Design tokens that control pressed state. */
12013
12097
  pressed: {
12014
12098
  /** Icon color on pressed. */
12015
- iconColor: unsafeCSS(`var(--m3e-tertiary-fab-pressed-icon-color, ${DesignToken$1.color.onTertiary})`),
12099
+ iconColor: unsafeCSS(`var(--m3e-tertiary-fab-pressed-icon-color, var(--m3e-fab-pressed-icon-color, ${DesignToken$1.color.onTertiary}))`),
12016
12100
  /** Label color on pressed. */
12017
- labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-pressed-label-text-color, ${DesignToken$1.color.onTertiary})`),
12101
+ labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-pressed-label-text-color, var(--m3e-fab-pressed-label-text-color, ${DesignToken$1.color.onTertiary}))`),
12018
12102
  /** State layer color on pressed. */
12019
- stateLayerColor: unsafeCSS(`var(--m3e-tertiary-fab-pressed-state-layer-color, ${DesignToken$1.color.onTertiary})`),
12103
+ stateLayerColor: unsafeCSS(`var(--m3e-tertiary-fab-pressed-state-layer-color, var(--m3e-fab-pressed-state-layer-color, ${DesignToken$1.color.onTertiary}))`),
12020
12104
  /** State layer opacity on pressed. */
12021
- stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-fab-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
12105
+ stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-fab-pressed-state-layer-opacity, var(--m3e-fab-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
12022
12106
  /** Elevation on pressed. */
12023
- containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-pressed-container-elevation, ${DesignToken$1.elevation.level3})`),
12107
+ containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-pressed-container-elevation, var(--m3e-fab-pressed-container-elevation, ${DesignToken$1.elevation.level3}))`),
12024
12108
  /** Lowered elevation on pressed. */
12025
- loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-pressed-container-elevation, ${DesignToken$1.elevation.level2})`)
12109
+ loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-pressed-container-elevation, var(--m3e-fab-lowered-pressed-container-elevation, ${DesignToken$1.elevation.level2}))`)
12026
12110
  }
12027
12111
  },
12028
12112
  /** Design tokens that control the `primary-container` variant. */
12029
12113
  "primary-container": {
12030
12114
  /** Default label color. */
12031
- labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-label-text-color, ${DesignToken$1.color.onPrimaryContainer})`),
12115
+ labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-label-text-color, var(--m3e-primary-container-fab-label-text-color, ${DesignToken$1.color.onPrimaryContainer}))`),
12032
12116
  /** Default icon color. */
12033
- iconColor: unsafeCSS(`var(--m3e-primary-container-fab-icon-color, ${DesignToken$1.color.onPrimaryContainer})`),
12117
+ iconColor: unsafeCSS(`var(--m3e-primary-container-fab-icon-color, var(--m3e-primary-container-fab-icon-color, ${DesignToken$1.color.onPrimaryContainer}))`),
12034
12118
  /** Default container background color. */
12035
- containerColor: unsafeCSS(`var(--m3e-primary-container-fab-container-color, ${DesignToken$1.color.primaryContainer})`),
12119
+ containerColor: unsafeCSS(`var(--m3e-primary-container-fab-container-color, var(--m3e-fab-container-color, ${DesignToken$1.color.primaryContainer}))`),
12036
12120
  /** Resting elevation. */
12037
- containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-container-elevation, ${DesignToken$1.elevation.level3})`),
12121
+ containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-container-elevation, var(--m3e-fab-container-elevation, ${DesignToken$1.elevation.level3}))`),
12038
12122
  /** Lowered resting elevation. */
12039
- loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-container-elevation, ${DesignToken$1.elevation.level2})`),
12123
+ loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-container-elevation, var(--m3e-fab-lowered-container-elevation, ${DesignToken$1.elevation.level2}))`),
12040
12124
  /** Design tokens that control disabled state. */
12041
12125
  disabled: {
12042
12126
  /** Container background color when disabled. */
12043
- containerColor: unsafeCSS(`var(--m3e-primary-container-fab-disabled-container-color, ${DesignToken$1.color.onSurface})`),
12127
+ containerColor: unsafeCSS(`var(--m3e-primary-container-fab-disabled-container-color, var(--m3e-fab-disabled-container-color, ${DesignToken$1.color.onSurface}))`),
12044
12128
  /** Opacity of container when disabled. */
12045
- containerOpacity: unsafeCSS(`var(--m3e-primary-container-fab-disabled-container-opacity, 10%)`),
12129
+ containerOpacity: unsafeCSS(`var(--m3e-primary-container-fab-disabled-container-opacity, var(--m3e-fab-disabled-container-opacity, 10%))`),
12046
12130
  /** Icon color when disabled. */
12047
- iconColor: unsafeCSS(`var(--m3e-primary-container-fab-disabled-icon-color, ${DesignToken$1.color.onSurface})`),
12131
+ iconColor: unsafeCSS(`var(--m3e-primary-container-fab-disabled-icon-color, var(--m3e-fab-disabled-icon-color, ${DesignToken$1.color.onSurface}))`),
12048
12132
  /** Icon opacity when disabled. */
12049
- iconOpacity: unsafeCSS(`var(--m3e-primary-container-fab-disabled-icon-opacity, 38%)`),
12133
+ iconOpacity: unsafeCSS(`var(--m3e-primary-container-fab-disabled-icon-opacity, var(--m3e-fab-disabled-icon-opacity, 38%))`),
12050
12134
  /** Label color when disabled. */
12051
- labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-disabled-label-text-color, ${DesignToken$1.color.onSurface})`),
12135
+ labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-disabled-label-text-color, var(--m3e-fab-disabled-label-text-color, ${DesignToken$1.color.onSurface}))`),
12052
12136
  /** Label opacity when disabled. */
12053
- labelTextOpacity: unsafeCSS(`var(--m3e-primary-container-fab-disabled-label-text-opacity, 38%)`),
12137
+ labelTextOpacity: unsafeCSS(`var(--m3e-primary-container-fab-disabled-label-text-opacity, var(--m3e-fab-disabled-label-text-opacity, 38%))`),
12054
12138
  /** Elevation when disabled. */
12055
- containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-disabled-container-elevation, ${DesignToken$1.elevation.level0})`),
12139
+ containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-disabled-container-elevation, var(--m3e-fab-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`),
12056
12140
  /** Lowered elevation when disabled. */
12057
- loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-disabled-container-elevation, ${DesignToken$1.elevation.level0})`)
12141
+ loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-disabled-container-elevation, var(--m3e-fab-lowered-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`)
12058
12142
  },
12059
12143
  /** Design tokens that control hover state. */
12060
12144
  hover: {
12061
12145
  /** Icon color on hover. */
12062
- iconColor: unsafeCSS(`var(--m3e-primary-container-fab-hover-icon-color, ${DesignToken$1.color.onPrimaryContainer})`),
12146
+ iconColor: unsafeCSS(`var(--m3e-primary-container-fab-hover-icon-color, var(--m3e-fab-hover-icon-color, ${DesignToken$1.color.onPrimaryContainer}))`),
12063
12147
  /** Label color on hover. */
12064
- labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-hover-label-text-color, ${DesignToken$1.color.onPrimaryContainer})`),
12148
+ labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-hover-label-text-color, var(--m3e-fab-hover-label-text-color, ${DesignToken$1.color.onPrimaryContainer}))`),
12065
12149
  /** State layer color on hover. */
12066
- stateLayerColor: unsafeCSS(`var(--m3e-primary-container-fab-hover-state-layer-color, ${DesignToken$1.color.onPrimaryContainer})`),
12150
+ stateLayerColor: unsafeCSS(`var(--m3e-primary-container-fab-hover-state-layer-color, var(--m3e-fab-hover-state-layer-color, ${DesignToken$1.color.onPrimaryContainer}))`),
12067
12151
  /** State layer opacity on hover. */
12068
- stateLayerOpacity: unsafeCSS(`var(--m3e-primary-container-fab-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
12152
+ stateLayerOpacity: unsafeCSS(`var(--m3e-primary-container-fab-hover-state-layer-opacity, var(--m3e-fab-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
12069
12153
  /** Elevation on hover. */
12070
- containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-hover-container-elevation, ${DesignToken$1.elevation.level4})`),
12154
+ containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-hover-container-elevation, var(--m3e-fab-hover-container-elevation, ${DesignToken$1.elevation.level4}))`),
12071
12155
  /** Lowered elevation on hover. */
12072
- loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-hover-container-elevation, ${DesignToken$1.elevation.level3})`)
12156
+ loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-hover-container-elevation, var(--m3e-fab-lowered-hover-container-elevation, ${DesignToken$1.elevation.level3}))`)
12073
12157
  },
12074
12158
  /** Design tokens that control focus state. */
12075
12159
  focus: {
12076
12160
  /** Icon color on focus. */
12077
- iconColor: unsafeCSS(`var(--m3e-primary-container-fab-focus-icon-color, ${DesignToken$1.color.onPrimaryContainer})`),
12161
+ iconColor: unsafeCSS(`var(--m3e-primary-container-fab-focus-icon-color, var(--m3e-fab-focus-icon-color, ${DesignToken$1.color.onPrimaryContainer}))`),
12078
12162
  /** Label color on focus. */
12079
- labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-focus-label-text-color, ${DesignToken$1.color.onPrimaryContainer})`),
12163
+ labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-focus-label-text-color, var(--m3e-fab-focus-label-text-color, ${DesignToken$1.color.onPrimaryContainer}))`),
12080
12164
  /** State layer color on focus. */
12081
- stateLayerColor: unsafeCSS(`var(--m3e-primary-container-fab-focus-state-layer-color, ${DesignToken$1.color.onPrimaryContainer})`),
12165
+ stateLayerColor: unsafeCSS(`var(--m3e-primary-container-fab-focus-state-layer-color, var(--m3e-fab-focus-state-layer-color, ${DesignToken$1.color.onPrimaryContainer}))`),
12082
12166
  /**State layer opacity on focus. */
12083
- stateLayerOpacity: unsafeCSS(`var(--m3e-primary-container-fab-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
12167
+ stateLayerOpacity: unsafeCSS(`var(--m3e-primary-container-fab-focus-state-layer-opacity, var(--m3e-fab-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
12084
12168
  /** Elevation on focus. */
12085
- containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-focus-container-elevation, ${DesignToken$1.elevation.level3})`),
12169
+ containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-focus-container-elevation, var(--m3e-fab-focus-container-elevation, ${DesignToken$1.elevation.level3}))`),
12086
12170
  /** Lowered elevation on focus. */
12087
- loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-focus-container-elevation, ${DesignToken$1.elevation.level2})`)
12171
+ loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-focus-container-elevation, var(--m3e-fab-lowered-focus-container-elevation, ${DesignToken$1.elevation.level2}))`)
12088
12172
  },
12089
12173
  /** Design tokens that control pressed state. */
12090
12174
  pressed: {
12091
12175
  /** Icon color on pressed. */
12092
- iconColor: unsafeCSS(`var(--m3e-primary-container-fab-pressed-icon-color, ${DesignToken$1.color.onPrimaryContainer})`),
12176
+ iconColor: unsafeCSS(`var(--m3e-primary-container-fab-pressed-icon-color, var(--m3e-fab-pressed-icon-color, ${DesignToken$1.color.onPrimaryContainer}))`),
12093
12177
  /** Label color on pressed. */
12094
- labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-pressed-label-text-color, ${DesignToken$1.color.onPrimaryContainer})`),
12178
+ labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-pressed-label-text-color, var(--m3e-fab-pressed-label-text-color, ${DesignToken$1.color.onPrimaryContainer}))`),
12095
12179
  /** State layer color on pressed. */
12096
- stateLayerColor: unsafeCSS(`var(--m3e-primary-container-fab-pressed-state-layer-color, ${DesignToken$1.color.onPrimaryContainer})`),
12180
+ stateLayerColor: unsafeCSS(`var(--m3e-primary-container-fab-pressed-state-layer-color, var(--m3e-fab-pressed-state-layer-color, ${DesignToken$1.color.onPrimaryContainer}))`),
12097
12181
  /** State layer opacity on pressed. */
12098
- stateLayerOpacity: unsafeCSS(`var(--m3e-primary-container-fab-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
12182
+ stateLayerOpacity: unsafeCSS(`var(--m3e-primary-container-fab-pressed-state-layer-opacity, var(--m3e-fab-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
12099
12183
  /** Elevation on pressed. */
12100
- containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-pressed-container-elevation, ${DesignToken$1.elevation.level3})`),
12184
+ containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-pressed-container-elevation, var(--m3e-fab-pressed-container-elevation, ${DesignToken$1.elevation.level3}))`),
12101
12185
  /** Lowered elevation on pressed. */
12102
- loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-pressed-container-elevation, ${DesignToken$1.elevation.level2})`)
12186
+ loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-pressed-container-elevation, var(--m3e-fab-lowered-pressed-container-elevation, ${DesignToken$1.elevation.level2}))`)
12103
12187
  }
12104
12188
  },
12105
12189
  /** Design tokens that control the `secondary-container` variant. */
12106
12190
  "secondary-container": {
12107
12191
  /** Default label color. */
12108
- labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-label-text-color, ${DesignToken$1.color.onSecondaryContainer})`),
12192
+ labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-label-text-color, var(--m3e-fab-label-text-color, ${DesignToken$1.color.onSecondaryContainer}))`),
12109
12193
  /** Default icon color. */
12110
- iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
12194
+ iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-icon-color, var(--m3e-fab-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
12111
12195
  /** Default container background color. */
12112
- containerColor: unsafeCSS(`var(--m3e-secondary-container-fab-container-color, ${DesignToken$1.color.secondaryContainer})`),
12196
+ containerColor: unsafeCSS(`var(--m3e-secondary-container-fab-container-color, var(--m3e-fab-container-color, ${DesignToken$1.color.secondaryContainer}))`),
12113
12197
  /** Resting elevation. */
12114
- containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-container-elevation, ${DesignToken$1.elevation.level3})`),
12198
+ containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-container-elevation, var(--m3e-fab-container-elevation, ${DesignToken$1.elevation.level3}))`),
12115
12199
  /** Lowered resting elevation. */
12116
- loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-container-elevation, ${DesignToken$1.elevation.level2})`),
12200
+ loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-container-elevation, var(--m3e-fab-lowered-container-elevation, ${DesignToken$1.elevation.level2}))`),
12117
12201
  /** Design tokens that control disabled state. */
12118
12202
  disabled: {
12119
12203
  /** Container background color when disabled. */
12120
- containerColor: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-container-color, ${DesignToken$1.color.onSurface})`),
12204
+ containerColor: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-container-color, var(--m3e-fab-disabled-container-color, ${DesignToken$1.color.onSurface}))`),
12121
12205
  /** Opacity of container when disabled. */
12122
- containerOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-container-opacity, 10%)`),
12206
+ containerOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-container-opacity, var(--m3e-fab-disabled-container-opacity, 10%))`),
12123
12207
  /** Icon color when disabled. */
12124
- iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-icon-color, ${DesignToken$1.color.onSurface})`),
12208
+ iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-icon-color, var(--m3e-fab-disabled-icon-color, ${DesignToken$1.color.onSurface}))`),
12125
12209
  /** Icon opacity when disabled. */
12126
- iconOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-icon-opacity, 38%)`),
12210
+ iconOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-icon-opacity, var(--m3e-fab-disabled-icon-opacity, 38%))`),
12127
12211
  /** Label color when disabled. */
12128
- labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-label-text-color, ${DesignToken$1.color.onSurface})`),
12212
+ labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-label-text-color, var(--m3e-fab-disabled-label-text-color, ${DesignToken$1.color.onSurface}))`),
12129
12213
  /** Label opacity when disabled. */
12130
- labelTextOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-label-text-opacity, 38%)`),
12214
+ labelTextOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-label-text-opacity, var(--m3e-fab-disabled-label-text-opacity, 38%))`),
12131
12215
  /** Elevation when disabled. */
12132
- containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-container-elevation, ${DesignToken$1.elevation.level0})`),
12216
+ containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-container-elevation, var(--m3e-fab-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`),
12133
12217
  /** Lowered elevation when disabled. */
12134
- loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-disabled-container-elevation, ${DesignToken$1.elevation.level0})`)
12218
+ loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-disabled-container-elevation, var(--m3e-fab-lowered-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`)
12135
12219
  },
12136
12220
  /** Design tokens that control hover state. */
12137
12221
  hover: {
12138
12222
  /** Icon color on hover. */
12139
- iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-hover-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
12223
+ iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-hover-icon-color, var(--m3e-fab-hover-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
12140
12224
  /** Label color on hover. */
12141
- labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-hover-label-text-color, ${DesignToken$1.color.onSecondaryContainer})`),
12225
+ labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-hover-label-text-color, var(--m3e-fab-hover-label-text-color, ${DesignToken$1.color.onSecondaryContainer}))`),
12142
12226
  /** State layer color on hover. */
12143
- stateLayerColor: unsafeCSS(`var(--m3e-secondary-container-fab-hover-state-layer-color, ${DesignToken$1.color.onSecondaryContainer})`),
12227
+ stateLayerColor: unsafeCSS(`var(--m3e-secondary-container-fab-hover-state-layer-color, var(--m3e-fab-hover-state-layer-color, ${DesignToken$1.color.onSecondaryContainer}))`),
12144
12228
  /** State layer opacity on hover. */
12145
- stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
12229
+ stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-hover-state-layer-opacity, var(--m3e-fab-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
12146
12230
  /** Elevation on hover. */
12147
- containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-hover-container-elevation, ${DesignToken$1.elevation.level4})`),
12231
+ containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-hover-container-elevation, var(--m3e-fab-hover-container-elevation, ${DesignToken$1.elevation.level4}))`),
12148
12232
  /** Lowered elevation on hover. */
12149
- loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-hover-container-elevation, ${DesignToken$1.elevation.level3})`)
12233
+ loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-hover-container-elevation, var(--m3e-fab-lowered-hover-container-elevation, ${DesignToken$1.elevation.level3}))`)
12150
12234
  },
12151
12235
  /** Design tokens that control focus state. */
12152
12236
  focus: {
12153
12237
  /** Icon color on focus. */
12154
- iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-focus-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
12238
+ iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-focus-icon-color, var(--m3e-fab-focus-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
12155
12239
  /** Label color on focus. */
12156
- labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-focus-label-text-color, ${DesignToken$1.color.onSecondaryContainer})`),
12240
+ labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-focus-label-text-color, var(--m3e-fab-focus-label-text-color, ${DesignToken$1.color.onSecondaryContainer}))`),
12157
12241
  /** State layer color on focus. */
12158
- stateLayerColor: unsafeCSS(`var(--m3e-secondary-container-fab-focus-state-layer-color, ${DesignToken$1.color.onSecondaryContainer})`),
12242
+ stateLayerColor: unsafeCSS(`var(--m3e-secondary-container-fab-focus-state-layer-color, var(--m3e-fab-focus-state-layer-color, ${DesignToken$1.color.onSecondaryContainer}))`),
12159
12243
  /**State layer opacity on focus. */
12160
- stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
12244
+ stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-focus-state-layer-opacity, var(--m3e-fab-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
12161
12245
  /** Elevation on focus. */
12162
- containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-focus-container-elevation, ${DesignToken$1.elevation.level3})`),
12246
+ containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-focus-container-elevation, var(--m3e-fab-focus-container-elevation, ${DesignToken$1.elevation.level3}))`),
12163
12247
  /** Lowered elevation on focus. */
12164
- loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-focus-container-elevation, ${DesignToken$1.elevation.level2})`)
12248
+ loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-focus-container-elevation, var(--m3e-fab-lowered-focus-container-elevation, ${DesignToken$1.elevation.level2}))`)
12165
12249
  },
12166
12250
  /** Design tokens that control pressed state. */
12167
12251
  pressed: {
12168
12252
  /** Icon color on pressed. */
12169
- iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
12253
+ iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-icon-color, var(--m3e-fab-pressed-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
12170
12254
  /** Label color on pressed. */
12171
- labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-label-text-color, ${DesignToken$1.color.onSecondaryContainer})`),
12255
+ labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-label-text-color, var(--m3e-fab-pressed-label-text-color, ${DesignToken$1.color.onSecondaryContainer}))`),
12172
12256
  /** State layer color on pressed. */
12173
- stateLayerColor: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-state-layer-color, ${DesignToken$1.color.onSecondaryContainer})`),
12257
+ stateLayerColor: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-state-layer-color, var(--m3e-fab-pressed-state-layer-color, ${DesignToken$1.color.onSecondaryContainer}))`),
12174
12258
  /** State layer opacity on pressed. */
12175
- stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
12259
+ stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-state-layer-opacity, var(--m3e-fab-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
12176
12260
  /** Elevation on pressed. */
12177
- containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-container-elevation, ${DesignToken$1.elevation.level3})`),
12261
+ containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-container-elevation, var(--m3e-fab-pressed-container-elevation, ${DesignToken$1.elevation.level3}))`),
12178
12262
  /** Lowered elevation on pressed. */
12179
- loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-pressed-container-elevation, ${DesignToken$1.elevation.level2})`)
12263
+ loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-pressed-container-elevation, var(--m3e-fab-lowered-pressed-container-elevation, ${DesignToken$1.elevation.level2}))`)
12180
12264
  }
12181
12265
  },
12182
12266
  /** Design tokens that control the `tertiary-container` variant. */
12183
12267
  "tertiary-container": {
12184
12268
  /** Default label color. */
12185
- labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-label-text-color, ${DesignToken$1.color.onTertiaryContainer})`),
12269
+ labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-label-text-color, var(--m3e-fab-label-text-color, ${DesignToken$1.color.onTertiaryContainer}))`),
12186
12270
  /** Default icon color. */
12187
- iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-icon-color, ${DesignToken$1.color.onTertiaryContainer})`),
12271
+ iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-icon-color, var(--m3e-fab-icon-color, ${DesignToken$1.color.onTertiaryContainer}))`),
12188
12272
  /** Default container background color. */
12189
- containerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-container-color, ${DesignToken$1.color.tertiaryContainer})`),
12273
+ containerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-container-color, var(--m3e-fab-container-color, ${DesignToken$1.color.tertiaryContainer}))`),
12190
12274
  /** Resting elevation. */
12191
- containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-container-elevation, ${DesignToken$1.elevation.level3})`),
12275
+ containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-container-elevation, var(--m3e-fab-container-elevation, ${DesignToken$1.elevation.level3}))`),
12192
12276
  /** Lowered resting elevation. */
12193
- loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-container-elevation, ${DesignToken$1.elevation.level2})`),
12277
+ loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-container-elevation, var(--m3e-fab-lowered-container-elevation, ${DesignToken$1.elevation.level2}))`),
12194
12278
  /** Design tokens that control disabled state. */
12195
12279
  disabled: {
12196
12280
  /** Container background color when disabled. */
12197
- containerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-container-color, ${DesignToken$1.color.onSurface})`),
12281
+ containerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-container-color, var(--m3e-fab-disabled-container-color, ${DesignToken$1.color.onSurface}))`),
12198
12282
  /** Opacity of container when disabled. */
12199
- containerOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-container-opacity, 10%)`),
12283
+ containerOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-container-opacity, var(--m3e-fab-disabled-container-opacity, 10%))`),
12200
12284
  /** Icon color when disabled. */
12201
- iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-icon-color, ${DesignToken$1.color.onSurface})`),
12285
+ iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-icon-color, var(--m3e-fab-disabled-icon-color, ${DesignToken$1.color.onSurface}))`),
12202
12286
  /** Icon opacity when disabled. */
12203
- iconOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-icon-opacity, 38%)`),
12287
+ iconOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-icon-opacity, var(--m3e-fab-disabled-icon-opacity, 38%))`),
12204
12288
  /** Label color when disabled. */
12205
- labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-label-text-color, ${DesignToken$1.color.onSurface})`),
12289
+ labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-label-text-color, var(--m3e-fab-disabled-label-text-color, ${DesignToken$1.color.onSurface}))`),
12206
12290
  /** Label opacity when disabled. */
12207
- labelTextOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-label-text-opacity, 38%)`),
12291
+ labelTextOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-label-text-opacity, var(--m3e-fab-disabled-label-text-opacity, 38%))`),
12208
12292
  /** Elevation when disabled. */
12209
- containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-container-elevation, ${DesignToken$1.elevation.level0})`),
12293
+ containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-container-elevation, var(--m3e-fab-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`),
12210
12294
  /** Lowered elevation when disabled. */
12211
- loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-disabled-container-elevation, ${DesignToken$1.elevation.level0})`)
12295
+ loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-disabled-container-elevation, var(--m3e-fab-lowered-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`)
12212
12296
  },
12213
12297
  /** Design tokens that control hover state. */
12214
12298
  hover: {
12215
12299
  /** Icon color on hover. */
12216
- iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-icon-color, ${DesignToken$1.color.onTertiaryContainer})`),
12300
+ iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-icon-color, var(--m3e-fab-hover-icon-color, ${DesignToken$1.color.onTertiaryContainer}))`),
12217
12301
  /** Label color on hover. */
12218
- labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-label-text-color, ${DesignToken$1.color.onTertiaryContainer})`),
12302
+ labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-label-text-color, var(--m3e-fab-hover-label-text-color, ${DesignToken$1.color.onTertiaryContainer}))`),
12219
12303
  /** State layer color on hover. */
12220
- stateLayerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-state-layer-color, ${DesignToken$1.color.onTertiaryContainer})`),
12304
+ stateLayerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-state-layer-color, var(--m3e-fab-hover-state-layer-color, ${DesignToken$1.color.onTertiaryContainer}))`),
12221
12305
  /** State layer opacity on hover. */
12222
- stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
12306
+ stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-state-layer-opacity, var(--m3e-fab-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
12223
12307
  /** Elevation on hover. */
12224
- containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-container-elevation, ${DesignToken$1.elevation.level4})`),
12308
+ containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-container-elevation, var(--m3e-fab-hover-container-elevation, ${DesignToken$1.elevation.level4}))`),
12225
12309
  /** Lowered elevation on hover. */
12226
- loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-hover-container-elevation, ${DesignToken$1.elevation.level3})`)
12310
+ loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-hover-container-elevation, var(--m3e-fab-lowered-hover-container-elevation, ${DesignToken$1.elevation.level3}))`)
12227
12311
  },
12228
12312
  /** Design tokens that control focus state. */
12229
12313
  focus: {
12230
12314
  /** Icon color on focus. */
12231
- iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-icon-color, ${DesignToken$1.color.onTertiaryContainer})`),
12315
+ iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-icon-color, var(--m3e-fab-focus-icon-color, ${DesignToken$1.color.onTertiaryContainer}))`),
12232
12316
  /** Label color on focus. */
12233
- labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-label-text-color, ${DesignToken$1.color.onTertiaryContainer})`),
12317
+ labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-label-text-color, var(--m3e-fab-focus-label-text-color, ${DesignToken$1.color.onTertiaryContainer}))`),
12234
12318
  /** State layer color on focus. */
12235
- stateLayerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-state-layer-color, ${DesignToken$1.color.onTertiaryContainer})`),
12319
+ stateLayerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-state-layer-color, var(--m3e-fab-focus-state-layer-color, ${DesignToken$1.color.onTertiaryContainer}))`),
12236
12320
  /**State layer opacity on focus. */
12237
- stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
12321
+ stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-state-layer-opacity, var(--m3e-fab-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
12238
12322
  /** Elevation on focus. */
12239
- containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-container-elevation, ${DesignToken$1.elevation.level3})`),
12323
+ containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-container-elevation, var(--m3e-fab-focus-container-elevation, ${DesignToken$1.elevation.level3}))`),
12240
12324
  /** Lowered elevation on focus. */
12241
- loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-focus-container-elevation, ${DesignToken$1.elevation.level2})`)
12325
+ loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-focus-container-elevation, var(--m3e-fab-lowered-focus-container-elevation, ${DesignToken$1.elevation.level2}))`)
12242
12326
  },
12243
12327
  /** Design tokens that control pressed state. */
12244
12328
  pressed: {
12245
12329
  /** Icon color on pressed. */
12246
- iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-icon-color, ${DesignToken$1.color.onTertiaryContainer})`),
12330
+ iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-icon-color, var(--m3e-fab-pressed-icon-color, ${DesignToken$1.color.onTertiaryContainer}))`),
12247
12331
  /** Label color on pressed. */
12248
- labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-label-text-color, ${DesignToken$1.color.onTertiaryContainer})`),
12332
+ labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-label-text-color, var(--m3e-fab-pressed-label-text-color, ${DesignToken$1.color.onTertiaryContainer}))`),
12249
12333
  /** State layer color on pressed. */
12250
- stateLayerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-state-layer-color, ${DesignToken$1.color.onTertiaryContainer})`),
12334
+ stateLayerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-state-layer-color, var(--m3e-fab-pressed-state-layer-color, ${DesignToken$1.color.onTertiaryContainer}))`),
12251
12335
  /** State layer opacity on pressed. */
12252
- stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
12336
+ stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-state-layer-opacity, var(--m3e-fab-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
12253
12337
  /** Elevation on pressed. */
12254
- containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-container-elevation, ${DesignToken$1.elevation.level3})`),
12338
+ containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-container-elevation, var(--m3e-fab-pressed-container-elevation, ${DesignToken$1.elevation.level3}))`),
12255
12339
  /** Lowered elevation on pressed. */
12256
- loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-pressed-container-elevation, ${DesignToken$1.elevation.level2})`)
12340
+ loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-pressed-container-elevation, var(--m3e-fab-lowered-pressed-container-elevation, ${DesignToken$1.elevation.level2}))`)
12257
12341
  }
12258
12342
  },
12259
12343
  /** Design tokens that control the `surface` variant. */
12260
12344
  surface: {
12261
12345
  /** Default label color. */
12262
- labelTextColor: unsafeCSS(`var(--m3e-surface-fab-label-text-color, ${DesignToken$1.color.primary})`),
12346
+ labelTextColor: unsafeCSS(`var(--m3e-surface-fab-label-text-color, var(--m3e-fab-label-text-color, ${DesignToken$1.color.primary}))`),
12263
12347
  /** Default icon color. */
12264
- iconColor: unsafeCSS(`var(--m3e-surface-fab-icon-color, ${DesignToken$1.color.primary})`),
12348
+ iconColor: unsafeCSS(`var(--m3e-surface-fab-icon-color, var(--m3e-fab-icon-color, ${DesignToken$1.color.primary}))`),
12265
12349
  /** Default container background color. */
12266
- containerColor: unsafeCSS(`var(--m3e-surface-fab-container-color, ${DesignToken$1.color.surfaceContainerHigh})`),
12350
+ containerColor: unsafeCSS(`var(--m3e-surface-fab-container-color, var(--m3e-fab-container-color, ${DesignToken$1.color.surfaceContainerHigh}))`),
12267
12351
  /** Resting elevation. */
12268
- containerElevation: unsafeCSS(`var(--m3e-surface-fab-container-elevation, ${DesignToken$1.elevation.level3})`),
12352
+ containerElevation: unsafeCSS(`var(--m3e-surface-fab-container-elevation, var(--m3e-fab-container-elevation, ${DesignToken$1.elevation.level3}))`),
12269
12353
  /** Lowered resting elevation. */
12270
- loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-container-elevation, ${DesignToken$1.elevation.level2})`),
12354
+ loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-container-elevation, var(--m3e-fab-lowered-container-elevation, ${DesignToken$1.elevation.level2}))`),
12271
12355
  /** Lowered container background color. */
12272
- loweredContainerColor: unsafeCSS(`var(--m3e-surface-fab-lowered-container-color, ${DesignToken$1.color.surfaceContainerLow})`),
12356
+ loweredContainerColor: unsafeCSS(`var(--m3e-surface-fab-lowered-container-color, var(--m3e-fab-lowered-container-color, ${DesignToken$1.color.surfaceContainerLow}))`),
12273
12357
  /** Design tokens that control disabled state. */
12274
12358
  disabled: {
12275
12359
  /** Container background color when disabled. */
12276
- containerColor: unsafeCSS(`var(--m3e-surface-fab-disabled-container-color, ${DesignToken$1.color.onSurface})`),
12360
+ containerColor: unsafeCSS(`var(--m3e-surface-fab-disabled-container-color, var(--m3e-fab-disabled-container-color, ${DesignToken$1.color.onSurface}))`),
12277
12361
  /** Opacity of container when disabled. */
12278
- containerOpacity: unsafeCSS(`var(--m3e-surface-fab-disabled-container-opacity, 10%)`),
12362
+ containerOpacity: unsafeCSS(`var(--m3e-surface-fab-disabled-container-opacity, var(--m3e-fab-disabled-container-opacity, 10%))`),
12279
12363
  /** Icon color when disabled. */
12280
- iconColor: unsafeCSS(`var(--m3e-surface-fab-disabled-icon-color, ${DesignToken$1.color.onSurface})`),
12364
+ iconColor: unsafeCSS(`var(--m3e-surface-fab-disabled-icon-color, var(--m3e-fab-disabled-icon-color, ${DesignToken$1.color.onSurface}))`),
12281
12365
  /** Icon opacity when disabled. */
12282
- iconOpacity: unsafeCSS(`var(--m3e-surface-fab-disabled-icon-opacity, 38%)`),
12366
+ iconOpacity: unsafeCSS(`var(--m3e-surface-fab-disabled-icon-opacity, var(--m3e-fab-disabled-icon-opacity, 38%))`),
12283
12367
  /** Label color when disabled. */
12284
- labelTextColor: unsafeCSS(`var(--m3e-surface-fab-disabled-label-text-color, ${DesignToken$1.color.onSurface})`),
12368
+ labelTextColor: unsafeCSS(`var(--m3e-surface-fab-disabled-label-text-color, var(--m3e-fab-disabled-label-text-color, ${DesignToken$1.color.onSurface}))`),
12285
12369
  /** Label opacity when disabled. */
12286
- labelTextOpacity: unsafeCSS(`var(--m3e-surface-fab-disabled-label-text-opacity, 38%)`),
12370
+ labelTextOpacity: unsafeCSS(`var(--m3e-surface-fab-disabled-label-text-opacity, var(--m3e-fab-disabled-label-text-opacity, 38%))`),
12287
12371
  /** Elevation when disabled. */
12288
- containerElevation: unsafeCSS(`var(--m3e-surface-fab-disabled-container-elevation, ${DesignToken$1.elevation.level0})`),
12372
+ containerElevation: unsafeCSS(`var(--m3e-surface-fab-disabled-container-elevation, var(--m3e-fab-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`),
12289
12373
  /** Lowered elevation when disabled. */
12290
- loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-disabled-container-elevation, ${DesignToken$1.elevation.level0})`)
12374
+ loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-disabled-container-elevation, var(--m3e-fab-lowered-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`)
12291
12375
  },
12292
12376
  /** Design tokens that control hover state. */
12293
12377
  hover: {
12294
12378
  /** Icon color on hover. */
12295
- iconColor: unsafeCSS(`var(--m3e-surface-fab-hover-icon-color, ${DesignToken$1.color.primary})`),
12379
+ iconColor: unsafeCSS(`var(--m3e-surface-fab-hover-icon-color, var(--m3e-fab-hover-icon-color, ${DesignToken$1.color.primary}))`),
12296
12380
  /** Label color on hover. */
12297
- labelTextColor: unsafeCSS(`var(--m3e-surface-fab-hover-label-text-color, ${DesignToken$1.color.primary})`),
12381
+ labelTextColor: unsafeCSS(`var(--m3e-surface-fab-hover-label-text-color, var(--m3e-fab-hover-label-text-color, ${DesignToken$1.color.primary}))`),
12298
12382
  /** State layer color on hover. */
12299
- stateLayerColor: unsafeCSS(`var(--m3e-surface-fab-hover-state-layer-color, ${DesignToken$1.color.primary})`),
12383
+ stateLayerColor: unsafeCSS(`var(--m3e-surface-fab-hover-state-layer-color, var(--m3e-fab-hover-state-layer-color, ${DesignToken$1.color.primary}))`),
12300
12384
  /** State layer opacity on hover. */
12301
- stateLayerOpacity: unsafeCSS(`var(--m3e-surface-fab-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
12385
+ stateLayerOpacity: unsafeCSS(`var(--m3e-surface-fab-hover-state-layer-opacity, var(--m3e-fab-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
12302
12386
  /** Elevation on hover. */
12303
- containerElevation: unsafeCSS(`var(--m3e-surface-fab-hover-container-elevation, ${DesignToken$1.elevation.level4})`),
12387
+ containerElevation: unsafeCSS(`var(--m3e-surface-fab-hover-container-elevation, var(--m3e-fab-hover-container-elevation, ${DesignToken$1.elevation.level4}))`),
12304
12388
  /** Lowered elevation on hover. */
12305
- loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-hover-container-elevation, ${DesignToken$1.elevation.level3})`)
12389
+ loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-hover-container-elevation, var(--m3e-fab-lowered-hover-container-elevation, ${DesignToken$1.elevation.level3}))`)
12306
12390
  },
12307
12391
  /** Design tokens that control focus state. */
12308
12392
  focus: {
12309
12393
  /** Icon color on focus. */
12310
- iconColor: unsafeCSS(`var(--m3e-surface-fab-focus-icon-color, ${DesignToken$1.color.primary})`),
12394
+ iconColor: unsafeCSS(`var(--m3e-surface-fab-focus-icon-color, var(--m3e-fab-focus-icon-color, ${DesignToken$1.color.primary}))`),
12311
12395
  /** Label color on focus. */
12312
- labelTextColor: unsafeCSS(`var(--m3e-surface-fab-focus-label-text-color, ${DesignToken$1.color.primary})`),
12396
+ labelTextColor: unsafeCSS(`var(--m3e-surface-fab-focus-label-text-color, var(--m3e-fab-focus-label-text-color, ${DesignToken$1.color.primary}))`),
12313
12397
  /** State layer color on focus. */
12314
- stateLayerColor: unsafeCSS(`var(--m3e-surface-fab-focus-state-layer-color, ${DesignToken$1.color.primary})`),
12398
+ stateLayerColor: unsafeCSS(`var(--m3e-surface-fab-focus-state-layer-color, var(--m3e-fab-focus-state-layer-color, ${DesignToken$1.color.primary}))`),
12315
12399
  /**State layer opacity on focus. */
12316
- stateLayerOpacity: unsafeCSS(`var(--m3e-surface-fab-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
12400
+ stateLayerOpacity: unsafeCSS(`var(--m3e-surface-fab-focus-state-layer-opacity, var(--m3e-fab-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
12317
12401
  /** Elevation on focus. */
12318
- containerElevation: unsafeCSS(`var(--m3e-surface-fab-focus-container-elevation, ${DesignToken$1.elevation.level3})`),
12402
+ containerElevation: unsafeCSS(`var(--m3e-surface-fab-focus-container-elevation, var(--m3e-fab-focus-container-elevation, ${DesignToken$1.elevation.level3}))`),
12319
12403
  /** Lowered elevation on focus. */
12320
- loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-focus-container-elevation, ${DesignToken$1.elevation.level2})`)
12404
+ loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-focus-container-elevation, var(--m3e-fab-lowered-focus-container-elevation, ${DesignToken$1.elevation.level2}))`)
12321
12405
  },
12322
12406
  /** Design tokens that control pressed state. */
12323
12407
  pressed: {
12324
12408
  /** Icon color on pressed. */
12325
- iconColor: unsafeCSS(`var(--m3e-surface-fab-pressed-icon-color, ${DesignToken$1.color.primary})`),
12409
+ iconColor: unsafeCSS(`var(--m3e-surface-fab-pressed-icon-color, var(--m3e-fab-pressed-icon-color, ${DesignToken$1.color.primary}))`),
12326
12410
  /** Label color on pressed. */
12327
- labelTextColor: unsafeCSS(`var(--m3e-surface-fab-pressed-label-text-color, ${DesignToken$1.color.primary})`),
12411
+ labelTextColor: unsafeCSS(`var(--m3e-surface-fab-pressed-label-text-color, var(--m3e-fab-pressed-label-text-color, ${DesignToken$1.color.primary}))`),
12328
12412
  /** State layer color on pressed. */
12329
- stateLayerColor: unsafeCSS(`var(--m3e-surface-fab-pressed-state-layer-color, ${DesignToken$1.color.primary})`),
12413
+ stateLayerColor: unsafeCSS(`var(--m3e-surface-fab-pressed-state-layer-color, var(--m3e-fab-pressed-state-layer-color, ${DesignToken$1.color.primary}))`),
12330
12414
  /** State layer opacity on pressed. */
12331
- stateLayerOpacity: unsafeCSS(`var(--m3e-surface-fab-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
12415
+ stateLayerOpacity: unsafeCSS(`var(--m3e-surface-fab-pressed-state-layer-opacity, var(--m3e-fab-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
12332
12416
  /** Elevation on pressed. */
12333
- containerElevation: unsafeCSS(`var(--m3e-surface-fab-pressed-container-elevation, ${DesignToken$1.elevation.level3})`),
12417
+ containerElevation: unsafeCSS(`var(--m3e-surface-fab-pressed-container-elevation, var(--m3e-fab-pressed-container-elevation, ${DesignToken$1.elevation.level3}))`),
12334
12418
  /** Lowered elevation on pressed. */
12335
- loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-pressed-container-elevation, ${DesignToken$1.elevation.level2})`)
12419
+ loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-pressed-container-elevation, var(--m3e-fab-lowered-pressed-container-elevation, ${DesignToken$1.elevation.level2}))`)
12336
12420
  }
12337
12421
  }
12338
12422
  };
@@ -12405,6 +12489,16 @@ var _M3eFabElement_instances, _M3eFabElement_handleSlotChange;
12405
12489
  *
12406
12490
  * @fires click - Emitted when the element is clicked.
12407
12491
  *
12492
+ * @cssprop --m3e-fab-container-height - Height of the FAB container for all size variants.
12493
+ * @cssprop --m3e-fab-label-text-font-size - Font size for the FAB label text for all size variants.
12494
+ * @cssprop --m3e-fab-label-text-font-weight - Font weight for the FAB label text for all size variants.
12495
+ * @cssprop --m3e-fab-label-text-line-height - Line height for the FAB label text for all size variants.
12496
+ * @cssprop --m3e-fab-label-text-tracking - Letter spacing (tracking) for the FAB label text for all size variants.
12497
+ * @cssprop --m3e-fab-icon-size - Icon size for the FAB for all size variants.
12498
+ * @cssprop --m3e-fab-shape - Border radius for the FAB for all size variants.
12499
+ * @cssprop --m3e-fab-leading-space - Leading space for the FAB for all size variants.
12500
+ * @cssprop --m3e-fab-trailing-space - Trailing space for the FAB for all size variants.
12501
+ * @cssprop --m3e-fab-icon-label-space - Space between icon and label for the FAB for all size variants.
12408
12502
  * @cssprop --m3e-fab-small-container-height - Height of the small FAB container.
12409
12503
  * @cssprop --m3e-fab-small-label-text-font-size - Font size for the small FAB label text.
12410
12504
  * @cssprop --m3e-fab-small-label-text-font-weight - Font weight for the small FAB label text.
@@ -12435,6 +12529,37 @@ var _M3eFabElement_instances, _M3eFabElement_handleSlotChange;
12435
12529
  * @cssprop --m3e-fab-large-leading-space - Leading space for the large FAB.
12436
12530
  * @cssprop --m3e-fab-large-trailing-space - Trailing space for the large FAB.
12437
12531
  * @cssprop --m3e-fab-large-icon-label-space - Space between icon and label for the large FAB.
12532
+ * @cssprop --m3e-fab-label-text-color - Default label text color for FAB (all variants).
12533
+ * @cssprop --m3e-fab-icon-color - Default icon color for FAB (all variants).
12534
+ * @cssprop --m3e-fab-container-color - Default container background color for FAB (all variants).
12535
+ * @cssprop --m3e-fab-container-elevation - Resting elevation for FAB (all variants).
12536
+ * @cssprop --m3e-fab-lowered-container-elevation - Lowered resting elevation for FAB (all variants).
12537
+ * @cssprop --m3e-fab-disabled-container-color - Container background color when disabled (all variants).
12538
+ * @cssprop --m3e-fab-disabled-container-opacity - Opacity of container when disabled (all variants).
12539
+ * @cssprop --m3e-fab-disabled-icon-color - Icon color when disabled (all variants).
12540
+ * @cssprop --m3e-fab-disabled-icon-opacity - Icon opacity when disabled (all variants).
12541
+ * @cssprop --m3e-fab-disabled-label-text-color - Label text color when disabled (all variants).
12542
+ * @cssprop --m3e-fab-disabled-label-text-opacity - Label text opacity when disabled (all variants).
12543
+ * @cssprop --m3e-fab-disabled-container-elevation - Elevation when disabled (all variants).
12544
+ * @cssprop --m3e-fab-lowered-disabled-container-elevation - Lowered elevation when disabled (all variants).
12545
+ * @cssprop --m3e-fab-hover-icon-color - Icon color on hover (all variants).
12546
+ * @cssprop --m3e-fab-hover-label-text-color - Label text color on hover (all variants).
12547
+ * @cssprop --m3e-fab-hover-state-layer-color - State layer color on hover (all variants).
12548
+ * @cssprop --m3e-fab-hover-state-layer-opacity - State layer opacity on hover (all variants).
12549
+ * @cssprop --m3e-fab-hover-container-elevation - Elevation on hover (all variants).
12550
+ * @cssprop --m3e-fab-lowered-hover-container-elevation - Lowered elevation on hover (all variants).
12551
+ * @cssprop --m3e-fab-focus-icon-color - Icon color on focus (all variants).
12552
+ * @cssprop --m3e-fab-focus-label-text-color - Label text color on focus (all variants).
12553
+ * @cssprop --m3e-fab-focus-state-layer-color - State layer color on focus (all variants).
12554
+ * @cssprop --m3e-fab-focus-state-layer-opacity - State layer opacity on focus (all variants).
12555
+ * @cssprop --m3e-fab-focus-container-elevation - Elevation on focus (all variants).
12556
+ * @cssprop --m3e-fab-lowered-focus-container-elevation - Lowered elevation on focus (all variants).
12557
+ * @cssprop --m3e-fab-pressed-icon-color - Icon color on pressed (all variants).
12558
+ * @cssprop --m3e-fab-pressed-label-text-color - Label text color on pressed (all variants).
12559
+ * @cssprop --m3e-fab-pressed-state-layer-color - State layer color on pressed (all variants).
12560
+ * @cssprop --m3e-fab-pressed-state-layer-opacity - State layer opacity on pressed (all variants).
12561
+ * @cssprop --m3e-fab-pressed-container-elevation - Elevation on pressed (all variants).
12562
+ * @cssprop --m3e-fab-lowered-pressed-container-elevation - Lowered elevation on pressed (all variants).
12438
12563
  * @cssprop --m3e-primary-fab-label-text-color - Default label text color for primary FAB.
12439
12564
  * @cssprop --m3e-primary-fab-icon-color - Default icon color for primary FAB.
12440
12565
  * @cssprop --m3e-primary-fab-container-color - Default container background color for primary FAB.
@@ -13189,7 +13314,7 @@ function findFormFieldControl(slot) {
13189
13314
  * Copyright (c) 2025 Google LLC
13190
13315
  * See LICENSE file in the project root for full license text.
13191
13316
  */
13192
- var _M3eFormFieldElement_instances, _M3eFormFieldElement_control, _M3eFormFieldElement_removeValueInterceptor, _M3eFormFieldElement_formResetHandler, _M3eFormFieldElement_controlInvalidHandler, _M3eFormFieldElement_controlMutationController, _M3eFormFieldElement_resizeController, _M3eFormFieldElement_focusController, _M3eFormFieldElement_hintMutationController, _M3eFormFieldElement_errorMutationController, _M3eFormFieldElement_focused, _M3eFormFieldElement_hintText, _M3eFormFieldElement_errorText, _M3eFormFieldElement_shouldFloatLabel_get, _M3eFormFieldElement_stopPropagation, _M3eFormFieldElement_handleLabelSlotChange, _M3eFormFieldElement_handlePrefixSlotChange, _M3eFormFieldElement_handleSuffixSlotChange, _M3eFormFieldElement_handlePrefixResize, _M3eFormFieldElement_handleSlotChange, _M3eFormFieldElement_handleContainerClick, _M3eFormFieldElement_handleControlInvalid, _M3eFormFieldElement_handleControlChange, _M3eFormFieldElement_handleFormReset, _M3eFormFieldElement_changeControl, _M3eFormFieldElement_bindValueInterceptor, _M3eFormFieldElement_handleHintChange, _M3eFormFieldElement_handleErrorChange;
13317
+ var _M3eFormFieldElement_instances, _M3eFormFieldElement_control, _M3eFormFieldElement_removeValueInterceptor, _M3eFormFieldElement_formResetHandler, _M3eFormFieldElement_controlInvalidHandler, _M3eFormFieldElement_controlMutationController, _M3eFormFieldElement_resizeController, _M3eFormFieldElement_focusController, _M3eFormFieldElement_hintMutationController, _M3eFormFieldElement_errorMutationController, _M3eFormFieldElement_pressedController, _M3eFormFieldElement_focused, _M3eFormFieldElement_hintText, _M3eFormFieldElement_errorText, _M3eFormFieldElement_shouldFloatLabel_get, _M3eFormFieldElement_stopPropagation, _M3eFormFieldElement_handleLabelSlotChange, _M3eFormFieldElement_handlePrefixSlotChange, _M3eFormFieldElement_handleSuffixSlotChange, _M3eFormFieldElement_handlePrefixResize, _M3eFormFieldElement_handleSlotChange, _M3eFormFieldElement_handleContainerClick, _M3eFormFieldElement_handleControlInvalid, _M3eFormFieldElement_handleControlChange, _M3eFormFieldElement_handleFormReset, _M3eFormFieldElement_changeControl, _M3eFormFieldElement_bindValueInterceptor, _M3eFormFieldElement_handleHintChange, _M3eFormFieldElement_handleErrorChange;
13193
13318
  /**
13194
13319
  * A container for form controls that applies Material Design styling and behavior.
13195
13320
  *
@@ -13320,6 +13445,11 @@ let M3eFormFieldElement = class M3eFormFieldElement extends AttachInternals$1(Li
13320
13445
  callback: () => __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleErrorChange).call(this)
13321
13446
  }));
13322
13447
  /** @private */
13448
+ _M3eFormFieldElement_pressedController.set(this, new PressedController$1(this, {
13449
+ target: null,
13450
+ callback: pressed => this.classList.toggle("-pressed", pressed && !(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.disabled ?? true))
13451
+ }));
13452
+ /** @private */
13323
13453
  _M3eFormFieldElement_focused.set(this, false);
13324
13454
  /** @private */
13325
13455
  this._pseudoLabel = "";
@@ -13356,9 +13486,6 @@ let M3eFormFieldElement = class M3eFormFieldElement extends AttachInternals$1(Li
13356
13486
  new HoverController$1(this, {
13357
13487
  callback: () => this.classList.toggle("-no-animate", false)
13358
13488
  });
13359
- new PressedController$1(this, {
13360
- callback: pressed => this.classList.toggle("-pressed", pressed && !(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.disabled ?? true))
13361
- });
13362
13489
  }
13363
13490
  /** A reference to the element used to anchor dropdown menus. */
13364
13491
  get menuAnchor() {
@@ -13404,6 +13531,7 @@ let M3eFormFieldElement = class M3eFormFieldElement extends AttachInternals$1(Li
13404
13531
  firstUpdated(_changedProperties) {
13405
13532
  super.firstUpdated(_changedProperties);
13406
13533
  __classPrivateFieldGet(this, _M3eFormFieldElement_focusController, "f").observe(this._base);
13534
+ __classPrivateFieldGet(this, _M3eFormFieldElement_pressedController, "f").observe(this._base);
13407
13535
  __classPrivateFieldGet(this, _M3eFormFieldElement_hintMutationController, "f").observe(this._hint);
13408
13536
  __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleHintChange).call(this);
13409
13537
  __classPrivateFieldGet(this, _M3eFormFieldElement_errorMutationController, "f").observe(this._error);
@@ -13437,6 +13565,7 @@ _M3eFormFieldElement_resizeController = new WeakMap();
13437
13565
  _M3eFormFieldElement_focusController = new WeakMap();
13438
13566
  _M3eFormFieldElement_hintMutationController = new WeakMap();
13439
13567
  _M3eFormFieldElement_errorMutationController = new WeakMap();
13568
+ _M3eFormFieldElement_pressedController = new WeakMap();
13440
13569
  _M3eFormFieldElement_focused = new WeakMap();
13441
13570
  _M3eFormFieldElement_hintText = new WeakMap();
13442
13571
  _M3eFormFieldElement_errorText = new WeakMap();
@@ -13576,7 +13705,7 @@ M3eFormFieldElement.styles = css`:host { display: inline-flex; flex-direction: c
13576
13705
  font-size ${DesignToken$1.motion.duration.short4},
13577
13706
  line-height ${DesignToken$1.motion.duration.short4}`)}; } :host(.-with-select) .label { margin-inline-end: 1.5rem; } ::slotted([slot="label"]) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .subscript { display: inline-flex; width: 100%; margin-top: 0.25rem; font-size: var(--m3e-form-field-subscript-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-form-field-subscript-font-weight, ${DesignToken$1.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-form-field-subscript-line-height, ${DesignToken$1.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-form-field-subscript-tracking, ${DesignToken$1.typescale.standard.body.small.tracking}); min-height: var(--m3e-form-field-subscript-line-height, ${DesignToken$1.typescale.standard.body.small.lineHeight}); color: var(--m3e-form-field-subscript-color, ${DesignToken$1.color.onSurfaceVariant}); } .error, .hint { flex: 1 1 auto; } :host([hide-subscript="always"]) .subscript { display: none; } :host([hide-subscript="auto"]:not(.-invalid)) .subscript { opacity: 0; margin-top: 0px; margin-bottom: 0.25rem; transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short4},
13578
13707
  margin-top ${DesignToken$1.motion.duration.short4},
13579
- margin-bottom ${DesignToken$1.motion.duration.short4}`)}; } :host([hide-subscript="auto"]:not(.-invalid):focus-within) .subscript, :host([hide-subscript="auto"]:not(.-invalid).-pressed) .subscript { opacity: 1; margin-top: 0.25rem; margin-bottom: 0; } :host(.-invalid) .hint { display: none; } :host(:not(.-invalid)) .error { display: none; } ::slotted(input), ::slotted(textarea), ::slotted(select) { outline: unset; border: unset; background-color: transparent; box-shadow: none; font-family: inherit; font-size: inherit; line-height: initial; letter-spacing: inherit; color: var(--_form-field-input-color, inherit); flex: 1 1 auto; min-width: 0; padding: unset; } ::slotted(textarea) { scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.scrollbar.color}; } ::slotted(m3e-select), ::slotted(m3e-input-chip-set) { flex: 1 1 auto; min-width: 0; } :host([float-label="auto"]:not(.-float-label):not(.-pressed)) .label { font-size: inherit; } :host([float-label="auto"]:not(.-float-label).-with-label) .prefix-text, :host([float-label="auto"]:not(.-float-label).-with-label) .suffix-text { opacity: 0; transition: opacity 0s; } .prefix { margin-inline-start: 1rem; } :host(.-with-prefix) .prefix { margin-inline-end: 1rem; margin-inline-start: 0.75rem; } .suffix { margin-inline-end: 1rem; } :host(.-with-suffix) .suffix { margin-inline-start: 0.25rem; margin-inline-end: 0.5rem; } :host(.-with-suffix.-with-select) .suffix { margin-inline-start: unset; } :host(.-with-select) .suffix-text { display: none; } :host([variant="outlined"]) .label { margin-top: calc(0px - var(--_form-field-label-line-height) / 2); } :host([variant="outlined"]) .outline { position: absolute; display: flex; pointer-events: none; left: 0; top: 0; bottom: 0; right: 0; } :host([variant="outlined"]) .pseudo-label { visibility: hidden; margin-inline-end: 0.25rem; font-size: var(--_form-field-label-font-size); line-height: var(--_form-field-label-line-height); letter-spacing: var(--_form-field-label-tracking); max-width: 100%; transition-property: max-width, margin-inline-end; transition-duration: 1ms; } :host([variant="outlined"][float-label="auto"]:not(.-float-label):not(.-pressed)) .pseudo-label { max-width: 0; margin-inline-end: 0px; transition-delay: ${DesignToken$1.motion.duration.short2}; } :host([variant="outlined"]) .outline-start, :host([variant="outlined"]) .outline-notch, :host([variant="outlined"]) .outline-end { box-sizing: border-box; border-width: var(--_form-field-outline-size, 0.0625rem); border-color: var(--_form-field-outline-color); transition: border-color ${DesignToken$1.motion.duration.short4}; } :host([variant="outlined"]:not(.-with-label)) .outline-notch { display: none; } :host([variant="outlined"]) .outline-start { min-width: 0.75rem; border-top-style: solid; border-inline-start-style: solid; border-bottom-style: solid; border-start-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmall}); border-end-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmall}); } :host([variant="outlined"]) .outline-notch { border-bottom-style: solid; } :host([variant="outlined"]) .outline-end { flex-grow: 1; min-width: 1rem; border-top-style: solid; border-inline-end-style: solid; border-bottom-style: solid; border-start-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmall}); border-end-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmall}); } :host([variant="outlined"].-with-prefix) .outline-start { min-width: calc(1.25rem + var(--_prefix-width, 0px) + 0.25rem); } :host([variant="outlined"]:not(.-disabled)) .base:hover .outline, :host([variant="outlined"]:not(.-disabled):focus-within) .outline, :host([variant="outlined"]:not(.-disabled).-pressed) .outline { --_form-field-outline-size: 0.125rem; } :host([variant="outlined"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="outlined"]) .content { min-height: calc(3.5rem + ${DesignToken$1.density.calc(-2)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize} ); } :host([variant="outlined"][float-label="auto"]:not(.-float-label):not(.-pressed)) .label { margin-top: unset; line-height: calc(3.5rem + ${DesignToken$1.density.calc(-2)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize} ); } :host([variant="filled"]) .base { --_select-arrow-margin-top: calc( 0px - calc(1rem / max(calc(0 - calc(var(--md-sys-density-scale, 0) + var(--md-sys-density-scale, 0))), 1)) ); } :host([variant="filled"]) .base::before { content: ""; box-sizing: border-box; position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; border-bottom-style: solid; border-width: 0.0625rem; border-radius: var(--m3e-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmallTop}); border-color: var(--_form-field-outline-color); background-color: var(--_form-field-container-color); } :host([variant="filled"]:not(.-disabled)) .base:hover::before, :host([variant="filled"]:not(.-disabled):focus-within) .base::before, :host([variant="filled"]:not(.-disabled).-pressed) .base::before { border-width: 0.1875rem; } :host([variant="filled"]) .base::after { content: ""; box-sizing: border-box; position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--_form-field-hover-container-color); transition: background-color ${DesignToken$1.motion.duration.short4}; } :host([variant="filled"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="filled"]) .content { padding-top: calc(1.5rem + ${DesignToken$1.density.calc(-2)}); margin-bottom: 0.5rem; } :host([variant="filled"]) .label { top: calc(0.5rem + ${DesignToken$1.density.calc(-2)}); } :host([variant="filled"][float-label="auto"]:not(.-float-label):not(.-pressed)) .label { top: 0px; line-height: calc(3.5rem + ${DesignToken$1.density.calc(-2)} - 0.0625rem); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize} ); } :host(:not(.-disabled):not(:focus-within):not(.-pressed)) .base:hover { --_form-field-hover-container-color: color-mix( in srgb, var(--m3e-form-field-hover-container-color, ${DesignToken$1.color.onSurface}) var(--m3e-form-field-hover-container-opacity, 8%), transparent ); } :host(:not(.-disabled):not(.-invalid)) { color: var(--m3e-form-field-color, ${DesignToken$1.color.onSurface}); } :host([variant="outlined"]:not(.-disabled):not(.-invalid)) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken$1.color.outline}); } :host([variant="filled"]:not(.-disabled):not(.-invalid)) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken$1.color.onSurfaceVariant}); } :host([variant="outlined"]:not(.-disabled):not(.-invalid):focus-within) .base, :host([variant="outlined"]:not(.-disabled):not(.-invalid).-pressed) .base, :host([variant="filled"]:not(.-disabled):not(.-invalid):focus-within) .base, :host([variant="filled"]:not(.-disabled):not(.-invalid).-pressed) .base { --_form-field-outline-color: var(--m3e-form-field-focused-outline-color, ${DesignToken$1.color.primary}); --_form-field-label-color: var(--m3e-form-field-focused-color, ${DesignToken$1.color.primary}); } :host(:not(.-disabled)) .base { --_form-field-container-color: var( --m3e-form-field-container-color, ${DesignToken$1.color.surfaceContainerHighest} ); } :host(:not(.-disabled).-invalid) .base { --_form-field-label-color: var(--m3e-form-field-invalid-color, ${DesignToken$1.color.error}); --_form-field-outline-color: var(--m3e-form-field-invalid-color, ${DesignToken$1.color.error}); } :host(:not(.-disabled).-invalid) .subscript { color: var(--m3e-form-field-invalid-color, ${DesignToken$1.color.error}); } :host(.-disabled) { color: color-mix( in srgb, var(--m3e-form-field-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-form-field-disabled-opacity, 38%), transparent ); } :host(.-disabled) .base { --_form-field-container-color: color-mix( in srgb, var(--m3e-form-field-disabled-container-color, ${DesignToken$1.color.onSurface}) var(--m3e-form-field-disabled-container-opacity, 4%), transparent ); } :host(.-no-animate) *, :host(.-no-animate) *::before, :host(.-no-animate) *::after { transition: none !important; } @media (forced-colors: active) { :host([variant="filled"]) .base::after { transition: none; } :host { --_form-field-outline-color: CanvasText; } :host(.-disabled) { --_form-field-input-color: GrayText; --_form-field-color: GrayText; --_form-field-label-color: GrayText; --_form-field-outline-color: GrayText; } } @media (prefers-reduced-motion) { .base::before, .prefix-text, .suffix-text, .label, .subscript, .outline-start, .outline-notch, .outline-end, .pseudo-label { transition: none !important; } }`;
13708
+ margin-bottom ${DesignToken$1.motion.duration.short4}`)}; } :host([hide-subscript="auto"]:not(.-invalid):focus-within) .subscript, :host([hide-subscript="auto"]:not(.-invalid).-pressed) .subscript { opacity: 1; margin-top: 0.25rem; margin-bottom: 0; } :host(.-invalid) .hint { display: none; } :host(:not(.-invalid)) .error { display: none; } ::slotted(input), ::slotted(textarea), ::slotted(select) { outline: unset; border: unset; background-color: transparent; box-shadow: none; font-family: inherit; font-size: inherit; line-height: initial; letter-spacing: inherit; color: var(--_form-field-input-color, inherit); flex: 1 1 auto; min-width: 0; padding: unset; } ::slotted(textarea) { scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.scrollbar.color}; } ::slotted(m3e-select), ::slotted(m3e-input-chip-set) { flex: 1 1 auto; min-width: 0; } :host([float-label="auto"]:not(.-float-label):not(.-pressed)) .label { font-size: inherit; } :host([float-label="auto"]:not(.-float-label).-with-label) .prefix-text, :host([float-label="auto"]:not(.-float-label).-with-label) .suffix-text { opacity: 0; transition: opacity 0s; } .prefix { margin-inline-start: 1rem; } :host(.-with-prefix) .prefix { margin-inline-end: 1rem; margin-inline-start: 0.75rem; } .suffix { margin-inline-end: 1rem; } :host(.-with-suffix) .suffix { margin-inline-start: 0.25rem; margin-inline-end: 0.5rem; } :host(.-with-suffix.-with-select) .suffix { margin-inline-start: unset; } :host(.-with-select) .suffix-text { display: none; } :host([variant="outlined"]) .label { margin-top: calc(0px - var(--_form-field-label-line-height) / 2); } :host([variant="outlined"]) .outline { position: absolute; display: flex; pointer-events: none; left: 0; top: 0; bottom: 0; right: 0; } :host([variant="outlined"]) .pseudo-label { visibility: hidden; margin-inline-end: 0.5rem; font-size: var(--_form-field-label-font-size); line-height: var(--_form-field-label-line-height); letter-spacing: var(--_form-field-label-tracking); max-width: 100%; transition-property: max-width, margin-inline-end; transition-duration: 1ms; } :host([variant="outlined"].-required:not([hide-required-marker])) .pseudo-label { margin-inline-end: 0.25rem; } :host([variant="outlined"][float-label="auto"]:not(.-float-label):not(.-pressed)) .pseudo-label { max-width: 0; margin-inline-end: 0px; transition-delay: ${DesignToken$1.motion.duration.short2}; } :host([variant="outlined"]) .outline-start, :host([variant="outlined"]) .outline-notch, :host([variant="outlined"]) .outline-end { box-sizing: border-box; border-width: var(--_form-field-outline-size, 1px); border-color: var(--_form-field-outline-color); transition: border-color ${DesignToken$1.motion.duration.short4}; } :host([variant="outlined"]:not(.-with-label)) .outline-notch { display: none; } :host([variant="outlined"]) .outline-start { min-width: 0.75rem; border-top-style: solid; border-inline-start-style: solid; border-bottom-style: solid; border-start-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmall}); border-end-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmall}); } :host([variant="outlined"]) .outline-notch { border-bottom-style: solid; } :host([variant="outlined"]) .outline-end { flex-grow: 1; min-width: 1rem; border-top-style: solid; border-inline-end-style: solid; border-bottom-style: solid; border-start-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmall}); border-end-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmall}); } :host([variant="outlined"].-with-prefix) .outline-start { min-width: calc(1.25rem + var(--_prefix-width, 0px) + 0.25rem); } :host([variant="outlined"]:not(.-disabled)) .base:hover .outline, :host([variant="outlined"]:not(.-disabled):focus-within) .outline, :host([variant="outlined"]:not(.-disabled).-pressed) .outline { --_form-field-outline-size: 2px; } :host([variant="outlined"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="outlined"]) .content { min-height: calc(3.5rem + ${DesignToken$1.density.calc(-2)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize} ); } :host([variant="outlined"][float-label="auto"]:not(.-float-label):not(.-pressed)) .label { margin-top: unset; line-height: calc(3.5rem + ${DesignToken$1.density.calc(-2)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize} ); } :host([variant="filled"]) .base { --_select-arrow-margin-top: calc( 0px - calc(1rem / max(calc(0 - calc(var(--md-sys-density-scale, 0) + var(--md-sys-density-scale, 0))), 1)) ); } :host([variant="filled"]) .base::before { content: ""; box-sizing: border-box; position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; border-bottom-style: solid; border-width: 1px; border-radius: var(--m3e-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmallTop}); border-color: var(--_form-field-outline-color); background-color: var(--_form-field-container-color); } :host([variant="filled"]:not(.-disabled)) .base:hover::before, :host([variant="filled"]:not(.-disabled):focus-within) .base::before, :host([variant="filled"]:not(.-disabled).-pressed) .base::before { border-width: 3px; } :host([variant="filled"]) .base::after { content: ""; box-sizing: border-box; position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--_form-field-hover-container-color); transition: background-color ${DesignToken$1.motion.duration.short4}; } :host([variant="filled"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="filled"]) .content { padding-top: calc(1.5rem + ${DesignToken$1.density.calc(-2)}); margin-bottom: 0.5rem; } :host([variant="filled"]) .label { top: calc(0.5rem + ${DesignToken$1.density.calc(-2)}); } :host([variant="filled"][float-label="auto"]:not(.-float-label):not(.-pressed)) .label { top: 0px; line-height: calc(3.5rem + ${DesignToken$1.density.calc(-2)} - 0.0625rem); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize} ); } :host(:not(.-disabled):not(:focus-within):not(.-pressed)) .base:hover { --_form-field-hover-container-color: color-mix( in srgb, var(--m3e-form-field-hover-container-color, ${DesignToken$1.color.onSurface}) var(--m3e-form-field-hover-container-opacity, 8%), transparent ); } :host(:not(.-disabled):not(.-invalid)) { color: var(--m3e-form-field-color, ${DesignToken$1.color.onSurface}); } :host([variant="outlined"]:not(.-disabled):not(.-invalid)) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken$1.color.outline}); } :host([variant="filled"]:not(.-disabled):not(.-invalid)) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken$1.color.onSurfaceVariant}); } :host([variant="outlined"]:not(.-disabled):not(.-invalid):focus-within) .base, :host([variant="outlined"]:not(.-disabled):not(.-invalid).-pressed) .base, :host([variant="filled"]:not(.-disabled):not(.-invalid):focus-within) .base, :host([variant="filled"]:not(.-disabled):not(.-invalid).-pressed) .base { --_form-field-outline-color: var(--m3e-form-field-focused-outline-color, ${DesignToken$1.color.primary}); --_form-field-label-color: var(--m3e-form-field-focused-color, ${DesignToken$1.color.primary}); } :host(:not(.-disabled)) .base { --_form-field-container-color: var( --m3e-form-field-container-color, ${DesignToken$1.color.surfaceContainerHighest} ); } :host(:not(.-disabled).-invalid) .base { --_form-field-label-color: var(--m3e-form-field-invalid-color, ${DesignToken$1.color.error}); --_form-field-outline-color: var(--m3e-form-field-invalid-color, ${DesignToken$1.color.error}); } :host(:not(.-disabled).-invalid) .subscript { color: var(--m3e-form-field-invalid-color, ${DesignToken$1.color.error}); } :host(.-disabled) { color: color-mix( in srgb, var(--m3e-form-field-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-form-field-disabled-opacity, 38%), transparent ); } :host(.-disabled) .base { --_form-field-container-color: color-mix( in srgb, var(--m3e-form-field-disabled-container-color, ${DesignToken$1.color.onSurface}) var(--m3e-form-field-disabled-container-opacity, 4%), transparent ); } :host(.-no-animate) *, :host(.-no-animate) *::before, :host(.-no-animate) *::after { transition: none !important; } @media (forced-colors: active) { :host([variant="filled"]) .base::after { transition: none; } :host { --_form-field-outline-color: CanvasText; } :host(.-disabled) { --_form-field-input-color: GrayText; --_form-field-color: GrayText; --_form-field-label-color: GrayText; --_form-field-outline-color: GrayText; } } @media (prefers-reduced-motion) { .base::before, .prefix-text, .suffix-text, .label, .subscript, .outline-start, .outline-notch, .outline-end, .pseudo-label { transition: none !important; } }`;
13580
13709
  __decorate([e$4(".base")], M3eFormFieldElement.prototype, "_base", void 0);
13581
13710
  __decorate([e$4(".prefix")], M3eFormFieldElement.prototype, "_prefix", void 0);
13582
13711
  __decorate([e$4(".error")], M3eFormFieldElement.prototype, "_error", void 0);
@@ -13911,88 +14040,88 @@ M3eIconElement = __decorate([t$3("m3e-icon")], M3eIconElement);
13911
14040
  const IconButtonSizeToken = {
13912
14041
  /** Design tokens that control the `extra-small` `size` variant. */
13913
14042
  "extra-small": {
13914
- containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-container-height, 2rem) + ${DesignToken$1.density.calc(0)})`),
13915
- outlineThickness: unsafeCSS("var(--m3e-icon-button-extra-small-outline-thickness, 1px)"),
13916
- iconSize: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-icon-size, 1.25rem) + ${DesignToken$1.density.calc(0)})`),
13917
- shapeRound: unsafeCSS(`var(--m3e-icon-button-extra-small-shape-round, ${DesignToken$1.shape.corner.full})`),
13918
- shapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-small-shape-square, ${DesignToken$1.shape.corner.medium})`),
13919
- selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-extra-small-selected-shape-round, ${DesignToken$1.shape.corner.medium})`),
13920
- selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-small-selected-shape-square, ${DesignToken$1.shape.corner.full})`),
13921
- shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-extra-small-shape-pressed-morph, ${DesignToken$1.shape.corner.small})`),
13922
- narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-narrow-leading-space, 0.25rem) + ${DesignToken$1.density.calc(0)})`),
13923
- narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-narrow-trailing-space, 0.25rem) + ${DesignToken$1.density.calc(0)})`),
13924
- defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-default-leading-space, 0.375rem) + ${DesignToken$1.density.calc(0)})`),
13925
- defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-default-trailing-space, 0.375rem) + ${DesignToken$1.density.calc(0)})`),
13926
- wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-wide-leading-space, 0.625rem) + ${DesignToken$1.density.calc(0)})`),
13927
- wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-wide-trailing-space, 0.625rem) + ${DesignToken$1.density.calc(0)})`)
14043
+ containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-container-height, var(--m3e-icon-button-container-height, 2rem)) + ${DesignToken$1.density.calc(0)})`),
14044
+ outlineThickness: unsafeCSS("var(--m3e-icon-button-extra-small-outline-thickness, var(--m3e-icon-button-outline-thickness, 1px))"),
14045
+ iconSize: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-icon-size, var(--m3e-icon-button-icon-size, 1.25rem)) + ${DesignToken$1.density.calc(0)})`),
14046
+ shapeRound: unsafeCSS(`var(--m3e-icon-button-extra-small-shape-round, var(--m3e-icon-button-shape-round, ${DesignToken$1.shape.corner.full}))`),
14047
+ shapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-small-shape-square, var(--m3e-icon-button-shape-square, ${DesignToken$1.shape.corner.medium}))`),
14048
+ selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-extra-small-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${DesignToken$1.shape.corner.medium}))`),
14049
+ selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-small-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${DesignToken$1.shape.corner.full}))`),
14050
+ shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-extra-small-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${DesignToken$1.shape.corner.small}))`),
14051
+ narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 0.25rem)) + ${DesignToken$1.density.calc(0)})`),
14052
+ narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 0.25rem)) + ${DesignToken$1.density.calc(0)})`),
14053
+ defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-default-leading-space, var(--m3e-icon-button-default-leading-space, 0.375rem)) + ${DesignToken$1.density.calc(0)})`),
14054
+ defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 0.375rem)) + ${DesignToken$1.density.calc(0)})`),
14055
+ wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 0.625rem)) + ${DesignToken$1.density.calc(0)})`),
14056
+ wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 0.625rem)) + ${DesignToken$1.density.calc(0)})`)
13928
14057
  },
13929
14058
  /** Design tokens that control the `small` `size` variant. */
13930
14059
  small: {
13931
- containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-small-container-height, 2.5rem) + ${DesignToken$1.density.calc(-1)})`),
13932
- outlineThickness: unsafeCSS("var(--m3e-icon-button-small-outline-thickness, 1px)"),
13933
- iconSize: unsafeCSS(`calc(var(--m3e-icon-button-small-icon-size, 1.5rem) + ${DesignToken$1.density.calc(-1)})`),
13934
- shapeRound: unsafeCSS(`var(--m3e-icon-button-small-shape-round, ${DesignToken$1.shape.corner.full})`),
13935
- shapeSquare: unsafeCSS(`var(--m3e-icon-button-small-shape-square, ${DesignToken$1.shape.corner.medium})`),
13936
- selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-small-selected-shape-round, ${DesignToken$1.shape.corner.medium})`),
13937
- selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-small-selected-shape-square, ${DesignToken$1.shape.corner.full})`),
13938
- shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-small-shape-pressed-morph, ${DesignToken$1.shape.corner.small})`),
13939
- narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-narrow-leading-space, 0.25rem) + ${DesignToken$1.density.calc(-1)})`),
13940
- narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-narrow-trailing-space, 0.25rem) + ${DesignToken$1.density.calc(-1)})`),
13941
- defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-default-leading-space, 0.5rem) + ${DesignToken$1.density.calc(-1)})`),
13942
- defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-default-trailing-space, 0.5rem) + ${DesignToken$1.density.calc(-1)})`),
13943
- wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-wide-leading-space, 0.875rem) + ${DesignToken$1.density.calc(-1)})`),
13944
- wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-wide-trailing-space, 0.875rem) + ${DesignToken$1.density.calc(-1)})`)
14060
+ containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-small-container-height, var(--m3e-icon-button-container-height, 2.5rem)) + ${DesignToken$1.density.calc(-1)})`),
14061
+ outlineThickness: unsafeCSS("var(--m3e-icon-button-small-outline-thickness, var(--m3e-icon-button-outline-thickness, 1px))"),
14062
+ iconSize: unsafeCSS(`calc(var(--m3e-icon-button-small-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) + ${DesignToken$1.density.calc(-1)})`),
14063
+ shapeRound: unsafeCSS(`var(--m3e-icon-button-small-shape-round, var(--m3e-icon-button-shape-round, ${DesignToken$1.shape.corner.full}))`),
14064
+ shapeSquare: unsafeCSS(`var(--m3e-icon-button-small-shape-square, var(--m3e-icon-button-shape-square, ${DesignToken$1.shape.corner.medium}))`),
14065
+ selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-small-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${DesignToken$1.shape.corner.medium}))`),
14066
+ selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-small-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${DesignToken$1.shape.corner.full}))`),
14067
+ shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-small-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${DesignToken$1.shape.corner.small}))`),
14068
+ narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 0.25rem)) + ${DesignToken$1.density.calc(-1)})`),
14069
+ narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 0.25rem)) + ${DesignToken$1.density.calc(-1)})`),
14070
+ defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-default-leading-space, var(--m3e-icon-button-default-leading-space, 0.5rem)) + ${DesignToken$1.density.calc(-1)})`),
14071
+ defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 0.5rem)) + ${DesignToken$1.density.calc(-1)})`),
14072
+ wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 0.875rem)) + ${DesignToken$1.density.calc(-1)})`),
14073
+ wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 0.875rem)) + ${DesignToken$1.density.calc(-1)})`)
13945
14074
  },
13946
14075
  /** Design tokens that control the `medium` `size` variant. */
13947
14076
  medium: {
13948
- containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-medium-container-height, 3.5rem) + ${DesignToken$1.density.calc(-2)})`),
13949
- outlineThickness: unsafeCSS("var(--m3e-icon-button-medium-outline-thickness, 1px)"),
13950
- iconSize: unsafeCSS(`calc(var(--m3e-icon-button-medium-icon-size, 1.5rem) + ${DesignToken$1.density.calc(-2)})`),
13951
- shapeRound: unsafeCSS(`var(--m3e-icon-button-medium-shape-round, ${DesignToken$1.shape.corner.full})`),
13952
- shapeSquare: unsafeCSS(`var(--m3e-icon-button-medium-shape-square, ${DesignToken$1.shape.corner.large})`),
13953
- selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-medium-selected-shape-round, ${DesignToken$1.shape.corner.large})`),
13954
- selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-medium-selected-shape-square, ${DesignToken$1.shape.corner.full})`),
13955
- shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-medium-shape-pressed-morph, ${DesignToken$1.shape.corner.medium})`),
13956
- narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-narrow-leading-space, 0.75rem) + ${DesignToken$1.density.calc(-2)})`),
13957
- narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-narrow-trailing-space, 0.75rem) + ${DesignToken$1.density.calc(-2)})`),
13958
- defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-default-leading-space, 1rem) + ${DesignToken$1.density.calc(-2)})`),
13959
- defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-default-trailing-space, 1rem) + ${DesignToken$1.density.calc(-2)})`),
13960
- wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-wide-leading-space, 1.5rem) + ${DesignToken$1.density.calc(-2)})`),
13961
- wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-wide-trailing-space, 1.5rem) + ${DesignToken$1.density.calc(-2)})`)
14077
+ containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-medium-container-height, var(--m3e-icon-button-container-height, 3.5rem)) + ${DesignToken$1.density.calc(-2)})`),
14078
+ outlineThickness: unsafeCSS("var(--m3e-icon-button-medium-outline-thickness, var(--m3e-icon-button-outline-thickness, 1px))"),
14079
+ iconSize: unsafeCSS(`calc(var(--m3e-icon-button-medium-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) + ${DesignToken$1.density.calc(-2)})`),
14080
+ shapeRound: unsafeCSS(`var(--m3e-icon-button-medium-shape-round, var(--m3e-icon-button-shape-round, ${DesignToken$1.shape.corner.full}))`),
14081
+ shapeSquare: unsafeCSS(`var(--m3e-icon-button-medium-shape-square, var(--m3e-icon-button-shape-square, ${DesignToken$1.shape.corner.large}))`),
14082
+ selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-medium-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${DesignToken$1.shape.corner.large}))`),
14083
+ selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-medium-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${DesignToken$1.shape.corner.full}))`),
14084
+ shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-medium-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${DesignToken$1.shape.corner.medium}))`),
14085
+ narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 0.75rem)) + ${DesignToken$1.density.calc(-2)})`),
14086
+ narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 0.75rem)) + ${DesignToken$1.density.calc(-2)})`),
14087
+ defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-default-leading-space, var(--m3e-icon-button-default-leading-space, 1rem)) + ${DesignToken$1.density.calc(-2)})`),
14088
+ defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 1rem)) + ${DesignToken$1.density.calc(-2)})`),
14089
+ wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 1.5rem)) + ${DesignToken$1.density.calc(-2)})`),
14090
+ wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 1.5rem)) + ${DesignToken$1.density.calc(-2)})`)
13962
14091
  },
13963
14092
  /** Design tokens that control the `large` `size` variant. */
13964
14093
  large: {
13965
- containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-large-container-height, 6rem) + ${DesignToken$1.density.calc(-3)})`),
13966
- outlineThickness: unsafeCSS("var(--m3e-icon-button-large-outline-thickness, 0.125rem)"),
13967
- iconSize: unsafeCSS(`calc(var(--m3e-icon-button-large-icon-size, 2rem) + ${DesignToken$1.density.calc(-3)})`),
13968
- shapeRound: unsafeCSS(`var(--m3e-icon-button-large-shape-round, ${DesignToken$1.shape.corner.full})`),
13969
- shapeSquare: unsafeCSS(`var(--m3e-icon-button-large-shape-square, ${DesignToken$1.shape.corner.extraLarge})`),
13970
- selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-large-selected-shape-round, ${DesignToken$1.shape.corner.extraLarge})`),
13971
- selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-large-selected-shape-square, ${DesignToken$1.shape.corner.full})`),
13972
- shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-large-shape-pressed-morph, ${DesignToken$1.shape.corner.large})`),
13973
- narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-narrow-leading-space, 1rem) + ${DesignToken$1.density.calc(-3)})`),
13974
- narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-narrow-trailing-space, 1rem) + ${DesignToken$1.density.calc(-3)})`),
13975
- defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-default-leading-space, 2rem) + ${DesignToken$1.density.calc(-3)})`),
13976
- defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-default-trailing-space, 2rem) + ${DesignToken$1.density.calc(-3)})`),
13977
- wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-wide-leading-space, 3rem) + ${DesignToken$1.density.calc(-3)})`),
13978
- wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-wide-trailing-space, 3rem) + ${DesignToken$1.density.calc(-3)})`)
14094
+ containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-large-container-height, var(--m3e-icon-button-container-height, 6rem)) + ${DesignToken$1.density.calc(-3)})`),
14095
+ outlineThickness: unsafeCSS("var(--m3e-icon-button-large-outline-thickness, var(--m3e-icon-button-outline-thickness, 2px))"),
14096
+ iconSize: unsafeCSS(`calc(var(--m3e-icon-button-large-icon-size, var(--m3e-icon-button-icon-size, 2rem)) + ${DesignToken$1.density.calc(-3)})`),
14097
+ shapeRound: unsafeCSS(`var(--m3e-icon-button-large-shape-round, var(--m3e-icon-button-shape-round, ${DesignToken$1.shape.corner.full}))`),
14098
+ shapeSquare: unsafeCSS(`var(--m3e-icon-button-large-shape-square, var(--m3e-icon-button-shape-square, ${DesignToken$1.shape.corner.extraLarge}))`),
14099
+ selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-large-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${DesignToken$1.shape.corner.extraLarge}))`),
14100
+ selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-large-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${DesignToken$1.shape.corner.full}))`),
14101
+ shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-large-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${DesignToken$1.shape.corner.large}))`),
14102
+ narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 1rem)) + ${DesignToken$1.density.calc(-3)})`),
14103
+ narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 1rem)) + ${DesignToken$1.density.calc(-3)})`),
14104
+ defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-default-leading-space, var(--m3e-icon-button-default-leading-space, 2rem)) + ${DesignToken$1.density.calc(-3)})`),
14105
+ defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 2rem)) + ${DesignToken$1.density.calc(-3)})`),
14106
+ wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 3rem)) + ${DesignToken$1.density.calc(-3)})`),
14107
+ wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 3rem)) + ${DesignToken$1.density.calc(-3)})`)
13979
14108
  },
13980
14109
  /** Design tokens that control the `extra-large` `size` variant. */
13981
14110
  "extra-large": {
13982
- containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-container-height, 8.5rem) + ${DesignToken$1.density.calc(-3)})`),
13983
- outlineThickness: unsafeCSS("var(--m3e-icon-button-extra-large-outline-thickness, 0.1875rem)"),
13984
- iconSize: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-icon-size, 2.5rem) + ${DesignToken$1.density.calc(-3)})`),
13985
- shapeRound: unsafeCSS(`var(--m3e-icon-button-extra-large-shape-round, ${DesignToken$1.shape.corner.full})`),
13986
- shapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-large-shape-square, ${DesignToken$1.shape.corner.extraLarge})`),
13987
- selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-extra-large-selected-shape-round, ${DesignToken$1.shape.corner.extraLarge})`),
13988
- selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-large-selected-shape-square, ${DesignToken$1.shape.corner.full})`),
13989
- shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-extra-large-shape-pressed-morph, ${DesignToken$1.shape.corner.large})`),
13990
- narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-narrow-leading-space, 2rem) + ${DesignToken$1.density.calc(-3)})`),
13991
- narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-narrow-trailing-space, 2rem) + ${DesignToken$1.density.calc(-3)})`),
13992
- defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-default-leading-space, 3rem) + ${DesignToken$1.density.calc(-3)})`),
13993
- defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-default-trailing-space, 3rem) + ${DesignToken$1.density.calc(-3)})`),
13994
- wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-wide-leading-space, 4.5rem) + ${DesignToken$1.density.calc(-3)})`),
13995
- wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-wide-trailing-space, 4.5rem) + ${DesignToken$1.density.calc(-3)})`)
14111
+ containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-container-height, var(--m3e-icon-button-container-height, 8.5rem)) + ${DesignToken$1.density.calc(-3)})`),
14112
+ outlineThickness: unsafeCSS("var(--m3e-icon-button-extra-large-outline-thickness, var(--m3e-icon-button-outline-thickness, 3px))"),
14113
+ iconSize: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-icon-size, var(--m3e-icon-button-icon-size, 2.5rem)) + ${DesignToken$1.density.calc(-3)})`),
14114
+ shapeRound: unsafeCSS(`var(--m3e-icon-button-extra-large-shape-round, var(--m3e-icon-button-shape-round, ${DesignToken$1.shape.corner.full}))`),
14115
+ shapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-large-shape-square, var(--m3e-icon-button-shape-square, ${DesignToken$1.shape.corner.extraLarge}))`),
14116
+ selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-extra-large-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${DesignToken$1.shape.corner.extraLarge}))`),
14117
+ selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-large-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${DesignToken$1.shape.corner.full}))`),
14118
+ shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-extra-large-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${DesignToken$1.shape.corner.large}))`),
14119
+ narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 2rem)) + ${DesignToken$1.density.calc(-3)})`),
14120
+ narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 2rem)) + ${DesignToken$1.density.calc(-3)})`),
14121
+ defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-default-leading-space, var(--m3e-icon-button-default-leading-space, 3rem)) + ${DesignToken$1.density.calc(-3)})`),
14122
+ defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 3rem)) + ${DesignToken$1.density.calc(-3)})`),
14123
+ wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 4.5rem)) + ${DesignToken$1.density.calc(-3)})`),
14124
+ wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 4.5rem)) + ${DesignToken$1.density.calc(-3)})`)
13996
14125
  }
13997
14126
  };
13998
14127
 
@@ -14011,7 +14140,7 @@ const IconButtonSizeStyle = [iconButtonStyle("extra-small"), iconButtonStyle("sm
14011
14140
  * @internal
14012
14141
  */
14013
14142
  const IconButtonStyle = css`: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: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } .touch { position: absolute; aspect-ratio: 1 / 1; height: 3rem; left: auto; right: auto; } :host(.-pressed) .base, :host(.-resting) .base { transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard},
14014
- border-radius ${DesignToken$1.motion.spring.fastEffects}`)}; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; transition: ${unsafeCSS(`padding-inline ${DesignToken$1.motion.spring.fastEffects}`)}; } .icon { transition: ${unsafeCSS(`color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; --m3e-icon-size: 1em; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } ::slotted(*) { font-size: inherit !important; flex: none; transform: var(--_icon-button-icon-transform); transform-origin: center center; transition: ${unsafeCSS(`transform var(--_icon-button-icon-transform-transition, ${DesignToken$1.motion.spring.fastEffects})`)}; } ::slotted(svg) { width: 1em; height: 1em; } :host([toggle]:not([selected])) .base.with-selected-icon slot[name="selected"], :host([toggle][selected]) .base.with-selected-icon slot:not([name]) { display: none; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } :host(.-grouped.-connected) { flex: 1 1 auto; } :host(.-grouped:not(.-connected):not(.-adjacent-pressed):not(.-pressed)) { flex-shrink: 0; flex-grow: 0; } :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) { flex-shrink: 1; min-width: 0; } :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) .label { text-overflow: clip; } :host(.-grouped:not(.-connected).-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, .icon { transition: none; } :host(.-pressed) .base, :host(.-resting) .base { transition: border-radius ${DesignToken$1.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]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .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]:not(:disabled):not([disabled-interactive])[toggle][selected]) .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-icon-button-extra-small-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-extra-small-outline-thickness, 1px); } :host([size="small"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-small-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-small-outline-thickness, 1px); } :host([size="medium"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-medium-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-medium-outline-thickness, 1px); } :host([size="large"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-large-outline-thickness, 0.125rem)); outline-width: var(--m3e-icon-button-large-outline-thickness, 0.125rem); } :host([size="extra-large"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-extra-large-outline-thickness, 0.1875rem)); outline-width: var(--m3e-icon-button-extra-large-outline-thickness, 0.1875rem); } } @media (prefers-reduced-motion) { :host(.-pressed) .base, :host(.-resting) .base, .base, .wrapper, .icon { transition: none; } }`;
14143
+ border-radius ${DesignToken$1.motion.spring.fastEffects}`)}; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; transition: ${unsafeCSS(`padding-inline ${DesignToken$1.motion.spring.fastEffects}`)}; } .icon { transition: ${unsafeCSS(`color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; --m3e-icon-size: 1em; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } ::slotted(*) { font-size: inherit !important; flex: none; transform: var(--_icon-button-icon-transform); transform-origin: center center; transition: ${unsafeCSS(`transform var(--_icon-button-icon-transform-transition, ${DesignToken$1.motion.spring.fastEffects})`)}; } ::slotted(svg) { width: 1em; height: 1em; } :host([toggle]:not([selected])) .base.with-selected-icon slot[name="selected"], :host([toggle][selected]) .base.with-selected-icon slot:not([name]) { display: none; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } :host(.-grouped.-connected) { flex: 1 1 auto; } :host(.-grouped:not(.-connected):not(.-adjacent-pressed):not(.-pressed)) { flex-shrink: 0; flex-grow: 0; } :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) { flex-shrink: 1; min-width: 0; } :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) .label { text-overflow: clip; } :host(.-grouped:not(.-connected).-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, .icon { transition: none; } :host(.-pressed) .base, :host(.-resting) .base { transition: border-radius ${DesignToken$1.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]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .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]:not(:disabled):not([disabled-interactive])[toggle][selected]) .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-icon-button-extra-small-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-extra-small-outline-thickness, 1px); } :host([size="small"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-small-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-small-outline-thickness, 1px); } :host([size="medium"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-medium-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-medium-outline-thickness, 1px); } :host([size="large"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-large-outline-thickness, 2px)); outline-width: var(--m3e-icon-button-large-outline-thickness, 2px); } :host([size="extra-large"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-extra-large-outline-thickness, 3px)); outline-width: var(--m3e-icon-button-extra-large-outline-thickness, 3px); } } @media (prefers-reduced-motion) { :host(.-pressed) .base, :host(.-resting) .base, .base, .wrapper, .icon { transition: none; } }`;
14015
14144
 
14016
14145
  /**
14017
14146
  * Component design tokens that control the appearance variants of `M3eIconButtonElement`.
@@ -14021,396 +14150,396 @@ const IconButtonVariantToken = {
14021
14150
  /** Design tokens that control the `elevated` variant. */
14022
14151
  elevated: {
14023
14152
  /** Default icon color. */
14024
- iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-icon-color, ${DesignToken$1.color.primary})`),
14153
+ iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-icon-color, var(--m3e-icon-button-icon-color, ${DesignToken$1.color.primary}))`),
14025
14154
  /** Default container background color. */
14026
- containerColor: unsafeCSS(`var(--m3e-elevated-icon-button-container-color, ${DesignToken$1.color.surfaceContainerLow})`),
14155
+ containerColor: unsafeCSS(`var(--m3e-elevated-icon-button-container-color, var(--m3e-icon-button-container-color, ${DesignToken$1.color.surfaceContainerLow}))`),
14027
14156
  /** Resting elevation. */
14028
- containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-container-elevation, ${DesignToken$1.elevation.level1})`),
14157
+ containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-container-elevation, var(--m3e-icon-button-container-elevation, ${DesignToken$1.elevation.level1}))`),
14029
14158
  /** Unselected icon color. */
14030
- unselectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-unselected-icon-color, ${DesignToken$1.color.primary})`),
14159
+ unselectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-unselected-icon-color, var(--m3e-icon-button-unselected-icon-color, ${DesignToken$1.color.primary}))`),
14031
14160
  /** Unselected container background color. */
14032
- unselectedContainerColor: unsafeCSS(`var(--m3e-elevated-icon-button-unselected-container-color, ${DesignToken$1.color.surfaceContainerLow})`),
14161
+ unselectedContainerColor: unsafeCSS(`var(--m3e-elevated-icon-button-unselected-container-color, var(--m3e-icon-button-unselected-container-color, ${DesignToken$1.color.surfaceContainerLow}))`),
14033
14162
  /** Selected icon color. */
14034
- selectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-selected-icon-color, ${DesignToken$1.color.onPrimary})`),
14163
+ selectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-selected-icon-color, var(--m3e-icon-button-selected-icon-color, ${DesignToken$1.color.onPrimary}))`),
14035
14164
  /** Selected container background color. */
14036
- selectedContainerColor: unsafeCSS(`var(--m3e-elevated-icon-button-selected-container-color, ${DesignToken$1.color.primary})`),
14165
+ selectedContainerColor: unsafeCSS(`var(--m3e-elevated-icon-button-selected-container-color, var(--m3e-icon-button-selected-container-color, ${DesignToken$1.color.primary}))`),
14037
14166
  /** Design tokens that control disabled state. */
14038
14167
  disabled: {
14039
14168
  /** Container background color when disabled. */
14040
- containerColor: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-container-color, ${DesignToken$1.color.onSurface})`),
14169
+ containerColor: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-container-color, var(--m3e-icon-button-disabled-container-color, ${DesignToken$1.color.onSurface}))`),
14041
14170
  /** Opacity of container when disabled. */
14042
- containerOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-container-opacity, 10%)`),
14171
+ containerOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-container-opacity, var(--m3e-icon-button-disabled-container-opacity, 10%))`),
14043
14172
  /** Icon color when disabled. */
14044
- iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-icon-color, ${DesignToken$1.color.onSurface})`),
14173
+ iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-icon-color, var(--m3e-icon-button-disabled-icon-color, ${DesignToken$1.color.onSurface}))`),
14045
14174
  /** Icon opacity when disabled. */
14046
- iconOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-icon-opacity, 38%)`),
14175
+ iconOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-icon-opacity, var(--m3e-icon-button-disabled-icon-opacity, 38%))`),
14047
14176
  /** Elevation when disabled. */
14048
- containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-container-elevation, ${DesignToken$1.elevation.level0})`)
14177
+ containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-container-elevation, var(--m3e-icon-button-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`)
14049
14178
  },
14050
14179
  /** Design tokens that control hover state. */
14051
14180
  hover: {
14052
14181
  /** Icon color on hover. */
14053
- iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-icon-color, ${DesignToken$1.color.primary})`),
14182
+ iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-icon-color, var(--m3e-icon-button-hover-icon-color, ${DesignToken$1.color.primary}))`),
14054
14183
  /** State layer color on hover. */
14055
- stateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-state-layer-color, ${DesignToken$1.color.primary})`),
14184
+ stateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-state-layer-color, var(--m3e-icon-button-hover-state-layer-color, ${DesignToken$1.color.primary}))`),
14056
14185
  /** State layer opacity on hover. */
14057
- stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
14186
+ stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-hover-state-layer-opacity, var(--m3e-icon-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
14058
14187
  /** Elevation on hover. */
14059
- containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-hover-container-elevation, ${DesignToken$1.elevation.level2})`),
14188
+ containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-hover-container-elevation, var(--m3e-icon-button-hover-container-elevation, ${DesignToken$1.elevation.level2}))`),
14060
14189
  /** Unselected icon color on hover. */
14061
- unselectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-unselected-icon-color, ${DesignToken$1.color.primary})`),
14190
+ unselectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-unselected-icon-color, var(--m3e-icon-button-hover-unselected-icon-color, ${DesignToken$1.color.primary}))`),
14062
14191
  /** Unselected state layer color on hover. */
14063
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-unselected-state-layer-color, ${DesignToken$1.color.primary})`),
14192
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-unselected-state-layer-color, var(--m3e-icon-button-hover-unselected-state-layer-color, ${DesignToken$1.color.primary}))`),
14064
14193
  /** Selected icon color on hover. */
14065
- selectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-selected-icon-color, ${DesignToken$1.color.onPrimary})`),
14194
+ selectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-selected-icon-color, var(--m3e-icon-button-hover-selected-icon-color, ${DesignToken$1.color.onPrimary}))`),
14066
14195
  /** Selected ripple color on hover. */
14067
- selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-selected-state-layer-color, ${DesignToken$1.color.onPrimary})`)
14196
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-selected-state-layer-color, var(--m3e-icon-button-hover-selected-state-layer-color, ${DesignToken$1.color.onPrimary}))`)
14068
14197
  },
14069
14198
  /** Design tokens that control focus state. */
14070
14199
  focus: {
14071
14200
  /** Icon color on focus. */
14072
- iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-icon-color, ${DesignToken$1.color.primary})`),
14201
+ iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-icon-color, var(--m3e-icon-button-focus-icon-color, ${DesignToken$1.color.primary}))`),
14073
14202
  /** State layer color on focus. */
14074
- stateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-state-layer-color, ${DesignToken$1.color.primary})`),
14203
+ stateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-state-layer-color, var(--m3e-icon-button-focus-state-layer-color, ${DesignToken$1.color.primary}))`),
14075
14204
  /**State layer opacity on focus. */
14076
- stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
14205
+ stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-focus-state-layer-opacity, var(--m3e-icon-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
14077
14206
  /** Elevation on focus. */
14078
- containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-focus-container-elevation, ${DesignToken$1.elevation.level1})`),
14207
+ containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-focus-container-elevation, var(--m3e-icon-button-focus-container-elevation, ${DesignToken$1.elevation.level1}))`),
14079
14208
  /** Unselected icon color on focus. */
14080
- unselectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-unselected-icon-color, ${DesignToken$1.color.primary})`),
14209
+ unselectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-unselected-icon-color, var(--m3e-icon-button-focus-unselected-icon-color, ${DesignToken$1.color.primary}))`),
14081
14210
  /** Unselected ripple color on focus. */
14082
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-unselected-state-layer-color, ${DesignToken$1.color.primary})`),
14211
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-unselected-state-layer-color, var(--m3e-icon-button-focus-unselected-state-layer-color, ${DesignToken$1.color.primary}))`),
14083
14212
  /** Selected icon color on focus. */
14084
- selectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-selected-icon-color, ${DesignToken$1.color.onPrimary})`),
14213
+ selectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-selected-icon-color, var(--m3e-icon-button-focus-selected-icon-color, ${DesignToken$1.color.onPrimary}))`),
14085
14214
  /** Selected ripple color on focus. */
14086
- selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-selected-state-layer-color, ${DesignToken$1.color.onPrimary})`)
14215
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-selected-state-layer-color, var(--m3e-icon-button-focus-selected-state-layer-color, ${DesignToken$1.color.onPrimary}))`)
14087
14216
  },
14088
14217
  /** Design tokens that control pressed state. */
14089
14218
  pressed: {
14090
14219
  /** Icon color on pressed. */
14091
- iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-icon-color, ${DesignToken$1.color.primary})`),
14220
+ iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-icon-color, var(--m3e-icon-button-pressed-icon-color, ${DesignToken$1.color.primary}))`),
14092
14221
  /** State layer color on pressed. */
14093
- stateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-state-layer-color, ${DesignToken$1.color.primary})`),
14222
+ stateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-state-layer-color, var(--m3e-icon-button-pressed-state-layer-color, ${DesignToken$1.color.primary}))`),
14094
14223
  /** State layer opacity on pressed. */
14095
- stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
14224
+ stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-state-layer-opacity, var(--m3e-icon-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
14096
14225
  /** Elevation on pressed. */
14097
- containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-container-elevation, ${DesignToken$1.elevation.level1})`),
14226
+ containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-container-elevation, var(--m3e-icon-button-pressed-container-elevation, ${DesignToken$1.elevation.level1}))`),
14098
14227
  /** Unselected icon color on pressed. */
14099
- unselectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-unselected-icon-color, ${DesignToken$1.color.primary})`),
14228
+ unselectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-unselected-icon-color, var(--m3e-icon-button-pressed-unselected-icon-color, ${DesignToken$1.color.primary}))`),
14100
14229
  /** Unselected ripple color on pressed. */
14101
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.primary})`),
14230
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-unselected-state-layer-color, var(--m3e-icon-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.primary}))`),
14102
14231
  /** Selected icon color on pressed. */
14103
- selectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-selected-icon-color, ${DesignToken$1.color.onPrimary})`),
14232
+ selectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-selected-icon-color, var(--m3e-icon-button-pressed-selected-icon-color, ${DesignToken$1.color.onPrimary}))`),
14104
14233
  /** Selected ripple color on pressed. */
14105
- selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-selected-state-layer-color, ${DesignToken$1.color.onPrimary})`)
14234
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-selected-state-layer-color, var(--m3e-icon-button-pressed-selected-state-layer-color, ${DesignToken$1.color.onPrimary}))`)
14106
14235
  }
14107
14236
  },
14108
14237
  /** Design tokens that control the `outlined` variant. */
14109
14238
  outlined: {
14110
14239
  /** Default icon color. */
14111
- iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
14240
+ iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-icon-color, var(--m3e-icon-button-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
14112
14241
  /** Default outline color. */
14113
- outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-outline-color, ${DesignToken$1.color.outlineVariant})`),
14242
+ outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-outline-color, var(--m3e-icon-button-outline-color, ${DesignToken$1.color.outlineVariant}))`),
14114
14243
  /** Unselected icon color. */
14115
- unselectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
14244
+ unselectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-unselected-icon-color, var(--m3e-icon-button-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
14116
14245
  /** Selected icon color. */
14117
- selectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-selected-icon-color, ${DesignToken$1.color.inverseOnSurface})`),
14246
+ selectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-selected-icon-color, var(--m3e-icon-button-selected-icon-color, ${DesignToken$1.color.inverseOnSurface}))`),
14118
14247
  /** Selected container background color. */
14119
- selectedContainerColor: unsafeCSS(`var(--m3e-outlined-icon-button-selected-container-color, ${DesignToken$1.color.inverseSurface})`),
14248
+ selectedContainerColor: unsafeCSS(`var(--m3e-outlined-icon-button-selected-container-color, var(--m3e-icon-button-selected-container-color, ${DesignToken$1.color.inverseSurface}))`),
14120
14249
  /** Design tokens that control disabled state. */
14121
14250
  disabled: {
14122
14251
  /** Container background color when disabled. */
14123
- containerColor: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-container-color, ${DesignToken$1.color.onSurface})`),
14252
+ containerColor: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-container-color, var(--m3e-icon-button-disabled-container-color, ${DesignToken$1.color.onSurface}))`),
14124
14253
  /** Opacity of container when disabled. */
14125
- containerOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-container-opacity, 10%)`),
14254
+ containerOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-container-opacity, var(--m3e-icon-button-disabled-container-opacity, 10%))`),
14126
14255
  /** Icon color when disabled. */
14127
- iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-icon-color, ${DesignToken$1.color.onSurface})`),
14256
+ iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-icon-color, var(--m3e-icon-button-disabled-icon-color, ${DesignToken$1.color.onSurface}))`),
14128
14257
  /** Icon opacity when disabled. */
14129
- iconOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-icon-opacity, 38%)`),
14258
+ iconOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-icon-opacity, var(--m3e-icon-button-disabled-icon-opacity, 38%))`),
14130
14259
  /** Outline color when disabled. */
14131
- outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-outline-color, ${DesignToken$1.color.outlineVariant})`)
14260
+ outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-outline-color, var(--m3e-icon-button-disabled-outline-color, ${DesignToken$1.color.outlineVariant}))`)
14132
14261
  },
14133
14262
  /** Design tokens that control hover state. */
14134
14263
  hover: {
14135
14264
  /** Icon color on hover. */
14136
- iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
14265
+ iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-icon-color, var(--m3e-icon-button-hover-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
14137
14266
  /** Outline color on hover. */
14138
- outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-outline-color, ${DesignToken$1.color.outlineVariant})`),
14267
+ outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-outline-color, var(--m3e-icon-button-hover-outline-color, ${DesignToken$1.color.outlineVariant}))`),
14139
14268
  /** State layer color on hover. */
14140
- stateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
14269
+ stateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-state-layer-color, var(--m3e-icon-button-hover-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
14141
14270
  /** State layer opacity on hover. */
14142
- stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
14271
+ stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-hover-state-layer-opacity, var(--m3e-icon-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
14143
14272
  /** Unselected icon color on hover. */
14144
- unselectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
14273
+ unselectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-unselected-icon-color, var(--m3e-icon-button-hover-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
14145
14274
  /** Unselected state layer color on hover. */
14146
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
14275
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-unselected-state-layer-color, var(--m3e-icon-button-hover-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
14147
14276
  /** Selected icon color on hover. */
14148
- selectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-selected-icon-color, ${DesignToken$1.color.inverseOnSurface})`),
14277
+ selectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-selected-icon-color, var(--m3e-icon-button-hover-selected-icon-color, ${DesignToken$1.color.inverseOnSurface}))`),
14149
14278
  /** Selected state layer color on hover. */
14150
- selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-selected-state-layer-color, ${DesignToken$1.color.inverseOnSurface})`)
14279
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-selected-state-layer-color, var(--m3e-icon-button-hover-selected-state-layer-color, ${DesignToken$1.color.inverseOnSurface}))`)
14151
14280
  },
14152
14281
  /** Design tokens that control focus state. */
14153
14282
  focus: {
14154
14283
  /** Icon color on focus. */
14155
- iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
14284
+ iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-icon-color, var(--m3e-icon-button-focus-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
14156
14285
  /** Outline color on focus. */
14157
- outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-outline-color, ${DesignToken$1.color.outlineVariant})`),
14286
+ outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-outline-color, var(--m3e-icon-button-focus-outline-color, ${DesignToken$1.color.outlineVariant}))`),
14158
14287
  /** State layer color on focus. */
14159
- stateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
14288
+ stateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-state-layer-color, var(--m3e-icon-button-focus-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
14160
14289
  /**State layer opacity on focus. */
14161
- stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
14290
+ stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-focus-state-layer-opacity, var(--m3e-icon-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
14162
14291
  /** Unselected icon color on focus. */
14163
- unselectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
14292
+ unselectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-unselected-icon-color, var(--m3e-icon-button-focus-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
14164
14293
  /** Unselected state layer color on focus. */
14165
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
14294
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-unselected-state-layer-color, var(--m3e-icon-button-focus-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
14166
14295
  /** Selected icon color on focus. */
14167
- selectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-selected-icon-color, ${DesignToken$1.color.inverseOnSurface})`),
14296
+ selectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-selected-icon-color, var(--m3e-icon-button-focus-selected-icon-color, ${DesignToken$1.color.inverseOnSurface}))`),
14168
14297
  /** Selected state layer color on focus. */
14169
- selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-selected-state-layer-color, ${DesignToken$1.color.inverseOnSurface})`)
14298
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-selected-state-layer-color, var(--m3e-icon-button-focus-selected-state-layer-color, ${DesignToken$1.color.inverseOnSurface}))`)
14170
14299
  },
14171
14300
  /** Design tokens that control pressed state. */
14172
14301
  pressed: {
14173
14302
  /** Icon color on pressed. */
14174
- iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
14303
+ iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-icon-color, var(--m3e-icon-button-pressed-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
14175
14304
  /** Outline color on pressed. */
14176
- outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-outline-color, ${DesignToken$1.color.outlineVariant})`),
14305
+ outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-outline-color, var(--m3e-icon-button-pressed-outline-color, ${DesignToken$1.color.outlineVariant}))`),
14177
14306
  /** State layer color on pressed. */
14178
- stateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
14307
+ stateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-state-layer-color, var(--m3e-icon-button-pressed-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
14179
14308
  /** State layer opacity on pressed. */
14180
- stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
14309
+ stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-state-layer-opacity, var(--m3e-icon-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
14181
14310
  /** Unselected icon color on pressed. */
14182
- unselectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
14311
+ unselectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-unselected-icon-color, var(--m3e-icon-button-pressed-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
14183
14312
  /** Unselected state layer color on pressed. */
14184
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
14313
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-unselected-state-layer-color, var(--m3e-icon-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
14185
14314
  /** Selected icon color on pressed. */
14186
- selectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-selected-icon-color, ${DesignToken$1.color.inverseOnSurface})`),
14315
+ selectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-selected-icon-color, var(--m3e-icon-button-pressed-selected-icon-color, ${DesignToken$1.color.inverseOnSurface}))`),
14187
14316
  /** Selected state layer color on pressed. */
14188
- selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-selected-state-layer-color, ${DesignToken$1.color.inverseOnSurface})`)
14317
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-selected-state-layer-color, var(--m3e-icon-button-pressed-selected-state-layer-color, ${DesignToken$1.color.inverseOnSurface}))`)
14189
14318
  }
14190
14319
  },
14191
14320
  /** Design tokens that control the `filled` variant. */
14192
14321
  filled: {
14193
14322
  /** Default icon color. */
14194
- iconColor: unsafeCSS(`var(--m3e-filled-icon-button-icon-color, ${DesignToken$1.color.onPrimary})`),
14323
+ iconColor: unsafeCSS(`var(--m3e-filled-icon-button-icon-color, var(--m3e-icon-button-icon-color, ${DesignToken$1.color.onPrimary}))`),
14195
14324
  /** Default container background color. */
14196
- containerColor: unsafeCSS(`var(--m3e-filled-icon-button-container-color, ${DesignToken$1.color.primary})`),
14325
+ containerColor: unsafeCSS(`var(--m3e-filled-icon-button-container-color, var(--m3e-icon-button-container-color, ${DesignToken$1.color.primary}))`),
14197
14326
  /** Unselected icon color. */
14198
- unselectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
14327
+ unselectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-unselected-icon-color, var(--m3e-icon-button-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
14199
14328
  /** Unselected container background color. */
14200
- unselectedContainerColor: unsafeCSS(`var(--m3e-filled-icon-button-unselected-container-color, ${DesignToken$1.color.surfaceContainer})`),
14329
+ unselectedContainerColor: unsafeCSS(`var(--m3e-filled-icon-button-unselected-container-color, var(--m3e-icon-button-unselected-container-color, ${DesignToken$1.color.surfaceContainer}))`),
14201
14330
  /** Selected icon color. */
14202
- selectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-selected-icon-color, ${DesignToken$1.color.onPrimary})`),
14331
+ selectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-selected-icon-color, var(--m3e-icon-button-selected-icon-color, ${DesignToken$1.color.onPrimary}))`),
14203
14332
  /** Selected container background color. */
14204
- selectedContainerColor: unsafeCSS(`var(--m3e-filled-icon-button-selected-container-color, ${DesignToken$1.color.primary})`),
14333
+ selectedContainerColor: unsafeCSS(`var(--m3e-filled-icon-button-selected-container-color, var(--m3e-icon-button-selected-container-color, ${DesignToken$1.color.primary}))`),
14205
14334
  /** Design tokens that control disabled state. */
14206
14335
  disabled: {
14207
14336
  /** Container background color when disabled. */
14208
- containerColor: unsafeCSS(`var(--m3e-filled-icon-button-disabled-container-color, ${DesignToken$1.color.onSurface})`),
14337
+ containerColor: unsafeCSS(`var(--m3e-filled-icon-button-disabled-container-color, var(--m3e-icon-button-disabled-container-color, ${DesignToken$1.color.onSurface}))`),
14209
14338
  /** Opacity of container when disabled. */
14210
- containerOpacity: unsafeCSS(`var(--m3e-filled-icon-button-disabled-container-opacity, 10%)`),
14339
+ containerOpacity: unsafeCSS(`var(--m3e-filled-icon-button-disabled-container-opacity, var(--m3e-icon-button-disabled-container-opacity, 10%))`),
14211
14340
  /** Icon color when disabled. */
14212
- iconColor: unsafeCSS(`var(--m3e-filled-icon-button-disabled-icon-color, ${DesignToken$1.color.onSurface})`),
14341
+ iconColor: unsafeCSS(`var(--m3e-filled-icon-button-disabled-icon-color, var(--m3e-icon-button-disabled-icon-color, ${DesignToken$1.color.onSurface}))`),
14213
14342
  /** Icon opacity when disabled. */
14214
- iconOpacity: unsafeCSS(`var(--m3e-filled-icon-button-disabled-icon-opacity, 38%)`)
14343
+ iconOpacity: unsafeCSS(`var(--m3e-filled-icon-button-disabled-icon-opacity, var(--m3e-icon-button-disabled-icon-opacity, 38%))`)
14215
14344
  },
14216
14345
  /** Design tokens that control hover state. */
14217
14346
  hover: {
14218
14347
  /** Icon color on hover. */
14219
- iconColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-icon-color, ${DesignToken$1.color.onPrimary})`),
14348
+ iconColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-icon-color, var(--m3e-icon-button-hover-icon-color, ${DesignToken$1.color.onPrimary}))`),
14220
14349
  /** State layer color on hover. */
14221
- stateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-state-layer-color, ${DesignToken$1.color.onPrimary})`),
14350
+ stateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-state-layer-color, var(--m3e-icon-button-hover-state-layer-color, ${DesignToken$1.color.onPrimary}))`),
14222
14351
  /** State layer opacity on hover. */
14223
- stateLayerOpacity: unsafeCSS(`var(--m3e-filled-icon-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
14352
+ stateLayerOpacity: unsafeCSS(`var(--m3e-filled-icon-button-hover-state-layer-opacity, var(--m3e-icon-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
14224
14353
  /** Unselected icon color on hover. */
14225
- unselectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
14354
+ unselectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-unselected-icon-color, var(--m3e-icon-button-hover-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
14226
14355
  /** Unselected state layer color on hover. */
14227
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
14356
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-unselected-state-layer-color, var(--m3e-icon-button-hover-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
14228
14357
  /** Selected icon color on hover. */
14229
- selectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-selected-icon-color, ${DesignToken$1.color.onPrimary})`),
14358
+ selectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-selected-icon-color, var(--m3e-icon-button-hover-selected-icon-color, ${DesignToken$1.color.onPrimary}))`),
14230
14359
  /** Selected state layer color on hover. */
14231
- selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-selected-state-layer-color, ${DesignToken$1.color.onPrimary})`)
14360
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-selected-state-layer-color, var(--m3e-icon-button-hover-selected-state-layer-color, ${DesignToken$1.color.onPrimary}))`)
14232
14361
  },
14233
14362
  /** Design tokens that control focus state. */
14234
14363
  focus: {
14235
14364
  /** Icon color on focus. */
14236
- iconColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-icon-color, ${DesignToken$1.color.onPrimary})`),
14365
+ iconColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-icon-color, var(--m3e-icon-button-focus-icon-color, ${DesignToken$1.color.onPrimary}))`),
14237
14366
  /** State layer color on focus. */
14238
- stateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-state-layer-color, ${DesignToken$1.color.onPrimary})`),
14367
+ stateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-state-layer-color, var(--m3e-icon-button-focus-state-layer-color, ${DesignToken$1.color.onPrimary}))`),
14239
14368
  /**State layer opacity on focus. */
14240
- stateLayerOpacity: unsafeCSS(`var(--m3e-filled-icon-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
14369
+ stateLayerOpacity: unsafeCSS(`var(--m3e-filled-icon-button-focus-state-layer-opacity, var(--m3e-icon-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
14241
14370
  /** Unselected icon color on focus. */
14242
- unselectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
14371
+ unselectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-unselected-icon-color, var(--m3e-icon-button-focus-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
14243
14372
  /** Unselected state layer color on focus. */
14244
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
14373
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-unselected-state-layer-color, var(--m3e-icon-button-focus-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
14245
14374
  /** Selected icon color on focus. */
14246
- selectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-selected-icon-color, ${DesignToken$1.color.onPrimary})`),
14375
+ selectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-selected-icon-color, var(--m3e-icon-button-focus-selected-icon-color, ${DesignToken$1.color.onPrimary}))`),
14247
14376
  /** Selected state layer color on focus. */
14248
- selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-selected-state-layer-color, ${DesignToken$1.color.onPrimary})`)
14377
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-selected-state-layer-color, var(--m3e-icon-button-focus-selected-state-layer-color, ${DesignToken$1.color.onPrimary}))`)
14249
14378
  },
14250
14379
  /** Design tokens that control pressed state. */
14251
14380
  pressed: {
14252
14381
  /** Icon color on pressed. */
14253
- iconColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-icon-color, ${DesignToken$1.color.onPrimary})`),
14382
+ iconColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-icon-color, var(--m3e-icon-button-pressed-icon-color, ${DesignToken$1.color.onPrimary}))`),
14254
14383
  /** State layer color on pressed. */
14255
- stateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-state-layer-color, ${DesignToken$1.color.onPrimary})`),
14384
+ stateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-state-layer-color, var(--m3e-icon-button-pressed-state-layer-color, ${DesignToken$1.color.onPrimary}))`),
14256
14385
  /** State layer opacity on pressed. */
14257
- stateLayerOpacity: unsafeCSS(`var(--m3e-filled-icon-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
14386
+ stateLayerOpacity: unsafeCSS(`var(--m3e-filled-icon-button-pressed-state-layer-opacity, var(--m3e-icon-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
14258
14387
  /** Unselected icon color on pressed. */
14259
- unselectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
14388
+ unselectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-unselected-icon-color, var(--m3e-icon-button-pressed-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
14260
14389
  /** Unselected state layer color on pressed. */
14261
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
14390
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-unselected-state-layer-color, var(--m3e-icon-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
14262
14391
  /** Selected icon color on pressed. */
14263
- selectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-selected-icon-color, ${DesignToken$1.color.onPrimary})`),
14392
+ selectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-selected-icon-color, var(--m3e-icon-button-pressed-selected-icon-color, ${DesignToken$1.color.onPrimary}))`),
14264
14393
  /** Selected state layer color on pressed. */
14265
- selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-selected-state-layer-color, ${DesignToken$1.color.onPrimary})`)
14394
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-selected-state-layer-color, var(--m3e-icon-button-pressed-selected-state-layer-color, ${DesignToken$1.color.onPrimary}))`)
14266
14395
  }
14267
14396
  },
14268
14397
  /** Design tokens that control the `tonal` variant. */
14269
14398
  tonal: {
14270
14399
  /** Default icon color. */
14271
- iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
14400
+ iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-icon-color, var(--m3e-icon-button-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
14272
14401
  /** Default container background color. */
14273
- containerColor: unsafeCSS(`var(--m3e-tonal-icon-button-container-color, ${DesignToken$1.color.secondaryContainer})`),
14402
+ containerColor: unsafeCSS(`var(--m3e-tonal-icon-button-container-color, var(--m3e-icon-button-container-color, ${DesignToken$1.color.secondaryContainer}))`),
14274
14403
  /** Unselected icon color. */
14275
- unselectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-unselected-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
14404
+ unselectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-unselected-icon-color, var(--m3e-icon-button-unselected-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
14276
14405
  /** Unselected container background color. */
14277
- unselectedContainerColor: unsafeCSS(`var(--m3e-tonal-icon-button-unselected-container-color, ${DesignToken$1.color.secondaryContainer})`),
14406
+ unselectedContainerColor: unsafeCSS(`var(--m3e-tonal-icon-button-unselected-container-color, var(--m3e-icon-button-unselected-container-color, ${DesignToken$1.color.secondaryContainer}))`),
14278
14407
  /** Selected icon color. */
14279
- selectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-selected-icon-color, ${DesignToken$1.color.onSecondary})`),
14408
+ selectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-selected-icon-color, var(--m3e-icon-button-selected-icon-color, ${DesignToken$1.color.onSecondary}))`),
14280
14409
  /** Selected container background color. */
14281
- selectedContainerColor: unsafeCSS(`var(--m3e-tonal-icon-button-selected-container-color, ${DesignToken$1.color.secondary})`),
14410
+ selectedContainerColor: unsafeCSS(`var(--m3e-tonal-icon-button-selected-container-color, var(--m3e-icon-button-selected-container-color, ${DesignToken$1.color.secondary}))`),
14282
14411
  /** Design tokens that control disabled state. */
14283
14412
  disabled: {
14284
14413
  /** Container background color when disabled. */
14285
- containerColor: unsafeCSS(`var(--m3e-tonal-icon-button-disabled-container-color, ${DesignToken$1.color.onSurface})`),
14414
+ containerColor: unsafeCSS(`var(--m3e-tonal-icon-button-disabled-container-color, var(--m3e-icon-button-disabled-container-color, ${DesignToken$1.color.onSurface}))`),
14286
14415
  /** Opacity of container when disabled. */
14287
- containerOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-disabled-container-opacity, 10%)`),
14416
+ containerOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-disabled-container-opacity, var(--m3e-icon-button-disabled-container-opacity, 10%))`),
14288
14417
  /** Icon color when disabled. */
14289
- iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-disabled-icon-color, ${DesignToken$1.color.onSurface})`),
14418
+ iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-disabled-icon-color, var(--m3e-icon-button-disabled-icon-color, ${DesignToken$1.color.onSurface}))`),
14290
14419
  /** Icon opacity when disabled. */
14291
- iconOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-disabled-icon-opacity, 38%)`)
14420
+ iconOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-disabled-icon-opacity, var(--m3e-icon-button-disabled-icon-opacity, 38%))`)
14292
14421
  },
14293
14422
  /** Design tokens that control hover state. */
14294
14423
  hover: {
14295
14424
  /** Icon color on hover. */
14296
- iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
14425
+ iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-icon-color, var(--m3e-icon-button-hover-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
14297
14426
  /** State layer color on hover. */
14298
- stateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-state-layer-color, ${DesignToken$1.color.onSecondaryContainer})`),
14427
+ stateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-state-layer-color, var(--m3e-icon-button-hover-state-layer-color, ${DesignToken$1.color.onSecondaryContainer}))`),
14299
14428
  /** State layer opacity on hover. */
14300
- stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
14429
+ stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-hover-state-layer-opacity, var(--m3e-icon-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
14301
14430
  /** Unselected icon color on hover. */
14302
- unselectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-unselected-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
14431
+ unselectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-unselected-icon-color, var(--m3e-icon-button-hover-unselected-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
14303
14432
  /** Unselected state layer color on hover. */
14304
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-unselected-state-layer-color, ${DesignToken$1.color.onSecondaryContainer})`),
14433
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-unselected-state-layer-color, var(--m3e-icon-button-hover-unselected-state-layer-color, ${DesignToken$1.color.onSecondaryContainer}))`),
14305
14434
  /** Selected icon color on hover. */
14306
- selectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-selected-icon-color, ${DesignToken$1.color.onSecondary})`),
14435
+ selectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-selected-icon-color, var(--m3e-icon-button-hover-selected-icon-color, ${DesignToken$1.color.onSecondary}))`),
14307
14436
  /** Selected state layer color on hover. */
14308
- selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-selected-state-layer-color, ${DesignToken$1.color.onSecondary})`)
14437
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-selected-state-layer-color, var(--m3e-icon-button-hover-selected-state-layer-color, ${DesignToken$1.color.onSecondary}))`)
14309
14438
  },
14310
14439
  /** Design tokens that control focus state. */
14311
14440
  focus: {
14312
14441
  /** Icon color on focus. */
14313
- iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
14442
+ iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-icon-color, var(--m3e-icon-button-focus-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
14314
14443
  /** State layer color on focus. */
14315
- stateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-state-layer-color, ${DesignToken$1.color.onSecondaryContainer})`),
14444
+ stateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-state-layer-color, var(--m3e-icon-button-focus-state-layer-color, ${DesignToken$1.color.onSecondaryContainer}))`),
14316
14445
  /**State layer opacity on focus. */
14317
- stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
14446
+ stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-focus-state-layer-opacity, var(--m3e-icon-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
14318
14447
  /** Unselected icon color on focus. */
14319
- unselectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-unselected-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
14448
+ unselectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-unselected-icon-color, var(--m3e-icon-button-focus-unselected-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
14320
14449
  /** Unselected state layer color on focus. */
14321
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-unselected-state-layer-color, ${DesignToken$1.color.onSecondaryContainer})`),
14450
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-unselected-state-layer-color, var(--m3e-icon-button-focus-unselected-state-layer-color, ${DesignToken$1.color.onSecondaryContainer}))`),
14322
14451
  /** Selected icon color on focus. */
14323
- selectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-selected-icon-color, ${DesignToken$1.color.onSecondary})`),
14452
+ selectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-selected-icon-color, var(--m3e-icon-button-focus-selected-icon-color, ${DesignToken$1.color.onSecondary}))`),
14324
14453
  /** Selected state layer color on focus. */
14325
- selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-selected-state-layer-color, ${DesignToken$1.color.onSecondary})`)
14454
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-selected-state-layer-color, var(--m3e-icon-button-focus-selected-state-layer-color, ${DesignToken$1.color.onSecondary}))`)
14326
14455
  },
14327
14456
  /** Design tokens that control pressed state. */
14328
14457
  pressed: {
14329
14458
  /** Icon color on pressed. */
14330
- iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
14459
+ iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-icon-color, var(--m3e-icon-button-pressed-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
14331
14460
  /** State layer color on pressed. */
14332
- stateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-state-layer-color, ${DesignToken$1.color.onSecondaryContainer})`),
14461
+ stateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-state-layer-color, var(--m3e-icon-button-pressed-state-layer-color, ${DesignToken$1.color.onSecondaryContainer}))`),
14333
14462
  /** State layer opacity on pressed. */
14334
- stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
14463
+ stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-state-layer-opacity, var(--m3e-icon-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
14335
14464
  /** Unselected icon color on pressed. */
14336
- unselectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-unselected-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
14465
+ unselectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-unselected-icon-color, var(--m3e-icon-button-pressed-unselected-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
14337
14466
  /** Unselected state layer color on pressed. */
14338
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.onSecondaryContainer})`),
14467
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-unselected-state-layer-color, var(--m3e-icon-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.onSecondaryContainer}))`),
14339
14468
  /** Selected icon color on pressed. */
14340
- selectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-selected-icon-color, ${DesignToken$1.color.onSecondary})`),
14469
+ selectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-selected-icon-color, var(--m3e-icon-button-pressed-selected-icon-color, ${DesignToken$1.color.onSecondary}))`),
14341
14470
  /** Selected state layer color on pressed. */
14342
- selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-selected-state-layer-color, ${DesignToken$1.color.onSecondary})`)
14471
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-selected-state-layer-color, var(--m3e-icon-button-pressed-selected-state-layer-color, ${DesignToken$1.color.onSecondary}))`)
14343
14472
  }
14344
14473
  },
14345
14474
  /** Design tokens that control the `standard` variant. */
14346
14475
  standard: {
14347
14476
  /** Default icon color. */
14348
- iconColor: unsafeCSS(`var(--m3e-standard-icon-button-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
14477
+ iconColor: unsafeCSS(`var(--m3e-standard-icon-button-icon-color, var(--m3e-icon-button-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
14349
14478
  /** Unselected icon color. */
14350
- unselectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
14479
+ unselectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-unselected-icon-color, var(--m3e-icon-button-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
14351
14480
  /** Selected icon color. */
14352
- selectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-selected-icon-color, ${DesignToken$1.color.primary})`),
14481
+ selectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-selected-icon-color, var(--m3e-icon-button-selected-icon-color, ${DesignToken$1.color.primary}))`),
14353
14482
  /** Design tokens that control disabled state. */
14354
14483
  disabled: {
14355
14484
  /** Container background color when disabled. */
14356
- containerColor: unsafeCSS(`var(--m3e-standard-icon-button-disabled-container-color, transparent)`),
14485
+ containerColor: unsafeCSS(`var(--m3e-standard-icon-button-disabled-container-color, var(--m3e-icon-button-disabled-container-color, transparent))`),
14357
14486
  /** Opacity of container when disabled. */
14358
- containerOpacity: unsafeCSS(`var(--m3e-standard-icon-button-disabled-container-opacity, 10%)`),
14487
+ containerOpacity: unsafeCSS(`var(--m3e-standard-icon-button-disabled-container-opacity, var(--m3e-icon-button-disabled-container-opacity, 10%))`),
14359
14488
  /** Icon color when disabled. */
14360
- iconColor: unsafeCSS(`var(--m3e-standard-icon-button-disabled-icon-color, ${DesignToken$1.color.onSurface})`),
14489
+ iconColor: unsafeCSS(`var(--m3e-standard-icon-button-disabled-icon-color, var(--m3e-icon-button-disabled-icon-color, ${DesignToken$1.color.onSurface}))`),
14361
14490
  /** Icon opacity when disabled. */
14362
- iconOpacity: unsafeCSS(`var(--m3e-standard-icon-button-disabled-icon-opacity, 38%)`)
14491
+ iconOpacity: unsafeCSS(`var(--m3e-standard-icon-button-disabled-icon-opacity, var(--m3e-icon-button-disabled-icon-opacity, 38%))`)
14363
14492
  },
14364
14493
  /** Design tokens that control hover state. */
14365
14494
  hover: {
14366
14495
  /** Icon color on hover. */
14367
- iconColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
14496
+ iconColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-icon-color, var(--m3e-icon-button-hover-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
14368
14497
  /** State layer color on hover. */
14369
- stateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
14498
+ stateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-state-layer-color, var(--m3e-icon-button-hover-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
14370
14499
  /** State layer opacity on hover. */
14371
- stateLayerOpacity: unsafeCSS(`var(--m3e-standard-icon-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
14500
+ stateLayerOpacity: unsafeCSS(`var(--m3e-standard-icon-button-hover-state-layer-opacity, var(--m3e-icon-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
14372
14501
  /** Unselected icon color on hover. */
14373
- unselectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
14502
+ unselectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-unselected-icon-color, var(--m3e-icon-button-hover-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
14374
14503
  /** Unselected state layer color on hover. */
14375
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
14504
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-unselected-state-layer-color, var(--m3e-icon-button-hover-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
14376
14505
  /** Selected icon color on hover. */
14377
- selectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-selected-icon-color, ${DesignToken$1.color.primary})`),
14506
+ selectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-selected-icon-color, var(--m3e-icon-button-hover-selected-icon-color, ${DesignToken$1.color.primary}))`),
14378
14507
  /** Selected state layer color on hover. */
14379
- selectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-selected-state-layer-color, ${DesignToken$1.color.primary})`)
14508
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-selected-state-layer-color, var(--m3e-icon-button-hover-selected-state-layer-color, ${DesignToken$1.color.primary}))`)
14380
14509
  },
14381
14510
  /** Design tokens that control focus state. */
14382
14511
  focus: {
14383
14512
  /** Icon color on focus. */
14384
- iconColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
14513
+ iconColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-icon-color, var(--m3e-icon-button-focus-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
14385
14514
  /** State layer color on focus. */
14386
- stateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
14515
+ stateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-state-layer-color, var(--m3e-icon-button-focus-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
14387
14516
  /**State layer opacity on focus. */
14388
- stateLayerOpacity: unsafeCSS(`var(--m3e-standard-icon-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
14517
+ stateLayerOpacity: unsafeCSS(`var(--m3e-standard-icon-button-focus-state-layer-opacity, var(--m3e-icon-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
14389
14518
  /** Unselected icon color on focus. */
14390
- unselectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
14519
+ unselectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-unselected-icon-color, var(--m3e-icon-button-focus-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
14391
14520
  /** Unselected state layer color on focus. */
14392
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
14521
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-unselected-state-layer-color, var(--m3e-icon-button-focus-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
14393
14522
  /** Selected icon color on focus. */
14394
- selectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-selected-icon-color, ${DesignToken$1.color.primary})`),
14523
+ selectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-selected-icon-color, var(--m3e-icon-button-focus-selected-icon-color, ${DesignToken$1.color.primary}))`),
14395
14524
  /** Selected state layer color on focus. */
14396
- selectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-selected-state-layer-color, ${DesignToken$1.color.primary})`)
14525
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-selected-state-layer-color, var(--m3e-icon-button-focus-selected-state-layer-color, ${DesignToken$1.color.primary}))`)
14397
14526
  },
14398
14527
  /** Design tokens that control pressed state. */
14399
14528
  pressed: {
14400
14529
  /** Icon color on pressed. */
14401
- iconColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
14530
+ iconColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-icon-color, var(--m3e-icon-button-pressed-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
14402
14531
  /** State layer color on pressed. */
14403
- stateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
14532
+ stateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-state-layer-color, var(--m3e-icon-button-pressed-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
14404
14533
  /** State layer opacity on pressed. */
14405
- stateLayerOpacity: unsafeCSS(`var(--m3e-standard-icon-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
14534
+ stateLayerOpacity: unsafeCSS(`var(--m3e-standard-icon-button-pressed-state-layer-opacity, var(--m3e-icon-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
14406
14535
  /** Unselected icon color on pressed. */
14407
- unselectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
14536
+ unselectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-unselected-icon-color, var(--m3e-icon-button-pressed-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
14408
14537
  /** Unselected state layer color on pressed. */
14409
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
14538
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-unselected-state-layer-color, var(--m3e-icon-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
14410
14539
  /** Selected icon color on pressed. */
14411
- selectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-selected-icon-color, ${DesignToken$1.color.primary})`),
14540
+ selectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-selected-icon-color, var(--m3e-icon-button-pressed-selected-icon-color, ${DesignToken$1.color.primary}))`),
14412
14541
  /** Selected state layer color on pressed. */
14413
- selectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-selected-state-layer-color, ${DesignToken$1.color.primary})`)
14542
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-selected-state-layer-color, var(--m3e-icon-button-pressed-selected-state-layer-color, ${DesignToken$1.color.primary}))`)
14414
14543
  }
14415
14544
  }
14416
14545
  };
@@ -14423,7 +14552,7 @@ function iconButtonVariantStyle(variant) {
14423
14552
  * Appearance variant styles for `M3eIconButtonElement`.
14424
14553
  * @internal
14425
14554
  */
14426
- const IconButtonVariantStyle = [iconButtonVariantStyle("standard"), iconButtonVariantStyle("outlined"), iconButtonVariantStyle("filled"), iconButtonVariantStyle("tonal"), iconButtonVariantStyle("elevated"), css`:host([variant="outlined"]) .base { outline-style: solid; }`];
14555
+ const IconButtonVariantStyle = [iconButtonVariantStyle("standard"), iconButtonVariantStyle("outlined"), iconButtonVariantStyle("filled"), iconButtonVariantStyle("tonal"), iconButtonVariantStyle("elevated"), css`:host([variant="outlined"]:not([toggle][selected]):not(:disabled):not([disabled-interactive])) .base { outline-style: solid; }`];
14427
14556
 
14428
14557
  var _M3eIconButtonElement_instances, _M3eIconButtonElement_clickHandler, _M3eIconButtonElement_updateButtonShape, _M3eIconButtonElement_handlePressedChange, _M3eIconButtonElement_handleClick, _M3eIconButtonElement_handleSelectedIconSlotChange;
14429
14558
  /**
@@ -14479,6 +14608,20 @@ var _M3eIconButtonElement_instances, _M3eIconButtonElement_clickHandler, _M3eIco
14479
14608
  * @fires change - Dispatched when a toggle button's selected state changes.
14480
14609
  * @fires click - Emitted when the element is clicked.
14481
14610
  *
14611
+ * @cssprop --m3e-icon-button-container-height - Height of the container for all size variants.
14612
+ * @cssprop --m3e-icon-button-outline-thickness - Outline thickness for all size variants.
14613
+ * @cssprop --m3e-icon-button-icon-size - Icon size for all size variants.
14614
+ * @cssprop --m3e-icon-button-shape-round - Corner radius for all round size variants.
14615
+ * @cssprop --m3e-icon-button-shape-square - Corner radius for all square size variants.
14616
+ * @cssprop --m3e-icon-button-selected-shape-round - Corner radius for all selected round size variants.
14617
+ * @cssprop --m3e-icon-button-selected-shape-square - Corner radius for all selected square size variants.
14618
+ * @cssprop --m3e-icon-button-shape-pressed-morph - Corner radius for all pressed size variants.
14619
+ * @cssprop --m3e-icon-button-narrow-leading-space - Leading space for all size variants (narrow).
14620
+ * @cssprop --m3e-icon-button-narrow-trailing-space - Trailing space for all size variants (narrow).
14621
+ * @cssprop --m3e-icon-button-default-leading-space - Leading space for all size variants (default).
14622
+ * @cssprop --m3e-icon-button-default-trailing-space - Trailing space for all size variants (default).
14623
+ * @cssprop --m3e-icon-button-wide-leading-space - Leading space for all size variants (wide).
14624
+ * @cssprop --m3e-icon-button-wide-trailing-space - Trailing space for all size variants (wide).
14482
14625
  * @cssprop --m3e-icon-button-extra-small-container-height - Height of the extra-small container.
14483
14626
  * @cssprop --m3e-icon-button-extra-small-outline-thickness - Outline thickness for extra-small.
14484
14627
  * @cssprop --m3e-icon-button-extra-small-icon-size - Icon size for extra-small.
@@ -14549,6 +14692,48 @@ var _M3eIconButtonElement_instances, _M3eIconButtonElement_clickHandler, _M3eIco
14549
14692
  * @cssprop --m3e-icon-button-extra-large-default-trailing-space - Trailing space for extra-large (default).
14550
14693
  * @cssprop --m3e-icon-button-extra-large-wide-leading-space - Leading space for extra-large (wide).
14551
14694
  * @cssprop --m3e-icon-button-extra-large-wide-trailing-space - Trailing space for extra-large (wide).
14695
+ * @cssprop --m3e-icon-button-outline-color - Default outline color for all variants.
14696
+ * @cssprop --m3e-icon-button-disabled-outline-color - Outline color when disabled (all variants).
14697
+ * @cssprop --m3e-icon-button-hover-outline-color - Outline color on hover (all variants).
14698
+ * @cssprop --m3e-icon-button-focus-outline-color - Outline color on focus (all variants).
14699
+ * @cssprop --m3e-icon-button-pressed-outline-color - Outline color on pressed (all variants).
14700
+ * @cssprop --m3e-icon-button-container-color - Default container background color for all variants.
14701
+ * @cssprop --m3e-icon-button-unselected-container-color - Unselected container background color for all variants.
14702
+ * @cssprop --m3e-icon-button-selected-container-color - Selected container background color for all variants.
14703
+ * @cssprop --m3e-icon-button-icon-color - Default icon color for tonal variant.
14704
+ * @cssprop --m3e-icon-button-container-color - Default container background color for tonal variant.
14705
+ * @cssprop --m3e-icon-button-unselected-icon-color - Unselected icon color for tonal variant.
14706
+ * @cssprop --m3e-icon-button-unselected-container-color - Unselected container background color for tonal variant.
14707
+ * @cssprop --m3e-icon-button-selected-icon-color - Selected icon color for tonal variant.
14708
+ * @cssprop --m3e-icon-button-selected-container-color - Selected container background color for tonal variant.
14709
+ * @cssprop --m3e-icon-button-icon-color - Default icon color for all variants.
14710
+ * @cssprop --m3e-icon-button-unselected-icon-color - Unselected icon color for all variants.
14711
+ * @cssprop --m3e-icon-button-selected-icon-color - Selected icon color for all variants.
14712
+ * @cssprop --m3e-icon-button-disabled-container-color - Container background color when disabled (all variants).
14713
+ * @cssprop --m3e-icon-button-disabled-container-opacity - Opacity of container when disabled (all variants).
14714
+ * @cssprop --m3e-icon-button-disabled-icon-color - Icon color when disabled (all variants).
14715
+ * @cssprop --m3e-icon-button-disabled-icon-opacity - Icon opacity when disabled (all variants).
14716
+ * @cssprop --m3e-icon-button-hover-icon-color - Icon color on hover (all variants).
14717
+ * @cssprop --m3e-icon-button-hover-state-layer-color - State layer color on hover (all variants).
14718
+ * @cssprop --m3e-icon-button-hover-state-layer-opacity - State layer opacity on hover (all variants).
14719
+ * @cssprop --m3e-icon-button-hover-unselected-icon-color - Unselected icon color on hover (all variants).
14720
+ * @cssprop --m3e-icon-button-hover-unselected-state-layer-color - Unselected state layer color on hover (all variants).
14721
+ * @cssprop --m3e-icon-button-hover-selected-icon-color - Selected icon color on hover (all variants).
14722
+ * @cssprop --m3e-icon-button-hover-selected-state-layer-color - Selected state layer color on hover (all variants).
14723
+ * @cssprop --m3e-icon-button-focus-icon-color - Icon color on focus (all variants).
14724
+ * @cssprop --m3e-icon-button-focus-state-layer-color - State layer color on focus (all variants).
14725
+ * @cssprop --m3e-icon-button-focus-state-layer-opacity - State layer opacity on focus (all variants).
14726
+ * @cssprop --m3e-icon-button-focus-unselected-icon-color - Unselected icon color on focus (all variants).
14727
+ * @cssprop --m3e-icon-button-focus-unselected-state-layer-color - Unselected state layer color on focus (all variants).
14728
+ * @cssprop --m3e-icon-button-focus-selected-icon-color - Selected icon color on focus (all variants).
14729
+ * @cssprop --m3e-icon-button-focus-selected-state-layer-color - Selected state layer color on focus (all variants).
14730
+ * @cssprop --m3e-icon-button-pressed-icon-color - Icon color on pressed (all variants).
14731
+ * @cssprop --m3e-icon-button-pressed-state-layer-color - State layer color on pressed (all variants).
14732
+ * @cssprop --m3e-icon-button-pressed-state-layer-opacity - State layer opacity on pressed (all variants).
14733
+ * @cssprop --m3e-icon-button-pressed-unselected-icon-color - Unselected icon color on pressed (all variants).
14734
+ * @cssprop --m3e-icon-button-pressed-unselected-state-layer-color - Unselected state layer color on pressed (all variants).
14735
+ * @cssprop --m3e-icon-button-pressed-selected-icon-color - Selected icon color on pressed (all variants).
14736
+ * @cssprop --m3e-icon-button-pressed-selected-state-layer-color - Selected state layer color on pressed (all variants).
14552
14737
  * @cssprop --m3e-outlined-icon-button-icon-color - Default icon color for outlined variant.
14553
14738
  * @cssprop --m3e-outlined-icon-button-outline-color - Default outline color for outlined variant.
14554
14739
  * @cssprop --m3e-outlined-icon-button-unselected-icon-color - Unselected icon color for outlined variant.
@@ -15048,7 +15233,7 @@ _M3eListItemElement_getSlotContentType = function _M3eListItemElement_getSlotCon
15048
15233
  return elements.length > 0 ? "text" : undefined;
15049
15234
  };
15050
15235
  /** The styles of the element. */
15051
- M3eListItemElement.styles = css`:host { display: block; } .base { display: flex; min-height: inherit; width: 100%; box-sizing: border-box; column-gap: var(--m3e-list-item-between-space, 1rem); padding-inline-start: var(--m3e-list-item-leading-space, 1rem); padding-inline-end: var(--m3e-list-item-trailing-space, 1rem); border-top-left-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-container-shape, ${DesignToken$1.shape.corner.none}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-container-shape, ${DesignToken$1.shape.corner.none}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-container-shape, ${DesignToken$1.shape.corner.none}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-container-shape, ${DesignToken$1.shape.corner.none}) ); transition: ${unsafeCSS(`border-radius ${DesignToken$1.motion.spring.fastEffects}, background-color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } :host(.-one-line) { min-height: calc(var(--m3e-list-item-one-line-height, 3.5rem) + ${DesignToken$1.density.calc(-3)}); } :host(.-one-line) .base { padding-block-start: var(--m3e-list-item-one-line-top-space, 0.5rem); padding-block-end: var(--m3e-list-item-one-line-bottom-space, 0.5rem); } :host(.-two-line) { min-height: calc(var(--m3e-list-item-two-line-height, 4.5rem) + ${DesignToken$1.density.calc(-3)}); } :host(.-two-line) .base { padding-block-start: var(--m3e-list-item-two-line-top-space, 0.5rem); padding-block-end: var(--m3e-list-item-two-line-bottom-space, 0.5rem); } :host(.-three-line) { min-height: calc(var(--m3e-list-item-three-line-height, 5.5rem) + ${DesignToken$1.density.calc(-3)}); } :host(.-three-line) .base { padding-block-start: var(--m3e-list-item-three-line-top-space, 0.75rem); padding-block-end: var(--m3e-list-item-three-line-bottom-space, 0.75rem); } :host(:not(.-three-line)) .base { align-items: center; } :host(.-three-line) .base { align-items: flex-start; } :host(:not(:disabled):not([selected]:not(:hover)):focus-visible) .base { border-top-left-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken$1.shape.corner.large}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken$1.shape.corner.large}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken$1.shape.corner.large}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken$1.shape.corner.large}) ); } :host(:not(:disabled):not([selected]):hover) .base { border-top-left-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken$1.shape.corner.medium}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken$1.shape.corner.medium}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken$1.shape.corner.medium}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken$1.shape.corner.medium}) ); } .content { flex: 1 1 auto; display: flex; flex-direction: column; align-items: unset; justify-content: unset; } ::slotted([slot="overline"]) { font-size: var(--m3e-list-item-overline-font-size, ${DesignToken$1.typescale.standard.label.small.fontSize}); font-weight: var(--m3e-list-item-overline-font-weight, ${DesignToken$1.typescale.standard.label.small.fontWeight}); line-height: var(--m3e-list-item-overline-line-height, ${DesignToken$1.typescale.standard.label.small.lineHeight}); letter-spacing: var(--m3e-list-item-overline-tracking, ${DesignToken$1.typescale.standard.label.small.tracking}); } ::slotted([slot="supporting-text"]) { font-size: var(--m3e-list-item-supporting-text-font-size, ${DesignToken$1.typescale.standard.body.medium.fontSize}); font-weight: var( --m3e-list-item-supporting-text-font-weight, ${DesignToken$1.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-list-item-supporting-text-line-height, ${DesignToken$1.typescale.standard.body.medium.lineHeight} ); letter-spacing: var( --m3e-list-item-supporting-text-tracking, ${DesignToken$1.typescale.standard.body.medium.tracking} ); } ::slotted(:not([slot])) { font-size: var(--m3e-list-item-font-size, ${DesignToken$1.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-list-item-font-weight, ${DesignToken$1.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-list-item-line-height, ${DesignToken$1.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-list-item-tracking, ${DesignToken$1.typescale.standard.body.large.tracking}); } :host(.-has-leading) slot[name="leading"], :host(.-has-trailing) slot[name="trailing"] { display: flex; justify-content: center; } :host(:not(.-has-leading)) slot[name="leading"] { display: var(--_list-item-leading-reserved-display, contents); } :host(:not(.-has-trailing)) slot[name="trailing"] { display: var(--_list-item-trailing-reserved-display, contents); } slot[name="leading"] { min-width: var(--_list-item-leading-reserved-space, 0px); margin-inline-start: calc(0px - var(--_list-item-leading-reserved-outset, 0px)); } slot[name="trailing"] { min-width: var(--_list-item-trailing-reserved-space, 0px); margin-inline-end: calc(0px - var(--_list-item-trailing-reserved-outset, 0px)); } ::slotted(span[slot="trailing"]), ::slotted([slot="trailing-supporting-text"]) { white-space: nowrap; font-size: var(--m3e-list-item-trailing-text-font-size, ${DesignToken$1.typescale.standard.label.small.fontSize}); font-weight: var( --m3e-list-item-trailing-text-font-weight, ${DesignToken$1.typescale.standard.label.small.fontWeight} ); line-height: var( --m3e-list-item-trailing-text-line-height, ${DesignToken$1.typescale.standard.label.small.lineHeight} ); letter-spacing: var( --m3e-list-item-trailing-text-tracking, ${DesignToken$1.typescale.standard.label.small.tracking} ); } ::slotted(video[slot="leading"]), ::slotted(video[slot="trailing"]), ::slotted(img[slot="leading"]), ::slotted(img[slot="trailing"]) { display: block; margin: 0 auto; overflow: hidden; object-fit: cover; } ::slotted(video) { width: var(--m3e-list-item-video-width, 6.25rem); height: var(--m3e-list-item-video-height, 3.5rem); } ::slotted(video[slot="leading"]), ::slotted(video[slot="trailing"]) { border-radius: var(--m3e-list-item-video-shape, ${DesignToken$1.shape.corner.none}); } ::slotted(video[slot="leading"]) { margin-inline-start: calc(0px - var(--_list-item-leading-video-outset, 0px)); } ::slotted(video[slot="trailing"]) { margin-inline-end: calc(0px - var(--_list-item-trailing-video-outset, 0px)); } ::slotted(img) { user-drag: none; user-select: none; pointer-events: none; width: var(--m3e-list-item-image-width, 3.5rem); height: var(--m3e-list-item-image-height, 3.5rem); } ::slotted(img[slot="leading"]), ::slotted(img[slot="trailing"]) { border-radius: var(--m3e-list-item-image-shape, ${DesignToken$1.shape.corner.none}); } ::slotted(m3e-icon[slot="leading"]), ::slotted(m3e-icon[slot="leading-icon"]), ::slotted(m3e-icon[slot="trailing"]), ::slotted(m3e-icon[slot="trailing-icon"]) { --m3e-icon-size: var(--m3e-list-item-icon-size, 1.5rem); } :host(:not(:disabled)) ::slotted(m3e-icon[slot="leading"]), :host(:not(:disabled)) ::slotted(m3e-icon[slot="leading-icon"]) { color: var(--m3e-list-item-leading-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not(:disabled)) .content { color: var(--m3e-list-item-label-text-color, ${DesignToken$1.color.onSurface}); } :host(:not(:disabled)) ::slotted([slot="overline"]) { color: var(--m3e-list-item-overline-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not(:disabled)) ::slotted([slot="supporting-text"]) { color: var(--m3e-list-item-supporting-text-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not(:disabled)) ::slotted([slot="trailing"]), :host(:not(:disabled)) ::slotted([slot="trailing-supporting-text"]), :host(:not(:disabled)) ::slotted([slot="trailing-icon"]) { color: var(--m3e-list-item-trailing-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not(:disabled)) .base { background-color: var(--_list-item-container-color, var(--m3e-list-item-container-color, transparent)); } :host(:disabled) .base { background-color: var(--m3e-list-item-disabled-container-color, transparent); } :host(:disabled) ::slotted(video), :host(:disabled) ::slotted(img), :host(:disabled) ::slotted(m3e-avatar) { opacity: var(--m3e-list-item-disabled-media-opacity, 38%); } :host(:disabled) .content { color: color-mix( in srgb, var(--m3e-list-item-disabled-label-text-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="overline"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-overline-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-overline-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="supporting-text"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-supporting-text-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-supporting-text-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="leading"]), :host(:disabled) ::slotted([slot="leading-icon"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-leading-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-leading-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="trailing"]), :host(:disabled) ::slotted([slot="trailing-supporting-text"]), :host(:disabled) ::slotted([slot="trailing-icon"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-trailing-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-trailing-opacity, 38%), transparent ); } :host(:not(:disabled)) .state-layer { --m3e-state-layer-hover-color: var(--m3e-list-item-hover-state-layer-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-hover-opacity: var( --m3e-list-item-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity} ); --m3e-state-layer-focus-color: var(--m3e-list-item-focus-state-layer-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-focus-opacity: var( --m3e-list-item-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity} ); } :host(:not(:disabled)) .ripple { --m3e-ripple-color: var(--m3e-list-item-pressed-state-layer-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-opacity: var( --m3e-list-item-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity} ); } @media (forced-colors: active) { :host(:disabled) ::slotted([slot="leading"]), :host(:disabled) ::slotted([slot="leading-icon"]), :host(:disabled) .content, :host(:disabled) ::slotted([slot="overline"]), :host(:disabled) ::slotted([slot="supporting-text"]), :host(:disabled) ::slotted([slot="trailing"]), :host(:disabled) ::slotted([slot="trailing-supporting-text"]), :host(:disabled) ::slotted([slot="trailing-icon"]) { color: GrayText; } } @media (prefers-reduced-motion) { .base { transition: none; } }`;
15236
+ M3eListItemElement.styles = css`:host { display: block; } .base { display: flex; min-height: inherit; width: 100%; box-sizing: border-box; column-gap: var(--m3e-list-item-between-space, 1rem); padding-inline-start: var(--m3e-list-item-leading-space, 1rem); padding-inline-end: var(--m3e-list-item-trailing-space, 1rem); border-top-left-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-container-shape, ${DesignToken$1.shape.corner.none}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-container-shape, ${DesignToken$1.shape.corner.none}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-container-shape, ${DesignToken$1.shape.corner.none}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-container-shape, ${DesignToken$1.shape.corner.none}) ); transition: ${unsafeCSS(`border-radius ${DesignToken$1.motion.spring.fastEffects}, background-color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } :host(.-one-line) { min-height: calc(var(--m3e-list-item-one-line-height, 3.5rem) + ${DesignToken$1.density.calc(-3)}); } :host(.-one-line) .base { padding-block-start: var(--m3e-list-item-one-line-top-space, 0.5rem); padding-block-end: var(--m3e-list-item-one-line-bottom-space, 0.5rem); } :host(.-two-line) { min-height: calc(var(--m3e-list-item-two-line-height, 4.5rem) + ${DesignToken$1.density.calc(-3)}); } :host(.-two-line) .base { padding-block-start: var(--m3e-list-item-two-line-top-space, 0.5rem); padding-block-end: var(--m3e-list-item-two-line-bottom-space, 0.5rem); } :host(.-three-line) { min-height: calc(var(--m3e-list-item-three-line-height, 5.5rem) + ${DesignToken$1.density.calc(-3)}); } :host(.-three-line) .base { padding-block-start: var(--m3e-list-item-three-line-top-space, 0.75rem); padding-block-end: var(--m3e-list-item-three-line-bottom-space, 0.75rem); } :host(:not(.-three-line)) .base { align-items: center; } :host(.-three-line) .base { align-items: flex-start; } :host(:not(:disabled):not([selected]:not(:hover))) .base.focus-visible:not(.pressed) { border-top-left-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken$1.shape.corner.large}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken$1.shape.corner.large}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken$1.shape.corner.large}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken$1.shape.corner.large}) ); } :host(:not(:disabled):not([selected]):hover) .base, :host(:not(:disabled):not([selected])) .base.pressed { border-top-left-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken$1.shape.corner.medium}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken$1.shape.corner.medium}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken$1.shape.corner.medium}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken$1.shape.corner.medium}) ); } .content { flex: 1 1 auto; display: flex; flex-direction: column; align-items: unset; justify-content: unset; } ::slotted([slot="overline"]) { font-size: var(--m3e-list-item-overline-font-size, ${DesignToken$1.typescale.standard.label.small.fontSize}); font-weight: var(--m3e-list-item-overline-font-weight, ${DesignToken$1.typescale.standard.label.small.fontWeight}); line-height: var(--m3e-list-item-overline-line-height, ${DesignToken$1.typescale.standard.label.small.lineHeight}); letter-spacing: var(--m3e-list-item-overline-tracking, ${DesignToken$1.typescale.standard.label.small.tracking}); } ::slotted([slot="supporting-text"]) { font-size: var(--m3e-list-item-supporting-text-font-size, ${DesignToken$1.typescale.standard.body.medium.fontSize}); font-weight: var( --m3e-list-item-supporting-text-font-weight, ${DesignToken$1.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-list-item-supporting-text-line-height, ${DesignToken$1.typescale.standard.body.medium.lineHeight} ); letter-spacing: var( --m3e-list-item-supporting-text-tracking, ${DesignToken$1.typescale.standard.body.medium.tracking} ); } ::slotted(:not([slot])) { font-size: var(--m3e-list-item-font-size, ${DesignToken$1.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-list-item-font-weight, ${DesignToken$1.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-list-item-line-height, ${DesignToken$1.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-list-item-tracking, ${DesignToken$1.typescale.standard.body.large.tracking}); } :host(.-has-leading) slot[name="leading"], :host(.-has-trailing) slot[name="trailing"] { display: flex; justify-content: center; } :host(:not(.-has-leading)) slot[name="leading"] { display: var(--_list-item-leading-reserved-display, contents); } :host(:not(.-has-trailing)) slot[name="trailing"] { display: var(--_list-item-trailing-reserved-display, contents); } slot[name="leading"] { min-width: var(--_list-item-leading-reserved-space, 0px); margin-inline-start: calc(0px - var(--_list-item-leading-reserved-outset, 0px)); } slot[name="trailing"] { min-width: var(--_list-item-trailing-reserved-space, 0px); margin-inline-end: calc(0px - var(--_list-item-trailing-reserved-outset, 0px)); } ::slotted(span[slot="trailing"]), ::slotted([slot="trailing-supporting-text"]) { white-space: nowrap; font-size: var(--m3e-list-item-trailing-text-font-size, ${DesignToken$1.typescale.standard.label.small.fontSize}); font-weight: var( --m3e-list-item-trailing-text-font-weight, ${DesignToken$1.typescale.standard.label.small.fontWeight} ); line-height: var( --m3e-list-item-trailing-text-line-height, ${DesignToken$1.typescale.standard.label.small.lineHeight} ); letter-spacing: var( --m3e-list-item-trailing-text-tracking, ${DesignToken$1.typescale.standard.label.small.tracking} ); } ::slotted(video[slot="leading"]), ::slotted(video[slot="trailing"]), ::slotted(img[slot="leading"]), ::slotted(img[slot="trailing"]) { display: block; margin: 0 auto; overflow: hidden; object-fit: cover; } ::slotted(video) { width: var(--m3e-list-item-video-width, 6.25rem); height: var(--m3e-list-item-video-height, 3.5rem); } ::slotted(video[slot="leading"]), ::slotted(video[slot="trailing"]) { border-radius: var(--m3e-list-item-video-shape, ${DesignToken$1.shape.corner.none}); } ::slotted(video[slot="leading"]) { margin-inline-start: calc(0px - var(--_list-item-leading-video-outset, 0px)); } ::slotted(video[slot="trailing"]) { margin-inline-end: calc(0px - var(--_list-item-trailing-video-outset, 0px)); } ::slotted(img) { user-drag: none; user-select: none; pointer-events: none; width: var(--m3e-list-item-image-width, 3.5rem); height: var(--m3e-list-item-image-height, 3.5rem); } ::slotted(img[slot="leading"]), ::slotted(img[slot="trailing"]) { border-radius: var(--m3e-list-item-image-shape, ${DesignToken$1.shape.corner.none}); } ::slotted(m3e-icon[slot="leading"]), ::slotted(m3e-icon[slot="leading-icon"]), ::slotted(m3e-icon[slot="trailing"]), ::slotted(m3e-icon[slot="trailing-icon"]) { --m3e-icon-size: var(--m3e-list-item-icon-size, 1.5rem); } :host(:not(:disabled)) ::slotted(m3e-icon[slot="leading"]), :host(:not(:disabled)) ::slotted(m3e-icon[slot="leading-icon"]) { color: var(--m3e-list-item-leading-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not(:disabled)) .content { color: var(--m3e-list-item-label-text-color, ${DesignToken$1.color.onSurface}); } :host(:not(:disabled)) ::slotted([slot="overline"]) { color: var(--m3e-list-item-overline-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not(:disabled)) ::slotted([slot="supporting-text"]) { color: var(--m3e-list-item-supporting-text-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not(:disabled)) ::slotted([slot="trailing"]), :host(:not(:disabled)) ::slotted([slot="trailing-supporting-text"]), :host(:not(:disabled)) ::slotted([slot="trailing-icon"]) { color: var(--m3e-list-item-trailing-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not(:disabled)) .base { background-color: var(--_list-item-container-color, var(--m3e-list-item-container-color, transparent)); } :host(:disabled) .base { background-color: var(--m3e-list-item-disabled-container-color, transparent); } :host(:disabled) ::slotted(video), :host(:disabled) ::slotted(img), :host(:disabled) ::slotted(m3e-avatar) { opacity: var(--m3e-list-item-disabled-media-opacity, 38%); } :host(:disabled) .content { color: color-mix( in srgb, var(--m3e-list-item-disabled-label-text-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="overline"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-overline-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-overline-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="supporting-text"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-supporting-text-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-supporting-text-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="leading"]), :host(:disabled) ::slotted([slot="leading-icon"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-leading-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-leading-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="trailing"]), :host(:disabled) ::slotted([slot="trailing-supporting-text"]), :host(:disabled) ::slotted([slot="trailing-icon"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-trailing-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-trailing-opacity, 38%), transparent ); } :host(:not(:disabled)) .state-layer { --m3e-state-layer-hover-color: var(--m3e-list-item-hover-state-layer-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-hover-opacity: var( --m3e-list-item-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity} ); --m3e-state-layer-focus-color: var(--m3e-list-item-focus-state-layer-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-focus-opacity: var( --m3e-list-item-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity} ); } :host(:not(:disabled)) .ripple { --m3e-ripple-color: var(--m3e-list-item-pressed-state-layer-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-opacity: var( --m3e-list-item-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity} ); } @media (forced-colors: active) { :host(:disabled) ::slotted([slot="leading"]), :host(:disabled) ::slotted([slot="leading-icon"]), :host(:disabled) .content, :host(:disabled) ::slotted([slot="overline"]), :host(:disabled) ::slotted([slot="supporting-text"]), :host(:disabled) ::slotted([slot="trailing"]), :host(:disabled) ::slotted([slot="trailing-supporting-text"]), :host(:disabled) ::slotted([slot="trailing-icon"]) { color: GrayText; } } @media (prefers-reduced-motion) { .base { transition: none; } }`;
15052
15237
  M3eListItemElement = __decorate([t$3("m3e-list-item")], M3eListItemElement);
15053
15238
 
15054
15239
  var _M3eListElement_instances, _M3eListElement_items, _M3eListElement_leadingContentTypes, _M3eListElement_trailingContentTypes, _M3eListElement_handleSlotChange;
@@ -15637,6 +15822,15 @@ M3eListActionElement = __decorate([t$3("m3e-list-action")], M3eListActionElement
15637
15822
  * An internal interactive element used to present the content of a list item.
15638
15823
  */
15639
15824
  let M3eListItemButtonElement = class M3eListItemButtonElement extends KeyboardClick$1(LinkButton$1(Focusable$1(Disabled$1(AttachInternals$1(Role$1(M3eListItemElement, "button"), true))))) {
15825
+ constructor() {
15826
+ super();
15827
+ new FocusController$1(this, {
15828
+ callback: (_, focusVisible) => this.shadowRoot?.querySelector(".base")?.classList.toggle("focus-visible", focusVisible)
15829
+ });
15830
+ new PressedController$1(this, {
15831
+ callback: pressed => this.shadowRoot?.querySelector(".base")?.classList.toggle("pressed", pressed)
15832
+ });
15833
+ }
15640
15834
  /** @inheritdoc */
15641
15835
  firstUpdated(_changedProperties) {
15642
15836
  super.firstUpdated(_changedProperties);
@@ -15753,7 +15947,7 @@ var _M3eListOptionElement_instances, _M3eListOptionElement_value, _M3eListOption
15753
15947
  */
15754
15948
  let M3eListOptionElement = class M3eListOptionElement extends KeyboardClick$1(Focusable$1(Selected$1(Disabled$1(AttachInternals$1(Role$1(M3eListItemElement, "option"), true))))) {
15755
15949
  constructor() {
15756
- super(...arguments);
15950
+ super();
15757
15951
  _M3eListOptionElement_instances.add(this);
15758
15952
  /** @private */
15759
15953
  _M3eListOptionElement_value.set(this, void 0);
@@ -15761,6 +15955,12 @@ let M3eListOptionElement = class M3eListOptionElement extends KeyboardClick$1(Fo
15761
15955
  _M3eListOptionElement_textContent.set(this, "");
15762
15956
  /** @private */
15763
15957
  _M3eListOptionElement_clickHandler.set(this, e => __classPrivateFieldGet(this, _M3eListOptionElement_instances, "m", _M3eListOptionElement_handleClick).call(this, e));
15958
+ new FocusController$1(this, {
15959
+ callback: (_, focusVisible) => this.shadowRoot?.querySelector(".base")?.classList.toggle("focus-visible", focusVisible)
15960
+ });
15961
+ new PressedController$1(this, {
15962
+ callback: pressed => this.shadowRoot?.querySelector(".base")?.classList.toggle("pressed", pressed)
15963
+ });
15764
15964
  }
15765
15965
  /** A string representing the value of the option. */
15766
15966
  get value() {
@@ -16083,6 +16283,16 @@ M3eLoadingIndicatorElement = __decorate([t$3("m3e-loading-indicator")], M3eLoadi
16083
16283
 
16084
16284
  /** A base implementation for an item of a menu. This class must be inherited. */
16085
16285
  class MenuItemElementBase extends KeyboardClick$1(Focusable$1(AttachInternals$1(Disabled$1(LitElement), true))) {
16286
+ constructor() {
16287
+ super();
16288
+ new FocusController$1(this, {
16289
+ callback: focused => {
16290
+ if (focused) {
16291
+ this.menu?._activate();
16292
+ }
16293
+ }
16294
+ });
16295
+ }
16086
16296
  /** The menu to which this item belongs. */
16087
16297
  get menu() {
16088
16298
  return this.closest("m3e-menu");
@@ -16415,7 +16625,7 @@ _M3eMenuItemElement_handleMouseEnter = function _M3eMenuItemElement_handleMouseE
16415
16625
  __decorate([r$1()], M3eMenuItemElement.prototype, "_hasSubmenu", void 0);
16416
16626
  M3eMenuItemElement = M3eMenuItemElement_1 = __decorate([t$3("m3e-menu-item")], M3eMenuItemElement);
16417
16627
 
16418
- var _M3eMenuElement_instances, _M3eMenuElement_trigger, _M3eMenuElement_anchorCleanup, _M3eMenuElement_listManager, _M3eMenuElement_keyDownHandler, _M3eMenuElement_mouseEnterHandler, _M3eMenuElement_documentClickHandler, _M3eMenuElement_scrollController, _M3eMenuElement_toggleHandler, _M3eMenuElement_handleSlotChange, _M3eMenuElement_handleKeyDown, _M3eMenuElement_handleMouseEnter, _M3eMenuElement_handleDocumentClick, _M3eMenuElement_getAbsolutePosition, _M3eMenuElement_activate, _M3eMenuElement_deactivate;
16628
+ var _M3eMenuElement_instances, _M3eMenuElement_trigger, _M3eMenuElement_anchorCleanup, _M3eMenuElement_listManager, _M3eMenuElement_keyDownHandler, _M3eMenuElement_mouseEnterHandler, _M3eMenuElement_documentClickHandler, _M3eMenuElement_scrollController, _M3eMenuElement_toggleHandler, _M3eMenuElement_handleSlotChange, _M3eMenuElement_handleKeyDown, _M3eMenuElement_handleMouseEnter, _M3eMenuElement_handleDocumentClick, _M3eMenuElement_getAbsolutePosition, _M3eMenuElement_deactivate;
16419
16629
  var M3eMenuElement_1;
16420
16630
  /**
16421
16631
  * Presents a list of choices on a temporary surface.
@@ -16612,7 +16822,7 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends Role$1(LitE
16612
16822
  if (parent) {
16613
16823
  this.variant = parent.variant;
16614
16824
  } else {
16615
- __classPrivateFieldGet(this, _M3eMenuElement_instances, "m", _M3eMenuElement_activate).call(this);
16825
+ this._activate();
16616
16826
  }
16617
16827
  this.showPopover();
16618
16828
  __classPrivateFieldSet(this, _M3eMenuElement_trigger, trigger, "f");
@@ -16678,6 +16888,14 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends Role$1(LitE
16678
16888
  super.firstUpdated(_changedProperties);
16679
16889
  requestAnimationFrame(() => this.classList.remove("-no-animate"));
16680
16890
  }
16891
+ /** @internal */
16892
+ _activate() {
16893
+ if (this !== M3eMenuElement_1.__activeMenu) {
16894
+ M3eMenuElement_1.__activeMenu?.classList.remove("-active");
16895
+ M3eMenuElement_1.__activeMenu = this;
16896
+ M3eMenuElement_1.__activeMenu?.classList.add("-active");
16897
+ }
16898
+ }
16681
16899
  };
16682
16900
  _M3eMenuElement_trigger = new WeakMap();
16683
16901
  _M3eMenuElement_anchorCleanup = new WeakMap();
@@ -16734,7 +16952,7 @@ _M3eMenuElement_handleKeyDown = function _M3eMenuElement_handleKeyDown(e) {
16734
16952
  }
16735
16953
  };
16736
16954
  _M3eMenuElement_handleMouseEnter = function _M3eMenuElement_handleMouseEnter() {
16737
- __classPrivateFieldGet(this, _M3eMenuElement_instances, "m", _M3eMenuElement_activate).call(this);
16955
+ this._activate();
16738
16956
  };
16739
16957
  _M3eMenuElement_handleDocumentClick = function _M3eMenuElement_handleDocumentClick(e) {
16740
16958
  if (!this.submenu && !e.composedPath().some(x => x instanceof M3eMenuElement_1 || x === __classPrivateFieldGet(this, _M3eMenuElement_trigger, "f"))) {
@@ -16753,13 +16971,6 @@ _M3eMenuElement_getAbsolutePosition = function _M3eMenuElement_getAbsolutePositi
16753
16971
  y
16754
16972
  };
16755
16973
  };
16756
- _M3eMenuElement_activate = function _M3eMenuElement_activate() {
16757
- if (this !== M3eMenuElement_1.__activeMenu) {
16758
- M3eMenuElement_1.__activeMenu?.classList.remove("-active");
16759
- M3eMenuElement_1.__activeMenu = this;
16760
- M3eMenuElement_1.__activeMenu?.classList.add("-active");
16761
- }
16762
- };
16763
16974
  _M3eMenuElement_deactivate = function _M3eMenuElement_deactivate() {
16764
16975
  if (this === M3eMenuElement_1.__activeMenu) {
16765
16976
  M3eMenuElement_1.__activeMenu.classList.remove("-active");
@@ -16774,7 +16985,7 @@ _M3eMenuElement_deactivate = function _M3eMenuElement_deactivate() {
16774
16985
  }
16775
16986
  })();
16776
16987
  /** The styles of the element. */
16777
- M3eMenuElement.styles = css`:host { position: absolute; padding: unset; margin: unset; border: unset; overflow-y: auto; overflow-x: visible; scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.scrollbar.color}; scroll-padding-block: calc( var(--m3e-focus-ring-thickness, 0.1875rem) + var(--m3e-menu-container-padding-block, 0.25rem) ); min-width: var(--m3e-menu-container-min-width, 7rem); max-width: var(--m3e-menu-container-max-width, 17.5rem); max-height: var(--m3e-menu-container-max-height, 17.5rem); box-shadow: var(--m3e-menu-container-elevation, ${DesignToken$1.elevation.level3}); opacity: 0; display: none; } .base { display: flex; flex-direction: column; row-gap: var(--m3e-menu-gap, 0.125rem); min-width: inherit; max-width: inherit; padding-block: var(--m3e-menu-container-padding-block, 0.25rem); padding-inline: var(--m3e-menu-container-padding-inline, 0.25rem); } :host(:not(.-active)) { border-radius: var(--m3e-menu-container-shape, ${DesignToken$1.shape.corner.small}); } :host(.-active) { border-radius: var(--m3e-menu-active-container-shape, ${DesignToken$1.shape.corner.large}); } :host(:not(.-no-animate)) { transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard},
16988
+ M3eMenuElement.styles = css`:host { position: absolute; padding: unset; margin: unset; border: unset; overflow-y: auto; overflow-x: visible; scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.scrollbar.color}; scroll-padding-block: calc( var(--m3e-focus-ring-thickness, 3px) + var(--m3e-menu-container-padding-block, 0.25rem) ); min-width: var(--m3e-menu-container-min-width, 7rem); max-width: var(--m3e-menu-container-max-width, 17.5rem); max-height: var(--m3e-menu-container-max-height, 17.5rem); box-shadow: var(--m3e-menu-container-elevation, ${DesignToken$1.elevation.level3}); opacity: 0; display: none; } .base { display: flex; flex-direction: column; row-gap: var(--m3e-menu-gap, 0.125rem); min-width: inherit; max-width: inherit; padding-block: var(--m3e-menu-container-padding-block, 0.25rem); padding-inline: var(--m3e-menu-container-padding-inline, 0.25rem); --m3e-focus-ring-outward-offset: 0px; --m3e-focus-ring-growth-factor: 1.5; } :host(:not(.-active)) { border-radius: var(--m3e-menu-container-shape, ${DesignToken$1.shape.corner.small}); } :host(:not(.-active)) .base { --m3e-menu-item-first-child-shape: ${DesignToken$1.shape.corner.extraSmall}; --m3e-menu-item-last-child-shape: ${DesignToken$1.shape.corner.extraSmall}; } :host(.-active) { border-radius: var(--m3e-menu-active-container-shape, ${DesignToken$1.shape.corner.large}); } :host(:not(.-no-animate)) { transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard},
16778
16989
  transform ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard},
16779
16990
  overlay ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard} allow-discrete,
16780
16991
  display ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard} allow-discrete,
@@ -17400,7 +17611,7 @@ _M3eNavItemElement_handleClick = function _M3eNavItemElement_handleClick(e) {
17400
17611
  }
17401
17612
  };
17402
17613
  /** The styles of the element. */
17403
- M3eNavItemElement.styles = css`:host { display: inline-block; vertical-align: middle; position: relative; outline: none; user-select: none; flex: 1; font-size: var(--m3e-nav-item-label-text-font-size, ${DesignToken$1.typescale.standard.label.medium.fontSize}); font-weight: var( --m3e-nav-item-label-text-font-weight, ${DesignToken$1.typescale.standard.label.medium.fontWeight} ); line-height: var( --m3e-nav-item-label-text-line-height, ${DesignToken$1.typescale.standard.label.medium.lineHeight} ); letter-spacing: var(--m3e-nav-item-label-text-tracking, ${DesignToken$1.typescale.standard.label.medium.tracking}); border-radius: var(--m3e-nav-item-shape, ${DesignToken$1.shape.corner.full}); min-width: var(--_nav-item-min-width); align-self: var(--_nav-item-align-self); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host([orientation="horizontal"]) { max-width: fit-content; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } .outer { height: 100%; } .outer, .inner { display: flex; align-items: center; justify-content: var(--_nav-item-justify-content, center); position: relative; border-radius: inherit; } .icon-wrapper { position: relative; flex: none; } .base { justify-content: unset; box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; } .icon { position: absolute; } .label { vertical-align: middle; } ::slotted([slot="icon"]), ::slotted([slot="selected-icon"]) { width: 1em; font-size: var(--m3e-nav-item-icon-size, 1.5rem) !important; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-inactive-hover-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-inactive-focus-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-inactive-pressed-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label { color: var(--m3e-nav-item-inactive-label-text-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-inactive-icon-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([selected]:not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-active-hover-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-active-focus-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-active-pressed-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); } :host([selected]:not(:disabled):not([disabled-interactive])) .label { color: var(--m3e-nav-item-active-label-text-color, ${DesignToken$1.color.secondary}); } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: var(--m3e-nav-item-active-container-color, ${DesignToken$1.color.secondaryContainer}); } :host([selected]:not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-active-icon-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([orientation="vertical"]) .outer { align-self: stretch; align-items: flex-start; } :host([orientation="vertical"]) .label { text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; } :host([orientation="vertical"]) .base { flex-direction: column; row-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="vertical"]) .base { margin-block: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple { top: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); bottom: unset; } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { width: var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem); } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { height: var(--m3e-vertical-nav-item-active-indicator-height, 2rem); } :host([orientation="vertical"]) .icon { top: calc( calc(var(--m3e-vertical-nav-item-active-indicator-height, 2rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); left: calc( calc(var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); } :host([orientation="vertical"]) .focus-ring { border-radius: var(--m3e-nav-item-focus-ring-shape, ${DesignToken$1.shape.corner.extraSmall}); } :host([orientation="horizontal"]) .icon-wrapper { width: var(--m3e-nav-item-icon-size, 1.5rem); height: var(--m3e-nav-item-icon-size, 1.5rem); } :host([orientation="horizontal"]) .base { padding: var(--m3e-horizontal-nav-item-padding, 1rem); } :host([orientation="horizontal"]) .label { flex: 1 1 auto; } :host([orientation="horizontal"]) .base { column-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="horizontal"]) .inner { height: var(--m3e-horizontal-nav-item-active-indicator-height, 2.5rem); width: fit-content; } .state-layer, .ripple { margin-inline: auto; } :host(:disabled) .label, :host([disabled-interactive]) .label { color: color-mix( in srgb, var(--m3e-nav-item-disabled-label-text-color, ${DesignToken$1.color.onSurface}) var(--m3e-nav-item-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: color-mix( in srgb, var(--m3e-nav-item-disabled-icon-color, ${DesignToken$1.color.onSurface}) var(--m3e-nav-item-disabled-icon-opacity, 38%), transparent ); } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { :host(:disabled) .label, :host([disabled-interactive]) .label, :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: GrayText; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label, :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ButtonText; } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: ButtonText; } :host([orientation="vertical"][selected]:not(:disabled):not([disabled-interactive])) .label { color: ButtonText; } :host([orientation="horizontal"][selected]:not(:disabled):not([disabled-interactive])) .label, :host([selected]:not(:disabled):not([disabled-interactive])) .icon { forced-color-adjust: none; color: ButtonFace; } }`;
17614
+ M3eNavItemElement.styles = css`:host { display: inline-block; vertical-align: middle; position: relative; outline: none; user-select: none; flex: 1; font-size: var(--m3e-nav-item-label-text-font-size, ${DesignToken$1.typescale.standard.label.medium.fontSize}); font-weight: var( --m3e-nav-item-label-text-font-weight, ${DesignToken$1.typescale.standard.label.medium.fontWeight} ); line-height: var( --m3e-nav-item-label-text-line-height, ${DesignToken$1.typescale.standard.label.medium.lineHeight} ); letter-spacing: var(--m3e-nav-item-label-text-tracking, ${DesignToken$1.typescale.standard.label.medium.tracking}); border-radius: var(--m3e-nav-item-shape, ${DesignToken$1.shape.corner.full}); min-width: var(--_nav-item-min-width); align-self: var(--_nav-item-align-self); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host([orientation="horizontal"]) { max-width: fit-content; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } .outer { height: 100%; } .outer, .inner { display: flex; align-items: center; justify-content: var(--_nav-item-justify-content, center); position: relative; border-radius: inherit; } .icon-wrapper { position: relative; flex: none; } .base { justify-content: unset; box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; } .icon { position: absolute; } .label { vertical-align: middle; } ::slotted([slot="icon"]), ::slotted([slot="selected-icon"]) { width: 1em; font-size: var(--m3e-nav-item-icon-size, 1.5rem) !important; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-inactive-hover-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-inactive-focus-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-inactive-pressed-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label { color: var(--m3e-nav-item-inactive-label-text-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-inactive-icon-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([selected]:not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-active-hover-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-active-focus-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-active-pressed-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); } :host([selected]:not(:disabled):not([disabled-interactive])) .label { color: var(--m3e-nav-item-active-label-text-color, ${DesignToken$1.color.secondary}); } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: var(--m3e-nav-item-active-container-color, ${DesignToken$1.color.secondaryContainer}); } :host([selected]:not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-active-icon-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([orientation="vertical"]) .outer { align-self: stretch; align-items: flex-start; } :host([orientation="vertical"]) .label { text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; } :host([orientation="vertical"]) .base { flex-direction: column; row-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="vertical"]) .base { margin-block: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple { top: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); bottom: unset; } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { width: var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem); } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { height: var(--m3e-vertical-nav-item-active-indicator-height, 2rem); } :host([orientation="vertical"]) .icon { top: calc( calc(var(--m3e-vertical-nav-item-active-indicator-height, 2rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); left: calc( calc(var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); } :host([orientation="vertical"]) .focus-ring { border-radius: var(--m3e-nav-item-focus-ring-shape, ${DesignToken$1.shape.corner.medium}); } :host([orientation="horizontal"]) .icon-wrapper { width: var(--m3e-nav-item-icon-size, 1.5rem); height: var(--m3e-nav-item-icon-size, 1.5rem); } :host([orientation="horizontal"]) .base { padding: var(--m3e-horizontal-nav-item-padding, 1rem); } :host([orientation="horizontal"]) .label { flex: 1 1 auto; } :host([orientation="horizontal"]) .base { column-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="horizontal"]) .inner { height: var(--m3e-horizontal-nav-item-active-indicator-height, 2.5rem); width: fit-content; } .state-layer, .ripple { margin-inline: auto; } :host(:disabled) .label, :host([disabled-interactive]) .label { color: color-mix( in srgb, var(--m3e-nav-item-disabled-label-text-color, ${DesignToken$1.color.onSurface}) var(--m3e-nav-item-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: color-mix( in srgb, var(--m3e-nav-item-disabled-icon-color, ${DesignToken$1.color.onSurface}) var(--m3e-nav-item-disabled-icon-opacity, 38%), transparent ); } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { :host(:disabled) .label, :host([disabled-interactive]) .label, :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: GrayText; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label, :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ButtonText; } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: ButtonText; } :host([orientation="vertical"][selected]:not(:disabled):not([disabled-interactive])) .label { color: ButtonText; } :host([orientation="horizontal"][selected]:not(:disabled):not([disabled-interactive])) .label, :host([selected]:not(:disabled):not([disabled-interactive])) .icon { forced-color-adjust: none; color: ButtonFace; } }`;
17404
17615
  __decorate([e$4(".focus-ring")], M3eNavItemElement.prototype, "_focusRing", void 0);
17405
17616
  __decorate([e$4(".state-layer")], M3eNavItemElement.prototype, "_stateLayer", void 0);
17406
17617
  __decorate([e$4(".ripple")], M3eNavItemElement.prototype, "_ripple", void 0);
@@ -18253,7 +18464,7 @@ _M3eNavRailElement_handleKeyDown = function _M3eNavRailElement_handleKeyDown(e)
18253
18464
  }
18254
18465
  })();
18255
18466
  /** The styles of the element. */
18256
- M3eNavRailElement.styles = css`:host { display: block; overflow-x: hidden; overflow-y: auto; scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.scrollbar.color}; } .base { display: flex; width: 100%; min-width: inherit; max-width: inherit; flex-direction: column; padding-block-start: var(--m3e-nav-rail-top-space, 2.75rem); padding-block-end: var(--m3e-nav-rail-bottom-space, 0.5rem); } :host(.-compact) { width: var(--m3e-nav-rail-compact-width, 6rem); } :host(.-compact) ::slotted(m3e-fab) { align-self: center; } :host(:not(.-compact)) { min-width: var(--m3e-nav-rail-expanded-min-width, 13.75rem); max-width: var(--m3e-nav-rail-expanded-max-width, 22.5rem); } :host(:not(.-compact)) .base { padding-inline: var(--m3e-nav-rail-expanded-inline-padding, 1.25rem); align-items: flex-start; --m3e-horizontal-nav-item-active-indicator-height: var(--m3e-nav-rail-expanded-item-height, 3.5rem); --_nav-item-align-self: stretch; --_nav-item-justify-content: flex-start; } ::slotted(*) { flex: none; } :host(.-compact) ::slotted(m3e-icon-button) { align-self: center; }`;
18467
+ M3eNavRailElement.styles = css`:host { display: block; overflow-x: hidden; overflow-y: auto; scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.scrollbar.color}; } .base { display: flex; width: 100%; min-width: inherit; max-width: inherit; flex-direction: column; padding-block-start: var(--m3e-nav-rail-top-space, 2.75rem); padding-block-end: var(--m3e-nav-rail-bottom-space, 0.5rem); } :host(.-compact) { width: var(--m3e-nav-rail-compact-width, 6rem); } :host(.-compact) ::slotted(m3e-fab) { align-self: center; } :host(:not(.-compact)) { min-width: var(--m3e-nav-rail-expanded-min-width, 13.75rem); max-width: var(--m3e-nav-rail-expanded-max-width, 22.5rem); } :host(:not(.-compact)) .base { padding-inline: var(--m3e-nav-rail-expanded-inline-padding, 1.25rem); align-items: flex-start; --m3e-horizontal-nav-item-active-indicator-height: var(--m3e-nav-rail-expanded-item-height, 3.5rem); --_nav-item-align-self: stretch; --_nav-item-justify-content: flex-start; } ::slotted(*) { flex: none; } :host(.-compact) ::slotted(m3e-icon-button) { align-self: center; } ::slotted(m3e-fab) { --m3e-fab-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-disabled-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-focus-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-pressed-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-hover-container-elevation: ${DesignToken$1.elevation.level1}; --m3e-fab-lowered-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-lowered-disabled-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-lowered-focus-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-lowered-pressed-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-lowered-hover-container-elevation: ${DesignToken$1.elevation.level1}; }`;
18257
18468
  M3eNavRailElement = __decorate([t$3("m3e-nav-rail")], M3eNavRailElement);
18258
18469
 
18259
18470
  var _M3eNavRailToggleElement_instances, _M3eNavRailToggleElement_mutationController, _M3eNavRailToggleElement_updateToggle;
@@ -18696,7 +18907,7 @@ _M3eOptionPanelElement_handleDocumentClick = function _M3eOptionPanelElement_han
18696
18907
  }
18697
18908
  })();
18698
18909
  /** The styles of the element. */
18699
- M3eOptionPanelElement.styles = css`:host { position: absolute; flex-direction: column; padding: unset; margin: unset; border: unset; overflow-y: auto; scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.scrollbar.color}; scroll-padding-block: calc( var(--m3e-focus-ring-thickness, 0.1875rem) + var(--m3e-option-panel-container-padding-block, 0.25rem) ); border-radius: var(--m3e-option-panel-container-shape, ${DesignToken$1.shape.corner.large}); min-width: var(--m3e-option-panel-container-min-width, 7rem); max-width: var(--m3e-option-panel-container-max-width, 17.5rem); max-height: var(--m3e-option-panel-container-max-height, 17.5rem); background-color: var(--m3e-option-panel-container-color, ${DesignToken$1.color.surfaceContainer}); box-shadow: var(--m3e-option-panel-container-elevation, ${DesignToken$1.elevation.level3}); opacity: 0; display: none; } .base { display: flex; flex-direction: column; row-gap: var(--m3e-option-panel-gap, 0.125rem); min-width: inherit; max-width: inherit; padding-block: var(--m3e-option-panel-container-padding-block, 0.25rem); padding-inline: var(--m3e-option-panel-container-padding-inline, 0.25rem); --m3e-text-highlight-container-color: var( --m3e-option-panel-text-highlight-container-color, ${DesignToken$1.color.tertiaryContainer} ); --m3e-text-highlight-color: var( --m3e-option-panel-text-highlight-color, ${DesignToken$1.color.onTertiaryContainer} ); } :host(:not(.-no-animate)) { transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard},
18910
+ M3eOptionPanelElement.styles = css`:host { position: absolute; flex-direction: column; padding: unset; margin: unset; border: unset; overflow-y: auto; scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.scrollbar.color}; scroll-padding-block: calc( var(--m3e-focus-ring-thickness, 3px) + var(--m3e-option-panel-container-padding-block, 0.25rem) ); border-radius: var(--m3e-option-panel-container-shape, ${DesignToken$1.shape.corner.large}); min-width: var(--m3e-option-panel-container-min-width, 7rem); max-width: var(--m3e-option-panel-container-max-width, 17.5rem); max-height: var(--m3e-option-panel-container-max-height, 17.5rem); background-color: var(--m3e-option-panel-container-color, ${DesignToken$1.color.surfaceContainer}); box-shadow: var(--m3e-option-panel-container-elevation, ${DesignToken$1.elevation.level3}); opacity: 0; display: none; } .base { display: flex; flex-direction: column; row-gap: var(--m3e-option-panel-gap, 0.125rem); min-width: inherit; max-width: inherit; padding-block: var(--m3e-option-panel-container-padding-block, 0.25rem); padding-inline: var(--m3e-option-panel-container-padding-inline, 0.25rem); --m3e-text-highlight-container-color: var( --m3e-option-panel-text-highlight-container-color, ${DesignToken$1.color.tertiaryContainer} ); --m3e-text-highlight-color: var( --m3e-option-panel-text-highlight-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-focus-ring-outward-offset: 0px; --m3e-focus-ring-growth-factor: 1.5; } :host(:not(.-no-animate)) { transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard},
18700
18911
  transform ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard},
18701
18912
  overlay ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard} allow-discrete,
18702
18913
  display ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } :host { transform: scaleY(0.8); } :host(:popover-open) { transform: scaleY(1); display: block; opacity: 1; } :host::backdrop { background-color: transparent; } :host(.-bottom) { transform-origin: top; } :host(.-top) { transform-origin: bottom; } @starting-style { :host(:popover-open) { transform: scaleY(0.8); } } @media (prefers-reduced-motion) { :host(:not(.-no-animate)) { transition: none; } } @media (forced-colors: active) { :host { background-color: Menu; color: MenuText; outline: 1px solid MenuText; } }`;
@@ -19793,6 +20004,10 @@ _M3eRadioElement_handleClick = function _M3eRadioElement_handleClick(e) {
19793
20004
  } else {
19794
20005
  this.checked = false;
19795
20006
  }
20007
+ // Prevent default avoids double-click in FireFox.
20008
+ if (this.closest("label")) {
20009
+ e.preventDefault();
20010
+ }
19796
20011
  };
19797
20012
  _M3eRadioElement_notifySelectionChange = function _M3eRadioElement_notifySelectionChange() {
19798
20013
  const group = this.closest("m3e-radio-group");
@@ -21190,9 +21405,9 @@ _M3eSliderThumbElement_labelText_get = function _M3eSliderThumbElement_labelText
21190
21405
  return this.closest("m3e-slider")?.displayWith?.(this.value) ?? this.value?.toString() ?? "";
21191
21406
  };
21192
21407
  /** The styles of the element. */
21193
- M3eSliderThumbElement.styles = css`:host { display: block; box-sizing: border-box; position: absolute; outline: none; top: 0; bottom: 0; border-radius: var(--m3e-slider-thumb-shape, ${DesignToken$1.shape.corner.full}); 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%; height: 100%; border-radius: inherit; } .touch { position: absolute; height: 3rem; left: 0; right: 0; touch-action: none; } .wrapper { display: inline-flex; justify-content: center; height: 100%; border-radius: inherit; width: calc(var(--m3e-slider-thumb-width, 0.25rem) + calc(var(--m3e-slider-thumb-padding, 0.375em) * 2)); } .focus-ring { --m3e-focus-ring-growth-factor: 1.5; top: calc(0px - var(--m3e-focus-ring-thickness, 0.1875rem)); bottom: calc(0px - var(--m3e-focus-ring-thickness, 0.1875rem)); left: var(--m3e-focus-ring-thickness, 0.1875rem); right: var(--m3e-focus-ring-thickness, 0.1875rem); } .label { user-select: none; position: absolute; display: flex; align-items: center; justify-content: center; visibility: var(--_slider-label-visibility, hidden); opacity: var(--_slider-label-opacity, 0); transform: var(--_slider-label-transform, scale(0)); transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard},
21408
+ M3eSliderThumbElement.styles = css`:host { display: block; box-sizing: border-box; position: absolute; outline: none; top: 0; bottom: 0; border-radius: var(--m3e-slider-thumb-shape, ${DesignToken$1.shape.corner.full}); 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%; height: 100%; border-radius: inherit; } .touch { position: absolute; height: 3rem; left: 0; right: 0; touch-action: none; } .wrapper { display: inline-flex; justify-content: center; height: 100%; border-radius: inherit; width: calc(var(--m3e-slider-thumb-width, 0.25rem) + calc(var(--m3e-slider-thumb-padding, 0.375em) * 2)); } .focus-ring { top: calc(0px - var(--m3e-focus-ring-thickness, 3px)); bottom: calc(0px - var(--m3e-focus-ring-thickness, 3px)); left: var(--m3e-focus-ring-thickness, 3px); right: var(--m3e-focus-ring-thickness, 3px); } .label { user-select: none; position: absolute; display: flex; align-items: center; justify-content: center; visibility: var(--_slider-label-visibility, hidden); opacity: var(--_slider-label-opacity, 0); transform: var(--_slider-label-transform, scale(0)); transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard},
21194
21409
  transform ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard},
21195
- visibility ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; width: var(--m3e-slider-label-width, 3rem); height: var(--_m3e-slider-label-height, 2.75rem); top: calc(0px - var(--_m3e-slider-label-height, 2.75rem) - var(--_m3e-slider-label-margin, 0.25rem)); inset-inline-start: calc(0px - 100%); border-radius: var(--m3e-slider-label-shape, ${DesignToken$1.shape.corner.full}); background-color: var(--m3e-slider-label-container-color, ${DesignToken$1.color.inverseSurface}); color: var(--m3e-slider-label-color, ${DesignToken$1.color.inverseOnSurface}); font-size: var(--m3e-slider-label-font-size, ${DesignToken$1.typescale.standard.label.medium.fontSize}); font-weight: var(--m3e-slider-label-font-weight, ${DesignToken$1.typescale.standard.label.medium.fontWeight}); line-height: var(--m3e-slider-label-line-height, ${DesignToken$1.typescale.standard.label.medium.lineHeight}); letter-spacing: var(--m3e-slider-label-tracking, ${DesignToken$1.typescale.standard.label.medium.tracking}); } @starting-style { .label { opacity: 0; transform: scale(0); } } .handle { height: 100%; width: var(--m3e-slider-thumb-width, 0.25rem); border-radius: inherit; transition: ${unsafeCSS(`width ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard}`)}; } :host(:active:not([aria-disabled="true"])) .handle { width: var(--m3e-slider-thumb-pressed-width, 0.125rem); } :host(:not([aria-disabled="true"])) .handle { background-color: var(--m3e-slider-thumb-color, ${DesignToken$1.color.primary}); } :host([aria-disabled="true"]) .handle { opacity: var(--m3e-slider-thumb-disabled-opacity, 38%); background-color: var(--m3e-slider-thumb-disabled-color, ${DesignToken$1.color.onSurface}); } @media (prefers-reduced-motion) { .label { transition: none; } } @media (forced-colors: active) { .label { forced-color-adjust: none; background-color: CanvasText; color: Canvas; } :host(:not([aria-disabled="true"])) .handle { background-color: CanvasText; } :host([aria-disabled="true"]) .handle { opacity: unset; background-color: GrayText; } }`;
21410
+ visibility ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; width: var(--m3e-slider-label-width, 3rem); height: var(--_m3e-slider-label-height, 2.75rem); top: calc(0px - var(--_m3e-slider-label-height, 2.75rem) - var(--_m3e-slider-label-margin, 0.25rem)); inset-inline-start: calc(0px - 100%); border-radius: var(--m3e-slider-label-shape, ${DesignToken$1.shape.corner.full}); background-color: var(--m3e-slider-label-container-color, ${DesignToken$1.color.inverseSurface}); color: var(--m3e-slider-label-color, ${DesignToken$1.color.inverseOnSurface}); font-size: var(--m3e-slider-label-font-size, ${DesignToken$1.typescale.standard.label.medium.fontSize}); font-weight: var(--m3e-slider-label-font-weight, ${DesignToken$1.typescale.standard.label.medium.fontWeight}); line-height: var(--m3e-slider-label-line-height, ${DesignToken$1.typescale.standard.label.medium.lineHeight}); letter-spacing: var(--m3e-slider-label-tracking, ${DesignToken$1.typescale.standard.label.medium.tracking}); } @starting-style { .label { opacity: 0; transform: scale(0); } } .handle { height: 100%; width: var(--m3e-slider-thumb-width, 0.25rem); border-radius: inherit; transition: ${unsafeCSS(`width ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard}`)}; } :host(:active:not([aria-disabled="true"])) .handle { width: var(--m3e-slider-thumb-pressed-width, 2px); } :host(:not([aria-disabled="true"])) .handle { background-color: var(--m3e-slider-thumb-color, ${DesignToken$1.color.primary}); } :host([aria-disabled="true"]) .handle { opacity: var(--m3e-slider-thumb-disabled-opacity, 38%); background-color: var(--m3e-slider-thumb-disabled-color, ${DesignToken$1.color.onSurface}); } @media (prefers-reduced-motion) { .label { transition: none; } } @media (forced-colors: active) { .label { forced-color-adjust: none; background-color: CanvasText; color: Canvas; } :host(:not([aria-disabled="true"])) .handle { background-color: CanvasText; } :host([aria-disabled="true"]) .handle { opacity: unset; background-color: GrayText; } }`;
21196
21411
  __decorate([e$4(".focus-ring")], M3eSliderThumbElement.prototype, "_focusRing", void 0);
21197
21412
  __decorate([n$1({
21198
21413
  type: Number,
@@ -21980,6 +22195,7 @@ let M3eSplitButtonElement = class M3eSplitButtonElement extends Role$1(LitElemen
21980
22195
  _M3eSplitButtonElement_pressedController.set(this, new PressedController$1(this, {
21981
22196
  target: null,
21982
22197
  capture: true,
22198
+ minPressedDuration: 150,
21983
22199
  isPressedKey: key => key === " ",
21984
22200
  callback: (pressed, _, target) => {
21985
22201
  switch (target) {
@@ -22857,7 +23073,7 @@ const SwitchToken = {
22857
23073
  trackHeight: unsafeCSS("var(--m3e-switch-track-height, 2rem)"),
22858
23074
  trackWidth: unsafeCSS("var(--m3e-switch-track-width, 3.25rem)"),
22859
23075
  trackOutlineColor: unsafeCSS(`var(--m3e-switch-track-outline-color, ${DesignToken$1.color.outline})`),
22860
- trackOutlineWidth: unsafeCSS("var(--m3e-switch-track-outline-width, 0.125rem)"),
23076
+ trackOutlineWidth: unsafeCSS("var(--m3e-switch-track-outline-width, 2px)"),
22861
23077
  trackShape: unsafeCSS(`var(--m3e-switch-track-shape, ${DesignToken$1.shape.corner.full})`),
22862
23078
  selectedTrackColor: unsafeCSS(`var(--m3e-switch-selected-track-color, ${DesignToken$1.color.primary})`),
22863
23079
  unselectedTrackColor: unsafeCSS(`var(--m3e-switch-unselected-track-color, ${DesignToken$1.color.surfaceContainerHighest})`),
@@ -23153,6 +23369,10 @@ _M3eSwitchElement_handleClick = function _M3eSwitchElement_handleClick(e) {
23153
23369
  } else {
23154
23370
  this.checked = !this.checked;
23155
23371
  }
23372
+ // Prevent default avoids double-click in FireFox.
23373
+ if (this.closest("label")) {
23374
+ e.preventDefault();
23375
+ }
23156
23376
  };
23157
23377
  /** The styles of the element. */
23158
23378
  M3eSwitchElement.styles = [SwitchStyle, SwitchStateLayerStyle, SwitchTrackStyle, SwitchHandleStyle, SwitchIconStyle];
@@ -23293,7 +23513,7 @@ _M3eTabElement_handleClick = function _M3eTabElement_handleClick(e) {
23293
23513
  }
23294
23514
  };
23295
23515
  /** The styles of the element. */
23296
- M3eTabElement.styles = css`:host { display: inline-block; outline: none; user-select: none; height: calc(var(--_tab-height) + ${DesignToken$1.density.calc(-3)}); font-size: var(--m3e-tab-font-size, ${DesignToken$1.typescale.standard.title.small.fontSize}); font-weight: var(--m3e-tab-font-weight, ${DesignToken$1.typescale.standard.title.small.fontWeight}); line-height: var(--m3e-tab-line-height, ${DesignToken$1.typescale.standard.title.small.lineHeight}); letter-spacing: var(--m3e-tab-tracking, ${DesignToken$1.typescale.standard.title.small.tracking}); flex-grow: var(--_tab-grow); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:disabled)) { cursor: pointer; } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; height: 100%; padding-inline-start: var(--m3e-tab-padding-start, 1.5rem); padding-inline-end: var(--m3e-tab-padding-end, 1.5rem); } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .focus-ring { border-radius: var(--m3e-tab-focus-ring-shape, ${DesignToken$1.shape.corner.large}); } :host([selected]:focus-within) .focus-ring { top: var(--_tab-focus-ring-top-offset, 0); bottom: var(--_tab-focus-ring-bottom-offset, 0); } :host([selected]:not(:disabled)) .base { color: var(--m3e-tab-selected-color, ${DesignToken$1.color.primary}); --m3e-state-layer-hover-color: var(--m3e-tab-selected-container-hover-color, ${DesignToken$1.color.primary}); --m3e-state-layer-focus-color: var(--m3e-tab-selected-container-focus-color, ${DesignToken$1.color.primary}); --m3e-ripple-color: var(--m3e-tab-selected-ripple-color, ${DesignToken$1.color.primary}); } :host(:not([selected]):not(:disabled)) .base { color: var(--m3e-tab-unselected-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-hover-color: var(--m3e-tab-unselected-container-hover-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-tab-unselected-container-focus-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-color: var(--m3e-tab-unselected-ripple-color, ${DesignToken$1.color.onSurface}); } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-tab-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-tab-disabled-opacity, 38%), transparent ); } .wrapper { display: inline-flex; align-items: center; white-space: nowrap; flex-direction: var(--_tab-direction); justify-content: center; column-gap: var(--m3e-tab-spacing, 0.5rem); } ::slotted([slot="icon"]) { width: 1em; font-size: var(--m3e-tab-icon-size, 1.5rem) !important; } @media (forced-colors: active) { :host([selected]:not(:disabled)) .base { color: ButtonText; } :host(:not([selected]):not(:disabled)) .base { color: ButtonText; } :host(:disabled) .base { color: GrayText; } }`;
23516
+ M3eTabElement.styles = css`:host { display: inline-block; outline: none; user-select: none; height: calc(var(--_tab-height) + ${DesignToken$1.density.calc(-3)}); font-size: var(--m3e-tab-font-size, ${DesignToken$1.typescale.standard.title.small.fontSize}); font-weight: var(--m3e-tab-font-weight, ${DesignToken$1.typescale.standard.title.small.fontWeight}); line-height: var(--m3e-tab-line-height, ${DesignToken$1.typescale.standard.title.small.lineHeight}); letter-spacing: var(--m3e-tab-tracking, ${DesignToken$1.typescale.standard.title.small.tracking}); flex-grow: var(--_tab-grow); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:disabled)) { cursor: pointer; } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; height: 100%; padding-inline-start: var(--m3e-tab-padding-start, 1.5rem); padding-inline-end: var(--m3e-tab-padding-end, 1.5rem); } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .focus-ring { border-radius: var(--m3e-tab-focus-ring-shape, ${DesignToken$1.shape.corner.large}); } :host([selected]:focus-within) .focus-ring { top: var(--_tab-focus-ring-top-offset, 0); bottom: var(--_tab-focus-ring-bottom-offset, 0); } :host([selected]:not(:disabled)) .base { color: var(--m3e-tab-selected-color, var(--_tab-selected-color, ${DesignToken$1.color.primary})); --m3e-state-layer-hover-color: var( --m3e-tab-selected-container-hover-color, var(--_tab-selected-container-hover-color, ${DesignToken$1.color.primary}) ); --m3e-state-layer-focus-color: var( --_tab-selected-container-focus-color, var(--m3e-tab-selected-container-focus-color, ${DesignToken$1.color.primary}) ); --m3e-ripple-color: var( --_tab-selected-ripple-color, var(--m3e-tab-selected-ripple-color, ${DesignToken$1.color.primary}) ); } :host(:not([selected]):not(:disabled)) .base { color: var(--m3e-tab-unselected-color, ${DesignToken$1.color.onSurfaceVariant}); --m3e-state-layer-hover-color: var(--m3e-tab-unselected-container-hover-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-tab-unselected-container-focus-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-color: var(--m3e-tab-unselected-ripple-color, ${DesignToken$1.color.onSurface}); } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-tab-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-tab-disabled-opacity, 38%), transparent ); } .wrapper { display: inline-flex; align-items: center; white-space: nowrap; flex-direction: var(--_tab-direction); justify-content: center; column-gap: var(--m3e-tab-spacing, 0.5rem); } ::slotted([slot="icon"]) { width: 1em; font-size: var(--m3e-tab-icon-size, 1.5rem) !important; } @media (forced-colors: active) { :host([selected]:not(:disabled)) .base { color: ButtonText; } :host(:not([selected]):not(:disabled)) .base { color: ButtonText; } :host(:disabled) .base { color: GrayText; } }`;
23297
23517
  /** @private */
23298
23518
  M3eTabElement.__nextId = 0;
23299
23519
  __decorate([e$4(".focus-ring")], M3eTabElement.prototype, "_focusRing", void 0);
@@ -23554,7 +23774,7 @@ _M3eTabsElement_updateInkBar = function _M3eTabsElement_updateInkBar() {
23554
23774
  };
23555
23775
  /** The styles of the element. */
23556
23776
  M3eTabsElement.styles = css`:host { display: flex; flex-direction: column; position: relative; } .tablist { position: relative; box-sizing: border-box; flex: none; } ::slotted(prev-icon), ::slotted(next-icon), .icon { width: 1em; font-size: var(--m3e-tabs-paginator-button-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) !important; } .header { display: flex; flex-direction: column; } .tabs { display: flex; flex-wrap: nowrap; align-items: center; } .ink-bar { box-sizing: border-box; height: var(--_tabs-active-indicator-thickness); } .active-indicator { position: relative; height: var(--_tabs-active-indicator-thickness); left: calc(var(--_tabs-active-tab-position) + var(--_tabs-activate-indicator-inset, 0px)); width: calc(var(--_tabs-active-tab-size) - calc(var(--_tabs-activate-indicator-inset, 0px) * 2)); background-color: var(--m3e-tabs-active-indicator-color, ${DesignToken$1.color.primary}); transition: ${unsafeCSS(`left var(--m3e-slide-animation-duration, ${DesignToken$1.motion.duration.long2}) ${DesignToken$1.motion.easing.standard},
23557
- width var(--m3e-slide-animation-duration, ${DesignToken$1.motion.duration.long2}) ${DesignToken$1.motion.easing.standard}`)}; } :host([header-position="after"]) .header { flex-direction: column-reverse; } :host([header-position="before"]) .ink-bar { margin-top: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="before"]) .tablist { --m3e-slide-group-divider-bottom: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken$1.color.outlineVariant}); } :host([header-position="after"]) .ink-bar { margin-bottom: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="after"]) .tablist { --m3e-slide-group-divider-top: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken$1.color.outlineVariant}); } :host([header-position="before"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-before-active-indicator-shape, ${DesignToken$1.shape.corner.extraSmallTop}); } :host([header-position="after"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-after-active-indicator-shape, ${DesignToken$1.shape.corner.extraSmallBottom}); } .tabs { flex: 1 1 auto; } :host([variant="primary"]) .tablist { --_tabs-activate-indicator-inset: var(--m3e-tabs-primary-active-indicator-inset, 0.125rem); --_tabs-active-indicator-thickness: var(--m3e-tabs-primary-active-indicator-thickness, 0.1875rem); --_tab-height: 4rem; } :host([header-position="before"]) .tablist { --_tab-focus-ring-bottom-offset: calc(var(--_tabs-active-indicator-thickness) + 1px); } :host([header-position="after"]) .tablist { --_tab-focus-ring-top-offset: calc(var(--_tabs-active-indicator-thickness) + 2px); } :host([header-position="before"][variant="primary"]) .tablist { --_tab-direction: column; } :host([header-position="after"][variant="primary"]) .tablist { --_tab-direction: column-reverse; } :host([variant="secondary"]) .tablist { --_tabs-active-indicator-thickness: var(--m3e-tabs-secondary-active-indicator-thickness, 0.125rem); --_tab-height: 3rem; } :host([stretch]) .header { width: 100%; --_tab-grow: 1; } :host(.-no-animate) .active-indicator { transition: none; } @media (prefers-reduced-motion) { .active-indicator { transition: none; } } @media (forced-colors: active) { .active-indicator { background-color: ButtonText; --m3e-divider-color: GrayText; } }`;
23777
+ width var(--m3e-slide-animation-duration, ${DesignToken$1.motion.duration.long2}) ${DesignToken$1.motion.easing.standard}`)}; } :host([header-position="after"]) .header { flex-direction: column-reverse; } :host([header-position="before"]) .ink-bar { margin-top: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="before"]) .tablist { --m3e-slide-group-divider-bottom: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken$1.color.outlineVariant}); } :host([header-position="after"]) .ink-bar { margin-bottom: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="after"]) .tablist { --m3e-slide-group-divider-top: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken$1.color.outlineVariant}); } :host([header-position="before"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-before-active-indicator-shape, ${DesignToken$1.shape.corner.extraSmallTop}); } :host([header-position="after"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-after-active-indicator-shape, ${DesignToken$1.shape.corner.extraSmallBottom}); } .tabs { flex: 1 1 auto; } :host([variant="primary"]) .tablist { --_tabs-activate-indicator-inset: var(--m3e-tabs-primary-active-indicator-inset, 0.125rem); --_tabs-active-indicator-thickness: var(--m3e-tabs-primary-active-indicator-thickness, 3px); --_tab-height: 4rem; } :host([header-position="before"]) .tablist { --_tab-focus-ring-bottom-offset: calc(var(--_tabs-active-indicator-thickness) + 1px); } :host([header-position="after"]) .tablist { --_tab-focus-ring-top-offset: calc(var(--_tabs-active-indicator-thickness) + 2px); } :host([header-position="before"][variant="primary"]) .tablist { --_tab-direction: column; } :host([header-position="after"][variant="primary"]) .tablist { --_tab-direction: column-reverse; } :host([variant="secondary"]) .tablist { --_tabs-active-indicator-thickness: var(--m3e-tabs-secondary-active-indicator-thickness, 2px); --_tab-height: 3rem; --_tab-selected-color: ${DesignToken$1.color.onSurface}; --_tab-selected-container-hover-color: ${DesignToken$1.color.onSurface}; --_tab-selected-container-focus-color: ${DesignToken$1.color.onSurface}; --_tab-selected-ripple-color: ${DesignToken$1.color.onSurface}; } :host([stretch]) .header { width: 100%; --_tab-grow: 1; } :host(.-no-animate) .active-indicator { transition: none; } @media (prefers-reduced-motion) { .active-indicator { transition: none; } } @media (forced-colors: active) { .active-indicator { background-color: ButtonText; --m3e-divider-color: GrayText; } }`;
23558
23778
  __decorate([e$4(".tablist")], M3eTabsElement.prototype, "_tablist", void 0);
23559
23779
  __decorate([r$1()], M3eTabsElement.prototype, "_selectedIndex", void 0);
23560
23780
  __decorate([n$1({
@@ -27739,7 +27959,7 @@ class TooltipElementBase extends HtmlFor$1(LitElement) {
27739
27959
  detach() {
27740
27960
  if (this.control) {
27741
27961
  __classPrivateFieldGet(this, _TooltipElementBase_hoverController, "f").unobserve(this.control);
27742
- __classPrivateFieldGet(this, _TooltipElementBase_longPressController, "f").observe(this.control);
27962
+ __classPrivateFieldGet(this, _TooltipElementBase_longPressController, "f").unobserve(this.control);
27743
27963
  this.control.removeEventListener("click", __classPrivateFieldGet(this, _TooltipElementBase_controlClickHandler, "f"));
27744
27964
  this.hide();
27745
27965
  }