@m3e/icon-button 1.0.6 → 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 +1043 -1077
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.min.js +1 -362
  4. package/dist/index.min.js.map +1 -1
  5. package/package.json +2 -16
package/dist/index.js CHANGED
@@ -19,26 +19,24 @@ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
19
19
  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
20
20
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
21
21
  PERFORMANCE OF THIS SOFTWARE.
22
- ***************************************************************************** */
23
- /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
24
-
25
-
26
- function __decorate(decorators, target, key, desc) {
27
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
28
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
29
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
30
- return c > 3 && r && Object.defineProperty(target, key, r), r;
31
- }
32
-
33
- function __classPrivateFieldGet(receiver, state, kind, f) {
34
- if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
35
- if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
36
- return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
37
- }
38
-
39
- typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
40
- var e = new Error(message);
41
- return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
22
+ ***************************************************************************** */
23
+ /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
24
+
25
+ function __decorate(decorators, target, key, desc) {
26
+ var c = arguments.length,
27
+ r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
28
+ d;
29
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
30
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
31
+ }
32
+ function __classPrivateFieldGet(receiver, state, kind, f) {
33
+ if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
34
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
35
+ return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
36
+ }
37
+ typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
38
+ var e = new Error(message);
39
+ return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
42
40
  };
43
41
 
44
42
  /**
@@ -46,919 +44,916 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
46
44
  * Copyright 2017 Google LLC
47
45
  * SPDX-License-Identifier: BSD-3-Clause
48
46
  */
49
- const t$1=t=>(e,o)=>{ void 0!==o?o.addInitializer((()=>{customElements.define(t,e);})):customElements.define(t,e);};
47
+ const t$1 = t => (e, o) => {
48
+ void 0 !== o ? o.addInitializer(() => {
49
+ customElements.define(t, e);
50
+ }) : customElements.define(t, e);
51
+ };
50
52
 
51
53
  /**
52
54
  * @license
53
55
  * Copyright 2019 Google LLC
54
56
  * SPDX-License-Identifier: BSD-3-Clause
55
57
  */
56
- const t=globalThis,e$3=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s=Symbol(),o$2=new WeakMap;let n$2 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$3&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$2.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$2.set(s,t));}return t}toString(){return this.cssText}};const r$2=t=>new n$2("string"==typeof t?t:t+"",void 0,s),S=(s,o)=>{if(e$3)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$1=e$3?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$2(e)})(t):t;
58
+ const t = globalThis,
59
+ e$3 = t.ShadowRoot && (void 0 === t.ShadyCSS || t.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype,
60
+ s = Symbol(),
61
+ o$2 = new WeakMap();
62
+ let n$2 = class n {
63
+ constructor(t, e, o) {
64
+ if (this._$cssResult$ = true, o !== s) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
65
+ this.cssText = t, this.t = e;
66
+ }
67
+ get styleSheet() {
68
+ let t = this.o;
69
+ const s = this.t;
70
+ if (e$3 && void 0 === t) {
71
+ const e = void 0 !== s && 1 === s.length;
72
+ e && (t = o$2.get(s)), void 0 === t && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), e && o$2.set(s, t));
73
+ }
74
+ return t;
75
+ }
76
+ toString() {
77
+ return this.cssText;
78
+ }
79
+ };
80
+ const r$2 = t => new n$2("string" == typeof t ? t : t + "", void 0, s),
81
+ S = (s, o) => {
82
+ if (e$3) s.adoptedStyleSheets = o.map(t => t instanceof CSSStyleSheet ? t : t.styleSheet);else for (const e of o) {
83
+ const o = document.createElement("style"),
84
+ n = t.litNonce;
85
+ void 0 !== n && o.setAttribute("nonce", n), o.textContent = e.cssText, s.appendChild(o);
86
+ }
87
+ },
88
+ c$1 = e$3 ? t => t : t => t instanceof CSSStyleSheet ? (t => {
89
+ let e = "";
90
+ for (const s of t.cssRules) e += s.cssText;
91
+ return r$2(e);
92
+ })(t) : t;
57
93
 
58
94
  /**
59
95
  * @license
60
96
  * Copyright 2017 Google LLC
61
97
  * SPDX-License-Identifier: BSD-3-Clause
62
- */const{is:i,defineProperty:e$2,getOwnPropertyDescriptor:h,getOwnPropertyNames:r$1,getOwnPropertySymbols:o$1,getPrototypeOf:n$1}=Object,a=globalThis,c=a.trustedTypes,l=c?c.emptyScript:"",p=a.reactiveElementPolyfillSupport,d=(t,s)=>t,u={toAttribute(t,s){switch(s){case Boolean:t=t?l:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f=(t,s)=>!i(t,s),b={attribute:true,type:String,converter:u,reflect:false,useDefault:false,hasChanged:f};Symbol.metadata??=Symbol("metadata"),a.litPropertyMetadata??=new WeakMap;class y extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=b){if(s.state&&(s.attribute=false),this._$Ei(),this.prototype.hasOwnProperty(t)&&((s=Object.create(s)).wrapped=true),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),h=this.getPropertyDescriptor(t,i,s);void 0!==h&&e$2(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get:e,set(s){const h=e?.call(this);r?.call(this,s),this.requestUpdate(t,h,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??b}static _$Ei(){if(this.hasOwnProperty(d("elementProperties")))return;const t=n$1(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d("properties"))){const t=this.properties,s=[...r$1(t),...o$1(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$1(s));}else void 0!==s&&i.push(c$1(s));return i}static _$Eu(t,s){const i=s.attribute;return false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$ET(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const h=(void 0!==i.converter?.toAttribute?i.converter:u).toAttribute(s,i.type);this._$Em=t,null==h?this.removeAttribute(e):this.setAttribute(e,h),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u;this._$Em=e;const r=h.fromAttribute(s,t.type);this[e]=r??this._$Ej?.get(e)??r,this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){const e=this.constructor,h=this[t];if(i??=e.getPropertyOptions(t),!((i.hasChanged??f)(h,s)||i.useDefault&&i.reflect&&h===this._$Ej?.get(t)&&!this.hasAttribute(e._$Eu(t,i))))return;this.C(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$EP());}C(t,s,{useDefault:i,reflect:e,wrapped:h},r){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,r??s??this[t]),true!==h||void 0!==r)||(this._$AL.has(t)||(this.hasUpdated||i||(s=void 0),this._$AL.set(t,s)),true===e&&this._$Em!==t&&(this._$Eq??=new Set).add(t));}async _$EP(){this.isUpdatePending=true;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t){const{wrapped:t}=i,e=this[s];true!==t||this._$AL.has(s)||void 0===e||this.C(s,void 0,i,e);}}let t=false;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EM();}catch(s){throw t=false,this._$EM(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EM(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return true}update(t){this._$Eq&&=this._$Eq.forEach((t=>this._$ET(t,this[t]))),this._$EM();}updated(t){}firstUpdated(t){}}y.elementStyles=[],y.shadowRootOptions={mode:"open"},y[d("elementProperties")]=new Map,y[d("finalized")]=new Map,p?.({ReactiveElement:y}),(a.reactiveElementVersions??=[]).push("2.1.1");
98
+ */
99
+ const {
100
+ is: i,
101
+ defineProperty: e$2,
102
+ getOwnPropertyDescriptor: h,
103
+ getOwnPropertyNames: r$1,
104
+ getOwnPropertySymbols: o$1,
105
+ getPrototypeOf: n$1
106
+ } = Object,
107
+ a = globalThis,
108
+ c = a.trustedTypes,
109
+ l = c ? c.emptyScript : "",
110
+ p = a.reactiveElementPolyfillSupport,
111
+ d = (t, s) => t,
112
+ u = {
113
+ toAttribute(t, s) {
114
+ switch (s) {
115
+ case Boolean:
116
+ t = t ? l : null;
117
+ break;
118
+ case Object:
119
+ case Array:
120
+ t = null == t ? t : JSON.stringify(t);
121
+ }
122
+ return t;
123
+ },
124
+ fromAttribute(t, s) {
125
+ let i = t;
126
+ switch (s) {
127
+ case Boolean:
128
+ i = null !== t;
129
+ break;
130
+ case Number:
131
+ i = null === t ? null : Number(t);
132
+ break;
133
+ case Object:
134
+ case Array:
135
+ try {
136
+ i = JSON.parse(t);
137
+ } catch (t) {
138
+ i = null;
139
+ }
140
+ }
141
+ return i;
142
+ }
143
+ },
144
+ f = (t, s) => !i(t, s),
145
+ b = {
146
+ attribute: true,
147
+ type: String,
148
+ converter: u,
149
+ reflect: false,
150
+ useDefault: false,
151
+ hasChanged: f
152
+ };
153
+ Symbol.metadata ??= Symbol("metadata"), a.litPropertyMetadata ??= new WeakMap();
154
+ class y extends HTMLElement {
155
+ static addInitializer(t) {
156
+ this._$Ei(), (this.l ??= []).push(t);
157
+ }
158
+ static get observedAttributes() {
159
+ return this.finalize(), this._$Eh && [...this._$Eh.keys()];
160
+ }
161
+ static createProperty(t, s = b) {
162
+ if (s.state && (s.attribute = false), this._$Ei(), this.prototype.hasOwnProperty(t) && ((s = Object.create(s)).wrapped = true), this.elementProperties.set(t, s), !s.noAccessor) {
163
+ const i = Symbol(),
164
+ h = this.getPropertyDescriptor(t, i, s);
165
+ void 0 !== h && e$2(this.prototype, t, h);
166
+ }
167
+ }
168
+ static getPropertyDescriptor(t, s, i) {
169
+ const {
170
+ get: e,
171
+ set: r
172
+ } = h(this.prototype, t) ?? {
173
+ get() {
174
+ return this[s];
175
+ },
176
+ set(t) {
177
+ this[s] = t;
178
+ }
179
+ };
180
+ return {
181
+ get: e,
182
+ set(s) {
183
+ const h = e?.call(this);
184
+ r?.call(this, s), this.requestUpdate(t, h, i);
185
+ },
186
+ configurable: true,
187
+ enumerable: true
188
+ };
189
+ }
190
+ static getPropertyOptions(t) {
191
+ return this.elementProperties.get(t) ?? b;
192
+ }
193
+ static _$Ei() {
194
+ if (this.hasOwnProperty(d("elementProperties"))) return;
195
+ const t = n$1(this);
196
+ t.finalize(), void 0 !== t.l && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
197
+ }
198
+ static finalize() {
199
+ if (this.hasOwnProperty(d("finalized"))) return;
200
+ if (this.finalized = true, this._$Ei(), this.hasOwnProperty(d("properties"))) {
201
+ const t = this.properties,
202
+ s = [...r$1(t), ...o$1(t)];
203
+ for (const i of s) this.createProperty(i, t[i]);
204
+ }
205
+ const t = this[Symbol.metadata];
206
+ if (null !== t) {
207
+ const s = litPropertyMetadata.get(t);
208
+ if (void 0 !== s) for (const [t, i] of s) this.elementProperties.set(t, i);
209
+ }
210
+ this._$Eh = new Map();
211
+ for (const [t, s] of this.elementProperties) {
212
+ const i = this._$Eu(t, s);
213
+ void 0 !== i && this._$Eh.set(i, t);
214
+ }
215
+ this.elementStyles = this.finalizeStyles(this.styles);
216
+ }
217
+ static finalizeStyles(s) {
218
+ const i = [];
219
+ if (Array.isArray(s)) {
220
+ const e = new Set(s.flat(1 / 0).reverse());
221
+ for (const s of e) i.unshift(c$1(s));
222
+ } else void 0 !== s && i.push(c$1(s));
223
+ return i;
224
+ }
225
+ static _$Eu(t, s) {
226
+ const i = s.attribute;
227
+ return false === i ? void 0 : "string" == typeof i ? i : "string" == typeof t ? t.toLowerCase() : void 0;
228
+ }
229
+ constructor() {
230
+ super(), this._$Ep = void 0, this.isUpdatePending = false, this.hasUpdated = false, this._$Em = null, this._$Ev();
231
+ }
232
+ _$Ev() {
233
+ this._$ES = new Promise(t => this.enableUpdating = t), this._$AL = new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach(t => t(this));
234
+ }
235
+ addController(t) {
236
+ (this._$EO ??= new Set()).add(t), void 0 !== this.renderRoot && this.isConnected && t.hostConnected?.();
237
+ }
238
+ removeController(t) {
239
+ this._$EO?.delete(t);
240
+ }
241
+ _$E_() {
242
+ const t = new Map(),
243
+ s = this.constructor.elementProperties;
244
+ for (const i of s.keys()) this.hasOwnProperty(i) && (t.set(i, this[i]), delete this[i]);
245
+ t.size > 0 && (this._$Ep = t);
246
+ }
247
+ createRenderRoot() {
248
+ const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
249
+ return S(t, this.constructor.elementStyles), t;
250
+ }
251
+ connectedCallback() {
252
+ this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(true), this._$EO?.forEach(t => t.hostConnected?.());
253
+ }
254
+ enableUpdating(t) {}
255
+ disconnectedCallback() {
256
+ this._$EO?.forEach(t => t.hostDisconnected?.());
257
+ }
258
+ attributeChangedCallback(t, s, i) {
259
+ this._$AK(t, i);
260
+ }
261
+ _$ET(t, s) {
262
+ const i = this.constructor.elementProperties.get(t),
263
+ e = this.constructor._$Eu(t, i);
264
+ if (void 0 !== e && true === i.reflect) {
265
+ const h = (void 0 !== i.converter?.toAttribute ? i.converter : u).toAttribute(s, i.type);
266
+ this._$Em = t, null == h ? this.removeAttribute(e) : this.setAttribute(e, h), this._$Em = null;
267
+ }
268
+ }
269
+ _$AK(t, s) {
270
+ const i = this.constructor,
271
+ e = i._$Eh.get(t);
272
+ if (void 0 !== e && this._$Em !== e) {
273
+ const t = i.getPropertyOptions(e),
274
+ h = "function" == typeof t.converter ? {
275
+ fromAttribute: t.converter
276
+ } : void 0 !== t.converter?.fromAttribute ? t.converter : u;
277
+ this._$Em = e;
278
+ const r = h.fromAttribute(s, t.type);
279
+ this[e] = r ?? this._$Ej?.get(e) ?? r, this._$Em = null;
280
+ }
281
+ }
282
+ requestUpdate(t, s, i) {
283
+ if (void 0 !== t) {
284
+ const e = this.constructor,
285
+ h = this[t];
286
+ if (i ??= e.getPropertyOptions(t), !((i.hasChanged ?? f)(h, s) || i.useDefault && i.reflect && h === this._$Ej?.get(t) && !this.hasAttribute(e._$Eu(t, i)))) return;
287
+ this.C(t, s, i);
288
+ }
289
+ false === this.isUpdatePending && (this._$ES = this._$EP());
290
+ }
291
+ C(t, s, {
292
+ useDefault: i,
293
+ reflect: e,
294
+ wrapped: h
295
+ }, r) {
296
+ i && !(this._$Ej ??= new Map()).has(t) && (this._$Ej.set(t, r ?? s ?? this[t]), true !== h || void 0 !== r) || (this._$AL.has(t) || (this.hasUpdated || i || (s = void 0), this._$AL.set(t, s)), true === e && this._$Em !== t && (this._$Eq ??= new Set()).add(t));
297
+ }
298
+ async _$EP() {
299
+ this.isUpdatePending = true;
300
+ try {
301
+ await this._$ES;
302
+ } catch (t) {
303
+ Promise.reject(t);
304
+ }
305
+ const t = this.scheduleUpdate();
306
+ return null != t && (await t), !this.isUpdatePending;
307
+ }
308
+ scheduleUpdate() {
309
+ return this.performUpdate();
310
+ }
311
+ performUpdate() {
312
+ if (!this.isUpdatePending) return;
313
+ if (!this.hasUpdated) {
314
+ if (this.renderRoot ??= this.createRenderRoot(), this._$Ep) {
315
+ for (const [t, s] of this._$Ep) this[t] = s;
316
+ this._$Ep = void 0;
317
+ }
318
+ const t = this.constructor.elementProperties;
319
+ if (t.size > 0) for (const [s, i] of t) {
320
+ const {
321
+ wrapped: t
322
+ } = i,
323
+ e = this[s];
324
+ true !== t || this._$AL.has(s) || void 0 === e || this.C(s, void 0, i, e);
325
+ }
326
+ }
327
+ let t = false;
328
+ const s = this._$AL;
329
+ try {
330
+ t = this.shouldUpdate(s), t ? (this.willUpdate(s), this._$EO?.forEach(t => t.hostUpdate?.()), this.update(s)) : this._$EM();
331
+ } catch (s) {
332
+ throw t = false, this._$EM(), s;
333
+ }
334
+ t && this._$AE(s);
335
+ }
336
+ willUpdate(t) {}
337
+ _$AE(t) {
338
+ this._$EO?.forEach(t => t.hostUpdated?.()), this.hasUpdated || (this.hasUpdated = true, this.firstUpdated(t)), this.updated(t);
339
+ }
340
+ _$EM() {
341
+ this._$AL = new Map(), this.isUpdatePending = false;
342
+ }
343
+ get updateComplete() {
344
+ return this.getUpdateComplete();
345
+ }
346
+ getUpdateComplete() {
347
+ return this._$ES;
348
+ }
349
+ shouldUpdate(t) {
350
+ return true;
351
+ }
352
+ update(t) {
353
+ this._$Eq &&= this._$Eq.forEach(t => this._$ET(t, this[t])), this._$EM();
354
+ }
355
+ updated(t) {}
356
+ firstUpdated(t) {}
357
+ }
358
+ y.elementStyles = [], y.shadowRootOptions = {
359
+ mode: "open"
360
+ }, y[d("elementProperties")] = new Map(), y[d("finalized")] = new Map(), p?.({
361
+ ReactiveElement: y
362
+ }), (a.reactiveElementVersions ??= []).push("2.1.1");
63
363
 
64
364
  /**
65
365
  * @license
66
366
  * Copyright 2017 Google LLC
67
367
  * SPDX-License-Identifier: BSD-3-Clause
68
- */const o={attribute:true,type:String,converter:u,reflect:false,hasChanged:f},r=(t=o,e,r)=>{const{kind:n,metadata:i}=r;let s=globalThis.litPropertyMetadata.get(i);if(void 0===s&&globalThis.litPropertyMetadata.set(i,s=new Map),"setter"===n&&((t=Object.create(t)).wrapped=true),s.set(r.name,t),"accessor"===n){const{name:o}=r;return {set(r){const n=e.get.call(this);e.set.call(this,r),this.requestUpdate(o,n,t);},init(e){return void 0!==e&&this.C(o,void 0,t,e),e}}}if("setter"===n){const{name:o}=r;return function(r){const n=this[o];e.call(this,r),this.requestUpdate(o,n,t);}}throw Error("Unsupported decorator location: "+n)};function n(t){return (e,o)=>"object"==typeof o?r(t,e,o):((t,e,o)=>{const r=e.hasOwnProperty(o);return e.constructor.createProperty(o,t),r?Object.getOwnPropertyDescriptor(e,o):void 0})(t,e,o)}
368
+ */
369
+ const o = {
370
+ attribute: true,
371
+ type: String,
372
+ converter: u,
373
+ reflect: false,
374
+ hasChanged: f
375
+ },
376
+ r = (t = o, e, r) => {
377
+ const {
378
+ kind: n,
379
+ metadata: i
380
+ } = r;
381
+ let s = globalThis.litPropertyMetadata.get(i);
382
+ if (void 0 === s && globalThis.litPropertyMetadata.set(i, s = new Map()), "setter" === n && ((t = Object.create(t)).wrapped = true), s.set(r.name, t), "accessor" === n) {
383
+ const {
384
+ name: o
385
+ } = r;
386
+ return {
387
+ set(r) {
388
+ const n = e.get.call(this);
389
+ e.set.call(this, r), this.requestUpdate(o, n, t);
390
+ },
391
+ init(e) {
392
+ return void 0 !== e && this.C(o, void 0, t, e), e;
393
+ }
394
+ };
395
+ }
396
+ if ("setter" === n) {
397
+ const {
398
+ name: o
399
+ } = r;
400
+ return function (r) {
401
+ const n = this[o];
402
+ e.call(this, r), this.requestUpdate(o, n, t);
403
+ };
404
+ }
405
+ throw Error("Unsupported decorator location: " + n);
406
+ };
407
+ function n(t) {
408
+ return (e, o) => "object" == typeof o ? r(t, e, o) : ((t, e, o) => {
409
+ const r = e.hasOwnProperty(o);
410
+ return e.constructor.createProperty(o, t), r ? Object.getOwnPropertyDescriptor(e, o) : void 0;
411
+ })(t, e, o);
412
+ }
69
413
 
70
414
  /**
71
415
  * @license
72
416
  * Copyright 2017 Google LLC
73
417
  * SPDX-License-Identifier: BSD-3-Clause
74
418
  */
75
- const e$1=(e,t,c)=>(c.configurable=true,c.enumerable=true,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,c),c);
419
+ const e$1 = (e, t, c) => (c.configurable = true, c.enumerable = true, Reflect.decorate && "object" != typeof t && Object.defineProperty(e, t, c), c);
76
420
 
77
421
  /**
78
422
  * @license
79
423
  * Copyright 2017 Google LLC
80
424
  * SPDX-License-Identifier: BSD-3-Clause
81
- */function e(e,r){return (n,s,i)=>{const o=t=>t.renderRoot?.querySelector(e)??null;return e$1(n,s,{get(){return o(this)}})}}
425
+ */
426
+ function e(e, r) {
427
+ return (n, s, i) => {
428
+ const o = t => t.renderRoot?.querySelector(e) ?? null;
429
+ return e$1(n, s, {
430
+ get() {
431
+ return o(this);
432
+ }
433
+ });
434
+ };
435
+ }
82
436
 
83
437
  /**
84
438
  * Component design tokens that control the `M3eIconButtonElement` for all size variants.
85
439
  * @internal
86
440
  */
87
441
  const IconButtonSizeToken = {
88
- /** Design tokens that control the `extra-small` `size` variant. */
89
- "extra-small": {
90
- containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-container-height, 2rem) + ${DesignToken.density.calc(0)})`),
91
- outlineThickness: unsafeCSS("var(--m3e-icon-button-extra-small-outline-thickness, 1px)"),
92
- iconSize: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-icon-size, 1.25rem) + ${DesignToken.density.calc(0)})`),
93
- shapeRound: unsafeCSS(`var(--m3e-icon-button-extra-small-shape-round, ${DesignToken.shape.corner.full})`),
94
- shapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-small-shape-square, ${DesignToken.shape.corner.medium})`),
95
- selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-extra-small-selected-shape-round, ${DesignToken.shape.corner.medium})`),
96
- selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-small-selected-shape-square, ${DesignToken.shape.corner.full})`),
97
- shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-extra-small-shape-pressed-morph, ${DesignToken.shape.corner.small})`),
98
- narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-narrow-leading-space, 0.25rem) + ${DesignToken.density.calc(0)})`),
99
- narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-narrow-trailing-space, 0.25rem) + ${DesignToken.density.calc(0)})`),
100
- defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-default-leading-space, 0.375rem) + ${DesignToken.density.calc(0)})`),
101
- defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-default-trailing-space, 0.375rem) + ${DesignToken.density.calc(0)})`),
102
- wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-wide-leading-space, 0.625rem) + ${DesignToken.density.calc(0)})`),
103
- wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-wide-trailing-space, 0.625rem) + ${DesignToken.density.calc(0)})`),
104
- },
105
- /** Design tokens that control the `small` `size` variant. */
106
- small: {
107
- containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-small-container-height, 2.5rem) + ${DesignToken.density.calc(-1)})`),
108
- outlineThickness: unsafeCSS("var(--m3e-icon-button-small-outline-thickness, 1px)"),
109
- iconSize: unsafeCSS(`calc(var(--m3e-icon-button-small-icon-size, 1.5rem) + ${DesignToken.density.calc(-1)})`),
110
- shapeRound: unsafeCSS(`var(--m3e-icon-button-small-shape-round, ${DesignToken.shape.corner.full})`),
111
- shapeSquare: unsafeCSS(`var(--m3e-icon-button-small-shape-square, ${DesignToken.shape.corner.medium})`),
112
- selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-small-selected-shape-round, ${DesignToken.shape.corner.medium})`),
113
- selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-small-selected-shape-square, ${DesignToken.shape.corner.full})`),
114
- shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-small-shape-pressed-morph, ${DesignToken.shape.corner.small})`),
115
- narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-narrow-leading-space, 0.25rem) + ${DesignToken.density.calc(-1)})`),
116
- narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-narrow-trailing-space, 0.25rem) + ${DesignToken.density.calc(-1)})`),
117
- defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-default-leading-space, 0.5rem) + ${DesignToken.density.calc(-1)})`),
118
- defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-default-trailing-space, 0.5rem) + ${DesignToken.density.calc(-1)})`),
119
- wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-wide-leading-space, 0.875rem) + ${DesignToken.density.calc(-1)})`),
120
- wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-wide-trailing-space, 0.875rem) + ${DesignToken.density.calc(-1)})`),
121
- },
122
- /** Design tokens that control the `medium` `size` variant. */
123
- medium: {
124
- containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-medium-container-height, 3.5rem) + ${DesignToken.density.calc(-2)})`),
125
- outlineThickness: unsafeCSS("var(--m3e-icon-button-medium-outline-thickness, 1px)"),
126
- iconSize: unsafeCSS(`calc(var(--m3e-icon-button-medium-icon-size, 1.5rem) + ${DesignToken.density.calc(-2)})`),
127
- shapeRound: unsafeCSS(`var(--m3e-icon-button-medium-shape-round, ${DesignToken.shape.corner.full})`),
128
- shapeSquare: unsafeCSS(`var(--m3e-icon-button-medium-shape-square, ${DesignToken.shape.corner.large})`),
129
- selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-medium-selected-shape-round, ${DesignToken.shape.corner.large})`),
130
- selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-medium-selected-shape-square, ${DesignToken.shape.corner.full})`),
131
- shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-medium-shape-pressed-morph, ${DesignToken.shape.corner.medium})`),
132
- narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-narrow-leading-space, 0.75rem) + ${DesignToken.density.calc(-2)})`),
133
- narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-narrow-trailing-space, 0.75rem) + ${DesignToken.density.calc(-2)})`),
134
- defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-default-leading-space, 1rem) + ${DesignToken.density.calc(-2)})`),
135
- defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-default-trailing-space, 1rem) + ${DesignToken.density.calc(-2)})`),
136
- wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-wide-leading-space, 1.5rem) + ${DesignToken.density.calc(-2)})`),
137
- wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-wide-trailing-space, 1.5rem) + ${DesignToken.density.calc(-2)})`),
138
- },
139
- /** Design tokens that control the `large` `size` variant. */
140
- large: {
141
- containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-large-container-height, 6rem) + ${DesignToken.density.calc(-3)})`),
142
- outlineThickness: unsafeCSS("var(--m3e-icon-button-large-outline-thickness, 0.125rem)"),
143
- iconSize: unsafeCSS(`calc(var(--m3e-icon-button-large-icon-size, 2rem) + ${DesignToken.density.calc(-3)})`),
144
- shapeRound: unsafeCSS(`var(--m3e-icon-button-large-shape-round, ${DesignToken.shape.corner.full})`),
145
- shapeSquare: unsafeCSS(`var(--m3e-icon-button-large-shape-square, ${DesignToken.shape.corner.extraLarge})`),
146
- selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-large-selected-shape-round, ${DesignToken.shape.corner.extraLarge})`),
147
- selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-large-selected-shape-square, ${DesignToken.shape.corner.full})`),
148
- shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-large-shape-pressed-morph, ${DesignToken.shape.corner.large})`),
149
- narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-narrow-leading-space, 1rem) + ${DesignToken.density.calc(-3)})`),
150
- narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-narrow-trailing-space, 1rem) + ${DesignToken.density.calc(-3)})`),
151
- defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-default-leading-space, 2rem) + ${DesignToken.density.calc(-3)})`),
152
- defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-default-trailing-space, 2rem) + ${DesignToken.density.calc(-3)})`),
153
- wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-wide-leading-space, 3rem) + ${DesignToken.density.calc(-3)})`),
154
- wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-wide-trailing-space, 3rem) + ${DesignToken.density.calc(-3)})`),
155
- },
156
- /** Design tokens that control the `extra-large` `size` variant. */
157
- "extra-large": {
158
- containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-container-height, 8.5rem) + ${DesignToken.density.calc(-3)})`),
159
- outlineThickness: unsafeCSS("var(--m3e-icon-button-extra-large-outline-thickness, 0.1875rem)"),
160
- iconSize: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-icon-size, 2.5rem) + ${DesignToken.density.calc(-3)})`),
161
- shapeRound: unsafeCSS(`var(--m3e-icon-button-extra-large-shape-round, ${DesignToken.shape.corner.full})`),
162
- shapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-large-shape-square, ${DesignToken.shape.corner.extraLarge})`),
163
- selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-extra-large-selected-shape-round, ${DesignToken.shape.corner.extraLarge})`),
164
- selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-large-selected-shape-square, ${DesignToken.shape.corner.full})`),
165
- shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-extra-large-shape-pressed-morph, ${DesignToken.shape.corner.large})`),
166
- narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-narrow-leading-space, 2rem) + ${DesignToken.density.calc(-3)})`),
167
- narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-narrow-trailing-space, 2rem) + ${DesignToken.density.calc(-3)})`),
168
- defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-default-leading-space, 3rem) + ${DesignToken.density.calc(-3)})`),
169
- defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-default-trailing-space, 3rem) + ${DesignToken.density.calc(-3)})`),
170
- wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-wide-leading-space, 4.5rem) + ${DesignToken.density.calc(-3)})`),
171
- wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-wide-trailing-space, 4.5rem) + ${DesignToken.density.calc(-3)})`),
172
- },
442
+ /** Design tokens that control the `extra-small` `size` variant. */
443
+ "extra-small": {
444
+ containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-container-height, 2rem) + ${DesignToken.density.calc(0)})`),
445
+ outlineThickness: unsafeCSS("var(--m3e-icon-button-extra-small-outline-thickness, 1px)"),
446
+ iconSize: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-icon-size, 1.25rem) + ${DesignToken.density.calc(0)})`),
447
+ shapeRound: unsafeCSS(`var(--m3e-icon-button-extra-small-shape-round, ${DesignToken.shape.corner.full})`),
448
+ shapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-small-shape-square, ${DesignToken.shape.corner.medium})`),
449
+ selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-extra-small-selected-shape-round, ${DesignToken.shape.corner.medium})`),
450
+ selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-small-selected-shape-square, ${DesignToken.shape.corner.full})`),
451
+ shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-extra-small-shape-pressed-morph, ${DesignToken.shape.corner.small})`),
452
+ narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-narrow-leading-space, 0.25rem) + ${DesignToken.density.calc(0)})`),
453
+ narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-narrow-trailing-space, 0.25rem) + ${DesignToken.density.calc(0)})`),
454
+ defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-default-leading-space, 0.375rem) + ${DesignToken.density.calc(0)})`),
455
+ defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-default-trailing-space, 0.375rem) + ${DesignToken.density.calc(0)})`),
456
+ wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-wide-leading-space, 0.625rem) + ${DesignToken.density.calc(0)})`),
457
+ wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-wide-trailing-space, 0.625rem) + ${DesignToken.density.calc(0)})`)
458
+ },
459
+ /** Design tokens that control the `small` `size` variant. */
460
+ small: {
461
+ containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-small-container-height, 2.5rem) + ${DesignToken.density.calc(-1)})`),
462
+ outlineThickness: unsafeCSS("var(--m3e-icon-button-small-outline-thickness, 1px)"),
463
+ iconSize: unsafeCSS(`calc(var(--m3e-icon-button-small-icon-size, 1.5rem) + ${DesignToken.density.calc(-1)})`),
464
+ shapeRound: unsafeCSS(`var(--m3e-icon-button-small-shape-round, ${DesignToken.shape.corner.full})`),
465
+ shapeSquare: unsafeCSS(`var(--m3e-icon-button-small-shape-square, ${DesignToken.shape.corner.medium})`),
466
+ selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-small-selected-shape-round, ${DesignToken.shape.corner.medium})`),
467
+ selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-small-selected-shape-square, ${DesignToken.shape.corner.full})`),
468
+ shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-small-shape-pressed-morph, ${DesignToken.shape.corner.small})`),
469
+ narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-narrow-leading-space, 0.25rem) + ${DesignToken.density.calc(-1)})`),
470
+ narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-narrow-trailing-space, 0.25rem) + ${DesignToken.density.calc(-1)})`),
471
+ defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-default-leading-space, 0.5rem) + ${DesignToken.density.calc(-1)})`),
472
+ defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-default-trailing-space, 0.5rem) + ${DesignToken.density.calc(-1)})`),
473
+ wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-wide-leading-space, 0.875rem) + ${DesignToken.density.calc(-1)})`),
474
+ wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-wide-trailing-space, 0.875rem) + ${DesignToken.density.calc(-1)})`)
475
+ },
476
+ /** Design tokens that control the `medium` `size` variant. */
477
+ medium: {
478
+ containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-medium-container-height, 3.5rem) + ${DesignToken.density.calc(-2)})`),
479
+ outlineThickness: unsafeCSS("var(--m3e-icon-button-medium-outline-thickness, 1px)"),
480
+ iconSize: unsafeCSS(`calc(var(--m3e-icon-button-medium-icon-size, 1.5rem) + ${DesignToken.density.calc(-2)})`),
481
+ shapeRound: unsafeCSS(`var(--m3e-icon-button-medium-shape-round, ${DesignToken.shape.corner.full})`),
482
+ shapeSquare: unsafeCSS(`var(--m3e-icon-button-medium-shape-square, ${DesignToken.shape.corner.large})`),
483
+ selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-medium-selected-shape-round, ${DesignToken.shape.corner.large})`),
484
+ selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-medium-selected-shape-square, ${DesignToken.shape.corner.full})`),
485
+ shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-medium-shape-pressed-morph, ${DesignToken.shape.corner.medium})`),
486
+ narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-narrow-leading-space, 0.75rem) + ${DesignToken.density.calc(-2)})`),
487
+ narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-narrow-trailing-space, 0.75rem) + ${DesignToken.density.calc(-2)})`),
488
+ defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-default-leading-space, 1rem) + ${DesignToken.density.calc(-2)})`),
489
+ defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-default-trailing-space, 1rem) + ${DesignToken.density.calc(-2)})`),
490
+ wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-wide-leading-space, 1.5rem) + ${DesignToken.density.calc(-2)})`),
491
+ wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-wide-trailing-space, 1.5rem) + ${DesignToken.density.calc(-2)})`)
492
+ },
493
+ /** Design tokens that control the `large` `size` variant. */
494
+ large: {
495
+ containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-large-container-height, 6rem) + ${DesignToken.density.calc(-3)})`),
496
+ outlineThickness: unsafeCSS("var(--m3e-icon-button-large-outline-thickness, 0.125rem)"),
497
+ iconSize: unsafeCSS(`calc(var(--m3e-icon-button-large-icon-size, 2rem) + ${DesignToken.density.calc(-3)})`),
498
+ shapeRound: unsafeCSS(`var(--m3e-icon-button-large-shape-round, ${DesignToken.shape.corner.full})`),
499
+ shapeSquare: unsafeCSS(`var(--m3e-icon-button-large-shape-square, ${DesignToken.shape.corner.extraLarge})`),
500
+ selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-large-selected-shape-round, ${DesignToken.shape.corner.extraLarge})`),
501
+ selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-large-selected-shape-square, ${DesignToken.shape.corner.full})`),
502
+ shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-large-shape-pressed-morph, ${DesignToken.shape.corner.large})`),
503
+ narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-narrow-leading-space, 1rem) + ${DesignToken.density.calc(-3)})`),
504
+ narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-narrow-trailing-space, 1rem) + ${DesignToken.density.calc(-3)})`),
505
+ defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-default-leading-space, 2rem) + ${DesignToken.density.calc(-3)})`),
506
+ defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-default-trailing-space, 2rem) + ${DesignToken.density.calc(-3)})`),
507
+ wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-wide-leading-space, 3rem) + ${DesignToken.density.calc(-3)})`),
508
+ wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-wide-trailing-space, 3rem) + ${DesignToken.density.calc(-3)})`)
509
+ },
510
+ /** Design tokens that control the `extra-large` `size` variant. */
511
+ "extra-large": {
512
+ containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-container-height, 8.5rem) + ${DesignToken.density.calc(-3)})`),
513
+ outlineThickness: unsafeCSS("var(--m3e-icon-button-extra-large-outline-thickness, 0.1875rem)"),
514
+ iconSize: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-icon-size, 2.5rem) + ${DesignToken.density.calc(-3)})`),
515
+ shapeRound: unsafeCSS(`var(--m3e-icon-button-extra-large-shape-round, ${DesignToken.shape.corner.full})`),
516
+ shapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-large-shape-square, ${DesignToken.shape.corner.extraLarge})`),
517
+ selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-extra-large-selected-shape-round, ${DesignToken.shape.corner.extraLarge})`),
518
+ selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-large-selected-shape-square, ${DesignToken.shape.corner.full})`),
519
+ shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-extra-large-shape-pressed-morph, ${DesignToken.shape.corner.large})`),
520
+ narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-narrow-leading-space, 2rem) + ${DesignToken.density.calc(-3)})`),
521
+ narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-narrow-trailing-space, 2rem) + ${DesignToken.density.calc(-3)})`),
522
+ defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-default-leading-space, 3rem) + ${DesignToken.density.calc(-3)})`),
523
+ defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-default-trailing-space, 3rem) + ${DesignToken.density.calc(-3)})`),
524
+ wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-wide-leading-space, 4.5rem) + ${DesignToken.density.calc(-3)})`),
525
+ wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-wide-trailing-space, 4.5rem) + ${DesignToken.density.calc(-3)})`)
526
+ }
173
527
  };
174
528
 
175
529
  /** @private */
176
530
  function iconButtonStyle(size) {
177
- return css `
178
- :host([size="${unsafeCSS(size)}"]) .base {
179
- height: ${IconButtonSizeToken[size].containerHeight};
180
- }
181
- :host([size="${unsafeCSS(size)}"][width="default"]) .wrapper {
182
- padding-inline-start: ${IconButtonSizeToken[size].defaultLeadingSpace};
183
- padding-inline-end: ${IconButtonSizeToken[size].defaultTrailingSpace};
184
- }
185
- :host([size="${unsafeCSS(size)}"][width="narrow"]) .wrapper {
186
- padding-inline-start: ${IconButtonSizeToken[size].narrowLeadingSpace};
187
- padding-inline-end: ${IconButtonSizeToken[size].narrowTrailingSpace};
188
- }
189
- :host([size="${unsafeCSS(size)}"][width="wide"]) .wrapper {
190
- padding-inline-start: ${IconButtonSizeToken[size].wideLeadingSpace};
191
- padding-inline-end: ${IconButtonSizeToken[size].wideTrailingSpace};
192
- }
193
- :host([size="${unsafeCSS(size)}"]) .icon {
194
- font-size: ${IconButtonSizeToken[size].iconSize};
195
- }
196
- :host([size="${unsafeCSS(size)}"]) .base {
197
- outline-offset: calc(0px - ${IconButtonSizeToken[size].outlineThickness});
198
- outline-width: ${IconButtonSizeToken[size].outlineThickness};
199
- }
200
- :host(:not(.-connected)[size="${unsafeCSS(size)}"][shape="rounded"]:not(.-pressed)) .base {
201
- border-radius: var(--_button-shape, ${IconButtonSizeToken[size].shapeRound});
202
- }
203
- :host(:not(.-connected)[size="${unsafeCSS(size)}"][shape="square"]) .base {
204
- border-radius: ${IconButtonSizeToken[size].shapeSquare};
205
- }
206
- :host(:not(.-connected)[size="${unsafeCSS(size)}"][shape="rounded"][toggle][selected]:not(.-pressed)) .base {
207
- border-radius: ${IconButtonSizeToken[size].selectedShapeRound};
208
- }
209
- :host(:not(.-connected)[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not(.-pressed)) .base {
210
- border-radius: var(--_button-shape, ${IconButtonSizeToken[size].selectedShapeSquare});
211
- }
212
- :host(:not(.-connected)[size="${unsafeCSS(size)}"].-pressed) .base {
213
- border-radius: ${IconButtonSizeToken[size].shapePressedMorph};
214
- }
215
- :host(.-connected[size="${unsafeCSS(size)}"][shape="rounded"]) .base {
216
- border-start-start-radius: var(
217
- --_button-rounded-start-shape,
218
- var(--_button-shape, ${IconButtonSizeToken[size].shapeRound})
219
- );
220
- border-end-start-radius: var(
221
- --_button-rounded-start-shape,
222
- var(--_button-shape, ${IconButtonSizeToken[size].shapeRound})
223
- );
224
- border-start-end-radius: var(
225
- --_button-rounded-end-shape,
226
- var(--_button-shape, ${IconButtonSizeToken[size].shapeRound})
227
- );
228
- border-end-end-radius: var(
229
- --_button-rounded-end-shape,
230
- var(--_button-shape, ${IconButtonSizeToken[size].shapeRound})
231
- );
232
- }
233
- :host(.-connected[size="${unsafeCSS(size)}"][shape="square"]) .base {
234
- border-start-start-radius: var(--_button-square-start-shape, ${IconButtonSizeToken[size].shapeSquare});
235
- border-end-start-radius: var(--_button-square-start-shape, ${IconButtonSizeToken[size].shapeSquare});
236
- border-start-end-radius: var(--_button-square-end-shape, ${IconButtonSizeToken[size].shapeSquare});
237
- border-end-end-radius: var(--_button-square-end-shape, ${IconButtonSizeToken[size].shapeSquare});
238
- }
239
- :host(.-connected[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not(.-pressed)) .base {
240
- border-radius: var(--_button-shape, ${IconButtonSizeToken[size].selectedShapeSquare});
241
- }
242
- :host(.-connected[size="${unsafeCSS(size)}"].-pressed) .base {
243
- border-start-start-radius: var(
244
- --_button-start-shape-pressed-morph,
245
- ${IconButtonSizeToken[size].shapePressedMorph}
246
- );
247
- border-end-start-radius: var(--_button-start-shape-pressed-morph, ${IconButtonSizeToken[size].shapePressedMorph});
248
- border-start-end-radius: var(--_button-end-shape-pressed-morph, ${IconButtonSizeToken[size].shapePressedMorph});
249
- border-end-end-radius: var(--_button-end-shape-pressed-morph, ${IconButtonSizeToken[size].shapePressedMorph});
250
- }
251
- `;
531
+ return css`:host([size="${unsafeCSS(size)}"]) .base { height: ${IconButtonSizeToken[size].containerHeight}; } :host([size="${unsafeCSS(size)}"][width="default"]) .wrapper { padding-inline-start: ${IconButtonSizeToken[size].defaultLeadingSpace}; padding-inline-end: ${IconButtonSizeToken[size].defaultTrailingSpace}; } :host([size="${unsafeCSS(size)}"][width="narrow"]) .wrapper { padding-inline-start: ${IconButtonSizeToken[size].narrowLeadingSpace}; padding-inline-end: ${IconButtonSizeToken[size].narrowTrailingSpace}; } :host([size="${unsafeCSS(size)}"][width="wide"]) .wrapper { padding-inline-start: ${IconButtonSizeToken[size].wideLeadingSpace}; padding-inline-end: ${IconButtonSizeToken[size].wideTrailingSpace}; } :host([size="${unsafeCSS(size)}"]) .icon { font-size: ${IconButtonSizeToken[size].iconSize}; } :host([size="${unsafeCSS(size)}"]) .base { outline-offset: calc(0px - ${IconButtonSizeToken[size].outlineThickness}); outline-width: ${IconButtonSizeToken[size].outlineThickness}; } :host(:not(.-connected)[size="${unsafeCSS(size)}"][shape="rounded"]:not(.-pressed)) .base { border-radius: var(--_button-shape, ${IconButtonSizeToken[size].shapeRound}); } :host(:not(.-connected)[size="${unsafeCSS(size)}"][shape="square"]) .base { border-radius: ${IconButtonSizeToken[size].shapeSquare}; } :host(:not(.-connected)[size="${unsafeCSS(size)}"][shape="rounded"][toggle][selected]:not(.-pressed)) .base { border-radius: ${IconButtonSizeToken[size].selectedShapeRound}; } :host(:not(.-connected)[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not(.-pressed)) .base { border-radius: var(--_button-shape, ${IconButtonSizeToken[size].selectedShapeSquare}); } :host(:not(.-connected)[size="${unsafeCSS(size)}"].-pressed) .base { border-radius: ${IconButtonSizeToken[size].shapePressedMorph}; } :host(.-connected[size="${unsafeCSS(size)}"][shape="rounded"]) .base { border-start-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${IconButtonSizeToken[size].shapeRound}) ); border-end-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${IconButtonSizeToken[size].shapeRound}) ); border-start-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${IconButtonSizeToken[size].shapeRound}) ); border-end-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${IconButtonSizeToken[size].shapeRound}) ); } :host(.-connected[size="${unsafeCSS(size)}"][shape="square"]) .base { border-start-start-radius: var(--_button-square-start-shape, ${IconButtonSizeToken[size].shapeSquare}); border-end-start-radius: var(--_button-square-start-shape, ${IconButtonSizeToken[size].shapeSquare}); border-start-end-radius: var(--_button-square-end-shape, ${IconButtonSizeToken[size].shapeSquare}); border-end-end-radius: var(--_button-square-end-shape, ${IconButtonSizeToken[size].shapeSquare}); } :host(.-connected[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not(.-pressed)) .base { border-radius: var(--_button-shape, ${IconButtonSizeToken[size].selectedShapeSquare}); } :host(.-connected[size="${unsafeCSS(size)}"].-pressed) .base { border-start-start-radius: var( --_button-start-shape-pressed-morph, ${IconButtonSizeToken[size].shapePressedMorph} ); border-end-start-radius: var(--_button-start-shape-pressed-morph, ${IconButtonSizeToken[size].shapePressedMorph}); border-start-end-radius: var(--_button-end-shape-pressed-morph, ${IconButtonSizeToken[size].shapePressedMorph}); border-end-end-radius: var(--_button-end-shape-pressed-morph, ${IconButtonSizeToken[size].shapePressedMorph}); }`;
252
532
  }
253
533
  /**
254
534
  * Size variant styles for `M3eIconButtonElement`.
255
535
  * @internal
256
536
  */
257
- const IconButtonSizeStyle = [
258
- iconButtonStyle("extra-small"),
259
- iconButtonStyle("small"),
260
- iconButtonStyle("medium"),
261
- iconButtonStyle("large"),
262
- iconButtonStyle("extra-large"),
263
- ];
537
+ const IconButtonSizeStyle = [iconButtonStyle("extra-small"), iconButtonStyle("small"), iconButtonStyle("medium"), iconButtonStyle("large"), iconButtonStyle("extra-large")];
264
538
 
265
539
  /**
266
540
  * Baseline styles for `M3eIconButtonElement`.
267
541
  * @internal
268
542
  */
269
- const IconButtonStyle = css `
270
- :host {
271
- display: inline-block;
272
- outline: none;
273
- user-select: none;
274
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
275
- }
276
- .base {
277
- box-sizing: border-box;
278
- vertical-align: middle;
279
- display: inline-flex;
280
- align-items: center;
281
- justify-content: center;
282
- position: relative;
283
- width: 100%;
284
- transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};
285
- }
286
- .touch {
287
- position: absolute;
288
- aspect-ratio: 1 / 1;
289
- height: 3rem;
290
- left: auto;
291
- right: auto;
292
- }
293
- :host(.-pressed) .base,
294
- :host(.-resting) .base {
295
- transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},
296
- border-radius ${DesignToken.motion.spring.fastEffects}`)};
297
- }
298
- .wrapper {
299
- width: 100%;
300
- overflow: hidden;
301
- display: inline-flex;
302
- align-items: center;
303
- justify-content: center;
304
- transition: ${unsafeCSS(`padding-inline ${DesignToken.motion.spring.fastEffects}`)};
305
- }
306
- .icon {
307
- transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};
308
-
309
- --m3e-icon-size: 1em;
310
- }
311
- :host(:not(:disabled):not([disabled-interactive])) {
312
- cursor: pointer;
313
- }
314
- :host([disabled-interactive]) {
315
- cursor: not-allowed;
316
- }
317
- ::slotted(*) {
318
- font-size: inherit !important;
319
- flex: none;
320
- transform: var(--_icon-button-icon-transform);
321
- transform-origin: center center;
322
- transition: ${unsafeCSS(`transform var(--_icon-button-icon-transform-transition, ${DesignToken.motion.spring.fastEffects})`)};
323
- }
324
- ::slotted(svg) {
325
- width: 1em;
326
- height: 1em;
327
- }
328
- :host([toggle]:not([selected])) .base.with-selected-icon slot[name="selected"],
329
- :host([toggle][selected]) .base.with-selected-icon slot:not([name]) {
330
- display: none;
331
- }
332
- a {
333
- all: unset;
334
- display: block;
335
- position: absolute;
336
- top: 0px;
337
- left: 0px;
338
- right: 0px;
339
- bottom: 0px;
340
- z-index: 1;
341
- }
342
- :host(.-grouped.-connected) {
343
- flex: 1 1 auto;
344
- }
345
- :host(.-grouped:not(.-connected):not(.-adjacent-pressed):not(.-pressed)) {
346
- flex-shrink: 0;
347
- flex-grow: 0;
348
- }
349
- :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) {
350
- flex-shrink: 1;
351
- min-width: 0;
352
- }
353
- :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) .label {
354
- text-overflow: clip;
355
- }
356
- :host(.-grouped:not(.-connected).-pressed:not([disabled-interactive]):not(:disabled)) {
357
- flex-shrink: 0;
358
- flex-basis: calc(
359
- var(--_button-width) + calc(var(--_button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15))
360
- );
361
- }
362
- @media (forced-colors: active) {
363
- .base,
364
- .icon {
365
- transition: none;
366
- }
367
- :host(.-pressed) .base,
368
- :host(.-resting) .base {
369
- transition: border-radius ${DesignToken.motion.spring.fastEffects};
370
- }
371
- :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .base {
372
- background-color: ButtonFace;
373
- outline-color: ButtonText;
374
- }
375
- :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .label,
376
- :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .icon {
377
- color: ButtonText;
378
- }
379
- :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .base {
380
- background-color: ButtonFace;
381
- outline-color: ButtonText;
382
- }
383
- :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .label,
384
- :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .icon {
385
- color: ButtonText;
386
- }
387
- :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .base {
388
- background-color: ButtonText;
389
- outline: none;
390
- }
391
- :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .label,
392
- :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .icon {
393
- forced-color-adjust: none;
394
- color: ButtonFace;
395
- background-color: ButtonText;
396
- }
397
- :host([variant]:disabled) .base,
398
- :host([variant][disabled-interactive]) .base {
399
- outline-color: GrayText;
400
- background-color: unset;
401
- }
402
- :host([variant]:disabled) .label,
403
- :host([variant][disabled-interactive]) .label,
404
- :host([variant]:disabled) .icon,
405
- :host([variant][disabled-interactive]) .icon {
406
- color: GrayText;
407
- }
408
- .base {
409
- outline-style: solid;
410
- }
411
- :host([size="extra-small"]) .base {
412
- outline-offset: calc(0px - var(--m3e-icon-button-extra-small-outline-thickness, 1px));
413
- outline-width: var(--m3e-icon-button-extra-small-outline-thickness, 1px);
414
- }
415
- :host([size="small"]) .base {
416
- outline-offset: calc(0px - var(--m3e-icon-button-small-outline-thickness, 1px));
417
- outline-width: var(--m3e-icon-button-small-outline-thickness, 1px);
418
- }
419
- :host([size="medium"]) .base {
420
- outline-offset: calc(0px - var(--m3e-icon-button-medium-outline-thickness, 1px));
421
- outline-width: var(--m3e-icon-button-medium-outline-thickness, 1px);
422
- }
423
- :host([size="large"]) .base {
424
- outline-offset: calc(0px - var(--m3e-icon-button-large-outline-thickness, 0.125rem));
425
- outline-width: var(--m3e-icon-button-large-outline-thickness, 0.125rem);
426
- }
427
- :host([size="extra-large"]) .base {
428
- outline-offset: calc(0px - var(--m3e-icon-button-extra-large-outline-thickness, 0.1875rem));
429
- outline-width: var(--m3e-icon-button-extra-large-outline-thickness, 0.1875rem);
430
- }
431
- }
432
- @media (prefers-reduced-motion) {
433
- :host(.-pressed) .base,
434
- :host(.-resting) .base,
435
- .base,
436
- .wrapper,
437
- .icon {
438
- transition: none;
439
- }
440
- }
441
- `;
543
+ const IconButtonStyle = css`:host { display: inline-block; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } .touch { position: absolute; aspect-ratio: 1 / 1; height: 3rem; left: auto; right: auto; } :host(.-pressed) .base, :host(.-resting) .base { transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},
544
+ border-radius ${DesignToken.motion.spring.fastEffects}`)}; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; transition: ${unsafeCSS(`padding-inline ${DesignToken.motion.spring.fastEffects}`)}; } .icon { transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; --m3e-icon-size: 1em; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } ::slotted(*) { font-size: inherit !important; flex: none; transform: var(--_icon-button-icon-transform); transform-origin: center center; transition: ${unsafeCSS(`transform var(--_icon-button-icon-transform-transition, ${DesignToken.motion.spring.fastEffects})`)}; } ::slotted(svg) { width: 1em; height: 1em; } :host([toggle]:not([selected])) .base.with-selected-icon slot[name="selected"], :host([toggle][selected]) .base.with-selected-icon slot:not([name]) { display: none; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } :host(.-grouped.-connected) { flex: 1 1 auto; } :host(.-grouped:not(.-connected):not(.-adjacent-pressed):not(.-pressed)) { flex-shrink: 0; flex-grow: 0; } :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) { flex-shrink: 1; min-width: 0; } :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) .label { text-overflow: clip; } :host(.-grouped:not(.-connected).-pressed:not([disabled-interactive]):not(:disabled)) { flex-shrink: 0; flex-basis: calc( var(--_button-width) + calc(var(--_button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) ); } @media (forced-colors: active) { .base, .icon { transition: none; } :host(.-pressed) .base, :host(.-resting) .base { transition: border-radius ${DesignToken.motion.spring.fastEffects}; } :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .label, :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .icon { color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .icon { color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .base { background-color: ButtonText; outline: none; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .icon { forced-color-adjust: none; color: ButtonFace; background-color: ButtonText; } :host([variant]:disabled) .base, :host([variant][disabled-interactive]) .base { outline-color: GrayText; background-color: unset; } :host([variant]:disabled) .label, :host([variant][disabled-interactive]) .label, :host([variant]:disabled) .icon, :host([variant][disabled-interactive]) .icon { color: GrayText; } .base { outline-style: solid; } :host([size="extra-small"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-extra-small-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-extra-small-outline-thickness, 1px); } :host([size="small"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-small-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-small-outline-thickness, 1px); } :host([size="medium"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-medium-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-medium-outline-thickness, 1px); } :host([size="large"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-large-outline-thickness, 0.125rem)); outline-width: var(--m3e-icon-button-large-outline-thickness, 0.125rem); } :host([size="extra-large"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-extra-large-outline-thickness, 0.1875rem)); outline-width: var(--m3e-icon-button-extra-large-outline-thickness, 0.1875rem); } } @media (prefers-reduced-motion) { :host(.-pressed) .base, :host(.-resting) .base, .base, .wrapper, .icon { transition: none; } }`;
442
545
 
443
546
  /**
444
547
  * Component design tokens that control the appearance variants of `M3eIconButtonElement`.
445
548
  * @internal
446
549
  */
447
550
  const IconButtonVariantToken = {
448
- /** Design tokens that control the `elevated` variant. */
449
- elevated: {
450
- /** Default icon color. */
451
- iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-icon-color, ${DesignToken.color.primary})`),
452
- /** Default container background color. */
453
- containerColor: unsafeCSS(`var(--m3e-elevated-icon-button-container-color, ${DesignToken.color.surfaceContainerLow})`),
454
- /** Resting elevation. */
455
- containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-container-elevation, ${DesignToken.elevation.level1})`),
456
- /** Unselected icon color. */
457
- unselectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-unselected-icon-color, ${DesignToken.color.primary})`),
458
- /** Unselected container background color. */
459
- unselectedContainerColor: unsafeCSS(`var(--m3e-elevated-icon-button-unselected-container-color, ${DesignToken.color.surfaceContainerLow})`),
460
- /** Selected icon color. */
461
- selectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-selected-icon-color, ${DesignToken.color.onPrimary})`),
462
- /** Selected container background color. */
463
- selectedContainerColor: unsafeCSS(`var(--m3e-elevated-icon-button-selected-container-color, ${DesignToken.color.primary})`),
464
- /** Design tokens that control disabled state. */
465
- disabled: {
466
- /** Container background color when disabled. */
467
- containerColor: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-container-color, ${DesignToken.color.onSurface})`),
468
- /** Opacity of container when disabled. */
469
- containerOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-container-opacity, 10%)`),
470
- /** Icon color when disabled. */
471
- iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-icon-color, ${DesignToken.color.onSurface})`),
472
- /** Icon opacity when disabled. */
473
- iconOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-icon-opacity, 38%)`),
474
- /** Elevation when disabled. */
475
- containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-container-elevation, ${DesignToken.elevation.level0})`),
476
- },
477
- /** Design tokens that control hover state. */
478
- hover: {
479
- /** Icon color on hover. */
480
- iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-icon-color, ${DesignToken.color.primary})`),
481
- /** State layer color on hover. */
482
- stateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-state-layer-color, ${DesignToken.color.primary})`),
483
- /** State layer opacity on hover. */
484
- stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
485
- /** Elevation on hover. */
486
- containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-hover-container-elevation, ${DesignToken.elevation.level2})`),
487
- /** Unselected icon color on hover. */
488
- unselectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-unselected-icon-color, ${DesignToken.color.primary})`),
489
- /** Unselected state layer color on hover. */
490
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-unselected-state-layer-color, ${DesignToken.color.primary})`),
491
- /** Selected icon color on hover. */
492
- selectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-selected-icon-color, ${DesignToken.color.onPrimary})`),
493
- /** Selected ripple color on hover. */
494
- selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-selected-state-layer-color, ${DesignToken.color.onPrimary})`),
495
- },
496
- /** Design tokens that control focus state. */
497
- focus: {
498
- /** Icon color on focus. */
499
- iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-icon-color, ${DesignToken.color.primary})`),
500
- /** State layer color on focus. */
501
- stateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-state-layer-color, ${DesignToken.color.primary})`),
502
- /**State layer opacity on focus. */
503
- stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
504
- /** Elevation on focus. */
505
- containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-focus-container-elevation, ${DesignToken.elevation.level1})`),
506
- /** Unselected icon color on focus. */
507
- unselectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-unselected-icon-color, ${DesignToken.color.primary})`),
508
- /** Unselected ripple color on focus. */
509
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-unselected-state-layer-color, ${DesignToken.color.primary})`),
510
- /** Selected icon color on focus. */
511
- selectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-selected-icon-color, ${DesignToken.color.onPrimary})`),
512
- /** Selected ripple color on focus. */
513
- selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-selected-state-layer-color, ${DesignToken.color.onPrimary})`),
514
- },
515
- /** Design tokens that control pressed state. */
516
- pressed: {
517
- /** Icon color on pressed. */
518
- iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-icon-color, ${DesignToken.color.primary})`),
519
- /** State layer color on pressed. */
520
- stateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-state-layer-color, ${DesignToken.color.primary})`),
521
- /** State layer opacity on pressed. */
522
- stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
523
- /** Elevation on pressed. */
524
- containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-container-elevation, ${DesignToken.elevation.level1})`),
525
- /** Unselected icon color on pressed. */
526
- unselectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-unselected-icon-color, ${DesignToken.color.primary})`),
527
- /** Unselected ripple color on pressed. */
528
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-unselected-state-layer-color, ${DesignToken.color.primary})`),
529
- /** Selected icon color on pressed. */
530
- selectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-selected-icon-color, ${DesignToken.color.onPrimary})`),
531
- /** Selected ripple color on pressed. */
532
- selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-selected-state-layer-color, ${DesignToken.color.onPrimary})`),
533
- },
551
+ /** Design tokens that control the `elevated` variant. */
552
+ elevated: {
553
+ /** Default icon color. */
554
+ iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-icon-color, ${DesignToken.color.primary})`),
555
+ /** Default container background color. */
556
+ containerColor: unsafeCSS(`var(--m3e-elevated-icon-button-container-color, ${DesignToken.color.surfaceContainerLow})`),
557
+ /** Resting elevation. */
558
+ containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-container-elevation, ${DesignToken.elevation.level1})`),
559
+ /** Unselected icon color. */
560
+ unselectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-unselected-icon-color, ${DesignToken.color.primary})`),
561
+ /** Unselected container background color. */
562
+ unselectedContainerColor: unsafeCSS(`var(--m3e-elevated-icon-button-unselected-container-color, ${DesignToken.color.surfaceContainerLow})`),
563
+ /** Selected icon color. */
564
+ selectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-selected-icon-color, ${DesignToken.color.onPrimary})`),
565
+ /** Selected container background color. */
566
+ selectedContainerColor: unsafeCSS(`var(--m3e-elevated-icon-button-selected-container-color, ${DesignToken.color.primary})`),
567
+ /** Design tokens that control disabled state. */
568
+ disabled: {
569
+ /** Container background color when disabled. */
570
+ containerColor: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-container-color, ${DesignToken.color.onSurface})`),
571
+ /** Opacity of container when disabled. */
572
+ containerOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-container-opacity, 10%)`),
573
+ /** Icon color when disabled. */
574
+ iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-icon-color, ${DesignToken.color.onSurface})`),
575
+ /** Icon opacity when disabled. */
576
+ iconOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-icon-opacity, 38%)`),
577
+ /** Elevation when disabled. */
578
+ containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-container-elevation, ${DesignToken.elevation.level0})`)
534
579
  },
535
- /** Design tokens that control the `outlined` variant. */
536
- outlined: {
537
- /** Default icon color. */
538
- iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-icon-color, ${DesignToken.color.onSurfaceVariant})`),
539
- /** Default outline color. */
540
- outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-outline-color, ${DesignToken.color.outlineVariant})`),
541
- /** Unselected icon color. */
542
- unselectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
543
- /** Selected icon color. */
544
- selectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-selected-icon-color, ${DesignToken.color.inverseOnSurface})`),
545
- /** Selected container background color. */
546
- selectedContainerColor: unsafeCSS(`var(--m3e-outlined-icon-button-selected-container-color, ${DesignToken.color.inverseSurface})`),
547
- /** Design tokens that control disabled state. */
548
- disabled: {
549
- /** Container background color when disabled. */
550
- containerColor: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-container-color, ${DesignToken.color.onSurface})`),
551
- /** Opacity of container when disabled. */
552
- containerOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-container-opacity, 10%)`),
553
- /** Icon color when disabled. */
554
- iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-icon-color, ${DesignToken.color.onSurface})`),
555
- /** Icon opacity when disabled. */
556
- iconOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-icon-opacity, 38%)`),
557
- /** Outline color when disabled. */
558
- outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-outline-color, ${DesignToken.color.outlineVariant})`),
559
- },
560
- /** Design tokens that control hover state. */
561
- hover: {
562
- /** Icon color on hover. */
563
- iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-icon-color, ${DesignToken.color.onSurfaceVariant})`),
564
- /** Outline color on hover. */
565
- outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-outline-color, ${DesignToken.color.outlineVariant})`),
566
- /** State layer color on hover. */
567
- stateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
568
- /** State layer opacity on hover. */
569
- stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
570
- /** Unselected icon color on hover. */
571
- unselectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
572
- /** Unselected state layer color on hover. */
573
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
574
- /** Selected icon color on hover. */
575
- selectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-selected-icon-color, ${DesignToken.color.inverseOnSurface})`),
576
- /** Selected state layer color on hover. */
577
- selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-selected-state-layer-color, ${DesignToken.color.inverseOnSurface})`),
578
- },
579
- /** Design tokens that control focus state. */
580
- focus: {
581
- /** Icon color on focus. */
582
- iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-icon-color, ${DesignToken.color.onSurfaceVariant})`),
583
- /** Outline color on focus. */
584
- outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-outline-color, ${DesignToken.color.outlineVariant})`),
585
- /** State layer color on focus. */
586
- stateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
587
- /**State layer opacity on focus. */
588
- stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
589
- /** Unselected icon color on focus. */
590
- unselectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
591
- /** Unselected state layer color on focus. */
592
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
593
- /** Selected icon color on focus. */
594
- selectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-selected-icon-color, ${DesignToken.color.inverseOnSurface})`),
595
- /** Selected state layer color on focus. */
596
- selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-selected-state-layer-color, ${DesignToken.color.inverseOnSurface})`),
597
- },
598
- /** Design tokens that control pressed state. */
599
- pressed: {
600
- /** Icon color on pressed. */
601
- iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-icon-color, ${DesignToken.color.onSurfaceVariant})`),
602
- /** Outline color on pressed. */
603
- outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-outline-color, ${DesignToken.color.outlineVariant})`),
604
- /** State layer color on pressed. */
605
- stateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
606
- /** State layer opacity on pressed. */
607
- stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
608
- /** Unselected icon color on pressed. */
609
- unselectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
610
- /** Unselected state layer color on pressed. */
611
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
612
- /** Selected icon color on pressed. */
613
- selectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-selected-icon-color, ${DesignToken.color.inverseOnSurface})`),
614
- /** Selected state layer color on pressed. */
615
- selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-selected-state-layer-color, ${DesignToken.color.inverseOnSurface})`),
616
- },
580
+ /** Design tokens that control hover state. */
581
+ hover: {
582
+ /** Icon color on hover. */
583
+ iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-icon-color, ${DesignToken.color.primary})`),
584
+ /** State layer color on hover. */
585
+ stateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-state-layer-color, ${DesignToken.color.primary})`),
586
+ /** State layer opacity on hover. */
587
+ stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
588
+ /** Elevation on hover. */
589
+ containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-hover-container-elevation, ${DesignToken.elevation.level2})`),
590
+ /** Unselected icon color on hover. */
591
+ unselectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-unselected-icon-color, ${DesignToken.color.primary})`),
592
+ /** Unselected state layer color on hover. */
593
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-unselected-state-layer-color, ${DesignToken.color.primary})`),
594
+ /** Selected icon color on hover. */
595
+ selectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-selected-icon-color, ${DesignToken.color.onPrimary})`),
596
+ /** Selected ripple color on hover. */
597
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-selected-state-layer-color, ${DesignToken.color.onPrimary})`)
617
598
  },
618
- /** Design tokens that control the `filled` variant. */
619
- filled: {
620
- /** Default icon color. */
621
- iconColor: unsafeCSS(`var(--m3e-filled-icon-button-icon-color, ${DesignToken.color.onPrimary})`),
622
- /** Default container background color. */
623
- containerColor: unsafeCSS(`var(--m3e-filled-icon-button-container-color, ${DesignToken.color.primary})`),
624
- /** Unselected icon color. */
625
- unselectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
626
- /** Unselected container background color. */
627
- unselectedContainerColor: unsafeCSS(`var(--m3e-filled-icon-button-unselected-container-color, ${DesignToken.color.surfaceContainer})`),
628
- /** Selected icon color. */
629
- selectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-selected-icon-color, ${DesignToken.color.onPrimary})`),
630
- /** Selected container background color. */
631
- selectedContainerColor: unsafeCSS(`var(--m3e-filled-icon-button-selected-container-color, ${DesignToken.color.primary})`),
632
- /** Design tokens that control disabled state. */
633
- disabled: {
634
- /** Container background color when disabled. */
635
- containerColor: unsafeCSS(`var(--m3e-filled-icon-button-disabled-container-color, ${DesignToken.color.onSurface})`),
636
- /** Opacity of container when disabled. */
637
- containerOpacity: unsafeCSS(`var(--m3e-filled-icon-button-disabled-container-opacity, 10%)`),
638
- /** Icon color when disabled. */
639
- iconColor: unsafeCSS(`var(--m3e-filled-icon-button-disabled-icon-color, ${DesignToken.color.onSurface})`),
640
- /** Icon opacity when disabled. */
641
- iconOpacity: unsafeCSS(`var(--m3e-filled-icon-button-disabled-icon-opacity, 38%)`),
642
- },
643
- /** Design tokens that control hover state. */
644
- hover: {
645
- /** Icon color on hover. */
646
- iconColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-icon-color, ${DesignToken.color.onPrimary})`),
647
- /** State layer color on hover. */
648
- stateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-state-layer-color, ${DesignToken.color.onPrimary})`),
649
- /** State layer opacity on hover. */
650
- stateLayerOpacity: unsafeCSS(`var(--m3e-filled-icon-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
651
- /** Unselected icon color on hover. */
652
- unselectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
653
- /** Unselected state layer color on hover. */
654
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
655
- /** Selected icon color on hover. */
656
- selectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-selected-icon-color, ${DesignToken.color.onPrimary})`),
657
- /** Selected state layer color on hover. */
658
- selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-selected-state-layer-color, ${DesignToken.color.onPrimary})`),
659
- },
660
- /** Design tokens that control focus state. */
661
- focus: {
662
- /** Icon color on focus. */
663
- iconColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-icon-color, ${DesignToken.color.onPrimary})`),
664
- /** State layer color on focus. */
665
- stateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-state-layer-color, ${DesignToken.color.onPrimary})`),
666
- /**State layer opacity on focus. */
667
- stateLayerOpacity: unsafeCSS(`var(--m3e-filled-icon-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
668
- /** Unselected icon color on focus. */
669
- unselectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
670
- /** Unselected state layer color on focus. */
671
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
672
- /** Selected icon color on focus. */
673
- selectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-selected-icon-color, ${DesignToken.color.onPrimary})`),
674
- /** Selected state layer color on focus. */
675
- selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-selected-state-layer-color, ${DesignToken.color.onPrimary})`),
676
- },
677
- /** Design tokens that control pressed state. */
678
- pressed: {
679
- /** Icon color on pressed. */
680
- iconColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-icon-color, ${DesignToken.color.onPrimary})`),
681
- /** State layer color on pressed. */
682
- stateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-state-layer-color, ${DesignToken.color.onPrimary})`),
683
- /** State layer opacity on pressed. */
684
- stateLayerOpacity: unsafeCSS(`var(--m3e-filled-icon-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
685
- /** Unselected icon color on pressed. */
686
- unselectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
687
- /** Unselected state layer color on pressed. */
688
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
689
- /** Selected icon color on pressed. */
690
- selectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-selected-icon-color, ${DesignToken.color.onPrimary})`),
691
- /** Selected state layer color on pressed. */
692
- selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-selected-state-layer-color, ${DesignToken.color.onPrimary})`),
693
- },
599
+ /** Design tokens that control focus state. */
600
+ focus: {
601
+ /** Icon color on focus. */
602
+ iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-icon-color, ${DesignToken.color.primary})`),
603
+ /** State layer color on focus. */
604
+ stateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-state-layer-color, ${DesignToken.color.primary})`),
605
+ /**State layer opacity on focus. */
606
+ stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
607
+ /** Elevation on focus. */
608
+ containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-focus-container-elevation, ${DesignToken.elevation.level1})`),
609
+ /** Unselected icon color on focus. */
610
+ unselectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-unselected-icon-color, ${DesignToken.color.primary})`),
611
+ /** Unselected ripple color on focus. */
612
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-unselected-state-layer-color, ${DesignToken.color.primary})`),
613
+ /** Selected icon color on focus. */
614
+ selectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-selected-icon-color, ${DesignToken.color.onPrimary})`),
615
+ /** Selected ripple color on focus. */
616
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-selected-state-layer-color, ${DesignToken.color.onPrimary})`)
694
617
  },
695
- /** Design tokens that control the `tonal` variant. */
696
- tonal: {
697
- /** Default icon color. */
698
- iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-icon-color, ${DesignToken.color.onSecondaryContainer})`),
699
- /** Default container background color. */
700
- containerColor: unsafeCSS(`var(--m3e-tonal-icon-button-container-color, ${DesignToken.color.secondaryContainer})`),
701
- /** Unselected icon color. */
702
- unselectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-unselected-icon-color, ${DesignToken.color.onSecondaryContainer})`),
703
- /** Unselected container background color. */
704
- unselectedContainerColor: unsafeCSS(`var(--m3e-tonal-icon-button-unselected-container-color, ${DesignToken.color.secondaryContainer})`),
705
- /** Selected icon color. */
706
- selectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-selected-icon-color, ${DesignToken.color.onSecondary})`),
707
- /** Selected container background color. */
708
- selectedContainerColor: unsafeCSS(`var(--m3e-tonal-icon-button-selected-container-color, ${DesignToken.color.secondary})`),
709
- /** Design tokens that control disabled state. */
710
- disabled: {
711
- /** Container background color when disabled. */
712
- containerColor: unsafeCSS(`var(--m3e-tonal-icon-button-disabled-container-color, ${DesignToken.color.onSurface})`),
713
- /** Opacity of container when disabled. */
714
- containerOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-disabled-container-opacity, 10%)`),
715
- /** Icon color when disabled. */
716
- iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-disabled-icon-color, ${DesignToken.color.onSurface})`),
717
- /** Icon opacity when disabled. */
718
- iconOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-disabled-icon-opacity, 38%)`),
719
- },
720
- /** Design tokens that control hover state. */
721
- hover: {
722
- /** Icon color on hover. */
723
- iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-icon-color, ${DesignToken.color.onSecondaryContainer})`),
724
- /** State layer color on hover. */
725
- stateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
726
- /** State layer opacity on hover. */
727
- stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
728
- /** Unselected icon color on hover. */
729
- unselectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-unselected-icon-color, ${DesignToken.color.onSecondaryContainer})`),
730
- /** Unselected state layer color on hover. */
731
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-unselected-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
732
- /** Selected icon color on hover. */
733
- selectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-selected-icon-color, ${DesignToken.color.onSecondary})`),
734
- /** Selected state layer color on hover. */
735
- selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-selected-state-layer-color, ${DesignToken.color.onSecondary})`),
736
- },
737
- /** Design tokens that control focus state. */
738
- focus: {
739
- /** Icon color on focus. */
740
- iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-icon-color, ${DesignToken.color.onSecondaryContainer})`),
741
- /** State layer color on focus. */
742
- stateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
743
- /**State layer opacity on focus. */
744
- stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
745
- /** Unselected icon color on focus. */
746
- unselectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-unselected-icon-color, ${DesignToken.color.onSecondaryContainer})`),
747
- /** Unselected state layer color on focus. */
748
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-unselected-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
749
- /** Selected icon color on focus. */
750
- selectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-selected-icon-color, ${DesignToken.color.onSecondary})`),
751
- /** Selected state layer color on focus. */
752
- selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-selected-state-layer-color, ${DesignToken.color.onSecondary})`),
753
- },
754
- /** Design tokens that control pressed state. */
755
- pressed: {
756
- /** Icon color on pressed. */
757
- iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-icon-color, ${DesignToken.color.onSecondaryContainer})`),
758
- /** State layer color on pressed. */
759
- stateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
760
- /** State layer opacity on pressed. */
761
- stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
762
- /** Unselected icon color on pressed. */
763
- unselectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-unselected-icon-color, ${DesignToken.color.onSecondaryContainer})`),
764
- /** Unselected state layer color on pressed. */
765
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-unselected-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
766
- /** Selected icon color on pressed. */
767
- selectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-selected-icon-color, ${DesignToken.color.onSecondary})`),
768
- /** Selected state layer color on pressed. */
769
- selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-selected-state-layer-color, ${DesignToken.color.onSecondary})`),
770
- },
618
+ /** Design tokens that control pressed state. */
619
+ pressed: {
620
+ /** Icon color on pressed. */
621
+ iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-icon-color, ${DesignToken.color.primary})`),
622
+ /** State layer color on pressed. */
623
+ stateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-state-layer-color, ${DesignToken.color.primary})`),
624
+ /** State layer opacity on pressed. */
625
+ stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
626
+ /** Elevation on pressed. */
627
+ containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-container-elevation, ${DesignToken.elevation.level1})`),
628
+ /** Unselected icon color on pressed. */
629
+ unselectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-unselected-icon-color, ${DesignToken.color.primary})`),
630
+ /** Unselected ripple color on pressed. */
631
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-unselected-state-layer-color, ${DesignToken.color.primary})`),
632
+ /** Selected icon color on pressed. */
633
+ selectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-selected-icon-color, ${DesignToken.color.onPrimary})`),
634
+ /** Selected ripple color on pressed. */
635
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-selected-state-layer-color, ${DesignToken.color.onPrimary})`)
636
+ }
637
+ },
638
+ /** Design tokens that control the `outlined` variant. */
639
+ outlined: {
640
+ /** Default icon color. */
641
+ iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-icon-color, ${DesignToken.color.onSurfaceVariant})`),
642
+ /** Default outline color. */
643
+ outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-outline-color, ${DesignToken.color.outlineVariant})`),
644
+ /** Unselected icon color. */
645
+ unselectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
646
+ /** Selected icon color. */
647
+ selectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-selected-icon-color, ${DesignToken.color.inverseOnSurface})`),
648
+ /** Selected container background color. */
649
+ selectedContainerColor: unsafeCSS(`var(--m3e-outlined-icon-button-selected-container-color, ${DesignToken.color.inverseSurface})`),
650
+ /** Design tokens that control disabled state. */
651
+ disabled: {
652
+ /** Container background color when disabled. */
653
+ containerColor: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-container-color, ${DesignToken.color.onSurface})`),
654
+ /** Opacity of container when disabled. */
655
+ containerOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-container-opacity, 10%)`),
656
+ /** Icon color when disabled. */
657
+ iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-icon-color, ${DesignToken.color.onSurface})`),
658
+ /** Icon opacity when disabled. */
659
+ iconOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-icon-opacity, 38%)`),
660
+ /** Outline color when disabled. */
661
+ outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-outline-color, ${DesignToken.color.outlineVariant})`)
771
662
  },
772
- /** Design tokens that control the `standard` variant. */
773
- standard: {
774
- /** Default icon color. */
775
- iconColor: unsafeCSS(`var(--m3e-standard-icon-button-icon-color, ${DesignToken.color.onSurfaceVariant})`),
776
- /** Unselected icon color. */
777
- unselectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
778
- /** Selected icon color. */
779
- selectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-selected-icon-color, ${DesignToken.color.primary})`),
780
- /** Design tokens that control disabled state. */
781
- disabled: {
782
- /** Container background color when disabled. */
783
- containerColor: unsafeCSS(`var(--m3e-standard-icon-button-disabled-container-color, transparent)`),
784
- /** Opacity of container when disabled. */
785
- containerOpacity: unsafeCSS(`var(--m3e-standard-icon-button-disabled-container-opacity, 10%)`),
786
- /** Icon color when disabled. */
787
- iconColor: unsafeCSS(`var(--m3e-standard-icon-button-disabled-icon-color, ${DesignToken.color.onSurface})`),
788
- /** Icon opacity when disabled. */
789
- iconOpacity: unsafeCSS(`var(--m3e-standard-icon-button-disabled-icon-opacity, 38%)`),
790
- },
791
- /** Design tokens that control hover state. */
792
- hover: {
793
- /** Icon color on hover. */
794
- iconColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-icon-color, ${DesignToken.color.onSurfaceVariant})`),
795
- /** State layer color on hover. */
796
- stateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
797
- /** State layer opacity on hover. */
798
- stateLayerOpacity: unsafeCSS(`var(--m3e-standard-icon-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
799
- /** Unselected icon color on hover. */
800
- unselectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
801
- /** Unselected state layer color on hover. */
802
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
803
- /** Selected icon color on hover. */
804
- selectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-selected-icon-color, ${DesignToken.color.primary})`),
805
- /** Selected state layer color on hover. */
806
- selectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-selected-state-layer-color, ${DesignToken.color.primary})`),
807
- },
808
- /** Design tokens that control focus state. */
809
- focus: {
810
- /** Icon color on focus. */
811
- iconColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-icon-color, ${DesignToken.color.onSurfaceVariant})`),
812
- /** State layer color on focus. */
813
- stateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
814
- /**State layer opacity on focus. */
815
- stateLayerOpacity: unsafeCSS(`var(--m3e-standard-icon-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
816
- /** Unselected icon color on focus. */
817
- unselectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
818
- /** Unselected state layer color on focus. */
819
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
820
- /** Selected icon color on focus. */
821
- selectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-selected-icon-color, ${DesignToken.color.primary})`),
822
- /** Selected state layer color on focus. */
823
- selectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-selected-state-layer-color, ${DesignToken.color.primary})`),
824
- },
825
- /** Design tokens that control pressed state. */
826
- pressed: {
827
- /** Icon color on pressed. */
828
- iconColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-icon-color, ${DesignToken.color.onSurfaceVariant})`),
829
- /** State layer color on pressed. */
830
- stateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
831
- /** State layer opacity on pressed. */
832
- stateLayerOpacity: unsafeCSS(`var(--m3e-standard-icon-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
833
- /** Unselected icon color on pressed. */
834
- unselectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
835
- /** Unselected state layer color on pressed. */
836
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
837
- /** Selected icon color on pressed. */
838
- selectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-selected-icon-color, ${DesignToken.color.primary})`),
839
- /** Selected state layer color on pressed. */
840
- selectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-selected-state-layer-color, ${DesignToken.color.primary})`),
841
- },
663
+ /** Design tokens that control hover state. */
664
+ hover: {
665
+ /** Icon color on hover. */
666
+ iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-icon-color, ${DesignToken.color.onSurfaceVariant})`),
667
+ /** Outline color on hover. */
668
+ outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-outline-color, ${DesignToken.color.outlineVariant})`),
669
+ /** State layer color on hover. */
670
+ stateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
671
+ /** State layer opacity on hover. */
672
+ stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
673
+ /** Unselected icon color on hover. */
674
+ unselectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
675
+ /** Unselected state layer color on hover. */
676
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
677
+ /** Selected icon color on hover. */
678
+ selectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-selected-icon-color, ${DesignToken.color.inverseOnSurface})`),
679
+ /** Selected state layer color on hover. */
680
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-selected-state-layer-color, ${DesignToken.color.inverseOnSurface})`)
681
+ },
682
+ /** Design tokens that control focus state. */
683
+ focus: {
684
+ /** Icon color on focus. */
685
+ iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-icon-color, ${DesignToken.color.onSurfaceVariant})`),
686
+ /** Outline color on focus. */
687
+ outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-outline-color, ${DesignToken.color.outlineVariant})`),
688
+ /** State layer color on focus. */
689
+ stateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
690
+ /**State layer opacity on focus. */
691
+ stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
692
+ /** Unselected icon color on focus. */
693
+ unselectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
694
+ /** Unselected state layer color on focus. */
695
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
696
+ /** Selected icon color on focus. */
697
+ selectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-selected-icon-color, ${DesignToken.color.inverseOnSurface})`),
698
+ /** Selected state layer color on focus. */
699
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-selected-state-layer-color, ${DesignToken.color.inverseOnSurface})`)
700
+ },
701
+ /** Design tokens that control pressed state. */
702
+ pressed: {
703
+ /** Icon color on pressed. */
704
+ iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-icon-color, ${DesignToken.color.onSurfaceVariant})`),
705
+ /** Outline color on pressed. */
706
+ outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-outline-color, ${DesignToken.color.outlineVariant})`),
707
+ /** State layer color on pressed. */
708
+ stateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
709
+ /** State layer opacity on pressed. */
710
+ stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
711
+ /** Unselected icon color on pressed. */
712
+ unselectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
713
+ /** Unselected state layer color on pressed. */
714
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
715
+ /** Selected icon color on pressed. */
716
+ selectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-selected-icon-color, ${DesignToken.color.inverseOnSurface})`),
717
+ /** Selected state layer color on pressed. */
718
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-selected-state-layer-color, ${DesignToken.color.inverseOnSurface})`)
719
+ }
720
+ },
721
+ /** Design tokens that control the `filled` variant. */
722
+ filled: {
723
+ /** Default icon color. */
724
+ iconColor: unsafeCSS(`var(--m3e-filled-icon-button-icon-color, ${DesignToken.color.onPrimary})`),
725
+ /** Default container background color. */
726
+ containerColor: unsafeCSS(`var(--m3e-filled-icon-button-container-color, ${DesignToken.color.primary})`),
727
+ /** Unselected icon color. */
728
+ unselectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
729
+ /** Unselected container background color. */
730
+ unselectedContainerColor: unsafeCSS(`var(--m3e-filled-icon-button-unselected-container-color, ${DesignToken.color.surfaceContainer})`),
731
+ /** Selected icon color. */
732
+ selectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-selected-icon-color, ${DesignToken.color.onPrimary})`),
733
+ /** Selected container background color. */
734
+ selectedContainerColor: unsafeCSS(`var(--m3e-filled-icon-button-selected-container-color, ${DesignToken.color.primary})`),
735
+ /** Design tokens that control disabled state. */
736
+ disabled: {
737
+ /** Container background color when disabled. */
738
+ containerColor: unsafeCSS(`var(--m3e-filled-icon-button-disabled-container-color, ${DesignToken.color.onSurface})`),
739
+ /** Opacity of container when disabled. */
740
+ containerOpacity: unsafeCSS(`var(--m3e-filled-icon-button-disabled-container-opacity, 10%)`),
741
+ /** Icon color when disabled. */
742
+ iconColor: unsafeCSS(`var(--m3e-filled-icon-button-disabled-icon-color, ${DesignToken.color.onSurface})`),
743
+ /** Icon opacity when disabled. */
744
+ iconOpacity: unsafeCSS(`var(--m3e-filled-icon-button-disabled-icon-opacity, 38%)`)
745
+ },
746
+ /** Design tokens that control hover state. */
747
+ hover: {
748
+ /** Icon color on hover. */
749
+ iconColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-icon-color, ${DesignToken.color.onPrimary})`),
750
+ /** State layer color on hover. */
751
+ stateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-state-layer-color, ${DesignToken.color.onPrimary})`),
752
+ /** State layer opacity on hover. */
753
+ stateLayerOpacity: unsafeCSS(`var(--m3e-filled-icon-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
754
+ /** Unselected icon color on hover. */
755
+ unselectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
756
+ /** Unselected state layer color on hover. */
757
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
758
+ /** Selected icon color on hover. */
759
+ selectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-selected-icon-color, ${DesignToken.color.onPrimary})`),
760
+ /** Selected state layer color on hover. */
761
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-selected-state-layer-color, ${DesignToken.color.onPrimary})`)
762
+ },
763
+ /** Design tokens that control focus state. */
764
+ focus: {
765
+ /** Icon color on focus. */
766
+ iconColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-icon-color, ${DesignToken.color.onPrimary})`),
767
+ /** State layer color on focus. */
768
+ stateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-state-layer-color, ${DesignToken.color.onPrimary})`),
769
+ /**State layer opacity on focus. */
770
+ stateLayerOpacity: unsafeCSS(`var(--m3e-filled-icon-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
771
+ /** Unselected icon color on focus. */
772
+ unselectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
773
+ /** Unselected state layer color on focus. */
774
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
775
+ /** Selected icon color on focus. */
776
+ selectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-selected-icon-color, ${DesignToken.color.onPrimary})`),
777
+ /** Selected state layer color on focus. */
778
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-selected-state-layer-color, ${DesignToken.color.onPrimary})`)
779
+ },
780
+ /** Design tokens that control pressed state. */
781
+ pressed: {
782
+ /** Icon color on pressed. */
783
+ iconColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-icon-color, ${DesignToken.color.onPrimary})`),
784
+ /** State layer color on pressed. */
785
+ stateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-state-layer-color, ${DesignToken.color.onPrimary})`),
786
+ /** State layer opacity on pressed. */
787
+ stateLayerOpacity: unsafeCSS(`var(--m3e-filled-icon-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
788
+ /** Unselected icon color on pressed. */
789
+ unselectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
790
+ /** Unselected state layer color on pressed. */
791
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
792
+ /** Selected icon color on pressed. */
793
+ selectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-selected-icon-color, ${DesignToken.color.onPrimary})`),
794
+ /** Selected state layer color on pressed. */
795
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-selected-state-layer-color, ${DesignToken.color.onPrimary})`)
796
+ }
797
+ },
798
+ /** Design tokens that control the `tonal` variant. */
799
+ tonal: {
800
+ /** Default icon color. */
801
+ iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-icon-color, ${DesignToken.color.onSecondaryContainer})`),
802
+ /** Default container background color. */
803
+ containerColor: unsafeCSS(`var(--m3e-tonal-icon-button-container-color, ${DesignToken.color.secondaryContainer})`),
804
+ /** Unselected icon color. */
805
+ unselectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-unselected-icon-color, ${DesignToken.color.onSecondaryContainer})`),
806
+ /** Unselected container background color. */
807
+ unselectedContainerColor: unsafeCSS(`var(--m3e-tonal-icon-button-unselected-container-color, ${DesignToken.color.secondaryContainer})`),
808
+ /** Selected icon color. */
809
+ selectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-selected-icon-color, ${DesignToken.color.onSecondary})`),
810
+ /** Selected container background color. */
811
+ selectedContainerColor: unsafeCSS(`var(--m3e-tonal-icon-button-selected-container-color, ${DesignToken.color.secondary})`),
812
+ /** Design tokens that control disabled state. */
813
+ disabled: {
814
+ /** Container background color when disabled. */
815
+ containerColor: unsafeCSS(`var(--m3e-tonal-icon-button-disabled-container-color, ${DesignToken.color.onSurface})`),
816
+ /** Opacity of container when disabled. */
817
+ containerOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-disabled-container-opacity, 10%)`),
818
+ /** Icon color when disabled. */
819
+ iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-disabled-icon-color, ${DesignToken.color.onSurface})`),
820
+ /** Icon opacity when disabled. */
821
+ iconOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-disabled-icon-opacity, 38%)`)
822
+ },
823
+ /** Design tokens that control hover state. */
824
+ hover: {
825
+ /** Icon color on hover. */
826
+ iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-icon-color, ${DesignToken.color.onSecondaryContainer})`),
827
+ /** State layer color on hover. */
828
+ stateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
829
+ /** State layer opacity on hover. */
830
+ stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
831
+ /** Unselected icon color on hover. */
832
+ unselectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-unselected-icon-color, ${DesignToken.color.onSecondaryContainer})`),
833
+ /** Unselected state layer color on hover. */
834
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-unselected-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
835
+ /** Selected icon color on hover. */
836
+ selectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-selected-icon-color, ${DesignToken.color.onSecondary})`),
837
+ /** Selected state layer color on hover. */
838
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-selected-state-layer-color, ${DesignToken.color.onSecondary})`)
839
+ },
840
+ /** Design tokens that control focus state. */
841
+ focus: {
842
+ /** Icon color on focus. */
843
+ iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-icon-color, ${DesignToken.color.onSecondaryContainer})`),
844
+ /** State layer color on focus. */
845
+ stateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
846
+ /**State layer opacity on focus. */
847
+ stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
848
+ /** Unselected icon color on focus. */
849
+ unselectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-unselected-icon-color, ${DesignToken.color.onSecondaryContainer})`),
850
+ /** Unselected state layer color on focus. */
851
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-unselected-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
852
+ /** Selected icon color on focus. */
853
+ selectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-selected-icon-color, ${DesignToken.color.onSecondary})`),
854
+ /** Selected state layer color on focus. */
855
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-selected-state-layer-color, ${DesignToken.color.onSecondary})`)
856
+ },
857
+ /** Design tokens that control pressed state. */
858
+ pressed: {
859
+ /** Icon color on pressed. */
860
+ iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-icon-color, ${DesignToken.color.onSecondaryContainer})`),
861
+ /** State layer color on pressed. */
862
+ stateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
863
+ /** State layer opacity on pressed. */
864
+ stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
865
+ /** Unselected icon color on pressed. */
866
+ unselectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-unselected-icon-color, ${DesignToken.color.onSecondaryContainer})`),
867
+ /** Unselected state layer color on pressed. */
868
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-unselected-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
869
+ /** Selected icon color on pressed. */
870
+ selectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-selected-icon-color, ${DesignToken.color.onSecondary})`),
871
+ /** Selected state layer color on pressed. */
872
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-selected-state-layer-color, ${DesignToken.color.onSecondary})`)
873
+ }
874
+ },
875
+ /** Design tokens that control the `standard` variant. */
876
+ standard: {
877
+ /** Default icon color. */
878
+ iconColor: unsafeCSS(`var(--m3e-standard-icon-button-icon-color, ${DesignToken.color.onSurfaceVariant})`),
879
+ /** Unselected icon color. */
880
+ unselectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
881
+ /** Selected icon color. */
882
+ selectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-selected-icon-color, ${DesignToken.color.primary})`),
883
+ /** Design tokens that control disabled state. */
884
+ disabled: {
885
+ /** Container background color when disabled. */
886
+ containerColor: unsafeCSS(`var(--m3e-standard-icon-button-disabled-container-color, transparent)`),
887
+ /** Opacity of container when disabled. */
888
+ containerOpacity: unsafeCSS(`var(--m3e-standard-icon-button-disabled-container-opacity, 10%)`),
889
+ /** Icon color when disabled. */
890
+ iconColor: unsafeCSS(`var(--m3e-standard-icon-button-disabled-icon-color, ${DesignToken.color.onSurface})`),
891
+ /** Icon opacity when disabled. */
892
+ iconOpacity: unsafeCSS(`var(--m3e-standard-icon-button-disabled-icon-opacity, 38%)`)
893
+ },
894
+ /** Design tokens that control hover state. */
895
+ hover: {
896
+ /** Icon color on hover. */
897
+ iconColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-icon-color, ${DesignToken.color.onSurfaceVariant})`),
898
+ /** State layer color on hover. */
899
+ stateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
900
+ /** State layer opacity on hover. */
901
+ stateLayerOpacity: unsafeCSS(`var(--m3e-standard-icon-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
902
+ /** Unselected icon color on hover. */
903
+ unselectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
904
+ /** Unselected state layer color on hover. */
905
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
906
+ /** Selected icon color on hover. */
907
+ selectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-selected-icon-color, ${DesignToken.color.primary})`),
908
+ /** Selected state layer color on hover. */
909
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-selected-state-layer-color, ${DesignToken.color.primary})`)
842
910
  },
911
+ /** Design tokens that control focus state. */
912
+ focus: {
913
+ /** Icon color on focus. */
914
+ iconColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-icon-color, ${DesignToken.color.onSurfaceVariant})`),
915
+ /** State layer color on focus. */
916
+ stateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
917
+ /**State layer opacity on focus. */
918
+ stateLayerOpacity: unsafeCSS(`var(--m3e-standard-icon-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
919
+ /** Unselected icon color on focus. */
920
+ unselectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
921
+ /** Unselected state layer color on focus. */
922
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
923
+ /** Selected icon color on focus. */
924
+ selectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-selected-icon-color, ${DesignToken.color.primary})`),
925
+ /** Selected state layer color on focus. */
926
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-selected-state-layer-color, ${DesignToken.color.primary})`)
927
+ },
928
+ /** Design tokens that control pressed state. */
929
+ pressed: {
930
+ /** Icon color on pressed. */
931
+ iconColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-icon-color, ${DesignToken.color.onSurfaceVariant})`),
932
+ /** State layer color on pressed. */
933
+ stateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
934
+ /** State layer opacity on pressed. */
935
+ stateLayerOpacity: unsafeCSS(`var(--m3e-standard-icon-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
936
+ /** Unselected icon color on pressed. */
937
+ unselectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
938
+ /** Unselected state layer color on pressed. */
939
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
940
+ /** Selected icon color on pressed. */
941
+ selectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-selected-icon-color, ${DesignToken.color.primary})`),
942
+ /** Selected state layer color on pressed. */
943
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-selected-state-layer-color, ${DesignToken.color.primary})`)
944
+ }
945
+ }
843
946
  };
844
947
 
845
948
  /** @private */
846
949
  function iconButtonVariantStyle(variant) {
847
- return css `
848
- :host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .base {
849
- background-color: ${IconButtonVariantToken[variant].containerColor ?? unsafeCSS("unset")};
850
- --m3e-state-layer-hover-color: ${IconButtonVariantToken[variant].hover.stateLayerColor};
851
- --m3e-state-layer-hover-opacity: ${IconButtonVariantToken[variant].hover.stateLayerOpacity};
852
- --m3e-state-layer-focus-color: ${IconButtonVariantToken[variant].focus.stateLayerColor};
853
- --m3e-state-layer-focus-opacity: ${IconButtonVariantToken[variant].focus.stateLayerOpacity};
854
- --m3e-ripple-color: ${IconButtonVariantToken[variant].pressed.stateLayerColor};
855
- --m3e-ripple-opacity: ${IconButtonVariantToken[variant].pressed.stateLayerOpacity};
856
- --m3e-elevation-level: ${IconButtonVariantToken[variant].containerElevation ?? unsafeCSS("unset")};
857
- --m3e-elevation-hover-level: ${IconButtonVariantToken[variant].hover.containerElevation ?? unsafeCSS("unset")};
858
- --m3e-elevation-focus-level: ${IconButtonVariantToken[variant].focus.containerElevation ?? unsafeCSS("unset")};
859
- --m3e-elevation-pressed-level: ${IconButtonVariantToken[variant].pressed.containerElevation ??
860
- unsafeCSS("unset")};
861
- }
862
- :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .base {
863
- background-color: ${IconButtonVariantToken[variant].unselectedContainerColor ?? unsafeCSS("unset")};
864
- --m3e-state-layer-hover-color: ${IconButtonVariantToken[variant].hover.unselectedStateLayerColor};
865
- --m3e-state-layer-focus-color: ${IconButtonVariantToken[variant].focus.unselectedStateLayerColor};
866
- --m3e-ripple-color: ${IconButtonVariantToken[variant].pressed.unselectedStateLayerColor};
867
- }
868
- :host([variant="${unsafeCSS(variant)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .base {
869
- background-color: ${IconButtonVariantToken[variant].selectedContainerColor ?? unsafeCSS("unset")};
870
- --m3e-state-layer-hover-color: ${IconButtonVariantToken[variant].hover.selectedStateLayerColor};
871
- --m3e-state-layer-focus-color: ${IconButtonVariantToken[variant].focus.selectedStateLayerColor};
872
- --m3e-ripple-color: ${IconButtonVariantToken[variant].pressed.selectedStateLayerColor};
873
- }
874
- :host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .base {
875
- outline-color: ${IconButtonVariantToken[variant].outlineColor ?? unsafeCSS("unset")};
876
- }
877
- :host([variant="${unsafeCSS(variant)}"]:focus:not(:disabled):not([disabled-interactive])) .base {
878
- outline-color: ${IconButtonVariantToken[variant].focus.outlineColor ?? unsafeCSS("unset")};
879
- }
880
- :host([variant="${unsafeCSS(variant)}"]:hover:not(:disabled):not([disabled-interactive])) .base {
881
- outline-color: ${IconButtonVariantToken[variant].hover.outlineColor ?? unsafeCSS("unset")};
882
- }
883
- :host([variant="${unsafeCSS(variant)}"].-pressed:not(:disabled):not([disabled-interactive])) .base {
884
- outline-color: ${IconButtonVariantToken[variant].pressed.outlineColor ?? unsafeCSS("unset")};
885
- }
886
- :host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .icon {
887
- color: ${IconButtonVariantToken[variant].iconColor};
888
- }
889
- :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .icon {
890
- color: ${IconButtonVariantToken[variant].unselectedIconColor};
891
- }
892
- :host([variant="${unsafeCSS(variant)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .icon {
893
- color: ${IconButtonVariantToken[variant].selectedIconColor};
894
- }
895
- :host([variant="${unsafeCSS(variant)}"]:focus:not(:disabled):not([disabled-interactive])) .icon {
896
- color: ${IconButtonVariantToken[variant].focus.iconColor};
897
- }
898
- :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive]))
899
- .icon {
900
- color: ${IconButtonVariantToken[variant].focus.unselectedIconColor};
901
- }
902
- :host([variant="${unsafeCSS(variant)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .icon {
903
- color: ${IconButtonVariantToken[variant].focus.selectedIconColor};
904
- }
905
- :host([variant="${unsafeCSS(variant)}"]:hover:not(:disabled):not([disabled-interactive])) .icon {
906
- color: ${IconButtonVariantToken[variant].hover.iconColor};
907
- }
908
- :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive]))
909
- .icon {
910
- color: ${IconButtonVariantToken[variant].hover.unselectedIconColor};
911
- }
912
- :host([variant="${unsafeCSS(variant)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .icon {
913
- color: ${IconButtonVariantToken[variant].hover.selectedIconColor};
914
- }
915
- :host([variant="${unsafeCSS(variant)}"].-pressed:not(:disabled):not([disabled-interactive])) .icon {
916
- color: ${IconButtonVariantToken[variant].pressed.iconColor};
917
- }
918
- :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]).-pressed:not(:disabled):not([disabled-interactive]))
919
- .icon {
920
- color: ${IconButtonVariantToken[variant].pressed.unselectedIconColor};
921
- }
922
- :host([variant="${unsafeCSS(variant)}"][toggle][selected].-pressed:not(:disabled):not([disabled-interactive]))
923
- .icon {
924
- color: ${IconButtonVariantToken[variant].pressed.selectedIconColor};
925
- }
926
- :host([variant="${unsafeCSS(variant)}"]:disabled) .base,
927
- :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .base {
928
- outline-color: ${IconButtonVariantToken[variant].disabled.outlineColor ?? unsafeCSS("unset")};
929
- background-color: color-mix(
930
- in srgb,
931
- ${IconButtonVariantToken[variant].disabled.containerColor}
932
- ${IconButtonVariantToken[variant].disabled.containerOpacity},
933
- transparent
934
- );
935
- }
936
- :host([variant="${unsafeCSS(variant)}"]:disabled) .icon,
937
- :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .icon {
938
- color: color-mix(
939
- in srgb,
940
- ${IconButtonVariantToken[variant].disabled.iconColor} ${IconButtonVariantToken[variant].disabled.iconOpacity},
941
- transparent
942
- );
943
- }
944
- `;
950
+ return css`:host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .base { background-color: ${IconButtonVariantToken[variant].containerColor ?? unsafeCSS("unset")}; --m3e-state-layer-hover-color: ${IconButtonVariantToken[variant].hover.stateLayerColor}; --m3e-state-layer-hover-opacity: ${IconButtonVariantToken[variant].hover.stateLayerOpacity}; --m3e-state-layer-focus-color: ${IconButtonVariantToken[variant].focus.stateLayerColor}; --m3e-state-layer-focus-opacity: ${IconButtonVariantToken[variant].focus.stateLayerOpacity}; --m3e-ripple-color: ${IconButtonVariantToken[variant].pressed.stateLayerColor}; --m3e-ripple-opacity: ${IconButtonVariantToken[variant].pressed.stateLayerOpacity}; --m3e-elevation-level: ${IconButtonVariantToken[variant].containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-hover-level: ${IconButtonVariantToken[variant].hover.containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-focus-level: ${IconButtonVariantToken[variant].focus.containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-pressed-level: ${IconButtonVariantToken[variant].pressed.containerElevation ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .base { background-color: ${IconButtonVariantToken[variant].unselectedContainerColor ?? unsafeCSS("unset")}; --m3e-state-layer-hover-color: ${IconButtonVariantToken[variant].hover.unselectedStateLayerColor}; --m3e-state-layer-focus-color: ${IconButtonVariantToken[variant].focus.unselectedStateLayerColor}; --m3e-ripple-color: ${IconButtonVariantToken[variant].pressed.unselectedStateLayerColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .base { background-color: ${IconButtonVariantToken[variant].selectedContainerColor ?? unsafeCSS("unset")}; --m3e-state-layer-hover-color: ${IconButtonVariantToken[variant].hover.selectedStateLayerColor}; --m3e-state-layer-focus-color: ${IconButtonVariantToken[variant].focus.selectedStateLayerColor}; --m3e-ripple-color: ${IconButtonVariantToken[variant].pressed.selectedStateLayerColor}; } :host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .base { outline-color: ${IconButtonVariantToken[variant].outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]:focus:not(:disabled):not([disabled-interactive])) .base { outline-color: ${IconButtonVariantToken[variant].focus.outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]:hover:not(:disabled):not([disabled-interactive])) .base { outline-color: ${IconButtonVariantToken[variant].hover.outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"].-pressed:not(:disabled):not([disabled-interactive])) .base { outline-color: ${IconButtonVariantToken[variant].pressed.outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].iconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].unselectedIconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].focus.iconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].focus.unselectedIconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].focus.selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].hover.iconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].hover.unselectedIconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].hover.selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"].-pressed:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].pressed.iconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]).-pressed:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].pressed.unselectedIconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected].-pressed:not(:disabled):not([disabled-interactive])) .icon { color: ${IconButtonVariantToken[variant].pressed.selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"]:disabled) .base, :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .base { outline-color: ${IconButtonVariantToken[variant].disabled.outlineColor ?? unsafeCSS("unset")}; background-color: color-mix( in srgb, ${IconButtonVariantToken[variant].disabled.containerColor} ${IconButtonVariantToken[variant].disabled.containerOpacity}, transparent ); } :host([variant="${unsafeCSS(variant)}"]:disabled) .icon, :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .icon { color: color-mix( in srgb, ${IconButtonVariantToken[variant].disabled.iconColor} ${IconButtonVariantToken[variant].disabled.iconOpacity}, transparent ); }`;
945
951
  }
946
952
  /**
947
953
  * Appearance variant styles for `M3eIconButtonElement`.
948
954
  * @internal
949
955
  */
950
- const IconButtonVariantStyle = [
951
- iconButtonVariantStyle("standard"),
952
- iconButtonVariantStyle("outlined"),
953
- iconButtonVariantStyle("filled"),
954
- iconButtonVariantStyle("tonal"),
955
- iconButtonVariantStyle("elevated"),
956
- css `
957
- :host([variant="outlined"]) .base {
958
- outline-style: solid;
959
- }
960
- `,
961
- ];
956
+ const IconButtonVariantStyle = [iconButtonVariantStyle("standard"), iconButtonVariantStyle("outlined"), iconButtonVariantStyle("filled"), iconButtonVariantStyle("tonal"), iconButtonVariantStyle("elevated"), css`:host([variant="outlined"]) .base { outline-style: solid; }`];
962
957
 
963
958
  var _M3eIconButtonElement_instances, _M3eIconButtonElement_clickHandler, _M3eIconButtonElement_updateButtonShape, _M3eIconButtonElement_handleClick, _M3eIconButtonElement_handleSelectedIconSlotChange;
964
959
  /**
@@ -1210,236 +1205,207 @@ var _M3eIconButtonElement_instances, _M3eIconButtonElement_clickHandler, _M3eIco
1210
1205
  * @cssprop --m3e-standard-icon-button-pressed-selected-state-layer-color - Selected state layer color on pressed (standard).
1211
1206
  */
1212
1207
  let M3eIconButtonElement = class M3eIconButtonElement extends KeyboardClick(LinkButton(FormSubmitter(Focusable(DisabledInteractive(Disabled(AttachInternals(Role(LitElement, "button"), true))))))) {
1213
- constructor() {
1214
- super();
1215
- _M3eIconButtonElement_instances.add(this);
1216
- /** @private */ _M3eIconButtonElement_clickHandler.set(this, (e) => __classPrivateFieldGet(this, _M3eIconButtonElement_instances, "m", _M3eIconButtonElement_handleClick).call(this, e));
1217
- /**
1218
- * The appearance variant of the button.
1219
- * @default "standard"
1220
- */
1221
- this.variant = "standard";
1222
- /**
1223
- * The shape of the button.
1224
- * @default "rounded"
1225
- */
1226
- this.shape = "rounded";
1227
- /**
1228
- * The size of the button.
1229
- * @default "small"
1230
- */
1231
- this.size = "small";
1232
- /**
1233
- * The width of the button.
1234
- * @default "default"
1235
- */
1236
- this.width = "default";
1237
- /**
1238
- * Whether the button will toggle between selected and unselected states.
1239
- * @default false
1240
- */
1241
- this.toggle = false;
1242
- /**
1243
- * Whether the toggle button is selected.
1244
- * @default false
1245
- */
1246
- this.selected = false;
1247
- new ResizeController(this, {
1248
- callback: () => {
1249
- if (this.grouped) {
1250
- this._handleResize();
1251
- }
1252
- },
1253
- });
1254
- new FocusController(this, {
1255
- callback: (focused) => {
1256
- if (!this.disabledInteractive && this._base) {
1257
- if (focused) {
1258
- __classPrivateFieldGet(this, _M3eIconButtonElement_instances, "m", _M3eIconButtonElement_updateButtonShape).call(this);
1259
- }
1260
- else if (!this.grouped) {
1261
- this._base?.style.removeProperty("--_button-shape");
1262
- }
1263
- }
1264
- },
1265
- });
1266
- new PressedController(this, {
1267
- isPressedKey: (key) => key === " ",
1268
- minPressedDuration: 150,
1269
- callback: (pressed) => {
1270
- if (!this.disabled && !this.disabledInteractive) {
1271
- this.classList.toggle("-pressed", pressed);
1272
- this.classList.toggle("-resting", !pressed);
1273
- const group = this.closest("m3e-button-group");
1274
- if (group) {
1275
- const clientWidth = this.getBoundingClientRect().width;
1276
- const buttons = [...group.querySelectorAll("m3e-button,m3e-icon-button")];
1277
- const index = buttons.indexOf(this);
1278
- for (let i = 0; i < buttons.length; i++) {
1279
- const button = buttons[i];
1280
- if (i === index - 1) {
1281
- button.style.setProperty("--_adjacent-button-width", `${clientWidth}px`);
1282
- button.classList.toggle("-adjacent-pressed", pressed);
1283
- }
1284
- else if (i === index + 1) {
1285
- button.style.setProperty("--_adjacent-button-width", `${clientWidth}px`);
1286
- button.classList.toggle("-adjacent-pressed", pressed);
1287
- }
1288
- else {
1289
- button.style.removeProperty("--_adjacent-button-width");
1290
- button.classList.remove("-adjacent-pressed");
1291
- }
1292
- }
1293
- }
1294
- }
1295
- },
1296
- });
1297
- }
1298
- /** Whether the button is contained by a button group. */
1299
- get grouped() {
1300
- return this.classList.contains("-grouped");
1301
- }
1302
- /** @inheritdoc */
1303
- render() {
1304
- return html `<div class="base">
1305
- <m3e-state-layer class="state-layer" ?disabled="${this.disabled || this.disabledInteractive}"></m3e-state-layer>
1306
- <m3e-elevation class="elevation" ?disabled="${this.disabled || this.disabledInteractive}"></m3e-elevation>
1307
- <m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring>
1308
- <m3e-ripple class="ripple" centered ?disabled="${this.disabled || this.disabledInteractive}"></m3e-ripple>
1309
- <div class="touch" aria-hidden="true"></div>
1310
- ${this[renderPseudoLink]()}
1311
- <div class="wrapper">
1312
- ${this.toggle
1313
- ? html `<slot
1314
- class="icon"
1315
- name="selected"
1316
- aria-hidden="true"
1317
- @slotchange="${__classPrivateFieldGet(this, _M3eIconButtonElement_instances, "m", _M3eIconButtonElement_handleSelectedIconSlotChange)}"
1318
- ></slot>`
1319
- : nothing}
1320
- <slot class="icon" aria-hidden="true"></slot>
1321
- </div>
1322
- </div>`;
1323
- }
1324
- /** @inheritdoc */
1325
- connectedCallback() {
1326
- super.connectedCallback();
1327
- this.addEventListener("click", __classPrivateFieldGet(this, _M3eIconButtonElement_clickHandler, "f"));
1328
- }
1329
- /** @inheritdoc */
1330
- disconnectedCallback() {
1331
- super.disconnectedCallback();
1332
- ["-pressed", "-resting", "-grouped", "-connected"].forEach((x) => this.classList.remove(x));
1333
- this._base?.style.removeProperty("--_button-shape");
1334
- this.style.removeProperty("--_button-width");
1335
- this.style.removeProperty("--_adjacent-button-width");
1336
- this.classList.remove("-adjacent-pressed");
1337
- this.removeEventListener("click", __classPrivateFieldGet(this, _M3eIconButtonElement_clickHandler, "f"));
1338
- }
1339
- /** @inheritdoc */
1340
- firstUpdated(_changedProperties) {
1341
- super.firstUpdated(_changedProperties);
1342
- [this._elevation, this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));
1343
- }
1344
- /** @inheritdoc */
1345
- updated(_changedProperties) {
1346
- super.updated(_changedProperties);
1347
- if ((_changedProperties.has("disabled") && this.disabled) ||
1348
- (_changedProperties.has("disabledInteractive") && this.disabledInteractive)) {
1349
- this.classList.toggle("-pressed", false);
1350
- this.classList.toggle("-resting", false);
1208
+ constructor() {
1209
+ super();
1210
+ _M3eIconButtonElement_instances.add(this);
1211
+ /** @private */
1212
+ _M3eIconButtonElement_clickHandler.set(this, e => __classPrivateFieldGet(this, _M3eIconButtonElement_instances, "m", _M3eIconButtonElement_handleClick).call(this, e));
1213
+ /**
1214
+ * The appearance variant of the button.
1215
+ * @default "standard"
1216
+ */
1217
+ this.variant = "standard";
1218
+ /**
1219
+ * The shape of the button.
1220
+ * @default "rounded"
1221
+ */
1222
+ this.shape = "rounded";
1223
+ /**
1224
+ * The size of the button.
1225
+ * @default "small"
1226
+ */
1227
+ this.size = "small";
1228
+ /**
1229
+ * The width of the button.
1230
+ * @default "default"
1231
+ */
1232
+ this.width = "default";
1233
+ /**
1234
+ * Whether the button will toggle between selected and unselected states.
1235
+ * @default false
1236
+ */
1237
+ this.toggle = false;
1238
+ /**
1239
+ * Whether the toggle button is selected.
1240
+ * @default false
1241
+ */
1242
+ this.selected = false;
1243
+ new ResizeController(this, {
1244
+ callback: () => {
1245
+ if (this.grouped) {
1246
+ this._handleResize();
1247
+ }
1248
+ }
1249
+ });
1250
+ new FocusController(this, {
1251
+ callback: focused => {
1252
+ if (!this.disabledInteractive && this._base) {
1253
+ if (focused) {
1254
+ __classPrivateFieldGet(this, _M3eIconButtonElement_instances, "m", _M3eIconButtonElement_updateButtonShape).call(this);
1255
+ } else if (!this.grouped) {
1256
+ this._base?.style.removeProperty("--_button-shape");
1257
+ }
1351
1258
  }
1352
- if (_changedProperties.has("toggle") || _changedProperties.has("selected")) {
1353
- this.ariaPressed = this.toggle ? `${this.selected}` : null;
1354
- if (this.toggle) {
1355
- for (const icon of this.querySelectorAll("m3e-icon")) {
1356
- icon.toggleAttribute("filled", this.selected);
1357
- }
1259
+ }
1260
+ });
1261
+ new PressedController(this, {
1262
+ isPressedKey: key => key === " ",
1263
+ minPressedDuration: 150,
1264
+ callback: pressed => {
1265
+ if (!this.disabled && !this.disabledInteractive) {
1266
+ this.classList.toggle("-pressed", pressed);
1267
+ this.classList.toggle("-resting", !pressed);
1268
+ const group = this.closest("m3e-button-group");
1269
+ if (group) {
1270
+ const clientWidth = this.getBoundingClientRect().width;
1271
+ const buttons = [...group.querySelectorAll("m3e-button,m3e-icon-button")];
1272
+ const index = buttons.indexOf(this);
1273
+ for (let i = 0; i < buttons.length; i++) {
1274
+ const button = buttons[i];
1275
+ if (i === index - 1) {
1276
+ button.style.setProperty("--_adjacent-button-width", `${clientWidth}px`);
1277
+ button.classList.toggle("-adjacent-pressed", pressed);
1278
+ } else if (i === index + 1) {
1279
+ button.style.setProperty("--_adjacent-button-width", `${clientWidth}px`);
1280
+ button.classList.toggle("-adjacent-pressed", pressed);
1281
+ } else {
1282
+ button.style.removeProperty("--_adjacent-button-width");
1283
+ button.classList.remove("-adjacent-pressed");
1284
+ }
1358
1285
  }
1286
+ }
1359
1287
  }
1288
+ }
1289
+ });
1290
+ }
1291
+ /** Whether the button is contained by a button group. */
1292
+ get grouped() {
1293
+ return this.classList.contains("-grouped");
1294
+ }
1295
+ /** @inheritdoc */
1296
+ render() {
1297
+ return html`<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[renderPseudoLink]()}<div class="wrapper">${this.toggle ? html`<slot class="icon" name="selected" aria-hidden="true" @slotchange="${__classPrivateFieldGet(this, _M3eIconButtonElement_instances, "m", _M3eIconButtonElement_handleSelectedIconSlotChange)}"></slot>` : nothing}<slot class="icon" aria-hidden="true"></slot></div></div>`;
1298
+ }
1299
+ /** @inheritdoc */
1300
+ connectedCallback() {
1301
+ super.connectedCallback();
1302
+ this.addEventListener("click", __classPrivateFieldGet(this, _M3eIconButtonElement_clickHandler, "f"));
1303
+ }
1304
+ /** @inheritdoc */
1305
+ disconnectedCallback() {
1306
+ super.disconnectedCallback();
1307
+ ["-pressed", "-resting", "-grouped", "-connected"].forEach(x => this.classList.remove(x));
1308
+ this._base?.style.removeProperty("--_button-shape");
1309
+ this.style.removeProperty("--_button-width");
1310
+ this.style.removeProperty("--_adjacent-button-width");
1311
+ this.classList.remove("-adjacent-pressed");
1312
+ this.removeEventListener("click", __classPrivateFieldGet(this, _M3eIconButtonElement_clickHandler, "f"));
1313
+ }
1314
+ /** @inheritdoc */
1315
+ firstUpdated(_changedProperties) {
1316
+ super.firstUpdated(_changedProperties);
1317
+ [this._elevation, this._focusRing, this._stateLayer, this._ripple].forEach(x => x?.attach(this));
1318
+ }
1319
+ /** @inheritdoc */
1320
+ updated(_changedProperties) {
1321
+ super.updated(_changedProperties);
1322
+ if (_changedProperties.has("disabled") && this.disabled || _changedProperties.has("disabledInteractive") && this.disabledInteractive) {
1323
+ this.classList.toggle("-pressed", false);
1324
+ this.classList.toggle("-resting", false);
1360
1325
  }
1361
- /** @private */
1362
- _handleResize() {
1363
- if (this.grouped && !this.classList.contains("-pressed")) {
1364
- this.style.setProperty("--_button-width", `${this.clientWidth}px`);
1365
- __classPrivateFieldGet(this, _M3eIconButtonElement_instances, "m", _M3eIconButtonElement_updateButtonShape).call(this, true);
1326
+ if (_changedProperties.has("toggle") || _changedProperties.has("selected")) {
1327
+ this.ariaPressed = this.toggle ? `${this.selected}` : null;
1328
+ if (this.toggle) {
1329
+ for (const icon of this.querySelectorAll("m3e-icon")) {
1330
+ icon.toggleAttribute("filled", this.selected);
1366
1331
  }
1332
+ }
1367
1333
  }
1334
+ }
1335
+ /** @private */
1336
+ _handleResize() {
1337
+ if (this.grouped && !this.classList.contains("-pressed")) {
1338
+ this.style.setProperty("--_button-width", `${this.clientWidth}px`);
1339
+ __classPrivateFieldGet(this, _M3eIconButtonElement_instances, "m", _M3eIconButtonElement_updateButtonShape).call(this, true);
1340
+ }
1341
+ }
1368
1342
  };
1369
1343
  _M3eIconButtonElement_clickHandler = new WeakMap();
1370
1344
  _M3eIconButtonElement_instances = new WeakSet();
1371
1345
  _M3eIconButtonElement_updateButtonShape = function _M3eIconButtonElement_updateButtonShape(force = false) {
1372
- if (!this._base)
1373
- return;
1374
- const shape = parseFloat(getComputedStyle(this._base).borderRadius);
1375
- if (!isNaN(shape) || force) {
1376
- const adjustedShape = this.clientHeight / 2;
1377
- if (adjustedShape < shape || force) {
1378
- this._base?.style.setProperty("--_button-shape", `${adjustedShape}px`);
1379
- }
1346
+ if (!this._base) return;
1347
+ const shape = parseFloat(getComputedStyle(this._base).borderRadius);
1348
+ if (!isNaN(shape) || force) {
1349
+ const adjustedShape = this.clientHeight / 2;
1350
+ if (adjustedShape < shape || force) {
1351
+ this._base?.style.setProperty("--_button-shape", `${adjustedShape}px`);
1380
1352
  }
1353
+ }
1381
1354
  };
1382
1355
  _M3eIconButtonElement_handleClick = function _M3eIconButtonElement_handleClick(e) {
1383
- if (this.disabled || this.disabledInteractive) {
1384
- e.preventDefault();
1385
- e.stopImmediatePropagation();
1386
- }
1387
- if (this.toggle && !e.defaultPrevented) {
1388
- this.selected = !this.selected;
1389
- // Dispatch an input event and if not prevented, dispatch a change event.
1390
- // Otherwise, reset the selected state.
1391
- if (this.dispatchEvent(new Event("input", { bubbles: true, composed: true, cancelable: true }))) {
1392
- this.dispatchEvent(new Event("change", { bubbles: true }));
1393
- }
1394
- else {
1395
- this.selected = !this.selected;
1396
- }
1356
+ if (this.disabled || this.disabledInteractive) {
1357
+ e.preventDefault();
1358
+ e.stopImmediatePropagation();
1359
+ }
1360
+ if (this.toggle && !e.defaultPrevented) {
1361
+ this.selected = !this.selected;
1362
+ // Dispatch an input event and if not prevented, dispatch a change event.
1363
+ // Otherwise, reset the selected state.
1364
+ if (this.dispatchEvent(new Event("input", {
1365
+ bubbles: true,
1366
+ composed: true,
1367
+ cancelable: true
1368
+ }))) {
1369
+ this.dispatchEvent(new Event("change", {
1370
+ bubbles: true
1371
+ }));
1372
+ } else {
1373
+ this.selected = !this.selected;
1397
1374
  }
1375
+ }
1398
1376
  };
1399
1377
  _M3eIconButtonElement_handleSelectedIconSlotChange = function _M3eIconButtonElement_handleSelectedIconSlotChange(e) {
1400
- this._base?.classList.toggle("with-selected-icon", hasAssignedNodes(e.target));
1378
+ this._base?.classList.toggle("with-selected-icon", hasAssignedNodes(e.target));
1401
1379
  };
1402
1380
  /** The styles of the element. */
1403
1381
  M3eIconButtonElement.styles = [IconButtonSizeStyle, IconButtonVariantStyle, IconButtonStyle];
1404
- __decorate([
1405
- e(".base")
1406
- ], M3eIconButtonElement.prototype, "_base", void 0);
1407
- __decorate([
1408
- e(".elevation")
1409
- ], M3eIconButtonElement.prototype, "_elevation", void 0);
1410
- __decorate([
1411
- e(".focus-ring")
1412
- ], M3eIconButtonElement.prototype, "_focusRing", void 0);
1413
- __decorate([
1414
- e(".state-layer")
1415
- ], M3eIconButtonElement.prototype, "_stateLayer", void 0);
1416
- __decorate([
1417
- e(".ripple")
1418
- ], M3eIconButtonElement.prototype, "_ripple", void 0);
1419
- __decorate([
1420
- n({ reflect: true })
1421
- ], M3eIconButtonElement.prototype, "variant", void 0);
1422
- __decorate([
1423
- n({ reflect: true })
1424
- ], M3eIconButtonElement.prototype, "shape", void 0);
1425
- __decorate([
1426
- n({ reflect: true })
1427
- ], M3eIconButtonElement.prototype, "size", void 0);
1428
- __decorate([
1429
- n({ reflect: true })
1430
- ], M3eIconButtonElement.prototype, "width", void 0);
1431
- __decorate([
1432
- n({ type: Boolean, reflect: true })
1433
- ], M3eIconButtonElement.prototype, "toggle", void 0);
1434
- __decorate([
1435
- n({ type: Boolean, reflect: true })
1436
- ], M3eIconButtonElement.prototype, "selected", void 0);
1437
- __decorate([
1438
- debounce(40)
1439
- ], M3eIconButtonElement.prototype, "_handleResize", null);
1440
- M3eIconButtonElement = __decorate([
1441
- t$1("m3e-icon-button")
1442
- ], M3eIconButtonElement);
1382
+ __decorate([e(".base")], M3eIconButtonElement.prototype, "_base", void 0);
1383
+ __decorate([e(".elevation")], M3eIconButtonElement.prototype, "_elevation", void 0);
1384
+ __decorate([e(".focus-ring")], M3eIconButtonElement.prototype, "_focusRing", void 0);
1385
+ __decorate([e(".state-layer")], M3eIconButtonElement.prototype, "_stateLayer", void 0);
1386
+ __decorate([e(".ripple")], M3eIconButtonElement.prototype, "_ripple", void 0);
1387
+ __decorate([n({
1388
+ reflect: true
1389
+ })], M3eIconButtonElement.prototype, "variant", void 0);
1390
+ __decorate([n({
1391
+ reflect: true
1392
+ })], M3eIconButtonElement.prototype, "shape", void 0);
1393
+ __decorate([n({
1394
+ reflect: true
1395
+ })], M3eIconButtonElement.prototype, "size", void 0);
1396
+ __decorate([n({
1397
+ reflect: true
1398
+ })], M3eIconButtonElement.prototype, "width", void 0);
1399
+ __decorate([n({
1400
+ type: Boolean,
1401
+ reflect: true
1402
+ })], M3eIconButtonElement.prototype, "toggle", void 0);
1403
+ __decorate([n({
1404
+ type: Boolean,
1405
+ reflect: true
1406
+ })], M3eIconButtonElement.prototype, "selected", void 0);
1407
+ __decorate([debounce(40)], M3eIconButtonElement.prototype, "_handleResize", null);
1408
+ M3eIconButtonElement = __decorate([t$1("m3e-icon-button")], M3eIconButtonElement);
1443
1409
 
1444
1410
  export { M3eIconButtonElement };
1445
1411
  //# sourceMappingURL=index.js.map