@m3e/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 +1195 -1296
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.min.js +1 -430
  4. package/dist/index.min.js.map +1 -1
  5. package/package.json +2 -16
package/dist/index.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,1142 +44,1076 @@ 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 `M3eButtonElement` for all size variants.
85
439
  * @internal
86
440
  */
87
441
  const ButtonSizeToken = {
88
- "extra-small": {
89
- containerHeight: unsafeCSS(`calc(var(--m3e-button-extra-small-container-height, 2rem) + ${DesignToken.density.calc(0)})`),
90
- outlineThickness: unsafeCSS("var(--m3e-button-extra-small-outline-thickness, 1px)"),
91
- labelTextFontSize: unsafeCSS(`var(--m3e-button-extra-small-label-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize})`),
92
- labelTextFontWeight: unsafeCSS(`var(--m3e-button-extra-small-label-text-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight})`),
93
- labelTextLineHeight: unsafeCSS(`var(--m3e-button-extra-small-label-text-line-height, ${DesignToken.typescale.standard.label.large.lineHeight})`),
94
- labelTextTracking: unsafeCSS(`var(--m3e-button-extra-small-label-text-tracking, ${DesignToken.typescale.standard.label.large.tracking})`),
95
- iconSize: unsafeCSS("var(--m3e-button-extra-small-icon-size, 1.25rem)"),
96
- shapeRound: unsafeCSS(`var(--m3e-button-extra-small-shape-round, ${DesignToken.shape.corner.full})`),
97
- shapeSquare: unsafeCSS(`var(--m3e-button-extra-small-shape-square, ${DesignToken.shape.corner.medium})`),
98
- selectedShapeRound: unsafeCSS(`var(--m3e-button-extra-small-selected-shape-round, ${DesignToken.shape.corner.medium})`),
99
- selectedShapeSquare: unsafeCSS(`var(--m3e-button-extra-small-selected-shape-square, ${DesignToken.shape.corner.full})`),
100
- shapePressedMorph: unsafeCSS(`var(--m3e-button-extra-small-shape-pressed-morph, ${DesignToken.shape.corner.small})`),
101
- leadingSpace: unsafeCSS("var(--m3e-button-extra-small-leading-space, 0.75rem)"),
102
- trailingSpace: unsafeCSS("var(--m3e-button-extra-small-trailing-space, 0.75rem)"),
103
- iconLabelSpace: unsafeCSS("var(--m3e-button-extra-small-icon-label-space, 0.5rem)"),
104
- },
105
- small: {
106
- containerHeight: unsafeCSS(`calc(var(--m3e-button-small-container-height, 2.5rem) + ${DesignToken.density.calc(-1)})`),
107
- outlineThickness: unsafeCSS("var(--m3e-button-small-outline-thickness, 1px)"),
108
- labelTextFontSize: unsafeCSS(`var(--m3e-button-small-label-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize})`),
109
- labelTextFontWeight: unsafeCSS(`var(--m3e-button-small-label-text-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight})`),
110
- labelTextLineHeight: unsafeCSS(`var(--m3e-button-small-label-text-line-height, ${DesignToken.typescale.standard.label.large.lineHeight})`),
111
- labelTextTracking: unsafeCSS(`var(--m3e-button-small-label-text-tracking, ${DesignToken.typescale.standard.label.large.tracking})`),
112
- iconSize: unsafeCSS("var(--m3e-button-small-icon-size, 1.25rem)"),
113
- shapeRound: unsafeCSS(`var(--m3e-button-small-shape-round, ${DesignToken.shape.corner.full})`),
114
- shapeSquare: unsafeCSS(`var(--m3e-button-small-shape-square, ${DesignToken.shape.corner.medium})`),
115
- selectedShapeRound: unsafeCSS(`var(--m3e-button-small-selected-shape-round, ${DesignToken.shape.corner.medium})`),
116
- selectedShapeSquare: unsafeCSS(`var(--m3e-button-small-selected-shape-square, ${DesignToken.shape.corner.full})`),
117
- shapePressedMorph: unsafeCSS(`var(--m3e-button-small-shape-pressed-morph, ${DesignToken.shape.corner.small})`),
118
- leadingSpace: unsafeCSS("var(--m3e-button-small-leading-space, 1rem)"),
119
- trailingSpace: unsafeCSS("var(--m3e-button-small-trailing-space, 1rem)"),
120
- iconLabelSpace: unsafeCSS("var(--m3e-button-small-icon-label-space, 0.5rem)"),
121
- },
122
- medium: {
123
- containerHeight: unsafeCSS(`calc(var(--m3e-button-medium-container-height, 3.5rem) + ${DesignToken.density.calc(-2)})`),
124
- outlineThickness: unsafeCSS("var(--m3e-button-medium-outline-thickness, 1px)"),
125
- labelTextFontSize: unsafeCSS(`var(--m3e-button-medium-label-text-font-size, ${DesignToken.typescale.standard.body.large.fontSize})`),
126
- labelTextFontWeight: unsafeCSS(`var(--m3e-button-medium-label-text-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight})`),
127
- labelTextLineHeight: unsafeCSS(`var(--m3e-button-medium-label-text-line-height, ${DesignToken.typescale.standard.body.large.lineHeight})`),
128
- labelTextTracking: unsafeCSS(`var(--m3e-button-medium-label-text-tracking, ${DesignToken.typescale.standard.body.large.tracking})`),
129
- iconSize: unsafeCSS("var(--m3e-button-medium-icon-size, 1.5rem)"),
130
- shapeRound: unsafeCSS(`var(--m3e-button-medium-shape-round, ${DesignToken.shape.corner.full})`),
131
- shapeSquare: unsafeCSS(`var(--m3e-button-medium-shape-square, ${DesignToken.shape.corner.large})`),
132
- selectedShapeRound: unsafeCSS(`var(--m3e-button-medium-selected-shape-round, ${DesignToken.shape.corner.large})`),
133
- selectedShapeSquare: unsafeCSS(`var(--m3e-button-medium-selected-shape-square, ${DesignToken.shape.corner.full})`),
134
- shapePressedMorph: unsafeCSS(`var(--m3e-button-medium-shape-pressed-morph, ${DesignToken.shape.corner.medium})`),
135
- leadingSpace: unsafeCSS("var(--m3e-button-medium-leading-space, 1.5rem)"),
136
- trailingSpace: unsafeCSS("var(--m3e-button-medium-trailing-space, 1.5rem)"),
137
- iconLabelSpace: unsafeCSS("var(--m3e-button-medium-icon-label-space, 0.5rem)"),
138
- },
139
- large: {
140
- containerHeight: unsafeCSS(`calc(var(--m3e-button-large-container-height, 6rem) + ${DesignToken.density.calc(-3)})`),
141
- outlineThickness: unsafeCSS("var(--m3e-button-large-outline-thickness, 0.125rem)"),
142
- labelTextFontSize: unsafeCSS(`var(--m3e-button-large-label-text-font-size, ${DesignToken.typescale.standard.headline.small.fontSize})`),
143
- labelTextFontWeight: unsafeCSS(`var(--m3e-button-large-label-text-font-weight, ${DesignToken.typescale.standard.headline.small.fontWeight})`),
144
- labelTextLineHeight: unsafeCSS(`var(--m3e-button-large-label-text-line-height, ${DesignToken.typescale.standard.headline.small.lineHeight})`),
145
- labelTextTracking: unsafeCSS(`var(--m3e-button-large-label-text-tracking, ${DesignToken.typescale.standard.headline.small.tracking})`),
146
- iconSize: unsafeCSS("var(--m3e-button-large-icon-size, 2rem)"),
147
- shapeRound: unsafeCSS(`var(--m3e-button-large-shape-round, ${DesignToken.shape.corner.full})`),
148
- shapeSquare: unsafeCSS(`var(--m3e-button-large-shape-square, ${DesignToken.shape.corner.extraLarge})`),
149
- selectedShapeRound: unsafeCSS(`var(--m3e-button-large-selected-shape-round, ${DesignToken.shape.corner.extraLarge})`),
150
- selectedShapeSquare: unsafeCSS(`var(--m3e-button-large-selected-shape-square, ${DesignToken.shape.corner.full})`),
151
- shapePressedMorph: unsafeCSS(`var(--m3e-button-large-shape-pressed-morph, ${DesignToken.shape.corner.large})`),
152
- leadingSpace: unsafeCSS("var(--m3e-button-large-leading-space, 3rem)"),
153
- trailingSpace: unsafeCSS("var(--m3e-button-large-trailing-space, 3rem)"),
154
- iconLabelSpace: unsafeCSS("var(--m3e-button-large-icon-label-space, 0.75rem)"),
155
- },
156
- "extra-large": {
157
- containerHeight: unsafeCSS(`calc(var(--m3e-button-extra-large-container-height, 8.5rem) + ${DesignToken.density.calc(-3)})`),
158
- outlineThickness: unsafeCSS("var(--m3e-button-extra-large-outline-thickness, 0.1875rem)"),
159
- labelTextFontSize: unsafeCSS(`var(--m3e-button-extra-large-label-text-font-size, ${DesignToken.typescale.standard.headline.large.fontSize})`),
160
- labelTextFontWeight: unsafeCSS(`var(--m3e-button-extra-large-label-text-font-weight, ${DesignToken.typescale.standard.headline.large.fontWeight})`),
161
- labelTextLineHeight: unsafeCSS(`var(--m3e-button-extra-large-label-text-line-height, ${DesignToken.typescale.standard.headline.large.lineHeight})`),
162
- labelTextTracking: unsafeCSS(`var(--m3e-button-extra-large-label-text-tracking, ${DesignToken.typescale.standard.headline.large.tracking})`),
163
- iconSize: unsafeCSS("var(--m3e-button-extra-large-icon-size, 2.5rem)"),
164
- shapeRound: unsafeCSS(`var(--m3e-button-extra-large-shape-round, ${DesignToken.shape.corner.full})`),
165
- shapeSquare: unsafeCSS(`var(--m3e-button-extra-large-shape-square, ${DesignToken.shape.corner.extraLarge})`),
166
- selectedShapeRound: unsafeCSS(`var(--m3e-button-extra-large-selected-shape-round, ${DesignToken.shape.corner.extraLarge})`),
167
- selectedShapeSquare: unsafeCSS(`var(--m3e-button-extra-large-selected-shape-square, ${DesignToken.shape.corner.full})`),
168
- shapePressedMorph: unsafeCSS(`var(--m3e-button-extra-large-shape-pressed-morph, ${DesignToken.shape.corner.large})`),
169
- leadingSpace: unsafeCSS("var(--m3e-button-extra-large-leading-space, 4rem)"),
170
- trailingSpace: unsafeCSS("var(--m3e-button-extra-large-trailing-space, 4rem)"),
171
- iconLabelSpace: unsafeCSS("var(--m3e-button-extra-large-icon-label-space, 1rem)"),
172
- },
442
+ "extra-small": {
443
+ containerHeight: unsafeCSS(`calc(var(--m3e-button-extra-small-container-height, 2rem) + ${DesignToken.density.calc(0)})`),
444
+ outlineThickness: unsafeCSS("var(--m3e-button-extra-small-outline-thickness, 1px)"),
445
+ labelTextFontSize: unsafeCSS(`var(--m3e-button-extra-small-label-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize})`),
446
+ labelTextFontWeight: unsafeCSS(`var(--m3e-button-extra-small-label-text-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight})`),
447
+ labelTextLineHeight: unsafeCSS(`var(--m3e-button-extra-small-label-text-line-height, ${DesignToken.typescale.standard.label.large.lineHeight})`),
448
+ labelTextTracking: unsafeCSS(`var(--m3e-button-extra-small-label-text-tracking, ${DesignToken.typescale.standard.label.large.tracking})`),
449
+ iconSize: unsafeCSS("var(--m3e-button-extra-small-icon-size, 1.25rem)"),
450
+ shapeRound: unsafeCSS(`var(--m3e-button-extra-small-shape-round, ${DesignToken.shape.corner.full})`),
451
+ shapeSquare: unsafeCSS(`var(--m3e-button-extra-small-shape-square, ${DesignToken.shape.corner.medium})`),
452
+ selectedShapeRound: unsafeCSS(`var(--m3e-button-extra-small-selected-shape-round, ${DesignToken.shape.corner.medium})`),
453
+ selectedShapeSquare: unsafeCSS(`var(--m3e-button-extra-small-selected-shape-square, ${DesignToken.shape.corner.full})`),
454
+ shapePressedMorph: unsafeCSS(`var(--m3e-button-extra-small-shape-pressed-morph, ${DesignToken.shape.corner.small})`),
455
+ leadingSpace: unsafeCSS("var(--m3e-button-extra-small-leading-space, 0.75rem)"),
456
+ trailingSpace: unsafeCSS("var(--m3e-button-extra-small-trailing-space, 0.75rem)"),
457
+ iconLabelSpace: unsafeCSS("var(--m3e-button-extra-small-icon-label-space, 0.5rem)")
458
+ },
459
+ small: {
460
+ containerHeight: unsafeCSS(`calc(var(--m3e-button-small-container-height, 2.5rem) + ${DesignToken.density.calc(-1)})`),
461
+ outlineThickness: unsafeCSS("var(--m3e-button-small-outline-thickness, 1px)"),
462
+ labelTextFontSize: unsafeCSS(`var(--m3e-button-small-label-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize})`),
463
+ labelTextFontWeight: unsafeCSS(`var(--m3e-button-small-label-text-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight})`),
464
+ labelTextLineHeight: unsafeCSS(`var(--m3e-button-small-label-text-line-height, ${DesignToken.typescale.standard.label.large.lineHeight})`),
465
+ labelTextTracking: unsafeCSS(`var(--m3e-button-small-label-text-tracking, ${DesignToken.typescale.standard.label.large.tracking})`),
466
+ iconSize: unsafeCSS("var(--m3e-button-small-icon-size, 1.25rem)"),
467
+ shapeRound: unsafeCSS(`var(--m3e-button-small-shape-round, ${DesignToken.shape.corner.full})`),
468
+ shapeSquare: unsafeCSS(`var(--m3e-button-small-shape-square, ${DesignToken.shape.corner.medium})`),
469
+ selectedShapeRound: unsafeCSS(`var(--m3e-button-small-selected-shape-round, ${DesignToken.shape.corner.medium})`),
470
+ selectedShapeSquare: unsafeCSS(`var(--m3e-button-small-selected-shape-square, ${DesignToken.shape.corner.full})`),
471
+ shapePressedMorph: unsafeCSS(`var(--m3e-button-small-shape-pressed-morph, ${DesignToken.shape.corner.small})`),
472
+ leadingSpace: unsafeCSS("var(--m3e-button-small-leading-space, 1rem)"),
473
+ trailingSpace: unsafeCSS("var(--m3e-button-small-trailing-space, 1rem)"),
474
+ iconLabelSpace: unsafeCSS("var(--m3e-button-small-icon-label-space, 0.5rem)")
475
+ },
476
+ medium: {
477
+ containerHeight: unsafeCSS(`calc(var(--m3e-button-medium-container-height, 3.5rem) + ${DesignToken.density.calc(-2)})`),
478
+ outlineThickness: unsafeCSS("var(--m3e-button-medium-outline-thickness, 1px)"),
479
+ labelTextFontSize: unsafeCSS(`var(--m3e-button-medium-label-text-font-size, ${DesignToken.typescale.standard.body.large.fontSize})`),
480
+ labelTextFontWeight: unsafeCSS(`var(--m3e-button-medium-label-text-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight})`),
481
+ labelTextLineHeight: unsafeCSS(`var(--m3e-button-medium-label-text-line-height, ${DesignToken.typescale.standard.body.large.lineHeight})`),
482
+ labelTextTracking: unsafeCSS(`var(--m3e-button-medium-label-text-tracking, ${DesignToken.typescale.standard.body.large.tracking})`),
483
+ iconSize: unsafeCSS("var(--m3e-button-medium-icon-size, 1.5rem)"),
484
+ shapeRound: unsafeCSS(`var(--m3e-button-medium-shape-round, ${DesignToken.shape.corner.full})`),
485
+ shapeSquare: unsafeCSS(`var(--m3e-button-medium-shape-square, ${DesignToken.shape.corner.large})`),
486
+ selectedShapeRound: unsafeCSS(`var(--m3e-button-medium-selected-shape-round, ${DesignToken.shape.corner.large})`),
487
+ selectedShapeSquare: unsafeCSS(`var(--m3e-button-medium-selected-shape-square, ${DesignToken.shape.corner.full})`),
488
+ shapePressedMorph: unsafeCSS(`var(--m3e-button-medium-shape-pressed-morph, ${DesignToken.shape.corner.medium})`),
489
+ leadingSpace: unsafeCSS("var(--m3e-button-medium-leading-space, 1.5rem)"),
490
+ trailingSpace: unsafeCSS("var(--m3e-button-medium-trailing-space, 1.5rem)"),
491
+ iconLabelSpace: unsafeCSS("var(--m3e-button-medium-icon-label-space, 0.5rem)")
492
+ },
493
+ large: {
494
+ containerHeight: unsafeCSS(`calc(var(--m3e-button-large-container-height, 6rem) + ${DesignToken.density.calc(-3)})`),
495
+ outlineThickness: unsafeCSS("var(--m3e-button-large-outline-thickness, 0.125rem)"),
496
+ labelTextFontSize: unsafeCSS(`var(--m3e-button-large-label-text-font-size, ${DesignToken.typescale.standard.headline.small.fontSize})`),
497
+ labelTextFontWeight: unsafeCSS(`var(--m3e-button-large-label-text-font-weight, ${DesignToken.typescale.standard.headline.small.fontWeight})`),
498
+ labelTextLineHeight: unsafeCSS(`var(--m3e-button-large-label-text-line-height, ${DesignToken.typescale.standard.headline.small.lineHeight})`),
499
+ labelTextTracking: unsafeCSS(`var(--m3e-button-large-label-text-tracking, ${DesignToken.typescale.standard.headline.small.tracking})`),
500
+ iconSize: unsafeCSS("var(--m3e-button-large-icon-size, 2rem)"),
501
+ shapeRound: unsafeCSS(`var(--m3e-button-large-shape-round, ${DesignToken.shape.corner.full})`),
502
+ shapeSquare: unsafeCSS(`var(--m3e-button-large-shape-square, ${DesignToken.shape.corner.extraLarge})`),
503
+ selectedShapeRound: unsafeCSS(`var(--m3e-button-large-selected-shape-round, ${DesignToken.shape.corner.extraLarge})`),
504
+ selectedShapeSquare: unsafeCSS(`var(--m3e-button-large-selected-shape-square, ${DesignToken.shape.corner.full})`),
505
+ shapePressedMorph: unsafeCSS(`var(--m3e-button-large-shape-pressed-morph, ${DesignToken.shape.corner.large})`),
506
+ leadingSpace: unsafeCSS("var(--m3e-button-large-leading-space, 3rem)"),
507
+ trailingSpace: unsafeCSS("var(--m3e-button-large-trailing-space, 3rem)"),
508
+ iconLabelSpace: unsafeCSS("var(--m3e-button-large-icon-label-space, 0.75rem)")
509
+ },
510
+ "extra-large": {
511
+ containerHeight: unsafeCSS(`calc(var(--m3e-button-extra-large-container-height, 8.5rem) + ${DesignToken.density.calc(-3)})`),
512
+ outlineThickness: unsafeCSS("var(--m3e-button-extra-large-outline-thickness, 0.1875rem)"),
513
+ labelTextFontSize: unsafeCSS(`var(--m3e-button-extra-large-label-text-font-size, ${DesignToken.typescale.standard.headline.large.fontSize})`),
514
+ labelTextFontWeight: unsafeCSS(`var(--m3e-button-extra-large-label-text-font-weight, ${DesignToken.typescale.standard.headline.large.fontWeight})`),
515
+ labelTextLineHeight: unsafeCSS(`var(--m3e-button-extra-large-label-text-line-height, ${DesignToken.typescale.standard.headline.large.lineHeight})`),
516
+ labelTextTracking: unsafeCSS(`var(--m3e-button-extra-large-label-text-tracking, ${DesignToken.typescale.standard.headline.large.tracking})`),
517
+ iconSize: unsafeCSS("var(--m3e-button-extra-large-icon-size, 2.5rem)"),
518
+ shapeRound: unsafeCSS(`var(--m3e-button-extra-large-shape-round, ${DesignToken.shape.corner.full})`),
519
+ shapeSquare: unsafeCSS(`var(--m3e-button-extra-large-shape-square, ${DesignToken.shape.corner.extraLarge})`),
520
+ selectedShapeRound: unsafeCSS(`var(--m3e-button-extra-large-selected-shape-round, ${DesignToken.shape.corner.extraLarge})`),
521
+ selectedShapeSquare: unsafeCSS(`var(--m3e-button-extra-large-selected-shape-square, ${DesignToken.shape.corner.full})`),
522
+ shapePressedMorph: unsafeCSS(`var(--m3e-button-extra-large-shape-pressed-morph, ${DesignToken.shape.corner.large})`),
523
+ leadingSpace: unsafeCSS("var(--m3e-button-extra-large-leading-space, 4rem)"),
524
+ trailingSpace: unsafeCSS("var(--m3e-button-extra-large-trailing-space, 4rem)"),
525
+ iconLabelSpace: unsafeCSS("var(--m3e-button-extra-large-icon-label-space, 1rem)")
526
+ }
173
527
  };
174
528
 
175
529
  /** @private */
176
530
  function buttonStyle(size) {
177
- return css `
178
- :host([size="${unsafeCSS(size)}"]) .base {
179
- height: ${ButtonSizeToken[size].containerHeight};
180
- }
181
- :host([size="${unsafeCSS(size)}"]) .wrapper {
182
- padding-inline-start: ${ButtonSizeToken[size].leadingSpace};
183
- padding-inline-end: ${ButtonSizeToken[size].trailingSpace};
184
- column-gap: ${ButtonSizeToken[size].iconLabelSpace};
185
- }
186
- :host([size="${unsafeCSS(size)}"].-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) .wrapper {
187
- padding-inline-start: calc(
188
- ${ButtonSizeToken[size].leadingSpace} -
189
- calc(calc(var(--_adjacent-button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) / 4.25)
190
- );
191
- padding-inline-end: calc(
192
- ${ButtonSizeToken[size].trailingSpace} -
193
- calc(calc(var(--_adjacent-button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) / 4.25)
194
- );
195
- }
196
- :host([size="${unsafeCSS(size)}"]) .label {
197
- font-size: ${ButtonSizeToken[size].labelTextFontSize};
198
- font-weight: ${ButtonSizeToken[size].labelTextFontWeight};
199
- line-height: ${ButtonSizeToken[size].labelTextLineHeight};
200
- letter-spacing: ${ButtonSizeToken[size].labelTextTracking};
201
- }
202
- :host([size="${unsafeCSS(size)}"]) .icon {
203
- font-size: ${ButtonSizeToken[size].iconSize};
204
- --m3e-icon-size: ${ButtonSizeToken[size].iconSize};
205
- }
206
- :host([size="${unsafeCSS(size)}"]) .base {
207
- outline-offset: calc(0px - ${ButtonSizeToken[size].outlineThickness});
208
- outline-width: ${ButtonSizeToken[size].outlineThickness};
209
- }
210
- :host(:not(.-connected)[size="${unsafeCSS(size)}"][shape="rounded"]) .base {
211
- border-radius: var(--_button-shape, ${ButtonSizeToken[size].shapeRound});
212
- }
213
- :host(:not(.-connected)[size="${unsafeCSS(size)}"][shape="rounded"][toggle][selected]:not(.-pressed)) .base {
214
- border-radius: ${ButtonSizeToken[size].selectedShapeRound};
215
- }
216
- :host(:not(.-connected)[size="${unsafeCSS(size)}"][shape="square"]) .base {
217
- border-radius: ${ButtonSizeToken[size].shapeSquare};
218
- }
219
- :host(:not(.-connected)[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not(.-pressed)) .base {
220
- border-radius: var(--_button-shape, ${ButtonSizeToken[size].selectedShapeSquare});
221
- }
222
- :host(:not(.-connected)[size="${unsafeCSS(size)}"].-pressed) .base {
223
- border-radius: ${ButtonSizeToken[size].shapePressedMorph};
224
- }
225
- :host(.-connected[size="${unsafeCSS(size)}"][shape="rounded"]) .base {
226
- border-start-start-radius: var(
227
- --_button-rounded-start-shape,
228
- var(--_button-shape, ${ButtonSizeToken[size].shapeRound})
229
- );
230
- border-end-start-radius: var(
231
- --_button-rounded-start-shape,
232
- var(--_button-shape, ${ButtonSizeToken[size].shapeRound})
233
- );
234
- border-start-end-radius: var(
235
- --_button-rounded-end-shape,
236
- var(--_button-shape, ${ButtonSizeToken[size].shapeRound})
237
- );
238
- border-end-end-radius: var(
239
- --_button-rounded-end-shape,
240
- var(--_button-shape, ${ButtonSizeToken[size].shapeRound})
241
- );
242
- }
243
- :host(.-connected[size="${unsafeCSS(size)}"][shape="square"]) .base {
244
- border-start-start-radius: var(--_button-square-start-shape, ${ButtonSizeToken[size].shapeSquare});
245
- border-end-start-radius: var(--_button-square-start-shape, ${ButtonSizeToken[size].shapeSquare});
246
- border-start-end-radius: var(--_button-square-end-shape, ${ButtonSizeToken[size].shapeSquare});
247
- border-end-end-radius: var(--_button-square-end-shape, ${ButtonSizeToken[size].shapeSquare});
248
- }
249
- :host(.-connected[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not(.-pressed)) .base {
250
- border-radius: var(--_button-shape, ${ButtonSizeToken[size].selectedShapeSquare});
251
- }
252
- :host(.-connected[size="${unsafeCSS(size)}"].-pressed) .base {
253
- border-start-start-radius: var(--_button-start-shape-pressed-morph, ${ButtonSizeToken[size].shapePressedMorph});
254
- border-end-start-radius: var(--_button-start-shape-pressed-morph, ${ButtonSizeToken[size].shapePressedMorph});
255
- border-start-end-radius: var(--_button-end-shape-pressed-morph, ${ButtonSizeToken[size].shapePressedMorph});
256
- border-end-end-radius: var(--_button-end-shape-pressed-morph, ${ButtonSizeToken[size].shapePressedMorph});
257
- }
258
- `;
531
+ return css`:host([size="${unsafeCSS(size)}"]) .base { height: ${ButtonSizeToken[size].containerHeight}; } :host([size="${unsafeCSS(size)}"]) .wrapper { padding-inline-start: ${ButtonSizeToken[size].leadingSpace}; padding-inline-end: ${ButtonSizeToken[size].trailingSpace}; column-gap: ${ButtonSizeToken[size].iconLabelSpace}; } :host([size="${unsafeCSS(size)}"].-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) .wrapper { padding-inline-start: calc( ${ButtonSizeToken[size].leadingSpace} - calc(calc(var(--_adjacent-button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) / 4.25) ); padding-inline-end: calc( ${ButtonSizeToken[size].trailingSpace} - calc(calc(var(--_adjacent-button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) / 4.25) ); } :host([size="${unsafeCSS(size)}"]) .label { font-size: ${ButtonSizeToken[size].labelTextFontSize}; font-weight: ${ButtonSizeToken[size].labelTextFontWeight}; line-height: ${ButtonSizeToken[size].labelTextLineHeight}; letter-spacing: ${ButtonSizeToken[size].labelTextTracking}; } :host([size="${unsafeCSS(size)}"]) .icon { font-size: ${ButtonSizeToken[size].iconSize}; --m3e-icon-size: ${ButtonSizeToken[size].iconSize}; } :host([size="${unsafeCSS(size)}"]) .base { outline-offset: calc(0px - ${ButtonSizeToken[size].outlineThickness}); outline-width: ${ButtonSizeToken[size].outlineThickness}; } :host(:not(.-connected)[size="${unsafeCSS(size)}"][shape="rounded"]) .base { border-radius: var(--_button-shape, ${ButtonSizeToken[size].shapeRound}); } :host(:not(.-connected)[size="${unsafeCSS(size)}"][shape="rounded"][toggle][selected]:not(.-pressed)) .base { border-radius: ${ButtonSizeToken[size].selectedShapeRound}; } :host(:not(.-connected)[size="${unsafeCSS(size)}"][shape="square"]) .base { border-radius: ${ButtonSizeToken[size].shapeSquare}; } :host(:not(.-connected)[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not(.-pressed)) .base { border-radius: var(--_button-shape, ${ButtonSizeToken[size].selectedShapeSquare}); } :host(:not(.-connected)[size="${unsafeCSS(size)}"].-pressed) .base { border-radius: ${ButtonSizeToken[size].shapePressedMorph}; } :host(.-connected[size="${unsafeCSS(size)}"][shape="rounded"]) .base { border-start-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${ButtonSizeToken[size].shapeRound}) ); border-end-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${ButtonSizeToken[size].shapeRound}) ); border-start-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${ButtonSizeToken[size].shapeRound}) ); border-end-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${ButtonSizeToken[size].shapeRound}) ); } :host(.-connected[size="${unsafeCSS(size)}"][shape="square"]) .base { border-start-start-radius: var(--_button-square-start-shape, ${ButtonSizeToken[size].shapeSquare}); border-end-start-radius: var(--_button-square-start-shape, ${ButtonSizeToken[size].shapeSquare}); border-start-end-radius: var(--_button-square-end-shape, ${ButtonSizeToken[size].shapeSquare}); border-end-end-radius: var(--_button-square-end-shape, ${ButtonSizeToken[size].shapeSquare}); } :host(.-connected[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not(.-pressed)) .base { border-radius: var(--_button-shape, ${ButtonSizeToken[size].selectedShapeSquare}); } :host(.-connected[size="${unsafeCSS(size)}"].-pressed) .base { border-start-start-radius: var(--_button-start-shape-pressed-morph, ${ButtonSizeToken[size].shapePressedMorph}); border-end-start-radius: var(--_button-start-shape-pressed-morph, ${ButtonSizeToken[size].shapePressedMorph}); border-start-end-radius: var(--_button-end-shape-pressed-morph, ${ButtonSizeToken[size].shapePressedMorph}); border-end-end-radius: var(--_button-end-shape-pressed-morph, ${ButtonSizeToken[size].shapePressedMorph}); }`;
259
532
  }
260
533
  /**
261
534
  * Size variant styles for `M3eButtonElement`.
262
535
  * @internal
263
536
  */
264
- const ButtonSizeStyle = [
265
- buttonStyle("extra-small"),
266
- buttonStyle("small"),
267
- buttonStyle("medium"),
268
- buttonStyle("large"),
269
- buttonStyle("extra-large"),
270
- ];
537
+ const ButtonSizeStyle = [buttonStyle("extra-small"), buttonStyle("small"), buttonStyle("medium"), buttonStyle("large"), buttonStyle("extra-large")];
271
538
 
272
539
  /**
273
540
  * Baseline styles for `M3eButtonElement`.
274
541
  * @internal
275
542
  */
276
- const ButtonStyle = css `
277
- :host {
278
- display: inline-block;
279
- outline: none;
280
- user-select: none;
281
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
282
- }
283
- .base {
284
- box-sizing: border-box;
285
- vertical-align: middle;
286
- display: inline-flex;
287
- align-items: center;
288
- justify-content: center;
289
- position: relative;
290
- width: 100%;
291
- transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};
292
- }
293
- .touch {
294
- position: absolute;
295
- height: 3rem;
296
- left: 0;
297
- right: 0;
298
- }
299
- :host(.-pressed) .base,
300
- :host(.-resting) .base {
301
- transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},
302
- border-radius ${DesignToken.motion.spring.fastEffects}`)};
303
- }
304
- .wrapper {
305
- width: 100%;
306
- overflow: hidden;
307
- display: inline-flex;
308
- align-items: center;
309
- }
310
- .label {
311
- justify-self: center;
312
- flex: 1 1 auto;
313
- text-align: center;
314
- white-space: nowrap;
315
- overflow: hidden;
316
- text-overflow: ellipsis;
317
- transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};
318
- }
319
- .icon {
320
- transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};
321
- }
322
- :host(:not(:disabled):not([disabled-interactive])) {
323
- cursor: pointer;
324
- }
325
- :host([disabled-interactive]) {
326
- cursor: not-allowed;
327
- }
328
- ::slotted([slot="icon"]),
329
- ::slotted([slot="selected-icon"]),
330
- ::slotted([slot="trailing-icon"]) {
331
- font-size: inherit !important;
332
- flex: none;
333
- }
334
- ::slotted(svg[slot="icon"]),
335
- ::slotted(svg[slot="selected-icon"]),
336
- ::slotted(svg[slot="trailing-icon"]) {
337
- width: 1em;
338
- height: 1em;
339
- }
340
- :host([toggle]:not([selected])) .base.with-selected-icon slot[name="selected-icon"],
341
- :host([toggle][selected]) .base.with-selected-icon slot[name="icon"] {
342
- display: none;
343
- }
344
- a {
345
- all: unset;
346
- display: block;
347
- position: absolute;
348
- top: 0px;
349
- left: 0px;
350
- right: 0px;
351
- bottom: 0px;
352
- z-index: 1;
353
- }
354
- :host(.-grouped.-connected) {
355
- flex: 1 1 auto;
356
- }
357
- :host(.-grouped:not(.-connected)) {
358
- transition: ${unsafeCSS(`padding-inline ${DesignToken.motion.spring.fastEffects}`)};
359
- }
360
- :host(.-grouped:not(.-connected):not(.-adjacent-pressed):not(.-pressed)) {
361
- flex-shrink: 0;
362
- flex-grow: 0;
363
- }
364
- :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) {
365
- flex-shrink: 1;
366
- min-width: 0;
367
- }
368
- :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) .label {
369
- text-overflow: clip;
370
- }
371
- :host(.-grouped:not(.-connected).-pressed:not([disabled-interactive]):not(:disabled)) {
372
- flex-shrink: 0;
373
- flex-basis: calc(
374
- var(--_button-width) + calc(var(--_button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15))
375
- );
376
- }
377
- @media (forced-colors: active) {
378
- .base,
379
- .label,
380
- .icon {
381
- transition: none;
382
- }
383
- :host(.-pressed) .base,
384
- :host(.-resting) .base {
385
- transition: ${unsafeCSS(`border-radius ${DesignToken.motion.spring.fastEffects}`)};
386
- }
387
- :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .base {
388
- background-color: ButtonFace;
389
- outline-color: ButtonText;
390
- }
391
- :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .label,
392
- :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .icon {
393
- color: ButtonText;
394
- }
395
- :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .base {
396
- background-color: ButtonFace;
397
- outline-color: ButtonText;
398
- }
399
- :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .label,
400
- :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .icon {
401
- color: ButtonText;
402
- }
403
- :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .base {
404
- background-color: ButtonText;
405
- outline: none;
406
- }
407
- :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .label,
408
- :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .icon {
409
- forced-color-adjust: none;
410
- color: ButtonFace;
411
- background-color: ButtonText;
412
- }
413
- :host([variant]:disabled) .base,
414
- :host([variant][disabled-interactive]) .base {
415
- outline-color: GrayText;
416
- background-color: unset;
417
- }
418
- :host([variant]:disabled) .label,
419
- :host([variant][disabled-interactive]) .label,
420
- :host([variant]:disabled) .icon,
421
- :host([variant][disabled-interactive]) .icon {
422
- color: GrayText;
423
- }
424
- .base {
425
- outline-style: solid;
426
- }
427
- :host([size="extra-small"]) .base {
428
- outline-offset: calc(0px - var(--m3e-button-extra-small-outline-thickness, 1px));
429
- outline-width: var(--m3e-button-extra-small-outline-thickness, 1px);
430
- }
431
- :host([size="small"]) .base {
432
- outline-offset: calc(0px - var(--m3e-button-small-outline-thickness, 1px));
433
- outline-width: var(--m3e-button-small-outline-thickness, 1px);
434
- }
435
- :host([size="medium"]) .base {
436
- outline-offset: calc(0px - var(--m3e-button-medium-outline-thickness, 1px));
437
- outline-width: var(--m3e-button-medium-outline-thickness, 1px);
438
- }
439
- :host([size="large"]) .base {
440
- outline-offset: calc(0px - var(--m3e-button-large-outline-thickness, 0.125rem));
441
- outline-width: var(--m3e-button-large-outline-thickness, 0.125rem);
442
- }
443
- :host([size="extra-large"]) .base {
444
- outline-offset: calc(0px - var(--m3e-button-extra-large-outline-thickness, 0.1875rem));
445
- outline-width: var(--m3e-button-extra-large-outline-thickness, 0.1875rem);
446
- }
447
- }
448
- @media (prefers-reduced-motion) {
449
- :host(.-pressed) .base,
450
- :host(.-resting) .base,
451
- .base,
452
- .label,
453
- .icon {
454
- transition: none;
455
- }
456
- }
457
- `;
543
+ const ButtonStyle = 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; height: 3rem; left: 0; right: 0; } :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; } .label { justify-self: center; flex: 1 1 auto; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } .icon { transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } ::slotted([slot="icon"]), ::slotted([slot="selected-icon"]), ::slotted([slot="trailing-icon"]) { font-size: inherit !important; flex: none; } ::slotted(svg[slot="icon"]), ::slotted(svg[slot="selected-icon"]), ::slotted(svg[slot="trailing-icon"]) { width: 1em; height: 1em; } :host([toggle]:not([selected])) .base.with-selected-icon slot[name="selected-icon"], :host([toggle][selected]) .base.with-selected-icon slot[name="icon"] { display: none; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } :host(.-grouped.-connected) { flex: 1 1 auto; } :host(.-grouped:not(.-connected)) { transition: ${unsafeCSS(`padding-inline ${DesignToken.motion.spring.fastEffects}`)}; } :host(.-grouped:not(.-connected):not(.-adjacent-pressed):not(.-pressed)) { flex-shrink: 0; flex-grow: 0; } :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) { flex-shrink: 1; min-width: 0; } :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) .label { text-overflow: clip; } :host(.-grouped:not(.-connected).-pressed:not([disabled-interactive]):not(:disabled)) { flex-shrink: 0; flex-basis: calc( var(--_button-width) + calc(var(--_button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) ); } @media (forced-colors: active) { .base, .label, .icon { transition: none; } :host(.-pressed) .base, :host(.-resting) .base { transition: ${unsafeCSS(`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-button-extra-small-outline-thickness, 1px)); outline-width: var(--m3e-button-extra-small-outline-thickness, 1px); } :host([size="small"]) .base { outline-offset: calc(0px - var(--m3e-button-small-outline-thickness, 1px)); outline-width: var(--m3e-button-small-outline-thickness, 1px); } :host([size="medium"]) .base { outline-offset: calc(0px - var(--m3e-button-medium-outline-thickness, 1px)); outline-width: var(--m3e-button-medium-outline-thickness, 1px); } :host([size="large"]) .base { outline-offset: calc(0px - var(--m3e-button-large-outline-thickness, 0.125rem)); outline-width: var(--m3e-button-large-outline-thickness, 0.125rem); } :host([size="extra-large"]) .base { outline-offset: calc(0px - var(--m3e-button-extra-large-outline-thickness, 0.1875rem)); outline-width: var(--m3e-button-extra-large-outline-thickness, 0.1875rem); } } @media (prefers-reduced-motion) { :host(.-pressed) .base, :host(.-resting) .base, .base, .label, .icon { transition: none; } }`;
458
545
 
459
546
  /**
460
547
  * Component design tokens that control the appearance variants of `M3eButtonElement`.
461
548
  * @internal
462
549
  */
463
550
  const ButtonVariantToken = {
464
- /** Design tokens that control the `elevated` variant. */
465
- elevated: {
466
- /** Default label color. */
467
- labelTextColor: unsafeCSS(`var(--m3e-elevated-button-label-text-color, ${DesignToken.color.primary})`),
468
- /** Default icon color. */
469
- iconColor: unsafeCSS(`var(--m3e-elevated-button-icon-color, ${DesignToken.color.primary})`),
470
- /** Default container background color. */
471
- containerColor: unsafeCSS(`var(--m3e-elevated-button-container-color, ${DesignToken.color.surfaceContainerLow})`),
472
- /** Resting elevation. */
473
- containerElevation: unsafeCSS(`var(--m3e-elevated-button-container-elevation, ${DesignToken.elevation.level1})`),
474
- /** Unselected label color. */
475
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-unselected-label-text-color, ${DesignToken.color.primary})`),
476
- /** Unselected icon color. */
477
- unselectedIconColor: unsafeCSS(`var(--m3e-elevated-button-unselected-icon-color, ${DesignToken.color.primary})`),
478
- /** Unselected container background color. */
479
- unselectedContainerColor: unsafeCSS(`var(--m3e-elevated-button-unselected-container-color, ${DesignToken.color.surfaceContainerLow})`),
480
- /** Selected label color. */
481
- selectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-selected-label-text-color, ${DesignToken.color.onPrimary})`),
482
- /** Selected icon color. */
483
- selectedIconColor: unsafeCSS(`var(--m3e-elevated-button-selected-icon-color, ${DesignToken.color.onPrimary})`),
484
- /** Selected container background color. */
485
- selectedContainerColor: unsafeCSS(`var(--m3e-elevated-button-selected-container-color, ${DesignToken.color.primary})`),
486
- /** Design tokens that control disabled state. */
487
- disabled: {
488
- /** Container background color when disabled. */
489
- containerColor: unsafeCSS(`var(--m3e-elevated-button-disabled-container-color, ${DesignToken.color.onSurface})`),
490
- /** Opacity of container when disabled. */
491
- containerOpacity: unsafeCSS(`var(--m3e-elevated-button-disabled-container-opacity, 10%)`),
492
- /** Icon color when disabled. */
493
- iconColor: unsafeCSS(`var(--m3e-elevated-button-disabled-icon-color, ${DesignToken.color.onSurface})`),
494
- /** Icon opacity when disabled. */
495
- iconOpacity: unsafeCSS(`var(--m3e-elevated-button-disabled-icon-opacity, 38%)`),
496
- /** Label color when disabled. */
497
- labelTextColor: unsafeCSS(`var(--m3e-elevated-button-disabled-label-text-color, ${DesignToken.color.onSurface})`),
498
- /** Label opacity when disabled. */
499
- labelTextOpacity: unsafeCSS(`var(--m3e-elevated-button-disabled-label-text-opacity, 38%)`),
500
- /** Elevation when disabled. */
501
- containerElevation: unsafeCSS(`var(--m3e-elevated-button-disabled-container-elevation, ${DesignToken.elevation.level0})`),
502
- },
503
- /** Design tokens that control hover state. */
504
- hover: {
505
- /** Icon color on hover. */
506
- iconColor: unsafeCSS(`var(--m3e-elevated-button-hover-icon-color, ${DesignToken.color.primary})`),
507
- /** Label color on hover. */
508
- labelTextColor: unsafeCSS(`var(--m3e-elevated-button-hover-label-text-color, ${DesignToken.color.primary})`),
509
- /** State layer color on hover. */
510
- stateLayerColor: unsafeCSS(`var(--m3e-elevated-button-hover-state-layer-color, ${DesignToken.color.primary})`),
511
- /** State layer opacity on hover. */
512
- stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
513
- /** Elevation on hover. */
514
- containerElevation: unsafeCSS(`var(--m3e-elevated-button-hover-container-elevation, ${DesignToken.elevation.level2})`),
515
- /** Unselected icon color on hover. */
516
- unselectedIconColor: unsafeCSS(`var(--m3e-elevated-button-hover-unselected-icon-color, ${DesignToken.color.primary})`),
517
- /** Unselected label color on hover. */
518
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-hover-unselected-label-text-color, ${DesignToken.color.primary})`),
519
- /** Unselected state layer color on hover. */
520
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-hover-unselected-state-layer-color, ${DesignToken.color.primary})`),
521
- /** Selected icon color on hover. */
522
- selectedIconColor: unsafeCSS(`var(--m3e-elevated-button-hover-selected-icon-color, ${DesignToken.color.onPrimary})`),
523
- /** Selected label color on hover. */
524
- selectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-hover-selected-label-text-color, ${DesignToken.color.onPrimary})`),
525
- /** Selected ripple color on hover. */
526
- selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-hover-selected-state-layer-color, ${DesignToken.color.onPrimary})`),
527
- },
528
- /** Design tokens that control focus state. */
529
- focus: {
530
- /** Icon color on focus. */
531
- iconColor: unsafeCSS(`var(--m3e-elevated-button-focus-icon-color, ${DesignToken.color.primary})`),
532
- /** Label color on focus. */
533
- labelTextColor: unsafeCSS(`var(--m3e-elevated-button-focus-label-text-color, ${DesignToken.color.primary})`),
534
- /** State layer color on focus. */
535
- stateLayerColor: unsafeCSS(`var(--m3e-elevated-button-focus-state-layer-color, ${DesignToken.color.primary})`),
536
- /**State layer opacity on focus. */
537
- stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
538
- /** Elevation on focus. */
539
- containerElevation: unsafeCSS(`var(--m3e-elevated-button-focus-container-elevation, ${DesignToken.elevation.level1})`),
540
- /** Unselected label color on focus. */
541
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-focus-unselected-label-text-color, ${DesignToken.color.primary})`),
542
- /** Unselected icon color on focus. */
543
- unselectedIconColor: unsafeCSS(`var(--m3e-elevated-button-focus-unselected-icon-color, ${DesignToken.color.primary})`),
544
- /** Unselected ripple color on focus. */
545
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-focus-unselected-state-layer-color, ${DesignToken.color.primary})`),
546
- /** Selected icon color on focus. */
547
- selectedIconColor: unsafeCSS(`var(--m3e-elevated-button-focus-selected-icon-color, ${DesignToken.color.onPrimary})`),
548
- /** Selected label color on focus. */
549
- selectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-focus-selected-label-text-color, ${DesignToken.color.onPrimary})`),
550
- /** Selected ripple color on focus. */
551
- selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-focus-selected-state-layer-color, ${DesignToken.color.onPrimary})`),
552
- },
553
- /** Design tokens that control pressed state. */
554
- pressed: {
555
- /** Icon color on pressed. */
556
- iconColor: unsafeCSS(`var(--m3e-elevated-button-pressed-icon-color, ${DesignToken.color.primary})`),
557
- /** Label color on pressed. */
558
- labelTextColor: unsafeCSS(`var(--m3e-elevated-button-pressed-label-text-color, ${DesignToken.color.primary})`),
559
- /** State layer color on pressed. */
560
- stateLayerColor: unsafeCSS(`var(--m3e-elevated-button-pressed-state-layer-color, ${DesignToken.color.primary})`),
561
- /** State layer opacity on pressed. */
562
- stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
563
- /** Elevation on pressed. */
564
- containerElevation: unsafeCSS(`var(--m3e-elevated-button-pressed-container-elevation, ${DesignToken.elevation.level1})`),
565
- /** Unselected label color on pressed. */
566
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-pressed-unselected-label-text-color, ${DesignToken.color.primary})`),
567
- /** Unselected icon color on pressed. */
568
- unselectedIconColor: unsafeCSS(`var(--m3e-elevated-button-pressed-unselected-icon-color, ${DesignToken.color.primary})`),
569
- /** Unselected ripple color on pressed. */
570
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-pressed-unselected-state-layer-color, ${DesignToken.color.primary})`),
571
- /** Selected icon color on pressed. */
572
- selectedIconColor: unsafeCSS(`var(--m3e-elevated-button-pressed-selected-icon-color, ${DesignToken.color.onPrimary})`),
573
- /** Selected label color on pressed. */
574
- selectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-pressed-selected-label-text-color, ${DesignToken.color.onPrimary})`),
575
- /** Selected ripple color on pressed. */
576
- selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-pressed-selected-state-layer-color, ${DesignToken.color.onPrimary})`),
577
- },
551
+ /** Design tokens that control the `elevated` variant. */
552
+ elevated: {
553
+ /** Default label color. */
554
+ labelTextColor: unsafeCSS(`var(--m3e-elevated-button-label-text-color, ${DesignToken.color.primary})`),
555
+ /** Default icon color. */
556
+ iconColor: unsafeCSS(`var(--m3e-elevated-button-icon-color, ${DesignToken.color.primary})`),
557
+ /** Default container background color. */
558
+ containerColor: unsafeCSS(`var(--m3e-elevated-button-container-color, ${DesignToken.color.surfaceContainerLow})`),
559
+ /** Resting elevation. */
560
+ containerElevation: unsafeCSS(`var(--m3e-elevated-button-container-elevation, ${DesignToken.elevation.level1})`),
561
+ /** Unselected label color. */
562
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-unselected-label-text-color, ${DesignToken.color.primary})`),
563
+ /** Unselected icon color. */
564
+ unselectedIconColor: unsafeCSS(`var(--m3e-elevated-button-unselected-icon-color, ${DesignToken.color.primary})`),
565
+ /** Unselected container background color. */
566
+ unselectedContainerColor: unsafeCSS(`var(--m3e-elevated-button-unselected-container-color, ${DesignToken.color.surfaceContainerLow})`),
567
+ /** Selected label color. */
568
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-selected-label-text-color, ${DesignToken.color.onPrimary})`),
569
+ /** Selected icon color. */
570
+ selectedIconColor: unsafeCSS(`var(--m3e-elevated-button-selected-icon-color, ${DesignToken.color.onPrimary})`),
571
+ /** Selected container background color. */
572
+ selectedContainerColor: unsafeCSS(`var(--m3e-elevated-button-selected-container-color, ${DesignToken.color.primary})`),
573
+ /** Design tokens that control disabled state. */
574
+ disabled: {
575
+ /** Container background color when disabled. */
576
+ containerColor: unsafeCSS(`var(--m3e-elevated-button-disabled-container-color, ${DesignToken.color.onSurface})`),
577
+ /** Opacity of container when disabled. */
578
+ containerOpacity: unsafeCSS(`var(--m3e-elevated-button-disabled-container-opacity, 10%)`),
579
+ /** Icon color when disabled. */
580
+ iconColor: unsafeCSS(`var(--m3e-elevated-button-disabled-icon-color, ${DesignToken.color.onSurface})`),
581
+ /** Icon opacity when disabled. */
582
+ iconOpacity: unsafeCSS(`var(--m3e-elevated-button-disabled-icon-opacity, 38%)`),
583
+ /** Label color when disabled. */
584
+ labelTextColor: unsafeCSS(`var(--m3e-elevated-button-disabled-label-text-color, ${DesignToken.color.onSurface})`),
585
+ /** Label opacity when disabled. */
586
+ labelTextOpacity: unsafeCSS(`var(--m3e-elevated-button-disabled-label-text-opacity, 38%)`),
587
+ /** Elevation when disabled. */
588
+ containerElevation: unsafeCSS(`var(--m3e-elevated-button-disabled-container-elevation, ${DesignToken.elevation.level0})`)
578
589
  },
579
- /** Design tokens that control the `outlined` variant. */
580
- outlined: {
581
- /** Default label color. */
582
- labelTextColor: unsafeCSS(`var(--m3e-outlined-button-label-text-color, ${DesignToken.color.onSurfaceVariant})`),
583
- /** Default icon color. */
584
- iconColor: unsafeCSS(`var(--m3e-outlined-button-icon-color, ${DesignToken.color.onSurfaceVariant})`),
585
- /** Default outline color. */
586
- outlineColor: unsafeCSS(`var(--m3e-outlined-button-outline-color, ${DesignToken.color.outlineVariant})`),
587
- /** Unselected label color. */
588
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant})`),
589
- /** Unselected icon color. */
590
- unselectedIconColor: unsafeCSS(`var(--m3e-outlined-button-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
591
- /** Selected label color. */
592
- selectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-selected-label-text-color, ${DesignToken.color.inverseOnSurface})`),
593
- /** Selected icon color. */
594
- selectedIconColor: unsafeCSS(`var(--m3e-outlined-button-selected-icon-color, ${DesignToken.color.inverseOnSurface})`),
595
- /** Selected container background color. */
596
- selectedContainerColor: unsafeCSS(`var(--m3e-outlined-button-selected-container-color, ${DesignToken.color.inverseSurface})`),
597
- /** Design tokens that control disabled state. */
598
- disabled: {
599
- /** Container background color when disabled. */
600
- containerColor: unsafeCSS(`var(--m3e-outlined-button-disabled-container-color, ${DesignToken.color.onSurface})`),
601
- /** Opacity of container when disabled. */
602
- containerOpacity: unsafeCSS(`var(--m3e-outlined-button-disabled-container-opacity, 10%)`),
603
- /** Icon color when disabled. */
604
- iconColor: unsafeCSS(`var(--m3e-outlined-button-disabled-icon-color, ${DesignToken.color.onSurface})`),
605
- /** Icon opacity when disabled. */
606
- iconOpacity: unsafeCSS(`var(--m3e-outlined-button-disabled-icon-opacity, 38%)`),
607
- /** Label color when disabled. */
608
- labelTextColor: unsafeCSS(`var(--m3e-outlined-button-disabled-label-text-color, ${DesignToken.color.onSurface})`),
609
- /** Label opacity when disabled. */
610
- labelTextOpacity: unsafeCSS(`var(--m3e-outlined-button-disabled-label-text-opacity, 38%)`),
611
- /** Outline color when disabled. */
612
- outlineColor: unsafeCSS(`var(--m3e-outlined-button-disabled-outline-color, ${DesignToken.color.outlineVariant})`),
613
- },
614
- /** Design tokens that control hover state. */
615
- hover: {
616
- /** Icon color on hover. */
617
- iconColor: unsafeCSS(`var(--m3e-outlined-button-hover-icon-color, ${DesignToken.color.onSurfaceVariant})`),
618
- /** Label color on hover. */
619
- labelTextColor: unsafeCSS(`var(--m3e-outlined-button-hover-label-text-color, ${DesignToken.color.onSurfaceVariant})`),
620
- /** Outline color on hover. */
621
- outlineColor: unsafeCSS(`var(--m3e-outlined-button-hover-outline-color, ${DesignToken.color.outlineVariant})`),
622
- /** State layer color on hover. */
623
- stateLayerColor: unsafeCSS(`var(--m3e-outlined-button-hover-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
624
- /** State layer opacity on hover. */
625
- stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
626
- /** Unselected icon color on hover. */
627
- unselectedIconColor: unsafeCSS(`var(--m3e-outlined-button-hover-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
628
- /** Unselected label color on hover. */
629
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-hover-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant})`),
630
- /** Unselected state layer color on hover. */
631
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-hover-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
632
- /** Selected icon color on hover. */
633
- selectedIconColor: unsafeCSS(`var(--m3e-outlined-button-hover-selected-icon-color, ${DesignToken.color.inverseOnSurface})`),
634
- /** Selected label color on hover. */
635
- selectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-hover-selected-label-text-color, ${DesignToken.color.inverseOnSurface})`),
636
- /** Selected state layer color on hover. */
637
- selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-hover-selected-state-layer-color, ${DesignToken.color.inverseOnSurface})`),
638
- },
639
- /** Design tokens that control focus state. */
640
- focus: {
641
- /** Icon color on focus. */
642
- iconColor: unsafeCSS(`var(--m3e-outlined-button-focus-icon-color, ${DesignToken.color.onSurfaceVariant})`),
643
- /** Label color on focus. */
644
- labelTextColor: unsafeCSS(`var(--m3e-outlined-button-focus-label-text-color, ${DesignToken.color.onSurfaceVariant})`),
645
- /** Outline color on focus. */
646
- outlineColor: unsafeCSS(`var(--m3e-outlined-button-focus-outline-color, ${DesignToken.color.outlineVariant})`),
647
- /** State layer color on focus. */
648
- stateLayerColor: unsafeCSS(`var(--m3e-outlined-button-focus-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
649
- /**State layer opacity on focus. */
650
- stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
651
- /** Unselected icon color on focus. */
652
- unselectedIconColor: unsafeCSS(`var(--m3e-outlined-button-focus-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
653
- /** Unselected label color on focus. */
654
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-focus-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant})`),
655
- /** Unselected state layer color on focus. */
656
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-focus-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
657
- /** Selected icon color on focus. */
658
- selectedIconColor: unsafeCSS(`var(--m3e-outlined-button-focus-selected-icon-color, ${DesignToken.color.inverseOnSurface})`),
659
- /** Selected label color on focus. */
660
- selectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-focus-selected-label-text-color, ${DesignToken.color.inverseOnSurface})`),
661
- /** Selected state layer color on focus. */
662
- selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-focus-selected-state-layer-color, ${DesignToken.color.inverseOnSurface})`),
663
- },
664
- /** Design tokens that control pressed state. */
665
- pressed: {
666
- /** Icon color on pressed. */
667
- iconColor: unsafeCSS(`var(--m3e-outlined-button-pressed-icon-color, ${DesignToken.color.onSurfaceVariant})`),
668
- /** Label color on pressed. */
669
- labelTextColor: unsafeCSS(`var(--m3e-outlined-button-pressed-label-text-color, ${DesignToken.color.onSurfaceVariant})`),
670
- /** Outline color on pressed. */
671
- outlineColor: unsafeCSS(`var(--m3e-outlined-button-pressed-outline-color, ${DesignToken.color.outlineVariant})`),
672
- /** State layer color on pressed. */
673
- stateLayerColor: unsafeCSS(`var(--m3e-outlined-button-pressed-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
674
- /** State layer opacity on pressed. */
675
- stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
676
- /** Unselected icon color on pressed. */
677
- unselectedIconColor: unsafeCSS(`var(--m3e-outlined-button-pressed-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
678
- /** Unselected label color on pressed. */
679
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-pressed-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant})`),
680
- /** Unselected state layer color on pressed. */
681
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-pressed-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
682
- /** Selected icon color on pressed. */
683
- selectedIconColor: unsafeCSS(`var(--m3e-outlined-button-pressed-selected-icon-color, ${DesignToken.color.inverseOnSurface})`),
684
- /** Selected label color on pressed. */
685
- selectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-pressed-selected-label-text-color, ${DesignToken.color.inverseOnSurface})`),
686
- /** Selected state layer color on pressed. */
687
- selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-pressed-selected-state-layer-color, ${DesignToken.color.inverseOnSurface})`),
688
- },
590
+ /** Design tokens that control hover state. */
591
+ hover: {
592
+ /** Icon color on hover. */
593
+ iconColor: unsafeCSS(`var(--m3e-elevated-button-hover-icon-color, ${DesignToken.color.primary})`),
594
+ /** Label color on hover. */
595
+ labelTextColor: unsafeCSS(`var(--m3e-elevated-button-hover-label-text-color, ${DesignToken.color.primary})`),
596
+ /** State layer color on hover. */
597
+ stateLayerColor: unsafeCSS(`var(--m3e-elevated-button-hover-state-layer-color, ${DesignToken.color.primary})`),
598
+ /** State layer opacity on hover. */
599
+ stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
600
+ /** Elevation on hover. */
601
+ containerElevation: unsafeCSS(`var(--m3e-elevated-button-hover-container-elevation, ${DesignToken.elevation.level2})`),
602
+ /** Unselected icon color on hover. */
603
+ unselectedIconColor: unsafeCSS(`var(--m3e-elevated-button-hover-unselected-icon-color, ${DesignToken.color.primary})`),
604
+ /** Unselected label color on hover. */
605
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-hover-unselected-label-text-color, ${DesignToken.color.primary})`),
606
+ /** Unselected state layer color on hover. */
607
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-hover-unselected-state-layer-color, ${DesignToken.color.primary})`),
608
+ /** Selected icon color on hover. */
609
+ selectedIconColor: unsafeCSS(`var(--m3e-elevated-button-hover-selected-icon-color, ${DesignToken.color.onPrimary})`),
610
+ /** Selected label color on hover. */
611
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-hover-selected-label-text-color, ${DesignToken.color.onPrimary})`),
612
+ /** Selected ripple color on hover. */
613
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-hover-selected-state-layer-color, ${DesignToken.color.onPrimary})`)
689
614
  },
690
- /** Design tokens that control the `filled` variant. */
691
- filled: {
692
- /** Default label color. */
693
- labelTextColor: unsafeCSS(`var(--m3e-filled-button-label-text-color, ${DesignToken.color.onPrimary})`),
694
- /** Default icon color. */
695
- iconColor: unsafeCSS(`var(--m3e-filled-button-icon-color, ${DesignToken.color.onPrimary})`),
696
- /** Default container background color. */
697
- containerColor: unsafeCSS(`var(--m3e-filled-button-container-color, ${DesignToken.color.primary})`),
698
- /** Resting elevation. */
699
- containerElevation: unsafeCSS(`var(--m3e-filled-button-container-elevation, ${DesignToken.elevation.level0})`),
700
- /** Unselected label color. */
701
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant})`),
702
- /** Unselected icon color. */
703
- unselectedIconColor: unsafeCSS(`var(--m3e-filled-button-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
704
- /** Unselected container background color. */
705
- unselectedContainerColor: unsafeCSS(`var(--m3e-filled-button-unselected-container-color, ${DesignToken.color.surfaceContainer})`),
706
- /** Selected label color. */
707
- selectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-selected-label-text-color, ${DesignToken.color.onPrimary})`),
708
- /** Selected icon color. */
709
- selectedIconColor: unsafeCSS(`var(--m3e-filled-button-selected-icon-color, ${DesignToken.color.onPrimary})`),
710
- /** Selected container background color. */
711
- selectedContainerColor: unsafeCSS(`var(--m3e-filled-button-selected-container-color, ${DesignToken.color.primary})`),
712
- /** Design tokens that control disabled state. */
713
- disabled: {
714
- /** Container background color when disabled. */
715
- containerColor: unsafeCSS(`var(--m3e-filled-button-disabled-container-color, ${DesignToken.color.onSurface})`),
716
- /** Opacity of container when disabled. */
717
- containerOpacity: unsafeCSS(`var(--m3e-filled-button-disabled-container-opacity, 10%)`),
718
- /** Icon color when disabled. */
719
- iconColor: unsafeCSS(`var(--m3e-filled-button-disabled-icon-color, ${DesignToken.color.onSurface})`),
720
- /** Icon opacity when disabled. */
721
- iconOpacity: unsafeCSS(`var(--m3e-filled-button-disabled-icon-opacity, 38%)`),
722
- /** Label color when disabled. */
723
- labelTextColor: unsafeCSS(`var(--m3e-filled-button-disabled-label-text-color, ${DesignToken.color.onSurface})`),
724
- /** Label opacity when disabled. */
725
- labelTextOpacity: unsafeCSS(`var(--m3e-filled-button-disabled-label-text-opacity, 38%)`),
726
- /** Elevation when disabled. */
727
- containerElevation: unsafeCSS(`var(--m3e-filled-button-disabled-container-elevation, ${DesignToken.elevation.level0})`),
728
- },
729
- /** Design tokens that control hover state. */
730
- hover: {
731
- /** Icon color on hover. */
732
- iconColor: unsafeCSS(`var(--m3e-filled-button-hover-icon-color, ${DesignToken.color.onPrimary})`),
733
- /** Label color on hover. */
734
- labelTextColor: unsafeCSS(`var(--m3e-filled-button-hover-label-text-color, ${DesignToken.color.onPrimary})`),
735
- /** State layer color on hover. */
736
- stateLayerColor: unsafeCSS(`var(--m3e-filled-button-hover-state-layer-color, ${DesignToken.color.onPrimary})`),
737
- /** State layer opacity on hover. */
738
- stateLayerOpacity: unsafeCSS(`var(--m3e-filled-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
739
- /** Elevation on hover. */
740
- containerElevation: unsafeCSS(`var(--m3e-filled-button-hover-container-elevation, ${DesignToken.elevation.level1})`),
741
- /** Unselected icon color on hover. */
742
- unselectedIconColor: unsafeCSS(`var(--m3e-filled-button-hover-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
743
- /** Unselected label color on hover. */
744
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-hover-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant})`),
745
- /** Unselected state layer color on hover. */
746
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-hover-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
747
- /** Selected icon color on hover. */
748
- selectedIconColor: unsafeCSS(`var(--m3e-filled-button-hover-selected-icon-color, ${DesignToken.color.onPrimary})`),
749
- /** Selected label color on hover. */
750
- selectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-hover-selected-label-text-color, ${DesignToken.color.onPrimary})`),
751
- /** Selected state layer color on hover. */
752
- selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-hover-selected-state-layer-color, ${DesignToken.color.onPrimary})`),
753
- },
754
- /** Design tokens that control focus state. */
755
- focus: {
756
- /** Icon color on focus. */
757
- iconColor: unsafeCSS(`var(--m3e-filled-button-focus-icon-color, ${DesignToken.color.onPrimary})`),
758
- /** Label color on focus. */
759
- labelTextColor: unsafeCSS(`var(--m3e-filled-button-focus-label-text-color, ${DesignToken.color.onPrimary})`),
760
- /** State layer color on focus. */
761
- stateLayerColor: unsafeCSS(`var(--m3e-filled-button-focus-state-layer-color, ${DesignToken.color.onPrimary})`),
762
- /**State layer opacity on focus. */
763
- stateLayerOpacity: unsafeCSS(`var(--m3e-filled-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
764
- /** Elevation on focus. */
765
- containerElevation: unsafeCSS(`var(--m3e-filled-button-focus-container-elevation, ${DesignToken.elevation.level0})`),
766
- /** Unselected icon color on focus. */
767
- unselectedIconColor: unsafeCSS(`var(--m3e-filled-button-focus-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
768
- /** Unselected label color on focus. */
769
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-focus-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant})`),
770
- /** Unselected state layer color on focus. */
771
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-focus-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
772
- /** Selected icon color on focus. */
773
- selectedIconColor: unsafeCSS(`var(--m3e-filled-button-focus-selected-icon-color, ${DesignToken.color.onPrimary})`),
774
- /** Selected label color on focus. */
775
- selectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-focus-selected-label-text-color, ${DesignToken.color.onPrimary})`),
776
- /** Selected state layer color on focus. */
777
- selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-focus-selected-state-layer-color, ${DesignToken.color.onPrimary})`),
778
- },
779
- /** Design tokens that control pressed state. */
780
- pressed: {
781
- /** Icon color on pressed. */
782
- iconColor: unsafeCSS(`var(--m3e-filled-button-pressed-icon-color, ${DesignToken.color.onPrimary})`),
783
- /** Label color on pressed. */
784
- labelTextColor: unsafeCSS(`var(--m3e-filled-button-pressed-label-text-color, ${DesignToken.color.onPrimary})`),
785
- /** State layer color on pressed. */
786
- stateLayerColor: unsafeCSS(`var(--m3e-filled-button-pressed-state-layer-color, ${DesignToken.color.onPrimary})`),
787
- /** State layer opacity on pressed. */
788
- stateLayerOpacity: unsafeCSS(`var(--m3e-filled-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
789
- /** Elevation on pressed. */
790
- containerElevation: unsafeCSS(`var(--m3e-filled-button-pressed-container-elevation, ${DesignToken.elevation.level0})`),
791
- /** Unselected icon color on pressed. */
792
- unselectedIconColor: unsafeCSS(`var(--m3e-filled-button-pressed-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
793
- /** Unselected label color on pressed. */
794
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-pressed-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant})`),
795
- /** Unselected state layer color on pressed. */
796
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-pressed-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
797
- /** Selected icon color on pressed. */
798
- selectedIconColor: unsafeCSS(`var(--m3e-filled-button-pressed-selected-icon-color, ${DesignToken.color.onPrimary})`),
799
- /** Selected label color on pressed. */
800
- selectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-pressed-selected-label-text-color, ${DesignToken.color.onPrimary})`),
801
- /** Selected state layer color on pressed. */
802
- selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-pressed-selected-state-layer-color, ${DesignToken.color.onPrimary})`),
803
- },
615
+ /** Design tokens that control focus state. */
616
+ focus: {
617
+ /** Icon color on focus. */
618
+ iconColor: unsafeCSS(`var(--m3e-elevated-button-focus-icon-color, ${DesignToken.color.primary})`),
619
+ /** Label color on focus. */
620
+ labelTextColor: unsafeCSS(`var(--m3e-elevated-button-focus-label-text-color, ${DesignToken.color.primary})`),
621
+ /** State layer color on focus. */
622
+ stateLayerColor: unsafeCSS(`var(--m3e-elevated-button-focus-state-layer-color, ${DesignToken.color.primary})`),
623
+ /**State layer opacity on focus. */
624
+ stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
625
+ /** Elevation on focus. */
626
+ containerElevation: unsafeCSS(`var(--m3e-elevated-button-focus-container-elevation, ${DesignToken.elevation.level1})`),
627
+ /** Unselected label color on focus. */
628
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-focus-unselected-label-text-color, ${DesignToken.color.primary})`),
629
+ /** Unselected icon color on focus. */
630
+ unselectedIconColor: unsafeCSS(`var(--m3e-elevated-button-focus-unselected-icon-color, ${DesignToken.color.primary})`),
631
+ /** Unselected ripple color on focus. */
632
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-focus-unselected-state-layer-color, ${DesignToken.color.primary})`),
633
+ /** Selected icon color on focus. */
634
+ selectedIconColor: unsafeCSS(`var(--m3e-elevated-button-focus-selected-icon-color, ${DesignToken.color.onPrimary})`),
635
+ /** Selected label color on focus. */
636
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-focus-selected-label-text-color, ${DesignToken.color.onPrimary})`),
637
+ /** Selected ripple color on focus. */
638
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-focus-selected-state-layer-color, ${DesignToken.color.onPrimary})`)
804
639
  },
805
- /** Design tokens that control the `tonal` variant. */
806
- tonal: {
807
- /** Default label color. */
808
- labelTextColor: unsafeCSS(`var(--m3e-tonal-button-label-text-color, ${DesignToken.color.onSecondaryContainer})`),
809
- /** Default icon color. */
810
- iconColor: unsafeCSS(`var(--m3e-tonal-button-icon-color, ${DesignToken.color.onSecondaryContainer})`),
811
- /** Default container background color. */
812
- containerColor: unsafeCSS(`var(--m3e-tonal-button-container-color, ${DesignToken.color.secondaryContainer})`),
813
- /** Resting elevation. */
814
- containerElevation: unsafeCSS(`var(--m3e-tonal-button-container-elevation, ${DesignToken.elevation.level0})`),
815
- /** Unselected label color. */
816
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-unselected-label-text-color, ${DesignToken.color.onSecondaryContainer})`),
817
- /** Unselected icon color. */
818
- unselectedIconColor: unsafeCSS(`var(--m3e-tonal-button-unselected-icon-color, ${DesignToken.color.onSecondaryContainer})`),
819
- /** Unselected container background color. */
820
- unselectedContainerColor: unsafeCSS(`var(--m3e-tonal-button-unselected-container-color, ${DesignToken.color.secondaryContainer})`),
821
- /** Selected label color. */
822
- selectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-selected-label-text-color, ${DesignToken.color.onSecondary})`),
823
- /** Selected icon color. */
824
- selectedIconColor: unsafeCSS(`var(--m3e-tonal-button-selected-icon-color, ${DesignToken.color.onSecondary})`),
825
- /** Selected container background color. */
826
- selectedContainerColor: unsafeCSS(`var(--m3e-tonal-button-selected-container-color, ${DesignToken.color.secondary})`),
827
- /** Design tokens that control disabled state. */
828
- disabled: {
829
- /** Container background color when disabled. */
830
- containerColor: unsafeCSS(`var(--m3e-tonal-button-disabled-container-color, ${DesignToken.color.onSurface})`),
831
- /** Opacity of container when disabled. */
832
- containerOpacity: unsafeCSS(`var(--m3e-tonal-button-disabled-container-opacity, 10%)`),
833
- /** Icon color when disabled. */
834
- iconColor: unsafeCSS(`var(--m3e-tonal-button-disabled-icon-color, ${DesignToken.color.onSurface})`),
835
- /** Icon opacity when disabled. */
836
- iconOpacity: unsafeCSS(`var(--m3e-tonal-button-disabled-icon-opacity, 38%)`),
837
- /** Label color when disabled. */
838
- labelTextColor: unsafeCSS(`var(--m3e-tonal-button-disabled-label-text-color, ${DesignToken.color.onSurface})`),
839
- /** Label opacity when disabled. */
840
- labelTextOpacity: unsafeCSS(`var(--m3e-tonal-button-disabled-label-text-opacity, 38%)`),
841
- /** Elevation when disabled. */
842
- containerElevation: unsafeCSS(`var(--m3e-tonal-button-disabled-container-elevation, ${DesignToken.elevation.level0})`),
843
- },
844
- /** Design tokens that control hover state. */
845
- hover: {
846
- /** Icon color on hover. */
847
- iconColor: unsafeCSS(`var(--m3e-tonal-button-hover-icon-color, ${DesignToken.color.onSecondaryContainer})`),
848
- /** Label color on hover. */
849
- labelTextColor: unsafeCSS(`var(--m3e-tonal-button-hover-label-text-color, ${DesignToken.color.onSecondaryContainer})`),
850
- /** State layer color on hover. */
851
- stateLayerColor: unsafeCSS(`var(--m3e-tonal-button-hover-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
852
- /** State layer opacity on hover. */
853
- stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
854
- /** Elevation on hover. */
855
- containerElevation: unsafeCSS(`var(--m3e-tonal-button-hover-container-elevation, ${DesignToken.elevation.level1})`),
856
- /** Unselected icon color on hover. */
857
- unselectedIconColor: unsafeCSS(`var(--m3e-tonal-button-hover-unselected-icon-color, ${DesignToken.color.onSecondaryContainer})`),
858
- /** Unselected label color on hover. */
859
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-hover-unselected-label-text-color, ${DesignToken.color.onSecondaryContainer})`),
860
- /** Unselected state layer color on hover. */
861
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-hover-unselected-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
862
- /** Selected icon color on hover. */
863
- selectedIconColor: unsafeCSS(`var(--m3e-tonal-button-hover-selected-icon-color, ${DesignToken.color.onSecondary})`),
864
- /** Selected label color on hover. */
865
- selectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-hover-selected-label-text-color, ${DesignToken.color.onSecondary})`),
866
- /** Selected state layer color on hover. */
867
- selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-hover-selected-state-layer-color, ${DesignToken.color.onSecondary})`),
868
- },
869
- /** Design tokens that control focus state. */
870
- focus: {
871
- /** Icon color on focus. */
872
- iconColor: unsafeCSS(`var(--m3e-tonal-button-focus-icon-color, ${DesignToken.color.onSecondaryContainer})`),
873
- /** Label color on focus. */
874
- labelTextColor: unsafeCSS(`var(--m3e-tonal-button-focus-label-text-color, ${DesignToken.color.onSecondaryContainer})`),
875
- /** State layer color on focus. */
876
- stateLayerColor: unsafeCSS(`var(--m3e-tonal-button-focus-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
877
- /**State layer opacity on focus. */
878
- stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
879
- /** Elevation on focus. */
880
- containerElevation: unsafeCSS(`var(--m3e-tonal-button-focus-container-elevation, ${DesignToken.elevation.level0})`),
881
- /** Unselected icon color on focus. */
882
- unselectedIconColor: unsafeCSS(`var(--m3e-tonal-button-focus-unselected-icon-color, ${DesignToken.color.onSecondaryContainer})`),
883
- /** Unselected label color on focus. */
884
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-focus-unselected-label-text-color, ${DesignToken.color.onSecondaryContainer})`),
885
- /** Unselected state layer color on focus. */
886
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-focus-unselected-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
887
- /** Selected icon color on focus. */
888
- selectedIconColor: unsafeCSS(`var(--m3e-tonal-button-focus-selected-icon-color, ${DesignToken.color.onSecondary})`),
889
- /** Selected label color on focus. */
890
- selectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-focus-selected-label-text-color, ${DesignToken.color.onSecondary})`),
891
- /** Selected state layer color on focus. */
892
- selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-focus-selected-state-layer-color, ${DesignToken.color.onSecondary})`),
893
- },
894
- /** Design tokens that control pressed state. */
895
- pressed: {
896
- /** Icon color on pressed. */
897
- iconColor: unsafeCSS(`var(--m3e-tonal-button-pressed-icon-color, ${DesignToken.color.onSecondaryContainer})`),
898
- /** Label color on pressed. */
899
- labelTextColor: unsafeCSS(`var(--m3e-tonal-button-pressed-label-text-color, ${DesignToken.color.onSecondaryContainer})`),
900
- /** State layer color on pressed. */
901
- stateLayerColor: unsafeCSS(`var(--m3e-tonal-button-pressed-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
902
- /** State layer opacity on pressed. */
903
- stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
904
- /** Elevation on pressed. */
905
- containerElevation: unsafeCSS(`var(--m3e-tonal-button-pressed-container-elevation, ${DesignToken.elevation.level0})`),
906
- /** Unselected icon color on pressed. */
907
- unselectedIconColor: unsafeCSS(`var(--m3e-tonal-button-pressed-unselected-icon-color, ${DesignToken.color.onSecondaryContainer})`),
908
- /** Unselected label color on pressed. */
909
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-pressed-unselected-label-text-color, ${DesignToken.color.onSecondaryContainer})`),
910
- /** Unselected state layer color on pressed. */
911
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-pressed-unselected-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
912
- /** Selected icon color on pressed. */
913
- selectedIconColor: unsafeCSS(`var(--m3e-tonal-button-pressed-selected-icon-color, ${DesignToken.color.onSecondary})`),
914
- /** Selected label color on pressed. */
915
- selectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-pressed-selected-label-text-color, ${DesignToken.color.onSecondary})`),
916
- /** Selected state layer color on pressed. */
917
- selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-pressed-selected-state-layer-color, ${DesignToken.color.onSecondary})`),
918
- },
640
+ /** Design tokens that control pressed state. */
641
+ pressed: {
642
+ /** Icon color on pressed. */
643
+ iconColor: unsafeCSS(`var(--m3e-elevated-button-pressed-icon-color, ${DesignToken.color.primary})`),
644
+ /** Label color on pressed. */
645
+ labelTextColor: unsafeCSS(`var(--m3e-elevated-button-pressed-label-text-color, ${DesignToken.color.primary})`),
646
+ /** State layer color on pressed. */
647
+ stateLayerColor: unsafeCSS(`var(--m3e-elevated-button-pressed-state-layer-color, ${DesignToken.color.primary})`),
648
+ /** State layer opacity on pressed. */
649
+ stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
650
+ /** Elevation on pressed. */
651
+ containerElevation: unsafeCSS(`var(--m3e-elevated-button-pressed-container-elevation, ${DesignToken.elevation.level1})`),
652
+ /** Unselected label color on pressed. */
653
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-pressed-unselected-label-text-color, ${DesignToken.color.primary})`),
654
+ /** Unselected icon color on pressed. */
655
+ unselectedIconColor: unsafeCSS(`var(--m3e-elevated-button-pressed-unselected-icon-color, ${DesignToken.color.primary})`),
656
+ /** Unselected ripple color on pressed. */
657
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-pressed-unselected-state-layer-color, ${DesignToken.color.primary})`),
658
+ /** Selected icon color on pressed. */
659
+ selectedIconColor: unsafeCSS(`var(--m3e-elevated-button-pressed-selected-icon-color, ${DesignToken.color.onPrimary})`),
660
+ /** Selected label color on pressed. */
661
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-pressed-selected-label-text-color, ${DesignToken.color.onPrimary})`),
662
+ /** Selected ripple color on pressed. */
663
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-pressed-selected-state-layer-color, ${DesignToken.color.onPrimary})`)
664
+ }
665
+ },
666
+ /** Design tokens that control the `outlined` variant. */
667
+ outlined: {
668
+ /** Default label color. */
669
+ labelTextColor: unsafeCSS(`var(--m3e-outlined-button-label-text-color, ${DesignToken.color.onSurfaceVariant})`),
670
+ /** Default icon color. */
671
+ iconColor: unsafeCSS(`var(--m3e-outlined-button-icon-color, ${DesignToken.color.onSurfaceVariant})`),
672
+ /** Default outline color. */
673
+ outlineColor: unsafeCSS(`var(--m3e-outlined-button-outline-color, ${DesignToken.color.outlineVariant})`),
674
+ /** Unselected label color. */
675
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant})`),
676
+ /** Unselected icon color. */
677
+ unselectedIconColor: unsafeCSS(`var(--m3e-outlined-button-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
678
+ /** Selected label color. */
679
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-selected-label-text-color, ${DesignToken.color.inverseOnSurface})`),
680
+ /** Selected icon color. */
681
+ selectedIconColor: unsafeCSS(`var(--m3e-outlined-button-selected-icon-color, ${DesignToken.color.inverseOnSurface})`),
682
+ /** Selected container background color. */
683
+ selectedContainerColor: unsafeCSS(`var(--m3e-outlined-button-selected-container-color, ${DesignToken.color.inverseSurface})`),
684
+ /** Design tokens that control disabled state. */
685
+ disabled: {
686
+ /** Container background color when disabled. */
687
+ containerColor: unsafeCSS(`var(--m3e-outlined-button-disabled-container-color, ${DesignToken.color.onSurface})`),
688
+ /** Opacity of container when disabled. */
689
+ containerOpacity: unsafeCSS(`var(--m3e-outlined-button-disabled-container-opacity, 10%)`),
690
+ /** Icon color when disabled. */
691
+ iconColor: unsafeCSS(`var(--m3e-outlined-button-disabled-icon-color, ${DesignToken.color.onSurface})`),
692
+ /** Icon opacity when disabled. */
693
+ iconOpacity: unsafeCSS(`var(--m3e-outlined-button-disabled-icon-opacity, 38%)`),
694
+ /** Label color when disabled. */
695
+ labelTextColor: unsafeCSS(`var(--m3e-outlined-button-disabled-label-text-color, ${DesignToken.color.onSurface})`),
696
+ /** Label opacity when disabled. */
697
+ labelTextOpacity: unsafeCSS(`var(--m3e-outlined-button-disabled-label-text-opacity, 38%)`),
698
+ /** Outline color when disabled. */
699
+ outlineColor: unsafeCSS(`var(--m3e-outlined-button-disabled-outline-color, ${DesignToken.color.outlineVariant})`)
919
700
  },
920
- /** Design tokens that control the `text` variant. */
921
- text: {
922
- /** Default label color. */
923
- labelTextColor: unsafeCSS(`var(--m3e-text-button-label-text-color, ${DesignToken.color.primary})`),
924
- /** Default icon color. */
925
- iconColor: unsafeCSS(`var(--m3e-text-button-icon-color, ${DesignToken.color.primary})`),
926
- /** Unselected label color. */
927
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-unselected-label-text-color, ${DesignToken.color.primary})`),
928
- /** Unselected icon color. */
929
- unselectedIconColor: unsafeCSS(`var(--m3e-text-button-unselected-icon-color, ${DesignToken.color.primary})`),
930
- /** Selected label color. */
931
- selectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-selected-label-text-color, ${DesignToken.color.primary})`),
932
- /** Selected icon color. */
933
- selectedIconColor: unsafeCSS(`var(--m3e-text-button-selected-icon-color, ${DesignToken.color.primary})`),
934
- /** Design tokens that control disabled state. */
935
- disabled: {
936
- /** Container background color when disabled. */
937
- containerColor: unsafeCSS(`var(--m3e-text-button-disabled-container-color, ${DesignToken.color.onSurface})`),
938
- /** Opacity of container when disabled. */
939
- containerOpacity: unsafeCSS(`var(--m3e-text-button-disabled-container-opacity, 10%)`),
940
- /** Icon color when disabled. */
941
- iconColor: unsafeCSS(`var(--m3e-text-button-disabled-icon-color, ${DesignToken.color.onSurface})`),
942
- /** Icon opacity when disabled. */
943
- iconOpacity: unsafeCSS(`var(--m3e-text-button-disabled-icon-opacity, 38%)`),
944
- /** Label color when disabled. */
945
- labelTextColor: unsafeCSS(`var(--m3e-text-button-disabled-label-text-color, ${DesignToken.color.onSurface})`),
946
- /** Label opacity when disabled. */
947
- labelTextOpacity: unsafeCSS(`var(--m3e-text-button-disabled-label-text-opacity, 38%)`),
948
- },
949
- /** Design tokens that control hover state. */
950
- hover: {
951
- /** Icon color on hover. */
952
- iconColor: unsafeCSS(`var(--m3e-text-button-hover-icon-color, ${DesignToken.color.primary})`),
953
- /** Label color on hover. */
954
- labelTextColor: unsafeCSS(`var(--m3e-text-button-hover-label-text-color, ${DesignToken.color.primary})`),
955
- /** State layer color on hover. */
956
- stateLayerColor: unsafeCSS(`var(--m3e-text-button-hover-state-layer-color, ${DesignToken.color.primary})`),
957
- /** State layer opacity on hover. */
958
- stateLayerOpacity: unsafeCSS(`var(--m3e-text-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
959
- /** Unselected icon color on hover. */
960
- unselectedIconColor: unsafeCSS(`var(--m3e-text-button-hover-unselected-icon-color, ${DesignToken.color.primary})`),
961
- /** Unselected label color on hover. */
962
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-hover-unselected-label-text-color, ${DesignToken.color.primary})`),
963
- /** Unselected state layer color on hover. */
964
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-hover-unselected-state-layer-color, ${DesignToken.color.primary})`),
965
- /** Selected icon color on hover. */
966
- selectedIconColor: unsafeCSS(`var(--m3e-text-button-hover-selected-icon-color, ${DesignToken.color.primary})`),
967
- /** Selected label color on hover. */
968
- selectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-hover-selected-label-text-color, ${DesignToken.color.primary})`),
969
- /** Selected state layer color on hover. */
970
- selectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-hover-selected-state-layer-color, ${DesignToken.color.primary})`),
971
- },
972
- /** Design tokens that control focus state. */
973
- focus: {
974
- /** Icon color on focus. */
975
- iconColor: unsafeCSS(`var(--m3e-text-button-focus-icon-color, ${DesignToken.color.primary})`),
976
- /** Label color on focus. */
977
- labelTextColor: unsafeCSS(`var(--m3e-text-button-focus-label-text-color, ${DesignToken.color.primary})`),
978
- /** State layer color on focus. */
979
- stateLayerColor: unsafeCSS(`var(--m3e-text-button-focus-state-layer-color, ${DesignToken.color.primary})`),
980
- /**State layer opacity on focus. */
981
- stateLayerOpacity: unsafeCSS(`var(--m3e-text-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
982
- /** Unselected icon color on focus. */
983
- unselectedIconColor: unsafeCSS(`var(--m3e-text-button-focus-unselected-icon-color, ${DesignToken.color.primary})`),
984
- /** Unselected label color on focus. */
985
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-focus-unselected-label-text-color, ${DesignToken.color.primary})`),
986
- /** Unselected state layer color on focus. */
987
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-focus-unselected-state-layer-color, ${DesignToken.color.primary})`),
988
- /** Selected icon color on focus. */
989
- selectedIconColor: unsafeCSS(`var(--m3e-text-button-focus-selected-icon-color, ${DesignToken.color.primary})`),
990
- /** Selected label color on focus. */
991
- selectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-focus-selected-label-text-color, ${DesignToken.color.primary})`),
992
- /** Selected state layer color on focus. */
993
- selectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-focus-selected-state-layer-color, ${DesignToken.color.primary})`),
994
- },
995
- /** Design tokens that control pressed state. */
996
- pressed: {
997
- /** Icon color on pressed. */
998
- iconColor: unsafeCSS(`var(--m3e-text-button-pressed-icon-color, ${DesignToken.color.primary})`),
999
- /** Label color on pressed. */
1000
- labelTextColor: unsafeCSS(`var(--m3e-text-button-pressed-label-text-color, ${DesignToken.color.primary})`),
1001
- /** State layer color on pressed. */
1002
- stateLayerColor: unsafeCSS(`var(--m3e-text-button-pressed-state-layer-color, ${DesignToken.color.primary})`),
1003
- /** State layer opacity on pressed. */
1004
- stateLayerOpacity: unsafeCSS(`var(--m3e-text-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
1005
- /** Unselected icon color on pressed. */
1006
- unselectedIconColor: unsafeCSS(`var(--m3e-text-button-pressed-unselected-icon-color, ${DesignToken.color.primary})`),
1007
- /** Unselected label color on pressed. */
1008
- unselectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-pressed-unselected-label-text-color, ${DesignToken.color.primary})`),
1009
- /** Unselected state layer color on pressed. */
1010
- unselectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-pressed-unselected-state-layer-color, ${DesignToken.color.primary})`),
1011
- /** Selected icon color on pressed. */
1012
- selectedIconColor: unsafeCSS(`var(--m3e-text-button-pressed-selected-icon-color, ${DesignToken.color.primary})`),
1013
- /** Selected label color on pressed. */
1014
- selectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-pressed-selected-label-text-color, ${DesignToken.color.primary})`),
1015
- /** Selected state layer color on pressed. */
1016
- selectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-pressed-selected-state-layer-color, ${DesignToken.color.primary})`),
1017
- },
701
+ /** Design tokens that control hover state. */
702
+ hover: {
703
+ /** Icon color on hover. */
704
+ iconColor: unsafeCSS(`var(--m3e-outlined-button-hover-icon-color, ${DesignToken.color.onSurfaceVariant})`),
705
+ /** Label color on hover. */
706
+ labelTextColor: unsafeCSS(`var(--m3e-outlined-button-hover-label-text-color, ${DesignToken.color.onSurfaceVariant})`),
707
+ /** Outline color on hover. */
708
+ outlineColor: unsafeCSS(`var(--m3e-outlined-button-hover-outline-color, ${DesignToken.color.outlineVariant})`),
709
+ /** State layer color on hover. */
710
+ stateLayerColor: unsafeCSS(`var(--m3e-outlined-button-hover-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
711
+ /** State layer opacity on hover. */
712
+ stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
713
+ /** Unselected icon color on hover. */
714
+ unselectedIconColor: unsafeCSS(`var(--m3e-outlined-button-hover-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
715
+ /** Unselected label color on hover. */
716
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-hover-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant})`),
717
+ /** Unselected state layer color on hover. */
718
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-hover-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
719
+ /** Selected icon color on hover. */
720
+ selectedIconColor: unsafeCSS(`var(--m3e-outlined-button-hover-selected-icon-color, ${DesignToken.color.inverseOnSurface})`),
721
+ /** Selected label color on hover. */
722
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-hover-selected-label-text-color, ${DesignToken.color.inverseOnSurface})`),
723
+ /** Selected state layer color on hover. */
724
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-hover-selected-state-layer-color, ${DesignToken.color.inverseOnSurface})`)
725
+ },
726
+ /** Design tokens that control focus state. */
727
+ focus: {
728
+ /** Icon color on focus. */
729
+ iconColor: unsafeCSS(`var(--m3e-outlined-button-focus-icon-color, ${DesignToken.color.onSurfaceVariant})`),
730
+ /** Label color on focus. */
731
+ labelTextColor: unsafeCSS(`var(--m3e-outlined-button-focus-label-text-color, ${DesignToken.color.onSurfaceVariant})`),
732
+ /** Outline color on focus. */
733
+ outlineColor: unsafeCSS(`var(--m3e-outlined-button-focus-outline-color, ${DesignToken.color.outlineVariant})`),
734
+ /** State layer color on focus. */
735
+ stateLayerColor: unsafeCSS(`var(--m3e-outlined-button-focus-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
736
+ /**State layer opacity on focus. */
737
+ stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
738
+ /** Unselected icon color on focus. */
739
+ unselectedIconColor: unsafeCSS(`var(--m3e-outlined-button-focus-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
740
+ /** Unselected label color on focus. */
741
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-focus-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant})`),
742
+ /** Unselected state layer color on focus. */
743
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-focus-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
744
+ /** Selected icon color on focus. */
745
+ selectedIconColor: unsafeCSS(`var(--m3e-outlined-button-focus-selected-icon-color, ${DesignToken.color.inverseOnSurface})`),
746
+ /** Selected label color on focus. */
747
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-focus-selected-label-text-color, ${DesignToken.color.inverseOnSurface})`),
748
+ /** Selected state layer color on focus. */
749
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-focus-selected-state-layer-color, ${DesignToken.color.inverseOnSurface})`)
750
+ },
751
+ /** Design tokens that control pressed state. */
752
+ pressed: {
753
+ /** Icon color on pressed. */
754
+ iconColor: unsafeCSS(`var(--m3e-outlined-button-pressed-icon-color, ${DesignToken.color.onSurfaceVariant})`),
755
+ /** Label color on pressed. */
756
+ labelTextColor: unsafeCSS(`var(--m3e-outlined-button-pressed-label-text-color, ${DesignToken.color.onSurfaceVariant})`),
757
+ /** Outline color on pressed. */
758
+ outlineColor: unsafeCSS(`var(--m3e-outlined-button-pressed-outline-color, ${DesignToken.color.outlineVariant})`),
759
+ /** State layer color on pressed. */
760
+ stateLayerColor: unsafeCSS(`var(--m3e-outlined-button-pressed-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
761
+ /** State layer opacity on pressed. */
762
+ stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
763
+ /** Unselected icon color on pressed. */
764
+ unselectedIconColor: unsafeCSS(`var(--m3e-outlined-button-pressed-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
765
+ /** Unselected label color on pressed. */
766
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-pressed-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant})`),
767
+ /** Unselected state layer color on pressed. */
768
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-pressed-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
769
+ /** Selected icon color on pressed. */
770
+ selectedIconColor: unsafeCSS(`var(--m3e-outlined-button-pressed-selected-icon-color, ${DesignToken.color.inverseOnSurface})`),
771
+ /** Selected label color on pressed. */
772
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-pressed-selected-label-text-color, ${DesignToken.color.inverseOnSurface})`),
773
+ /** Selected state layer color on pressed. */
774
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-pressed-selected-state-layer-color, ${DesignToken.color.inverseOnSurface})`)
775
+ }
776
+ },
777
+ /** Design tokens that control the `filled` variant. */
778
+ filled: {
779
+ /** Default label color. */
780
+ labelTextColor: unsafeCSS(`var(--m3e-filled-button-label-text-color, ${DesignToken.color.onPrimary})`),
781
+ /** Default icon color. */
782
+ iconColor: unsafeCSS(`var(--m3e-filled-button-icon-color, ${DesignToken.color.onPrimary})`),
783
+ /** Default container background color. */
784
+ containerColor: unsafeCSS(`var(--m3e-filled-button-container-color, ${DesignToken.color.primary})`),
785
+ /** Resting elevation. */
786
+ containerElevation: unsafeCSS(`var(--m3e-filled-button-container-elevation, ${DesignToken.elevation.level0})`),
787
+ /** Unselected label color. */
788
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant})`),
789
+ /** Unselected icon color. */
790
+ unselectedIconColor: unsafeCSS(`var(--m3e-filled-button-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
791
+ /** Unselected container background color. */
792
+ unselectedContainerColor: unsafeCSS(`var(--m3e-filled-button-unselected-container-color, ${DesignToken.color.surfaceContainer})`),
793
+ /** Selected label color. */
794
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-selected-label-text-color, ${DesignToken.color.onPrimary})`),
795
+ /** Selected icon color. */
796
+ selectedIconColor: unsafeCSS(`var(--m3e-filled-button-selected-icon-color, ${DesignToken.color.onPrimary})`),
797
+ /** Selected container background color. */
798
+ selectedContainerColor: unsafeCSS(`var(--m3e-filled-button-selected-container-color, ${DesignToken.color.primary})`),
799
+ /** Design tokens that control disabled state. */
800
+ disabled: {
801
+ /** Container background color when disabled. */
802
+ containerColor: unsafeCSS(`var(--m3e-filled-button-disabled-container-color, ${DesignToken.color.onSurface})`),
803
+ /** Opacity of container when disabled. */
804
+ containerOpacity: unsafeCSS(`var(--m3e-filled-button-disabled-container-opacity, 10%)`),
805
+ /** Icon color when disabled. */
806
+ iconColor: unsafeCSS(`var(--m3e-filled-button-disabled-icon-color, ${DesignToken.color.onSurface})`),
807
+ /** Icon opacity when disabled. */
808
+ iconOpacity: unsafeCSS(`var(--m3e-filled-button-disabled-icon-opacity, 38%)`),
809
+ /** Label color when disabled. */
810
+ labelTextColor: unsafeCSS(`var(--m3e-filled-button-disabled-label-text-color, ${DesignToken.color.onSurface})`),
811
+ /** Label opacity when disabled. */
812
+ labelTextOpacity: unsafeCSS(`var(--m3e-filled-button-disabled-label-text-opacity, 38%)`),
813
+ /** Elevation when disabled. */
814
+ containerElevation: unsafeCSS(`var(--m3e-filled-button-disabled-container-elevation, ${DesignToken.elevation.level0})`)
815
+ },
816
+ /** Design tokens that control hover state. */
817
+ hover: {
818
+ /** Icon color on hover. */
819
+ iconColor: unsafeCSS(`var(--m3e-filled-button-hover-icon-color, ${DesignToken.color.onPrimary})`),
820
+ /** Label color on hover. */
821
+ labelTextColor: unsafeCSS(`var(--m3e-filled-button-hover-label-text-color, ${DesignToken.color.onPrimary})`),
822
+ /** State layer color on hover. */
823
+ stateLayerColor: unsafeCSS(`var(--m3e-filled-button-hover-state-layer-color, ${DesignToken.color.onPrimary})`),
824
+ /** State layer opacity on hover. */
825
+ stateLayerOpacity: unsafeCSS(`var(--m3e-filled-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
826
+ /** Elevation on hover. */
827
+ containerElevation: unsafeCSS(`var(--m3e-filled-button-hover-container-elevation, ${DesignToken.elevation.level1})`),
828
+ /** Unselected icon color on hover. */
829
+ unselectedIconColor: unsafeCSS(`var(--m3e-filled-button-hover-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
830
+ /** Unselected label color on hover. */
831
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-hover-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant})`),
832
+ /** Unselected state layer color on hover. */
833
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-hover-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
834
+ /** Selected icon color on hover. */
835
+ selectedIconColor: unsafeCSS(`var(--m3e-filled-button-hover-selected-icon-color, ${DesignToken.color.onPrimary})`),
836
+ /** Selected label color on hover. */
837
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-hover-selected-label-text-color, ${DesignToken.color.onPrimary})`),
838
+ /** Selected state layer color on hover. */
839
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-hover-selected-state-layer-color, ${DesignToken.color.onPrimary})`)
840
+ },
841
+ /** Design tokens that control focus state. */
842
+ focus: {
843
+ /** Icon color on focus. */
844
+ iconColor: unsafeCSS(`var(--m3e-filled-button-focus-icon-color, ${DesignToken.color.onPrimary})`),
845
+ /** Label color on focus. */
846
+ labelTextColor: unsafeCSS(`var(--m3e-filled-button-focus-label-text-color, ${DesignToken.color.onPrimary})`),
847
+ /** State layer color on focus. */
848
+ stateLayerColor: unsafeCSS(`var(--m3e-filled-button-focus-state-layer-color, ${DesignToken.color.onPrimary})`),
849
+ /**State layer opacity on focus. */
850
+ stateLayerOpacity: unsafeCSS(`var(--m3e-filled-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
851
+ /** Elevation on focus. */
852
+ containerElevation: unsafeCSS(`var(--m3e-filled-button-focus-container-elevation, ${DesignToken.elevation.level0})`),
853
+ /** Unselected icon color on focus. */
854
+ unselectedIconColor: unsafeCSS(`var(--m3e-filled-button-focus-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
855
+ /** Unselected label color on focus. */
856
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-focus-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant})`),
857
+ /** Unselected state layer color on focus. */
858
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-focus-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
859
+ /** Selected icon color on focus. */
860
+ selectedIconColor: unsafeCSS(`var(--m3e-filled-button-focus-selected-icon-color, ${DesignToken.color.onPrimary})`),
861
+ /** Selected label color on focus. */
862
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-focus-selected-label-text-color, ${DesignToken.color.onPrimary})`),
863
+ /** Selected state layer color on focus. */
864
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-focus-selected-state-layer-color, ${DesignToken.color.onPrimary})`)
865
+ },
866
+ /** Design tokens that control pressed state. */
867
+ pressed: {
868
+ /** Icon color on pressed. */
869
+ iconColor: unsafeCSS(`var(--m3e-filled-button-pressed-icon-color, ${DesignToken.color.onPrimary})`),
870
+ /** Label color on pressed. */
871
+ labelTextColor: unsafeCSS(`var(--m3e-filled-button-pressed-label-text-color, ${DesignToken.color.onPrimary})`),
872
+ /** State layer color on pressed. */
873
+ stateLayerColor: unsafeCSS(`var(--m3e-filled-button-pressed-state-layer-color, ${DesignToken.color.onPrimary})`),
874
+ /** State layer opacity on pressed. */
875
+ stateLayerOpacity: unsafeCSS(`var(--m3e-filled-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
876
+ /** Elevation on pressed. */
877
+ containerElevation: unsafeCSS(`var(--m3e-filled-button-pressed-container-elevation, ${DesignToken.elevation.level0})`),
878
+ /** Unselected icon color on pressed. */
879
+ unselectedIconColor: unsafeCSS(`var(--m3e-filled-button-pressed-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
880
+ /** Unselected label color on pressed. */
881
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-pressed-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant})`),
882
+ /** Unselected state layer color on pressed. */
883
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-pressed-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
884
+ /** Selected icon color on pressed. */
885
+ selectedIconColor: unsafeCSS(`var(--m3e-filled-button-pressed-selected-icon-color, ${DesignToken.color.onPrimary})`),
886
+ /** Selected label color on pressed. */
887
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-pressed-selected-label-text-color, ${DesignToken.color.onPrimary})`),
888
+ /** Selected state layer color on pressed. */
889
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-pressed-selected-state-layer-color, ${DesignToken.color.onPrimary})`)
890
+ }
891
+ },
892
+ /** Design tokens that control the `tonal` variant. */
893
+ tonal: {
894
+ /** Default label color. */
895
+ labelTextColor: unsafeCSS(`var(--m3e-tonal-button-label-text-color, ${DesignToken.color.onSecondaryContainer})`),
896
+ /** Default icon color. */
897
+ iconColor: unsafeCSS(`var(--m3e-tonal-button-icon-color, ${DesignToken.color.onSecondaryContainer})`),
898
+ /** Default container background color. */
899
+ containerColor: unsafeCSS(`var(--m3e-tonal-button-container-color, ${DesignToken.color.secondaryContainer})`),
900
+ /** Resting elevation. */
901
+ containerElevation: unsafeCSS(`var(--m3e-tonal-button-container-elevation, ${DesignToken.elevation.level0})`),
902
+ /** Unselected label color. */
903
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-unselected-label-text-color, ${DesignToken.color.onSecondaryContainer})`),
904
+ /** Unselected icon color. */
905
+ unselectedIconColor: unsafeCSS(`var(--m3e-tonal-button-unselected-icon-color, ${DesignToken.color.onSecondaryContainer})`),
906
+ /** Unselected container background color. */
907
+ unselectedContainerColor: unsafeCSS(`var(--m3e-tonal-button-unselected-container-color, ${DesignToken.color.secondaryContainer})`),
908
+ /** Selected label color. */
909
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-selected-label-text-color, ${DesignToken.color.onSecondary})`),
910
+ /** Selected icon color. */
911
+ selectedIconColor: unsafeCSS(`var(--m3e-tonal-button-selected-icon-color, ${DesignToken.color.onSecondary})`),
912
+ /** Selected container background color. */
913
+ selectedContainerColor: unsafeCSS(`var(--m3e-tonal-button-selected-container-color, ${DesignToken.color.secondary})`),
914
+ /** Design tokens that control disabled state. */
915
+ disabled: {
916
+ /** Container background color when disabled. */
917
+ containerColor: unsafeCSS(`var(--m3e-tonal-button-disabled-container-color, ${DesignToken.color.onSurface})`),
918
+ /** Opacity of container when disabled. */
919
+ containerOpacity: unsafeCSS(`var(--m3e-tonal-button-disabled-container-opacity, 10%)`),
920
+ /** Icon color when disabled. */
921
+ iconColor: unsafeCSS(`var(--m3e-tonal-button-disabled-icon-color, ${DesignToken.color.onSurface})`),
922
+ /** Icon opacity when disabled. */
923
+ iconOpacity: unsafeCSS(`var(--m3e-tonal-button-disabled-icon-opacity, 38%)`),
924
+ /** Label color when disabled. */
925
+ labelTextColor: unsafeCSS(`var(--m3e-tonal-button-disabled-label-text-color, ${DesignToken.color.onSurface})`),
926
+ /** Label opacity when disabled. */
927
+ labelTextOpacity: unsafeCSS(`var(--m3e-tonal-button-disabled-label-text-opacity, 38%)`),
928
+ /** Elevation when disabled. */
929
+ containerElevation: unsafeCSS(`var(--m3e-tonal-button-disabled-container-elevation, ${DesignToken.elevation.level0})`)
1018
930
  },
931
+ /** Design tokens that control hover state. */
932
+ hover: {
933
+ /** Icon color on hover. */
934
+ iconColor: unsafeCSS(`var(--m3e-tonal-button-hover-icon-color, ${DesignToken.color.onSecondaryContainer})`),
935
+ /** Label color on hover. */
936
+ labelTextColor: unsafeCSS(`var(--m3e-tonal-button-hover-label-text-color, ${DesignToken.color.onSecondaryContainer})`),
937
+ /** State layer color on hover. */
938
+ stateLayerColor: unsafeCSS(`var(--m3e-tonal-button-hover-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
939
+ /** State layer opacity on hover. */
940
+ stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
941
+ /** Elevation on hover. */
942
+ containerElevation: unsafeCSS(`var(--m3e-tonal-button-hover-container-elevation, ${DesignToken.elevation.level1})`),
943
+ /** Unselected icon color on hover. */
944
+ unselectedIconColor: unsafeCSS(`var(--m3e-tonal-button-hover-unselected-icon-color, ${DesignToken.color.onSecondaryContainer})`),
945
+ /** Unselected label color on hover. */
946
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-hover-unselected-label-text-color, ${DesignToken.color.onSecondaryContainer})`),
947
+ /** Unselected state layer color on hover. */
948
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-hover-unselected-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
949
+ /** Selected icon color on hover. */
950
+ selectedIconColor: unsafeCSS(`var(--m3e-tonal-button-hover-selected-icon-color, ${DesignToken.color.onSecondary})`),
951
+ /** Selected label color on hover. */
952
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-hover-selected-label-text-color, ${DesignToken.color.onSecondary})`),
953
+ /** Selected state layer color on hover. */
954
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-hover-selected-state-layer-color, ${DesignToken.color.onSecondary})`)
955
+ },
956
+ /** Design tokens that control focus state. */
957
+ focus: {
958
+ /** Icon color on focus. */
959
+ iconColor: unsafeCSS(`var(--m3e-tonal-button-focus-icon-color, ${DesignToken.color.onSecondaryContainer})`),
960
+ /** Label color on focus. */
961
+ labelTextColor: unsafeCSS(`var(--m3e-tonal-button-focus-label-text-color, ${DesignToken.color.onSecondaryContainer})`),
962
+ /** State layer color on focus. */
963
+ stateLayerColor: unsafeCSS(`var(--m3e-tonal-button-focus-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
964
+ /**State layer opacity on focus. */
965
+ stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
966
+ /** Elevation on focus. */
967
+ containerElevation: unsafeCSS(`var(--m3e-tonal-button-focus-container-elevation, ${DesignToken.elevation.level0})`),
968
+ /** Unselected icon color on focus. */
969
+ unselectedIconColor: unsafeCSS(`var(--m3e-tonal-button-focus-unselected-icon-color, ${DesignToken.color.onSecondaryContainer})`),
970
+ /** Unselected label color on focus. */
971
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-focus-unselected-label-text-color, ${DesignToken.color.onSecondaryContainer})`),
972
+ /** Unselected state layer color on focus. */
973
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-focus-unselected-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
974
+ /** Selected icon color on focus. */
975
+ selectedIconColor: unsafeCSS(`var(--m3e-tonal-button-focus-selected-icon-color, ${DesignToken.color.onSecondary})`),
976
+ /** Selected label color on focus. */
977
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-focus-selected-label-text-color, ${DesignToken.color.onSecondary})`),
978
+ /** Selected state layer color on focus. */
979
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-focus-selected-state-layer-color, ${DesignToken.color.onSecondary})`)
980
+ },
981
+ /** Design tokens that control pressed state. */
982
+ pressed: {
983
+ /** Icon color on pressed. */
984
+ iconColor: unsafeCSS(`var(--m3e-tonal-button-pressed-icon-color, ${DesignToken.color.onSecondaryContainer})`),
985
+ /** Label color on pressed. */
986
+ labelTextColor: unsafeCSS(`var(--m3e-tonal-button-pressed-label-text-color, ${DesignToken.color.onSecondaryContainer})`),
987
+ /** State layer color on pressed. */
988
+ stateLayerColor: unsafeCSS(`var(--m3e-tonal-button-pressed-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
989
+ /** State layer opacity on pressed. */
990
+ stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
991
+ /** Elevation on pressed. */
992
+ containerElevation: unsafeCSS(`var(--m3e-tonal-button-pressed-container-elevation, ${DesignToken.elevation.level0})`),
993
+ /** Unselected icon color on pressed. */
994
+ unselectedIconColor: unsafeCSS(`var(--m3e-tonal-button-pressed-unselected-icon-color, ${DesignToken.color.onSecondaryContainer})`),
995
+ /** Unselected label color on pressed. */
996
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-pressed-unselected-label-text-color, ${DesignToken.color.onSecondaryContainer})`),
997
+ /** Unselected state layer color on pressed. */
998
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-pressed-unselected-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
999
+ /** Selected icon color on pressed. */
1000
+ selectedIconColor: unsafeCSS(`var(--m3e-tonal-button-pressed-selected-icon-color, ${DesignToken.color.onSecondary})`),
1001
+ /** Selected label color on pressed. */
1002
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-pressed-selected-label-text-color, ${DesignToken.color.onSecondary})`),
1003
+ /** Selected state layer color on pressed. */
1004
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-pressed-selected-state-layer-color, ${DesignToken.color.onSecondary})`)
1005
+ }
1006
+ },
1007
+ /** Design tokens that control the `text` variant. */
1008
+ text: {
1009
+ /** Default label color. */
1010
+ labelTextColor: unsafeCSS(`var(--m3e-text-button-label-text-color, ${DesignToken.color.primary})`),
1011
+ /** Default icon color. */
1012
+ iconColor: unsafeCSS(`var(--m3e-text-button-icon-color, ${DesignToken.color.primary})`),
1013
+ /** Unselected label color. */
1014
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-unselected-label-text-color, ${DesignToken.color.primary})`),
1015
+ /** Unselected icon color. */
1016
+ unselectedIconColor: unsafeCSS(`var(--m3e-text-button-unselected-icon-color, ${DesignToken.color.primary})`),
1017
+ /** Selected label color. */
1018
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-selected-label-text-color, ${DesignToken.color.primary})`),
1019
+ /** Selected icon color. */
1020
+ selectedIconColor: unsafeCSS(`var(--m3e-text-button-selected-icon-color, ${DesignToken.color.primary})`),
1021
+ /** Design tokens that control disabled state. */
1022
+ disabled: {
1023
+ /** Container background color when disabled. */
1024
+ containerColor: unsafeCSS(`var(--m3e-text-button-disabled-container-color, ${DesignToken.color.onSurface})`),
1025
+ /** Opacity of container when disabled. */
1026
+ containerOpacity: unsafeCSS(`var(--m3e-text-button-disabled-container-opacity, 10%)`),
1027
+ /** Icon color when disabled. */
1028
+ iconColor: unsafeCSS(`var(--m3e-text-button-disabled-icon-color, ${DesignToken.color.onSurface})`),
1029
+ /** Icon opacity when disabled. */
1030
+ iconOpacity: unsafeCSS(`var(--m3e-text-button-disabled-icon-opacity, 38%)`),
1031
+ /** Label color when disabled. */
1032
+ labelTextColor: unsafeCSS(`var(--m3e-text-button-disabled-label-text-color, ${DesignToken.color.onSurface})`),
1033
+ /** Label opacity when disabled. */
1034
+ labelTextOpacity: unsafeCSS(`var(--m3e-text-button-disabled-label-text-opacity, 38%)`)
1035
+ },
1036
+ /** Design tokens that control hover state. */
1037
+ hover: {
1038
+ /** Icon color on hover. */
1039
+ iconColor: unsafeCSS(`var(--m3e-text-button-hover-icon-color, ${DesignToken.color.primary})`),
1040
+ /** Label color on hover. */
1041
+ labelTextColor: unsafeCSS(`var(--m3e-text-button-hover-label-text-color, ${DesignToken.color.primary})`),
1042
+ /** State layer color on hover. */
1043
+ stateLayerColor: unsafeCSS(`var(--m3e-text-button-hover-state-layer-color, ${DesignToken.color.primary})`),
1044
+ /** State layer opacity on hover. */
1045
+ stateLayerOpacity: unsafeCSS(`var(--m3e-text-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
1046
+ /** Unselected icon color on hover. */
1047
+ unselectedIconColor: unsafeCSS(`var(--m3e-text-button-hover-unselected-icon-color, ${DesignToken.color.primary})`),
1048
+ /** Unselected label color on hover. */
1049
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-hover-unselected-label-text-color, ${DesignToken.color.primary})`),
1050
+ /** Unselected state layer color on hover. */
1051
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-hover-unselected-state-layer-color, ${DesignToken.color.primary})`),
1052
+ /** Selected icon color on hover. */
1053
+ selectedIconColor: unsafeCSS(`var(--m3e-text-button-hover-selected-icon-color, ${DesignToken.color.primary})`),
1054
+ /** Selected label color on hover. */
1055
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-hover-selected-label-text-color, ${DesignToken.color.primary})`),
1056
+ /** Selected state layer color on hover. */
1057
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-hover-selected-state-layer-color, ${DesignToken.color.primary})`)
1058
+ },
1059
+ /** Design tokens that control focus state. */
1060
+ focus: {
1061
+ /** Icon color on focus. */
1062
+ iconColor: unsafeCSS(`var(--m3e-text-button-focus-icon-color, ${DesignToken.color.primary})`),
1063
+ /** Label color on focus. */
1064
+ labelTextColor: unsafeCSS(`var(--m3e-text-button-focus-label-text-color, ${DesignToken.color.primary})`),
1065
+ /** State layer color on focus. */
1066
+ stateLayerColor: unsafeCSS(`var(--m3e-text-button-focus-state-layer-color, ${DesignToken.color.primary})`),
1067
+ /**State layer opacity on focus. */
1068
+ stateLayerOpacity: unsafeCSS(`var(--m3e-text-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
1069
+ /** Unselected icon color on focus. */
1070
+ unselectedIconColor: unsafeCSS(`var(--m3e-text-button-focus-unselected-icon-color, ${DesignToken.color.primary})`),
1071
+ /** Unselected label color on focus. */
1072
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-focus-unselected-label-text-color, ${DesignToken.color.primary})`),
1073
+ /** Unselected state layer color on focus. */
1074
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-focus-unselected-state-layer-color, ${DesignToken.color.primary})`),
1075
+ /** Selected icon color on focus. */
1076
+ selectedIconColor: unsafeCSS(`var(--m3e-text-button-focus-selected-icon-color, ${DesignToken.color.primary})`),
1077
+ /** Selected label color on focus. */
1078
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-focus-selected-label-text-color, ${DesignToken.color.primary})`),
1079
+ /** Selected state layer color on focus. */
1080
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-focus-selected-state-layer-color, ${DesignToken.color.primary})`)
1081
+ },
1082
+ /** Design tokens that control pressed state. */
1083
+ pressed: {
1084
+ /** Icon color on pressed. */
1085
+ iconColor: unsafeCSS(`var(--m3e-text-button-pressed-icon-color, ${DesignToken.color.primary})`),
1086
+ /** Label color on pressed. */
1087
+ labelTextColor: unsafeCSS(`var(--m3e-text-button-pressed-label-text-color, ${DesignToken.color.primary})`),
1088
+ /** State layer color on pressed. */
1089
+ stateLayerColor: unsafeCSS(`var(--m3e-text-button-pressed-state-layer-color, ${DesignToken.color.primary})`),
1090
+ /** State layer opacity on pressed. */
1091
+ stateLayerOpacity: unsafeCSS(`var(--m3e-text-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
1092
+ /** Unselected icon color on pressed. */
1093
+ unselectedIconColor: unsafeCSS(`var(--m3e-text-button-pressed-unselected-icon-color, ${DesignToken.color.primary})`),
1094
+ /** Unselected label color on pressed. */
1095
+ unselectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-pressed-unselected-label-text-color, ${DesignToken.color.primary})`),
1096
+ /** Unselected state layer color on pressed. */
1097
+ unselectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-pressed-unselected-state-layer-color, ${DesignToken.color.primary})`),
1098
+ /** Selected icon color on pressed. */
1099
+ selectedIconColor: unsafeCSS(`var(--m3e-text-button-pressed-selected-icon-color, ${DesignToken.color.primary})`),
1100
+ /** Selected label color on pressed. */
1101
+ selectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-pressed-selected-label-text-color, ${DesignToken.color.primary})`),
1102
+ /** Selected state layer color on pressed. */
1103
+ selectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-pressed-selected-state-layer-color, ${DesignToken.color.primary})`)
1104
+ }
1105
+ }
1019
1106
  };
1020
1107
 
1021
1108
  /** @private */
1022
1109
  function buttonVariantStyle(variant) {
1023
- return css `
1024
- :host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .base {
1025
- background-color: ${ButtonVariantToken[variant].containerColor ?? unsafeCSS("unset")};
1026
- --m3e-state-layer-hover-color: ${ButtonVariantToken[variant].hover.stateLayerColor};
1027
- --m3e-state-layer-hover-opacity: ${ButtonVariantToken[variant].hover.stateLayerOpacity};
1028
- --m3e-state-layer-focus-color: ${ButtonVariantToken[variant].focus.stateLayerColor};
1029
- --m3e-state-layer-focus-opacity: ${ButtonVariantToken[variant].focus.stateLayerOpacity};
1030
- --m3e-ripple-color: ${ButtonVariantToken[variant].pressed.stateLayerColor};
1031
- --m3e-ripple-opacity: ${ButtonVariantToken[variant].pressed.stateLayerOpacity};
1032
- --m3e-elevation-level: ${ButtonVariantToken[variant].containerElevation ?? unsafeCSS("unset")};
1033
- --m3e-elevation-hover-level: ${ButtonVariantToken[variant].hover.containerElevation ?? unsafeCSS("unset")};
1034
- --m3e-elevation-focus-level: ${ButtonVariantToken[variant].focus.containerElevation ?? unsafeCSS("unset")};
1035
- --m3e-elevation-pressed-level: ${ButtonVariantToken[variant].pressed.containerElevation ?? unsafeCSS("unset")};
1036
- }
1037
- :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .base {
1038
- background-color: ${ButtonVariantToken[variant].unselectedContainerColor ?? unsafeCSS("unset")};
1039
- --m3e-state-layer-hover-color: ${ButtonVariantToken[variant].hover.unselectedStateLayerColor};
1040
- --m3e-state-layer-focus-color: ${ButtonVariantToken[variant].focus.unselectedStateLayerColor};
1041
- --m3e-ripple-color: ${ButtonVariantToken[variant].pressed.unselectedStateLayerColor};
1042
- }
1043
- :host([variant="${unsafeCSS(variant)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .base {
1044
- background-color: ${ButtonVariantToken[variant].selectedContainerColor ?? unsafeCSS("unset")};
1045
- --m3e-state-layer-hover-color: ${ButtonVariantToken[variant].hover.selectedStateLayerColor};
1046
- --m3e-state-layer-focus-color: ${ButtonVariantToken[variant].focus.selectedStateLayerColor};
1047
- --m3e-ripple-color: ${ButtonVariantToken[variant].pressed.selectedStateLayerColor};
1048
- }
1049
- :host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .base {
1050
- outline-color: ${ButtonVariantToken[variant].outlineColor ?? unsafeCSS("unset")};
1051
- }
1052
- :host([variant="${unsafeCSS(variant)}"]:focus:not(:disabled):not([disabled-interactive])) .base {
1053
- outline-color: ${ButtonVariantToken[variant].focus.outlineColor ?? unsafeCSS("unset")};
1054
- }
1055
- :host([variant="${unsafeCSS(variant)}"]:hover:not(:disabled):not([disabled-interactive])) .base {
1056
- outline-color: ${ButtonVariantToken[variant].hover.outlineColor ?? unsafeCSS("unset")};
1057
- }
1058
- :host([variant="${unsafeCSS(variant)}"].-pressed:not(:disabled):not([disabled-interactive])) .base {
1059
- outline-color: ${ButtonVariantToken[variant].pressed.outlineColor ?? unsafeCSS("unset")};
1060
- }
1061
- :host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .label {
1062
- color: ${ButtonVariantToken[variant].labelTextColor};
1063
- }
1064
- :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .label {
1065
- color: ${ButtonVariantToken[variant].unselectedLabelTextColor};
1066
- }
1067
- :host([variant="${unsafeCSS(variant)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .label {
1068
- color: ${ButtonVariantToken[variant].selectedLabelTextColor};
1069
- }
1070
- :host([variant="${unsafeCSS(variant)}"]:focus:not(:disabled):not([disabled-interactive])) .label {
1071
- color: ${ButtonVariantToken[variant].focus.labelTextColor};
1072
- }
1073
- :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive]))
1074
- .label {
1075
- color: ${ButtonVariantToken[variant].focus.unselectedLabelTextColor};
1076
- }
1077
- :host([variant="${unsafeCSS(variant)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .label {
1078
- color: ${ButtonVariantToken[variant].focus.selectedLabelTextColor};
1079
- }
1080
- :host([variant="${unsafeCSS(variant)}"]:hover:not(:disabled):not([disabled-interactive])) .label {
1081
- color: ${ButtonVariantToken[variant].hover.labelTextColor};
1082
- }
1083
- :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive]))
1084
- .label {
1085
- color: ${ButtonVariantToken[variant].hover.unselectedLabelTextColor};
1086
- }
1087
- :host([variant="${unsafeCSS(variant)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .label {
1088
- color: ${ButtonVariantToken[variant].hover.selectedLabelTextColor};
1089
- }
1090
- :host([variant="${unsafeCSS(variant)}"].-pressed:not(:disabled):not([disabled-interactive])) .label {
1091
- color: ${ButtonVariantToken[variant].pressed.labelTextColor};
1092
- }
1093
- :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]).-pressed:not(:disabled):not([disabled-interactive]))
1094
- .label {
1095
- color: ${ButtonVariantToken[variant].pressed.unselectedLabelTextColor};
1096
- }
1097
- :host([variant="${unsafeCSS(variant)}"][toggle][selected].-pressed:not(:disabled):not([disabled-interactive]))
1098
- .label {
1099
- color: ${ButtonVariantToken[variant].pressed.selectedLabelTextColor};
1100
- }
1101
- :host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .icon {
1102
- color: ${ButtonVariantToken[variant].iconColor};
1103
- }
1104
- :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .icon {
1105
- color: ${ButtonVariantToken[variant].unselectedIconColor};
1106
- }
1107
- :host([variant="${unsafeCSS(variant)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .icon {
1108
- color: ${ButtonVariantToken[variant].selectedIconColor};
1109
- }
1110
- :host([variant="${unsafeCSS(variant)}"]:focus:not(:disabled):not([disabled-interactive])) .icon {
1111
- color: ${ButtonVariantToken[variant].focus.iconColor};
1112
- }
1113
- :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive]))
1114
- .icon {
1115
- color: ${ButtonVariantToken[variant].focus.unselectedIconColor};
1116
- }
1117
- :host([variant="${unsafeCSS(variant)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .icon {
1118
- color: ${ButtonVariantToken[variant].focus.selectedIconColor};
1119
- }
1120
- :host([variant="${unsafeCSS(variant)}"]:hover:not(:disabled):not([disabled-interactive])) .icon {
1121
- color: ${ButtonVariantToken[variant].hover.iconColor};
1122
- }
1123
- :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive]))
1124
- .icon {
1125
- color: ${ButtonVariantToken[variant].hover.unselectedIconColor};
1126
- }
1127
- :host([variant="${unsafeCSS(variant)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .icon {
1128
- color: ${ButtonVariantToken[variant].hover.selectedIconColor};
1129
- }
1130
- :host([variant="${unsafeCSS(variant)}"].-pressed:not(:disabled):not([disabled-interactive])) .icon {
1131
- color: ${ButtonVariantToken[variant].pressed.iconColor};
1132
- }
1133
- :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]).-pressed:not(:disabled):not([disabled-interactive]))
1134
- .icon {
1135
- color: ${ButtonVariantToken[variant].pressed.unselectedIconColor};
1136
- }
1137
- :host([variant="${unsafeCSS(variant)}"][toggle][selected].-pressed:not(:disabled):not([disabled-interactive]))
1138
- .icon {
1139
- color: ${ButtonVariantToken[variant].pressed.selectedIconColor};
1140
- }
1141
- :host([variant="${unsafeCSS(variant)}"]:disabled) .base,
1142
- :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .base {
1143
- --m3e-elevation-level: ${ButtonVariantToken[variant].disabled.containerElevation ?? unsafeCSS("unset")};
1144
- outline-color: ${ButtonVariantToken[variant].disabled.outlineColor ?? unsafeCSS("unset")};
1145
- background-color: color-mix(
1146
- in srgb,
1147
- ${ButtonVariantToken[variant].disabled.containerColor} ${ButtonVariantToken[variant].disabled.containerOpacity},
1148
- transparent
1149
- );
1150
- }
1151
- :host([variant="${unsafeCSS(variant)}"]:disabled) .label,
1152
- :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .label {
1153
- color: color-mix(
1154
- in srgb,
1155
- ${ButtonVariantToken[variant].disabled.labelTextColor} ${ButtonVariantToken[variant].disabled.labelTextOpacity},
1156
- transparent
1157
- );
1158
- }
1159
- :host([variant="${unsafeCSS(variant)}"]:disabled) .icon,
1160
- :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .icon {
1161
- color: color-mix(
1162
- in srgb,
1163
- ${ButtonVariantToken[variant].disabled.iconColor} ${ButtonVariantToken[variant].disabled.iconOpacity},
1164
- transparent
1165
- );
1166
- }
1167
- `;
1110
+ return css`:host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .base { background-color: ${ButtonVariantToken[variant].containerColor ?? unsafeCSS("unset")}; --m3e-state-layer-hover-color: ${ButtonVariantToken[variant].hover.stateLayerColor}; --m3e-state-layer-hover-opacity: ${ButtonVariantToken[variant].hover.stateLayerOpacity}; --m3e-state-layer-focus-color: ${ButtonVariantToken[variant].focus.stateLayerColor}; --m3e-state-layer-focus-opacity: ${ButtonVariantToken[variant].focus.stateLayerOpacity}; --m3e-ripple-color: ${ButtonVariantToken[variant].pressed.stateLayerColor}; --m3e-ripple-opacity: ${ButtonVariantToken[variant].pressed.stateLayerOpacity}; --m3e-elevation-level: ${ButtonVariantToken[variant].containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-hover-level: ${ButtonVariantToken[variant].hover.containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-focus-level: ${ButtonVariantToken[variant].focus.containerElevation ?? unsafeCSS("unset")}; --m3e-elevation-pressed-level: ${ButtonVariantToken[variant].pressed.containerElevation ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .base { background-color: ${ButtonVariantToken[variant].unselectedContainerColor ?? unsafeCSS("unset")}; --m3e-state-layer-hover-color: ${ButtonVariantToken[variant].hover.unselectedStateLayerColor}; --m3e-state-layer-focus-color: ${ButtonVariantToken[variant].focus.unselectedStateLayerColor}; --m3e-ripple-color: ${ButtonVariantToken[variant].pressed.unselectedStateLayerColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .base { background-color: ${ButtonVariantToken[variant].selectedContainerColor ?? unsafeCSS("unset")}; --m3e-state-layer-hover-color: ${ButtonVariantToken[variant].hover.selectedStateLayerColor}; --m3e-state-layer-focus-color: ${ButtonVariantToken[variant].focus.selectedStateLayerColor}; --m3e-ripple-color: ${ButtonVariantToken[variant].pressed.selectedStateLayerColor}; } :host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .base { outline-color: ${ButtonVariantToken[variant].outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]:focus:not(:disabled):not([disabled-interactive])) .base { outline-color: ${ButtonVariantToken[variant].focus.outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]:hover:not(:disabled):not([disabled-interactive])) .base { outline-color: ${ButtonVariantToken[variant].hover.outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"].-pressed:not(:disabled):not([disabled-interactive])) .base { outline-color: ${ButtonVariantToken[variant].pressed.outlineColor ?? unsafeCSS("unset")}; } :host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .label { color: ${ButtonVariantToken[variant].labelTextColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .label { color: ${ButtonVariantToken[variant].unselectedLabelTextColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .label { color: ${ButtonVariantToken[variant].selectedLabelTextColor}; } :host([variant="${unsafeCSS(variant)}"]:focus:not(:disabled):not([disabled-interactive])) .label { color: ${ButtonVariantToken[variant].focus.labelTextColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive])) .label { color: ${ButtonVariantToken[variant].focus.unselectedLabelTextColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .label { color: ${ButtonVariantToken[variant].focus.selectedLabelTextColor}; } :host([variant="${unsafeCSS(variant)}"]:hover:not(:disabled):not([disabled-interactive])) .label { color: ${ButtonVariantToken[variant].hover.labelTextColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive])) .label { color: ${ButtonVariantToken[variant].hover.unselectedLabelTextColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .label { color: ${ButtonVariantToken[variant].hover.selectedLabelTextColor}; } :host([variant="${unsafeCSS(variant)}"].-pressed:not(:disabled):not([disabled-interactive])) .label { color: ${ButtonVariantToken[variant].pressed.labelTextColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]).-pressed:not(:disabled):not([disabled-interactive])) .label { color: ${ButtonVariantToken[variant].pressed.unselectedLabelTextColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected].-pressed:not(:disabled):not([disabled-interactive])) .label { color: ${ButtonVariantToken[variant].pressed.selectedLabelTextColor}; } :host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .icon { color: ${ButtonVariantToken[variant].iconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ${ButtonVariantToken[variant].unselectedIconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .icon { color: ${ButtonVariantToken[variant].selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${ButtonVariantToken[variant].focus.iconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive])) .icon { color: ${ButtonVariantToken[variant].focus.unselectedIconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${ButtonVariantToken[variant].focus.selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${ButtonVariantToken[variant].hover.iconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive])) .icon { color: ${ButtonVariantToken[variant].hover.unselectedIconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${ButtonVariantToken[variant].hover.selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"].-pressed:not(:disabled):not([disabled-interactive])) .icon { color: ${ButtonVariantToken[variant].pressed.iconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]).-pressed:not(:disabled):not([disabled-interactive])) .icon { color: ${ButtonVariantToken[variant].pressed.unselectedIconColor}; } :host([variant="${unsafeCSS(variant)}"][toggle][selected].-pressed:not(:disabled):not([disabled-interactive])) .icon { color: ${ButtonVariantToken[variant].pressed.selectedIconColor}; } :host([variant="${unsafeCSS(variant)}"]:disabled) .base, :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .base { --m3e-elevation-level: ${ButtonVariantToken[variant].disabled.containerElevation ?? unsafeCSS("unset")}; outline-color: ${ButtonVariantToken[variant].disabled.outlineColor ?? unsafeCSS("unset")}; background-color: color-mix( in srgb, ${ButtonVariantToken[variant].disabled.containerColor} ${ButtonVariantToken[variant].disabled.containerOpacity}, transparent ); } :host([variant="${unsafeCSS(variant)}"]:disabled) .label, :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .label { color: color-mix( in srgb, ${ButtonVariantToken[variant].disabled.labelTextColor} ${ButtonVariantToken[variant].disabled.labelTextOpacity}, transparent ); } :host([variant="${unsafeCSS(variant)}"]:disabled) .icon, :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .icon { color: color-mix( in srgb, ${ButtonVariantToken[variant].disabled.iconColor} ${ButtonVariantToken[variant].disabled.iconOpacity}, transparent ); }`;
1168
1111
  }
1169
1112
  /**
1170
1113
  * Appearance variant styles for `M3eButtonElement`.
1171
1114
  * @internal
1172
1115
  */
1173
- const ButtonVariantStyle = [
1174
- buttonVariantStyle("text"),
1175
- buttonVariantStyle("elevated"),
1176
- buttonVariantStyle("outlined"),
1177
- buttonVariantStyle("filled"),
1178
- buttonVariantStyle("tonal"),
1179
- css `
1180
- :host([variant="outlined"]) .base {
1181
- outline-style: solid;
1182
- }
1183
- `,
1184
- ];
1116
+ const ButtonVariantStyle = [buttonVariantStyle("text"), buttonVariantStyle("elevated"), buttonVariantStyle("outlined"), buttonVariantStyle("filled"), buttonVariantStyle("tonal"), css`:host([variant="outlined"]) .base { outline-style: solid; }`];
1185
1117
 
1186
1118
  var _M3eButtonElement_instances, _M3eButtonElement_clickHandler, _M3eButtonElement_handleClick, _M3eButtonElement_handleSelectedIconSlotChange, _M3eButtonElement_updateButtonShape;
1187
1119
  /**
@@ -1552,232 +1484,199 @@ var _M3eButtonElement_instances, _M3eButtonElement_clickHandler, _M3eButtonEleme
1552
1484
  * @cssprop --m3e-text-button-pressed-selected-state-layer-color - Pressed selected state layer color, for the text variant.
1553
1485
  */
1554
1486
  let M3eButtonElement = class M3eButtonElement extends KeyboardClick(LinkButton(FormSubmitter(Focusable(DisabledInteractive(Disabled(AttachInternals(Role(LitElement, "button"), true))))))) {
1555
- constructor() {
1556
- super();
1557
- _M3eButtonElement_instances.add(this);
1558
- /** @private */ _M3eButtonElement_clickHandler.set(this, (e) => __classPrivateFieldGet(this, _M3eButtonElement_instances, "m", _M3eButtonElement_handleClick).call(this, e));
1559
- /**
1560
- * The appearance variant of the button.
1561
- * @default "text"
1562
- */
1563
- this.variant = "text";
1564
- /**
1565
- * The shape of the button.
1566
- * @default "rounded"
1567
- */
1568
- this.shape = "rounded";
1569
- /**
1570
- * The size of the button.
1571
- * @default "small"
1572
- */
1573
- this.size = "small";
1574
- /**
1575
- * Whether the button will toggle between selected and unselected states.
1576
- * @default false
1577
- */
1578
- this.toggle = false;
1579
- /**
1580
- * Whether the toggle button is selected.
1581
- * @default false
1582
- */
1583
- this.selected = false;
1584
- new ResizeController(this, {
1585
- callback: () => {
1586
- if (this.grouped) {
1587
- this._handleResize();
1588
- }
1589
- },
1590
- });
1591
- new FocusController(this, {
1592
- callback: (focused) => {
1593
- if (!this.disabledInteractive && this._base) {
1594
- if (focused) {
1595
- __classPrivateFieldGet(this, _M3eButtonElement_instances, "m", _M3eButtonElement_updateButtonShape).call(this);
1596
- }
1597
- else if (!this.grouped) {
1598
- this._base?.style.removeProperty("--_button-shape");
1599
- }
1600
- }
1601
- },
1602
- });
1603
- new PressedController(this, {
1604
- isPressedKey: (key) => key === " ",
1605
- minPressedDuration: 150,
1606
- callback: (pressed) => {
1607
- if (!this.disabled && !this.disabledInteractive) {
1608
- this.classList.toggle("-pressed", pressed);
1609
- this.classList.toggle("-resting", !pressed);
1610
- const group = this.closest("m3e-button-group");
1611
- if (group) {
1612
- const clientWidth = this.getBoundingClientRect().width;
1613
- const buttons = [...group.querySelectorAll("m3e-button,m3e-icon-button")];
1614
- const index = buttons.indexOf(this);
1615
- for (let i = 0; i < buttons.length; i++) {
1616
- const button = buttons[i];
1617
- if (i === index - 1) {
1618
- button.style.setProperty("--_adjacent-button-width", `${clientWidth}px`);
1619
- button.classList.toggle("-adjacent-pressed", pressed);
1620
- }
1621
- else if (i === index + 1) {
1622
- button.style.setProperty("--_adjacent-button-width", `${clientWidth}px`);
1623
- button.classList.toggle("-adjacent-pressed", pressed);
1624
- }
1625
- else {
1626
- button.style.removeProperty("--_adjacent-button-width");
1627
- button.classList.remove("-adjacent-pressed");
1628
- }
1629
- }
1630
- }
1631
- }
1632
- },
1633
- });
1634
- }
1635
- /** Whether the button is contained by a button group. */
1636
- get grouped() {
1637
- return this.classList.contains("-grouped");
1638
- }
1639
- /** @inheritdoc */
1640
- render() {
1641
- return html `<div class="base">
1642
- <m3e-elevation class="elevation" ?disabled="${this.disabled || this.disabledInteractive}"></m3e-elevation>
1643
- <m3e-state-layer class="state-layer" ?disabled="${this.disabled || this.disabledInteractive}"></m3e-state-layer>
1644
- <m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring>
1645
- <m3e-ripple class="ripple" ?disabled="${this.disabled || this.disabledInteractive}"></m3e-ripple>
1646
- <div class="touch" aria-hidden="true"></div>
1647
- ${this[renderPseudoLink]()}
1648
- <div class="wrapper">
1649
- ${this.toggle
1650
- ? html `<slot
1651
- class="icon"
1652
- name="selected-icon"
1653
- aria-hidden="true"
1654
- @slotchange="${__classPrivateFieldGet(this, _M3eButtonElement_instances, "m", _M3eButtonElement_handleSelectedIconSlotChange)}"
1655
- ></slot>`
1656
- : nothing}
1657
- <slot class="icon" name="icon" aria-hidden="true"></slot>
1658
- <div class="label">
1659
- ${this.toggle && this.selected ? html `<slot name="selected"><slot></slot></slot>` : html `<slot></slot>`}
1660
- </div>
1661
- <slot class="icon" name="trailing-icon" aria-hidden="true"></slot>
1662
- </div>
1663
- </div>`;
1664
- }
1665
- /** @inheritdoc */
1666
- connectedCallback() {
1667
- super.connectedCallback();
1668
- this.addEventListener("click", __classPrivateFieldGet(this, _M3eButtonElement_clickHandler, "f"));
1669
- }
1670
- /** @inheritdoc */
1671
- disconnectedCallback() {
1672
- super.disconnectedCallback();
1673
- ["-pressed", "-resting", "-grouped", "-connected"].forEach((x) => this.classList.remove(x));
1674
- this._base?.style.removeProperty("--_button-shape");
1675
- this.style.removeProperty("--_button-width");
1676
- this.style.removeProperty("--_adjacent-button-width");
1677
- this.classList.remove("-adjacent-pressed");
1678
- this.removeEventListener("click", __classPrivateFieldGet(this, _M3eButtonElement_clickHandler, "f"));
1679
- }
1680
- /** @inheritdoc */
1681
- firstUpdated(_changedProperties) {
1682
- super.firstUpdated(_changedProperties);
1683
- [this._elevation, this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));
1684
- }
1685
- /** @inheritdoc */
1686
- updated(_changedProperties) {
1687
- super.updated(_changedProperties);
1688
- if ((_changedProperties.has("disabled") && this.disabled) ||
1689
- (_changedProperties.has("disabledInteractive") && this.disabledInteractive)) {
1690
- this.classList.toggle("-pressed", false);
1691
- this.classList.toggle("-resting", false);
1487
+ constructor() {
1488
+ super();
1489
+ _M3eButtonElement_instances.add(this);
1490
+ /** @private */
1491
+ _M3eButtonElement_clickHandler.set(this, e => __classPrivateFieldGet(this, _M3eButtonElement_instances, "m", _M3eButtonElement_handleClick).call(this, e));
1492
+ /**
1493
+ * The appearance variant of the button.
1494
+ * @default "text"
1495
+ */
1496
+ this.variant = "text";
1497
+ /**
1498
+ * The shape of the button.
1499
+ * @default "rounded"
1500
+ */
1501
+ this.shape = "rounded";
1502
+ /**
1503
+ * The size of the button.
1504
+ * @default "small"
1505
+ */
1506
+ this.size = "small";
1507
+ /**
1508
+ * Whether the button will toggle between selected and unselected states.
1509
+ * @default false
1510
+ */
1511
+ this.toggle = false;
1512
+ /**
1513
+ * Whether the toggle button is selected.
1514
+ * @default false
1515
+ */
1516
+ this.selected = false;
1517
+ new ResizeController(this, {
1518
+ callback: () => {
1519
+ if (this.grouped) {
1520
+ this._handleResize();
1692
1521
  }
1693
- if (_changedProperties.has("toggle") || _changedProperties.has("selected")) {
1694
- this.ariaPressed = this.toggle ? `${this.selected}` : null;
1695
- if (this.toggle) {
1696
- for (const icon of this.querySelectorAll("m3e-icon")) {
1697
- icon.toggleAttribute("filled", this.selected);
1698
- }
1522
+ }
1523
+ });
1524
+ new FocusController(this, {
1525
+ callback: focused => {
1526
+ if (!this.disabledInteractive && this._base) {
1527
+ if (focused) {
1528
+ __classPrivateFieldGet(this, _M3eButtonElement_instances, "m", _M3eButtonElement_updateButtonShape).call(this);
1529
+ } else if (!this.grouped) {
1530
+ this._base?.style.removeProperty("--_button-shape");
1531
+ }
1532
+ }
1533
+ }
1534
+ });
1535
+ new PressedController(this, {
1536
+ isPressedKey: key => key === " ",
1537
+ minPressedDuration: 150,
1538
+ callback: pressed => {
1539
+ if (!this.disabled && !this.disabledInteractive) {
1540
+ this.classList.toggle("-pressed", pressed);
1541
+ this.classList.toggle("-resting", !pressed);
1542
+ const group = this.closest("m3e-button-group");
1543
+ if (group) {
1544
+ const clientWidth = this.getBoundingClientRect().width;
1545
+ const buttons = [...group.querySelectorAll("m3e-button,m3e-icon-button")];
1546
+ const index = buttons.indexOf(this);
1547
+ for (let i = 0; i < buttons.length; i++) {
1548
+ const button = buttons[i];
1549
+ if (i === index - 1) {
1550
+ button.style.setProperty("--_adjacent-button-width", `${clientWidth}px`);
1551
+ button.classList.toggle("-adjacent-pressed", pressed);
1552
+ } else if (i === index + 1) {
1553
+ button.style.setProperty("--_adjacent-button-width", `${clientWidth}px`);
1554
+ button.classList.toggle("-adjacent-pressed", pressed);
1555
+ } else {
1556
+ button.style.removeProperty("--_adjacent-button-width");
1557
+ button.classList.remove("-adjacent-pressed");
1558
+ }
1699
1559
  }
1560
+ }
1700
1561
  }
1562
+ }
1563
+ });
1564
+ }
1565
+ /** Whether the button is contained by a button group. */
1566
+ get grouped() {
1567
+ return this.classList.contains("-grouped");
1568
+ }
1569
+ /** @inheritdoc */
1570
+ render() {
1571
+ return html`<div class="base"><m3e-elevation class="elevation" ?disabled="${this.disabled || this.disabledInteractive}"></m3e-elevation><m3e-state-layer class="state-layer" ?disabled="${this.disabled || this.disabledInteractive}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled || this.disabledInteractive}"></m3e-ripple><div class="touch" aria-hidden="true"></div>${this[renderPseudoLink]()}<div class="wrapper">${this.toggle ? html`<slot class="icon" name="selected-icon" aria-hidden="true" @slotchange="${__classPrivateFieldGet(this, _M3eButtonElement_instances, "m", _M3eButtonElement_handleSelectedIconSlotChange)}"></slot>` : nothing}<slot class="icon" name="icon" aria-hidden="true"></slot><div class="label">${this.toggle && this.selected ? html`<slot name="selected"><slot></slot></slot>` : html`<slot></slot>`}</div><slot class="icon" name="trailing-icon" aria-hidden="true"></slot></div></div>`;
1572
+ }
1573
+ /** @inheritdoc */
1574
+ connectedCallback() {
1575
+ super.connectedCallback();
1576
+ this.addEventListener("click", __classPrivateFieldGet(this, _M3eButtonElement_clickHandler, "f"));
1577
+ }
1578
+ /** @inheritdoc */
1579
+ disconnectedCallback() {
1580
+ super.disconnectedCallback();
1581
+ ["-pressed", "-resting", "-grouped", "-connected"].forEach(x => this.classList.remove(x));
1582
+ this._base?.style.removeProperty("--_button-shape");
1583
+ this.style.removeProperty("--_button-width");
1584
+ this.style.removeProperty("--_adjacent-button-width");
1585
+ this.classList.remove("-adjacent-pressed");
1586
+ this.removeEventListener("click", __classPrivateFieldGet(this, _M3eButtonElement_clickHandler, "f"));
1587
+ }
1588
+ /** @inheritdoc */
1589
+ firstUpdated(_changedProperties) {
1590
+ super.firstUpdated(_changedProperties);
1591
+ [this._elevation, this._focusRing, this._stateLayer, this._ripple].forEach(x => x?.attach(this));
1592
+ }
1593
+ /** @inheritdoc */
1594
+ updated(_changedProperties) {
1595
+ super.updated(_changedProperties);
1596
+ if (_changedProperties.has("disabled") && this.disabled || _changedProperties.has("disabledInteractive") && this.disabledInteractive) {
1597
+ this.classList.toggle("-pressed", false);
1598
+ this.classList.toggle("-resting", false);
1701
1599
  }
1702
- /** @private */
1703
- _handleResize() {
1704
- if (this.grouped && !this.classList.contains("-pressed")) {
1705
- this.style.setProperty("--_button-width", `${this.clientWidth}px`);
1706
- __classPrivateFieldGet(this, _M3eButtonElement_instances, "m", _M3eButtonElement_updateButtonShape).call(this, true);
1600
+ if (_changedProperties.has("toggle") || _changedProperties.has("selected")) {
1601
+ this.ariaPressed = this.toggle ? `${this.selected}` : null;
1602
+ if (this.toggle) {
1603
+ for (const icon of this.querySelectorAll("m3e-icon")) {
1604
+ icon.toggleAttribute("filled", this.selected);
1707
1605
  }
1606
+ }
1708
1607
  }
1608
+ }
1609
+ /** @private */
1610
+ _handleResize() {
1611
+ if (this.grouped && !this.classList.contains("-pressed")) {
1612
+ this.style.setProperty("--_button-width", `${this.clientWidth}px`);
1613
+ __classPrivateFieldGet(this, _M3eButtonElement_instances, "m", _M3eButtonElement_updateButtonShape).call(this, true);
1614
+ }
1615
+ }
1709
1616
  };
1710
1617
  _M3eButtonElement_clickHandler = new WeakMap();
1711
1618
  _M3eButtonElement_instances = new WeakSet();
1712
1619
  _M3eButtonElement_handleClick = function _M3eButtonElement_handleClick(e) {
1713
- if (this.disabled || this.disabledInteractive) {
1714
- e.preventDefault();
1715
- e.stopImmediatePropagation();
1716
- }
1717
- if (this.toggle && !e.defaultPrevented) {
1718
- this.selected = !this.selected;
1719
- // Dispatch an input event and if not prevented, dispatch a change event.
1720
- // Otherwise, reset the selected state.
1721
- if (this.dispatchEvent(new Event("input", { bubbles: true, composed: true, cancelable: true }))) {
1722
- this.dispatchEvent(new Event("change", { bubbles: true }));
1723
- }
1724
- else {
1725
- this.selected = !this.selected;
1726
- }
1620
+ if (this.disabled || this.disabledInteractive) {
1621
+ e.preventDefault();
1622
+ e.stopImmediatePropagation();
1623
+ }
1624
+ if (this.toggle && !e.defaultPrevented) {
1625
+ this.selected = !this.selected;
1626
+ // Dispatch an input event and if not prevented, dispatch a change event.
1627
+ // Otherwise, reset the selected state.
1628
+ if (this.dispatchEvent(new Event("input", {
1629
+ bubbles: true,
1630
+ composed: true,
1631
+ cancelable: true
1632
+ }))) {
1633
+ this.dispatchEvent(new Event("change", {
1634
+ bubbles: true
1635
+ }));
1636
+ } else {
1637
+ this.selected = !this.selected;
1727
1638
  }
1639
+ }
1728
1640
  };
1729
1641
  _M3eButtonElement_handleSelectedIconSlotChange = function _M3eButtonElement_handleSelectedIconSlotChange(e) {
1730
- this._base?.classList.toggle("with-selected-icon", hasAssignedNodes(e.target));
1642
+ this._base?.classList.toggle("with-selected-icon", hasAssignedNodes(e.target));
1731
1643
  };
1732
1644
  _M3eButtonElement_updateButtonShape = function _M3eButtonElement_updateButtonShape(force = false) {
1733
- if (!this._base)
1734
- return;
1735
- const shape = parseFloat(getComputedStyle(this._base).borderRadius);
1736
- if (!isNaN(shape) || force) {
1737
- const adjustedShape = this.clientHeight / 2;
1738
- if (adjustedShape < shape || force) {
1739
- this._base?.style.setProperty("--_button-shape", `${adjustedShape}px`);
1740
- }
1645
+ if (!this._base) return;
1646
+ const shape = parseFloat(getComputedStyle(this._base).borderRadius);
1647
+ if (!isNaN(shape) || force) {
1648
+ const adjustedShape = this.clientHeight / 2;
1649
+ if (adjustedShape < shape || force) {
1650
+ this._base?.style.setProperty("--_button-shape", `${adjustedShape}px`);
1741
1651
  }
1652
+ }
1742
1653
  };
1743
1654
  /** The styles of the element. */
1744
1655
  M3eButtonElement.styles = [ButtonSizeStyle, ButtonVariantStyle, ButtonStyle];
1745
- __decorate([
1746
- e(".base")
1747
- ], M3eButtonElement.prototype, "_base", void 0);
1748
- __decorate([
1749
- e(".elevation")
1750
- ], M3eButtonElement.prototype, "_elevation", void 0);
1751
- __decorate([
1752
- e(".focus-ring")
1753
- ], M3eButtonElement.prototype, "_focusRing", void 0);
1754
- __decorate([
1755
- e(".state-layer")
1756
- ], M3eButtonElement.prototype, "_stateLayer", void 0);
1757
- __decorate([
1758
- e(".ripple")
1759
- ], M3eButtonElement.prototype, "_ripple", void 0);
1760
- __decorate([
1761
- n({ reflect: true })
1762
- ], M3eButtonElement.prototype, "variant", void 0);
1763
- __decorate([
1764
- n({ reflect: true })
1765
- ], M3eButtonElement.prototype, "shape", void 0);
1766
- __decorate([
1767
- n({ reflect: true })
1768
- ], M3eButtonElement.prototype, "size", void 0);
1769
- __decorate([
1770
- n({ type: Boolean, reflect: true })
1771
- ], M3eButtonElement.prototype, "toggle", void 0);
1772
- __decorate([
1773
- n({ type: Boolean, reflect: true })
1774
- ], M3eButtonElement.prototype, "selected", void 0);
1775
- __decorate([
1776
- debounce(40)
1777
- ], M3eButtonElement.prototype, "_handleResize", null);
1778
- M3eButtonElement = __decorate([
1779
- t$1("m3e-button")
1780
- ], M3eButtonElement);
1656
+ __decorate([e(".base")], M3eButtonElement.prototype, "_base", void 0);
1657
+ __decorate([e(".elevation")], M3eButtonElement.prototype, "_elevation", void 0);
1658
+ __decorate([e(".focus-ring")], M3eButtonElement.prototype, "_focusRing", void 0);
1659
+ __decorate([e(".state-layer")], M3eButtonElement.prototype, "_stateLayer", void 0);
1660
+ __decorate([e(".ripple")], M3eButtonElement.prototype, "_ripple", void 0);
1661
+ __decorate([n({
1662
+ reflect: true
1663
+ })], M3eButtonElement.prototype, "variant", void 0);
1664
+ __decorate([n({
1665
+ reflect: true
1666
+ })], M3eButtonElement.prototype, "shape", void 0);
1667
+ __decorate([n({
1668
+ reflect: true
1669
+ })], M3eButtonElement.prototype, "size", void 0);
1670
+ __decorate([n({
1671
+ type: Boolean,
1672
+ reflect: true
1673
+ })], M3eButtonElement.prototype, "toggle", void 0);
1674
+ __decorate([n({
1675
+ type: Boolean,
1676
+ reflect: true
1677
+ })], M3eButtonElement.prototype, "selected", void 0);
1678
+ __decorate([debounce(40)], M3eButtonElement.prototype, "_handleResize", null);
1679
+ M3eButtonElement = __decorate([t$1("m3e-button")], M3eButtonElement);
1781
1680
 
1782
1681
  export { M3eButtonElement };
1783
1682
  //# sourceMappingURL=index.js.map