@m3e/web 2.5.10 → 2.5.11

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 (88) hide show
  1. package/dist/all.js +282 -86
  2. package/dist/all.js.map +1 -1
  3. package/dist/all.min.js +8 -8
  4. package/dist/all.min.js.map +1 -1
  5. package/dist/breadcrumb.js +1 -1
  6. package/dist/breadcrumb.js.map +1 -1
  7. package/dist/breadcrumb.min.js +1 -1
  8. package/dist/breadcrumb.min.js.map +1 -1
  9. package/dist/button.js +13 -7
  10. package/dist/button.js.map +1 -1
  11. package/dist/button.min.js +1 -1
  12. package/dist/button.min.js.map +1 -1
  13. package/dist/checkbox.js +5 -0
  14. package/dist/checkbox.js.map +1 -1
  15. package/dist/checkbox.min.js +1 -1
  16. package/dist/checkbox.min.js.map +1 -1
  17. package/dist/chips.js +2 -2
  18. package/dist/chips.js.map +1 -1
  19. package/dist/chips.min.js +1 -1
  20. package/dist/chips.min.js.map +1 -1
  21. package/dist/css-custom-data.json +5263 -5233
  22. package/dist/custom-elements.json +50798 -49906
  23. package/dist/fab.js +9 -9
  24. package/dist/fab.js.map +1 -1
  25. package/dist/fab.min.js +1 -1
  26. package/dist/fab.min.js.map +1 -1
  27. package/dist/form-field.js +4 -5
  28. package/dist/form-field.js.map +1 -1
  29. package/dist/form-field.min.js +1 -1
  30. package/dist/form-field.min.js.map +1 -1
  31. package/dist/html-custom-data.json +1693 -1666
  32. package/dist/icon-button.js +48 -42
  33. package/dist/icon-button.js.map +1 -1
  34. package/dist/icon-button.min.js +1 -1
  35. package/dist/icon-button.min.js.map +1 -1
  36. package/dist/menu.js +2 -2
  37. package/dist/menu.js.map +1 -1
  38. package/dist/menu.min.js +1 -1
  39. package/dist/menu.min.js.map +1 -1
  40. package/dist/option.js +1 -1
  41. package/dist/option.js.map +1 -1
  42. package/dist/option.min.js +1 -1
  43. package/dist/option.min.js.map +1 -1
  44. package/dist/paginator.js +1 -1
  45. package/dist/paginator.js.map +1 -1
  46. package/dist/paginator.min.js +2 -2
  47. package/dist/paginator.min.js.map +1 -1
  48. package/dist/radio-group.js +6 -1
  49. package/dist/radio-group.js.map +1 -1
  50. package/dist/radio-group.min.js +1 -1
  51. package/dist/radio-group.min.js.map +1 -1
  52. package/dist/split-button.js +1 -1
  53. package/dist/split-button.js.map +1 -1
  54. package/dist/split-button.min.js +1 -1
  55. package/dist/split-button.min.js.map +1 -1
  56. package/dist/src/button/ButtonElement.d.ts +1 -0
  57. package/dist/src/button/ButtonElement.d.ts.map +1 -1
  58. package/dist/src/checkbox/CheckboxElement.d.ts.map +1 -1
  59. package/dist/src/fab/styles/FabSizeToken.d.ts.map +1 -1
  60. package/dist/src/form-field/FormFieldElement.d.ts.map +1 -1
  61. package/dist/src/icon-button/IconButtonElement.d.ts +1 -0
  62. package/dist/src/icon-button/IconButtonElement.d.ts.map +1 -1
  63. package/dist/src/icon-button/styles/IconButtonSizeToken.d.ts.map +1 -1
  64. package/dist/src/menu/MenuElement.d.ts.map +1 -1
  65. package/dist/src/menu/MenuItemElementBase.d.ts.map +1 -1
  66. package/dist/src/option/OptionElement.d.ts.map +1 -1
  67. package/dist/src/paginator/PaginatorElement.d.ts.map +1 -1
  68. package/dist/src/radio-group/RadioElement.d.ts.map +1 -1
  69. package/dist/src/split-button/SplitButtonElement.d.ts.map +1 -1
  70. package/dist/src/switch/SwitchElement.d.ts.map +1 -1
  71. package/dist/src/switch/styles/SwitchToken.d.ts.map +1 -1
  72. package/dist/src/theme/ThemeElement.d.ts +6 -0
  73. package/dist/src/theme/ThemeElement.d.ts.map +1 -1
  74. package/dist/src/theme/ThemeIconElement.d.ts +60 -0
  75. package/dist/src/theme/ThemeIconElement.d.ts.map +1 -0
  76. package/dist/src/theme/ThemeVariant.d.ts +3 -0
  77. package/dist/src/theme/ThemeVariant.d.ts.map +1 -0
  78. package/dist/src/theme/index.d.ts +2 -0
  79. package/dist/src/theme/index.d.ts.map +1 -1
  80. package/dist/switch.js +16 -11
  81. package/dist/switch.js.map +1 -1
  82. package/dist/switch.min.js +1 -1
  83. package/dist/switch.min.js.map +1 -1
  84. package/dist/theme.js +174 -4
  85. package/dist/theme.js.map +1 -1
  86. package/dist/theme.min.js +31 -31
  87. package/dist/theme.min.js.map +1 -1
  88. package/package.json +1 -1
package/dist/icon-button.js CHANGED
@@ -15,88 +15,88 @@ import { DesignToken, KeyboardClick, LinkButton, FormSubmitter, Focusable, Disab
15
15
  const IconButtonSizeToken = {
16
16
  /** Design tokens that control the `extra-small` `size` variant. */
17
17
  "extra-small": {
18
- containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-container-height, var(--m3e-icon-button-container-height, 2rem)) + ${DesignToken.density.calc(0)})`),
18
+ containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-container-height, var(--m3e-icon-button-container-height, 2rem)) + ${DesignToken.density.calc(-3)})`),
19
19
  outlineThickness: unsafeCSS("var(--m3e-icon-button-extra-small-outline-thickness, var(--m3e-icon-button-outline-thickness, 1px))"),
20
- iconSize: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-icon-size, var(--m3e-icon-button-icon-size, 1.25rem)) + ${DesignToken.density.calc(0)})`),
20
+ iconSize: unsafeCSS(`var(--m3e-icon-button-extra-small-icon-size, var(--m3e-icon-button-icon-size, 1.25rem))`),
21
21
  shapeRound: unsafeCSS(`var(--m3e-icon-button-extra-small-shape-round, var(--m3e-icon-button-shape-round, ${DesignToken.shape.corner.full}))`),
22
22
  shapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-small-shape-square, var(--m3e-icon-button-shape-square, ${DesignToken.shape.corner.medium}))`),
23
23
  selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-extra-small-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${DesignToken.shape.corner.medium}))`),
24
24
  selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-small-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${DesignToken.shape.corner.full}))`),
25
25
  shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-extra-small-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${DesignToken.shape.corner.small}))`),
26
- 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)})`),
27
- 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)})`),
28
- 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)})`),
29
- 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)})`),
30
- 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)})`),
31
- 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)})`)
26
+ narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 0.25rem)) + calc(${DesignToken.density.calc(-3)} / 2))`),
27
+ narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 0.25rem)) + calc(${DesignToken.density.calc(-3)} / 2))`),
28
+ defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-default-leading-space, var(--m3e-icon-button-default-leading-space, 0.375rem)) + calc(${DesignToken.density.calc(-3)} / 2))`),
29
+ defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 0.375rem)) + calc(${DesignToken.density.calc(-3)} / 2))`),
30
+ wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 0.625rem)) + calc(${DesignToken.density.calc(-3)} / 2))`),
31
+ wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 0.625rem)) + calc(${DesignToken.density.calc(-3)} / 2))`)
32
32
  },
33
33
  /** Design tokens that control the `small` `size` variant. */
34
34
  small: {
35
- containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-small-container-height, var(--m3e-icon-button-container-height, 2.5rem)) + ${DesignToken.density.calc(-1)})`),
35
+ containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-small-container-height, var(--m3e-icon-button-container-height, 2.5rem)) + ${DesignToken.density.calc(-3)})`),
36
36
  outlineThickness: unsafeCSS("var(--m3e-icon-button-small-outline-thickness, var(--m3e-icon-button-outline-thickness, 1px))"),
37
- iconSize: unsafeCSS(`calc(var(--m3e-icon-button-small-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) + ${DesignToken.density.calc(-1)})`),
37
+ iconSize: unsafeCSS(`var(--m3e-icon-button-small-icon-size, var(--m3e-icon-button-icon-size, 1.5rem))`),
38
38
  shapeRound: unsafeCSS(`var(--m3e-icon-button-small-shape-round, var(--m3e-icon-button-shape-round, ${DesignToken.shape.corner.full}))`),
39
39
  shapeSquare: unsafeCSS(`var(--m3e-icon-button-small-shape-square, var(--m3e-icon-button-shape-square, ${DesignToken.shape.corner.medium}))`),
40
40
  selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-small-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${DesignToken.shape.corner.medium}))`),
41
41
  selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-small-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${DesignToken.shape.corner.full}))`),
42
42
  shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-small-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${DesignToken.shape.corner.small}))`),
43
- narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 0.25rem)) + ${DesignToken.density.calc(-1)})`),
44
- narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 0.25rem)) + ${DesignToken.density.calc(-1)})`),
45
- defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-default-leading-space, var(--m3e-icon-button-default-leading-space, 0.5rem)) + ${DesignToken.density.calc(-1)})`),
46
- defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 0.5rem)) + ${DesignToken.density.calc(-1)})`),
47
- wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 0.875rem)) + ${DesignToken.density.calc(-1)})`),
48
- wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 0.875rem)) + ${DesignToken.density.calc(-1)})`)
43
+ narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 0.25rem)) + calc(${DesignToken.density.calc(-3)} / 2))`),
44
+ narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 0.25rem)) + calc(${DesignToken.density.calc(-3)} / 2))`),
45
+ defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-default-leading-space, var(--m3e-icon-button-default-leading-space, 0.5rem)) + calc(${DesignToken.density.calc(-3)} / 2))`),
46
+ defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 0.5rem)) + calc(${DesignToken.density.calc(-3)} / 2))`),
47
+ wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 0.875rem)) + calc(${DesignToken.density.calc(-3)} / 2))`),
48
+ wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 0.875rem)) + calc(${DesignToken.density.calc(-3)} / 2))`)
49
49
  },
50
50
  /** Design tokens that control the `medium` `size` variant. */
51
51
  medium: {
52
- containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-medium-container-height, var(--m3e-icon-button-container-height, 3.5rem)) + ${DesignToken.density.calc(-2)})`),
52
+ containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-medium-container-height, var(--m3e-icon-button-container-height, 3.5rem)) + ${DesignToken.density.calc(-3)})`),
53
53
  outlineThickness: unsafeCSS("var(--m3e-icon-button-medium-outline-thickness, var(--m3e-icon-button-outline-thickness, 1px))"),
54
- iconSize: unsafeCSS(`calc(var(--m3e-icon-button-medium-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) + ${DesignToken.density.calc(-2)})`),
54
+ iconSize: unsafeCSS(`var(--m3e-icon-button-medium-icon-size, var(--m3e-icon-button-icon-size, 1.5rem))`),
55
55
  shapeRound: unsafeCSS(`var(--m3e-icon-button-medium-shape-round, var(--m3e-icon-button-shape-round, ${DesignToken.shape.corner.full}))`),
56
56
  shapeSquare: unsafeCSS(`var(--m3e-icon-button-medium-shape-square, var(--m3e-icon-button-shape-square, ${DesignToken.shape.corner.large}))`),
57
57
  selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-medium-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${DesignToken.shape.corner.large}))`),
58
58
  selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-medium-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${DesignToken.shape.corner.full}))`),
59
59
  shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-medium-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${DesignToken.shape.corner.medium}))`),
60
- narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 0.75rem)) + ${DesignToken.density.calc(-2)})`),
61
- narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 0.75rem)) + ${DesignToken.density.calc(-2)})`),
62
- defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-default-leading-space, var(--m3e-icon-button-default-leading-space, 1rem)) + ${DesignToken.density.calc(-2)})`),
63
- defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 1rem)) + ${DesignToken.density.calc(-2)})`),
64
- wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 1.5rem)) + ${DesignToken.density.calc(-2)})`),
65
- wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 1.5rem)) + ${DesignToken.density.calc(-2)})`)
60
+ narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 0.75rem)) + calc(${DesignToken.density.calc(-3)} / 2))`),
61
+ narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 0.75rem)) + calc(${DesignToken.density.calc(-3)} / 2))`),
62
+ defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-default-leading-space, var(--m3e-icon-button-default-leading-space, 1rem)) + calc(${DesignToken.density.calc(-3)} / 2))`),
63
+ defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 1rem)) + calc(${DesignToken.density.calc(-3)} / 2))`),
64
+ wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 1.5rem)) + calc(${DesignToken.density.calc(-3)} / 2))`),
65
+ wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 1.5rem)) + calc(${DesignToken.density.calc(-3)} / 2))`)
66
66
  },
67
67
  /** Design tokens that control the `large` `size` variant. */
68
68
  large: {
69
69
  containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-large-container-height, var(--m3e-icon-button-container-height, 6rem)) + ${DesignToken.density.calc(-3)})`),
70
70
  outlineThickness: unsafeCSS("var(--m3e-icon-button-large-outline-thickness, var(--m3e-icon-button-outline-thickness, 2px))"),
71
- iconSize: unsafeCSS(`calc(var(--m3e-icon-button-large-icon-size, var(--m3e-icon-button-icon-size, 2rem)) + ${DesignToken.density.calc(-3)})`),
71
+ iconSize: unsafeCSS(`var(--m3e-icon-button-large-icon-size, var(--m3e-icon-button-icon-size, 2rem))`),
72
72
  shapeRound: unsafeCSS(`var(--m3e-icon-button-large-shape-round, var(--m3e-icon-button-shape-round, ${DesignToken.shape.corner.full}))`),
73
73
  shapeSquare: unsafeCSS(`var(--m3e-icon-button-large-shape-square, var(--m3e-icon-button-shape-square, ${DesignToken.shape.corner.extraLarge}))`),
74
74
  selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-large-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${DesignToken.shape.corner.extraLarge}))`),
75
75
  selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-large-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${DesignToken.shape.corner.full}))`),
76
76
  shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-large-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${DesignToken.shape.corner.large}))`),
77
- narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 1rem)) + ${DesignToken.density.calc(-3)})`),
78
- narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 1rem)) + ${DesignToken.density.calc(-3)})`),
79
- defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-default-leading-space, var(--m3e-icon-button-default-leading-space, 2rem)) + ${DesignToken.density.calc(-3)})`),
80
- defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 2rem)) + ${DesignToken.density.calc(-3)})`),
81
- wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 3rem)) + ${DesignToken.density.calc(-3)})`),
82
- wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 3rem)) + ${DesignToken.density.calc(-3)})`)
77
+ narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 1rem)) + calc(${DesignToken.density.calc(-3)} / 2))`),
78
+ narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 1rem)) + calc(${DesignToken.density.calc(-3)} / 2))`),
79
+ defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-default-leading-space, var(--m3e-icon-button-default-leading-space, 2rem)) + calc(${DesignToken.density.calc(-3)} / 2))`),
80
+ defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 2rem)) + calc(${DesignToken.density.calc(-3)} / 2))`),
81
+ wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 3rem)) + calc(${DesignToken.density.calc(-3)} / 2))`),
82
+ wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 3rem)) + calc(${DesignToken.density.calc(-3)} / 2))`)
83
83
  },
84
84
  /** Design tokens that control the `extra-large` `size` variant. */
85
85
  "extra-large": {
86
86
  containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-container-height, var(--m3e-icon-button-container-height, 8.5rem)) + ${DesignToken.density.calc(-3)})`),
87
87
  outlineThickness: unsafeCSS("var(--m3e-icon-button-extra-large-outline-thickness, var(--m3e-icon-button-outline-thickness, 3px))"),
88
- iconSize: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-icon-size, var(--m3e-icon-button-icon-size, 2.5rem)) + ${DesignToken.density.calc(-3)})`),
88
+ iconSize: unsafeCSS(`var(--m3e-icon-button-extra-large-icon-size, var(--m3e-icon-button-icon-size, 2.5rem))`),
89
89
  shapeRound: unsafeCSS(`var(--m3e-icon-button-extra-large-shape-round, var(--m3e-icon-button-shape-round, ${DesignToken.shape.corner.full}))`),
90
90
  shapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-large-shape-square, var(--m3e-icon-button-shape-square, ${DesignToken.shape.corner.extraLarge}))`),
91
91
  selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-extra-large-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${DesignToken.shape.corner.extraLarge}))`),
92
92
  selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-large-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${DesignToken.shape.corner.full}))`),
93
93
  shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-extra-large-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${DesignToken.shape.corner.large}))`),
94
- narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 2rem)) + ${DesignToken.density.calc(-3)})`),
95
- narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 2rem)) + ${DesignToken.density.calc(-3)})`),
96
- defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-default-leading-space, var(--m3e-icon-button-default-leading-space, 3rem)) + ${DesignToken.density.calc(-3)})`),
97
- defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 3rem)) + ${DesignToken.density.calc(-3)})`),
98
- 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)})`),
99
- 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)})`)
94
+ narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 2rem)) + calc(${DesignToken.density.calc(-3)} / 2))`),
95
+ narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 2rem)) + calc(${DesignToken.density.calc(-3)} / 2))`),
96
+ defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-default-leading-space, var(--m3e-icon-button-default-leading-space, 3rem)) + calc(${DesignToken.density.calc(-3)} / 2))`),
97
+ defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 3rem)) + calc(${DesignToken.density.calc(-3)} / 2))`),
98
+ wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 4.5rem)) + calc(${DesignToken.density.calc(-3)} / 2))`),
99
+ wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 4.5rem)) + calc(${DesignToken.density.calc(-3)} / 2))`)
100
100
  }
101
101
  };
102
102
 
@@ -839,6 +839,8 @@ let M3eIconButtonElement = class M3eIconButtonElement extends KeyboardClick(Link
839
839
  constructor() {
840
840
  super();
841
841
  _M3eIconButtonElement_instances.add(this);
842
+ /** @internal */
843
+ this._adjacentPressedTimeout = -1;
842
844
  /** @private */
843
845
  _M3eIconButtonElement_clickHandler.set(this, e => __classPrivateFieldGet(this, _M3eIconButtonElement_instances, "m", _M3eIconButtonElement_handleClick).call(this, e));
844
846
  /**
@@ -965,6 +967,10 @@ _M3eIconButtonElement_handlePressedChange = function _M3eIconButtonElement_handl
965
967
  const group = this.closest("m3e-button-group");
966
968
  if (group && group.variant === "standard") {
967
969
  const buttons = [...group.querySelectorAll("m3e-button,m3e-icon-button")];
970
+ for (const button of buttons) {
971
+ clearTimeout(button._adjacentPressedTimeout);
972
+ button._adjacentPressedTimeout = -1;
973
+ }
968
974
  const index = buttons.indexOf(this);
969
975
  if (pressed) {
970
976
  const multiplier = parseFloat(getComputedStyle(this).getPropertyValue("--m3e-standard-button-group-width-multiplier") || "0.15");
@@ -996,14 +1002,14 @@ _M3eIconButtonElement_handlePressedChange = function _M3eIconButtonElement_handl
996
1002
  if (!prefersReducedMotion()) {
997
1003
  this.addEventListener("transitionend", e => {
998
1004
  if (e.propertyName === "width") {
999
- queueMicrotask(() => {
1000
- // Pressed state is tested to ensure this runs only when the button
1005
+ this._adjacentPressedTimeout = setTimeout(() => {
1006
+ // Pressed timeout is tested to ensure this runs only when the button
1001
1007
  // is no longer pressed. This handles changes to pressed state in
1002
1008
  // quick succession.
1003
- if (!hasCustomState(this, "--pressed")) {
1009
+ if (this._adjacentPressedTimeout > -1) {
1004
1010
  __classPrivateFieldGet(this, _M3eIconButtonElement_instances, "m", _M3eIconButtonElement_cleanupAdjacentPressed).call(this, buttons);
1005
1011
  }
1006
- });
1012
+ }, 600);
1007
1013
  }
1008
1014
  }, {
1009
1015
  once: true