@m3e/segmented-button 1.0.6 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +3 -2
  2. package/dist/custom-elements.json +8 -0
  3. package/dist/index.js +567 -435
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.js +6 -236
  6. package/dist/index.min.js.map +1 -1
  7. package/dist/src/SegmentedButtonElement.d.ts +2 -0
  8. package/dist/src/SegmentedButtonElement.d.ts.map +1 -1
  9. package/package.json +2 -16
package/dist/index.js CHANGED
@@ -6,6 +6,7 @@
6
6
  import { LitElement, html, unsafeCSS, css } from 'lit';
7
7
  import { Dirty, Touched, Checked, Disabled, AttachInternals, Role, DesignToken, hasAssignedNodes, Labelled, FormAssociated, formValue } from '@m3e/core';
8
8
  import { selectionManager, SelectionManager } from '@m3e/core/a11y';
9
+ import { M3eDirectionality } from '@m3e/core/bidi';
9
10
 
10
11
  /******************************************************************************
11
12
  Copyright (c) Microsoft Corporation.
@@ -20,26 +21,30 @@ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
20
21
  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
21
22
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
22
23
  PERFORMANCE OF THIS SOFTWARE.
23
- ***************************************************************************** */
24
- /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
25
-
26
-
27
- function __decorate(decorators, target, key, desc) {
28
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
29
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
30
- 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;
31
- return c > 3 && r && Object.defineProperty(target, key, r), r;
32
- }
33
-
34
- function __classPrivateFieldGet(receiver, state, kind, f) {
35
- if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
36
- 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");
37
- return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
38
- }
39
-
40
- typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
41
- var e = new Error(message);
42
- return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
24
+ ***************************************************************************** */
25
+ /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
26
+
27
+ function __decorate(decorators, target, key, desc) {
28
+ var c = arguments.length,
29
+ r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
30
+ d;
31
+ 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;
32
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
33
+ }
34
+ function __classPrivateFieldGet(receiver, state, kind, f) {
35
+ if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
36
+ 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");
37
+ return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
38
+ }
39
+ function __classPrivateFieldSet(receiver, state, value, kind, f) {
40
+ if (kind === "m") throw new TypeError("Private method is not writable");
41
+ if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
42
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
43
+ return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), value;
44
+ }
45
+ typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
46
+ var e = new Error(message);
47
+ return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
43
48
  };
44
49
 
45
50
  /**
@@ -47,39 +52,395 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
47
52
  * Copyright 2017 Google LLC
48
53
  * SPDX-License-Identifier: BSD-3-Clause
49
54
  */
50
- const t$1=t=>(e,o)=>{ void 0!==o?o.addInitializer((()=>{customElements.define(t,e);})):customElements.define(t,e);};
55
+ const t$1 = t => (e, o) => {
56
+ void 0 !== o ? o.addInitializer(() => {
57
+ customElements.define(t, e);
58
+ }) : customElements.define(t, e);
59
+ };
51
60
 
52
61
  /**
53
62
  * @license
54
63
  * Copyright 2019 Google LLC
55
64
  * SPDX-License-Identifier: BSD-3-Clause
56
65
  */
57
- 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;
66
+ const t = globalThis,
67
+ e$3 = t.ShadowRoot && (void 0 === t.ShadyCSS || t.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype,
68
+ s = Symbol(),
69
+ o$2 = new WeakMap();
70
+ let n$2 = class n {
71
+ constructor(t, e, o) {
72
+ if (this._$cssResult$ = true, o !== s) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
73
+ this.cssText = t, this.t = e;
74
+ }
75
+ get styleSheet() {
76
+ let t = this.o;
77
+ const s = this.t;
78
+ if (e$3 && void 0 === t) {
79
+ const e = void 0 !== s && 1 === s.length;
80
+ e && (t = o$2.get(s)), void 0 === t && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), e && o$2.set(s, t));
81
+ }
82
+ return t;
83
+ }
84
+ toString() {
85
+ return this.cssText;
86
+ }
87
+ };
88
+ const r$2 = t => new n$2("string" == typeof t ? t : t + "", void 0, s),
89
+ S = (s, o) => {
90
+ if (e$3) s.adoptedStyleSheets = o.map(t => t instanceof CSSStyleSheet ? t : t.styleSheet);else for (const e of o) {
91
+ const o = document.createElement("style"),
92
+ n = t.litNonce;
93
+ void 0 !== n && o.setAttribute("nonce", n), o.textContent = e.cssText, s.appendChild(o);
94
+ }
95
+ },
96
+ c$1 = e$3 ? t => t : t => t instanceof CSSStyleSheet ? (t => {
97
+ let e = "";
98
+ for (const s of t.cssRules) e += s.cssText;
99
+ return r$2(e);
100
+ })(t) : t;
58
101
 
59
102
  /**
60
103
  * @license
61
104
  * Copyright 2017 Google LLC
62
105
  * SPDX-License-Identifier: BSD-3-Clause
63
- */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");
106
+ */
107
+ const {
108
+ is: i,
109
+ defineProperty: e$2,
110
+ getOwnPropertyDescriptor: h,
111
+ getOwnPropertyNames: r$1,
112
+ getOwnPropertySymbols: o$1,
113
+ getPrototypeOf: n$1
114
+ } = Object,
115
+ a = globalThis,
116
+ c = a.trustedTypes,
117
+ l = c ? c.emptyScript : "",
118
+ p = a.reactiveElementPolyfillSupport,
119
+ d = (t, s) => t,
120
+ u = {
121
+ toAttribute(t, s) {
122
+ switch (s) {
123
+ case Boolean:
124
+ t = t ? l : null;
125
+ break;
126
+ case Object:
127
+ case Array:
128
+ t = null == t ? t : JSON.stringify(t);
129
+ }
130
+ return t;
131
+ },
132
+ fromAttribute(t, s) {
133
+ let i = t;
134
+ switch (s) {
135
+ case Boolean:
136
+ i = null !== t;
137
+ break;
138
+ case Number:
139
+ i = null === t ? null : Number(t);
140
+ break;
141
+ case Object:
142
+ case Array:
143
+ try {
144
+ i = JSON.parse(t);
145
+ } catch (t) {
146
+ i = null;
147
+ }
148
+ }
149
+ return i;
150
+ }
151
+ },
152
+ f = (t, s) => !i(t, s),
153
+ b = {
154
+ attribute: true,
155
+ type: String,
156
+ converter: u,
157
+ reflect: false,
158
+ useDefault: false,
159
+ hasChanged: f
160
+ };
161
+ Symbol.metadata ??= Symbol("metadata"), a.litPropertyMetadata ??= new WeakMap();
162
+ class y extends HTMLElement {
163
+ static addInitializer(t) {
164
+ this._$Ei(), (this.l ??= []).push(t);
165
+ }
166
+ static get observedAttributes() {
167
+ return this.finalize(), this._$Eh && [...this._$Eh.keys()];
168
+ }
169
+ static createProperty(t, s = b) {
170
+ 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) {
171
+ const i = Symbol(),
172
+ h = this.getPropertyDescriptor(t, i, s);
173
+ void 0 !== h && e$2(this.prototype, t, h);
174
+ }
175
+ }
176
+ static getPropertyDescriptor(t, s, i) {
177
+ const {
178
+ get: e,
179
+ set: r
180
+ } = h(this.prototype, t) ?? {
181
+ get() {
182
+ return this[s];
183
+ },
184
+ set(t) {
185
+ this[s] = t;
186
+ }
187
+ };
188
+ return {
189
+ get: e,
190
+ set(s) {
191
+ const h = e?.call(this);
192
+ r?.call(this, s), this.requestUpdate(t, h, i);
193
+ },
194
+ configurable: true,
195
+ enumerable: true
196
+ };
197
+ }
198
+ static getPropertyOptions(t) {
199
+ return this.elementProperties.get(t) ?? b;
200
+ }
201
+ static _$Ei() {
202
+ if (this.hasOwnProperty(d("elementProperties"))) return;
203
+ const t = n$1(this);
204
+ t.finalize(), void 0 !== t.l && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
205
+ }
206
+ static finalize() {
207
+ if (this.hasOwnProperty(d("finalized"))) return;
208
+ if (this.finalized = true, this._$Ei(), this.hasOwnProperty(d("properties"))) {
209
+ const t = this.properties,
210
+ s = [...r$1(t), ...o$1(t)];
211
+ for (const i of s) this.createProperty(i, t[i]);
212
+ }
213
+ const t = this[Symbol.metadata];
214
+ if (null !== t) {
215
+ const s = litPropertyMetadata.get(t);
216
+ if (void 0 !== s) for (const [t, i] of s) this.elementProperties.set(t, i);
217
+ }
218
+ this._$Eh = new Map();
219
+ for (const [t, s] of this.elementProperties) {
220
+ const i = this._$Eu(t, s);
221
+ void 0 !== i && this._$Eh.set(i, t);
222
+ }
223
+ this.elementStyles = this.finalizeStyles(this.styles);
224
+ }
225
+ static finalizeStyles(s) {
226
+ const i = [];
227
+ if (Array.isArray(s)) {
228
+ const e = new Set(s.flat(1 / 0).reverse());
229
+ for (const s of e) i.unshift(c$1(s));
230
+ } else void 0 !== s && i.push(c$1(s));
231
+ return i;
232
+ }
233
+ static _$Eu(t, s) {
234
+ const i = s.attribute;
235
+ return false === i ? void 0 : "string" == typeof i ? i : "string" == typeof t ? t.toLowerCase() : void 0;
236
+ }
237
+ constructor() {
238
+ super(), this._$Ep = void 0, this.isUpdatePending = false, this.hasUpdated = false, this._$Em = null, this._$Ev();
239
+ }
240
+ _$Ev() {
241
+ this._$ES = new Promise(t => this.enableUpdating = t), this._$AL = new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach(t => t(this));
242
+ }
243
+ addController(t) {
244
+ (this._$EO ??= new Set()).add(t), void 0 !== this.renderRoot && this.isConnected && t.hostConnected?.();
245
+ }
246
+ removeController(t) {
247
+ this._$EO?.delete(t);
248
+ }
249
+ _$E_() {
250
+ const t = new Map(),
251
+ s = this.constructor.elementProperties;
252
+ for (const i of s.keys()) this.hasOwnProperty(i) && (t.set(i, this[i]), delete this[i]);
253
+ t.size > 0 && (this._$Ep = t);
254
+ }
255
+ createRenderRoot() {
256
+ const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
257
+ return S(t, this.constructor.elementStyles), t;
258
+ }
259
+ connectedCallback() {
260
+ this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(true), this._$EO?.forEach(t => t.hostConnected?.());
261
+ }
262
+ enableUpdating(t) {}
263
+ disconnectedCallback() {
264
+ this._$EO?.forEach(t => t.hostDisconnected?.());
265
+ }
266
+ attributeChangedCallback(t, s, i) {
267
+ this._$AK(t, i);
268
+ }
269
+ _$ET(t, s) {
270
+ const i = this.constructor.elementProperties.get(t),
271
+ e = this.constructor._$Eu(t, i);
272
+ if (void 0 !== e && true === i.reflect) {
273
+ const h = (void 0 !== i.converter?.toAttribute ? i.converter : u).toAttribute(s, i.type);
274
+ this._$Em = t, null == h ? this.removeAttribute(e) : this.setAttribute(e, h), this._$Em = null;
275
+ }
276
+ }
277
+ _$AK(t, s) {
278
+ const i = this.constructor,
279
+ e = i._$Eh.get(t);
280
+ if (void 0 !== e && this._$Em !== e) {
281
+ const t = i.getPropertyOptions(e),
282
+ h = "function" == typeof t.converter ? {
283
+ fromAttribute: t.converter
284
+ } : void 0 !== t.converter?.fromAttribute ? t.converter : u;
285
+ this._$Em = e;
286
+ const r = h.fromAttribute(s, t.type);
287
+ this[e] = r ?? this._$Ej?.get(e) ?? r, this._$Em = null;
288
+ }
289
+ }
290
+ requestUpdate(t, s, i) {
291
+ if (void 0 !== t) {
292
+ const e = this.constructor,
293
+ h = this[t];
294
+ 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;
295
+ this.C(t, s, i);
296
+ }
297
+ false === this.isUpdatePending && (this._$ES = this._$EP());
298
+ }
299
+ C(t, s, {
300
+ useDefault: i,
301
+ reflect: e,
302
+ wrapped: h
303
+ }, r) {
304
+ 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));
305
+ }
306
+ async _$EP() {
307
+ this.isUpdatePending = true;
308
+ try {
309
+ await this._$ES;
310
+ } catch (t) {
311
+ Promise.reject(t);
312
+ }
313
+ const t = this.scheduleUpdate();
314
+ return null != t && (await t), !this.isUpdatePending;
315
+ }
316
+ scheduleUpdate() {
317
+ return this.performUpdate();
318
+ }
319
+ performUpdate() {
320
+ if (!this.isUpdatePending) return;
321
+ if (!this.hasUpdated) {
322
+ if (this.renderRoot ??= this.createRenderRoot(), this._$Ep) {
323
+ for (const [t, s] of this._$Ep) this[t] = s;
324
+ this._$Ep = void 0;
325
+ }
326
+ const t = this.constructor.elementProperties;
327
+ if (t.size > 0) for (const [s, i] of t) {
328
+ const {
329
+ wrapped: t
330
+ } = i,
331
+ e = this[s];
332
+ true !== t || this._$AL.has(s) || void 0 === e || this.C(s, void 0, i, e);
333
+ }
334
+ }
335
+ let t = false;
336
+ const s = this._$AL;
337
+ try {
338
+ t = this.shouldUpdate(s), t ? (this.willUpdate(s), this._$EO?.forEach(t => t.hostUpdate?.()), this.update(s)) : this._$EM();
339
+ } catch (s) {
340
+ throw t = false, this._$EM(), s;
341
+ }
342
+ t && this._$AE(s);
343
+ }
344
+ willUpdate(t) {}
345
+ _$AE(t) {
346
+ this._$EO?.forEach(t => t.hostUpdated?.()), this.hasUpdated || (this.hasUpdated = true, this.firstUpdated(t)), this.updated(t);
347
+ }
348
+ _$EM() {
349
+ this._$AL = new Map(), this.isUpdatePending = false;
350
+ }
351
+ get updateComplete() {
352
+ return this.getUpdateComplete();
353
+ }
354
+ getUpdateComplete() {
355
+ return this._$ES;
356
+ }
357
+ shouldUpdate(t) {
358
+ return true;
359
+ }
360
+ update(t) {
361
+ this._$Eq &&= this._$Eq.forEach(t => this._$ET(t, this[t])), this._$EM();
362
+ }
363
+ updated(t) {}
364
+ firstUpdated(t) {}
365
+ }
366
+ y.elementStyles = [], y.shadowRootOptions = {
367
+ mode: "open"
368
+ }, y[d("elementProperties")] = new Map(), y[d("finalized")] = new Map(), p?.({
369
+ ReactiveElement: y
370
+ }), (a.reactiveElementVersions ??= []).push("2.1.1");
64
371
 
65
372
  /**
66
373
  * @license
67
374
  * Copyright 2017 Google LLC
68
375
  * SPDX-License-Identifier: BSD-3-Clause
69
- */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)}
376
+ */
377
+ const o = {
378
+ attribute: true,
379
+ type: String,
380
+ converter: u,
381
+ reflect: false,
382
+ hasChanged: f
383
+ },
384
+ r = (t = o, e, r) => {
385
+ const {
386
+ kind: n,
387
+ metadata: i
388
+ } = r;
389
+ let s = globalThis.litPropertyMetadata.get(i);
390
+ 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) {
391
+ const {
392
+ name: o
393
+ } = r;
394
+ return {
395
+ set(r) {
396
+ const n = e.get.call(this);
397
+ e.set.call(this, r), this.requestUpdate(o, n, t);
398
+ },
399
+ init(e) {
400
+ return void 0 !== e && this.C(o, void 0, t, e), e;
401
+ }
402
+ };
403
+ }
404
+ if ("setter" === n) {
405
+ const {
406
+ name: o
407
+ } = r;
408
+ return function (r) {
409
+ const n = this[o];
410
+ e.call(this, r), this.requestUpdate(o, n, t);
411
+ };
412
+ }
413
+ throw Error("Unsupported decorator location: " + n);
414
+ };
415
+ function n(t) {
416
+ return (e, o) => "object" == typeof o ? r(t, e, o) : ((t, e, o) => {
417
+ const r = e.hasOwnProperty(o);
418
+ return e.constructor.createProperty(o, t), r ? Object.getOwnPropertyDescriptor(e, o) : void 0;
419
+ })(t, e, o);
420
+ }
70
421
 
71
422
  /**
72
423
  * @license
73
424
  * Copyright 2017 Google LLC
74
425
  * SPDX-License-Identifier: BSD-3-Clause
75
426
  */
76
- const e$1=(e,t,c)=>(c.configurable=true,c.enumerable=true,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,c),c);
427
+ const e$1 = (e, t, c) => (c.configurable = true, c.enumerable = true, Reflect.decorate && "object" != typeof t && Object.defineProperty(e, t, c), c);
77
428
 
78
429
  /**
79
430
  * @license
80
431
  * Copyright 2017 Google LLC
81
432
  * SPDX-License-Identifier: BSD-3-Clause
82
- */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)}})}}
433
+ */
434
+ function e(e, r) {
435
+ return (n, s, i) => {
436
+ const o = t => t.renderRoot?.querySelector(e) ?? null;
437
+ return e$1(n, s, {
438
+ get() {
439
+ return o(this);
440
+ }
441
+ });
442
+ };
443
+ }
83
444
 
84
445
  var _M3eButtonSegmentElement_instances, _M3eButtonSegmentElement_clickHandler, _M3eButtonSegmentElement_handleIconSlotChange, _M3eButtonSegmentElement_handleClick;
85
446
  var M3eButtonSegmentElement_1;
@@ -157,313 +518,102 @@ var M3eButtonSegmentElement_1;
157
518
  * @cssprop --m3e-segmented-button-disabled-icon-opacity - Opacity applied to disabled icons.
158
519
  */
159
520
  let M3eButtonSegmentElement = M3eButtonSegmentElement_1 = class M3eButtonSegmentElement extends Dirty(Touched(Checked(Disabled(AttachInternals(Role(LitElement, "radio"), true))))) {
160
- constructor() {
161
- super(...arguments);
162
- _M3eButtonSegmentElement_instances.add(this);
163
- /** @private */ _M3eButtonSegmentElement_clickHandler.set(this, (e) => __classPrivateFieldGet(this, _M3eButtonSegmentElement_instances, "m", _M3eButtonSegmentElement_handleClick).call(this, e));
164
- /**
165
- * A string representing the value of the segment.
166
- * @default "on"
167
- */
168
- this.value = "on";
169
- }
170
- /** @inheritdoc */
171
- connectedCallback() {
172
- super.connectedCallback();
173
- this.addEventListener("click", __classPrivateFieldGet(this, _M3eButtonSegmentElement_clickHandler, "f"));
174
- }
175
- /** @inheritdoc */
176
- disconnectedCallback() {
177
- super.disconnectedCallback();
178
- this.removeEventListener("click", __classPrivateFieldGet(this, _M3eButtonSegmentElement_clickHandler, "f"));
521
+ constructor() {
522
+ super(...arguments);
523
+ _M3eButtonSegmentElement_instances.add(this);
524
+ /** @private */
525
+ _M3eButtonSegmentElement_clickHandler.set(this, e => __classPrivateFieldGet(this, _M3eButtonSegmentElement_instances, "m", _M3eButtonSegmentElement_handleClick).call(this, e));
526
+ /**
527
+ * A string representing the value of the segment.
528
+ * @default "on"
529
+ */
530
+ this.value = "on";
531
+ }
532
+ /** @inheritdoc */
533
+ connectedCallback() {
534
+ super.connectedCallback();
535
+ this.addEventListener("click", __classPrivateFieldGet(this, _M3eButtonSegmentElement_clickHandler, "f"));
536
+ }
537
+ /** @inheritdoc */
538
+ disconnectedCallback() {
539
+ super.disconnectedCallback();
540
+ this.removeEventListener("click", __classPrivateFieldGet(this, _M3eButtonSegmentElement_clickHandler, "f"));
541
+ }
542
+ /** @inheritdoc */
543
+ firstUpdated(_changedProperties) {
544
+ super.firstUpdated(_changedProperties);
545
+ [this._focusRing, this._stateLayer, this._ripple].forEach(x => x?.attach(this));
546
+ }
547
+ /** @inheritdoc */
548
+ update(changedProperties) {
549
+ const segmentedButton = this.closest("m3e-segmented-button");
550
+ if (segmentedButton) {
551
+ this.role = segmentedButton.multi ? "button" : "radio";
179
552
  }
180
- /** @inheritdoc */
181
- firstUpdated(_changedProperties) {
182
- super.firstUpdated(_changedProperties);
183
- [this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));
553
+ super.update(changedProperties);
554
+ if (changedProperties.has("checked")) {
555
+ segmentedButton?.[selectionManager].notifySelectionChange(this);
184
556
  }
185
- /** @inheritdoc */
186
- update(changedProperties) {
187
- const segmentedButton = this.closest("m3e-segmented-button");
188
- if (segmentedButton) {
189
- this.role = segmentedButton.multi ? "button" : "radio";
557
+ if (changedProperties.has("disabled")) {
558
+ if (this.disabled) {
559
+ if (this.nextElementSibling instanceof M3eButtonSegmentElement_1) {
560
+ if (!this.nextElementSibling.disabled) {
561
+ this.style.setProperty("--_segmented-button-disabled-outline-color", `var(--m3e-segmented-button-outline-color, ${DesignToken.color.outline})`);
562
+ } else {
563
+ this.style.removeProperty("--_segmented-button-disabled-outline-color");
564
+ }
190
565
  }
191
- super.update(changedProperties);
192
- if (changedProperties.has("checked")) {
193
- segmentedButton?.[selectionManager].notifySelectionChange(this);
566
+ } else {
567
+ this.style.removeProperty("--_segmented-button-disabled-outline-color");
568
+ if (this.previousElementSibling instanceof M3eButtonSegmentElement_1) {
569
+ if (this.previousElementSibling.disabled) {
570
+ this.previousElementSibling.style.setProperty("--_segmented-button-disabled-outline-color", `var(--m3e-segmented-button-outline-color, ${DesignToken.color.outline})`);
571
+ } else {
572
+ this.previousElementSibling.style.removeProperty("--_segmented-button-disabled-outline-color");
573
+ }
194
574
  }
195
- if (changedProperties.has("disabled")) {
196
- if (this.disabled) {
197
- if (this.nextElementSibling instanceof M3eButtonSegmentElement_1) {
198
- if (!this.nextElementSibling.disabled) {
199
- this.style.setProperty("--_segmented-button-disabled-outline-color", `var(--m3e-segmented-button-outline-color, ${DesignToken.color.outline})`);
200
- }
201
- else {
202
- this.style.removeProperty("--_segmented-button-disabled-outline-color");
203
- }
204
- }
205
- }
206
- else {
207
- this.style.removeProperty("--_segmented-button-disabled-outline-color");
208
- if (this.previousElementSibling instanceof M3eButtonSegmentElement_1) {
209
- if (this.previousElementSibling.disabled) {
210
- this.previousElementSibling.style.setProperty("--_segmented-button-disabled-outline-color", `var(--m3e-segmented-button-outline-color, ${DesignToken.color.outline})`);
211
- }
212
- else {
213
- this.previousElementSibling.style.removeProperty("--_segmented-button-disabled-outline-color");
214
- }
215
- }
216
- }
217
- }
218
- }
219
- /** @inheritdoc */
220
- render() {
221
- return html `<div class="base">
222
- <m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer>
223
- <m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring>
224
- <m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple>
225
- <div class="touch" aria-hidden="true"></div>
226
- <div class="wrapper">
227
- <div class="icon" aria-hidden="true">
228
- <svg class="check" viewBox="0 -960 960 960">
229
- <path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" />
230
- </svg>
231
- <slot name="icon" @slotchange="${__classPrivateFieldGet(this, _M3eButtonSegmentElement_instances, "m", _M3eButtonSegmentElement_handleIconSlotChange)}"></slot>
232
- </div>
233
- <div class="label">
234
- <slot></slot>
235
- </div>
236
- </div>
237
- </div>`;
575
+ }
238
576
  }
577
+ }
578
+ /** @inheritdoc */
579
+ render() {
580
+ return html`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div><div class="wrapper"><div class="icon" aria-hidden="true"><svg class="check" viewBox="0 -960 960 960"><path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg><slot name="icon" @slotchange="${__classPrivateFieldGet(this, _M3eButtonSegmentElement_instances, "m", _M3eButtonSegmentElement_handleIconSlotChange)}"></slot></div><div class="label"><slot></slot></div></div></div>`;
581
+ }
239
582
  };
240
583
  _M3eButtonSegmentElement_clickHandler = new WeakMap();
241
584
  _M3eButtonSegmentElement_instances = new WeakSet();
242
585
  _M3eButtonSegmentElement_handleIconSlotChange = function _M3eButtonSegmentElement_handleIconSlotChange(e) {
243
- this.classList.toggle("-with-icon", hasAssignedNodes(e.target));
586
+ this.classList.toggle("-with-icon", hasAssignedNodes(e.target));
244
587
  };
245
588
  _M3eButtonSegmentElement_handleClick = function _M3eButtonSegmentElement_handleClick(e) {
246
- if (e.defaultPrevented)
247
- return;
248
- const segmentedButton = this.closest("m3e-segmented-button");
249
- if (segmentedButton && (segmentedButton.multi || !this.checked)) {
250
- const checked = this.checked;
251
- this.checked = !this.checked;
252
- if (this.dispatchEvent(new Event("input", { bubbles: true, composed: true, cancelable: true }))) {
253
- this.closest("m3e-segmented-button")?.[selectionManager].notifySelectionChange(this);
254
- this.dispatchEvent(new Event("change", { bubbles: true }));
255
- }
256
- else {
257
- this.checked = checked;
258
- }
589
+ if (e.defaultPrevented) return;
590
+ const segmentedButton = this.closest("m3e-segmented-button");
591
+ if (segmentedButton && (segmentedButton.multi || !this.checked)) {
592
+ const checked = this.checked;
593
+ this.checked = !this.checked;
594
+ if (this.dispatchEvent(new Event("input", {
595
+ bubbles: true,
596
+ composed: true,
597
+ cancelable: true
598
+ }))) {
599
+ this.closest("m3e-segmented-button")?.[selectionManager].notifySelectionChange(this);
600
+ this.dispatchEvent(new Event("change", {
601
+ bubbles: true
602
+ }));
603
+ } else {
604
+ this.checked = checked;
259
605
  }
606
+ }
260
607
  };
261
608
  /** The styles of the element. */
262
- M3eButtonSegmentElement.styles = css `
263
- :host {
264
- display: inline-block;
265
- position: relative;
266
- vertical-align: middle;
267
- outline: none;
268
- user-select: none;
269
- flex: 1 1 auto;
270
- min-width: 0;
271
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
272
- }
273
- .base {
274
- display: inline-flex;
275
- vertical-align: middle;
276
- align-items: center;
277
- width: 100%;
278
- height: calc(var(--m3e-segmented-button-height, 2.5rem) + ${DesignToken.density.calc(-3)});
279
- box-sizing: border-box;
280
- border-width: var(--m3e-segmented-button-outline-thickness, 1px);
281
- border-color: var(--m3e-segmented-button-outline-color, ${DesignToken.color.outline});
282
- border-style: solid;
283
- border-radius: inherit;
284
- border-left-style: var(--_segmented-button-left-border, solid);
285
- transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};
286
- }
287
- .touch {
288
- position: absolute;
289
- height: 3rem;
290
- left: 0;
291
- right: 0;
292
- }
293
- .wrapper {
294
- width: 100%;
295
- overflow: hidden;
296
- display: inline-flex;
297
- align-items: center;
298
- padding-inline-start: var(--m3e-segmented-button-padding-start, 1rem);
299
- padding-inline-end: var(--m3e-segmented-button-padding-end, 1rem);
300
- column-gap: var(--m3e-segmented-button-spacing, 0.5rem);
301
- }
302
- .label {
303
- font-size: var(--m3e-segmented-button-font-size, ${DesignToken.typescale.standard.label.large.fontSize});
304
- font-weight: var(--m3e-segmented-button-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});
305
- line-height: var(--m3e-segmented-button-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});
306
- letter-spacing: var(--m3e-segmented-button-tracking, ${DesignToken.typescale.standard.label.large.tracking});
307
- justify-self: center;
308
- flex: 1 1 auto;
309
- white-space: nowrap;
310
- overflow: hidden;
311
- text-overflow: ellipsis;
312
- transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};
313
- }
314
- .icon {
315
- display: flex;
316
- align-items: center;
317
- justify-content: center;
318
- transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};
319
- }
320
- :host(:not(:disabled)) {
321
- cursor: pointer;
322
- }
323
- :host([checked]:not(.-hide-selection)) .wrapper,
324
- :host(.-with-icon) .wrapper {
325
- padding-inline-start: var(--m3e-segmented-button-with-icon-padding-start, 0.75rem);
326
- }
327
- :host(:not(:disabled)[checked]) .base {
328
- background-color: var(--m3e-segmented-button-selected-container-color, ${DesignToken.color.secondaryContainer});
329
- --m3e-state-layer-hover-color: var(
330
- --m3e-segmented-button-selected-container-hover-color,
331
- ${DesignToken.color.onSecondaryContainer}
332
- );
333
- --m3e-state-layer-focus-color: var(
334
- --m3e-segmented-button-selected-container-focus-color,
335
- ${DesignToken.color.onSecondaryContainer}
336
- );
337
- --m3e-ripple-color: var(--m3e-segmented-button-selected-ripple-color, ${DesignToken.color.onSecondaryContainer});
338
- }
339
- :host(:not(:disabled)[checked]) .label {
340
- color: var(--m3e-segmented-button-selected-label-text-color, ${DesignToken.color.onSecondaryContainer});
341
- }
342
- :host(:not(:disabled)[checked]) .icon {
343
- color: var(--m3e-segmented-button-selected-icon-color, ${DesignToken.color.onSecondaryContainer});
344
- }
345
- :host(:not(:disabled):not([checked])) .base {
346
- --m3e-state-layer-hover-color: var(
347
- --m3e-segmented-button-unselected-container-hover-color,
348
- ${DesignToken.color.onSurface}
349
- );
350
- --m3e-state-layer-focus-color: var(
351
- --m3e-segmented-button-unselected-container-focus-color,
352
- ${DesignToken.color.onSurface}
353
- );
354
- --m3e-ripple-color: var(--m3e-segmented-button-unselected-ripple-color, ${DesignToken.color.onSurface});
355
- }
356
- :host(:not(:disabled):not([checked])) .label {
357
- color: var(--m3e-segmented-button-unselected-label-text-color, ${DesignToken.color.onSurface});
358
- }
359
- :host(:not(:disabled):not([checked])) .icon {
360
- color: var(--m3e-segmented-button-unselected-icon-color, ${DesignToken.color.onSurface});
361
- }
362
- :host(:not(.-with-icon)) .icon {
363
- margin-inline-start: calc(0px - var(--m3e-segmented-button-spacing, 0.5rem));
364
- transition: margin-inline-start ${DesignToken.motion.spring.fastEffects};
365
- }
366
- .check,
367
- ::slotted([slot="icon"]) {
368
- width: 1em;
369
- font-size: var(--m3e-segmented-button-icon-size, 1.125rem) !important;
370
- }
371
- :host(:not([checked])) .check,
372
- :host(.-hide-selection) .check,
373
- :host(.-hide-selection:not(.-with-icon)) .icon {
374
- display: none;
375
- }
376
- :host([checked]) .icon {
377
- margin-inline-start: 0;
378
- }
379
- :host([checked]:not(.-hide-selection)) ::slotted([slot="icon"]) {
380
- display: none !important;
381
- }
382
- :host(:disabled) .base {
383
- border-color: color-mix(
384
- in srgb,
385
- var(--m3e-segmented-button-disabled-outline-color, ${DesignToken.color.onSurface})
386
- var(--m3e-segmented-button-disabled-outline-opacity, 12%),
387
- transparent
388
- );
389
- border-right-color: var(
390
- --_segmented-button-disabled-outline-color,
391
- color-mix(
392
- in srgb,
393
- var(--m3e-segmented-button-disabled-outline-color, ${DesignToken.color.onSurface})
394
- var(--m3e-segmented-button-disabled-outline-opacity, 12%),
395
- transparent
396
- )
397
- );
398
- }
399
- :host(:disabled) .label {
400
- color: color-mix(
401
- in srgb,
402
- var(--m3e-segmented-button-disabled-label-text-color, ${DesignToken.color.onSurface})
403
- var(--m3e-segmented-button-disabled-label-text-opacity, 38%),
404
- transparent
405
- );
406
- }
407
- :host(:disabled) .icon {
408
- color: color-mix(
409
- in srgb,
410
- var(--m3e-segmented-button-disabled-icon-color, ${DesignToken.color.onSurface})
411
- var(--m3e-segmented-button-disabled-icon-opacity, 38%),
412
- transparent
413
- );
414
- }
415
- @media (prefers-reduced-motion) {
416
- .base,
417
- .icon,
418
- .label {
419
- transition: none;
420
- }
421
- }
422
- @media (forced-colors: active) {
423
- .base,
424
- .icon,
425
- .label {
426
- transition: none !important;
427
- }
428
-
429
- :host(:disabled) .label,
430
- :host(:disabled) .icon {
431
- color: GrayText;
432
- }
433
- :host(:not([selected]):not(:disabled)) .label,
434
- :host(:not([selected]):not(:disabled)) .icon {
435
- color: ButtonText;
436
- }
437
- :host(:not(:disabled)[checked]) .base {
438
- background-color: ButtonText;
439
- }
440
- :host(:not(:disabled)[checked]) .label,
441
- :host(:not(:disabled)[checked]) .icon {
442
- forced-color-adjust: none;
443
- color: ButtonFace;
444
- }
445
- :host {
446
- --m3e-segmented-button-outline-color: ButtonText;
447
- }
448
- }
449
- `;
450
- __decorate([
451
- e(".focus-ring")
452
- ], M3eButtonSegmentElement.prototype, "_focusRing", void 0);
453
- __decorate([
454
- e(".state-layer")
455
- ], M3eButtonSegmentElement.prototype, "_stateLayer", void 0);
456
- __decorate([
457
- e(".ripple")
458
- ], M3eButtonSegmentElement.prototype, "_ripple", void 0);
459
- __decorate([
460
- n()
461
- ], M3eButtonSegmentElement.prototype, "value", void 0);
462
- M3eButtonSegmentElement = M3eButtonSegmentElement_1 = __decorate([
463
- t$1("m3e-button-segment")
464
- ], M3eButtonSegmentElement);
609
+ M3eButtonSegmentElement.styles = css`:host { display: inline-block; position: relative; vertical-align: middle; outline: none; user-select: none; flex: 1 1 auto; min-width: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { display: inline-flex; vertical-align: middle; align-items: center; width: 100%; height: calc(var(--m3e-segmented-button-height, 2.5rem) + ${DesignToken.density.calc(-3)}); box-sizing: border-box; border-width: var(--m3e-segmented-button-outline-thickness, 1px); border-color: var(--m3e-segmented-button-outline-color, ${DesignToken.color.outline}); border-style: solid; border-radius: inherit; border-inline-start-style: var(--_segmented-button-left-border, solid); 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; padding-inline-start: var(--m3e-segmented-button-padding-start, 1rem); padding-inline-end: var(--m3e-segmented-button-padding-end, 1rem); column-gap: var(--m3e-segmented-button-spacing, 0.5rem); } .label { font-size: var(--m3e-segmented-button-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-segmented-button-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-segmented-button-line-height, ${DesignToken.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-segmented-button-tracking, ${DesignToken.typescale.standard.label.large.tracking}); justify-self: center; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } .icon { display: flex; align-items: center; justify-content: center; transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } :host(:not(:disabled)) { cursor: pointer; } :host([checked]:not(.-hide-selection)) .wrapper, :host(.-with-icon) .wrapper { padding-inline-start: var(--m3e-segmented-button-with-icon-padding-start, 0.75rem); } :host(:not(:disabled)[checked]) .base { background-color: var(--m3e-segmented-button-selected-container-color, ${DesignToken.color.secondaryContainer}); --m3e-state-layer-hover-color: var( --m3e-segmented-button-selected-container-hover-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-segmented-button-selected-container-focus-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-ripple-color: var(--m3e-segmented-button-selected-ripple-color, ${DesignToken.color.onSecondaryContainer}); } :host(:not(:disabled)[checked]) .label { color: var(--m3e-segmented-button-selected-label-text-color, ${DesignToken.color.onSecondaryContainer}); } :host(:not(:disabled)[checked]) .icon { color: var(--m3e-segmented-button-selected-icon-color, ${DesignToken.color.onSecondaryContainer}); } :host(:not(:disabled):not([checked])) .base { --m3e-state-layer-hover-color: var( --m3e-segmented-button-unselected-container-hover-color, ${DesignToken.color.onSurface} ); --m3e-state-layer-focus-color: var( --m3e-segmented-button-unselected-container-focus-color, ${DesignToken.color.onSurface} ); --m3e-ripple-color: var(--m3e-segmented-button-unselected-ripple-color, ${DesignToken.color.onSurface}); } :host(:not(:disabled):not([checked])) .label { color: var(--m3e-segmented-button-unselected-label-text-color, ${DesignToken.color.onSurface}); } :host(:not(:disabled):not([checked])) .icon { color: var(--m3e-segmented-button-unselected-icon-color, ${DesignToken.color.onSurface}); } :host(:not(.-with-icon)) .icon { margin-inline-start: calc(0px - var(--m3e-segmented-button-spacing, 0.5rem)); transition: margin-inline-start ${DesignToken.motion.spring.fastEffects}; } .check, ::slotted([slot="icon"]) { width: 1em; font-size: var(--m3e-segmented-button-icon-size, 1.125rem) !important; } :host(:not([checked])) .check, :host(.-hide-selection) .check, :host(.-hide-selection:not(.-with-icon)) .icon { display: none; } :host([checked]) .icon { margin-inline-start: 0; } :host([checked]:not(.-hide-selection)) ::slotted([slot="icon"]) { display: none !important; } :host(:disabled) .base { border-color: color-mix( in srgb, var(--m3e-segmented-button-disabled-outline-color, ${DesignToken.color.onSurface}) var(--m3e-segmented-button-disabled-outline-opacity, 12%), transparent ); border-inline-end-color: var( --_segmented-button-disabled-outline-color, color-mix( in srgb, var(--m3e-segmented-button-disabled-outline-color, ${DesignToken.color.onSurface}) var(--m3e-segmented-button-disabled-outline-opacity, 12%), transparent ) ); } :host(:disabled) .label { color: color-mix( in srgb, var(--m3e-segmented-button-disabled-label-text-color, ${DesignToken.color.onSurface}) var(--m3e-segmented-button-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) .icon { color: color-mix( in srgb, var(--m3e-segmented-button-disabled-icon-color, ${DesignToken.color.onSurface}) var(--m3e-segmented-button-disabled-icon-opacity, 38%), transparent ); } @media (prefers-reduced-motion) { .base, .icon, .label { transition: none; } } @media (forced-colors: active) { .base, .icon, .label { transition: none !important; } :host(:disabled) .label, :host(:disabled) .icon { color: GrayText; } :host(:not([selected]):not(:disabled)) .label, :host(:not([selected]):not(:disabled)) .icon { color: ButtonText; } :host(:not(:disabled)[checked]) .base { background-color: ButtonText; } :host(:not(:disabled)[checked]) .label, :host(:not(:disabled)[checked]) .icon { forced-color-adjust: none; color: ButtonFace; } :host { --m3e-segmented-button-outline-color: ButtonText; } }`;
610
+ __decorate([e(".focus-ring")], M3eButtonSegmentElement.prototype, "_focusRing", void 0);
611
+ __decorate([e(".state-layer")], M3eButtonSegmentElement.prototype, "_stateLayer", void 0);
612
+ __decorate([e(".ripple")], M3eButtonSegmentElement.prototype, "_ripple", void 0);
613
+ __decorate([n()], M3eButtonSegmentElement.prototype, "value", void 0);
614
+ M3eButtonSegmentElement = M3eButtonSegmentElement_1 = __decorate([t$1("m3e-button-segment")], M3eButtonSegmentElement);
465
615
 
466
- var _M3eSegmentedButtonElement_instances, _M3eSegmentedButtonElement_handleSlotChange, _M3eSegmentedButtonElement_handleKeyDown, _M3eSegmentedButtonElement_handleChange, _a;
616
+ var _M3eSegmentedButtonElement_instances, _M3eSegmentedButtonElement_directionalitySubscription, _M3eSegmentedButtonElement_handleSlotChange, _M3eSegmentedButtonElement_handleKeyDown, _M3eSegmentedButtonElement_handleChange, _a;
467
617
  /**
468
618
  * A button that allows a user to select from a limited set of options.
469
619
  *
@@ -510,137 +660,119 @@ var _M3eSegmentedButtonElement_instances, _M3eSegmentedButtonElement_handleSlotC
510
660
  * @cssprop --m3e-segmented-button-end-shape - Border radius for the last segment in a segmented button.
511
661
  */
512
662
  let M3eSegmentedButtonElement = class M3eSegmentedButtonElement extends Labelled(Dirty(Touched(FormAssociated(Disabled(AttachInternals(Role(LitElement, "radiogroup"))))))) {
513
- constructor() {
514
- super(...arguments);
515
- _M3eSegmentedButtonElement_instances.add(this);
516
- /** @internal */
517
- this[_a] = new SelectionManager()
518
- .withWrap()
519
- .onActiveItemChange(() => this[selectionManager].activeItem?.click());
520
- /**
521
- * Whether multiple options can be selected.
522
- * @default false
523
- */
524
- this.multi = false;
525
- /**
526
- * Whether to hide the selection indicator.
527
- * @default false
528
- */
529
- this.hideSelectionIndicator = false;
663
+ constructor() {
664
+ super(...arguments);
665
+ _M3eSegmentedButtonElement_instances.add(this);
666
+ /** @private */
667
+ _M3eSegmentedButtonElement_directionalitySubscription.set(this, void 0);
668
+ /** @internal */
669
+ this[_a] = new SelectionManager().withWrap().withDirectionality(M3eDirectionality.current).onActiveItemChange(() => this[selectionManager].activeItem?.click());
670
+ /**
671
+ * Whether multiple options can be selected.
672
+ * @default false
673
+ */
674
+ this.multi = false;
675
+ /**
676
+ * Whether to hide the selection indicator.
677
+ * @default false
678
+ */
679
+ this.hideSelectionIndicator = false;
680
+ }
681
+ /** The segments of the button. */
682
+ get segments() {
683
+ return this[selectionManager]?.items ?? [];
684
+ }
685
+ /** The selected segment(s) of the button. */
686
+ get selected() {
687
+ return this[selectionManager]?.selectedItems ?? [];
688
+ }
689
+ /** The selected value(s) of the button. */
690
+ get value() {
691
+ const values = this.selected.map(x => x.value);
692
+ switch (values.length) {
693
+ case 0:
694
+ return null;
695
+ case 1:
696
+ return values[0];
697
+ default:
698
+ return values;
530
699
  }
531
- /** The segments of the button. */
532
- get segments() {
533
- return this[selectionManager]?.items ?? [];
700
+ }
701
+ /** @inheritdoc @internal */
702
+ get [(_M3eSegmentedButtonElement_directionalitySubscription = new WeakMap(), _M3eSegmentedButtonElement_instances = new WeakSet(), _a = selectionManager, formValue)]() {
703
+ const values = this.value;
704
+ if (Array.isArray(values)) {
705
+ const data = new FormData();
706
+ for (const value of values) {
707
+ data.append(this.name, value);
708
+ }
709
+ return data;
534
710
  }
535
- /** The selected segment(s) of the button. */
536
- get selected() {
537
- return this[selectionManager]?.selectedItems ?? [];
711
+ return values;
712
+ }
713
+ /** @inheritdoc */
714
+ connectedCallback() {
715
+ super.connectedCallback();
716
+ this[selectionManager].multi = this.multi;
717
+ this[selectionManager].disableRovingTabIndex(this.multi);
718
+ __classPrivateFieldSet(this, _M3eSegmentedButtonElement_directionalitySubscription, M3eDirectionality.observe(() => this[selectionManager].directionality = M3eDirectionality.current), "f");
719
+ }
720
+ /** @inheritdoc */
721
+ disconnectedCallback() {
722
+ super.disconnectedCallback();
723
+ __classPrivateFieldGet(this, _M3eSegmentedButtonElement_directionalitySubscription, "f")?.call(this);
724
+ }
725
+ /** @inheritdoc */
726
+ update(changedProperties) {
727
+ super.update(changedProperties);
728
+ if (changedProperties.has("disabled") && (changedProperties.get("disabled") !== undefined || this.disabled)) {
729
+ this[selectionManager].disabled = this.disabled;
538
730
  }
539
- /** The selected value(s) of the button. */
540
- get value() {
541
- const values = this.selected.map((x) => x.value);
542
- switch (values.length) {
543
- case 0:
544
- return null;
545
- case 1:
546
- return values[0];
547
- default:
548
- return values;
549
- }
731
+ if (changedProperties.has("multi")) {
732
+ this.role = this.multi ? "group" : "radiogroup";
733
+ this[selectionManager].multi = this.multi;
734
+ this[selectionManager].disableRovingTabIndex(this.multi);
550
735
  }
551
- /** @inheritdoc @internal */
552
- get [(_M3eSegmentedButtonElement_instances = new WeakSet(), _a = selectionManager, formValue)]() {
553
- const values = this.value;
554
- if (Array.isArray(values)) {
555
- const data = new FormData();
556
- for (const value of values) {
557
- data.append(this.name, value);
558
- }
559
- return data;
560
- }
561
- return values;
736
+ if (changedProperties.has("multi") || changedProperties.has("disabled")) {
737
+ // aria-disabled is not supported on radiogroup roles.
738
+ this.ariaDisabled = this.multi && this.disabled ? "true" : null;
562
739
  }
563
- /** @inheritdoc */
564
- connectedCallback() {
565
- super.connectedCallback();
566
- this[selectionManager].multi = this.multi;
567
- this[selectionManager].disableRovingTabIndex(this.multi);
568
- }
569
- /** @inheritdoc */
570
- update(changedProperties) {
571
- super.update(changedProperties);
572
- if (changedProperties.has("disabled") && (changedProperties.get("disabled") !== undefined || this.disabled)) {
573
- this[selectionManager].disabled = this.disabled;
574
- }
575
- if (changedProperties.has("multi")) {
576
- this.role = this.multi ? "group" : "radiogroup";
577
- this[selectionManager].multi = this.multi;
578
- this[selectionManager].disableRovingTabIndex(this.multi);
579
- }
580
- if (changedProperties.has("multi") || changedProperties.has("disabled")) {
581
- // aria-disabled is not supported on radiogroup roles.
582
- this.ariaDisabled = this.multi && this.disabled ? "true" : null;
583
- }
584
- if (changedProperties.has("hideSelectionIndicator")) {
585
- this.segments.forEach((x) => x.classList.toggle("-hide-selection", this.hideSelectionIndicator));
586
- }
587
- }
588
- /** @inheritdoc */
589
- render() {
590
- return html `<slot
591
- @slotchange="${__classPrivateFieldGet(this, _M3eSegmentedButtonElement_instances, "m", _M3eSegmentedButtonElement_handleSlotChange)}"
592
- @keydown="${__classPrivateFieldGet(this, _M3eSegmentedButtonElement_instances, "m", _M3eSegmentedButtonElement_handleKeyDown)}"
593
- @change="${__classPrivateFieldGet(this, _M3eSegmentedButtonElement_instances, "m", _M3eSegmentedButtonElement_handleChange)}"
594
- ></slot>`;
740
+ if (changedProperties.has("hideSelectionIndicator")) {
741
+ this.segments.forEach(x => x.classList.toggle("-hide-selection", this.hideSelectionIndicator));
595
742
  }
743
+ }
744
+ /** @inheritdoc */
745
+ render() {
746
+ return html`<slot @slotchange="${__classPrivateFieldGet(this, _M3eSegmentedButtonElement_instances, "m", _M3eSegmentedButtonElement_handleSlotChange)}" @keydown="${__classPrivateFieldGet(this, _M3eSegmentedButtonElement_instances, "m", _M3eSegmentedButtonElement_handleKeyDown)}" @change="${__classPrivateFieldGet(this, _M3eSegmentedButtonElement_instances, "m", _M3eSegmentedButtonElement_handleChange)}"></slot>`;
747
+ }
596
748
  };
597
749
  _M3eSegmentedButtonElement_handleSlotChange = function _M3eSegmentedButtonElement_handleSlotChange() {
598
- const { added } = this[selectionManager].setItems([...this.querySelectorAll("m3e-button-segment")]);
599
- added.forEach((x) => x.classList.toggle("-hide-selection", this.hideSelectionIndicator));
750
+ const {
751
+ added
752
+ } = this[selectionManager].setItems([...this.querySelectorAll("m3e-button-segment")]);
753
+ added.forEach(x => x.classList.toggle("-hide-selection", this.hideSelectionIndicator));
600
754
  };
601
755
  _M3eSegmentedButtonElement_handleKeyDown = function _M3eSegmentedButtonElement_handleKeyDown(e) {
602
- if (!this.multi) {
603
- this[selectionManager].onKeyDown(e);
604
- }
756
+ if (!this.multi) {
757
+ this[selectionManager].onKeyDown(e);
758
+ }
605
759
  };
606
760
  _M3eSegmentedButtonElement_handleChange = function _M3eSegmentedButtonElement_handleChange(e) {
607
- e.stopPropagation();
608
- this.dispatchEvent(new Event("change", { bubbles: true }));
761
+ e.stopPropagation();
762
+ this.dispatchEvent(new Event("change", {
763
+ bubbles: true
764
+ }));
609
765
  };
610
766
  /** The styles of the element. */
611
- M3eSegmentedButtonElement.styles = css `
612
- :host {
613
- display: inline-flex;
614
- vertical-align: middle;
615
- align-items: center;
616
- }
617
- ::slotted(:first-child) {
618
- border-radius: var(
619
- --m3e-segmented-button-start-shape,
620
- ${DesignToken.shape.corner.full} ${DesignToken.shape.corner.none} ${DesignToken.shape.corner.none}
621
- ${DesignToken.shape.corner.full}
622
- );
623
- }
624
- ::slotted(:last-child) {
625
- border-radius: var(
626
- --m3e-segmented-button-end-shape,
627
- ${DesignToken.shape.corner.none} ${DesignToken.shape.corner.full} ${DesignToken.shape.corner.full}
628
- ${DesignToken.shape.corner.none}
629
- );
630
- }
631
- ::slotted(:not(:first-child)) {
632
- --_segmented-button-left-border: none;
633
- }
634
- `;
635
- __decorate([
636
- n({ type: Boolean })
637
- ], M3eSegmentedButtonElement.prototype, "multi", void 0);
638
- __decorate([
639
- n({ attribute: "hide-selection-indicator", type: Boolean })
640
- ], M3eSegmentedButtonElement.prototype, "hideSelectionIndicator", void 0);
641
- M3eSegmentedButtonElement = __decorate([
642
- t$1("m3e-segmented-button")
643
- ], M3eSegmentedButtonElement);
767
+ M3eSegmentedButtonElement.styles = css`:host { display: inline-flex; vertical-align: middle; align-items: center; } ::slotted(:first-child) { border-start-start-radius: var(--m3e-segmented-button-start-shape, ${DesignToken.shape.corner.full}); border-end-start-radius: var(--m3e-segmented-button-start-shape, ${DesignToken.shape.corner.full}); } ::slotted(:last-child) { border-start-end-radius: var(--m3e-segmented-button-end-shape, ${DesignToken.shape.corner.full}); border-end-end-radius: var(--m3e-segmented-button-end-shape, ${DesignToken.shape.corner.full}); } ::slotted(:not(:first-child)) { --_segmented-button-left-border: none; }`;
768
+ __decorate([n({
769
+ type: Boolean
770
+ })], M3eSegmentedButtonElement.prototype, "multi", void 0);
771
+ __decorate([n({
772
+ attribute: "hide-selection-indicator",
773
+ type: Boolean
774
+ })], M3eSegmentedButtonElement.prototype, "hideSelectionIndicator", void 0);
775
+ M3eSegmentedButtonElement = __decorate([t$1("m3e-segmented-button")], M3eSegmentedButtonElement);
644
776
 
645
777
  export { M3eButtonSegmentElement, M3eSegmentedButtonElement };
646
778
  //# sourceMappingURL=index.js.map