@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/icon-button.js CHANGED
@@ -441,88 +441,88 @@ function e(e, r) {
441
441
  const IconButtonSizeToken = {
442
442
  /** Design tokens that control the `extra-small` `size` variant. */
443
443
  "extra-small": {
444
- containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-container-height, 2rem) + ${DesignToken.density.calc(0)})`),
445
- outlineThickness: unsafeCSS("var(--m3e-icon-button-extra-small-outline-thickness, 1px)"),
446
- iconSize: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-icon-size, 1.25rem) + ${DesignToken.density.calc(0)})`),
447
- shapeRound: unsafeCSS(`var(--m3e-icon-button-extra-small-shape-round, ${DesignToken.shape.corner.full})`),
448
- shapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-small-shape-square, ${DesignToken.shape.corner.medium})`),
449
- selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-extra-small-selected-shape-round, ${DesignToken.shape.corner.medium})`),
450
- selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-small-selected-shape-square, ${DesignToken.shape.corner.full})`),
451
- shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-extra-small-shape-pressed-morph, ${DesignToken.shape.corner.small})`),
452
- narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-narrow-leading-space, 0.25rem) + ${DesignToken.density.calc(0)})`),
453
- narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-narrow-trailing-space, 0.25rem) + ${DesignToken.density.calc(0)})`),
454
- defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-default-leading-space, 0.375rem) + ${DesignToken.density.calc(0)})`),
455
- defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-default-trailing-space, 0.375rem) + ${DesignToken.density.calc(0)})`),
456
- wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-wide-leading-space, 0.625rem) + ${DesignToken.density.calc(0)})`),
457
- wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-wide-trailing-space, 0.625rem) + ${DesignToken.density.calc(0)})`)
444
+ containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-container-height, var(--m3e-icon-button-container-height, 2rem)) + ${DesignToken.density.calc(0)})`),
445
+ outlineThickness: unsafeCSS("var(--m3e-icon-button-extra-small-outline-thickness, var(--m3e-icon-button-outline-thickness, 1px))"),
446
+ iconSize: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-icon-size, var(--m3e-icon-button-icon-size, 1.25rem)) + ${DesignToken.density.calc(0)})`),
447
+ shapeRound: unsafeCSS(`var(--m3e-icon-button-extra-small-shape-round, var(--m3e-icon-button-shape-round, ${DesignToken.shape.corner.full}))`),
448
+ shapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-small-shape-square, var(--m3e-icon-button-shape-square, ${DesignToken.shape.corner.medium}))`),
449
+ selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-extra-small-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${DesignToken.shape.corner.medium}))`),
450
+ selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-small-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${DesignToken.shape.corner.full}))`),
451
+ shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-extra-small-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${DesignToken.shape.corner.small}))`),
452
+ narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 0.25rem)) + ${DesignToken.density.calc(0)})`),
453
+ narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 0.25rem)) + ${DesignToken.density.calc(0)})`),
454
+ defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-default-leading-space, var(--m3e-icon-button-default-leading-space, 0.375rem)) + ${DesignToken.density.calc(0)})`),
455
+ defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 0.375rem)) + ${DesignToken.density.calc(0)})`),
456
+ wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 0.625rem)) + ${DesignToken.density.calc(0)})`),
457
+ wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 0.625rem)) + ${DesignToken.density.calc(0)})`)
458
458
  },
459
459
  /** Design tokens that control the `small` `size` variant. */
460
460
  small: {
461
- containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-small-container-height, 2.5rem) + ${DesignToken.density.calc(-1)})`),
462
- outlineThickness: unsafeCSS("var(--m3e-icon-button-small-outline-thickness, 1px)"),
463
- iconSize: unsafeCSS(`calc(var(--m3e-icon-button-small-icon-size, 1.5rem) + ${DesignToken.density.calc(-1)})`),
464
- shapeRound: unsafeCSS(`var(--m3e-icon-button-small-shape-round, ${DesignToken.shape.corner.full})`),
465
- shapeSquare: unsafeCSS(`var(--m3e-icon-button-small-shape-square, ${DesignToken.shape.corner.medium})`),
466
- selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-small-selected-shape-round, ${DesignToken.shape.corner.medium})`),
467
- selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-small-selected-shape-square, ${DesignToken.shape.corner.full})`),
468
- shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-small-shape-pressed-morph, ${DesignToken.shape.corner.small})`),
469
- narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-narrow-leading-space, 0.25rem) + ${DesignToken.density.calc(-1)})`),
470
- narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-narrow-trailing-space, 0.25rem) + ${DesignToken.density.calc(-1)})`),
471
- defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-default-leading-space, 0.5rem) + ${DesignToken.density.calc(-1)})`),
472
- defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-default-trailing-space, 0.5rem) + ${DesignToken.density.calc(-1)})`),
473
- wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-wide-leading-space, 0.875rem) + ${DesignToken.density.calc(-1)})`),
474
- wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-wide-trailing-space, 0.875rem) + ${DesignToken.density.calc(-1)})`)
461
+ containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-small-container-height, var(--m3e-icon-button-container-height, 2.5rem)) + ${DesignToken.density.calc(-1)})`),
462
+ outlineThickness: unsafeCSS("var(--m3e-icon-button-small-outline-thickness, var(--m3e-icon-button-outline-thickness, 1px))"),
463
+ iconSize: unsafeCSS(`calc(var(--m3e-icon-button-small-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) + ${DesignToken.density.calc(-1)})`),
464
+ shapeRound: unsafeCSS(`var(--m3e-icon-button-small-shape-round, var(--m3e-icon-button-shape-round, ${DesignToken.shape.corner.full}))`),
465
+ shapeSquare: unsafeCSS(`var(--m3e-icon-button-small-shape-square, var(--m3e-icon-button-shape-square, ${DesignToken.shape.corner.medium}))`),
466
+ selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-small-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${DesignToken.shape.corner.medium}))`),
467
+ selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-small-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${DesignToken.shape.corner.full}))`),
468
+ shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-small-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${DesignToken.shape.corner.small}))`),
469
+ narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 0.25rem)) + ${DesignToken.density.calc(-1)})`),
470
+ narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 0.25rem)) + ${DesignToken.density.calc(-1)})`),
471
+ defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-default-leading-space, var(--m3e-icon-button-default-leading-space, 0.5rem)) + ${DesignToken.density.calc(-1)})`),
472
+ defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 0.5rem)) + ${DesignToken.density.calc(-1)})`),
473
+ wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 0.875rem)) + ${DesignToken.density.calc(-1)})`),
474
+ wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 0.875rem)) + ${DesignToken.density.calc(-1)})`)
475
475
  },
476
476
  /** Design tokens that control the `medium` `size` variant. */
477
477
  medium: {
478
- containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-medium-container-height, 3.5rem) + ${DesignToken.density.calc(-2)})`),
479
- outlineThickness: unsafeCSS("var(--m3e-icon-button-medium-outline-thickness, 1px)"),
480
- iconSize: unsafeCSS(`calc(var(--m3e-icon-button-medium-icon-size, 1.5rem) + ${DesignToken.density.calc(-2)})`),
481
- shapeRound: unsafeCSS(`var(--m3e-icon-button-medium-shape-round, ${DesignToken.shape.corner.full})`),
482
- shapeSquare: unsafeCSS(`var(--m3e-icon-button-medium-shape-square, ${DesignToken.shape.corner.large})`),
483
- selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-medium-selected-shape-round, ${DesignToken.shape.corner.large})`),
484
- selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-medium-selected-shape-square, ${DesignToken.shape.corner.full})`),
485
- shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-medium-shape-pressed-morph, ${DesignToken.shape.corner.medium})`),
486
- narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-narrow-leading-space, 0.75rem) + ${DesignToken.density.calc(-2)})`),
487
- narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-narrow-trailing-space, 0.75rem) + ${DesignToken.density.calc(-2)})`),
488
- defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-default-leading-space, 1rem) + ${DesignToken.density.calc(-2)})`),
489
- defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-default-trailing-space, 1rem) + ${DesignToken.density.calc(-2)})`),
490
- wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-wide-leading-space, 1.5rem) + ${DesignToken.density.calc(-2)})`),
491
- wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-wide-trailing-space, 1.5rem) + ${DesignToken.density.calc(-2)})`)
478
+ containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-medium-container-height, var(--m3e-icon-button-container-height, 3.5rem)) + ${DesignToken.density.calc(-2)})`),
479
+ outlineThickness: unsafeCSS("var(--m3e-icon-button-medium-outline-thickness, var(--m3e-icon-button-outline-thickness, 1px))"),
480
+ iconSize: unsafeCSS(`calc(var(--m3e-icon-button-medium-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) + ${DesignToken.density.calc(-2)})`),
481
+ shapeRound: unsafeCSS(`var(--m3e-icon-button-medium-shape-round, var(--m3e-icon-button-shape-round, ${DesignToken.shape.corner.full}))`),
482
+ shapeSquare: unsafeCSS(`var(--m3e-icon-button-medium-shape-square, var(--m3e-icon-button-shape-square, ${DesignToken.shape.corner.large}))`),
483
+ selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-medium-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${DesignToken.shape.corner.large}))`),
484
+ selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-medium-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${DesignToken.shape.corner.full}))`),
485
+ shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-medium-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${DesignToken.shape.corner.medium}))`),
486
+ narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 0.75rem)) + ${DesignToken.density.calc(-2)})`),
487
+ narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 0.75rem)) + ${DesignToken.density.calc(-2)})`),
488
+ defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-default-leading-space, var(--m3e-icon-button-default-leading-space, 1rem)) + ${DesignToken.density.calc(-2)})`),
489
+ defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 1rem)) + ${DesignToken.density.calc(-2)})`),
490
+ wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 1.5rem)) + ${DesignToken.density.calc(-2)})`),
491
+ wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 1.5rem)) + ${DesignToken.density.calc(-2)})`)
492
492
  },
493
493
  /** Design tokens that control the `large` `size` variant. */
494
494
  large: {
495
- containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-large-container-height, 6rem) + ${DesignToken.density.calc(-3)})`),
496
- outlineThickness: unsafeCSS("var(--m3e-icon-button-large-outline-thickness, 0.125rem)"),
497
- iconSize: unsafeCSS(`calc(var(--m3e-icon-button-large-icon-size, 2rem) + ${DesignToken.density.calc(-3)})`),
498
- shapeRound: unsafeCSS(`var(--m3e-icon-button-large-shape-round, ${DesignToken.shape.corner.full})`),
499
- shapeSquare: unsafeCSS(`var(--m3e-icon-button-large-shape-square, ${DesignToken.shape.corner.extraLarge})`),
500
- selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-large-selected-shape-round, ${DesignToken.shape.corner.extraLarge})`),
501
- selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-large-selected-shape-square, ${DesignToken.shape.corner.full})`),
502
- shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-large-shape-pressed-morph, ${DesignToken.shape.corner.large})`),
503
- narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-narrow-leading-space, 1rem) + ${DesignToken.density.calc(-3)})`),
504
- narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-narrow-trailing-space, 1rem) + ${DesignToken.density.calc(-3)})`),
505
- defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-default-leading-space, 2rem) + ${DesignToken.density.calc(-3)})`),
506
- defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-default-trailing-space, 2rem) + ${DesignToken.density.calc(-3)})`),
507
- wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-wide-leading-space, 3rem) + ${DesignToken.density.calc(-3)})`),
508
- wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-wide-trailing-space, 3rem) + ${DesignToken.density.calc(-3)})`)
495
+ containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-large-container-height, var(--m3e-icon-button-container-height, 6rem)) + ${DesignToken.density.calc(-3)})`),
496
+ outlineThickness: unsafeCSS("var(--m3e-icon-button-large-outline-thickness, var(--m3e-icon-button-outline-thickness, 2px))"),
497
+ iconSize: unsafeCSS(`calc(var(--m3e-icon-button-large-icon-size, var(--m3e-icon-button-icon-size, 2rem)) + ${DesignToken.density.calc(-3)})`),
498
+ shapeRound: unsafeCSS(`var(--m3e-icon-button-large-shape-round, var(--m3e-icon-button-shape-round, ${DesignToken.shape.corner.full}))`),
499
+ shapeSquare: unsafeCSS(`var(--m3e-icon-button-large-shape-square, var(--m3e-icon-button-shape-square, ${DesignToken.shape.corner.extraLarge}))`),
500
+ selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-large-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${DesignToken.shape.corner.extraLarge}))`),
501
+ selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-large-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${DesignToken.shape.corner.full}))`),
502
+ shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-large-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${DesignToken.shape.corner.large}))`),
503
+ narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 1rem)) + ${DesignToken.density.calc(-3)})`),
504
+ narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 1rem)) + ${DesignToken.density.calc(-3)})`),
505
+ defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-default-leading-space, var(--m3e-icon-button-default-leading-space, 2rem)) + ${DesignToken.density.calc(-3)})`),
506
+ defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 2rem)) + ${DesignToken.density.calc(-3)})`),
507
+ wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 3rem)) + ${DesignToken.density.calc(-3)})`),
508
+ wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 3rem)) + ${DesignToken.density.calc(-3)})`)
509
509
  },
510
510
  /** Design tokens that control the `extra-large` `size` variant. */
511
511
  "extra-large": {
512
- containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-container-height, 8.5rem) + ${DesignToken.density.calc(-3)})`),
513
- outlineThickness: unsafeCSS("var(--m3e-icon-button-extra-large-outline-thickness, 0.1875rem)"),
514
- iconSize: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-icon-size, 2.5rem) + ${DesignToken.density.calc(-3)})`),
515
- shapeRound: unsafeCSS(`var(--m3e-icon-button-extra-large-shape-round, ${DesignToken.shape.corner.full})`),
516
- shapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-large-shape-square, ${DesignToken.shape.corner.extraLarge})`),
517
- selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-extra-large-selected-shape-round, ${DesignToken.shape.corner.extraLarge})`),
518
- selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-large-selected-shape-square, ${DesignToken.shape.corner.full})`),
519
- shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-extra-large-shape-pressed-morph, ${DesignToken.shape.corner.large})`),
520
- narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-narrow-leading-space, 2rem) + ${DesignToken.density.calc(-3)})`),
521
- narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-narrow-trailing-space, 2rem) + ${DesignToken.density.calc(-3)})`),
522
- defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-default-leading-space, 3rem) + ${DesignToken.density.calc(-3)})`),
523
- defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-default-trailing-space, 3rem) + ${DesignToken.density.calc(-3)})`),
524
- wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-wide-leading-space, 4.5rem) + ${DesignToken.density.calc(-3)})`),
525
- wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-wide-trailing-space, 4.5rem) + ${DesignToken.density.calc(-3)})`)
512
+ containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-container-height, var(--m3e-icon-button-container-height, 8.5rem)) + ${DesignToken.density.calc(-3)})`),
513
+ outlineThickness: unsafeCSS("var(--m3e-icon-button-extra-large-outline-thickness, var(--m3e-icon-button-outline-thickness, 3px))"),
514
+ iconSize: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-icon-size, var(--m3e-icon-button-icon-size, 2.5rem)) + ${DesignToken.density.calc(-3)})`),
515
+ shapeRound: unsafeCSS(`var(--m3e-icon-button-extra-large-shape-round, var(--m3e-icon-button-shape-round, ${DesignToken.shape.corner.full}))`),
516
+ shapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-large-shape-square, var(--m3e-icon-button-shape-square, ${DesignToken.shape.corner.extraLarge}))`),
517
+ selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-extra-large-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${DesignToken.shape.corner.extraLarge}))`),
518
+ selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-large-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${DesignToken.shape.corner.full}))`),
519
+ shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-extra-large-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${DesignToken.shape.corner.large}))`),
520
+ narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 2rem)) + ${DesignToken.density.calc(-3)})`),
521
+ narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 2rem)) + ${DesignToken.density.calc(-3)})`),
522
+ defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-default-leading-space, var(--m3e-icon-button-default-leading-space, 3rem)) + ${DesignToken.density.calc(-3)})`),
523
+ defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 3rem)) + ${DesignToken.density.calc(-3)})`),
524
+ wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 4.5rem)) + ${DesignToken.density.calc(-3)})`),
525
+ wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 4.5rem)) + ${DesignToken.density.calc(-3)})`)
526
526
  }
527
527
  };
528
528
 
@@ -541,7 +541,7 @@ const IconButtonSizeStyle = [iconButtonStyle("extra-small"), iconButtonStyle("sm
541
541
  * @internal
542
542
  */
543
543
  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.motion.duration.short4} ${DesignToken.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.motion.duration.short4} ${DesignToken.motion.easing.standard},
544
- border-radius ${DesignToken.motion.spring.fastEffects}`)}; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; transition: ${unsafeCSS(`padding-inline ${DesignToken.motion.spring.fastEffects}`)}; } .icon { transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.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.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.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; } }`;
544
+ border-radius ${DesignToken.motion.spring.fastEffects}`)}; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; transition: ${unsafeCSS(`padding-inline ${DesignToken.motion.spring.fastEffects}`)}; } .icon { transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.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.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.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; } }`;
545
545
 
546
546
  /**
547
547
  * Component design tokens that control the appearance variants of `M3eIconButtonElement`.
@@ -551,396 +551,396 @@ const IconButtonVariantToken = {
551
551
  /** Design tokens that control the `elevated` variant. */
552
552
  elevated: {
553
553
  /** Default icon color. */
554
- iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-icon-color, ${DesignToken.color.primary})`),
554
+ iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-icon-color, var(--m3e-icon-button-icon-color, ${DesignToken.color.primary}))`),
555
555
  /** Default container background color. */
556
- containerColor: unsafeCSS(`var(--m3e-elevated-icon-button-container-color, ${DesignToken.color.surfaceContainerLow})`),
556
+ containerColor: unsafeCSS(`var(--m3e-elevated-icon-button-container-color, var(--m3e-icon-button-container-color, ${DesignToken.color.surfaceContainerLow}))`),
557
557
  /** Resting elevation. */
558
- containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-container-elevation, ${DesignToken.elevation.level1})`),
558
+ containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-container-elevation, var(--m3e-icon-button-container-elevation, ${DesignToken.elevation.level1}))`),
559
559
  /** Unselected icon color. */
560
- unselectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-unselected-icon-color, ${DesignToken.color.primary})`),
560
+ unselectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-unselected-icon-color, var(--m3e-icon-button-unselected-icon-color, ${DesignToken.color.primary}))`),
561
561
  /** Unselected container background color. */
562
- unselectedContainerColor: unsafeCSS(`var(--m3e-elevated-icon-button-unselected-container-color, ${DesignToken.color.surfaceContainerLow})`),
562
+ unselectedContainerColor: unsafeCSS(`var(--m3e-elevated-icon-button-unselected-container-color, var(--m3e-icon-button-unselected-container-color, ${DesignToken.color.surfaceContainerLow}))`),
563
563
  /** Selected icon color. */
564
- selectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-selected-icon-color, ${DesignToken.color.onPrimary})`),
564
+ selectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-selected-icon-color, var(--m3e-icon-button-selected-icon-color, ${DesignToken.color.onPrimary}))`),
565
565
  /** Selected container background color. */
566
- selectedContainerColor: unsafeCSS(`var(--m3e-elevated-icon-button-selected-container-color, ${DesignToken.color.primary})`),
566
+ selectedContainerColor: unsafeCSS(`var(--m3e-elevated-icon-button-selected-container-color, var(--m3e-icon-button-selected-container-color, ${DesignToken.color.primary}))`),
567
567
  /** Design tokens that control disabled state. */
568
568
  disabled: {
569
569
  /** Container background color when disabled. */
570
- containerColor: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-container-color, ${DesignToken.color.onSurface})`),
570
+ containerColor: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-container-color, var(--m3e-icon-button-disabled-container-color, ${DesignToken.color.onSurface}))`),
571
571
  /** Opacity of container when disabled. */
572
- containerOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-container-opacity, 10%)`),
572
+ containerOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-container-opacity, var(--m3e-icon-button-disabled-container-opacity, 10%))`),
573
573
  /** Icon color when disabled. */
574
- iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-icon-color, ${DesignToken.color.onSurface})`),
574
+ iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-icon-color, var(--m3e-icon-button-disabled-icon-color, ${DesignToken.color.onSurface}))`),
575
575
  /** Icon opacity when disabled. */
576
- iconOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-icon-opacity, 38%)`),
576
+ iconOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-icon-opacity, var(--m3e-icon-button-disabled-icon-opacity, 38%))`),
577
577
  /** Elevation when disabled. */
578
- containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-container-elevation, ${DesignToken.elevation.level0})`)
578
+ containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-container-elevation, var(--m3e-icon-button-disabled-container-elevation, ${DesignToken.elevation.level0}))`)
579
579
  },
580
580
  /** Design tokens that control hover state. */
581
581
  hover: {
582
582
  /** Icon color on hover. */
583
- iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-icon-color, ${DesignToken.color.primary})`),
583
+ iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-icon-color, var(--m3e-icon-button-hover-icon-color, ${DesignToken.color.primary}))`),
584
584
  /** State layer color on hover. */
585
- stateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-state-layer-color, ${DesignToken.color.primary})`),
585
+ stateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-state-layer-color, var(--m3e-icon-button-hover-state-layer-color, ${DesignToken.color.primary}))`),
586
586
  /** State layer opacity on hover. */
587
- stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
587
+ stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-hover-state-layer-opacity, var(--m3e-icon-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`),
588
588
  /** Elevation on hover. */
589
- containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-hover-container-elevation, ${DesignToken.elevation.level2})`),
589
+ containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-hover-container-elevation, var(--m3e-icon-button-hover-container-elevation, ${DesignToken.elevation.level2}))`),
590
590
  /** Unselected icon color on hover. */
591
- unselectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-unselected-icon-color, ${DesignToken.color.primary})`),
591
+ unselectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-unselected-icon-color, var(--m3e-icon-button-hover-unselected-icon-color, ${DesignToken.color.primary}))`),
592
592
  /** Unselected state layer color on hover. */
593
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-unselected-state-layer-color, ${DesignToken.color.primary})`),
593
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-unselected-state-layer-color, var(--m3e-icon-button-hover-unselected-state-layer-color, ${DesignToken.color.primary}))`),
594
594
  /** Selected icon color on hover. */
595
- selectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-selected-icon-color, ${DesignToken.color.onPrimary})`),
595
+ selectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-selected-icon-color, var(--m3e-icon-button-hover-selected-icon-color, ${DesignToken.color.onPrimary}))`),
596
596
  /** Selected ripple color on hover. */
597
- selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-selected-state-layer-color, ${DesignToken.color.onPrimary})`)
597
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-selected-state-layer-color, var(--m3e-icon-button-hover-selected-state-layer-color, ${DesignToken.color.onPrimary}))`)
598
598
  },
599
599
  /** Design tokens that control focus state. */
600
600
  focus: {
601
601
  /** Icon color on focus. */
602
- iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-icon-color, ${DesignToken.color.primary})`),
602
+ iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-icon-color, var(--m3e-icon-button-focus-icon-color, ${DesignToken.color.primary}))`),
603
603
  /** State layer color on focus. */
604
- stateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-state-layer-color, ${DesignToken.color.primary})`),
604
+ stateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-state-layer-color, var(--m3e-icon-button-focus-state-layer-color, ${DesignToken.color.primary}))`),
605
605
  /**State layer opacity on focus. */
606
- stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
606
+ stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-focus-state-layer-opacity, var(--m3e-icon-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`),
607
607
  /** Elevation on focus. */
608
- containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-focus-container-elevation, ${DesignToken.elevation.level1})`),
608
+ containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-focus-container-elevation, var(--m3e-icon-button-focus-container-elevation, ${DesignToken.elevation.level1}))`),
609
609
  /** Unselected icon color on focus. */
610
- unselectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-unselected-icon-color, ${DesignToken.color.primary})`),
610
+ unselectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-unselected-icon-color, var(--m3e-icon-button-focus-unselected-icon-color, ${DesignToken.color.primary}))`),
611
611
  /** Unselected ripple color on focus. */
612
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-unselected-state-layer-color, ${DesignToken.color.primary})`),
612
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-unselected-state-layer-color, var(--m3e-icon-button-focus-unselected-state-layer-color, ${DesignToken.color.primary}))`),
613
613
  /** Selected icon color on focus. */
614
- selectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-selected-icon-color, ${DesignToken.color.onPrimary})`),
614
+ selectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-selected-icon-color, var(--m3e-icon-button-focus-selected-icon-color, ${DesignToken.color.onPrimary}))`),
615
615
  /** Selected ripple color on focus. */
616
- selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-selected-state-layer-color, ${DesignToken.color.onPrimary})`)
616
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-selected-state-layer-color, var(--m3e-icon-button-focus-selected-state-layer-color, ${DesignToken.color.onPrimary}))`)
617
617
  },
618
618
  /** Design tokens that control pressed state. */
619
619
  pressed: {
620
620
  /** Icon color on pressed. */
621
- iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-icon-color, ${DesignToken.color.primary})`),
621
+ iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-icon-color, var(--m3e-icon-button-pressed-icon-color, ${DesignToken.color.primary}))`),
622
622
  /** State layer color on pressed. */
623
- stateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-state-layer-color, ${DesignToken.color.primary})`),
623
+ stateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-state-layer-color, var(--m3e-icon-button-pressed-state-layer-color, ${DesignToken.color.primary}))`),
624
624
  /** State layer opacity on pressed. */
625
- stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
625
+ stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-state-layer-opacity, var(--m3e-icon-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`),
626
626
  /** Elevation on pressed. */
627
- containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-container-elevation, ${DesignToken.elevation.level1})`),
627
+ containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-container-elevation, var(--m3e-icon-button-pressed-container-elevation, ${DesignToken.elevation.level1}))`),
628
628
  /** Unselected icon color on pressed. */
629
- unselectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-unselected-icon-color, ${DesignToken.color.primary})`),
629
+ unselectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-unselected-icon-color, var(--m3e-icon-button-pressed-unselected-icon-color, ${DesignToken.color.primary}))`),
630
630
  /** Unselected ripple color on pressed. */
631
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-unselected-state-layer-color, ${DesignToken.color.primary})`),
631
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-unselected-state-layer-color, var(--m3e-icon-button-pressed-unselected-state-layer-color, ${DesignToken.color.primary}))`),
632
632
  /** Selected icon color on pressed. */
633
- selectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-selected-icon-color, ${DesignToken.color.onPrimary})`),
633
+ selectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-selected-icon-color, var(--m3e-icon-button-pressed-selected-icon-color, ${DesignToken.color.onPrimary}))`),
634
634
  /** Selected ripple color on pressed. */
635
- selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-selected-state-layer-color, ${DesignToken.color.onPrimary})`)
635
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-selected-state-layer-color, var(--m3e-icon-button-pressed-selected-state-layer-color, ${DesignToken.color.onPrimary}))`)
636
636
  }
637
637
  },
638
638
  /** Design tokens that control the `outlined` variant. */
639
639
  outlined: {
640
640
  /** Default icon color. */
641
- iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-icon-color, ${DesignToken.color.onSurfaceVariant})`),
641
+ iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-icon-color, var(--m3e-icon-button-icon-color, ${DesignToken.color.onSurfaceVariant}))`),
642
642
  /** Default outline color. */
643
- outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-outline-color, ${DesignToken.color.outlineVariant})`),
643
+ outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-outline-color, var(--m3e-icon-button-outline-color, ${DesignToken.color.outlineVariant}))`),
644
644
  /** Unselected icon color. */
645
- unselectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
645
+ unselectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-unselected-icon-color, var(--m3e-icon-button-unselected-icon-color, ${DesignToken.color.onSurfaceVariant}))`),
646
646
  /** Selected icon color. */
647
- selectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-selected-icon-color, ${DesignToken.color.inverseOnSurface})`),
647
+ selectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-selected-icon-color, var(--m3e-icon-button-selected-icon-color, ${DesignToken.color.inverseOnSurface}))`),
648
648
  /** Selected container background color. */
649
- selectedContainerColor: unsafeCSS(`var(--m3e-outlined-icon-button-selected-container-color, ${DesignToken.color.inverseSurface})`),
649
+ selectedContainerColor: unsafeCSS(`var(--m3e-outlined-icon-button-selected-container-color, var(--m3e-icon-button-selected-container-color, ${DesignToken.color.inverseSurface}))`),
650
650
  /** Design tokens that control disabled state. */
651
651
  disabled: {
652
652
  /** Container background color when disabled. */
653
- containerColor: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-container-color, ${DesignToken.color.onSurface})`),
653
+ containerColor: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-container-color, var(--m3e-icon-button-disabled-container-color, ${DesignToken.color.onSurface}))`),
654
654
  /** Opacity of container when disabled. */
655
- containerOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-container-opacity, 10%)`),
655
+ containerOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-container-opacity, var(--m3e-icon-button-disabled-container-opacity, 10%))`),
656
656
  /** Icon color when disabled. */
657
- iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-icon-color, ${DesignToken.color.onSurface})`),
657
+ iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-icon-color, var(--m3e-icon-button-disabled-icon-color, ${DesignToken.color.onSurface}))`),
658
658
  /** Icon opacity when disabled. */
659
- iconOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-icon-opacity, 38%)`),
659
+ iconOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-icon-opacity, var(--m3e-icon-button-disabled-icon-opacity, 38%))`),
660
660
  /** Outline color when disabled. */
661
- outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-outline-color, ${DesignToken.color.outlineVariant})`)
661
+ outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-outline-color, var(--m3e-icon-button-disabled-outline-color, ${DesignToken.color.outlineVariant}))`)
662
662
  },
663
663
  /** Design tokens that control hover state. */
664
664
  hover: {
665
665
  /** Icon color on hover. */
666
- iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-icon-color, ${DesignToken.color.onSurfaceVariant})`),
666
+ iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-icon-color, var(--m3e-icon-button-hover-icon-color, ${DesignToken.color.onSurfaceVariant}))`),
667
667
  /** Outline color on hover. */
668
- outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-outline-color, ${DesignToken.color.outlineVariant})`),
668
+ outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-outline-color, var(--m3e-icon-button-hover-outline-color, ${DesignToken.color.outlineVariant}))`),
669
669
  /** State layer color on hover. */
670
- stateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
670
+ stateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-state-layer-color, var(--m3e-icon-button-hover-state-layer-color, ${DesignToken.color.onSurfaceVariant}))`),
671
671
  /** State layer opacity on hover. */
672
- stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
672
+ stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-hover-state-layer-opacity, var(--m3e-icon-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`),
673
673
  /** Unselected icon color on hover. */
674
- unselectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
674
+ unselectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-unselected-icon-color, var(--m3e-icon-button-hover-unselected-icon-color, ${DesignToken.color.onSurfaceVariant}))`),
675
675
  /** Unselected state layer color on hover. */
676
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
676
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-unselected-state-layer-color, var(--m3e-icon-button-hover-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant}))`),
677
677
  /** Selected icon color on hover. */
678
- selectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-selected-icon-color, ${DesignToken.color.inverseOnSurface})`),
678
+ selectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-selected-icon-color, var(--m3e-icon-button-hover-selected-icon-color, ${DesignToken.color.inverseOnSurface}))`),
679
679
  /** Selected state layer color on hover. */
680
- selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-selected-state-layer-color, ${DesignToken.color.inverseOnSurface})`)
680
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-selected-state-layer-color, var(--m3e-icon-button-hover-selected-state-layer-color, ${DesignToken.color.inverseOnSurface}))`)
681
681
  },
682
682
  /** Design tokens that control focus state. */
683
683
  focus: {
684
684
  /** Icon color on focus. */
685
- iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-icon-color, ${DesignToken.color.onSurfaceVariant})`),
685
+ iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-icon-color, var(--m3e-icon-button-focus-icon-color, ${DesignToken.color.onSurfaceVariant}))`),
686
686
  /** Outline color on focus. */
687
- outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-outline-color, ${DesignToken.color.outlineVariant})`),
687
+ outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-outline-color, var(--m3e-icon-button-focus-outline-color, ${DesignToken.color.outlineVariant}))`),
688
688
  /** State layer color on focus. */
689
- stateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
689
+ stateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-state-layer-color, var(--m3e-icon-button-focus-state-layer-color, ${DesignToken.color.onSurfaceVariant}))`),
690
690
  /**State layer opacity on focus. */
691
- stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
691
+ stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-focus-state-layer-opacity, var(--m3e-icon-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`),
692
692
  /** Unselected icon color on focus. */
693
- unselectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
693
+ unselectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-unselected-icon-color, var(--m3e-icon-button-focus-unselected-icon-color, ${DesignToken.color.onSurfaceVariant}))`),
694
694
  /** Unselected state layer color on focus. */
695
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
695
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-unselected-state-layer-color, var(--m3e-icon-button-focus-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant}))`),
696
696
  /** Selected icon color on focus. */
697
- selectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-selected-icon-color, ${DesignToken.color.inverseOnSurface})`),
697
+ selectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-selected-icon-color, var(--m3e-icon-button-focus-selected-icon-color, ${DesignToken.color.inverseOnSurface}))`),
698
698
  /** Selected state layer color on focus. */
699
- selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-selected-state-layer-color, ${DesignToken.color.inverseOnSurface})`)
699
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-selected-state-layer-color, var(--m3e-icon-button-focus-selected-state-layer-color, ${DesignToken.color.inverseOnSurface}))`)
700
700
  },
701
701
  /** Design tokens that control pressed state. */
702
702
  pressed: {
703
703
  /** Icon color on pressed. */
704
- iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-icon-color, ${DesignToken.color.onSurfaceVariant})`),
704
+ iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-icon-color, var(--m3e-icon-button-pressed-icon-color, ${DesignToken.color.onSurfaceVariant}))`),
705
705
  /** Outline color on pressed. */
706
- outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-outline-color, ${DesignToken.color.outlineVariant})`),
706
+ outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-outline-color, var(--m3e-icon-button-pressed-outline-color, ${DesignToken.color.outlineVariant}))`),
707
707
  /** State layer color on pressed. */
708
- stateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
708
+ stateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-state-layer-color, var(--m3e-icon-button-pressed-state-layer-color, ${DesignToken.color.onSurfaceVariant}))`),
709
709
  /** State layer opacity on pressed. */
710
- stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
710
+ stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-state-layer-opacity, var(--m3e-icon-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`),
711
711
  /** Unselected icon color on pressed. */
712
- unselectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
712
+ unselectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-unselected-icon-color, var(--m3e-icon-button-pressed-unselected-icon-color, ${DesignToken.color.onSurfaceVariant}))`),
713
713
  /** Unselected state layer color on pressed. */
714
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
714
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-unselected-state-layer-color, var(--m3e-icon-button-pressed-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant}))`),
715
715
  /** Selected icon color on pressed. */
716
- selectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-selected-icon-color, ${DesignToken.color.inverseOnSurface})`),
716
+ selectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-selected-icon-color, var(--m3e-icon-button-pressed-selected-icon-color, ${DesignToken.color.inverseOnSurface}))`),
717
717
  /** Selected state layer color on pressed. */
718
- selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-selected-state-layer-color, ${DesignToken.color.inverseOnSurface})`)
718
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-selected-state-layer-color, var(--m3e-icon-button-pressed-selected-state-layer-color, ${DesignToken.color.inverseOnSurface}))`)
719
719
  }
720
720
  },
721
721
  /** Design tokens that control the `filled` variant. */
722
722
  filled: {
723
723
  /** Default icon color. */
724
- iconColor: unsafeCSS(`var(--m3e-filled-icon-button-icon-color, ${DesignToken.color.onPrimary})`),
724
+ iconColor: unsafeCSS(`var(--m3e-filled-icon-button-icon-color, var(--m3e-icon-button-icon-color, ${DesignToken.color.onPrimary}))`),
725
725
  /** Default container background color. */
726
- containerColor: unsafeCSS(`var(--m3e-filled-icon-button-container-color, ${DesignToken.color.primary})`),
726
+ containerColor: unsafeCSS(`var(--m3e-filled-icon-button-container-color, var(--m3e-icon-button-container-color, ${DesignToken.color.primary}))`),
727
727
  /** Unselected icon color. */
728
- unselectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
728
+ unselectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-unselected-icon-color, var(--m3e-icon-button-unselected-icon-color, ${DesignToken.color.onSurfaceVariant}))`),
729
729
  /** Unselected container background color. */
730
- unselectedContainerColor: unsafeCSS(`var(--m3e-filled-icon-button-unselected-container-color, ${DesignToken.color.surfaceContainer})`),
730
+ unselectedContainerColor: unsafeCSS(`var(--m3e-filled-icon-button-unselected-container-color, var(--m3e-icon-button-unselected-container-color, ${DesignToken.color.surfaceContainer}))`),
731
731
  /** Selected icon color. */
732
- selectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-selected-icon-color, ${DesignToken.color.onPrimary})`),
732
+ selectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-selected-icon-color, var(--m3e-icon-button-selected-icon-color, ${DesignToken.color.onPrimary}))`),
733
733
  /** Selected container background color. */
734
- selectedContainerColor: unsafeCSS(`var(--m3e-filled-icon-button-selected-container-color, ${DesignToken.color.primary})`),
734
+ selectedContainerColor: unsafeCSS(`var(--m3e-filled-icon-button-selected-container-color, var(--m3e-icon-button-selected-container-color, ${DesignToken.color.primary}))`),
735
735
  /** Design tokens that control disabled state. */
736
736
  disabled: {
737
737
  /** Container background color when disabled. */
738
- containerColor: unsafeCSS(`var(--m3e-filled-icon-button-disabled-container-color, ${DesignToken.color.onSurface})`),
738
+ containerColor: unsafeCSS(`var(--m3e-filled-icon-button-disabled-container-color, var(--m3e-icon-button-disabled-container-color, ${DesignToken.color.onSurface}))`),
739
739
  /** Opacity of container when disabled. */
740
- containerOpacity: unsafeCSS(`var(--m3e-filled-icon-button-disabled-container-opacity, 10%)`),
740
+ containerOpacity: unsafeCSS(`var(--m3e-filled-icon-button-disabled-container-opacity, var(--m3e-icon-button-disabled-container-opacity, 10%))`),
741
741
  /** Icon color when disabled. */
742
- iconColor: unsafeCSS(`var(--m3e-filled-icon-button-disabled-icon-color, ${DesignToken.color.onSurface})`),
742
+ iconColor: unsafeCSS(`var(--m3e-filled-icon-button-disabled-icon-color, var(--m3e-icon-button-disabled-icon-color, ${DesignToken.color.onSurface}))`),
743
743
  /** Icon opacity when disabled. */
744
- iconOpacity: unsafeCSS(`var(--m3e-filled-icon-button-disabled-icon-opacity, 38%)`)
744
+ iconOpacity: unsafeCSS(`var(--m3e-filled-icon-button-disabled-icon-opacity, var(--m3e-icon-button-disabled-icon-opacity, 38%))`)
745
745
  },
746
746
  /** Design tokens that control hover state. */
747
747
  hover: {
748
748
  /** Icon color on hover. */
749
- iconColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-icon-color, ${DesignToken.color.onPrimary})`),
749
+ iconColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-icon-color, var(--m3e-icon-button-hover-icon-color, ${DesignToken.color.onPrimary}))`),
750
750
  /** State layer color on hover. */
751
- stateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-state-layer-color, ${DesignToken.color.onPrimary})`),
751
+ stateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-state-layer-color, var(--m3e-icon-button-hover-state-layer-color, ${DesignToken.color.onPrimary}))`),
752
752
  /** State layer opacity on hover. */
753
- stateLayerOpacity: unsafeCSS(`var(--m3e-filled-icon-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
753
+ stateLayerOpacity: unsafeCSS(`var(--m3e-filled-icon-button-hover-state-layer-opacity, var(--m3e-icon-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`),
754
754
  /** Unselected icon color on hover. */
755
- unselectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
755
+ unselectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-unselected-icon-color, var(--m3e-icon-button-hover-unselected-icon-color, ${DesignToken.color.onSurfaceVariant}))`),
756
756
  /** Unselected state layer color on hover. */
757
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
757
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-unselected-state-layer-color, var(--m3e-icon-button-hover-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant}))`),
758
758
  /** Selected icon color on hover. */
759
- selectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-selected-icon-color, ${DesignToken.color.onPrimary})`),
759
+ selectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-selected-icon-color, var(--m3e-icon-button-hover-selected-icon-color, ${DesignToken.color.onPrimary}))`),
760
760
  /** Selected state layer color on hover. */
761
- selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-selected-state-layer-color, ${DesignToken.color.onPrimary})`)
761
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-selected-state-layer-color, var(--m3e-icon-button-hover-selected-state-layer-color, ${DesignToken.color.onPrimary}))`)
762
762
  },
763
763
  /** Design tokens that control focus state. */
764
764
  focus: {
765
765
  /** Icon color on focus. */
766
- iconColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-icon-color, ${DesignToken.color.onPrimary})`),
766
+ iconColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-icon-color, var(--m3e-icon-button-focus-icon-color, ${DesignToken.color.onPrimary}))`),
767
767
  /** State layer color on focus. */
768
- stateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-state-layer-color, ${DesignToken.color.onPrimary})`),
768
+ stateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-state-layer-color, var(--m3e-icon-button-focus-state-layer-color, ${DesignToken.color.onPrimary}))`),
769
769
  /**State layer opacity on focus. */
770
- stateLayerOpacity: unsafeCSS(`var(--m3e-filled-icon-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
770
+ stateLayerOpacity: unsafeCSS(`var(--m3e-filled-icon-button-focus-state-layer-opacity, var(--m3e-icon-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`),
771
771
  /** Unselected icon color on focus. */
772
- unselectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
772
+ unselectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-unselected-icon-color, var(--m3e-icon-button-focus-unselected-icon-color, ${DesignToken.color.onSurfaceVariant}))`),
773
773
  /** Unselected state layer color on focus. */
774
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
774
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-unselected-state-layer-color, var(--m3e-icon-button-focus-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant}))`),
775
775
  /** Selected icon color on focus. */
776
- selectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-selected-icon-color, ${DesignToken.color.onPrimary})`),
776
+ selectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-selected-icon-color, var(--m3e-icon-button-focus-selected-icon-color, ${DesignToken.color.onPrimary}))`),
777
777
  /** Selected state layer color on focus. */
778
- selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-selected-state-layer-color, ${DesignToken.color.onPrimary})`)
778
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-selected-state-layer-color, var(--m3e-icon-button-focus-selected-state-layer-color, ${DesignToken.color.onPrimary}))`)
779
779
  },
780
780
  /** Design tokens that control pressed state. */
781
781
  pressed: {
782
782
  /** Icon color on pressed. */
783
- iconColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-icon-color, ${DesignToken.color.onPrimary})`),
783
+ iconColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-icon-color, var(--m3e-icon-button-pressed-icon-color, ${DesignToken.color.onPrimary}))`),
784
784
  /** State layer color on pressed. */
785
- stateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-state-layer-color, ${DesignToken.color.onPrimary})`),
785
+ stateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-state-layer-color, var(--m3e-icon-button-pressed-state-layer-color, ${DesignToken.color.onPrimary}))`),
786
786
  /** State layer opacity on pressed. */
787
- stateLayerOpacity: unsafeCSS(`var(--m3e-filled-icon-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
787
+ stateLayerOpacity: unsafeCSS(`var(--m3e-filled-icon-button-pressed-state-layer-opacity, var(--m3e-icon-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`),
788
788
  /** Unselected icon color on pressed. */
789
- unselectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
789
+ unselectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-unselected-icon-color, var(--m3e-icon-button-pressed-unselected-icon-color, ${DesignToken.color.onSurfaceVariant}))`),
790
790
  /** Unselected state layer color on pressed. */
791
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
791
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-unselected-state-layer-color, var(--m3e-icon-button-pressed-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant}))`),
792
792
  /** Selected icon color on pressed. */
793
- selectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-selected-icon-color, ${DesignToken.color.onPrimary})`),
793
+ selectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-selected-icon-color, var(--m3e-icon-button-pressed-selected-icon-color, ${DesignToken.color.onPrimary}))`),
794
794
  /** Selected state layer color on pressed. */
795
- selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-selected-state-layer-color, ${DesignToken.color.onPrimary})`)
795
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-selected-state-layer-color, var(--m3e-icon-button-pressed-selected-state-layer-color, ${DesignToken.color.onPrimary}))`)
796
796
  }
797
797
  },
798
798
  /** Design tokens that control the `tonal` variant. */
799
799
  tonal: {
800
800
  /** Default icon color. */
801
- iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-icon-color, ${DesignToken.color.onSecondaryContainer})`),
801
+ iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-icon-color, var(--m3e-icon-button-icon-color, ${DesignToken.color.onSecondaryContainer}))`),
802
802
  /** Default container background color. */
803
- containerColor: unsafeCSS(`var(--m3e-tonal-icon-button-container-color, ${DesignToken.color.secondaryContainer})`),
803
+ containerColor: unsafeCSS(`var(--m3e-tonal-icon-button-container-color, var(--m3e-icon-button-container-color, ${DesignToken.color.secondaryContainer}))`),
804
804
  /** Unselected icon color. */
805
- unselectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-unselected-icon-color, ${DesignToken.color.onSecondaryContainer})`),
805
+ unselectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-unselected-icon-color, var(--m3e-icon-button-unselected-icon-color, ${DesignToken.color.onSecondaryContainer}))`),
806
806
  /** Unselected container background color. */
807
- unselectedContainerColor: unsafeCSS(`var(--m3e-tonal-icon-button-unselected-container-color, ${DesignToken.color.secondaryContainer})`),
807
+ unselectedContainerColor: unsafeCSS(`var(--m3e-tonal-icon-button-unselected-container-color, var(--m3e-icon-button-unselected-container-color, ${DesignToken.color.secondaryContainer}))`),
808
808
  /** Selected icon color. */
809
- selectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-selected-icon-color, ${DesignToken.color.onSecondary})`),
809
+ selectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-selected-icon-color, var(--m3e-icon-button-selected-icon-color, ${DesignToken.color.onSecondary}))`),
810
810
  /** Selected container background color. */
811
- selectedContainerColor: unsafeCSS(`var(--m3e-tonal-icon-button-selected-container-color, ${DesignToken.color.secondary})`),
811
+ selectedContainerColor: unsafeCSS(`var(--m3e-tonal-icon-button-selected-container-color, var(--m3e-icon-button-selected-container-color, ${DesignToken.color.secondary}))`),
812
812
  /** Design tokens that control disabled state. */
813
813
  disabled: {
814
814
  /** Container background color when disabled. */
815
- containerColor: unsafeCSS(`var(--m3e-tonal-icon-button-disabled-container-color, ${DesignToken.color.onSurface})`),
815
+ containerColor: unsafeCSS(`var(--m3e-tonal-icon-button-disabled-container-color, var(--m3e-icon-button-disabled-container-color, ${DesignToken.color.onSurface}))`),
816
816
  /** Opacity of container when disabled. */
817
- containerOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-disabled-container-opacity, 10%)`),
817
+ containerOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-disabled-container-opacity, var(--m3e-icon-button-disabled-container-opacity, 10%))`),
818
818
  /** Icon color when disabled. */
819
- iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-disabled-icon-color, ${DesignToken.color.onSurface})`),
819
+ iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-disabled-icon-color, var(--m3e-icon-button-disabled-icon-color, ${DesignToken.color.onSurface}))`),
820
820
  /** Icon opacity when disabled. */
821
- iconOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-disabled-icon-opacity, 38%)`)
821
+ iconOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-disabled-icon-opacity, var(--m3e-icon-button-disabled-icon-opacity, 38%))`)
822
822
  },
823
823
  /** Design tokens that control hover state. */
824
824
  hover: {
825
825
  /** Icon color on hover. */
826
- iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-icon-color, ${DesignToken.color.onSecondaryContainer})`),
826
+ iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-icon-color, var(--m3e-icon-button-hover-icon-color, ${DesignToken.color.onSecondaryContainer}))`),
827
827
  /** State layer color on hover. */
828
- stateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
828
+ stateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-state-layer-color, var(--m3e-icon-button-hover-state-layer-color, ${DesignToken.color.onSecondaryContainer}))`),
829
829
  /** State layer opacity on hover. */
830
- stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
830
+ stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-hover-state-layer-opacity, var(--m3e-icon-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`),
831
831
  /** Unselected icon color on hover. */
832
- unselectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-unselected-icon-color, ${DesignToken.color.onSecondaryContainer})`),
832
+ unselectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-unselected-icon-color, var(--m3e-icon-button-hover-unselected-icon-color, ${DesignToken.color.onSecondaryContainer}))`),
833
833
  /** Unselected state layer color on hover. */
834
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-unselected-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
834
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-unselected-state-layer-color, var(--m3e-icon-button-hover-unselected-state-layer-color, ${DesignToken.color.onSecondaryContainer}))`),
835
835
  /** Selected icon color on hover. */
836
- selectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-selected-icon-color, ${DesignToken.color.onSecondary})`),
836
+ selectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-selected-icon-color, var(--m3e-icon-button-hover-selected-icon-color, ${DesignToken.color.onSecondary}))`),
837
837
  /** Selected state layer color on hover. */
838
- selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-selected-state-layer-color, ${DesignToken.color.onSecondary})`)
838
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-selected-state-layer-color, var(--m3e-icon-button-hover-selected-state-layer-color, ${DesignToken.color.onSecondary}))`)
839
839
  },
840
840
  /** Design tokens that control focus state. */
841
841
  focus: {
842
842
  /** Icon color on focus. */
843
- iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-icon-color, ${DesignToken.color.onSecondaryContainer})`),
843
+ iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-icon-color, var(--m3e-icon-button-focus-icon-color, ${DesignToken.color.onSecondaryContainer}))`),
844
844
  /** State layer color on focus. */
845
- stateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
845
+ stateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-state-layer-color, var(--m3e-icon-button-focus-state-layer-color, ${DesignToken.color.onSecondaryContainer}))`),
846
846
  /**State layer opacity on focus. */
847
- stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
847
+ stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-focus-state-layer-opacity, var(--m3e-icon-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`),
848
848
  /** Unselected icon color on focus. */
849
- unselectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-unselected-icon-color, ${DesignToken.color.onSecondaryContainer})`),
849
+ unselectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-unselected-icon-color, var(--m3e-icon-button-focus-unselected-icon-color, ${DesignToken.color.onSecondaryContainer}))`),
850
850
  /** Unselected state layer color on focus. */
851
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-unselected-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
851
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-unselected-state-layer-color, var(--m3e-icon-button-focus-unselected-state-layer-color, ${DesignToken.color.onSecondaryContainer}))`),
852
852
  /** Selected icon color on focus. */
853
- selectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-selected-icon-color, ${DesignToken.color.onSecondary})`),
853
+ selectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-selected-icon-color, var(--m3e-icon-button-focus-selected-icon-color, ${DesignToken.color.onSecondary}))`),
854
854
  /** Selected state layer color on focus. */
855
- selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-selected-state-layer-color, ${DesignToken.color.onSecondary})`)
855
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-selected-state-layer-color, var(--m3e-icon-button-focus-selected-state-layer-color, ${DesignToken.color.onSecondary}))`)
856
856
  },
857
857
  /** Design tokens that control pressed state. */
858
858
  pressed: {
859
859
  /** Icon color on pressed. */
860
- iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-icon-color, ${DesignToken.color.onSecondaryContainer})`),
860
+ iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-icon-color, var(--m3e-icon-button-pressed-icon-color, ${DesignToken.color.onSecondaryContainer}))`),
861
861
  /** State layer color on pressed. */
862
- stateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
862
+ stateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-state-layer-color, var(--m3e-icon-button-pressed-state-layer-color, ${DesignToken.color.onSecondaryContainer}))`),
863
863
  /** State layer opacity on pressed. */
864
- stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
864
+ stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-state-layer-opacity, var(--m3e-icon-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`),
865
865
  /** Unselected icon color on pressed. */
866
- unselectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-unselected-icon-color, ${DesignToken.color.onSecondaryContainer})`),
866
+ unselectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-unselected-icon-color, var(--m3e-icon-button-pressed-unselected-icon-color, ${DesignToken.color.onSecondaryContainer}))`),
867
867
  /** Unselected state layer color on pressed. */
868
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-unselected-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
868
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-unselected-state-layer-color, var(--m3e-icon-button-pressed-unselected-state-layer-color, ${DesignToken.color.onSecondaryContainer}))`),
869
869
  /** Selected icon color on pressed. */
870
- selectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-selected-icon-color, ${DesignToken.color.onSecondary})`),
870
+ selectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-selected-icon-color, var(--m3e-icon-button-pressed-selected-icon-color, ${DesignToken.color.onSecondary}))`),
871
871
  /** Selected state layer color on pressed. */
872
- selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-selected-state-layer-color, ${DesignToken.color.onSecondary})`)
872
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-selected-state-layer-color, var(--m3e-icon-button-pressed-selected-state-layer-color, ${DesignToken.color.onSecondary}))`)
873
873
  }
874
874
  },
875
875
  /** Design tokens that control the `standard` variant. */
876
876
  standard: {
877
877
  /** Default icon color. */
878
- iconColor: unsafeCSS(`var(--m3e-standard-icon-button-icon-color, ${DesignToken.color.onSurfaceVariant})`),
878
+ iconColor: unsafeCSS(`var(--m3e-standard-icon-button-icon-color, var(--m3e-icon-button-icon-color, ${DesignToken.color.onSurfaceVariant}))`),
879
879
  /** Unselected icon color. */
880
- unselectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
880
+ unselectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-unselected-icon-color, var(--m3e-icon-button-unselected-icon-color, ${DesignToken.color.onSurfaceVariant}))`),
881
881
  /** Selected icon color. */
882
- selectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-selected-icon-color, ${DesignToken.color.primary})`),
882
+ selectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-selected-icon-color, var(--m3e-icon-button-selected-icon-color, ${DesignToken.color.primary}))`),
883
883
  /** Design tokens that control disabled state. */
884
884
  disabled: {
885
885
  /** Container background color when disabled. */
886
- containerColor: unsafeCSS(`var(--m3e-standard-icon-button-disabled-container-color, transparent)`),
886
+ containerColor: unsafeCSS(`var(--m3e-standard-icon-button-disabled-container-color, var(--m3e-icon-button-disabled-container-color, transparent))`),
887
887
  /** Opacity of container when disabled. */
888
- containerOpacity: unsafeCSS(`var(--m3e-standard-icon-button-disabled-container-opacity, 10%)`),
888
+ containerOpacity: unsafeCSS(`var(--m3e-standard-icon-button-disabled-container-opacity, var(--m3e-icon-button-disabled-container-opacity, 10%))`),
889
889
  /** Icon color when disabled. */
890
- iconColor: unsafeCSS(`var(--m3e-standard-icon-button-disabled-icon-color, ${DesignToken.color.onSurface})`),
890
+ iconColor: unsafeCSS(`var(--m3e-standard-icon-button-disabled-icon-color, var(--m3e-icon-button-disabled-icon-color, ${DesignToken.color.onSurface}))`),
891
891
  /** Icon opacity when disabled. */
892
- iconOpacity: unsafeCSS(`var(--m3e-standard-icon-button-disabled-icon-opacity, 38%)`)
892
+ iconOpacity: unsafeCSS(`var(--m3e-standard-icon-button-disabled-icon-opacity, var(--m3e-icon-button-disabled-icon-opacity, 38%))`)
893
893
  },
894
894
  /** Design tokens that control hover state. */
895
895
  hover: {
896
896
  /** Icon color on hover. */
897
- iconColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-icon-color, ${DesignToken.color.onSurfaceVariant})`),
897
+ iconColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-icon-color, var(--m3e-icon-button-hover-icon-color, ${DesignToken.color.onSurfaceVariant}))`),
898
898
  /** State layer color on hover. */
899
- stateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
899
+ stateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-state-layer-color, var(--m3e-icon-button-hover-state-layer-color, ${DesignToken.color.onSurfaceVariant}))`),
900
900
  /** State layer opacity on hover. */
901
- stateLayerOpacity: unsafeCSS(`var(--m3e-standard-icon-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
901
+ stateLayerOpacity: unsafeCSS(`var(--m3e-standard-icon-button-hover-state-layer-opacity, var(--m3e-icon-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`),
902
902
  /** Unselected icon color on hover. */
903
- unselectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
903
+ unselectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-unselected-icon-color, var(--m3e-icon-button-hover-unselected-icon-color, ${DesignToken.color.onSurfaceVariant}))`),
904
904
  /** Unselected state layer color on hover. */
905
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
905
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-unselected-state-layer-color, var(--m3e-icon-button-hover-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant}))`),
906
906
  /** Selected icon color on hover. */
907
- selectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-selected-icon-color, ${DesignToken.color.primary})`),
907
+ selectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-selected-icon-color, var(--m3e-icon-button-hover-selected-icon-color, ${DesignToken.color.primary}))`),
908
908
  /** Selected state layer color on hover. */
909
- selectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-selected-state-layer-color, ${DesignToken.color.primary})`)
909
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-selected-state-layer-color, var(--m3e-icon-button-hover-selected-state-layer-color, ${DesignToken.color.primary}))`)
910
910
  },
911
911
  /** Design tokens that control focus state. */
912
912
  focus: {
913
913
  /** Icon color on focus. */
914
- iconColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-icon-color, ${DesignToken.color.onSurfaceVariant})`),
914
+ iconColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-icon-color, var(--m3e-icon-button-focus-icon-color, ${DesignToken.color.onSurfaceVariant}))`),
915
915
  /** State layer color on focus. */
916
- stateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
916
+ stateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-state-layer-color, var(--m3e-icon-button-focus-state-layer-color, ${DesignToken.color.onSurfaceVariant}))`),
917
917
  /**State layer opacity on focus. */
918
- stateLayerOpacity: unsafeCSS(`var(--m3e-standard-icon-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
918
+ stateLayerOpacity: unsafeCSS(`var(--m3e-standard-icon-button-focus-state-layer-opacity, var(--m3e-icon-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`),
919
919
  /** Unselected icon color on focus. */
920
- unselectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
920
+ unselectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-unselected-icon-color, var(--m3e-icon-button-focus-unselected-icon-color, ${DesignToken.color.onSurfaceVariant}))`),
921
921
  /** Unselected state layer color on focus. */
922
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
922
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-unselected-state-layer-color, var(--m3e-icon-button-focus-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant}))`),
923
923
  /** Selected icon color on focus. */
924
- selectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-selected-icon-color, ${DesignToken.color.primary})`),
924
+ selectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-selected-icon-color, var(--m3e-icon-button-focus-selected-icon-color, ${DesignToken.color.primary}))`),
925
925
  /** Selected state layer color on focus. */
926
- selectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-selected-state-layer-color, ${DesignToken.color.primary})`)
926
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-selected-state-layer-color, var(--m3e-icon-button-focus-selected-state-layer-color, ${DesignToken.color.primary}))`)
927
927
  },
928
928
  /** Design tokens that control pressed state. */
929
929
  pressed: {
930
930
  /** Icon color on pressed. */
931
- iconColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-icon-color, ${DesignToken.color.onSurfaceVariant})`),
931
+ iconColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-icon-color, var(--m3e-icon-button-pressed-icon-color, ${DesignToken.color.onSurfaceVariant}))`),
932
932
  /** State layer color on pressed. */
933
- stateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
933
+ stateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-state-layer-color, var(--m3e-icon-button-pressed-state-layer-color, ${DesignToken.color.onSurfaceVariant}))`),
934
934
  /** State layer opacity on pressed. */
935
- stateLayerOpacity: unsafeCSS(`var(--m3e-standard-icon-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
935
+ stateLayerOpacity: unsafeCSS(`var(--m3e-standard-icon-button-pressed-state-layer-opacity, var(--m3e-icon-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`),
936
936
  /** Unselected icon color on pressed. */
937
- unselectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
937
+ unselectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-unselected-icon-color, var(--m3e-icon-button-pressed-unselected-icon-color, ${DesignToken.color.onSurfaceVariant}))`),
938
938
  /** Unselected state layer color on pressed. */
939
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
939
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-unselected-state-layer-color, var(--m3e-icon-button-pressed-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant}))`),
940
940
  /** Selected icon color on pressed. */
941
- selectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-selected-icon-color, ${DesignToken.color.primary})`),
941
+ selectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-selected-icon-color, var(--m3e-icon-button-pressed-selected-icon-color, ${DesignToken.color.primary}))`),
942
942
  /** Selected state layer color on pressed. */
943
- selectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-selected-state-layer-color, ${DesignToken.color.primary})`)
943
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-selected-state-layer-color, var(--m3e-icon-button-pressed-selected-state-layer-color, ${DesignToken.color.primary}))`)
944
944
  }
945
945
  }
946
946
  };
@@ -953,7 +953,7 @@ function iconButtonVariantStyle(variant) {
953
953
  * Appearance variant styles for `M3eIconButtonElement`.
954
954
  * @internal
955
955
  */
956
- const IconButtonVariantStyle = [iconButtonVariantStyle("standard"), iconButtonVariantStyle("outlined"), iconButtonVariantStyle("filled"), iconButtonVariantStyle("tonal"), iconButtonVariantStyle("elevated"), css`:host([variant="outlined"]) .base { outline-style: solid; }`];
956
+ 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; }`];
957
957
 
958
958
  var _M3eIconButtonElement_instances, _M3eIconButtonElement_clickHandler, _M3eIconButtonElement_updateButtonShape, _M3eIconButtonElement_handlePressedChange, _M3eIconButtonElement_handleClick, _M3eIconButtonElement_handleSelectedIconSlotChange;
959
959
  /**
@@ -1009,6 +1009,20 @@ var _M3eIconButtonElement_instances, _M3eIconButtonElement_clickHandler, _M3eIco
1009
1009
  * @fires change - Dispatched when a toggle button's selected state changes.
1010
1010
  * @fires click - Emitted when the element is clicked.
1011
1011
  *
1012
+ * @cssprop --m3e-icon-button-container-height - Height of the container for all size variants.
1013
+ * @cssprop --m3e-icon-button-outline-thickness - Outline thickness for all size variants.
1014
+ * @cssprop --m3e-icon-button-icon-size - Icon size for all size variants.
1015
+ * @cssprop --m3e-icon-button-shape-round - Corner radius for all round size variants.
1016
+ * @cssprop --m3e-icon-button-shape-square - Corner radius for all square size variants.
1017
+ * @cssprop --m3e-icon-button-selected-shape-round - Corner radius for all selected round size variants.
1018
+ * @cssprop --m3e-icon-button-selected-shape-square - Corner radius for all selected square size variants.
1019
+ * @cssprop --m3e-icon-button-shape-pressed-morph - Corner radius for all pressed size variants.
1020
+ * @cssprop --m3e-icon-button-narrow-leading-space - Leading space for all size variants (narrow).
1021
+ * @cssprop --m3e-icon-button-narrow-trailing-space - Trailing space for all size variants (narrow).
1022
+ * @cssprop --m3e-icon-button-default-leading-space - Leading space for all size variants (default).
1023
+ * @cssprop --m3e-icon-button-default-trailing-space - Trailing space for all size variants (default).
1024
+ * @cssprop --m3e-icon-button-wide-leading-space - Leading space for all size variants (wide).
1025
+ * @cssprop --m3e-icon-button-wide-trailing-space - Trailing space for all size variants (wide).
1012
1026
  * @cssprop --m3e-icon-button-extra-small-container-height - Height of the extra-small container.
1013
1027
  * @cssprop --m3e-icon-button-extra-small-outline-thickness - Outline thickness for extra-small.
1014
1028
  * @cssprop --m3e-icon-button-extra-small-icon-size - Icon size for extra-small.
@@ -1079,6 +1093,48 @@ var _M3eIconButtonElement_instances, _M3eIconButtonElement_clickHandler, _M3eIco
1079
1093
  * @cssprop --m3e-icon-button-extra-large-default-trailing-space - Trailing space for extra-large (default).
1080
1094
  * @cssprop --m3e-icon-button-extra-large-wide-leading-space - Leading space for extra-large (wide).
1081
1095
  * @cssprop --m3e-icon-button-extra-large-wide-trailing-space - Trailing space for extra-large (wide).
1096
+ * @cssprop --m3e-icon-button-outline-color - Default outline color for all variants.
1097
+ * @cssprop --m3e-icon-button-disabled-outline-color - Outline color when disabled (all variants).
1098
+ * @cssprop --m3e-icon-button-hover-outline-color - Outline color on hover (all variants).
1099
+ * @cssprop --m3e-icon-button-focus-outline-color - Outline color on focus (all variants).
1100
+ * @cssprop --m3e-icon-button-pressed-outline-color - Outline color on pressed (all variants).
1101
+ * @cssprop --m3e-icon-button-container-color - Default container background color for all variants.
1102
+ * @cssprop --m3e-icon-button-unselected-container-color - Unselected container background color for all variants.
1103
+ * @cssprop --m3e-icon-button-selected-container-color - Selected container background color for all variants.
1104
+ * @cssprop --m3e-icon-button-icon-color - Default icon color for tonal variant.
1105
+ * @cssprop --m3e-icon-button-container-color - Default container background color for tonal variant.
1106
+ * @cssprop --m3e-icon-button-unselected-icon-color - Unselected icon color for tonal variant.
1107
+ * @cssprop --m3e-icon-button-unselected-container-color - Unselected container background color for tonal variant.
1108
+ * @cssprop --m3e-icon-button-selected-icon-color - Selected icon color for tonal variant.
1109
+ * @cssprop --m3e-icon-button-selected-container-color - Selected container background color for tonal variant.
1110
+ * @cssprop --m3e-icon-button-icon-color - Default icon color for all variants.
1111
+ * @cssprop --m3e-icon-button-unselected-icon-color - Unselected icon color for all variants.
1112
+ * @cssprop --m3e-icon-button-selected-icon-color - Selected icon color for all variants.
1113
+ * @cssprop --m3e-icon-button-disabled-container-color - Container background color when disabled (all variants).
1114
+ * @cssprop --m3e-icon-button-disabled-container-opacity - Opacity of container when disabled (all variants).
1115
+ * @cssprop --m3e-icon-button-disabled-icon-color - Icon color when disabled (all variants).
1116
+ * @cssprop --m3e-icon-button-disabled-icon-opacity - Icon opacity when disabled (all variants).
1117
+ * @cssprop --m3e-icon-button-hover-icon-color - Icon color on hover (all variants).
1118
+ * @cssprop --m3e-icon-button-hover-state-layer-color - State layer color on hover (all variants).
1119
+ * @cssprop --m3e-icon-button-hover-state-layer-opacity - State layer opacity on hover (all variants).
1120
+ * @cssprop --m3e-icon-button-hover-unselected-icon-color - Unselected icon color on hover (all variants).
1121
+ * @cssprop --m3e-icon-button-hover-unselected-state-layer-color - Unselected state layer color on hover (all variants).
1122
+ * @cssprop --m3e-icon-button-hover-selected-icon-color - Selected icon color on hover (all variants).
1123
+ * @cssprop --m3e-icon-button-hover-selected-state-layer-color - Selected state layer color on hover (all variants).
1124
+ * @cssprop --m3e-icon-button-focus-icon-color - Icon color on focus (all variants).
1125
+ * @cssprop --m3e-icon-button-focus-state-layer-color - State layer color on focus (all variants).
1126
+ * @cssprop --m3e-icon-button-focus-state-layer-opacity - State layer opacity on focus (all variants).
1127
+ * @cssprop --m3e-icon-button-focus-unselected-icon-color - Unselected icon color on focus (all variants).
1128
+ * @cssprop --m3e-icon-button-focus-unselected-state-layer-color - Unselected state layer color on focus (all variants).
1129
+ * @cssprop --m3e-icon-button-focus-selected-icon-color - Selected icon color on focus (all variants).
1130
+ * @cssprop --m3e-icon-button-focus-selected-state-layer-color - Selected state layer color on focus (all variants).
1131
+ * @cssprop --m3e-icon-button-pressed-icon-color - Icon color on pressed (all variants).
1132
+ * @cssprop --m3e-icon-button-pressed-state-layer-color - State layer color on pressed (all variants).
1133
+ * @cssprop --m3e-icon-button-pressed-state-layer-opacity - State layer opacity on pressed (all variants).
1134
+ * @cssprop --m3e-icon-button-pressed-unselected-icon-color - Unselected icon color on pressed (all variants).
1135
+ * @cssprop --m3e-icon-button-pressed-unselected-state-layer-color - Unselected state layer color on pressed (all variants).
1136
+ * @cssprop --m3e-icon-button-pressed-selected-icon-color - Selected icon color on pressed (all variants).
1137
+ * @cssprop --m3e-icon-button-pressed-selected-state-layer-color - Selected state layer color on pressed (all variants).
1082
1138
  * @cssprop --m3e-outlined-icon-button-icon-color - Default icon color for outlined variant.
1083
1139
  * @cssprop --m3e-outlined-icon-button-outline-color - Default outline color for outlined variant.
1084
1140
  * @cssprop --m3e-outlined-icon-button-unselected-icon-color - Unselected icon color for outlined variant.