wj-elements 0.0.11 → 0.0.13

package/dist/wj-menu-button.js

@@ -1,17 +1,19 @@
-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 c } from "./wj-element.js";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import WJElement, { event } from "./wj-element.js";
 import "./wj-store.js";
-const a = `:host{display:inline-flex}@media (min-width: 768px){:host{display:none}}
-`;
-class m extends l {
+const styles = "/*\n[ WJ Menu Label ]\n*/\n:host {\n  display: inline-flex;\n}\n\n@media (min-width: 768px) {\n  :host {\n    display: none;\n  }\n}";
+class MenuButton extends WJElement {
   constructor() {
     super();
-    o(this, "className", "MenuButton");
+    __publicField(this, "className", "MenuButton");
   }
   static get cssStyleSheet() {
-    return a;
+    return styles;
   }
   static get observedAttributes() {
     return [];
@@ -19,17 +21,19 @@ class m extends l {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  draw(e, d, p) {
-    let s = document.createDocumentFragment(), r = document.createElement("slot");
-    return s.appendChild(r), s;
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let slot = document.createElement("slot");
+    fragment.appendChild(slot);
+    return fragment;
   }
   afterDraw() {
-    c.addListener(this, "click", null, (e) => {
+    event.addListener(this, "click", null, (e) => {
       document.querySelector(`#${this.contentId}`).classList.toggle("open");
     });
   }
 }
-customElements.get("wj-menu-button") || window.customElements.define("wj-menu-button", m);
+customElements.get("wj-menu-button") || window.customElements.define("wj-menu-button", MenuButton);
 export {
-  m as MenuButton
+  MenuButton
 };

package/dist/wj-menu-item.js

@@ -1,104 +1,190 @@
-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";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import WJElement, { WjElementUtils, event } from "./wj-element.js";
+import { b as bindRouterLinks } from "./router-links-26e4a166.js";
 import "./wj-store.js";
-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 L extends x {
+const styles = '/*\n[ WJ Menu Item ]\n*/\n:host {\n  --wj-menu-item-color: var(--wj-color);\n  --wj-menu-item-background: transparent;\n  --wj-menu-item-color-hover: var(--wj-color-contrast-8);\n  --wj-menu-item-background-hover: var(--wj-border-color);\n  --wj-menu-item-color-focus: var(--wj-color-contrast-8);\n  --wj-menu-item-background-focus: var(--wj-border-color);\n  --wj-menu-item-color-active: var(--wj-color-contrast-8);\n  --wj-menu-item-background-active: var(--wj-border-color);\n  --wj-menu-item-padding-top: .5rem;\n  --wj-menu-item-padding-bottom: .5rem;\n  --wj-menu-item-line-height: 1.8rem;\n  --wj-menu-item-safe-triangle-cursor-x: 0;\n  --wj-menu-item-safe-triangle-cursor-y: 0;\n  --wj-menu-item-safe-triangle-submenu-start-x: 0;\n  --wj-menu-item-safe-triangle-submenu-start-y: 0;\n  --wj-menu-item-safe-triangle-submenu-end-x: 0;\n  --wj-menu-item-safe-triangle-submenu-end-y: 0;\n  --wj-menu-submenu-offset: 0;\n  --wj-menu-item-icon-visibility: hidden;\n  display: block;\n}\n:host .native-menu-item {\n  background: var(--wj-menu-item-background);\n  position: relative;\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  color: var(--wj-menu-item-color);\n  padding-top: var(--wj-menu-item-padding-top);\n  padding-bottom: var(--wj-menu-item-padding-bottom);\n  transition: var(--wj-transition-fast) fill;\n  user-select: none;\n  white-space: nowrap;\n  cursor: pointer;\n  width: 100%;\n  line-height: var(--wj-menu-item-line-height);\n}\n:host .native-menu-item:hover {\n  color: var(--wj-menu-item-color-hover);\n  background: var(--wj-menu-item-background-hover);\n}\n:host .native-menu-item:focus {\n  color: var(--wj-menu-item-color-focus);\n  background: var(--wj-menu-item-background-focus);\n}\n:host .native-menu-item:active {\n  color: var(--wj-menu-item-color-active);\n  background: var(--wj-menu-item-background-active);\n}\n:host .native-menu-item .label {\n  flex: 1 1 auto;\n  display: inline-block;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n:host .native-menu-item .check-icon {\n  flex: 0 0 auto;\n  display: var(--wj-menu-item-check-icon-display, flex);\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  visibility: hidden;\n}\n:host .native-menu-item .check-icon.checked {\n  visibility: visible;\n}\n:host .native-menu-item.expanded-submenu {\n  color: var(--wj-menu-item-color-active);\n  background: var(--wj-menu-item-background-active);\n}\n:host .native-menu-item.expanded-submenu:hover {\n  color: var(--wj-menu-item-color-hover);\n  background: var(--wj-menu-item-background-hover);\n}\n:host .native-menu-item.expanded-submenu::after {\n  content: "";\n  position: fixed;\n  z-index: 1;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  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));\n}\n\n.submenu-icon {\n  --wj-icon-size: 14px !important;\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  visibility: var(--wj-menu-item-icon-visibility);\n}\n\n.has-submenu .submenu-icon {\n  --wj-menu-item-icon-visibility: visible;\n}\n\n.submenu-icon.collapse {\n  flex: none;\n  right: 10px;\n  position: relative;\n}\n\n:host(:focus-visible) {\n  outline: none;\n}\n\n::slotted([slot=start]) {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  margin-inline-end: 0.5rem;\n}\n\n::slotted([slot=end]) {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  margin-inline-start: 0.5rem;\n}\n\n:host(.wj-menu-variant-nav) ::slotted([slot=submenu]) {\n  --wj-menu-border-width: 0 !important;\n  --wj-menu-margin-inline: 2rem 0 !important;\n}\n\n:host ::slotted([slot=start]) {\n  width: 1.5rem;\n}\n\n:host(.wj-menu-variant-context) {\n  display: block;\n}\n\n:host(.active) {\n  color: var(--wj-menu-item-color-active);\n  background: var(--wj-menu-item-background-active);\n}\n\n:host(.open) {\n  color: var(--wj-menu-item-color-active);\n  background: var(--wj-menu-item-background-active);\n}';
+class MenuItem extends WJElement {
   constructor() {
     super();
-    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`);
+    __publicField(this, "className", "MenuItem");
+    __publicField(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`);
     });
-    m(this, "dispatchReposition", (e) => {
+    __publicField(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`);
+      let submenu = this.submenu.assignedNodes()[0];
+      const { left, top, width, height } = submenu.getBoundingClientRect();
+      this.style.setProperty("--wj-menu-item-safe-triangle-submenu-start-x", `${left}px`);
+      this.style.setProperty("--wj-menu-item-safe-triangle-submenu-start-y", `${top}px`);
+      this.style.setProperty("--wj-menu-item-safe-triangle-submenu-end-x", `${left}px`);
+      this.style.setProperty("--wj-menu-item-safe-triangle-submenu-end-y", `${top + height}px`);
     });
-    k(this, { selector: !1 }), this.hasSubmenu = y.hasSlot(this, "submenu"), this._collapsible = !1;
+    bindRouterLinks(this, { selector: false });
+    this.hasSubmenu = WjElementUtils.hasSlot(this, "submenu");
+    this._collapsible = false;
   }
   get placement() {
-    let e = this.querySelector("wj-menu");
-    return e != null && e.hasAttribute("placement") ? e.getAttribute("placement") : "right-start";
+    let menu = this.querySelector("wj-menu");
+    if (menu == null ? void 0 : menu.hasAttribute("placement")) {
+      return menu.getAttribute("placement");
+    }
+    return "right-start";
   }
   get offset() {
-    let e = this.querySelector("wj-menu");
-    return e != null && e.hasAttribute("offset") ? e.getAttribute("offset") : "0";
+    let menu = this.querySelector("wj-menu");
+    if (menu == null ? void 0 : menu.hasAttribute("offset")) {
+      return menu.getAttribute("offset");
+    }
+    return "0";
   }
   get variant() {
-    let e = this.querySelector("wj-menu");
-    return e != null && e.hasAttribute("variant") && !this.collapse ? e.getAttribute("variant").toUpperCase() : "CONTEXT";
+    let menu = this.querySelector("wj-menu");
+    if ((menu == null ? void 0 : menu.hasAttribute("variant")) && !this.collapse) {
+      return menu.getAttribute("variant").toUpperCase();
+    }
+    return "CONTEXT";
   }
   get collapse() {
-    var e;
-    return (e = this.parentElement) == null ? void 0 : e.hasAttribute("collapse");
+    var _a;
+    return (_a = this.parentElement) == null ? void 0 : _a.hasAttribute("collapse");
   }
   static get cssStyleSheet() {
-    return A;
+    return styles;
   }
   static get observedAttributes() {
     return [];
   }
   setupAttributes() {
-    super.setupAttributes(), this.isShadowRoot = "open", this.setAttribute("active-class", "open");
+    super.setupAttributes();
+    this.isShadowRoot = "open";
+    this.setAttribute("active-class", "open");
   }
-  draw(e, i, c) {
-    var w;
-    let s = document.createDocumentFragment();
-    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("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 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 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;
+  draw(context, store, params) {
+    var _a;
+    let fragment = document.createDocumentFragment();
+    this.setAttribute("tabindex", "0");
+    this.classList.add("wj-menu-variant-" + this.variant.toLowerCase());
+    (_a = this.querySelector("wj-menu")) == null ? void 0 : _a.setAttribute("variant", this.variant.toLowerCase());
+    let native = document.createElement("div");
+    native.setAttribute("part", "native");
+    native.setAttribute("id", "anchor");
+    native.classList.add("native-menu-item");
+    let checkedIcon = document.createElement("span");
+    checkedIcon.classList.add("check-icon");
+    checkedIcon.innerHTML = `<wj-icon name="check"></wj-icon>`;
+    this.hasAttribute("checked") ? checkedIcon.classList.add("checked") : checkedIcon.classList.remove("checked");
+    let start = document.createElement("slot");
+    start.name = "start";
+    let slot = document.createElement("slot");
+    slot.classList.add("label");
+    let end = document.createElement("slot");
+    end.name = "end";
+    let submenu = document.createElement("slot");
+    submenu.setAttribute("part", "submenu");
+    submenu.name = "submenu";
+    let submenuIconClass = this.collapse ? "collapse" : "expand";
+    let submenuIcon = document.createElement("span");
+    submenuIcon.classList.add("submenu-icon", submenuIconClass);
+    submenuIcon.innerHTML = this.collapse ? `<wj-icon name="chevron-down"></wj-icon>` : `<wj-icon name="chevron-right"></wj-icon>`;
+    this.hasSubmenu ? native.classList.add("has-submenu") : native.classList.remove("has-submenu");
+    native.appendChild(checkedIcon);
+    native.appendChild(start);
+    native.appendChild(slot);
+    native.appendChild(end);
+    native.appendChild(submenuIcon);
+    let isAppend = false;
     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;
+      native.setAttribute("slot", "anchor");
+      let popup = document.createElement("wj-popup");
+      popup.setAttribute("anchor", "anchor");
+      popup.setAttribute("placement", this.placement);
+      popup.setAttribute("offset", this.offset);
+      popup.appendChild(native);
+      popup.appendChild(submenu);
+      this.popup = popup;
+      fragment.appendChild(popup);
+      isAppend = true;
+    }
+    if (this.collapse && !this.hasSubmenu) {
+      fragment.appendChild(this.collapseItem(native));
+    } else if (!isAppend) {
+      fragment.appendChild(native);
+    }
+    if (!this.collapse && this.variant === "NAV" || this.variant === "MEGAMENU" && this.hasSubmenu) {
+      fragment.appendChild(submenu);
     }
-    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;
+    this.native = native;
+    this.submenu = submenu;
+    return fragment;
   }
   afterDraw() {
-    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) => {
+    this.addEventListener("mousemove", this.dispatchMove);
+    this.addEventListener("wj-popup:reposition", this.dispatchReposition);
+    event.addListener(this, "mouseover", null, (e) => {
+      if (this.hasAttribute("manual") || this.variant === "NAV" && !this.collapse)
+        return;
+      e.stopPropagation();
+      this.showSubmenu();
+      this.focus();
+    });
+    event.addListener(this, "focusout", null, (e) => {
+      if (e.relatedTarget && this.contains(e.relatedTarget) || this.variant === "NAV" && !this.collapse) {
+        return;
+      }
+      this.hideSubmenu();
     });
+    if (!this.collapse && this.variant === "NAV" && this.hasSubmenu) {
+      event.addListener(this, "click", null, (e) => {
+        let submenuElements = this.submenu.assignedElements({ flatten: true })[0];
+        if (!submenuElements.hasAttribute("active")) {
+          submenuElements.setAttribute("active", "");
+        } else {
+          if (this === e.target)
+            submenuElements.removeAttribute("active");
+        }
+        e.stopPropagation();
+      });
+    } else {
+      event.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;
+  collapseItem(native) {
+    let tooltip = document.createElement("wj-tooltip");
+    tooltip.setAttribute("content", this.textContent);
+    tooltip.setAttribute("placement", "right");
+    tooltip.setAttribute("offset", this.offset || "0");
+    tooltip.appendChild(native);
+    return tooltip;
   }
   showSubmenu() {
-    this.tabIndex = -1, this.hasSubmenu && (this.popup.setAttribute("active", ""), this.classList.add("expanded-submenu"), this.native.classList.add("expanded-submenu"));
+    this.tabIndex = -1;
+    if (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.classList.remove("expanded-submenu"), this.native.classList.remove("expanded-submenu"));
+    this.tabIndex = 0;
+    if (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", L);
+customElements.get("wj-menu-item") || window.customElements.define("wj-menu-item", MenuItem);
 export {
-  L as MenuItem
+  MenuItem
 };

package/dist/wj-menu-label.js

@@ -1,20 +1,20 @@
-var r = Object.defineProperty;
-var o = (t, e, n) => e in t ? r(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
-var l = (t, e, n) => (o(t, typeof e != "symbol" ? e + "" : e, n), n);
-import i, { WjElementUtils as m } from "./wj-element.js";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import WJElement, { WjElementUtils } 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: 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 {
+const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Menu Label ]\n*/\n:host {\n  --wj-menu-label-font-size: .75rem;\n  --wj-menu-label-weight: 600;\n  --wj-letter-spacing: .025rem;\n  --wj-menu-label-color: var(--wj-color-contrast-6);\n  --wj-padding-top: 0;\n  --wj-padding-bottom: 0;\n  --wj-padding-start: 1.5rem;\n  --wj-padding-end: 1.5rem;\n}\n:host .native-menu-label {\n  font-size: var(--wj-menu-label-font-size);\n  display: inline-block;\n  font-weight: var(--wj-menu-label-weight);\n  letter-spacing: var(--wj-letter-spacing);\n  color: var(--wj-menu-label-color);\n  padding: var(--wj-padding-top) var(--wj-padding-start) var(--wj-padding-bottom) var(--wj-padding-end);\n}";
+class MenuLabel extends WJElement {
   constructor() {
     super();
-    l(this, "className", "MenuLabel");
-    this.hasSubmenu = m.hasSlot(this, "submenu");
+    __publicField(this, "className", "MenuLabel");
+    this.hasSubmenu = WjElementUtils.hasSlot(this, "submenu");
   }
   static get cssStyleSheet() {
-    return d;
+    return styles;
   }
   static get observedAttributes() {
     return [];
@@ -22,12 +22,16 @@ class u extends i {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  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;
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let slot = document.createElement("slot");
+    slot.setAttribute("part", "base");
+    slot.classList.add("native-menu-label");
+    fragment.appendChild(slot);
+    return fragment;
   }
 }
-customElements.get("wj-menu-label") || window.customElements.define("wj-menu-label", u);
+customElements.get("wj-menu-label") || window.customElements.define("wj-menu-label", MenuLabel);
 export {
-  u as MenuLabel
+  MenuLabel
 };

package/dist/wj-menu.js

@@ -1,17 +1,19 @@
-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";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import WJElement from "./wj-element.js";
 import "./wj-store.js";
-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 s {
+const styles = "/*\n[ Wj Menu ]\n*/\n:host {\n  --wj-menu-background: var(--wj-background);\n  --wj-menu-border-width: 1px;\n  --wj-menu-border-style: solid;\n  --wj-menu-border-color: var(--wj-border-color);\n  --wj-menu-border-radius: 4px;\n  --wj-menu-padding-top: .5rem;\n  --wj-menu-padding-bottom: .5rem;\n  --wj-menu-padding-inline: 0;\n  --wj-menu-margin-top: ;\n  --wj-menu-margin-bottom: 0;\n  --wj-menu-margin-inline: 0;\n  --wj-menu-z-index: 900;\n  display: none;\n  background: var(--wj-menu-background);\n  position: relative;\n  border-width: var(--wj-menu-border-width);\n  border-style: var(--wj-menu-border-style);\n  border-color: var(--wj-menu-border-color);\n  z-index: var(--wj-menu-z-index);\n  border-radius: var(--wj-border-radius-small);\n  padding-top: var(--wj-menu-padding-top);\n  padding-bottom: var(--wj-menu-padding-bottom);\n  padding-inline: var(--wj-menu-padding-inline);\n  margin-top: var(--wj-menu-margin-top);\n  margin-bottom: var(--wj-menu-margin-bottom);\n  margin-inline: var(--wj-menu-margin-inline);\n  overflow: auto;\n  overscroll-behavior: none;\n}\n:host .native-menu {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n:host .native-menu ::slotted(wj-button) {\n  margin: 0;\n}\n\n:host(.wj-menu-collapse) {\n  max-width: 70px !important;\n}\n\n:host([variant=context]) {\n  display: block !important;\n  margin-left: var(--wj-menu-submenu-offset);\n}\n\n:host([variant=megamenu]) .native-menu {\n  flex-direction: row;\n  align-items: end;\n  flex-wrap: nowrap;\n}\n:host([variant=megamenu]) .native-menu .check-icon {\n  display: none;\n}\n\n:host([active]) {\n  display: flex !important;\n}";
+class Menu extends WJElement {
   constructor() {
     super();
-    a(this, "className", "Menu");
+    __publicField(this, "className", "Menu");
   }
   static get cssStyleSheet() {
-    return u;
+    return styles;
   }
   static get observedAttributes() {
     return ["active", "collapse"];
@@ -19,16 +21,20 @@ class l extends s {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  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");
-    r.classList.add("native-menu");
-    let i = document.createElement("slot");
-    return r.appendChild(i), o.appendChild(r), o;
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    this.classList.remove("wj-menu-collapse");
+    if (this.hasAttribute("collapse"))
+      this.classList.add("wj-menu-collapse");
+    let native = document.createElement("div");
+    native.classList.add("native-menu");
+    let slot = document.createElement("slot");
+    native.appendChild(slot);
+    fragment.appendChild(native);
+    return fragment;
   }
 }
-customElements.get("wj-menu") || window.customElements.define("wj-menu", l);
+customElements.get("wj-menu") || window.customElements.define("wj-menu", Menu);
 export {
-  l as Menu
+  Menu
 };