@m3e/button 1.0.5 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.js +1195 -1296
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.min.js +1 -430
  4. package/dist/index.min.js.map +1 -1
  5. package/package.json +2 -16
package/dist/index.min.js CHANGED
@@ -36,434 +36,5 @@ const B={attribute:!0,type:String,converter:A,reflect:!1,hasChanged:H},D=(e=B,t,
36
36
  * Copyright 2017 Google LLC
37
37
  * SPDX-License-Identifier: BSD-3-Clause
38
38
  */
39
- function K(e,t){return(t,o,r)=>((e,t,o)=>(o.configurable=!0,o.enumerable=!0,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,o),o))(t,o,{get(){return(t=>t.renderRoot?.querySelector(e)??null)(this)}})}const G={"extra-small":{containerHeight:e(`calc(var(--m3e-button-extra-small-container-height, 2rem) + ${l.density.calc(0)})`),outlineThickness:e("var(--m3e-button-extra-small-outline-thickness, 1px)"),labelTextFontSize:e(`var(--m3e-button-extra-small-label-text-font-size, ${l.typescale.standard.label.large.fontSize})`),labelTextFontWeight:e(`var(--m3e-button-extra-small-label-text-font-weight, ${l.typescale.standard.label.large.fontWeight})`),labelTextLineHeight:e(`var(--m3e-button-extra-small-label-text-line-height, ${l.typescale.standard.label.large.lineHeight})`),labelTextTracking:e(`var(--m3e-button-extra-small-label-text-tracking, ${l.typescale.standard.label.large.tracking})`),iconSize:e("var(--m3e-button-extra-small-icon-size, 1.25rem)"),shapeRound:e(`var(--m3e-button-extra-small-shape-round, ${l.shape.corner.full})`),shapeSquare:e(`var(--m3e-button-extra-small-shape-square, ${l.shape.corner.medium})`),selectedShapeRound:e(`var(--m3e-button-extra-small-selected-shape-round, ${l.shape.corner.medium})`),selectedShapeSquare:e(`var(--m3e-button-extra-small-selected-shape-square, ${l.shape.corner.full})`),shapePressedMorph:e(`var(--m3e-button-extra-small-shape-pressed-morph, ${l.shape.corner.small})`),leadingSpace:e("var(--m3e-button-extra-small-leading-space, 0.75rem)"),trailingSpace:e("var(--m3e-button-extra-small-trailing-space, 0.75rem)"),iconLabelSpace:e("var(--m3e-button-extra-small-icon-label-space, 0.5rem)")},small:{containerHeight:e(`calc(var(--m3e-button-small-container-height, 2.5rem) + ${l.density.calc(-1)})`),outlineThickness:e("var(--m3e-button-small-outline-thickness, 1px)"),labelTextFontSize:e(`var(--m3e-button-small-label-text-font-size, ${l.typescale.standard.label.large.fontSize})`),labelTextFontWeight:e(`var(--m3e-button-small-label-text-font-weight, ${l.typescale.standard.label.large.fontWeight})`),labelTextLineHeight:e(`var(--m3e-button-small-label-text-line-height, ${l.typescale.standard.label.large.lineHeight})`),labelTextTracking:e(`var(--m3e-button-small-label-text-tracking, ${l.typescale.standard.label.large.tracking})`),iconSize:e("var(--m3e-button-small-icon-size, 1.25rem)"),shapeRound:e(`var(--m3e-button-small-shape-round, ${l.shape.corner.full})`),shapeSquare:e(`var(--m3e-button-small-shape-square, ${l.shape.corner.medium})`),selectedShapeRound:e(`var(--m3e-button-small-selected-shape-round, ${l.shape.corner.medium})`),selectedShapeSquare:e(`var(--m3e-button-small-selected-shape-square, ${l.shape.corner.full})`),shapePressedMorph:e(`var(--m3e-button-small-shape-pressed-morph, ${l.shape.corner.small})`),leadingSpace:e("var(--m3e-button-small-leading-space, 1rem)"),trailingSpace:e("var(--m3e-button-small-trailing-space, 1rem)"),iconLabelSpace:e("var(--m3e-button-small-icon-label-space, 0.5rem)")},medium:{containerHeight:e(`calc(var(--m3e-button-medium-container-height, 3.5rem) + ${l.density.calc(-2)})`),outlineThickness:e("var(--m3e-button-medium-outline-thickness, 1px)"),labelTextFontSize:e(`var(--m3e-button-medium-label-text-font-size, ${l.typescale.standard.body.large.fontSize})`),labelTextFontWeight:e(`var(--m3e-button-medium-label-text-font-weight, ${l.typescale.standard.body.large.fontWeight})`),labelTextLineHeight:e(`var(--m3e-button-medium-label-text-line-height, ${l.typescale.standard.body.large.lineHeight})`),labelTextTracking:e(`var(--m3e-button-medium-label-text-tracking, ${l.typescale.standard.body.large.tracking})`),iconSize:e("var(--m3e-button-medium-icon-size, 1.5rem)"),shapeRound:e(`var(--m3e-button-medium-shape-round, ${l.shape.corner.full})`),shapeSquare:e(`var(--m3e-button-medium-shape-square, ${l.shape.corner.large})`),selectedShapeRound:e(`var(--m3e-button-medium-selected-shape-round, ${l.shape.corner.large})`),selectedShapeSquare:e(`var(--m3e-button-medium-selected-shape-square, ${l.shape.corner.full})`),shapePressedMorph:e(`var(--m3e-button-medium-shape-pressed-morph, ${l.shape.corner.medium})`),leadingSpace:e("var(--m3e-button-medium-leading-space, 1.5rem)"),trailingSpace:e("var(--m3e-button-medium-trailing-space, 1.5rem)"),iconLabelSpace:e("var(--m3e-button-medium-icon-label-space, 0.5rem)")},large:{containerHeight:e(`calc(var(--m3e-button-large-container-height, 6rem) + ${l.density.calc(-3)})`),outlineThickness:e("var(--m3e-button-large-outline-thickness, 0.125rem)"),labelTextFontSize:e(`var(--m3e-button-large-label-text-font-size, ${l.typescale.standard.headline.small.fontSize})`),labelTextFontWeight:e(`var(--m3e-button-large-label-text-font-weight, ${l.typescale.standard.headline.small.fontWeight})`),labelTextLineHeight:e(`var(--m3e-button-large-label-text-line-height, ${l.typescale.standard.headline.small.lineHeight})`),labelTextTracking:e(`var(--m3e-button-large-label-text-tracking, ${l.typescale.standard.headline.small.tracking})`),iconSize:e("var(--m3e-button-large-icon-size, 2rem)"),shapeRound:e(`var(--m3e-button-large-shape-round, ${l.shape.corner.full})`),shapeSquare:e(`var(--m3e-button-large-shape-square, ${l.shape.corner.extraLarge})`),selectedShapeRound:e(`var(--m3e-button-large-selected-shape-round, ${l.shape.corner.extraLarge})`),selectedShapeSquare:e(`var(--m3e-button-large-selected-shape-square, ${l.shape.corner.full})`),shapePressedMorph:e(`var(--m3e-button-large-shape-pressed-morph, ${l.shape.corner.large})`),leadingSpace:e("var(--m3e-button-large-leading-space, 3rem)"),trailingSpace:e("var(--m3e-button-large-trailing-space, 3rem)"),iconLabelSpace:e("var(--m3e-button-large-icon-label-space, 0.75rem)")},"extra-large":{containerHeight:e(`calc(var(--m3e-button-extra-large-container-height, 8.5rem) + ${l.density.calc(-3)})`),outlineThickness:e("var(--m3e-button-extra-large-outline-thickness, 0.1875rem)"),labelTextFontSize:e(`var(--m3e-button-extra-large-label-text-font-size, ${l.typescale.standard.headline.large.fontSize})`),labelTextFontWeight:e(`var(--m3e-button-extra-large-label-text-font-weight, ${l.typescale.standard.headline.large.fontWeight})`),labelTextLineHeight:e(`var(--m3e-button-extra-large-label-text-line-height, ${l.typescale.standard.headline.large.lineHeight})`),labelTextTracking:e(`var(--m3e-button-extra-large-label-text-tracking, ${l.typescale.standard.headline.large.tracking})`),iconSize:e("var(--m3e-button-extra-large-icon-size, 2.5rem)"),shapeRound:e(`var(--m3e-button-extra-large-shape-round, ${l.shape.corner.full})`),shapeSquare:e(`var(--m3e-button-extra-large-shape-square, ${l.shape.corner.extraLarge})`),selectedShapeRound:e(`var(--m3e-button-extra-large-selected-shape-round, ${l.shape.corner.extraLarge})`),selectedShapeSquare:e(`var(--m3e-button-extra-large-selected-shape-square, ${l.shape.corner.full})`),shapePressedMorph:e(`var(--m3e-button-extra-large-shape-pressed-morph, ${l.shape.corner.large})`),leadingSpace:e("var(--m3e-button-extra-large-leading-space, 4rem)"),trailingSpace:e("var(--m3e-button-extra-large-trailing-space, 4rem)"),iconLabelSpace:e("var(--m3e-button-extra-large-icon-label-space, 1rem)")}};function J(o){return t`
40
- :host([size="${e(o)}"]) .base {
41
- height: ${G[o].containerHeight};
42
- }
43
- :host([size="${e(o)}"]) .wrapper {
44
- padding-inline-start: ${G[o].leadingSpace};
45
- padding-inline-end: ${G[o].trailingSpace};
46
- column-gap: ${G[o].iconLabelSpace};
47
- }
48
- :host([size="${e(o)}"].-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) .wrapper {
49
- padding-inline-start: calc(
50
- ${G[o].leadingSpace} -
51
- calc(calc(var(--_adjacent-button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) / 4.25)
52
- );
53
- padding-inline-end: calc(
54
- ${G[o].trailingSpace} -
55
- calc(calc(var(--_adjacent-button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) / 4.25)
56
- );
57
- }
58
- :host([size="${e(o)}"]) .label {
59
- font-size: ${G[o].labelTextFontSize};
60
- font-weight: ${G[o].labelTextFontWeight};
61
- line-height: ${G[o].labelTextLineHeight};
62
- letter-spacing: ${G[o].labelTextTracking};
63
- }
64
- :host([size="${e(o)}"]) .icon {
65
- font-size: ${G[o].iconSize};
66
- --m3e-icon-size: ${G[o].iconSize};
67
- }
68
- :host([size="${e(o)}"]) .base {
69
- outline-offset: calc(0px - ${G[o].outlineThickness});
70
- outline-width: ${G[o].outlineThickness};
71
- }
72
- :host(:not(.-connected)[size="${e(o)}"][shape="rounded"]) .base {
73
- border-radius: var(--_button-shape, ${G[o].shapeRound});
74
- }
75
- :host(:not(.-connected)[size="${e(o)}"][shape="rounded"][toggle][selected]:not(.-pressed)) .base {
76
- border-radius: ${G[o].selectedShapeRound};
77
- }
78
- :host(:not(.-connected)[size="${e(o)}"][shape="square"]) .base {
79
- border-radius: ${G[o].shapeSquare};
80
- }
81
- :host(:not(.-connected)[size="${e(o)}"][shape="square"][toggle][selected]:not(.-pressed)) .base {
82
- border-radius: var(--_button-shape, ${G[o].selectedShapeSquare});
83
- }
84
- :host(:not(.-connected)[size="${e(o)}"].-pressed) .base {
85
- border-radius: ${G[o].shapePressedMorph};
86
- }
87
- :host(.-connected[size="${e(o)}"][shape="rounded"]) .base {
88
- border-start-start-radius: var(
89
- --_button-rounded-start-shape,
90
- var(--_button-shape, ${G[o].shapeRound})
91
- );
92
- border-end-start-radius: var(
93
- --_button-rounded-start-shape,
94
- var(--_button-shape, ${G[o].shapeRound})
95
- );
96
- border-start-end-radius: var(
97
- --_button-rounded-end-shape,
98
- var(--_button-shape, ${G[o].shapeRound})
99
- );
100
- border-end-end-radius: var(
101
- --_button-rounded-end-shape,
102
- var(--_button-shape, ${G[o].shapeRound})
103
- );
104
- }
105
- :host(.-connected[size="${e(o)}"][shape="square"]) .base {
106
- border-start-start-radius: var(--_button-square-start-shape, ${G[o].shapeSquare});
107
- border-end-start-radius: var(--_button-square-start-shape, ${G[o].shapeSquare});
108
- border-start-end-radius: var(--_button-square-end-shape, ${G[o].shapeSquare});
109
- border-end-end-radius: var(--_button-square-end-shape, ${G[o].shapeSquare});
110
- }
111
- :host(.-connected[size="${e(o)}"][shape="square"][toggle][selected]:not(.-pressed)) .base {
112
- border-radius: var(--_button-shape, ${G[o].selectedShapeSquare});
113
- }
114
- :host(.-connected[size="${e(o)}"].-pressed) .base {
115
- border-start-start-radius: var(--_button-start-shape-pressed-morph, ${G[o].shapePressedMorph});
116
- border-end-start-radius: var(--_button-start-shape-pressed-morph, ${G[o].shapePressedMorph});
117
- border-start-end-radius: var(--_button-end-shape-pressed-morph, ${G[o].shapePressedMorph});
118
- border-end-end-radius: var(--_button-end-shape-pressed-morph, ${G[o].shapePressedMorph});
119
- }
120
- `}const Q=[J("extra-small"),J("small"),J("medium"),J("large"),J("extra-large")],X=t`
121
- :host {
122
- display: inline-block;
123
- outline: none;
124
- user-select: none;
125
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
126
- }
127
- .base {
128
- box-sizing: border-box;
129
- vertical-align: middle;
130
- display: inline-flex;
131
- align-items: center;
132
- justify-content: center;
133
- position: relative;
134
- width: 100%;
135
- transition: ${e(`background-color ${l.motion.duration.short4} ${l.motion.easing.standard}`)};
136
- }
137
- .touch {
138
- position: absolute;
139
- height: 3rem;
140
- left: 0;
141
- right: 0;
142
- }
143
- :host(.-pressed) .base,
144
- :host(.-resting) .base {
145
- transition: ${e(`background-color ${l.motion.duration.short4} ${l.motion.easing.standard},\n border-radius ${l.motion.spring.fastEffects}`)};
146
- }
147
- .wrapper {
148
- width: 100%;
149
- overflow: hidden;
150
- display: inline-flex;
151
- align-items: center;
152
- }
153
- .label {
154
- justify-self: center;
155
- flex: 1 1 auto;
156
- text-align: center;
157
- white-space: nowrap;
158
- overflow: hidden;
159
- text-overflow: ellipsis;
160
- transition: ${e(`color ${l.motion.duration.short4} ${l.motion.easing.standard}`)};
161
- }
162
- .icon {
163
- transition: ${e(`color ${l.motion.duration.short4} ${l.motion.easing.standard}`)};
164
- }
165
- :host(:not(:disabled):not([disabled-interactive])) {
166
- cursor: pointer;
167
- }
168
- :host([disabled-interactive]) {
169
- cursor: not-allowed;
170
- }
171
- ::slotted([slot="icon"]),
172
- ::slotted([slot="selected-icon"]),
173
- ::slotted([slot="trailing-icon"]) {
174
- font-size: inherit !important;
175
- flex: none;
176
- }
177
- ::slotted(svg[slot="icon"]),
178
- ::slotted(svg[slot="selected-icon"]),
179
- ::slotted(svg[slot="trailing-icon"]) {
180
- width: 1em;
181
- height: 1em;
182
- }
183
- :host([toggle]:not([selected])) .base.with-selected-icon slot[name="selected-icon"],
184
- :host([toggle][selected]) .base.with-selected-icon slot[name="icon"] {
185
- display: none;
186
- }
187
- a {
188
- all: unset;
189
- display: block;
190
- position: absolute;
191
- top: 0px;
192
- left: 0px;
193
- right: 0px;
194
- bottom: 0px;
195
- z-index: 1;
196
- }
197
- :host(.-grouped.-connected) {
198
- flex: 1 1 auto;
199
- }
200
- :host(.-grouped:not(.-connected)) {
201
- transition: ${e(`padding-inline ${l.motion.spring.fastEffects}`)};
202
- }
203
- :host(.-grouped:not(.-connected):not(.-adjacent-pressed):not(.-pressed)) {
204
- flex-shrink: 0;
205
- flex-grow: 0;
206
- }
207
- :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) {
208
- flex-shrink: 1;
209
- min-width: 0;
210
- }
211
- :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) .label {
212
- text-overflow: clip;
213
- }
214
- :host(.-grouped:not(.-connected).-pressed:not([disabled-interactive]):not(:disabled)) {
215
- flex-shrink: 0;
216
- flex-basis: calc(
217
- var(--_button-width) + calc(var(--_button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15))
218
- );
219
- }
220
- @media (forced-colors: active) {
221
- .base,
222
- .label,
223
- .icon {
224
- transition: none;
225
- }
226
- :host(.-pressed) .base,
227
- :host(.-resting) .base {
228
- transition: ${e(`border-radius ${l.motion.spring.fastEffects}`)};
229
- }
230
- :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .base {
231
- background-color: ButtonFace;
232
- outline-color: ButtonText;
233
- }
234
- :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .label,
235
- :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .icon {
236
- color: ButtonText;
237
- }
238
- :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .base {
239
- background-color: ButtonFace;
240
- outline-color: ButtonText;
241
- }
242
- :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .label,
243
- :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .icon {
244
- color: ButtonText;
245
- }
246
- :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .base {
247
- background-color: ButtonText;
248
- outline: none;
249
- }
250
- :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .label,
251
- :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .icon {
252
- forced-color-adjust: none;
253
- color: ButtonFace;
254
- background-color: ButtonText;
255
- }
256
- :host([variant]:disabled) .base,
257
- :host([variant][disabled-interactive]) .base {
258
- outline-color: GrayText;
259
- background-color: unset;
260
- }
261
- :host([variant]:disabled) .label,
262
- :host([variant][disabled-interactive]) .label,
263
- :host([variant]:disabled) .icon,
264
- :host([variant][disabled-interactive]) .icon {
265
- color: GrayText;
266
- }
267
- .base {
268
- outline-style: solid;
269
- }
270
- :host([size="extra-small"]) .base {
271
- outline-offset: calc(0px - var(--m3e-button-extra-small-outline-thickness, 1px));
272
- outline-width: var(--m3e-button-extra-small-outline-thickness, 1px);
273
- }
274
- :host([size="small"]) .base {
275
- outline-offset: calc(0px - var(--m3e-button-small-outline-thickness, 1px));
276
- outline-width: var(--m3e-button-small-outline-thickness, 1px);
277
- }
278
- :host([size="medium"]) .base {
279
- outline-offset: calc(0px - var(--m3e-button-medium-outline-thickness, 1px));
280
- outline-width: var(--m3e-button-medium-outline-thickness, 1px);
281
- }
282
- :host([size="large"]) .base {
283
- outline-offset: calc(0px - var(--m3e-button-large-outline-thickness, 0.125rem));
284
- outline-width: var(--m3e-button-large-outline-thickness, 0.125rem);
285
- }
286
- :host([size="extra-large"]) .base {
287
- outline-offset: calc(0px - var(--m3e-button-extra-large-outline-thickness, 0.1875rem));
288
- outline-width: var(--m3e-button-extra-large-outline-thickness, 0.1875rem);
289
- }
290
- }
291
- @media (prefers-reduced-motion) {
292
- :host(.-pressed) .base,
293
- :host(.-resting) .base,
294
- .base,
295
- .label,
296
- .icon {
297
- transition: none;
298
- }
299
- }
300
- `,Y={elevated:{labelTextColor:e(`var(--m3e-elevated-button-label-text-color, ${l.color.primary})`),iconColor:e(`var(--m3e-elevated-button-icon-color, ${l.color.primary})`),containerColor:e(`var(--m3e-elevated-button-container-color, ${l.color.surfaceContainerLow})`),containerElevation:e(`var(--m3e-elevated-button-container-elevation, ${l.elevation.level1})`),unselectedLabelTextColor:e(`var(--m3e-elevated-button-unselected-label-text-color, ${l.color.primary})`),unselectedIconColor:e(`var(--m3e-elevated-button-unselected-icon-color, ${l.color.primary})`),unselectedContainerColor:e(`var(--m3e-elevated-button-unselected-container-color, ${l.color.surfaceContainerLow})`),selectedLabelTextColor:e(`var(--m3e-elevated-button-selected-label-text-color, ${l.color.onPrimary})`),selectedIconColor:e(`var(--m3e-elevated-button-selected-icon-color, ${l.color.onPrimary})`),selectedContainerColor:e(`var(--m3e-elevated-button-selected-container-color, ${l.color.primary})`),disabled:{containerColor:e(`var(--m3e-elevated-button-disabled-container-color, ${l.color.onSurface})`),containerOpacity:e("var(--m3e-elevated-button-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-elevated-button-disabled-icon-color, ${l.color.onSurface})`),iconOpacity:e("var(--m3e-elevated-button-disabled-icon-opacity, 38%)"),labelTextColor:e(`var(--m3e-elevated-button-disabled-label-text-color, ${l.color.onSurface})`),labelTextOpacity:e("var(--m3e-elevated-button-disabled-label-text-opacity, 38%)"),containerElevation:e(`var(--m3e-elevated-button-disabled-container-elevation, ${l.elevation.level0})`)},hover:{iconColor:e(`var(--m3e-elevated-button-hover-icon-color, ${l.color.primary})`),labelTextColor:e(`var(--m3e-elevated-button-hover-label-text-color, ${l.color.primary})`),stateLayerColor:e(`var(--m3e-elevated-button-hover-state-layer-color, ${l.color.primary})`),stateLayerOpacity:e(`var(--m3e-elevated-button-hover-state-layer-opacity, ${l.state.hoverStateLayerOpacity})`),containerElevation:e(`var(--m3e-elevated-button-hover-container-elevation, ${l.elevation.level2})`),unselectedIconColor:e(`var(--m3e-elevated-button-hover-unselected-icon-color, ${l.color.primary})`),unselectedLabelTextColor:e(`var(--m3e-elevated-button-hover-unselected-label-text-color, ${l.color.primary})`),unselectedStateLayerColor:e(`var(--m3e-elevated-button-hover-unselected-state-layer-color, ${l.color.primary})`),selectedIconColor:e(`var(--m3e-elevated-button-hover-selected-icon-color, ${l.color.onPrimary})`),selectedLabelTextColor:e(`var(--m3e-elevated-button-hover-selected-label-text-color, ${l.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-elevated-button-hover-selected-state-layer-color, ${l.color.onPrimary})`)},focus:{iconColor:e(`var(--m3e-elevated-button-focus-icon-color, ${l.color.primary})`),labelTextColor:e(`var(--m3e-elevated-button-focus-label-text-color, ${l.color.primary})`),stateLayerColor:e(`var(--m3e-elevated-button-focus-state-layer-color, ${l.color.primary})`),stateLayerOpacity:e(`var(--m3e-elevated-button-focus-state-layer-opacity, ${l.state.focusStateLayerOpacity})`),containerElevation:e(`var(--m3e-elevated-button-focus-container-elevation, ${l.elevation.level1})`),unselectedLabelTextColor:e(`var(--m3e-elevated-button-focus-unselected-label-text-color, ${l.color.primary})`),unselectedIconColor:e(`var(--m3e-elevated-button-focus-unselected-icon-color, ${l.color.primary})`),unselectedStateLayerColor:e(`var(--m3e-elevated-button-focus-unselected-state-layer-color, ${l.color.primary})`),selectedIconColor:e(`var(--m3e-elevated-button-focus-selected-icon-color, ${l.color.onPrimary})`),selectedLabelTextColor:e(`var(--m3e-elevated-button-focus-selected-label-text-color, ${l.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-elevated-button-focus-selected-state-layer-color, ${l.color.onPrimary})`)},pressed:{iconColor:e(`var(--m3e-elevated-button-pressed-icon-color, ${l.color.primary})`),labelTextColor:e(`var(--m3e-elevated-button-pressed-label-text-color, ${l.color.primary})`),stateLayerColor:e(`var(--m3e-elevated-button-pressed-state-layer-color, ${l.color.primary})`),stateLayerOpacity:e(`var(--m3e-elevated-button-pressed-state-layer-opacity, ${l.state.pressedStateLayerOpacity})`),containerElevation:e(`var(--m3e-elevated-button-pressed-container-elevation, ${l.elevation.level1})`),unselectedLabelTextColor:e(`var(--m3e-elevated-button-pressed-unselected-label-text-color, ${l.color.primary})`),unselectedIconColor:e(`var(--m3e-elevated-button-pressed-unselected-icon-color, ${l.color.primary})`),unselectedStateLayerColor:e(`var(--m3e-elevated-button-pressed-unselected-state-layer-color, ${l.color.primary})`),selectedIconColor:e(`var(--m3e-elevated-button-pressed-selected-icon-color, ${l.color.onPrimary})`),selectedLabelTextColor:e(`var(--m3e-elevated-button-pressed-selected-label-text-color, ${l.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-elevated-button-pressed-selected-state-layer-color, ${l.color.onPrimary})`)}},outlined:{labelTextColor:e(`var(--m3e-outlined-button-label-text-color, ${l.color.onSurfaceVariant})`),iconColor:e(`var(--m3e-outlined-button-icon-color, ${l.color.onSurfaceVariant})`),outlineColor:e(`var(--m3e-outlined-button-outline-color, ${l.color.outlineVariant})`),unselectedLabelTextColor:e(`var(--m3e-outlined-button-unselected-label-text-color, ${l.color.onSurfaceVariant})`),unselectedIconColor:e(`var(--m3e-outlined-button-unselected-icon-color, ${l.color.onSurfaceVariant})`),selectedLabelTextColor:e(`var(--m3e-outlined-button-selected-label-text-color, ${l.color.inverseOnSurface})`),selectedIconColor:e(`var(--m3e-outlined-button-selected-icon-color, ${l.color.inverseOnSurface})`),selectedContainerColor:e(`var(--m3e-outlined-button-selected-container-color, ${l.color.inverseSurface})`),disabled:{containerColor:e(`var(--m3e-outlined-button-disabled-container-color, ${l.color.onSurface})`),containerOpacity:e("var(--m3e-outlined-button-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-outlined-button-disabled-icon-color, ${l.color.onSurface})`),iconOpacity:e("var(--m3e-outlined-button-disabled-icon-opacity, 38%)"),labelTextColor:e(`var(--m3e-outlined-button-disabled-label-text-color, ${l.color.onSurface})`),labelTextOpacity:e("var(--m3e-outlined-button-disabled-label-text-opacity, 38%)"),outlineColor:e(`var(--m3e-outlined-button-disabled-outline-color, ${l.color.outlineVariant})`)},hover:{iconColor:e(`var(--m3e-outlined-button-hover-icon-color, ${l.color.onSurfaceVariant})`),labelTextColor:e(`var(--m3e-outlined-button-hover-label-text-color, ${l.color.onSurfaceVariant})`),outlineColor:e(`var(--m3e-outlined-button-hover-outline-color, ${l.color.outlineVariant})`),stateLayerColor:e(`var(--m3e-outlined-button-hover-state-layer-color, ${l.color.onSurfaceVariant})`),stateLayerOpacity:e(`var(--m3e-outlined-button-hover-state-layer-opacity, ${l.state.hoverStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-outlined-button-hover-unselected-icon-color, ${l.color.onSurfaceVariant})`),unselectedLabelTextColor:e(`var(--m3e-outlined-button-hover-unselected-label-text-color, ${l.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-outlined-button-hover-unselected-state-layer-color, ${l.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-outlined-button-hover-selected-icon-color, ${l.color.inverseOnSurface})`),selectedLabelTextColor:e(`var(--m3e-outlined-button-hover-selected-label-text-color, ${l.color.inverseOnSurface})`),selectedStateLayerColor:e(`var(--m3e-outlined-button-hover-selected-state-layer-color, ${l.color.inverseOnSurface})`)},focus:{iconColor:e(`var(--m3e-outlined-button-focus-icon-color, ${l.color.onSurfaceVariant})`),labelTextColor:e(`var(--m3e-outlined-button-focus-label-text-color, ${l.color.onSurfaceVariant})`),outlineColor:e(`var(--m3e-outlined-button-focus-outline-color, ${l.color.outlineVariant})`),stateLayerColor:e(`var(--m3e-outlined-button-focus-state-layer-color, ${l.color.onSurfaceVariant})`),stateLayerOpacity:e(`var(--m3e-outlined-button-focus-state-layer-opacity, ${l.state.focusStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-outlined-button-focus-unselected-icon-color, ${l.color.onSurfaceVariant})`),unselectedLabelTextColor:e(`var(--m3e-outlined-button-focus-unselected-label-text-color, ${l.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-outlined-button-focus-unselected-state-layer-color, ${l.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-outlined-button-focus-selected-icon-color, ${l.color.inverseOnSurface})`),selectedLabelTextColor:e(`var(--m3e-outlined-button-focus-selected-label-text-color, ${l.color.inverseOnSurface})`),selectedStateLayerColor:e(`var(--m3e-outlined-button-focus-selected-state-layer-color, ${l.color.inverseOnSurface})`)},pressed:{iconColor:e(`var(--m3e-outlined-button-pressed-icon-color, ${l.color.onSurfaceVariant})`),labelTextColor:e(`var(--m3e-outlined-button-pressed-label-text-color, ${l.color.onSurfaceVariant})`),outlineColor:e(`var(--m3e-outlined-button-pressed-outline-color, ${l.color.outlineVariant})`),stateLayerColor:e(`var(--m3e-outlined-button-pressed-state-layer-color, ${l.color.onSurfaceVariant})`),stateLayerOpacity:e(`var(--m3e-outlined-button-pressed-state-layer-opacity, ${l.state.pressedStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-outlined-button-pressed-unselected-icon-color, ${l.color.onSurfaceVariant})`),unselectedLabelTextColor:e(`var(--m3e-outlined-button-pressed-unselected-label-text-color, ${l.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-outlined-button-pressed-unselected-state-layer-color, ${l.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-outlined-button-pressed-selected-icon-color, ${l.color.inverseOnSurface})`),selectedLabelTextColor:e(`var(--m3e-outlined-button-pressed-selected-label-text-color, ${l.color.inverseOnSurface})`),selectedStateLayerColor:e(`var(--m3e-outlined-button-pressed-selected-state-layer-color, ${l.color.inverseOnSurface})`)}},filled:{labelTextColor:e(`var(--m3e-filled-button-label-text-color, ${l.color.onPrimary})`),iconColor:e(`var(--m3e-filled-button-icon-color, ${l.color.onPrimary})`),containerColor:e(`var(--m3e-filled-button-container-color, ${l.color.primary})`),containerElevation:e(`var(--m3e-filled-button-container-elevation, ${l.elevation.level0})`),unselectedLabelTextColor:e(`var(--m3e-filled-button-unselected-label-text-color, ${l.color.onSurfaceVariant})`),unselectedIconColor:e(`var(--m3e-filled-button-unselected-icon-color, ${l.color.onSurfaceVariant})`),unselectedContainerColor:e(`var(--m3e-filled-button-unselected-container-color, ${l.color.surfaceContainer})`),selectedLabelTextColor:e(`var(--m3e-filled-button-selected-label-text-color, ${l.color.onPrimary})`),selectedIconColor:e(`var(--m3e-filled-button-selected-icon-color, ${l.color.onPrimary})`),selectedContainerColor:e(`var(--m3e-filled-button-selected-container-color, ${l.color.primary})`),disabled:{containerColor:e(`var(--m3e-filled-button-disabled-container-color, ${l.color.onSurface})`),containerOpacity:e("var(--m3e-filled-button-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-filled-button-disabled-icon-color, ${l.color.onSurface})`),iconOpacity:e("var(--m3e-filled-button-disabled-icon-opacity, 38%)"),labelTextColor:e(`var(--m3e-filled-button-disabled-label-text-color, ${l.color.onSurface})`),labelTextOpacity:e("var(--m3e-filled-button-disabled-label-text-opacity, 38%)"),containerElevation:e(`var(--m3e-filled-button-disabled-container-elevation, ${l.elevation.level0})`)},hover:{iconColor:e(`var(--m3e-filled-button-hover-icon-color, ${l.color.onPrimary})`),labelTextColor:e(`var(--m3e-filled-button-hover-label-text-color, ${l.color.onPrimary})`),stateLayerColor:e(`var(--m3e-filled-button-hover-state-layer-color, ${l.color.onPrimary})`),stateLayerOpacity:e(`var(--m3e-filled-button-hover-state-layer-opacity, ${l.state.hoverStateLayerOpacity})`),containerElevation:e(`var(--m3e-filled-button-hover-container-elevation, ${l.elevation.level1})`),unselectedIconColor:e(`var(--m3e-filled-button-hover-unselected-icon-color, ${l.color.onSurfaceVariant})`),unselectedLabelTextColor:e(`var(--m3e-filled-button-hover-unselected-label-text-color, ${l.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-filled-button-hover-unselected-state-layer-color, ${l.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-filled-button-hover-selected-icon-color, ${l.color.onPrimary})`),selectedLabelTextColor:e(`var(--m3e-filled-button-hover-selected-label-text-color, ${l.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-filled-button-hover-selected-state-layer-color, ${l.color.onPrimary})`)},focus:{iconColor:e(`var(--m3e-filled-button-focus-icon-color, ${l.color.onPrimary})`),labelTextColor:e(`var(--m3e-filled-button-focus-label-text-color, ${l.color.onPrimary})`),stateLayerColor:e(`var(--m3e-filled-button-focus-state-layer-color, ${l.color.onPrimary})`),stateLayerOpacity:e(`var(--m3e-filled-button-focus-state-layer-opacity, ${l.state.focusStateLayerOpacity})`),containerElevation:e(`var(--m3e-filled-button-focus-container-elevation, ${l.elevation.level0})`),unselectedIconColor:e(`var(--m3e-filled-button-focus-unselected-icon-color, ${l.color.onSurfaceVariant})`),unselectedLabelTextColor:e(`var(--m3e-filled-button-focus-unselected-label-text-color, ${l.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-filled-button-focus-unselected-state-layer-color, ${l.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-filled-button-focus-selected-icon-color, ${l.color.onPrimary})`),selectedLabelTextColor:e(`var(--m3e-filled-button-focus-selected-label-text-color, ${l.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-filled-button-focus-selected-state-layer-color, ${l.color.onPrimary})`)},pressed:{iconColor:e(`var(--m3e-filled-button-pressed-icon-color, ${l.color.onPrimary})`),labelTextColor:e(`var(--m3e-filled-button-pressed-label-text-color, ${l.color.onPrimary})`),stateLayerColor:e(`var(--m3e-filled-button-pressed-state-layer-color, ${l.color.onPrimary})`),stateLayerOpacity:e(`var(--m3e-filled-button-pressed-state-layer-opacity, ${l.state.pressedStateLayerOpacity})`),containerElevation:e(`var(--m3e-filled-button-pressed-container-elevation, ${l.elevation.level0})`),unselectedIconColor:e(`var(--m3e-filled-button-pressed-unselected-icon-color, ${l.color.onSurfaceVariant})`),unselectedLabelTextColor:e(`var(--m3e-filled-button-pressed-unselected-label-text-color, ${l.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-filled-button-pressed-unselected-state-layer-color, ${l.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-filled-button-pressed-selected-icon-color, ${l.color.onPrimary})`),selectedLabelTextColor:e(`var(--m3e-filled-button-pressed-selected-label-text-color, ${l.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-filled-button-pressed-selected-state-layer-color, ${l.color.onPrimary})`)}},tonal:{labelTextColor:e(`var(--m3e-tonal-button-label-text-color, ${l.color.onSecondaryContainer})`),iconColor:e(`var(--m3e-tonal-button-icon-color, ${l.color.onSecondaryContainer})`),containerColor:e(`var(--m3e-tonal-button-container-color, ${l.color.secondaryContainer})`),containerElevation:e(`var(--m3e-tonal-button-container-elevation, ${l.elevation.level0})`),unselectedLabelTextColor:e(`var(--m3e-tonal-button-unselected-label-text-color, ${l.color.onSecondaryContainer})`),unselectedIconColor:e(`var(--m3e-tonal-button-unselected-icon-color, ${l.color.onSecondaryContainer})`),unselectedContainerColor:e(`var(--m3e-tonal-button-unselected-container-color, ${l.color.secondaryContainer})`),selectedLabelTextColor:e(`var(--m3e-tonal-button-selected-label-text-color, ${l.color.onSecondary})`),selectedIconColor:e(`var(--m3e-tonal-button-selected-icon-color, ${l.color.onSecondary})`),selectedContainerColor:e(`var(--m3e-tonal-button-selected-container-color, ${l.color.secondary})`),disabled:{containerColor:e(`var(--m3e-tonal-button-disabled-container-color, ${l.color.onSurface})`),containerOpacity:e("var(--m3e-tonal-button-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-tonal-button-disabled-icon-color, ${l.color.onSurface})`),iconOpacity:e("var(--m3e-tonal-button-disabled-icon-opacity, 38%)"),labelTextColor:e(`var(--m3e-tonal-button-disabled-label-text-color, ${l.color.onSurface})`),labelTextOpacity:e("var(--m3e-tonal-button-disabled-label-text-opacity, 38%)"),containerElevation:e(`var(--m3e-tonal-button-disabled-container-elevation, ${l.elevation.level0})`)},hover:{iconColor:e(`var(--m3e-tonal-button-hover-icon-color, ${l.color.onSecondaryContainer})`),labelTextColor:e(`var(--m3e-tonal-button-hover-label-text-color, ${l.color.onSecondaryContainer})`),stateLayerColor:e(`var(--m3e-tonal-button-hover-state-layer-color, ${l.color.onSecondaryContainer})`),stateLayerOpacity:e(`var(--m3e-tonal-button-hover-state-layer-opacity, ${l.state.hoverStateLayerOpacity})`),containerElevation:e(`var(--m3e-tonal-button-hover-container-elevation, ${l.elevation.level1})`),unselectedIconColor:e(`var(--m3e-tonal-button-hover-unselected-icon-color, ${l.color.onSecondaryContainer})`),unselectedLabelTextColor:e(`var(--m3e-tonal-button-hover-unselected-label-text-color, ${l.color.onSecondaryContainer})`),unselectedStateLayerColor:e(`var(--m3e-tonal-button-hover-unselected-state-layer-color, ${l.color.onSecondaryContainer})`),selectedIconColor:e(`var(--m3e-tonal-button-hover-selected-icon-color, ${l.color.onSecondary})`),selectedLabelTextColor:e(`var(--m3e-tonal-button-hover-selected-label-text-color, ${l.color.onSecondary})`),selectedStateLayerColor:e(`var(--m3e-tonal-button-hover-selected-state-layer-color, ${l.color.onSecondary})`)},focus:{iconColor:e(`var(--m3e-tonal-button-focus-icon-color, ${l.color.onSecondaryContainer})`),labelTextColor:e(`var(--m3e-tonal-button-focus-label-text-color, ${l.color.onSecondaryContainer})`),stateLayerColor:e(`var(--m3e-tonal-button-focus-state-layer-color, ${l.color.onSecondaryContainer})`),stateLayerOpacity:e(`var(--m3e-tonal-button-focus-state-layer-opacity, ${l.state.focusStateLayerOpacity})`),containerElevation:e(`var(--m3e-tonal-button-focus-container-elevation, ${l.elevation.level0})`),unselectedIconColor:e(`var(--m3e-tonal-button-focus-unselected-icon-color, ${l.color.onSecondaryContainer})`),unselectedLabelTextColor:e(`var(--m3e-tonal-button-focus-unselected-label-text-color, ${l.color.onSecondaryContainer})`),unselectedStateLayerColor:e(`var(--m3e-tonal-button-focus-unselected-state-layer-color, ${l.color.onSecondaryContainer})`),selectedIconColor:e(`var(--m3e-tonal-button-focus-selected-icon-color, ${l.color.onSecondary})`),selectedLabelTextColor:e(`var(--m3e-tonal-button-focus-selected-label-text-color, ${l.color.onSecondary})`),selectedStateLayerColor:e(`var(--m3e-tonal-button-focus-selected-state-layer-color, ${l.color.onSecondary})`)},pressed:{iconColor:e(`var(--m3e-tonal-button-pressed-icon-color, ${l.color.onSecondaryContainer})`),labelTextColor:e(`var(--m3e-tonal-button-pressed-label-text-color, ${l.color.onSecondaryContainer})`),stateLayerColor:e(`var(--m3e-tonal-button-pressed-state-layer-color, ${l.color.onSecondaryContainer})`),stateLayerOpacity:e(`var(--m3e-tonal-button-pressed-state-layer-opacity, ${l.state.pressedStateLayerOpacity})`),containerElevation:e(`var(--m3e-tonal-button-pressed-container-elevation, ${l.elevation.level0})`),unselectedIconColor:e(`var(--m3e-tonal-button-pressed-unselected-icon-color, ${l.color.onSecondaryContainer})`),unselectedLabelTextColor:e(`var(--m3e-tonal-button-pressed-unselected-label-text-color, ${l.color.onSecondaryContainer})`),unselectedStateLayerColor:e(`var(--m3e-tonal-button-pressed-unselected-state-layer-color, ${l.color.onSecondaryContainer})`),selectedIconColor:e(`var(--m3e-tonal-button-pressed-selected-icon-color, ${l.color.onSecondary})`),selectedLabelTextColor:e(`var(--m3e-tonal-button-pressed-selected-label-text-color, ${l.color.onSecondary})`),selectedStateLayerColor:e(`var(--m3e-tonal-button-pressed-selected-state-layer-color, ${l.color.onSecondary})`)}},text:{labelTextColor:e(`var(--m3e-text-button-label-text-color, ${l.color.primary})`),iconColor:e(`var(--m3e-text-button-icon-color, ${l.color.primary})`),unselectedLabelTextColor:e(`var(--m3e-text-button-unselected-label-text-color, ${l.color.primary})`),unselectedIconColor:e(`var(--m3e-text-button-unselected-icon-color, ${l.color.primary})`),selectedLabelTextColor:e(`var(--m3e-text-button-selected-label-text-color, ${l.color.primary})`),selectedIconColor:e(`var(--m3e-text-button-selected-icon-color, ${l.color.primary})`),disabled:{containerColor:e(`var(--m3e-text-button-disabled-container-color, ${l.color.onSurface})`),containerOpacity:e("var(--m3e-text-button-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-text-button-disabled-icon-color, ${l.color.onSurface})`),iconOpacity:e("var(--m3e-text-button-disabled-icon-opacity, 38%)"),labelTextColor:e(`var(--m3e-text-button-disabled-label-text-color, ${l.color.onSurface})`),labelTextOpacity:e("var(--m3e-text-button-disabled-label-text-opacity, 38%)")},hover:{iconColor:e(`var(--m3e-text-button-hover-icon-color, ${l.color.primary})`),labelTextColor:e(`var(--m3e-text-button-hover-label-text-color, ${l.color.primary})`),stateLayerColor:e(`var(--m3e-text-button-hover-state-layer-color, ${l.color.primary})`),stateLayerOpacity:e(`var(--m3e-text-button-hover-state-layer-opacity, ${l.state.hoverStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-text-button-hover-unselected-icon-color, ${l.color.primary})`),unselectedLabelTextColor:e(`var(--m3e-text-button-hover-unselected-label-text-color, ${l.color.primary})`),unselectedStateLayerColor:e(`var(--m3e-text-button-hover-unselected-state-layer-color, ${l.color.primary})`),selectedIconColor:e(`var(--m3e-text-button-hover-selected-icon-color, ${l.color.primary})`),selectedLabelTextColor:e(`var(--m3e-text-button-hover-selected-label-text-color, ${l.color.primary})`),selectedStateLayerColor:e(`var(--m3e-text-button-hover-selected-state-layer-color, ${l.color.primary})`)},focus:{iconColor:e(`var(--m3e-text-button-focus-icon-color, ${l.color.primary})`),labelTextColor:e(`var(--m3e-text-button-focus-label-text-color, ${l.color.primary})`),stateLayerColor:e(`var(--m3e-text-button-focus-state-layer-color, ${l.color.primary})`),stateLayerOpacity:e(`var(--m3e-text-button-focus-state-layer-opacity, ${l.state.focusStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-text-button-focus-unselected-icon-color, ${l.color.primary})`),unselectedLabelTextColor:e(`var(--m3e-text-button-focus-unselected-label-text-color, ${l.color.primary})`),unselectedStateLayerColor:e(`var(--m3e-text-button-focus-unselected-state-layer-color, ${l.color.primary})`),selectedIconColor:e(`var(--m3e-text-button-focus-selected-icon-color, ${l.color.primary})`),selectedLabelTextColor:e(`var(--m3e-text-button-focus-selected-label-text-color, ${l.color.primary})`),selectedStateLayerColor:e(`var(--m3e-text-button-focus-selected-state-layer-color, ${l.color.primary})`)},pressed:{iconColor:e(`var(--m3e-text-button-pressed-icon-color, ${l.color.primary})`),labelTextColor:e(`var(--m3e-text-button-pressed-label-text-color, ${l.color.primary})`),stateLayerColor:e(`var(--m3e-text-button-pressed-state-layer-color, ${l.color.primary})`),stateLayerOpacity:e(`var(--m3e-text-button-pressed-state-layer-opacity, ${l.state.pressedStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-text-button-pressed-unselected-icon-color, ${l.color.primary})`),unselectedLabelTextColor:e(`var(--m3e-text-button-pressed-unselected-label-text-color, ${l.color.primary})`),unselectedStateLayerColor:e(`var(--m3e-text-button-pressed-unselected-state-layer-color, ${l.color.primary})`),selectedIconColor:e(`var(--m3e-text-button-pressed-selected-icon-color, ${l.color.primary})`),selectedLabelTextColor:e(`var(--m3e-text-button-pressed-selected-label-text-color, ${l.color.primary})`),selectedStateLayerColor:e(`var(--m3e-text-button-pressed-selected-state-layer-color, ${l.color.primary})`)}}};function Z(o){return t`
301
- :host([variant="${e(o)}"]:not(:disabled):not([disabled-interactive])) .base {
302
- background-color: ${Y[o].containerColor??e("unset")};
303
- --m3e-state-layer-hover-color: ${Y[o].hover.stateLayerColor};
304
- --m3e-state-layer-hover-opacity: ${Y[o].hover.stateLayerOpacity};
305
- --m3e-state-layer-focus-color: ${Y[o].focus.stateLayerColor};
306
- --m3e-state-layer-focus-opacity: ${Y[o].focus.stateLayerOpacity};
307
- --m3e-ripple-color: ${Y[o].pressed.stateLayerColor};
308
- --m3e-ripple-opacity: ${Y[o].pressed.stateLayerOpacity};
309
- --m3e-elevation-level: ${Y[o].containerElevation??e("unset")};
310
- --m3e-elevation-hover-level: ${Y[o].hover.containerElevation??e("unset")};
311
- --m3e-elevation-focus-level: ${Y[o].focus.containerElevation??e("unset")};
312
- --m3e-elevation-pressed-level: ${Y[o].pressed.containerElevation??e("unset")};
313
- }
314
- :host([variant="${e(o)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .base {
315
- background-color: ${Y[o].unselectedContainerColor??e("unset")};
316
- --m3e-state-layer-hover-color: ${Y[o].hover.unselectedStateLayerColor};
317
- --m3e-state-layer-focus-color: ${Y[o].focus.unselectedStateLayerColor};
318
- --m3e-ripple-color: ${Y[o].pressed.unselectedStateLayerColor};
319
- }
320
- :host([variant="${e(o)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .base {
321
- background-color: ${Y[o].selectedContainerColor??e("unset")};
322
- --m3e-state-layer-hover-color: ${Y[o].hover.selectedStateLayerColor};
323
- --m3e-state-layer-focus-color: ${Y[o].focus.selectedStateLayerColor};
324
- --m3e-ripple-color: ${Y[o].pressed.selectedStateLayerColor};
325
- }
326
- :host([variant="${e(o)}"]:not(:disabled):not([disabled-interactive])) .base {
327
- outline-color: ${Y[o].outlineColor??e("unset")};
328
- }
329
- :host([variant="${e(o)}"]:focus:not(:disabled):not([disabled-interactive])) .base {
330
- outline-color: ${Y[o].focus.outlineColor??e("unset")};
331
- }
332
- :host([variant="${e(o)}"]:hover:not(:disabled):not([disabled-interactive])) .base {
333
- outline-color: ${Y[o].hover.outlineColor??e("unset")};
334
- }
335
- :host([variant="${e(o)}"].-pressed:not(:disabled):not([disabled-interactive])) .base {
336
- outline-color: ${Y[o].pressed.outlineColor??e("unset")};
337
- }
338
- :host([variant="${e(o)}"]:not(:disabled):not([disabled-interactive])) .label {
339
- color: ${Y[o].labelTextColor};
340
- }
341
- :host([variant="${e(o)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .label {
342
- color: ${Y[o].unselectedLabelTextColor};
343
- }
344
- :host([variant="${e(o)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .label {
345
- color: ${Y[o].selectedLabelTextColor};
346
- }
347
- :host([variant="${e(o)}"]:focus:not(:disabled):not([disabled-interactive])) .label {
348
- color: ${Y[o].focus.labelTextColor};
349
- }
350
- :host([variant="${e(o)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive]))
351
- .label {
352
- color: ${Y[o].focus.unselectedLabelTextColor};
353
- }
354
- :host([variant="${e(o)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .label {
355
- color: ${Y[o].focus.selectedLabelTextColor};
356
- }
357
- :host([variant="${e(o)}"]:hover:not(:disabled):not([disabled-interactive])) .label {
358
- color: ${Y[o].hover.labelTextColor};
359
- }
360
- :host([variant="${e(o)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive]))
361
- .label {
362
- color: ${Y[o].hover.unselectedLabelTextColor};
363
- }
364
- :host([variant="${e(o)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .label {
365
- color: ${Y[o].hover.selectedLabelTextColor};
366
- }
367
- :host([variant="${e(o)}"].-pressed:not(:disabled):not([disabled-interactive])) .label {
368
- color: ${Y[o].pressed.labelTextColor};
369
- }
370
- :host([variant="${e(o)}"][toggle]:not([selected]).-pressed:not(:disabled):not([disabled-interactive]))
371
- .label {
372
- color: ${Y[o].pressed.unselectedLabelTextColor};
373
- }
374
- :host([variant="${e(o)}"][toggle][selected].-pressed:not(:disabled):not([disabled-interactive]))
375
- .label {
376
- color: ${Y[o].pressed.selectedLabelTextColor};
377
- }
378
- :host([variant="${e(o)}"]:not(:disabled):not([disabled-interactive])) .icon {
379
- color: ${Y[o].iconColor};
380
- }
381
- :host([variant="${e(o)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .icon {
382
- color: ${Y[o].unselectedIconColor};
383
- }
384
- :host([variant="${e(o)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .icon {
385
- color: ${Y[o].selectedIconColor};
386
- }
387
- :host([variant="${e(o)}"]:focus:not(:disabled):not([disabled-interactive])) .icon {
388
- color: ${Y[o].focus.iconColor};
389
- }
390
- :host([variant="${e(o)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive]))
391
- .icon {
392
- color: ${Y[o].focus.unselectedIconColor};
393
- }
394
- :host([variant="${e(o)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .icon {
395
- color: ${Y[o].focus.selectedIconColor};
396
- }
397
- :host([variant="${e(o)}"]:hover:not(:disabled):not([disabled-interactive])) .icon {
398
- color: ${Y[o].hover.iconColor};
399
- }
400
- :host([variant="${e(o)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive]))
401
- .icon {
402
- color: ${Y[o].hover.unselectedIconColor};
403
- }
404
- :host([variant="${e(o)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .icon {
405
- color: ${Y[o].hover.selectedIconColor};
406
- }
407
- :host([variant="${e(o)}"].-pressed:not(:disabled):not([disabled-interactive])) .icon {
408
- color: ${Y[o].pressed.iconColor};
409
- }
410
- :host([variant="${e(o)}"][toggle]:not([selected]).-pressed:not(:disabled):not([disabled-interactive]))
411
- .icon {
412
- color: ${Y[o].pressed.unselectedIconColor};
413
- }
414
- :host([variant="${e(o)}"][toggle][selected].-pressed:not(:disabled):not([disabled-interactive]))
415
- .icon {
416
- color: ${Y[o].pressed.selectedIconColor};
417
- }
418
- :host([variant="${e(o)}"]:disabled) .base,
419
- :host([variant="${e(o)}"][disabled-interactive]) .base {
420
- --m3e-elevation-level: ${Y[o].disabled.containerElevation??e("unset")};
421
- outline-color: ${Y[o].disabled.outlineColor??e("unset")};
422
- background-color: color-mix(
423
- in srgb,
424
- ${Y[o].disabled.containerColor} ${Y[o].disabled.containerOpacity},
425
- transparent
426
- );
427
- }
428
- :host([variant="${e(o)}"]:disabled) .label,
429
- :host([variant="${e(o)}"][disabled-interactive]) .label {
430
- color: color-mix(
431
- in srgb,
432
- ${Y[o].disabled.labelTextColor} ${Y[o].disabled.labelTextOpacity},
433
- transparent
434
- );
435
- }
436
- :host([variant="${e(o)}"]:disabled) .icon,
437
- :host([variant="${e(o)}"][disabled-interactive]) .icon {
438
- color: color-mix(
439
- in srgb,
440
- ${Y[o].disabled.iconColor} ${Y[o].disabled.iconOpacity},
441
- transparent
442
- );
443
- }
444
- `}const ee=[Z("text"),Z("elevated"),Z("outlined"),Z("filled"),Z("tonal"),t`
445
- :host([variant="outlined"]) .base {
446
- outline-style: solid;
447
- }
448
- `];var te,oe,re,ae,le;let ne=class extends(n(s(i(c(d(u(b(h(o,"button"),!0)))))))){constructor(){super(),te.add(this),oe.set(this,e=>x(this,te,"m",re).call(this,e)),this.variant="text",this.shape="rounded",this.size="small",this.toggle=!1,this.selected=!1,new v(this,{callback:()=>{this.grouped&&this._handleResize()}}),new p(this,{callback:e=>{!this.disabledInteractive&&this._base&&(e?x(this,te,"m",le).call(this):this.grouped||this._base?.style.removeProperty("--_button-shape"))}}),new m(this,{isPressedKey:e=>" "===e,minPressedDuration:150,callback:e=>{if(!this.disabled&&!this.disabledInteractive){this.classList.toggle("-pressed",e),this.classList.toggle("-resting",!e);const t=this.closest("m3e-button-group");if(t){const o=this.getBoundingClientRect().width,r=[...t.querySelectorAll("m3e-button,m3e-icon-button")],a=r.indexOf(this);for(let t=0;t<r.length;t++){const l=r[t];t===a-1||t===a+1?(l.style.setProperty("--_adjacent-button-width",`${o}px`),l.classList.toggle("-adjacent-pressed",e)):(l.style.removeProperty("--_adjacent-button-width"),l.classList.remove("-adjacent-pressed"))}}}}})}get grouped(){return this.classList.contains("-grouped")}render(){return a`<div class="base">
449
- <m3e-elevation class="elevation" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-elevation>
450
- <m3e-state-layer class="state-layer" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-state-layer>
451
- <m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring>
452
- <m3e-ripple class="ripple" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-ripple>
453
- <div class="touch" aria-hidden="true"></div>
454
- ${this[y]()}
455
- <div class="wrapper">
456
- ${this.toggle?a`<slot
457
- class="icon"
458
- name="selected-icon"
459
- aria-hidden="true"
460
- @slotchange="${x(this,te,"m",ae)}"
461
- ></slot>`:r}
462
- <slot class="icon" name="icon" aria-hidden="true"></slot>
463
- <div class="label">
464
- ${this.toggle&&this.selected?a`<slot name="selected"><slot></slot></slot>`:a`<slot></slot>`}
465
- </div>
466
- <slot class="icon" name="trailing-icon" aria-hidden="true"></slot>
467
- </div>
468
- </div>`}connectedCallback(){super.connectedCallback(),this.addEventListener("click",x(this,oe,"f"))}disconnectedCallback(){super.disconnectedCallback(),["-pressed","-resting","-grouped","-connected"].forEach(e=>this.classList.remove(e)),this._base?.style.removeProperty("--_button-shape"),this.style.removeProperty("--_button-width"),this.style.removeProperty("--_adjacent-button-width"),this.classList.remove("-adjacent-pressed"),this.removeEventListener("click",x(this,oe,"f"))}firstUpdated(e){super.firstUpdated(e),[this._elevation,this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}updated(e){if(super.updated(e),(e.has("disabled")&&this.disabled||e.has("disabledInteractive")&&this.disabledInteractive)&&(this.classList.toggle("-pressed",!1),this.classList.toggle("-resting",!1)),(e.has("toggle")||e.has("selected"))&&(this.ariaPressed=this.toggle?`${this.selected}`:null,this.toggle))for(const e of this.querySelectorAll("m3e-icon"))e.toggleAttribute("filled",this.selected)}_handleResize(){this.grouped&&!this.classList.contains("-pressed")&&(this.style.setProperty("--_button-width",`${this.clientWidth}px`),x(this,te,"m",le).call(this,!0))}};oe=new WeakMap,te=new WeakSet,re=function(e){(this.disabled||this.disabledInteractive)&&(e.preventDefault(),e.stopImmediatePropagation()),this.toggle&&!e.defaultPrevented&&(this.selected=!this.selected,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?this.dispatchEvent(new Event("change",{bubbles:!0})):this.selected=!this.selected)},ae=function(e){this._base?.classList.toggle("with-selected-icon",f(e.target))},le=function(e=!1){if(!this._base)return;const t=parseFloat(getComputedStyle(this._base).borderRadius);if(!isNaN(t)||e){const o=this.clientHeight/2;(o<t||e)&&this._base?.style.setProperty("--_button-shape",`${o}px`)}},ne.styles=[Q,ee,X],g([K(".base")],ne.prototype,"_base",void 0),g([K(".elevation")],ne.prototype,"_elevation",void 0),g([K(".focus-ring")],ne.prototype,"_focusRing",void 0),g([K(".state-layer")],ne.prototype,"_stateLayer",void 0),g([K(".ripple")],ne.prototype,"_ripple",void 0),g([N({reflect:!0})],ne.prototype,"variant",void 0),g([N({reflect:!0})],ne.prototype,"shape",void 0),g([N({reflect:!0})],ne.prototype,"size",void 0),g([N({type:Boolean,reflect:!0})],ne.prototype,"toggle",void 0),g([N({type:Boolean,reflect:!0})],ne.prototype,"selected",void 0),g([$(40)],ne.prototype,"_handleResize",null),ne=g([(e=>(t,o)=>{void 0!==o?o.addInitializer(()=>{customElements.define(e,t)}):customElements.define(e,t)})("m3e-button")],ne);export{ne as M3eButtonElement};
39
+ function K(e,t){return(t,o,r)=>((e,t,o)=>(o.configurable=!0,o.enumerable=!0,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,o),o))(t,o,{get(){return(t=>t.renderRoot?.querySelector(e)??null)(this)}})}const G={"extra-small":{containerHeight:e(`calc(var(--m3e-button-extra-small-container-height, 2rem) + ${l.density.calc(0)})`),outlineThickness:e("var(--m3e-button-extra-small-outline-thickness, 1px)"),labelTextFontSize:e(`var(--m3e-button-extra-small-label-text-font-size, ${l.typescale.standard.label.large.fontSize})`),labelTextFontWeight:e(`var(--m3e-button-extra-small-label-text-font-weight, ${l.typescale.standard.label.large.fontWeight})`),labelTextLineHeight:e(`var(--m3e-button-extra-small-label-text-line-height, ${l.typescale.standard.label.large.lineHeight})`),labelTextTracking:e(`var(--m3e-button-extra-small-label-text-tracking, ${l.typescale.standard.label.large.tracking})`),iconSize:e("var(--m3e-button-extra-small-icon-size, 1.25rem)"),shapeRound:e(`var(--m3e-button-extra-small-shape-round, ${l.shape.corner.full})`),shapeSquare:e(`var(--m3e-button-extra-small-shape-square, ${l.shape.corner.medium})`),selectedShapeRound:e(`var(--m3e-button-extra-small-selected-shape-round, ${l.shape.corner.medium})`),selectedShapeSquare:e(`var(--m3e-button-extra-small-selected-shape-square, ${l.shape.corner.full})`),shapePressedMorph:e(`var(--m3e-button-extra-small-shape-pressed-morph, ${l.shape.corner.small})`),leadingSpace:e("var(--m3e-button-extra-small-leading-space, 0.75rem)"),trailingSpace:e("var(--m3e-button-extra-small-trailing-space, 0.75rem)"),iconLabelSpace:e("var(--m3e-button-extra-small-icon-label-space, 0.5rem)")},small:{containerHeight:e(`calc(var(--m3e-button-small-container-height, 2.5rem) + ${l.density.calc(-1)})`),outlineThickness:e("var(--m3e-button-small-outline-thickness, 1px)"),labelTextFontSize:e(`var(--m3e-button-small-label-text-font-size, ${l.typescale.standard.label.large.fontSize})`),labelTextFontWeight:e(`var(--m3e-button-small-label-text-font-weight, ${l.typescale.standard.label.large.fontWeight})`),labelTextLineHeight:e(`var(--m3e-button-small-label-text-line-height, ${l.typescale.standard.label.large.lineHeight})`),labelTextTracking:e(`var(--m3e-button-small-label-text-tracking, ${l.typescale.standard.label.large.tracking})`),iconSize:e("var(--m3e-button-small-icon-size, 1.25rem)"),shapeRound:e(`var(--m3e-button-small-shape-round, ${l.shape.corner.full})`),shapeSquare:e(`var(--m3e-button-small-shape-square, ${l.shape.corner.medium})`),selectedShapeRound:e(`var(--m3e-button-small-selected-shape-round, ${l.shape.corner.medium})`),selectedShapeSquare:e(`var(--m3e-button-small-selected-shape-square, ${l.shape.corner.full})`),shapePressedMorph:e(`var(--m3e-button-small-shape-pressed-morph, ${l.shape.corner.small})`),leadingSpace:e("var(--m3e-button-small-leading-space, 1rem)"),trailingSpace:e("var(--m3e-button-small-trailing-space, 1rem)"),iconLabelSpace:e("var(--m3e-button-small-icon-label-space, 0.5rem)")},medium:{containerHeight:e(`calc(var(--m3e-button-medium-container-height, 3.5rem) + ${l.density.calc(-2)})`),outlineThickness:e("var(--m3e-button-medium-outline-thickness, 1px)"),labelTextFontSize:e(`var(--m3e-button-medium-label-text-font-size, ${l.typescale.standard.body.large.fontSize})`),labelTextFontWeight:e(`var(--m3e-button-medium-label-text-font-weight, ${l.typescale.standard.body.large.fontWeight})`),labelTextLineHeight:e(`var(--m3e-button-medium-label-text-line-height, ${l.typescale.standard.body.large.lineHeight})`),labelTextTracking:e(`var(--m3e-button-medium-label-text-tracking, ${l.typescale.standard.body.large.tracking})`),iconSize:e("var(--m3e-button-medium-icon-size, 1.5rem)"),shapeRound:e(`var(--m3e-button-medium-shape-round, ${l.shape.corner.full})`),shapeSquare:e(`var(--m3e-button-medium-shape-square, ${l.shape.corner.large})`),selectedShapeRound:e(`var(--m3e-button-medium-selected-shape-round, ${l.shape.corner.large})`),selectedShapeSquare:e(`var(--m3e-button-medium-selected-shape-square, ${l.shape.corner.full})`),shapePressedMorph:e(`var(--m3e-button-medium-shape-pressed-morph, ${l.shape.corner.medium})`),leadingSpace:e("var(--m3e-button-medium-leading-space, 1.5rem)"),trailingSpace:e("var(--m3e-button-medium-trailing-space, 1.5rem)"),iconLabelSpace:e("var(--m3e-button-medium-icon-label-space, 0.5rem)")},large:{containerHeight:e(`calc(var(--m3e-button-large-container-height, 6rem) + ${l.density.calc(-3)})`),outlineThickness:e("var(--m3e-button-large-outline-thickness, 0.125rem)"),labelTextFontSize:e(`var(--m3e-button-large-label-text-font-size, ${l.typescale.standard.headline.small.fontSize})`),labelTextFontWeight:e(`var(--m3e-button-large-label-text-font-weight, ${l.typescale.standard.headline.small.fontWeight})`),labelTextLineHeight:e(`var(--m3e-button-large-label-text-line-height, ${l.typescale.standard.headline.small.lineHeight})`),labelTextTracking:e(`var(--m3e-button-large-label-text-tracking, ${l.typescale.standard.headline.small.tracking})`),iconSize:e("var(--m3e-button-large-icon-size, 2rem)"),shapeRound:e(`var(--m3e-button-large-shape-round, ${l.shape.corner.full})`),shapeSquare:e(`var(--m3e-button-large-shape-square, ${l.shape.corner.extraLarge})`),selectedShapeRound:e(`var(--m3e-button-large-selected-shape-round, ${l.shape.corner.extraLarge})`),selectedShapeSquare:e(`var(--m3e-button-large-selected-shape-square, ${l.shape.corner.full})`),shapePressedMorph:e(`var(--m3e-button-large-shape-pressed-morph, ${l.shape.corner.large})`),leadingSpace:e("var(--m3e-button-large-leading-space, 3rem)"),trailingSpace:e("var(--m3e-button-large-trailing-space, 3rem)"),iconLabelSpace:e("var(--m3e-button-large-icon-label-space, 0.75rem)")},"extra-large":{containerHeight:e(`calc(var(--m3e-button-extra-large-container-height, 8.5rem) + ${l.density.calc(-3)})`),outlineThickness:e("var(--m3e-button-extra-large-outline-thickness, 0.1875rem)"),labelTextFontSize:e(`var(--m3e-button-extra-large-label-text-font-size, ${l.typescale.standard.headline.large.fontSize})`),labelTextFontWeight:e(`var(--m3e-button-extra-large-label-text-font-weight, ${l.typescale.standard.headline.large.fontWeight})`),labelTextLineHeight:e(`var(--m3e-button-extra-large-label-text-line-height, ${l.typescale.standard.headline.large.lineHeight})`),labelTextTracking:e(`var(--m3e-button-extra-large-label-text-tracking, ${l.typescale.standard.headline.large.tracking})`),iconSize:e("var(--m3e-button-extra-large-icon-size, 2.5rem)"),shapeRound:e(`var(--m3e-button-extra-large-shape-round, ${l.shape.corner.full})`),shapeSquare:e(`var(--m3e-button-extra-large-shape-square, ${l.shape.corner.extraLarge})`),selectedShapeRound:e(`var(--m3e-button-extra-large-selected-shape-round, ${l.shape.corner.extraLarge})`),selectedShapeSquare:e(`var(--m3e-button-extra-large-selected-shape-square, ${l.shape.corner.full})`),shapePressedMorph:e(`var(--m3e-button-extra-large-shape-pressed-morph, ${l.shape.corner.large})`),leadingSpace:e("var(--m3e-button-extra-large-leading-space, 4rem)"),trailingSpace:e("var(--m3e-button-extra-large-trailing-space, 4rem)"),iconLabelSpace:e("var(--m3e-button-extra-large-icon-label-space, 1rem)")}};function J(o){return t`:host([size="${e(o)}"]) .base { height: ${G[o].containerHeight}; } :host([size="${e(o)}"]) .wrapper { padding-inline-start: ${G[o].leadingSpace}; padding-inline-end: ${G[o].trailingSpace}; column-gap: ${G[o].iconLabelSpace}; } :host([size="${e(o)}"].-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) .wrapper { padding-inline-start: calc( ${G[o].leadingSpace} - calc(calc(var(--_adjacent-button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) / 4.25) ); padding-inline-end: calc( ${G[o].trailingSpace} - calc(calc(var(--_adjacent-button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) / 4.25) ); } :host([size="${e(o)}"]) .label { font-size: ${G[o].labelTextFontSize}; font-weight: ${G[o].labelTextFontWeight}; line-height: ${G[o].labelTextLineHeight}; letter-spacing: ${G[o].labelTextTracking}; } :host([size="${e(o)}"]) .icon { font-size: ${G[o].iconSize}; --m3e-icon-size: ${G[o].iconSize}; } :host([size="${e(o)}"]) .base { outline-offset: calc(0px - ${G[o].outlineThickness}); outline-width: ${G[o].outlineThickness}; } :host(:not(.-connected)[size="${e(o)}"][shape="rounded"]) .base { border-radius: var(--_button-shape, ${G[o].shapeRound}); } :host(:not(.-connected)[size="${e(o)}"][shape="rounded"][toggle][selected]:not(.-pressed)) .base { border-radius: ${G[o].selectedShapeRound}; } :host(:not(.-connected)[size="${e(o)}"][shape="square"]) .base { border-radius: ${G[o].shapeSquare}; } :host(:not(.-connected)[size="${e(o)}"][shape="square"][toggle][selected]:not(.-pressed)) .base { border-radius: var(--_button-shape, ${G[o].selectedShapeSquare}); } :host(:not(.-connected)[size="${e(o)}"].-pressed) .base { border-radius: ${G[o].shapePressedMorph}; } :host(.-connected[size="${e(o)}"][shape="rounded"]) .base { border-start-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${G[o].shapeRound}) ); border-end-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${G[o].shapeRound}) ); border-start-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${G[o].shapeRound}) ); border-end-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${G[o].shapeRound}) ); } :host(.-connected[size="${e(o)}"][shape="square"]) .base { border-start-start-radius: var(--_button-square-start-shape, ${G[o].shapeSquare}); border-end-start-radius: var(--_button-square-start-shape, ${G[o].shapeSquare}); border-start-end-radius: var(--_button-square-end-shape, ${G[o].shapeSquare}); border-end-end-radius: var(--_button-square-end-shape, ${G[o].shapeSquare}); } :host(.-connected[size="${e(o)}"][shape="square"][toggle][selected]:not(.-pressed)) .base { border-radius: var(--_button-shape, ${G[o].selectedShapeSquare}); } :host(.-connected[size="${e(o)}"].-pressed) .base { border-start-start-radius: var(--_button-start-shape-pressed-morph, ${G[o].shapePressedMorph}); border-end-start-radius: var(--_button-start-shape-pressed-morph, ${G[o].shapePressedMorph}); border-start-end-radius: var(--_button-end-shape-pressed-morph, ${G[o].shapePressedMorph}); border-end-end-radius: var(--_button-end-shape-pressed-morph, ${G[o].shapePressedMorph}); }`}const Q=[J("extra-small"),J("small"),J("medium"),J("large"),J("extra-large")],X=t`: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: ${e(`background-color ${l.motion.duration.short4} ${l.motion.easing.standard}`)}; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } :host(.-pressed) .base, :host(.-resting) .base { transition: ${e(`background-color ${l.motion.duration.short4} ${l.motion.easing.standard},\n border-radius ${l.motion.spring.fastEffects}`)}; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; } .label { justify-self: center; flex: 1 1 auto; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: ${e(`color ${l.motion.duration.short4} ${l.motion.easing.standard}`)}; } .icon { transition: ${e(`color ${l.motion.duration.short4} ${l.motion.easing.standard}`)}; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } ::slotted([slot="icon"]), ::slotted([slot="selected-icon"]), ::slotted([slot="trailing-icon"]) { font-size: inherit !important; flex: none; } ::slotted(svg[slot="icon"]), ::slotted(svg[slot="selected-icon"]), ::slotted(svg[slot="trailing-icon"]) { width: 1em; height: 1em; } :host([toggle]:not([selected])) .base.with-selected-icon slot[name="selected-icon"], :host([toggle][selected]) .base.with-selected-icon slot[name="icon"] { display: none; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } :host(.-grouped.-connected) { flex: 1 1 auto; } :host(.-grouped:not(.-connected)) { transition: ${e(`padding-inline ${l.motion.spring.fastEffects}`)}; } :host(.-grouped:not(.-connected):not(.-adjacent-pressed):not(.-pressed)) { flex-shrink: 0; flex-grow: 0; } :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) { flex-shrink: 1; min-width: 0; } :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) .label { text-overflow: clip; } :host(.-grouped:not(.-connected).-pressed:not([disabled-interactive]):not(:disabled)) { flex-shrink: 0; flex-basis: calc( var(--_button-width) + calc(var(--_button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) ); } @media (forced-colors: active) { .base, .label, .icon { transition: none; } :host(.-pressed) .base, :host(.-resting) .base { transition: ${e(`border-radius ${l.motion.spring.fastEffects}`)}; } :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .label, :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .icon { color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .icon { color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .base { background-color: ButtonText; outline: none; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .icon { forced-color-adjust: none; color: ButtonFace; background-color: ButtonText; } :host([variant]:disabled) .base, :host([variant][disabled-interactive]) .base { outline-color: GrayText; background-color: unset; } :host([variant]:disabled) .label, :host([variant][disabled-interactive]) .label, :host([variant]:disabled) .icon, :host([variant][disabled-interactive]) .icon { color: GrayText; } .base { outline-style: solid; } :host([size="extra-small"]) .base { outline-offset: calc(0px - var(--m3e-button-extra-small-outline-thickness, 1px)); outline-width: var(--m3e-button-extra-small-outline-thickness, 1px); } :host([size="small"]) .base { outline-offset: calc(0px - var(--m3e-button-small-outline-thickness, 1px)); outline-width: var(--m3e-button-small-outline-thickness, 1px); } :host([size="medium"]) .base { outline-offset: calc(0px - var(--m3e-button-medium-outline-thickness, 1px)); outline-width: var(--m3e-button-medium-outline-thickness, 1px); } :host([size="large"]) .base { outline-offset: calc(0px - var(--m3e-button-large-outline-thickness, 0.125rem)); outline-width: var(--m3e-button-large-outline-thickness, 0.125rem); } :host([size="extra-large"]) .base { outline-offset: calc(0px - var(--m3e-button-extra-large-outline-thickness, 0.1875rem)); outline-width: var(--m3e-button-extra-large-outline-thickness, 0.1875rem); } } @media (prefers-reduced-motion) { :host(.-pressed) .base, :host(.-resting) .base, .base, .label, .icon { transition: none; } }`,Y={elevated:{labelTextColor:e(`var(--m3e-elevated-button-label-text-color, ${l.color.primary})`),iconColor:e(`var(--m3e-elevated-button-icon-color, ${l.color.primary})`),containerColor:e(`var(--m3e-elevated-button-container-color, ${l.color.surfaceContainerLow})`),containerElevation:e(`var(--m3e-elevated-button-container-elevation, ${l.elevation.level1})`),unselectedLabelTextColor:e(`var(--m3e-elevated-button-unselected-label-text-color, ${l.color.primary})`),unselectedIconColor:e(`var(--m3e-elevated-button-unselected-icon-color, ${l.color.primary})`),unselectedContainerColor:e(`var(--m3e-elevated-button-unselected-container-color, ${l.color.surfaceContainerLow})`),selectedLabelTextColor:e(`var(--m3e-elevated-button-selected-label-text-color, ${l.color.onPrimary})`),selectedIconColor:e(`var(--m3e-elevated-button-selected-icon-color, ${l.color.onPrimary})`),selectedContainerColor:e(`var(--m3e-elevated-button-selected-container-color, ${l.color.primary})`),disabled:{containerColor:e(`var(--m3e-elevated-button-disabled-container-color, ${l.color.onSurface})`),containerOpacity:e("var(--m3e-elevated-button-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-elevated-button-disabled-icon-color, ${l.color.onSurface})`),iconOpacity:e("var(--m3e-elevated-button-disabled-icon-opacity, 38%)"),labelTextColor:e(`var(--m3e-elevated-button-disabled-label-text-color, ${l.color.onSurface})`),labelTextOpacity:e("var(--m3e-elevated-button-disabled-label-text-opacity, 38%)"),containerElevation:e(`var(--m3e-elevated-button-disabled-container-elevation, ${l.elevation.level0})`)},hover:{iconColor:e(`var(--m3e-elevated-button-hover-icon-color, ${l.color.primary})`),labelTextColor:e(`var(--m3e-elevated-button-hover-label-text-color, ${l.color.primary})`),stateLayerColor:e(`var(--m3e-elevated-button-hover-state-layer-color, ${l.color.primary})`),stateLayerOpacity:e(`var(--m3e-elevated-button-hover-state-layer-opacity, ${l.state.hoverStateLayerOpacity})`),containerElevation:e(`var(--m3e-elevated-button-hover-container-elevation, ${l.elevation.level2})`),unselectedIconColor:e(`var(--m3e-elevated-button-hover-unselected-icon-color, ${l.color.primary})`),unselectedLabelTextColor:e(`var(--m3e-elevated-button-hover-unselected-label-text-color, ${l.color.primary})`),unselectedStateLayerColor:e(`var(--m3e-elevated-button-hover-unselected-state-layer-color, ${l.color.primary})`),selectedIconColor:e(`var(--m3e-elevated-button-hover-selected-icon-color, ${l.color.onPrimary})`),selectedLabelTextColor:e(`var(--m3e-elevated-button-hover-selected-label-text-color, ${l.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-elevated-button-hover-selected-state-layer-color, ${l.color.onPrimary})`)},focus:{iconColor:e(`var(--m3e-elevated-button-focus-icon-color, ${l.color.primary})`),labelTextColor:e(`var(--m3e-elevated-button-focus-label-text-color, ${l.color.primary})`),stateLayerColor:e(`var(--m3e-elevated-button-focus-state-layer-color, ${l.color.primary})`),stateLayerOpacity:e(`var(--m3e-elevated-button-focus-state-layer-opacity, ${l.state.focusStateLayerOpacity})`),containerElevation:e(`var(--m3e-elevated-button-focus-container-elevation, ${l.elevation.level1})`),unselectedLabelTextColor:e(`var(--m3e-elevated-button-focus-unselected-label-text-color, ${l.color.primary})`),unselectedIconColor:e(`var(--m3e-elevated-button-focus-unselected-icon-color, ${l.color.primary})`),unselectedStateLayerColor:e(`var(--m3e-elevated-button-focus-unselected-state-layer-color, ${l.color.primary})`),selectedIconColor:e(`var(--m3e-elevated-button-focus-selected-icon-color, ${l.color.onPrimary})`),selectedLabelTextColor:e(`var(--m3e-elevated-button-focus-selected-label-text-color, ${l.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-elevated-button-focus-selected-state-layer-color, ${l.color.onPrimary})`)},pressed:{iconColor:e(`var(--m3e-elevated-button-pressed-icon-color, ${l.color.primary})`),labelTextColor:e(`var(--m3e-elevated-button-pressed-label-text-color, ${l.color.primary})`),stateLayerColor:e(`var(--m3e-elevated-button-pressed-state-layer-color, ${l.color.primary})`),stateLayerOpacity:e(`var(--m3e-elevated-button-pressed-state-layer-opacity, ${l.state.pressedStateLayerOpacity})`),containerElevation:e(`var(--m3e-elevated-button-pressed-container-elevation, ${l.elevation.level1})`),unselectedLabelTextColor:e(`var(--m3e-elevated-button-pressed-unselected-label-text-color, ${l.color.primary})`),unselectedIconColor:e(`var(--m3e-elevated-button-pressed-unselected-icon-color, ${l.color.primary})`),unselectedStateLayerColor:e(`var(--m3e-elevated-button-pressed-unselected-state-layer-color, ${l.color.primary})`),selectedIconColor:e(`var(--m3e-elevated-button-pressed-selected-icon-color, ${l.color.onPrimary})`),selectedLabelTextColor:e(`var(--m3e-elevated-button-pressed-selected-label-text-color, ${l.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-elevated-button-pressed-selected-state-layer-color, ${l.color.onPrimary})`)}},outlined:{labelTextColor:e(`var(--m3e-outlined-button-label-text-color, ${l.color.onSurfaceVariant})`),iconColor:e(`var(--m3e-outlined-button-icon-color, ${l.color.onSurfaceVariant})`),outlineColor:e(`var(--m3e-outlined-button-outline-color, ${l.color.outlineVariant})`),unselectedLabelTextColor:e(`var(--m3e-outlined-button-unselected-label-text-color, ${l.color.onSurfaceVariant})`),unselectedIconColor:e(`var(--m3e-outlined-button-unselected-icon-color, ${l.color.onSurfaceVariant})`),selectedLabelTextColor:e(`var(--m3e-outlined-button-selected-label-text-color, ${l.color.inverseOnSurface})`),selectedIconColor:e(`var(--m3e-outlined-button-selected-icon-color, ${l.color.inverseOnSurface})`),selectedContainerColor:e(`var(--m3e-outlined-button-selected-container-color, ${l.color.inverseSurface})`),disabled:{containerColor:e(`var(--m3e-outlined-button-disabled-container-color, ${l.color.onSurface})`),containerOpacity:e("var(--m3e-outlined-button-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-outlined-button-disabled-icon-color, ${l.color.onSurface})`),iconOpacity:e("var(--m3e-outlined-button-disabled-icon-opacity, 38%)"),labelTextColor:e(`var(--m3e-outlined-button-disabled-label-text-color, ${l.color.onSurface})`),labelTextOpacity:e("var(--m3e-outlined-button-disabled-label-text-opacity, 38%)"),outlineColor:e(`var(--m3e-outlined-button-disabled-outline-color, ${l.color.outlineVariant})`)},hover:{iconColor:e(`var(--m3e-outlined-button-hover-icon-color, ${l.color.onSurfaceVariant})`),labelTextColor:e(`var(--m3e-outlined-button-hover-label-text-color, ${l.color.onSurfaceVariant})`),outlineColor:e(`var(--m3e-outlined-button-hover-outline-color, ${l.color.outlineVariant})`),stateLayerColor:e(`var(--m3e-outlined-button-hover-state-layer-color, ${l.color.onSurfaceVariant})`),stateLayerOpacity:e(`var(--m3e-outlined-button-hover-state-layer-opacity, ${l.state.hoverStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-outlined-button-hover-unselected-icon-color, ${l.color.onSurfaceVariant})`),unselectedLabelTextColor:e(`var(--m3e-outlined-button-hover-unselected-label-text-color, ${l.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-outlined-button-hover-unselected-state-layer-color, ${l.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-outlined-button-hover-selected-icon-color, ${l.color.inverseOnSurface})`),selectedLabelTextColor:e(`var(--m3e-outlined-button-hover-selected-label-text-color, ${l.color.inverseOnSurface})`),selectedStateLayerColor:e(`var(--m3e-outlined-button-hover-selected-state-layer-color, ${l.color.inverseOnSurface})`)},focus:{iconColor:e(`var(--m3e-outlined-button-focus-icon-color, ${l.color.onSurfaceVariant})`),labelTextColor:e(`var(--m3e-outlined-button-focus-label-text-color, ${l.color.onSurfaceVariant})`),outlineColor:e(`var(--m3e-outlined-button-focus-outline-color, ${l.color.outlineVariant})`),stateLayerColor:e(`var(--m3e-outlined-button-focus-state-layer-color, ${l.color.onSurfaceVariant})`),stateLayerOpacity:e(`var(--m3e-outlined-button-focus-state-layer-opacity, ${l.state.focusStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-outlined-button-focus-unselected-icon-color, ${l.color.onSurfaceVariant})`),unselectedLabelTextColor:e(`var(--m3e-outlined-button-focus-unselected-label-text-color, ${l.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-outlined-button-focus-unselected-state-layer-color, ${l.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-outlined-button-focus-selected-icon-color, ${l.color.inverseOnSurface})`),selectedLabelTextColor:e(`var(--m3e-outlined-button-focus-selected-label-text-color, ${l.color.inverseOnSurface})`),selectedStateLayerColor:e(`var(--m3e-outlined-button-focus-selected-state-layer-color, ${l.color.inverseOnSurface})`)},pressed:{iconColor:e(`var(--m3e-outlined-button-pressed-icon-color, ${l.color.onSurfaceVariant})`),labelTextColor:e(`var(--m3e-outlined-button-pressed-label-text-color, ${l.color.onSurfaceVariant})`),outlineColor:e(`var(--m3e-outlined-button-pressed-outline-color, ${l.color.outlineVariant})`),stateLayerColor:e(`var(--m3e-outlined-button-pressed-state-layer-color, ${l.color.onSurfaceVariant})`),stateLayerOpacity:e(`var(--m3e-outlined-button-pressed-state-layer-opacity, ${l.state.pressedStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-outlined-button-pressed-unselected-icon-color, ${l.color.onSurfaceVariant})`),unselectedLabelTextColor:e(`var(--m3e-outlined-button-pressed-unselected-label-text-color, ${l.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-outlined-button-pressed-unselected-state-layer-color, ${l.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-outlined-button-pressed-selected-icon-color, ${l.color.inverseOnSurface})`),selectedLabelTextColor:e(`var(--m3e-outlined-button-pressed-selected-label-text-color, ${l.color.inverseOnSurface})`),selectedStateLayerColor:e(`var(--m3e-outlined-button-pressed-selected-state-layer-color, ${l.color.inverseOnSurface})`)}},filled:{labelTextColor:e(`var(--m3e-filled-button-label-text-color, ${l.color.onPrimary})`),iconColor:e(`var(--m3e-filled-button-icon-color, ${l.color.onPrimary})`),containerColor:e(`var(--m3e-filled-button-container-color, ${l.color.primary})`),containerElevation:e(`var(--m3e-filled-button-container-elevation, ${l.elevation.level0})`),unselectedLabelTextColor:e(`var(--m3e-filled-button-unselected-label-text-color, ${l.color.onSurfaceVariant})`),unselectedIconColor:e(`var(--m3e-filled-button-unselected-icon-color, ${l.color.onSurfaceVariant})`),unselectedContainerColor:e(`var(--m3e-filled-button-unselected-container-color, ${l.color.surfaceContainer})`),selectedLabelTextColor:e(`var(--m3e-filled-button-selected-label-text-color, ${l.color.onPrimary})`),selectedIconColor:e(`var(--m3e-filled-button-selected-icon-color, ${l.color.onPrimary})`),selectedContainerColor:e(`var(--m3e-filled-button-selected-container-color, ${l.color.primary})`),disabled:{containerColor:e(`var(--m3e-filled-button-disabled-container-color, ${l.color.onSurface})`),containerOpacity:e("var(--m3e-filled-button-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-filled-button-disabled-icon-color, ${l.color.onSurface})`),iconOpacity:e("var(--m3e-filled-button-disabled-icon-opacity, 38%)"),labelTextColor:e(`var(--m3e-filled-button-disabled-label-text-color, ${l.color.onSurface})`),labelTextOpacity:e("var(--m3e-filled-button-disabled-label-text-opacity, 38%)"),containerElevation:e(`var(--m3e-filled-button-disabled-container-elevation, ${l.elevation.level0})`)},hover:{iconColor:e(`var(--m3e-filled-button-hover-icon-color, ${l.color.onPrimary})`),labelTextColor:e(`var(--m3e-filled-button-hover-label-text-color, ${l.color.onPrimary})`),stateLayerColor:e(`var(--m3e-filled-button-hover-state-layer-color, ${l.color.onPrimary})`),stateLayerOpacity:e(`var(--m3e-filled-button-hover-state-layer-opacity, ${l.state.hoverStateLayerOpacity})`),containerElevation:e(`var(--m3e-filled-button-hover-container-elevation, ${l.elevation.level1})`),unselectedIconColor:e(`var(--m3e-filled-button-hover-unselected-icon-color, ${l.color.onSurfaceVariant})`),unselectedLabelTextColor:e(`var(--m3e-filled-button-hover-unselected-label-text-color, ${l.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-filled-button-hover-unselected-state-layer-color, ${l.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-filled-button-hover-selected-icon-color, ${l.color.onPrimary})`),selectedLabelTextColor:e(`var(--m3e-filled-button-hover-selected-label-text-color, ${l.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-filled-button-hover-selected-state-layer-color, ${l.color.onPrimary})`)},focus:{iconColor:e(`var(--m3e-filled-button-focus-icon-color, ${l.color.onPrimary})`),labelTextColor:e(`var(--m3e-filled-button-focus-label-text-color, ${l.color.onPrimary})`),stateLayerColor:e(`var(--m3e-filled-button-focus-state-layer-color, ${l.color.onPrimary})`),stateLayerOpacity:e(`var(--m3e-filled-button-focus-state-layer-opacity, ${l.state.focusStateLayerOpacity})`),containerElevation:e(`var(--m3e-filled-button-focus-container-elevation, ${l.elevation.level0})`),unselectedIconColor:e(`var(--m3e-filled-button-focus-unselected-icon-color, ${l.color.onSurfaceVariant})`),unselectedLabelTextColor:e(`var(--m3e-filled-button-focus-unselected-label-text-color, ${l.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-filled-button-focus-unselected-state-layer-color, ${l.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-filled-button-focus-selected-icon-color, ${l.color.onPrimary})`),selectedLabelTextColor:e(`var(--m3e-filled-button-focus-selected-label-text-color, ${l.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-filled-button-focus-selected-state-layer-color, ${l.color.onPrimary})`)},pressed:{iconColor:e(`var(--m3e-filled-button-pressed-icon-color, ${l.color.onPrimary})`),labelTextColor:e(`var(--m3e-filled-button-pressed-label-text-color, ${l.color.onPrimary})`),stateLayerColor:e(`var(--m3e-filled-button-pressed-state-layer-color, ${l.color.onPrimary})`),stateLayerOpacity:e(`var(--m3e-filled-button-pressed-state-layer-opacity, ${l.state.pressedStateLayerOpacity})`),containerElevation:e(`var(--m3e-filled-button-pressed-container-elevation, ${l.elevation.level0})`),unselectedIconColor:e(`var(--m3e-filled-button-pressed-unselected-icon-color, ${l.color.onSurfaceVariant})`),unselectedLabelTextColor:e(`var(--m3e-filled-button-pressed-unselected-label-text-color, ${l.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-filled-button-pressed-unselected-state-layer-color, ${l.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-filled-button-pressed-selected-icon-color, ${l.color.onPrimary})`),selectedLabelTextColor:e(`var(--m3e-filled-button-pressed-selected-label-text-color, ${l.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-filled-button-pressed-selected-state-layer-color, ${l.color.onPrimary})`)}},tonal:{labelTextColor:e(`var(--m3e-tonal-button-label-text-color, ${l.color.onSecondaryContainer})`),iconColor:e(`var(--m3e-tonal-button-icon-color, ${l.color.onSecondaryContainer})`),containerColor:e(`var(--m3e-tonal-button-container-color, ${l.color.secondaryContainer})`),containerElevation:e(`var(--m3e-tonal-button-container-elevation, ${l.elevation.level0})`),unselectedLabelTextColor:e(`var(--m3e-tonal-button-unselected-label-text-color, ${l.color.onSecondaryContainer})`),unselectedIconColor:e(`var(--m3e-tonal-button-unselected-icon-color, ${l.color.onSecondaryContainer})`),unselectedContainerColor:e(`var(--m3e-tonal-button-unselected-container-color, ${l.color.secondaryContainer})`),selectedLabelTextColor:e(`var(--m3e-tonal-button-selected-label-text-color, ${l.color.onSecondary})`),selectedIconColor:e(`var(--m3e-tonal-button-selected-icon-color, ${l.color.onSecondary})`),selectedContainerColor:e(`var(--m3e-tonal-button-selected-container-color, ${l.color.secondary})`),disabled:{containerColor:e(`var(--m3e-tonal-button-disabled-container-color, ${l.color.onSurface})`),containerOpacity:e("var(--m3e-tonal-button-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-tonal-button-disabled-icon-color, ${l.color.onSurface})`),iconOpacity:e("var(--m3e-tonal-button-disabled-icon-opacity, 38%)"),labelTextColor:e(`var(--m3e-tonal-button-disabled-label-text-color, ${l.color.onSurface})`),labelTextOpacity:e("var(--m3e-tonal-button-disabled-label-text-opacity, 38%)"),containerElevation:e(`var(--m3e-tonal-button-disabled-container-elevation, ${l.elevation.level0})`)},hover:{iconColor:e(`var(--m3e-tonal-button-hover-icon-color, ${l.color.onSecondaryContainer})`),labelTextColor:e(`var(--m3e-tonal-button-hover-label-text-color, ${l.color.onSecondaryContainer})`),stateLayerColor:e(`var(--m3e-tonal-button-hover-state-layer-color, ${l.color.onSecondaryContainer})`),stateLayerOpacity:e(`var(--m3e-tonal-button-hover-state-layer-opacity, ${l.state.hoverStateLayerOpacity})`),containerElevation:e(`var(--m3e-tonal-button-hover-container-elevation, ${l.elevation.level1})`),unselectedIconColor:e(`var(--m3e-tonal-button-hover-unselected-icon-color, ${l.color.onSecondaryContainer})`),unselectedLabelTextColor:e(`var(--m3e-tonal-button-hover-unselected-label-text-color, ${l.color.onSecondaryContainer})`),unselectedStateLayerColor:e(`var(--m3e-tonal-button-hover-unselected-state-layer-color, ${l.color.onSecondaryContainer})`),selectedIconColor:e(`var(--m3e-tonal-button-hover-selected-icon-color, ${l.color.onSecondary})`),selectedLabelTextColor:e(`var(--m3e-tonal-button-hover-selected-label-text-color, ${l.color.onSecondary})`),selectedStateLayerColor:e(`var(--m3e-tonal-button-hover-selected-state-layer-color, ${l.color.onSecondary})`)},focus:{iconColor:e(`var(--m3e-tonal-button-focus-icon-color, ${l.color.onSecondaryContainer})`),labelTextColor:e(`var(--m3e-tonal-button-focus-label-text-color, ${l.color.onSecondaryContainer})`),stateLayerColor:e(`var(--m3e-tonal-button-focus-state-layer-color, ${l.color.onSecondaryContainer})`),stateLayerOpacity:e(`var(--m3e-tonal-button-focus-state-layer-opacity, ${l.state.focusStateLayerOpacity})`),containerElevation:e(`var(--m3e-tonal-button-focus-container-elevation, ${l.elevation.level0})`),unselectedIconColor:e(`var(--m3e-tonal-button-focus-unselected-icon-color, ${l.color.onSecondaryContainer})`),unselectedLabelTextColor:e(`var(--m3e-tonal-button-focus-unselected-label-text-color, ${l.color.onSecondaryContainer})`),unselectedStateLayerColor:e(`var(--m3e-tonal-button-focus-unselected-state-layer-color, ${l.color.onSecondaryContainer})`),selectedIconColor:e(`var(--m3e-tonal-button-focus-selected-icon-color, ${l.color.onSecondary})`),selectedLabelTextColor:e(`var(--m3e-tonal-button-focus-selected-label-text-color, ${l.color.onSecondary})`),selectedStateLayerColor:e(`var(--m3e-tonal-button-focus-selected-state-layer-color, ${l.color.onSecondary})`)},pressed:{iconColor:e(`var(--m3e-tonal-button-pressed-icon-color, ${l.color.onSecondaryContainer})`),labelTextColor:e(`var(--m3e-tonal-button-pressed-label-text-color, ${l.color.onSecondaryContainer})`),stateLayerColor:e(`var(--m3e-tonal-button-pressed-state-layer-color, ${l.color.onSecondaryContainer})`),stateLayerOpacity:e(`var(--m3e-tonal-button-pressed-state-layer-opacity, ${l.state.pressedStateLayerOpacity})`),containerElevation:e(`var(--m3e-tonal-button-pressed-container-elevation, ${l.elevation.level0})`),unselectedIconColor:e(`var(--m3e-tonal-button-pressed-unselected-icon-color, ${l.color.onSecondaryContainer})`),unselectedLabelTextColor:e(`var(--m3e-tonal-button-pressed-unselected-label-text-color, ${l.color.onSecondaryContainer})`),unselectedStateLayerColor:e(`var(--m3e-tonal-button-pressed-unselected-state-layer-color, ${l.color.onSecondaryContainer})`),selectedIconColor:e(`var(--m3e-tonal-button-pressed-selected-icon-color, ${l.color.onSecondary})`),selectedLabelTextColor:e(`var(--m3e-tonal-button-pressed-selected-label-text-color, ${l.color.onSecondary})`),selectedStateLayerColor:e(`var(--m3e-tonal-button-pressed-selected-state-layer-color, ${l.color.onSecondary})`)}},text:{labelTextColor:e(`var(--m3e-text-button-label-text-color, ${l.color.primary})`),iconColor:e(`var(--m3e-text-button-icon-color, ${l.color.primary})`),unselectedLabelTextColor:e(`var(--m3e-text-button-unselected-label-text-color, ${l.color.primary})`),unselectedIconColor:e(`var(--m3e-text-button-unselected-icon-color, ${l.color.primary})`),selectedLabelTextColor:e(`var(--m3e-text-button-selected-label-text-color, ${l.color.primary})`),selectedIconColor:e(`var(--m3e-text-button-selected-icon-color, ${l.color.primary})`),disabled:{containerColor:e(`var(--m3e-text-button-disabled-container-color, ${l.color.onSurface})`),containerOpacity:e("var(--m3e-text-button-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-text-button-disabled-icon-color, ${l.color.onSurface})`),iconOpacity:e("var(--m3e-text-button-disabled-icon-opacity, 38%)"),labelTextColor:e(`var(--m3e-text-button-disabled-label-text-color, ${l.color.onSurface})`),labelTextOpacity:e("var(--m3e-text-button-disabled-label-text-opacity, 38%)")},hover:{iconColor:e(`var(--m3e-text-button-hover-icon-color, ${l.color.primary})`),labelTextColor:e(`var(--m3e-text-button-hover-label-text-color, ${l.color.primary})`),stateLayerColor:e(`var(--m3e-text-button-hover-state-layer-color, ${l.color.primary})`),stateLayerOpacity:e(`var(--m3e-text-button-hover-state-layer-opacity, ${l.state.hoverStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-text-button-hover-unselected-icon-color, ${l.color.primary})`),unselectedLabelTextColor:e(`var(--m3e-text-button-hover-unselected-label-text-color, ${l.color.primary})`),unselectedStateLayerColor:e(`var(--m3e-text-button-hover-unselected-state-layer-color, ${l.color.primary})`),selectedIconColor:e(`var(--m3e-text-button-hover-selected-icon-color, ${l.color.primary})`),selectedLabelTextColor:e(`var(--m3e-text-button-hover-selected-label-text-color, ${l.color.primary})`),selectedStateLayerColor:e(`var(--m3e-text-button-hover-selected-state-layer-color, ${l.color.primary})`)},focus:{iconColor:e(`var(--m3e-text-button-focus-icon-color, ${l.color.primary})`),labelTextColor:e(`var(--m3e-text-button-focus-label-text-color, ${l.color.primary})`),stateLayerColor:e(`var(--m3e-text-button-focus-state-layer-color, ${l.color.primary})`),stateLayerOpacity:e(`var(--m3e-text-button-focus-state-layer-opacity, ${l.state.focusStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-text-button-focus-unselected-icon-color, ${l.color.primary})`),unselectedLabelTextColor:e(`var(--m3e-text-button-focus-unselected-label-text-color, ${l.color.primary})`),unselectedStateLayerColor:e(`var(--m3e-text-button-focus-unselected-state-layer-color, ${l.color.primary})`),selectedIconColor:e(`var(--m3e-text-button-focus-selected-icon-color, ${l.color.primary})`),selectedLabelTextColor:e(`var(--m3e-text-button-focus-selected-label-text-color, ${l.color.primary})`),selectedStateLayerColor:e(`var(--m3e-text-button-focus-selected-state-layer-color, ${l.color.primary})`)},pressed:{iconColor:e(`var(--m3e-text-button-pressed-icon-color, ${l.color.primary})`),labelTextColor:e(`var(--m3e-text-button-pressed-label-text-color, ${l.color.primary})`),stateLayerColor:e(`var(--m3e-text-button-pressed-state-layer-color, ${l.color.primary})`),stateLayerOpacity:e(`var(--m3e-text-button-pressed-state-layer-opacity, ${l.state.pressedStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-text-button-pressed-unselected-icon-color, ${l.color.primary})`),unselectedLabelTextColor:e(`var(--m3e-text-button-pressed-unselected-label-text-color, ${l.color.primary})`),unselectedStateLayerColor:e(`var(--m3e-text-button-pressed-unselected-state-layer-color, ${l.color.primary})`),selectedIconColor:e(`var(--m3e-text-button-pressed-selected-icon-color, ${l.color.primary})`),selectedLabelTextColor:e(`var(--m3e-text-button-pressed-selected-label-text-color, ${l.color.primary})`),selectedStateLayerColor:e(`var(--m3e-text-button-pressed-selected-state-layer-color, ${l.color.primary})`)}}};function Z(o){return t`:host([variant="${e(o)}"]:not(:disabled):not([disabled-interactive])) .base { background-color: ${Y[o].containerColor??e("unset")}; --m3e-state-layer-hover-color: ${Y[o].hover.stateLayerColor}; --m3e-state-layer-hover-opacity: ${Y[o].hover.stateLayerOpacity}; --m3e-state-layer-focus-color: ${Y[o].focus.stateLayerColor}; --m3e-state-layer-focus-opacity: ${Y[o].focus.stateLayerOpacity}; --m3e-ripple-color: ${Y[o].pressed.stateLayerColor}; --m3e-ripple-opacity: ${Y[o].pressed.stateLayerOpacity}; --m3e-elevation-level: ${Y[o].containerElevation??e("unset")}; --m3e-elevation-hover-level: ${Y[o].hover.containerElevation??e("unset")}; --m3e-elevation-focus-level: ${Y[o].focus.containerElevation??e("unset")}; --m3e-elevation-pressed-level: ${Y[o].pressed.containerElevation??e("unset")}; } :host([variant="${e(o)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .base { background-color: ${Y[o].unselectedContainerColor??e("unset")}; --m3e-state-layer-hover-color: ${Y[o].hover.unselectedStateLayerColor}; --m3e-state-layer-focus-color: ${Y[o].focus.unselectedStateLayerColor}; --m3e-ripple-color: ${Y[o].pressed.unselectedStateLayerColor}; } :host([variant="${e(o)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .base { background-color: ${Y[o].selectedContainerColor??e("unset")}; --m3e-state-layer-hover-color: ${Y[o].hover.selectedStateLayerColor}; --m3e-state-layer-focus-color: ${Y[o].focus.selectedStateLayerColor}; --m3e-ripple-color: ${Y[o].pressed.selectedStateLayerColor}; } :host([variant="${e(o)}"]:not(:disabled):not([disabled-interactive])) .base { outline-color: ${Y[o].outlineColor??e("unset")}; } :host([variant="${e(o)}"]:focus:not(:disabled):not([disabled-interactive])) .base { outline-color: ${Y[o].focus.outlineColor??e("unset")}; } :host([variant="${e(o)}"]:hover:not(:disabled):not([disabled-interactive])) .base { outline-color: ${Y[o].hover.outlineColor??e("unset")}; } :host([variant="${e(o)}"].-pressed:not(:disabled):not([disabled-interactive])) .base { outline-color: ${Y[o].pressed.outlineColor??e("unset")}; } :host([variant="${e(o)}"]:not(:disabled):not([disabled-interactive])) .label { color: ${Y[o].labelTextColor}; } :host([variant="${e(o)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .label { color: ${Y[o].unselectedLabelTextColor}; } :host([variant="${e(o)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .label { color: ${Y[o].selectedLabelTextColor}; } :host([variant="${e(o)}"]:focus:not(:disabled):not([disabled-interactive])) .label { color: ${Y[o].focus.labelTextColor}; } :host([variant="${e(o)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive])) .label { color: ${Y[o].focus.unselectedLabelTextColor}; } :host([variant="${e(o)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .label { color: ${Y[o].focus.selectedLabelTextColor}; } :host([variant="${e(o)}"]:hover:not(:disabled):not([disabled-interactive])) .label { color: ${Y[o].hover.labelTextColor}; } :host([variant="${e(o)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive])) .label { color: ${Y[o].hover.unselectedLabelTextColor}; } :host([variant="${e(o)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .label { color: ${Y[o].hover.selectedLabelTextColor}; } :host([variant="${e(o)}"].-pressed:not(:disabled):not([disabled-interactive])) .label { color: ${Y[o].pressed.labelTextColor}; } :host([variant="${e(o)}"][toggle]:not([selected]).-pressed:not(:disabled):not([disabled-interactive])) .label { color: ${Y[o].pressed.unselectedLabelTextColor}; } :host([variant="${e(o)}"][toggle][selected].-pressed:not(:disabled):not([disabled-interactive])) .label { color: ${Y[o].pressed.selectedLabelTextColor}; } :host([variant="${e(o)}"]:not(:disabled):not([disabled-interactive])) .icon { color: ${Y[o].iconColor}; } :host([variant="${e(o)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ${Y[o].unselectedIconColor}; } :host([variant="${e(o)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .icon { color: ${Y[o].selectedIconColor}; } :host([variant="${e(o)}"]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${Y[o].focus.iconColor}; } :host([variant="${e(o)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive])) .icon { color: ${Y[o].focus.unselectedIconColor}; } :host([variant="${e(o)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${Y[o].focus.selectedIconColor}; } :host([variant="${e(o)}"]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${Y[o].hover.iconColor}; } :host([variant="${e(o)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive])) .icon { color: ${Y[o].hover.unselectedIconColor}; } :host([variant="${e(o)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${Y[o].hover.selectedIconColor}; } :host([variant="${e(o)}"].-pressed:not(:disabled):not([disabled-interactive])) .icon { color: ${Y[o].pressed.iconColor}; } :host([variant="${e(o)}"][toggle]:not([selected]).-pressed:not(:disabled):not([disabled-interactive])) .icon { color: ${Y[o].pressed.unselectedIconColor}; } :host([variant="${e(o)}"][toggle][selected].-pressed:not(:disabled):not([disabled-interactive])) .icon { color: ${Y[o].pressed.selectedIconColor}; } :host([variant="${e(o)}"]:disabled) .base, :host([variant="${e(o)}"][disabled-interactive]) .base { --m3e-elevation-level: ${Y[o].disabled.containerElevation??e("unset")}; outline-color: ${Y[o].disabled.outlineColor??e("unset")}; background-color: color-mix( in srgb, ${Y[o].disabled.containerColor} ${Y[o].disabled.containerOpacity}, transparent ); } :host([variant="${e(o)}"]:disabled) .label, :host([variant="${e(o)}"][disabled-interactive]) .label { color: color-mix( in srgb, ${Y[o].disabled.labelTextColor} ${Y[o].disabled.labelTextOpacity}, transparent ); } :host([variant="${e(o)}"]:disabled) .icon, :host([variant="${e(o)}"][disabled-interactive]) .icon { color: color-mix( in srgb, ${Y[o].disabled.iconColor} ${Y[o].disabled.iconOpacity}, transparent ); }`}const ee=[Z("text"),Z("elevated"),Z("outlined"),Z("filled"),Z("tonal"),t`:host([variant="outlined"]) .base { outline-style: solid; }`];var te,oe,re,ae,le;let ne=class extends(n(s(i(c(d(u(b(h(o,"button"),!0)))))))){constructor(){super(),te.add(this),oe.set(this,e=>x(this,te,"m",re).call(this,e)),this.variant="text",this.shape="rounded",this.size="small",this.toggle=!1,this.selected=!1,new v(this,{callback:()=>{this.grouped&&this._handleResize()}}),new p(this,{callback:e=>{!this.disabledInteractive&&this._base&&(e?x(this,te,"m",le).call(this):this.grouped||this._base?.style.removeProperty("--_button-shape"))}}),new m(this,{isPressedKey:e=>" "===e,minPressedDuration:150,callback:e=>{if(!this.disabled&&!this.disabledInteractive){this.classList.toggle("-pressed",e),this.classList.toggle("-resting",!e);const t=this.closest("m3e-button-group");if(t){const o=this.getBoundingClientRect().width,r=[...t.querySelectorAll("m3e-button,m3e-icon-button")],a=r.indexOf(this);for(let t=0;t<r.length;t++){const l=r[t];t===a-1||t===a+1?(l.style.setProperty("--_adjacent-button-width",`${o}px`),l.classList.toggle("-adjacent-pressed",e)):(l.style.removeProperty("--_adjacent-button-width"),l.classList.remove("-adjacent-pressed"))}}}}})}get grouped(){return this.classList.contains("-grouped")}render(){return a`<div class="base"><m3e-elevation class="elevation" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-elevation><m3e-state-layer class="state-layer" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-ripple><div class="touch" aria-hidden="true"></div>${this[y]()}<div class="wrapper">${this.toggle?a`<slot class="icon" name="selected-icon" aria-hidden="true" @slotchange="${x(this,te,"m",ae)}"></slot>`:r}<slot class="icon" name="icon" aria-hidden="true"></slot><div class="label">${this.toggle&&this.selected?a`<slot name="selected"><slot></slot></slot>`:a`<slot></slot>`}</div><slot class="icon" name="trailing-icon" aria-hidden="true"></slot></div></div>`}connectedCallback(){super.connectedCallback(),this.addEventListener("click",x(this,oe,"f"))}disconnectedCallback(){super.disconnectedCallback(),["-pressed","-resting","-grouped","-connected"].forEach(e=>this.classList.remove(e)),this._base?.style.removeProperty("--_button-shape"),this.style.removeProperty("--_button-width"),this.style.removeProperty("--_adjacent-button-width"),this.classList.remove("-adjacent-pressed"),this.removeEventListener("click",x(this,oe,"f"))}firstUpdated(e){super.firstUpdated(e),[this._elevation,this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}updated(e){if(super.updated(e),(e.has("disabled")&&this.disabled||e.has("disabledInteractive")&&this.disabledInteractive)&&(this.classList.toggle("-pressed",!1),this.classList.toggle("-resting",!1)),(e.has("toggle")||e.has("selected"))&&(this.ariaPressed=this.toggle?`${this.selected}`:null,this.toggle))for(const e of this.querySelectorAll("m3e-icon"))e.toggleAttribute("filled",this.selected)}_handleResize(){this.grouped&&!this.classList.contains("-pressed")&&(this.style.setProperty("--_button-width",`${this.clientWidth}px`),x(this,te,"m",le).call(this,!0))}};oe=new WeakMap,te=new WeakSet,re=function(e){(this.disabled||this.disabledInteractive)&&(e.preventDefault(),e.stopImmediatePropagation()),this.toggle&&!e.defaultPrevented&&(this.selected=!this.selected,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?this.dispatchEvent(new Event("change",{bubbles:!0})):this.selected=!this.selected)},ae=function(e){this._base?.classList.toggle("with-selected-icon",f(e.target))},le=function(e=!1){if(!this._base)return;const t=parseFloat(getComputedStyle(this._base).borderRadius);if(!isNaN(t)||e){const o=this.clientHeight/2;(o<t||e)&&this._base?.style.setProperty("--_button-shape",`${o}px`)}},ne.styles=[Q,ee,X],g([K(".base")],ne.prototype,"_base",void 0),g([K(".elevation")],ne.prototype,"_elevation",void 0),g([K(".focus-ring")],ne.prototype,"_focusRing",void 0),g([K(".state-layer")],ne.prototype,"_stateLayer",void 0),g([K(".ripple")],ne.prototype,"_ripple",void 0),g([N({reflect:!0})],ne.prototype,"variant",void 0),g([N({reflect:!0})],ne.prototype,"shape",void 0),g([N({reflect:!0})],ne.prototype,"size",void 0),g([N({type:Boolean,reflect:!0})],ne.prototype,"toggle",void 0),g([N({type:Boolean,reflect:!0})],ne.prototype,"selected",void 0),g([$(40)],ne.prototype,"_handleResize",null),ne=g([(e=>(t,o)=>{void 0!==o?o.addInitializer(()=>{customElements.define(e,t)}):customElements.define(e,t)})("m3e-button")],ne);export{ne as M3eButtonElement};
469
40
  //# sourceMappingURL=index.min.js.map