@m3e/fab 1.0.5 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.js +1041 -977
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.min.js +1 -272
  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,279 +44,460 @@ 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
  * Baseline styles for `M3eFabElement`.
85
439
  * @internal
86
440
  */
87
- const FabStyle = css `
88
- :host {
89
- display: inline-block;
90
- outline: none;
91
- user-select: none;
92
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
93
- }
94
- .base {
95
- box-sizing: border-box;
96
- vertical-align: middle;
97
- display: inline-flex;
98
- align-items: center;
99
- justify-content: center;
100
- position: relative;
101
- width: 100%;
102
- transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};
103
- }
104
- .touch {
105
- position: absolute;
106
- height: 3rem;
107
- left: 0;
108
- right: 0;
109
- }
110
- .wrapper {
111
- width: 100%;
112
- overflow: hidden;
113
- display: inline-flex;
114
- align-items: center;
115
- }
116
- .label {
117
- justify-self: center;
118
- flex: 1 1 auto;
119
- text-align: center;
120
- white-space: nowrap;
121
- overflow: hidden;
122
- text-overflow: ellipsis;
123
- transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};
124
- }
125
- .icon {
126
- transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};
127
- }
128
- :host(:not(:disabled):not([disabled-interactive])) {
129
- cursor: pointer;
130
- }
131
- :host([disabled-interactive]) {
132
- cursor: not-allowed;
133
- }
134
- .close-icon,
135
- ::slotted(:not([slot])),
136
- ::slotted([slot="close-icon"]) {
137
- font-size: inherit !important;
138
- flex: none;
139
- }
140
- .close-icon,
141
- ::slotted(svg:not([slot])),
142
- ::slotted(svg[slot="close-icon"]) {
143
- width: 1em;
144
- height: 1em;
145
- }
146
- :host(:not([extended])) ::slotted([slot="label"]),
147
- .base.-with-menu ::slotted([slot="label"]),
148
- .base:not(.-with-menu) ::slotted([slot="close-icon"]),
149
- .base:not(.-with-menu) .close-icon,
150
- :host([aria-expanded="true"]) .base.-with-menu ::slotted(:not([slot])),
151
- :host([aria-expanded="false"]) .base.-with-menu ::slotted([slot="close-icon"]),
152
- :host([aria-expanded="false"]) .base.-with-menu .close-icon {
153
- display: none;
154
- }
155
- :host([aria-expanded="true"]) .base.-with-menu {
156
- border-radius: var(--m3e-fab-menu-close-button-container-shape, ${DesignToken.shape.corner.full});
157
- height: calc(var(--m3e-fab-menu-close-button-container-height, 3.5rem) + ${DesignToken.density.calc(-3)});
158
- }
159
- :host([aria-expanded="true"]) .base.-with-menu .wrapper {
160
- padding-inline-start: calc(var(--m3e-fab-menu-close-button-leading-space, 1rem) + ${DesignToken.density.calc(-3)});
161
- padding-inline-end: calc(var(--m3e-fab-menu-close-button-trailing-space, 1rem) + ${DesignToken.density.calc(-3)});
162
- }
163
- :host([aria-expanded="true"]) .base.-with-menu .icon {
164
- font-size: calc(var(--m3e-fab-menu-close-button-icon-size, 1.5rem) + ${DesignToken.density.calc(-3)});
165
- --m3e-icon-size: calc(var(--m3e-fab-menu-close-button-icon-size, 1.5rem) + ${DesignToken.density.calc(-3)});
166
- }
167
- .base.-with-menu {
168
- transition: height ${DesignToken.motion.spring.fastSpatial};
169
- }
170
- .base.-with-menu .wrapper {
171
- transition: padding ${DesignToken.motion.spring.fastSpatial};
172
- }
173
- a {
174
- all: unset;
175
- display: block;
176
- position: absolute;
177
- top: 0px;
178
- left: 0px;
179
- right: 0px;
180
- bottom: 0px;
181
- z-index: 1;
182
- }
183
- @media (forced-colors: active) {
184
- .base,
185
- .icon {
186
- transition: none;
187
- }
188
- .base {
189
- outline-style: solid;
190
- }
191
- :host([variant]:not(:disabled):not([disabled-interactive])) .base {
192
- background-color: ButtonFace;
193
- outline-color: ButtonText;
194
- }
195
- :host([variant]:not(:disabled):not([disabled-interactive])) .label,
196
- :host([variant]:not(:disabled):not([disabled-interactive])) .icon {
197
- color: ButtonText;
198
- }
199
- :host([variant]:disabled) .base,
200
- :host([variant][disabled-interactive]) .base {
201
- outline-color: GrayText;
202
- background-color: unset;
203
- }
204
- :host([variant]:disabled) .label,
205
- :host([variant][disabled-interactive]) .label,
206
- :host([variant]:disabled) .icon,
207
- :host([variant][disabled-interactive]) .icon {
208
- color: GrayText;
209
- }
210
- :host([size="small"]) .base {
211
- outline-offset: calc(0px - var(--m3e-button-small-outline-thickness, 1px));
212
- outline-width: var(--m3e-button-small-outline-thickness, 1px);
213
- }
214
- :host([size="medium"]) .base {
215
- outline-offset: calc(0px - var(--m3e-button-medium-outline-thickness, 1px));
216
- outline-width: var(--m3e-button-medium-outline-thickness, 1px);
217
- }
218
- :host([size="large"]) .base {
219
- outline-offset: calc(0px - var(--m3e-button-large-outline-thickness, 0.125rem));
220
- outline-width: var(--m3e-button-large-outline-thickness, 0.125rem);
221
- }
222
- }
223
- @media (prefers-reduced-motion) {
224
- .base,
225
- .base.resting,
226
- .base.pressed,
227
- .label,
228
- .icon {
229
- transition: none;
230
- }
231
- }
232
- `;
441
+ const FabStyle = 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; } .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; } .close-icon, ::slotted(:not([slot])), ::slotted([slot="close-icon"]) { font-size: inherit !important; flex: none; } .close-icon, ::slotted(svg:not([slot])), ::slotted(svg[slot="close-icon"]) { width: 1em; height: 1em; } :host(:not([extended])) ::slotted([slot="label"]), .base.-with-menu ::slotted([slot="label"]), .base:not(.-with-menu) ::slotted([slot="close-icon"]), .base:not(.-with-menu) .close-icon, :host([aria-expanded="true"]) .base.-with-menu ::slotted(:not([slot])), :host([aria-expanded="false"]) .base.-with-menu ::slotted([slot="close-icon"]), :host([aria-expanded="false"]) .base.-with-menu .close-icon { display: none; } :host([aria-expanded="true"]) .base.-with-menu { border-radius: var(--m3e-fab-menu-close-button-container-shape, ${DesignToken.shape.corner.full}); height: calc(var(--m3e-fab-menu-close-button-container-height, 3.5rem) + ${DesignToken.density.calc(-3)}); } :host([aria-expanded="true"]) .base.-with-menu .wrapper { padding-inline-start: calc(var(--m3e-fab-menu-close-button-leading-space, 1rem) + ${DesignToken.density.calc(-3)}); padding-inline-end: calc(var(--m3e-fab-menu-close-button-trailing-space, 1rem) + ${DesignToken.density.calc(-3)}); } :host([aria-expanded="true"]) .base.-with-menu .icon { font-size: calc(var(--m3e-fab-menu-close-button-icon-size, 1.5rem) + ${DesignToken.density.calc(-3)}); --m3e-icon-size: calc(var(--m3e-fab-menu-close-button-icon-size, 1.5rem) + ${DesignToken.density.calc(-3)}); } .base.-with-menu { transition: height ${DesignToken.motion.spring.fastSpatial}; } .base.-with-menu .wrapper { transition: padding ${DesignToken.motion.spring.fastSpatial}; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { .base, .icon { transition: none; } .base { outline-style: solid; } :host([variant]:not(:disabled):not([disabled-interactive])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])) .label, :host([variant]:not(:disabled):not([disabled-interactive])) .icon { 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; } :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); } } @media (prefers-reduced-motion) { .base, .base.resting, .base.pressed, .label, .icon { transition: none; } }`;
233
442
 
234
443
  /**
235
444
  * Component design tokens that control the `M3eFabElement` for all size variants.
236
445
  * @internal
237
446
  */
238
447
  const FabSizeToken = {
239
- /** Design tokens that control the `small` `size` variant. */
240
- small: {
241
- containerHeight: unsafeCSS(`calc(var(--m3e-fab-small-container-height, 3.5rem) + ${DesignToken.density.calc(-3)})`),
242
- labelTextFontSize: unsafeCSS(`var(--m3e-fab-small-label-text-font-size, ${DesignToken.typescale.standard.title.medium.fontSize})`),
243
- labelTextFontWeight: unsafeCSS(`var(--m3e-fab-small-label-text-font-weight, ${DesignToken.typescale.standard.title.medium.fontWeight})`),
244
- labelTextLineHeight: unsafeCSS(`var(--m3e-fab-small-label-text-line-height, ${DesignToken.typescale.standard.title.medium.lineHeight})`),
245
- labelTextTracking: unsafeCSS(`var(--m3e-fab-small-label-text-tracking, ${DesignToken.typescale.standard.title.medium.tracking})`),
246
- iconSize: unsafeCSS(`calc(var(--m3e-fab-small-icon-size, 1.5rem) + ${DesignToken.density.calc(-3)})`),
247
- extendedIconSize: unsafeCSS("var(--m3e-fab-small-icon-size, 1.5rem)"),
248
- shape: unsafeCSS(`var(--m3e-fab-small-shape, ${DesignToken.shape.corner.large})`),
249
- leadingSpace: unsafeCSS(`calc(var(--m3e-fab-small-leading-space, 1rem) + ${DesignToken.density.calc(-3)})`),
250
- trailingSpace: unsafeCSS(`calc(var(--m3e-fab-small-trailing-space, 1rem) + ${DesignToken.density.calc(-3)})`),
251
- iconLabelSpace: unsafeCSS("var(--m3e-fab-small-icon-label-space, 0.5rem)"),
252
- extendedLeadingSpace: unsafeCSS("var(--m3e-fab-small-leading-space, 1rem)"),
253
- extendedTrailingSpace: unsafeCSS("var(--m3e-fab-small-trailing-space, 1rem)"),
254
- },
255
- /** Design tokens that control the `medium` `size` variant. */
256
- medium: {
257
- containerHeight: unsafeCSS(`calc(var(--m3e-fab-medium-container-height, 5rem) + ${DesignToken.density.calc(-3)})`),
258
- labelTextFontSize: unsafeCSS(`var(--m3e-fab-medium-label-text-font-size, ${DesignToken.typescale.standard.title.large.fontSize})`),
259
- labelTextFontWeight: unsafeCSS(`var(--m3e-fab-medium-label-text-font-weight, ${DesignToken.typescale.standard.title.large.fontWeight})`),
260
- labelTextLineHeight: unsafeCSS(`var(--m3e-fab-medium-label-text-line-height, ${DesignToken.typescale.standard.title.large.lineHeight})`),
261
- labelTextTracking: unsafeCSS(`var(--m3e-fab-medium-label-text-tracking, ${DesignToken.typescale.standard.title.large.tracking})`),
262
- iconSize: unsafeCSS(`calc(var(--m3e-fab-medium-icon-size, 1.75rem) + ${DesignToken.density.calc(-3)})`),
263
- extendedIconSize: unsafeCSS("var(--m3e-fab-medium-icon-size, 1.75rem)"),
264
- shape: unsafeCSS(`var(--m3e-fab-medium-shape, ${DesignToken.shape.corner.largeIncreased})`),
265
- leadingSpace: unsafeCSS(`calc(var(--m3e-fab-medium-leading-space, 1.625rem) + ${DesignToken.density.calc(-3)})`),
266
- trailingSpace: unsafeCSS(`calc(var(--m3e-fab-medium-trailing-space, 1.625rem) + ${DesignToken.density.calc(-3)})`),
267
- iconLabelSpace: unsafeCSS("var(--m3e-fab-medium-icon-label-space, 0.75rem)"),
268
- extendedLeadingSpace: unsafeCSS("var(--m3e-fab-medium-leading-space, 1.625rem)"),
269
- extendedTrailingSpace: unsafeCSS("var(--m3e-fab-medium-trailing-space, 1.625rem)"),
270
- },
271
- /** Design tokens that control the `large` `size` variant. */
272
- large: {
273
- containerHeight: unsafeCSS(`calc(var(--m3e-fab-large-container-height, 6rem) + ${DesignToken.density.calc(-3)})`),
274
- labelTextFontSize: unsafeCSS(`var(--m3e-fab-large-label-text-font-size, ${DesignToken.typescale.standard.headline.small.fontSize})`),
275
- labelTextFontWeight: unsafeCSS(`var(--m3e-fab-large-label-text-font-weight, ${DesignToken.typescale.standard.headline.small.fontWeight})`),
276
- labelTextLineHeight: unsafeCSS(`var(--m3e-fab-large-label-text-line-height, ${DesignToken.typescale.standard.headline.small.lineHeight})`),
277
- labelTextTracking: unsafeCSS(`var(--m3e-fab-large-label-text-tracking, ${DesignToken.typescale.standard.headline.small.tracking})`),
278
- iconSize: unsafeCSS(`calc(var(--m3e-fab-large-icon-size, 2.25rem) + ${DesignToken.density.calc(-3)})`),
279
- extendedIconSize: unsafeCSS("var(--m3e-fab-large-icon-size, 2.25rem)"),
280
- shape: unsafeCSS(`var(--m3e-fab-large-shape, ${DesignToken.shape.corner.extraLarge})`),
281
- leadingSpace: unsafeCSS(`calc(var(--m3e-fab-large-leading-space, 1.75rem) + ${DesignToken.density.calc(-3)})`),
282
- trailingSpace: unsafeCSS(`calc(var(--m3e-fab-large-trailing-space, 1.75rem) + ${DesignToken.density.calc(-3)})`),
283
- iconLabelSpace: unsafeCSS("var(--m3e-fab-large-icon-label-space, 1rem)"),
284
- extendedLeadingSpace: unsafeCSS("var(--m3e-fab-large-leading-space, 1.75rem)"),
285
- extendedTrailingSpace: unsafeCSS("var(--m3e-fab-large-trailing-space, 1.75rem)"),
286
- },
448
+ /** Design tokens that control the `small` `size` variant. */
449
+ small: {
450
+ containerHeight: unsafeCSS(`calc(var(--m3e-fab-small-container-height, 3.5rem) + ${DesignToken.density.calc(-3)})`),
451
+ labelTextFontSize: unsafeCSS(`var(--m3e-fab-small-label-text-font-size, ${DesignToken.typescale.standard.title.medium.fontSize})`),
452
+ labelTextFontWeight: unsafeCSS(`var(--m3e-fab-small-label-text-font-weight, ${DesignToken.typescale.standard.title.medium.fontWeight})`),
453
+ labelTextLineHeight: unsafeCSS(`var(--m3e-fab-small-label-text-line-height, ${DesignToken.typescale.standard.title.medium.lineHeight})`),
454
+ labelTextTracking: unsafeCSS(`var(--m3e-fab-small-label-text-tracking, ${DesignToken.typescale.standard.title.medium.tracking})`),
455
+ iconSize: unsafeCSS(`calc(var(--m3e-fab-small-icon-size, 1.5rem) + ${DesignToken.density.calc(-3)})`),
456
+ extendedIconSize: unsafeCSS("var(--m3e-fab-small-icon-size, 1.5rem)"),
457
+ shape: unsafeCSS(`var(--m3e-fab-small-shape, ${DesignToken.shape.corner.large})`),
458
+ leadingSpace: unsafeCSS(`calc(var(--m3e-fab-small-leading-space, 1rem) + ${DesignToken.density.calc(-3)})`),
459
+ trailingSpace: unsafeCSS(`calc(var(--m3e-fab-small-trailing-space, 1rem) + ${DesignToken.density.calc(-3)})`),
460
+ iconLabelSpace: unsafeCSS("var(--m3e-fab-small-icon-label-space, 0.5rem)"),
461
+ extendedLeadingSpace: unsafeCSS("var(--m3e-fab-small-leading-space, 1rem)"),
462
+ extendedTrailingSpace: unsafeCSS("var(--m3e-fab-small-trailing-space, 1rem)")
463
+ },
464
+ /** Design tokens that control the `medium` `size` variant. */
465
+ medium: {
466
+ containerHeight: unsafeCSS(`calc(var(--m3e-fab-medium-container-height, 5rem) + ${DesignToken.density.calc(-3)})`),
467
+ labelTextFontSize: unsafeCSS(`var(--m3e-fab-medium-label-text-font-size, ${DesignToken.typescale.standard.title.large.fontSize})`),
468
+ labelTextFontWeight: unsafeCSS(`var(--m3e-fab-medium-label-text-font-weight, ${DesignToken.typescale.standard.title.large.fontWeight})`),
469
+ labelTextLineHeight: unsafeCSS(`var(--m3e-fab-medium-label-text-line-height, ${DesignToken.typescale.standard.title.large.lineHeight})`),
470
+ labelTextTracking: unsafeCSS(`var(--m3e-fab-medium-label-text-tracking, ${DesignToken.typescale.standard.title.large.tracking})`),
471
+ iconSize: unsafeCSS(`calc(var(--m3e-fab-medium-icon-size, 1.75rem) + ${DesignToken.density.calc(-3)})`),
472
+ extendedIconSize: unsafeCSS("var(--m3e-fab-medium-icon-size, 1.75rem)"),
473
+ shape: unsafeCSS(`var(--m3e-fab-medium-shape, ${DesignToken.shape.corner.largeIncreased})`),
474
+ leadingSpace: unsafeCSS(`calc(var(--m3e-fab-medium-leading-space, 1.625rem) + ${DesignToken.density.calc(-3)})`),
475
+ trailingSpace: unsafeCSS(`calc(var(--m3e-fab-medium-trailing-space, 1.625rem) + ${DesignToken.density.calc(-3)})`),
476
+ iconLabelSpace: unsafeCSS("var(--m3e-fab-medium-icon-label-space, 0.75rem)"),
477
+ extendedLeadingSpace: unsafeCSS("var(--m3e-fab-medium-leading-space, 1.625rem)"),
478
+ extendedTrailingSpace: unsafeCSS("var(--m3e-fab-medium-trailing-space, 1.625rem)")
479
+ },
480
+ /** Design tokens that control the `large` `size` variant. */
481
+ large: {
482
+ containerHeight: unsafeCSS(`calc(var(--m3e-fab-large-container-height, 6rem) + ${DesignToken.density.calc(-3)})`),
483
+ labelTextFontSize: unsafeCSS(`var(--m3e-fab-large-label-text-font-size, ${DesignToken.typescale.standard.headline.small.fontSize})`),
484
+ labelTextFontWeight: unsafeCSS(`var(--m3e-fab-large-label-text-font-weight, ${DesignToken.typescale.standard.headline.small.fontWeight})`),
485
+ labelTextLineHeight: unsafeCSS(`var(--m3e-fab-large-label-text-line-height, ${DesignToken.typescale.standard.headline.small.lineHeight})`),
486
+ labelTextTracking: unsafeCSS(`var(--m3e-fab-large-label-text-tracking, ${DesignToken.typescale.standard.headline.small.tracking})`),
487
+ iconSize: unsafeCSS(`calc(var(--m3e-fab-large-icon-size, 2.25rem) + ${DesignToken.density.calc(-3)})`),
488
+ extendedIconSize: unsafeCSS("var(--m3e-fab-large-icon-size, 2.25rem)"),
489
+ shape: unsafeCSS(`var(--m3e-fab-large-shape, ${DesignToken.shape.corner.extraLarge})`),
490
+ leadingSpace: unsafeCSS(`calc(var(--m3e-fab-large-leading-space, 1.75rem) + ${DesignToken.density.calc(-3)})`),
491
+ trailingSpace: unsafeCSS(`calc(var(--m3e-fab-large-trailing-space, 1.75rem) + ${DesignToken.density.calc(-3)})`),
492
+ iconLabelSpace: unsafeCSS("var(--m3e-fab-large-icon-label-space, 1rem)"),
493
+ extendedLeadingSpace: unsafeCSS("var(--m3e-fab-large-leading-space, 1.75rem)"),
494
+ extendedTrailingSpace: unsafeCSS("var(--m3e-fab-large-trailing-space, 1.75rem)")
495
+ }
287
496
  };
288
497
 
289
498
  /** @private */
290
499
  function fabStyle(size) {
291
- return css `
292
- :host([size="${unsafeCSS(size)}"]) .base {
293
- height: ${FabSizeToken[size].containerHeight};
294
- }
295
- :host([size="${unsafeCSS(size)}"]) .base {
296
- border-radius: ${FabSizeToken[size].shape};
297
- }
298
- :host([size="${unsafeCSS(size)}"]) .label {
299
- font-size: ${FabSizeToken[size].labelTextFontSize};
300
- font-weight: ${FabSizeToken[size].labelTextFontWeight};
301
- line-height: ${FabSizeToken[size].labelTextLineHeight};
302
- letter-spacing: ${FabSizeToken[size].labelTextTracking};
303
- }
304
- :host([size="${unsafeCSS(size)}"]:not([extended])) .wrapper {
305
- padding-inline-start: ${FabSizeToken[size].leadingSpace};
306
- padding-inline-end: ${FabSizeToken[size].trailingSpace};
307
- }
308
- :host([size="${unsafeCSS(size)}"]:not([extended])) .icon {
309
- font-size: ${FabSizeToken[size].iconSize};
310
- --m3e-icon-size: ${FabSizeToken[size].iconSize};
311
- }
312
- :host([size="${unsafeCSS(size)}"][extended]) .wrapper {
313
- padding-inline-start: ${FabSizeToken[size].extendedLeadingSpace};
314
- padding-inline-end: ${FabSizeToken[size].extendedTrailingSpace};
315
- column-gap: ${FabSizeToken[size].iconLabelSpace};
316
- }
317
- :host([size="${unsafeCSS(size)}"][extended]) .icon {
318
- font-size: ${FabSizeToken[size].extendedIconSize};
319
- --m3e-icon-size: ${FabSizeToken[size].extendedIconSize};
320
- }
321
- `;
500
+ return css`:host([size="${unsafeCSS(size)}"]) .base { height: ${FabSizeToken[size].containerHeight}; } :host([size="${unsafeCSS(size)}"]) .base { border-radius: ${FabSizeToken[size].shape}; } :host([size="${unsafeCSS(size)}"]) .label { font-size: ${FabSizeToken[size].labelTextFontSize}; font-weight: ${FabSizeToken[size].labelTextFontWeight}; line-height: ${FabSizeToken[size].labelTextLineHeight}; letter-spacing: ${FabSizeToken[size].labelTextTracking}; } :host([size="${unsafeCSS(size)}"]:not([extended])) .wrapper { padding-inline-start: ${FabSizeToken[size].leadingSpace}; padding-inline-end: ${FabSizeToken[size].trailingSpace}; } :host([size="${unsafeCSS(size)}"]:not([extended])) .icon { font-size: ${FabSizeToken[size].iconSize}; --m3e-icon-size: ${FabSizeToken[size].iconSize}; } :host([size="${unsafeCSS(size)}"][extended]) .wrapper { padding-inline-start: ${FabSizeToken[size].extendedLeadingSpace}; padding-inline-end: ${FabSizeToken[size].extendedTrailingSpace}; column-gap: ${FabSizeToken[size].iconLabelSpace}; } :host([size="${unsafeCSS(size)}"][extended]) .icon { font-size: ${FabSizeToken[size].extendedIconSize}; --m3e-icon-size: ${FabSizeToken[size].extendedIconSize}; }`;
322
501
  }
323
502
  /**
324
503
  * Size variant styles for `M3eFabElement`.
@@ -331,638 +510,558 @@ const FabSizeStyle = [fabStyle("small"), fabStyle("medium"), fabStyle("large")];
331
510
  * @internal
332
511
  */
333
512
  const FabVariantToken = {
334
- /** Design tokens that control the `primary` variant. */
335
- primary: {
336
- /** Default label color. */
337
- labelTextColor: unsafeCSS(`var(--m3e-primary-fab-label-text-color, ${DesignToken.color.onPrimary})`),
338
- /** Default icon color. */
339
- iconColor: unsafeCSS(`var(--m3e-primary-fab-icon-color, ${DesignToken.color.onPrimary})`),
340
- /** Default container background color. */
341
- containerColor: unsafeCSS(`var(--m3e-primary-fab-container-color, ${DesignToken.color.primary})`),
342
- /** Resting elevation. */
343
- containerElevation: unsafeCSS(`var(--m3e-primary-fab-container-elevation, ${DesignToken.elevation.level3})`),
344
- /** Lowered resting elevation. */
345
- loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-container-elevation, ${DesignToken.elevation.level2})`),
346
- /** Design tokens that control disabled state. */
347
- disabled: {
348
- /** Container background color when disabled. */
349
- containerColor: unsafeCSS(`var(--m3e-primary-fab-disabled-container-color, ${DesignToken.color.onSurface})`),
350
- /** Opacity of container when disabled. */
351
- containerOpacity: unsafeCSS(`var(--m3e-primary-fab-disabled-container-opacity, 10%)`),
352
- /** Icon color when disabled. */
353
- iconColor: unsafeCSS(`var(--m3e-primary-fab-disabled-icon-color, ${DesignToken.color.onSurface})`),
354
- /** Icon opacity when disabled. */
355
- iconOpacity: unsafeCSS(`var(--m3e-primary-fab-disabled-icon-opacity, 38%)`),
356
- /** Label color when disabled. */
357
- labelTextColor: unsafeCSS(`var(--m3e-primary-fab-disabled-label-text-color, ${DesignToken.color.onSurface})`),
358
- /** Label opacity when disabled. */
359
- labelTextOpacity: unsafeCSS(`var(--m3e-primary-fab-disabled-label-text-opacity, 38%)`),
360
- /** Elevation when disabled. */
361
- containerElevation: unsafeCSS(`var(--m3e-primary-fab-disabled-container-elevation, ${DesignToken.elevation.level0})`),
362
- /** Lowered elevation when disabled. */
363
- loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-disabled-container-elevation, ${DesignToken.elevation.level0})`),
364
- },
365
- /** Design tokens that control hover state. */
366
- hover: {
367
- /** Icon color on hover. */
368
- iconColor: unsafeCSS(`var(--m3e-primary-fab-hover-icon-color, ${DesignToken.color.onPrimary})`),
369
- /** Label color on hover. */
370
- labelTextColor: unsafeCSS(`var(--m3e-primary-fab-hover-label-text-color, ${DesignToken.color.onPrimary})`),
371
- /** State layer color on hover. */
372
- stateLayerColor: unsafeCSS(`var(--m3e-primary-fab-hover-state-layer-color, ${DesignToken.color.onPrimary})`),
373
- /** State layer opacity on hover. */
374
- stateLayerOpacity: unsafeCSS(`var(--m3e-primary-fab-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
375
- /** Elevation on hover. */
376
- containerElevation: unsafeCSS(`var(--m3e-primary-fab-hover-container-elevation, ${DesignToken.elevation.level4})`),
377
- /** Lowered elevation on hover. */
378
- loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-hover-container-elevation, ${DesignToken.elevation.level3})`),
379
- },
380
- /** Design tokens that control focus state. */
381
- focus: {
382
- /** Icon color on focus. */
383
- iconColor: unsafeCSS(`var(--m3e-primary-fab-focus-icon-color, ${DesignToken.color.onPrimary})`),
384
- /** Label color on focus. */
385
- labelTextColor: unsafeCSS(`var(--m3e-primary-fab-focus-label-text-color, ${DesignToken.color.onPrimary})`),
386
- /** State layer color on focus. */
387
- stateLayerColor: unsafeCSS(`var(--m3e-primary-fab-focus-state-layer-color, ${DesignToken.color.onPrimary})`),
388
- /**State layer opacity on focus. */
389
- stateLayerOpacity: unsafeCSS(`var(--m3e-primary-fab-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
390
- /** Elevation on focus. */
391
- containerElevation: unsafeCSS(`var(--m3e-primary-fab-focus-container-elevation, ${DesignToken.elevation.level3})`),
392
- /** Lowered elevation on focus. */
393
- loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-focus-container-elevation, ${DesignToken.elevation.level2})`),
394
- },
395
- /** Design tokens that control pressed state. */
396
- pressed: {
397
- /** Icon color on pressed. */
398
- iconColor: unsafeCSS(`var(--m3e-primary-fab-pressed-icon-color, ${DesignToken.color.onPrimary})`),
399
- /** Label color on pressed. */
400
- labelTextColor: unsafeCSS(`var(--m3e-primary-fab-pressed-label-text-color, ${DesignToken.color.onPrimary})`),
401
- /** State layer color on pressed. */
402
- stateLayerColor: unsafeCSS(`var(--m3e-primary-fab-pressed-state-layer-color, ${DesignToken.color.onPrimary})`),
403
- /** State layer opacity on pressed. */
404
- stateLayerOpacity: unsafeCSS(`var(--m3e-primary-fab-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
405
- /** Elevation on pressed. */
406
- containerElevation: unsafeCSS(`var(--m3e-primary-fab-pressed-container-elevation, ${DesignToken.elevation.level3})`),
407
- /** Lowered elevation on pressed. */
408
- loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-pressed-container-elevation, ${DesignToken.elevation.level2})`),
409
- },
513
+ /** Design tokens that control the `primary` variant. */
514
+ primary: {
515
+ /** Default label color. */
516
+ labelTextColor: unsafeCSS(`var(--m3e-primary-fab-label-text-color, ${DesignToken.color.onPrimary})`),
517
+ /** Default icon color. */
518
+ iconColor: unsafeCSS(`var(--m3e-primary-fab-icon-color, ${DesignToken.color.onPrimary})`),
519
+ /** Default container background color. */
520
+ containerColor: unsafeCSS(`var(--m3e-primary-fab-container-color, ${DesignToken.color.primary})`),
521
+ /** Resting elevation. */
522
+ containerElevation: unsafeCSS(`var(--m3e-primary-fab-container-elevation, ${DesignToken.elevation.level3})`),
523
+ /** Lowered resting elevation. */
524
+ loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-container-elevation, ${DesignToken.elevation.level2})`),
525
+ /** Design tokens that control disabled state. */
526
+ disabled: {
527
+ /** Container background color when disabled. */
528
+ containerColor: unsafeCSS(`var(--m3e-primary-fab-disabled-container-color, ${DesignToken.color.onSurface})`),
529
+ /** Opacity of container when disabled. */
530
+ containerOpacity: unsafeCSS(`var(--m3e-primary-fab-disabled-container-opacity, 10%)`),
531
+ /** Icon color when disabled. */
532
+ iconColor: unsafeCSS(`var(--m3e-primary-fab-disabled-icon-color, ${DesignToken.color.onSurface})`),
533
+ /** Icon opacity when disabled. */
534
+ iconOpacity: unsafeCSS(`var(--m3e-primary-fab-disabled-icon-opacity, 38%)`),
535
+ /** Label color when disabled. */
536
+ labelTextColor: unsafeCSS(`var(--m3e-primary-fab-disabled-label-text-color, ${DesignToken.color.onSurface})`),
537
+ /** Label opacity when disabled. */
538
+ labelTextOpacity: unsafeCSS(`var(--m3e-primary-fab-disabled-label-text-opacity, 38%)`),
539
+ /** Elevation when disabled. */
540
+ containerElevation: unsafeCSS(`var(--m3e-primary-fab-disabled-container-elevation, ${DesignToken.elevation.level0})`),
541
+ /** Lowered elevation when disabled. */
542
+ loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-disabled-container-elevation, ${DesignToken.elevation.level0})`)
410
543
  },
411
- /** Design tokens that control the `secondary` variant. */
412
- secondary: {
413
- /** Default label color. */
414
- labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-label-text-color, ${DesignToken.color.onSecondary})`),
415
- /** Default icon color. */
416
- iconColor: unsafeCSS(`var(--m3e-secondary-fab-icon-color, ${DesignToken.color.onSecondary})`),
417
- /** Default container background color. */
418
- containerColor: unsafeCSS(`var(--m3e-secondary-fab-container-color, ${DesignToken.color.secondary})`),
419
- /** Resting elevation. */
420
- containerElevation: unsafeCSS(`var(--m3e-secondary-fab-container-elevation, ${DesignToken.elevation.level3})`),
421
- /** Lowered resting elevation. */
422
- loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-container-elevation, ${DesignToken.elevation.level2})`),
423
- /** Design tokens that control disabled state. */
424
- disabled: {
425
- /** Container background color when disabled. */
426
- containerColor: unsafeCSS(`var(--m3e-secondary-fab-disabled-container-color, ${DesignToken.color.onSurface})`),
427
- /** Opacity of container when disabled. */
428
- containerOpacity: unsafeCSS(`var(--m3e-secondary-fab-disabled-container-opacity, 10%)`),
429
- /** Icon color when disabled. */
430
- iconColor: unsafeCSS(`var(--m3e-secondary-fab-disabled-icon-color, ${DesignToken.color.onSurface})`),
431
- /** Icon opacity when disabled. */
432
- iconOpacity: unsafeCSS(`var(--m3e-secondary-fab-disabled-icon-opacity, 38%)`),
433
- /** Label color when disabled. */
434
- labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-disabled-label-text-color, ${DesignToken.color.onSurface})`),
435
- /** Label opacity when disabled. */
436
- labelTextOpacity: unsafeCSS(`var(--m3e-secondary-fab-disabled-label-text-opacity, 38%)`),
437
- /** Elevation when disabled. */
438
- containerElevation: unsafeCSS(`var(--m3e-secondary-fab-disabled-container-elevation, ${DesignToken.elevation.level0})`),
439
- /** Lowered elevation when disabled. */
440
- loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-disabled-container-elevation, ${DesignToken.elevation.level0})`),
441
- },
442
- /** Design tokens that control hover state. */
443
- hover: {
444
- /** Icon color on hover. */
445
- iconColor: unsafeCSS(`var(--m3e-secondary-fab-hover-icon-color, ${DesignToken.color.onSecondary})`),
446
- /** Label color on hover. */
447
- labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-hover-label-text-color, ${DesignToken.color.onSecondary})`),
448
- /** State layer color on hover. */
449
- stateLayerColor: unsafeCSS(`var(--m3e-secondary-fab-hover-state-layer-color, ${DesignToken.color.onSecondary})`),
450
- /** State layer opacity on hover. */
451
- stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-fab-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
452
- /** Elevation on hover. */
453
- containerElevation: unsafeCSS(`var(--m3e-secondary-fab-hover-container-elevation, ${DesignToken.elevation.level4})`),
454
- /** Lowered elevation on hover. */
455
- loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-hover-container-elevation, ${DesignToken.elevation.level3})`),
456
- },
457
- /** Design tokens that control focus state. */
458
- focus: {
459
- /** Icon color on focus. */
460
- iconColor: unsafeCSS(`var(--m3e-secondary-fab-focus-icon-color, ${DesignToken.color.onSecondary})`),
461
- /** Label color on focus. */
462
- labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-focus-label-text-color, ${DesignToken.color.onSecondary})`),
463
- /** State layer color on focus. */
464
- stateLayerColor: unsafeCSS(`var(--m3e-secondary-fab-focus-state-layer-color, ${DesignToken.color.onSecondary})`),
465
- /**State layer opacity on focus. */
466
- stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-fab-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
467
- /** Elevation on focus. */
468
- containerElevation: unsafeCSS(`var(--m3e-secondary-fab-focus-container-elevation, ${DesignToken.elevation.level3})`),
469
- /** Lowered elevation on focus. */
470
- loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-focus-container-elevation, ${DesignToken.elevation.level2})`),
471
- },
472
- /** Design tokens that control pressed state. */
473
- pressed: {
474
- /** Icon color on pressed. */
475
- iconColor: unsafeCSS(`var(--m3e-secondary-fab-pressed-icon-color, ${DesignToken.color.onSecondary})`),
476
- /** Label color on pressed. */
477
- labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-pressed-label-text-color, ${DesignToken.color.onSecondary})`),
478
- /** State layer color on pressed. */
479
- stateLayerColor: unsafeCSS(`var(--m3e-secondary-fab-pressed-state-layer-color, ${DesignToken.color.onSecondary})`),
480
- /** State layer opacity on pressed. */
481
- stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-fab-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
482
- /** Elevation on pressed. */
483
- containerElevation: unsafeCSS(`var(--m3e-secondary-fab-pressed-container-elevation, ${DesignToken.elevation.level3})`),
484
- /** Lowered elevation on pressed. */
485
- loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-pressed-container-elevation, ${DesignToken.elevation.level2})`),
486
- },
544
+ /** Design tokens that control hover state. */
545
+ hover: {
546
+ /** Icon color on hover. */
547
+ iconColor: unsafeCSS(`var(--m3e-primary-fab-hover-icon-color, ${DesignToken.color.onPrimary})`),
548
+ /** Label color on hover. */
549
+ labelTextColor: unsafeCSS(`var(--m3e-primary-fab-hover-label-text-color, ${DesignToken.color.onPrimary})`),
550
+ /** State layer color on hover. */
551
+ stateLayerColor: unsafeCSS(`var(--m3e-primary-fab-hover-state-layer-color, ${DesignToken.color.onPrimary})`),
552
+ /** State layer opacity on hover. */
553
+ stateLayerOpacity: unsafeCSS(`var(--m3e-primary-fab-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
554
+ /** Elevation on hover. */
555
+ containerElevation: unsafeCSS(`var(--m3e-primary-fab-hover-container-elevation, ${DesignToken.elevation.level4})`),
556
+ /** Lowered elevation on hover. */
557
+ loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-hover-container-elevation, ${DesignToken.elevation.level3})`)
487
558
  },
488
- /** Design tokens that control the `tertiary` variant. */
489
- tertiary: {
490
- /** Default label color. */
491
- labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-label-text-color, ${DesignToken.color.onTertiary})`),
492
- /** Default icon color. */
493
- iconColor: unsafeCSS(`var(--m3e-tertiary-fab-icon-color, ${DesignToken.color.onTertiary})`),
494
- /** Default container background color. */
495
- containerColor: unsafeCSS(`var(--m3e-tertiary-fab-container-color, ${DesignToken.color.tertiary})`),
496
- /** Resting elevation. */
497
- containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-container-elevation, ${DesignToken.elevation.level3})`),
498
- /** Lowered resting elevation. */
499
- loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-container-elevation, ${DesignToken.elevation.level2})`),
500
- /** Design tokens that control disabled state. */
501
- disabled: {
502
- /** Container background color when disabled. */
503
- containerColor: unsafeCSS(`var(--m3e-tertiary-fab-disabled-container-color, ${DesignToken.color.onSurface})`),
504
- /** Opacity of container when disabled. */
505
- containerOpacity: unsafeCSS(`var(--m3e-tertiary-fab-disabled-container-opacity, 10%)`),
506
- /** Icon color when disabled. */
507
- iconColor: unsafeCSS(`var(--m3e-tertiary-fab-disabled-icon-color, ${DesignToken.color.onSurface})`),
508
- /** Icon opacity when disabled. */
509
- iconOpacity: unsafeCSS(`var(--m3e-tertiary-fab-disabled-icon-opacity, 38%)`),
510
- /** Label color when disabled. */
511
- labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-disabled-label-text-color, ${DesignToken.color.onSurface})`),
512
- /** Label opacity when disabled. */
513
- labelTextOpacity: unsafeCSS(`var(--m3e-tertiary-fab-disabled-label-text-opacity, 38%)`),
514
- /** Elevation when disabled. */
515
- containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-disabled-container-elevation, ${DesignToken.elevation.level0})`),
516
- /** Lowered elevation when disabled. */
517
- loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-disabled-container-elevation, ${DesignToken.elevation.level0})`),
518
- },
519
- /** Design tokens that control hover state. */
520
- hover: {
521
- /** Icon color on hover. */
522
- iconColor: unsafeCSS(`var(--m3e-tertiary-fab-hover-icon-color, ${DesignToken.color.onTertiary})`),
523
- /** Label color on hover. */
524
- labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-hover-label-text-color, ${DesignToken.color.onTertiary})`),
525
- /** State layer color on hover. */
526
- stateLayerColor: unsafeCSS(`var(--m3e-tertiary-fab-hover-state-layer-color, ${DesignToken.color.onTertiary})`),
527
- /** State layer opacity on hover. */
528
- stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-fab-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
529
- /** Elevation on hover. */
530
- containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-hover-container-elevation, ${DesignToken.elevation.level4})`),
531
- /** Lowered elevation on hover. */
532
- loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-hover-container-elevation, ${DesignToken.elevation.level3})`),
533
- },
534
- /** Design tokens that control focus state. */
535
- focus: {
536
- /** Icon color on focus. */
537
- iconColor: unsafeCSS(`var(--m3e-tertiary-fab-focus-icon-color, ${DesignToken.color.onTertiary})`),
538
- /** Label color on focus. */
539
- labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-focus-label-text-color, ${DesignToken.color.onTertiary})`),
540
- /** State layer color on focus. */
541
- stateLayerColor: unsafeCSS(`var(--m3e-tertiary-fab-focus-state-layer-color, ${DesignToken.color.onTertiary})`),
542
- /**State layer opacity on focus. */
543
- stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-fab-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
544
- /** Elevation on focus. */
545
- containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-focus-container-elevation, ${DesignToken.elevation.level3})`),
546
- /** Lowered elevation on focus. */
547
- loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-focus-container-elevation, ${DesignToken.elevation.level2})`),
548
- },
549
- /** Design tokens that control pressed state. */
550
- pressed: {
551
- /** Icon color on pressed. */
552
- iconColor: unsafeCSS(`var(--m3e-tertiary-fab-pressed-icon-color, ${DesignToken.color.onTertiary})`),
553
- /** Label color on pressed. */
554
- labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-pressed-label-text-color, ${DesignToken.color.onTertiary})`),
555
- /** State layer color on pressed. */
556
- stateLayerColor: unsafeCSS(`var(--m3e-tertiary-fab-pressed-state-layer-color, ${DesignToken.color.onTertiary})`),
557
- /** State layer opacity on pressed. */
558
- stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-fab-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
559
- /** Elevation on pressed. */
560
- containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-pressed-container-elevation, ${DesignToken.elevation.level3})`),
561
- /** Lowered elevation on pressed. */
562
- loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-pressed-container-elevation, ${DesignToken.elevation.level2})`),
563
- },
559
+ /** Design tokens that control focus state. */
560
+ focus: {
561
+ /** Icon color on focus. */
562
+ iconColor: unsafeCSS(`var(--m3e-primary-fab-focus-icon-color, ${DesignToken.color.onPrimary})`),
563
+ /** Label color on focus. */
564
+ labelTextColor: unsafeCSS(`var(--m3e-primary-fab-focus-label-text-color, ${DesignToken.color.onPrimary})`),
565
+ /** State layer color on focus. */
566
+ stateLayerColor: unsafeCSS(`var(--m3e-primary-fab-focus-state-layer-color, ${DesignToken.color.onPrimary})`),
567
+ /**State layer opacity on focus. */
568
+ stateLayerOpacity: unsafeCSS(`var(--m3e-primary-fab-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
569
+ /** Elevation on focus. */
570
+ containerElevation: unsafeCSS(`var(--m3e-primary-fab-focus-container-elevation, ${DesignToken.elevation.level3})`),
571
+ /** Lowered elevation on focus. */
572
+ loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-focus-container-elevation, ${DesignToken.elevation.level2})`)
564
573
  },
565
- /** Design tokens that control the `primary-container` variant. */
566
- "primary-container": {
567
- /** Default label color. */
568
- labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-label-text-color, ${DesignToken.color.onPrimaryContainer})`),
569
- /** Default icon color. */
570
- iconColor: unsafeCSS(`var(--m3e-primary-container-fab-icon-color, ${DesignToken.color.onPrimaryContainer})`),
571
- /** Default container background color. */
572
- containerColor: unsafeCSS(`var(--m3e-primary-container-fab-container-color, ${DesignToken.color.primaryContainer})`),
573
- /** Resting elevation. */
574
- containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-container-elevation, ${DesignToken.elevation.level3})`),
575
- /** Lowered resting elevation. */
576
- loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-container-elevation, ${DesignToken.elevation.level2})`),
577
- /** Design tokens that control disabled state. */
578
- disabled: {
579
- /** Container background color when disabled. */
580
- containerColor: unsafeCSS(`var(--m3e-primary-container-fab-disabled-container-color, ${DesignToken.color.onSurface})`),
581
- /** Opacity of container when disabled. */
582
- containerOpacity: unsafeCSS(`var(--m3e-primary-container-fab-disabled-container-opacity, 10%)`),
583
- /** Icon color when disabled. */
584
- iconColor: unsafeCSS(`var(--m3e-primary-container-fab-disabled-icon-color, ${DesignToken.color.onSurface})`),
585
- /** Icon opacity when disabled. */
586
- iconOpacity: unsafeCSS(`var(--m3e-primary-container-fab-disabled-icon-opacity, 38%)`),
587
- /** Label color when disabled. */
588
- labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-disabled-label-text-color, ${DesignToken.color.onSurface})`),
589
- /** Label opacity when disabled. */
590
- labelTextOpacity: unsafeCSS(`var(--m3e-primary-container-fab-disabled-label-text-opacity, 38%)`),
591
- /** Elevation when disabled. */
592
- containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-disabled-container-elevation, ${DesignToken.elevation.level0})`),
593
- /** Lowered elevation when disabled. */
594
- loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-disabled-container-elevation, ${DesignToken.elevation.level0})`),
595
- },
596
- /** Design tokens that control hover state. */
597
- hover: {
598
- /** Icon color on hover. */
599
- iconColor: unsafeCSS(`var(--m3e-primary-container-fab-hover-icon-color, ${DesignToken.color.onPrimaryContainer})`),
600
- /** Label color on hover. */
601
- labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-hover-label-text-color, ${DesignToken.color.onPrimaryContainer})`),
602
- /** State layer color on hover. */
603
- stateLayerColor: unsafeCSS(`var(--m3e-primary-container-fab-hover-state-layer-color, ${DesignToken.color.onPrimaryContainer})`),
604
- /** State layer opacity on hover. */
605
- stateLayerOpacity: unsafeCSS(`var(--m3e-primary-container-fab-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
606
- /** Elevation on hover. */
607
- containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-hover-container-elevation, ${DesignToken.elevation.level4})`),
608
- /** Lowered elevation on hover. */
609
- loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-hover-container-elevation, ${DesignToken.elevation.level3})`),
610
- },
611
- /** Design tokens that control focus state. */
612
- focus: {
613
- /** Icon color on focus. */
614
- iconColor: unsafeCSS(`var(--m3e-primary-container-fab-focus-icon-color, ${DesignToken.color.onPrimaryContainer})`),
615
- /** Label color on focus. */
616
- labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-focus-label-text-color, ${DesignToken.color.onPrimaryContainer})`),
617
- /** State layer color on focus. */
618
- stateLayerColor: unsafeCSS(`var(--m3e-primary-container-fab-focus-state-layer-color, ${DesignToken.color.onPrimaryContainer})`),
619
- /**State layer opacity on focus. */
620
- stateLayerOpacity: unsafeCSS(`var(--m3e-primary-container-fab-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
621
- /** Elevation on focus. */
622
- containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-focus-container-elevation, ${DesignToken.elevation.level3})`),
623
- /** Lowered elevation on focus. */
624
- loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-focus-container-elevation, ${DesignToken.elevation.level2})`),
625
- },
626
- /** Design tokens that control pressed state. */
627
- pressed: {
628
- /** Icon color on pressed. */
629
- iconColor: unsafeCSS(`var(--m3e-primary-container-fab-pressed-icon-color, ${DesignToken.color.onPrimaryContainer})`),
630
- /** Label color on pressed. */
631
- labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-pressed-label-text-color, ${DesignToken.color.onPrimaryContainer})`),
632
- /** State layer color on pressed. */
633
- stateLayerColor: unsafeCSS(`var(--m3e-primary-container-fab-pressed-state-layer-color, ${DesignToken.color.onPrimaryContainer})`),
634
- /** State layer opacity on pressed. */
635
- stateLayerOpacity: unsafeCSS(`var(--m3e-primary-container-fab-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
636
- /** Elevation on pressed. */
637
- containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-pressed-container-elevation, ${DesignToken.elevation.level3})`),
638
- /** Lowered elevation on pressed. */
639
- loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-pressed-container-elevation, ${DesignToken.elevation.level2})`),
640
- },
574
+ /** Design tokens that control pressed state. */
575
+ pressed: {
576
+ /** Icon color on pressed. */
577
+ iconColor: unsafeCSS(`var(--m3e-primary-fab-pressed-icon-color, ${DesignToken.color.onPrimary})`),
578
+ /** Label color on pressed. */
579
+ labelTextColor: unsafeCSS(`var(--m3e-primary-fab-pressed-label-text-color, ${DesignToken.color.onPrimary})`),
580
+ /** State layer color on pressed. */
581
+ stateLayerColor: unsafeCSS(`var(--m3e-primary-fab-pressed-state-layer-color, ${DesignToken.color.onPrimary})`),
582
+ /** State layer opacity on pressed. */
583
+ stateLayerOpacity: unsafeCSS(`var(--m3e-primary-fab-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
584
+ /** Elevation on pressed. */
585
+ containerElevation: unsafeCSS(`var(--m3e-primary-fab-pressed-container-elevation, ${DesignToken.elevation.level3})`),
586
+ /** Lowered elevation on pressed. */
587
+ loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-pressed-container-elevation, ${DesignToken.elevation.level2})`)
588
+ }
589
+ },
590
+ /** Design tokens that control the `secondary` variant. */
591
+ secondary: {
592
+ /** Default label color. */
593
+ labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-label-text-color, ${DesignToken.color.onSecondary})`),
594
+ /** Default icon color. */
595
+ iconColor: unsafeCSS(`var(--m3e-secondary-fab-icon-color, ${DesignToken.color.onSecondary})`),
596
+ /** Default container background color. */
597
+ containerColor: unsafeCSS(`var(--m3e-secondary-fab-container-color, ${DesignToken.color.secondary})`),
598
+ /** Resting elevation. */
599
+ containerElevation: unsafeCSS(`var(--m3e-secondary-fab-container-elevation, ${DesignToken.elevation.level3})`),
600
+ /** Lowered resting elevation. */
601
+ loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-container-elevation, ${DesignToken.elevation.level2})`),
602
+ /** Design tokens that control disabled state. */
603
+ disabled: {
604
+ /** Container background color when disabled. */
605
+ containerColor: unsafeCSS(`var(--m3e-secondary-fab-disabled-container-color, ${DesignToken.color.onSurface})`),
606
+ /** Opacity of container when disabled. */
607
+ containerOpacity: unsafeCSS(`var(--m3e-secondary-fab-disabled-container-opacity, 10%)`),
608
+ /** Icon color when disabled. */
609
+ iconColor: unsafeCSS(`var(--m3e-secondary-fab-disabled-icon-color, ${DesignToken.color.onSurface})`),
610
+ /** Icon opacity when disabled. */
611
+ iconOpacity: unsafeCSS(`var(--m3e-secondary-fab-disabled-icon-opacity, 38%)`),
612
+ /** Label color when disabled. */
613
+ labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-disabled-label-text-color, ${DesignToken.color.onSurface})`),
614
+ /** Label opacity when disabled. */
615
+ labelTextOpacity: unsafeCSS(`var(--m3e-secondary-fab-disabled-label-text-opacity, 38%)`),
616
+ /** Elevation when disabled. */
617
+ containerElevation: unsafeCSS(`var(--m3e-secondary-fab-disabled-container-elevation, ${DesignToken.elevation.level0})`),
618
+ /** Lowered elevation when disabled. */
619
+ loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-disabled-container-elevation, ${DesignToken.elevation.level0})`)
641
620
  },
642
- /** Design tokens that control the `secondary-container` variant. */
643
- "secondary-container": {
644
- /** Default label color. */
645
- labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-label-text-color, ${DesignToken.color.onSecondaryContainer})`),
646
- /** Default icon color. */
647
- iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-icon-color, ${DesignToken.color.onSecondaryContainer})`),
648
- /** Default container background color. */
649
- containerColor: unsafeCSS(`var(--m3e-secondary-container-fab-container-color, ${DesignToken.color.secondaryContainer})`),
650
- /** Resting elevation. */
651
- containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-container-elevation, ${DesignToken.elevation.level3})`),
652
- /** Lowered resting elevation. */
653
- loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-container-elevation, ${DesignToken.elevation.level2})`),
654
- /** Design tokens that control disabled state. */
655
- disabled: {
656
- /** Container background color when disabled. */
657
- containerColor: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-container-color, ${DesignToken.color.onSurface})`),
658
- /** Opacity of container when disabled. */
659
- containerOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-container-opacity, 10%)`),
660
- /** Icon color when disabled. */
661
- iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-icon-color, ${DesignToken.color.onSurface})`),
662
- /** Icon opacity when disabled. */
663
- iconOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-icon-opacity, 38%)`),
664
- /** Label color when disabled. */
665
- labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-label-text-color, ${DesignToken.color.onSurface})`),
666
- /** Label opacity when disabled. */
667
- labelTextOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-label-text-opacity, 38%)`),
668
- /** Elevation when disabled. */
669
- containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-container-elevation, ${DesignToken.elevation.level0})`),
670
- /** Lowered elevation when disabled. */
671
- loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-disabled-container-elevation, ${DesignToken.elevation.level0})`),
672
- },
673
- /** Design tokens that control hover state. */
674
- hover: {
675
- /** Icon color on hover. */
676
- iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-hover-icon-color, ${DesignToken.color.onSecondaryContainer})`),
677
- /** Label color on hover. */
678
- labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-hover-label-text-color, ${DesignToken.color.onSecondaryContainer})`),
679
- /** State layer color on hover. */
680
- stateLayerColor: unsafeCSS(`var(--m3e-secondary-container-fab-hover-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
681
- /** State layer opacity on hover. */
682
- stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
683
- /** Elevation on hover. */
684
- containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-hover-container-elevation, ${DesignToken.elevation.level4})`),
685
- /** Lowered elevation on hover. */
686
- loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-hover-container-elevation, ${DesignToken.elevation.level3})`),
687
- },
688
- /** Design tokens that control focus state. */
689
- focus: {
690
- /** Icon color on focus. */
691
- iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-focus-icon-color, ${DesignToken.color.onSecondaryContainer})`),
692
- /** Label color on focus. */
693
- labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-focus-label-text-color, ${DesignToken.color.onSecondaryContainer})`),
694
- /** State layer color on focus. */
695
- stateLayerColor: unsafeCSS(`var(--m3e-secondary-container-fab-focus-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
696
- /**State layer opacity on focus. */
697
- stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
698
- /** Elevation on focus. */
699
- containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-focus-container-elevation, ${DesignToken.elevation.level3})`),
700
- /** Lowered elevation on focus. */
701
- loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-focus-container-elevation, ${DesignToken.elevation.level2})`),
702
- },
703
- /** Design tokens that control pressed state. */
704
- pressed: {
705
- /** Icon color on pressed. */
706
- iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-icon-color, ${DesignToken.color.onSecondaryContainer})`),
707
- /** Label color on pressed. */
708
- labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-label-text-color, ${DesignToken.color.onSecondaryContainer})`),
709
- /** State layer color on pressed. */
710
- stateLayerColor: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
711
- /** State layer opacity on pressed. */
712
- stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
713
- /** Elevation on pressed. */
714
- containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-container-elevation, ${DesignToken.elevation.level3})`),
715
- /** Lowered elevation on pressed. */
716
- loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-pressed-container-elevation, ${DesignToken.elevation.level2})`),
717
- },
621
+ /** Design tokens that control hover state. */
622
+ hover: {
623
+ /** Icon color on hover. */
624
+ iconColor: unsafeCSS(`var(--m3e-secondary-fab-hover-icon-color, ${DesignToken.color.onSecondary})`),
625
+ /** Label color on hover. */
626
+ labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-hover-label-text-color, ${DesignToken.color.onSecondary})`),
627
+ /** State layer color on hover. */
628
+ stateLayerColor: unsafeCSS(`var(--m3e-secondary-fab-hover-state-layer-color, ${DesignToken.color.onSecondary})`),
629
+ /** State layer opacity on hover. */
630
+ stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-fab-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
631
+ /** Elevation on hover. */
632
+ containerElevation: unsafeCSS(`var(--m3e-secondary-fab-hover-container-elevation, ${DesignToken.elevation.level4})`),
633
+ /** Lowered elevation on hover. */
634
+ loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-hover-container-elevation, ${DesignToken.elevation.level3})`)
718
635
  },
719
- /** Design tokens that control the `tertiary-container` variant. */
720
- "tertiary-container": {
721
- /** Default label color. */
722
- labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-label-text-color, ${DesignToken.color.onTertiaryContainer})`),
723
- /** Default icon color. */
724
- iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-icon-color, ${DesignToken.color.onTertiaryContainer})`),
725
- /** Default container background color. */
726
- containerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-container-color, ${DesignToken.color.tertiaryContainer})`),
727
- /** Resting elevation. */
728
- containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-container-elevation, ${DesignToken.elevation.level3})`),
729
- /** Lowered resting elevation. */
730
- loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-container-elevation, ${DesignToken.elevation.level2})`),
731
- /** Design tokens that control disabled state. */
732
- disabled: {
733
- /** Container background color when disabled. */
734
- containerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-container-color, ${DesignToken.color.onSurface})`),
735
- /** Opacity of container when disabled. */
736
- containerOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-container-opacity, 10%)`),
737
- /** Icon color when disabled. */
738
- iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-icon-color, ${DesignToken.color.onSurface})`),
739
- /** Icon opacity when disabled. */
740
- iconOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-icon-opacity, 38%)`),
741
- /** Label color when disabled. */
742
- labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-label-text-color, ${DesignToken.color.onSurface})`),
743
- /** Label opacity when disabled. */
744
- labelTextOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-label-text-opacity, 38%)`),
745
- /** Elevation when disabled. */
746
- containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-container-elevation, ${DesignToken.elevation.level0})`),
747
- /** Lowered elevation when disabled. */
748
- loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-disabled-container-elevation, ${DesignToken.elevation.level0})`),
749
- },
750
- /** Design tokens that control hover state. */
751
- hover: {
752
- /** Icon color on hover. */
753
- iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-icon-color, ${DesignToken.color.onTertiaryContainer})`),
754
- /** Label color on hover. */
755
- labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-label-text-color, ${DesignToken.color.onTertiaryContainer})`),
756
- /** State layer color on hover. */
757
- stateLayerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-state-layer-color, ${DesignToken.color.onTertiaryContainer})`),
758
- /** State layer opacity on hover. */
759
- stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
760
- /** Elevation on hover. */
761
- containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-container-elevation, ${DesignToken.elevation.level4})`),
762
- /** Lowered elevation on hover. */
763
- loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-hover-container-elevation, ${DesignToken.elevation.level3})`),
764
- },
765
- /** Design tokens that control focus state. */
766
- focus: {
767
- /** Icon color on focus. */
768
- iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-icon-color, ${DesignToken.color.onTertiaryContainer})`),
769
- /** Label color on focus. */
770
- labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-label-text-color, ${DesignToken.color.onTertiaryContainer})`),
771
- /** State layer color on focus. */
772
- stateLayerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-state-layer-color, ${DesignToken.color.onTertiaryContainer})`),
773
- /**State layer opacity on focus. */
774
- stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
775
- /** Elevation on focus. */
776
- containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-container-elevation, ${DesignToken.elevation.level3})`),
777
- /** Lowered elevation on focus. */
778
- loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-focus-container-elevation, ${DesignToken.elevation.level2})`),
779
- },
780
- /** Design tokens that control pressed state. */
781
- pressed: {
782
- /** Icon color on pressed. */
783
- iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-icon-color, ${DesignToken.color.onTertiaryContainer})`),
784
- /** Label color on pressed. */
785
- labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-label-text-color, ${DesignToken.color.onTertiaryContainer})`),
786
- /** State layer color on pressed. */
787
- stateLayerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-state-layer-color, ${DesignToken.color.onTertiaryContainer})`),
788
- /** State layer opacity on pressed. */
789
- stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
790
- /** Elevation on pressed. */
791
- containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-container-elevation, ${DesignToken.elevation.level3})`),
792
- /** Lowered elevation on pressed. */
793
- loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-pressed-container-elevation, ${DesignToken.elevation.level2})`),
794
- },
636
+ /** Design tokens that control focus state. */
637
+ focus: {
638
+ /** Icon color on focus. */
639
+ iconColor: unsafeCSS(`var(--m3e-secondary-fab-focus-icon-color, ${DesignToken.color.onSecondary})`),
640
+ /** Label color on focus. */
641
+ labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-focus-label-text-color, ${DesignToken.color.onSecondary})`),
642
+ /** State layer color on focus. */
643
+ stateLayerColor: unsafeCSS(`var(--m3e-secondary-fab-focus-state-layer-color, ${DesignToken.color.onSecondary})`),
644
+ /**State layer opacity on focus. */
645
+ stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-fab-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
646
+ /** Elevation on focus. */
647
+ containerElevation: unsafeCSS(`var(--m3e-secondary-fab-focus-container-elevation, ${DesignToken.elevation.level3})`),
648
+ /** Lowered elevation on focus. */
649
+ loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-focus-container-elevation, ${DesignToken.elevation.level2})`)
795
650
  },
796
- /** Design tokens that control the `surface` variant. */
797
- surface: {
798
- /** Default label color. */
799
- labelTextColor: unsafeCSS(`var(--m3e-surface-fab-label-text-color, ${DesignToken.color.primary})`),
800
- /** Default icon color. */
801
- iconColor: unsafeCSS(`var(--m3e-surface-fab-icon-color, ${DesignToken.color.primary})`),
802
- /** Default container background color. */
803
- containerColor: unsafeCSS(`var(--m3e-surface-fab-container-color, ${DesignToken.color.surfaceContainerHigh})`),
804
- /** Resting elevation. */
805
- containerElevation: unsafeCSS(`var(--m3e-surface-fab-container-elevation, ${DesignToken.elevation.level3})`),
806
- /** Lowered resting elevation. */
807
- loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-container-elevation, ${DesignToken.elevation.level2})`),
808
- /** Lowered container background color. */
809
- loweredContainerColor: unsafeCSS(`var(--m3e-surface-fab-lowered-container-color, ${DesignToken.color.surfaceContainerLow})`),
810
- /** Design tokens that control disabled state. */
811
- disabled: {
812
- /** Container background color when disabled. */
813
- containerColor: unsafeCSS(`var(--m3e-surface-fab-disabled-container-color, ${DesignToken.color.onSurface})`),
814
- /** Opacity of container when disabled. */
815
- containerOpacity: unsafeCSS(`var(--m3e-surface-fab-disabled-container-opacity, 10%)`),
816
- /** Icon color when disabled. */
817
- iconColor: unsafeCSS(`var(--m3e-surface-fab-disabled-icon-color, ${DesignToken.color.onSurface})`),
818
- /** Icon opacity when disabled. */
819
- iconOpacity: unsafeCSS(`var(--m3e-surface-fab-disabled-icon-opacity, 38%)`),
820
- /** Label color when disabled. */
821
- labelTextColor: unsafeCSS(`var(--m3e-surface-fab-disabled-label-text-color, ${DesignToken.color.onSurface})`),
822
- /** Label opacity when disabled. */
823
- labelTextOpacity: unsafeCSS(`var(--m3e-surface-fab-disabled-label-text-opacity, 38%)`),
824
- /** Elevation when disabled. */
825
- containerElevation: unsafeCSS(`var(--m3e-surface-fab-disabled-container-elevation, ${DesignToken.elevation.level0})`),
826
- /** Lowered elevation when disabled. */
827
- loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-disabled-container-elevation, ${DesignToken.elevation.level0})`),
828
- },
829
- /** Design tokens that control hover state. */
830
- hover: {
831
- /** Icon color on hover. */
832
- iconColor: unsafeCSS(`var(--m3e-surface-fab-hover-icon-color, ${DesignToken.color.primary})`),
833
- /** Label color on hover. */
834
- labelTextColor: unsafeCSS(`var(--m3e-surface-fab-hover-label-text-color, ${DesignToken.color.primary})`),
835
- /** State layer color on hover. */
836
- stateLayerColor: unsafeCSS(`var(--m3e-surface-fab-hover-state-layer-color, ${DesignToken.color.primary})`),
837
- /** State layer opacity on hover. */
838
- stateLayerOpacity: unsafeCSS(`var(--m3e-surface-fab-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
839
- /** Elevation on hover. */
840
- containerElevation: unsafeCSS(`var(--m3e-surface-fab-hover-container-elevation, ${DesignToken.elevation.level4})`),
841
- /** Lowered elevation on hover. */
842
- loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-hover-container-elevation, ${DesignToken.elevation.level3})`),
843
- },
844
- /** Design tokens that control focus state. */
845
- focus: {
846
- /** Icon color on focus. */
847
- iconColor: unsafeCSS(`var(--m3e-surface-fab-focus-icon-color, ${DesignToken.color.primary})`),
848
- /** Label color on focus. */
849
- labelTextColor: unsafeCSS(`var(--m3e-surface-fab-focus-label-text-color, ${DesignToken.color.primary})`),
850
- /** State layer color on focus. */
851
- stateLayerColor: unsafeCSS(`var(--m3e-surface-fab-focus-state-layer-color, ${DesignToken.color.primary})`),
852
- /**State layer opacity on focus. */
853
- stateLayerOpacity: unsafeCSS(`var(--m3e-surface-fab-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
854
- /** Elevation on focus. */
855
- containerElevation: unsafeCSS(`var(--m3e-surface-fab-focus-container-elevation, ${DesignToken.elevation.level3})`),
856
- /** Lowered elevation on focus. */
857
- loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-focus-container-elevation, ${DesignToken.elevation.level2})`),
858
- },
859
- /** Design tokens that control pressed state. */
860
- pressed: {
861
- /** Icon color on pressed. */
862
- iconColor: unsafeCSS(`var(--m3e-surface-fab-pressed-icon-color, ${DesignToken.color.primary})`),
863
- /** Label color on pressed. */
864
- labelTextColor: unsafeCSS(`var(--m3e-surface-fab-pressed-label-text-color, ${DesignToken.color.primary})`),
865
- /** State layer color on pressed. */
866
- stateLayerColor: unsafeCSS(`var(--m3e-surface-fab-pressed-state-layer-color, ${DesignToken.color.primary})`),
867
- /** State layer opacity on pressed. */
868
- stateLayerOpacity: unsafeCSS(`var(--m3e-surface-fab-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
869
- /** Elevation on pressed. */
870
- containerElevation: unsafeCSS(`var(--m3e-surface-fab-pressed-container-elevation, ${DesignToken.elevation.level3})`),
871
- /** Lowered elevation on pressed. */
872
- loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-pressed-container-elevation, ${DesignToken.elevation.level2})`),
873
- },
651
+ /** Design tokens that control pressed state. */
652
+ pressed: {
653
+ /** Icon color on pressed. */
654
+ iconColor: unsafeCSS(`var(--m3e-secondary-fab-pressed-icon-color, ${DesignToken.color.onSecondary})`),
655
+ /** Label color on pressed. */
656
+ labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-pressed-label-text-color, ${DesignToken.color.onSecondary})`),
657
+ /** State layer color on pressed. */
658
+ stateLayerColor: unsafeCSS(`var(--m3e-secondary-fab-pressed-state-layer-color, ${DesignToken.color.onSecondary})`),
659
+ /** State layer opacity on pressed. */
660
+ stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-fab-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
661
+ /** Elevation on pressed. */
662
+ containerElevation: unsafeCSS(`var(--m3e-secondary-fab-pressed-container-elevation, ${DesignToken.elevation.level3})`),
663
+ /** Lowered elevation on pressed. */
664
+ loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-pressed-container-elevation, ${DesignToken.elevation.level2})`)
665
+ }
666
+ },
667
+ /** Design tokens that control the `tertiary` variant. */
668
+ tertiary: {
669
+ /** Default label color. */
670
+ labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-label-text-color, ${DesignToken.color.onTertiary})`),
671
+ /** Default icon color. */
672
+ iconColor: unsafeCSS(`var(--m3e-tertiary-fab-icon-color, ${DesignToken.color.onTertiary})`),
673
+ /** Default container background color. */
674
+ containerColor: unsafeCSS(`var(--m3e-tertiary-fab-container-color, ${DesignToken.color.tertiary})`),
675
+ /** Resting elevation. */
676
+ containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-container-elevation, ${DesignToken.elevation.level3})`),
677
+ /** Lowered resting elevation. */
678
+ loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-container-elevation, ${DesignToken.elevation.level2})`),
679
+ /** Design tokens that control disabled state. */
680
+ disabled: {
681
+ /** Container background color when disabled. */
682
+ containerColor: unsafeCSS(`var(--m3e-tertiary-fab-disabled-container-color, ${DesignToken.color.onSurface})`),
683
+ /** Opacity of container when disabled. */
684
+ containerOpacity: unsafeCSS(`var(--m3e-tertiary-fab-disabled-container-opacity, 10%)`),
685
+ /** Icon color when disabled. */
686
+ iconColor: unsafeCSS(`var(--m3e-tertiary-fab-disabled-icon-color, ${DesignToken.color.onSurface})`),
687
+ /** Icon opacity when disabled. */
688
+ iconOpacity: unsafeCSS(`var(--m3e-tertiary-fab-disabled-icon-opacity, 38%)`),
689
+ /** Label color when disabled. */
690
+ labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-disabled-label-text-color, ${DesignToken.color.onSurface})`),
691
+ /** Label opacity when disabled. */
692
+ labelTextOpacity: unsafeCSS(`var(--m3e-tertiary-fab-disabled-label-text-opacity, 38%)`),
693
+ /** Elevation when disabled. */
694
+ containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-disabled-container-elevation, ${DesignToken.elevation.level0})`),
695
+ /** Lowered elevation when disabled. */
696
+ loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-disabled-container-elevation, ${DesignToken.elevation.level0})`)
697
+ },
698
+ /** Design tokens that control hover state. */
699
+ hover: {
700
+ /** Icon color on hover. */
701
+ iconColor: unsafeCSS(`var(--m3e-tertiary-fab-hover-icon-color, ${DesignToken.color.onTertiary})`),
702
+ /** Label color on hover. */
703
+ labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-hover-label-text-color, ${DesignToken.color.onTertiary})`),
704
+ /** State layer color on hover. */
705
+ stateLayerColor: unsafeCSS(`var(--m3e-tertiary-fab-hover-state-layer-color, ${DesignToken.color.onTertiary})`),
706
+ /** State layer opacity on hover. */
707
+ stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-fab-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
708
+ /** Elevation on hover. */
709
+ containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-hover-container-elevation, ${DesignToken.elevation.level4})`),
710
+ /** Lowered elevation on hover. */
711
+ loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-hover-container-elevation, ${DesignToken.elevation.level3})`)
874
712
  },
713
+ /** Design tokens that control focus state. */
714
+ focus: {
715
+ /** Icon color on focus. */
716
+ iconColor: unsafeCSS(`var(--m3e-tertiary-fab-focus-icon-color, ${DesignToken.color.onTertiary})`),
717
+ /** Label color on focus. */
718
+ labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-focus-label-text-color, ${DesignToken.color.onTertiary})`),
719
+ /** State layer color on focus. */
720
+ stateLayerColor: unsafeCSS(`var(--m3e-tertiary-fab-focus-state-layer-color, ${DesignToken.color.onTertiary})`),
721
+ /**State layer opacity on focus. */
722
+ stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-fab-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
723
+ /** Elevation on focus. */
724
+ containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-focus-container-elevation, ${DesignToken.elevation.level3})`),
725
+ /** Lowered elevation on focus. */
726
+ loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-focus-container-elevation, ${DesignToken.elevation.level2})`)
727
+ },
728
+ /** Design tokens that control pressed state. */
729
+ pressed: {
730
+ /** Icon color on pressed. */
731
+ iconColor: unsafeCSS(`var(--m3e-tertiary-fab-pressed-icon-color, ${DesignToken.color.onTertiary})`),
732
+ /** Label color on pressed. */
733
+ labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-pressed-label-text-color, ${DesignToken.color.onTertiary})`),
734
+ /** State layer color on pressed. */
735
+ stateLayerColor: unsafeCSS(`var(--m3e-tertiary-fab-pressed-state-layer-color, ${DesignToken.color.onTertiary})`),
736
+ /** State layer opacity on pressed. */
737
+ stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-fab-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
738
+ /** Elevation on pressed. */
739
+ containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-pressed-container-elevation, ${DesignToken.elevation.level3})`),
740
+ /** Lowered elevation on pressed. */
741
+ loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-pressed-container-elevation, ${DesignToken.elevation.level2})`)
742
+ }
743
+ },
744
+ /** Design tokens that control the `primary-container` variant. */
745
+ "primary-container": {
746
+ /** Default label color. */
747
+ labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-label-text-color, ${DesignToken.color.onPrimaryContainer})`),
748
+ /** Default icon color. */
749
+ iconColor: unsafeCSS(`var(--m3e-primary-container-fab-icon-color, ${DesignToken.color.onPrimaryContainer})`),
750
+ /** Default container background color. */
751
+ containerColor: unsafeCSS(`var(--m3e-primary-container-fab-container-color, ${DesignToken.color.primaryContainer})`),
752
+ /** Resting elevation. */
753
+ containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-container-elevation, ${DesignToken.elevation.level3})`),
754
+ /** Lowered resting elevation. */
755
+ loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-container-elevation, ${DesignToken.elevation.level2})`),
756
+ /** Design tokens that control disabled state. */
757
+ disabled: {
758
+ /** Container background color when disabled. */
759
+ containerColor: unsafeCSS(`var(--m3e-primary-container-fab-disabled-container-color, ${DesignToken.color.onSurface})`),
760
+ /** Opacity of container when disabled. */
761
+ containerOpacity: unsafeCSS(`var(--m3e-primary-container-fab-disabled-container-opacity, 10%)`),
762
+ /** Icon color when disabled. */
763
+ iconColor: unsafeCSS(`var(--m3e-primary-container-fab-disabled-icon-color, ${DesignToken.color.onSurface})`),
764
+ /** Icon opacity when disabled. */
765
+ iconOpacity: unsafeCSS(`var(--m3e-primary-container-fab-disabled-icon-opacity, 38%)`),
766
+ /** Label color when disabled. */
767
+ labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-disabled-label-text-color, ${DesignToken.color.onSurface})`),
768
+ /** Label opacity when disabled. */
769
+ labelTextOpacity: unsafeCSS(`var(--m3e-primary-container-fab-disabled-label-text-opacity, 38%)`),
770
+ /** Elevation when disabled. */
771
+ containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-disabled-container-elevation, ${DesignToken.elevation.level0})`),
772
+ /** Lowered elevation when disabled. */
773
+ loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-disabled-container-elevation, ${DesignToken.elevation.level0})`)
774
+ },
775
+ /** Design tokens that control hover state. */
776
+ hover: {
777
+ /** Icon color on hover. */
778
+ iconColor: unsafeCSS(`var(--m3e-primary-container-fab-hover-icon-color, ${DesignToken.color.onPrimaryContainer})`),
779
+ /** Label color on hover. */
780
+ labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-hover-label-text-color, ${DesignToken.color.onPrimaryContainer})`),
781
+ /** State layer color on hover. */
782
+ stateLayerColor: unsafeCSS(`var(--m3e-primary-container-fab-hover-state-layer-color, ${DesignToken.color.onPrimaryContainer})`),
783
+ /** State layer opacity on hover. */
784
+ stateLayerOpacity: unsafeCSS(`var(--m3e-primary-container-fab-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
785
+ /** Elevation on hover. */
786
+ containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-hover-container-elevation, ${DesignToken.elevation.level4})`),
787
+ /** Lowered elevation on hover. */
788
+ loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-hover-container-elevation, ${DesignToken.elevation.level3})`)
789
+ },
790
+ /** Design tokens that control focus state. */
791
+ focus: {
792
+ /** Icon color on focus. */
793
+ iconColor: unsafeCSS(`var(--m3e-primary-container-fab-focus-icon-color, ${DesignToken.color.onPrimaryContainer})`),
794
+ /** Label color on focus. */
795
+ labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-focus-label-text-color, ${DesignToken.color.onPrimaryContainer})`),
796
+ /** State layer color on focus. */
797
+ stateLayerColor: unsafeCSS(`var(--m3e-primary-container-fab-focus-state-layer-color, ${DesignToken.color.onPrimaryContainer})`),
798
+ /**State layer opacity on focus. */
799
+ stateLayerOpacity: unsafeCSS(`var(--m3e-primary-container-fab-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
800
+ /** Elevation on focus. */
801
+ containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-focus-container-elevation, ${DesignToken.elevation.level3})`),
802
+ /** Lowered elevation on focus. */
803
+ loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-focus-container-elevation, ${DesignToken.elevation.level2})`)
804
+ },
805
+ /** Design tokens that control pressed state. */
806
+ pressed: {
807
+ /** Icon color on pressed. */
808
+ iconColor: unsafeCSS(`var(--m3e-primary-container-fab-pressed-icon-color, ${DesignToken.color.onPrimaryContainer})`),
809
+ /** Label color on pressed. */
810
+ labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-pressed-label-text-color, ${DesignToken.color.onPrimaryContainer})`),
811
+ /** State layer color on pressed. */
812
+ stateLayerColor: unsafeCSS(`var(--m3e-primary-container-fab-pressed-state-layer-color, ${DesignToken.color.onPrimaryContainer})`),
813
+ /** State layer opacity on pressed. */
814
+ stateLayerOpacity: unsafeCSS(`var(--m3e-primary-container-fab-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
815
+ /** Elevation on pressed. */
816
+ containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-pressed-container-elevation, ${DesignToken.elevation.level3})`),
817
+ /** Lowered elevation on pressed. */
818
+ loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-pressed-container-elevation, ${DesignToken.elevation.level2})`)
819
+ }
820
+ },
821
+ /** Design tokens that control the `secondary-container` variant. */
822
+ "secondary-container": {
823
+ /** Default label color. */
824
+ labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-label-text-color, ${DesignToken.color.onSecondaryContainer})`),
825
+ /** Default icon color. */
826
+ iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-icon-color, ${DesignToken.color.onSecondaryContainer})`),
827
+ /** Default container background color. */
828
+ containerColor: unsafeCSS(`var(--m3e-secondary-container-fab-container-color, ${DesignToken.color.secondaryContainer})`),
829
+ /** Resting elevation. */
830
+ containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-container-elevation, ${DesignToken.elevation.level3})`),
831
+ /** Lowered resting elevation. */
832
+ loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-container-elevation, ${DesignToken.elevation.level2})`),
833
+ /** Design tokens that control disabled state. */
834
+ disabled: {
835
+ /** Container background color when disabled. */
836
+ containerColor: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-container-color, ${DesignToken.color.onSurface})`),
837
+ /** Opacity of container when disabled. */
838
+ containerOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-container-opacity, 10%)`),
839
+ /** Icon color when disabled. */
840
+ iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-icon-color, ${DesignToken.color.onSurface})`),
841
+ /** Icon opacity when disabled. */
842
+ iconOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-icon-opacity, 38%)`),
843
+ /** Label color when disabled. */
844
+ labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-label-text-color, ${DesignToken.color.onSurface})`),
845
+ /** Label opacity when disabled. */
846
+ labelTextOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-label-text-opacity, 38%)`),
847
+ /** Elevation when disabled. */
848
+ containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-container-elevation, ${DesignToken.elevation.level0})`),
849
+ /** Lowered elevation when disabled. */
850
+ loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-disabled-container-elevation, ${DesignToken.elevation.level0})`)
851
+ },
852
+ /** Design tokens that control hover state. */
853
+ hover: {
854
+ /** Icon color on hover. */
855
+ iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-hover-icon-color, ${DesignToken.color.onSecondaryContainer})`),
856
+ /** Label color on hover. */
857
+ labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-hover-label-text-color, ${DesignToken.color.onSecondaryContainer})`),
858
+ /** State layer color on hover. */
859
+ stateLayerColor: unsafeCSS(`var(--m3e-secondary-container-fab-hover-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
860
+ /** State layer opacity on hover. */
861
+ stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
862
+ /** Elevation on hover. */
863
+ containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-hover-container-elevation, ${DesignToken.elevation.level4})`),
864
+ /** Lowered elevation on hover. */
865
+ loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-hover-container-elevation, ${DesignToken.elevation.level3})`)
866
+ },
867
+ /** Design tokens that control focus state. */
868
+ focus: {
869
+ /** Icon color on focus. */
870
+ iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-focus-icon-color, ${DesignToken.color.onSecondaryContainer})`),
871
+ /** Label color on focus. */
872
+ labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-focus-label-text-color, ${DesignToken.color.onSecondaryContainer})`),
873
+ /** State layer color on focus. */
874
+ stateLayerColor: unsafeCSS(`var(--m3e-secondary-container-fab-focus-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
875
+ /**State layer opacity on focus. */
876
+ stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
877
+ /** Elevation on focus. */
878
+ containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-focus-container-elevation, ${DesignToken.elevation.level3})`),
879
+ /** Lowered elevation on focus. */
880
+ loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-focus-container-elevation, ${DesignToken.elevation.level2})`)
881
+ },
882
+ /** Design tokens that control pressed state. */
883
+ pressed: {
884
+ /** Icon color on pressed. */
885
+ iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-icon-color, ${DesignToken.color.onSecondaryContainer})`),
886
+ /** Label color on pressed. */
887
+ labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-label-text-color, ${DesignToken.color.onSecondaryContainer})`),
888
+ /** State layer color on pressed. */
889
+ stateLayerColor: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
890
+ /** State layer opacity on pressed. */
891
+ stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
892
+ /** Elevation on pressed. */
893
+ containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-container-elevation, ${DesignToken.elevation.level3})`),
894
+ /** Lowered elevation on pressed. */
895
+ loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-pressed-container-elevation, ${DesignToken.elevation.level2})`)
896
+ }
897
+ },
898
+ /** Design tokens that control the `tertiary-container` variant. */
899
+ "tertiary-container": {
900
+ /** Default label color. */
901
+ labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-label-text-color, ${DesignToken.color.onTertiaryContainer})`),
902
+ /** Default icon color. */
903
+ iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-icon-color, ${DesignToken.color.onTertiaryContainer})`),
904
+ /** Default container background color. */
905
+ containerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-container-color, ${DesignToken.color.tertiaryContainer})`),
906
+ /** Resting elevation. */
907
+ containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-container-elevation, ${DesignToken.elevation.level3})`),
908
+ /** Lowered resting elevation. */
909
+ loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-container-elevation, ${DesignToken.elevation.level2})`),
910
+ /** Design tokens that control disabled state. */
911
+ disabled: {
912
+ /** Container background color when disabled. */
913
+ containerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-container-color, ${DesignToken.color.onSurface})`),
914
+ /** Opacity of container when disabled. */
915
+ containerOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-container-opacity, 10%)`),
916
+ /** Icon color when disabled. */
917
+ iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-icon-color, ${DesignToken.color.onSurface})`),
918
+ /** Icon opacity when disabled. */
919
+ iconOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-icon-opacity, 38%)`),
920
+ /** Label color when disabled. */
921
+ labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-label-text-color, ${DesignToken.color.onSurface})`),
922
+ /** Label opacity when disabled. */
923
+ labelTextOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-label-text-opacity, 38%)`),
924
+ /** Elevation when disabled. */
925
+ containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-container-elevation, ${DesignToken.elevation.level0})`),
926
+ /** Lowered elevation when disabled. */
927
+ loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-disabled-container-elevation, ${DesignToken.elevation.level0})`)
928
+ },
929
+ /** Design tokens that control hover state. */
930
+ hover: {
931
+ /** Icon color on hover. */
932
+ iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-icon-color, ${DesignToken.color.onTertiaryContainer})`),
933
+ /** Label color on hover. */
934
+ labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-label-text-color, ${DesignToken.color.onTertiaryContainer})`),
935
+ /** State layer color on hover. */
936
+ stateLayerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-state-layer-color, ${DesignToken.color.onTertiaryContainer})`),
937
+ /** State layer opacity on hover. */
938
+ stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
939
+ /** Elevation on hover. */
940
+ containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-container-elevation, ${DesignToken.elevation.level4})`),
941
+ /** Lowered elevation on hover. */
942
+ loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-hover-container-elevation, ${DesignToken.elevation.level3})`)
943
+ },
944
+ /** Design tokens that control focus state. */
945
+ focus: {
946
+ /** Icon color on focus. */
947
+ iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-icon-color, ${DesignToken.color.onTertiaryContainer})`),
948
+ /** Label color on focus. */
949
+ labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-label-text-color, ${DesignToken.color.onTertiaryContainer})`),
950
+ /** State layer color on focus. */
951
+ stateLayerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-state-layer-color, ${DesignToken.color.onTertiaryContainer})`),
952
+ /**State layer opacity on focus. */
953
+ stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
954
+ /** Elevation on focus. */
955
+ containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-container-elevation, ${DesignToken.elevation.level3})`),
956
+ /** Lowered elevation on focus. */
957
+ loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-focus-container-elevation, ${DesignToken.elevation.level2})`)
958
+ },
959
+ /** Design tokens that control pressed state. */
960
+ pressed: {
961
+ /** Icon color on pressed. */
962
+ iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-icon-color, ${DesignToken.color.onTertiaryContainer})`),
963
+ /** Label color on pressed. */
964
+ labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-label-text-color, ${DesignToken.color.onTertiaryContainer})`),
965
+ /** State layer color on pressed. */
966
+ stateLayerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-state-layer-color, ${DesignToken.color.onTertiaryContainer})`),
967
+ /** State layer opacity on pressed. */
968
+ stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
969
+ /** Elevation on pressed. */
970
+ containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-container-elevation, ${DesignToken.elevation.level3})`),
971
+ /** Lowered elevation on pressed. */
972
+ loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-pressed-container-elevation, ${DesignToken.elevation.level2})`)
973
+ }
974
+ },
975
+ /** Design tokens that control the `surface` variant. */
976
+ surface: {
977
+ /** Default label color. */
978
+ labelTextColor: unsafeCSS(`var(--m3e-surface-fab-label-text-color, ${DesignToken.color.primary})`),
979
+ /** Default icon color. */
980
+ iconColor: unsafeCSS(`var(--m3e-surface-fab-icon-color, ${DesignToken.color.primary})`),
981
+ /** Default container background color. */
982
+ containerColor: unsafeCSS(`var(--m3e-surface-fab-container-color, ${DesignToken.color.surfaceContainerHigh})`),
983
+ /** Resting elevation. */
984
+ containerElevation: unsafeCSS(`var(--m3e-surface-fab-container-elevation, ${DesignToken.elevation.level3})`),
985
+ /** Lowered resting elevation. */
986
+ loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-container-elevation, ${DesignToken.elevation.level2})`),
987
+ /** Lowered container background color. */
988
+ loweredContainerColor: unsafeCSS(`var(--m3e-surface-fab-lowered-container-color, ${DesignToken.color.surfaceContainerLow})`),
989
+ /** Design tokens that control disabled state. */
990
+ disabled: {
991
+ /** Container background color when disabled. */
992
+ containerColor: unsafeCSS(`var(--m3e-surface-fab-disabled-container-color, ${DesignToken.color.onSurface})`),
993
+ /** Opacity of container when disabled. */
994
+ containerOpacity: unsafeCSS(`var(--m3e-surface-fab-disabled-container-opacity, 10%)`),
995
+ /** Icon color when disabled. */
996
+ iconColor: unsafeCSS(`var(--m3e-surface-fab-disabled-icon-color, ${DesignToken.color.onSurface})`),
997
+ /** Icon opacity when disabled. */
998
+ iconOpacity: unsafeCSS(`var(--m3e-surface-fab-disabled-icon-opacity, 38%)`),
999
+ /** Label color when disabled. */
1000
+ labelTextColor: unsafeCSS(`var(--m3e-surface-fab-disabled-label-text-color, ${DesignToken.color.onSurface})`),
1001
+ /** Label opacity when disabled. */
1002
+ labelTextOpacity: unsafeCSS(`var(--m3e-surface-fab-disabled-label-text-opacity, 38%)`),
1003
+ /** Elevation when disabled. */
1004
+ containerElevation: unsafeCSS(`var(--m3e-surface-fab-disabled-container-elevation, ${DesignToken.elevation.level0})`),
1005
+ /** Lowered elevation when disabled. */
1006
+ loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-disabled-container-elevation, ${DesignToken.elevation.level0})`)
1007
+ },
1008
+ /** Design tokens that control hover state. */
1009
+ hover: {
1010
+ /** Icon color on hover. */
1011
+ iconColor: unsafeCSS(`var(--m3e-surface-fab-hover-icon-color, ${DesignToken.color.primary})`),
1012
+ /** Label color on hover. */
1013
+ labelTextColor: unsafeCSS(`var(--m3e-surface-fab-hover-label-text-color, ${DesignToken.color.primary})`),
1014
+ /** State layer color on hover. */
1015
+ stateLayerColor: unsafeCSS(`var(--m3e-surface-fab-hover-state-layer-color, ${DesignToken.color.primary})`),
1016
+ /** State layer opacity on hover. */
1017
+ stateLayerOpacity: unsafeCSS(`var(--m3e-surface-fab-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
1018
+ /** Elevation on hover. */
1019
+ containerElevation: unsafeCSS(`var(--m3e-surface-fab-hover-container-elevation, ${DesignToken.elevation.level4})`),
1020
+ /** Lowered elevation on hover. */
1021
+ loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-hover-container-elevation, ${DesignToken.elevation.level3})`)
1022
+ },
1023
+ /** Design tokens that control focus state. */
1024
+ focus: {
1025
+ /** Icon color on focus. */
1026
+ iconColor: unsafeCSS(`var(--m3e-surface-fab-focus-icon-color, ${DesignToken.color.primary})`),
1027
+ /** Label color on focus. */
1028
+ labelTextColor: unsafeCSS(`var(--m3e-surface-fab-focus-label-text-color, ${DesignToken.color.primary})`),
1029
+ /** State layer color on focus. */
1030
+ stateLayerColor: unsafeCSS(`var(--m3e-surface-fab-focus-state-layer-color, ${DesignToken.color.primary})`),
1031
+ /**State layer opacity on focus. */
1032
+ stateLayerOpacity: unsafeCSS(`var(--m3e-surface-fab-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
1033
+ /** Elevation on focus. */
1034
+ containerElevation: unsafeCSS(`var(--m3e-surface-fab-focus-container-elevation, ${DesignToken.elevation.level3})`),
1035
+ /** Lowered elevation on focus. */
1036
+ loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-focus-container-elevation, ${DesignToken.elevation.level2})`)
1037
+ },
1038
+ /** Design tokens that control pressed state. */
1039
+ pressed: {
1040
+ /** Icon color on pressed. */
1041
+ iconColor: unsafeCSS(`var(--m3e-surface-fab-pressed-icon-color, ${DesignToken.color.primary})`),
1042
+ /** Label color on pressed. */
1043
+ labelTextColor: unsafeCSS(`var(--m3e-surface-fab-pressed-label-text-color, ${DesignToken.color.primary})`),
1044
+ /** State layer color on pressed. */
1045
+ stateLayerColor: unsafeCSS(`var(--m3e-surface-fab-pressed-state-layer-color, ${DesignToken.color.primary})`),
1046
+ /** State layer opacity on pressed. */
1047
+ stateLayerOpacity: unsafeCSS(`var(--m3e-surface-fab-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
1048
+ /** Elevation on pressed. */
1049
+ containerElevation: unsafeCSS(`var(--m3e-surface-fab-pressed-container-elevation, ${DesignToken.elevation.level3})`),
1050
+ /** Lowered elevation on pressed. */
1051
+ loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-pressed-container-elevation, ${DesignToken.elevation.level2})`)
1052
+ }
1053
+ }
875
1054
  };
876
1055
 
877
1056
  /** @private */
878
1057
  function fabVariantStyle(variant) {
879
- return css `
880
- :host([variant="${unsafeCSS(variant)}"]:not([lowered])) .base {
881
- background-color: ${FabVariantToken[variant].containerColor};
882
- --m3e-elevation-level: ${FabVariantToken[variant].containerElevation};
883
- --m3e-elevation-hover-level: ${FabVariantToken[variant].hover.containerElevation};
884
- --m3e-elevation-focus-level: ${FabVariantToken[variant].focus.containerElevation};
885
- --m3e-elevation-pressed-level: ${FabVariantToken[variant].pressed.containerElevation};
886
- }
887
- :host([variant="${unsafeCSS(variant)}"][lowered]) .base {
888
- background-color: ${FabVariantToken[variant].loweredContainerColor ?? FabVariantToken[variant].containerColor};
889
- --m3e-elevation-level: ${FabVariantToken[variant].loweredContainerElevation};
890
- --m3e-elevation-hover-level: ${FabVariantToken[variant].hover.loweredContainerElevation};
891
- --m3e-elevation-focus-level: ${FabVariantToken[variant].focus.loweredContainerElevation};
892
- --m3e-elevation-pressed-level: ${FabVariantToken[variant].pressed.loweredContainerElevation};
893
- }
894
- :host([variant="${unsafeCSS(variant)}"]) .base {
895
- --m3e-state-layer-hover-color: ${FabVariantToken[variant].hover.stateLayerColor};
896
- --m3e-state-layer-hover-opacity: ${FabVariantToken[variant].hover.stateLayerOpacity};
897
- --m3e-state-layer-focus-color: ${FabVariantToken[variant].focus.stateLayerColor};
898
- --m3e-state-layer-focus-opacity: ${FabVariantToken[variant].focus.stateLayerOpacity};
899
- --m3e-ripple-color: ${FabVariantToken[variant].pressed.stateLayerColor};
900
- --m3e-ripple-opacity: ${FabVariantToken[variant].pressed.stateLayerOpacity};
901
- }
902
- :host([variant="${unsafeCSS(variant)}"]) .label {
903
- color: ${FabVariantToken[variant].labelTextColor};
904
- }
905
- :host([variant="${unsafeCSS(variant)}"]:focus) .label {
906
- color: ${FabVariantToken[variant].focus.labelTextColor};
907
- }
908
- :host([variant="${unsafeCSS(variant)}"]:hover) .label {
909
- color: ${FabVariantToken[variant].hover.labelTextColor};
910
- }
911
- :host([variant="${unsafeCSS(variant)}"]) .base.pressed .label {
912
- color: ${FabVariantToken[variant].pressed.labelTextColor};
913
- }
914
- :host([variant="${unsafeCSS(variant)}"]) .icon {
915
- color: ${FabVariantToken[variant].iconColor};
916
- }
917
- :host([variant="${unsafeCSS(variant)}"]:focus) .icon {
918
- color: ${FabVariantToken[variant].focus.iconColor};
919
- }
920
- :host([variant="${unsafeCSS(variant)}"]:hover) .icon {
921
- color: ${FabVariantToken[variant].hover.iconColor};
922
- }
923
- :host([variant="${unsafeCSS(variant)}"]) .base.pressed .icon {
924
- color: ${FabVariantToken[variant].pressed.iconColor};
925
- }
926
- :host([variant="${unsafeCSS(variant)}"]:disabled) .base,
927
- :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .base {
928
- --m3e-elevation-level: ${FabVariantToken[variant].disabled.containerElevation};
929
- background-color: color-mix(
930
- in srgb,
931
- ${FabVariantToken[variant].disabled.containerColor} ${FabVariantToken[variant].disabled.containerOpacity},
932
- transparent
933
- );
934
- }
935
- :host([variant="${unsafeCSS(variant)}"]:disabled) .label,
936
- :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .label {
937
- color: color-mix(
938
- in srgb,
939
- ${FabVariantToken[variant].disabled.labelTextColor} ${FabVariantToken[variant].disabled.labelTextOpacity},
940
- transparent
941
- );
942
- }
943
- :host([variant="${unsafeCSS(variant)}"]:disabled) .icon,
944
- :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .icon {
945
- color: color-mix(
946
- in srgb,
947
- ${FabVariantToken[variant].disabled.iconColor} ${FabVariantToken[variant].disabled.iconOpacity},
948
- transparent
949
- );
950
- }
951
- `;
1058
+ return css`:host([variant="${unsafeCSS(variant)}"]:not([lowered])) .base { background-color: ${FabVariantToken[variant].containerColor}; --m3e-elevation-level: ${FabVariantToken[variant].containerElevation}; --m3e-elevation-hover-level: ${FabVariantToken[variant].hover.containerElevation}; --m3e-elevation-focus-level: ${FabVariantToken[variant].focus.containerElevation}; --m3e-elevation-pressed-level: ${FabVariantToken[variant].pressed.containerElevation}; } :host([variant="${unsafeCSS(variant)}"][lowered]) .base { background-color: ${FabVariantToken[variant].loweredContainerColor ?? FabVariantToken[variant].containerColor}; --m3e-elevation-level: ${FabVariantToken[variant].loweredContainerElevation}; --m3e-elevation-hover-level: ${FabVariantToken[variant].hover.loweredContainerElevation}; --m3e-elevation-focus-level: ${FabVariantToken[variant].focus.loweredContainerElevation}; --m3e-elevation-pressed-level: ${FabVariantToken[variant].pressed.loweredContainerElevation}; } :host([variant="${unsafeCSS(variant)}"]) .base { --m3e-state-layer-hover-color: ${FabVariantToken[variant].hover.stateLayerColor}; --m3e-state-layer-hover-opacity: ${FabVariantToken[variant].hover.stateLayerOpacity}; --m3e-state-layer-focus-color: ${FabVariantToken[variant].focus.stateLayerColor}; --m3e-state-layer-focus-opacity: ${FabVariantToken[variant].focus.stateLayerOpacity}; --m3e-ripple-color: ${FabVariantToken[variant].pressed.stateLayerColor}; --m3e-ripple-opacity: ${FabVariantToken[variant].pressed.stateLayerOpacity}; } :host([variant="${unsafeCSS(variant)}"]) .label { color: ${FabVariantToken[variant].labelTextColor}; } :host([variant="${unsafeCSS(variant)}"]:focus) .label { color: ${FabVariantToken[variant].focus.labelTextColor}; } :host([variant="${unsafeCSS(variant)}"]:hover) .label { color: ${FabVariantToken[variant].hover.labelTextColor}; } :host([variant="${unsafeCSS(variant)}"]) .base.pressed .label { color: ${FabVariantToken[variant].pressed.labelTextColor}; } :host([variant="${unsafeCSS(variant)}"]) .icon { color: ${FabVariantToken[variant].iconColor}; } :host([variant="${unsafeCSS(variant)}"]:focus) .icon { color: ${FabVariantToken[variant].focus.iconColor}; } :host([variant="${unsafeCSS(variant)}"]:hover) .icon { color: ${FabVariantToken[variant].hover.iconColor}; } :host([variant="${unsafeCSS(variant)}"]) .base.pressed .icon { color: ${FabVariantToken[variant].pressed.iconColor}; } :host([variant="${unsafeCSS(variant)}"]:disabled) .base, :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .base { --m3e-elevation-level: ${FabVariantToken[variant].disabled.containerElevation}; background-color: color-mix( in srgb, ${FabVariantToken[variant].disabled.containerColor} ${FabVariantToken[variant].disabled.containerOpacity}, transparent ); } :host([variant="${unsafeCSS(variant)}"]:disabled) .label, :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .label { color: color-mix( in srgb, ${FabVariantToken[variant].disabled.labelTextColor} ${FabVariantToken[variant].disabled.labelTextOpacity}, transparent ); } :host([variant="${unsafeCSS(variant)}"]:disabled) .icon, :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .icon { color: color-mix( in srgb, ${FabVariantToken[variant].disabled.iconColor} ${FabVariantToken[variant].disabled.iconOpacity}, transparent ); }`;
952
1059
  }
953
1060
  /**
954
1061
  * Appearance variant styles for `M3eFabElement`.
955
1062
  * @internal
956
1063
  */
957
- const FabVariantStyle = [
958
- fabVariantStyle("primary"),
959
- fabVariantStyle("secondary"),
960
- fabVariantStyle("tertiary"),
961
- fabVariantStyle("primary-container"),
962
- fabVariantStyle("secondary-container"),
963
- fabVariantStyle("tertiary-container"),
964
- fabVariantStyle("surface"),
965
- ];
1064
+ const FabVariantStyle = [fabVariantStyle("primary"), fabVariantStyle("secondary"), fabVariantStyle("tertiary"), fabVariantStyle("primary-container"), fabVariantStyle("secondary-container"), fabVariantStyle("tertiary-container"), fabVariantStyle("surface")];
966
1065
 
967
1066
  var _M3eFabElement_instances, _M3eFabElement_handleSlotChange;
968
1067
  /**
@@ -1272,124 +1371,89 @@ var _M3eFabElement_instances, _M3eFabElement_handleSlotChange;
1272
1371
  * @cssprop --m3e-surface-fab-lowered-pressed-container-elevation - Lowered elevation on pressed (surface).
1273
1372
  */
1274
1373
  let M3eFabElement = class M3eFabElement extends KeyboardClick(LinkButton(FormSubmitter(Focusable(DisabledInteractive(Disabled(AttachInternals(Role(LitElement, "button"), true))))))) {
1275
- constructor() {
1276
- super();
1277
- _M3eFabElement_instances.add(this);
1278
- /**
1279
- * The appearance variant of the button.
1280
- * @default "primary-container"
1281
- */
1282
- this.variant = "primary-container";
1283
- /**
1284
- * Whether to present a lowered elevation.
1285
- * @default false
1286
- */
1287
- this.lowered = false;
1288
- /**
1289
- * The size of the button.
1290
- * @default "medium"
1291
- */
1292
- this.size = "medium";
1293
- /**
1294
- * Whether the button is extended to show the label.
1295
- * @default false
1296
- */
1297
- this.extended = false;
1298
- new PressedController(this, {
1299
- isPressedKey: (key) => key === " ",
1300
- callback: (pressed) => {
1301
- if (!this.disabled && !this.disabledInteractive) {
1302
- this._base?.classList.toggle("pressed", pressed);
1303
- this._base?.classList.toggle("resting", !pressed);
1304
- }
1305
- },
1306
- });
1307
- }
1308
- /** @inheritdoc */
1309
- disconnectedCallback() {
1310
- super.disconnectedCallback();
1311
- this._base?.classList.toggle("pressed", false);
1312
- this._base?.classList.toggle("resting", false);
1313
- }
1314
- /** @inheritdoc */
1315
- firstUpdated(_changedProperties) {
1316
- super.firstUpdated(_changedProperties);
1317
- [this._elevation, this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));
1318
- }
1319
- /** @inheritdoc */
1320
- updated(_changedProperties) {
1321
- super.updated(_changedProperties);
1322
- if ((_changedProperties.has("disabled") && this.disabled) ||
1323
- (_changedProperties.has("disabledInteractive") && this.disabledInteractive)) {
1324
- this._base?.classList.toggle("pressed", false);
1325
- this._base?.classList.toggle("resting", false);
1374
+ constructor() {
1375
+ super();
1376
+ _M3eFabElement_instances.add(this);
1377
+ /**
1378
+ * The appearance variant of the button.
1379
+ * @default "primary-container"
1380
+ */
1381
+ this.variant = "primary-container";
1382
+ /**
1383
+ * Whether to present a lowered elevation.
1384
+ * @default false
1385
+ */
1386
+ this.lowered = false;
1387
+ /**
1388
+ * The size of the button.
1389
+ * @default "medium"
1390
+ */
1391
+ this.size = "medium";
1392
+ /**
1393
+ * Whether the button is extended to show the label.
1394
+ * @default false
1395
+ */
1396
+ this.extended = false;
1397
+ new PressedController(this, {
1398
+ isPressedKey: key => key === " ",
1399
+ callback: pressed => {
1400
+ if (!this.disabled && !this.disabledInteractive) {
1401
+ this._base?.classList.toggle("pressed", pressed);
1402
+ this._base?.classList.toggle("resting", !pressed);
1326
1403
  }
1404
+ }
1405
+ });
1406
+ }
1407
+ /** @inheritdoc */
1408
+ disconnectedCallback() {
1409
+ super.disconnectedCallback();
1410
+ this._base?.classList.toggle("pressed", false);
1411
+ this._base?.classList.toggle("resting", false);
1412
+ }
1413
+ /** @inheritdoc */
1414
+ firstUpdated(_changedProperties) {
1415
+ super.firstUpdated(_changedProperties);
1416
+ [this._elevation, this._focusRing, this._stateLayer, this._ripple].forEach(x => x?.attach(this));
1417
+ }
1418
+ /** @inheritdoc */
1419
+ updated(_changedProperties) {
1420
+ super.updated(_changedProperties);
1421
+ if (_changedProperties.has("disabled") && this.disabled || _changedProperties.has("disabledInteractive") && this.disabledInteractive) {
1422
+ this._base?.classList.toggle("pressed", false);
1423
+ this._base?.classList.toggle("resting", false);
1327
1424
  }
1328
- /** @inheritdoc */
1329
- render() {
1330
- return html `<div class="base">
1331
- <m3e-elevation class="elevation" ?disabled="${this.disabled || this.disabledInteractive}"></m3e-elevation>
1332
- <m3e-state-layer class="state-layer" ?disabled="${this.disabled || this.disabledInteractive}"></m3e-state-layer>
1333
- <m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring>
1334
- <m3e-ripple
1335
- class="ripple"
1336
- ?centered="${!this.extended}"
1337
- ?disabled="${this.disabled || this.disabledInteractive}"
1338
- ></m3e-ripple>
1339
- <div class="touch" aria-hidden="true"></div>
1340
- ${this[renderPseudoLink]()}
1341
- <div class="wrapper">
1342
- <slot class="icon" aria-hidden="true" @slotchange="${__classPrivateFieldGet(this, _M3eFabElement_instances, "m", _M3eFabElement_handleSlotChange)}"></slot>
1343
- <slot class="icon" aria-hidden="true" name="close-icon">
1344
- <svg class="close-icon" viewBox="0 -960 960 960" fill="currentColor">
1345
- <path
1346
- d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"
1347
- />
1348
- </svg>
1349
- </slot>
1350
- <div class="label">
1351
- <slot name="label" @slotchange="${__classPrivateFieldGet(this, _M3eFabElement_instances, "m", _M3eFabElement_handleSlotChange)}"></slot>
1352
- </div>
1353
- </div>
1354
- </div>`;
1355
- }
1425
+ }
1426
+ /** @inheritdoc */
1427
+ render() {
1428
+ 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" ?centered="${!this.extended}" ?disabled="${this.disabled || this.disabledInteractive}"></m3e-ripple><div class="touch" aria-hidden="true"></div>${this[renderPseudoLink]()}<div class="wrapper"><slot class="icon" aria-hidden="true" @slotchange="${__classPrivateFieldGet(this, _M3eFabElement_instances, "m", _M3eFabElement_handleSlotChange)}"></slot><slot class="icon" aria-hidden="true" name="close-icon"><svg class="close-icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg></slot><div class="label"><slot name="label" @slotchange="${__classPrivateFieldGet(this, _M3eFabElement_instances, "m", _M3eFabElement_handleSlotChange)}"></slot></div></div></div>`;
1429
+ }
1356
1430
  };
1357
1431
  _M3eFabElement_instances = new WeakSet();
1358
1432
  _M3eFabElement_handleSlotChange = function _M3eFabElement_handleSlotChange() {
1359
- this._base?.classList.toggle("-with-menu", this.querySelector("m3e-fab-menu-trigger") !== null);
1433
+ this._base?.classList.toggle("-with-menu", this.querySelector("m3e-fab-menu-trigger") !== null);
1360
1434
  };
1361
1435
  /** The styles of the element. */
1362
1436
  M3eFabElement.styles = [FabSizeStyle, FabVariantStyle, FabStyle];
1363
- __decorate([
1364
- e(".base")
1365
- ], M3eFabElement.prototype, "_base", void 0);
1366
- __decorate([
1367
- e(".elevation")
1368
- ], M3eFabElement.prototype, "_elevation", void 0);
1369
- __decorate([
1370
- e(".focus-ring")
1371
- ], M3eFabElement.prototype, "_focusRing", void 0);
1372
- __decorate([
1373
- e(".state-layer")
1374
- ], M3eFabElement.prototype, "_stateLayer", void 0);
1375
- __decorate([
1376
- e(".ripple")
1377
- ], M3eFabElement.prototype, "_ripple", void 0);
1378
- __decorate([
1379
- n({ reflect: true })
1380
- ], M3eFabElement.prototype, "variant", void 0);
1381
- __decorate([
1382
- n({ type: Boolean, reflect: true })
1383
- ], M3eFabElement.prototype, "lowered", void 0);
1384
- __decorate([
1385
- n({ reflect: true })
1386
- ], M3eFabElement.prototype, "size", void 0);
1387
- __decorate([
1388
- n({ type: Boolean, reflect: true })
1389
- ], M3eFabElement.prototype, "extended", void 0);
1390
- M3eFabElement = __decorate([
1391
- t$1("m3e-fab")
1392
- ], M3eFabElement);
1437
+ __decorate([e(".base")], M3eFabElement.prototype, "_base", void 0);
1438
+ __decorate([e(".elevation")], M3eFabElement.prototype, "_elevation", void 0);
1439
+ __decorate([e(".focus-ring")], M3eFabElement.prototype, "_focusRing", void 0);
1440
+ __decorate([e(".state-layer")], M3eFabElement.prototype, "_stateLayer", void 0);
1441
+ __decorate([e(".ripple")], M3eFabElement.prototype, "_ripple", void 0);
1442
+ __decorate([n({
1443
+ reflect: true
1444
+ })], M3eFabElement.prototype, "variant", void 0);
1445
+ __decorate([n({
1446
+ type: Boolean,
1447
+ reflect: true
1448
+ })], M3eFabElement.prototype, "lowered", void 0);
1449
+ __decorate([n({
1450
+ reflect: true
1451
+ })], M3eFabElement.prototype, "size", void 0);
1452
+ __decorate([n({
1453
+ type: Boolean,
1454
+ reflect: true
1455
+ })], M3eFabElement.prototype, "extended", void 0);
1456
+ M3eFabElement = __decorate([t$1("m3e-fab")], M3eFabElement);
1393
1457
 
1394
1458
  export { M3eFabElement };
1395
1459
  //# sourceMappingURL=index.js.map