@m3e/menu 1.0.5 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -7,6 +7,7 @@ import { LitElement, nothing, html, css, unsafeCSS } from 'lit';
7
7
  import { KeyboardClick, Focusable, AttachInternals, Disabled, isLinkButtonMixin, renderPseudoLink, DesignToken, HtmlFor, LinkButton, Role, HoverController, hasAssignedNodes, ScrollController, Checked } from '@m3e/core';
8
8
  import { addAriaReferencedId, removeAriaReferencedId, RovingTabIndexManager } from '@m3e/core/a11y';
9
9
  import { positionAnchor } from '@m3e/core/anchoring';
10
+ import { M3eDirectionality } from '@m3e/core/bidi';
10
11
 
11
12
  /******************************************************************************
12
13
  Copyright (c) Microsoft Corporation.
@@ -21,33 +22,30 @@ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
21
22
  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
22
23
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
23
24
  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;
25
+ ***************************************************************************** */
26
+ /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
27
+
28
+ function __decorate(decorators, target, key, desc) {
29
+ var c = arguments.length,
30
+ r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
31
+ d;
32
+ 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;
33
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
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
+ function __classPrivateFieldSet(receiver, state, value, kind, f) {
41
+ if (kind === "m") throw new TypeError("Private method is not writable");
42
+ if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
43
+ 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");
44
+ return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), value;
45
+ }
46
+ typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
47
+ var e = new Error(message);
48
+ return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
51
49
  };
52
50
 
53
51
  /**
@@ -55,184 +53,430 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
55
53
  * Copyright 2017 Google LLC
56
54
  * SPDX-License-Identifier: BSD-3-Clause
57
55
  */
58
- const t$1=t=>(e,o)=>{ void 0!==o?o.addInitializer((()=>{customElements.define(t,e);})):customElements.define(t,e);};
56
+ const t$1 = t => (e, o) => {
57
+ void 0 !== o ? o.addInitializer(() => {
58
+ customElements.define(t, e);
59
+ }) : customElements.define(t, e);
60
+ };
59
61
 
60
62
  /**
61
63
  * @license
62
64
  * Copyright 2019 Google LLC
63
65
  * SPDX-License-Identifier: BSD-3-Clause
64
66
  */
65
- const t=globalThis,e$3=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s=Symbol(),o$2=new WeakMap;let n$2 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$3&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$2.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$2.set(s,t));}return t}toString(){return this.cssText}};const r$3=t=>new n$2("string"==typeof t?t:t+"",void 0,s),S=(s,o)=>{if(e$3)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$1=e$3?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$3(e)})(t):t;
67
+ const t = globalThis,
68
+ e$3 = t.ShadowRoot && (void 0 === t.ShadyCSS || t.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype,
69
+ s = Symbol(),
70
+ o$2 = new WeakMap();
71
+ let n$2 = class n {
72
+ constructor(t, e, o) {
73
+ if (this._$cssResult$ = true, o !== s) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
74
+ this.cssText = t, this.t = e;
75
+ }
76
+ get styleSheet() {
77
+ let t = this.o;
78
+ const s = this.t;
79
+ if (e$3 && void 0 === t) {
80
+ const e = void 0 !== s && 1 === s.length;
81
+ e && (t = o$2.get(s)), void 0 === t && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), e && o$2.set(s, t));
82
+ }
83
+ return t;
84
+ }
85
+ toString() {
86
+ return this.cssText;
87
+ }
88
+ };
89
+ const r$3 = t => new n$2("string" == typeof t ? t : t + "", void 0, s),
90
+ S = (s, o) => {
91
+ if (e$3) s.adoptedStyleSheets = o.map(t => t instanceof CSSStyleSheet ? t : t.styleSheet);else for (const e of o) {
92
+ const o = document.createElement("style"),
93
+ n = t.litNonce;
94
+ void 0 !== n && o.setAttribute("nonce", n), o.textContent = e.cssText, s.appendChild(o);
95
+ }
96
+ },
97
+ c$1 = e$3 ? t => t : t => t instanceof CSSStyleSheet ? (t => {
98
+ let e = "";
99
+ for (const s of t.cssRules) e += s.cssText;
100
+ return r$3(e);
101
+ })(t) : t;
66
102
 
67
103
  /**
68
104
  * @license
69
105
  * Copyright 2017 Google LLC
70
106
  * SPDX-License-Identifier: BSD-3-Clause
71
- */const{is:i,defineProperty:e$2,getOwnPropertyDescriptor:h,getOwnPropertyNames:r$2,getOwnPropertySymbols:o$1,getPrototypeOf:n$1}=Object,a=globalThis,c=a.trustedTypes,l=c?c.emptyScript:"",p=a.reactiveElementPolyfillSupport,d=(t,s)=>t,u={toAttribute(t,s){switch(s){case Boolean:t=t?l:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f=(t,s)=>!i(t,s),b={attribute:true,type:String,converter:u,reflect:false,useDefault:false,hasChanged:f};Symbol.metadata??=Symbol("metadata"),a.litPropertyMetadata??=new WeakMap;class y extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=b){if(s.state&&(s.attribute=false),this._$Ei(),this.prototype.hasOwnProperty(t)&&((s=Object.create(s)).wrapped=true),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),h=this.getPropertyDescriptor(t,i,s);void 0!==h&&e$2(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get:e,set(s){const h=e?.call(this);r?.call(this,s),this.requestUpdate(t,h,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??b}static _$Ei(){if(this.hasOwnProperty(d("elementProperties")))return;const t=n$1(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d("properties"))){const t=this.properties,s=[...r$2(t),...o$1(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$1(s));}else void 0!==s&&i.push(c$1(s));return i}static _$Eu(t,s){const i=s.attribute;return false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$ET(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const h=(void 0!==i.converter?.toAttribute?i.converter:u).toAttribute(s,i.type);this._$Em=t,null==h?this.removeAttribute(e):this.setAttribute(e,h),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u;this._$Em=e;const r=h.fromAttribute(s,t.type);this[e]=r??this._$Ej?.get(e)??r,this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){const e=this.constructor,h=this[t];if(i??=e.getPropertyOptions(t),!((i.hasChanged??f)(h,s)||i.useDefault&&i.reflect&&h===this._$Ej?.get(t)&&!this.hasAttribute(e._$Eu(t,i))))return;this.C(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$EP());}C(t,s,{useDefault:i,reflect:e,wrapped:h},r){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,r??s??this[t]),true!==h||void 0!==r)||(this._$AL.has(t)||(this.hasUpdated||i||(s=void 0),this._$AL.set(t,s)),true===e&&this._$Em!==t&&(this._$Eq??=new Set).add(t));}async _$EP(){this.isUpdatePending=true;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t){const{wrapped:t}=i,e=this[s];true!==t||this._$AL.has(s)||void 0===e||this.C(s,void 0,i,e);}}let t=false;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EM();}catch(s){throw t=false,this._$EM(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EM(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return true}update(t){this._$Eq&&=this._$Eq.forEach((t=>this._$ET(t,this[t]))),this._$EM();}updated(t){}firstUpdated(t){}}y.elementStyles=[],y.shadowRootOptions={mode:"open"},y[d("elementProperties")]=new Map,y[d("finalized")]=new Map,p?.({ReactiveElement:y}),(a.reactiveElementVersions??=[]).push("2.1.1");
107
+ */
108
+ const {
109
+ is: i,
110
+ defineProperty: e$2,
111
+ getOwnPropertyDescriptor: h,
112
+ getOwnPropertyNames: r$2,
113
+ getOwnPropertySymbols: o$1,
114
+ getPrototypeOf: n$1
115
+ } = Object,
116
+ a = globalThis,
117
+ c = a.trustedTypes,
118
+ l = c ? c.emptyScript : "",
119
+ p = a.reactiveElementPolyfillSupport,
120
+ d = (t, s) => t,
121
+ u = {
122
+ toAttribute(t, s) {
123
+ switch (s) {
124
+ case Boolean:
125
+ t = t ? l : null;
126
+ break;
127
+ case Object:
128
+ case Array:
129
+ t = null == t ? t : JSON.stringify(t);
130
+ }
131
+ return t;
132
+ },
133
+ fromAttribute(t, s) {
134
+ let i = t;
135
+ switch (s) {
136
+ case Boolean:
137
+ i = null !== t;
138
+ break;
139
+ case Number:
140
+ i = null === t ? null : Number(t);
141
+ break;
142
+ case Object:
143
+ case Array:
144
+ try {
145
+ i = JSON.parse(t);
146
+ } catch (t) {
147
+ i = null;
148
+ }
149
+ }
150
+ return i;
151
+ }
152
+ },
153
+ f = (t, s) => !i(t, s),
154
+ b = {
155
+ attribute: true,
156
+ type: String,
157
+ converter: u,
158
+ reflect: false,
159
+ useDefault: false,
160
+ hasChanged: f
161
+ };
162
+ Symbol.metadata ??= Symbol("metadata"), a.litPropertyMetadata ??= new WeakMap();
163
+ class y extends HTMLElement {
164
+ static addInitializer(t) {
165
+ this._$Ei(), (this.l ??= []).push(t);
166
+ }
167
+ static get observedAttributes() {
168
+ return this.finalize(), this._$Eh && [...this._$Eh.keys()];
169
+ }
170
+ static createProperty(t, s = b) {
171
+ 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) {
172
+ const i = Symbol(),
173
+ h = this.getPropertyDescriptor(t, i, s);
174
+ void 0 !== h && e$2(this.prototype, t, h);
175
+ }
176
+ }
177
+ static getPropertyDescriptor(t, s, i) {
178
+ const {
179
+ get: e,
180
+ set: r
181
+ } = h(this.prototype, t) ?? {
182
+ get() {
183
+ return this[s];
184
+ },
185
+ set(t) {
186
+ this[s] = t;
187
+ }
188
+ };
189
+ return {
190
+ get: e,
191
+ set(s) {
192
+ const h = e?.call(this);
193
+ r?.call(this, s), this.requestUpdate(t, h, i);
194
+ },
195
+ configurable: true,
196
+ enumerable: true
197
+ };
198
+ }
199
+ static getPropertyOptions(t) {
200
+ return this.elementProperties.get(t) ?? b;
201
+ }
202
+ static _$Ei() {
203
+ if (this.hasOwnProperty(d("elementProperties"))) return;
204
+ const t = n$1(this);
205
+ t.finalize(), void 0 !== t.l && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
206
+ }
207
+ static finalize() {
208
+ if (this.hasOwnProperty(d("finalized"))) return;
209
+ if (this.finalized = true, this._$Ei(), this.hasOwnProperty(d("properties"))) {
210
+ const t = this.properties,
211
+ s = [...r$2(t), ...o$1(t)];
212
+ for (const i of s) this.createProperty(i, t[i]);
213
+ }
214
+ const t = this[Symbol.metadata];
215
+ if (null !== t) {
216
+ const s = litPropertyMetadata.get(t);
217
+ if (void 0 !== s) for (const [t, i] of s) this.elementProperties.set(t, i);
218
+ }
219
+ this._$Eh = new Map();
220
+ for (const [t, s] of this.elementProperties) {
221
+ const i = this._$Eu(t, s);
222
+ void 0 !== i && this._$Eh.set(i, t);
223
+ }
224
+ this.elementStyles = this.finalizeStyles(this.styles);
225
+ }
226
+ static finalizeStyles(s) {
227
+ const i = [];
228
+ if (Array.isArray(s)) {
229
+ const e = new Set(s.flat(1 / 0).reverse());
230
+ for (const s of e) i.unshift(c$1(s));
231
+ } else void 0 !== s && i.push(c$1(s));
232
+ return i;
233
+ }
234
+ static _$Eu(t, s) {
235
+ const i = s.attribute;
236
+ return false === i ? void 0 : "string" == typeof i ? i : "string" == typeof t ? t.toLowerCase() : void 0;
237
+ }
238
+ constructor() {
239
+ super(), this._$Ep = void 0, this.isUpdatePending = false, this.hasUpdated = false, this._$Em = null, this._$Ev();
240
+ }
241
+ _$Ev() {
242
+ this._$ES = new Promise(t => this.enableUpdating = t), this._$AL = new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach(t => t(this));
243
+ }
244
+ addController(t) {
245
+ (this._$EO ??= new Set()).add(t), void 0 !== this.renderRoot && this.isConnected && t.hostConnected?.();
246
+ }
247
+ removeController(t) {
248
+ this._$EO?.delete(t);
249
+ }
250
+ _$E_() {
251
+ const t = new Map(),
252
+ s = this.constructor.elementProperties;
253
+ for (const i of s.keys()) this.hasOwnProperty(i) && (t.set(i, this[i]), delete this[i]);
254
+ t.size > 0 && (this._$Ep = t);
255
+ }
256
+ createRenderRoot() {
257
+ const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
258
+ return S(t, this.constructor.elementStyles), t;
259
+ }
260
+ connectedCallback() {
261
+ this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(true), this._$EO?.forEach(t => t.hostConnected?.());
262
+ }
263
+ enableUpdating(t) {}
264
+ disconnectedCallback() {
265
+ this._$EO?.forEach(t => t.hostDisconnected?.());
266
+ }
267
+ attributeChangedCallback(t, s, i) {
268
+ this._$AK(t, i);
269
+ }
270
+ _$ET(t, s) {
271
+ const i = this.constructor.elementProperties.get(t),
272
+ e = this.constructor._$Eu(t, i);
273
+ if (void 0 !== e && true === i.reflect) {
274
+ const h = (void 0 !== i.converter?.toAttribute ? i.converter : u).toAttribute(s, i.type);
275
+ this._$Em = t, null == h ? this.removeAttribute(e) : this.setAttribute(e, h), this._$Em = null;
276
+ }
277
+ }
278
+ _$AK(t, s) {
279
+ const i = this.constructor,
280
+ e = i._$Eh.get(t);
281
+ if (void 0 !== e && this._$Em !== e) {
282
+ const t = i.getPropertyOptions(e),
283
+ h = "function" == typeof t.converter ? {
284
+ fromAttribute: t.converter
285
+ } : void 0 !== t.converter?.fromAttribute ? t.converter : u;
286
+ this._$Em = e;
287
+ const r = h.fromAttribute(s, t.type);
288
+ this[e] = r ?? this._$Ej?.get(e) ?? r, this._$Em = null;
289
+ }
290
+ }
291
+ requestUpdate(t, s, i) {
292
+ if (void 0 !== t) {
293
+ const e = this.constructor,
294
+ h = this[t];
295
+ if (i ??= e.getPropertyOptions(t), !((i.hasChanged ?? f)(h, s) || i.useDefault && i.reflect && h === this._$Ej?.get(t) && !this.hasAttribute(e._$Eu(t, i)))) return;
296
+ this.C(t, s, i);
297
+ }
298
+ false === this.isUpdatePending && (this._$ES = this._$EP());
299
+ }
300
+ C(t, s, {
301
+ useDefault: i,
302
+ reflect: e,
303
+ wrapped: h
304
+ }, r) {
305
+ 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));
306
+ }
307
+ async _$EP() {
308
+ this.isUpdatePending = true;
309
+ try {
310
+ await this._$ES;
311
+ } catch (t) {
312
+ Promise.reject(t);
313
+ }
314
+ const t = this.scheduleUpdate();
315
+ return null != t && (await t), !this.isUpdatePending;
316
+ }
317
+ scheduleUpdate() {
318
+ return this.performUpdate();
319
+ }
320
+ performUpdate() {
321
+ if (!this.isUpdatePending) return;
322
+ if (!this.hasUpdated) {
323
+ if (this.renderRoot ??= this.createRenderRoot(), this._$Ep) {
324
+ for (const [t, s] of this._$Ep) this[t] = s;
325
+ this._$Ep = void 0;
326
+ }
327
+ const t = this.constructor.elementProperties;
328
+ if (t.size > 0) for (const [s, i] of t) {
329
+ const {
330
+ wrapped: t
331
+ } = i,
332
+ e = this[s];
333
+ true !== t || this._$AL.has(s) || void 0 === e || this.C(s, void 0, i, e);
334
+ }
335
+ }
336
+ let t = false;
337
+ const s = this._$AL;
338
+ try {
339
+ t = this.shouldUpdate(s), t ? (this.willUpdate(s), this._$EO?.forEach(t => t.hostUpdate?.()), this.update(s)) : this._$EM();
340
+ } catch (s) {
341
+ throw t = false, this._$EM(), s;
342
+ }
343
+ t && this._$AE(s);
344
+ }
345
+ willUpdate(t) {}
346
+ _$AE(t) {
347
+ this._$EO?.forEach(t => t.hostUpdated?.()), this.hasUpdated || (this.hasUpdated = true, this.firstUpdated(t)), this.updated(t);
348
+ }
349
+ _$EM() {
350
+ this._$AL = new Map(), this.isUpdatePending = false;
351
+ }
352
+ get updateComplete() {
353
+ return this.getUpdateComplete();
354
+ }
355
+ getUpdateComplete() {
356
+ return this._$ES;
357
+ }
358
+ shouldUpdate(t) {
359
+ return true;
360
+ }
361
+ update(t) {
362
+ this._$Eq &&= this._$Eq.forEach(t => this._$ET(t, this[t])), this._$EM();
363
+ }
364
+ updated(t) {}
365
+ firstUpdated(t) {}
366
+ }
367
+ y.elementStyles = [], y.shadowRootOptions = {
368
+ mode: "open"
369
+ }, y[d("elementProperties")] = new Map(), y[d("finalized")] = new Map(), p?.({
370
+ ReactiveElement: y
371
+ }), (a.reactiveElementVersions ??= []).push("2.1.1");
72
372
 
73
373
  /**
74
374
  * @license
75
375
  * Copyright 2017 Google LLC
76
376
  * SPDX-License-Identifier: BSD-3-Clause
77
- */const o={attribute:true,type:String,converter:u,reflect:false,hasChanged:f},r$1=(t=o,e,r)=>{const{kind:n,metadata:i}=r;let s=globalThis.litPropertyMetadata.get(i);if(void 0===s&&globalThis.litPropertyMetadata.set(i,s=new Map),"setter"===n&&((t=Object.create(t)).wrapped=true),s.set(r.name,t),"accessor"===n){const{name:o}=r;return {set(r){const n=e.get.call(this);e.set.call(this,r),this.requestUpdate(o,n,t);},init(e){return void 0!==e&&this.C(o,void 0,t,e),e}}}if("setter"===n){const{name:o}=r;return function(r){const n=this[o];e.call(this,r),this.requestUpdate(o,n,t);}}throw Error("Unsupported decorator location: "+n)};function n(t){return (e,o)=>"object"==typeof o?r$1(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)}
377
+ */
378
+ const o = {
379
+ attribute: true,
380
+ type: String,
381
+ converter: u,
382
+ reflect: false,
383
+ hasChanged: f
384
+ },
385
+ r$1 = (t = o, e, r) => {
386
+ const {
387
+ kind: n,
388
+ metadata: i
389
+ } = r;
390
+ let s = globalThis.litPropertyMetadata.get(i);
391
+ 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) {
392
+ const {
393
+ name: o
394
+ } = r;
395
+ return {
396
+ set(r) {
397
+ const n = e.get.call(this);
398
+ e.set.call(this, r), this.requestUpdate(o, n, t);
399
+ },
400
+ init(e) {
401
+ return void 0 !== e && this.C(o, void 0, t, e), e;
402
+ }
403
+ };
404
+ }
405
+ if ("setter" === n) {
406
+ const {
407
+ name: o
408
+ } = r;
409
+ return function (r) {
410
+ const n = this[o];
411
+ e.call(this, r), this.requestUpdate(o, n, t);
412
+ };
413
+ }
414
+ throw Error("Unsupported decorator location: " + n);
415
+ };
416
+ function n(t) {
417
+ return (e, o) => "object" == typeof o ? r$1(t, e, o) : ((t, e, o) => {
418
+ const r = e.hasOwnProperty(o);
419
+ return e.constructor.createProperty(o, t), r ? Object.getOwnPropertyDescriptor(e, o) : void 0;
420
+ })(t, e, o);
421
+ }
78
422
 
79
423
  /**
80
424
  * @license
81
425
  * Copyright 2017 Google LLC
82
426
  * SPDX-License-Identifier: BSD-3-Clause
83
- */function r(r){return n({...r,state:true,attribute:false})}
427
+ */
428
+ function r(r) {
429
+ return n({
430
+ ...r,
431
+ state: true,
432
+ attribute: false
433
+ });
434
+ }
84
435
 
85
436
  /**
86
437
  * @license
87
438
  * Copyright 2017 Google LLC
88
439
  * SPDX-License-Identifier: BSD-3-Clause
89
440
  */
90
- const e$1=(e,t,c)=>(c.configurable=true,c.enumerable=true,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,c),c);
441
+ const e$1 = (e, t, c) => (c.configurable = true, c.enumerable = true, Reflect.decorate && "object" != typeof t && Object.defineProperty(e, t, c), c);
91
442
 
92
443
  /**
93
444
  * @license
94
445
  * Copyright 2017 Google LLC
95
446
  * SPDX-License-Identifier: BSD-3-Clause
96
- */function e(e,r){return (n,s,i)=>{const o=t=>t.renderRoot?.querySelector(e)??null;return e$1(n,s,{get(){return o(this)}})}}
447
+ */
448
+ function e(e, r) {
449
+ return (n, s, i) => {
450
+ const o = t => t.renderRoot?.querySelector(e) ?? null;
451
+ return e$1(n, s, {
452
+ get() {
453
+ return o(this);
454
+ }
455
+ });
456
+ };
457
+ }
97
458
 
98
459
  /** A base implementation for an item of a menu. This class must be inherited. */
99
460
  class MenuItemElementBase extends KeyboardClick(Focusable(AttachInternals(Disabled(LitElement), true))) {
100
- /** The menu to which this item belongs. */
101
- get menu() {
102
- return this.closest("m3e-menu");
103
- }
104
- /** @inheritdoc */
105
- firstUpdated(_changedProperties) {
106
- super.firstUpdated(_changedProperties);
107
- [this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));
108
- }
109
- /** @inheritdoc */
110
- render() {
111
- return html `<div class="base">
112
- <m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer>
113
- <m3e-focus-ring class="focus-ring" inward ?disabled="${this.disabled}"></m3e-focus-ring>
114
- <m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple>
115
- <div class="touch" aria-hidden="true"></div>
116
- ${isLinkButtonMixin(this) ? this[renderPseudoLink]() : nothing}
117
- <div class="wrapper">${this._renderContent()}</div>
118
- </div>`;
119
- }
461
+ /** The menu to which this item belongs. */
462
+ get menu() {
463
+ return this.closest("m3e-menu");
464
+ }
465
+ /** @inheritdoc */
466
+ firstUpdated(_changedProperties) {
467
+ super.firstUpdated(_changedProperties);
468
+ [this._focusRing, this._stateLayer, this._ripple].forEach(x => x?.attach(this));
469
+ }
470
+ /** @inheritdoc */
471
+ render() {
472
+ return html`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" inward ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div>${isLinkButtonMixin(this) ? this[renderPseudoLink]() : nothing}<div class="wrapper">${this._renderContent()}</div></div>`;
473
+ }
120
474
  }
121
475
  /** The styles of the element. */
122
- MenuItemElementBase.styles = css `
123
- :host {
124
- display: inline-block;
125
- outline: none;
126
- user-select: none;
127
- flex: none;
128
- height: var(--m3e-menu-item-container-height, 3rem);
129
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
130
- }
131
- :host(:not(:focus-visible)) .base {
132
- --m3e-state-layer-focus-opacity: 0;
133
- }
134
- :host(:not(:disabled):not([aria-expanded="true"])) .base {
135
- color: var(--m3e-menu-item-color, ${DesignToken.color.onSurface});
136
- }
137
- :host(:not([aria-expanded="true"])) .base {
138
- --m3e-state-layer-hover-color: var(--m3e-menu-item-container-hover-color, ${DesignToken.color.onSurface});
139
- --m3e-state-layer-focus-color: var(--m3e-menu-item-container-focus-color, ${DesignToken.color.onSurface});
140
- --m3e-ripple-color: var(--m3e-menu-item-ripple-color, ${DesignToken.color.onSurface});
141
- }
142
- :host(:not(:disabled)[checked]) .base,
143
- :host(:not(:disabled)[aria-expanded="true"]) .base {
144
- color: var(--m3e-menu-selected-color, ${DesignToken.color.onSecondaryContainer});
145
- background-color: var(--m3e-menu-selected-container-color, ${DesignToken.color.secondaryContainer});
146
- }
147
- :host([checked]) .base,
148
- :host([aria-expanded="true"]) .base {
149
- --m3e-state-layer-hover-color: var(
150
- --m3e-menu-item-selected-container-hover-color,
151
- ${DesignToken.color.onSecondaryContainer}
152
- );
153
- --m3e-state-layer-focus-color: var(
154
- --m3e-menu-item-selected-container-focus-color,
155
- ${DesignToken.color.onSecondaryContainer}
156
- );
157
- --m3e-ripple-color: var(--m3e-menu-item-selected-ripple-color, ${DesignToken.color.onSecondaryContainer});
158
- }
159
- :host(:not(:disabled)) {
160
- cursor: pointer;
161
- }
162
- :host(:disabled) .base {
163
- color: color-mix(
164
- in srgb,
165
- var(--m3e-menu-item-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-menu-item-disabled-opacity, 38%),
166
- transparent
167
- );
168
- }
169
- .base {
170
- box-sizing: border-box;
171
- vertical-align: middle;
172
- display: inline-flex;
173
- align-items: center;
174
- position: relative;
175
- width: 100%;
176
- height: 100%;
177
- }
178
- .touch {
179
- position: absolute;
180
- height: 3rem;
181
- left: 0;
182
- right: 0;
183
- }
184
- .wrapper {
185
- display: inline-flex;
186
- align-items: center;
187
- column-gap: var(--m3e-menu-item-icon-label-space, 0.75rem);
188
- padding-inline-start: var(--m3e-menu-item-padding-start, 0.75rem);
189
- padding-inline-end: var(--m3e-menu-item-padding-end, 0.75rem);
190
- font-size: var(--m3e-menu-item-label-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize});
191
- font-weight: var(
192
- --m3e-menu-item-label-text-font-weight,
193
- ${DesignToken.typescale.standard.label.large.fontWeight}
194
- );
195
- line-height: var(
196
- --m3e-menu-item-label-text-line-height,
197
- ${DesignToken.typescale.standard.label.large.lineHeight}
198
- );
199
- letter-spacing: var(--m3e-menu-item-label-text-tracking, ${DesignToken.typescale.standard.label.large.tracking});
200
- }
201
- .focus-ring {
202
- border-radius: var(--m3e-menu-item-focus-ring-shape, ${DesignToken.shape.corner.medium});
203
- }
204
- .content {
205
- flex: 1 1 auto;
206
- overflow: hidden;
207
- text-overflow: ellipsis;
208
- white-space: nowrap;
209
- }
210
- ::slotted([slot="icon"]),
211
- ::slotted([slot="trailing-icon"]),
212
- .trailing-icon {
213
- flex: none;
214
- width: 1em;
215
- font-size: var(--m3e-menu-item-icon-size, 1.5rem) !important;
216
- }
217
- @media (forced-colors: active) {
218
- .base {
219
- background-color: Menu;
220
- color: MenuText;
221
- }
222
- :host(:disabled) .base {
223
- color: GrayText;
224
- }
225
- }
226
- `;
227
- __decorate([
228
- e(".focus-ring")
229
- ], MenuItemElementBase.prototype, "_focusRing", void 0);
230
- __decorate([
231
- e(".state-layer")
232
- ], MenuItemElementBase.prototype, "_stateLayer", void 0);
233
- __decorate([
234
- e(".ripple")
235
- ], MenuItemElementBase.prototype, "_ripple", void 0);
476
+ MenuItemElementBase.styles = css`:host { display: inline-block; outline: none; user-select: none; flex: none; height: var(--m3e-menu-item-container-height, 3rem); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:focus-visible)) .base { --m3e-state-layer-focus-opacity: 0; } :host(:not(:disabled):not([aria-expanded="true"])) .base { color: var(--m3e-menu-item-color, ${DesignToken.color.onSurface}); } :host(:not([aria-expanded="true"])) .base { --m3e-state-layer-hover-color: var(--m3e-menu-item-container-hover-color, ${DesignToken.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-menu-item-container-focus-color, ${DesignToken.color.onSurface}); --m3e-ripple-color: var(--m3e-menu-item-ripple-color, ${DesignToken.color.onSurface}); } :host(:not(:disabled)[checked]) .base, :host(:not(:disabled)[aria-expanded="true"]) .base { color: var(--m3e-menu-selected-color, ${DesignToken.color.onSecondaryContainer}); background-color: var(--m3e-menu-selected-container-color, ${DesignToken.color.secondaryContainer}); } :host([checked]) .base, :host([aria-expanded="true"]) .base { --m3e-state-layer-hover-color: var( --m3e-menu-item-selected-container-hover-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-menu-item-selected-container-focus-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-ripple-color: var(--m3e-menu-item-selected-ripple-color, ${DesignToken.color.onSecondaryContainer}); } :host(:not(:disabled)) { cursor: pointer; } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-menu-item-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-menu-item-disabled-opacity, 38%), transparent ); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; position: relative; width: 100%; height: 100%; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { display: inline-flex; align-items: center; column-gap: var(--m3e-menu-item-icon-label-space, 0.75rem); padding-inline-start: var(--m3e-menu-item-padding-start, 0.75rem); padding-inline-end: var(--m3e-menu-item-padding-end, 0.75rem); font-size: var(--m3e-menu-item-label-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-menu-item-label-text-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-menu-item-label-text-line-height, ${DesignToken.typescale.standard.label.large.lineHeight} ); letter-spacing: var(--m3e-menu-item-label-text-tracking, ${DesignToken.typescale.standard.label.large.tracking}); } .focus-ring { border-radius: var(--m3e-menu-item-focus-ring-shape, ${DesignToken.shape.corner.medium}); } .content { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ::slotted([slot="icon"]), ::slotted([slot="trailing-icon"]), .trailing-icon { flex: none; width: 1em; font-size: var(--m3e-menu-item-icon-size, 1.5rem) !important; } @media (forced-colors: active) { .base { background-color: Menu; color: MenuText; } :host(:disabled) .base { color: GrayText; } }`;
477
+ __decorate([e(".focus-ring")], MenuItemElementBase.prototype, "_focusRing", void 0);
478
+ __decorate([e(".state-layer")], MenuItemElementBase.prototype, "_stateLayer", void 0);
479
+ __decorate([e(".ripple")], MenuItemElementBase.prototype, "_ripple", void 0);
236
480
 
237
481
  var _M3eMenuTriggerElement_instances, _M3eMenuTriggerElement_clickHandler, _M3eMenuTriggerElement_handleClick;
238
482
  /**
@@ -294,83 +538,74 @@ var _M3eMenuTriggerElement_instances, _M3eMenuTriggerElement_clickHandler, _M3eM
294
538
  * @slot - Renders the contents of the trigger.
295
539
  */
296
540
  let M3eMenuTriggerElement = class M3eMenuTriggerElement extends HtmlFor(LitElement) {
297
- constructor() {
298
- super(...arguments);
299
- _M3eMenuTriggerElement_instances.add(this);
300
- /** @private */ _M3eMenuTriggerElement_clickHandler.set(this, async (e) => __classPrivateFieldGet(this, _M3eMenuTriggerElement_instances, "m", _M3eMenuTriggerElement_handleClick).call(this, e));
301
- }
302
- /** The menu triggered by the element. */
303
- get menu() {
304
- return this.control?.tagName === "M3E-MENU" ? this.control : null;
305
- }
306
- /** @inheritdoc */
307
- connectedCallback() {
308
- super.connectedCallback();
309
- this.parentElement?.addEventListener("click", __classPrivateFieldGet(this, _M3eMenuTriggerElement_clickHandler, "f"));
310
- }
311
- /** @inheritdoc */
312
- disconnectedCallback() {
313
- super.disconnectedCallback();
314
- this.parentElement?.removeEventListener("click", __classPrivateFieldGet(this, _M3eMenuTriggerElement_clickHandler, "f"));
315
- }
316
- /** @inheritdoc */
317
- attach(control) {
318
- super.attach(control);
319
- const menu = this.menu;
320
- if (menu) {
321
- if (this.parentElement) {
322
- this.parentElement.ariaHasPopup = "menu";
323
- this.parentElement.ariaExpanded = "false";
324
- if (menu.id) {
325
- addAriaReferencedId(this.parentElement, "aria-controls", menu.id);
326
- }
327
- }
328
- if (this.closest("m3e-menu")) {
329
- menu.submenu = true;
330
- }
541
+ constructor() {
542
+ super(...arguments);
543
+ _M3eMenuTriggerElement_instances.add(this);
544
+ /** @private */
545
+ _M3eMenuTriggerElement_clickHandler.set(this, async e => __classPrivateFieldGet(this, _M3eMenuTriggerElement_instances, "m", _M3eMenuTriggerElement_handleClick).call(this, e));
546
+ }
547
+ /** The menu triggered by the element. */
548
+ get menu() {
549
+ return this.control?.tagName === "M3E-MENU" ? this.control : null;
550
+ }
551
+ /** @inheritdoc */
552
+ connectedCallback() {
553
+ super.connectedCallback();
554
+ this.parentElement?.addEventListener("click", __classPrivateFieldGet(this, _M3eMenuTriggerElement_clickHandler, "f"));
555
+ }
556
+ /** @inheritdoc */
557
+ disconnectedCallback() {
558
+ super.disconnectedCallback();
559
+ this.parentElement?.removeEventListener("click", __classPrivateFieldGet(this, _M3eMenuTriggerElement_clickHandler, "f"));
560
+ }
561
+ /** @inheritdoc */
562
+ attach(control) {
563
+ super.attach(control);
564
+ const menu = this.menu;
565
+ if (menu) {
566
+ if (this.parentElement) {
567
+ this.parentElement.ariaHasPopup = "menu";
568
+ this.parentElement.ariaExpanded = "false";
569
+ if (menu.id) {
570
+ addAriaReferencedId(this.parentElement, "aria-controls", menu.id);
331
571
  }
572
+ }
573
+ if (this.closest("m3e-menu")) {
574
+ menu.submenu = true;
575
+ }
332
576
  }
333
- /** @inheritdoc */
334
- detach() {
335
- if (this.parentElement) {
336
- this.parentElement.ariaHasPopup = null;
337
- this.parentElement.ariaExpanded = null;
338
- const menu = this.menu;
339
- if (menu?.id) {
340
- removeAriaReferencedId(this.parentElement, "aria-controls", menu.id);
341
- }
342
- }
343
- super.detach();
344
- }
345
- /** @inheritdoc */
346
- render() {
347
- return html `<slot></slot>`;
577
+ }
578
+ /** @inheritdoc */
579
+ detach() {
580
+ if (this.parentElement) {
581
+ this.parentElement.ariaHasPopup = null;
582
+ this.parentElement.ariaExpanded = null;
583
+ const menu = this.menu;
584
+ if (menu?.id) {
585
+ removeAriaReferencedId(this.parentElement, "aria-controls", menu.id);
586
+ }
348
587
  }
588
+ super.detach();
589
+ }
590
+ /** @inheritdoc */
591
+ render() {
592
+ return html`<slot></slot>`;
593
+ }
349
594
  };
350
595
  _M3eMenuTriggerElement_clickHandler = new WeakMap();
351
596
  _M3eMenuTriggerElement_instances = new WeakSet();
352
597
  _M3eMenuTriggerElement_handleClick = function _M3eMenuTriggerElement_handleClick(e) {
353
- if (!e.defaultPrevented && this.parentElement) {
354
- if (this.parentElement.tagName === "M3E-MENU-ITEM") {
355
- this.menu?.show(this.parentElement);
356
- }
357
- else {
358
- this.menu?.toggle(this.parentElement);
359
- }
598
+ if (!e.defaultPrevented && this.parentElement) {
599
+ if (this.parentElement.tagName === "M3E-MENU-ITEM") {
600
+ this.menu?.show(this.parentElement);
601
+ } else {
602
+ this.menu?.toggle(this.parentElement);
360
603
  }
604
+ }
361
605
  };
362
606
  /** The styles of the element. */
363
- M3eMenuTriggerElement.styles = css `
364
- :host {
365
- display: contents;
366
- }
367
- ::slotted(.material-icons) {
368
- font-size: inherit !important;
369
- }
370
- `;
371
- M3eMenuTriggerElement = __decorate([
372
- t$1("m3e-menu-trigger")
373
- ], M3eMenuTriggerElement);
607
+ M3eMenuTriggerElement.styles = css`:host { display: contents; } ::slotted(.material-icons) { font-size: inherit !important; }`;
608
+ M3eMenuTriggerElement = __decorate([t$1("m3e-menu-trigger")], M3eMenuTriggerElement);
374
609
 
375
610
  var _M3eMenuItemElement_instances, _M3eMenuItemElement_clickHandler, _M3eMenuItemElement_keyDownHandler, _M3eMenuItemElement_mouseEnterHandler, _M3eMenuItemElement_submenuTrigger, _M3eMenuItemElement_defaultSlotChangeHandler, _M3eMenuItemElement_iconSlotChangeHandler, _M3eMenuItemElement_trailingIconSlotChangeHandler, _M3eMenuItemElement_handleClick, _M3eMenuItemElement_handleKeyDown, _M3eMenuItemElement_handleMouseEnter;
376
611
  var M3eMenuItemElement_1;
@@ -466,53 +701,51 @@ var M3eMenuItemElement_1;
466
701
  * @cssprop --m3e-menu-item-icon-size - Font size for leading and trailing icons.
467
702
  */
468
703
  let M3eMenuItemElement = M3eMenuItemElement_1 = class M3eMenuItemElement extends LinkButton(Role(MenuItemElementBase, "menuitem")) {
469
- constructor() {
470
- super();
471
- _M3eMenuItemElement_instances.add(this);
472
- /** @private */ _M3eMenuItemElement_clickHandler.set(this, (e) => __classPrivateFieldGet(this, _M3eMenuItemElement_instances, "m", _M3eMenuItemElement_handleClick).call(this, e));
473
- /** @private */ _M3eMenuItemElement_keyDownHandler.set(this, (e) => __classPrivateFieldGet(this, _M3eMenuItemElement_instances, "m", _M3eMenuItemElement_handleKeyDown).call(this, e));
474
- /** @private */ _M3eMenuItemElement_mouseEnterHandler.set(this, () => __classPrivateFieldGet(this, _M3eMenuItemElement_instances, "m", _M3eMenuItemElement_handleMouseEnter).call(this));
475
- /** @private */ this._hasSubmenu = false;
476
- /** @private */ _M3eMenuItemElement_submenuTrigger.set(this, void 0);
477
- new HoverController(this, {
478
- startDelay: 500,
479
- endDelay: 500,
480
- callback: (hovering) => {
481
- if (hovering && !this.disabled && __classPrivateFieldGet(this, _M3eMenuItemElement_submenuTrigger, "f")) {
482
- __classPrivateFieldGet(this, _M3eMenuItemElement_submenuTrigger, "f").menu?.show(this);
483
- }
484
- },
485
- });
486
- }
487
- /** The submenu triggered by the item. */
488
- get submenu() {
489
- return __classPrivateFieldGet(this, _M3eMenuItemElement_submenuTrigger, "f")?.menu ?? null;
490
- }
491
- /** @inheritdoc */
492
- connectedCallback() {
493
- super.connectedCallback();
494
- this.addEventListener("click", __classPrivateFieldGet(this, _M3eMenuItemElement_clickHandler, "f"));
495
- this.addEventListener("keydown", __classPrivateFieldGet(this, _M3eMenuItemElement_keyDownHandler, "f"));
496
- this.addEventListener("mouseenter", __classPrivateFieldGet(this, _M3eMenuItemElement_mouseEnterHandler, "f"));
497
- }
498
- /** @inheritdoc */
499
- disconnectedCallback() {
500
- super.disconnectedCallback();
501
- this.removeEventListener("click", __classPrivateFieldGet(this, _M3eMenuItemElement_clickHandler, "f"));
502
- this.removeEventListener("keydown", __classPrivateFieldGet(this, _M3eMenuItemElement_keyDownHandler, "f"));
503
- this.removeEventListener("mouseenter", __classPrivateFieldGet(this, _M3eMenuItemElement_mouseEnterHandler, "f"));
504
- }
505
- /** @internal @inheritdoc */
506
- _renderContent() {
507
- return html `<slot name="icon" aria-hidden="true" @slotchange="${__classPrivateFieldGet(this, _M3eMenuItemElement_instances, "m", _M3eMenuItemElement_iconSlotChangeHandler)}"></slot>
508
- <span class="content"><slot @slotchange="${__classPrivateFieldGet(this, _M3eMenuItemElement_instances, "m", _M3eMenuItemElement_defaultSlotChangeHandler)}"></slot></span>
509
- ${this._hasSubmenu
510
- ? html `<svg class="trailing-icon" aria-hidden="true" viewBox="0 -960 960 960" fill="currentColor">
511
- <path d="M400-280v-400l200 200-200 200Z" />
512
- </svg>`
513
- : html `<slot name="trailing-icon" aria-hidden="true" @slotchange="${__classPrivateFieldGet(this, _M3eMenuItemElement_instances, "m", _M3eMenuItemElement_trailingIconSlotChangeHandler)}">
514
- </slot>`}`;
515
- }
704
+ constructor() {
705
+ super();
706
+ _M3eMenuItemElement_instances.add(this);
707
+ /** @private */
708
+ _M3eMenuItemElement_clickHandler.set(this, e => __classPrivateFieldGet(this, _M3eMenuItemElement_instances, "m", _M3eMenuItemElement_handleClick).call(this, e));
709
+ /** @private */
710
+ _M3eMenuItemElement_keyDownHandler.set(this, e => __classPrivateFieldGet(this, _M3eMenuItemElement_instances, "m", _M3eMenuItemElement_handleKeyDown).call(this, e));
711
+ /** @private */
712
+ _M3eMenuItemElement_mouseEnterHandler.set(this, () => __classPrivateFieldGet(this, _M3eMenuItemElement_instances, "m", _M3eMenuItemElement_handleMouseEnter).call(this));
713
+ /** @private */
714
+ this._hasSubmenu = false;
715
+ /** @private */
716
+ _M3eMenuItemElement_submenuTrigger.set(this, void 0);
717
+ new HoverController(this, {
718
+ startDelay: 500,
719
+ endDelay: 500,
720
+ callback: hovering => {
721
+ if (hovering && !this.disabled && __classPrivateFieldGet(this, _M3eMenuItemElement_submenuTrigger, "f")) {
722
+ __classPrivateFieldGet(this, _M3eMenuItemElement_submenuTrigger, "f").menu?.show(this);
723
+ }
724
+ }
725
+ });
726
+ }
727
+ /** The submenu triggered by the item. */
728
+ get submenu() {
729
+ return __classPrivateFieldGet(this, _M3eMenuItemElement_submenuTrigger, "f")?.menu ?? null;
730
+ }
731
+ /** @inheritdoc */
732
+ connectedCallback() {
733
+ super.connectedCallback();
734
+ this.addEventListener("click", __classPrivateFieldGet(this, _M3eMenuItemElement_clickHandler, "f"));
735
+ this.addEventListener("keydown", __classPrivateFieldGet(this, _M3eMenuItemElement_keyDownHandler, "f"));
736
+ this.addEventListener("mouseenter", __classPrivateFieldGet(this, _M3eMenuItemElement_mouseEnterHandler, "f"));
737
+ }
738
+ /** @inheritdoc */
739
+ disconnectedCallback() {
740
+ super.disconnectedCallback();
741
+ this.removeEventListener("click", __classPrivateFieldGet(this, _M3eMenuItemElement_clickHandler, "f"));
742
+ this.removeEventListener("keydown", __classPrivateFieldGet(this, _M3eMenuItemElement_keyDownHandler, "f"));
743
+ this.removeEventListener("mouseenter", __classPrivateFieldGet(this, _M3eMenuItemElement_mouseEnterHandler, "f"));
744
+ }
745
+ /** @internal @inheritdoc */
746
+ _renderContent() {
747
+ return html`<slot name="icon" aria-hidden="true" @slotchange="${__classPrivateFieldGet(this, _M3eMenuItemElement_instances, "m", _M3eMenuItemElement_iconSlotChangeHandler)}"></slot><span class="content"><slot @slotchange="${__classPrivateFieldGet(this, _M3eMenuItemElement_instances, "m", _M3eMenuItemElement_defaultSlotChangeHandler)}"></slot></span>${this._hasSubmenu ? M3eDirectionality.current === "ltr" ? html`<svg class="trailing-icon" aria-hidden="true" viewBox="0 -960 960 960" fill="currentColor"><path d="M400-280v-400l200 200-200 200Z"/></svg>` : html`<svg class="trailing-icon" aria-hidden="true" viewBox="0 -960 960 960" fill="currentColor"><path d="M560-280 360-480l200-200v400Z"/></svg>` : html`<slot name="trailing-icon" aria-hidden="true" @slotchange="${__classPrivateFieldGet(this, _M3eMenuItemElement_instances, "m", _M3eMenuItemElement_trailingIconSlotChangeHandler)}"></slot>`}`;
748
+ }
516
749
  };
517
750
  _M3eMenuItemElement_clickHandler = new WeakMap();
518
751
  _M3eMenuItemElement_keyDownHandler = new WeakMap();
@@ -520,46 +753,50 @@ _M3eMenuItemElement_mouseEnterHandler = new WeakMap();
520
753
  _M3eMenuItemElement_submenuTrigger = new WeakMap();
521
754
  _M3eMenuItemElement_instances = new WeakSet();
522
755
  _M3eMenuItemElement_defaultSlotChangeHandler = function _M3eMenuItemElement_defaultSlotChangeHandler(e) {
523
- __classPrivateFieldSet(this, _M3eMenuItemElement_submenuTrigger, e.target
524
- .assignedElements({ flatten: true })
525
- .find((x) => x instanceof M3eMenuTriggerElement), "f");
526
- this._hasSubmenu = __classPrivateFieldGet(this, _M3eMenuItemElement_submenuTrigger, "f") !== undefined;
756
+ __classPrivateFieldSet(this, _M3eMenuItemElement_submenuTrigger, e.target.assignedElements({
757
+ flatten: true
758
+ }).find(x => x instanceof M3eMenuTriggerElement), "f");
759
+ this._hasSubmenu = __classPrivateFieldGet(this, _M3eMenuItemElement_submenuTrigger, "f") !== undefined;
527
760
  };
528
761
  _M3eMenuItemElement_iconSlotChangeHandler = function _M3eMenuItemElement_iconSlotChangeHandler(e) {
529
- this.classList.toggle("-with-icon", hasAssignedNodes(e.target));
762
+ this.classList.toggle("-with-icon", hasAssignedNodes(e.target));
530
763
  };
531
764
  _M3eMenuItemElement_trailingIconSlotChangeHandler = function _M3eMenuItemElement_trailingIconSlotChangeHandler(e) {
532
- this.classList.toggle("-with-trailing-icon", hasAssignedNodes(e.target));
765
+ this.classList.toggle("-with-trailing-icon", hasAssignedNodes(e.target));
533
766
  };
534
767
  _M3eMenuItemElement_handleClick = function _M3eMenuItemElement_handleClick(e) {
535
- if (!e.defaultPrevented && !this._hasSubmenu) {
536
- this.menu?.hideAll(true);
537
- }
768
+ if (!e.defaultPrevented && !this._hasSubmenu) {
769
+ this.menu?.hideAll(true);
770
+ }
538
771
  };
539
772
  _M3eMenuItemElement_handleKeyDown = function _M3eMenuItemElement_handleKeyDown(e) {
540
- if (e.defaultPrevented || this.disabled)
541
- return;
542
- switch (e.key) {
543
- case "Right":
544
- case "ArrowRight":
545
- e.preventDefault();
546
- this.submenu?.show(this);
547
- break;
548
- }
773
+ if (e.defaultPrevented || this.disabled) return;
774
+ switch (e.key) {
775
+ case "Right":
776
+ case "ArrowRight":
777
+ if (M3eDirectionality.current === "ltr") {
778
+ e.preventDefault();
779
+ this.submenu?.show(this);
780
+ }
781
+ break;
782
+ case "Left":
783
+ case "ArrowLeft":
784
+ if (M3eDirectionality.current === "rtl") {
785
+ e.preventDefault();
786
+ this.submenu?.show(this);
787
+ }
788
+ break;
789
+ }
549
790
  };
550
791
  _M3eMenuItemElement_handleMouseEnter = function _M3eMenuItemElement_handleMouseEnter() {
551
- this.menu?.items.forEach((item) => {
552
- if (item instanceof M3eMenuItemElement_1 && item !== this && item.submenu?.isOpen) {
553
- item.submenu.hide();
554
- }
555
- });
792
+ this.menu?.items.forEach(item => {
793
+ if (item instanceof M3eMenuItemElement_1 && item !== this && item.submenu?.isOpen) {
794
+ item.submenu.hide();
795
+ }
796
+ });
556
797
  };
557
- __decorate([
558
- r()
559
- ], M3eMenuItemElement.prototype, "_hasSubmenu", void 0);
560
- M3eMenuItemElement = M3eMenuItemElement_1 = __decorate([
561
- t$1("m3e-menu-item")
562
- ], M3eMenuItemElement);
798
+ __decorate([r()], M3eMenuItemElement.prototype, "_hasSubmenu", void 0);
799
+ M3eMenuItemElement = M3eMenuItemElement_1 = __decorate([t$1("m3e-menu-item")], M3eMenuItemElement);
563
800
 
564
801
  var _M3eMenuElement_instances, _M3eMenuElement_trigger, _M3eMenuElement_anchorCleanup, _M3eMenuElement_listManager, _M3eMenuElement_keyDownHandler, _M3eMenuElement_documentClickHandler, _M3eMenuElement_scrollController, _M3eMenuElement_toggleHandler, _M3eMenuElement_handleSlotChange, _M3eMenuElement_handleKeyDown, _M3eMenuElement_handleDocumentClick, _M3eMenuElement_getAbsolutePosition;
565
802
  var M3eMenuElement_1;
@@ -636,175 +873,172 @@ var M3eMenuElement_1;
636
873
  * @cssprop --m3e-menu-divider-spacing - Vertical spacing around slotted `m3e-divider` elements.
637
874
  */
638
875
  let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends Role(LitElement, "menu") {
639
- constructor() {
640
- super(...arguments);
641
- _M3eMenuElement_instances.add(this);
642
- /** @private */ _M3eMenuElement_trigger.set(this, void 0);
643
- /** @private */ _M3eMenuElement_anchorCleanup.set(this, void 0);
644
- /** @private */ _M3eMenuElement_listManager.set(this, new RovingTabIndexManager()
645
- .withWrap()
646
- .withHomeAndEnd()
647
- .withVerticalOrientation());
648
- /** @private */ _M3eMenuElement_keyDownHandler.set(this, (e) => __classPrivateFieldGet(this, _M3eMenuElement_instances, "m", _M3eMenuElement_handleKeyDown).call(this, e));
649
- /** @private */ _M3eMenuElement_documentClickHandler.set(this, (e) => __classPrivateFieldGet(this, _M3eMenuElement_instances, "m", _M3eMenuElement_handleDocumentClick).call(this, e));
650
- /** @private */ _M3eMenuElement_scrollController.set(this, new ScrollController(this, {
651
- target: null,
652
- callback: (target) => target instanceof M3eMenuElement_1
653
- ? target.items.filter((x) => x instanceof M3eMenuItemElement).forEach((x) => x.submenu?.hide())
654
- : this.hideAll(),
655
- }));
656
- /** @private */ _M3eMenuElement_toggleHandler.set(this, (e) => {
657
- if (e.newState === "closed") {
658
- __classPrivateFieldGet(this, _M3eMenuElement_anchorCleanup, "f")?.call(this);
659
- __classPrivateFieldSet(this, _M3eMenuElement_anchorCleanup, undefined, "f");
660
- }
661
- else {
662
- setTimeout(() => {
663
- __classPrivateFieldGet(this, _M3eMenuElement_listManager, "f").setActiveItem(__classPrivateFieldGet(this, _M3eMenuElement_listManager, "f").items.find((x) => !x.disabled));
664
- }, 40);
665
- }
666
- });
667
- /**
668
- * The position of the menu, on the x-axis.
669
- * @default "after"
670
- */
671
- this.positionX = "after";
672
- /**
673
- * The position of the menu, on the y-axis.
674
- * @default "below"
675
- */
676
- this.positionY = "below";
677
- /** A value indicating whether the menu is a submenu. */
678
- this.submenu = false;
679
- }
680
- /** The items of the menu. */
681
- get items() {
682
- return __classPrivateFieldGet(this, _M3eMenuElement_listManager, "f").items;
683
- }
684
- /** A value indicating whether the menu is open. */
685
- get isOpen() {
686
- return __classPrivateFieldGet(this, _M3eMenuElement_trigger, "f") !== undefined;
687
- }
688
- /** @inheritdoc */
689
- connectedCallback() {
690
- super.connectedCallback();
691
- this.tabIndex = -1;
692
- this.classList.add("-no-animate");
693
- this.setAttribute("popover", "manual");
694
- this.addEventListener("keydown", __classPrivateFieldGet(this, _M3eMenuElement_keyDownHandler, "f"));
695
- this.addEventListener("toggle", __classPrivateFieldGet(this, _M3eMenuElement_toggleHandler, "f"));
696
- document.addEventListener("click", __classPrivateFieldGet(this, _M3eMenuElement_documentClickHandler, "f"));
697
- }
698
- /** @inheritdoc */
699
- disconnectedCallback() {
700
- super.disconnectedCallback();
701
- this.removeEventListener("keydown", __classPrivateFieldGet(this, _M3eMenuElement_keyDownHandler, "f"));
702
- this.removeEventListener("toggle", __classPrivateFieldGet(this, _M3eMenuElement_toggleHandler, "f"));
703
- document.removeEventListener("click", __classPrivateFieldGet(this, _M3eMenuElement_documentClickHandler, "f"));
704
- }
876
+ constructor() {
877
+ super(...arguments);
878
+ _M3eMenuElement_instances.add(this);
879
+ /** @private */
880
+ _M3eMenuElement_trigger.set(this, void 0);
881
+ /** @private */
882
+ _M3eMenuElement_anchorCleanup.set(this, void 0);
883
+ /** @private */
884
+ _M3eMenuElement_listManager.set(this, new RovingTabIndexManager().withWrap().withHomeAndEnd().withVerticalOrientation());
885
+ /** @private */
886
+ _M3eMenuElement_keyDownHandler.set(this, e => __classPrivateFieldGet(this, _M3eMenuElement_instances, "m", _M3eMenuElement_handleKeyDown).call(this, e));
887
+ /** @private */
888
+ _M3eMenuElement_documentClickHandler.set(this, e => __classPrivateFieldGet(this, _M3eMenuElement_instances, "m", _M3eMenuElement_handleDocumentClick).call(this, e));
889
+ /** @private */
890
+ _M3eMenuElement_scrollController.set(this, new ScrollController(this, {
891
+ target: null,
892
+ callback: target => target instanceof M3eMenuElement_1 ? target.items.filter(x => x instanceof M3eMenuItemElement).forEach(x => x.submenu?.hide()) : this.hideAll()
893
+ }));
894
+ /** @private */
895
+ _M3eMenuElement_toggleHandler.set(this, e => {
896
+ if (e.newState === "closed") {
897
+ __classPrivateFieldGet(this, _M3eMenuElement_anchorCleanup, "f")?.call(this);
898
+ __classPrivateFieldSet(this, _M3eMenuElement_anchorCleanup, undefined, "f");
899
+ } else {
900
+ setTimeout(() => {
901
+ __classPrivateFieldGet(this, _M3eMenuElement_listManager, "f").setActiveItem(__classPrivateFieldGet(this, _M3eMenuElement_listManager, "f").items.find(x => !x.disabled));
902
+ }, 40);
903
+ }
904
+ });
705
905
  /**
706
- * Opens the menu.
707
- * @param {HTMLElement} trigger The element that triggered the menu.
708
- * @returns {Promise<void>} A `Promise` that resolves when the menu is opened.
906
+ * The position of the menu, on the x-axis.
907
+ * @default "after"
709
908
  */
710
- async show(trigger) {
711
- if (__classPrivateFieldGet(this, _M3eMenuElement_trigger, "f") && __classPrivateFieldGet(this, _M3eMenuElement_trigger, "f") !== trigger) {
712
- this.hide();
713
- }
714
- __classPrivateFieldSet(this, _M3eMenuElement_anchorCleanup, await positionAnchor(this, trigger, {
715
- position: this.submenu
716
- ? this.positionX === "before"
717
- ? "left-start"
718
- : "right-start"
719
- : this.positionY === "above"
720
- ? this.positionX === "before"
721
- ? "top-end"
722
- : "top-start"
723
- : this.positionX === "before"
724
- ? "bottom-end"
725
- : "bottom-start",
726
- inline: true,
727
- flip: true,
728
- shift: true,
729
- offset: !this.submenu ? 4 : undefined,
730
- }, (x, y, position) => {
731
- if (!this.submenu) {
732
- this.classList.toggle("-top", position.includes("top"));
733
- this.classList.toggle("-bottom", position.includes("bottom"));
734
- }
735
- else if (__classPrivateFieldGet(this, _M3eMenuElement_trigger, "f")) {
736
- const top = __classPrivateFieldGet(this, _M3eMenuElement_instances, "m", _M3eMenuElement_getAbsolutePosition).call(this, __classPrivateFieldGet(this, _M3eMenuElement_trigger, "f")).y;
737
- this.classList.toggle("-shift-down", false);
738
- this.classList.toggle("-shift-up", false);
739
- this.classList.toggle(Math.round(y) === Math.round(top) ? "-shift-down" : "-shift-up", true);
740
- }
741
- this.style.left = `${x}px`;
742
- this.style.top = `${y}px`;
743
- }), "f");
744
- this.showPopover();
745
- __classPrivateFieldSet(this, _M3eMenuElement_trigger, trigger, "f");
746
- __classPrivateFieldGet(this, _M3eMenuElement_trigger, "f").ariaExpanded = "true";
747
- __classPrivateFieldGet(this, _M3eMenuElement_scrollController, "f").observe(__classPrivateFieldGet(this, _M3eMenuElement_trigger, "f"));
748
- }
909
+ this.positionX = "after";
749
910
  /**
750
- * Hides the menu.
751
- * @param {boolean} [restoreFocus=false] A value indicating whether to restore focus to the menu's trigger.
911
+ * The position of the menu, on the y-axis.
912
+ * @default "below"
752
913
  */
753
- hide(restoreFocus = false) {
754
- for (const item of __classPrivateFieldGet(this, _M3eMenuElement_listManager, "f").items) {
755
- const submenu = item.submenu;
756
- if (submenu && submenu.isOpen) {
757
- submenu.hide();
758
- }
759
- }
760
- this.hidePopover();
761
- if (__classPrivateFieldGet(this, _M3eMenuElement_trigger, "f")) {
762
- __classPrivateFieldGet(this, _M3eMenuElement_trigger, "f").ariaExpanded = "false";
763
- if (restoreFocus) {
764
- __classPrivateFieldGet(this, _M3eMenuElement_trigger, "f").focus();
765
- }
766
- __classPrivateFieldGet(this, _M3eMenuElement_scrollController, "f").unobserve(__classPrivateFieldGet(this, _M3eMenuElement_trigger, "f"));
767
- __classPrivateFieldSet(this, _M3eMenuElement_trigger, undefined, "f");
768
- }
914
+ this.positionY = "below";
915
+ /** A value indicating whether the menu is a submenu. */
916
+ this.submenu = false;
917
+ }
918
+ /** The items of the menu. */
919
+ get items() {
920
+ return __classPrivateFieldGet(this, _M3eMenuElement_listManager, "f").items;
921
+ }
922
+ /** A value indicating whether the menu is open. */
923
+ get isOpen() {
924
+ return __classPrivateFieldGet(this, _M3eMenuElement_trigger, "f") !== undefined;
925
+ }
926
+ /** @inheritdoc */
927
+ connectedCallback() {
928
+ super.connectedCallback();
929
+ this.tabIndex = -1;
930
+ this.classList.add("-no-animate");
931
+ this.setAttribute("popover", "manual");
932
+ this.addEventListener("keydown", __classPrivateFieldGet(this, _M3eMenuElement_keyDownHandler, "f"));
933
+ this.addEventListener("toggle", __classPrivateFieldGet(this, _M3eMenuElement_toggleHandler, "f"));
934
+ document.addEventListener("click", __classPrivateFieldGet(this, _M3eMenuElement_documentClickHandler, "f"));
935
+ }
936
+ /** @inheritdoc */
937
+ disconnectedCallback() {
938
+ super.disconnectedCallback();
939
+ this.removeEventListener("keydown", __classPrivateFieldGet(this, _M3eMenuElement_keyDownHandler, "f"));
940
+ this.removeEventListener("toggle", __classPrivateFieldGet(this, _M3eMenuElement_toggleHandler, "f"));
941
+ document.removeEventListener("click", __classPrivateFieldGet(this, _M3eMenuElement_documentClickHandler, "f"));
942
+ }
943
+ /**
944
+ * Opens the menu.
945
+ * @param {HTMLElement} trigger The element that triggered the menu.
946
+ * @returns {Promise<void>} A `Promise` that resolves when the menu is opened.
947
+ */
948
+ async show(trigger) {
949
+ if (__classPrivateFieldGet(this, _M3eMenuElement_trigger, "f") && __classPrivateFieldGet(this, _M3eMenuElement_trigger, "f") !== trigger) {
950
+ this.hide();
769
951
  }
770
- /**
771
- * Closes this menu and any parenting menus.
772
- * @param {boolean} [restoreFocus=false] A value indicating whether to restore focus to the menu's trigger.
773
- */
774
- hideAll(restoreFocus = false) {
775
- // eslint-disable-next-line @typescript-eslint/no-this-alias
776
- let menu = this;
777
- while (__classPrivateFieldGet(menu, _M3eMenuElement_trigger, "f")) {
778
- const parent = __classPrivateFieldGet(menu, _M3eMenuElement_trigger, "f").closest("m3e-menu");
779
- if (!parent) {
780
- break;
781
- }
782
- menu = parent;
783
- }
784
- menu.hide(restoreFocus);
952
+ let positionX = this.positionX;
953
+ if (M3eDirectionality.current === "rtl") {
954
+ positionX = positionX === "before" ? "after" : "before";
785
955
  }
786
- /**
787
- * Toggles the menu.
788
- * @param {HTMLElement} trigger The element that triggered the menu.
789
- * @returns {Promise<void>} A `Promise` that resolves when the menu is opened or closed.
790
- */
791
- async toggle(trigger) {
792
- if (__classPrivateFieldGet(this, _M3eMenuElement_trigger, "f")) {
793
- this.hide();
794
- }
795
- else {
796
- await this.show(trigger);
797
- }
956
+ __classPrivateFieldSet(this, _M3eMenuElement_anchorCleanup, await positionAnchor(this, trigger, {
957
+ position: this.submenu ? positionX === "before" ? "left-start" : "right-start" : this.positionY === "above" ? positionX === "before" ? "top-end" : "top-start" : positionX === "before" ? "bottom-end" : "bottom-start",
958
+ inline: true,
959
+ flip: true,
960
+ shift: true,
961
+ offset: !this.submenu ? 4 : undefined
962
+ }, (x, y, position) => {
963
+ if (!this.submenu) {
964
+ this.classList.toggle("-top", position.includes("top"));
965
+ this.classList.toggle("-bottom", position.includes("bottom"));
966
+ } else if (__classPrivateFieldGet(this, _M3eMenuElement_trigger, "f")) {
967
+ const top = __classPrivateFieldGet(this, _M3eMenuElement_instances, "m", _M3eMenuElement_getAbsolutePosition).call(this, __classPrivateFieldGet(this, _M3eMenuElement_trigger, "f")).y;
968
+ this.classList.toggle("-shift-down", false);
969
+ this.classList.toggle("-shift-up", false);
970
+ this.classList.toggle(Math.round(y) === Math.round(top) ? "-shift-down" : "-shift-up", true);
971
+ }
972
+ if (M3eDirectionality.current === "rtl") {
973
+ this.style.right = `${window.innerWidth - x - this.clientWidth}px`;
974
+ } else {
975
+ this.style.left = `${x}px`;
976
+ }
977
+ this.style.top = `${y}px`;
978
+ }), "f");
979
+ this.showPopover();
980
+ __classPrivateFieldSet(this, _M3eMenuElement_trigger, trigger, "f");
981
+ __classPrivateFieldGet(this, _M3eMenuElement_trigger, "f").ariaExpanded = "true";
982
+ __classPrivateFieldGet(this, _M3eMenuElement_scrollController, "f").observe(__classPrivateFieldGet(this, _M3eMenuElement_trigger, "f"));
983
+ }
984
+ /**
985
+ * Hides the menu.
986
+ * @param {boolean} [restoreFocus=false] A value indicating whether to restore focus to the menu's trigger.
987
+ */
988
+ hide(restoreFocus = false) {
989
+ for (const item of __classPrivateFieldGet(this, _M3eMenuElement_listManager, "f").items) {
990
+ const submenu = item.submenu;
991
+ if (submenu && submenu.isOpen) {
992
+ submenu.hide();
993
+ }
994
+ }
995
+ this.hidePopover();
996
+ if (__classPrivateFieldGet(this, _M3eMenuElement_trigger, "f")) {
997
+ __classPrivateFieldGet(this, _M3eMenuElement_trigger, "f").ariaExpanded = "false";
998
+ if (restoreFocus) {
999
+ __classPrivateFieldGet(this, _M3eMenuElement_trigger, "f").focus();
1000
+ }
1001
+ __classPrivateFieldGet(this, _M3eMenuElement_scrollController, "f").unobserve(__classPrivateFieldGet(this, _M3eMenuElement_trigger, "f"));
1002
+ __classPrivateFieldSet(this, _M3eMenuElement_trigger, undefined, "f");
798
1003
  }
799
- /** @inheritdoc */
800
- render() {
801
- return html `<slot @slotchange="${__classPrivateFieldGet(this, _M3eMenuElement_instances, "m", _M3eMenuElement_handleSlotChange)}"></slot>`;
1004
+ }
1005
+ /**
1006
+ * Closes this menu and any parenting menus.
1007
+ * @param {boolean} [restoreFocus=false] A value indicating whether to restore focus to the menu's trigger.
1008
+ */
1009
+ hideAll(restoreFocus = false) {
1010
+ // eslint-disable-next-line @typescript-eslint/no-this-alias
1011
+ let menu = this;
1012
+ while (__classPrivateFieldGet(menu, _M3eMenuElement_trigger, "f")) {
1013
+ const parent = __classPrivateFieldGet(menu, _M3eMenuElement_trigger, "f").closest("m3e-menu");
1014
+ if (!parent) {
1015
+ break;
1016
+ }
1017
+ menu = parent;
802
1018
  }
803
- /** @inheritdoc */
804
- firstUpdated(_changedProperties) {
805
- super.firstUpdated(_changedProperties);
806
- requestAnimationFrame(() => this.classList.remove("-no-animate"));
1019
+ menu.hide(restoreFocus);
1020
+ }
1021
+ /**
1022
+ * Toggles the menu.
1023
+ * @param {HTMLElement} trigger The element that triggered the menu.
1024
+ * @returns {Promise<void>} A `Promise` that resolves when the menu is opened or closed.
1025
+ */
1026
+ async toggle(trigger) {
1027
+ if (__classPrivateFieldGet(this, _M3eMenuElement_trigger, "f")) {
1028
+ this.hide();
1029
+ } else {
1030
+ await this.show(trigger);
807
1031
  }
1032
+ }
1033
+ /** @inheritdoc */
1034
+ render() {
1035
+ return html`<slot @slotchange="${__classPrivateFieldGet(this, _M3eMenuElement_instances, "m", _M3eMenuElement_handleSlotChange)}"></slot>`;
1036
+ }
1037
+ /** @inheritdoc */
1038
+ firstUpdated(_changedProperties) {
1039
+ super.firstUpdated(_changedProperties);
1040
+ requestAnimationFrame(() => this.classList.remove("-no-animate"));
1041
+ }
808
1042
  };
809
1043
  _M3eMenuElement_trigger = new WeakMap();
810
1044
  _M3eMenuElement_anchorCleanup = new WeakMap();
@@ -815,134 +1049,79 @@ _M3eMenuElement_scrollController = new WeakMap();
815
1049
  _M3eMenuElement_toggleHandler = new WeakMap();
816
1050
  _M3eMenuElement_instances = new WeakSet();
817
1051
  _M3eMenuElement_handleSlotChange = function _M3eMenuElement_handleSlotChange() {
818
- const { added } = __classPrivateFieldGet(this, _M3eMenuElement_listManager, "f").setItems([
819
- ...this.querySelectorAll("m3e-menu-item,m3e-menu-item-checkbox,m3e-menu-item-radio"),
820
- ].filter((x) => x.closest("m3e-menu") === this));
821
- if (!__classPrivateFieldGet(this, _M3eMenuElement_listManager, "f").activeItem) {
822
- __classPrivateFieldGet(this, _M3eMenuElement_listManager, "f").updateActiveItem(added.find((x) => !x.disabled));
823
- }
1052
+ const {
1053
+ added
1054
+ } = __classPrivateFieldGet(this, _M3eMenuElement_listManager, "f").setItems([...this.querySelectorAll("m3e-menu-item,m3e-menu-item-checkbox,m3e-menu-item-radio")].filter(x => x.closest("m3e-menu") === this));
1055
+ if (!__classPrivateFieldGet(this, _M3eMenuElement_listManager, "f").activeItem) {
1056
+ __classPrivateFieldGet(this, _M3eMenuElement_listManager, "f").updateActiveItem(added.find(x => !x.disabled));
1057
+ }
824
1058
  };
825
1059
  _M3eMenuElement_handleKeyDown = function _M3eMenuElement_handleKeyDown(e) {
826
- switch (e.key) {
827
- case "Left":
828
- case "ArrowLeft":
829
- e.preventDefault();
830
- this.hide(true);
831
- break;
832
- case "Tab":
833
- this.hideAll();
834
- break;
835
- case "Escape":
836
- if (!e.shiftKey && !e.ctrlKey) {
837
- this.hide(true);
838
- }
839
- break;
840
- default:
841
- __classPrivateFieldGet(this, _M3eMenuElement_listManager, "f").onKeyDown(e);
842
- break;
843
- }
1060
+ switch (e.key) {
1061
+ case "Right":
1062
+ case "ArrowRight":
1063
+ if (M3eDirectionality.current === "rtl") {
1064
+ e.preventDefault();
1065
+ this.hide(true);
1066
+ } else {
1067
+ __classPrivateFieldGet(this, _M3eMenuElement_listManager, "f").onKeyDown(e);
1068
+ }
1069
+ break;
1070
+ case "Left":
1071
+ case "ArrowLeft":
1072
+ if (M3eDirectionality.current === "ltr") {
1073
+ e.preventDefault();
1074
+ this.hide(true);
1075
+ } else {
1076
+ __classPrivateFieldGet(this, _M3eMenuElement_listManager, "f").onKeyDown(e);
1077
+ }
1078
+ break;
1079
+ case "Tab":
1080
+ this.hideAll();
1081
+ break;
1082
+ case "Escape":
1083
+ if (!e.shiftKey && !e.ctrlKey) {
1084
+ this.hide(true);
1085
+ }
1086
+ break;
1087
+ default:
1088
+ __classPrivateFieldGet(this, _M3eMenuElement_listManager, "f").onKeyDown(e);
1089
+ break;
1090
+ }
844
1091
  };
845
1092
  _M3eMenuElement_handleDocumentClick = function _M3eMenuElement_handleDocumentClick(e) {
846
- if (!this.submenu && !e.composedPath().some((x) => x instanceof M3eMenuElement_1 || x === __classPrivateFieldGet(this, _M3eMenuElement_trigger, "f"))) {
847
- this.hide();
848
- }
1093
+ if (!this.submenu && !e.composedPath().some(x => x instanceof M3eMenuElement_1 || x === __classPrivateFieldGet(this, _M3eMenuElement_trigger, "f"))) {
1094
+ this.hide();
1095
+ }
849
1096
  };
850
1097
  _M3eMenuElement_getAbsolutePosition = function _M3eMenuElement_getAbsolutePosition(element) {
851
- let x = 0, y = 0;
852
- for (let current = element; current; current = current.offsetParent instanceof HTMLElement ? current.offsetParent : null) {
853
- x += current.offsetLeft - current.scrollLeft + current.clientLeft;
854
- y += current.offsetTop - current.scrollTop + current.clientTop;
855
- }
856
- return { x, y };
1098
+ let x = 0,
1099
+ y = 0;
1100
+ for (let current = element; current; current = current.offsetParent instanceof HTMLElement ? current.offsetParent : null) {
1101
+ x += current.offsetLeft - current.scrollLeft + current.clientLeft;
1102
+ y += current.offsetTop - current.scrollTop + current.clientTop;
1103
+ }
1104
+ return {
1105
+ x,
1106
+ y
1107
+ };
857
1108
  };
858
1109
  /** The styles of the element. */
859
- M3eMenuElement.styles = css `
860
- :host {
861
- position: absolute;
862
- flex-direction: column;
863
- padding: unset;
864
- margin: unset;
865
- border: unset;
866
- overflow-y: auto;
867
- scrollbar-width: ${DesignToken.scrollbar.thinWidth};
868
- scrollbar-color: ${DesignToken.scrollbar.color};
869
- border-radius: var(--m3e-menu-container-shape, ${DesignToken.shape.corner.extraSmall});
870
- min-width: var(--m3e-menu-container-min-width, 7rem);
871
- max-width: var(--m3e-menu-container-max-width, 17.5rem);
872
- max-height: var(--m3e-menu-container-max-height, 17.5rem);
873
- padding-block: var(--m3e-menu-container-padding-block, 0.5rem);
874
- background-color: var(--m3e-menu-container-color, ${DesignToken.color.surfaceContainer});
875
- box-shadow: var(--m3e-menu-container-elevation, ${DesignToken.elevation.level3});
876
- opacity: 0;
877
- display: none;
878
- }
879
- :host(:not(.-no-animate)) {
880
- transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard},
881
- transform ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard},
882
- overlay ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete,
883
- display ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete`)};
884
- }
885
- :host(:not([submenu])) {
886
- transform: scaleY(0.8);
887
- }
888
- :host(:not([submenu]):popover-open) {
889
- transform: scaleY(1);
890
- }
891
- :host::backdrop {
892
- background-color: transparent;
893
- }
894
- :host(:popover-open) {
895
- display: inline-flex;
896
- opacity: 1;
897
- }
898
- :host(.-bottom) {
899
- transform-origin: top;
900
- }
901
- :host(.-top) {
902
- transform-origin: bottom;
903
- }
904
- :host(.-shift-down) {
905
- margin-top: calc(0px - var(--m3e-menu-container-padding-block, 0.5rem));
906
- }
907
- :host(.-shift-up) {
908
- margin-top: var(--m3e-menu-container-padding-block, 0.5rem);
909
- }
910
- ::slotted(m3e-divider) {
911
- margin-block: var(--m3e-menu-divider-spacing, 0.5rem);
912
- }
913
- @starting-style {
914
- :host(:popover-open) {
915
- opacity: 0;
916
- }
917
- :host(:not([submenu]):popover-open) {
918
- transform: scaleY(0.8);
919
- }
920
- }
921
- @media (prefers-reduced-motion) {
922
- :host(:not(.-no-animate)) {
923
- transition: none;
924
- }
925
- }
926
- @media (forced-colors: active) {
927
- :host {
928
- background-color: Menu;
929
- color: MenuText;
930
- border: 1px solid CanvasText;
931
- }
932
- }
933
- `;
934
- __decorate([
935
- n({ attribute: "position-x" })
936
- ], M3eMenuElement.prototype, "positionX", void 0);
937
- __decorate([
938
- n({ attribute: "position-y" })
939
- ], M3eMenuElement.prototype, "positionY", void 0);
940
- __decorate([
941
- n({ type: Boolean, reflect: true })
942
- ], M3eMenuElement.prototype, "submenu", void 0);
943
- M3eMenuElement = M3eMenuElement_1 = __decorate([
944
- t$1("m3e-menu")
945
- ], M3eMenuElement);
1110
+ M3eMenuElement.styles = css`:host { position: absolute; flex-direction: column; padding: unset; margin: unset; border: unset; overflow-y: auto; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; border-radius: var(--m3e-menu-container-shape, ${DesignToken.shape.corner.extraSmall}); min-width: var(--m3e-menu-container-min-width, 7rem); max-width: var(--m3e-menu-container-max-width, 17.5rem); max-height: var(--m3e-menu-container-max-height, 17.5rem); padding-block: var(--m3e-menu-container-padding-block, 0.5rem); background-color: var(--m3e-menu-container-color, ${DesignToken.color.surfaceContainer}); box-shadow: var(--m3e-menu-container-elevation, ${DesignToken.elevation.level3}); opacity: 0; display: none; } :host(:not(.-no-animate)) { transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard},
1111
+ transform ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard},
1112
+ overlay ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete,
1113
+ display ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete`)}; } :host(:not([submenu])) { transform: scaleY(0.8); } :host(:not([submenu]):popover-open) { transform: scaleY(1); } :host::backdrop { background-color: transparent; } :host(:popover-open) { display: inline-flex; opacity: 1; } :host(.-bottom) { transform-origin: top; } :host(.-top) { transform-origin: bottom; } :host(.-shift-down) { margin-top: calc(0px - var(--m3e-menu-container-padding-block, 0.5rem)); } :host(.-shift-up) { margin-top: var(--m3e-menu-container-padding-block, 0.5rem); } ::slotted(m3e-divider) { margin-block: var(--m3e-menu-divider-spacing, 0.5rem); } @starting-style { :host(:popover-open) { opacity: 0; } :host(:not([submenu]):popover-open) { transform: scaleY(0.8); } } @media (prefers-reduced-motion) { :host(:not(.-no-animate)) { transition: none; } } @media (forced-colors: active) { :host { background-color: Menu; color: MenuText; border: 1px solid CanvasText; } }`;
1114
+ __decorate([n({
1115
+ attribute: "position-x"
1116
+ })], M3eMenuElement.prototype, "positionX", void 0);
1117
+ __decorate([n({
1118
+ attribute: "position-y"
1119
+ })], M3eMenuElement.prototype, "positionY", void 0);
1120
+ __decorate([n({
1121
+ type: Boolean,
1122
+ reflect: true
1123
+ })], M3eMenuElement.prototype, "submenu", void 0);
1124
+ M3eMenuElement = M3eMenuElement_1 = __decorate([t$1("m3e-menu")], M3eMenuElement);
946
1125
 
947
1126
  var _M3eMenuItemCheckboxElement_instances, _M3eMenuItemCheckboxElement_clickHandler, _M3eMenuItemCheckboxElement_keyDownHandler, _M3eMenuItemCheckboxElement_keyUpHandler, _M3eMenuItemCheckboxElement_mouseEnterHandler, _M3eMenuItemCheckboxElement_spacePressed, _M3eMenuItemCheckboxElement_handleIconSlotChange, _M3eMenuItemCheckboxElement_handleTrailingIconSlotChange, _M3eMenuItemCheckboxElement_handleClick, _M3eMenuItemCheckboxElement_handleKeyDown, _M3eMenuItemCheckboxElement_handleKeyUp, _M3eMenuItemCheckboxElement_handleMouseEnter;
948
1127
  /**
@@ -1002,42 +1181,40 @@ var _M3eMenuItemCheckboxElement_instances, _M3eMenuItemCheckboxElement_clickHand
1002
1181
  * @cssprop --m3e-menu-item-icon-size - Font size for leading and trailing icons.
1003
1182
  */
1004
1183
  let M3eMenuItemCheckboxElement = class M3eMenuItemCheckboxElement extends Checked(Role(MenuItemElementBase, "menuitemcheckbox")) {
1005
- constructor() {
1006
- super(...arguments);
1007
- _M3eMenuItemCheckboxElement_instances.add(this);
1008
- /** @internal */ _M3eMenuItemCheckboxElement_clickHandler.set(this, (e) => __classPrivateFieldGet(this, _M3eMenuItemCheckboxElement_instances, "m", _M3eMenuItemCheckboxElement_handleClick).call(this, e));
1009
- /** @internal */ _M3eMenuItemCheckboxElement_keyDownHandler.set(this, (e) => __classPrivateFieldGet(this, _M3eMenuItemCheckboxElement_instances, "m", _M3eMenuItemCheckboxElement_handleKeyDown).call(this, e));
1010
- /** @internal */ _M3eMenuItemCheckboxElement_keyUpHandler.set(this, () => __classPrivateFieldGet(this, _M3eMenuItemCheckboxElement_instances, "m", _M3eMenuItemCheckboxElement_handleKeyUp).call(this));
1011
- /** @internal */ _M3eMenuItemCheckboxElement_mouseEnterHandler.set(this, () => __classPrivateFieldGet(this, _M3eMenuItemCheckboxElement_instances, "m", _M3eMenuItemCheckboxElement_handleMouseEnter).call(this));
1012
- /** @internal */ _M3eMenuItemCheckboxElement_spacePressed.set(this, false);
1013
- }
1014
- /** @inheritdoc */
1015
- connectedCallback() {
1016
- super.connectedCallback();
1017
- this.addEventListener("click", __classPrivateFieldGet(this, _M3eMenuItemCheckboxElement_clickHandler, "f"));
1018
- this.addEventListener("keydown", __classPrivateFieldGet(this, _M3eMenuItemCheckboxElement_keyDownHandler, "f"));
1019
- this.addEventListener("keyup", __classPrivateFieldGet(this, _M3eMenuItemCheckboxElement_keyUpHandler, "f"));
1020
- this.addEventListener("mouseenter", __classPrivateFieldGet(this, _M3eMenuItemCheckboxElement_mouseEnterHandler, "f"));
1021
- }
1022
- /** @inheritdoc */
1023
- disconnectedCallback() {
1024
- super.disconnectedCallback();
1025
- this.removeEventListener("click", __classPrivateFieldGet(this, _M3eMenuItemCheckboxElement_clickHandler, "f"));
1026
- this.removeEventListener("keydown", __classPrivateFieldGet(this, _M3eMenuItemCheckboxElement_keyDownHandler, "f"));
1027
- this.removeEventListener("keyup", __classPrivateFieldGet(this, _M3eMenuItemCheckboxElement_keyUpHandler, "f"));
1028
- this.removeEventListener("mouseenter", __classPrivateFieldGet(this, _M3eMenuItemCheckboxElement_mouseEnterHandler, "f"));
1029
- }
1030
- /** @internal @inheritdoc */
1031
- _renderContent() {
1032
- return html ` <div class="icon">
1033
- <svg class="check" viewBox="0 -960 960 960" aria-hidden="true">
1034
- <path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" />
1035
- </svg>
1036
- <slot name="icon" @slotchange="${__classPrivateFieldGet(this, _M3eMenuItemCheckboxElement_instances, "m", _M3eMenuItemCheckboxElement_handleIconSlotChange)}"></slot>
1037
- </div>
1038
- <slot></slot>
1039
- <slot name="trailing-icon" aria-hidden="true" @slotchange="${__classPrivateFieldGet(this, _M3eMenuItemCheckboxElement_instances, "m", _M3eMenuItemCheckboxElement_handleTrailingIconSlotChange)}"></slot>`;
1040
- }
1184
+ constructor() {
1185
+ super(...arguments);
1186
+ _M3eMenuItemCheckboxElement_instances.add(this);
1187
+ /** @internal */
1188
+ _M3eMenuItemCheckboxElement_clickHandler.set(this, e => __classPrivateFieldGet(this, _M3eMenuItemCheckboxElement_instances, "m", _M3eMenuItemCheckboxElement_handleClick).call(this, e));
1189
+ /** @internal */
1190
+ _M3eMenuItemCheckboxElement_keyDownHandler.set(this, e => __classPrivateFieldGet(this, _M3eMenuItemCheckboxElement_instances, "m", _M3eMenuItemCheckboxElement_handleKeyDown).call(this, e));
1191
+ /** @internal */
1192
+ _M3eMenuItemCheckboxElement_keyUpHandler.set(this, () => __classPrivateFieldGet(this, _M3eMenuItemCheckboxElement_instances, "m", _M3eMenuItemCheckboxElement_handleKeyUp).call(this));
1193
+ /** @internal */
1194
+ _M3eMenuItemCheckboxElement_mouseEnterHandler.set(this, () => __classPrivateFieldGet(this, _M3eMenuItemCheckboxElement_instances, "m", _M3eMenuItemCheckboxElement_handleMouseEnter).call(this));
1195
+ /** @internal */
1196
+ _M3eMenuItemCheckboxElement_spacePressed.set(this, false);
1197
+ }
1198
+ /** @inheritdoc */
1199
+ connectedCallback() {
1200
+ super.connectedCallback();
1201
+ this.addEventListener("click", __classPrivateFieldGet(this, _M3eMenuItemCheckboxElement_clickHandler, "f"));
1202
+ this.addEventListener("keydown", __classPrivateFieldGet(this, _M3eMenuItemCheckboxElement_keyDownHandler, "f"));
1203
+ this.addEventListener("keyup", __classPrivateFieldGet(this, _M3eMenuItemCheckboxElement_keyUpHandler, "f"));
1204
+ this.addEventListener("mouseenter", __classPrivateFieldGet(this, _M3eMenuItemCheckboxElement_mouseEnterHandler, "f"));
1205
+ }
1206
+ /** @inheritdoc */
1207
+ disconnectedCallback() {
1208
+ super.disconnectedCallback();
1209
+ this.removeEventListener("click", __classPrivateFieldGet(this, _M3eMenuItemCheckboxElement_clickHandler, "f"));
1210
+ this.removeEventListener("keydown", __classPrivateFieldGet(this, _M3eMenuItemCheckboxElement_keyDownHandler, "f"));
1211
+ this.removeEventListener("keyup", __classPrivateFieldGet(this, _M3eMenuItemCheckboxElement_keyUpHandler, "f"));
1212
+ this.removeEventListener("mouseenter", __classPrivateFieldGet(this, _M3eMenuItemCheckboxElement_mouseEnterHandler, "f"));
1213
+ }
1214
+ /** @internal @inheritdoc */
1215
+ _renderContent() {
1216
+ return html`<div class="icon"><svg class="check" viewBox="0 -960 960 960" aria-hidden="true"><path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg><slot name="icon" @slotchange="${__classPrivateFieldGet(this, _M3eMenuItemCheckboxElement_instances, "m", _M3eMenuItemCheckboxElement_handleIconSlotChange)}"></slot></div><slot></slot><slot name="trailing-icon" aria-hidden="true" @slotchange="${__classPrivateFieldGet(this, _M3eMenuItemCheckboxElement_instances, "m", _M3eMenuItemCheckboxElement_handleTrailingIconSlotChange)}"></slot>`;
1217
+ }
1041
1218
  };
1042
1219
  _M3eMenuItemCheckboxElement_clickHandler = new WeakMap();
1043
1220
  _M3eMenuItemCheckboxElement_keyDownHandler = new WeakMap();
@@ -1046,63 +1223,36 @@ _M3eMenuItemCheckboxElement_mouseEnterHandler = new WeakMap();
1046
1223
  _M3eMenuItemCheckboxElement_spacePressed = new WeakMap();
1047
1224
  _M3eMenuItemCheckboxElement_instances = new WeakSet();
1048
1225
  _M3eMenuItemCheckboxElement_handleIconSlotChange = function _M3eMenuItemCheckboxElement_handleIconSlotChange(e) {
1049
- this.classList.toggle("-with-icon", hasAssignedNodes(e.target));
1226
+ this.classList.toggle("-with-icon", hasAssignedNodes(e.target));
1050
1227
  };
1051
1228
  _M3eMenuItemCheckboxElement_handleTrailingIconSlotChange = function _M3eMenuItemCheckboxElement_handleTrailingIconSlotChange(e) {
1052
- this.classList.toggle("-with-trailing-icon", hasAssignedNodes(e.target));
1229
+ this.classList.toggle("-with-trailing-icon", hasAssignedNodes(e.target));
1053
1230
  };
1054
1231
  _M3eMenuItemCheckboxElement_handleClick = function _M3eMenuItemCheckboxElement_handleClick(e) {
1055
- if (!e.defaultPrevented) {
1056
- this.checked = !this.checked;
1057
- this.performUpdate();
1058
- if (!__classPrivateFieldGet(this, _M3eMenuItemCheckboxElement_spacePressed, "f")) {
1059
- this.menu?.hideAll(true);
1060
- }
1232
+ if (!e.defaultPrevented) {
1233
+ this.checked = !this.checked;
1234
+ this.performUpdate();
1235
+ if (!__classPrivateFieldGet(this, _M3eMenuItemCheckboxElement_spacePressed, "f")) {
1236
+ this.menu?.hideAll(true);
1061
1237
  }
1238
+ }
1062
1239
  };
1063
1240
  _M3eMenuItemCheckboxElement_handleKeyDown = function _M3eMenuItemCheckboxElement_handleKeyDown(e) {
1064
- __classPrivateFieldSet(this, _M3eMenuItemCheckboxElement_spacePressed, e.key === " ", "f");
1241
+ __classPrivateFieldSet(this, _M3eMenuItemCheckboxElement_spacePressed, e.key === " ", "f");
1065
1242
  };
1066
1243
  _M3eMenuItemCheckboxElement_handleKeyUp = function _M3eMenuItemCheckboxElement_handleKeyUp() {
1067
- __classPrivateFieldSet(this, _M3eMenuItemCheckboxElement_spacePressed, false, "f");
1244
+ __classPrivateFieldSet(this, _M3eMenuItemCheckboxElement_spacePressed, false, "f");
1068
1245
  };
1069
1246
  _M3eMenuItemCheckboxElement_handleMouseEnter = function _M3eMenuItemCheckboxElement_handleMouseEnter() {
1070
- this.menu?.items.forEach((item) => {
1071
- if (item instanceof M3eMenuItemElement && item.submenu?.isOpen) {
1072
- item.submenu.hide();
1073
- }
1074
- });
1247
+ this.menu?.items.forEach(item => {
1248
+ if (item instanceof M3eMenuItemElement && item.submenu?.isOpen) {
1249
+ item.submenu.hide();
1250
+ }
1251
+ });
1075
1252
  };
1076
1253
  /** The styles of the element. */
1077
- M3eMenuItemCheckboxElement.styles = [
1078
- MenuItemElementBase.styles,
1079
- css `
1080
- .icon {
1081
- display: flex;
1082
- align-items: center;
1083
- justify-content: center;
1084
- }
1085
- :host(:not(.-with-icon)) .icon {
1086
- margin-inline-start: calc(0px - var(--m3e-menu-item-icon-label-space, 0.75rem));
1087
- }
1088
- .check {
1089
- width: 1em;
1090
- font-size: var(--m3e-menu-item-icon-size, 1.5rem) !important;
1091
- }
1092
- :host(:not([checked])) .check {
1093
- display: none;
1094
- }
1095
- :host([checked]) .icon {
1096
- margin-inline-start: 0;
1097
- }
1098
- :host([checked]) ::slotted([slot="icon"]) {
1099
- display: none !important;
1100
- }
1101
- `,
1102
- ];
1103
- M3eMenuItemCheckboxElement = __decorate([
1104
- t$1("m3e-menu-item-checkbox")
1105
- ], M3eMenuItemCheckboxElement);
1254
+ M3eMenuItemCheckboxElement.styles = [MenuItemElementBase.styles, css`.icon { display: flex; align-items: center; justify-content: center; } :host(:not(.-with-icon)) .icon { margin-inline-start: calc(0px - var(--m3e-menu-item-icon-label-space, 0.75rem)); } .check { width: 1em; font-size: var(--m3e-menu-item-icon-size, 1.5rem) !important; } :host(:not([checked])) .check { display: none; } :host([checked]) .icon { margin-inline-start: 0; } :host([checked]) ::slotted([slot="icon"]) { display: none !important; }`];
1255
+ M3eMenuItemCheckboxElement = __decorate([t$1("m3e-menu-item-checkbox")], M3eMenuItemCheckboxElement);
1106
1256
 
1107
1257
  /**
1108
1258
  * Groups related items (such a radios) in a menu.
@@ -1117,20 +1267,14 @@ M3eMenuItemCheckboxElement = __decorate([
1117
1267
  * @slot - Renders the contents of the group.
1118
1268
  */
1119
1269
  let M3eMenuItemGroupElement = class M3eMenuItemGroupElement extends Role(LitElement, "group") {
1120
- /** @inheritdoc */
1121
- render() {
1122
- return html `<slot></slot>`;
1123
- }
1270
+ /** @inheritdoc */
1271
+ render() {
1272
+ return html`<slot></slot>`;
1273
+ }
1124
1274
  };
1125
1275
  /** The styles of the element. */
1126
- M3eMenuItemGroupElement.styles = css `
1127
- :host {
1128
- display: contents;
1129
- }
1130
- `;
1131
- M3eMenuItemGroupElement = __decorate([
1132
- t$1("m3e-menu-item-group")
1133
- ], M3eMenuItemGroupElement);
1276
+ M3eMenuItemGroupElement.styles = css`:host { display: contents; }`;
1277
+ M3eMenuItemGroupElement = __decorate([t$1("m3e-menu-item-group")], M3eMenuItemGroupElement);
1134
1278
 
1135
1279
  var _M3eMenuItemRadioElement_instances, _M3eMenuItemRadioElement_clickHandler, _M3eMenuItemRadioElement_keyDownHandler, _M3eMenuItemRadioElement_keyUpHandler, _M3eMenuItemRadioElement_mouseEnterHandler, _M3eMenuItemRadioElement_spacePressed, _M3eMenuItemRadioElement_handleIconSlotChange, _M3eMenuItemRadioElement_handleTrailingIconSlotChange, _M3eMenuItemRadioElement_handleClick, _M3eMenuItemRadioElement_handleKeyDown, _M3eMenuItemRadioElement_handleKeyUp, _M3eMenuItemRadioElement_handleMouseEnter;
1136
1280
  /**
@@ -1189,55 +1333,51 @@ var _M3eMenuItemRadioElement_instances, _M3eMenuItemRadioElement_clickHandler, _
1189
1333
  * @cssprop --m3e-menu-item-icon-size - Font size for leading and trailing icons.
1190
1334
  */
1191
1335
  let M3eMenuItemRadioElement = class M3eMenuItemRadioElement extends Checked(Role(MenuItemElementBase, "menuitemradio")) {
1192
- constructor() {
1193
- super(...arguments);
1194
- _M3eMenuItemRadioElement_instances.add(this);
1195
- /** @private */ _M3eMenuItemRadioElement_clickHandler.set(this, (e) => __classPrivateFieldGet(this, _M3eMenuItemRadioElement_instances, "m", _M3eMenuItemRadioElement_handleClick).call(this, e));
1196
- /** @private */ _M3eMenuItemRadioElement_keyDownHandler.set(this, (e) => __classPrivateFieldGet(this, _M3eMenuItemRadioElement_instances, "m", _M3eMenuItemRadioElement_handleKeyDown).call(this, e));
1197
- /** @private */ _M3eMenuItemRadioElement_keyUpHandler.set(this, () => __classPrivateFieldGet(this, _M3eMenuItemRadioElement_instances, "m", _M3eMenuItemRadioElement_handleKeyUp).call(this));
1198
- /** @private */ _M3eMenuItemRadioElement_mouseEnterHandler.set(this, () => __classPrivateFieldGet(this, _M3eMenuItemRadioElement_instances, "m", _M3eMenuItemRadioElement_handleMouseEnter).call(this));
1199
- /** @private */ _M3eMenuItemRadioElement_spacePressed.set(this, false);
1200
- }
1201
- /** @inheritdoc */
1202
- connectedCallback() {
1203
- super.connectedCallback();
1204
- this.addEventListener("click", __classPrivateFieldGet(this, _M3eMenuItemRadioElement_clickHandler, "f"));
1205
- this.addEventListener("keydown", __classPrivateFieldGet(this, _M3eMenuItemRadioElement_keyDownHandler, "f"));
1206
- this.addEventListener("keyup", __classPrivateFieldGet(this, _M3eMenuItemRadioElement_keyUpHandler, "f"));
1207
- this.addEventListener("mouseenter", __classPrivateFieldGet(this, _M3eMenuItemRadioElement_mouseEnterHandler, "f"));
1208
- }
1209
- /** @inheritdoc */
1210
- disconnectedCallback() {
1211
- super.disconnectedCallback();
1212
- this.removeEventListener("click", __classPrivateFieldGet(this, _M3eMenuItemRadioElement_clickHandler, "f"));
1213
- this.removeEventListener("keydown", __classPrivateFieldGet(this, _M3eMenuItemRadioElement_keyDownHandler, "f"));
1214
- this.removeEventListener("keyup", __classPrivateFieldGet(this, _M3eMenuItemRadioElement_keyUpHandler, "f"));
1215
- this.removeEventListener("mouseenter", __classPrivateFieldGet(this, _M3eMenuItemRadioElement_mouseEnterHandler, "f"));
1216
- }
1217
- /** @inheritdoc */
1218
- update(changedProperties) {
1219
- super.update(changedProperties);
1220
- if (changedProperties.has("checked") && this.checked) {
1221
- (this.closest("[role='group']") ?? this.closest("m3e-menu"))
1222
- ?.querySelectorAll("m3e-menu-item-radio")
1223
- .forEach((x) => {
1224
- if (x !== this && x.checked) {
1225
- x.checked = false;
1226
- }
1227
- });
1336
+ constructor() {
1337
+ super(...arguments);
1338
+ _M3eMenuItemRadioElement_instances.add(this);
1339
+ /** @private */
1340
+ _M3eMenuItemRadioElement_clickHandler.set(this, e => __classPrivateFieldGet(this, _M3eMenuItemRadioElement_instances, "m", _M3eMenuItemRadioElement_handleClick).call(this, e));
1341
+ /** @private */
1342
+ _M3eMenuItemRadioElement_keyDownHandler.set(this, e => __classPrivateFieldGet(this, _M3eMenuItemRadioElement_instances, "m", _M3eMenuItemRadioElement_handleKeyDown).call(this, e));
1343
+ /** @private */
1344
+ _M3eMenuItemRadioElement_keyUpHandler.set(this, () => __classPrivateFieldGet(this, _M3eMenuItemRadioElement_instances, "m", _M3eMenuItemRadioElement_handleKeyUp).call(this));
1345
+ /** @private */
1346
+ _M3eMenuItemRadioElement_mouseEnterHandler.set(this, () => __classPrivateFieldGet(this, _M3eMenuItemRadioElement_instances, "m", _M3eMenuItemRadioElement_handleMouseEnter).call(this));
1347
+ /** @private */
1348
+ _M3eMenuItemRadioElement_spacePressed.set(this, false);
1349
+ }
1350
+ /** @inheritdoc */
1351
+ connectedCallback() {
1352
+ super.connectedCallback();
1353
+ this.addEventListener("click", __classPrivateFieldGet(this, _M3eMenuItemRadioElement_clickHandler, "f"));
1354
+ this.addEventListener("keydown", __classPrivateFieldGet(this, _M3eMenuItemRadioElement_keyDownHandler, "f"));
1355
+ this.addEventListener("keyup", __classPrivateFieldGet(this, _M3eMenuItemRadioElement_keyUpHandler, "f"));
1356
+ this.addEventListener("mouseenter", __classPrivateFieldGet(this, _M3eMenuItemRadioElement_mouseEnterHandler, "f"));
1357
+ }
1358
+ /** @inheritdoc */
1359
+ disconnectedCallback() {
1360
+ super.disconnectedCallback();
1361
+ this.removeEventListener("click", __classPrivateFieldGet(this, _M3eMenuItemRadioElement_clickHandler, "f"));
1362
+ this.removeEventListener("keydown", __classPrivateFieldGet(this, _M3eMenuItemRadioElement_keyDownHandler, "f"));
1363
+ this.removeEventListener("keyup", __classPrivateFieldGet(this, _M3eMenuItemRadioElement_keyUpHandler, "f"));
1364
+ this.removeEventListener("mouseenter", __classPrivateFieldGet(this, _M3eMenuItemRadioElement_mouseEnterHandler, "f"));
1365
+ }
1366
+ /** @inheritdoc */
1367
+ update(changedProperties) {
1368
+ super.update(changedProperties);
1369
+ if (changedProperties.has("checked") && this.checked) {
1370
+ (this.closest("[role='group']") ?? this.closest("m3e-menu"))?.querySelectorAll("m3e-menu-item-radio").forEach(x => {
1371
+ if (x !== this && x.checked) {
1372
+ x.checked = false;
1228
1373
  }
1374
+ });
1229
1375
  }
1230
- /** @internal @inheritdoc */
1231
- _renderContent() {
1232
- return html ` <div class="icon">
1233
- <svg class="check" viewBox="0 -960 960 960" aria-hidden="true">
1234
- <path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" />
1235
- </svg>
1236
- <slot name="icon" @slotchange="${__classPrivateFieldGet(this, _M3eMenuItemRadioElement_instances, "m", _M3eMenuItemRadioElement_handleIconSlotChange)}"></slot>
1237
- </div>
1238
- <slot></slot>
1239
- <slot name="trailing-icon" aria-hidden="true" @slotchange="${__classPrivateFieldGet(this, _M3eMenuItemRadioElement_instances, "m", _M3eMenuItemRadioElement_handleTrailingIconSlotChange)}"></slot>`;
1240
- }
1376
+ }
1377
+ /** @internal @inheritdoc */
1378
+ _renderContent() {
1379
+ return html`<div class="icon"><svg class="check" viewBox="0 -960 960 960" aria-hidden="true"><path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg><slot name="icon" @slotchange="${__classPrivateFieldGet(this, _M3eMenuItemRadioElement_instances, "m", _M3eMenuItemRadioElement_handleIconSlotChange)}"></slot></div><slot></slot><slot name="trailing-icon" aria-hidden="true" @slotchange="${__classPrivateFieldGet(this, _M3eMenuItemRadioElement_instances, "m", _M3eMenuItemRadioElement_handleTrailingIconSlotChange)}"></slot>`;
1380
+ }
1241
1381
  };
1242
1382
  _M3eMenuItemRadioElement_clickHandler = new WeakMap();
1243
1383
  _M3eMenuItemRadioElement_keyDownHandler = new WeakMap();
@@ -1246,38 +1386,36 @@ _M3eMenuItemRadioElement_mouseEnterHandler = new WeakMap();
1246
1386
  _M3eMenuItemRadioElement_spacePressed = new WeakMap();
1247
1387
  _M3eMenuItemRadioElement_instances = new WeakSet();
1248
1388
  _M3eMenuItemRadioElement_handleIconSlotChange = function _M3eMenuItemRadioElement_handleIconSlotChange(e) {
1249
- this.classList.toggle("-with-icon", hasAssignedNodes(e.target));
1389
+ this.classList.toggle("-with-icon", hasAssignedNodes(e.target));
1250
1390
  };
1251
1391
  _M3eMenuItemRadioElement_handleTrailingIconSlotChange = function _M3eMenuItemRadioElement_handleTrailingIconSlotChange(e) {
1252
- this.classList.toggle("-with-trailing-icon", hasAssignedNodes(e.target));
1392
+ this.classList.toggle("-with-trailing-icon", hasAssignedNodes(e.target));
1253
1393
  };
1254
1394
  _M3eMenuItemRadioElement_handleClick = function _M3eMenuItemRadioElement_handleClick(e) {
1255
- if (!e.defaultPrevented) {
1256
- this.checked = true;
1257
- this.performUpdate();
1258
- if (!__classPrivateFieldGet(this, _M3eMenuItemRadioElement_spacePressed, "f")) {
1259
- this.menu?.hideAll(true);
1260
- }
1395
+ if (!e.defaultPrevented) {
1396
+ this.checked = true;
1397
+ this.performUpdate();
1398
+ if (!__classPrivateFieldGet(this, _M3eMenuItemRadioElement_spacePressed, "f")) {
1399
+ this.menu?.hideAll(true);
1261
1400
  }
1401
+ }
1262
1402
  };
1263
1403
  _M3eMenuItemRadioElement_handleKeyDown = function _M3eMenuItemRadioElement_handleKeyDown(e) {
1264
- __classPrivateFieldSet(this, _M3eMenuItemRadioElement_spacePressed, e.key === " ", "f");
1404
+ __classPrivateFieldSet(this, _M3eMenuItemRadioElement_spacePressed, e.key === " ", "f");
1265
1405
  };
1266
1406
  _M3eMenuItemRadioElement_handleKeyUp = function _M3eMenuItemRadioElement_handleKeyUp() {
1267
- __classPrivateFieldSet(this, _M3eMenuItemRadioElement_spacePressed, false, "f");
1407
+ __classPrivateFieldSet(this, _M3eMenuItemRadioElement_spacePressed, false, "f");
1268
1408
  };
1269
1409
  _M3eMenuItemRadioElement_handleMouseEnter = function _M3eMenuItemRadioElement_handleMouseEnter() {
1270
- this.menu?.items.forEach((item) => {
1271
- if (item instanceof M3eMenuItemElement && item.submenu?.isOpen) {
1272
- item.submenu.hide();
1273
- }
1274
- });
1410
+ this.menu?.items.forEach(item => {
1411
+ if (item instanceof M3eMenuItemElement && item.submenu?.isOpen) {
1412
+ item.submenu.hide();
1413
+ }
1414
+ });
1275
1415
  };
1276
1416
  /** The styles of the element. */
1277
1417
  M3eMenuItemRadioElement.styles = M3eMenuItemCheckboxElement.styles;
1278
- M3eMenuItemRadioElement = __decorate([
1279
- t$1("m3e-menu-item-radio")
1280
- ], M3eMenuItemRadioElement);
1418
+ M3eMenuItemRadioElement = __decorate([t$1("m3e-menu-item-radio")], M3eMenuItemRadioElement);
1281
1419
 
1282
1420
  export { M3eMenuElement, M3eMenuItemCheckboxElement, M3eMenuItemElement, M3eMenuItemGroupElement, M3eMenuItemRadioElement, M3eMenuTriggerElement };
1283
1421
  //# sourceMappingURL=index.js.map