@m3e/icon-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.
- package/dist/index.js +1043 -1077
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -362
- package/dist/index.min.js.map +1 -1
- package/package.json +2 -16
package/dist/index.min.js
CHANGED
|
@@ -36,366 +36,5 @@ const N={attribute:!0,type:String,converter:A,reflect:!1,hasChanged:B},W=(e=N,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-icon-button-extra-small-container-height, 2rem) + ${n.density.calc(0)})`),outlineThickness:e("var(--m3e-icon-button-extra-small-outline-thickness, 1px)"),iconSize:e(`calc(var(--m3e-icon-button-extra-small-icon-size, 1.25rem) + ${n.density.calc(0)})`),shapeRound:e(`var(--m3e-icon-button-extra-small-shape-round, ${n.shape.corner.full})`),shapeSquare:e(`var(--m3e-icon-button-extra-small-shape-square, ${n.shape.corner.medium})`),selectedShapeRound:e(`var(--m3e-icon-button-extra-small-selected-shape-round, ${n.shape.corner.medium})`),selectedShapeSquare:e(`var(--m3e-icon-button-extra-small-selected-shape-square, ${n.shape.corner.full})`),shapePressedMorph:e(`var(--m3e-icon-button-extra-small-shape-pressed-morph, ${n.shape.corner.small})`),narrowLeadingSpace:e(`calc(var(--m3e-icon-button-extra-small-narrow-leading-space, 0.25rem) + ${n.density.calc(0)})`),narrowTrailingSpace:e(`calc(var(--m3e-icon-button-extra-small-narrow-trailing-space, 0.25rem) + ${n.density.calc(0)})`),defaultLeadingSpace:e(`calc(var(--m3e-icon-button-extra-small-default-leading-space, 0.375rem) + ${n.density.calc(0)})`),defaultTrailingSpace:e(`calc(var(--m3e-icon-button-extra-small-default-trailing-space, 0.375rem) + ${n.density.calc(0)})`),wideLeadingSpace:e(`calc(var(--m3e-icon-button-extra-small-wide-leading-space, 0.625rem) + ${n.density.calc(0)})`),wideTrailingSpace:e(`calc(var(--m3e-icon-button-extra-small-wide-trailing-space, 0.625rem) + ${n.density.calc(0)})`)},small:{containerHeight:e(`calc(var(--m3e-icon-button-small-container-height, 2.5rem) + ${n.density.calc(-1)})`),outlineThickness:e("var(--m3e-icon-button-small-outline-thickness, 1px)"),iconSize:e(`calc(var(--m3e-icon-button-small-icon-size, 1.5rem) + ${n.density.calc(-1)})`),shapeRound:e(`var(--m3e-icon-button-small-shape-round, ${n.shape.corner.full})`),shapeSquare:e(`var(--m3e-icon-button-small-shape-square, ${n.shape.corner.medium})`),selectedShapeRound:e(`var(--m3e-icon-button-small-selected-shape-round, ${n.shape.corner.medium})`),selectedShapeSquare:e(`var(--m3e-icon-button-small-selected-shape-square, ${n.shape.corner.full})`),shapePressedMorph:e(`var(--m3e-icon-button-small-shape-pressed-morph, ${n.shape.corner.small})`),narrowLeadingSpace:e(`calc(var(--m3e-icon-button-small-narrow-leading-space, 0.25rem) + ${n.density.calc(-1)})`),narrowTrailingSpace:e(`calc(var(--m3e-icon-button-small-narrow-trailing-space, 0.25rem) + ${n.density.calc(-1)})`),defaultLeadingSpace:e(`calc(var(--m3e-icon-button-small-default-leading-space, 0.5rem) + ${n.density.calc(-1)})`),defaultTrailingSpace:e(`calc(var(--m3e-icon-button-small-default-trailing-space, 0.5rem) + ${n.density.calc(-1)})`),wideLeadingSpace:e(`calc(var(--m3e-icon-button-small-wide-leading-space, 0.875rem) + ${n.density.calc(-1)})`),wideTrailingSpace:e(`calc(var(--m3e-icon-button-small-wide-trailing-space, 0.875rem) + ${n.density.calc(-1)})`)},medium:{containerHeight:e(`calc(var(--m3e-icon-button-medium-container-height, 3.5rem) + ${n.density.calc(-2)})`),outlineThickness:e("var(--m3e-icon-button-medium-outline-thickness, 1px)"),iconSize:e(`calc(var(--m3e-icon-button-medium-icon-size, 1.5rem) + ${n.density.calc(-2)})`),shapeRound:e(`var(--m3e-icon-button-medium-shape-round, ${n.shape.corner.full})`),shapeSquare:e(`var(--m3e-icon-button-medium-shape-square, ${n.shape.corner.large})`),selectedShapeRound:e(`var(--m3e-icon-button-medium-selected-shape-round, ${n.shape.corner.large})`),selectedShapeSquare:e(`var(--m3e-icon-button-medium-selected-shape-square, ${n.shape.corner.full})`),shapePressedMorph:e(`var(--m3e-icon-button-medium-shape-pressed-morph, ${n.shape.corner.medium})`),narrowLeadingSpace:e(`calc(var(--m3e-icon-button-medium-narrow-leading-space, 0.75rem) + ${n.density.calc(-2)})`),narrowTrailingSpace:e(`calc(var(--m3e-icon-button-medium-narrow-trailing-space, 0.75rem) + ${n.density.calc(-2)})`),defaultLeadingSpace:e(`calc(var(--m3e-icon-button-medium-default-leading-space, 1rem) + ${n.density.calc(-2)})`),defaultTrailingSpace:e(`calc(var(--m3e-icon-button-medium-default-trailing-space, 1rem) + ${n.density.calc(-2)})`),wideLeadingSpace:e(`calc(var(--m3e-icon-button-medium-wide-leading-space, 1.5rem) + ${n.density.calc(-2)})`),wideTrailingSpace:e(`calc(var(--m3e-icon-button-medium-wide-trailing-space, 1.5rem) + ${n.density.calc(-2)})`)},large:{containerHeight:e(`calc(var(--m3e-icon-button-large-container-height, 6rem) + ${n.density.calc(-3)})`),outlineThickness:e("var(--m3e-icon-button-large-outline-thickness, 0.125rem)"),iconSize:e(`calc(var(--m3e-icon-button-large-icon-size, 2rem) + ${n.density.calc(-3)})`),shapeRound:e(`var(--m3e-icon-button-large-shape-round, ${n.shape.corner.full})`),shapeSquare:e(`var(--m3e-icon-button-large-shape-square, ${n.shape.corner.extraLarge})`),selectedShapeRound:e(`var(--m3e-icon-button-large-selected-shape-round, ${n.shape.corner.extraLarge})`),selectedShapeSquare:e(`var(--m3e-icon-button-large-selected-shape-square, ${n.shape.corner.full})`),shapePressedMorph:e(`var(--m3e-icon-button-large-shape-pressed-morph, ${n.shape.corner.large})`),narrowLeadingSpace:e(`calc(var(--m3e-icon-button-large-narrow-leading-space, 1rem) + ${n.density.calc(-3)})`),narrowTrailingSpace:e(`calc(var(--m3e-icon-button-large-narrow-trailing-space, 1rem) + ${n.density.calc(-3)})`),defaultLeadingSpace:e(`calc(var(--m3e-icon-button-large-default-leading-space, 2rem) + ${n.density.calc(-3)})`),defaultTrailingSpace:e(`calc(var(--m3e-icon-button-large-default-trailing-space, 2rem) + ${n.density.calc(-3)})`),wideLeadingSpace:e(`calc(var(--m3e-icon-button-large-wide-leading-space, 3rem) + ${n.density.calc(-3)})`),wideTrailingSpace:e(`calc(var(--m3e-icon-button-large-wide-trailing-space, 3rem) + ${n.density.calc(-3)})`)},"extra-large":{containerHeight:e(`calc(var(--m3e-icon-button-extra-large-container-height, 8.5rem) + ${n.density.calc(-3)})`),outlineThickness:e("var(--m3e-icon-button-extra-large-outline-thickness, 0.1875rem)"),iconSize:e(`calc(var(--m3e-icon-button-extra-large-icon-size, 2.5rem) + ${n.density.calc(-3)})`),shapeRound:e(`var(--m3e-icon-button-extra-large-shape-round, ${n.shape.corner.full})`),shapeSquare:e(`var(--m3e-icon-button-extra-large-shape-square, ${n.shape.corner.extraLarge})`),selectedShapeRound:e(`var(--m3e-icon-button-extra-large-selected-shape-round, ${n.shape.corner.extraLarge})`),selectedShapeSquare:e(`var(--m3e-icon-button-extra-large-selected-shape-square, ${n.shape.corner.full})`),shapePressedMorph:e(`var(--m3e-icon-button-extra-large-shape-pressed-morph, ${n.shape.corner.large})`),narrowLeadingSpace:e(`calc(var(--m3e-icon-button-extra-large-narrow-leading-space, 2rem) + ${n.density.calc(-3)})`),narrowTrailingSpace:e(`calc(var(--m3e-icon-button-extra-large-narrow-trailing-space, 2rem) + ${n.density.calc(-3)})`),defaultLeadingSpace:e(`calc(var(--m3e-icon-button-extra-large-default-leading-space, 3rem) + ${n.density.calc(-3)})`),defaultTrailingSpace:e(`calc(var(--m3e-icon-button-extra-large-default-trailing-space, 3rem) + ${n.density.calc(-3)})`),wideLeadingSpace:e(`calc(var(--m3e-icon-button-extra-large-wide-leading-space, 4.5rem) + ${n.density.calc(-3)})`),wideTrailingSpace:e(`calc(var(--m3e-icon-button-extra-large-wide-trailing-space, 4.5rem) + ${n.density.calc(-3)})`)}};function J(o){return t`
|
|
40
|
-
:host([size="${e(o)}"]) .base {
|
|
41
|
-
height: ${G[o].containerHeight};
|
|
42
|
-
}
|
|
43
|
-
:host([size="${e(o)}"][width="default"]) .wrapper {
|
|
44
|
-
padding-inline-start: ${G[o].defaultLeadingSpace};
|
|
45
|
-
padding-inline-end: ${G[o].defaultTrailingSpace};
|
|
46
|
-
}
|
|
47
|
-
:host([size="${e(o)}"][width="narrow"]) .wrapper {
|
|
48
|
-
padding-inline-start: ${G[o].narrowLeadingSpace};
|
|
49
|
-
padding-inline-end: ${G[o].narrowTrailingSpace};
|
|
50
|
-
}
|
|
51
|
-
:host([size="${e(o)}"][width="wide"]) .wrapper {
|
|
52
|
-
padding-inline-start: ${G[o].wideLeadingSpace};
|
|
53
|
-
padding-inline-end: ${G[o].wideTrailingSpace};
|
|
54
|
-
}
|
|
55
|
-
:host([size="${e(o)}"]) .icon {
|
|
56
|
-
font-size: ${G[o].iconSize};
|
|
57
|
-
}
|
|
58
|
-
:host([size="${e(o)}"]) .base {
|
|
59
|
-
outline-offset: calc(0px - ${G[o].outlineThickness});
|
|
60
|
-
outline-width: ${G[o].outlineThickness};
|
|
61
|
-
}
|
|
62
|
-
:host(:not(.-connected)[size="${e(o)}"][shape="rounded"]:not(.-pressed)) .base {
|
|
63
|
-
border-radius: var(--_button-shape, ${G[o].shapeRound});
|
|
64
|
-
}
|
|
65
|
-
:host(:not(.-connected)[size="${e(o)}"][shape="square"]) .base {
|
|
66
|
-
border-radius: ${G[o].shapeSquare};
|
|
67
|
-
}
|
|
68
|
-
:host(:not(.-connected)[size="${e(o)}"][shape="rounded"][toggle][selected]:not(.-pressed)) .base {
|
|
69
|
-
border-radius: ${G[o].selectedShapeRound};
|
|
70
|
-
}
|
|
71
|
-
:host(:not(.-connected)[size="${e(o)}"][shape="square"][toggle][selected]:not(.-pressed)) .base {
|
|
72
|
-
border-radius: var(--_button-shape, ${G[o].selectedShapeSquare});
|
|
73
|
-
}
|
|
74
|
-
:host(:not(.-connected)[size="${e(o)}"].-pressed) .base {
|
|
75
|
-
border-radius: ${G[o].shapePressedMorph};
|
|
76
|
-
}
|
|
77
|
-
:host(.-connected[size="${e(o)}"][shape="rounded"]) .base {
|
|
78
|
-
border-start-start-radius: var(
|
|
79
|
-
--_button-rounded-start-shape,
|
|
80
|
-
var(--_button-shape, ${G[o].shapeRound})
|
|
81
|
-
);
|
|
82
|
-
border-end-start-radius: var(
|
|
83
|
-
--_button-rounded-start-shape,
|
|
84
|
-
var(--_button-shape, ${G[o].shapeRound})
|
|
85
|
-
);
|
|
86
|
-
border-start-end-radius: var(
|
|
87
|
-
--_button-rounded-end-shape,
|
|
88
|
-
var(--_button-shape, ${G[o].shapeRound})
|
|
89
|
-
);
|
|
90
|
-
border-end-end-radius: var(
|
|
91
|
-
--_button-rounded-end-shape,
|
|
92
|
-
var(--_button-shape, ${G[o].shapeRound})
|
|
93
|
-
);
|
|
94
|
-
}
|
|
95
|
-
:host(.-connected[size="${e(o)}"][shape="square"]) .base {
|
|
96
|
-
border-start-start-radius: var(--_button-square-start-shape, ${G[o].shapeSquare});
|
|
97
|
-
border-end-start-radius: var(--_button-square-start-shape, ${G[o].shapeSquare});
|
|
98
|
-
border-start-end-radius: var(--_button-square-end-shape, ${G[o].shapeSquare});
|
|
99
|
-
border-end-end-radius: var(--_button-square-end-shape, ${G[o].shapeSquare});
|
|
100
|
-
}
|
|
101
|
-
:host(.-connected[size="${e(o)}"][shape="square"][toggle][selected]:not(.-pressed)) .base {
|
|
102
|
-
border-radius: var(--_button-shape, ${G[o].selectedShapeSquare});
|
|
103
|
-
}
|
|
104
|
-
:host(.-connected[size="${e(o)}"].-pressed) .base {
|
|
105
|
-
border-start-start-radius: var(
|
|
106
|
-
--_button-start-shape-pressed-morph,
|
|
107
|
-
${G[o].shapePressedMorph}
|
|
108
|
-
);
|
|
109
|
-
border-end-start-radius: var(--_button-start-shape-pressed-morph, ${G[o].shapePressedMorph});
|
|
110
|
-
border-start-end-radius: var(--_button-end-shape-pressed-morph, ${G[o].shapePressedMorph});
|
|
111
|
-
border-end-end-radius: var(--_button-end-shape-pressed-morph, ${G[o].shapePressedMorph});
|
|
112
|
-
}
|
|
113
|
-
`}const Q=[J("extra-small"),J("small"),J("medium"),J("large"),J("extra-large")],X=t`
|
|
114
|
-
:host {
|
|
115
|
-
display: inline-block;
|
|
116
|
-
outline: none;
|
|
117
|
-
user-select: none;
|
|
118
|
-
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
119
|
-
}
|
|
120
|
-
.base {
|
|
121
|
-
box-sizing: border-box;
|
|
122
|
-
vertical-align: middle;
|
|
123
|
-
display: inline-flex;
|
|
124
|
-
align-items: center;
|
|
125
|
-
justify-content: center;
|
|
126
|
-
position: relative;
|
|
127
|
-
width: 100%;
|
|
128
|
-
transition: ${e(`background-color ${n.motion.duration.short4} ${n.motion.easing.standard}`)};
|
|
129
|
-
}
|
|
130
|
-
.touch {
|
|
131
|
-
position: absolute;
|
|
132
|
-
aspect-ratio: 1 / 1;
|
|
133
|
-
height: 3rem;
|
|
134
|
-
left: auto;
|
|
135
|
-
right: auto;
|
|
136
|
-
}
|
|
137
|
-
:host(.-pressed) .base,
|
|
138
|
-
:host(.-resting) .base {
|
|
139
|
-
transition: ${e(`background-color ${n.motion.duration.short4} ${n.motion.easing.standard},\n border-radius ${n.motion.spring.fastEffects}`)};
|
|
140
|
-
}
|
|
141
|
-
.wrapper {
|
|
142
|
-
width: 100%;
|
|
143
|
-
overflow: hidden;
|
|
144
|
-
display: inline-flex;
|
|
145
|
-
align-items: center;
|
|
146
|
-
justify-content: center;
|
|
147
|
-
transition: ${e(`padding-inline ${n.motion.spring.fastEffects}`)};
|
|
148
|
-
}
|
|
149
|
-
.icon {
|
|
150
|
-
transition: ${e(`color ${n.motion.duration.short4} ${n.motion.easing.standard}`)};
|
|
151
|
-
|
|
152
|
-
--m3e-icon-size: 1em;
|
|
153
|
-
}
|
|
154
|
-
:host(:not(:disabled):not([disabled-interactive])) {
|
|
155
|
-
cursor: pointer;
|
|
156
|
-
}
|
|
157
|
-
:host([disabled-interactive]) {
|
|
158
|
-
cursor: not-allowed;
|
|
159
|
-
}
|
|
160
|
-
::slotted(*) {
|
|
161
|
-
font-size: inherit !important;
|
|
162
|
-
flex: none;
|
|
163
|
-
transform: var(--_icon-button-icon-transform);
|
|
164
|
-
transform-origin: center center;
|
|
165
|
-
transition: ${e(`transform var(--_icon-button-icon-transform-transition, ${n.motion.spring.fastEffects})`)};
|
|
166
|
-
}
|
|
167
|
-
::slotted(svg) {
|
|
168
|
-
width: 1em;
|
|
169
|
-
height: 1em;
|
|
170
|
-
}
|
|
171
|
-
:host([toggle]:not([selected])) .base.with-selected-icon slot[name="selected"],
|
|
172
|
-
:host([toggle][selected]) .base.with-selected-icon slot:not([name]) {
|
|
173
|
-
display: none;
|
|
174
|
-
}
|
|
175
|
-
a {
|
|
176
|
-
all: unset;
|
|
177
|
-
display: block;
|
|
178
|
-
position: absolute;
|
|
179
|
-
top: 0px;
|
|
180
|
-
left: 0px;
|
|
181
|
-
right: 0px;
|
|
182
|
-
bottom: 0px;
|
|
183
|
-
z-index: 1;
|
|
184
|
-
}
|
|
185
|
-
:host(.-grouped.-connected) {
|
|
186
|
-
flex: 1 1 auto;
|
|
187
|
-
}
|
|
188
|
-
:host(.-grouped:not(.-connected):not(.-adjacent-pressed):not(.-pressed)) {
|
|
189
|
-
flex-shrink: 0;
|
|
190
|
-
flex-grow: 0;
|
|
191
|
-
}
|
|
192
|
-
:host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) {
|
|
193
|
-
flex-shrink: 1;
|
|
194
|
-
min-width: 0;
|
|
195
|
-
}
|
|
196
|
-
:host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) .label {
|
|
197
|
-
text-overflow: clip;
|
|
198
|
-
}
|
|
199
|
-
:host(.-grouped:not(.-connected).-pressed:not([disabled-interactive]):not(:disabled)) {
|
|
200
|
-
flex-shrink: 0;
|
|
201
|
-
flex-basis: calc(
|
|
202
|
-
var(--_button-width) + calc(var(--_button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15))
|
|
203
|
-
);
|
|
204
|
-
}
|
|
205
|
-
@media (forced-colors: active) {
|
|
206
|
-
.base,
|
|
207
|
-
.icon {
|
|
208
|
-
transition: none;
|
|
209
|
-
}
|
|
210
|
-
:host(.-pressed) .base,
|
|
211
|
-
:host(.-resting) .base {
|
|
212
|
-
transition: border-radius ${n.motion.spring.fastEffects};
|
|
213
|
-
}
|
|
214
|
-
:host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .base {
|
|
215
|
-
background-color: ButtonFace;
|
|
216
|
-
outline-color: ButtonText;
|
|
217
|
-
}
|
|
218
|
-
:host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .label,
|
|
219
|
-
:host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .icon {
|
|
220
|
-
color: ButtonText;
|
|
221
|
-
}
|
|
222
|
-
:host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .base {
|
|
223
|
-
background-color: ButtonFace;
|
|
224
|
-
outline-color: ButtonText;
|
|
225
|
-
}
|
|
226
|
-
:host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .label,
|
|
227
|
-
:host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .icon {
|
|
228
|
-
color: ButtonText;
|
|
229
|
-
}
|
|
230
|
-
:host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .base {
|
|
231
|
-
background-color: ButtonText;
|
|
232
|
-
outline: none;
|
|
233
|
-
}
|
|
234
|
-
:host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .label,
|
|
235
|
-
:host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .icon {
|
|
236
|
-
forced-color-adjust: none;
|
|
237
|
-
color: ButtonFace;
|
|
238
|
-
background-color: ButtonText;
|
|
239
|
-
}
|
|
240
|
-
:host([variant]:disabled) .base,
|
|
241
|
-
:host([variant][disabled-interactive]) .base {
|
|
242
|
-
outline-color: GrayText;
|
|
243
|
-
background-color: unset;
|
|
244
|
-
}
|
|
245
|
-
:host([variant]:disabled) .label,
|
|
246
|
-
:host([variant][disabled-interactive]) .label,
|
|
247
|
-
:host([variant]:disabled) .icon,
|
|
248
|
-
:host([variant][disabled-interactive]) .icon {
|
|
249
|
-
color: GrayText;
|
|
250
|
-
}
|
|
251
|
-
.base {
|
|
252
|
-
outline-style: solid;
|
|
253
|
-
}
|
|
254
|
-
:host([size="extra-small"]) .base {
|
|
255
|
-
outline-offset: calc(0px - var(--m3e-icon-button-extra-small-outline-thickness, 1px));
|
|
256
|
-
outline-width: var(--m3e-icon-button-extra-small-outline-thickness, 1px);
|
|
257
|
-
}
|
|
258
|
-
:host([size="small"]) .base {
|
|
259
|
-
outline-offset: calc(0px - var(--m3e-icon-button-small-outline-thickness, 1px));
|
|
260
|
-
outline-width: var(--m3e-icon-button-small-outline-thickness, 1px);
|
|
261
|
-
}
|
|
262
|
-
:host([size="medium"]) .base {
|
|
263
|
-
outline-offset: calc(0px - var(--m3e-icon-button-medium-outline-thickness, 1px));
|
|
264
|
-
outline-width: var(--m3e-icon-button-medium-outline-thickness, 1px);
|
|
265
|
-
}
|
|
266
|
-
:host([size="large"]) .base {
|
|
267
|
-
outline-offset: calc(0px - var(--m3e-icon-button-large-outline-thickness, 0.125rem));
|
|
268
|
-
outline-width: var(--m3e-icon-button-large-outline-thickness, 0.125rem);
|
|
269
|
-
}
|
|
270
|
-
:host([size="extra-large"]) .base {
|
|
271
|
-
outline-offset: calc(0px - var(--m3e-icon-button-extra-large-outline-thickness, 0.1875rem));
|
|
272
|
-
outline-width: var(--m3e-icon-button-extra-large-outline-thickness, 0.1875rem);
|
|
273
|
-
}
|
|
274
|
-
}
|
|
275
|
-
@media (prefers-reduced-motion) {
|
|
276
|
-
:host(.-pressed) .base,
|
|
277
|
-
:host(.-resting) .base,
|
|
278
|
-
.base,
|
|
279
|
-
.wrapper,
|
|
280
|
-
.icon {
|
|
281
|
-
transition: none;
|
|
282
|
-
}
|
|
283
|
-
}
|
|
284
|
-
`,Y={elevated:{iconColor:e(`var(--m3e-elevated-icon-button-icon-color, ${n.color.primary})`),containerColor:e(`var(--m3e-elevated-icon-button-container-color, ${n.color.surfaceContainerLow})`),containerElevation:e(`var(--m3e-elevated-icon-button-container-elevation, ${n.elevation.level1})`),unselectedIconColor:e(`var(--m3e-elevated-icon-button-unselected-icon-color, ${n.color.primary})`),unselectedContainerColor:e(`var(--m3e-elevated-icon-button-unselected-container-color, ${n.color.surfaceContainerLow})`),selectedIconColor:e(`var(--m3e-elevated-icon-button-selected-icon-color, ${n.color.onPrimary})`),selectedContainerColor:e(`var(--m3e-elevated-icon-button-selected-container-color, ${n.color.primary})`),disabled:{containerColor:e(`var(--m3e-elevated-icon-button-disabled-container-color, ${n.color.onSurface})`),containerOpacity:e("var(--m3e-elevated-icon-button-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-elevated-icon-button-disabled-icon-color, ${n.color.onSurface})`),iconOpacity:e("var(--m3e-elevated-icon-button-disabled-icon-opacity, 38%)"),containerElevation:e(`var(--m3e-elevated-icon-button-disabled-container-elevation, ${n.elevation.level0})`)},hover:{iconColor:e(`var(--m3e-elevated-icon-button-hover-icon-color, ${n.color.primary})`),stateLayerColor:e(`var(--m3e-elevated-icon-button-hover-state-layer-color, ${n.color.primary})`),stateLayerOpacity:e(`var(--m3e-elevated-icon-button-hover-state-layer-opacity, ${n.state.hoverStateLayerOpacity})`),containerElevation:e(`var(--m3e-elevated-icon-button-hover-container-elevation, ${n.elevation.level2})`),unselectedIconColor:e(`var(--m3e-elevated-icon-button-hover-unselected-icon-color, ${n.color.primary})`),unselectedStateLayerColor:e(`var(--m3e-elevated-icon-button-hover-unselected-state-layer-color, ${n.color.primary})`),selectedIconColor:e(`var(--m3e-elevated-icon-button-hover-selected-icon-color, ${n.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-elevated-icon-button-hover-selected-state-layer-color, ${n.color.onPrimary})`)},focus:{iconColor:e(`var(--m3e-elevated-icon-button-focus-icon-color, ${n.color.primary})`),stateLayerColor:e(`var(--m3e-elevated-icon-button-focus-state-layer-color, ${n.color.primary})`),stateLayerOpacity:e(`var(--m3e-elevated-icon-button-focus-state-layer-opacity, ${n.state.focusStateLayerOpacity})`),containerElevation:e(`var(--m3e-elevated-icon-button-focus-container-elevation, ${n.elevation.level1})`),unselectedIconColor:e(`var(--m3e-elevated-icon-button-focus-unselected-icon-color, ${n.color.primary})`),unselectedStateLayerColor:e(`var(--m3e-elevated-icon-button-focus-unselected-state-layer-color, ${n.color.primary})`),selectedIconColor:e(`var(--m3e-elevated-icon-button-focus-selected-icon-color, ${n.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-elevated-icon-button-focus-selected-state-layer-color, ${n.color.onPrimary})`)},pressed:{iconColor:e(`var(--m3e-elevated-icon-button-pressed-icon-color, ${n.color.primary})`),stateLayerColor:e(`var(--m3e-elevated-icon-button-pressed-state-layer-color, ${n.color.primary})`),stateLayerOpacity:e(`var(--m3e-elevated-icon-button-pressed-state-layer-opacity, ${n.state.pressedStateLayerOpacity})`),containerElevation:e(`var(--m3e-elevated-icon-button-pressed-container-elevation, ${n.elevation.level1})`),unselectedIconColor:e(`var(--m3e-elevated-icon-button-pressed-unselected-icon-color, ${n.color.primary})`),unselectedStateLayerColor:e(`var(--m3e-elevated-icon-button-pressed-unselected-state-layer-color, ${n.color.primary})`),selectedIconColor:e(`var(--m3e-elevated-icon-button-pressed-selected-icon-color, ${n.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-elevated-icon-button-pressed-selected-state-layer-color, ${n.color.onPrimary})`)}},outlined:{iconColor:e(`var(--m3e-outlined-icon-button-icon-color, ${n.color.onSurfaceVariant})`),outlineColor:e(`var(--m3e-outlined-icon-button-outline-color, ${n.color.outlineVariant})`),unselectedIconColor:e(`var(--m3e-outlined-icon-button-unselected-icon-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-outlined-icon-button-selected-icon-color, ${n.color.inverseOnSurface})`),selectedContainerColor:e(`var(--m3e-outlined-icon-button-selected-container-color, ${n.color.inverseSurface})`),disabled:{containerColor:e(`var(--m3e-outlined-icon-button-disabled-container-color, ${n.color.onSurface})`),containerOpacity:e("var(--m3e-outlined-icon-button-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-outlined-icon-button-disabled-icon-color, ${n.color.onSurface})`),iconOpacity:e("var(--m3e-outlined-icon-button-disabled-icon-opacity, 38%)"),outlineColor:e(`var(--m3e-outlined-icon-button-disabled-outline-color, ${n.color.outlineVariant})`)},hover:{iconColor:e(`var(--m3e-outlined-icon-button-hover-icon-color, ${n.color.onSurfaceVariant})`),outlineColor:e(`var(--m3e-outlined-icon-button-hover-outline-color, ${n.color.outlineVariant})`),stateLayerColor:e(`var(--m3e-outlined-icon-button-hover-state-layer-color, ${n.color.onSurfaceVariant})`),stateLayerOpacity:e(`var(--m3e-outlined-icon-button-hover-state-layer-opacity, ${n.state.hoverStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-outlined-icon-button-hover-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-outlined-icon-button-hover-unselected-state-layer-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-outlined-icon-button-hover-selected-icon-color, ${n.color.inverseOnSurface})`),selectedStateLayerColor:e(`var(--m3e-outlined-icon-button-hover-selected-state-layer-color, ${n.color.inverseOnSurface})`)},focus:{iconColor:e(`var(--m3e-outlined-icon-button-focus-icon-color, ${n.color.onSurfaceVariant})`),outlineColor:e(`var(--m3e-outlined-icon-button-focus-outline-color, ${n.color.outlineVariant})`),stateLayerColor:e(`var(--m3e-outlined-icon-button-focus-state-layer-color, ${n.color.onSurfaceVariant})`),stateLayerOpacity:e(`var(--m3e-outlined-icon-button-focus-state-layer-opacity, ${n.state.focusStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-outlined-icon-button-focus-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-outlined-icon-button-focus-unselected-state-layer-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-outlined-icon-button-focus-selected-icon-color, ${n.color.inverseOnSurface})`),selectedStateLayerColor:e(`var(--m3e-outlined-icon-button-focus-selected-state-layer-color, ${n.color.inverseOnSurface})`)},pressed:{iconColor:e(`var(--m3e-outlined-icon-button-pressed-icon-color, ${n.color.onSurfaceVariant})`),outlineColor:e(`var(--m3e-outlined-icon-button-pressed-outline-color, ${n.color.outlineVariant})`),stateLayerColor:e(`var(--m3e-outlined-icon-button-pressed-state-layer-color, ${n.color.onSurfaceVariant})`),stateLayerOpacity:e(`var(--m3e-outlined-icon-button-pressed-state-layer-opacity, ${n.state.pressedStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-outlined-icon-button-pressed-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-outlined-icon-button-pressed-unselected-state-layer-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-outlined-icon-button-pressed-selected-icon-color, ${n.color.inverseOnSurface})`),selectedStateLayerColor:e(`var(--m3e-outlined-icon-button-pressed-selected-state-layer-color, ${n.color.inverseOnSurface})`)}},filled:{iconColor:e(`var(--m3e-filled-icon-button-icon-color, ${n.color.onPrimary})`),containerColor:e(`var(--m3e-filled-icon-button-container-color, ${n.color.primary})`),unselectedIconColor:e(`var(--m3e-filled-icon-button-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedContainerColor:e(`var(--m3e-filled-icon-button-unselected-container-color, ${n.color.surfaceContainer})`),selectedIconColor:e(`var(--m3e-filled-icon-button-selected-icon-color, ${n.color.onPrimary})`),selectedContainerColor:e(`var(--m3e-filled-icon-button-selected-container-color, ${n.color.primary})`),disabled:{containerColor:e(`var(--m3e-filled-icon-button-disabled-container-color, ${n.color.onSurface})`),containerOpacity:e("var(--m3e-filled-icon-button-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-filled-icon-button-disabled-icon-color, ${n.color.onSurface})`),iconOpacity:e("var(--m3e-filled-icon-button-disabled-icon-opacity, 38%)")},hover:{iconColor:e(`var(--m3e-filled-icon-button-hover-icon-color, ${n.color.onPrimary})`),stateLayerColor:e(`var(--m3e-filled-icon-button-hover-state-layer-color, ${n.color.onPrimary})`),stateLayerOpacity:e(`var(--m3e-filled-icon-button-hover-state-layer-opacity, ${n.state.hoverStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-filled-icon-button-hover-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-filled-icon-button-hover-unselected-state-layer-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-filled-icon-button-hover-selected-icon-color, ${n.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-filled-icon-button-hover-selected-state-layer-color, ${n.color.onPrimary})`)},focus:{iconColor:e(`var(--m3e-filled-icon-button-focus-icon-color, ${n.color.onPrimary})`),stateLayerColor:e(`var(--m3e-filled-icon-button-focus-state-layer-color, ${n.color.onPrimary})`),stateLayerOpacity:e(`var(--m3e-filled-icon-button-focus-state-layer-opacity, ${n.state.focusStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-filled-icon-button-focus-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-filled-icon-button-focus-unselected-state-layer-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-filled-icon-button-focus-selected-icon-color, ${n.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-filled-icon-button-focus-selected-state-layer-color, ${n.color.onPrimary})`)},pressed:{iconColor:e(`var(--m3e-filled-icon-button-pressed-icon-color, ${n.color.onPrimary})`),stateLayerColor:e(`var(--m3e-filled-icon-button-pressed-state-layer-color, ${n.color.onPrimary})`),stateLayerOpacity:e(`var(--m3e-filled-icon-button-pressed-state-layer-opacity, ${n.state.pressedStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-filled-icon-button-pressed-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-filled-icon-button-pressed-unselected-state-layer-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-filled-icon-button-pressed-selected-icon-color, ${n.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-filled-icon-button-pressed-selected-state-layer-color, ${n.color.onPrimary})`)}},tonal:{iconColor:e(`var(--m3e-tonal-icon-button-icon-color, ${n.color.onSecondaryContainer})`),containerColor:e(`var(--m3e-tonal-icon-button-container-color, ${n.color.secondaryContainer})`),unselectedIconColor:e(`var(--m3e-tonal-icon-button-unselected-icon-color, ${n.color.onSecondaryContainer})`),unselectedContainerColor:e(`var(--m3e-tonal-icon-button-unselected-container-color, ${n.color.secondaryContainer})`),selectedIconColor:e(`var(--m3e-tonal-icon-button-selected-icon-color, ${n.color.onSecondary})`),selectedContainerColor:e(`var(--m3e-tonal-icon-button-selected-container-color, ${n.color.secondary})`),disabled:{containerColor:e(`var(--m3e-tonal-icon-button-disabled-container-color, ${n.color.onSurface})`),containerOpacity:e("var(--m3e-tonal-icon-button-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-tonal-icon-button-disabled-icon-color, ${n.color.onSurface})`),iconOpacity:e("var(--m3e-tonal-icon-button-disabled-icon-opacity, 38%)")},hover:{iconColor:e(`var(--m3e-tonal-icon-button-hover-icon-color, ${n.color.onSecondaryContainer})`),stateLayerColor:e(`var(--m3e-tonal-icon-button-hover-state-layer-color, ${n.color.onSecondaryContainer})`),stateLayerOpacity:e(`var(--m3e-tonal-icon-button-hover-state-layer-opacity, ${n.state.hoverStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-tonal-icon-button-hover-unselected-icon-color, ${n.color.onSecondaryContainer})`),unselectedStateLayerColor:e(`var(--m3e-tonal-icon-button-hover-unselected-state-layer-color, ${n.color.onSecondaryContainer})`),selectedIconColor:e(`var(--m3e-tonal-icon-button-hover-selected-icon-color, ${n.color.onSecondary})`),selectedStateLayerColor:e(`var(--m3e-tonal-icon-button-hover-selected-state-layer-color, ${n.color.onSecondary})`)},focus:{iconColor:e(`var(--m3e-tonal-icon-button-focus-icon-color, ${n.color.onSecondaryContainer})`),stateLayerColor:e(`var(--m3e-tonal-icon-button-focus-state-layer-color, ${n.color.onSecondaryContainer})`),stateLayerOpacity:e(`var(--m3e-tonal-icon-button-focus-state-layer-opacity, ${n.state.focusStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-tonal-icon-button-focus-unselected-icon-color, ${n.color.onSecondaryContainer})`),unselectedStateLayerColor:e(`var(--m3e-tonal-icon-button-focus-unselected-state-layer-color, ${n.color.onSecondaryContainer})`),selectedIconColor:e(`var(--m3e-tonal-icon-button-focus-selected-icon-color, ${n.color.onSecondary})`),selectedStateLayerColor:e(`var(--m3e-tonal-icon-button-focus-selected-state-layer-color, ${n.color.onSecondary})`)},pressed:{iconColor:e(`var(--m3e-tonal-icon-button-pressed-icon-color, ${n.color.onSecondaryContainer})`),stateLayerColor:e(`var(--m3e-tonal-icon-button-pressed-state-layer-color, ${n.color.onSecondaryContainer})`),stateLayerOpacity:e(`var(--m3e-tonal-icon-button-pressed-state-layer-opacity, ${n.state.pressedStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-tonal-icon-button-pressed-unselected-icon-color, ${n.color.onSecondaryContainer})`),unselectedStateLayerColor:e(`var(--m3e-tonal-icon-button-pressed-unselected-state-layer-color, ${n.color.onSecondaryContainer})`),selectedIconColor:e(`var(--m3e-tonal-icon-button-pressed-selected-icon-color, ${n.color.onSecondary})`),selectedStateLayerColor:e(`var(--m3e-tonal-icon-button-pressed-selected-state-layer-color, ${n.color.onSecondary})`)}},standard:{iconColor:e(`var(--m3e-standard-icon-button-icon-color, ${n.color.onSurfaceVariant})`),unselectedIconColor:e(`var(--m3e-standard-icon-button-unselected-icon-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-standard-icon-button-selected-icon-color, ${n.color.primary})`),disabled:{containerColor:e("var(--m3e-standard-icon-button-disabled-container-color, transparent)"),containerOpacity:e("var(--m3e-standard-icon-button-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-standard-icon-button-disabled-icon-color, ${n.color.onSurface})`),iconOpacity:e("var(--m3e-standard-icon-button-disabled-icon-opacity, 38%)")},hover:{iconColor:e(`var(--m3e-standard-icon-button-hover-icon-color, ${n.color.onSurfaceVariant})`),stateLayerColor:e(`var(--m3e-standard-icon-button-hover-state-layer-color, ${n.color.onSurfaceVariant})`),stateLayerOpacity:e(`var(--m3e-standard-icon-button-hover-state-layer-opacity, ${n.state.hoverStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-standard-icon-button-hover-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-standard-icon-button-hover-unselected-state-layer-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-standard-icon-button-hover-selected-icon-color, ${n.color.primary})`),selectedStateLayerColor:e(`var(--m3e-standard-icon-button-hover-selected-state-layer-color, ${n.color.primary})`)},focus:{iconColor:e(`var(--m3e-standard-icon-button-focus-icon-color, ${n.color.onSurfaceVariant})`),stateLayerColor:e(`var(--m3e-standard-icon-button-focus-state-layer-color, ${n.color.onSurfaceVariant})`),stateLayerOpacity:e(`var(--m3e-standard-icon-button-focus-state-layer-opacity, ${n.state.focusStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-standard-icon-button-focus-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-standard-icon-button-focus-unselected-state-layer-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-standard-icon-button-focus-selected-icon-color, ${n.color.primary})`),selectedStateLayerColor:e(`var(--m3e-standard-icon-button-focus-selected-state-layer-color, ${n.color.primary})`)},pressed:{iconColor:e(`var(--m3e-standard-icon-button-pressed-icon-color, ${n.color.onSurfaceVariant})`),stateLayerColor:e(`var(--m3e-standard-icon-button-pressed-state-layer-color, ${n.color.onSurfaceVariant})`),stateLayerOpacity:e(`var(--m3e-standard-icon-button-pressed-state-layer-opacity, ${n.state.pressedStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-standard-icon-button-pressed-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-standard-icon-button-pressed-unselected-state-layer-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-standard-icon-button-pressed-selected-icon-color, ${n.color.primary})`),selectedStateLayerColor:e(`var(--m3e-standard-icon-button-pressed-selected-state-layer-color, ${n.color.primary})`)}}};function Z(o){return t`
|
|
285
|
-
:host([variant="${e(o)}"]:not(:disabled):not([disabled-interactive])) .base {
|
|
286
|
-
background-color: ${Y[o].containerColor??e("unset")};
|
|
287
|
-
--m3e-state-layer-hover-color: ${Y[o].hover.stateLayerColor};
|
|
288
|
-
--m3e-state-layer-hover-opacity: ${Y[o].hover.stateLayerOpacity};
|
|
289
|
-
--m3e-state-layer-focus-color: ${Y[o].focus.stateLayerColor};
|
|
290
|
-
--m3e-state-layer-focus-opacity: ${Y[o].focus.stateLayerOpacity};
|
|
291
|
-
--m3e-ripple-color: ${Y[o].pressed.stateLayerColor};
|
|
292
|
-
--m3e-ripple-opacity: ${Y[o].pressed.stateLayerOpacity};
|
|
293
|
-
--m3e-elevation-level: ${Y[o].containerElevation??e("unset")};
|
|
294
|
-
--m3e-elevation-hover-level: ${Y[o].hover.containerElevation??e("unset")};
|
|
295
|
-
--m3e-elevation-focus-level: ${Y[o].focus.containerElevation??e("unset")};
|
|
296
|
-
--m3e-elevation-pressed-level: ${Y[o].pressed.containerElevation??e("unset")};
|
|
297
|
-
}
|
|
298
|
-
:host([variant="${e(o)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .base {
|
|
299
|
-
background-color: ${Y[o].unselectedContainerColor??e("unset")};
|
|
300
|
-
--m3e-state-layer-hover-color: ${Y[o].hover.unselectedStateLayerColor};
|
|
301
|
-
--m3e-state-layer-focus-color: ${Y[o].focus.unselectedStateLayerColor};
|
|
302
|
-
--m3e-ripple-color: ${Y[o].pressed.unselectedStateLayerColor};
|
|
303
|
-
}
|
|
304
|
-
:host([variant="${e(o)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .base {
|
|
305
|
-
background-color: ${Y[o].selectedContainerColor??e("unset")};
|
|
306
|
-
--m3e-state-layer-hover-color: ${Y[o].hover.selectedStateLayerColor};
|
|
307
|
-
--m3e-state-layer-focus-color: ${Y[o].focus.selectedStateLayerColor};
|
|
308
|
-
--m3e-ripple-color: ${Y[o].pressed.selectedStateLayerColor};
|
|
309
|
-
}
|
|
310
|
-
:host([variant="${e(o)}"]:not(:disabled):not([disabled-interactive])) .base {
|
|
311
|
-
outline-color: ${Y[o].outlineColor??e("unset")};
|
|
312
|
-
}
|
|
313
|
-
:host([variant="${e(o)}"]:focus:not(:disabled):not([disabled-interactive])) .base {
|
|
314
|
-
outline-color: ${Y[o].focus.outlineColor??e("unset")};
|
|
315
|
-
}
|
|
316
|
-
:host([variant="${e(o)}"]:hover:not(:disabled):not([disabled-interactive])) .base {
|
|
317
|
-
outline-color: ${Y[o].hover.outlineColor??e("unset")};
|
|
318
|
-
}
|
|
319
|
-
:host([variant="${e(o)}"].-pressed:not(:disabled):not([disabled-interactive])) .base {
|
|
320
|
-
outline-color: ${Y[o].pressed.outlineColor??e("unset")};
|
|
321
|
-
}
|
|
322
|
-
:host([variant="${e(o)}"]:not(:disabled):not([disabled-interactive])) .icon {
|
|
323
|
-
color: ${Y[o].iconColor};
|
|
324
|
-
}
|
|
325
|
-
:host([variant="${e(o)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .icon {
|
|
326
|
-
color: ${Y[o].unselectedIconColor};
|
|
327
|
-
}
|
|
328
|
-
:host([variant="${e(o)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .icon {
|
|
329
|
-
color: ${Y[o].selectedIconColor};
|
|
330
|
-
}
|
|
331
|
-
:host([variant="${e(o)}"]:focus:not(:disabled):not([disabled-interactive])) .icon {
|
|
332
|
-
color: ${Y[o].focus.iconColor};
|
|
333
|
-
}
|
|
334
|
-
:host([variant="${e(o)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive]))
|
|
335
|
-
.icon {
|
|
336
|
-
color: ${Y[o].focus.unselectedIconColor};
|
|
337
|
-
}
|
|
338
|
-
:host([variant="${e(o)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .icon {
|
|
339
|
-
color: ${Y[o].focus.selectedIconColor};
|
|
340
|
-
}
|
|
341
|
-
:host([variant="${e(o)}"]:hover:not(:disabled):not([disabled-interactive])) .icon {
|
|
342
|
-
color: ${Y[o].hover.iconColor};
|
|
343
|
-
}
|
|
344
|
-
:host([variant="${e(o)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive]))
|
|
345
|
-
.icon {
|
|
346
|
-
color: ${Y[o].hover.unselectedIconColor};
|
|
347
|
-
}
|
|
348
|
-
:host([variant="${e(o)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .icon {
|
|
349
|
-
color: ${Y[o].hover.selectedIconColor};
|
|
350
|
-
}
|
|
351
|
-
:host([variant="${e(o)}"].-pressed:not(:disabled):not([disabled-interactive])) .icon {
|
|
352
|
-
color: ${Y[o].pressed.iconColor};
|
|
353
|
-
}
|
|
354
|
-
:host([variant="${e(o)}"][toggle]:not([selected]).-pressed:not(:disabled):not([disabled-interactive]))
|
|
355
|
-
.icon {
|
|
356
|
-
color: ${Y[o].pressed.unselectedIconColor};
|
|
357
|
-
}
|
|
358
|
-
:host([variant="${e(o)}"][toggle][selected].-pressed:not(:disabled):not([disabled-interactive]))
|
|
359
|
-
.icon {
|
|
360
|
-
color: ${Y[o].pressed.selectedIconColor};
|
|
361
|
-
}
|
|
362
|
-
:host([variant="${e(o)}"]:disabled) .base,
|
|
363
|
-
:host([variant="${e(o)}"][disabled-interactive]) .base {
|
|
364
|
-
outline-color: ${Y[o].disabled.outlineColor??e("unset")};
|
|
365
|
-
background-color: color-mix(
|
|
366
|
-
in srgb,
|
|
367
|
-
${Y[o].disabled.containerColor}
|
|
368
|
-
${Y[o].disabled.containerOpacity},
|
|
369
|
-
transparent
|
|
370
|
-
);
|
|
371
|
-
}
|
|
372
|
-
:host([variant="${e(o)}"]:disabled) .icon,
|
|
373
|
-
:host([variant="${e(o)}"][disabled-interactive]) .icon {
|
|
374
|
-
color: color-mix(
|
|
375
|
-
in srgb,
|
|
376
|
-
${Y[o].disabled.iconColor} ${Y[o].disabled.iconOpacity},
|
|
377
|
-
transparent
|
|
378
|
-
);
|
|
379
|
-
}
|
|
380
|
-
`}const ee=[Z("standard"),Z("outlined"),Z("filled"),Z("tonal"),Z("elevated"),t`
|
|
381
|
-
:host([variant="outlined"]) .base {
|
|
382
|
-
outline-style: solid;
|
|
383
|
-
}
|
|
384
|
-
`];var te,oe,re,ae,ne;let ie=class extends(i(s(c(l(d(u(p(h(o,"button"),!0)))))))){constructor(){super(),te.add(this),oe.set(this,e=>S(this,te,"m",ae).call(this,e)),this.variant="standard",this.shape="rounded",this.size="small",this.width="default",this.toggle=!1,this.selected=!1,new v(this,{callback:()=>{this.grouped&&this._handleResize()}}),new m(this,{callback:e=>{!this.disabledInteractive&&this._base&&(e?S(this,te,"m",re).call(this):this.grouped||this._base?.style.removeProperty("--_button-shape"))}}),new b(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 n=r[t];t===a-1||t===a+1?(n.style.setProperty("--_adjacent-button-width",`${o}px`),n.classList.toggle("-adjacent-pressed",e)):(n.style.removeProperty("--_adjacent-button-width"),n.classList.remove("-adjacent-pressed"))}}}}})}get grouped(){return this.classList.contains("-grouped")}render(){return a`<div class="base">
|
|
385
|
-
<m3e-state-layer class="state-layer" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-state-layer>
|
|
386
|
-
<m3e-elevation class="elevation" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-elevation>
|
|
387
|
-
<m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring>
|
|
388
|
-
<m3e-ripple class="ripple" centered ?disabled="${this.disabled||this.disabledInteractive}"></m3e-ripple>
|
|
389
|
-
<div class="touch" aria-hidden="true"></div>
|
|
390
|
-
${this[y]()}
|
|
391
|
-
<div class="wrapper">
|
|
392
|
-
${this.toggle?a`<slot
|
|
393
|
-
class="icon"
|
|
394
|
-
name="selected"
|
|
395
|
-
aria-hidden="true"
|
|
396
|
-
@slotchange="${S(this,te,"m",ne)}"
|
|
397
|
-
></slot>`:r}
|
|
398
|
-
<slot class="icon" aria-hidden="true"></slot>
|
|
399
|
-
</div>
|
|
400
|
-
</div>`}connectedCallback(){super.connectedCallback(),this.addEventListener("click",S(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",S(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`),S(this,te,"m",re).call(this,!0))}};oe=new WeakMap,te=new WeakSet,re=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`)}},ae=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)},ne=function(e){this._base?.classList.toggle("with-selected-icon",f(e.target))},ie.styles=[Q,ee,X],g([K(".base")],ie.prototype,"_base",void 0),g([K(".elevation")],ie.prototype,"_elevation",void 0),g([K(".focus-ring")],ie.prototype,"_focusRing",void 0),g([K(".state-layer")],ie.prototype,"_stateLayer",void 0),g([K(".ripple")],ie.prototype,"_ripple",void 0),g([F({reflect:!0})],ie.prototype,"variant",void 0),g([F({reflect:!0})],ie.prototype,"shape",void 0),g([F({reflect:!0})],ie.prototype,"size",void 0),g([F({reflect:!0})],ie.prototype,"width",void 0),g([F({type:Boolean,reflect:!0})],ie.prototype,"toggle",void 0),g([F({type:Boolean,reflect:!0})],ie.prototype,"selected",void 0),g([$(40)],ie.prototype,"_handleResize",null),ie=g([(e=>(t,o)=>{void 0!==o?o.addInitializer(()=>{customElements.define(e,t)}):customElements.define(e,t)})("m3e-icon-button")],ie);export{ie as M3eIconButtonElement};
|
|
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-icon-button-extra-small-container-height, 2rem) + ${n.density.calc(0)})`),outlineThickness:e("var(--m3e-icon-button-extra-small-outline-thickness, 1px)"),iconSize:e(`calc(var(--m3e-icon-button-extra-small-icon-size, 1.25rem) + ${n.density.calc(0)})`),shapeRound:e(`var(--m3e-icon-button-extra-small-shape-round, ${n.shape.corner.full})`),shapeSquare:e(`var(--m3e-icon-button-extra-small-shape-square, ${n.shape.corner.medium})`),selectedShapeRound:e(`var(--m3e-icon-button-extra-small-selected-shape-round, ${n.shape.corner.medium})`),selectedShapeSquare:e(`var(--m3e-icon-button-extra-small-selected-shape-square, ${n.shape.corner.full})`),shapePressedMorph:e(`var(--m3e-icon-button-extra-small-shape-pressed-morph, ${n.shape.corner.small})`),narrowLeadingSpace:e(`calc(var(--m3e-icon-button-extra-small-narrow-leading-space, 0.25rem) + ${n.density.calc(0)})`),narrowTrailingSpace:e(`calc(var(--m3e-icon-button-extra-small-narrow-trailing-space, 0.25rem) + ${n.density.calc(0)})`),defaultLeadingSpace:e(`calc(var(--m3e-icon-button-extra-small-default-leading-space, 0.375rem) + ${n.density.calc(0)})`),defaultTrailingSpace:e(`calc(var(--m3e-icon-button-extra-small-default-trailing-space, 0.375rem) + ${n.density.calc(0)})`),wideLeadingSpace:e(`calc(var(--m3e-icon-button-extra-small-wide-leading-space, 0.625rem) + ${n.density.calc(0)})`),wideTrailingSpace:e(`calc(var(--m3e-icon-button-extra-small-wide-trailing-space, 0.625rem) + ${n.density.calc(0)})`)},small:{containerHeight:e(`calc(var(--m3e-icon-button-small-container-height, 2.5rem) + ${n.density.calc(-1)})`),outlineThickness:e("var(--m3e-icon-button-small-outline-thickness, 1px)"),iconSize:e(`calc(var(--m3e-icon-button-small-icon-size, 1.5rem) + ${n.density.calc(-1)})`),shapeRound:e(`var(--m3e-icon-button-small-shape-round, ${n.shape.corner.full})`),shapeSquare:e(`var(--m3e-icon-button-small-shape-square, ${n.shape.corner.medium})`),selectedShapeRound:e(`var(--m3e-icon-button-small-selected-shape-round, ${n.shape.corner.medium})`),selectedShapeSquare:e(`var(--m3e-icon-button-small-selected-shape-square, ${n.shape.corner.full})`),shapePressedMorph:e(`var(--m3e-icon-button-small-shape-pressed-morph, ${n.shape.corner.small})`),narrowLeadingSpace:e(`calc(var(--m3e-icon-button-small-narrow-leading-space, 0.25rem) + ${n.density.calc(-1)})`),narrowTrailingSpace:e(`calc(var(--m3e-icon-button-small-narrow-trailing-space, 0.25rem) + ${n.density.calc(-1)})`),defaultLeadingSpace:e(`calc(var(--m3e-icon-button-small-default-leading-space, 0.5rem) + ${n.density.calc(-1)})`),defaultTrailingSpace:e(`calc(var(--m3e-icon-button-small-default-trailing-space, 0.5rem) + ${n.density.calc(-1)})`),wideLeadingSpace:e(`calc(var(--m3e-icon-button-small-wide-leading-space, 0.875rem) + ${n.density.calc(-1)})`),wideTrailingSpace:e(`calc(var(--m3e-icon-button-small-wide-trailing-space, 0.875rem) + ${n.density.calc(-1)})`)},medium:{containerHeight:e(`calc(var(--m3e-icon-button-medium-container-height, 3.5rem) + ${n.density.calc(-2)})`),outlineThickness:e("var(--m3e-icon-button-medium-outline-thickness, 1px)"),iconSize:e(`calc(var(--m3e-icon-button-medium-icon-size, 1.5rem) + ${n.density.calc(-2)})`),shapeRound:e(`var(--m3e-icon-button-medium-shape-round, ${n.shape.corner.full})`),shapeSquare:e(`var(--m3e-icon-button-medium-shape-square, ${n.shape.corner.large})`),selectedShapeRound:e(`var(--m3e-icon-button-medium-selected-shape-round, ${n.shape.corner.large})`),selectedShapeSquare:e(`var(--m3e-icon-button-medium-selected-shape-square, ${n.shape.corner.full})`),shapePressedMorph:e(`var(--m3e-icon-button-medium-shape-pressed-morph, ${n.shape.corner.medium})`),narrowLeadingSpace:e(`calc(var(--m3e-icon-button-medium-narrow-leading-space, 0.75rem) + ${n.density.calc(-2)})`),narrowTrailingSpace:e(`calc(var(--m3e-icon-button-medium-narrow-trailing-space, 0.75rem) + ${n.density.calc(-2)})`),defaultLeadingSpace:e(`calc(var(--m3e-icon-button-medium-default-leading-space, 1rem) + ${n.density.calc(-2)})`),defaultTrailingSpace:e(`calc(var(--m3e-icon-button-medium-default-trailing-space, 1rem) + ${n.density.calc(-2)})`),wideLeadingSpace:e(`calc(var(--m3e-icon-button-medium-wide-leading-space, 1.5rem) + ${n.density.calc(-2)})`),wideTrailingSpace:e(`calc(var(--m3e-icon-button-medium-wide-trailing-space, 1.5rem) + ${n.density.calc(-2)})`)},large:{containerHeight:e(`calc(var(--m3e-icon-button-large-container-height, 6rem) + ${n.density.calc(-3)})`),outlineThickness:e("var(--m3e-icon-button-large-outline-thickness, 0.125rem)"),iconSize:e(`calc(var(--m3e-icon-button-large-icon-size, 2rem) + ${n.density.calc(-3)})`),shapeRound:e(`var(--m3e-icon-button-large-shape-round, ${n.shape.corner.full})`),shapeSquare:e(`var(--m3e-icon-button-large-shape-square, ${n.shape.corner.extraLarge})`),selectedShapeRound:e(`var(--m3e-icon-button-large-selected-shape-round, ${n.shape.corner.extraLarge})`),selectedShapeSquare:e(`var(--m3e-icon-button-large-selected-shape-square, ${n.shape.corner.full})`),shapePressedMorph:e(`var(--m3e-icon-button-large-shape-pressed-morph, ${n.shape.corner.large})`),narrowLeadingSpace:e(`calc(var(--m3e-icon-button-large-narrow-leading-space, 1rem) + ${n.density.calc(-3)})`),narrowTrailingSpace:e(`calc(var(--m3e-icon-button-large-narrow-trailing-space, 1rem) + ${n.density.calc(-3)})`),defaultLeadingSpace:e(`calc(var(--m3e-icon-button-large-default-leading-space, 2rem) + ${n.density.calc(-3)})`),defaultTrailingSpace:e(`calc(var(--m3e-icon-button-large-default-trailing-space, 2rem) + ${n.density.calc(-3)})`),wideLeadingSpace:e(`calc(var(--m3e-icon-button-large-wide-leading-space, 3rem) + ${n.density.calc(-3)})`),wideTrailingSpace:e(`calc(var(--m3e-icon-button-large-wide-trailing-space, 3rem) + ${n.density.calc(-3)})`)},"extra-large":{containerHeight:e(`calc(var(--m3e-icon-button-extra-large-container-height, 8.5rem) + ${n.density.calc(-3)})`),outlineThickness:e("var(--m3e-icon-button-extra-large-outline-thickness, 0.1875rem)"),iconSize:e(`calc(var(--m3e-icon-button-extra-large-icon-size, 2.5rem) + ${n.density.calc(-3)})`),shapeRound:e(`var(--m3e-icon-button-extra-large-shape-round, ${n.shape.corner.full})`),shapeSquare:e(`var(--m3e-icon-button-extra-large-shape-square, ${n.shape.corner.extraLarge})`),selectedShapeRound:e(`var(--m3e-icon-button-extra-large-selected-shape-round, ${n.shape.corner.extraLarge})`),selectedShapeSquare:e(`var(--m3e-icon-button-extra-large-selected-shape-square, ${n.shape.corner.full})`),shapePressedMorph:e(`var(--m3e-icon-button-extra-large-shape-pressed-morph, ${n.shape.corner.large})`),narrowLeadingSpace:e(`calc(var(--m3e-icon-button-extra-large-narrow-leading-space, 2rem) + ${n.density.calc(-3)})`),narrowTrailingSpace:e(`calc(var(--m3e-icon-button-extra-large-narrow-trailing-space, 2rem) + ${n.density.calc(-3)})`),defaultLeadingSpace:e(`calc(var(--m3e-icon-button-extra-large-default-leading-space, 3rem) + ${n.density.calc(-3)})`),defaultTrailingSpace:e(`calc(var(--m3e-icon-button-extra-large-default-trailing-space, 3rem) + ${n.density.calc(-3)})`),wideLeadingSpace:e(`calc(var(--m3e-icon-button-extra-large-wide-leading-space, 4.5rem) + ${n.density.calc(-3)})`),wideTrailingSpace:e(`calc(var(--m3e-icon-button-extra-large-wide-trailing-space, 4.5rem) + ${n.density.calc(-3)})`)}};function J(o){return t`:host([size="${e(o)}"]) .base { height: ${G[o].containerHeight}; } :host([size="${e(o)}"][width="default"]) .wrapper { padding-inline-start: ${G[o].defaultLeadingSpace}; padding-inline-end: ${G[o].defaultTrailingSpace}; } :host([size="${e(o)}"][width="narrow"]) .wrapper { padding-inline-start: ${G[o].narrowLeadingSpace}; padding-inline-end: ${G[o].narrowTrailingSpace}; } :host([size="${e(o)}"][width="wide"]) .wrapper { padding-inline-start: ${G[o].wideLeadingSpace}; padding-inline-end: ${G[o].wideTrailingSpace}; } :host([size="${e(o)}"]) .icon { font-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"]:not(.-pressed)) .base { border-radius: var(--_button-shape, ${G[o].shapeRound}); } :host(:not(.-connected)[size="${e(o)}"][shape="square"]) .base { border-radius: ${G[o].shapeSquare}; } :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"][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 ${n.motion.duration.short4} ${n.motion.easing.standard}`)}; } .touch { position: absolute; aspect-ratio: 1 / 1; height: 3rem; left: auto; right: auto; } :host(.-pressed) .base, :host(.-resting) .base { transition: ${e(`background-color ${n.motion.duration.short4} ${n.motion.easing.standard},\n border-radius ${n.motion.spring.fastEffects}`)}; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; transition: ${e(`padding-inline ${n.motion.spring.fastEffects}`)}; } .icon { transition: ${e(`color ${n.motion.duration.short4} ${n.motion.easing.standard}`)}; --m3e-icon-size: 1em; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } ::slotted(*) { font-size: inherit !important; flex: none; transform: var(--_icon-button-icon-transform); transform-origin: center center; transition: ${e(`transform var(--_icon-button-icon-transform-transition, ${n.motion.spring.fastEffects})`)}; } ::slotted(svg) { width: 1em; height: 1em; } :host([toggle]:not([selected])) .base.with-selected-icon slot[name="selected"], :host([toggle][selected]) .base.with-selected-icon slot:not([name]) { display: none; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } :host(.-grouped.-connected) { flex: 1 1 auto; } :host(.-grouped:not(.-connected):not(.-adjacent-pressed):not(.-pressed)) { flex-shrink: 0; flex-grow: 0; } :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) { flex-shrink: 1; min-width: 0; } :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) .label { text-overflow: clip; } :host(.-grouped:not(.-connected).-pressed:not([disabled-interactive]):not(:disabled)) { flex-shrink: 0; flex-basis: calc( var(--_button-width) + calc(var(--_button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) ); } @media (forced-colors: active) { .base, .icon { transition: none; } :host(.-pressed) .base, :host(.-resting) .base { transition: border-radius ${n.motion.spring.fastEffects}; } :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .label, :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .icon { color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .icon { color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .base { background-color: ButtonText; outline: none; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .icon { forced-color-adjust: none; color: ButtonFace; background-color: ButtonText; } :host([variant]:disabled) .base, :host([variant][disabled-interactive]) .base { outline-color: GrayText; background-color: unset; } :host([variant]:disabled) .label, :host([variant][disabled-interactive]) .label, :host([variant]:disabled) .icon, :host([variant][disabled-interactive]) .icon { color: GrayText; } .base { outline-style: solid; } :host([size="extra-small"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-extra-small-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-extra-small-outline-thickness, 1px); } :host([size="small"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-small-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-small-outline-thickness, 1px); } :host([size="medium"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-medium-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-medium-outline-thickness, 1px); } :host([size="large"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-large-outline-thickness, 0.125rem)); outline-width: var(--m3e-icon-button-large-outline-thickness, 0.125rem); } :host([size="extra-large"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-extra-large-outline-thickness, 0.1875rem)); outline-width: var(--m3e-icon-button-extra-large-outline-thickness, 0.1875rem); } } @media (prefers-reduced-motion) { :host(.-pressed) .base, :host(.-resting) .base, .base, .wrapper, .icon { transition: none; } }`,Y={elevated:{iconColor:e(`var(--m3e-elevated-icon-button-icon-color, ${n.color.primary})`),containerColor:e(`var(--m3e-elevated-icon-button-container-color, ${n.color.surfaceContainerLow})`),containerElevation:e(`var(--m3e-elevated-icon-button-container-elevation, ${n.elevation.level1})`),unselectedIconColor:e(`var(--m3e-elevated-icon-button-unselected-icon-color, ${n.color.primary})`),unselectedContainerColor:e(`var(--m3e-elevated-icon-button-unselected-container-color, ${n.color.surfaceContainerLow})`),selectedIconColor:e(`var(--m3e-elevated-icon-button-selected-icon-color, ${n.color.onPrimary})`),selectedContainerColor:e(`var(--m3e-elevated-icon-button-selected-container-color, ${n.color.primary})`),disabled:{containerColor:e(`var(--m3e-elevated-icon-button-disabled-container-color, ${n.color.onSurface})`),containerOpacity:e("var(--m3e-elevated-icon-button-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-elevated-icon-button-disabled-icon-color, ${n.color.onSurface})`),iconOpacity:e("var(--m3e-elevated-icon-button-disabled-icon-opacity, 38%)"),containerElevation:e(`var(--m3e-elevated-icon-button-disabled-container-elevation, ${n.elevation.level0})`)},hover:{iconColor:e(`var(--m3e-elevated-icon-button-hover-icon-color, ${n.color.primary})`),stateLayerColor:e(`var(--m3e-elevated-icon-button-hover-state-layer-color, ${n.color.primary})`),stateLayerOpacity:e(`var(--m3e-elevated-icon-button-hover-state-layer-opacity, ${n.state.hoverStateLayerOpacity})`),containerElevation:e(`var(--m3e-elevated-icon-button-hover-container-elevation, ${n.elevation.level2})`),unselectedIconColor:e(`var(--m3e-elevated-icon-button-hover-unselected-icon-color, ${n.color.primary})`),unselectedStateLayerColor:e(`var(--m3e-elevated-icon-button-hover-unselected-state-layer-color, ${n.color.primary})`),selectedIconColor:e(`var(--m3e-elevated-icon-button-hover-selected-icon-color, ${n.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-elevated-icon-button-hover-selected-state-layer-color, ${n.color.onPrimary})`)},focus:{iconColor:e(`var(--m3e-elevated-icon-button-focus-icon-color, ${n.color.primary})`),stateLayerColor:e(`var(--m3e-elevated-icon-button-focus-state-layer-color, ${n.color.primary})`),stateLayerOpacity:e(`var(--m3e-elevated-icon-button-focus-state-layer-opacity, ${n.state.focusStateLayerOpacity})`),containerElevation:e(`var(--m3e-elevated-icon-button-focus-container-elevation, ${n.elevation.level1})`),unselectedIconColor:e(`var(--m3e-elevated-icon-button-focus-unselected-icon-color, ${n.color.primary})`),unselectedStateLayerColor:e(`var(--m3e-elevated-icon-button-focus-unselected-state-layer-color, ${n.color.primary})`),selectedIconColor:e(`var(--m3e-elevated-icon-button-focus-selected-icon-color, ${n.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-elevated-icon-button-focus-selected-state-layer-color, ${n.color.onPrimary})`)},pressed:{iconColor:e(`var(--m3e-elevated-icon-button-pressed-icon-color, ${n.color.primary})`),stateLayerColor:e(`var(--m3e-elevated-icon-button-pressed-state-layer-color, ${n.color.primary})`),stateLayerOpacity:e(`var(--m3e-elevated-icon-button-pressed-state-layer-opacity, ${n.state.pressedStateLayerOpacity})`),containerElevation:e(`var(--m3e-elevated-icon-button-pressed-container-elevation, ${n.elevation.level1})`),unselectedIconColor:e(`var(--m3e-elevated-icon-button-pressed-unselected-icon-color, ${n.color.primary})`),unselectedStateLayerColor:e(`var(--m3e-elevated-icon-button-pressed-unselected-state-layer-color, ${n.color.primary})`),selectedIconColor:e(`var(--m3e-elevated-icon-button-pressed-selected-icon-color, ${n.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-elevated-icon-button-pressed-selected-state-layer-color, ${n.color.onPrimary})`)}},outlined:{iconColor:e(`var(--m3e-outlined-icon-button-icon-color, ${n.color.onSurfaceVariant})`),outlineColor:e(`var(--m3e-outlined-icon-button-outline-color, ${n.color.outlineVariant})`),unselectedIconColor:e(`var(--m3e-outlined-icon-button-unselected-icon-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-outlined-icon-button-selected-icon-color, ${n.color.inverseOnSurface})`),selectedContainerColor:e(`var(--m3e-outlined-icon-button-selected-container-color, ${n.color.inverseSurface})`),disabled:{containerColor:e(`var(--m3e-outlined-icon-button-disabled-container-color, ${n.color.onSurface})`),containerOpacity:e("var(--m3e-outlined-icon-button-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-outlined-icon-button-disabled-icon-color, ${n.color.onSurface})`),iconOpacity:e("var(--m3e-outlined-icon-button-disabled-icon-opacity, 38%)"),outlineColor:e(`var(--m3e-outlined-icon-button-disabled-outline-color, ${n.color.outlineVariant})`)},hover:{iconColor:e(`var(--m3e-outlined-icon-button-hover-icon-color, ${n.color.onSurfaceVariant})`),outlineColor:e(`var(--m3e-outlined-icon-button-hover-outline-color, ${n.color.outlineVariant})`),stateLayerColor:e(`var(--m3e-outlined-icon-button-hover-state-layer-color, ${n.color.onSurfaceVariant})`),stateLayerOpacity:e(`var(--m3e-outlined-icon-button-hover-state-layer-opacity, ${n.state.hoverStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-outlined-icon-button-hover-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-outlined-icon-button-hover-unselected-state-layer-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-outlined-icon-button-hover-selected-icon-color, ${n.color.inverseOnSurface})`),selectedStateLayerColor:e(`var(--m3e-outlined-icon-button-hover-selected-state-layer-color, ${n.color.inverseOnSurface})`)},focus:{iconColor:e(`var(--m3e-outlined-icon-button-focus-icon-color, ${n.color.onSurfaceVariant})`),outlineColor:e(`var(--m3e-outlined-icon-button-focus-outline-color, ${n.color.outlineVariant})`),stateLayerColor:e(`var(--m3e-outlined-icon-button-focus-state-layer-color, ${n.color.onSurfaceVariant})`),stateLayerOpacity:e(`var(--m3e-outlined-icon-button-focus-state-layer-opacity, ${n.state.focusStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-outlined-icon-button-focus-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-outlined-icon-button-focus-unselected-state-layer-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-outlined-icon-button-focus-selected-icon-color, ${n.color.inverseOnSurface})`),selectedStateLayerColor:e(`var(--m3e-outlined-icon-button-focus-selected-state-layer-color, ${n.color.inverseOnSurface})`)},pressed:{iconColor:e(`var(--m3e-outlined-icon-button-pressed-icon-color, ${n.color.onSurfaceVariant})`),outlineColor:e(`var(--m3e-outlined-icon-button-pressed-outline-color, ${n.color.outlineVariant})`),stateLayerColor:e(`var(--m3e-outlined-icon-button-pressed-state-layer-color, ${n.color.onSurfaceVariant})`),stateLayerOpacity:e(`var(--m3e-outlined-icon-button-pressed-state-layer-opacity, ${n.state.pressedStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-outlined-icon-button-pressed-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-outlined-icon-button-pressed-unselected-state-layer-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-outlined-icon-button-pressed-selected-icon-color, ${n.color.inverseOnSurface})`),selectedStateLayerColor:e(`var(--m3e-outlined-icon-button-pressed-selected-state-layer-color, ${n.color.inverseOnSurface})`)}},filled:{iconColor:e(`var(--m3e-filled-icon-button-icon-color, ${n.color.onPrimary})`),containerColor:e(`var(--m3e-filled-icon-button-container-color, ${n.color.primary})`),unselectedIconColor:e(`var(--m3e-filled-icon-button-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedContainerColor:e(`var(--m3e-filled-icon-button-unselected-container-color, ${n.color.surfaceContainer})`),selectedIconColor:e(`var(--m3e-filled-icon-button-selected-icon-color, ${n.color.onPrimary})`),selectedContainerColor:e(`var(--m3e-filled-icon-button-selected-container-color, ${n.color.primary})`),disabled:{containerColor:e(`var(--m3e-filled-icon-button-disabled-container-color, ${n.color.onSurface})`),containerOpacity:e("var(--m3e-filled-icon-button-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-filled-icon-button-disabled-icon-color, ${n.color.onSurface})`),iconOpacity:e("var(--m3e-filled-icon-button-disabled-icon-opacity, 38%)")},hover:{iconColor:e(`var(--m3e-filled-icon-button-hover-icon-color, ${n.color.onPrimary})`),stateLayerColor:e(`var(--m3e-filled-icon-button-hover-state-layer-color, ${n.color.onPrimary})`),stateLayerOpacity:e(`var(--m3e-filled-icon-button-hover-state-layer-opacity, ${n.state.hoverStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-filled-icon-button-hover-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-filled-icon-button-hover-unselected-state-layer-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-filled-icon-button-hover-selected-icon-color, ${n.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-filled-icon-button-hover-selected-state-layer-color, ${n.color.onPrimary})`)},focus:{iconColor:e(`var(--m3e-filled-icon-button-focus-icon-color, ${n.color.onPrimary})`),stateLayerColor:e(`var(--m3e-filled-icon-button-focus-state-layer-color, ${n.color.onPrimary})`),stateLayerOpacity:e(`var(--m3e-filled-icon-button-focus-state-layer-opacity, ${n.state.focusStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-filled-icon-button-focus-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-filled-icon-button-focus-unselected-state-layer-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-filled-icon-button-focus-selected-icon-color, ${n.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-filled-icon-button-focus-selected-state-layer-color, ${n.color.onPrimary})`)},pressed:{iconColor:e(`var(--m3e-filled-icon-button-pressed-icon-color, ${n.color.onPrimary})`),stateLayerColor:e(`var(--m3e-filled-icon-button-pressed-state-layer-color, ${n.color.onPrimary})`),stateLayerOpacity:e(`var(--m3e-filled-icon-button-pressed-state-layer-opacity, ${n.state.pressedStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-filled-icon-button-pressed-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-filled-icon-button-pressed-unselected-state-layer-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-filled-icon-button-pressed-selected-icon-color, ${n.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-filled-icon-button-pressed-selected-state-layer-color, ${n.color.onPrimary})`)}},tonal:{iconColor:e(`var(--m3e-tonal-icon-button-icon-color, ${n.color.onSecondaryContainer})`),containerColor:e(`var(--m3e-tonal-icon-button-container-color, ${n.color.secondaryContainer})`),unselectedIconColor:e(`var(--m3e-tonal-icon-button-unselected-icon-color, ${n.color.onSecondaryContainer})`),unselectedContainerColor:e(`var(--m3e-tonal-icon-button-unselected-container-color, ${n.color.secondaryContainer})`),selectedIconColor:e(`var(--m3e-tonal-icon-button-selected-icon-color, ${n.color.onSecondary})`),selectedContainerColor:e(`var(--m3e-tonal-icon-button-selected-container-color, ${n.color.secondary})`),disabled:{containerColor:e(`var(--m3e-tonal-icon-button-disabled-container-color, ${n.color.onSurface})`),containerOpacity:e("var(--m3e-tonal-icon-button-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-tonal-icon-button-disabled-icon-color, ${n.color.onSurface})`),iconOpacity:e("var(--m3e-tonal-icon-button-disabled-icon-opacity, 38%)")},hover:{iconColor:e(`var(--m3e-tonal-icon-button-hover-icon-color, ${n.color.onSecondaryContainer})`),stateLayerColor:e(`var(--m3e-tonal-icon-button-hover-state-layer-color, ${n.color.onSecondaryContainer})`),stateLayerOpacity:e(`var(--m3e-tonal-icon-button-hover-state-layer-opacity, ${n.state.hoverStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-tonal-icon-button-hover-unselected-icon-color, ${n.color.onSecondaryContainer})`),unselectedStateLayerColor:e(`var(--m3e-tonal-icon-button-hover-unselected-state-layer-color, ${n.color.onSecondaryContainer})`),selectedIconColor:e(`var(--m3e-tonal-icon-button-hover-selected-icon-color, ${n.color.onSecondary})`),selectedStateLayerColor:e(`var(--m3e-tonal-icon-button-hover-selected-state-layer-color, ${n.color.onSecondary})`)},focus:{iconColor:e(`var(--m3e-tonal-icon-button-focus-icon-color, ${n.color.onSecondaryContainer})`),stateLayerColor:e(`var(--m3e-tonal-icon-button-focus-state-layer-color, ${n.color.onSecondaryContainer})`),stateLayerOpacity:e(`var(--m3e-tonal-icon-button-focus-state-layer-opacity, ${n.state.focusStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-tonal-icon-button-focus-unselected-icon-color, ${n.color.onSecondaryContainer})`),unselectedStateLayerColor:e(`var(--m3e-tonal-icon-button-focus-unselected-state-layer-color, ${n.color.onSecondaryContainer})`),selectedIconColor:e(`var(--m3e-tonal-icon-button-focus-selected-icon-color, ${n.color.onSecondary})`),selectedStateLayerColor:e(`var(--m3e-tonal-icon-button-focus-selected-state-layer-color, ${n.color.onSecondary})`)},pressed:{iconColor:e(`var(--m3e-tonal-icon-button-pressed-icon-color, ${n.color.onSecondaryContainer})`),stateLayerColor:e(`var(--m3e-tonal-icon-button-pressed-state-layer-color, ${n.color.onSecondaryContainer})`),stateLayerOpacity:e(`var(--m3e-tonal-icon-button-pressed-state-layer-opacity, ${n.state.pressedStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-tonal-icon-button-pressed-unselected-icon-color, ${n.color.onSecondaryContainer})`),unselectedStateLayerColor:e(`var(--m3e-tonal-icon-button-pressed-unselected-state-layer-color, ${n.color.onSecondaryContainer})`),selectedIconColor:e(`var(--m3e-tonal-icon-button-pressed-selected-icon-color, ${n.color.onSecondary})`),selectedStateLayerColor:e(`var(--m3e-tonal-icon-button-pressed-selected-state-layer-color, ${n.color.onSecondary})`)}},standard:{iconColor:e(`var(--m3e-standard-icon-button-icon-color, ${n.color.onSurfaceVariant})`),unselectedIconColor:e(`var(--m3e-standard-icon-button-unselected-icon-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-standard-icon-button-selected-icon-color, ${n.color.primary})`),disabled:{containerColor:e("var(--m3e-standard-icon-button-disabled-container-color, transparent)"),containerOpacity:e("var(--m3e-standard-icon-button-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-standard-icon-button-disabled-icon-color, ${n.color.onSurface})`),iconOpacity:e("var(--m3e-standard-icon-button-disabled-icon-opacity, 38%)")},hover:{iconColor:e(`var(--m3e-standard-icon-button-hover-icon-color, ${n.color.onSurfaceVariant})`),stateLayerColor:e(`var(--m3e-standard-icon-button-hover-state-layer-color, ${n.color.onSurfaceVariant})`),stateLayerOpacity:e(`var(--m3e-standard-icon-button-hover-state-layer-opacity, ${n.state.hoverStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-standard-icon-button-hover-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-standard-icon-button-hover-unselected-state-layer-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-standard-icon-button-hover-selected-icon-color, ${n.color.primary})`),selectedStateLayerColor:e(`var(--m3e-standard-icon-button-hover-selected-state-layer-color, ${n.color.primary})`)},focus:{iconColor:e(`var(--m3e-standard-icon-button-focus-icon-color, ${n.color.onSurfaceVariant})`),stateLayerColor:e(`var(--m3e-standard-icon-button-focus-state-layer-color, ${n.color.onSurfaceVariant})`),stateLayerOpacity:e(`var(--m3e-standard-icon-button-focus-state-layer-opacity, ${n.state.focusStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-standard-icon-button-focus-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-standard-icon-button-focus-unselected-state-layer-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-standard-icon-button-focus-selected-icon-color, ${n.color.primary})`),selectedStateLayerColor:e(`var(--m3e-standard-icon-button-focus-selected-state-layer-color, ${n.color.primary})`)},pressed:{iconColor:e(`var(--m3e-standard-icon-button-pressed-icon-color, ${n.color.onSurfaceVariant})`),stateLayerColor:e(`var(--m3e-standard-icon-button-pressed-state-layer-color, ${n.color.onSurfaceVariant})`),stateLayerOpacity:e(`var(--m3e-standard-icon-button-pressed-state-layer-opacity, ${n.state.pressedStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-standard-icon-button-pressed-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-standard-icon-button-pressed-unselected-state-layer-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-standard-icon-button-pressed-selected-icon-color, ${n.color.primary})`),selectedStateLayerColor:e(`var(--m3e-standard-icon-button-pressed-selected-state-layer-color, ${n.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])) .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 { 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) .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("standard"),Z("outlined"),Z("filled"),Z("tonal"),Z("elevated"),t`:host([variant="outlined"]) .base { outline-style: solid; }`];var te,oe,re,ae,ne;let ie=class extends(i(s(c(l(d(u(p(h(o,"button"),!0)))))))){constructor(){super(),te.add(this),oe.set(this,e=>S(this,te,"m",ae).call(this,e)),this.variant="standard",this.shape="rounded",this.size="small",this.width="default",this.toggle=!1,this.selected=!1,new v(this,{callback:()=>{this.grouped&&this._handleResize()}}),new m(this,{callback:e=>{!this.disabledInteractive&&this._base&&(e?S(this,te,"m",re).call(this):this.grouped||this._base?.style.removeProperty("--_button-shape"))}}),new b(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 n=r[t];t===a-1||t===a+1?(n.style.setProperty("--_adjacent-button-width",`${o}px`),n.classList.toggle("-adjacent-pressed",e)):(n.style.removeProperty("--_adjacent-button-width"),n.classList.remove("-adjacent-pressed"))}}}}})}get grouped(){return this.classList.contains("-grouped")}render(){return a`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-state-layer><m3e-elevation class="elevation" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-elevation><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" centered ?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" aria-hidden="true" @slotchange="${S(this,te,"m",ne)}"></slot>`:r}<slot class="icon" aria-hidden="true"></slot></div></div>`}connectedCallback(){super.connectedCallback(),this.addEventListener("click",S(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",S(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`),S(this,te,"m",re).call(this,!0))}};oe=new WeakMap,te=new WeakSet,re=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`)}},ae=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)},ne=function(e){this._base?.classList.toggle("with-selected-icon",f(e.target))},ie.styles=[Q,ee,X],g([K(".base")],ie.prototype,"_base",void 0),g([K(".elevation")],ie.prototype,"_elevation",void 0),g([K(".focus-ring")],ie.prototype,"_focusRing",void 0),g([K(".state-layer")],ie.prototype,"_stateLayer",void 0),g([K(".ripple")],ie.prototype,"_ripple",void 0),g([F({reflect:!0})],ie.prototype,"variant",void 0),g([F({reflect:!0})],ie.prototype,"shape",void 0),g([F({reflect:!0})],ie.prototype,"size",void 0),g([F({reflect:!0})],ie.prototype,"width",void 0),g([F({type:Boolean,reflect:!0})],ie.prototype,"toggle",void 0),g([F({type:Boolean,reflect:!0})],ie.prototype,"selected",void 0),g([$(40)],ie.prototype,"_handleResize",null),ie=g([(e=>(t,o)=>{void 0!==o?o.addInitializer(()=>{customElements.define(e,t)}):customElements.define(e,t)})("m3e-icon-button")],ie);export{ie as M3eIconButtonElement};
|
|
401
40
|
//# sourceMappingURL=index.min.js.map
|