easy-component-ui 3.0.15 → 4.0.3

package/dist/components/ea-menu.js

@@ -1,393 +1,392 @@
-var I = Object.defineProperty;
-var R = (s) => {
-  throw TypeError(s);
+import { E as g } from "../core/EaBase.ts.js";
+import { q as d, a as u, C as E, l as _, p as x } from "../core/decorator.js";
+import { E as w } from "../utils/Enum.ts.js";
+import { s as D } from "../css/ea-menu.style.js";
+import { c as A } from "../utils/bem.ts.js";
+import { s as O } from "../css/ea-menu-item.style.js";
+import { s as k } from "../css/ea-menu-item-group.style.js";
+import { s as N } from "../css/ea-sub-menu.style.js";
+import "./ea-icon.js";
+var q = Object.defineProperty, T = Object.getOwnPropertyDescriptor, p = (t, e, i, o) => {
+  for (var s = o > 1 ? void 0 : o ? T(e, i) : e, n = t.length - 1, l; n >= 0; n--)
+    (l = t[n]) && (s = (o ? l(e, i, s) : l(s)) || s);
+  return o && s && q(e, i, s), s;
 };
-var N = (s, i, e) => i in s ? I(s, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[i] = e;
-var p = (s, i, e) => N(s, typeof i != "symbol" ? i + "" : i, e), H = (s, i, e) => i.has(s) || R("Cannot " + e);
-var t = (s, i, e) => (H(s, i, "read from private field"), e ? e.call(s) : i.get(s)), r = (s, i, e) => i.has(s) ? R("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, e), a = (s, i, e, o) => (H(s, i, "write to private field"), o ? o.call(s, e) : i.set(s, e), e);
-import { B as q } from "./Base.js";
-import { s as P } from "../css/ea-menu.style.js";
-import { s as T } from "../css/ea-menu-item.style.js";
-import { s as U } from "../css/ea-menu-item-group.style.js";
-import { s as z } from "../css/ea-sub-menu.style.js";
-var u, c, E, v, x;
-class D extends q {
+const $ = "ea-menu", C = A($);
+let c = class extends g {
   constructor() {
-    super();
-    /** @type {HTMLElement} */
-    r(this, u);
-    /** @type {AbortController} */
-    r(this, c, new AbortController());
-    p(this, "state", this.properties({
-      mode: {
-        type: ["horizontal", "vertical"],
-        default: "vertical",
-        observer: (e) => {
-          t(this, E).call(this, e), this.updateContainerClasslist();
-        }
-      },
-      "background-color": {
-        type: String,
-        default: "#ffffff",
-        observer: (e) => {
-          t(this, u).style.setProperty("--ea-menu-bg-color", e);
-        }
-      },
-      "text-color": {
-        type: String,
-        default: "#303133",
-        observer: (e) => {
-          t(this, u).style.setProperty("--ea-menu-text-color", e);
-        }
-      },
-      "active-text-color": {
-        type: String,
-        default: "#409eff",
-        observer: (e) => {
-          t(this, u).style.setProperty(
-            "--ea-menu-active-text-color",
-            e
-          );
-        }
-      },
-      "default-active": {
-        type: String,
-        default: "",
-        observer: () => {
-        }
-      },
-      // TODO: 没写😋
-      collapse: {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-        }
-      }
-      // TODO: 没写disabled😋
-    }));
-    /**
-     * 更新子菜单模式
-     * @param {string} mode
-     */
-    r(this, E, (e) => {
-      this.querySelectorAll("ea-sub-menu").forEach((o) => {
-        o.setAttribute("mode", e);
+    super(...arguments), this.mode = "vertical", this.backgroundColor = "#ffffff", this.textColor = "#303133", this.activeTextColor = "#409eff", this.defaultActive = "", this.active = "", this.collapse = !1, this._updateChildrenMode = (t) => {
+      this.querySelectorAll("ea-sub-menu").forEach((e) => {
+        e.setAttribute("mode", t);
       });
-    });
-    /**
-     * 处理菜单项点击事件
-     * @param {MouseEvent} e
-     */
-    r(this, v, (e) => {
-      const o = [...this.querySelectorAll("ea-menu-item")], l = [...this.querySelectorAll("ea-sub-menu")], b = e.target.closest("ea-menu-item");
-      if (e.target.closest("ea-sub-menu") || b) {
-        const L = (B) => B.removeAttribute("active");
-        o.forEach(L), l.forEach(L);
+    }, this._handleSubMenuClick = (t) => {
+      const i = t.detail || {};
+      if (i.itemIndex && i.target) {
+        if (i.target.hasAttribute("disabled")) return;
+        this.active = i.itemIndex, this.emit("select", {
+          detail: {
+            index: i.itemIndex,
+            target: i.target
+          }
+        });
       }
-      b && (b.toggleAttribute("active", !0), this.emit("select", {
-        detail: {
-          index: b.index || b.getAttribute("index"),
-          target: b
-        }
-      }));
-    });
-    /**
-     * 初始化默认激活项
-     */
-    r(this, x, () => {
-      const e = this.querySelector(
-        `ea-menu-item[index="${this["default-active"]}"]`
+    }, this._activateItem = (t) => {
+      if (!t) return;
+      const e = [...this.querySelectorAll("ea-menu-item")], i = [...this.querySelectorAll("ea-sub-menu")];
+      e.forEach((n) => n.removeAttribute("active")), i.forEach((n) => n.removeAttribute("active"));
+      const o = this.querySelector(
+        `ea-menu-item[index="${t}"]`
       );
-      e && e.click();
-    });
-    this.stylesheet = P, this.$render();
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "mode",
-      "background-color",
-      "text-color",
-      "active-text-color",
-      "collapse",
-      "default-active"
-    ];
+      if (!o) return;
+      o.setAttribute("active", "true");
+      let s = o.parentElement;
+      for (; s && (s.tagName === "EA-SUB-MENU" && s.setAttribute("active", "true"), s !== this); )
+        s = s.parentElement;
+    }, this._initDefaultActiveItem = () => {
+      const t = this.querySelector(
+        `ea-menu-item[index="${this.defaultActive}"]`
+      );
+      t && t.click();
+    };
   }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
   updateContainerClasslist() {
-    const e = this.computedClasslist(
-      "ea-menu",
-      {
-        ["--" + this.mode]: this.mode
-      },
-      {}
-    );
-    return t(this, u).className = e, e;
+    const t = C({
+      [this.mode]: !0
+    });
+    return this._container && (this._container.className = t), t;
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <ul class='ea-menu' role="menubar" part='container'>
+  html() {
+    return `
+      <ul class="${C()}" role="menubar" aria-label="Menu" part="container">
         <slot></slot>
       </ul>
-    `, a(this, u, this.shadowRoot.querySelector(".ea-menu")), this.updateContainerClasslist();
-  }
-  connectedCallback() {
-    var e;
-    super.connectedCallback(), (e = t(this, c)) == null || e.abort(), a(this, c, new AbortController()), this.addEventListener("click", t(this, v), {
-      signal: t(this, c).signal
-    }), this.addEventListener("ea-sub-menu-click", t(this, v), {
-      signal: t(this, c).signal
-    }), t(this, x).call(this);
-  }
-  $beforeUnmounted() {
-    t(this, c).abort();
-  }
-}
-u = new WeakMap(), c = new WeakMap(), E = new WeakMap(), v = new WeakMap(), x = new WeakMap();
-window.customElements.get("ea-menu") || window.customElements.define("ea-menu", D);
-var f;
-class G extends q {
-  constructor() {
-    super();
-    /** @type {HTMLElement} */
-    r(this, f);
-    p(this, "state", this.properties({
-      index: {
-        type: String,
-        default: "",
-        observer: () => {
-        }
-      },
-      disabled: {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      active: {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-          this.updateContainerClasslist();
-        }
+    `;
+  }
+  _handleKeydown(t) {
+    var o;
+    const e = t.target;
+    if (t.key === "Escape") {
+      this.querySelectorAll("ea-sub-menu[open]").forEach((s) => {
+        s.removeAttribute("open");
+      });
+      return;
+    }
+    const i = (o = e.closest) == null ? void 0 : o.call(e, "ea-menu-item");
+    if (i) {
+      if (t.key === "ArrowUp" && this.mode === "vertical") {
+        t.preventDefault(), this._focusPrevItem(i);
+        return;
       }
-    }));
-    this.stylesheet = T, this.$render();
+      if (t.key === "ArrowDown" && this.mode === "vertical") {
+        t.preventDefault(), this._focusNextItem(i);
+        return;
+      }
+      if (t.key === "ArrowLeft" && this.mode === "horizontal") {
+        t.preventDefault(), this._focusPrevItem(i);
+        return;
+      }
+      if (t.key === "ArrowRight" && this.mode === "horizontal") {
+        t.preventDefault(), this._focusNextItem(i);
+        return;
+      }
+      if (t.key === "Home") {
+        t.preventDefault();
+        const s = this._getTopLevelItems();
+        s.length > 0 && s[0].focus();
+        return;
+      }
+      if (t.key === "End") {
+        t.preventDefault();
+        const s = this._getTopLevelItems();
+        s.length > 0 && s[s.length - 1].focus();
+        return;
+      }
+    }
+  }
+  /** 获取顶层菜单项（ea-menu-item 宿主元素 + ea-sub-menu 宿主元素），排除 disabled */
+  _getTopLevelItems() {
+    const t = [], e = this._container.querySelector("slot");
+    if (!e) return t;
+    const i = e.assignedElements();
+    for (const o of i)
+      (o.tagName === "EA-MENU-ITEM" || o.tagName === "EA-SUB-MENU") && (o.hasAttribute("disabled") || t.push(o));
+    return t;
   }
-  static get observedAttributes() {
-    return [...super.observedAttributes, "index", "disabled", "active"];
+  /** 聚焦上一个顶层菜单项 */
+  _focusPrevItem(t) {
+    const e = this._getTopLevelItems(), i = e.indexOf(t);
+    i > 0 && e[i - 1].focus();
+  }
+  /** 聚焦下一个顶层菜单项 */
+  _focusNextItem(t) {
+    const e = this._getTopLevelItems(), i = e.indexOf(t);
+    i >= 0 && i < e.length - 1 && e[i + 1].focus();
+  }
+  _handleMenuItemClick(t) {
+    const e = t.target.closest(
+      "ea-menu-item"
+    ), i = t.target.closest("ea-sub-menu");
+    if (e) {
+      if (e.hasAttribute("disabled")) return;
+      this.active = e.getAttribute("index") || "", this.emit("select", {
+        detail: {
+          index: e.getAttribute("index") || "",
+          target: e
+        }
+      });
+    } else if (i) {
+      const o = [...this.querySelectorAll("ea-menu-item")], s = [
+        ...this.querySelectorAll("ea-sub-menu")
+      ], n = (l) => l.removeAttribute("active");
+      o.forEach(n), s.forEach(n);
+    }
+  }
+  $mount() {
+    var t;
+    (t = this._abortController) == null || t.abort(), this._abortController = new AbortController(), this.addEventListener("ea-sub-menu-click", this._handleSubMenuClick, {
+      signal: this._abortController.signal
+    }), this.updateContainerClasslist(), this.mode === "vertical" && this._container.setAttribute("aria-orientation", "vertical"), this._initDefaultActiveItem();
+  }
+  $beforeUnmount() {
+    var t;
+    (t = this._abortController) == null || t.abort();
+  }
+};
+p([
+  d(C.cb())
+], c.prototype, "_container", 2);
+p([
+  u({
+    type: w(["horizontal", "vertical"]),
+    default: "vertical",
+    observer(t) {
+      this._updateChildrenMode(t), this.updateContainerClasslist();
+    }
+  })
+], c.prototype, "mode", 2);
+p([
+  u({
+    type: String,
+    default: "#ffffff",
+    observer(t) {
+      this._container && this._container.style.setProperty("--ea-menu-bg-color", t);
+    }
+  })
+], c.prototype, "backgroundColor", 2);
+p([
+  u({
+    type: String,
+    default: "#303133",
+    observer(t) {
+      this._container && this._container.style.setProperty("--ea-menu-text-color", t);
+    }
+  })
+], c.prototype, "textColor", 2);
+p([
+  u({
+    type: String,
+    default: "#409eff",
+    observer(t) {
+      this._container && this._container.style.setProperty(
+        "--ea-menu-active-text-color",
+        t
+      );
+    }
+  })
+], c.prototype, "activeTextColor", 2);
+p([
+  u({
+    type: String,
+    default: ""
+  })
+], c.prototype, "defaultActive", 2);
+p([
+  u({
+    type: String,
+    default: "",
+    observer(t) {
+      this._activateItem(t);
+    }
+  })
+], c.prototype, "active", 2);
+p([
+  u({
+    type: Boolean,
+    default: !1
+  })
+], c.prototype, "collapse", 2);
+p([
+  _("keydown")
+], c.prototype, "_handleKeydown", 1);
+p([
+  _("click")
+], c.prototype, "_handleMenuItemClick", 1);
+c = p([
+  E($, { styles: [D] })
+], c);
+var L = Object.defineProperty, B = Object.getOwnPropertyDescriptor, b = (t, e, i, o) => {
+  for (var s = o > 1 ? void 0 : o ? B(e, i) : e, n = t.length - 1, l; n >= 0; n--)
+    (l = t[n]) && (s = (o ? l(e, i, s) : l(s)) || s);
+  return o && s && L(e, i, s), s;
+};
+const P = "ea-menu-item", I = A(P);
+let m = class extends g {
+  constructor() {
+    super(...arguments), this.index = "", this.disabled = !1, this.active = !1;
   }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
   updateContainerClasslist() {
-    const e = this.computedClasslist(
-      "ea-menu-item",
+    const t = I(
       {},
       {
         disabled: this.disabled,
         active: this.active
       }
     );
-    return t(this, f).className = e, e;
+    return this._container && (this._container.className = t), t;
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <li class='ea-menu-item' role="menuitem" part='container'>
+  html() {
+    return `
+      <li class="${I()}" part="container">
         <slot></slot>
       </li>
-    `, a(this, f, this.shadowRoot.querySelector(".ea-menu-item"));
+    `;
   }
-  connectedCallback() {
-    super.connectedCallback();
+  $mount() {
+    this.tabIndex = this.disabled ? -1 : 0, this.setAttribute("role", "menuitem"), this.updateContainerClasslist();
   }
-}
-f = new WeakMap();
-window.customElements.get("ea-menu-item") || window.customElements.define("ea-menu-item", G);
-var S, C, $;
-class V extends q {
-  constructor() {
-    super();
-    /** @type {HTMLElement} */
-    r(this, S);
-    /** @type {HTMLSlotElement} */
-    r(this, C);
-    /** @type {AbortController} */
-    r(this, $, new AbortController());
-    p(this, "state", this.properties({
-      title: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          t(this, C).textContent = e;
-        }
-      }
-    }));
-    this.stylesheet = U, this.$render();
+  _handleKeydown(t) {
+    this.disabled || (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.click());
   }
-  static get observedAttributes() {
-    return [...super.observedAttributes, "title"];
+};
+b([
+  d(I.cb())
+], m.prototype, "_container", 2);
+b([
+  u({
+    type: String,
+    default: ""
+  })
+], m.prototype, "index", 2);
+b([
+  u({
+    type: Boolean,
+    default: !1,
+    a11y: {
+      ariaAttr: "aria-disabled",
+      map: (t) => String(t)
+    },
+    observer() {
+      this.tabIndex = this.disabled ? -1 : 0, this.updateContainerClasslist();
+    }
+  })
+], m.prototype, "disabled", 2);
+b([
+  u({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], m.prototype, "active", 2);
+b([
+  _("keydown")
+], m.prototype, "_handleKeydown", 1);
+m = b([
+  E(P, { styles: [O] })
+], m);
+var F = Object.defineProperty, H = Object.getOwnPropertyDescriptor, y = (t, e, i, o) => {
+  for (var s = o > 1 ? void 0 : o ? H(e, i) : e, n = t.length - 1, l; n >= 0; n--)
+    (l = t[n]) && (s = (o ? l(e, i, s) : l(s)) || s);
+  return o && s && F(e, i, s), s;
+};
+const S = "ea-menu-item-group", v = A(S);
+let f = class extends g {
+  constructor() {
+    super(...arguments), this._uniqueId = f._instanceCount++, this.groupTitle = "";
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <div class='ea-menu-item-group' part='container'>
-        <header class='ea-menu-item-group__title' part='title'>
-          <slot name="title">${this.title}</slot>
+  html() {
+    return `
+      <div class="${v()}" part="container">
+        <header class="${v.e("title")}" part="title">
+          <slot name="title">${this.groupTitle}</slot>
         </header>
-        <div class='ea-menu-item-group__content' part='content'>
+        <div class="${v.e("content")}" part="content" role="group">
           <slot></slot>
         </div>
       </div>
-    `, a(this, S, this.shadowRoot.querySelector(".ea-menu-item-group")), a(this, C, this.shadowRoot.querySelector("slot[name='title']"));
+    `;
   }
-  connectedCallback() {
-    super.connectedCallback();
+  /** 设置 ARIA 关联属性 */
+  _setupAria() {
+    const t = `ea-menu-item-group-${this._uniqueId}`;
+    this._titleEl.setAttribute("id", `${t}-title`), this._contentEl.setAttribute("aria-labelledby", `${t}-title`);
   }
-  $beforeUnmounted() {
-    t(this, $).abort();
+  $mount() {
+    this._setupAria();
   }
-}
-S = new WeakMap(), C = new WeakMap(), $ = new WeakMap();
-window.customElements.get("ea-menu-item-group") || window.customElements.define("ea-menu-item-group", V);
-var g, y, w, n, m, h, d, k, M, _, A;
-class j extends q {
+};
+f._instanceCount = 0;
+y([
+  d(v.ce("title"))
+], f.prototype, "_titleEl", 2);
+y([
+  d(v.ce("content"))
+], f.prototype, "_contentEl", 2);
+y([
+  d('slot[name="title"]')
+], f.prototype, "_titleSlot", 2);
+y([
+  u({
+    type: String,
+    default: "",
+    observer(t) {
+      this._titleSlot && (this._titleSlot.textContent = t);
+    }
+  })
+], f.prototype, "groupTitle", 2);
+f = y([
+  E(S, { styles: [k] })
+], f);
+var R = Object.defineProperty, U = Object.getOwnPropertyDescriptor, a = (t, e, i, o) => {
+  for (var s = o > 1 ? void 0 : o ? U(e, i) : e, n = t.length - 1, l; n >= 0; n--)
+    (l = t[n]) && (s = (o ? l(e, i, s) : l(s)) || s);
+  return o && s && R(e, i, s), s;
+};
+const M = "ea-sub-menu", h = A(M);
+let r = class extends g {
   constructor() {
-    super();
-    /** @type {HTMLElement} */
-    r(this, g);
-    /** @type {HTMLElement} */
-    r(this, y);
-    /** @type {HTMLSlotElement} */
-    r(this, w);
-    /** @type {HTMLElement} */
-    r(this, n);
-    /** @type {AbortController} */
-    r(this, m, new AbortController());
-    /** @type {AbortController} */
-    r(this, h, new AbortController());
-    /** @type {AbortController} */
-    r(this, d, new AbortController());
-    p(this, "state", this.properties({
-      open: {
-        props: !0,
-        type: Boolean,
-        default: !1,
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      index: {
-        type: String,
-        default: "",
-        observer: () => {
-        }
-      },
-      disabled: {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      active: {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      mode: {
-        type: ["horizontal", "vertical"],
-        default: "vertical",
-        observer: (e) => {
-          t(this, A).call(this, e), this.updateContainerClasslist();
-        }
-      },
-      label: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          t(this, w).textContent = e;
-        }
-      }
-    }));
-    /**
-     * 菜单项点击事件
-     * @param {MouseEvent} e
-     */
-    r(this, k, (e) => {
-      e.stopImmediatePropagation(), e.preventDefault();
-      const o = e.target.closest("ea-menu-item"), l = this.closest("ea-sub-menu") === this ? this.parentElement.closest("ea-sub-menu") : this.closest("ea-sub-menu");
-      o && (this.emit("ea-sub-menu-click", {
-        detail: { index: this.index },
-        bubbles: !0
-      }), this.setAttribute("active", "true"), l && l.setAttribute("active", "true"), o.setAttribute("active", "true"));
-    });
-    /**
-     * 鼠标悬停事件
-     * @param {MouseEvent} e
-     */
-    r(this, M, () => {
-      var o;
-      (o = t(this, h)) == null || o.abort(), a(this, h, new AbortController()), this.open = !0;
-      const e = () => {
-        var l;
-        this.open = !1, (l = t(this, h)) == null || l.abort();
+    super(...arguments), this._uniqueId = r._instanceCount++, this._focusoutRafId = null, this.open = !1, this._contentOpen = !1, this.index = "", this.disabled = !1, this.active = !1, this.mode = "vertical", this.label = "", this._onHoverEvent = () => {
+      var e;
+      (e = this._dropdownAbortController) == null || e.abort(), this._dropdownAbortController = new AbortController(), this.open = !0;
+      const t = () => {
+        var i;
+        this.open = !1, (i = this._dropdownAbortController) == null || i.abort();
       };
-      this.addEventListener("mouseleave", e, {
-        signal: t(this, h).signal
+      this.addEventListener("mouseleave", t, {
+        signal: this._dropdownAbortController.signal
       });
-    });
-    /**
-     * 垂直菜单折叠事件
-     */
-    r(this, _, () => {
-      this.open = !this.open, this.open || (t(this, n).style.setProperty("--ea-sub-menu-transition", "none"), t(this, n).offsetHeight, t(this, n).style.height = `${t(this, n).scrollHeight}px`, t(this, n).offsetHeight, t(this, n).style.removeProperty("--ea-sub-menu-transition")), t(this, n).style.height = `${this.open ? t(this, n).scrollHeight : 0}px`, t(this, n).addEventListener(
+    }, this._onVerticalCollapseEvent = () => {
+      this.disabled || (this.open = !this.open, this.open || (this._contentEl.style.setProperty("--ea-sub-menu-transition", "none"), this._contentEl.offsetHeight, this._contentEl.style.height = `${this._contentEl.scrollHeight}px`, this._contentEl.offsetHeight, this._contentEl.style.removeProperty("--ea-sub-menu-transition")), this._contentEl.style.height = `${this.open ? this._contentEl.scrollHeight : 0}px`, this._contentEl.addEventListener(
         "transitionend",
         () => {
-          t(this, n).style.height = this.open ? "100%" : 0;
+          this._contentEl.style.height = this.open ? "100%" : "0";
         },
         { once: !0 }
-      );
-    });
-    /**
-     * 菜单模式切换
-     * @param {string} [mode]
-     */
-    r(this, A, (e = this.mode) => {
-      var o;
-      (o = t(this, d)) == null || o.abort(), a(this, d, new AbortController()), e === "vertical" ? t(this, y).addEventListener("click", t(this, _), {
-        signal: t(this, d).signal
-      }) : this.addEventListener("mouseenter", t(this, M), {
-        signal: t(this, d).signal
+      ));
+    }, this._handleModeChange = (t = this.mode) => {
+      var e;
+      (e = this._modeAbortController) == null || e.abort(), this._modeAbortController = new AbortController(), t === "vertical" ? this._titleEl.addEventListener("click", this._onVerticalCollapseEvent, {
+        signal: this._modeAbortController.signal
+      }) : this.addEventListener("mouseenter", this._onHoverEvent, {
+        signal: this._modeAbortController.signal
       });
-    });
-    this.stylesheet = z, this.$render();
+    };
   }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "active",
-      "index",
-      "disabled",
-      "mode",
-      "label"
-    ];
-  }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
   updateContainerClasslist() {
-    const e = this.computedClasslist(
-      "ea-sub-menu",
+    const t = h(
       {
-        ["--" + this.mode]: this.mode
+        [this.mode]: !!this.mode
       },
       {
         disabled: this.disabled,
@@ -395,39 +394,267 @@ class j extends q {
         open: this.open
       }
     );
-    return t(this, g).className = e, e;
+    return this._container && (this._container.className = t), t;
   }
-  $render() {
-    var o;
-    const e = (o = this.parentElement) == null ? void 0 : o.closest("ea-sub-menu");
-    this.shadowRoot.innerHTML = `
-      <div class='ea-sub-menu' part='container'>
-        <header class='ea-sub-menu__title' part='title'>
-          <slot name='title'></slot>
-          <ea-icon name="${e ? "angle-right" : "angle-down"}" class='ea-sub-menu__arrow' part='arrow'></ea-icon>
+  html() {
+    return `
+      <div class="${h()}" part="container">
+        <header class="${h.e("title")}" part="title" tabindex="-1" role="menuitem">
+          <slot name="title"></slot>
+          <ea-icon name="angle-down" class="${h.e("arrow")}" part="arrow"></ea-icon>
         </header>
-        <ul class='ea-sub-menu__content' part='content'>
+        <ul class="${h.e("content")}" part="content" role="menu">
           <slot></slot>
         </ul>
       </div>
-    `, a(this, g, this.shadowRoot.querySelector(".ea-sub-menu")), a(this, y, this.shadowRoot.querySelector(".ea-sub-menu__title")), a(this, w, this.shadowRoot.querySelector("slot[name='title']")), a(this, n, this.shadowRoot.querySelector(".ea-sub-menu__content")), this.updateContainerClasslist();
+    `;
+  }
+  _handleTitleKeydown(t) {
+    if (!this.disabled) {
+      if (t.key === "Enter" || t.key === " ") {
+        t.preventDefault(), t.stopPropagation(), this.open ? this.open = !1 : (this.open = !0, this.mode === "vertical" && this._animateContentOpen());
+        return;
+      }
+      if (t.key === "ArrowDown") {
+        t.preventDefault(), t.stopPropagation(), this.open || (this.open = !0, this.mode === "vertical" && this._animateContentOpen()), this._focusFirstItem();
+        return;
+      }
+      if (t.key === "ArrowRight" && this.mode === "horizontal") {
+        t.preventDefault(), t.stopPropagation(), this.open || (this.open = !0), this._focusFirstItem();
+        return;
+      }
+      if (t.key === "Escape" && this.open) {
+        t.preventDefault(), t.stopPropagation(), this.open = !1;
+        return;
+      }
+    }
+  }
+  /** 垂直模式展开内容区域的高度动画 */
+  _animateContentOpen() {
+    this.mode !== "vertical" || !this._contentEl || (this._contentEl.style.height = `${this._contentEl.scrollHeight}px`, this._contentEl.addEventListener(
+      "transitionend",
+      () => {
+        this._contentEl.style.height = "100%";
+      },
+      { once: !0 }
+    ));
+  }
+  _handleContentKeydown(t) {
+    var o;
+    const e = t.target, i = (o = e.closest) == null ? void 0 : o.call(e, "ea-menu-item");
+    if (i) {
+      if (t.key === "Escape") {
+        t.preventDefault(), t.stopPropagation(), this.open = !1, this._titleEl.focus();
+        return;
+      }
+      if (t.key === "ArrowLeft" && this.mode === "vertical" && this.open) {
+        t.preventDefault(), t.stopPropagation(), this.open = !1, this._titleEl.focus();
+        return;
+      }
+      if (t.key === "ArrowUp") {
+        t.preventDefault(), t.stopPropagation(), this._focusPrevItem(i);
+        return;
+      }
+      if (t.key === "ArrowDown") {
+        t.preventDefault(), t.stopPropagation(), this._focusNextItem(i);
+        return;
+      }
+      if (t.key === "ArrowLeft" && this.mode === "horizontal") {
+        t.preventDefault(), t.stopPropagation(), this._focusPrevItem(i);
+        return;
+      }
+      if (t.key === "ArrowRight" && this.mode === "horizontal") {
+        t.preventDefault(), t.stopPropagation(), this._focusNextItem(i);
+        return;
+      }
+      if (t.key === "Home") {
+        t.preventDefault(), t.stopPropagation();
+        const s = this._getSubMenuItems();
+        s.length > 0 && s[0].focus();
+        return;
+      }
+      if (t.key === "End") {
+        t.preventDefault(), t.stopPropagation();
+        const s = this._getSubMenuItems();
+        s.length > 0 && s[s.length - 1].focus();
+        return;
+      }
+    }
+  }
+  /** 聚焦子菜单中的第一个菜单项 */
+  _focusFirstItem() {
+    const t = this._getSubMenuItems();
+    t.length !== 0 && queueMicrotask(() => t[0].focus());
   }
-  connectedCallback() {
-    var e;
-    super.connectedCallback(), (e = t(this, m)) == null || e.abort(), a(this, m, new AbortController()), this.addEventListener("click", t(this, k), {
-      signal: t(this, m).signal
-    }), t(this, A).call(this), this.updateContainerClasslist();
+  /** 聚焦子菜单中的下一个菜单项 */
+  _focusNextItem(t) {
+    const e = this._getSubMenuItems();
+    if (e.length === 0) return;
+    const o = e.indexOf(t) + 1;
+    o < e.length && e[o].focus();
   }
-  $beforeUnmounted() {
-    var e, o, l;
-    (e = t(this, m)) == null || e.abort(), (o = t(this, h)) == null || o.abort(), (l = t(this, d)) == null || l.abort();
+  /** 聚焦子菜单中的上一个菜单项 */
+  _focusPrevItem(t) {
+    const e = this._getSubMenuItems();
+    if (e.length === 0) return;
+    const i = e.indexOf(t);
+    i > 0 ? e[i - 1].focus() : this._titleEl.focus();
   }
-}
-g = new WeakMap(), y = new WeakMap(), w = new WeakMap(), n = new WeakMap(), m = new WeakMap(), h = new WeakMap(), d = new WeakMap(), k = new WeakMap(), M = new WeakMap(), _ = new WeakMap(), A = new WeakMap();
-window.customElements.get("ea-sub-menu") || window.customElements.define("ea-sub-menu", j);
+  /** 获取子菜单内所有菜单项 */
+  _getSubMenuItems() {
+    return [
+      ...this.querySelectorAll("ea-menu-item:not([disabled])")
+    ];
+  }
+  _handleFocusout() {
+    this.open && (this._focusoutRafId = requestAnimationFrame(() => {
+      if (this._focusoutRafId = null, !this.open) return;
+      const t = document.activeElement;
+      t && (this === t || this.contains(t)) || (this.open = !1);
+    }));
+  }
+  _handleFocusin(t) {
+    this._focusoutRafId !== null && (cancelAnimationFrame(this._focusoutRafId), this._focusoutRafId = null), t.target === this && this._titleEl && this._titleEl.focus();
+  }
+  _handleMenuItemClick(t) {
+    var o;
+    if (t.stopImmediatePropagation(), t.preventDefault(), this.disabled) return;
+    const e = t.target.closest("ea-menu-item"), i = this.closest("ea-sub-menu") === this ? (o = this.parentElement) == null ? void 0 : o.closest("ea-sub-menu") : this.closest("ea-sub-menu");
+    e && (e.hasAttribute("disabled") || (this.emit("ea-sub-menu-click", {
+      detail: {
+        index: this.index,
+        itemIndex: e.getAttribute("index") || "",
+        target: e
+      },
+      bubbles: !0
+    }), this.setAttribute("active", "true"), i && i.setAttribute("active", "true"), e.setAttribute("active", "true")));
+  }
+  /** 设置折叠内容的 inert 状态：折叠时阻止焦点进入 */
+  _updateContentInert() {
+    this._contentOpen = this.open;
+  }
+  /** 设置 ARIA 关联属性 */
+  _setupAria() {
+    const t = `ea-sub-menu-${this._uniqueId}`;
+    this._titleEl.setAttribute("id", `${t}-title`), this._titleEl.setAttribute("aria-controls", `${t}-content`), this._titleEl.setAttribute("aria-haspopup", "menu"), this._titleEl.setAttribute("aria-expanded", String(this.open)), this._contentEl.setAttribute("id", `${t}-content`), this._contentEl.setAttribute("aria-labelledby", `${t}-title`);
+  }
+  $mount() {
+    this.tabIndex = 0, this._handleModeChange(), this.updateContainerClasslist(), this._updateContentInert(), this._setupAria();
+  }
+  $beforeUnmount() {
+    var t, e;
+    (t = this._dropdownAbortController) == null || t.abort(), (e = this._modeAbortController) == null || e.abort();
+  }
+};
+r._instanceCount = 0;
+a([
+  d(h.cb())
+], r.prototype, "_container", 2);
+a([
+  d(h.ce("title"))
+], r.prototype, "_titleEl", 2);
+a([
+  d('slot[name="title"]')
+], r.prototype, "_titleSlot", 2);
+a([
+  d(h.ce("content"))
+], r.prototype, "_contentEl", 2);
+a([
+  d(h.ce("arrow"))
+], r.prototype, "_arrowEl", 2);
+a([
+  x({
+    type: Boolean,
+    default: !1,
+    a11y: {
+      ariaAttr: "aria-expanded",
+      target: h.ce("title")
+    },
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], r.prototype, "open", 2);
+a([
+  x({
+    type: Boolean,
+    default: !1,
+    a11y: {
+      ariaAttr: "inert",
+      target: ".ea-sub-menu__content",
+      map: (t) => t ? null : ""
+    }
+  })
+], r.prototype, "_contentOpen", 2);
+a([
+  u({
+    type: String,
+    default: ""
+  })
+], r.prototype, "index", 2);
+a([
+  u({
+    type: Boolean,
+    default: !1,
+    a11y: {
+      ariaAttr: "aria-disabled",
+      map: (t) => String(t)
+    },
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], r.prototype, "disabled", 2);
+a([
+  u({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], r.prototype, "active", 2);
+a([
+  u({
+    type: w(["horizontal", "vertical"]),
+    default: "vertical",
+    observer(t) {
+      this._handleModeChange(t), this.updateContainerClasslist();
+    }
+  })
+], r.prototype, "mode", 2);
+a([
+  u({
+    type: String,
+    default: "",
+    observer(t) {
+      this._titleSlot && (this._titleSlot.textContent = t);
+    }
+  })
+], r.prototype, "label", 2);
+a([
+  _("keydown", h.ce("title"))
+], r.prototype, "_handleTitleKeydown", 1);
+a([
+  _("keydown")
+], r.prototype, "_handleContentKeydown", 1);
+a([
+  _("focusout")
+], r.prototype, "_handleFocusout", 1);
+a([
+  _("focusin")
+], r.prototype, "_handleFocusin", 1);
+a([
+  _("click")
+], r.prototype, "_handleMenuItemClick", 1);
+r = a([
+  E(M, { styles: [N] })
+], r);
+const Y = { EaMenu: c, EaMenuItem: m, EaMenuItemGroup: f, EaSubMenu: r };
 export {
-  D as EaMenu,
-  G as EaMenuItem,
-  V as EaMenuItemGroup,
-  j as EaSubMenu
+  c as EaMenu,
+  m as EaMenuItem,
+  f as EaMenuItemGroup,
+  r as EaSubMenu,
+  Y as default
 };