@m3e/stepper 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.
package/dist/index.js CHANGED
@@ -21,33 +21,30 @@ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
21
21
  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
22
22
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
23
23
  PERFORMANCE OF THIS SOFTWARE.
24
- ***************************************************************************** */
25
- /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
26
-
27
-
28
- function __decorate(decorators, target, key, desc) {
29
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
30
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
31
- 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
-
35
- function __classPrivateFieldGet(receiver, state, kind, f) {
36
- if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
37
- 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");
38
- return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
39
- }
40
-
41
- function __classPrivateFieldSet(receiver, state, value, kind, f) {
42
- if (kind === "m") throw new TypeError("Private method is not writable");
43
- if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
44
- 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");
45
- return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
46
- }
47
-
48
- typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
49
- var e = new Error(message);
50
- 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;
51
48
  };
52
49
 
53
50
  /**
@@ -55,45 +52,408 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
55
52
  * Copyright 2017 Google LLC
56
53
  * SPDX-License-Identifier: BSD-3-Clause
57
54
  */
58
- const t$2=t=>(e,o)=>{ void 0!==o?o.addInitializer((()=>{customElements.define(t,e);})):customElements.define(t,e);};
55
+ const t$2 = t => (e, o) => {
56
+ void 0 !== o ? o.addInitializer(() => {
57
+ customElements.define(t, e);
58
+ }) : customElements.define(t, e);
59
+ };
59
60
 
60
61
  /**
61
62
  * @license
62
63
  * Copyright 2019 Google LLC
63
64
  * SPDX-License-Identifier: BSD-3-Clause
64
65
  */
65
- const t$1=globalThis,e$4=t$1.ShadowRoot&&(void 0===t$1.ShadyCSS||t$1.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$1=Symbol(),o$4=new WeakMap;let n$3 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$1)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$4&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$4.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$4.set(s,t));}return t}toString(){return this.cssText}};const r$4=t=>new n$3("string"==typeof t?t:t+"",void 0,s$1),S$1=(s,o)=>{if(e$4)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$1.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$2=e$4?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$4(e)})(t):t;
66
+ const t$1 = globalThis,
67
+ e$4 = t$1.ShadowRoot && (void 0 === t$1.ShadyCSS || t$1.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype,
68
+ s$1 = Symbol(),
69
+ o$4 = new WeakMap();
70
+ let n$3 = class n {
71
+ constructor(t, e, o) {
72
+ if (this._$cssResult$ = true, o !== s$1) 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$4 && void 0 === t) {
79
+ const e = void 0 !== s && 1 === s.length;
80
+ e && (t = o$4.get(s)), void 0 === t && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), e && o$4.set(s, t));
81
+ }
82
+ return t;
83
+ }
84
+ toString() {
85
+ return this.cssText;
86
+ }
87
+ };
88
+ const r$4 = t => new n$3("string" == typeof t ? t : t + "", void 0, s$1),
89
+ S$1 = (s, o) => {
90
+ if (e$4) 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$1.litNonce;
93
+ void 0 !== n && o.setAttribute("nonce", n), o.textContent = e.cssText, s.appendChild(o);
94
+ }
95
+ },
96
+ c$2 = e$4 ? t => t : t => t instanceof CSSStyleSheet ? (t => {
97
+ let e = "";
98
+ for (const s of t.cssRules) e += s.cssText;
99
+ return r$4(e);
100
+ })(t) : t;
66
101
 
67
102
  /**
68
103
  * @license
69
104
  * Copyright 2017 Google LLC
70
105
  * SPDX-License-Identifier: BSD-3-Clause
71
- */const{is:i$1,defineProperty:e$3,getOwnPropertyDescriptor:h$1,getOwnPropertyNames:r$3,getOwnPropertySymbols:o$3,getPrototypeOf:n$2}=Object,a$1=globalThis,c$1=a$1.trustedTypes,l$1=c$1?c$1.emptyScript:"",p$1=a$1.reactiveElementPolyfillSupport,d$1=(t,s)=>t,u$1={toAttribute(t,s){switch(s){case Boolean:t=t?l$1: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$1=(t,s)=>!i$1(t,s),b={attribute:true,type:String,converter:u$1,reflect:false,useDefault:false,hasChanged:f$1};Symbol.metadata??=Symbol("metadata"),a$1.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$3(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h$1(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$1("elementProperties")))return;const t=n$2(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$1("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d$1("properties"))){const t=this.properties,s=[...r$3(t),...o$3(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$2(s));}else void 0!==s&&i.push(c$2(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$1(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$1).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$1;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$1)(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$1("elementProperties")]=new Map,y[d$1("finalized")]=new Map,p$1?.({ReactiveElement:y}),(a$1.reactiveElementVersions??=[]).push("2.1.1");
106
+ */
107
+ const {
108
+ is: i$1,
109
+ defineProperty: e$3,
110
+ getOwnPropertyDescriptor: h$1,
111
+ getOwnPropertyNames: r$3,
112
+ getOwnPropertySymbols: o$3,
113
+ getPrototypeOf: n$2
114
+ } = Object,
115
+ a$1 = globalThis,
116
+ c$1 = a$1.trustedTypes,
117
+ l$1 = c$1 ? c$1.emptyScript : "",
118
+ p$1 = a$1.reactiveElementPolyfillSupport,
119
+ d$1 = (t, s) => t,
120
+ u$1 = {
121
+ toAttribute(t, s) {
122
+ switch (s) {
123
+ case Boolean:
124
+ t = t ? l$1 : 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$1 = (t, s) => !i$1(t, s),
153
+ b = {
154
+ attribute: true,
155
+ type: String,
156
+ converter: u$1,
157
+ reflect: false,
158
+ useDefault: false,
159
+ hasChanged: f$1
160
+ };
161
+ Symbol.metadata ??= Symbol("metadata"), a$1.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$3(this.prototype, t, h);
174
+ }
175
+ }
176
+ static getPropertyDescriptor(t, s, i) {
177
+ const {
178
+ get: e,
179
+ set: r
180
+ } = h$1(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$1("elementProperties"))) return;
203
+ const t = n$2(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$1("finalized"))) return;
208
+ if (this.finalized = true, this._$Ei(), this.hasOwnProperty(d$1("properties"))) {
209
+ const t = this.properties,
210
+ s = [...r$3(t), ...o$3(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$2(s));
230
+ } else void 0 !== s && i.push(c$2(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$1(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$1).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$1;
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$1)(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$1("elementProperties")] = new Map(), y[d$1("finalized")] = new Map(), p$1?.({
369
+ ReactiveElement: y
370
+ }), (a$1.reactiveElementVersions ??= []).push("2.1.1");
72
371
 
73
372
  /**
74
373
  * @license
75
374
  * Copyright 2017 Google LLC
76
375
  * SPDX-License-Identifier: BSD-3-Clause
77
- */const o$2={attribute:true,type:String,converter:u$1,reflect:false,hasChanged:f$1},r$2=(t=o$2,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$1(t){return (e,o)=>"object"==typeof o?r$2(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$2 = {
378
+ attribute: true,
379
+ type: String,
380
+ converter: u$1,
381
+ reflect: false,
382
+ hasChanged: f$1
383
+ },
384
+ r$2 = (t = o$2, 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$1(t) {
416
+ return (e, o) => "object" == typeof o ? r$2(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
+ }
78
421
 
79
422
  /**
80
423
  * @license
81
424
  * Copyright 2017 Google LLC
82
425
  * SPDX-License-Identifier: BSD-3-Clause
83
- */function r$1(r){return n$1({...r,state:true,attribute:false})}
426
+ */
427
+ function r$1(r) {
428
+ return n$1({
429
+ ...r,
430
+ state: true,
431
+ attribute: false
432
+ });
433
+ }
84
434
 
85
435
  /**
86
436
  * @license
87
437
  * Copyright 2017 Google LLC
88
438
  * SPDX-License-Identifier: BSD-3-Clause
89
439
  */
90
- const e$2=(e,t,c)=>(c.configurable=true,c.enumerable=true,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,c),c);
440
+ const e$2 = (e, t, c) => (c.configurable = true, c.enumerable = true, Reflect.decorate && "object" != typeof t && Object.defineProperty(e, t, c), c);
91
441
 
92
442
  /**
93
443
  * @license
94
444
  * Copyright 2017 Google LLC
95
445
  * SPDX-License-Identifier: BSD-3-Clause
96
- */function e$1(e,r){return (n,s,i)=>{const o=t=>t.renderRoot?.querySelector(e)??null;return e$2(n,s,{get(){return o(this)}})}}
446
+ */
447
+ function e$1(e, r) {
448
+ return (n, s, i) => {
449
+ const o = t => t.renderRoot?.querySelector(e) ?? null;
450
+ return e$2(n, s, {
451
+ get() {
452
+ return o(this);
453
+ }
454
+ });
455
+ };
456
+ }
97
457
 
98
458
  /**
99
459
  * A panel presented for a step in a wizard-like workflow.
@@ -153,53 +513,25 @@ const e$2=(e,t,c)=>(c.configurable=true,c.enumerable=true,Reflect.decorate&&"obj
153
513
  * @cssprop --m3e-step-panel-actions-height - Minimum height of the slotted actions container.
154
514
  */
155
515
  let M3eStepPanelElement = class M3eStepPanelElement extends Role(LitElement, "tabpanel") {
156
- constructor() {
157
- super(...arguments);
158
- /** @internal */
159
- this.active = false;
160
- }
161
- /** @inheritdoc */
162
- connectedCallback() {
163
- this.slot = "panel";
164
- super.connectedCallback();
165
- }
166
- /** @inheritdoc */
167
- render() {
168
- return html `<m3e-collapsible ?open=${this.active}>
169
- <div class="content">
170
- <div><slot></slot></div>
171
- <slot name="actions"></slot>
172
- </div>
173
- </m3e-collapsible>`;
174
- }
516
+ constructor() {
517
+ super(...arguments);
518
+ /** @internal */
519
+ this.active = false;
520
+ }
521
+ /** @inheritdoc */
522
+ connectedCallback() {
523
+ this.slot = "panel";
524
+ super.connectedCallback();
525
+ }
526
+ /** @inheritdoc */
527
+ render() {
528
+ return html`<m3e-collapsible ?open="${this.active}"><div class="content"><div><slot></slot></div><slot name="actions"></slot></div></m3e-collapsible>`;
529
+ }
175
530
  };
176
531
  /** The styles of the element. */
177
- M3eStepPanelElement.styles = css `
178
- :host {
179
- display: block;
180
- }
181
- .content {
182
- display: flex;
183
- flex-direction: column;
184
- padding: var(--m3e-step-panel-padding, 1rem 1.5rem 1.5rem 1.5rem);
185
- row-gap: var(--m3e-step-panel-spacing, 0.5rem);
186
- }
187
- ::slotted([slot="actions"]) {
188
- flex: none;
189
- display: flex;
190
- align-items: center;
191
- min-height: var(--m3e-step-panel-actions-height, 3rem);
192
- }
193
- ::slotted([slot="actions"][end]) {
194
- justify-content: flex-end;
195
- }
196
- `;
197
- __decorate([
198
- r$1()
199
- ], M3eStepPanelElement.prototype, "active", void 0);
200
- M3eStepPanelElement = __decorate([
201
- t$2("m3e-step-panel")
202
- ], M3eStepPanelElement);
532
+ M3eStepPanelElement.styles = css`:host { display: block; } .content { display: flex; flex-direction: column; padding: var(--m3e-step-panel-padding, 1rem 1.5rem 1.5rem 1.5rem); row-gap: var(--m3e-step-panel-spacing, 0.5rem); } ::slotted([slot="actions"]) { flex: none; display: flex; align-items: center; min-height: var(--m3e-step-panel-actions-height, 3rem); } ::slotted([slot="actions"][end]) { justify-content: flex-end; }`;
533
+ __decorate([r$1()], M3eStepPanelElement.prototype, "active", void 0);
534
+ M3eStepPanelElement = __decorate([t$2("m3e-step-panel")], M3eStepPanelElement);
203
535
 
204
536
  var _M3eStepElement_instances, _M3eStepElement_clickHandler, _M3eStepElement_renderIcon, _M3eStepElement_handleClick;
205
537
  var M3eStepElement_1;
@@ -303,340 +635,497 @@ var M3eStepElement_1;
303
635
  * @cssprop --m3e-step-disabled-hint-color - Base color used to mix the disabled hint foreground.
304
636
  */
305
637
  let M3eStepElement = M3eStepElement_1 = class M3eStepElement extends Selected(KeyboardClick(Focusable(HtmlFor(Disabled(AttachInternals(Role(LitElement, "tab"))))))) {
306
- constructor() {
307
- super(...arguments);
308
- _M3eStepElement_instances.add(this);
309
- /** @private */ _M3eStepElement_clickHandler.set(this, (e) => __classPrivateFieldGet(this, _M3eStepElement_instances, "m", _M3eStepElement_handleClick).call(this, e));
310
- /**
311
- * Whether the step is optional.
312
- * @default false
313
- */
314
- this.optional = false;
315
- /**
316
- * Whether the step is editable and users can return to it after completion.
317
- * @default false
318
- */
319
- this.editable = false;
320
- /**
321
- * Whether the step has been completed.
322
- * @default false
323
- */
324
- this.completed = false;
325
- /**
326
- * Whether the step has an error.
327
- * @default false
328
- */
329
- this.invalid = false;
330
- /** @internal */
331
- this.index = -1;
332
- }
333
- /** A reference to the panel controlled by the step. */
334
- get panel() {
335
- return this.control instanceof M3eStepPanelElement ? this.control : null;
336
- }
337
- /** The stepper to which this step belongs. */
338
- get stepper() {
339
- return this.closest("m3e-stepper");
340
- }
341
- /** Resets the step to its initial state, clearing any form data. */
342
- reset() {
343
- this.invalid = false;
344
- this.completed = false;
345
- this.panel?.querySelector("form")?.reset();
346
- }
347
- /** @inheritdoc */
348
- attach(control) {
349
- if (control instanceof M3eStepPanelElement) {
350
- control.id = control.id || `m3e-step-panel-${M3eStepElement_1.__nextId++}`;
351
- addAriaReferencedId(this, "aria-controls", control.id);
352
- }
353
- super.attach(control);
354
- }
355
- /** @inheritdoc */
356
- detach() {
357
- if (this.control?.id) {
358
- removeAriaReferencedId(this, "aria-controls", this.control.id);
359
- }
360
- super.detach();
361
- }
362
- /** @inheritdoc */
363
- connectedCallback() {
364
- this.slot = "step";
365
- super.connectedCallback();
366
- this.addEventListener("click", __classPrivateFieldGet(this, _M3eStepElement_clickHandler, "f"));
367
- }
368
- /** @inheritdoc */
369
- disconnectedCallback() {
370
- super.disconnectedCallback();
371
- this.removeEventListener("click", __classPrivateFieldGet(this, _M3eStepElement_clickHandler, "f"));
372
- }
373
- /** @inheritdoc */
374
- update(changedProperties) {
375
- super.update(changedProperties);
376
- if (changedProperties.has("selected")) {
377
- this.closest("m3e-stepper")?.[selectionManager].notifySelectionChange(this);
378
- }
638
+ constructor() {
639
+ super(...arguments);
640
+ _M3eStepElement_instances.add(this);
641
+ /** @private */
642
+ _M3eStepElement_clickHandler.set(this, e => __classPrivateFieldGet(this, _M3eStepElement_instances, "m", _M3eStepElement_handleClick).call(this, e));
643
+ /**
644
+ * Whether the step is optional.
645
+ * @default false
646
+ */
647
+ this.optional = false;
648
+ /**
649
+ * Whether the step is editable and users can return to it after completion.
650
+ * @default false
651
+ */
652
+ this.editable = false;
653
+ /**
654
+ * Whether the step has been completed.
655
+ * @default false
656
+ */
657
+ this.completed = false;
658
+ /**
659
+ * Whether the step has an error.
660
+ * @default false
661
+ */
662
+ this.invalid = false;
663
+ /** @internal */
664
+ this.index = -1;
665
+ }
666
+ /** A reference to the panel controlled by the step. */
667
+ get panel() {
668
+ return this.control instanceof M3eStepPanelElement ? this.control : null;
669
+ }
670
+ /** The stepper to which this step belongs. */
671
+ get stepper() {
672
+ return this.closest("m3e-stepper");
673
+ }
674
+ /** Resets the step to its initial state, clearing any form data. */
675
+ reset() {
676
+ this.invalid = false;
677
+ this.completed = false;
678
+ this.panel?.querySelector("form")?.reset();
679
+ }
680
+ /** @inheritdoc */
681
+ attach(control) {
682
+ if (control instanceof M3eStepPanelElement) {
683
+ control.id = control.id || `m3e-step-panel-${M3eStepElement_1.__nextId++}`;
684
+ addAriaReferencedId(this, "aria-controls", control.id);
379
685
  }
380
- /** @inheritdoc */
381
- firstUpdated(_changedProperties) {
382
- super.firstUpdated(_changedProperties);
383
- [this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));
686
+ super.attach(control);
687
+ }
688
+ /** @inheritdoc */
689
+ detach() {
690
+ if (this.control?.id) {
691
+ removeAriaReferencedId(this, "aria-controls", this.control.id);
384
692
  }
385
- /** @inheritdoc */
386
- render() {
387
- const hint = html `<slot name="hint">${this.optional ? html `<span class="hint">(Optional)</span>` : nothing}</slot>`;
388
- const error = html `<slot name="error">${hint}</slot>`;
389
- return html ` <m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer>
390
- <m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring>
391
- <m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple>
392
- <div class="wrapper">
393
- <div class="icon" aria-hidden="true">${__classPrivateFieldGet(this, _M3eStepElement_instances, "m", _M3eStepElement_renderIcon).call(this)}</div>
394
- <div class="label">
395
- <slot></slot>
396
- ${this.invalid ? error : hint}
397
- </div>
398
- </div>`;
693
+ super.detach();
694
+ }
695
+ /** @inheritdoc */
696
+ connectedCallback() {
697
+ this.slot = "step";
698
+ super.connectedCallback();
699
+ this.addEventListener("click", __classPrivateFieldGet(this, _M3eStepElement_clickHandler, "f"));
700
+ }
701
+ /** @inheritdoc */
702
+ disconnectedCallback() {
703
+ super.disconnectedCallback();
704
+ this.removeEventListener("click", __classPrivateFieldGet(this, _M3eStepElement_clickHandler, "f"));
705
+ }
706
+ /** @inheritdoc */
707
+ update(changedProperties) {
708
+ super.update(changedProperties);
709
+ if (changedProperties.has("selected")) {
710
+ this.closest("m3e-stepper")?.[selectionManager].notifySelectionChange(this);
399
711
  }
712
+ }
713
+ /** @inheritdoc */
714
+ firstUpdated(_changedProperties) {
715
+ super.firstUpdated(_changedProperties);
716
+ [this._focusRing, this._stateLayer, this._ripple].forEach(x => x?.attach(this));
717
+ }
718
+ /** @inheritdoc */
719
+ render() {
720
+ const hint = html`<slot name="hint">${this.optional ? html`<span class="hint">(Optional)</span>` : nothing}</slot>`;
721
+ const error = html`<slot name="error">${hint}</slot>`;
722
+ return html`<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="wrapper"><div class="icon" aria-hidden="true">${__classPrivateFieldGet(this, _M3eStepElement_instances, "m", _M3eStepElement_renderIcon).call(this)}</div><div class="label"><slot></slot>${this.invalid ? error : hint}</div></div>`;
723
+ }
400
724
  };
401
725
  _M3eStepElement_clickHandler = new WeakMap();
402
726
  _M3eStepElement_instances = new WeakSet();
403
727
  _M3eStepElement_renderIcon = function _M3eStepElement_renderIcon() {
404
- if (!this.selected) {
405
- if (this.invalid) {
406
- return html `<slot name="error-icon">
407
- <svg viewBox="0 -960 960 960" fill="currentColor">
408
- <path
409
- d="m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z"
410
- />
411
- </svg>
412
- </slot>`;
413
- }
414
- if (this.completed) {
415
- if (this.editable) {
416
- return html `<slot name="edit-icon">
417
- <svg viewBox="0 -960 960 960" fill="currentColor">
418
- <path
419
- d="M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z"
420
- />
421
- </svg>
422
- </slot>`;
423
- }
424
- return html `<slot name="done-icon">
425
- <svg viewBox="0 -960 960 960" fill="currentColor">
426
- <path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" />
427
- </svg>
428
- </slot>`;
429
- }
728
+ if (!this.selected) {
729
+ if (this.invalid) {
730
+ return html`<slot name="error-icon"><svg viewBox="0 -960 960 960" fill="currentColor"><path d="m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z"/></svg></slot>`;
430
731
  }
431
- return html `<slot name="icon">${this.index + 1}</slot>`;
732
+ if (this.completed) {
733
+ if (this.editable) {
734
+ return html`<slot name="edit-icon"><svg viewBox="0 -960 960 960" fill="currentColor"><path d="M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z"/></svg></slot>`;
735
+ }
736
+ return html`<slot name="done-icon"><svg viewBox="0 -960 960 960" fill="currentColor"><path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg></slot>`;
737
+ }
738
+ }
739
+ return html`<slot name="icon">${this.index + 1}</slot>`;
432
740
  };
433
741
  _M3eStepElement_handleClick = function _M3eStepElement_handleClick(e) {
434
- if (this.disabled) {
435
- e.preventDefault();
436
- e.stopImmediatePropagation();
437
- }
438
- if (e.defaultPrevented || this.selected)
439
- return;
440
- this.selected = true;
441
- if (this.dispatchEvent(new Event("input", { bubbles: true, composed: true, cancelable: true })) &&
442
- this.closest("m3e-stepper")?.moveTo(this.index)) {
443
- this.dispatchEvent(new Event("change", { bubbles: true }));
444
- }
445
- else {
446
- this.selected = false;
447
- }
742
+ if (this.disabled) {
743
+ e.preventDefault();
744
+ e.stopImmediatePropagation();
745
+ }
746
+ if (e.defaultPrevented || this.selected) return;
747
+ this.selected = true;
748
+ if (this.dispatchEvent(new Event("input", {
749
+ bubbles: true,
750
+ composed: true,
751
+ cancelable: true
752
+ })) && this.closest("m3e-stepper")?.moveTo(this.index)) {
753
+ this.dispatchEvent(new Event("change", {
754
+ bubbles: true
755
+ }));
756
+ } else {
757
+ this.selected = false;
758
+ }
448
759
  };
449
760
  /** The styles of the element. */
450
- M3eStepElement.styles = css `
451
- :host {
452
- display: block;
453
- position: relative;
454
- outline: none;
455
- min-width: 0px;
456
- border-radius: var(--m3e-step-shape, ${DesignToken.shape.corner.medium});
457
- padding: var(--m3e-step-padding, 1.5rem);
458
- user-select: none;
459
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
460
- }
461
- :host(:not([aria-disabled="true"])) {
462
- cursor: pointer;
463
- }
464
- .icon {
465
- flex: none;
466
- display: flex;
467
- align-items: center;
468
- justify-content: center;
469
- border-radius: var(--m3e-step-icon-shape, 50%);
470
- width: var(--m3e-step-icon-size, 1.5rem);
471
- height: var(--m3e-step-icon-size, 1.5rem);
472
- }
473
- .icon svg,
474
- ::slotted([slot="icon"]),
475
- ::slotted([slot="edit-icon"]),
476
- ::slotted([slot="done-icon"]),
477
- ::slotted([slot="error-icon"]) {
478
- width: 1em;
479
- font-size: var(--m3e-step-icon-size, 1.5rem) !important;
480
- }
481
- :host(:not([aria-disabled="true"])[selected]) .icon {
482
- background-color: var(--m3e-step-selected-icon-container-color, ${DesignToken.color.primary});
483
- color: var(--m3e-step-selected-icon-color, ${DesignToken.color.onPrimary});
484
- }
485
- :host(:not([aria-disabled="true"])[completed]:not([invalid])) .icon {
486
- background-color: var(--m3e-step-completed-icon-container-color, ${DesignToken.color.primary});
487
- color: var(--m3e-step-completed-icon-color, ${DesignToken.color.onPrimary});
488
- }
489
- :host(:not([aria-disabled="true"]):not([selected]):not([completed]):not([invalid])) .icon {
490
- background-color: var(--m3e-step-unselected-icon-container-color, ${DesignToken.color.inverseSurface});
491
- color: var(--m3e-step-unselected-icon-color, ${DesignToken.color.inverseOnSurface});
492
- }
493
- :host(:not([aria-disabled="true"]):not([selected])[invalid]) .icon {
494
- color: var(--m3e-step-icon-error-color, ${DesignToken.color.error});
495
- }
496
- :host([aria-disabled="true"]) .icon {
497
- background-color: color-mix(
498
- in srgb,
499
- var(--m3e-step-disabled-icon-container-color, ${DesignToken.color.onSurface}) 10%,
500
- transparent
501
- );
502
- color: color-mix(in srgb, var(--m3e-step-disabled-icon-color, ${DesignToken.color.onSurface}) 38%, transparent);
503
- }
504
-
505
- :host(:not([aria-disabled="true"])) .label {
506
- color: var(--m3e-step-label-color, ${DesignToken.color.onSurface});
507
- }
508
- :host(:not([aria-disabled="true"]):not([selected])[invalid]) .label {
509
- color: var(--m3e-step-label-error-color, ${DesignToken.color.error});
510
- }
511
- :host([aria-disabled="true"]) .label {
512
- color: color-mix(in srgb, var(--m3e-step-disabled-label-color, ${DesignToken.color.onSurface}) 38%, transparent);
513
- }
514
- .wrapper {
515
- display: flex;
516
- align-items: center;
517
- height: 100%;
518
- border-radius: inherit;
519
- font-size: var(--m3e-step-font-size, ${DesignToken.typescale.standard.title.small.fontSize});
520
- font-weight: var(--m3e-step-font-weight, ${DesignToken.typescale.standard.title.small.fontWeight});
521
- line-height: var(--m3e-step-line-height, ${DesignToken.typescale.standard.title.small.lineHeight});
522
- letter-spacing: var(--m3e-step-tracking, ${DesignToken.typescale.standard.title.small.tracking});
523
- flex-direction: var(--_step-direction, row);
524
- gap: var(--m3e-step-icon-label-space, 0.5rem);
525
- justify-content: flex-start;
526
- }
527
- .label {
528
- display: flex;
529
- flex-direction: column;
530
- align-items: var(--_step-label-align-items, flex-start);
531
- }
532
- ::slotted([slot="hint"]),
533
- .hint,
534
- ::slotted([slot="error"]) {
535
- font-size: var(--m3e-step-hint-font-size, ${DesignToken.typescale.standard.body.small.fontSize});
536
- font-weight: var(--m3e-step-hint-font-weight, ${DesignToken.typescale.standard.body.small.fontWeight});
537
- line-height: var(--m3e-step-hint-line-height, ${DesignToken.typescale.standard.body.small.lineHeight});
538
- letter-spacing: var(--m3e-step-hint-tracking, ${DesignToken.typescale.standard.body.small.tracking});
539
- }
540
- :host(:not([aria-disabled="true"]):not([invalid])) ::slotted([slot="hint"]),
541
- :host(:not([aria-disabled="true"]):not([invalid])) .hint {
542
- color: var(--m3e-step-hint-color, ${DesignToken.color.onSurfaceVariant});
543
- }
544
- :host([aria-disabled="true"]) ::slotted([slot="hint"]),
545
- :host([aria-disabled="true"]) .hint {
546
- color: color-mix(in srgb, var(--m3e-step-disabled-hint-color, ${DesignToken.color.onSurface}) 38%, transparent);
547
- }
548
- `;
549
- /** @private */ M3eStepElement.__nextId = 0;
550
- __decorate([
551
- e$1(".focus-ring")
552
- ], M3eStepElement.prototype, "_focusRing", void 0);
553
- __decorate([
554
- e$1(".state-layer")
555
- ], M3eStepElement.prototype, "_stateLayer", void 0);
556
- __decorate([
557
- e$1(".ripple")
558
- ], M3eStepElement.prototype, "_ripple", void 0);
559
- __decorate([
560
- n$1({ type: Boolean, reflect: true })
561
- ], M3eStepElement.prototype, "optional", void 0);
562
- __decorate([
563
- n$1({ type: Boolean, reflect: true })
564
- ], M3eStepElement.prototype, "editable", void 0);
565
- __decorate([
566
- n$1({ type: Boolean, reflect: true })
567
- ], M3eStepElement.prototype, "completed", void 0);
568
- __decorate([
569
- n$1({ type: Boolean, reflect: true })
570
- ], M3eStepElement.prototype, "invalid", void 0);
571
- __decorate([
572
- r$1()
573
- ], M3eStepElement.prototype, "index", void 0);
574
- M3eStepElement = M3eStepElement_1 = __decorate([
575
- t$2("m3e-step")
576
- ], M3eStepElement);
761
+ M3eStepElement.styles = css`:host { display: block; position: relative; outline: none; min-width: 0px; border-radius: var(--m3e-step-shape, ${DesignToken.shape.corner.medium}); padding: var(--m3e-step-padding, 1.5rem); user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) { cursor: pointer; } .icon { flex: none; display: flex; align-items: center; justify-content: center; border-radius: var(--m3e-step-icon-shape, 50%); width: var(--m3e-step-icon-size, 1.5rem); height: var(--m3e-step-icon-size, 1.5rem); } .icon svg, ::slotted([slot="icon"]), ::slotted([slot="edit-icon"]), ::slotted([slot="done-icon"]), ::slotted([slot="error-icon"]) { width: 1em; font-size: var(--m3e-step-icon-size, 1.5rem) !important; } :host(:not([aria-disabled="true"])[selected]) .icon { background-color: var(--m3e-step-selected-icon-container-color, ${DesignToken.color.primary}); color: var(--m3e-step-selected-icon-color, ${DesignToken.color.onPrimary}); } :host(:not([aria-disabled="true"])[completed]:not([invalid])) .icon { background-color: var(--m3e-step-completed-icon-container-color, ${DesignToken.color.primary}); color: var(--m3e-step-completed-icon-color, ${DesignToken.color.onPrimary}); } :host(:not([aria-disabled="true"]):not([selected]):not([completed]):not([invalid])) .icon { background-color: var(--m3e-step-unselected-icon-container-color, ${DesignToken.color.inverseSurface}); color: var(--m3e-step-unselected-icon-color, ${DesignToken.color.inverseOnSurface}); } :host(:not([aria-disabled="true"]):not([selected])[invalid]) .icon { color: var(--m3e-step-icon-error-color, ${DesignToken.color.error}); } :host([aria-disabled="true"]) .icon { background-color: color-mix( in srgb, var(--m3e-step-disabled-icon-container-color, ${DesignToken.color.onSurface}) 10%, transparent ); color: color-mix(in srgb, var(--m3e-step-disabled-icon-color, ${DesignToken.color.onSurface}) 38%, transparent); } :host(:not([aria-disabled="true"])) .label { color: var(--m3e-step-label-color, ${DesignToken.color.onSurface}); } :host(:not([aria-disabled="true"]):not([selected])[invalid]) .label { color: var(--m3e-step-label-error-color, ${DesignToken.color.error}); } :host([aria-disabled="true"]) .label { color: color-mix(in srgb, var(--m3e-step-disabled-label-color, ${DesignToken.color.onSurface}) 38%, transparent); } .wrapper { display: flex; align-items: center; height: 100%; border-radius: inherit; font-size: var(--m3e-step-font-size, ${DesignToken.typescale.standard.title.small.fontSize}); font-weight: var(--m3e-step-font-weight, ${DesignToken.typescale.standard.title.small.fontWeight}); line-height: var(--m3e-step-line-height, ${DesignToken.typescale.standard.title.small.lineHeight}); letter-spacing: var(--m3e-step-tracking, ${DesignToken.typescale.standard.title.small.tracking}); flex-direction: var(--_step-direction, row); gap: var(--m3e-step-icon-label-space, 0.5rem); justify-content: flex-start; } .label { display: flex; flex-direction: column; align-items: var(--_step-label-align-items, flex-start); } ::slotted([slot="hint"]), .hint, ::slotted([slot="error"]) { font-size: var(--m3e-step-hint-font-size, ${DesignToken.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-step-hint-font-weight, ${DesignToken.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-step-hint-line-height, ${DesignToken.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-step-hint-tracking, ${DesignToken.typescale.standard.body.small.tracking}); } :host(:not([aria-disabled="true"]):not([invalid])) ::slotted([slot="hint"]), :host(:not([aria-disabled="true"]):not([invalid])) .hint { color: var(--m3e-step-hint-color, ${DesignToken.color.onSurfaceVariant}); } :host([aria-disabled="true"]) ::slotted([slot="hint"]), :host([aria-disabled="true"]) .hint { color: color-mix(in srgb, var(--m3e-step-disabled-hint-color, ${DesignToken.color.onSurface}) 38%, transparent); }`;
762
+ /** @private */
763
+ M3eStepElement.__nextId = 0;
764
+ __decorate([e$1(".focus-ring")], M3eStepElement.prototype, "_focusRing", void 0);
765
+ __decorate([e$1(".state-layer")], M3eStepElement.prototype, "_stateLayer", void 0);
766
+ __decorate([e$1(".ripple")], M3eStepElement.prototype, "_ripple", void 0);
767
+ __decorate([n$1({
768
+ type: Boolean,
769
+ reflect: true
770
+ })], M3eStepElement.prototype, "optional", void 0);
771
+ __decorate([n$1({
772
+ type: Boolean,
773
+ reflect: true
774
+ })], M3eStepElement.prototype, "editable", void 0);
775
+ __decorate([n$1({
776
+ type: Boolean,
777
+ reflect: true
778
+ })], M3eStepElement.prototype, "completed", void 0);
779
+ __decorate([n$1({
780
+ type: Boolean,
781
+ reflect: true
782
+ })], M3eStepElement.prototype, "invalid", void 0);
783
+ __decorate([r$1()], M3eStepElement.prototype, "index", void 0);
784
+ M3eStepElement = M3eStepElement_1 = __decorate([t$2("m3e-step")], M3eStepElement);
577
785
 
578
786
  var _StepperButtonElementBase_instances, _StepperButtonElementBase_clickHandler, _StepperButtonElementBase_action, _StepperButtonElementBase_handleClick;
579
787
  /** A base implementation for a button used to move to a step in a stepper. This class must be inherited. */
580
788
  class StepperButtonElementBase extends AttachInternals(LitElement) {
581
- constructor(action) {
582
- super();
583
- _StepperButtonElementBase_instances.add(this);
584
- /** @private */ _StepperButtonElementBase_clickHandler.set(this, (e) => __classPrivateFieldGet(this, _StepperButtonElementBase_instances, "m", _StepperButtonElementBase_handleClick).call(this, e));
585
- /** @private */ _StepperButtonElementBase_action.set(this, void 0);
586
- __classPrivateFieldSet(this, _StepperButtonElementBase_action, action, "f");
587
- }
588
- /** @inheritdoc */
589
- connectedCallback() {
590
- super.connectedCallback();
591
- this.parentElement?.addEventListener("click", __classPrivateFieldGet(this, _StepperButtonElementBase_clickHandler, "f"));
592
- }
593
- /** @inheritdoc */
594
- disconnectedCallback() {
595
- super.disconnectedCallback();
596
- this.parentElement?.removeEventListener("click", __classPrivateFieldGet(this, _StepperButtonElementBase_clickHandler, "f"));
597
- }
598
- /** @inheritdoc */
599
- render() {
600
- return html `<slot></slot>`;
601
- }
789
+ constructor(action) {
790
+ super();
791
+ _StepperButtonElementBase_instances.add(this);
792
+ /** @private */
793
+ _StepperButtonElementBase_clickHandler.set(this, e => __classPrivateFieldGet(this, _StepperButtonElementBase_instances, "m", _StepperButtonElementBase_handleClick).call(this, e));
794
+ /** @private */
795
+ _StepperButtonElementBase_action.set(this, void 0);
796
+ __classPrivateFieldSet(this, _StepperButtonElementBase_action, action, "f");
797
+ }
798
+ /** @inheritdoc */
799
+ connectedCallback() {
800
+ super.connectedCallback();
801
+ this.parentElement?.addEventListener("click", __classPrivateFieldGet(this, _StepperButtonElementBase_clickHandler, "f"));
802
+ }
803
+ /** @inheritdoc */
804
+ disconnectedCallback() {
805
+ super.disconnectedCallback();
806
+ this.parentElement?.removeEventListener("click", __classPrivateFieldGet(this, _StepperButtonElementBase_clickHandler, "f"));
807
+ }
808
+ /** @inheritdoc */
809
+ render() {
810
+ return html`<slot></slot>`;
811
+ }
602
812
  }
603
813
  _StepperButtonElementBase_clickHandler = new WeakMap(), _StepperButtonElementBase_action = new WeakMap(), _StepperButtonElementBase_instances = new WeakSet(), _StepperButtonElementBase_handleClick = function _StepperButtonElementBase_handleClick(e) {
604
- if (!e.defaultPrevented) {
605
- switch (__classPrivateFieldGet(this, _StepperButtonElementBase_action, "f")) {
606
- case "next":
607
- this.closest("m3e-stepper")?.moveNext();
608
- break;
609
- case "previous":
610
- this.closest("m3e-stepper")?.movePrevious();
611
- break;
612
- case "reset":
613
- this.closest("m3e-stepper")?.reset();
614
- break;
615
- }
814
+ if (!e.defaultPrevented) {
815
+ switch (__classPrivateFieldGet(this, _StepperButtonElementBase_action, "f")) {
816
+ case "next":
817
+ this.closest("m3e-stepper")?.moveNext();
818
+ break;
819
+ case "previous":
820
+ this.closest("m3e-stepper")?.movePrevious();
821
+ break;
822
+ case "reset":
823
+ this.closest("m3e-stepper")?.reset();
824
+ break;
616
825
  }
826
+ }
617
827
  };
618
828
  /** The styles of the element. */
619
- StepperButtonElementBase.styles = css `
620
- :host {
621
- display: contents;
622
- }
623
- ::slotted(.material-icons) {
624
- font-size: inherit !important;
625
- }
626
- `;
829
+ StepperButtonElementBase.styles = css`:host { display: contents; } ::slotted(.material-icons) { font-size: inherit !important; }`;
627
830
 
628
831
  /**
629
832
  * @license
630
833
  * Copyright 2017 Google LLC
631
834
  * SPDX-License-Identifier: BSD-3-Clause
632
835
  */
633
- const t=globalThis,i=t.trustedTypes,s=i?i.createPolicy("lit-html",{createHTML:t=>t}):void 0,e="$lit$",h=`lit$${Math.random().toFixed(9).slice(2)}$`,o$1="?"+h,n=`<${o$1}>`,r=document,l=()=>r.createComment(""),c=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a=Array.isArray,u=t=>a(t)||"function"==typeof t?.[Symbol.iterator],d="[ \t\n\f\r]",f=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v=/-->/g,_=/>/g,m=RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p=/'/g,g=/"/g,$=/^(?:script|style|textarea|title)$/i,T=Symbol.for("lit-noChange"),E=Symbol.for("lit-nothing"),A=new WeakMap,C=r.createTreeWalker(r,129);function P(t,i){if(!a(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s?s.createHTML(i):i}const V=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"<svg>":3===i?"<math>":"",c=f;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,y=0;for(;y<s.length&&(c.lastIndex=y,u=c.exec(s),null!==u);)y=c.lastIndex,c===f?"!--"===u[1]?c=v:void 0!==u[1]?c=_:void 0!==u[2]?($.test(u[2])&&(r=RegExp("</"+u[2],"g")),c=m):void 0!==u[3]&&(c=m):c===m?">"===u[0]?(c=r??f,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m:'"'===u[3]?g:p):c===g||c===p?c=m:c===v||c===_?c=f:(c=m,r=void 0);const x=c===m&&t[i+1].startsWith("/>")?" ":"";l+=c===f?s+n:d>=0?(o.push(a),s.slice(0,d)+e+s.slice(d)+h+x):s+h+(-2===d?i:x);}return [P(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),o]};class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V(t,s);if(this.el=N.createElement(f,n),C.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(e)){const i=v[a++],s=r.getAttribute(t).split(h),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:c,name:e[2],strings:s,ctor:"."===e[1]?H:"?"===e[1]?I:"@"===e[1]?L:k}),r.removeAttribute(t);}else t.startsWith(h)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($.test(r.tagName)){const t=r.textContent.split(h),s=t.length-1;if(s>0){r.textContent=i?i.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l()),C.nextNode(),d.push({type:2,index:++c});r.append(t[s],l());}}}else if(8===r.nodeType)if(r.data===o$1)d.push({type:2,index:c});else {let t=-1;for(;-1!==(t=r.data.indexOf(h,t+1));)d.push({type:7,index:c}),t+=h.length-1;}c++;}}static createElement(t,i){const s=r.createElement("template");return s.innerHTML=t,s}}function S(t,i,s=t,e){if(i===T)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=c(i)?void 0:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(false),void 0===o?h=void 0:(h=new o(t),h._$AT(t,s,e)),void 0!==e?(s._$Co??=[])[e]=h:s._$Cl=h),void 0!==h&&(i=S(t,h._$AS(t,i.values),h,e)),i}class M{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:i},parts:s}=this._$AD,e=(t?.creationScope??r).importNode(i,true);C.currentNode=e;let h=C.nextNode(),o=0,n=0,l=s[0];for(;void 0!==l;){if(o===l.index){let i;2===l.type?i=new R(h,h.nextSibling,this,t):1===l.type?i=new l.ctor(h,l.name,l.strings,this,t):6===l.type&&(i=new z(h,this,t)),this._$AV.push(i),l=s[++n];}o!==l?.index&&(h=C.nextNode(),o++);}return C.currentNode=r,e}p(t){let i=0;for(const s of this._$AV) void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}class R{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=E,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cv=e?.isConnected??true;}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=S(this,t,i),c(t)?t===E||null==t||""===t?(this._$AH!==E&&this._$AR(),this._$AH=E):t!==this._$AH&&t!==T&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):u(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==E&&c(this._$AH)?this._$AA.nextSibling.data=t:this.T(r.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=N.createElement(P(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new M(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=A.get(t.strings);return void 0===i&&A.set(t.strings,i=new N(t)),i}k(t){a(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new R(this.O(l()),this.O(l()),this,this.options)):s=i[e],s._$AI(h),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){for(this._$AP?.(false,true,i);t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){ void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}}class k{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=E,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=h,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=E;}_$AI(t,i=this,s,e){const h=this.strings;let o=false;if(void 0===h)t=S(this,t,i,0),o=!c(t)||t!==this._$AH&&t!==T,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=S(this,e[s+n],i,n),r===T&&(r=this._$AH[n]),o||=!c(r)||r!==this._$AH[n],r===E?t=E:t!==E&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===E?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}}class H extends k{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===E?void 0:t;}}class I extends k{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==E);}}class L extends k{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=S(this,t,i,0)??E)===T)return;const s=this._$AH,e=t===E&&s!==E||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==E&&(s===E||e);e&&this.element.removeEventListener(this.name,this,s),h&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t);}}class z{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){S(this,t);}}const j=t.litHtmlPolyfillSupport;j?.(N,R),(t.litHtmlVersions??=[]).push("3.3.1");
836
+ const t = globalThis,
837
+ i = t.trustedTypes,
838
+ s = i ? i.createPolicy("lit-html", {
839
+ createHTML: t => t
840
+ }) : void 0,
841
+ e = "$lit$",
842
+ h = `lit$${Math.random().toFixed(9).slice(2)}$`,
843
+ o$1 = "?" + h,
844
+ n = `<${o$1}>`,
845
+ r = document,
846
+ l = () => r.createComment(""),
847
+ c = t => null === t || "object" != typeof t && "function" != typeof t,
848
+ a = Array.isArray,
849
+ u = t => a(t) || "function" == typeof t?.[Symbol.iterator],
850
+ d = "[ \t\n\f\r]",
851
+ f = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,
852
+ v = /-->/g,
853
+ _ = />/g,
854
+ m = RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`, "g"),
855
+ p = /'/g,
856
+ g = /"/g,
857
+ $ = /^(?:script|style|textarea|title)$/i,
858
+ T = Symbol.for("lit-noChange"),
859
+ E = Symbol.for("lit-nothing"),
860
+ A = new WeakMap(),
861
+ C = r.createTreeWalker(r, 129);
862
+ function P(t, i) {
863
+ if (!a(t) || !t.hasOwnProperty("raw")) throw Error("invalid template strings array");
864
+ return void 0 !== s ? s.createHTML(i) : i;
865
+ }
866
+ const V = (t, i) => {
867
+ const s = t.length - 1,
868
+ o = [];
869
+ let r,
870
+ l = 2 === i ? "<svg>" : 3 === i ? "<math>" : "",
871
+ c = f;
872
+ for (let i = 0; i < s; i++) {
873
+ const s = t[i];
874
+ let a,
875
+ u,
876
+ d = -1,
877
+ y = 0;
878
+ for (; y < s.length && (c.lastIndex = y, u = c.exec(s), null !== u);) y = c.lastIndex, c === f ? "!--" === u[1] ? c = v : void 0 !== u[1] ? c = _ : void 0 !== u[2] ? ($.test(u[2]) && (r = RegExp("</" + u[2], "g")), c = m) : void 0 !== u[3] && (c = m) : c === m ? ">" === u[0] ? (c = r ?? f, d = -1) : void 0 === u[1] ? d = -2 : (d = c.lastIndex - u[2].length, a = u[1], c = void 0 === u[3] ? m : '"' === u[3] ? g : p) : c === g || c === p ? c = m : c === v || c === _ ? c = f : (c = m, r = void 0);
879
+ const x = c === m && t[i + 1].startsWith("/>") ? " " : "";
880
+ l += c === f ? s + n : d >= 0 ? (o.push(a), s.slice(0, d) + e + s.slice(d) + h + x) : s + h + (-2 === d ? i : x);
881
+ }
882
+ return [P(t, l + (t[s] || "<?>") + (2 === i ? "</svg>" : 3 === i ? "</math>" : "")), o];
883
+ };
884
+ class N {
885
+ constructor({
886
+ strings: t,
887
+ _$litType$: s
888
+ }, n) {
889
+ let r;
890
+ this.parts = [];
891
+ let c = 0,
892
+ a = 0;
893
+ const u = t.length - 1,
894
+ d = this.parts,
895
+ [f, v] = V(t, s);
896
+ if (this.el = N.createElement(f, n), C.currentNode = this.el.content, 2 === s || 3 === s) {
897
+ const t = this.el.content.firstChild;
898
+ t.replaceWith(...t.childNodes);
899
+ }
900
+ for (; null !== (r = C.nextNode()) && d.length < u;) {
901
+ if (1 === r.nodeType) {
902
+ if (r.hasAttributes()) for (const t of r.getAttributeNames()) if (t.endsWith(e)) {
903
+ const i = v[a++],
904
+ s = r.getAttribute(t).split(h),
905
+ e = /([.?@])?(.*)/.exec(i);
906
+ d.push({
907
+ type: 1,
908
+ index: c,
909
+ name: e[2],
910
+ strings: s,
911
+ ctor: "." === e[1] ? H : "?" === e[1] ? I : "@" === e[1] ? L : k
912
+ }), r.removeAttribute(t);
913
+ } else t.startsWith(h) && (d.push({
914
+ type: 6,
915
+ index: c
916
+ }), r.removeAttribute(t));
917
+ if ($.test(r.tagName)) {
918
+ const t = r.textContent.split(h),
919
+ s = t.length - 1;
920
+ if (s > 0) {
921
+ r.textContent = i ? i.emptyScript : "";
922
+ for (let i = 0; i < s; i++) r.append(t[i], l()), C.nextNode(), d.push({
923
+ type: 2,
924
+ index: ++c
925
+ });
926
+ r.append(t[s], l());
927
+ }
928
+ }
929
+ } else if (8 === r.nodeType) if (r.data === o$1) d.push({
930
+ type: 2,
931
+ index: c
932
+ });else {
933
+ let t = -1;
934
+ for (; -1 !== (t = r.data.indexOf(h, t + 1));) d.push({
935
+ type: 7,
936
+ index: c
937
+ }), t += h.length - 1;
938
+ }
939
+ c++;
940
+ }
941
+ }
942
+ static createElement(t, i) {
943
+ const s = r.createElement("template");
944
+ return s.innerHTML = t, s;
945
+ }
946
+ }
947
+ function S(t, i, s = t, e) {
948
+ if (i === T) return i;
949
+ let h = void 0 !== e ? s._$Co?.[e] : s._$Cl;
950
+ const o = c(i) ? void 0 : i._$litDirective$;
951
+ return h?.constructor !== o && (h?._$AO?.(false), void 0 === o ? h = void 0 : (h = new o(t), h._$AT(t, s, e)), void 0 !== e ? (s._$Co ??= [])[e] = h : s._$Cl = h), void 0 !== h && (i = S(t, h._$AS(t, i.values), h, e)), i;
952
+ }
953
+ class M {
954
+ constructor(t, i) {
955
+ this._$AV = [], this._$AN = void 0, this._$AD = t, this._$AM = i;
956
+ }
957
+ get parentNode() {
958
+ return this._$AM.parentNode;
959
+ }
960
+ get _$AU() {
961
+ return this._$AM._$AU;
962
+ }
963
+ u(t) {
964
+ const {
965
+ el: {
966
+ content: i
967
+ },
968
+ parts: s
969
+ } = this._$AD,
970
+ e = (t?.creationScope ?? r).importNode(i, true);
971
+ C.currentNode = e;
972
+ let h = C.nextNode(),
973
+ o = 0,
974
+ n = 0,
975
+ l = s[0];
976
+ for (; void 0 !== l;) {
977
+ if (o === l.index) {
978
+ let i;
979
+ 2 === l.type ? i = new R(h, h.nextSibling, this, t) : 1 === l.type ? i = new l.ctor(h, l.name, l.strings, this, t) : 6 === l.type && (i = new z(h, this, t)), this._$AV.push(i), l = s[++n];
980
+ }
981
+ o !== l?.index && (h = C.nextNode(), o++);
982
+ }
983
+ return C.currentNode = r, e;
984
+ }
985
+ p(t) {
986
+ let i = 0;
987
+ for (const s of this._$AV) void 0 !== s && (void 0 !== s.strings ? (s._$AI(t, s, i), i += s.strings.length - 2) : s._$AI(t[i])), i++;
988
+ }
989
+ }
990
+ class R {
991
+ get _$AU() {
992
+ return this._$AM?._$AU ?? this._$Cv;
993
+ }
994
+ constructor(t, i, s, e) {
995
+ this.type = 2, this._$AH = E, this._$AN = void 0, this._$AA = t, this._$AB = i, this._$AM = s, this.options = e, this._$Cv = e?.isConnected ?? true;
996
+ }
997
+ get parentNode() {
998
+ let t = this._$AA.parentNode;
999
+ const i = this._$AM;
1000
+ return void 0 !== i && 11 === t?.nodeType && (t = i.parentNode), t;
1001
+ }
1002
+ get startNode() {
1003
+ return this._$AA;
1004
+ }
1005
+ get endNode() {
1006
+ return this._$AB;
1007
+ }
1008
+ _$AI(t, i = this) {
1009
+ t = S(this, t, i), c(t) ? t === E || null == t || "" === t ? (this._$AH !== E && this._$AR(), this._$AH = E) : t !== this._$AH && t !== T && this._(t) : void 0 !== t._$litType$ ? this.$(t) : void 0 !== t.nodeType ? this.T(t) : u(t) ? this.k(t) : this._(t);
1010
+ }
1011
+ O(t) {
1012
+ return this._$AA.parentNode.insertBefore(t, this._$AB);
1013
+ }
1014
+ T(t) {
1015
+ this._$AH !== t && (this._$AR(), this._$AH = this.O(t));
1016
+ }
1017
+ _(t) {
1018
+ this._$AH !== E && c(this._$AH) ? this._$AA.nextSibling.data = t : this.T(r.createTextNode(t)), this._$AH = t;
1019
+ }
1020
+ $(t) {
1021
+ const {
1022
+ values: i,
1023
+ _$litType$: s
1024
+ } = t,
1025
+ e = "number" == typeof s ? this._$AC(t) : (void 0 === s.el && (s.el = N.createElement(P(s.h, s.h[0]), this.options)), s);
1026
+ if (this._$AH?._$AD === e) this._$AH.p(i);else {
1027
+ const t = new M(e, this),
1028
+ s = t.u(this.options);
1029
+ t.p(i), this.T(s), this._$AH = t;
1030
+ }
1031
+ }
1032
+ _$AC(t) {
1033
+ let i = A.get(t.strings);
1034
+ return void 0 === i && A.set(t.strings, i = new N(t)), i;
1035
+ }
1036
+ k(t) {
1037
+ a(this._$AH) || (this._$AH = [], this._$AR());
1038
+ const i = this._$AH;
1039
+ let s,
1040
+ e = 0;
1041
+ for (const h of t) e === i.length ? i.push(s = new R(this.O(l()), this.O(l()), this, this.options)) : s = i[e], s._$AI(h), e++;
1042
+ e < i.length && (this._$AR(s && s._$AB.nextSibling, e), i.length = e);
1043
+ }
1044
+ _$AR(t = this._$AA.nextSibling, i) {
1045
+ for (this._$AP?.(false, true, i); t !== this._$AB;) {
1046
+ const i = t.nextSibling;
1047
+ t.remove(), t = i;
1048
+ }
1049
+ }
1050
+ setConnected(t) {
1051
+ void 0 === this._$AM && (this._$Cv = t, this._$AP?.(t));
1052
+ }
1053
+ }
1054
+ class k {
1055
+ get tagName() {
1056
+ return this.element.tagName;
1057
+ }
1058
+ get _$AU() {
1059
+ return this._$AM._$AU;
1060
+ }
1061
+ constructor(t, i, s, e, h) {
1062
+ this.type = 1, this._$AH = E, this._$AN = void 0, this.element = t, this.name = i, this._$AM = e, this.options = h, s.length > 2 || "" !== s[0] || "" !== s[1] ? (this._$AH = Array(s.length - 1).fill(new String()), this.strings = s) : this._$AH = E;
1063
+ }
1064
+ _$AI(t, i = this, s, e) {
1065
+ const h = this.strings;
1066
+ let o = false;
1067
+ if (void 0 === h) t = S(this, t, i, 0), o = !c(t) || t !== this._$AH && t !== T, o && (this._$AH = t);else {
1068
+ const e = t;
1069
+ let n, r;
1070
+ for (t = h[0], n = 0; n < h.length - 1; n++) r = S(this, e[s + n], i, n), r === T && (r = this._$AH[n]), o ||= !c(r) || r !== this._$AH[n], r === E ? t = E : t !== E && (t += (r ?? "") + h[n + 1]), this._$AH[n] = r;
1071
+ }
1072
+ o && !e && this.j(t);
1073
+ }
1074
+ j(t) {
1075
+ t === E ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
1076
+ }
1077
+ }
1078
+ class H extends k {
1079
+ constructor() {
1080
+ super(...arguments), this.type = 3;
1081
+ }
1082
+ j(t) {
1083
+ this.element[this.name] = t === E ? void 0 : t;
1084
+ }
1085
+ }
1086
+ class I extends k {
1087
+ constructor() {
1088
+ super(...arguments), this.type = 4;
1089
+ }
1090
+ j(t) {
1091
+ this.element.toggleAttribute(this.name, !!t && t !== E);
1092
+ }
1093
+ }
1094
+ class L extends k {
1095
+ constructor(t, i, s, e, h) {
1096
+ super(t, i, s, e, h), this.type = 5;
1097
+ }
1098
+ _$AI(t, i = this) {
1099
+ if ((t = S(this, t, i, 0) ?? E) === T) return;
1100
+ const s = this._$AH,
1101
+ e = t === E && s !== E || t.capture !== s.capture || t.once !== s.once || t.passive !== s.passive,
1102
+ h = t !== E && (s === E || e);
1103
+ e && this.element.removeEventListener(this.name, this, s), h && this.element.addEventListener(this.name, this, t), this._$AH = t;
1104
+ }
1105
+ handleEvent(t) {
1106
+ "function" == typeof this._$AH ? this._$AH.call(this.options?.host ?? this.element, t) : this._$AH.handleEvent(t);
1107
+ }
1108
+ }
1109
+ class z {
1110
+ constructor(t, i, s) {
1111
+ this.element = t, this.type = 6, this._$AN = void 0, this._$AM = i, this.options = s;
1112
+ }
1113
+ get _$AU() {
1114
+ return this._$AM._$AU;
1115
+ }
1116
+ _$AI(t) {
1117
+ S(this, t);
1118
+ }
1119
+ }
1120
+ const j = t.litHtmlPolyfillSupport;
1121
+ j?.(N, R), (t.litHtmlVersions ??= []).push("3.3.1");
634
1122
 
635
1123
  /**
636
1124
  * @license
637
1125
  * Copyright 2018 Google LLC
638
1126
  * SPDX-License-Identifier: BSD-3-Clause
639
- */const o=o=>o??E;
1127
+ */
1128
+ const o = o => o ?? E;
640
1129
 
641
1130
  var _M3eStepperElement_instances, _M3eStepperElement_breakpointUnobserve, _M3eStepperElement_renderHeader, _M3eStepperElement_handleChange, _M3eStepperElement_handleSlotChange, _M3eStepperElement_handleKeyDown, _M3eStepperElement_handleSelectedChange, _M3eStepperElement_checkValidity, _M3eStepperElement_updateDisplayOrder, _a;
642
1131
  /**
@@ -705,404 +1194,271 @@ var _M3eStepperElement_instances, _M3eStepperElement_breakpointUnobserve, _M3eSt
705
1194
  * @cssprop --m3e-step-divider-inset - Inset offset for divider alignment within step layout.
706
1195
  */
707
1196
  let M3eStepperElement = class M3eStepperElement extends AttachInternals(LitElement) {
708
- constructor() {
709
- super(...arguments);
710
- _M3eStepperElement_instances.add(this);
711
- /** @private */ _M3eStepperElement_breakpointUnobserve.set(this, void 0);
712
- /** @private */ this._selectedIndex = null;
713
- /** @internal */ this[_a] = new SelectionManager()
714
- .withHomeAndEnd()
715
- .withWrap()
716
- .onSelectedItemsChange(() => __classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_handleSelectedChange).call(this));
717
- /**
718
- * The position of the step header, when oriented horizontally.
719
- * @default "above"
720
- */
721
- this.headerPosition = "above";
722
- /**
723
- * The position of the step labels, when oriented horizontally.
724
- * @default "end"
725
- */
726
- this.labelPosition = "end";
727
- /**
728
- * Whether the validity of previous steps should be checked or not.
729
- * @default false
730
- */
731
- this.linear = false;
732
- /**
733
- * The orientation of the stepper.
734
- * @default "horizontal"
735
- */
736
- this.orientation = "horizontal";
737
- }
738
- /** The steps. */
739
- get steps() {
740
- return this[selectionManager]?.items ?? [];
741
- }
742
- /** The selected step. */
743
- get selectedStep() {
744
- return this._selectedIndex !== null ? (this.steps[this._selectedIndex] ?? null) : null;
745
- }
746
- /** The zero-based index of the selected step. */
747
- get selectedIndex() {
748
- return this._selectedIndex ?? -1;
749
- }
1197
+ constructor() {
1198
+ super(...arguments);
1199
+ _M3eStepperElement_instances.add(this);
1200
+ /** @private */
1201
+ _M3eStepperElement_breakpointUnobserve.set(this, void 0);
1202
+ /** @private */
1203
+ this._selectedIndex = null;
1204
+ /** @internal */
1205
+ this[_a] = new SelectionManager().withHomeAndEnd().withWrap().onSelectedItemsChange(() => __classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_handleSelectedChange).call(this));
750
1206
  /**
751
- * Moves the stepper to the previous step.
752
- * @returns {boolean} Whether the stepper moved to the previous step.
1207
+ * The position of the step header, when oriented horizontally.
1208
+ * @default "above"
753
1209
  */
754
- movePrevious() {
755
- return this.moveTo((this._selectedIndex ?? 1) - 1);
756
- }
1210
+ this.headerPosition = "above";
757
1211
  /**
758
- * Moves the stepper to the next step.
759
- * @returns {boolean} Whether the stepper moved to the next step.
1212
+ * The position of the step labels, when oriented horizontally.
1213
+ * @default "end"
760
1214
  */
761
- moveNext() {
762
- return this.moveTo((this._selectedIndex ?? -1) + 1);
763
- }
1215
+ this.labelPosition = "end";
764
1216
  /**
765
- * Moves the stepper to the step with the specified index.
766
- * @param index The zero-based index of the step to which to move.
767
- * @returns {boolean} Whether the stepper moved to the specified `index`.
1217
+ * Whether the validity of previous steps should be checked or not.
1218
+ * @default false
768
1219
  */
769
- moveTo(index) {
770
- const selectedStep = this.selectedStep;
771
- if (selectedStep && selectedStep.index === index) {
772
- return true;
773
- }
774
- if (this.steps[index]?.disabled) {
775
- return false;
776
- }
777
- if (index >= 0 && index < this.steps.length) {
778
- if (selectedStep) {
779
- const valid = __classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_checkValidity).call(this);
780
- if (this.linear) {
781
- if (index < selectedStep.index) {
782
- const previousStep = this[selectionManager].items[index];
783
- if (!previousStep || (previousStep.completed && !previousStep.editable)) {
784
- return false;
785
- }
786
- }
787
- else if (index > selectedStep.index + 1) {
788
- const nextStep = this[selectionManager].items[index];
789
- if (!nextStep || !nextStep.completed) {
790
- return false;
791
- }
792
- }
793
- else if (!valid && !selectedStep.optional) {
794
- return false;
795
- }
796
- }
797
- selectedStep.completed = true;
1220
+ this.linear = false;
1221
+ /**
1222
+ * The orientation of the stepper.
1223
+ * @default "horizontal"
1224
+ */
1225
+ this.orientation = "horizontal";
1226
+ }
1227
+ /** The steps. */
1228
+ get steps() {
1229
+ return this[selectionManager]?.items ?? [];
1230
+ }
1231
+ /** The selected step. */
1232
+ get selectedStep() {
1233
+ return this._selectedIndex !== null ? this.steps[this._selectedIndex] ?? null : null;
1234
+ }
1235
+ /** The zero-based index of the selected step. */
1236
+ get selectedIndex() {
1237
+ return this._selectedIndex ?? -1;
1238
+ }
1239
+ /**
1240
+ * Moves the stepper to the previous step.
1241
+ * @returns {boolean} Whether the stepper moved to the previous step.
1242
+ */
1243
+ movePrevious() {
1244
+ return this.moveTo((this._selectedIndex ?? 1) - 1);
1245
+ }
1246
+ /**
1247
+ * Moves the stepper to the next step.
1248
+ * @returns {boolean} Whether the stepper moved to the next step.
1249
+ */
1250
+ moveNext() {
1251
+ return this.moveTo((this._selectedIndex ?? -1) + 1);
1252
+ }
1253
+ /**
1254
+ * Moves the stepper to the step with the specified index.
1255
+ * @param index The zero-based index of the step to which to move.
1256
+ * @returns {boolean} Whether the stepper moved to the specified `index`.
1257
+ */
1258
+ moveTo(index) {
1259
+ const selectedStep = this.selectedStep;
1260
+ if (selectedStep && selectedStep.index === index) {
1261
+ return true;
1262
+ }
1263
+ if (this.steps[index]?.disabled) {
1264
+ return false;
1265
+ }
1266
+ if (index >= 0 && index < this.steps.length) {
1267
+ if (selectedStep) {
1268
+ const valid = __classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_checkValidity).call(this);
1269
+ if (this.linear) {
1270
+ if (index < selectedStep.index) {
1271
+ const previousStep = this[selectionManager].items[index];
1272
+ if (!previousStep || previousStep.completed && !previousStep.editable) {
1273
+ return false;
798
1274
  }
799
- this._selectedIndex = index;
800
- this[selectionManager].select(this.selectedStep);
801
- this.dispatchEvent(new Event("change", { bubbles: true }));
802
- return true;
803
- }
804
- else {
805
- if (selectedStep) {
806
- this[selectionManager].deselect(selectedStep);
807
- this.dispatchEvent(new Event("change", { bubbles: true }));
1275
+ } else if (index > selectedStep.index + 1) {
1276
+ const nextStep = this[selectionManager].items[index];
1277
+ if (!nextStep || !nextStep.completed) {
1278
+ return false;
808
1279
  }
1280
+ } else if (!valid && !selectedStep.optional) {
809
1281
  return false;
1282
+ }
810
1283
  }
1284
+ selectedStep.completed = true;
1285
+ }
1286
+ this._selectedIndex = index;
1287
+ this[selectionManager].select(this.selectedStep);
1288
+ this.dispatchEvent(new Event("change", {
1289
+ bubbles: true
1290
+ }));
1291
+ return true;
1292
+ } else {
1293
+ if (selectedStep) {
1294
+ this[selectionManager].deselect(selectedStep);
1295
+ this.dispatchEvent(new Event("change", {
1296
+ bubbles: true
1297
+ }));
1298
+ }
1299
+ return false;
811
1300
  }
812
- /** Resets the stepper to its initial state, clearing any form data. */
813
- reset() {
814
- this.steps.forEach((x) => x.reset());
815
- const firstStep = this.steps.find((x) => !x.disabled);
816
- if (firstStep) {
817
- this.moveTo(this.steps.indexOf(firstStep));
818
- }
819
- else {
820
- this.moveTo(-1);
821
- }
1301
+ }
1302
+ /** Resets the stepper to its initial state, clearing any form data. */
1303
+ reset() {
1304
+ this.steps.forEach(x => x.reset());
1305
+ const firstStep = this.steps.find(x => !x.disabled);
1306
+ if (firstStep) {
1307
+ this.moveTo(this.steps.indexOf(firstStep));
1308
+ } else {
1309
+ this.moveTo(-1);
822
1310
  }
823
- /** @inheritdoc */
824
- connectedCallback() {
825
- super.connectedCallback();
826
- this.classList.toggle("-no-animate", true);
1311
+ }
1312
+ /** @inheritdoc */
1313
+ connectedCallback() {
1314
+ super.connectedCallback();
1315
+ this.classList.toggle("-no-animate", true);
1316
+ }
1317
+ /** @inheritdoc */
1318
+ disconnectedCallback() {
1319
+ super.disconnectedCallback();
1320
+ this._orientation = undefined;
1321
+ __classPrivateFieldGet(this, _M3eStepperElement_breakpointUnobserve, "f")?.call(this);
1322
+ }
1323
+ /** @inheritdoc */
1324
+ update(changedProperties) {
1325
+ super.update(changedProperties);
1326
+ if (changedProperties.has("orientation")) {
1327
+ __classPrivateFieldGet(this, _M3eStepperElement_breakpointUnobserve, "f")?.call(this);
1328
+ if (this.orientation === "auto") {
1329
+ __classPrivateFieldSet(this, _M3eStepperElement_breakpointUnobserve, M3eBreakpointObserver.observe([Breakpoint.XSmall], matches => {
1330
+ this._orientation = matches.get(Breakpoint.XSmall) ? "vertical" : "horizontal";
1331
+ __classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_updateDisplayOrder).call(this);
1332
+ }), "f");
1333
+ } else {
1334
+ __classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_updateDisplayOrder).call(this);
1335
+ }
827
1336
  }
828
- /** @inheritdoc */
829
- disconnectedCallback() {
830
- super.disconnectedCallback();
831
- this._orientation = undefined;
832
- __classPrivateFieldGet(this, _M3eStepperElement_breakpointUnobserve, "f")?.call(this);
1337
+ if (changedProperties.has("_orientation")) {
1338
+ __classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_updateDisplayOrder).call(this);
833
1339
  }
834
- /** @inheritdoc */
835
- update(changedProperties) {
836
- super.update(changedProperties);
837
- if (changedProperties.has("orientation")) {
838
- __classPrivateFieldGet(this, _M3eStepperElement_breakpointUnobserve, "f")?.call(this);
839
- if (this.orientation === "auto") {
840
- __classPrivateFieldSet(this, _M3eStepperElement_breakpointUnobserve, M3eBreakpointObserver.observe([Breakpoint.XSmall], (matches) => {
841
- this._orientation = matches.get(Breakpoint.XSmall) ? "vertical" : "horizontal";
842
- __classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_updateDisplayOrder).call(this);
843
- }), "f");
844
- }
845
- else {
846
- __classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_updateDisplayOrder).call(this);
847
- }
848
- }
849
- if (changedProperties.has("_orientation")) {
850
- __classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_updateDisplayOrder).call(this);
851
- }
1340
+ }
1341
+ /** @inheritdoc */
1342
+ render() {
1343
+ let panelIndex;
1344
+ if (this.selectedStep?.panel) {
1345
+ panelIndex = [...this.querySelectorAll("[slot='panel']")].indexOf(this.selectedStep.panel);
1346
+ if (panelIndex === -1) {
1347
+ panelIndex = undefined;
1348
+ }
852
1349
  }
853
- /** @inheritdoc */
854
- render() {
855
- let panelIndex = null;
856
- if (this.selectedStep?.panel) {
857
- panelIndex = [...this.querySelectorAll("[slot='panel']")].indexOf(this.selectedStep.panel);
858
- if (panelIndex === -1) {
859
- panelIndex = null;
860
- }
861
- }
862
- if (!this[selectionManager].vertical) {
863
- return html `${this.headerPosition === "above" ? __classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_renderHeader).call(this) : nothing}
864
- <m3e-slide class="steps" .selectedIndex="${panelIndex}">
865
- <slot name="panel"></slot>
866
- </m3e-slide>
867
- ${this.headerPosition === "below" ? __classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_renderHeader).call(this) : nothing}`;
868
- }
869
- return html `${__classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_renderHeader).call(this)} <slot name="panel"></slot>`;
1350
+ if (!this[selectionManager].vertical) {
1351
+ return html`${this.headerPosition === "above" ? __classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_renderHeader).call(this) : nothing}<m3e-slide class="steps" selected-index="${o(panelIndex)}"><slot name="panel"></slot></m3e-slide>${this.headerPosition === "below" ? __classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_renderHeader).call(this) : nothing}`;
870
1352
  }
1353
+ return html`${__classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_renderHeader).call(this)}<slot name="panel"></slot>`;
1354
+ }
871
1355
  };
872
1356
  _M3eStepperElement_breakpointUnobserve = new WeakMap();
873
1357
  _M3eStepperElement_instances = new WeakSet();
874
1358
  _a = selectionManager;
875
1359
  _M3eStepperElement_renderHeader = function _M3eStepperElement_renderHeader() {
876
- return html `<div
877
- class="header"
878
- role="tablist"
879
- aria-orientation="${o(this[selectionManager].vertical ? "vertical" : undefined)}"
880
- @change="${__classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_handleChange)}"
881
- >
882
- <slot name="step" @slotchange="${__classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_handleSlotChange)}" @keydown="${__classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_handleKeyDown)}"></slot>
883
- </div>`;
1360
+ return html`<div class="header" role="tablist" aria-orientation="${o(this[selectionManager].vertical ? "vertical" : undefined)}" @change="${__classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_handleChange)}"><slot name="step" @slotchange="${__classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_handleSlotChange)}" @keydown="${__classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_handleKeyDown)}"></slot></div>`;
884
1361
  };
885
1362
  _M3eStepperElement_handleChange = function _M3eStepperElement_handleChange(e) {
886
- e.stopPropagation();
887
- // Note: change event emitted from moveTo.
1363
+ e.stopPropagation();
1364
+ // Note: change event emitted from moveTo.
888
1365
  };
889
1366
  _M3eStepperElement_handleSlotChange = function _M3eStepperElement_handleSlotChange() {
890
- const { added, removed } = this[selectionManager].setItems([...this.querySelectorAll("m3e-step")]);
891
- if (added.length > 0 || removed.length > 0) {
892
- this.querySelectorAll(".-m3e-step-divider").forEach((x) => x.remove());
893
- for (let i = 0; i < this[selectionManager].items.length; i++) {
894
- const step = this[selectionManager].items[i];
895
- step.index = i;
896
- if (i > 0) {
897
- const divider = document.createElement("div");
898
- divider.ariaHidden = "true";
899
- divider.classList.add("-m3e-step-divider");
900
- divider.slot = "step";
901
- step.insertAdjacentElement("beforebegin", divider);
902
- }
903
- }
904
- __classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_updateDisplayOrder).call(this);
905
- if (this[selectionManager].selectedItems.length == 0) {
906
- this[selectionManager].select(this[selectionManager].items.find((x) => !x.disabled));
907
- }
1367
+ const {
1368
+ added,
1369
+ removed
1370
+ } = this[selectionManager].setItems([...this.querySelectorAll("m3e-step")]);
1371
+ if (added.length > 0 || removed.length > 0) {
1372
+ this.querySelectorAll(".-m3e-step-divider").forEach(x => x.remove());
1373
+ for (let i = 0; i < this[selectionManager].items.length; i++) {
1374
+ const step = this[selectionManager].items[i];
1375
+ step.index = i;
1376
+ if (i > 0) {
1377
+ const divider = document.createElement("div");
1378
+ divider.ariaHidden = "true";
1379
+ divider.classList.add("-m3e-step-divider");
1380
+ divider.slot = "step";
1381
+ step.insertAdjacentElement("beforebegin", divider);
1382
+ }
908
1383
  }
1384
+ __classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_updateDisplayOrder).call(this);
1385
+ if (this[selectionManager].selectedItems.length == 0) {
1386
+ this[selectionManager].select(this[selectionManager].items.find(x => !x.disabled));
1387
+ }
1388
+ }
909
1389
  };
910
1390
  _M3eStepperElement_handleKeyDown = function _M3eStepperElement_handleKeyDown(e) {
911
- this[selectionManager].onKeyDown(e);
1391
+ this[selectionManager].onKeyDown(e);
912
1392
  };
913
1393
  _M3eStepperElement_handleSelectedChange = function _M3eStepperElement_handleSelectedChange() {
914
- const selected = this[selectionManager].selectedItems[0];
915
- let selectedIndex = selected ? this.steps.indexOf(selected) : null;
916
- if (selectedIndex === -1) {
917
- selectedIndex = null;
918
- }
919
- this._selectedIndex = selectedIndex;
920
- for (const step of this[selectionManager].items) {
921
- if (step.panel) {
922
- step.panel.active = step.index === selectedIndex;
923
- }
924
- }
925
- if (selected && this.matches(":focus-within") && !selected.matches(":focus")) {
926
- selected.focus();
927
- }
928
- if (this.classList.contains("-no-animate")) {
929
- requestAnimationFrame(() => this.classList.toggle("-no-animate", false));
1394
+ const selected = this[selectionManager].selectedItems[0];
1395
+ let selectedIndex = selected ? this.steps.indexOf(selected) : null;
1396
+ if (selectedIndex === -1) {
1397
+ selectedIndex = null;
1398
+ }
1399
+ this._selectedIndex = selectedIndex;
1400
+ for (const step of this[selectionManager].items) {
1401
+ if (step.panel) {
1402
+ step.panel.active = step.index === selectedIndex;
930
1403
  }
1404
+ }
1405
+ if (selected && this.matches(":focus-within") && !selected.matches(":focus")) {
1406
+ selected.focus();
1407
+ }
1408
+ if (this.classList.contains("-no-animate")) {
1409
+ requestAnimationFrame(() => this.classList.toggle("-no-animate", false));
1410
+ }
931
1411
  };
932
1412
  _M3eStepperElement_checkValidity = function _M3eStepperElement_checkValidity() {
933
- let valid = false;
934
- if (this.selectedStep) {
935
- valid = this.selectedStep.panel?.querySelector("form")?.checkValidity() ?? true;
936
- if (this.selectedStep.optional) {
937
- valid = true;
938
- }
939
- this.selectedStep.invalid = !valid;
1413
+ let valid = false;
1414
+ if (this.selectedStep) {
1415
+ valid = this.selectedStep.panel?.querySelector("form")?.checkValidity() ?? true;
1416
+ if (this.selectedStep.optional) {
1417
+ valid = true;
940
1418
  }
941
- return valid;
1419
+ this.selectedStep.invalid = !valid;
1420
+ }
1421
+ return valid;
942
1422
  };
943
1423
  _M3eStepperElement_updateDisplayOrder = function _M3eStepperElement_updateDisplayOrder() {
944
- this[selectionManager].vertical = (this._orientation ?? this.orientation) === "vertical";
945
- this.classList.toggle("-vertical", this[selectionManager].vertical);
946
- if (!this[selectionManager].vertical) {
947
- this.steps.forEach((x) => {
948
- x.style.order = "";
949
- if (x.panel) {
950
- x.panel.style.order = "";
951
- }
952
- });
953
- }
954
- else {
955
- this.steps.forEach((x, i) => {
956
- x.style.order = `${i}`;
957
- if (x.panel) {
958
- x.panel.style.order = `${i}`;
959
- }
960
- });
961
- }
1424
+ this[selectionManager].vertical = (this._orientation ?? this.orientation) === "vertical";
1425
+ this.classList.toggle("-vertical", this[selectionManager].vertical);
1426
+ if (!this[selectionManager].vertical) {
1427
+ this.steps.forEach(x => {
1428
+ x.style.order = "";
1429
+ if (x.panel) {
1430
+ x.panel.style.order = "";
1431
+ }
1432
+ });
1433
+ } else {
1434
+ this.steps.forEach((x, i) => {
1435
+ x.style.order = `${i}`;
1436
+ if (x.panel) {
1437
+ x.panel.style.order = `${i}`;
1438
+ }
1439
+ });
1440
+ }
962
1441
  };
963
1442
  /** The styles of the element. */
964
- M3eStepperElement.styles = css `
965
- :host {
966
- display: flex;
967
- flex-direction: column;
968
- position: relative;
969
- }
970
- :host(:not(.-vertical)) .header {
971
- display: flex;
972
- align-items: flex-start;
973
- flex-wrap: nowrap;
974
- }
975
- :host(:not(.-vertical)) ::slotted(.-m3e-step-divider) {
976
- flex: 1 1 auto;
977
- position: relative;
978
- min-width: 2rem;
979
- }
980
- :host(:not(.-vertical)) ::slotted(.-m3e-step-divider)::before {
981
- content: "";
982
- position: absolute;
983
- left: 0;
984
- right: 0;
985
- border-bottom-width: var(--m3e-step-divider-thickness, 1px);
986
- border-bottom-style: solid;
987
- border-bottom-color: var(--m3e-step-divider-color, ${DesignToken.color.outline});
988
- }
989
- :host(:not(.-vertical):not([label-position="below"])) ::slotted(.-m3e-step-divider)::before {
990
- top: 50%;
991
- }
992
- :host(:not(.-vertical)) ::slotted([slot="step"]) {
993
- align-self: stretch;
994
- }
995
- :host(:not(.-vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before,
996
- :host(:not(.-vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after {
997
- content: "";
998
- display: block;
999
- position: absolute;
1000
- top: 0;
1001
- border-bottom-width: var(--m3e-step-divider-thickness, 1px);
1002
- border-bottom-style: solid;
1003
- border-bottom-color: var(--m3e-step-divider-color, ${DesignToken.color.outline});
1004
- }
1005
- :host(:not(.-vertical)[label-position="end"]) ::slotted(.-m3e-step-divider) {
1006
- margin-block: auto;
1007
- }
1008
- :host(:not(.-vertical)[label-position="end"])
1009
- ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before,
1010
- :host(:not(.-vertical)[label-position="end"])
1011
- ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after {
1012
- top: 50%;
1013
- }
1014
- :host(:not(.-vertical)[label-position="end"])
1015
- ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before {
1016
- left: 0;
1017
- right: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem));
1018
- }
1019
- :host(:not(.-vertical)[label-position="end"])
1020
- ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after {
1021
- left: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem));
1022
- right: 0;
1023
- }
1024
- :host(:not(.-vertical)[label-position="below"]) ::slotted(.-m3e-step-divider)::before,
1025
- :host(:not(.-vertical)[label-position="below"])
1026
- ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before,
1027
- :host(:not(.-vertical)[label-position="below"])
1028
- ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after {
1029
- margin-block-start: calc(var(--m3e-step-padding, 1.5rem) + calc(var(--m3e-step-icon-size, 1.5rem) / 2));
1030
- }
1031
- :host(:not(.-vertical)[label-position="below"])
1032
- ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before {
1033
- left: 0;
1034
- right: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem));
1035
- }
1036
- :host(:not(.-vertical)[label-position="below"])
1037
- ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after {
1038
- left: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem));
1039
- right: 0;
1040
- }
1041
- :host(:not(.-vertical)[label-position="below"]) {
1042
- --_step-direction: column;
1043
- --_step-label-align-items: center;
1044
- }
1045
- :host(.-vertical) .header {
1046
- display: contents;
1047
- }
1048
- :host(.-vertical) ::slotted([slot="step"]:not(.-m3e-step-divider)) {
1049
- flex: none;
1050
- }
1051
- :host(.-vertical) ::slotted([slot="panel"]) {
1052
- margin-inline-start: calc(var(--m3e-step-padding, 1.5rem) + calc(var(--m3e-step-icon-size, 1.5rem) / 2));
1053
- }
1054
- :host(.-vertical) ::slotted([slot="panel"]:not(:last-of-type)) {
1055
- border-inline-start-width: var(--m3e-step-divider-thickness, 1px);
1056
- border-inline-start-style: solid;
1057
- border-inline-start-color: var(--m3e-step-divider-color, ${DesignToken.color.outline});
1058
- }
1059
- :host(.-vertical) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before,
1060
- :host(.-vertical) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after {
1061
- content: "";
1062
- display: block;
1063
- position: absolute;
1064
- left: 0;
1065
- margin-inline-start: calc(var(--m3e-step-padding, 1.5rem) + calc(var(--m3e-step-icon-size, 1.5rem) / 2));
1066
- border-inline-start-width: var(--m3e-step-divider-thickness, 1px);
1067
- border-inline-start-style: solid;
1068
- border-inline-start-color: var(--m3e-step-divider-color, ${DesignToken.color.outline});
1069
- }
1070
- :host(.-vertical) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before {
1071
- top: 0;
1072
- bottom: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem));
1073
- }
1074
- :host(.-vertical) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after {
1075
- top: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem));
1076
- bottom: 0;
1077
- }
1078
- :host(:not(.-vertical)) {
1079
- --m3e-collapsible-animation-duration: 0ms;
1080
- }
1081
- :host(.-no-animate) {
1082
- --m3e-collapsible-animation-duration: 0ms;
1083
- }
1084
- `;
1085
- __decorate([
1086
- r$1()
1087
- ], M3eStepperElement.prototype, "_orientation", void 0);
1088
- __decorate([
1089
- r$1()
1090
- ], M3eStepperElement.prototype, "_selectedIndex", void 0);
1091
- __decorate([
1092
- n$1({ attribute: "header-position", reflect: true })
1093
- ], M3eStepperElement.prototype, "headerPosition", void 0);
1094
- __decorate([
1095
- n$1({ attribute: "label-position", reflect: true })
1096
- ], M3eStepperElement.prototype, "labelPosition", void 0);
1097
- __decorate([
1098
- n$1({ type: Boolean, reflect: true })
1099
- ], M3eStepperElement.prototype, "linear", void 0);
1100
- __decorate([
1101
- n$1({ reflect: true })
1102
- ], M3eStepperElement.prototype, "orientation", void 0);
1103
- M3eStepperElement = __decorate([
1104
- t$2("m3e-stepper")
1105
- ], M3eStepperElement);
1443
+ M3eStepperElement.styles = css`:host { display: flex; flex-direction: column; position: relative; } :host(:not(.-vertical)) .header { display: flex; align-items: flex-start; flex-wrap: nowrap; } :host(:not(.-vertical)) ::slotted(.-m3e-step-divider) { flex: 1 1 auto; position: relative; min-width: 2rem; } :host(:not(.-vertical)) ::slotted(.-m3e-step-divider)::before { content: ""; position: absolute; left: 0; right: 0; border-bottom-width: var(--m3e-step-divider-thickness, 1px); border-bottom-style: solid; border-bottom-color: var(--m3e-step-divider-color, ${DesignToken.color.outline}); } :host(:not(.-vertical):not([label-position="below"])) ::slotted(.-m3e-step-divider)::before { top: 50%; } :host(:not(.-vertical)) ::slotted([slot="step"]) { align-self: stretch; } :host(:not(.-vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before, :host(:not(.-vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { content: ""; display: block; position: absolute; top: 0; border-bottom-width: var(--m3e-step-divider-thickness, 1px); border-bottom-style: solid; border-bottom-color: var(--m3e-step-divider-color, ${DesignToken.color.outline}); } :host(:not(.-vertical)[label-position="end"]) ::slotted(.-m3e-step-divider) { margin-block: auto; } :host(:not(.-vertical)[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before, :host(:not(.-vertical)[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { top: 50%; } :host(:not(:dir(rtl)):not(.-vertical)[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { left: 0; right: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:dir(rtl):not(.-vertical)[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { right: 0; left: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:not(:dir(rtl)):not(.-vertical)[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { left: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); right: 0; } :host(:dir(rtl):not(.-vertical)[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { right: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); left: 0; } :host(:not(.-vertical)[label-position="below"]) ::slotted(.-m3e-step-divider)::before, :host(:not(.-vertical)[label-position="below"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before, :host(:not(.-vertical)[label-position="below"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { margin-block-start: calc(var(--m3e-step-padding, 1.5rem) + calc(var(--m3e-step-icon-size, 1.5rem) / 2)); } :host(:not(:dir(rtl)):not(.-vertical)[label-position="below"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { left: 0; right: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:dir(rtl):not(.-vertical)[label-position="below"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { right: 0; left: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:not(:dir(rtl)):not(.-vertical)[label-position="below"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { left: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem)); right: 0; } :host(:dir(rtl):not(.-vertical)[label-position="below"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { right: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem)); left: 0; } :host(:not(.-vertical)[label-position="below"]) { --_step-direction: column; --_step-label-align-items: center; } :host(.-vertical) .header { display: contents; } :host(.-vertical) ::slotted([slot="step"]:not(.-m3e-step-divider)) { flex: none; } :host(.-vertical) ::slotted([slot="panel"]) { margin-inline-start: calc(var(--m3e-step-padding, 1.5rem) + calc(var(--m3e-step-icon-size, 1.5rem) / 2)); } :host(.-vertical) ::slotted([slot="panel"]:not(:last-of-type)) { border-inline-start-width: var(--m3e-step-divider-thickness, 1px); border-inline-start-style: solid; border-inline-start-color: var(--m3e-step-divider-color, ${DesignToken.color.outline}); } :host(.-vertical) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before, :host(.-vertical) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { content: ""; display: block; position: absolute; left: 0; margin-inline-start: calc(var(--m3e-step-padding, 1.5rem) + calc(var(--m3e-step-icon-size, 1.5rem) / 2)); border-inline-start-width: var(--m3e-step-divider-thickness, 1px); border-inline-start-style: solid; border-inline-start-color: var(--m3e-step-divider-color, ${DesignToken.color.outline}); } :host(.-vertical) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { top: 0; bottom: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); } :host(.-vertical) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { top: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); bottom: 0; } :host(:not(.-vertical)) { --m3e-collapsible-animation-duration: 0ms; } :host(.-no-animate) { --m3e-collapsible-animation-duration: 0ms; }`;
1444
+ __decorate([r$1()], M3eStepperElement.prototype, "_orientation", void 0);
1445
+ __decorate([r$1()], M3eStepperElement.prototype, "_selectedIndex", void 0);
1446
+ __decorate([n$1({
1447
+ attribute: "header-position",
1448
+ reflect: true
1449
+ })], M3eStepperElement.prototype, "headerPosition", void 0);
1450
+ __decorate([n$1({
1451
+ attribute: "label-position",
1452
+ reflect: true
1453
+ })], M3eStepperElement.prototype, "labelPosition", void 0);
1454
+ __decorate([n$1({
1455
+ type: Boolean,
1456
+ reflect: true
1457
+ })], M3eStepperElement.prototype, "linear", void 0);
1458
+ __decorate([n$1({
1459
+ reflect: true
1460
+ })], M3eStepperElement.prototype, "orientation", void 0);
1461
+ M3eStepperElement = __decorate([t$2("m3e-stepper")], M3eStepperElement);
1106
1462
 
1107
1463
  /**
1108
1464
  * An element, nested within a clickable element, used to move a stepper to the next step.
@@ -1111,13 +1467,11 @@ M3eStepperElement = __decorate([
1111
1467
  * @slot - Renders the content of the action.
1112
1468
  */
1113
1469
  let M3eStepperNextElement = class M3eStepperNextElement extends StepperButtonElementBase {
1114
- constructor() {
1115
- super("next");
1116
- }
1470
+ constructor() {
1471
+ super("next");
1472
+ }
1117
1473
  };
1118
- M3eStepperNextElement = __decorate([
1119
- t$2("m3e-stepper-next")
1120
- ], M3eStepperNextElement);
1474
+ M3eStepperNextElement = __decorate([t$2("m3e-stepper-next")], M3eStepperNextElement);
1121
1475
 
1122
1476
  /**
1123
1477
  * An element, nested within a clickable element, used to move a stepper to the previous step.
@@ -1126,13 +1480,11 @@ M3eStepperNextElement = __decorate([
1126
1480
  * @slot - Renders the content of the action.
1127
1481
  */
1128
1482
  let M3eStepperPreviousElement = class M3eStepperPreviousElement extends StepperButtonElementBase {
1129
- constructor() {
1130
- super("previous");
1131
- }
1483
+ constructor() {
1484
+ super("previous");
1485
+ }
1132
1486
  };
1133
- M3eStepperPreviousElement = __decorate([
1134
- t$2("m3e-stepper-previous")
1135
- ], M3eStepperPreviousElement);
1487
+ M3eStepperPreviousElement = __decorate([t$2("m3e-stepper-previous")], M3eStepperPreviousElement);
1136
1488
 
1137
1489
  /**
1138
1490
  * An element, nested within a clickable element, used to reset a stepper to its initial state.
@@ -1141,13 +1493,11 @@ M3eStepperPreviousElement = __decorate([
1141
1493
  * @slot - Renders the content of the action.
1142
1494
  */
1143
1495
  let M3eStepperResetElement = class M3eStepperResetElement extends StepperButtonElementBase {
1144
- constructor() {
1145
- super("reset");
1146
- }
1496
+ constructor() {
1497
+ super("reset");
1498
+ }
1147
1499
  };
1148
- M3eStepperResetElement = __decorate([
1149
- t$2("m3e-stepper-reset")
1150
- ], M3eStepperResetElement);
1500
+ M3eStepperResetElement = __decorate([t$2("m3e-stepper-reset")], M3eStepperResetElement);
1151
1501
 
1152
1502
  export { M3eStepElement, M3eStepPanelElement, M3eStepperElement, M3eStepperNextElement, M3eStepperPreviousElement, M3eStepperResetElement, StepperButtonElementBase };
1153
1503
  //# sourceMappingURL=index.js.map