wj-elements 0.0.5 → 0.0.7

package/dist/wj-menu-button.js

@@ -1,19 +1,17 @@
-var c = Object.defineProperty;
-var i = (n, t, e) => t in n ? c(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
+var u = Object.defineProperty;
+var i = (n, t, e) => t in n ? u(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
 var o = (n, t, e) => (i(n, typeof t != "symbol" ? t + "" : t, e), e);
-import l, { event as u } from "./wj-element.js";
+import l, { event as c } from "./wj-element.js";
 import "./wj-store.js";
-const m = `/*!
-* direction.scss
-*/:host{display:inline-flex}@media (min-width: 768px){:host{display:none}}
+const a = `:host{display:inline-flex}@media (min-width: 768px){:host{display:none}}
 `;
-class a extends l {
+class m extends l {
   constructor() {
     super();
     o(this, "className", "MenuButton");
   }
   static get cssStyleSheet() {
-    return m;
+    return a;
   }
   static get observedAttributes() {
     return [];
@@ -26,12 +24,12 @@ class a extends l {
     return s.appendChild(r), s;
   }
   afterDraw() {
-    u.addListener(this, "click", null, (e) => {
-      console.log("click menu button", this.contentId), document.querySelector(`#${this.contentId}`).classList.toggle("open");
+    c.addListener(this, "click", null, (e) => {
+      document.querySelector(`#${this.contentId}`).classList.toggle("open");
     });
   }
 }
-customElements.get("wj-menu-button") || window.customElements.define("wj-menu-button", a);
+customElements.get("wj-menu-button") || window.customElements.define("wj-menu-button", m);
 export {
-  a as MenuButton
+  m as MenuButton
 };

package/dist/wj-menu-item.js

@@ -1,25 +1,26 @@
-var f = Object.defineProperty;
-var g = (o, n, e) => n in o ? f(o, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[n] = e;
-var l = (o, n, e) => (g(o, typeof n != "symbol" ? n + "" : n, e), e);
-import j, { WjElementUtils as y, event as m } from "./wj-element.js";
+var g = Object.defineProperty;
+var j = (o, n, e) => n in o ? g(o, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[n] = e;
+var m = (o, n, e) => (j(o, typeof n != "symbol" ? n + "" : n, e), e);
+import x, { WjElementUtils as y, event as l } from "./wj-element.js";
+import { b as k } from "./router-links-e0087f84.js";
 import "./wj-store.js";
-const x = `/*!
-* direction.scss
-*/:host{--wj-menu-submenu-offset: 0;--wj-menu-item-padding-top: .5rem;--wj-menu-item-padding-bottom: .5rem;--wj-menu-item-line-height: 1.8rem;--wj-menu-item-safe-triangle-cursor-x: 0;--wj-menu-item-safe-triangle-cursor-y: 0;--wj-menu-item-safe-triangle-submenu-start-x: 0;--wj-menu-item-safe-triangle-submenu-start-y: 0;--wj-menu-item-safe-triangle-submenu-end-x: 0;--wj-menu-item-safe-triangle-submenu-end-y: 0;--wj-menu-item-color-hover: $color-contrast-high;--wj-menu-item-background-hover: $color-contrast-lower;--wj-menu-item-color-active: $color-contrast-high;--wj-menu-item-background-active: $color-contrast-lower;display:block}:host .native-menu-item{position:relative;display:flex;flex-wrap:nowrap;align-items:center;color:var(--wj-color);padding-top:var(--wj-menu-item-padding-top);padding-bottom:var(--wj-menu-item-padding-bottom);transition:var(--wj-transition-fast) fill;-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer;width:100%;line-height:var(--wj-menu-item-line-height)}:host .native-menu-item:hover,:host .native-menu-item:focus{color:var(--wj-menu-item-color-hover);background-color:var(--wj-menu-item-background-hover)}:host .native-menu-item:active{color:var(--wj-menu-item-color-active);background-color:var(--wj-menu-item-background-active)}:host .native-menu-item .label{flex:1 1 auto;display:inline-block;text-overflow:ellipsis;overflow:hidden}:host .native-menu-item .check-icon{flex:0 0 auto;display:var(--wj-menu-item-check-icon-display, flex);align-items:center;justify-content:center;width:1.5rem;visibility:hidden}:host .native-menu-item .check-icon.checked{visibility:visible}:host .native-menu-item .submenu-icon{--wj-icon-size: 14px !important;flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:1.5rem;visibility:hidden}:host .native-menu-item.has-submenu .submenu-icon{visibility:visible}:host .native-menu-item.expanded-submenu{color:var(--wj-menu-item-color-active);background-color:var(--wj-menu-item-background-active)}:host .native-menu-item.expanded-submenu:hover{color:var(--wj-menu-item-color-hover);background-color:var(--wj-menu-item-background-hover)}:host .native-menu-item.expanded-submenu:after{content:"";position:fixed;z-index:calc(var(--wj-z-index-menu) - 1);top:0;right:0;bottom:0;left:0;clip-path:polygon(var(--wj-menu-item-safe-triangle-cursor-x) var(--wj-menu-item-safe-triangle-cursor-y),var(--wj-menu-item-safe-triangle-submenu-start-x) var(--wj-menu-item-safe-triangle-submenu-start-y),var(--wj-menu-item-safe-triangle-submenu-end-x) var(--wj-menu-item-safe-triangle-submenu-end-y))}:host(:focus-visible){outline:none}::slotted([slot=start]){flex:0 0 auto;display:flex;align-items:center;margin-inline-end:.5rem}::slotted([slot=end]){flex:0 0 auto;display:flex;align-items:center;margin-inline-start:.5rem}:host(.wj-menu-variant-nav) ::slotted([slot=submenu]){--wj-menu-border-width: 0 !important}:host ::slotted([slot=start]){width:1.5rem}:host ::slotted([slot=submenu]){margin-left:var(--wj-menu-submenu-offset)}:host(.wj-menu-variant-context){display:block}:host(.wj-menu-collapse) .label,:host(.wj-menu-collapse) .submenu-icon{display:none!important}:host(.wj-menu-collapse) ::slotted([slot=end]){display:none}
+const A = `:host{--wj-menu-item-color: var(--wj-color);--wj-menu-item-background: transparent;--wj-menu-item-color-hover: var(--wj-color-contrast-8);--wj-menu-item-background-hover: var(--wj-border-color);--wj-menu-item-color-focus: var(--wj-color-contrast-8);--wj-menu-item-background-focus: var(--wj-border-color);--wj-menu-item-color-active: var(--wj-color-contrast-8);--wj-menu-item-background-active: var(--wj-border-color);--wj-menu-item-padding-top: .5rem;--wj-menu-item-padding-bottom: .5rem;--wj-menu-item-line-height: 1.8rem;--wj-menu-item-safe-triangle-cursor-x: 0;--wj-menu-item-safe-triangle-cursor-y: 0;--wj-menu-item-safe-triangle-submenu-start-x: 0;--wj-menu-item-safe-triangle-submenu-start-y: 0;--wj-menu-item-safe-triangle-submenu-end-x: 0;--wj-menu-item-safe-triangle-submenu-end-y: 0;--wj-menu-submenu-offset: 0;--wj-menu-item-icon-visibility: hidden;display:block}:host .native-menu-item{background:var(--wj-menu-item-background);position:relative;display:flex;flex-wrap:nowrap;align-items:center;color:var(--wj-menu-item-color);padding-top:var(--wj-menu-item-padding-top);padding-bottom:var(--wj-menu-item-padding-bottom);transition:var(--wj-transition-fast) fill;-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer;width:100%;line-height:var(--wj-menu-item-line-height)}:host .native-menu-item:hover{color:var(--wj-menu-item-color-hover);background:var(--wj-menu-item-background-hover)}:host .native-menu-item:focus{color:var(--wj-menu-item-color-focus);background:var(--wj-menu-item-background-focus)}:host .native-menu-item:active{color:var(--wj-menu-item-color-active);background:var(--wj-menu-item-background-active)}:host .native-menu-item .label{flex:1 1 auto;display:inline-block;text-overflow:ellipsis;overflow:hidden}:host .native-menu-item .check-icon{flex:0 0 auto;display:var(--wj-menu-item-check-icon-display, flex);align-items:center;justify-content:center;width:1.5rem;visibility:hidden}:host .native-menu-item .check-icon.checked{visibility:visible}:host .native-menu-item.expanded-submenu{color:var(--wj-menu-item-color-active);background:var(--wj-menu-item-background-active)}:host .native-menu-item.expanded-submenu:hover{color:var(--wj-menu-item-color-hover);background:var(--wj-menu-item-background-hover)}:host .native-menu-item.expanded-submenu:after{content:"";position:fixed;z-index:1;top:0;right:0;bottom:0;left:0;clip-path:polygon(var(--wj-menu-item-safe-triangle-cursor-x) var(--wj-menu-item-safe-triangle-cursor-y),var(--wj-menu-item-safe-triangle-submenu-start-x) var(--wj-menu-item-safe-triangle-submenu-start-y),var(--wj-menu-item-safe-triangle-submenu-end-x) var(--wj-menu-item-safe-triangle-submenu-end-y))}.submenu-icon{--wj-icon-size: 14px !important;flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:1.5rem;visibility:var(--wj-menu-item-icon-visibility)}.has-submenu .submenu-icon{--wj-menu-item-icon-visibility: visible}.submenu-icon.collapse{flex:none;right:10px;position:relative}:host(:focus-visible){outline:none}::slotted([slot=start]){flex:0 0 auto;display:flex;align-items:center;margin-inline-end:.5rem}::slotted([slot=end]){flex:0 0 auto;display:flex;align-items:center;margin-inline-start:.5rem}:host(.wj-menu-variant-nav) ::slotted([slot=submenu]){--wj-menu-border-width: 0 !important;--wj-menu-margin-inline: 2rem 0 !important}:host ::slotted([slot=start]){width:1.5rem}:host(.wj-menu-variant-context){display:block}:host(.active){color:var(--wj-menu-item-color-active);background:var(--wj-menu-item-background-active)}:host(.open){color:var(--wj-menu-item-color-active);background:var(--wj-menu-item-background-active)}
 `;
-class A extends j {
+class L extends x {
   constructor() {
     super();
-    l(this, "className", "MenuItem");
-    l(this, "dispatchMove", (e) => {
+    m(this, "className", "MenuItem");
+    m(this, "dispatchMove", (e) => {
       this.style.setProperty("--wj-menu-item-safe-triangle-cursor-x", `${e.clientX}px`), this.style.setProperty("--wj-menu-item-safe-triangle-cursor-y", `${e.clientY}px`);
     });
-    l(this, "dispatchReposition", (e) => {
-      let r = this.submenu.assignedNodes()[0];
-      const { left: c, top: s, width: t, height: a } = r.getBoundingClientRect();
+    m(this, "dispatchReposition", (e) => {
+      if (this.submenu.assignedNodes().length === 0)
+        return;
+      let i = this.submenu.assignedNodes()[0];
+      const { left: c, top: s, width: t, height: a } = i.getBoundingClientRect();
       this.style.setProperty("--wj-menu-item-safe-triangle-submenu-start-x", `${c}px`), this.style.setProperty("--wj-menu-item-safe-triangle-submenu-start-y", `${s}px`), this.style.setProperty("--wj-menu-item-safe-triangle-submenu-end-x", `${c}px`), this.style.setProperty("--wj-menu-item-safe-triangle-submenu-end-y", `${s + a}px`);
     });
-    this.hasSubmenu = y.hasSlot(this, "submenu"), this._collapsible = !1;
+    k(this, { selector: !1 }), this.hasSubmenu = y.hasSlot(this, "submenu"), this._collapsible = !1;
   }
   get placement() {
     let e = this.querySelector("wj-menu");
@@ -31,71 +32,73 @@ class A extends j {
   }
   get variant() {
     let e = this.querySelector("wj-menu");
-    return e != null && e.hasAttribute("variant") ? e.getAttribute("variant").toUpperCase() : "CONTEXT";
+    return e != null && e.hasAttribute("variant") && !this.collapse ? e.getAttribute("variant").toUpperCase() : "CONTEXT";
   }
   get collapse() {
     var e;
     return (e = this.parentElement) == null ? void 0 : e.hasAttribute("collapse");
   }
   static get cssStyleSheet() {
-    return x;
+    return A;
   }
   static get observedAttributes() {
     return [];
   }
   setupAttributes() {
-    super.setupAttributes(), this.isShadowRoot = "open";
+    super.setupAttributes(), this.isShadowRoot = "open", this.setAttribute("active-class", "open");
   }
-  draw(e, r, c) {
+  draw(e, i, c) {
     var w;
     let s = document.createDocumentFragment();
-    this.classList.add("wj-menu-variant-" + this.variant.toLowerCase()), (w = this.querySelector("wj-menu")) == null || w.setAttribute("variant", this.variant.toLowerCase()), this.collapse && this.classList.add("wj-menu-collapse");
+    this.setAttribute("tabindex", "0"), this.classList.add("wj-menu-variant-" + this.variant.toLowerCase()), (w = this.querySelector("wj-menu")) == null || w.setAttribute("variant", this.variant.toLowerCase());
     let t = document.createElement("div");
-    t.setAttribute("slot", "anchor"), t.setAttribute("part", "native"), t.setAttribute("id", "anchor"), t.classList.add("native-menu-item");
+    t.setAttribute("part", "native"), t.setAttribute("id", "anchor"), t.classList.add("native-menu-item");
     let a = document.createElement("span");
     a.classList.add("check-icon"), a.innerHTML = '<wj-icon name="check"></wj-icon>', this.hasAttribute("checked") ? a.classList.add("checked") : a.classList.remove("checked");
-    let d = document.createElement("slot");
-    d.name = "start";
+    let h = document.createElement("slot");
+    h.name = "start";
     let p = document.createElement("slot");
     p.classList.add("label");
     let b = document.createElement("slot");
     b.name = "end";
     let u = document.createElement("slot");
     u.setAttribute("part", "submenu"), u.name = "submenu";
-    let h = document.createElement("span");
-    h.classList.add("submenu-icon"), h.innerHTML = this.collapse ? '<wj-icon name="chevron-down"></wj-icon>' : '<wj-icon name="chevron-right"></wj-icon>', this.hasSubmenu ? t.classList.add("has-submenu") : t.classList.remove("has-submenu"), t.appendChild(a), t.appendChild(d), t.appendChild(p), t.appendChild(b), t.appendChild(h);
+    let f = this.collapse ? "collapse" : "expand", d = document.createElement("span");
+    d.classList.add("submenu-icon", f), d.innerHTML = this.collapse ? '<wj-icon name="chevron-down"></wj-icon>' : '<wj-icon name="chevron-right"></wj-icon>', this.hasSubmenu ? t.classList.add("has-submenu") : t.classList.remove("has-submenu"), t.appendChild(a), t.appendChild(h), t.appendChild(p), t.appendChild(b), t.appendChild(d);
     let v = !1;
-    if (this.collapse && this.variant === "NAV" && this.hasSubmenu || this.variant === "CONTEXT" && this.hasSubmenu) {
-      let i = document.createElement("wj-popup");
-      i.setAttribute("anchor", "anchor"), i.setAttribute("placement", this.placement), i.setAttribute("offset", this.offset), i.appendChild(t), i.appendChild(u), this.popup = i, s.appendChild(i), v = !0;
+    if (
+      /*(this.collapse && this.variant === "NAV" && this.hasSubmenu) || */
+      this.variant === "CONTEXT" && this.hasSubmenu
+    ) {
+      t.setAttribute("slot", "anchor");
+      let r = document.createElement("wj-popup");
+      r.setAttribute("anchor", "anchor"), r.setAttribute("placement", this.placement), r.setAttribute("offset", this.offset), r.appendChild(t), r.appendChild(u), this.popup = r, s.appendChild(r), v = !0;
     }
-    if (this.native = t, this.submenu = u, this.collapse && !this.hasSubmenu) {
-      let i = document.createElement("wj-tooltip");
-      i.setAttribute("content", this.textContent), i.setAttribute("placement", "right"), i.setAttribute("offset", this.offset || "0"), i.appendChild(t), s.appendChild(i);
-    } else
-      v || s.appendChild(t);
-    return (!this.collapse && this.variant === "NAV" || this.variant === "MEGAMENU" && this.hasSubmenu) && s.appendChild(u), s;
+    return this.collapse && !this.hasSubmenu ? s.appendChild(this.collapseItem(t)) : v || s.appendChild(t), (!this.collapse && this.variant === "NAV" || this.variant === "MEGAMENU" && this.hasSubmenu) && s.appendChild(u), this.native = t, this.submenu = u, s;
   }
   afterDraw() {
-    this.addEventListener("mousemove", this.dispatchMove), this.addEventListener("wj-popup:reposition", this.dispatchReposition), m.addListener(this, "mouseover", null, (e) => {
-      this.hasAttribute("manual") || (e.stopPropagation(), this.showSubmenu(), this.focus());
-    }), m.addListener(this, "focusout", null, (e) => {
-      e.relatedTarget && this.contains(e.relatedTarget) || this.hideSubmenu();
-    }), !this.collapse && this.variant === "NAV" && this.hasSubmenu ? m.addListener(this, "click", null, (e) => {
-      let r = this.submenu.assignedElements({ flatten: !0 })[0];
-      r.hasAttribute("active") ? this === e.target && r.removeAttribute("active") : r.setAttribute("active", ""), e.stopPropagation();
-    }) : m.addListener(this, "click", null, (e) => {
-      console.log("CLICK", this);
+    this.addEventListener("mousemove", this.dispatchMove), this.addEventListener("wj-popup:reposition", this.dispatchReposition), l.addListener(this, "mouseover", null, (e) => {
+      this.hasAttribute("manual") || this.variant === "NAV" && !this.collapse || (e.stopPropagation(), this.showSubmenu(), this.focus());
+    }), l.addListener(this, "focusout", null, (e) => {
+      e.relatedTarget && this.contains(e.relatedTarget) || this.variant === "NAV" && !this.collapse || this.hideSubmenu();
+    }), !this.collapse && this.variant === "NAV" && this.hasSubmenu ? l.addListener(this, "click", null, (e) => {
+      let i = this.submenu.assignedElements({ flatten: !0 })[0];
+      i.hasAttribute("active") ? this === e.target && i.removeAttribute("active") : i.setAttribute("active", ""), e.stopPropagation();
+    }) : l.addListener(this, "click", null, (e) => {
     });
   }
+  collapseItem(e) {
+    let i = document.createElement("wj-tooltip");
+    return i.setAttribute("content", this.textContent), i.setAttribute("placement", "right"), i.setAttribute("offset", this.offset || "0"), i.appendChild(e), i;
+  }
   showSubmenu() {
-    this.tabIndex = -1, this.hasSubmenu && (this.popup.setAttribute("active", ""), this.native.classList.add("expanded-submenu"));
+    this.tabIndex = -1, this.hasSubmenu && (this.popup.setAttribute("active", ""), this.classList.add("expanded-submenu"), this.native.classList.add("expanded-submenu"));
   }
   hideSubmenu() {
-    this.tabIndex = 0, this.hasSubmenu && (this.popup.removeAttribute("active"), this.native.classList.remove("expanded-submenu"));
+    this.tabIndex = 0, this.hasSubmenu && (this.popup.removeAttribute("active"), this.classList.remove("expanded-submenu"), this.native.classList.remove("expanded-submenu"));
   }
 }
-customElements.get("wj-menu-item") || window.customElements.define("wj-menu-item", A);
+customElements.get("wj-menu-item") || window.customElements.define("wj-menu-item", L);
 export {
-  A as MenuItem
+  L as MenuItem
 };

package/dist/wj-menu-label.js

@@ -5,7 +5,7 @@ import i, { WjElementUtils as m } from "./wj-element.js";
 import "./wj-store.js";
 const d = `/*!
 * direction.scss
-*/:host{--wj-menu-label-font-size: .75rem;--wj-menu-label-weight: 600;--wj-letter-spacing: .025rem;--wj-menu-label-color: rgba(33, 33, 33, .62);--wj-padding-top: 0;--wj-padding-bottom: 0;--wj-padding-start: 1.5rem;--wj-padding-end: 1.5rem}:host .native-menu-label{font-size:var(--wj-menu-label-font-size);display:inline-block;font-weight:var(--wj-menu-label-weight);letter-spacing:var(--wj-letter-spacing);color:var(--wj-menu-label-color);padding:var(--wj-padding-top) var(--wj-padding-start) var(--wj-padding-bottom) var(--wj-padding-end)}
+*/:host{--wj-menu-label-font-size: .75rem;--wj-menu-label-weight: 600;--wj-letter-spacing: .025rem;--wj-menu-label-color: var(--wj-color-contrast-6);--wj-padding-top: 0;--wj-padding-bottom: 0;--wj-padding-start: 1.5rem;--wj-padding-end: 1.5rem}:host .native-menu-label{font-size:var(--wj-menu-label-font-size);display:inline-block;font-weight:var(--wj-menu-label-weight);letter-spacing:var(--wj-letter-spacing);color:var(--wj-menu-label-color);padding:var(--wj-padding-top) var(--wj-padding-start) var(--wj-padding-bottom) var(--wj-padding-end)}
 `;
 class u extends i {
   constructor() {
@@ -22,7 +22,7 @@ class u extends i {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(n, c, p) {
+  draw(n, c, w) {
     let s = document.createDocumentFragment(), a = document.createElement("slot");
     return a.setAttribute("part", "base"), a.classList.add("native-menu-label"), s.appendChild(a), s;
   }

package/dist/wj-menu.js

@@ -1,13 +1,11 @@
-var d = Object.defineProperty;
-var s = (t, e, n) => e in t ? d(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
-var a = (t, e, n) => (s(t, typeof e != "symbol" ? e + "" : e, n), n);
-import m from "./wj-element.js";
+var m = Object.defineProperty;
+var d = (n, e, t) => e in n ? m(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
+var a = (n, e, t) => (d(n, typeof e != "symbol" ? e + "" : e, t), t);
+import s from "./wj-element.js";
 import "./wj-store.js";
-const u = `/*!
-* direction.scss
-*/:host{--wj-menu-background: #fff;--wj-menu-border-width: 1px;--wj-menu-border-style: solid;--wj-menu-border-color: var(--wj-border-color);--wj-menu-border-radius: 4px;--wj-menu-padding-top: .5rem;--wj-menu-padding-bottom: .5rem;--wj-menu-padding-inline: 0;--wj-menu-z-index: 900;display:none;background:var(--wj-menu-background);position:relative;border-width:var(--wj-menu-border-width);border-style:var(--wj-menu-border-style);border-color:var(--wj-menu-border-color);z-index:var(--wj-menu-z-index);border-radius:var(--wj-menu-border-radius);-webkit-border-radius:var(--wj-menu-border-radius);-moz-border-radius:var(--wj-menu-border-radius);padding-top:var(--wj-menu-padding-top);padding-bottom:var(--wj-menu-padding-bottom);padding-inline:var(--wj-menu-padding-inline);overflow:auto;overscroll-behavior:none}:host .native-menu{display:flex;flex-direction:column;width:100%}:host .native-menu ::slotted(wj-button){margin:0}:host(.wj-menu-collapse){max-width:70px!important}:host([variant=context]){display:block!important;margin-left:var(--wj-menu-submenu-offset)}:host([variant=megamenu]) .native-menu{flex-direction:row;align-items:end;flex-wrap:nowrap}:host([variant=megamenu]) .native-menu .check-icon{display:none}:host([active]){display:flex!important}
+const u = `:host{--wj-menu-background: var(--wj-background);--wj-menu-border-width: 1px;--wj-menu-border-style: solid;--wj-menu-border-color: var(--wj-border-color);--wj-menu-border-radius: 4px;--wj-menu-padding-top: .5rem;--wj-menu-padding-bottom: .5rem;--wj-menu-padding-inline: 0;--wj-menu-margin-top: ;--wj-menu-margin-bottom: 0;--wj-menu-margin-inline: 0;--wj-menu-z-index: 900;display:none;background:var(--wj-menu-background);position:relative;border-width:var(--wj-menu-border-width);border-style:var(--wj-menu-border-style);border-color:var(--wj-menu-border-color);z-index:var(--wj-menu-z-index);border-radius:var(--wj-border-radius-small);padding-top:var(--wj-menu-padding-top);padding-bottom:var(--wj-menu-padding-bottom);padding-inline:var(--wj-menu-padding-inline);margin-top:var(--wj-menu-margin-top);margin-bottom:var(--wj-menu-margin-bottom);margin-inline:var(--wj-menu-margin-inline);overflow:auto;overscroll-behavior:none}:host .native-menu{display:flex;flex-direction:column;width:100%}:host .native-menu ::slotted(wj-button){margin:0}:host(.wj-menu-collapse){max-width:70px!important}:host([variant=context]){display:block!important;margin-left:var(--wj-menu-submenu-offset)}:host([variant=megamenu]) .native-menu{flex-direction:row;align-items:end;flex-wrap:nowrap}:host([variant=megamenu]) .native-menu .check-icon{display:none}:host([active]){display:flex!important}
 `;
-class l extends m {
+class l extends s {
   constructor() {
     super();
     a(this, "className", "Menu");
@@ -16,12 +14,12 @@ class l extends m {
     return u;
   }
   static get observedAttributes() {
-    return ["active"];
+    return ["active", "collapse"];
   }
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(n, c, w) {
+  draw(t, w, c) {
     let o = document.createDocumentFragment();
     this.classList.remove("wj-menu-collapse"), this.hasAttribute("collapse") && this.classList.add("wj-menu-collapse");
     let r = document.createElement("div");