@m3e/button-group 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 +506 -343
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.min.js +1 -202
  4. package/dist/index.min.js.map +1 -1
  5. package/package.json +4 -18
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,45 +44,417 @@ 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$3=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$3.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$3.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$3 = 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$3.get(s)), void 0 === t && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), e && o$3.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$2,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$2(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$2,
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$2(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$1={attribute:true,type:String,converter:u,reflect:false,hasChanged:f},r=(t=o$1,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$1 = {
370
+ attribute: true,
371
+ type: String,
372
+ converter: u,
373
+ reflect: false,
374
+ hasChanged: f
375
+ },
376
+ r = (t = o$1, 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
  * @license
85
439
  * Copyright 2021 Google LLC
86
440
  * SPDX-License-Identifier: BSD-3-Clause
87
- */function o(o){return (e,n)=>{const{slot:r,selector:s}=o??{},c="slot"+(r?`[name=${r}]`:":not([name])");return e$1(e,n,{get(){const t=this.renderRoot?.querySelector(c),e=t?.assignedElements(o)??[];return void 0===s?e:e.filter((t=>t.matches(s)))}})}}
441
+ */
442
+ function o(o) {
443
+ return (e, n) => {
444
+ const {
445
+ slot: r,
446
+ selector: s
447
+ } = o ?? {},
448
+ c = "slot" + (r ? `[name=${r}]` : ":not([name])");
449
+ return e$1(e, n, {
450
+ get() {
451
+ const t = this.renderRoot?.querySelector(c),
452
+ e = t?.assignedElements(o) ?? [];
453
+ return void 0 === s ? e : e.filter(t => t.matches(s));
454
+ }
455
+ });
456
+ };
457
+ }
88
458
 
89
459
  var _M3eButtonGroupElement_instances, _M3eButtonGroupElement_pressedController, _M3eButtonGroupElement_updateButtons, _M3eButtonGroupElement_handleChange;
90
460
  /**
@@ -142,336 +512,129 @@ var _M3eButtonGroupElement_instances, _M3eButtonGroupElement_pressedController,
142
512
  * @cssprop --m3e-connected-button-group-extra-large-inner-pressed-shape - Pressed corner shape for connected variant, extra-large size.
143
513
  */
144
514
  let M3eButtonGroupElement = class M3eButtonGroupElement extends Role(LitElement, "group") {
145
- constructor() {
146
- super(...arguments);
147
- _M3eButtonGroupElement_instances.add(this);
148
- /** @private */ _M3eButtonGroupElement_pressedController.set(this, new PressedController(this, {
149
- target: null,
150
- capture: true,
151
- minPressedDuration: 150,
152
- isPressedKey: (key) => key === " ",
153
- callback: (pressed) => {
154
- if (!this._base)
155
- return;
156
- if (!pressed || this.variant === "connected") {
157
- this._base.style.removeProperty("--_button-group-width");
158
- this._base.classList.remove("pressed");
159
- }
160
- else {
161
- this._base.classList.add("pressed");
162
- this._base.style.setProperty("--_button-group-width", `${this._base.getBoundingClientRect().width}px`);
163
- }
164
- },
165
- }));
166
- /**
167
- * The appearance variant of the group.
168
- * @default "standard"
169
- */
170
- this.variant = "standard";
171
- /**
172
- * The size of the group.
173
- * @default "small"
174
- */
175
- this.size = "small";
176
- /**
177
- * Whether multiple toggle buttons can be selected.
178
- * @default false
179
- */
180
- this.multi = false;
181
- }
182
- /** @inheritdoc */
183
- connectedCallback() {
184
- super.connectedCallback();
185
- if (this.hasAttribute("disable-role")) {
186
- this.role = null;
515
+ constructor() {
516
+ super(...arguments);
517
+ _M3eButtonGroupElement_instances.add(this);
518
+ /** @private */
519
+ _M3eButtonGroupElement_pressedController.set(this, new PressedController(this, {
520
+ target: null,
521
+ capture: true,
522
+ minPressedDuration: 150,
523
+ isPressedKey: key => key === " ",
524
+ callback: pressed => {
525
+ if (!this._base) return;
526
+ if (!pressed || this.variant === "connected") {
527
+ this._base.style.removeProperty("--_button-group-width");
528
+ this._base.classList.remove("pressed");
529
+ } else {
530
+ this._base.classList.add("pressed");
531
+ this._base.style.setProperty("--_button-group-width", `${this._base.getBoundingClientRect().width}px`);
187
532
  }
533
+ }
534
+ }));
535
+ /**
536
+ * The appearance variant of the group.
537
+ * @default "standard"
538
+ */
539
+ this.variant = "standard";
540
+ /**
541
+ * The size of the group.
542
+ * @default "small"
543
+ */
544
+ this.size = "small";
545
+ /**
546
+ * Whether multiple toggle buttons can be selected.
547
+ * @default false
548
+ */
549
+ this.multi = false;
550
+ }
551
+ /** @inheritdoc */
552
+ connectedCallback() {
553
+ super.connectedCallback();
554
+ if (this.hasAttribute("disable-role")) {
555
+ this.role = null;
188
556
  }
189
- /** @inheritdoc */
190
- disconnectedCallback() {
191
- super.disconnectedCallback();
192
- this._base?.style.removeProperty("--_button-group-width");
193
- this._base?.classList.remove("pressed");
557
+ }
558
+ /** @inheritdoc */
559
+ disconnectedCallback() {
560
+ super.disconnectedCallback();
561
+ this._base?.style.removeProperty("--_button-group-width");
562
+ this._base?.classList.remove("pressed");
563
+ }
564
+ /** @inheritdoc */
565
+ update(changedProperties) {
566
+ super.update(changedProperties);
567
+ if (changedProperties.has("multi") || changedProperties.has("variant")) {
568
+ __classPrivateFieldGet(this, _M3eButtonGroupElement_instances, "m", _M3eButtonGroupElement_updateButtons).call(this);
194
569
  }
195
- /** @inheritdoc */
196
- update(changedProperties) {
197
- super.update(changedProperties);
198
- if (changedProperties.has("multi") || changedProperties.has("variant")) {
199
- __classPrivateFieldGet(this, _M3eButtonGroupElement_instances, "m", _M3eButtonGroupElement_updateButtons).call(this);
200
- }
201
- if (changedProperties.has("variant")) {
202
- this._base?.style.removeProperty("--_button-group-width");
203
- }
204
- }
205
- /** @inheritdoc */
206
- render() {
207
- return html `<div class="base">
208
- <slot @slotchange="${__classPrivateFieldGet(this, _M3eButtonGroupElement_instances, "m", _M3eButtonGroupElement_updateButtons)}" @change="${__classPrivateFieldGet(this, _M3eButtonGroupElement_instances, "m", _M3eButtonGroupElement_handleChange)}"></slot>
209
- </div>`;
570
+ if (changedProperties.has("variant")) {
571
+ this._base?.style.removeProperty("--_button-group-width");
210
572
  }
573
+ }
574
+ /** @inheritdoc */
575
+ render() {
576
+ return html`<div class="base"><slot @slotchange="${__classPrivateFieldGet(this, _M3eButtonGroupElement_instances, "m", _M3eButtonGroupElement_updateButtons)}" @change="${__classPrivateFieldGet(this, _M3eButtonGroupElement_instances, "m", _M3eButtonGroupElement_handleChange)}"></slot></div>`;
577
+ }
211
578
  };
212
579
  _M3eButtonGroupElement_pressedController = new WeakMap();
213
580
  _M3eButtonGroupElement_instances = new WeakSet();
214
581
  _M3eButtonGroupElement_updateButtons = function _M3eButtonGroupElement_updateButtons() {
215
- for (const target of __classPrivateFieldGet(this, _M3eButtonGroupElement_pressedController, "f").targets) {
216
- __classPrivateFieldGet(this, _M3eButtonGroupElement_pressedController, "f").unobserve(target);
217
- }
218
- const canToggle = [...this.buttons].some((x) => x.toggle);
219
- // disable-role is an internal attribute to by split-button to disable setting roles.
220
- if (!this.hasAttribute("disable-role")) {
221
- this.role = canToggle && !this.multi ? "radiogroup" : "group";
222
- }
223
- const buttonRole = this.role === "radiogroup" ? "radio" : "button";
224
- for (const button of this.buttons) {
225
- __classPrivateFieldGet(this, _M3eButtonGroupElement_pressedController, "f").observe(button);
226
- button.classList.toggle("-connected", this.variant === "connected");
227
- button.classList.add("-grouped");
228
- if (!this.hasAttribute("disable-role") && button.role !== buttonRole && button.toggle) {
229
- const checked = !button.toggle ? null : button.selected ? "true" : "false";
230
- button.role = buttonRole;
231
- if (button.role === "button") {
232
- button.ariaPressed = checked;
233
- button.ariaChecked = null;
234
- }
235
- else {
236
- button.ariaChecked = checked;
237
- button.ariaPressed = null;
238
- }
239
- }
582
+ for (const target of __classPrivateFieldGet(this, _M3eButtonGroupElement_pressedController, "f").targets) {
583
+ __classPrivateFieldGet(this, _M3eButtonGroupElement_pressedController, "f").unobserve(target);
584
+ }
585
+ const canToggle = [...this.buttons].some(x => x.toggle);
586
+ // disable-role is an internal attribute to by split-button to disable setting roles.
587
+ if (!this.hasAttribute("disable-role")) {
588
+ this.role = canToggle && !this.multi ? "radiogroup" : "group";
589
+ }
590
+ const buttonRole = this.role === "radiogroup" ? "radio" : "button";
591
+ for (const button of this.buttons) {
592
+ __classPrivateFieldGet(this, _M3eButtonGroupElement_pressedController, "f").observe(button);
593
+ button.classList.toggle("-connected", this.variant === "connected");
594
+ button.classList.add("-grouped");
595
+ if (!this.hasAttribute("disable-role") && button.role !== buttonRole && button.toggle) {
596
+ const checked = !button.toggle ? null : button.selected ? "true" : "false";
597
+ button.role = buttonRole;
598
+ if (button.role === "button") {
599
+ button.ariaPressed = checked;
600
+ button.ariaChecked = null;
601
+ } else {
602
+ button.ariaChecked = checked;
603
+ button.ariaPressed = null;
604
+ }
240
605
  }
606
+ }
241
607
  };
242
608
  _M3eButtonGroupElement_handleChange = function _M3eButtonGroupElement_handleChange(e) {
243
- if (this.multi || !(e.target instanceof HTMLElement))
244
- return;
245
- if (e.target.tagName === "M3E-BUTTON" || e.target.tagName === "M3E-ICON-BUTTON") {
246
- if (!isSelectedMixin(e.target) || !e.target.selected) {
247
- return;
248
- }
249
- for (const button of this.buttons) {
250
- if (button === e.target || !button.selected)
251
- continue;
252
- button.selected = false;
253
- }
609
+ if (this.multi || !(e.target instanceof HTMLElement)) return;
610
+ if (e.target.tagName === "M3E-BUTTON" || e.target.tagName === "M3E-ICON-BUTTON") {
611
+ if (!isSelectedMixin(e.target) || !e.target.selected) {
612
+ return;
613
+ }
614
+ for (const button of this.buttons) {
615
+ if (button === e.target || !button.selected) continue;
616
+ button.selected = false;
254
617
  }
618
+ }
255
619
  };
256
620
  /** The styles of the element. */
257
- M3eButtonGroupElement.styles = css `
258
- :host {
259
- display: flex;
260
- vertical-align: middle;
261
- flex-wrap: nowrap;
262
- align-items: center;
263
- }
264
- .base {
265
- display: flex;
266
- vertical-align: middle;
267
- flex-wrap: nowrap;
268
- align-items: center;
269
- }
270
- :host([variant="standard"]) {
271
- justify-content: center;
272
- }
273
- :host([variant="connected"]) .base {
274
- flex: 1 1 auto;
275
- }
276
- :host([variant="standard"]) .base {
277
- width: fit-content;
278
- flex: none;
279
- }
280
- :host([variant="standard"]) .base.pressed {
281
- justify-content: space-between;
282
- width: var(--_button-group-width);
283
- }
284
- :host([variant="standard"][size="extra-small"]) .base {
285
- column-gap: var(--m3e-standard-button-group-extra-small-spacing, 1.125rem);
286
- }
287
- :host([variant="standard"][size="small"]) .base {
288
- column-gap: var(--m3e-standard-button-group-small-spacing, 0.75rem);
289
- }
290
- :host([variant="standard"][size="medium"]).base {
291
- column-gap: var(--m3e-standard-button-group-medium-spacing, 0.5rem);
292
- }
293
- :host([variant="standard"][size="large"]) .base {
294
- column-gap: var(--m3e-standard-button-group-large-spacing, 0.5rem);
295
- }
296
- :host([variant="standard"][size="extra-large"]) .base {
297
- column-gap: var(--m3e-standard-button-group-extra-large-spacing, 0.5rem);
298
- }
299
- :host([variant="connected"]) .base {
300
- column-gap: var(--m3e-connected-button-group-spacing, 0.125rem);
301
- }
302
- :host([variant="connected"][size="extra-small"]) ::slotted(:first-child[size="extra-small"]),
303
- :host([variant="connected"][size="extra-small"])
304
- ::slotted(:not(:first-child):not(:last-child)[size="extra-small"]) {
305
- --_button-rounded-end-shape: var(
306
- --m3e-connected-button-group-extra-small-inner-shape,
307
- ${DesignToken.shape.corner.small}
308
- );
309
- --_button-square-end-shape: var(
310
- --m3e-connected-button-group-extra-small-inner-shape,
311
- ${DesignToken.shape.corner.small}
312
- );
313
- --_button-square-end-pressed-shape: var(
314
- --m3e-connected-button-group-extra-small-inner-pressed-shape,
315
- ${DesignToken.shape.corner.extraSmall}
316
- );
317
- }
318
- :host([variant="connected"][size="extra-small"]) ::slotted(:last-child[size="extra-small"]),
319
- :host([variant="connected"][size="extra-small"])
320
- ::slotted(:not(:first-child):not(:last-child)[size="extra-small"]) {
321
- --_button-rounded-start-shape: var(
322
- --m3e-connected-button-group-extra-small-inner-shape,
323
- ${DesignToken.shape.corner.small}
324
- );
325
- --_button-square-start-shape: var(
326
- --m3e-connected-button-group-extra-small-inner-shape,
327
- ${DesignToken.shape.corner.small}
328
- );
329
- --_button-square-start-pressed-shape: var(
330
- --m3e-connected-button-group-extra-small-inner-pressed-shape,
331
- ${DesignToken.shape.corner.extraSmall}
332
- );
333
- }
334
- :host([variant="connected"][size="small"]) ::slotted(:first-child[size="small"]),
335
- :host([variant="connected"][size="small"]) ::slotted(:not(:first-child):not(:last-child)[size="small"]) {
336
- --_button-rounded-end-shape: var(
337
- --m3e-connected-button-group-small-inner-shape,
338
- ${DesignToken.shape.corner.small}
339
- );
340
- --_button-square-end-shape: var(
341
- --m3e-connected-button-group-small-inner-shape,
342
- ${DesignToken.shape.corner.small}
343
- );
344
- --_button-end-shape-pressed-morph: var(
345
- --m3e-connected-button-group-small-inner-pressed-shape,
346
- ${DesignToken.shape.corner.extraSmall}
347
- );
348
- }
349
- :host([variant="connected"][size="small"]) ::slotted(:last-child[size="small"]),
350
- :host([variant="connected"][size="small"]) ::slotted(:not(:first-child):not(:last-child)[size="small"]) {
351
- --_button-rounded-start-shape: var(
352
- --m3e-connected-button-group-small-inner-shape,
353
- ${DesignToken.shape.corner.small}
354
- );
355
- --_button-square-start-shape: var(
356
- --m3e-connected-button-group-small-inner-shape,
357
- ${DesignToken.shape.corner.small}
358
- );
359
- --_button-start-shape-pressed-morph: var(
360
- --m3e-connected-button-group-small-inner-pressed-shape,
361
- ${DesignToken.shape.corner.extraSmall}
362
- );
363
- }
364
- :host([variant="connected"][size="medium"]) ::slotted(:first-child[size="medium"]),
365
- :host([variant="connected"][size="medium"]) ::slotted(:not(:first-child):not(:last-child)[size="medium"]) {
366
- --_button-rounded-end-shape: var(
367
- --m3e-connected-button-group-medium-inner-shape,
368
- ${DesignToken.shape.corner.small}
369
- );
370
- --_button-square-end-shape: var(
371
- --m3e-connected-button-group-medium-inner-shape,
372
- ${DesignToken.shape.corner.small}
373
- );
374
- --_button-square-end-pressed-shape: var(
375
- --m3e-connected-button-group-medium-inner-pressed-shape,
376
- ${DesignToken.shape.corner.extraSmall}
377
- );
378
- }
379
- :host([variant="connected"][size="medium"]) ::slotted(:last-child[size="medium"]),
380
- :host([variant="connected"][size="medium"]) ::slotted(:not(:first-child):not(:last-child)[size="medium"]) {
381
- --_button-rounded-start-shape: var(
382
- --m3e-connected-button-group-medium-inner-shape,
383
- ${DesignToken.shape.corner.small}
384
- );
385
- --_button-square-start-shape: var(
386
- --m3e-connected-button-group-medium-inner-shape,
387
- ${DesignToken.shape.corner.small}
388
- );
389
- --_button-square-start-pressed-shape: var(
390
- --m3e-connected-button-group-medium-inner-pressed-shape,
391
- ${DesignToken.shape.corner.extraSmall}
392
- );
393
- }
394
- :host([variant="connected"][size="large"]) ::slotted(:first-child[size="large"]),
395
- :host([variant="connected"][size="large"]) ::slotted(:not(:first-child):not(:last-child)[size="large"]) {
396
- --_button-rounded-end-shape: var(
397
- --m3e-connected-button-group-large-inner-shape,
398
- ${DesignToken.shape.corner.large}
399
- );
400
- --_button-square-end-shape: var(
401
- --m3e-connected-button-group-large-inner-shape,
402
- ${DesignToken.shape.corner.large}
403
- );
404
- --_button-square-end-pressed-shape: var(
405
- --m3e-connected-button-group-large-inner-pressed-shape,
406
- ${DesignToken.shape.corner.medium}
407
- );
408
- }
409
- :host([variant="connected"][size="large"]) ::slotted(:last-child[size="large"]),
410
- :host([variant="connected"][size="large"]) ::slotted(:not(:first-child):not(:last-child)[size="large"]) {
411
- --_button-rounded-start-shape: var(
412
- --m3e-connected-button-group-large-inner-shape,
413
- ${DesignToken.shape.corner.large}
414
- );
415
- --_button-square-start-shape: var(
416
- --m3e-connected-button-group-large-inner-shape,
417
- ${DesignToken.shape.corner.large}
418
- );
419
- --_button-square-start-pressed-shape: var(
420
- --m3e-connected-button-group-large-inner-pressed-shape,
421
- ${DesignToken.shape.corner.medium}
422
- );
423
- }
424
- :host([variant="connected"][size="extra-large"]) ::slotted(:first-child[size="extra-large"]),
425
- :host([variant="connected"][size="extra-large"])
426
- ::slotted(:not(:first-child):not(:last-child)[size="extra-large"]) {
427
- --_button-rounded-end-shape: var(
428
- --m3e-connected-button-group-extra-large-inner-shape,
429
- ${DesignToken.shape.corner.largeIncreased}
430
- );
431
- --_button-square-end-shape: var(
432
- --m3e-connected-button-group-extra-large-inner-shape,
433
- ${DesignToken.shape.corner.largeIncreased}
434
- );
435
- --_button-square-end-pressed-shape: var(
436
- --m3e-connected-button-group-extra-large-inner-pressed-shape,
437
- ${DesignToken.shape.corner.large}
438
- );
439
- }
440
- :host([variant="connected"][size="extra-large"]) ::slotted(:last-child[size="extra-large"]),
441
- :host([variant="connected"][size="extra-large"])
442
- ::slotted(:not(:first-child):not(:last-child)[size="extra-large"]) {
443
- --_button-rounded-start-shape: var(
444
- --m3e-connected-button-group-extra-large-inner-shape,
445
- ${DesignToken.shape.corner.largeIncreased}
446
- );
447
- --_button-square-start-shape: var(
448
- --m3e-connected-button-group-extra-large-inner-shape,
449
- ${DesignToken.shape.corner.largeIncreased}
450
- );
451
- --_button-square-start-pressed-shape: var(
452
- --m3e-connected-button-group-extra-large-inner-pressed-shape,
453
- ${DesignToken.shape.corner.large}
454
- );
455
- }
456
- `;
457
- __decorate([
458
- e(".base")
459
- ], M3eButtonGroupElement.prototype, "_base", void 0);
460
- __decorate([
461
- n({ reflect: true })
462
- ], M3eButtonGroupElement.prototype, "variant", void 0);
463
- __decorate([
464
- n({ reflect: true })
465
- ], M3eButtonGroupElement.prototype, "size", void 0);
466
- __decorate([
467
- n({ type: Boolean })
468
- ], M3eButtonGroupElement.prototype, "multi", void 0);
469
- __decorate([
470
- o({ slot: "", selector: "m3e-button,m3e-icon-button", flatten: true })
471
- ], M3eButtonGroupElement.prototype, "buttons", void 0);
472
- M3eButtonGroupElement = __decorate([
473
- t$1("m3e-button-group")
474
- ], M3eButtonGroupElement);
621
+ M3eButtonGroupElement.styles = css`:host { display: flex; vertical-align: middle; flex-wrap: nowrap; align-items: center; } .base { display: flex; vertical-align: middle; flex-wrap: nowrap; align-items: center; } :host([variant="standard"]) { justify-content: center; } :host([variant="connected"]) .base { flex: 1 1 auto; } :host([variant="standard"]) .base { width: fit-content; flex: none; } :host([variant="standard"]) .base.pressed { justify-content: space-between; width: var(--_button-group-width); } :host([variant="standard"][size="extra-small"]) .base { column-gap: var(--m3e-standard-button-group-extra-small-spacing, 1.125rem); } :host([variant="standard"][size="small"]) .base { column-gap: var(--m3e-standard-button-group-small-spacing, 0.75rem); } :host([variant="standard"][size="medium"]).base { column-gap: var(--m3e-standard-button-group-medium-spacing, 0.5rem); } :host([variant="standard"][size="large"]) .base { column-gap: var(--m3e-standard-button-group-large-spacing, 0.5rem); } :host([variant="standard"][size="extra-large"]) .base { column-gap: var(--m3e-standard-button-group-extra-large-spacing, 0.5rem); } :host([variant="connected"]) .base { column-gap: var(--m3e-connected-button-group-spacing, 0.125rem); } :host([variant="connected"][size="extra-small"]) ::slotted(:first-child[size="extra-small"]), :host([variant="connected"][size="extra-small"]) ::slotted(:not(:first-child):not(:last-child)[size="extra-small"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${DesignToken.shape.corner.small} ); --_button-square-end-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${DesignToken.shape.corner.small} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-extra-small-inner-pressed-shape, ${DesignToken.shape.corner.extraSmall} ); } :host([variant="connected"][size="extra-small"]) ::slotted(:last-child[size="extra-small"]), :host([variant="connected"][size="extra-small"]) ::slotted(:not(:first-child):not(:last-child)[size="extra-small"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${DesignToken.shape.corner.small} ); --_button-square-start-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${DesignToken.shape.corner.small} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-extra-small-inner-pressed-shape, ${DesignToken.shape.corner.extraSmall} ); } :host([variant="connected"][size="small"]) ::slotted(:first-child[size="small"]), :host([variant="connected"][size="small"]) ::slotted(:not(:first-child):not(:last-child)[size="small"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-small-inner-shape, ${DesignToken.shape.corner.small} ); --_button-square-end-shape: var( --m3e-connected-button-group-small-inner-shape, ${DesignToken.shape.corner.small} ); --_button-end-shape-pressed-morph: var( --m3e-connected-button-group-small-inner-pressed-shape, ${DesignToken.shape.corner.extraSmall} ); } :host([variant="connected"][size="small"]) ::slotted(:last-child[size="small"]), :host([variant="connected"][size="small"]) ::slotted(:not(:first-child):not(:last-child)[size="small"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-small-inner-shape, ${DesignToken.shape.corner.small} ); --_button-square-start-shape: var( --m3e-connected-button-group-small-inner-shape, ${DesignToken.shape.corner.small} ); --_button-start-shape-pressed-morph: var( --m3e-connected-button-group-small-inner-pressed-shape, ${DesignToken.shape.corner.extraSmall} ); } :host([variant="connected"][size="medium"]) ::slotted(:first-child[size="medium"]), :host([variant="connected"][size="medium"]) ::slotted(:not(:first-child):not(:last-child)[size="medium"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-medium-inner-shape, ${DesignToken.shape.corner.small} ); --_button-square-end-shape: var( --m3e-connected-button-group-medium-inner-shape, ${DesignToken.shape.corner.small} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-medium-inner-pressed-shape, ${DesignToken.shape.corner.extraSmall} ); } :host([variant="connected"][size="medium"]) ::slotted(:last-child[size="medium"]), :host([variant="connected"][size="medium"]) ::slotted(:not(:first-child):not(:last-child)[size="medium"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-medium-inner-shape, ${DesignToken.shape.corner.small} ); --_button-square-start-shape: var( --m3e-connected-button-group-medium-inner-shape, ${DesignToken.shape.corner.small} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-medium-inner-pressed-shape, ${DesignToken.shape.corner.extraSmall} ); } :host([variant="connected"][size="large"]) ::slotted(:first-child[size="large"]), :host([variant="connected"][size="large"]) ::slotted(:not(:first-child):not(:last-child)[size="large"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-large-inner-shape, ${DesignToken.shape.corner.large} ); --_button-square-end-shape: var( --m3e-connected-button-group-large-inner-shape, ${DesignToken.shape.corner.large} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-large-inner-pressed-shape, ${DesignToken.shape.corner.medium} ); } :host([variant="connected"][size="large"]) ::slotted(:last-child[size="large"]), :host([variant="connected"][size="large"]) ::slotted(:not(:first-child):not(:last-child)[size="large"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-large-inner-shape, ${DesignToken.shape.corner.large} ); --_button-square-start-shape: var( --m3e-connected-button-group-large-inner-shape, ${DesignToken.shape.corner.large} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-large-inner-pressed-shape, ${DesignToken.shape.corner.medium} ); } :host([variant="connected"][size="extra-large"]) ::slotted(:first-child[size="extra-large"]), :host([variant="connected"][size="extra-large"]) ::slotted(:not(:first-child):not(:last-child)[size="extra-large"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${DesignToken.shape.corner.largeIncreased} ); --_button-square-end-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${DesignToken.shape.corner.largeIncreased} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-extra-large-inner-pressed-shape, ${DesignToken.shape.corner.large} ); } :host([variant="connected"][size="extra-large"]) ::slotted(:last-child[size="extra-large"]), :host([variant="connected"][size="extra-large"]) ::slotted(:not(:first-child):not(:last-child)[size="extra-large"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${DesignToken.shape.corner.largeIncreased} ); --_button-square-start-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${DesignToken.shape.corner.largeIncreased} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-extra-large-inner-pressed-shape, ${DesignToken.shape.corner.large} ); }`;
622
+ __decorate([e(".base")], M3eButtonGroupElement.prototype, "_base", void 0);
623
+ __decorate([n({
624
+ reflect: true
625
+ })], M3eButtonGroupElement.prototype, "variant", void 0);
626
+ __decorate([n({
627
+ reflect: true
628
+ })], M3eButtonGroupElement.prototype, "size", void 0);
629
+ __decorate([n({
630
+ type: Boolean
631
+ })], M3eButtonGroupElement.prototype, "multi", void 0);
632
+ __decorate([o({
633
+ slot: "",
634
+ selector: "m3e-button,m3e-icon-button",
635
+ flatten: true
636
+ })], M3eButtonGroupElement.prototype, "buttons", void 0);
637
+ M3eButtonGroupElement = __decorate([t$1("m3e-button-group")], M3eButtonGroupElement);
475
638
 
476
639
  export { M3eButtonGroupElement };
477
640
  //# sourceMappingURL=index.js.map